diff --git a/frontend/src/lib/components/InputField.svelte b/frontend/src/lib/components/InputField.svelte
index 8011140..b1f2bb1 100644
--- a/frontend/src/lib/components/InputField.svelte
+++ b/frontend/src/lib/components/InputField.svelte
@@ -37,6 +37,9 @@
 	/** @type {boolean} */
 	export let readonly = false;
 
+	/** @type {string} */
+	export let backgroundColor = '--surface0'; // New prop for background color
+
 	/**
 	 * @param {Event} event - The input event
 	 */
@@ -110,7 +113,10 @@
 	$: selectedColor = selectedOption ? selectedOption.color : '';
 </script>
 
-<div class="input-box {type === 'checkbox' ? 'checkbox-container' : ''}">
+<div
+	class="input-box {type === 'checkbox' ? 'checkbox-container' : ''}"
+	style="background-color: var({backgroundColor});"
+>
 	{#if type === 'checkbox'}
 		<label class="form-control {readonly ? 'form-control--disabled' : ''}">
 			<input