diff --git a/frontend/src/lib/components/Modal.svelte b/frontend/src/lib/components/Modal.svelte
index dcae501..859bbdd 100644
--- a/frontend/src/lib/components/Modal.svelte
+++ b/frontend/src/lib/components/Modal.svelte
@@ -327,7 +327,7 @@
 						<img class="w-full" src="/close-white.svg" alt="" />
 					</button>
 				</div>
-				<div class="px-8 overflow-y-auto {scrollBarClassesVertical}">
+				<div class="px-8 overflow-y-auto overflow-x-visible {scrollBarClassesVertical}">
 					<slot />
 				</div>
 			</section>
diff --git a/frontend/src/lib/components/TextFieldSelect.svelte b/frontend/src/lib/components/TextFieldSelect.svelte
index 5983e29..7237b05 100644
--- a/frontend/src/lib/components/TextFieldSelect.svelte
+++ b/frontend/src/lib/components/TextFieldSelect.svelte
@@ -26,6 +26,7 @@
 	let inputElement;
 	let dropdownElement;
 	let justSelected = false;
+	let dropdownPosition = { top: 0, left: 0, width: 0 };
 
 	// Simple function to filter options based on input
 	const filterOptions = (searchValue) => {
@@ -51,6 +52,7 @@
 			showDropdown = true;
 			hasTyped = false; // Reset typing flag to show all options
 			allOptions = [...optionsArray]; // Show all options on focus
+			updateDropdownPosition();
 		}
 		justSelected = false; // Reset the flag
 	};
@@ -61,6 +63,7 @@
 		showDropdown = true;
 		hasTyped = true; // User has typed, enable filtering
 		allOptions = filterOptions(value);
+		updateDropdownPosition();
 	};
 
 	// Select an option
@@ -84,6 +87,18 @@
 		hasTyped = false; // Reset typing flag when closing
 	};
 
+	// Update dropdown position for fixed positioning
+	const updateDropdownPosition = () => {
+		if (inputElement) {
+			const rect = inputElement.getBoundingClientRect();
+			dropdownPosition = {
+				top: rect.bottom + 4,
+				left: rect.left,
+				width: rect.width
+			};
+		}
+	};
+
 	// Handle blur to close dropdown when tabbing out
 	const handleBlur = (e) => {
 		// Use setTimeout to allow click events on options to complete first
@@ -187,10 +202,14 @@
 		value = value || defaultValue;
 		const unsubscribe = activeFormElementSubscribe(_id, closeDropdown);
 		document.addEventListener('click', handleOutsideClick);
+		window.addEventListener('scroll', updateDropdownPosition, true);
+		window.addEventListener('resize', updateDropdownPosition);
 
 		return () => {
 			unsubscribe();
 			document.removeEventListener('click', handleOutsideClick);
+			window.removeEventListener('scroll', updateDropdownPosition, true);
+			window.removeEventListener('resize', updateDropdownPosition);
 		};
 	});
 
@@ -215,6 +234,8 @@
 			parentForm.removeEventListener('reset', parentFormResetListener);
 		}
 		document.removeEventListener('click', handleOutsideClick);
+		window.removeEventListener('scroll', updateDropdownPosition, true);
+		window.removeEventListener('resize', updateDropdownPosition);
 	});
 
 	// Generate unique IDs for accessibility
@@ -323,15 +344,14 @@
 		{#if showDropdown}
 			<div
 				bind:this={dropdownElement}
-				class="absolute top-10 z-50"
-				class:w-28={size == 'small'}
-				class:w-60={size == 'normal'}
+				class="fixed z-[9999]"
+				style="top: {dropdownPosition.top}px; left: {dropdownPosition.left}px; width: {dropdownPosition.width}px;"
 			>
 				<ul
 					id={listboxId}
 					role="listbox"
 					aria-labelledby={labelId}
-					class="bg-gray-100 dark:bg-gray-900 list-none mt-4 z-[999] rounded-md min-w-fit shadow-md border border-gray-200 dark:border-gray-700/60 max-h-40 overflow-y-scroll transition-colors duration-200"
+					class="bg-gray-100 dark:bg-gray-900 list-none mt-4 z-[9999] rounded-md min-w-fit shadow-lg border border-gray-200 dark:border-gray-700/60 max-h-40 overflow-y-scroll transition-colors duration-200"
 				>
 					{#if allOptions.length}
 						{#each allOptions as option, index}