diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss
index 88e643312f295ef13a32dd17b611283930b2ef11..7e1d04359a8fb09c55b04b67d8455349c40400a5 100644
--- a/src/assets/stylesheets/2d-hud.scss
+++ b/src/assets/stylesheets/2d-hud.scss
@@ -18,7 +18,17 @@
   }
 
   &:local(.aboveBottom) {
-    bottom: 120px;
+    bottom: 110px;
+  }
+
+  &:local(.bottomLeft) {
+    bottom: 10px;
+    right: 35px;
+  }
+
+  &:local(.bottomRight) {
+    bottom: 10px;
+    left: 35px;
   }
 }
 
@@ -62,6 +72,12 @@
   height: 30px;
 }
 
+:local(.iconButton.medium) {
+  width: 60px;
+  height: 60px;
+  z-index: 1;
+}
+
 :local(.iconButton.large) {
   width: 80px;
   height: 80px;
diff --git a/src/react-components/2d-hud.js b/src/react-components/2d-hud.js
index e50d295987189b5eb00827d6333e6312fa156acd..e533be11c19279d0fa747f822a626ba3cef0f3c9 100644
--- a/src/react-components/2d-hud.js
+++ b/src/react-components/2d-hud.js
@@ -38,7 +38,7 @@ TopHUD.propTypes = {
 };
 
 const mediaPickerInput = "media-picker-input";
-const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked }) => (
+const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked, landscapeMode }) => (
   <div>
     {showImageOnlyButton ? (
       <div>
@@ -53,9 +53,17 @@ const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked }) => (
             }
           }}
         />
-        <label htmlFor={mediaPickerInput} className={cx(styles.container, styles.aboveBottom)}>
+        <label
+          htmlFor={mediaPickerInput}
+          className={cx(styles.container, landscapeMode ? styles.bottomLeft : styles.aboveBottom)}
+        >
           <div
-            className={cx("ui-interactive", styles.iconButton, styles.large, styles.mobileMediaPicker)}
+            className={cx(
+              "ui-interactive",
+              styles.iconButton,
+              landscapeMode ? styles.medium : styles.large,
+              styles.mobileMediaPicker
+            )}
             title={"Pick Media"}
           />
         </label>
@@ -63,9 +71,14 @@ const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked }) => (
     ) : (
       <div />
     )}
-    <div className={cx(styles.container, styles.bottom)}>
+    <div className={cx(styles.container, landscapeMode ? styles.bottomRight : styles.bottom)}>
       <div
-        className={cx("ui-interactive", styles.iconButton, styles.large, styles.createObject)}
+        className={cx(
+          "ui-interactive",
+          styles.iconButton,
+          landscapeMode ? styles.medium : styles.large,
+          styles.createObject
+        )}
         title={"Create Object"}
         onClick={onCreateObject}
       />
@@ -76,7 +89,8 @@ const BottomHUD = ({ onCreateObject, showImageOnlyButton, onMediaPicked }) => (
 BottomHUD.propTypes = {
   onCreateObject: PropTypes.func,
   showImageOnlyButton: PropTypes.bool,
-  onMediaPicked: PropTypes.func
+  onMediaPicked: PropTypes.func,
+  landscapeMode: PropTypes.bool
 };
 
 export default { TopHUD, BottomHUD };
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 30880cee96ba4932e4546da1bc3f733d5fffa2bc..fa1047e3660e92e51aa45b4caa561418334ad835 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -108,7 +108,8 @@ class UIRoot extends Component {
 
     exited: false,
 
-    showProfileEntry: false
+    showProfileEntry: false,
+    landscapeMode: false
   };
 
   constructor(props) {
@@ -123,6 +124,11 @@ 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() {
@@ -912,6 +918,7 @@ class UIRoot extends Component {
                 onCreateObject={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.create_object })}
                 showImageOnlyButton={AFRAME.utils.device.isMobile()}
                 onMediaPicked={this.handleCreateObject}
+                landscapeMode={this.state.landscapeMode}
               />
             </div>
           ) : null}