diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss
index 3c8ed578805def7a92b8cfcaf55acbfc55b1508b..67fbc0ada8db77ad2e2fee42b62ebb1f1c00f624 100644
--- a/src/assets/stylesheets/2d-hud.scss
+++ b/src/assets/stylesheets/2d-hud.scss
@@ -5,31 +5,26 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 80px;
   width: 100%;
   user-select: none;
 
   &:local(.top) {
     top: 10px;
+    height: 80px;
   }
 
-  &:local(.bottom) {
+  &:local(.column) {
+    flex-direction: column;
     bottom: 20px;
   }
+}
 
-  &:local(.aboveBottom) {
-    bottom: 110px;
-  }
-
-  &:local(.bottomLeft) {
-    bottom: 10px;
-    right: 35px;
-  }
+:local(.bottom) {
+  margin-bottom: 20px;
+}
 
-  &:local(.bottomRight) {
-    bottom: 10px;
-    left: 35px;
-  }
+:local(.hide) {
+  display: none;
 }
 
 :local(.panel) {
@@ -56,6 +51,14 @@
   margin-left: -40px;
 }
 
+:local(.panel.up) {
+  border-top-right-radius: 30px;
+  border-top-left-radius: 30px;
+  padding-top: 5px;
+  padding-bottom: 45px;
+  margin-bottom: -40px;
+}
+
 :local(.iconButton) {
   width: 40px;
   height: 40px;
@@ -72,12 +75,6 @@
   height: 30px;
 }
 
-:local(.iconButton.medium) {
-  width: 60px;
-  height: 60px;
-  z-index: 1;
-}
-
 :local(.iconButton.large) {
   width: 80px;
   height: 80px;
diff --git a/src/components/virtual-gamepad-controls.css b/src/components/virtual-gamepad-controls.css
index 4270c36ad7be261997f7ab77218e9ea817269620..3a5ed3c9c6aeb7ebda7a3b8f4cee610af2a78a57 100644
--- a/src/components/virtual-gamepad-controls.css
+++ b/src/components/virtual-gamepad-controls.css
@@ -6,11 +6,11 @@
 
 :local(.touchZone.left) {
   left: 0;
-  right: 50%;
+  right: 55%;
 }
 
 :local(.touchZone.right) {
-  left: 50%;
+  left: 55%;
   right: 0;
 }
 
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index e533be11c19279d0fa747f822a626ba3cef0f3c9..ee5d75df591373e1d2b1bb6fdb2112cf3993affd 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -37,13 +37,13 @@ TopHUD.propTypes = {
   onToggleSpaceBubble: PropTypes.func
 };
 
-const mediaPickerInput = "media-picker-input";
-const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked, landscapeMode }) => (
-  <div>
-    {showImageOnlyButton ? (
-      <div>
+const BottomHUD = ({ onCreateObject, showPhotoPicker, onMediaPicked }) => (
+  <div className={cx(styles.container, styles.column, styles.bottom)}>
+    {showPhotoPicker ? (
+      <div className={cx("ui-interactive", styles.panel, styles.up)}>
         <input
-          id={mediaPickerInput}
+          id="media-picker-input"
+          className={cx(styles.hide)}
           type="file"
           accept="image/*"
           multiple
@@ -53,32 +53,16 @@ const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked, landsca
             }
           }}
         />
-        <label
-          htmlFor={mediaPickerInput}
-          className={cx(styles.container, landscapeMode ? styles.bottomLeft : styles.aboveBottom)}
-        >
-          <div
-            className={cx(
-              "ui-interactive",
-              styles.iconButton,
-              landscapeMode ? styles.medium : styles.large,
-              styles.mobileMediaPicker
-            )}
-            title={"Pick Media"}
-          />
+        <label htmlFor="media-picker-input">
+          <div className={cx(styles.iconButton, styles.mobileMediaPicker)} title={"Pick Media"} />
         </label>
       </div>
     ) : (
       <div />
     )}
-    <div className={cx(styles.container, landscapeMode ? styles.bottomRight : styles.bottom)}>
+    <div>
       <div
-        className={cx(
-          "ui-interactive",
-          styles.iconButton,
-          landscapeMode ? styles.medium : styles.large,
-          styles.createObject
-        )}
+        className={cx("ui-interactive", styles.iconButton, styles.large, styles.createObject)}
         title={"Create Object"}
         onClick={onCreateObject}
       />
@@ -88,9 +72,8 @@ const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked, landsca
 
 BottomHUD.propTypes = {
   onCreateObject: PropTypes.func,
-  showImageOnlyButton: PropTypes.bool,
-  onMediaPicked: PropTypes.func,
-  landscapeMode: PropTypes.bool
+  showPhotoPicker: PropTypes.bool,
+  onMediaPicked: PropTypes.func
 };
 
 export default { TopHUD, BottomHUD };
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index fa1047e3660e92e51aa45b4caa561418334ad835..4c2a9ffdfda1af43ee6848b7955fc6752684e3fe 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -108,8 +108,7 @@ class UIRoot extends Component {
 
     exited: false,
 
-    showProfileEntry: false,
-    landscapeMode: false
+    showProfileEntry: false
   };
 
   constructor(props) {
@@ -124,11 +123,6 @@ class UIRoot extends Component {
     this.props.scene.addEventListener("stateadded", this.onAframeStateChanged);
     this.props.scene.addEventListener("stateremoved", this.onAframeStateChanged);
     this.props.scene.addEventListener("exit", this.exit);
-    window.addEventListener("deviceorientation", () => {
-      this.setState({
-        landscapeMode: AFRAME.utils.device.isMobile() && document.body.clientWidth > document.body.clientHeight
-      });
-    });
   }
 
   componentWillUnmount() {
@@ -916,9 +910,8 @@ class UIRoot extends Component {
               )}
               <TwoDHUD.BottomHUD
                 onCreateObject={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.create_object })}
-                showImageOnlyButton={AFRAME.utils.device.isMobile()}
+                showPhotoPicker={AFRAME.utils.device.isMobile()}
                 onMediaPicked={this.handleCreateObject}
-                landscapeMode={this.state.landscapeMode}
               />
             </div>
           ) : null}