diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 30028eb..131cbf0 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -490,7 +490,7 @@
 				</div>
 			</div>
 			<div
-				class="lg:border-l lg:border-l-black lg:border-t-0 border-t border-t-black flex lg:flex-col flex-row stretch overflow-x-scroll"
+				class="lg:border-l lg:border-l-black lg:border-t-0 border-t border-t-black flex lg:flex-col flex-row stretch overflow-x-auto why-classquiz"
 			>
 				{#each classquiz_reasons as reason, index}
 					<div
@@ -517,3 +517,26 @@
 	</div>
 {/if}
 <Footer />
+
+<style>
+	.why-classquiz::-webkit-scrollbar {
+		height: 0.8rem;
+		margin-bottom: 5rem;
+	}
+
+	.why-classquiz::-webkit-scrollbar-track {
+		box-shadow: inset 0 0 10px 10px transparent;
+		border: solid 3px transparent;
+	}
+
+	.why-classquiz::-webkit-scrollbar-thumb {
+		box-shadow: inset 0 0 10px 10px #374151;
+		border: solid 3px transparent;
+		border-radius: 15px;
+	}
+
+	.why-classquiz::-webkit-scrollbar-thumb:hover {
+		box-shadow: inset 0 0 10px 10px #555;
+		border: solid 3px transparent;
+	}
+</style>