diff --git a/src/renderer/views/app/chrome-bottom.ejs b/src/renderer/views/app/chrome-bottom.ejs
index 8625af6d..6576d586 100644
--- a/src/renderer/views/app/chrome-bottom.ejs
+++ b/src/renderer/views/app/chrome-bottom.ejs
@@ -112,6 +112,11 @@
                         :class="{'active': drawer.panel == 'lyrics'}"
                         @click="invokeDrawer('lyrics')"></button>
             </template>
+            <template v-else>
+                <button class="playback-button--small lyrics"
+                        :style="{'opacity': 0.5, 'pointer-events': 'none'}"
+                        @click="invokeDrawer('lyrics')"></button>
+            </template>
 
         </div>
     </div>
diff --git a/src/renderer/views/app/chrome-top.ejs b/src/renderer/views/app/chrome-top.ejs
index 84ed0270..b57834dd 100644
--- a/src/renderer/views/app/chrome-top.ejs
+++ b/src/renderer/views/app/chrome-top.ejs
@@ -128,7 +128,11 @@
                             :class="{'active': drawer.panel == 'lyrics'}"
                             @click="invokeDrawer('lyrics')"></button>
                 </template>
-    
+                <template v-else>
+                    <button class="playback-button--small lyrics"
+                            :style="{'opacity': 0.5, 'pointer-events': 'none'}"
+                            @click="invokeDrawer('lyrics')"></button>
+                </template>
             </div>
         </template>
         <div class="app-chrome-item full-height" id="window-controls-container" v-if="chrome.windowControlPosition == 'right'">