diff --git a/frontend/_DATA_.js b/frontend/_DATA_.js
index 88b8ed6..afaf101 100644
--- a/frontend/_DATA_.js
+++ b/frontend/_DATA_.js
@@ -136,6 +136,11 @@ const _DATA_ = {
 			en: 'To the questions',
 		},
 
+		questions_heading: {
+			de: 'Fragen',
+			en: 'Questions',
+		},
+
 		button_send_to_volt: {
 			de: 'An Volt senden',
 			en: 'Send to Volt',
@@ -161,6 +166,7 @@ const _DATA_ = {
 	},
 	sections: [
 		{
+			color: '#502379',
 			heading: {
 				de: 'Bildung',
 				en: 'Education',
@@ -210,6 +216,7 @@ const _DATA_ = {
 			}
 		},
 		{
+			color: '#FDC220',
 			heading: { de: 'Kultur' },
 			questions: {
 				amount_of_kown_languages: {
@@ -243,6 +250,7 @@ const _DATA_ = {
 			}
 		},
 		{
+			color: '#E63E12',
 			heading: { de: 'Diskriminierung' },
 			questions: {
 				discriminatory_experiences: {
@@ -307,6 +315,7 @@ const _DATA_ = {
 			},
 		},
 		{
+			color: '#1BBE6F',
 			heading: { de: 'LGBTQ*' },
 			questions: {
 				gender: {
@@ -351,6 +360,7 @@ const _DATA_ = {
 			},
 		},
 		{
+			color: '#82D0F4',
 			heading: { de: 'Psyche' },
 			questions: {
 				psychological_difficulties: {
@@ -405,6 +415,7 @@ const _DATA_ = {
 			},
 		},
 		{
+			color: '#502379',
 			heading: { de: 'Hilfsmittel' },
 			questions: {
 				everyday_aids: {
@@ -442,6 +453,7 @@ const _DATA_ = {
 			}
 		},
 		{
+			color: '#502379',
 			heading: { de: 'Verbesserung der Umfrage' },
 			intro: { de: 'Die ist unsere erste Umfrage dieser Art. Hier kannst du uns helfen diese weiter zu entwickeln …' },
 			questions: {
diff --git a/frontend/index.css b/frontend/index.css
index e4562c8..95a5ce1 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -93,7 +93,7 @@ a:hover {
 	display: block;
 }
 
-.page.violet_bg {
+.page.purple_bg {
 	color: white;
 	background: var(--volt-purple);
 }
@@ -108,107 +108,41 @@ a:hover {
 	background: var(--volt-blue);
 }
 
+.page.white_bg {
+	color: var(--volt-purple);
+	background: white;
+}
+
 .page .pageContent {
 	width: var(--page-width);
 	max-width: calc(100% - 64px);
 	margin: 0 auto;
 	padding: 64px 0;
 }
+.page .pageContent.question_page {
+	width: 100%;
+	max-width: 100%;
+	padding: 64px 32px;
+}
 
 section {
-	margin: 128px 0 32px 0;
+	background: var(--section-color);
+	color: var(--on-section-color);
+	margin: 0 -32px;
+	padding: 128px 32px 32px 32px;
 }
 
-section .intro {
-	width: 500px;
-	max-width: 100%;
-	margin: 64px 0 0 0;
-}
-
-.question {
-	display: block;
-	width: 500px;
-	max-width: 100%;
-	/*padding: 32px;*/
-	margin: 64px 0 0 0;
-	/*box-shadow: 0 16px 32px rgba(0,0,0,0.2);*/
-}
-
-@media (max-width: 800px) {
-	.question {
-margin: 32px 0 0 0;
-	}
-}
-
-.voltLogo {
-	z-index: 1;
-	position: relative;
-	display: inline-block;
-	color: var(--volt-purple) !important;
-	margin-top: 32px;
-
-	transition: top 0.2s ease, margin-bottom 0.2s ease;
-}
-
-.website_heading {
-	margin-top: 32px;
-}
-
-.website_description {
-	/* margin-top: 16px; */
-
-	transition: margin-top 0.2s ease;
-}
-
-@media (max-width: 800px) {
-	.website_heading {
-    margin-top: 0;
-	}
-}
-
-
-h1 {
-	margin: 0;
-	font-size: 4rem;
-	line-height: 1;
-
-	color: var(--on-light-color);
-
-	transition: font-size 0.2s ease;
-}
-
-.page.violet_bg h1,
-.page.red_bg h1,
-.page.blue_bg h1 {
-	color: var(--on-dark-color);
-}
-
-@media (max-width: 800px) {
-	h1 {
-		font-size: 3rem;
-	}
-}
-
-h2 {
-	display: inline-block;
-	position: relative;
-
-	color: white;
-
-	font-size: 2rem;
-	line-height: 1.6;
-
-	padding: 16px 32px;
-	margin: 0 -32px -16px -32px;
-
-	-webkit-box-decoration-break: clone;
-	box-decoration-break: clone;
-}
 
 section h2 {
-	background: var(--volt-purple);
+	/* background: white; */
+	/* color: var(--volt-purple); */
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	color: currentColor;
 }
 
+/*
 section h2:after {
 	z-index: -1;
 	content: '';
@@ -249,9 +183,108 @@ section h2:after {
 	calc(var(--block-width) *  8) 0 0 var(--volt-purple),
 	calc(var(--block-width) *  9) 0 0 var(--volt-purple);*/
 }
+*/
+
+section .intro {
+	width: 500px;
+	max-width: 100%;
+	margin: 64px 0 0 0;
+}
+
+.page .pageContent.question_page .questions {
+	margin-top: 32px;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+	gap: 32px;
+}
+@media (max-width: 500px) {
+	.page .pageContent.question_page .questions {
+		grid-template-columns: 100%;
+	}
+}
+
+.question {
+	display: block;
+	width: 100%;
+	padding: 32px;
+
+	background: white;
+	color: var(--volt-purple);
+}
+.question h3 {
+	margin-bottom: 16px;
+}
+
+.voltLogo {
+	z-index: 1;
+	position: relative;
+	display: inline-block;
+	color: var(--volt-purple) !important;
+	margin-top: 32px;
+
+	transition: top 0.2s ease, margin-bottom 0.2s ease;
+}
+
+.website_heading {
+	margin-top: 32px;
+}
+
+.website_description {
+	/* margin-top: 16px; */
+
+	transition: margin-top 0.2s ease;
+}
+
+@media (max-width: 800px) {
+	.website_heading {
+    margin-top: 0;
+	}
+}
+
+
+h1 {
+	margin: 0;
+	font-size: 4rem;
+	line-height: 1;
+
+	color: var(--on-light-color);
+
+	transition: font-size 0.2s ease;
+}
+
+.page.purple_bg h1,
+.page.red_bg h1,
+.page.blue_bg h1 {
+	color: var(--on-dark-color);
+}
+.page.white_bg h1 {
+	color: var(--volt-purple);
+}
+
+@media (max-width: 800px) {
+	h1 {
+		font-size: 3rem;
+	}
+}
+
+h2 {
+	display: inline-block;
+	position: relative;
+
+	color: white;
+
+	font-size: 2rem;
+	line-height: 1.6;
+
+	padding: 16px 32px;
+	margin: 0 -32px -16px -32px;
+
+	-webkit-box-decoration-break: clone;
+	box-decoration-break: clone;
+}
 
 h3 {
-	font-size: 1rem;
+	font-size: 1.25rem;
 	cursor: text;
 	margin: 0 0 16px 0;
 }
@@ -439,12 +472,17 @@ label.languageChooserWrapper select {
 
 .radio_or_checkbox_label {
 	line-height: 32px;
-	padding: 2px 0;
+	padding: 4px;
+	margin: 0 -4px;
 	cursor: pointer;
 
 	display: flex;
 	flex-direction: row;
 }
+.radio_or_checkbox_label:hover {
+	background-color: var(--volt-purple);
+	color: white;
+}
 
 .radio_or_checkbox_label input[type="checkbox"],
 .radio_or_checkbox_label input[type="radio"] {
@@ -535,7 +573,7 @@ button {
 	transition: opacity 0.2s ease;
 }
 
-.page.violet_bg button {
+.page.purple_bg button {
 	background: var(--light-color);
 	color: var(--volt-purple);
 }
@@ -546,7 +584,10 @@ button {
 	color: var(--on-light-color);
 }
 
-button.green {
+button.green,
+.page.purple_bg button,
+.page.red_bg button,
+.page.blue_bg button {
 	background: var(--volt-green);
 	color: white;
 }
diff --git a/frontend/index.html b/frontend/index.html
index 7c711b4..888eb5e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -53,7 +53,7 @@
 
 <body show="intro">
 
-	<div class="page violet_bg" page="intro">
+	<div class="page purple_bg" page="intro">
 		<div class="pageContent" style="padding-top:0;">
 			<h1 class="voltLogo">
 				<svg style="width:120px;" version="1.1" viewBox="0 0 10433 4346.4" xml:space="preserve"
@@ -203,8 +203,9 @@
 		</div>
 	</div>
 
-	<div class="page white_bg" page="questions">
-		<div class="pageContent" style="padding-top:0;">
+	<div class="page purple_bg" page="questions">
+		<div class="pageContent question_page">
+			<h1 class="website_heading" data-translation-key="questions_heading"></h1>
 
 			<div id="inputs"></div>
 
diff --git a/frontend/index.js b/frontend/index.js
index 894f86d..11a07b7 100644
--- a/frontend/index.js
+++ b/frontend/index.js
@@ -441,6 +441,43 @@ function submitForm() {
 
 
 
+// CONTRASTING COLORS (for the question form)
+
+function hexToRGBArray(color) {
+	if (color.startsWith('#')) {
+		color = color.substring(1)
+	}
+
+	if (color.length === 3) {
+		color = color.charAt(0) + color.charAt(0) + color.charAt(1) + color.charAt(1) + color.charAt(2) + color.charAt(2);
+	} else if (color.length !== 6) {
+		throw (new Error('Invalid hex color: ' + color));
+	}
+
+	let rgb = [];
+	for (var i = 0; i <= 2; i++) {
+		rgb[i] = parseInt(color.substr(i * 2, 2), 16);
+	}
+
+	return rgb;
+}
+
+function luma(color) {
+	// color can be a hex string or an array of RGB values 0-255
+	const rgb = (typeof color === 'string') ? hexToRGBArray(color) : color;
+	return (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]); // SMPTE C, Rec. 709 weightings
+}
+
+function getContrastingColor(color) {
+	// source: https://stackoverflow.com/questions/635022/calculating-contrasting-colours-in-javascript
+	// exact answer: https://stackoverflow.com/a/6511606/2387277
+	// example: https://jsfiddle.net/thomasrosen/9njo6t7s/20/
+
+	return (luma(color) >= 165) ? '000' : 'fff';
+}
+
+
+
 // GENERATE QUESTION FORM
 
 function resetBodyClasses() {
@@ -452,10 +489,17 @@ function resetBodyClasses() {
 function generateForm(data) {
 	// websiteTitle.innerHTML = 'Volt — '+getByLanguage(_DATA_.translation_texts.website_title).replace(/\n+/g, ' ')
 
+	inputs.innerHTML = ''
+
 	for (const section of _DATA_.sections) {
 
 		var sectionEle = document.createElement('section')
 
+		if (!!section.color) {
+			sectionEle.style.setProperty('--section-color', section.color)
+			sectionEle.style.setProperty('--on-section-color', '#'+getContrastingColor(section.color))
+		}
+
 		if (!!section.heading) {
 			var sectionHeading = document.createElement('h2')
 			sectionHeading.innerHTML = getByLanguage(section.heading)
@@ -470,6 +514,9 @@ function generateForm(data) {
 		}
 
 
+		var questionsWrapperEle = document.createElement('div')
+		questionsWrapperEle.classList.add('questions')
+
 		// display questions
 		for (const questionKey of Object.keys(section.questions)) {
 			const question = section.questions[questionKey]
@@ -653,9 +700,10 @@ function generateForm(data) {
 				questionEle.appendChild(newInput)
 			}
 
-			sectionEle.appendChild(questionEle)
+			questionsWrapperEle.appendChild(questionEle)
 		}
 
+		sectionEle.appendChild(questionsWrapperEle)
 		inputs.appendChild(sectionEle)
 	}
 }