diff --git a/src/renderer/style.less b/src/renderer/style.less
index 27119f5b..9e400422 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -5168,7 +5168,39 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
   }
 }
 
-/* Cider */
+// Cider App
+
+.mediaitem-list-item__grid {
+  overflow-x: overlay;
+  overflow-y: hidden;
+  background: rgba(200, 200, 200, 0.05);
+  border-radius: 10px;
+  padding: var(--contentInnerPadding);
+  box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
+  .grid-body {
+    display: grid;
+    grid-auto-flow: column dense;
+    grid-template-rows: auto auto auto auto;
+    grid-gap: 0 6px;
+    padding: 2px 0;
+    justify-content: left;
+    width: 0;
+  }
+
+  .cd-mediaitem-list-item {
+    width: 350px;
+    height: 60px;
+  }
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  
+  &:hover::-webkit-scrollbar {
+    display: initial;
+    
+  }
+}
 
 .settings-page {
   padding:0px;
diff --git a/src/renderer/views/pages/artist.ejs b/src/renderer/views/pages/artist.ejs
index 07300f6f..860ef200 100644
--- a/src/renderer/views/pages/artist.ejs
+++ b/src/renderer/views/pages/artist.ejs
@@ -72,23 +72,18 @@
                                 <div class="col" style="padding:0;">
                                     <h3>{{app.getLz('term.topSongs')}}</h3>
                                 </div>
-                                <div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 10" style="padding:0;">
+                                <div class="col-auto flex-center" v-if="data.views['top-songs'].data.length >= 16" style="padding:0;">
                                     <button class="cd-btn-seeall" @click="app.showArtistView(data.id, data.attributes.name + ' - Top Songs', 'top-songs')">{{app.getLz('term.seeAll')}}</button>
                                 </div>
                             </div>
-                            <mediaitem-list-item
-                                    v-for="(song, index) in data.views['top-songs'].data.limit(topSongsExpanded ? 10 : 5)"
+                            <div class="mediaitem-list-item__grid">
+                                <div class="grid-body">
+                                    <mediaitem-list-item
+                                    v-for="(song, index) in data.views['top-songs'].data.limit(16)"
                                     :index="index"
                                     :item="song"></mediaitem-list-item>
-                            <button class="showmoreless"
-                                    @click="topSongsExpanded = !topSongsExpanded">
-                                <template v-if="!topSongsExpanded">
-                                    {{app.getLz('term.showMore')}}
-                                </template>
-                                <template v-else>
-                                    {{app.getLz('term.showLess')}}
-                                </template>
-                            </button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/renderer/views/pages/search.ejs b/src/renderer/views/pages/search.ejs
index 6c3f0c9d..469443fe 100644
--- a/src/renderer/views/pages/search.ejs
+++ b/src/renderer/views/pages/search.ejs
@@ -19,13 +19,15 @@
                         </div>
                         <div class="col-auto flex-center"
                             @click="app.showSearchView(app.search.term, 'song', app.friendlyTypes('song'))"
-                            v-if="search.results.song.data.length >= 6">
+                            v-if="search.results.song.data.length >= 12">
                             <button class="cd-btn-seeall">{{app.getLz('term.seeAll')}}</button>
                         </div>
                     </div>
-                    <div>
+                    <div class="mediaitem-list-item__grid">
+                        <div class="grid-body">
                         <mediaitem-list-item :item="item" :index="index"
-                                            v-for="(item, index) in search.results.song.data.limit(6)"></mediaitem-list-item>
+                            v-for="(item, index) in search.results.song.data.limit(12)"></mediaitem-list-item>
+                        </div>
                     </div>
                 </div>
             </div>
@@ -106,24 +108,25 @@
         data: function () {
             return {
                 app: this.$root,
-                categoriesView : [],
-                categoriesReady : false,
-            }    
+                categoriesView: [],
+                categoriesReady: false,
+            }
         },
         methods: {
             getTopResult() {
                 try {
                     return this.search.results[this.search.results.meta.results.order[0]]["data"][0]
-                } catch( error ) {
+                } catch (error) {
                     return false
                 }
             },
             async getCategories() {
-                if(this.categoriesView != [] && this.categoriesView.length > 0) {this.categoriesReady = true; return await true;} else {
-                let response = await this.app.mk.api.v3.music(`/v1/recommendations/${this.app.mk.storefrontId}?timezone=${encodeURIComponent(this.app.formatTimezoneOffset())}&name=search-landing&platform=web&extend=editorialArtwork&art%5Burl%5D=f%2Cc&types=editorial-items%2Capple-curators%2Cactivities`);
-                this.categoriesView = response.data.data;
-                this.categoriesReady = true;
-                return await true;}
+                if (this.categoriesView != [] && this.categoriesView.length > 0) { this.categoriesReady = true; return await true; } else {
+                    let response = await this.app.mk.api.v3.music(`/v1/recommendations/${this.app.mk.storefrontId}?timezone=${encodeURIComponent(this.app.formatTimezoneOffset())}&name=search-landing&platform=web&extend=editorialArtwork&art%5Burl%5D=f%2Cc&types=editorial-items%2Capple-curators%2Cactivities`);
+                    this.categoriesView = response.data.data;
+                    this.categoriesReady = true;
+                    return await true;
+                }
             }
         }
     })