diff --git a/client/src/js/actions/index.js b/client/src/js/actions/index.js
index afb2787..8fe6e6b 100644
--- a/client/src/js/actions/index.js
+++ b/client/src/js/actions/index.js
@@ -24,7 +24,7 @@ const actions = {
     setBootScreenState: value => state => ({ showBootScreen: value }),
     setMode: value => state => save('', { mode: value }),
 
-    settings: {
+   settings: {
         setVisibility: value => state => save('settings', { isVisible: !state.isVisible }),
         setVisibleCategory: value => state => save('settings', {category: value }),
     },
@@ -43,7 +43,7 @@ const actions = {
         let manager = nipplejs.create({
             zone: el,
             mode: 'static',
-            position: {left: '50%', top: '50%'},
+            position: {right: '55%', bottom: '55%'},
             size: el.clientHeight,
             // dataOnly: true
         });
diff --git a/client/src/js/app.js b/client/src/js/app.js
index 51018c0..f80e7a5 100644
--- a/client/src/js/app.js
+++ b/client/src/js/app.js
@@ -21,4 +21,5 @@ core(wiredActions);
 // This disables bouncing in iOS
 // https://bugs.webkit.org/show_bug.cgi?id=182521
 // https://stackoverflow.com/a/50856621/1589989
-window.addEventListener("touchmove", (event) => event.preventDefault(), {passive: false} );
+// this is commented out since its prevents from moving thumb on mobile devices
+// window.addEventListener("touchmove", (event) => event.preventDefault(), {passive: false} );
diff --git a/client/src/js/view/components/gripper.js b/client/src/js/view/components/gripper.js
index df2dd59..9223cf5 100644
--- a/client/src/js/view/components/gripper.js
+++ b/client/src/js/view/components/gripper.js
@@ -1,5 +1,6 @@
 import { h } from 'hyperapp'
 import { RangeInput } from "./elements/range-input";
+import {throttle} from 'lodash'
 
 
 export const Gripper = ({state, action}) => 
@@ -9,7 +10,7 @@ export const Gripper = ({state, action}) =>
             state={state} 
             labelMax={IconGripperOpen} 
             labelMin={IconGripperClose}
-            oninput={(value) => action.m.setGripper(value)} 
+            oninput={(value) => setGripperThrottled(value, action)} 
             onchange={action.gripper.setValue}/>
 
     </div>
@@ -18,4 +19,6 @@ const IconGripperOpen = () =>
     <img src={require("../../../img/ui/gripper-opened.svg")} class="gripperControl_icons_icon"/>
 
 const IconGripperClose = () =>
-    <img src={require("../../../img/ui/gripper-closed.svg")} class="gripperControl_icons_icon"/>
\ No newline at end of file
+    <img src={require("../../../img/ui/gripper-closed.svg")} class="gripperControl_icons_icon"/>
+
+const setGripperThrottled = throttle((value, action) => action.m.setGripper(value), 100, { 'trailing': false });
diff --git a/client/src/js/view/components/joystick.js b/client/src/js/view/components/joystick.js
index c1a80f8..8ab6862 100644
--- a/client/src/js/view/components/joystick.js
+++ b/client/src/js/view/components/joystick.js
@@ -2,5 +2,5 @@ import { h } from 'hyperapp'
 
 export const Joystick = ({mode, joystick, motors}) =>
     <div class={(mode==='drive') ? 'joystick' : 'joystick joystick-hide'} oncreate={(el) => joystick({el, motors})}>
-        <img class='joystick_image' src={require('../../../img/ui/right-krzyz.svg')}/>
+        {/* <img class='joystick_image' src={require('../../../img/ui/right-krzyz.svg')}/> */}
     </div>
diff --git a/client/src/js/view/components/manipulator.js b/client/src/js/view/components/manipulator.js
index bc838b8..885d0b0 100644
--- a/client/src/js/view/components/manipulator.js
+++ b/client/src/js/view/components/manipulator.js
@@ -13,8 +13,8 @@ export const Manipulator = ({mode, state, action})  =>
         <RangeInput 
             name='AXIS 2' 
             state={state.axis2} 
-            oninput={(value) => setManipulator(state.axis1.value, value, action)} 
+            oninput={(value) => setManipulatorThrottled(state.axis1.value, value, action)} 
             onchange={action.axis2.setValue}/>
     </div>
 
-const setManipulator = throttle((axis1, axis2, action) => action.m.setAxes(axis1, axis2), 100, { 'trailing': false });
+const setManipulatorThrottled = throttle((axis1, axis2, action) => action.m.setAxes(axis1, axis2), 100, { 'trailing': false });
diff --git a/client/src/js/view/components/settings/index.js b/client/src/js/view/components/settings/index.js
index df3bbc4..7f29981 100644
--- a/client/src/js/view/components/settings/index.js
+++ b/client/src/js/view/components/settings/index.js
@@ -1,9 +1,9 @@
 import { h } from 'hyperapp'
-import {SettingsGeneral} from './general'
-import { SettingsNetwork } from "./network";
-import { SettingsManipulator } from "./manipulator";
-import { SettingsDebug } from "./debug";
-import { SettingsAbout } from "./about";
+import {SettingsGeneral} from './settings-general'
+import { SettingsNetwork } from "./settings-network";
+import { SettingsManipulator } from "./settings-manipulator";
+import { SettingsDebug } from "./settings-debug";
+import { SettingsAbout } from "./settings-about";
 
 export const Settings = ({state, actions})  => 
     <div class={(state.settings.isVisible===true) ? 'settings' : 'settings settings-hide'}>
diff --git a/client/src/js/view/components/settings/about.js b/client/src/js/view/components/settings/settings-about.js
similarity index 100%
rename from client/src/js/view/components/settings/about.js
rename to client/src/js/view/components/settings/settings-about.js
diff --git a/client/src/js/view/components/settings/debug.js b/client/src/js/view/components/settings/settings-debug.js
similarity index 100%
rename from client/src/js/view/components/settings/debug.js
rename to client/src/js/view/components/settings/settings-debug.js
diff --git a/client/src/js/view/components/settings/general.js b/client/src/js/view/components/settings/settings-general.js
similarity index 100%
rename from client/src/js/view/components/settings/general.js
rename to client/src/js/view/components/settings/settings-general.js
diff --git a/client/src/js/view/components/settings/manipulator.js b/client/src/js/view/components/settings/settings-manipulator.js
similarity index 100%
rename from client/src/js/view/components/settings/manipulator.js
rename to client/src/js/view/components/settings/settings-manipulator.js
diff --git a/client/src/js/view/components/settings/network.js b/client/src/js/view/components/settings/settings-network.js
similarity index 100%
rename from client/src/js/view/components/settings/network.js
rename to client/src/js/view/components/settings/settings-network.js
diff --git a/client/src/js/view/components/statusbar.js b/client/src/js/view/components/statusbar.js
deleted file mode 100644
index 0903297..0000000
--- a/client/src/js/view/components/statusbar.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { h } from 'hyperapp'
-
-
-export const StatusBar = ({state, switchSettings})  => 
-    <section id="statusbar" class="statusbar">
-        <img class="statusbar_logo" src={require("../../../img/ui/turtle-logo.svg")}/>
-        <div class="statusbar_indicators">
-            <IndicatorBattery batteryLevel={state.batteryLevel}/>
-            <IndicatorSignal signalLevel={state.signalLevel}/>
-        </div>
-        <div id="statusbar_actions" class="statusbar_actions">
-            {/* <img class="statusbar_actions_action" id="button-screenrecord" src={require("../../../img/ui/nav-bar-rec.svg")}/> */}
-                {/* <a id="snap-download-a">  */}
-            {/* <img class="statusbar_actions_action" id="button-screenshot" src={require("../../../img/ui/nav-bar-snap.svg")}/> */}
-                {/* </a>  */}
-            {/* <img class="statusbar_actions_action" id="button-fullscreen" src={require("../../../img/ui/nav-bar-fullscreen.svg")}/> */}
-        </div>
-
-        <div class="statusbar_menu" onmousedown={() => switchSettings()}>
-            <div class="statusbar_menu_bar"></div>
-        </div>
-    </section>
-
-const IndicatorBattery = ({batteryLevel}) => 
-    <img id="indicator-battery" class="statusbar_indicators_indicator" src={batteryLevelIcon(batteryLevel)}/>
-
-const IndicatorSignal = ({signalLevel}) =>
-    <img id="indicator-signal" class="statusbar_indicators_indicator" src={signalLevelIcon(signalLevel)}/>
-
-
-const batteryLevelIcon = (batteryLevel) => {
-    if (19.5 <= batteryLevel==batteryLevel < 21.5) {
-        return require("../../../img/ui/battery-1.svg")
-    } else if (21.5 <= batteryLevel==batteryLevel < 23) {
-        return require("../../../img/ui/battery-2.svg")
-    } else if (23 <= batteryLevel==batteryLevel < 24) {
-        return require("../../../img/ui/battery-3.svg")
-    } else if (batteryLevel >= 24) {
-        return require("../../../img/ui/battery-4.svg")
-    } else {
-        return require("../../../img/ui/battery-0.svg")
-    }
-}
-
-const signalLevelIcon = (signalLevel) => {
-    if (80 <= signalLevel==signalLevel < 85) {
-        return require("../../../img/ui/signal-1.svg")
-    } else if (85 <= signalLevel==signalLevel < 90) {
-        return require("../../../img/ui/signal-2.svg")
-    } else if (90 <= signalLevel==signalLevel < 95) {
-        return require("../../../img/ui/signal-3.svg")
-    } else if (signalLevel >= 95) {
-        return require("../../../img/ui/signal-4.svg")
-    } else {
-        return require("../../../img/ui/signal-0.svg")
-    }
-}
-    
\ No newline at end of file
diff --git a/client/src/js/view/components/topbar.js b/client/src/js/view/components/topbar.js
new file mode 100644
index 0000000..1350b08
--- /dev/null
+++ b/client/src/js/view/components/topbar.js
@@ -0,0 +1,85 @@
+import { h } from 'hyperapp'
+
+export const TopBar = ({state, switchSettings})  => 
+    <section id="topbar" class="topbar">
+        <img class="topbar_logo" src={require("../../../img/ui/turtle-logo.svg")}/>
+        <div class="topbar_indicators">
+            <IndicatorBattery batteryLevel={state.batteryLevel}/>
+            <IndicatorSignal signalLevel={state.signalLevel}/>
+        </div>
+        <div id="topbar_actions" class="topbar_actions">
+            {/* <img class="topbar_actions_action" id="button-screenrecord" src={require("../../../img/ui/nav-bar-rec.svg")}/> */}
+                {/* <a id="snap-download-a">  */}
+            {/* <img class="topbar_actions_action" id="button-screenshot" src={require("../../../img/ui/nav-bar-snap.svg")}/> */}
+                {/* </a>  */}
+            <ActionFullscreen/>
+        </div>
+
+        <div class="topbar_menu" onmousedown={() => switchSettings()}>
+            <div class="topbar_menu_bar"></div>
+        </div>
+    </section>
+
+const IndicatorBattery = ({batteryLevel}) => 
+    <img id="indicator-battery" class="topbar_indicators_indicator" src={batteryLevelIcon(batteryLevel)}/>
+
+const IndicatorSignal = ({signalLevel}) =>
+    <img id="indicator-signal" class="topbar_indicators_indicator" src={signalLevelIcon(signalLevel)}/>
+
+
+const batteryLevelIcon = (batteryLevel) => {
+    if (19.5 <= batteryLevel==batteryLevel < 21.5) {
+        return require("../../../img/ui/battery-1.svg")
+    } else if (21.5 <= batteryLevel==batteryLevel < 23) {
+        return require("../../../img/ui/battery-2.svg")
+    } else if (23 <= batteryLevel==batteryLevel < 24) {
+        return require("../../../img/ui/battery-3.svg")
+    } else if (batteryLevel >= 24) {
+        return require("../../../img/ui/battery-4.svg")
+    } else {
+        return require("../../../img/ui/battery-0.svg")
+    }
+}
+
+const signalLevelIcon = (signalLevel) => {
+    if (80 <= signalLevel==signalLevel < 85) {
+        return require("../../../img/ui/signal-1.svg")
+    } else if (85 <= signalLevel==signalLevel < 90) {
+        return require("../../../img/ui/signal-2.svg")
+    } else if (90 <= signalLevel==signalLevel < 95) {
+        return require("../../../img/ui/signal-3.svg")
+    } else if (signalLevel >= 95) {
+        return require("../../../img/ui/signal-4.svg")
+    } else {
+        return require("../../../img/ui/signal-0.svg")
+    }
+}
+    
+const ActionFullscreen = () => {
+    return <img 
+                class="topbar_actions_action"
+                id="button-fullscreen" 
+                src={require("../../../img/ui/nav-bar-fullscreen.svg")}
+                onmouseup={(el) => toggleFullscreen(el.target)}
+                />
+
+}
+
+const toggleFullscreen = (el) => {
+    let main = document.documentElement; 
+    if (!document.fullscreenElement) {
+        if (main.mozRequestFullScreen) {
+            main.mozRequestFullScreen();
+        } else {
+            main.webkitRequestFullScreen();
+        }
+      } else {
+        if(document.exitFullscreen) {
+            document.exitFullscreen();
+          } else if(document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+          } else if(document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+          }
+      }
+}
\ No newline at end of file
diff --git a/client/src/js/view/index.js b/client/src/js/view/index.js
index 393162d..2593b18 100644
--- a/client/src/js/view/index.js
+++ b/client/src/js/view/index.js
@@ -1,7 +1,7 @@
 import { h} from 'hyperapp'
 
 import { BootScreen } from './bootscreen'
-import { StatusBar } from './components/statusbar'
+import { TopBar } from './components/topbar'
 import { Stream } from './components/stream'
 import { Settings } from "./components/settings"
 import { Manipulator } from "./components/manipulator";
@@ -13,7 +13,7 @@ const view = (state, actions) => (
     <main>
         <BootScreen state={state.showBootScreen}/>
         <div id="wrapper" class="wrapper">
-            <StatusBar state={state.telemetry} switchSettings={actions.settings.setVisibility}/>
+            <TopBar state={state.telemetry} switchSettings={actions.settings.setVisibility}/>
             <Settings state={state} actions={actions}/>
             <div class="crosshair"></div>
             <div class="dots"></div>
diff --git a/client/src/scss/helpers/_vars.scss b/client/src/scss/helpers/_vars.scss
index 4aa80fb..d927a55 100644
--- a/client/src/scss/helpers/_vars.scss
+++ b/client/src/scss/helpers/_vars.scss
@@ -22,9 +22,9 @@ $log-font: monospace;
 $log-font-size: 9pt;
 $log-line-height: 1.5;
 
-/* Statusbar */
-$statusbar-height-small: 34px;
-$statusbar-height-medium: 68px; 
+/* topbar */
+$topbar-height-small: 34px;
+$topbar-height-medium: 68px; 
 
 /* Menu */
 $menubar-color: white;
diff --git a/client/src/scss/main.scss b/client/src/scss/main.scss
index 3c33ca1..3a05bd0 100644
--- a/client/src/scss/main.scss
+++ b/client/src/scss/main.scss
@@ -9,7 +9,7 @@
 @import "partials/wrapper";
 @import "partials/custom";
 @import "partials/disable-text-select";
-@import "partials/statusbar";
+@import "partials/topbar";
 @import "partials/settings";
 @import "partials/controls";
 @import "partials/crosshair";
diff --git a/client/src/scss/partials/_controls-boxes.scss b/client/src/scss/partials/_controls-boxes.scss
index fa0dbc6..6826542 100644
--- a/client/src/scss/partials/_controls-boxes.scss
+++ b/client/src/scss/partials/_controls-boxes.scss
@@ -12,7 +12,7 @@
     }
 
     @include small2x {
-        width: 40vw * 2;
+        width: 40vw;
     }
 
     @include medium {
@@ -30,7 +30,6 @@
     bottom: 0;
     display: flex;
     flex-flow: column;
-    background: rgba($background-color, 0.6);
     z-index: 1;
 
     @include small {
@@ -39,8 +38,8 @@
     }
 
     @include small2x {
-        width: 30vw * 2;
-        height: 30vw * 2;
+        width: 30vw;
+        height: 30vw;
     }
 
     @include medium {
diff --git a/client/src/scss/partials/_gripper-control.scss b/client/src/scss/partials/_gripper-control.scss
index f9594e2..1f5edff 100644
--- a/client/src/scss/partials/_gripper-control.scss
+++ b/client/src/scss/partials/_gripper-control.scss
@@ -14,7 +14,7 @@
             }
 
             @include small2x {
-                height: 34px * 2;
+                height: (34px / 2);
             }
 
             @include medium {
diff --git a/client/src/scss/partials/_joystick.scss b/client/src/scss/partials/_joystick.scss
index df817fc..e59d889 100644
--- a/client/src/scss/partials/_joystick.scss
+++ b/client/src/scss/partials/_joystick.scss
@@ -2,7 +2,6 @@
     position: absolute;
     right: 0;
     bottom: 0;
-    // background: $background-color;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -12,8 +11,8 @@
     }
 
     @include small2x {
-        width: 30vw * 2;
-        height: 30vw * 2;
+        width: 30vw ;
+        height: 30vw ;
     }
 
     @include medium {
diff --git a/client/src/scss/partials/_manipulator-control.scss b/client/src/scss/partials/_manipulator-control.scss
index e2f9019..2b7b60a 100644
--- a/client/src/scss/partials/_manipulator-control.scss
+++ b/client/src/scss/partials/_manipulator-control.scss
@@ -1,7 +1,13 @@
 .manipulatorControl {
-    position: relative;
+    position: absolute;
     display: flex;
     flex-flow: column;
+    background: rgba($background-color, 0.6);
+    padding-bottom: 30px;
+    width: 100%;
+    height: 100%;
+    bottom: 0;
+    right: 0;
 
     &-hide {
         visibility: hidden;
diff --git a/client/src/scss/partials/_settings.scss b/client/src/scss/partials/_settings.scss
index 5445251..4106997 100644
--- a/client/src/scss/partials/_settings.scss
+++ b/client/src/scss/partials/_settings.scss
@@ -5,17 +5,22 @@
 	right: 0;
 	top: 0;
 	display: flex;
+	color: $grey_0;
     &_categories {
         list-style: none;
         margin: 0;
 		padding: 0;
-		width: 30%;
+		width: auto;
 		border-right: 1px solid $grey_4;
 		&_category {
 			text-transform: uppercase;
 			font-size: 24px;
 			padding: 25px;
 
+			@include small {
+				font-size: 18px;
+			}
+
 			&-selected {
 				background-color: $grey_4;
 			}
@@ -23,24 +28,31 @@
 	}
 
 	&_content {
-		padding: 25px;
-		width: 70%;
+		padding: 25px 37px 25px 25px;
+		width: 100%;
+		overflow-y: scroll;
+		margin-right: -15px;
+		
+		@include small {
+			padding: 25px;
+		}
 	}
 	
     @include small {
-		padding-top: $statusbar-height-small;
+		padding-top: $topbar-height-small;
 		width: 100vw;
+		height: 100vh;
 	}
 	
     @include medium {
-		padding-top: $statusbar-height-medium;
+		padding-top: $topbar-height-medium;
 		width: 75vw;
-		height: calc(100vh - #{$statusbar-height-medium});
+		height: calc(100vh - #{$topbar-height-medium});
 	}
 
 	@include big {
 		width: 60vw;
-		height: calc(100vh - #{$statusbar-height-medium});
+		height: calc(100vh - #{$topbar-height-medium});
 	}
 	
 	&-hide {
diff --git a/client/src/scss/partials/_statusbar.scss b/client/src/scss/partials/_topbar.scss
similarity index 97%
rename from client/src/scss/partials/_statusbar.scss
rename to client/src/scss/partials/_topbar.scss
index 5e09953..3f6ee91 100644
--- a/client/src/scss/partials/_statusbar.scss
+++ b/client/src/scss/partials/_topbar.scss
@@ -1,4 +1,4 @@
-.statusbar {
+.topbar {
     height: 34px;
     position: fixed;
     top: 0;
@@ -6,10 +6,10 @@
     background-color: $background-color;
     z-index: 9;
     @include small {
-        height: $statusbar-height-small;
+        height: $topbar-height-small;
     }
     @include medium {
-        height: $statusbar-height-medium;
+        height: $topbar-height-medium;
     }
 
     &_logo {
diff --git a/client/src/scss/partials/_wrapper.scss b/client/src/scss/partials/_wrapper.scss
index 7c45d14..d5da600 100644
--- a/client/src/scss/partials/_wrapper.scss
+++ b/client/src/scss/partials/_wrapper.scss
@@ -8,6 +8,8 @@
     position: absolute;
     width: 100%;
     height: 100%;
+    overflow: hidden;
+    background-color: $background-color;
 
     &:before {
         background: transparent;
diff --git a/package.json b/package.json
index cc5dc9a..926b163 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "tcs",
-  "version": "0.13.3",
+  "version": "0.13.4",
   "description": "Turtle Control Software",
   "main": "index.js",
   "scripts": {
diff --git a/utils/after-install.sh b/utils/after-install.sh
index f7bec22..5cfd7ea 100644
--- a/utils/after-install.sh
+++ b/utils/after-install.sh
@@ -1,6 +1,6 @@
 #!/bin/sh
 
-sudo pip3 install -r /opt/turtlerover/tcs/requirements.txt
+sudo pip3 install --default-timeout=100 -r /opt/turtlerover/tcs/requirements.txt
 sudo ln -sf /opt/turtlerover/tcs/tcs /usr/bin/tcs
 
 sudo cp /opt/turtlerover/tcs/server/turtlerover-tcs.service /etc/systemd/system