diff --git a/frontend/src/lib/components/BottomAppBar.svelte b/frontend/src/lib/components/BottomAppBar.svelte
index 5cb44c6..cee78d0 100644
--- a/frontend/src/lib/components/BottomAppBar.svelte
+++ b/frontend/src/lib/components/BottomAppBar.svelte
@@ -16,11 +16,10 @@
 	#container-of-container {
 		width: 100%;
 		position: fixed;
-		bottom: 0;
+		bottom: 10px;
 		left: 0;
 		display: grid;
-		height: 10vh;
-		margin-bottom: 10px;
+		height: 10dvh;
 	}
 	#container {
 		display: flex;
diff --git a/frontend/src/lib/components/Path.svelte b/frontend/src/lib/components/Path.svelte
index 1772cdc..0aad579 100644
--- a/frontend/src/lib/components/Path.svelte
+++ b/frontend/src/lib/components/Path.svelte
@@ -27,6 +27,7 @@
 		max-width: 100%;
 		width: calc(100% - 20px);
 		margin: 0 auto;
+		height: 100%;
 	}
 	.route-card-right {
 		border-top-right-radius: 45px;
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 396c332..03024ec 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,5 +1,4 @@
-<script>
-	import BottomAppBar from '$lib/components/BottomAppBar.svelte';
+<script lang="ts">
 	import Path from '$lib/components/Path.svelte';
 	import Splash from '$lib/components/Splash.svelte';
 	
@@ -22,10 +21,10 @@
 	main {
 		display: grid;
 		margin: 0 auto;
-		height: 100%;
+		height: calc(90dvh - 10px);
 		width: 100%;
 		font-family: 'Roboto-Regular';
-		grid-template-rows: 16% 16% 16% 16% 16% 16%;
+		grid-template-rows: 70px auto;
 	}
 
 	.bold {
@@ -37,17 +36,14 @@
 		display: grid;
 		width: 100%;
 		place-content: center;
-		grid-template-columns: 1fr;
 		text-align: center;
-		grid-row-start: 1;
-		grid-row-end: 1;
 	}
 
 	#route-cards {
-		grid-row-start: 2;
-		grid-row-end: 7;
+		padding: 20px;
 		display: grid;
 		width: 100%;
-		gap: 5px;
+		height: 100%;
+		gap: 10px;
 	}
 </style>