diff --git a/src/lib/index.component.svelte b/src/lib/index.component.svelte
index b494421..a42453f 100644
--- a/src/lib/index.component.svelte
+++ b/src/lib/index.component.svelte
@@ -14,29 +14,5 @@
 </div>
 
 <style lang="css">
-	.centered {
-		position: absolute;
-		top: 20%;
-		left: 50%;
-		transform: translate(-50%, -20%);
-	}
-	.container {
-		width: 60vw;
-		height: 50vh;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 10px;
-	}
-	.container h1 {
-		color: white;
-		font-family: 'Roboto', sans-serif;
-		font-size: 2em;
-	}
-	.container p {
-		color: white;
-		font-family: 'Roboto', sans-serif;
-		text-overflow: clip;
-		font-size: 1.2em;
-	}
+	@import '../styles/homepage.scss';
 </style>
diff --git a/src/lib/listSelector.svelte b/src/lib/listSelector.svelte
index 13b41d2..2a54903 100644
--- a/src/lib/listSelector.svelte
+++ b/src/lib/listSelector.svelte
@@ -12,7 +12,7 @@
 	/>
 </svelte:head>
 
-<div class="container">
+<div class="content-container">
 	{#each elements as element, _}
 		<a class="list-element" href={element.route}>
 			<h3>{element.name}</h3>
@@ -22,35 +22,5 @@
 </div>
 
 <style lang="css">
-	.container {
-		width: 100vw;
-		height: 100vh;
-		margin-top: 5em;
-		overflow: hidden scroll;
-		display: flex;
-		align-items: center;
-		flex-direction: column;
-		gap: 10px;
-		-ms-overflow-style: none;
-		scrollbar-width: none;
-	}
-	.container::-webkit-scrollbar {
-		display: none;
-	}
-	.list-element {
-		width: 80%;
-		height: fit-content;
-		display: grid;
-		grid-template-columns: 30% 70%;
-		background: #232228;
-		text-align: center;
-		text-decoration: none;
-		color: white;
-		border-radius: 10px;
-		font-family: 'Roboto', sans-serif;
-		transition: 0.3s;
-	}
-	.list-element:hover {
-		filter: brightness(1.4);
-	}
+	@import '../styles/list-selector.scss';
 </style>
diff --git a/src/lib/navbar.svelte b/src/lib/navbar.svelte
index 2d43f93..e6f3417 100644
--- a/src/lib/navbar.svelte
+++ b/src/lib/navbar.svelte
@@ -1,4 +1,15 @@
-<div class="navbar">
+<script lang="ts">
+	let navbarExtended = false;
+	export let largerMargin: boolean | undefined = undefined;
+</script>
+
+<div class={`navbar ${navbarExtended ? 'extended' : ''}`}>
+	<button
+		class="navbar-toggler"
+		on:click={() => {
+			navbarExtended = !navbarExtended;
+		}}
+	/>
 	<div class="navbar-menu">
 		<a href="/">Home</a>
 		<a href="/basic">Basic</a>
@@ -7,31 +18,6 @@
 	</div>
 </div>
 
-<style lang="css">
-	.navbar {
-		width: 99vw;
-		height: 70px;
-		background: #2e2d35;
-		border-radius: 10px;
-	}
-	.navbar-menu {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-		gap: 20px;
-	}
-	.navbar-menu a {
-		color: white;
-		font-family: 'Roboto', sans-serif;
-		font-size: 1.4em;
-		cursor: pointer;
-		transition: 0.3s;
-		text-decoration: none;
-	}
-	.navbar-menu a:hover {
-		color: #acacac;
-	}
+<style lang="scss">
+	@import '../styles/navbar.scss';
 </style>
diff --git a/src/routes/basic/calculator.svelte b/src/routes/basic/calculator.svelte
index 3575fd1..07075d2 100644
--- a/src/routes/basic/calculator.svelte
+++ b/src/routes/basic/calculator.svelte
@@ -63,7 +63,7 @@
 	}
 </script>
 
-<Navbar />
+<Navbar largerMargin={true} />
 
 <div class="centered">
 	<div class="container">
@@ -105,12 +105,4 @@
 <style lang="scss">
 	@import '../../styles/general.scss';
 	@import '../../styles/calculator.scss';
-	.container {
-		width: 25vw;
-		height: 90vh !important;
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		gap: 0px !important;
-	}
 </style>
diff --git a/src/routes/basic/triangle-completer.svelte b/src/routes/basic/triangle-completer.svelte
index 15e2887..e1cfd98 100644
--- a/src/routes/basic/triangle-completer.svelte
+++ b/src/routes/basic/triangle-completer.svelte
@@ -44,7 +44,7 @@
 {#if showSnackbar}
 	<Snackbar message={errorSnackbar} />
 {/if}
-<div class="center">
+<div class="centered">
 	<div class="triangle-container">
 		<div class="outer-triangle">
 			<input
diff --git a/src/routes/stochastics/4-field-table-completer.svelte b/src/routes/stochastics/4-field-table-completer.svelte
index 0c0e149..279aa53 100644
--- a/src/routes/stochastics/4-field-table-completer.svelte
+++ b/src/routes/stochastics/4-field-table-completer.svelte
@@ -50,4 +50,9 @@
 
 <style lang="scss">
 	@import '../../styles/general.scss';
+	@media only screen and (max-height: 1100px) and (min-height: 900px) {
+		.calculate-button {
+			margin-top: 4em;
+		}
+	}
 </style>
diff --git a/src/routes/vector/check-vector-on-line.svelte b/src/routes/vector/check-vector-on-line.svelte
index ea1359a..2834528 100644
--- a/src/routes/vector/check-vector-on-line.svelte
+++ b/src/routes/vector/check-vector-on-line.svelte
@@ -54,4 +54,22 @@
 <style lang="scss">
 	@import '../../styles/general.scss';
 	@import '../../styles/vector.scss';
+	.vector-inline {
+		grid-template-columns: repeat(4, 25%);
+	}
+	@media only screen and (max-height: 1100px) and (min-height: 900px) {
+		.vector-inline {
+			transform: scale(1.3) !important;
+		}
+		.calculate-button {
+			margin-top: 100px;
+		}
+	}
+	@media only screen and (max-width: 680px) {
+		.vector-inline {
+			grid-template-columns: repeat(2, 50%);
+			grid-template-rows: repeat(2, 50%);
+			width: 90vw;
+		}
+	}
 </style>
diff --git a/src/routes/vector/layer-type-calculator.svelte b/src/routes/vector/layer-type-calculator.svelte
index 321c1cb..d8c82cd 100644
--- a/src/routes/vector/layer-type-calculator.svelte
+++ b/src/routes/vector/layer-type-calculator.svelte
@@ -17,4 +17,16 @@
 
 <style>
 	@import '../../styles/general.scss';
+
+	@media only screen and (max-height: 1100px) and (min-height: 900px) {
+		.container {
+			margin-top: 30%;
+			transform: scale(1.7) !important;
+		}
+	}
+	@media only screen and (max-width: 680px) {
+		.container {
+			transform: scale(0.7) !important;
+		}
+	}
 </style>
diff --git a/src/routes/vector/triangle-angle-calculator.svelte b/src/routes/vector/triangle-angle-calculator.svelte
index 8600fcf..69a1a23 100644
--- a/src/routes/vector/triangle-angle-calculator.svelte
+++ b/src/routes/vector/triangle-angle-calculator.svelte
@@ -45,4 +45,24 @@
 <style lang="scss">
 	@import '../../styles/general.scss';
 	@import '../../styles/vector.scss';
+	.vector-inline {
+		grid-template-columns: repeat(3, 33%);
+	}
+
+	@media only screen and (max-height: 1100px) and (min-height: 900px) {
+		.vector-inline {
+			transform: scale(1.4) !important;
+		}
+		.calculate-button {
+			margin-left: 250px;
+			margin-top: 0;
+		}
+	}
+	@media only screen and (max-width: 680px) {
+		.vector-inline {
+			grid-template-columns: repeat(2, 50%);
+			grid-template-rows: repeat(2, 50%);
+			width: 90vw;
+		}
+	}
 </style>
diff --git a/src/styles/4-field-table.scss b/src/styles/4-field-table.scss
index 8852f8b..4f0f6ef 100644
--- a/src/styles/4-field-table.scss
+++ b/src/styles/4-field-table.scss
@@ -33,3 +33,15 @@
 	transform: scale(1.1);
 	border: none;
 }
+
+@media only screen and (max-width: 680px) {
+	.field-table {
+		transform: scale(0.8);
+	}
+}
+
+@media only screen and (max-height: 1100px) and (min-height: 900px) {
+	.field-table {
+		transform: scale(1.4);
+	}
+}
diff --git a/src/styles/calculator.scss b/src/styles/calculator.scss
index 37445d6..bf73719 100644
--- a/src/styles/calculator.scss
+++ b/src/styles/calculator.scss
@@ -14,6 +14,15 @@
 	place-items: center;
 	grid-template-columns: repeat(4, 25%);
 }
+.container {
+	width: 27vw;
+	height: 90vh !important;
+	margin-top: 10vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 0px !important;
+}
 
 @mixin btnBase($name, $background) {
 	.#{$name} {
@@ -35,16 +44,24 @@
 @include btnBase(action-button, #dc5f11);
 @include btnBase(extra-button, #9e9e9e);
 
-@media only screen and (max-width: 820px) {
-	.centered {
-		top: 50%;
-		transform: translate(-50%, -50%);
-	}
+@media only screen and (max-width: 500px) {
 	.container {
-		width: 95vw;
 		height: 70vh;
+		margin-top: 20vh;
+		width: 90vw !important;
+		margin-left: -5vw;
 	}
-	.data-display {
-		height: 75px;
+}
+@media only screen and (max-width: 680px) and (min-width: 500px) {
+	.container {
+		height: 75vh;
+		margin-top: 25vh;
+		width: 70vw !important;
+		margin-left: -5vw;
+	}
+}
+@media only screen and (max-width: 970px) and (min-width: 680px) {
+	.container {
+		width: 50vw !important;
 	}
 }
diff --git a/src/styles/function-solver.scss b/src/styles/function-solver.scss
index 91544ba..dc919fe 100644
--- a/src/styles/function-solver.scss
+++ b/src/styles/function-solver.scss
@@ -34,3 +34,22 @@
 	font-family: Arial, Helvetica, sans-serif;
 	text-overflow: wrap;
 }
+@media only screen and (max-width: 680px) {
+	.function-flex {
+		transform: scale(0.8);
+		margin-left: -2em;
+	}
+	.experimental-text {
+		font-size: 1.3em;
+	}
+}
+
+@media only screen and (max-height: 1100px) and (min-height: 900px) {
+	.function-flex {
+		transform: scale(1.5);
+	}
+	.calculate-button {
+		margin-top: 1.5em;
+		transform: scale(1.5);
+	}
+}
diff --git a/src/styles/general.scss b/src/styles/general.scss
index 0c5b2cc..452f59e 100644
--- a/src/styles/general.scss
+++ b/src/styles/general.scss
@@ -2,7 +2,9 @@
 	display: grid;
 	place-items: center;
 	width: 100vw;
-	height: 100vh;
+	height: 70vh;
+	position: absolute;
+	top: 30%;
 }
 .container {
 	width: 30vw;
@@ -34,3 +36,30 @@
 	font-size: 2em;
 	text-overflow: clip;
 }
+
+@media only screen and (max-width: 680px) {
+	.result-form {
+		margin-top: 20px;
+		width: 80vw;
+	}
+	.calculate-button {
+		margin-top: 20px;
+		transform: scale(1.4);
+	}
+}
+
+@media only screen and (max-height: 1100px) and (min-height: 900px) {
+	.calculate-button {
+		margin-top: 40px;
+		transform: scale(1.8);
+	}
+	.result-form {
+		margin-top: 60px;
+		transform: scale(1.2);
+	}
+	.centered {
+		height: 70vh;
+		position: absolute;
+		top: 30%;
+	}
+}
diff --git a/src/styles/geo-layer.scss b/src/styles/geo-layer.scss
index bfe2a98..f253bfd 100644
--- a/src/styles/geo-layer.scss
+++ b/src/styles/geo-layer.scss
@@ -22,3 +22,8 @@
 	height: 40px;
 	border: none;
 }
+@media only screen and (max-width: 680px) {
+	.geo-layer .text-sm {
+		width: 40px;
+	}
+}
diff --git a/src/styles/homepage.scss b/src/styles/homepage.scss
new file mode 100644
index 0000000..fbac1f9
--- /dev/null
+++ b/src/styles/homepage.scss
@@ -0,0 +1,34 @@
+.centered {
+	position: absolute;
+	top: 20%;
+	left: 50%;
+	transform: translate(-50%, -20%);
+}
+.container {
+	width: 60vw;
+	height: 50vh;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 10px;
+}
+.container h1 {
+	color: white;
+	font-family: 'Roboto', sans-serif;
+	font-size: 2em;
+}
+.container p {
+	color: white;
+	font-family: 'Roboto', sans-serif;
+	text-overflow: clip;
+	font-size: 1.2em;
+}
+
+@media only screen and (max-width: 680px) {
+	.container {
+		width: 90vw;
+	}
+	.container p {
+		width: 100%;
+	}
+}
diff --git a/src/styles/list-selector.scss b/src/styles/list-selector.scss
new file mode 100644
index 0000000..d8144a7
--- /dev/null
+++ b/src/styles/list-selector.scss
@@ -0,0 +1,46 @@
+.content-container {
+	width: 100vw;
+	height: 80vh;
+	position: absolute;
+	top: 20vh;
+	overflow: hidden scroll;
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	gap: 10px;
+	-ms-overflow-style: none;
+	scrollbar-width: none;
+}
+.content-container::-webkit-scrollbar {
+	display: none;
+}
+.list-element {
+	width: 80%;
+	height: fit-content;
+	display: grid;
+	grid-template-columns: 30% 70%;
+	background: #232228;
+	text-align: center;
+	text-decoration: none;
+	color: white;
+	border-radius: 10px;
+	font-family: 'Roboto', sans-serif;
+	transition: 0.3s;
+}
+.list-element:hover {
+	filter: brightness(1.4);
+}
+@media only screen and (max-width: 680px) {
+	.content-container {
+		top: calc(1vh + 120px);
+	}
+	.list-element {
+		width: 95%;
+		margin-left: -5%;
+	}
+}
+@media only screen and (max-height: 1100px) and (min-height: 900px) {
+	.content-container {
+		top: calc(1vh + 100px);
+	}
+}
diff --git a/src/styles/navbar.scss b/src/styles/navbar.scss
new file mode 100644
index 0000000..67fb9b4
--- /dev/null
+++ b/src/styles/navbar.scss
@@ -0,0 +1,101 @@
+.navbar {
+	width: 99vw;
+	height: 70px;
+	background: #2e2d35;
+	border-radius: 10px;
+	position: absolute;
+	top: 5px;
+}
+.navbar.extreme-navbar {
+	margin-top: 5em;
+}
+.navbar-toggler {
+	display: none;
+}
+.navbar-menu {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	flex-direction: row;
+	justify-content: center;
+	align-items: center;
+	gap: 20px;
+}
+.navbar-menu a {
+	color: white;
+	font-family: 'Roboto', sans-serif;
+	font-size: 1.4em;
+	cursor: pointer;
+	transition: 0.3s;
+	text-decoration: none;
+}
+.navbar-menu a:hover {
+	color: #acacac;
+}
+@media only screen and (max-width: 680px) {
+	.navbar-toggler {
+		margin-left: 5px;
+		height: 50px;
+		width: 50px;
+		background: #48474e;
+		border-radius: 5px;
+		outline: none;
+		border: 1px solid rgb(37, 37, 37);
+		display: block;
+	}
+	.navbar.extended .navbar-toggler {
+		margin-top: 15px;
+	}
+	.navbar-menu {
+		display: none;
+	}
+	.navbar {
+		display: grid;
+		align-items: center;
+		justify-content: flex-start;
+		width: 99vw;
+		position: absolute;
+		left: 50%;
+		top: 8px;
+		transform: translateX(-50%);
+		z-index: 5;
+	}
+	.navbar.extended {
+		height: 254px;
+		background: #2e2d35;
+		justify-content: center;
+		align-items: flex-start;
+		display: flex;
+		flex-direction: row;
+		animation-name: animateNavbarGrow;
+		animation-fill-mode: forwards;
+		animation-duration: 0.6s;
+	}
+	.navbar.extended .navbar-menu {
+		display: flex;
+		flex-direction: column;
+		background: #2e2d35;
+		justify-content: center;
+		align-items: center;
+		height: 245px;
+		animation-name: animateNavbarMenuGrow;
+		animation-fill-mode: forwards;
+		animation-duration: 1s;
+	}
+	@keyframes animateNavbarGrow {
+		0% {
+			height: 70px;
+		}
+		100% {
+			height: 254px;
+		}
+	}
+	@keyframes animateNavbarMenuGrow {
+		0% {
+			height: 70px;
+		}
+		100% {
+			height: 245px;
+		}
+	}
+}
diff --git a/src/styles/triangle.scss b/src/styles/triangle.scss
index 2ec02ec..4b2a2b0 100644
--- a/src/styles/triangle.scss
+++ b/src/styles/triangle.scss
@@ -5,7 +5,7 @@ $triangleHeight: 250px;
 	@import './general.scss';
 	@extend .container;
 	width: 100vw;
-	margin-top: 5em;
+	margin-top: -15%;
 	display: flex;
 	flex-direction: column;
 	gap: 10px;
@@ -86,3 +86,24 @@ $triangleHeight: 250px;
 	font-family: Arial, Helvetica, sans-serif;
 	font-size: 1.2em;
 }
+
+@media only screen and (max-width: 680px) {
+	.triangle-container {
+		transform: scale(0.7);
+	}
+	.input-container {
+		margin-top: 120px;
+		transform: scale(1.6);
+	}
+	.triangle-container .calculate-button {
+		margin-top: 150px;
+		transform: scale(2);
+	}
+}
+@media only screen and (max-height: 1100px) and (min-height: 900px) {
+	.triangle-container {
+		margin-top: -10%;
+		width: 70%;
+		transform: scale(1.4);
+	}
+}
diff --git a/src/styles/vector.scss b/src/styles/vector.scss
index 556851c..73ac78a 100644
--- a/src/styles/vector.scss
+++ b/src/styles/vector.scss
@@ -3,5 +3,21 @@
 	place-items: center;
 	grid-template-columns: repeat(2, 50%);
 	height: 50%;
-	width: 100%;
+	width: 90vw;
+}
+
+@media only screen and (max-width: 680px) {
+	.vector-inline {
+		height: 70%;
+		grid-template-columns: 100%;
+		grid-template-rows: repeat(2, 50%);
+		margin-top: -5em;
+	}
+}
+
+@media only screen and (max-height: 1100px) and (min-height: 900px) {
+	.vector-inline {
+		transform: scale(1.8);
+		margin-bottom: 3em;
+	}
 }