diff --git a/src/renderer/less/elements.less b/src/renderer/less/elements.less
index 19f960e7..b2c7377a 100644
--- a/src/renderer/less/elements.less
+++ b/src/renderer/less/elements.less
@@ -334,6 +334,15 @@
     width: 42px;
     height: 42px;
     flex: 0 0 auto;
+    &.circle{
+      border-radius: 50%;
+      .mediaitem-artwork{
+        border-radius: 50%;
+      }
+      img {
+        border-radius: 50%;
+      }
+    }
   }
 
   &:hover {
@@ -349,6 +358,11 @@
     color: #eee;
   }
 
+  &.hintactive {
+    background: var(--keyColor);
+    border-radius: 6px;
+  }
+
   .queue-info {
     justify-content: center;
     display: flex;
@@ -392,6 +406,18 @@
   }
 }
 
+.search-hints .cd-queue-item{
+  &:hover {
+    background: var(--selected);
+    border-radius: 6px;
+  }
+  &:active {
+    background: var(--selected-click);
+    color: #eee;
+    border-radius: 6px;
+  }
+}
+
 /* horizontal media scroller */
 .cd-hmedia-scroller {
   &::-webkit-scrollbar-thumb {
diff --git a/src/renderer/main/vueapp.js b/src/renderer/main/vueapp.js
index d9aaed7c..76dffdd3 100644
--- a/src/renderer/main/vueapp.js
+++ b/src/renderer/main/vueapp.js
@@ -1903,8 +1903,18 @@ const app = new Vue({
         this.search.hints = [];
         return;
       }
-      let hints = await (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/search/hints?term=${this.search.term}`)).data.results;
-      this.search.hints = hints ? hints.terms : [];
+      let hints = await (await app.mk.api.v3.music(`/v1/catalog/${app.mk.storefrontId}/search/suggestions?term=${this.search.term}`, 
+      {"fields[albums]": "artwork,name,playParams,url,artistName,id",
+      "fields[artists]": "url,name,artwork,id",
+      "fields[songs]": "artwork,name,playParams,url,artistName,id",
+      "kinds": "terms,topResults",
+      "l": this.mklang,
+      "limit[results:terms]": 5,
+      "limit[results:topResults]": 5,
+      "omit[resource]": "autos",
+      "platform": "web",
+      "types": "activities,albums,artists,editorial-items,music-movies,playlists,record-labels,songs,stations"})).data.results;
+      this.search.hints = hints ? hints.suggestions : [];
     },
     getSongProgress() {
       if (this.playerLCD.userInteraction) {
@@ -3890,15 +3900,22 @@ const app = new Vue({
       if (e.keyCode == "40") {
         if (this.search.hints.length - 1 < this.search.cursor + 1) return;
         this.search.cursor++;
-        this.search.term = this.search.hints[this.search.cursor];
+        let item = this.search.hints[this.search.cursor]
+        this.search.term = item.content ? (item.content?.attributes?.name ?? "") :item.displayTerm;
       } else if (e.keyCode == "38") {
         if (this.search.cursor == 0) return;
         this.search.cursor--;
-        this.search.term = this.search.hints[this.search.cursor];
+        let item = this.search.hints[this.search.cursor]
+        this.search.term = item.content ? (item.content?.attributes?.name ?? "") :item.displayTerm;
       }
     },
     async searchQuery(term = this.search.term) {
       let self = this;
+      if (typeof term === "object"){
+        this.routeView(term)
+        this.search.term = ""
+        return;
+      }
       if (term == "") {
         return;
       }
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index a65f0a7e..2530ba0c 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -277,10 +277,10 @@
             <div class="app-chrome-item search">
                 <div class="search-input-container">
                     <div class="search-input--icon"></div>
-                    <input type="search" spellcheck="false" @click="$root.appRoute('search');"
+                    <input type="search" spellcheck="false" @click="$root.appRoute('search');search.showHints = true"
                            @focus="search.showHints = true"
                            @blur="setTimeout(()=>{search.showHints = false}, 300)"
-                           v-on:keyup.enter="searchQuery();search.showHints = false;search.cursor = -1" @change="$root.appRoute('search');"
+                           v-on:keyup.enter="searchQuery(search.hints[search.cursor].content ?? search.hints[search.cursor].searchTerm);search.showHints = false;search.cursor = -1" @change="$root.appRoute('search');"
                            v-on:keyup="searchCursor"
                            @input="getSearchHints()"
                            :placeholder="$root.getLz('term.search') + '...'" v-model="search.term" ref="searchInput"
@@ -288,10 +288,40 @@
 
                     <div class="search-hints-container" v-if="search.showHints && search.hints.length != 0">
                         <div class="search-hints">
-                            <button class="search-hint text-overflow-elipsis" :class="{active: (search.cursor == index)}" v-for="(hint, index) in search.hints"
-                                    @click="search.term = hint;search.showHints = false;searchQuery(hint);search.cursor = -1">
-                                {{ hint }}
+                            <button class="search-hint text-overflow-elipsis" :class="{active: (search.cursor == index)}" v-for="(hint, index) in search.hints.filter((a) => {return a.content == null})"
+                                    @click="search.term = hint.searchTerm;search.showHints = false;searchQuery(hint.searchTerm);search.cursor = -1">
+                                {{ hint.displayTerm }}
                             </button>
+                            <template v-for="(item, position) in search.hints.filter((a) => {return a.content != null})">
+                                <div class="cd-queue-item" @click="search.showHints = false;routeView(item.content);search.cursor = -1"
+                                     :class="{'hintactive': (search.cursor == position + search.hints.filter((a) => {return a.content == null}).length)}">
+                                    <div class="row">
+                                        <div class="col-auto cider-flex-center">
+                                            <div class="artwork" :class="{'circle': item.content.type == 'artists'}">
+                                                <mediaitem-artwork
+                                                        :url="item.content.attributes.artwork ? item.content.attributes.artwork.url : ''"
+                                                        :size="32"></mediaitem-artwork>
+                                            </div>
+                                        </div>
+                                        <div class="col queue-info">
+                                            <div class="queue-title text-overflow-elipsis">{{ item.content.attributes.name }}
+                                            </div>
+                                            <div class="queue-subtitle text-overflow-elipsis">{{
+                                                item.content.attributes.artistName }}
+                                            </div>
+                                        </div>
+                                        <div class="queue-explicit-icon cider-flex-center"
+                                             v-if="item.content.attributes.contentRating == 'explicit'">
+                                            <div class="explicit-icon"></div>
+                                        </div>
+                                        <!-- <div class="col queue-duration-info">
+                                            <div class="queue-duration cider-flex-center">
+                                                {{convertTimeToString(item.content.attributes.durationInMillis)}}
+                                            </div>
+                                        </div> -->
+                                    </div>
+                                </div>
+                            </template>    
                         </div>
                     </div>
                 </div>
diff --git a/src/renderer/views/components/sidebar.ejs b/src/renderer/views/components/sidebar.ejs
index baf16fe4..1c89bc6a 100644
--- a/src/renderer/views/components/sidebar.ejs
+++ b/src/renderer/views/components/sidebar.ejs
@@ -7,10 +7,10 @@
                     <input
                             type="search"
                             spellcheck="false"
-                            @click="$root.appRoute('search');"
+                            @click="$root.appRoute('search');$root.search.showHints = true"
                             @focus="$root.search.showHints = true"
                             @blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)"
-                            v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false;$root.search.cursor = -1"
+                            v-on:keyup.enter="$root.searchQuery($root.search.hints[$root.search.cursor].content ?? $root.search.hints[$root.search.cursor].searchTerm);$root.search.showHints = false;$root.search.cursor = -1"
                             v-on:keyup="$root.searchCursor"
                             @change="$root.appRoute('search');"
                             @input="$root.getSearchHints()"
@@ -27,11 +27,41 @@
                         <div class="search-hints">
                             <button
                                     class="search-hint text-overflow-elipsis"
-                                    v-for="hint in $root.search.hints"
-                                    @click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint);$root.search.cursor = -1"
+                                    v-for="(hint, index) in $root.search.hints.filter((a) => {return a.content == null})" :class="{active: ($root.search.cursor == index)}"
+                                    @click="$root.search.term = hint.searchTerm;$root.search.showHints = false;$root.searchQuery(hint.searchTerm);$root.search.cursor = -1"
                             >
-                                {{ hint }}
+                                {{ hint.displayTerm }}
                             </button>
+                            <template v-for="(item, position) in $root.search.hints.filter((a) => {return a.content != null})">
+                                <div class="cd-queue-item" @click="$root.search.showHints = false;$root.routeView(item.content);$root.search.cursor = -1"
+                                     :class="{'hintactive': ($root.search.cursor == position + $root.search.hints.filter((a) => {return a.content == null}).length)}">
+                                    <div class="row">
+                                        <div class="col-auto cider-flex-center">
+                                            <div class="artwork" :class="{'circle': item.content.type == 'artists'}">
+                                                <mediaitem-artwork
+                                                        :url="item.content.attributes.artwork ? item.content.attributes.artwork.url : ''"
+                                                        :size="32"></mediaitem-artwork>
+                                            </div>
+                                        </div>
+                                        <div class="col queue-info">
+                                            <div class="queue-title text-overflow-elipsis">{{ item.content.attributes.name }}
+                                            </div>
+                                            <div class="queue-subtitle text-overflow-elipsis">{{
+                                                item.content.attributes.artistName }}
+                                            </div>
+                                        </div>
+                                        <div class="queue-explicit-icon cider-flex-center"
+                                             v-if="item.content.attributes.contentRating == 'explicit'">
+                                            <div class="explicit-icon"></div>
+                                        </div>
+                                        <!-- <div class="col queue-duration-info">
+                                            <div class="queue-duration cider-flex-center">
+                                                {{convertTimeToString(item.content.attributes.durationInMillis)}}
+                                            </div>
+                                        </div> -->
+                                    </div>
+                                </div>
+                            </template> 
                         </div>
                     </div>
                 </div>
diff --git a/src/renderer/views/pages/search.ejs b/src/renderer/views/pages/search.ejs
index 2f8d967a..abd3d053 100644
--- a/src/renderer/views/pages/search.ejs
+++ b/src/renderer/views/pages/search.ejs
@@ -4,17 +4,48 @@
             <div class="search-input--icon"></div>
             <input type="search" spellcheck="false" @focus="$root.search.showHints = true"
                    @blur="$root.setTimeout(()=>{$root.search.showHints = false}, 300)"
-                   v-on:keyup.enter="$root.searchQuery();$root.search.showHints = false" @input="$root.getSearchHints()"
+                   v-on:keyup.enter="$root.searchQuery($root.search.hints[$root.search.cursor].content ?? $root.search.hints[$root.search.cursor].searchTerm);$root.search.showHints = false" @input="$root.getSearchHints()"
                    :placeholder="$root.getLz('term.search') + '...'" v-model="$root.search.term"
                    class="search-input" />
 
             <div class="search-hints-container" v-if="$root.search.showHints && $root.search.hints.length != 0">
                 <div class="search-hints">
-                    <button class="search-hint text-overflow-elipsis" v-for="hint in $root.search.hints"
-                            @click="$root.search.term = hint;$root.search.showHints = false;$root.searchQuery(hint)">
-                        {{ hint }}
+                    <button class="search-hint text-overflow-elipsis" v-for="(hint, index) in $root.search.hints.filter((a) => {return a.content == null})" :class="{active: ($root.search.cursor == index)}"
+                            @click="$root.search.term = hint.searchTerm;$root.search.showHints = false;$root.searchQuery(hint.searchTerm)">
+                        {{ hint.displayTerm }}
                     </button>
+                    <template v-for="(item, position) in $root.search.hints.filter((a) => {return a.content != null})">
+                        <div class="cd-queue-item" @click="$root.search.showHints = false;$root.routeView(item.content);$root.search.cursor = -1"
+                             :class="{'hintactive': ($root.search.cursor == position + $root.search.hints.filter((a) => {return a.content == null}).length)}">
+                            <div class="row">
+                                <div class="col-auto cider-flex-center">
+                                    <div class="artwork" :class="{'circle': item.content.type == 'artists'}">
+                                        <mediaitem-artwork
+                                                :url="item.content.attributes.artwork ? item.content.attributes.artwork.url : ''"
+                                                :size="32"></mediaitem-artwork>
+                                    </div>
+                                </div>
+                                <div class="col queue-info">
+                                    <div class="queue-title text-overflow-elipsis">{{ item.content.attributes.name }}
+                                    </div>
+                                    <div class="queue-subtitle text-overflow-elipsis">{{
+                                        item.content.attributes.artistName }}
+                                    </div>
+                                </div>
+                                <div class="queue-explicit-icon cider-flex-center"
+                                     v-if="item.content.attributes.contentRating == 'explicit'">
+                                    <div class="explicit-icon"></div>
+                                </div>
+                                <!-- <div class="col queue-duration-info">
+                                    <div class="queue-duration cider-flex-center">
+                                        {{convertTimeToString(item.content.attributes.durationInMillis)}}
+                                    </div>
+                                </div> -->
+                            </div>
+                        </div>
+                    </template> 
                 </div>
+                
             </div>
         </div>
         <div class="btn-group searchToggle">