diff --git a/frontend/src/lib/components/BottomAppBar.svelte b/frontend/src/lib/components/BottomAppBar.svelte
index 99edafb..899563b 100644
--- a/frontend/src/lib/components/BottomAppBar.svelte
+++ b/frontend/src/lib/components/BottomAppBar.svelte
@@ -1,25 +1,34 @@
-<div id="container">
-	<a href="/">
-		<img src="/images/home-icon.png" alt="home" />
-	</a>
-	<a href="/">
-		<img src="/images/routes-icon.png" alt="possible routes" />
-	</a>
-	<a href="/settings">
-		<img src="/images/settings-icon.png" alt="settings" />
-	</a>
+<div id="container-of-container">
+	<div id="container">
+		<a href="/">
+			<img src="/images/home-icon.png" alt="home" />
+		</a>
+		<a href="/">
+			<img src="/images/routes-icon.png" alt="possible routes" />
+		</a>
+		<a href="/settings">
+			<img src="/images/settings-icon.png" alt="settings" />
+		</a>
+	</div>
 </div>
 
 <style>
+	#container-of-container {
+		width: 100%;
+		position: fixed;
+		bottom: 0;
+		left: 0;
+
+	}
 	#container {
 		display: flex;
 		height: 68px;
+		justify-content: center;
 		width: 90%;
 		border-radius: 90px;
 		box-shadow: 0 0 50px #ccc;
 		background-color: var(--card-background-color);
-		position: absolute;
-		bottom: 0;
+		margin: 0 auto;
 		margin-bottom: 10px;
 	}