diff --git a/frontend/src/app.css b/frontend/src/app.css
index cd90184..24c1c68 100644
--- a/frontend/src/app.css
+++ b/frontend/src/app.css
@@ -33,23 +33,23 @@
 	}
 }
 
-#why-classquiz::-webkit-scrollbar {
+.why-classquiz::-webkit-scrollbar {
 	height: 0.8rem;
 	margin-bottom: 5rem;
 }
 
-#why-classquiz::-webkit-scrollbar-track {
+.why-classquiz::-webkit-scrollbar-track {
 	box-shadow: inset 0 0 10px 10px transparent;
 	border: solid 3px transparent;
 }
 
-#why-classquiz::-webkit-scrollbar-thumb {
+.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 {
+.why-classquiz::-webkit-scrollbar-thumb:hover {
 	box-shadow: inset 0 0 10px 10px #555;
 	border: solid 3px transparent;
 }
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index bdd8214..089f0b6 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -490,8 +490,7 @@
 				</div>
 			</div>
 			<div
-				id="why-classquiz"
-				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"
+				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