diff --git a/src/main/cider-base.js b/src/main/cider-base.js
index 13c96d6b..eedbad50 100644
--- a/src/main/cider-base.js
+++ b/src/main/cider-base.js
@@ -222,6 +222,10 @@ const CiderBase = {
             win.minimize();
         })
 
+        ipcMain.on('setFullScreen',(event, flag) => {
+            win.setFullScreen(flag)
+        })
+
         if (process.platform === "win32") {
             let WND_STATE = {
                 MINIMIZED: 0,
diff --git a/src/renderer/index.js b/src/renderer/index.js
index 4e0ea168..99760db8 100644
--- a/src/renderer/index.js
+++ b/src/renderer/index.js
@@ -3048,6 +3048,11 @@ const app = new Vue({
                 gain: gain,
                 peak: peak
             }
+        },
+        fullscreen(flag){
+            if (flag){
+            ipcRenderer.send('setFullScreen', true); app.appMode = 'fullscreen';}
+            else { ipcRenderer.send('setFullScreen', false); app.appMode = 'player';}
         }
 
     }
diff --git a/src/renderer/style.less b/src/renderer/style.less
index 681ca819..e7fd16fc 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -3583,6 +3583,52 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
     height: 50vh;
   }
 
+  @media only screen and (max-width: 1023px) {
+    .display--large {
+        display: flex !important;
+    }
+  }
+  .display--large {
+    display: flex;
+
+    .slider {
+      width: 100%;
+      z-index: 1;
+    }
+
+    .input-container {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 100%
+    }
+
+    input[type=range] {
+      appearance: none;
+      width: 100%;
+      height: 4px;
+      background-color: rgb(200 200 200 / 50%);
+      border-radius: 2px;
+  
+      &::-webkit-slider-thumb {
+        opacity: 1;
+        transform: scale(0.5);
+        -webkit-appearance: none;
+        appearance: none;
+        width: 12px;
+        height: 12px;
+        border-radius: 100%;
+        background: rgba(77, 75, 75, 0.9);
+        cursor: default;
+        transition: opacity .10s var(--appleEase), transform .10s var(--appleEase);
+      }
+       
+    } 
+
+
+  }
+  
+
   .background{
     position: absolute;
     background-size: cover;
@@ -3723,8 +3769,12 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         font-size: 0.875em;
       }
       .song-name {
+        width: unset !important;
         margin-top: 0.15vh;
-        display: contents;
+        display: -webkit-box;
+        line-height: 1.2;
+        text-overflow: ellipsis;
+        text-align: center;
       }
     }
 
@@ -3775,7 +3825,7 @@ input[type="range"].web-slider.display--small::-webkit-slider-thumb {
         }
       }
     
-      > input[type=range] {
+       input[type=range] {
         appearance: none;
         width: 100%;
         height: 4px;
diff --git a/src/renderer/views/components/fullscreen.ejs b/src/renderer/views/components/fullscreen.ejs
index 3839ec74..8ef53dde 100644
--- a/src/renderer/views/components/fullscreen.ejs
+++ b/src/renderer/views/components/fullscreen.ejs
@@ -11,7 +11,7 @@
         </div>
         <div class="row fs-row">
             <div class="col artwork-col">
-                <div class="artwork"  @click="app.appMode = 'player'">
+                <div class="artwork"  @click="app.fullscreen(false)">
                     <mediaitem-artwork
                             :size="600"
                             :url="image ?? ''"
@@ -77,7 +77,13 @@
                                     v-else-if="app.mk.repeatMode == 2"></button>
                         </div>
                     </div>
-
+                    <div class="app-chrome-item volume display--large">
+                        <div class="app-chrome-item volume-icon"></div>
+                        <div class="input-container">
+                        <input type="range" class="slider" @wheel="app.volumeWheel" step="0.01" min="0" max="1" v-model="app.mk.volume"
+                               v-if="typeof app.mk.volume != 'undefined'">
+                        </div>       
+                    </div>
                     </div>
                 </template>
                 </div>
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index e0d409a3..1c6f6248 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -69,7 +69,7 @@
                         <template v-if="mkReady()">
                             <div class="app-playback-controls" @mouseover="chrome.progresshover = true"
                                  @mouseleave="chrome.progresshover = false" @contextmenu="nowPlayingContextMenu">
-                                <div class="artwork" @click="drawer.open = false; appMode = 'fullscreen'">
+                                <div class="artwork" @click="drawer.open = false; fullscreen(true)">
                                     <mediaitem-artwork :url="currentArtUrl"></mediaitem-artwork>
                                 </div>
                                 <div class="playback-info">