diff --git a/src/components/Diagnostic.tsx b/src/components/Diagnostic.tsx
index dfa892ba..20be4856 100644
--- a/src/components/Diagnostic.tsx
+++ b/src/components/Diagnostic.tsx
@@ -99,7 +99,7 @@ export default function Diagnostic({onFinish}: Props) {
 			</div>
 			<div className="flex flex-col items-center justify-center gap-8 w-full">
 				<h2 className="font-semibold text-xl">What is your current IELTS level?</h2>
-				<div className="flex flex-col gap-16 w-full">
+				<div className="flex flex-col gap-16 w-full mb-20">
 					<div className="grid grid-cols-2 gap-y-4 gap-x-16">
 						<div className="w-full flex flex-col gap-3.5 relative">
 							<span className="text-sm text-mti-gray-dim">
@@ -113,7 +113,7 @@ export default function Diagnostic({onFinish}: Props) {
 									</span>
 									<BsChevronDown className="text-mti-gray-cool" size={12} />
 								</Menu.Button>
-								<Menu.Items className="absolute origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl overflow-hidden">
+								<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
 									{Object.values(writingMarking).map((x) => (
 										<Menu.Item key={x}>
 											<span
@@ -138,7 +138,7 @@ export default function Diagnostic({onFinish}: Props) {
 									</span>
 									<BsChevronDown className="text-mti-gray-cool" size={12} />
 								</Menu.Button>
-								<Menu.Items className="absolute origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl overflow-hidden">
+								<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
 									{Object.values(writingMarking).map((x) => (
 										<Menu.Item key={x}>
 											<span
@@ -163,7 +163,7 @@ export default function Diagnostic({onFinish}: Props) {
 									</span>
 									<BsChevronDown className="text-mti-gray-cool" size={12} />
 								</Menu.Button>
-								<Menu.Items className="absolute origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl overflow-hidden">
+								<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
 									{Object.values(writingMarking).map((x) => (
 										<Menu.Item key={x}>
 											<span
@@ -188,7 +188,7 @@ export default function Diagnostic({onFinish}: Props) {
 									</span>
 									<BsChevronDown className="text-mti-gray-cool" size={12} />
 								</Menu.Button>
-								<Menu.Items className="absolute origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
+								<Menu.Items className="absolute overflow-y-scroll scrollbar-hide max-h-[230px] origin-top top-full bg-white flex flex-col items-center w-full z-20 drop-shadow-lg rounded-2xl">
 									{Object.values(writingMarking).map((x) => (
 										<Menu.Item key={x}>
 											<span