diff --git a/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css b/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css
index 6f2c08b13..e392cc272 100644
--- a/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css
+++ b/frontend/src/components/LevelSelectionBox/LevelSelectionBox.css
@@ -9,3 +9,36 @@
 .level-selection-box button:last-child {
 	font-size: 1rem;
 }
+
+@media (max-width: 1230px) {
+	.level-selection-box button {
+		font-size: 0.8rem;
+		padding: 1rem;
+	}
+}
+
+@media (max-width: 1015px) {
+	.level-selection-box button {
+		font-size: 0.8rem;
+		height: 0.5rem;
+	}
+}
+
+@media (max-width: 940px) {
+	.level-selection-box button {
+		font-size: 0.7rem;
+	}
+	.level-selection-box button:last-child {
+		width: auto;
+		font-size: 0.6rem;
+	}
+}
+
+@media (max-width: 760px) {
+	.level-selection-box button {
+		font-size: 0.6rem;
+	}
+	.level-selection-box {
+		align-items: center;
+	}
+}
diff --git a/frontend/src/components/MainComponent/MainHeader.css b/frontend/src/components/MainComponent/MainHeader.css
index 5629b1743..884cf5a71 100644
--- a/frontend/src/components/MainComponent/MainHeader.css
+++ b/frontend/src/components/MainComponent/MainHeader.css
@@ -47,3 +47,81 @@
 	justify-content: flex-end;
 	gap: 1.5rem;
 }
+
+/* Media Query for .game-container */
+@media (max-width: 1230px) {
+	.main-header {
+		height: 5rem;
+		padding: 0rem 0rem;
+	}
+
+	.main-header .themed-button {
+		padding: 0.5rem;
+		height: 2.5rem;
+		gap: 0.25rem;
+		font-size: 0.8rem;
+	}
+
+	.main-header-left,
+	.main-header-middle,
+	.main-header-right {
+		flex-grow: 1;
+	}
+
+	.main-header-middle .main-header-level {
+		font-size: 1rem;
+	}
+
+	.level-selection-box {
+		font-size: 0.5rem;
+	}
+}
+
+@media (max-width: 1015px) {
+	.main-header .themed-button {
+		gap: 0.25rem;
+		font-size: 0.8rem;
+	}
+
+	.main-header-middle {
+		gap: 1rem;
+		flex-shrink: 1;
+	}
+	.main-header {
+		padding: 0rem 0rem;
+		height: 3.5rem;
+	}
+	.main-header-right {
+		gap: 0rem;
+	}
+}
+
+@media (max-width: 940px) {
+	.main-header-left > .titleLogo {
+		height: 50%;
+	}
+	.main-header-left {
+		width: auto;
+	}
+	.main-header-right {
+		justify-content: space-evenly;
+		width: auto;
+	}
+	.main-header .themed-button {
+		font-size: 0.5rem;
+	}
+	.main-header {
+		height: 3.5rem;
+	}
+}
+
+@media (max-width: 760px) {
+	.main-header .themed-button {
+		font-size: 0.5rem;
+		padding: 0.4rem 0.4rem;
+		height: 1.8rem;
+	}
+	.main-header {
+		height: 3rem;
+	}
+}
diff --git a/frontend/src/components/ThemedButtons/ThemedButton.css b/frontend/src/components/ThemedButtons/ThemedButton.css
index 150508695..93a0390ed 100644
--- a/frontend/src/components/ThemedButtons/ThemedButton.css
+++ b/frontend/src/components/ThemedButtons/ThemedButton.css
@@ -16,3 +16,9 @@
 	background-color: var(--action-button-disabled-background-colour);
 	color: var(--action-button-disabled-text-colour);
 }
+
+@media (max-width: 760px) {
+	.themed-button img {
+		display: none;
+	}
+}