diff --git a/src/App.svelte b/src/App.svelte
index 6b7dbfa..2d0fc24 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -72,43 +72,47 @@
     </div>
     <img class="w-96 -mb-48 md:w-xl md:-mr-56 md:-mt-64 md:-mb-80" src={menthealeauLogo} alt="Logo d'une menthe à l'eau" />
   </div>
-  <div class="flex flex-row md:items-center gap-2 max-w-96 w-full">
-    <div class="p-4 bg-[#f97095] rounded-md border-white border-5 drop-shadow-md flex flex-col gap-4 max-w-96 w-full">
-      <h1 class="font-[Momentz] text-white font-bold text-4xl">Menthe à l'eau</h1>
-      <p class="text-white font-[Inter] font-bold">Créée à l'origine pour être un énorme dump de musique en tout genre. Cette playlist est contre toute attente devenue un énorme dump de musique en tout genre. Enjoy the radio. 📻</p>
-      {#if imageData == ""}
-        <div class="block w-full pb-[26%] pt-[26%] flex flex-col items-center justify-center bg-[#ff99b4] rounded-md">
-          <svg class="mr-3 -ml-1 size-5 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-        </div>
-      {:else}
-        <a href={url} target="_blank">
-          <img class="w-full rounded" src={imageData} alt="current song artwork" />
-        </a>
-      {/if}
-      <span class="text-white font-[Inter] font-bold w-full text-ellipsis truncate">{#if title == ""}Loading...{:else}{title}{/if}</span>
-      <audio bind:this={audioPlayer}>
-        <source src={basePath + "/stream"} type="audio/mp3">
-      </audio>
-      <div class="flex flex-row w-full mt-16 -mb-24 flex-wrap">
-        {#each {length: numberOfListeners} as _,i}
-          <img src={dancing_guys[getRandomInt(0,4)]} class="max-h-6 max-w-6 animate-bounce">
-        {/each}
+  <div class="flex flex-row md:flex-row-reverse md:items-center gap-2 max-w-screen md:max-w-200 w-full box-border">
+    <div class="p-4 bg-[#ff99b4] rounded-md border-white border-5 drop-shadow-md flex md:flex-row-reverse flex-col gap-4 w-full">
+      <div class="flex flex-col gap-4 w-full md:w-1/2 grow">
+        <h1 class="font-[Momentz] text-white font-bold text-4xl">Menthe à l'eau</h1>
+        <p class="text-white font-[Inter] font-bold">Créée à l'origine pour être un énorme dump de musique en tout genre. Cette playlist est contre toute attente devenue un énorme dump de musique en tout genre. Enjoy the radio. 📻</p>
       </div>
-      <div class="flex flex-col items-center w-full">
-        <div class="bg-[#ff99b4] w-32 rounded-full -mb-12 z-20">
-          {#if loadingSound}
-            <svg class="mr-3 -ml-1 w-full animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
-          {:else}
-            {#if isPlaying}
-              <svg xmlns="http://www.w3.org/2000/svg" onclick={buttonClick} class="text-white w-full cursor-pointer" viewBox="0 0 24 24"><path fill="currentColor" d="M6 16V8q0-.825.588-1.412T8 6h8q.825 0 1.413.588T18 8v8q0 .825-.587 1.413T16 18H8q-.825 0-1.412-.587T6 16"/></svg>
+      <div class="flex flex-col gap-4 w-full bg-[#f97095] md:w-1/2 p-4 rounded-md">
+        {#if imageData == ""}
+          <div class="block w-full pb-[26%] pt-[26%] flex flex-col items-center justify-center bg-[#ff99b4] rounded-md">
+            <svg class="mr-3 -ml-1 size-5 animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
+          </div>
+        {:else}
+          <a class="w-full" href={url} target="_blank">
+            <img class="w-full rounded relative" src={imageData} alt="current song artwork" />
+          </a>
+        {/if}
+        <span class="text-white font-[Inter] font-bold w-full text-ellipsis truncate">{#if title == ""}Loading...{:else}{title}{/if}</span>
+        <audio bind:this={audioPlayer}>
+          <source src={basePath + "/stream"} type="audio/mp3">
+        </audio>
+        <div class="flex flex-row w-full mt-16 -mb-24 flex-wrap">
+          {#each {length: numberOfListeners} as _,i}
+            <img src={dancing_guys[getRandomInt(0,4)]} class="max-h-6 max-w-6 animate-bounce">
+          {/each}
+        </div>
+        <div class="flex flex-col items-center w-full">
+          <div class="bg-[#ff99b4] w-32 rounded-full -mb-12 z-20 shadow-md">
+            {#if loadingSound}
+              <svg class="mr-3 -ml-1 w-full animate-spin text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
             {:else}
-              <svg xmlns="http://www.w3.org/2000/svg" onclick={buttonClick} class="text-white w-full cursor-pointer" viewBox="0 0 24 24"><path fill="currentColor" d="M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712"/></svg>
+              {#if isPlaying}
+                <svg xmlns="http://www.w3.org/2000/svg" onclick={buttonClick} class="text-white w-full cursor-pointer" viewBox="0 0 24 24"><path fill="currentColor" d="M6 16V8q0-.825.588-1.412T8 6h8q.825 0 1.413.588T18 8v8q0 .825-.587 1.413T16 18H8q-.825 0-1.412-.587T6 16"/></svg>
+              {:else}
+                <svg xmlns="http://www.w3.org/2000/svg" onclick={buttonClick} class="text-white w-full cursor-pointer" viewBox="0 0 24 24"><path fill="currentColor" d="M8 17.175V6.825q0-.425.3-.713t.7-.287q.125 0 .263.037t.262.113l8.15 5.175q.225.15.338.375t.112.475t-.112.475t-.338.375l-8.15 5.175q-.125.075-.262.113T9 18.175q-.4 0-.7-.288t-.3-.712"/></svg>
+              {/if}
             {/if}
-          {/if}
+          </div>
         </div>
       </div>
     </div>
-    <div class="flex flex-col bg-white rounded-md items-center justify-center h-fit mt-12 pt-4 pb-1 gap-2">
+    <div class="invisible md:visible flex flex-col bg-white rounded-md items-center justify-center h-fit shadow-md pt-4 pb-1 w-full max-w-8 gap-2">
       <input id="volume-slider" type="range" value="100" style="" onchange={(e) => audioPlayer.volume = parseInt(e.target.value) / 100}/>
       <svg xmlns="http://www.w3.org/2000/svg" class="h-8 text-[#ff99b4]" viewBox="0 0 24 24"><path fill="currentColor" d="M9 15H6q-.425 0-.712-.288T5 14v-4q0-.425.288-.712T6 9h3l3.3-3.3q.475-.475 1.088-.213t.612.938v11.15q0 .675-.612.938T12.3 18.3zm9.5-3q0 1.05-.475 1.988t-1.25 1.537q-.25.15-.512.013T16 15.1V8.85q0-.3.263-.437t.512.012q.775.625 1.25 1.575t.475 2"/></svg>
     </div>