diff --git a/frontend/src/lang/en.json b/frontend/src/lang/en.json
index 2ab57bab4f7c261c0cde5e657d5fd869e2912ec5..a2d3936ccab2a4f782593fe5f4e7c8e02a1493a0 100644
--- a/frontend/src/lang/en.json
+++ b/frontend/src/lang/en.json
@@ -98,7 +98,7 @@
 		"homeLanguage": "First language",
 		"education": {
 			"title": "What is the highest grade, degree or level of education you achieved?",
-			"na": "None",
+			"NoEducation": "None",
 			"PrimarySchool": "Primary school",
 			"SecondarySchool": "Secondary school/High school",
 			"NonUni": "Non-university degree",
diff --git a/frontend/src/lang/fr.json b/frontend/src/lang/fr.json
index 44bb7fd9461344406cb1fdec8f0f17c9b52b2461..c0622dc8d58fa5c98b6e9bd8e8e7f52b1e35ec52 100644
--- a/frontend/src/lang/fr.json
+++ b/frontend/src/lang/fr.json
@@ -210,7 +210,7 @@
 		"homeLanguage": "Première Langue",
 		"education": {
 			"title": "Quel est le grade, le diplôme ou le niveau d'études le plus élevé que vous ayez obtenu ?",
-			"na": "Aucun",
+			"NoEducation": "Aucun",
 			"PrimarySchool": "École primaire",
 			"SecondarySchool": "École secondaire",
 			"NonUni": "Diplôme non universitaire",
diff --git a/frontend/src/lib/components/surveys/dropdown.svelte b/frontend/src/lib/components/surveys/dropdown.svelte
index 915fabf43c644401f40d669c3e7629e32f8c9edb..e11c67c5007cdeb69f0e6ab5a106458b75ab1ae6 100644
--- a/frontend/src/lib/components/surveys/dropdown.svelte
+++ b/frontend/src/lib/components/surveys/dropdown.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <select
-	class="select select-bordered !ml-0"
+	class="w-full select select-bordered !ml-0"
 	id="dropdown"
 	name="dropdown"
 	bind:value={option}
diff --git a/frontend/src/routes/tests/[id]/+page.svelte b/frontend/src/routes/tests/[id]/+page.svelte
index 5e43c4d2b5f28d27a047c4232746de0ec7a6b5df..561c6c039648fdc857809ab2850595e7de7fca04 100644
--- a/frontend/src/routes/tests/[id]/+page.svelte
+++ b/frontend/src/routes/tests/[id]/+page.svelte
@@ -280,7 +280,7 @@
 		</div>
 
 		<div class="mx-auto mt-16">
-			<div class="flex justify-around min-w-[600px] space-x-10">
+			<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-4">
 				{#each displayQuestionOptions as option (option)}
 					{@const type = option.split(':')[0]}
 					{#if type == 'dropdown'}
@@ -354,8 +354,8 @@
 			{ value: 'na', label: $t('surveys.genders.na') }
 		]}
 		{#if subStep === 0}
-			<div class="mx-auto mt-16 text-center">
-				<pre class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.birthYear')}</pre>
+			<div class="mx-auto mt-16 text-center px-4">
+				<p class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.birthYear')}</p>
 				<Dropdown
 					values={Array.from({ length: 82 }, (_, i) => {
 						const year = 1931 + i;
@@ -367,8 +367,8 @@
 				></Dropdown>
 			</div>
 		{:else if subStep === 1}
-			<div class="mx-auto mt-16 text-center">
-				<pre class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.gender')}</pre>
+			<div class="mx-auto mt-16 text-center px-4">
+				<p class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.gender')}</p>
 				<div class="flex flex-col items-center space-y-4">
 					{#each genderOptions as { value, label }}
 						<label class="radio-label flex items-center space-x-2">
@@ -386,8 +386,8 @@
 				</div>
 			</div>
 		{:else if subStep === 2}
-			<div class="mx-auto mt-16 text-center">
-				<pre class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.homeLanguage')}</pre>
+			<div class="mx-auto mt-16 text-center px-4">
+				<p class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.homeLanguage')}</p>
 				<Dropdown
 					values={Object.entries(config.PRIMARY_LANGUAGE).map(([code, name]) => ({
 						value: code,
@@ -399,11 +399,11 @@
 				></Dropdown>
 			</div>
 		{:else if subStep === 3}
-			<div class="mx-auto mt-16 text-center">
-				<pre class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.education.title')}</pre>
+			<div class="mx-auto mt-16 text-center px-4">
+				<p class="text-center font-bold py-4 px-6 m-auto">{$t('surveys.education.title')}</p>
 				<Dropdown
 					values={[
-						{ value: 'na', display: $t('surveys.education.na') },
+						{ value: 'NoEducation', display: $t('surveys.education.NoEducation') },
 						{ value: 'PrimarySchool', display: $t('surveys.education.PrimarySchool') },
 						{ value: 'SecondarySchool', display: $t('surveys.education.SecondarySchool') },
 						{ value: 'NonUni', display: $t('surveys.education.NonUni') },