diff --git a/app/sites/[id]/replays/page.tsx b/app/sites/[id]/replays/page.tsx
index 79fc82d..7fdfd10 100644
--- a/app/sites/[id]/replays/page.tsx
+++ b/app/sites/[id]/replays/page.tsx
@@ -7,6 +7,7 @@ import { listReplays, formatDuration, type ReplayListItem, type ReplayFilters }
 import { toast } from 'sonner'
 import { LockClosedIcon } from '@radix-ui/react-icons'
 import LoadingOverlay from '@/components/LoadingOverlay'
+import Select from '@/components/ui/Select'
 
 function formatDate(dateString: string) {
   const date = new Date(dateString)
@@ -128,28 +129,28 @@ export default function ReplaysPage() {
 
       {/* Filters */}
       <div className="mb-6 flex gap-4 flex-wrap">
-        <select
-          className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-800 text-sm"
-          value={filters.device_type || ''}
-          onChange={(e) => setFilters(prev => ({ ...prev, device_type: e.target.value || undefined, offset: 0 }))}
-        >
-          <option value="">All Devices</option>
-          <option value="desktop">Desktop</option>
-          <option value="mobile">Mobile</option>
-          <option value="tablet">Tablet</option>
-        </select>
+        <Select
+          value={filters.device_type ?? ''}
+          onChange={(v) => setFilters((prev) => ({ ...prev, device_type: v || undefined, offset: 0 }))}
+          options={[
+            { value: '', label: 'All Devices' },
+            { value: 'desktop', label: 'Desktop' },
+            { value: 'mobile', label: 'Mobile' },
+            { value: 'tablet', label: 'Tablet' },
+          ]}
+        />
 
-        <select
-          className="px-3 py-2 border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-800 text-sm"
-          value={filters.min_duration || ''}
-          onChange={(e) => setFilters(prev => ({ ...prev, min_duration: e.target.value ? parseInt(e.target.value) : undefined, offset: 0 }))}
-        >
-          <option value="">Any Duration</option>
-          <option value="5000">5s+</option>
-          <option value="30000">30s+</option>
-          <option value="60000">1m+</option>
-          <option value="300000">5m+</option>
-        </select>
+        <Select
+          value={filters.min_duration ? String(filters.min_duration) : ''}
+          onChange={(v) => setFilters((prev) => ({ ...prev, min_duration: v ? parseInt(v, 10) : undefined, offset: 0 }))}
+          options={[
+            { value: '', label: 'Any Duration' },
+            { value: '5000', label: '5s+' },
+            { value: '30000', label: '30s+' },
+            { value: '60000', label: '1m+' },
+            { value: '300000', label: '5m+' },
+          ]}
+        />
       </div>
 
       {/* Replays List */}
diff --git a/app/sites/[id]/settings/page.tsx b/app/sites/[id]/settings/page.tsx
index 607b612..8222a0e 100644
--- a/app/sites/[id]/settings/page.tsx
+++ b/app/sites/[id]/settings/page.tsx
@@ -8,6 +8,7 @@ import { toast } from 'sonner'
 import LoadingOverlay from '@/components/LoadingOverlay'
 import VerificationModal from '@/components/sites/VerificationModal'
 import PasswordInput from '@/components/PasswordInput'
+import Select from '@/components/ui/Select'
 import { APP_URL, API_URL } from '@/lib/api/client'
 import { motion, AnimatePresence } from 'framer-motion'
 import {
@@ -305,26 +306,15 @@ export default function SiteSettingsPage() {
                       <label htmlFor="timezone" className="block text-sm font-medium text-neutral-700 dark:text-neutral-300">
                         Timezone
                       </label>
-                      <div className="relative">
-                        <select
-                          id="timezone"
-                          value={formData.timezone}
-                          onChange={(e) => setFormData({ ...formData, timezone: e.target.value })}
-                          className="w-full px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-neutral-50/50 dark:bg-neutral-900/50 focus:bg-white dark:focus:bg-neutral-900 
-                          focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 outline-none transition-all duration-200 dark:text-white appearance-none"
-                        >
-                          {TIMEZONES.map((tz) => (
-                            <option key={tz} value={tz}>
-                              {tz}
-                            </option>
-                          ))}
-                        </select>
-                        <div className="absolute inset-y-0 right-0 flex items-center px-4 pointer-events-none">
-                          <svg className="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
-                          </svg>
-                        </div>
-                      </div>
+                      <Select
+                        id="timezone"
+                        value={formData.timezone}
+                        onChange={(v) => setFormData({ ...formData, timezone: v })}
+                        options={TIMEZONES.map((tz) => ({ value: tz, label: tz }))}
+                        variant="input"
+                        fullWidth
+                        align="left"
+                      />
                     </div>
 
                     <div className="space-y-1.5">
@@ -649,22 +639,18 @@ export default function SiteSettingsPage() {
                             Control location tracking granularity
                           </p>
                         </div>
-                        <div className="relative">
-                          <select
-                            value={formData.collect_geo_data}
-                            onChange={(e) => setFormData({ ...formData, collect_geo_data: e.target.value as GeoDataLevel })}
-                            className="px-4 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white text-sm font-medium appearance-none pr-10 focus:outline-none focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange"
-                          >
-                            <option value="full">Full (country, region, city)</option>
-                            <option value="country">Country only</option>
-                            <option value="none">None</option>
-                          </select>
-                          <div className="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
-                            <svg className="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
-                            </svg>
-                          </div>
-                        </div>
+                        <Select
+                          value={formData.collect_geo_data}
+                          onChange={(v) => setFormData({ ...formData, collect_geo_data: v as GeoDataLevel })}
+                          options={[
+                            { value: 'full', label: 'Full (country, region, city)' },
+                            { value: 'country', label: 'Country only' },
+                            { value: 'none', label: 'None' },
+                          ]}
+                          variant="input"
+                          align="right"
+                          className="min-w-[200px]"
+                        />
                       </div>
                     </div>
 
@@ -850,24 +836,20 @@ export default function SiteSettingsPage() {
                                 How long to keep recordings
                               </p>
                             </div>
-                            <div className="relative">
-                              <select
-                                value={formData.replay_retention_days}
-                                onChange={(e) => setFormData({ ...formData, replay_retention_days: parseInt(e.target.value) })}
-                                className="px-4 py-2 border border-neutral-200 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-800 text-neutral-900 dark:text-white text-sm font-medium appearance-none pr-10 focus:outline-none focus:ring-2 focus:ring-brand-orange/20 focus:border-brand-orange"
-                              >
-                                <option value={7}>7 days</option>
-                                <option value={14}>14 days</option>
-                                <option value={30}>30 days</option>
-                                <option value={60}>60 days</option>
-                                <option value={90}>90 days</option>
-                              </select>
-                              <div className="absolute inset-y-0 right-0 flex items-center px-3 pointer-events-none">
-                                <svg className="w-4 h-4 text-neutral-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M19 9l-7 7-7-7" />
-                                </svg>
-                              </div>
-                            </div>
+                            <Select
+                              value={String(formData.replay_retention_days)}
+                              onChange={(v) => setFormData({ ...formData, replay_retention_days: parseInt(v, 10) })}
+                              options={[
+                                { value: '7', label: '7 days' },
+                                { value: '14', label: '14 days' },
+                                { value: '30', label: '30 days' },
+                                { value: '60', label: '60 days' },
+                                { value: '90', label: '90 days' },
+                              ]}
+                              variant="input"
+                              align="right"
+                              className="min-w-[120px]"
+                            />
                           </div>
                         </div>
 
diff --git a/components/ui/Select.tsx b/components/ui/Select.tsx
index 87113a2..18bb326 100644
--- a/components/ui/Select.tsx
+++ b/components/ui/Select.tsx
@@ -12,9 +12,29 @@ interface SelectProps {
   onChange: (value: string) => void
   options: Option[]
   className?: string
+  /** Form-field style (input-like). Default: toolbar style (btn-secondary). */
+  variant?: 'default' | 'input'
+  /** Shown when value is empty or does not match any option. */
+  placeholder?: string
+  /** Full-width trigger and panel. Use in form layouts. */
+  fullWidth?: boolean
+  /** Id for the trigger (e.g. for label htmlFor). */
+  id?: string
+  /** Alignment of the dropdown panel. */
+  align?: 'left' | 'right'
 }
 
-export default function Select({ value, onChange, options, className = '' }: SelectProps) {
+export default function Select({
+  value,
+  onChange,
+  options,
+  className = '',
+  variant = 'default',
+  placeholder,
+  fullWidth = false,
+  id,
+  align = 'right',
+}: SelectProps) {
   const [isOpen, setIsOpen] = useState(false)
   const ref = useRef<HTMLDivElement>(null)
 
@@ -28,18 +48,35 @@ export default function Select({ value, onChange, options, className = '' }: Sel
     return () => document.removeEventListener('mousedown', handleClickOutside)
   }, [])
 
-  const selectedOption = options.find(o => o.value === value) || options.find(o => o.value === 'custom')
+  const selectedOption = options.find((o) => o.value === value)
+  const displayLabel = selectedOption?.label ?? placeholder ?? value ?? ''
+
+  const triggerBase =
+    variant === 'input'
+      ? 'px-4 py-2 border border-neutral-200 dark:border-neutral-800 rounded-xl bg-neutral-50/50 dark:bg-neutral-900/50 text-neutral-900 dark:text-white text-left text-sm ' +
+        'focus:outline-none focus:border-brand-orange focus:ring-4 focus:ring-brand-orange/10 transition-all duration-200 ' +
+        (isOpen ? 'ring-4 ring-brand-orange/10 border-brand-orange' : '')
+      : 'btn-secondary min-w-[140px]'
+
+  const triggerLayout = fullWidth ? 'w-full ' : ''
+  const alignClass = align === 'left' ? 'left-0' : 'right-0'
+  const panelMinW = fullWidth ? 'w-full' : 'min-w-[140px] w-full'
 
   return (
-    <div className={`relative ${className}`} ref={ref}>
+    <div className={`relative ${fullWidth ? 'w-full' : ''} ${className}`} ref={ref}>
       <button
         type="button"
+        id={id}
         onClick={() => setIsOpen(!isOpen)}
-        className="btn-secondary min-w-[140px] flex items-center justify-between gap-2"
+        className={`${triggerLayout}${triggerBase} flex items-center justify-between gap-2`}
+        aria-haspopup="listbox"
+        aria-expanded={isOpen}
       >
-        <span>{selectedOption?.label || value}</span>
+        <span className={!selectedOption && placeholder ? 'text-neutral-500 dark:text-neutral-400' : ''}>
+          {displayLabel}
+        </span>
         <svg
-          className={`w-4 h-4 text-neutral-500 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
+          className={`w-4 h-4 text-neutral-500 flex-shrink-0 transition-transform duration-200 ${isOpen ? 'rotate-180' : ''}`}
           fill="none"
           viewBox="0 0 24 24"
           stroke="currentColor"
@@ -49,24 +86,29 @@ export default function Select({ value, onChange, options, className = '' }: Sel
       </button>
 
       {isOpen && (
-        <div className="absolute right-0 mt-2 w-full min-w-[140px] bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl shadow-lg z-50 overflow-hidden py-1">
+        <div
+          className={`absolute ${alignClass} mt-2 ${panelMinW} bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 rounded-xl shadow-lg z-50 overflow-hidden py-1 max-h-60 overflow-y-auto`}
+          role="listbox"
+        >
           {options.map((option) => (
             <button
               key={option.value}
+              role="option"
+              aria-selected={value === option.value}
               onClick={() => {
                 onChange(option.value)
                 setIsOpen(false)
               }}
-              className={`w-full text-left px-4 py-2.5 text-sm transition-colors flex items-center justify-between
-                ${value === option.value 
-                  ? 'bg-neutral-50 dark:bg-neutral-800 text-brand-orange font-medium' 
+              className={`w-full text-left px-4 py-2.5 text-sm transition-colors duration-200 flex items-center justify-between
+                ${value === option.value
+                  ? 'bg-neutral-50 dark:bg-neutral-800 text-brand-orange font-medium'
                   : 'text-neutral-700 dark:text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-800'
                 }
               `}
             >
               {option.label}
               {value === option.value && (
-                <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                 </svg>
               )}