diff --git a/src/components/panelDisplay.vue b/src/components/panelDisplay.vue
index bae40c2e..82797af2 100644
--- a/src/components/panelDisplay.vue
+++ b/src/components/panelDisplay.vue
@@ -2,7 +2,7 @@
   <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
     <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab>
       <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="Live"></a></li>
-      <li><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="Captures"></a></li>
+      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="Captures"></a></li>
     </ul>
     <ul class="uk-switcher uk-flex uk-flex-1">
       <li class="uk-height-1-1 uk-width-1-1 "><streamDisplay/></li>
@@ -20,6 +20,14 @@ export default {
 
   components: {
     streamDisplay
+  },
+
+  computed: {
+    disableIfDisconnected: function () {
+      return {
+        'uk-disabled': !this.$store.state.connected
+      }
+    }
   }
 
 }
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
index 11caaac0..26ee3bec 100644
--- a/src/components/panelLeft.vue
+++ b/src/components/panelLeft.vue
@@ -5,10 +5,10 @@
     </div>
     <ul class="uk-flex-none uk-flex-center uk-margin-remove-top uk-margin-remove-bottom" uk-tab="swiping: false">
       <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="Connect"></a></li>
-      <li><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="Navigate"></a></li>
-      <li><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="Capture"></a></li>
-      <li><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="Plugins"></a></li>
-      <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="Configure"></a></li>
+      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="Navigate"></a></li>
+      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="Capture"></a></li>
+      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="Plugins"></a></li>
+      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="Configure"></a></li>
     </ul>
     <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
       <li class="uk-width-expand"><paneConnect/></li>
@@ -25,10 +25,20 @@ import paneNavigate from './paneNavigate.vue'
 // Export main app
 export default {
   name: 'panelLeft',
+
   components: {
     paneConnect,
     paneNavigate
+  },
+
+  computed: {
+    disableIfDisconnected: function () {
+      return {
+        'uk-disabled': !this.$store.state.connected
+      }
+    }
   }
+
 }
 </script>