diff --git a/src/App.svelte b/src/App.svelte
index 92444de..8c39895 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -65,7 +65,7 @@
 </script>
 
 <div class="min-w-screen min-h-screen overflow-y-hidden flex flex-col items-center justify-center p-4">
-  <div class="flex -mt-8 md:mt-32 flex-row justify-between w-full max-w-200">
+  <div class="flex -mt-8 md:mt-32 flex-row justify-between w-full max-w-96">
     <div class="w-0 flex flex-col invisible md:w-fit md:visible items-end gap-4 -rotate-12 md:mb-6 md:-ml-36 md:-mt-16">
       <span class="speech-bubble arrow-left">Et t'écoutes quoi comme musique ?</span>
       <span class="speech-bubble arrow-right">Oh ... de tout</span>
@@ -73,25 +73,139 @@
     <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-200 w-full">
-    <div class="p-4 bg-[#f97095] rounded-md border-white border-5 drop-shadow-md flex flex-row gap-4 max-w-200 w-full">
-      
-      <div class="text-container flex flex-col gap-4 max-w-80"> <!--Left col-->
+
+    <div class="p-4 bg-[#f97095] rounded-md border-white border-5 drop-shadow-md flex md:flex-row flex-col gap-4 w-full">
+
+      <div class="flex flex-col gap-4 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>
       </div>
 
-      <div class="player-container flex flex-col gap-4"> <!--Right col-->
-        {#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>
+      <div class="flex flex-col gap-4 w-full">
+          {#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>
+        <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>
+              {: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}
+          </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">
+      <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>
+
+  </div>
+  <div class="w-fit h-fit flex mt-12 mb-24 md:mb-12 flex-col visible md:w-0 md:h-0 md:invisible items-end gap-4">
+    <span class="speech-bubble arrow-left">Et t'écoutes quoi comme musique ?</span>
+    <span class="speech-bubble arrow-right">Oh ... De tout.</span>
+  </div>
+  <div class="w-full opacity-50">
+    <span>Créé par Zuma · <a class="underline" href="https://git.shenanigans.cc/globuzma/mentalaradio">Source</a></span>
   </div>
 </div>
+
+<style>
+#volume-slider {
+  border-radius:5px;
+  width: 5px;
+  height: 9rem;
+  background: #d3d3d3;
+  -webkit-appearance: none;
+  outline: none;
+  writing-mode: vertical-lr;
+  direction: rtl;
+  vertical-align: middle;
+}
+
+#volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border: none;
+  outline: none;
+  border-radius: 50%;
+  background: #ff99b4;
+  cursor: pointer;
+}
+
+#volume-slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border: none;
+  outline: none;
+  border-radius: 50%;
+  background: #ff99b4;
+  cursor: pointer;
+}
+
+.speech-bubble {
+  width: fit-content;
+  padding: 1rem;
+	position: relative;
+	background: #FFF;
+	border-radius: .4em;
+}
+
+.arrow-right:after {
+  content: '';
+	position: absolute;
+	right: 0;
+	top: 50%;
+	width: 0;
+	height: 0;
+	border: 0.969em solid transparent;
+	border-left-color: #FFF;
+	border-right: 0;
+	margin-top: -0.969em;
+	margin-right: -0.7em;
+}
+.arrow-left:after {
+	content: '';
+	position: absolute;
+	left: 0;
+	top: 50%;
+	width: 0;
+	height: 0;
+	border: 0.969em solid transparent;
+	border-right-color: #FFF;
+	border-left: 0;
+	margin-top: -0.969em;
+	margin-left: -0.7em;
+}
+
+:global(body) {
+  background-size: cover;
+  background-image: url('data:image/svg+xml,<svg width="1920" xmlns="http://www.w3.org/2000/svg" height="1080" fill="none"><defs><clipPath id="a" class="frame-clip frame-clip-def"><rect rx="0" ry="0" width="1920" height="1080" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)"/></clipPath></defs><g clip-path="url(%23a)"><g class="fills"><rect width="1920" height="1080" class="frame-background" transform="matrix(1.000000, 0.000000, 0.000000, 1.000000, 0.000000, 0.000000)" style="fill: rgb(16, 180, 182); fill-opacity: 1;" ry="0" rx="0"/></g><g class="frame-children"><path d="M-407.000,424.309C-127.000,173.309,162.125,206.159,425.000,263.663C553.000,291.663,803.000,413.663,1012.000,391.663C1338.616,357.282,1986.000,270.000,2173.000,444.000C2360.000,618.000,1955.000,946.309,1955.000,946.309L-109.000,949.309L-407.000,424.309Z" style="fill: rgb(18, 187, 190); fill-opacity: 1;" class="fills"/><path d="M-534.000,480.309C-254.000,229.309,35.125,262.159,298.000,319.663C426.000,347.663,676.000,469.663,885.000,447.663C1211.616,413.282,1859.000,326.000,2046.000,500.000C2233.000,674.000,1828.000,1002.309,1828.000,1002.309L-236.000,1005.309L-534.000,480.309Z" style="fill: rgb(52, 191, 196); fill-opacity: 1;" class="fills"/><path d="M-338.000,572.309C-58.000,321.309,231.125,354.159,494.000,411.663C622.000,439.663,872.000,561.663,1081.000,539.663C1407.616,505.282,1886.000,379.309,2073.000,553.309C2260.000,727.309,2024.000,1094.309,2024.000,1094.309L-40.000,1097.309L-338.000,572.309Z" style="fill: rgb(71, 194, 202); fill-opacity: 1;" class="fills"/><path d="M-469.000,629.309C-189.000,378.309,100.125,411.159,363.000,468.663C491.000,496.663,741.000,618.663,950.000,596.663C1276.616,562.282,1755.000,436.309,1942.000,610.309C2129.000,784.309,1893.000,1151.309,1893.000,1151.309L-171.000,1154.309L-469.000,629.309Z" style="fill: rgb(112, 204, 215); fill-opacity: 1;" class="fills"/><path d="M-373.000,741.309C-93.000,490.309,196.125,523.159,459.000,580.663C587.000,608.663,837.000,730.663,1046.000,708.663C1372.616,674.282,1851.000,548.309,2038.000,722.309C2225.000,896.309,1989.000,1263.309,1989.000,1263.309L-75.000,1266.309L-373.000,741.309Z" style="fill: rgb(255, 255, 255); fill-opacity: 1;" class="fills"/><path d="M-350.000,798.646C-70.000,547.646,193.000,571.646,452.000,644.646C711.000,717.646,881.000,886.646,1189.000,772.646C1497.000,658.646,1874.000,605.646,2061.000,779.646C2248.000,953.646,2012.000,1320.646,2012.000,1320.646L-52.000,1323.646L-350.000,798.646Z" style="fill: rgb(253, 196, 127); fill-opacity: 1;" class="fills"/><path d="M-344.000,865.646C-64.000,614.646,199.000,638.646,458.000,711.646C717.000,784.646,887.000,953.646,1195.000,839.646C1503.000,725.646,1880.000,672.646,2067.000,846.646C2254.000,1020.646,2018.000,1387.646,2018.000,1387.646L-46.000,1390.646L-344.000,865.646Z" style="fill: rgb(254, 202, 132); fill-opacity: 1;" class="fills"/><path d="M-372.000,935.000C-92.000,684.000,171.000,708.000,430.000,781.000C689.000,854.000,859.000,1023.000,1167.000,909.000C1475.000,795.000,1852.000,742.000,2039.000,916.000C2226.000,1090.000,1990.000,1457.000,1990.000,1457.000L-74.000,1460.000L-372.000,935.000Z" style="fill: rgb(254, 206, 142); fill-opacity: 1;" class="fills"/></g></g></svg>');
+}
+
+</style>