diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
index c81bd9f9..2ce0bd0e 100644
--- a/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
+++ b/packages/view/src/components/FilteredAuthors/FilteredAuthors.scss
@@ -6,4 +6,10 @@
   width: 100%;
   padding: 4px 6px;
   box-sizing: border-box;
+  align-items: center;
+}
+
+.selected-length {
+  font-size: 10px;
+  margin-left: 20px;
 }
diff --git a/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx b/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
index f0b0ea7c..288fcae7 100644
--- a/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
+++ b/packages/view/src/components/FilteredAuthors/FilteredAuthors.tsx
@@ -9,11 +9,13 @@ const FilteredAuthors = () => {
   const { selectedData } = useGlobalData();
   const authSrcMap = usePreLoadAuthorImg();
   const selectedClusters = getInitData(selectedData);
+  const filteredSelectedData = selectedClusters.reverse().slice(0, 9);
+  const selectedClustersLength = selectedClusters.slice(9);
 
   return (
     <div className="selected-container">
       {authSrcMap &&
-        selectedClusters.map((selectedCluster) => {
+        filteredSelectedData.reverse().map((selectedCluster) => {
           return selectedCluster.summary.authorNames.map((authorArray: string[]) => {
             return authorArray.map((authorName: string) => (
               <Author
@@ -24,6 +26,9 @@ const FilteredAuthors = () => {
             ));
           });
         })}
+      <div className="selected-length">
+        {selectedClusters.length > 9 ? `+ ${selectedClustersLength.length} more` : null}
+      </div>
     </div>
   );
 };