diff --git a/src/lib/components/media/mediaPlayer.svelte b/src/lib/components/media/mediaPlayer.svelte
index 87ae6a0..8a3c2a3 100644
--- a/src/lib/components/media/mediaPlayer.svelte
+++ b/src/lib/components/media/mediaPlayer.svelte
@@ -47,7 +47,7 @@
 </script>
 
 {#if $currentlyPlaying}
-    <main transition:slide class="relative m-4 grid h-20 grid-cols-[1fr_26rem_1fr] gap-4 overflow-clip rounded-xl bg-neutral-925 text-white transition-colors duration-1000">
+    <main transition:slide class="relative m-4 grid h-20 grid-cols-[minmax(auto,_20rem)_auto_minmax(auto,_20rem)] gap-4 overflow-clip rounded-xl bg-neutral-925 text-white transition-colors duration-1000">
         <section class="flex gap-3">
             <div class="relative h-full w-20 min-w-20">
                 {#key $currentlyPlaying}
@@ -59,7 +59,7 @@
                 <div class="text-xs">{$currentlyPlaying.artists?.map((artist) => artist.name).join(', ') || $currentlyPlaying.createdBy?.name}</div>
             </section>
         </section>
-        <section class="flex flex-col items-center justify-center gap-1">
+        <section class="flex min-w-max flex-col items-center justify-center gap-1">
             <div class="flex items-center gap-3 text-lg">
                 <button on:click={() => (shuffle = !shuffle)} class="aspect-square h-8">
                     <i class="fa-solid fa-shuffle" />
@@ -77,24 +77,26 @@
                     <i class="fa-solid fa-repeat" />
                 </button>
             </div>
-            <div class="grid w-full grid-cols-[1fr_18rem_1fr] items-center justify-items-center gap-2">
-                <span bind:this={currentTimeTimestamp} class="w-full text-right" />
-                <Slider
-                    bind:this={progressBar}
-                    max={duration}
-                    on:seeking={(event) => {
-                        currentTimeTimestamp.innerText = formatTime(event.detail.value)
-                        seeking = true
-                    }}
-                    on:seeked={(event) => {
-                        currentTime = event.detail.value
-                        seeking = false
-                    }}
-                />
-                <span bind:this={durationTimestamp} class="w-full text-left" />
+            <div class="flex items-center justify-items-center gap-2">
+                <span bind:this={currentTimeTimestamp} class="w-8 text-right" />
+                <div class="w-72">
+                    <Slider
+                        bind:this={progressBar}
+                        max={duration}
+                        on:seeking={(event) => {
+                            currentTimeTimestamp.innerText = formatTime(event.detail.value)
+                            seeking = true
+                        }}
+                        on:seeked={(event) => {
+                            currentTime = event.detail.value
+                            seeking = false
+                        }}
+                    />
+                </div>
+                <span bind:this={durationTimestamp} class="w-8 text-left" />
             </div>
         </section>
-        <section class="flex items-center justify-end px-3 text-lg">
+        <section class="flex items-center justify-end pr-2 text-lg">
             <div id="volume-slider" class="flex h-10 w-fit flex-shrink-0 flex-row-reverse items-center gap-2">
                 <button on:click={() => (muted = !muted)} class="aspect-square h-8">
                     <i class="fa-solid {volume > 0.5 ? 'fa-volume-high' : volume > 0 ? 'fa-volume-low' : 'fa-volume-xmark'} w-full text-center text-base" />
@@ -107,7 +109,7 @@
                 <i class="fa-solid fa-xmark" />
             </button>
         </section>
-        <audio autoplay bind:paused bind:volume bind:currentTime bind:duration on:ended={() => ($currentlyPlaying = null)} src="/api/audio?connection={$currentlyPlaying.connection}&id={$currentlyPlaying.id}" />
+        <audio bind:paused bind:volume bind:currentTime bind:duration on:ended={() => ($currentlyPlaying = null)} src="/api/audio?connection={$currentlyPlaying.connection}&id={$currentlyPlaying.id}" />
     </main>
 {/if}
 
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 1e4c198..7505085 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -38,8 +38,8 @@
             <div class="overflow-clip text-ellipsis text-neutral-400">Playlist &bull; {data.user.username}</div>
         </div>
     </div>
-    <section class="no-scrollbar overflow-y-scroll px-[max(7rem,_7vw)]">
-        <div class="my-6 max-w-xl">
+    <section class="no-scrollbar h-full overflow-y-scroll px-[max(7rem,_7vw)]">
+        <div class="sticky top-0 max-w-xl py-6">
             <SearchBar />
         </div>
         <slot />
diff --git a/src/routes/(app)/search/+page.svelte b/src/routes/(app)/search/+page.svelte
index 85cbe8a..e0da77f 100644
--- a/src/routes/(app)/search/+page.svelte
+++ b/src/routes/(app)/search/+page.svelte
@@ -7,13 +7,41 @@
 
 {#if data.searchResults}
     {#await data.searchResults then searchResults}
-        {#each searchResults as searchResult}
-            <button
-                on:click={() => {
-                    if (searchResult.type === 'song') $currentlyPlaying = searchResult
-                }}
-                class="block bg-neutral-925">{searchResult.name} - {searchResult.type}</button
-            >
-        {/each}
+        <section class="flex w-full flex-col items-center gap-2">
+            {#each searchResults as searchResult}
+                <div class="flex h-20 w-full max-w-screen-md gap-4 bg-black p-2">
+                    <button
+                        id="searchResult"
+                        on:click={() => {
+                            if (searchResult.type === 'song') $currentlyPlaying = searchResult
+                        }}
+                        class="grid aspect-square h-full place-items-center bg-cover bg-center bg-no-repeat"
+                        style="--thumbnail: url('/api/remoteImage?url={searchResult.thumbnail}')"
+                    >
+                        <i class="fa-solid fa-play opacity-0" />
+                    </button>
+                    <div>
+                        <div>{searchResult.name}</div>
+                        {#if 'artists' in searchResult && searchResult.artists}
+                            <div>{searchResult.artists.map((artist) => artist.name).join(', ')}</div>
+                        {:else if 'createdBy' in searchResult && searchResult.createdBy}
+                            <div>{searchResult.createdBy?.name}</div>
+                        {/if}
+                    </div>
+                </div>
+            {/each}
+        </section>
     {/await}
 {/if}
+
+<style>
+    #searchResult {
+        background-image: var(--thumbnail);
+    }
+    #searchResult:hover {
+        background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--thumbnail);
+    }
+    #searchResult:hover > i {
+        opacity: 100%;
+    }
+</style>