diff --git a/frontend/src/components/ActiveSearchList.vue b/frontend/src/components/ActiveSearchList.vue
index b26189e..33ed99e 100644
--- a/frontend/src/components/ActiveSearchList.vue
+++ b/frontend/src/components/ActiveSearchList.vue
@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import type { Song, CollectionPreview } from "../script/types";
+import type { Song } from "../script/types";
 import { useAudio } from "@/composables/useAudio";
-import { ref } from "vue";
-import { RouterLink } from "vue-router";
 import { useUser } from "@/composables/useUser";
+
 const audioStore = useAudio();
 const userStore = useUser();
 
@@ -13,48 +12,72 @@ const props = defineProps<{
   search: string;
 }>();
 
-function update(hash: string) {
-  audioStore.setSong(props.songs[props.songs.findIndex((s) => s.hash == hash)]);
+function playSong(hash: string) {
+  const selected = props.songs.find((s) => s.hash === hash);
+  if (selected) {
+    audioStore.setSong(selected);
+  }
 }
 
 function highlightText(text: string, searchterm: string) {
   if (!searchterm) return text;
   const regex = new RegExp(`(${searchterm})`, "gi");
-  return text.replace(regex, '<span style="color: yellow;">$1</span>');
+  return text.replace(regex, '<span class="font-bold text-yellow-400">$1</span>');
 }
 </script>
 
 <template>
-  <div class="border rounded-lg w-full h-full overflow-scroll overflow-x-hidden text-xs bordercolor bg">
-    <div v-if="props.artist && props.artist.length > 0" class="border bordercolor">
-      <h2 class="text-2xl action">Artists</h2>
-      <ul>
-        <li v-for="(artist, index) in props.artist" :key="index" class="rounded-lg">
-          <RouterLink class="flex" :to="'/search?a=' + artist" v-html="highlightText(artist, props.search)">
+  <div class="w-full h-full text-xs">
+    
+    <div v-if="props.artist && props.artist.length > 0" class="mb-4">
+      <h2 class="px-4 py-2 font-semibold text-lg uppercase tracking-wider action">Artists</h2>
+      <ul class="space-y-1 px-2">
+        <li v-for="(artist, index) in props.artist" :key="index">
+          <RouterLink 
+            class="flex items-center bg-white/5 hover:bg-white/10 p-3 border border-transparent rounded-xl transition-colors hover:bordercolor"
+            :to="'/search?a=' + artist"
+          >
+            <div class="flex justify-center items-center bg-yellow-500/20 mr-3 rounded-full w-10 h-10">
+              <i class="text-yellow-500 fa-solid fa-user"></i>
+            </div>
+            <span class="text-base info" v-html="highlightText(artist, props.search)"></span>
           </RouterLink>
         </li>
       </ul>
     </div>
-    <div v-if="props.songs && props.songs.length > 0" class="border bordercolor">
-      <h2 class="text-2xl action">Songs</h2>
-      <ul>
-        <li v-for="(song, index) in props.songs" :key="index" class="rounded-lg">
-          <button @click="update(song.hash)" class="flex">
+
+    <div v-if="props.songs && props.songs.length > 0">
+      <h2 class="px-4 py-2 font-semibold text-lg uppercase tracking-wider action">Songs</h2>
+      <ul class="space-y-1 px-2 pb-20"> <li v-for="(song, index) in props.songs" :key="index">
+          <button 
+            @click="playSong(song.hash)" 
+            class="flex items-center p-2 rounded-xl w-full text-left transition-colors"
+          >
             <img
-              :src="
-                encodeURI(
-                  `${userStore.cloudflareUrl.value}/${song.previewimage ? song.previewimage + '?h=120&w=120' : '/default-bg.png'}`,
-                )
-              "
-              class="w-12 h-12"
+              :src="song.previewimage 
+                ? `${userStore.cloudflareUrl.value}${song.previewimage}?h=120&w=120` 
+                : '/default-bg.png'"
+              class="rounded-lg w-12 h-12 object-cover shrink-0"
+              loading="lazy"
             />
-            <p class="ml-2 overflow-hidden text-ellipsis text-nowrap">
-              <span v-html="highlightText(song.name, search)"></span> -
-              <span v-html="highlightText(song.artist, props.search)"></span>
-            </p>
+            <div class="flex-1 ml-3 overflow-hidden">
+              <p class="text-base truncate info">
+                <span v-html="highlightText(song.name, search)"></span>
+              </p>
+              <p class="opacity-60 text-sm truncate action">
+                <span v-html="highlightText(song.artist, props.search)"></span>
+              </p>
+            </div>
+            <i class="opacity-0 group-hover:opacity-100 ml-2 pr-2 transition-opacity fa-solid fa-play"></i>
           </button>
         </li>
       </ul>
     </div>
   </div>
 </template>
+
+<style scoped>
+:deep(.text-yellow-400) {
+  color: #facc15;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/ActiveSearchSkeleton.vue b/frontend/src/components/ActiveSearchSkeleton.vue
new file mode 100644
index 0000000..3a3842f
--- /dev/null
+++ b/frontend/src/components/ActiveSearchSkeleton.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="w-full h-full text-xs animate-pulse">
+    
+    <div class="mb-4">
+      <div class="my-2 ml-4 rounded w-24 h-6 action"></div>
+      <ul class="space-y-1 px-2">
+        <li v-for="i in 2" :key="'art-skel-' + i">
+          <div class="flex items-center opacity-50 p-3 border rounded-xl bordercolor">
+            <div class="mr-3 rounded-full w-10 h-10"></div>
+            <div class="rounded w-32 h-4 info"></div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <div>
+      <div class="my-2 ml-4 rounded w-24 h-6 action"></div>
+      <ul class="space-y-1 px-2">
+        <li v-for="i in 6" :key="'song-skel-' + i">
+          <div class="flex items-center p-2 rounded-xl w-full">
+            <div class="rounded-lg w-12 h-12 shrink-0"></div>
+            
+            <div class="flex-1 space-y-2 ml-3">
+              <div class="rounded w-3/4 h-4 info"></div>
+              <div class="rounded w-1/2 h-3 b action"></div>
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+    
+  </div>
+</template>
+
+<style scoped>
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+
+.info { background-color: currentColor; opacity: 0.1; }
+.action { background-color: currentColor; opacity: 0.05; }
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/CollectionItem.vue b/frontend/src/components/CollectionItem.vue
index 14a0d7e..122d0a0 100644
--- a/frontend/src/components/CollectionItem.vue
+++ b/frontend/src/components/CollectionItem.vue
@@ -85,12 +85,20 @@ onBeforeUnmount(() => {
         <hr />
       </div>
     </header>
-    <div class="flex-col flex-1 justify-start overflow-y-scroll coll-container">
+    <div class="gap-2 grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 p-2 overflow-y-auto collection-container song-item-wrapper coll-container">
       <SongItem v-for="(song, index) in songs" :key="index" :song="song" />
-    </div>
 
     <template v-if="loading">
       <SongItemSkeleton v-for="i in 10" :key="'skeleton-' + i" />
     </template>
+    </div>
   </main>
 </template>
+
+<style scoped>
+.song-item-wrapper {
+  content-visibility: auto;
+  
+  contain-intrinsic-size: 96px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/components/CollectionListItem.vue b/frontend/src/components/CollectionListItem.vue
index b4eb833..dfb3f40 100644
--- a/frontend/src/components/CollectionListItem.vue
+++ b/frontend/src/components/CollectionListItem.vue
@@ -9,11 +9,11 @@ const props = defineProps<{ collection: CollectionPreview }>();
 <template>
   <RouterLink :to="'/collection/' + props.collection.index" class="w-full">
     <div class="flex items-center border rounded-lg h-24 overflow-hidden bordercolor">     <img
-        class="m-2 rounded-lg w-20 h-20"
+        class="p-1 rounded-lg w-24 h-24"
         :src="encodeURI(`${userStore.cloudflareUrl.value}${props.collection.previewimage}`)"
         loading="lazy"
       />
-   <div class="flex flex-col overflow-hidden text-left">
+        <div class="flex flex-col overflow-hidden text-left">
         <h3 class="overflow-hidden text-ellipsis whitespace-nowrap info">{{ props.collection.name }}</h3>
         <h5 class="text-sm info">{{ props.collection.length }} Songs</h5>
       </div>
diff --git a/frontend/src/components/CollectionListItemSkeleton.vue b/frontend/src/components/CollectionListItemSkeleton.vue
index 62edec8..62a6492 100644
--- a/frontend/src/components/CollectionListItemSkeleton.vue
+++ b/frontend/src/components/CollectionListItemSkeleton.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="flex items-center bg-white/5 border rounded-lg h-24 animate-pulse bordercolor">
-    <div class="bg-white/10 m-2 rounded-lg w-20 h-20 shrink-0"></div>
+    <div class="bg-white/10 p-1 rounded-lg w-24 h-24 shrink-0"></div>
     <div class="flex flex-col flex-1 justify-center gap-2 p-2 overflow-hidden">
       <div class="bg-white/10 rounded w-3/4 h-5"></div>
       <div class="bg-white/5 rounded w-1/4 h-3"></div>
diff --git a/frontend/src/components/SongItem.vue b/frontend/src/components/SongItem.vue
index 89b42c2..5205c95 100644
--- a/frontend/src/components/SongItem.vue
+++ b/frontend/src/components/SongItem.vue
@@ -18,32 +18,35 @@ function updateSong() {
 </script>
 
 <template>
-  <div @click="updateSong" :style="{ borderColor: border }" class="flex m-1 border rounded-lg md:text-xl bordercolor">
+  <div 
+    @click="updateSong" 
+    :style="{ borderColor: border }" 
+    class="flex items-center m-1 border rounded-lg h-16 md:h-24 overflow-hidden md:text-xl cursor-pointer bordercolor"
+  >
     <img
-      class="m-1 rounded-lg w-14 md:w-24 h-14 md:h-24"
-      :src="
-        props.song?.previewimage
-          ? encodeURI(`${userStore.cloudflareUrl.value}${props.song.previewimage}?h=56&w=56`)
-          : '/default-bg.png'
-      "
+      class="p-1 rounded-lg w-14 md:w-24 h-16 md:h-24 object-cover shrink-0"
+      :src="props.song?.previewimage 
+        ? encodeURI(`${userStore.cloudflareUrl.value}${props.song.previewimage}?h=56&w=56`) 
+        : '/default-bg.png'"
       loading="lazy"
     />
-    <div class="flex flex-col overflow-hidden text-left">
+    
+    <div class="flex flex-col flex-1 justify-center overflow-hidden text-left">
       <p :style="{ color: info }" class="overflow-hidden text-base text-ellipsis text-nowrap info">
-        <slot name="songName">{{ props.song?.name ? props.song?.name : "Unknown Title" }}</slot>
+        <slot name="songName">{{ props.song?.name || "Unknown Title" }}</slot>
       </p>
-      <h5 :style="{ color: action }" class="overflow-hidden text-sm text-base text-ellipsis text-nowrap action">
-        <slot name="artist">{{ props.song?.artist ? props.song.artist : "Unknown Artist" }}</slot>
+      <h5 :style="{ color: action }" class="overflow-hidden text-sm text-ellipsis text-nowrap action">
+        <slot name="artist">{{ props.song?.artist || "Unknown Artist" }}</slot>
       </h5>
       <h5 :style="{ color: action }" class="text-sm action">
-        <slot name="length"
-          >{{ Math.floor(props.song?.length / 60000 || 0) }}:{{
-            Math.floor((props.song?.length ?? 0 / 1000) % 60)
+        <slot name="length">
+          {{ Math.floor(props.song?.length / 60000 || 0) }}:{{
+            Math.floor((props.song?.length / 1000 || 0) % 60)
               .toString()
               .padStart(2, "0")
-          }}</slot
-        >
+          }}
+        </slot>
       </h5>
     </div>
   </div>
-</template>
+</template>
\ No newline at end of file
diff --git a/frontend/src/components/SongItemSkeleton.vue b/frontend/src/components/SongItemSkeleton.vue
index 410614e..20d18f0 100644
--- a/frontend/src/components/SongItemSkeleton.vue
+++ b/frontend/src/components/SongItemSkeleton.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="flex bg-white/5 m-1 border rounded-lg md:text-xl animate-pulse bordercolor">
-    <div class="flex-shrink-0 bg-white/10 m-1 rounded-lg w-14 md:w-24 h-14 md:h-24"></div>
+  <div class="flex bg-white/5 m-1 border rounded-lg h-16 md:h-24 md:text-xl animate-pulse bordercolor">
+    <div class="bg-white/10 rounded-lg w-14 md:w-24 h-16 md:h-24 shrink-0"></div>
     <div class="flex flex-col flex-1 justify-center gap-2 px-2 overflow-hidden text-left">
       <div class="bg-white/10 rounded w-3/4 h-4 info"></div>
       <div class="bg-white/5 rounded w-1/2 h-3 action"></div>
diff --git a/frontend/src/views/CollectionView.vue b/frontend/src/views/CollectionView.vue
index 1d1f536..d3ebafb 100644
--- a/frontend/src/views/CollectionView.vue
+++ b/frontend/src/views/CollectionView.vue
@@ -9,8 +9,9 @@ const { musicApi } = useApi();
 const api = musicApi.value;
 
 const containerRef = ref<HTMLElement | null>(null);
+const parentRef = ref<HTMLElement | null>(null);
 const collections = ref<CollectionPreview[]>([]);
-const limit = ref(12);
+const limit = ref(12 * 4);
 const offset = ref(0);
 const isLoading = ref(false);
 
@@ -23,16 +24,22 @@ const fetchCollections = async () => {
     const newItems = response.data.collections || [];
 
     if (newItems.length > 0) {
-      let mapped = mapApiToCollectionPreview(newItems, offset.value);
+      const mapped = mapApiToCollectionPreview(newItems, offset.value);
       collections.value = [...collections.value, ...mapped];
       offset.value += limit.value;
 
       await nextTick();
 
       const container = containerRef.value;
-      if (container && container.scrollHeight <= container.clientHeight) {
-        isLoading.value = false; 
-        await fetchCollections(); 
+      if (container) {
+        const noScrollbarYet = container.scrollHeight <= container.clientHeight + 0;
+        
+        const mightBeMoreData = newItems.length === limit.value;
+
+        if (noScrollbarYet && mightBeMoreData) {
+          isLoading.value = false; 
+          return await fetchCollections(); 
+        }
       }
     }
   } catch (error) {
@@ -58,10 +65,12 @@ onMounted(async () => {
 </script>
 
 <template>
-  <main class="flex flex-col flex-1 h-full overflow-y-hidden text-center">
+  <main class="flex flex-col w-full h-full overflow-hidden">
+    
     <div 
       ref="containerRef" 
-      class="gap-2 grid grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 p-2 overflow-y-auto collection-container"
+      class="flex-1 content-start gap-2 grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 p-2 overflow-y-auto"
+      style="min-height: 0;" 
     >
       <CollectionListItem 
         v-for="(collection, index) in collections" 
@@ -74,4 +83,17 @@ onMounted(async () => {
       </template>
     </div>
   </main>
-</template>
\ No newline at end of file
+</template>
+
+<style scoped>
+.collection-grid {
+  /* Force the grid to at least fill the available height */
+  min-height: 100%;
+}
+
+/* Ensure the wrapper doesn't cause items to shrink */
+.song-item-wrapper {
+  content-visibility: auto;
+  contain-intrinsic-size: 96px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/MeView.vue b/frontend/src/views/MeView.vue
index edbbc4a..094f900 100644
--- a/frontend/src/views/MeView.vue
+++ b/frontend/src/views/MeView.vue
@@ -15,10 +15,7 @@ const borderColor = ref("");
 
 const loginStatus = ref("Login");
 
-function update() {
-  var input = document.getElementById("url-input") as HTMLInputElement;
-  userStore.cloudflareUrl.value = input.value;
-}
+const isHealthy = ref<boolean | null>(null);
 
 function save(bg: string | null, main: string | null, info: string | null, border: string | null) {
   document.documentElement.style.setProperty("--background-color", bg ?? bgColor.value);
@@ -47,8 +44,41 @@ async function getMe() {
   userStore.cloudflareUrl.value = data.endpoint;
 }
 
+async function pasteFromClipboard() {
+  try {
+    const text = await navigator.clipboard.readText();
+    userStore.cloudflareUrl.value = text;
+    await checkHealth(text);
+  } catch (e) {
+    console.error("Failed to read clipboard");
+  }
+}
+
+async function copyToClipboard() {
+  await navigator.clipboard.writeText(userStore.cloudflareUrl.value);
+}
+
+async function checkHealth(url: string) {
+  if (!url) return;
+  try {
+    const response = await fetch(`${url}/ping`);
+    isHealthy.value = response.ok;
+  } catch (e) {
+    isHealthy.value = false;
+  }
+}
+
+function update(e: Event) {
+  const val = (e.target as HTMLInputElement).value;
+  userStore.cloudflareUrl.value = val;
+  checkHealth(val);
+}
+
 onMounted(() => {
   reset();
+  if (userStore.cloudflareUrl.value) {
+    checkHealth(userStore.cloudflareUrl.value);
+  }
 });
 
 function reset() {
@@ -68,8 +98,8 @@ function reset() {
   <header>
     <div class="wrapper">
       <nav class="flex justify-start space-x-1 mx-1 my-2">
-        <RouterLink class="shadow-xl backdrop--light p-1 rounded-full" to="/"
-          ><i class="fa-arrow-left fa-solid"></i>
+        <RouterLink class="shadow-xl backdrop--light p-1 rounded-full" to="/">
+          <i class="fa-arrow-left fa-solid"></i>
         </RouterLink>
       </nav>
       <hr />
@@ -77,31 +107,37 @@ function reset() {
   </header>
 
   <main class="flex flex-col flex-1 h-full overflow-y-scroll">
-    <input @change="update" type="text" id="url-input" :value="userStore.user.value?.endpoint" disabled />
-    <br />
-    <button v-if="!userStore.user.value" @click="getMe" class="p-0.5 border rounded-lg bordercolor">
-      {{ loginStatus }}
-    </button>
-    <div v-if="userStore.user.value" class="flex justify-between p-5">
-      <img :src="userStore.user.value.avatar_url" class="w-1/3" />
-      <div>
-        <p>{{ userStore.user.value.name }}</p>
-        <p>
-          {{ userStore.user.value.endpoint == "" ? "Not Connected" : "Connected" }}
-        </p>
-        <p>
-          Sharing:
-          <button
-            @click="userStore.user.value.share = !userStore.user.value.share"
-            class="p-0.5 border rounded-lg bordercolor"
-          >
-            {{ userStore.user.value.share }}
-          </button>
-        </p>
-        <button @click="getMe" class="p-0.5 border rounded-lg bordercolor">Refresh</button>
+    <div class="flex flex-col gap-2 p-4">      
+      <div class="flex gap-1 overflow-hidden">
+        <input 
+          @change="update" 
+          type="text" 
+          id="url-input" 
+          :value="userStore.cloudflareUrl.value" 
+          class="flex-1 bg-white/5 p-2 border-y border-l rounded-l-lg outline-none bordercolor"
+          placeholder="https://..."
+        />
+        <button @click="copyToClipboard" class="bg-white/5 hover:bg-white/10 p-2 border bordercolor" title="Copy URL">
+          <i class="fa-solid fa-copy"></i>
+        </button>
+        <button @click="pasteFromClipboard" class="bg-white/5 hover:bg-white/10 p-2 border rounded-r-lg text-yellow-500 bordercolor" title="Paste URL">
+          <i class="fa-solid fa-paste"></i>
+        </button>
+        <div 
+          v-if="isHealthy !== null"
+          class="self-center rounded-full w-2 h-2"
+          :class="isHealthy ? 'bg-green-500 shadow-[0_0_8px_green]' : 'bg-red-500 shadow-[0_0_8px_red]'"
+        >
+      </div>
       </div>
     </div>
 
+    <br />
+    
+    <button v-if="!userStore.user.value" @click="getMe" class="mx-4 p-0.5 border rounded-lg bordercolor">
+      {{ loginStatus }}
+    </button>
+
     <div class="flex flex-col justify-around p-10 w-full">
       <div class="flex flex-1 justify-between">
         <p>Background:</p>
diff --git a/frontend/src/views/RecentView.vue b/frontend/src/views/RecentView.vue
index ee93fb5..8b54323 100644
--- a/frontend/src/views/RecentView.vue
+++ b/frontend/src/views/RecentView.vue
@@ -64,7 +64,7 @@ onMounted(async () => {
 <template>
   <div 
     ref="containerRef" 
-    class="flex-1 gap-2 grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 p-1 overflow-y-scroll song-container"
+    class="flex-1 content-start gap-2 grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 p-1 overflow-y-scroll coll-container"
   >
     <SongItem v-for="(song, index) in songs" :key="index" :song="song" />
 
@@ -73,3 +73,10 @@ onMounted(async () => {
     </template>
   </div>
 </template>
+
+<style scoped>
+.song-item-wrapper {
+  content-visibility: auto;
+  contain-intrinsic-size: 96px;
+}
+</style>
\ No newline at end of file
diff --git a/frontend/src/views/SearchView.vue b/frontend/src/views/SearchView.vue
index bb4a512..6672fb2 100644
--- a/frontend/src/views/SearchView.vue
+++ b/frontend/src/views/SearchView.vue
@@ -1,53 +1,72 @@
 <script setup lang="ts">
-import { mapApiToSongs, mapToSong, type Song } from "../script/types";
 import { ref, onMounted, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import ActiveSearchList from "../components/ActiveSearchList.vue";
-import SongItem from "../components/SongItem.vue";
 import { useAudio } from "@/composables/useAudio";
 import { useUser } from "@/composables/useUser";
 import { useApi } from "@/composables/useApi";
+import { mapApiToSongs, type Song } from "../script/types";
+
+// Components
+import ActiveSearchList from "../components/ActiveSearchList.vue";
+import SongItem from "../components/SongItem.vue";
+import SongItemSkeleton from "../components/SongItemSkeleton.vue";
+import ActiveSearchSkeleton from "@/components/ActiveSearchSkeleton.vue";
 
 const router = useRouter();
 const route = useRoute();
-
 const audioStore = useAudio();
 const userStore = useUser();
 const { musicApi } = useApi();
 const api = musicApi.value;
 
-const activesongs = ref<Song[]>([]);
+// State
 const songs = ref<Song[]>([]);
+const activesongs = ref<Song[]>([]);
 const artists = ref<string[]>([]);
+const searchInput = ref((route.query.s as string) || "");
+const isLoading = ref(false);
 const showSearch = ref(false);
-const searchTerm = ref("");
 
 async function fetchActiveSearch(term: string) {
-  const response = await api.musicBackendSearch(term);
-
-  const songData = mapApiToSongs(response.data.songs ?? []);
-
-  activesongs.value = songData;
-
-  if (response.data.artist) artists.value = [response.data.artist];
-  audioStore.setCollection(songData);
-  showSearch.value = true;
-  searchTerm.value = term;
-  router.replace({ query: { s: term } });
+  if (!term.trim()) return emptySearch();
+  
+  isLoading.value = true;
+  try {
+    const response = await api.musicBackendSearch(term);
+    const songData = mapApiToSongs(response.data.songs ?? []);
+    
+    activesongs.value = songData;
+    artists.value = response.data.artist ? [response.data.artist] : [];
+    
+    audioStore.setCollection(songData);
+    showSearch.value = true;
+    router.replace({ query: { ...route.query, s: term } });
+  } finally {
+    isLoading.value = false;
+  }
 }
 
+/**
+ * Fetch full song list for a specific Artist
+ */
 async function fetchSearchArtist(artist: string) {
-  const response = await api.musicBackendArtist(artist);
+  isLoading.value = true;
+  showSearch.value = false; // Hide recommendations overlay when a choice is made
+  
+  try {
+    const response = await api.musicBackendArtist(artist);
+    const data = mapApiToSongs(response.data.songs || []);
 
-  const data = mapApiToSongs(response.data.songs || []);
-
-  data.forEach((song: Song) => {
-    song.previewimage = `${userStore.cloudflareUrl.value}/api/v1/images/${song.previewimage}`;
-    song.url = `${userStore.cloudflareUrl.value}/api/v1/audio/${song.url}`;
-  });
-
-  songs.value = data;
-  showSearch.value = false;
+    songs.value = data.map((song: Song) => ({
+      ...song,
+      previewimage: `${userStore.cloudflareUrl.value}/api/v1/images/${song.previewimage}`,
+      url: `${userStore.cloudflareUrl.value}/api/v1/audio/${song.url}`
+    }));
+    
+    router.replace({ query: { ...route.query, a: artist } });
+  } finally {
+    isLoading.value = false;
+  }
 }
 
 async function emptySearch() {
@@ -55,75 +74,95 @@ async function emptySearch() {
   artists.value = [];
   songs.value = [];
   showSearch.value = false;
-  searchTerm.value = "";
-  router.replace({ query: {} });
   searchInput.value = "";
+  router.replace({ query: {} });
 }
 
-onMounted(async () => {
-  if (route.query.a) {
-    await fetchSearchArtist(route.query.a as string);
-  }
-  if (route.query.s) {
-    await fetchActiveSearch(route.query.s as string);
+let debounceTimeout: any;
+watch(searchInput, (val) => {
+  clearTimeout(debounceTimeout);
+  if (val && val.trim() !== "") {
+    debounceTimeout = setTimeout(() => fetchActiveSearch(val), 300);
+  } else {
+    emptySearch();
   }
 });
 
-watch(
-  () => route.query.a,
-  async (newArtist) => {
-    if (newArtist) {
-      await fetchSearchArtist(newArtist as string);
-    } else {
-      songs.value = [];
-    }
-  },
-);
+watch(() => route.query.a, (newArtist) => {
+  if (newArtist) fetchSearchArtist(newArtist as string);
+});
 
-const searchInput = ref(searchTerm.value);
-
-watch(searchInput, async (val) => {
-  if (val && val.trim() !== "") {
-    await fetchActiveSearch(val);
-  } else {
-    showSearch.value = false;
-    activesongs.value = [];
-    artists.value = [];
-    router.replace({ query: {} });
-  }
+onMounted(() => {
+  if (route.query.a) fetchSearchArtist(route.query.a as string);
+  else if (route.query.s) fetchActiveSearch(route.query.s as string);
 });
 </script>
 
 <template>
-  <header>
-    <div class="wrapper">
-      <nav class="flex justify-start space-x-1 mx-1 my-2">
-        <RouterLink class="shadow-xl backdrop--light p-1 rounded-full" to="/">
+  <header class="top-0 z-30 sticky bg-black/10 backdrop-blur-md">
+    <div class="p-2 wrapper">
+      <nav class="relative flex items-center h-10">
+        <RouterLink class="z-10 bg-white/5 shadow-xl p-2 rounded-full" to="/">
           <i class="fa-arrow-left fa-solid"></i>
         </RouterLink>
-        <h1 class="right-0 left-0 absolute text-center">Search</h1>
+        <h1 class="absolute inset-0 flex justify-center items-center font-bold text-xl">Search</h1>
       </nav>
-      <hr />
+      <hr class="opacity-10 mt-2" />
     </div>
   </header>
 
-  <main class="flex flex-col flex-1 w-full h-full">
-    <div class="relative">
+  <main class="flex flex-col flex-1 w-full h-full overflow-hidden">
+    <div class="relative p-2">
       <input
         v-model="searchInput"
         placeholder="Type to Search..."
-        class="flex-1 bg-yellow-300 bg-opacity-20 p-2 border rounded-lg w-full max-h-12 accent-pink-800 search bordercolor"
+        class="flex-1 bg-white/5 p-4 border rounded-xl outline-none ring-yellow-500/50 focus:ring-2 w-full h-14 transition-all bordercolor"
       />
-      <div class="top-4 right-4 absolute flex flex-col justify-center cursor-pointer" @click="emptySearch">
-        <i class="opacity-50 far fa-times-circle"></i>
+      <div 
+        v-if="searchInput"
+        class="top-1/2 right-6 absolute opacity-50 hover:opacity-100 -translate-y-1/2 cursor-pointer" 
+        @click="emptySearch"
+      >
+        <i class="text-xl far fa-times-circle"></i>
       </div>
     </div>
 
-    <div class="relative flex flex-col w-full h-full overflow-y-scroll">
-      <div v-if="showSearch" class="z-20 absolute w-full text-center search-recommendations">
-        <ActiveSearchList :songs="activesongs" :artist="artists" :search="searchTerm" />
+    <div class="relative flex-1 overflow-y-auto">
+      
+      <div 
+        v-if="showSearch && (activesongs.length || artists.length || isLoading)" 
+        class="z-20 absolute backdrop-blur-xl w-full min-h-full"
+      >
+        <ActiveSearchSkeleton v-if="isLoading" />
+
+        <ActiveSearchList 
+          v-else 
+          :songs="activesongs" 
+          :artist="artists" 
+          :search="searchInput" 
+        />
+      </div>
+
+        <template v-else>
+          <SongItem 
+            v-for="(song, index) in songs" 
+            :key="song.hash || index" 
+            :song="song"
+            class="song-render-node"
+          />
+        </template>
+        
+        <div v-if="!isLoading && songs.length === 0 && !showSearch" class="col-span-full opacity-30 py-20 text-center">
+          <i class="mb-4 text-6xl fa-solid fa-music"></i>
+          <p>Find your favorite music</p>
+        </div>
       </div>
-      <SongItem v-for="(song, index) in songs" :key="index" :song="song" />
-    </div>
   </main>
 </template>
+
+<style scoped>
+.song-render-node {
+  content-visibility: auto;
+  contain-intrinsic-size: 96px;
+}
+</style>
\ No newline at end of file
diff --git a/grpc-backend/main.go b/grpc-backend/main.go
index 9363df3..c5ca546 100644
--- a/grpc-backend/main.go
+++ b/grpc-backend/main.go
@@ -207,6 +207,10 @@ func runGrpcAndGateway(s *Server, port string) error {
 	mux.HandleFunc("/callback/", s.callback)
 	mux.HandleFunc("/api/v1/audio/{filepath}", s.songFile)
 	mux.HandleFunc("/api/v1/image/{filepath}", s.imageFile)
+	mux.HandleFunc("/ping", func(w http.ResponseWriter, r *http.Request) {
+		w.WriteHeader(http.StatusOK)
+		w.Write([]byte("pong"))
+	})
 
 	fileServer := http.FileServer(http.Dir("gen/swagger"))
 	mux.Handle("/swagger/", http.StripPrefix("/swagger/", fileServer))