diff --git a/src/assets/stylesheets/2d-hud.scss b/src/assets/stylesheets/2d-hud.scss
index 1109316b68df42d7399c9abc5b0499a8885a4970..edc8b391990a9c81dd67ca2579ffc2991a169ac3 100644
--- a/src/assets/stylesheets/2d-hud.scss
+++ b/src/assets/stylesheets/2d-hud.scss
@@ -2,13 +2,20 @@
 
 :local(.container) {
   position: absolute;
-  top: 10px;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 80px;
   width: 100%;
   user-select: none;
+
+  &:local(.top) {
+    top: 10px;
+  }
+
+  &:local(.bottom) {
+    bottom: 20px;
+  }
 }
 
 :local(.panel) {
diff --git a/src/assets/stylesheets/info-dialog.scss b/src/assets/stylesheets/info-dialog.scss
index de78482ea4e19f063b6f30af68d1b9d9476fcfee..953f375a695902a3f6daa7af38b531c1f0dcbeb5 100644
--- a/src/assets/stylesheets/info-dialog.scss
+++ b/src/assets/stylesheets/info-dialog.scss
@@ -45,6 +45,7 @@
         flex-direction: column;
         height: 100%;
         overflow-y: auto;
+        margin: 10px 0;
 
         a { color: white }
       }
diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss
index b456c5c4e581b2dae15fbb5e1c947f815db91c22..62fc132681b5f6dd01880005ad30646386f17026 100644
--- a/src/assets/stylesheets/shared.scss
+++ b/src/assets/stylesheets/shared.scss
@@ -52,8 +52,7 @@ $darkest-grey: rgba(32, 32, 32, 1.0);
 
 %bottom-button {
   @extend %action-button;
-  margin-top: auto;
-  margin-bottom: 24px;
+  margin-top: 16px;
 }
 
 %action-button {
diff --git a/src/react-components/ui-root.js b/src/react-components/ui-root.js
index 5352646ed8275a4e3f0192d597183533476ebc7d..33cbfaeda3b68ae87b72dc598fb96d276e379aab 100644
--- a/src/react-components/ui-root.js
+++ b/src/react-components/ui-root.js
@@ -22,7 +22,6 @@ import { ProfileInfoHeader } from "./profile-info-header.js";
 import ProfileEntryPanel from "./profile-entry-panel";
 import InfoDialog from "./info-dialog.js";
 import TwoDHUD from "./2d-hud";
-import Footer from "./footer";
 import { faUsers } from "@fortawesome/free-solid-svg-icons/faUsers";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -901,7 +900,9 @@ class UIRoot extends Component {
                   </button>
                 </div>
               )}
-              <Footer onClickCreate={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.create_object })} />
+              <TwoDHUD.BottomHUD
+                onCreateObject={() => this.setState({ infoDialogType: InfoDialog.dialogTypes.create_object })}
+              />
             </div>
           ) : null}
         </div>