diff --git a/src/App.vue b/src/App.vue
index 96649f36..ec9f6b47 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,56 @@
 <template>
   <div id="app" v-bind:class="handleTheme">
-    <div uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
-      <div id="sidebar-container" v-bind:class="{ 'overlay-panel': this.window.width<850 }" class="uk-padding-remove uk-first-column uk-inline uk-height-1-1">
-        <div id="overlay-toggle">
-          <a href="" class="uk-icon-button uk-box-shadow-small uk-box-shadow-hover-medium action-btn-outline" uk-icon="menu" uk-toggle="target: #left-panel-container; animation: uk-animation-slide-left-small, uk-animation-slide-left-small" ></a>
-        </div>
-        <div id="left-panel-container" class="uk-padding-remove uk-card uk-card-default uk-width-auto uk-height-1-1" v-bind:class="{ 'uk-card-secondary': $store.state.globalSettings.darkMode }">
-          <panelLeft/>
-        </div>
+
+    <div v-if="this.onMobile" uk-grid class="uk-height-1-1 uk-margin-remove uk-padding-remove" margin=0>
+      <div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-auto uk-height-1-1">
+        <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="pos: bottom; title: Connect"></a></li>
+          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
+          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
+          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
+          <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
+        </ul>
+        <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
+          <li class="uk-width-expand"><paneConnect/></li>
+          <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
+          <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
+          <li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
+          <li class="uk-width-expand"><paneSettings/></li>
+        </ul>
       </div>
-      <div id="main-panel-container" class="uk-padding-remove uk-height-1-1 uk-width-expand">
-        <panelDisplay/>
+      <div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-width-expand uk-height-1-1">
+        <ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
+          <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
+          <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
+        </ul>
+        <ul class="uk-switcher uk-flex uk-flex-1">
+          <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
+          <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
+        </ul>
       </div>
     </div>
+
+    <div v-else class="uk-height-1-1 uk-width-1-1 uk-margin-remove uk-padding-remove" margin=0>
+        <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="pos: bottom; title: Connect"></a></li>
+          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
+          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
+          <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
+          <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
+          <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
+          <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
+        </ul>
+        <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
+          <li class="uk-width-expand"><paneConnect/></li>
+          <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
+          <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
+          <li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
+          <li class="uk-width-expand"><paneSettings/></li>
+          <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
+          <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
+        </ul>
+    </div>
+
   </div>
 </template>
 
@@ -23,16 +61,27 @@ import axios from 'axios'
 import UIkit from 'uikit';
 
 // Import components
-import panelLeft from './components/panelLeft.vue'
-import panelDisplay from './components/panelDisplay.vue'
+import paneConnect from './components/paneConnect.vue'
+import paneNavigate from './components/paneNavigate.vue'
+import paneCapture from './components/paneCapture.vue'
+import panePlugins from './components/panePlugins.vue'
+import paneSettings from './components/paneSettings.vue'
+// Import components
+import streamDisplay from './components/paneDisplayComponents/streamDisplay.vue'
+import galleryDisplay from './components/paneDisplayComponents/galleryDisplay.vue'
 
 // Export main app
 export default {
   name: 'app',
 
   components: {
-    panelLeft,
-    panelDisplay
+    streamDisplay,
+    galleryDisplay,
+    paneConnect,
+    paneNavigate,
+    paneCapture,
+    panePlugins,
+    paneSettings
   },
 
   data: function () {
@@ -67,6 +116,29 @@ export default {
     window.addEventListener('beforeunload', this.handleExit)
   },
 
+  mounted() {
+    // Attach methods to UIkit events for tab switching
+    var context = this;
+    // Gallery tab
+    UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
+      console.log("Gallery tab entered")
+      if (context.$store.state.globalSettings.trackWindow == true) {
+        context.$root.$emit('globalTogglePreview', false)
+      }
+      context.$root.$emit('globalUpdateCaptureList');
+    });
+
+    // Stream tab
+    UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
+      console.log("Stream tab entered")
+      UIkit.update()
+      if (context.$store.state.globalSettings.trackWindow == true) {
+        context.$root.$emit('globalTogglePreview', true)
+      }
+    });
+
+  },
+
   beforeDestroy: function () {
     window.removeEventListener('resize', this.handleResize)
   },
@@ -89,6 +161,14 @@ export default {
         'uk-light': this.$store.state.globalSettings.darkMode,
         'uk-background-secondary': this.$store.state.globalSettings.darkMode
       }
+    },
+    disableIfDisconnected: function () {
+      return {
+        'uk-disabled': !this.$store.getters.ready
+      }
+    },
+    onMobile: function () {
+      return (this.window.width >= 800) ? true : false 
     }
   }
 
@@ -148,4 +228,18 @@ body, html {
     opacity: 0.5;
 }
 
+.uk-tab {
+    padding-left: 0;
+}
+.panel-content {
+  width: 300px;
+  overflow: auto;
+}
+
+#panelLeft {
+  border-width: 0 1px 0 0;
+  border-style: solid;
+  border-color: rgba(180, 180, 180, 0.25)
+}
+
 </style>
diff --git a/src/components/panelDisplay.vue b/src/components/panelDisplay.vue
deleted file mode 100644
index f07c2efe..00000000
--- a/src/components/panelDisplay.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
-  <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="swiping: false">
-      <li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
-      <li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
-    </ul>
-    <ul class="uk-switcher uk-flex uk-flex-1">
-      <li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>
-      <li class="uk-height-1-1 uk-width-1-1 uk-overflow-auto" id="galleryDisplayTab"><galleryDisplay/></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-import UIkit from 'uikit';
-
-// Import components
-import streamDisplay from './paneDisplayComponents/streamDisplay.vue'
-import galleryDisplay from './paneDisplayComponents/galleryDisplay.vue'
-
-// Export main app
-export default {
-  name: 'panelDisplay',
-
-  components: {
-    streamDisplay,
-    galleryDisplay
-  },
-
-  mounted() {
-    // Attach methods to UIkit events for tab switching
-    var context = this;
-    // Gallery tab
-    UIkit.util.on('#galleryDisplayTab', 'shown', function(event, area) {
-      console.log("Gallery tab entered")
-      if (context.$store.state.globalSettings.trackWindow == true) {
-        context.$root.$emit('globalTogglePreview', false)
-      }
-      context.$root.$emit('globalUpdateCaptureList');
-    });
-
-    // Stream tab
-    UIkit.util.on('#streamDisplayTab', 'shown', function(event, area) {
-      console.log("Stream tab entered")
-      UIkit.update()
-      if (context.$store.state.globalSettings.trackWindow == true) {
-        context.$root.$emit('globalTogglePreview', true)
-      }
-    });
-
-  }
-
-}
-</script>
-
-<style scoped lang="less">
-</style>
diff --git a/src/components/panelLeft.vue b/src/components/panelLeft.vue
deleted file mode 100644
index 6997d46b..00000000
--- a/src/components/panelLeft.vue
+++ /dev/null
@@ -1,59 +0,0 @@
-<template>
-  <div id="panelLeft" 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-top uk-margin-remove-bottom" uk-tab="swiping: false">
-      <li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="pos: bottom; title: Connect"></a></li>
-      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
-      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
-      <li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
-      <li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
-    </ul>
-    <ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
-      <li class="uk-width-expand"><paneConnect/></li>
-      <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneNavigate/></div></li>
-      <li class="uk-width-expand"><div v-if="$store.getters.ready"><paneCapture/></div></li>
-      <li class="uk-width-expand"><div v-if="$store.getters.ready"><panePlugins/></div></li>
-      <li class="uk-width-expand"><paneSettings/></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-// Import components
-import paneConnect from './paneConnect.vue'
-import paneNavigate from './paneNavigate.vue'
-import paneCapture from './paneCapture.vue'
-import panePlugins from './panePlugins.vue'
-import paneSettings from './paneSettings.vue'
-
-// Export main app
-export default {
-  name: 'panelLeft',
-
-  components: {
-    paneConnect,
-    paneNavigate,
-    paneCapture,
-    panePlugins,
-    paneSettings
-  },
-
-  computed: {
-    disableIfDisconnected: function () {
-      return {
-        'uk-disabled': !this.$store.getters.ready
-      }
-    }
-  }
-
-}
-</script>
-
-<style lang="less">
-.uk-tab {
-    padding-left: 0;
-}
-.panel-content {
-  width: 300px;
-  overflow: auto;
-}
-</style>