diff --git a/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
index 786196731..574b08487 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/search/page.tsx
@@ -429,7 +429,7 @@ function StationDropdown({
           (s.name.toLowerCase().includes(query.toLowerCase()) ||
             s.code?.toLowerCase().includes(query.toLowerCase())),
       )
-    : stations.filter((s) => s.id !== excludeId).slice(0, 8);
+    : stations.filter((s) => s.id !== excludeId).slice(0, 20);
 
   const displayValue = open ? query : (selectedStation?.name ?? "");
 
@@ -475,7 +475,7 @@ function StationDropdown({
       </div>
 
       {open && (
-        <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-xl z-[200] max-h-56 overflow-y-auto overflow-x-hidden scrollbar-hide">
+        <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-xl z-[200] max-h-96 overflow-y-auto overflow-x-hidden scrollbar-hide">
           {!query && recentIds.length > 0 && (
             <div className="px-3 pt-2 pb-1">
               <p className="text-[10px] font-semibold text-gray-400 uppercase tracking-wide mb-1">
@@ -1161,8 +1161,6 @@ export default function SearchPage() {
                             </p>
                           )}
                         </div>
-                        {/* Divider */}
-                        <div className="w-px h-10 bg-gray-200 mb-0.5 flex-shrink-0" />
                         {/* Date */}
                         <div className="w-44 flex-shrink-0 space-y-1">
                           <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
@@ -1192,8 +1190,6 @@ export default function SearchPage() {
                             </p>
                           )}
                         </div>
-                        {/* Divider */}
-                        <div className="w-px h-10 bg-gray-200 mb-0.5 flex-shrink-0" />
                         {/* Pax + Nationality */}
                         <div className="w-44 flex-shrink-0 space-y-1">
                           <label className="text-xs font-semibold text-gray-500 uppercase tracking-wide">
@@ -1202,11 +1198,11 @@ export default function SearchPage() {
                           <button
                             type="button"
                             onClick={() => setPassengerModalOpen(true)}
-                            className={`w-full flex items-center justify-between px-3 py-3.5 border-2 rounded-xl bg-white hover:border-gray-300 transition-all ${
-                              showNationalityError ? "border-red-400" : "border-gray-200"
+                            className={`w-full flex items-center justify-between px-3 py-3.5 border-2 rounded-xl bg-white dark:bg-gray-800 hover:border-gray-300 dark:hover:border-gray-600 transition-all ${
+                              showNationalityError ? "border-red-400" : "border-gray-200 dark:border-gray-700"
                             }`}
                           >
-                            <span className="flex items-center gap-1.5 text-sm font-medium text-gray-900 truncate">
+                            <span className="flex items-center gap-1.5 text-sm font-medium text-gray-900 dark:text-white truncate">
                               <Users className="w-4 h-4 text-primary flex-shrink-0" />
                               {totalPassengers} Pax
                               {nationalityFlag(watch("nationality"))
diff --git a/apps/edr-passenger-web/portal/src/components/SearchWidget.tsx b/apps/edr-passenger-web/portal/src/components/SearchWidget.tsx
index a47d4bcc7..eb8a12f86 100644
--- a/apps/edr-passenger-web/portal/src/components/SearchWidget.tsx
+++ b/apps/edr-passenger-web/portal/src/components/SearchWidget.tsx
@@ -78,35 +78,36 @@ function CustomSelect({
         type="button"
         disabled={disabled}
         onClick={() => !disabled && setOpen((o) => !o)}
-        className={`w-full ${icon ? 'pl-11' : 'pl-4'} pr-10 py-3.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base text-left flex items-center gap-2
-          bg-white dark:bg-gray-800 text-gray-900 dark:text-white
-          disabled:opacity-60 disabled:cursor-not-allowed
-          ${error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600'}
-          transition-colors`}
+        className={[
+          'w-full pr-10 py-3.5 border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent text-base text-left flex items-center gap-2 transition-colors',
+          'bg-white dark:bg-gray-800 text-gray-900 dark:text-white',
+          'disabled:opacity-60 disabled:cursor-not-allowed',
+          icon ? 'pl-11' : 'pl-4',
+          error ? 'border-red-500' : 'border-gray-300 dark:border-gray-600',
+        ].join(' ')}
       >
         {icon && <span className="absolute left-3 top-1/2 -translate-y-1/2">{icon}</span>}
         <span className={selected ? 'text-gray-900 dark:text-white' : 'text-gray-400 dark:text-gray-500'}>
           {selected ? selected.label : placeholder}
         </span>
-        <ChevronDown className={`absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-400 transition-transform ${open ? 'rotate-180' : ''}`} />
+        <ChevronDown className={`absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 dark:text-gray-500 transition-transform ${open ? 'rotate-180' : ''}`} />
       </button>
 
       {open && (
         <>
           <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
-          <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl z-50 max-h-60 overflow-y-auto">
+          <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl z-50 max-h-80 overflow-y-auto text-gray-900 dark:text-white">
             {options.map((opt) => (
               <button
                 key={opt.value}
                 type="button"
                 disabled={opt.disabled}
                 onClick={() => { onChange(opt.value); setOpen(false); }}
-                className={`w-full text-left px-4 py-3 text-sm transition-colors
-                  ${opt.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer'}
-                  ${opt.value === value
-                    ? 'text-primary font-semibold bg-primary/5 dark:bg-primary/10'
-                    : 'text-gray-900 dark:text-white'
-                  }`}
+                className={[
+                  'w-full text-left px-4 py-3 text-sm transition-colors',
+                  opt.disabled ? 'opacity-40 cursor-not-allowed' : 'hover:bg-gray-50 dark:hover:bg-gray-800 cursor-pointer',
+                  opt.value === value ? 'text-primary font-semibold bg-primary/5 dark:bg-primary/10' : 'text-gray-900 dark:text-white',
+                ].join(' ')}
               >
                 {opt.label}
               </button>
@@ -237,7 +238,7 @@ export function SearchWidget({ fullWidth = false, onSearch }: SearchWidgetProps)
               <button
                 type="button"
                 onClick={() => setIsPassengerOpen(!isPassengerOpen)}
-                className="w-full px-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-base bg-white dark:bg-gray-800 text-gray-900 dark:text-white flex items-center justify-between hover:border-primary transition-colors"
+                className="w-full px-4 py-3.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary text-base bg-white dark:bg-gray-800 text-gray-900 dark:text-white flex items-center justify-between hover:border-primary transition-colors dark:[color-scheme:dark]"
               >
                 <span className="flex items-center gap-2">
                   <Users className="w-4 h-4 text-primary" />
@@ -249,7 +250,7 @@ export function SearchWidget({ fullWidth = false, onSearch }: SearchWidgetProps)
               {isPassengerOpen && (
                 <>
                   <div className="fixed inset-0 z-40" onClick={() => setIsPassengerOpen(false)} />
-                  <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl z-50 p-4 space-y-4">
+                  <div className="absolute top-full left-0 right-0 mt-1 bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl z-50 p-4 space-y-4 text-gray-900 dark:text-white">
                     <div className="flex items-center justify-between">
                       <div>
                         <div className="text-sm font-medium text-gray-900 dark:text-white">Adults</div>