diff --git a/src/renderer/style.less b/src/renderer/style.less
index 178af28c..3aafbff5 100644
--- a/src/renderer/style.less
+++ b/src/renderer/style.less
@@ -633,10 +633,18 @@ input[type=range].web-slider::-webkit-slider-runnable-track {
 }
 
 .app-chrome .app-chrome-item.volume {
-  width: 80px;
+  width: 100px;
   margin-right: 6px;
 }
 
+.app-chrome-item.volume-icon {
+  filter: contrast(0);
+  background-image: url(http://localhost:9000/assets/volume-up.svg);
+  height: 15px;
+  width: 30px;
+  background-repeat: no-repeat;
+}
+
 .app-chrome .app-chrome-item.volume>input[type=range]::-webkit-slider-thumb {
   transition: all var(--appleTransition);
 }
diff --git a/src/renderer/views/main.ejs b/src/renderer/views/main.ejs
index bc96e5d7..69c43808 100644
--- a/src/renderer/views/main.ejs
+++ b/src/renderer/views/main.ejs
@@ -105,6 +105,7 @@
             </div>
             <div class="app-chrome--right">
                 <div class="app-chrome-item volume display--large">
+                    <div class="app-chrome-item volume-icon"></div>
                     <input type="range" class="" step="0.01" min="0" max="1" v-model="mk.volume"
                            v-if="typeof mk.volume != 'undefined'">
                 </div>