diff --git a/frontend/src/components/intake/personal-info-form.tsx b/frontend/src/components/intake/personal-info-form.tsx
index 22ac5609..c7c757f0 100644
--- a/frontend/src/components/intake/personal-info-form.tsx
+++ b/frontend/src/components/intake/personal-info-form.tsx
@@ -26,9 +26,14 @@ interface PersonalInfoFormData {
 interface PersonalInfoFormProps {
   formType: 'participant' | 'volunteer';
   onSubmit: (experienceData: ExperienceData, personalData: PersonalData) => void;
+  onDropdownOpenChange?: (isOpen: boolean) => void;
 }
 
-export function PersonalInfoForm({ formType, onSubmit }: PersonalInfoFormProps) {
+export function PersonalInfoForm({
+  formType,
+  onSubmit,
+  onDropdownOpenChange,
+}: PersonalInfoFormProps) {
   const router = useRouter();
   const {
     control,
@@ -321,6 +326,7 @@ export function PersonalInfoForm({ formType, onSubmit }: PersonalInfoFormProps)
                     onSelectionChange={field.onChange}
                     placeholder="Province"
                     error={!!errors.province}
+                    onOpenChange={onDropdownOpenChange}
                   />
                 )}
               />
diff --git a/frontend/src/components/ui/multi-select-dropdown.tsx b/frontend/src/components/ui/multi-select-dropdown.tsx
index e82ea5f5..f3360831 100644
--- a/frontend/src/components/ui/multi-select-dropdown.tsx
+++ b/frontend/src/components/ui/multi-select-dropdown.tsx
@@ -51,7 +51,7 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
   };
 
   return (
-    <Box position="relative" w="full" ref={dropdownRef} zIndex={1}>
+    <Box position="relative" w="full" ref={dropdownRef}>
       <button
         type="button"
         onClick={() => setIsOpen(!isOpen)}
@@ -149,7 +149,7 @@ export const MultiSelectDropdown: React.FC<MultiSelectDropdownProps> = ({
           border="1px solid #d1d5db"
           borderRadius="6px"
           boxShadow="0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
-          zIndex={1000}
+          zIndex={9999}
         >
           {options.map((option) => {
             const isSelected = selectedValues.includes(option);
diff --git a/frontend/src/components/ui/single-select-dropdown.tsx b/frontend/src/components/ui/single-select-dropdown.tsx
index d009aaac..08965bf1 100644
--- a/frontend/src/components/ui/single-select-dropdown.tsx
+++ b/frontend/src/components/ui/single-select-dropdown.tsx
@@ -8,6 +8,7 @@ interface SingleSelectDropdownProps {
   onSelectionChange: (value: string) => void;
   placeholder: string;
   error?: boolean;
+  onOpenChange?: (isOpen: boolean) => void;
 }
 
 export const SingleSelectDropdown: React.FC<SingleSelectDropdownProps> = ({
@@ -16,15 +17,23 @@ export const SingleSelectDropdown: React.FC<SingleSelectDropdownProps> = ({
   onSelectionChange,
   placeholder,
   error,
+  onOpenChange,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef<HTMLDivElement>(null);
 
+  const handleToggle = () => {
+    const newIsOpen = !isOpen;
+    setIsOpen(newIsOpen);
+    onOpenChange?.(newIsOpen);
+  };
+
   // Close dropdown when clicking outside
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
         setIsOpen(false);
+        onOpenChange?.(false);
       }
     };
 
@@ -35,11 +44,12 @@ export const SingleSelectDropdown: React.FC<SingleSelectDropdownProps> = ({
     return () => {
       document.removeEventListener('mousedown', handleClickOutside);
     };
-  }, [isOpen]);
+  }, [isOpen, onOpenChange]);
 
   const handleSelect = (option: string) => {
     onSelectionChange(option);
     setIsOpen(false);
+    onOpenChange?.(false);
   };
 
   const handleRemove = (e: React.MouseEvent) => {
@@ -48,10 +58,10 @@ export const SingleSelectDropdown: React.FC<SingleSelectDropdownProps> = ({
   };
 
   return (
-    <Box position="relative" w="full" ref={dropdownRef} zIndex={1}>
+    <Box position="relative" w="full" ref={dropdownRef}>
       <button
         type="button"
-        onClick={() => setIsOpen(!isOpen)}
+        onClick={handleToggle}
         style={{
           width: '100%',
           minHeight: '40px',
@@ -143,7 +153,7 @@ export const SingleSelectDropdown: React.FC<SingleSelectDropdownProps> = ({
           border="1px solid #d1d5db"
           borderRadius="6px"
           boxShadow="0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)"
-          zIndex={1000}
+          zIndex={9999}
         >
           {options.map((option) => (
             <Box
diff --git a/frontend/src/pages/participant/intake/index.tsx b/frontend/src/pages/participant/intake/index.tsx
index 190ba1b1..52a57f28 100644
--- a/frontend/src/pages/participant/intake/index.tsx
+++ b/frontend/src/pages/participant/intake/index.tsx
@@ -66,6 +66,7 @@ export default function ParticipantIntakePage() {
     formType: 'participant',
   });
   const [, setSubmitting] = useState(false);
+  const [hasDropdownOpen, setHasDropdownOpen] = useState(false);
 
   const computeFlowSteps = (data: IntakeFormData) => {
     const { hasBloodCancer, caringForSomeone } = data;
@@ -226,7 +227,14 @@ export default function ParticipantIntakePage() {
   return (
     <ProtectedPage allowedRoles={[UserRole.PARTICIPANT, UserRole.ADMIN]}>
       <FormStatusGuard allowedStatuses={[FormStatus.INTAKE_TODO]}>
-        <Flex minH="100vh" bg={COLORS.lightGray} justify="center" py={12} overflow="visible">
+        <Flex
+          minH="100vh"
+          bg={COLORS.lightGray}
+          justify="center"
+          py={12}
+          overflow="visible"
+          pb={hasDropdownOpen ? '50vh' : 12}
+        >
           <Box
             w="full"
             maxW="1200px"
@@ -238,7 +246,11 @@ export default function ParticipantIntakePage() {
             position="relative"
           >
             {currentStepType === 'experience-personal' && (
-              <PersonalInfoForm formType="participant" onSubmit={handleExperiencePersonalSubmit} />
+              <PersonalInfoForm
+                formType="participant"
+                onSubmit={handleExperiencePersonalSubmit}
+                onDropdownOpenChange={setHasDropdownOpen}
+              />
             )}
 
             {currentStepType === 'demographics-cancer' && (
diff --git a/frontend/src/pages/volunteer/intake/index.tsx b/frontend/src/pages/volunteer/intake/index.tsx
index ee614739..ffbbb155 100644
--- a/frontend/src/pages/volunteer/intake/index.tsx
+++ b/frontend/src/pages/volunteer/intake/index.tsx
@@ -66,6 +66,7 @@ export default function VolunteerIntakePage() {
     formType: 'volunteer',
   });
   const [, setSubmitting] = useState(false);
+  const [hasDropdownOpen, setHasDropdownOpen] = useState(false);
 
   // Determine flow based on experience type selections
   const computeFlowSteps = (data: IntakeFormData) => {
@@ -235,7 +236,14 @@ export default function VolunteerIntakePage() {
   return (
     <ProtectedPage allowedRoles={[UserRole.VOLUNTEER, UserRole.ADMIN]}>
       <FormStatusGuard allowedStatuses={[FormStatus.INTAKE_TODO]}>
-        <Flex minH="100vh" bg={COLORS.lightGray} justify="center" py={12} overflow="visible">
+        <Flex
+          minH="100vh"
+          bg={COLORS.lightGray}
+          justify="center"
+          py={12}
+          overflow="visible"
+          pb={hasDropdownOpen ? '30vh' : 12}
+        >
           <Box
             w="full"
             maxW="1200px"
@@ -247,7 +255,11 @@ export default function VolunteerIntakePage() {
             position="relative"
           >
             {currentStepType === 'experience-personal' && (
-              <PersonalInfoForm formType="volunteer" onSubmit={handleExperiencePersonalSubmit} />
+              <PersonalInfoForm
+                formType="volunteer"
+                onSubmit={handleExperiencePersonalSubmit}
+                onDropdownOpenChange={setHasDropdownOpen}
+              />
             )}
 
             {currentStepType === 'demographics-cancer' && (