diff --git a/src/assets/scss/5-modules/controls.scss b/src/assets/scss/5-modules/controls.scss
new file mode 100644
index 0000000..f82021c
--- /dev/null
+++ b/src/assets/scss/5-modules/controls.scss
@@ -0,0 +1,106 @@
+/* ----------------------------------------------------------- */
+/* == control module */
+/* ----------------------------------------------------------- */
+
+.controls {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Volume
+-------------------------------------------------------------- */
+
+.controls__volume {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: 1rem;
+  padding-top: .1rem;
+}
+
+/* Controls
+-------------------------------------------------------------- */
+
+.controls__controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-grow: 1;
+}
+
+.controls__prevnext {
+  padding: 1rem;
+  border: none;
+  border-radius: .2rem;
+  background: none;
+  color: $color-primary;
+  font-size: 0;
+}
+
+.controls__prevnext.disabled {
+  color: rgba($color-primary, .4);
+}
+
+.controls__prevnext svg {
+  width: 1.8rem;
+  height: 2rem;
+}
+
+.playerBig .controls__prevnext svg {
+  width: 2.1rem;
+  height: 2.2rem;
+}
+
+.controls__playpause {
+  margin: 0 2rem;
+  padding: 0;
+  border: none;
+  border-radius: 4.2rem;
+  background: none;
+  color: $color-primary;
+  font-size: 0;
+}
+
+.controls__playpause svg {
+  width: 4.6rem;
+  height: 4.6rem;
+}
+
+.playerBig .controls__playpause {
+  margin: 0 3rem;
+}
+
+.playerBig .controls__playpause svg {
+  width: 5.6rem;
+  height: 5.6rem;
+}
+
+.controls__playpause.disabled {
+  color: rgba($color-primary, .4);
+}
+
+/* Menu
+-------------------------------------------------------------- */
+
+.controls__menu {
+  margin-right: -1rem;
+}
+
+.controls__menuBtn {
+  padding: 1rem;
+  border: none;
+  background: none;
+  color: $color-primary;
+  font-size: 0;
+}
+
+.controls__menuBtn svg {
+  width: 2.5rem;
+  height: .5rem;
+}
+
+.playerBig .controls__menuBtn svg {
+  width: 3.2rem;
+  height: .6rem;
+}
diff --git a/src/assets/scss/5-modules/player-big.scss b/src/assets/scss/5-modules/player-big.scss
index e46f4e5..30018f4 100644
--- a/src/assets/scss/5-modules/player-big.scss
+++ b/src/assets/scss/5-modules/player-big.scss
@@ -2,6 +2,10 @@
 /* == Big player */
 /* ----------------------------------------------------------- */
 
+.playerBig {
+  margin-bottom: 6rem;
+}
+
 .playerBig__player {
   position: relative;
   overflow: hidden;
diff --git a/src/assets/scss/5-modules/volume.scss b/src/assets/scss/5-modules/volume.scss
index 184a368..76df5db 100644
--- a/src/assets/scss/5-modules/volume.scss
+++ b/src/assets/scss/5-modules/volume.scss
@@ -4,7 +4,12 @@
 
 .volume {
   position: relative;
-  margin: 1rem 0;
+  margin: 0;
+}
+
+.playerBig .volume {
+  transform: scale(1.11);
+  transform-origin: left center;
 }
 
 .volume__bg,
diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
index fd0fc1c..43cd932 100755
--- a/src/assets/scss/style.scss
+++ b/src/assets/scss/style.scss
@@ -66,6 +66,7 @@
 @import "5-modules/player-progress";
 @import "5-modules/player-track";
 @import "5-modules/volume";
+@import "5-modules/controls";
 
 
 // --------------------------------------------------------------
diff --git a/src/components/Controls.svelte b/src/components/Controls.svelte
index 65b19f7..c5d4892 100644
--- a/src/components/Controls.svelte
+++ b/src/components/Controls.svelte
@@ -1,29 +1,29 @@
 <div class="controls">
-    <div class="controls-group">
+    <div class="controls__volume">
         <Volume></Volume>
     </div>
 
-    <div class="controls-group">
-        <button class:cant={!$canPrevious} on:click={() => selectPrevious()}>⏮️</button>
-
-        <button on:click={() => $paused = !$paused}>
-            {#if $current === null}
-                ▶️
-            {:else if $loading}
-                🕒
-            {:else if $paused}
-                ▶️
-            {:else }
-                ⏸️
-            {/if}
-        </button>
-
-        <button class:cant={!$canNext} on:click={() => selectNext()}>⏭️</button>
+    <div class="controls__controls">
+        <button
+            class="controls__prevnext"
+            class:disabled={!$canPrevious} on:click={() => selectPrevious()}
+            disabled={!$canPrevious} on:click={() => selectPrevious()}
+            aria-label="Prev"
+            title="Previous song"
+        ><Prev></Prev></button>
+        <PlayPause on:click={() => $paused = !$paused}></PlayPause>
+        <button
+            class="controls__prevnext"
+            class:disabled={!$canNext}
+            disabled={!$canNext}
+            on:click={() => selectNext()}
+            aria-label="Next"
+            title="Next Song"
+        ><Next></Next></button>
     </div>
 
-    <div class="controls-group">
-        <button>⭐</button>
-        <button>🔁</button>
+    <div class="controls__menu">
+        <button class="controls__menuBtn" aria-label="track menu"><IconMenu></IconMenu></button>
     </div>
 </div>
 
@@ -40,20 +40,13 @@
         loading
     } from '/store.js'
     import Volume from '/components/Volume'
+    import PlayPause from '/components/icons/controls/PlayPause'
+    import Prev from '/components/icons/controls/Prev'
+    import Next from '/components/icons/controls/Next'
+    import IconMenu from '/components/icons/Menu'
 </script>
 
 <style>
-    .controls {
-        width: 100%;
-        display: flex;
-        flex-wrap: wrap;
-    }
-
-    .controls-group {
-        margin: 0 1rem;
-
-    }
-
     .cant {
         background-color: red;
     }
diff --git a/src/components/Radio.svelte b/src/components/Radio.svelte
index 99baf31..cf4200b 100644
--- a/src/components/Radio.svelte
+++ b/src/components/Radio.svelte
@@ -7,7 +7,6 @@
 
     <section class="viewer">
         <Viewer></Viewer>
-        <Controls></Controls>
     </section>
 
     <section class="queue">
@@ -23,7 +22,6 @@
 
     import Header from '/components/layout/Header.svelte'
     import Footer from '/components/layout/Footer.svelte'
-    import Controls from '/components/Controls.svelte'
     import Queue from '/components/Queue.svelte'
     import Viewer from '/components/Viewer.svelte'
     import { radioIterator, radioShareIterator } from '/services/radio.js'
diff --git a/src/components/Viewer.svelte b/src/components/Viewer.svelte
index 11076a2..2ea7498 100644
--- a/src/components/Viewer.svelte
+++ b/src/components/Viewer.svelte
@@ -36,12 +36,15 @@
         </div>
         <button class="playerTrack__fav" class:hidden={!$current} aria-label="Fav"><IconHeart></IconHeart></button>
     </div>
+
+    <Controls></Controls>
 </div>
 
 
 
 <script>
     import { get } from 'svelte/store'
+    import Controls from '/components/Controls.svelte'
     import IconReduce from '/components/icons/player/Reduce.svelte'
     import IconHeart from '/components/icons/Heart.svelte'
     import YoutubePlayer from '/components/YoutubePlayer'
diff --git a/src/components/icons/Menu.svelte b/src/components/icons/Menu.svelte
new file mode 100644
index 0000000..10dac11
--- /dev/null
+++ b/src/components/icons/Menu.svelte
@@ -0,0 +1,3 @@
+<svg width="25" height="5" viewBox="0 0 25 5" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M2.5 5C3.88071 5 5 3.88071 5 2.5C5 1.11929 3.88071 0 2.5 0C1.11929 0 0 1.11929 0 2.5C0 3.88071 1.11929 5 2.5 5ZM12.5 5C13.8807 5 15 3.88071 15 2.5C15 1.11929 13.8807 0 12.5 0C11.1193 0 10 1.11929 10 2.5C10 3.88071 11.1193 5 12.5 5ZM25 2.5C25 3.88071 23.8807 5 22.5 5C21.1193 5 20 3.88071 20 2.5C20 1.11929 21.1193 0 22.5 0C23.8807 0 25 1.11929 25 2.5Z"/>
+</svg>
diff --git a/src/components/icons/controls/Next.svelte b/src/components/icons/controls/Next.svelte
new file mode 100644
index 0000000..a35f3a1
--- /dev/null
+++ b/src/components/icons/controls/Next.svelte
@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M15.8707 0.964233C14.7661 0.964233 13.8707 1.85966 13.8707 2.96423V8.02854L3.68216 1.94812C2.34904 1.15252 0.657227 2.11305 0.657227 3.66553V16.3345C0.657227 17.887 2.34904 18.8475 3.68217 18.0519L13.8707 11.9715V17.0357C13.8707 18.1402 14.7661 19.0357 15.8707 19.0357H15.9999C17.1044 19.0357 17.9999 18.1402 17.9999 17.0357V2.96423C17.9999 1.85966 17.1044 0.964233 15.9999 0.964233H15.8707Z"/>
+</svg>
diff --git a/src/components/icons/controls/PlayPause.svelte b/src/components/icons/controls/PlayPause.svelte
new file mode 100644
index 0000000..9efa443
--- /dev/null
+++ b/src/components/icons/controls/PlayPause.svelte
@@ -0,0 +1,17 @@
+<button class="controls__playpause" class:disabled={ $current === null || $loading} on:click>
+    <svg width="47" height="46" viewBox="0 0 47 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+        {#if !$paused}
+            <path class="pause" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M23.503 46C36.2738 46 46.6266 35.7025 46.6266 23C46.6266 10.2975 36.2738 0 23.503 0C10.7322 0 0.379395 10.2975 0.379395 23C0.379395 35.7025 10.7322 46 23.503 46ZM17 16C17 14.8954 17.8954 14 19 14C20.1046 14 21 14.8954 21 16V30C21 31.1046 20.1046 32 19 32C17.8954 32 17 31.1046 17 30V16ZM29 14C27.8954 14 27 14.8954 27 16V30C27 31.1046 27.8954 32 29 32C30.1046 32 31 31.1046 31 30V16C31 14.8954 30.1046 14 29 14Z"/>
+        {:else }
+            <path class="play" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M46.6232 23C46.6232 35.7025 36.2704 46 23.4996 46C10.7288 46 0.375977 35.7025 0.375977 23C0.375977 10.2975 10.7288 0 23.4996 0C36.2704 0 46.6232 10.2975 46.6232 23ZM32.4949 23.844C33.1131 23.4512 33.1131 22.5489 32.4949 22.156L20.4942 14.5299C19.8285 14.1068 18.9579 14.5851 18.9579 15.3739V30.6261C18.9579 31.4149 19.8285 31.8932 20.4942 31.4701L32.4949 23.844Z"/>
+        {/if}
+    </svg>
+</button>
+
+<script>
+    import {
+        paused,
+        current,
+        loading
+    } from '/store.js'
+</script>
\ No newline at end of file
diff --git a/src/components/icons/controls/Prev.svelte b/src/components/icons/controls/Prev.svelte
new file mode 100644
index 0000000..da0a20c
--- /dev/null
+++ b/src/components/icons/controls/Prev.svelte
@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" fill-rule="evenodd" clip-rule="evenodd" d="M2.12852 0.964233C3.23308 0.964233 4.12852 1.85966 4.12852 2.96423V8.02874L14.3173 1.94812C15.6505 1.15252 17.3423 2.11305 17.3423 3.66553V16.3345C17.3423 17.887 15.6505 18.8475 14.3173 18.0519L4.12852 11.9713V17.0357C4.12852 18.1402 3.23308 19.0357 2.12851 19.0357H1.9993C0.894732 19.0357 -0.00069809 18.1402 -0.00069809 17.0357V2.96423C-0.00069809 1.85966 0.894733 0.964233 1.9993 0.964233H2.12852Z"/>
+</svg>