diff --git a/web/src/App.jsx b/web/src/App.jsx
index 76622dbaa..b5891ef77 100644
--- a/web/src/App.jsx
+++ b/web/src/App.jsx
@@ -224,7 +224,7 @@ const App = ({ selectedPage }) => {
     return (
         <div className="app">
             <DisconnectedIcon />
-            <div style={{ paddingBottom: "56px" }}>
+            <div className="app-body">
                 <Page selectedPage={selectedPage} />
             </div>
             <MenuBar pageNumber={selectedPage} />
diff --git a/web/src/App.scss b/web/src/App.scss
index 3b2312461..93d043e94 100644
--- a/web/src/App.scss
+++ b/web/src/App.scss
@@ -20,3 +20,7 @@
   height: 100vh;
   background-color: green;
 }
+
+.app-body {
+  padding-bottom: general.$navbar-height
+}
\ No newline at end of file
diff --git a/web/src/components/MenuBar/MenuBar.scss b/web/src/components/MenuBar/MenuBar.scss
index 85154a812..8bf568082 100644
--- a/web/src/components/MenuBar/MenuBar.scss
+++ b/web/src/components/MenuBar/MenuBar.scss
@@ -5,5 +5,6 @@
   z-index: 1; // The Marquees on player cards appeared above the MenuBar otherwise, the MenuBar needs to be on top of everything always
   bottom: 0;
   width: 100vw;
+  height: general.$navbar-height;
   @include general.low-shadow-up;
 }
diff --git a/web/src/components/StatusBars/StatusBar.jsx b/web/src/components/StatusBars/StatusBar.jsx
index 2f45079c2..0f20c8f76 100644
--- a/web/src/components/StatusBars/StatusBar.jsx
+++ b/web/src/components/StatusBars/StatusBar.jsx
@@ -15,7 +15,7 @@ export default function StatusBar(props) {
 
     return(
         <Snackbar
-            style={{bottom: "60px"}}
+            className="snackbar"
             autoHideDuration={3000}
             anchorOrigin={{vertical: "bottom", horizontal: "left"}}
             open={open}
diff --git a/web/src/components/StatusBars/StatusBars.scss b/web/src/components/StatusBars/StatusBars.scss
index 13baf5e4e..3a4ebce0f 100644
--- a/web/src/components/StatusBars/StatusBars.scss
+++ b/web/src/components/StatusBars/StatusBars.scss
@@ -30,3 +30,7 @@
   --right: translate(5px, 0px);
   animation: errorShake 0.5s 1; // Only animate once, reapplying the class will reapply the animation
 }
+
+.snackbar {
+  bottom: calc(general.$navbar-height + 4px)
+}
diff --git a/web/src/general.scss b/web/src/general.scss
index 566a9f575..f6f359e73 100644
--- a/web/src/general.scss
+++ b/web/src/general.scss
@@ -19,6 +19,7 @@ $select-color-gray: #bdbdbd; // for preset used_last
 $mute-color: #dc3545;
 
 $page-header-height: 3rem;
+$navbar-height: 56px;
 
 // fonts
 @font-face {