diff --git a/package.json b/package.json
index d4d0b3b..96fe87a 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "react-i18next": "^17.0.2",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^7.13.0",
+    "react-select": "^5.10.2",
     "remark-gfm": "^4.0.1",
     "typescript": "^5.9.3",
     "zustand": "^5.0.11"
diff --git a/src/RailRound.jsx b/src/RailRound.jsx
index 09b7571..96a2c57 100644
--- a/src/RailRound.jsx
+++ b/src/RailRound.jsx
@@ -17,6 +17,7 @@ import {
     LogOut, User, Github, Star, Folder, Globe, Lock, Eye, EyeOff
 } from 'lucide-react';
 
+import Select from 'react-select';
 import { LoginModal } from './components/LoginModal';
 import { DragProvider, DropZone } from './components/DragContext';
 import Chest from './components/Chest';
@@ -33,6 +34,38 @@ import { useStore } from './store';
 import toast from 'react-hot-toast';
 import { ESLint } from 'eslint';
 
+
+const getSelectStyles = (isSmall = false) => ({
+    control: (base) => ({
+        ...base,
+        minHeight: isSmall ? '28px' : '36px',
+        fontSize: isSmall ? '11px' : '14px',
+        borderRadius: '0.25rem',
+        borderColor: '#e5e7eb',
+        boxShadow: 'none',
+        '&:hover': {
+            borderColor: '#d1d5db'
+        }
+    }),
+    dropdownIndicator: (base) => ({
+        ...base,
+        padding: isSmall ? '2px' : '4px'
+    }),
+    menu: (base) => ({
+        ...base,
+        zIndex: 50,
+        fontSize: isSmall ? '11px' : '14px',
+    }),
+    option: (base) => ({
+        ...base,
+        padding: isSmall ? '4px 8px' : '8px 12px'
+    }),
+    valueContainer: (base) => ({
+        ...base,
+        padding: isSmall ? '0 4px' : '2px 8px'
+    })
+});
+
 const CURRENT_VERSION = meta["currentVersion"];
 const LAST_MODIFIED = manifest.lastModified
 const LAST_UPDATED = meta["lastUpdated"];
@@ -788,7 +821,15 @@ const TripEditor = ({
                                                         });
                                                     }
                                                 }}>
-                                                    <select className="w-full p-2 border rounded text-xs bg-white" value={segment.fromId} onChange={e => updateSegment(idx, 'fromId', e.target.value)}><option value="">乘车...</option>{segment.lineKey && railwayData[segment.lineKey]?.stations.map(s => <option key={s.id} value={s.id}>{s.name_ja}</option>)}</select>
+                                                    <Select
+        className="w-full text-xs"
+        value={segment.fromId ? { value: segment.fromId, label: railwayData[segment.lineKey || '']?.stations.find(s => s.id === segment.fromId)?.name_ja || segment.fromId } : null}
+        onChange={(option) => updateSegment(idx, 'fromId', option?.value || '')}
+        options={segment.lineKey ? railwayData[segment.lineKey]?.stations.map(s => ({ value: s.id, label: s.name_ja })) : []}
+        placeholder="乘车..."
+        isClearable
+        styles={getSelectStyles()}
+    />
                                                 </DropZone>
 
                                                 <button
@@ -834,7 +875,15 @@ const TripEditor = ({
                                                         });
                                                     }
                                                 }}>
-                                                    <select className="w-full p-2 border rounded bg-white text-xs" value={segment.toId} onChange={e => updateSegment(idx, 'toId', e.target.value)}><option value="">下车...</option>{segment.lineKey && railwayData[segment.lineKey]?.stations.map(s => <option key={s.id} value={s.id}>{s.name_ja}</option>)}</select>
+                                                    <Select
+        className="w-full text-xs"
+        value={segment.toId ? { value: segment.toId, label: railwayData[segment.lineKey || '']?.stations.find(s => s.id === segment.toId)?.name_ja || segment.toId } : null}
+        onChange={(option) => updateSegment(idx, 'toId', option?.value || '')}
+        options={segment.lineKey ? railwayData[segment.lineKey]?.stations.map(s => ({ value: s.id, label: s.name_ja })) : []}
+        placeholder="下车..."
+        isClearable
+        styles={getSelectStyles()}
+    />
                                                 </DropZone>
                                             </div>
                                         </div>
@@ -853,7 +902,18 @@ const TripEditor = ({
                                 <label className="block text-xs font-bold text-slate-500 mb-1">出发地</label>
                                 <div className="grid grid-cols-2 gap-2">
                                     <button onClick={() => openSelector('autoStart')} className="p-2 rounded border text-sm text-left bg-white text-gray-700 truncate flex items-center gap-1">{autoForm.startLine ? <span>{autoForm.startLine}</span> : <span className="text-gray-400">选择线路...</span>}</button>
-                                    <select className="p-2 rounded border text-sm" disabled={!autoForm.startLine} value={autoForm.startStation} onChange={e => setAutoForm({ ...autoForm, startStation: e.target.value })}><option value="">车站...</option>{autoForm.startLine && railwayData[autoForm.startLine].stations.map(s => <option key={s.id} value={s.id}>{s.name_ja}</option>)}</select>
+                                    <div className="flex-1">
+        <Select
+            className="text-sm"
+            isDisabled={!autoForm.startLine}
+            value={autoForm.startStation ? { value: autoForm.startStation, label: railwayData[autoForm.startLine || '']?.stations.find(s => s.id === autoForm.startStation)?.name_ja || autoForm.startStation } : null}
+            onChange={(option) => setAutoForm({ ...autoForm, startStation: option?.value || '' })}
+            options={autoForm.startLine ? railwayData[autoForm.startLine]?.stations.map(s => ({ value: s.id, label: s.name_ja })) : []}
+            placeholder="车站..."
+            isClearable
+            styles={getSelectStyles()}
+        />
+    </div>
                                 </div>
                             </div>
                             <div className="flex justify-center text-blue-300"><ArrowDown size={20} /></div>
@@ -861,7 +921,18 @@ const TripEditor = ({
                                 <label className="block text-xs font-bold text-slate-500 mb-1">目的地</label>
                                 <div className="grid grid-cols-2 gap-2">
                                     <button onClick={() => openSelector('autoEnd')} className="p-2 rounded border text-sm text-left bg-white text-gray-700 truncate flex items-center gap-1">{autoForm.endLine ? <span>{autoForm.endLine}</span> : <span className="text-gray-400">选择线路...</span>}</button>
-                                    <select className="p-2 rounded border text-sm" disabled={!autoForm.endLine} value={autoForm.endStation} onChange={e => setAutoForm({ ...autoForm, endStation: e.target.value })}><option value="">车站...</option>{autoForm.endLine && railwayData[autoForm.endLine].stations.map(s => <option key={s.id} value={s.id}>{s.name_ja}</option>)}</select>
+                                    <div className="flex-1">
+        <Select
+            className="text-sm"
+            isDisabled={!autoForm.endLine}
+            value={autoForm.endStation ? { value: autoForm.endStation, label: railwayData[autoForm.endLine || '']?.stations.find(s => s.id === autoForm.endStation)?.name_ja || autoForm.endStation } : null}
+            onChange={(option) => setAutoForm({ ...autoForm, endStation: option?.value || '' })}
+            options={autoForm.endLine ? railwayData[autoForm.endLine]?.stations.map(s => ({ value: s.id, label: s.name_ja })) : []}
+            placeholder="车站..."
+            isClearable
+            styles={getSelectStyles()}
+        />
+    </div>
                                 </div>
                             </div>
                         </div>
@@ -1058,16 +1129,38 @@ const GithubCardModal = ({ isOpen, onClose, user, folders, badgeSettings, onUpda
                     <div className="space-y-4">
                         <div>
                             <label className="block text-xs font-bold text-gray-500 mb-1">Source</label>
-                            <select
-                                className="w-full p-2 border rounded-lg text-sm"
-                                value={source}
-                                onChange={e => setSource(e.target.value)}
-                            >
-                                <option value="global">Global (All Trips)</option>
-                                {publicFolders.map(f => (
-                                    <option key={f.id} value={f.id}>Folder: {f.name}</option>
-                                ))}
-                            </select>
+                            <Select
+                                className="text-sm"
+                                value={{
+                                    value: source,
+                                    label: source === 'global' ? 'Global (All Trips)' : `Folder: ${publicFolders.find(f => f.id === source)?.name || ''}`
+                                }}
+                                onChange={(option) => setSource(option?.value || 'global')}
+                                options={[
+                                    { value: 'global', label: 'Global (All Trips)' },
+                                    ...publicFolders.map(f => ({ value: f.id, label: `Folder: ${f.name}` }))
+                                ]}
+                                isSearchable={false}
+                                styles={{
+                                    control: (base) => ({
+                                        ...base,
+                                        borderRadius: '0.5rem',
+                                        borderColor: '#e5e7eb',
+                                        padding: '0.1rem',
+                                        minHeight: '42px',
+                                        boxShadow: 'none',
+                                        '&:hover': {
+                                            borderColor: '#d1d5db'
+                                        }
+                                    }),
+                                    menu: (base) => ({
+                                        ...base,
+                                        borderRadius: '0.5rem',
+                                        overflow: 'hidden',
+                                        zIndex: 100
+                                    })
+                                }}
+                            />
                         </div>
 
                         <div className="bg-slate-100 p-4 rounded-lg flex justify-center overflow-hidden min-h-[100px] items-center">
diff --git a/src/components/modals/GithubCardModal.tsx b/src/components/modals/GithubCardModal.tsx
index 39e60cd..8aa65fc 100644
--- a/src/components/modals/GithubCardModal.tsx
+++ b/src/components/modals/GithubCardModal.tsx
@@ -1,5 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { X, Github, Eye, EyeOff, Lock, Loader2 } from 'lucide-react';
+import Select from 'react-select';
 import { useStore } from '../../store';
 import { api } from '../../services/api';
 import { useShallow } from 'zustand/react/shallow';
@@ -96,16 +97,38 @@ export const GithubCardModal: React.FC = () => {
                     <div className="space-y-4">
                         <div>
                             <label className="block text-xs font-bold text-gray-500 mb-1">Source</label>
-                            <select
-                                className="w-full p-2 border rounded-lg text-sm"
-                                value={source}
-                                onChange={e => setSource(e.target.value)}
-                            >
-                                <option value="global">Global (All Trips)</option>
-                                {publicFolders.map(f => (
-                                    <option key={f.id} value={f.id}>Folder: {f.name}</option>
-                                ))}
-                            </select>
+                            <Select
+                                className="text-sm"
+                                value={{
+                                    value: source,
+                                    label: source === 'global' ? 'Global (All Trips)' : `Folder: ${publicFolders.find(f => f.id === source)?.name || ''}`
+                                }}
+                                onChange={(option) => setSource(option?.value || 'global')}
+                                options={[
+                                    { value: 'global', label: 'Global (All Trips)' },
+                                    ...publicFolders.map(f => ({ value: f.id, label: `Folder: ${f.name}` }))
+                                ]}
+                                isSearchable={false}
+                                styles={{
+                                    control: (base) => ({
+                                        ...base,
+                                        borderRadius: '0.5rem',
+                                        borderColor: '#e5e7eb',
+                                        padding: '0.1rem',
+                                        minHeight: '42px',
+                                        boxShadow: 'none',
+                                        '&:hover': {
+                                            borderColor: '#d1d5db'
+                                        }
+                                    }),
+                                    menu: (base) => ({
+                                        ...base,
+                                        borderRadius: '0.5rem',
+                                        overflow: 'hidden',
+                                        zIndex: 100
+                                    })
+                                }}
+                            />
                         </div>
 
                         <div className="bg-slate-100 p-4 rounded-lg flex justify-center overflow-hidden min-h-[100px] items-center">
diff --git a/src/components/modals/TripEditor.tsx b/src/components/modals/TripEditor.tsx
index 0e84954..62ddcbe 100644
--- a/src/components/modals/TripEditor.tsx
+++ b/src/components/modals/TripEditor.tsx
@@ -7,6 +7,38 @@ import { GlobalSearchModal } from './GlobalSearchModal';
 import { isCompanyCompatible, getTransferableLines, findRoute, computeLoopVia, getLandmarks } from '../../core/railwayRouting'; // Will need to ensure these are typed
 import { useShallow } from 'zustand/react/shallow';
 import { useUserData } from '../../hooks/useUserData';
+import Select from 'react-select';
+
+const getSelectStyles = (isSmall = false) => ({
+    control: (base: any) => ({
+        ...base,
+        minHeight: isSmall ? '28px' : '36px',
+        fontSize: isSmall ? '11px' : '14px',
+        borderRadius: '0.25rem',
+        borderColor: '#e5e7eb',
+        boxShadow: 'none',
+        '&:hover': {
+            borderColor: '#d1d5db'
+        }
+    }),
+    dropdownIndicator: (base: any) => ({
+        ...base,
+        padding: isSmall ? '2px' : '4px'
+    }),
+    menu: (base: any) => ({
+        ...base,
+        zIndex: 50,
+        fontSize: isSmall ? '11px' : '14px',
+    }),
+    option: (base: any) => ({
+        ...base,
+        padding: isSmall ? '4px 8px' : '8px 12px'
+    }),
+    valueContainer: (base: any) => ({
+        ...base,
+        padding: isSmall ? '0 4px' : '2px 8px'
+    })
+});
 
 export const TripEditor: React.FC = () => {
     const {
@@ -434,10 +466,15 @@ export const TripEditor: React.FC = () => {
                                                         setForm({ segments: newSegs });
                                                     }
                                                 }}>
-                                                    <select className="w-full p-2 border rounded text-xs bg-white" value={segment.fromId} onChange={e => updateSegment(idx, 'fromId', e.target.value)}>
-                                                        <option value="">{t('tripEdit.board', '乘车...')}</option>
-                                                        {segment.lineKey && railwayData[segment.lineKey]?.stations.map(s => <option key={s.id} value={s.id}>{s.name_ja}</option>)}
-                                                    </select>
+                                                    <Select
+        className="w-full text-xs"
+        value={segment.fromId ? { value: segment.fromId, label: railwayData[segment.lineKey || '']?.stations.find(s => s.id === segment.fromId)?.name_ja || segment.fromId } : null}
+        onChange={(option: any) => updateSegment(idx, 'fromId', option?.value || '')}
+        options={segment.lineKey ? railwayData[segment.lineKey]?.stations.map(s => ({ value: s.id, label: s.name_ja })) : []}
+        placeholder={t('tripEdit.board', '乘车...')}
+        isClearable
+        styles={getSelectStyles()}
+    />
                                                 </DropZone>
 
                                                 <button
@@ -464,10 +501,15 @@ export const TripEditor: React.FC = () => {
                                                         setForm({ segments: newSegs });
                                                     }
                                                 }}>
-                                                    <select className="w-full p-2 border rounded bg-white text-xs" value={segment.toId} onChange={e => updateSegment(idx, 'toId', e.target.value)}>
-                                                        <option value="">{t('tripEdit.alight', '下车...')}</option>
-                                                        {segment.lineKey && railwayData[segment.lineKey]?.stations.map(s => <option key={s.id} value={s.id}>{s.name_ja}</option>)}
-                                                    </select>
+                                                    <Select
+        className="w-full text-xs"
+        value={segment.toId ? { value: segment.toId, label: railwayData[segment.lineKey || '']?.stations.find(s => s.id === segment.toId)?.name_ja || segment.toId } : null}
+        onChange={(option: any) => updateSegment(idx, 'toId', option?.value || '')}
+        options={segment.lineKey ? railwayData[segment.lineKey]?.stations.map(s => ({ value: s.id, label: s.name_ja })) : []}
+        placeholder={t('tripEdit.alight', '下车...')}
+        isClearable
+        styles={getSelectStyles()}
+    />
                                                 </DropZone>
                                             </div>
 
@@ -476,15 +518,23 @@ export const TripEditor: React.FC = () => {
                                                 <div className="pl-2 mt-2 space-y-1">
                                                     <div className="flex items-center gap-2">
                                                         <span className="text-[11px] text-gray-400">环线经由</span>
-                                                        <select
-                                                            className="text-[11px] border rounded px-1.5 py-0.5 bg-white text-gray-600 focus:ring-1 focus:ring-blue-500 outline-none"
-                                                            value={segment.loopVia || 'auto'}
-                                                            onChange={e => updateSegment(idx, 'loopVia', e.target.value)}
-                                                        >
-                                                            <option value="auto">自动 (Auto)</option>
-                                                            <option value="up">内回り (Up)</option>
-                                                            <option value="down">外回り (Down)</option>
-                                                        </select>
+                                                        <div className="w-32">
+        <Select
+            className="text-[11px]"
+            value={{
+                value: segment.loopVia || 'auto',
+                label: (segment.loopVia || 'auto') === 'auto' ? '自动 (Auto)' : (segment.loopVia === 'up' ? '内回り (Up)' : '外回り (Down)')
+            }}
+            onChange={(option: any) => updateSegment(idx, 'loopVia', option?.value || 'auto')}
+            options={[
+                { value: 'auto', label: '自动 (Auto)' },
+                { value: 'up', label: '内回り (Up)' },
+                { value: 'down', label: '外回り (Down)' }
+            ]}
+            isSearchable={false}
+            styles={getSelectStyles(true)}
+        />
+    </div>
                                                     </div>
                                                     {(() => {
                                                         const line = railwayData[segment.lineKey];
@@ -528,7 +578,18 @@ export const TripEditor: React.FC = () => {
                                             <button onClick={() => openSelector('autoStart')} className="flex-1 p-2 text-sm text-left text-gray-700 truncate flex items-center gap-1 hover:bg-gray-50 border-r">{autoForm.startLine ? <span>{autoForm.startLine}</span> : <span className="text-gray-400">{t('tripEdit.selLine', '选择线路...')}</span>}</button>
                                             <button onClick={() => openSearch('autoStart')} className="p-2 bg-gray-50 hover:bg-gray-100 text-gray-500 w-10 shrink-0 flex items-center justify-center"><Search size={16} /></button>
                                         </div>
-                                        <select className="p-2 rounded border text-sm" disabled={!autoForm.startLine} value={autoForm.startStation} onChange={e => setAutoForm({ ...autoForm, startStation: e.target.value })}><option value="">{t('tripEdit.station', '车站...')}</option>{autoForm.startLine && railwayData[autoForm.startLine]?.stations.map(s => <option key={s.id} value={s.id}>{s.name_ja}</option>)}</select>
+                                        <div className="flex-1">
+        <Select
+            className="text-sm"
+            isDisabled={!autoForm.startLine}
+            value={autoForm.startStation ? { value: autoForm.startStation, label: railwayData[autoForm.startLine || '']?.stations.find(s => s.id === autoForm.startStation)?.name_ja || autoForm.startStation } : null}
+            onChange={(option: any) => setAutoForm({ ...autoForm, startStation: option?.value || '' })}
+            options={autoForm.startLine ? railwayData[autoForm.startLine]?.stations.map(s => ({ value: s.id, label: s.name_ja })) : []}
+            placeholder={t('tripEdit.station', '车站...')}
+            isClearable
+            styles={getSelectStyles()}
+        />
+    </div>
                                     </div>
                                 </div>
                                 <div className="flex justify-center text-blue-300"><ArrowDown className="animate-bounce" size={20} /></div>
@@ -539,7 +600,18 @@ export const TripEditor: React.FC = () => {
                                             <button onClick={() => openSelector('autoEnd')} className="flex-1 p-2 text-sm text-left text-gray-700 truncate flex items-center gap-1 hover:bg-gray-50 border-r">{autoForm.endLine ? <span>{autoForm.endLine}</span> : <span className="text-gray-400">{t('tripEdit.selLine', '选择线路...')}</span>}</button>
                                             <button onClick={() => openSearch('autoEnd')} className="p-2 bg-gray-50 hover:bg-gray-100 text-gray-500 w-10 shrink-0 flex items-center justify-center"><Search size={16} /></button>
                                         </div>
-                                        <select className="p-2 rounded border text-sm" disabled={!autoForm.endLine} value={autoForm.endStation} onChange={e => setAutoForm({ ...autoForm, endStation: e.target.value })}><option value="">{t('tripEdit.station', '车站...')}</option>{autoForm.endLine && railwayData[autoForm.endLine]?.stations.map(s => <option key={s.id} value={s.id}>{s.name_ja}</option>)}</select>
+                                        <div className="flex-1">
+        <Select
+            className="text-sm"
+            isDisabled={!autoForm.endLine}
+            value={autoForm.endStation ? { value: autoForm.endStation, label: railwayData[autoForm.endLine || '']?.stations.find(s => s.id === autoForm.endStation)?.name_ja || autoForm.endStation } : null}
+            onChange={(option: any) => setAutoForm({ ...autoForm, endStation: option?.value || '' })}
+            options={autoForm.endLine ? railwayData[autoForm.endLine]?.stations.map(s => ({ value: s.id, label: s.name_ja })) : []}
+            placeholder={t('tripEdit.station', '车站...')}
+            isClearable
+            styles={getSelectStyles()}
+        />
+    </div>
                                     </div>
                                 </div>
                             </div>
diff --git a/src/pages/StatsPage.tsx b/src/pages/StatsPage.tsx
index ca055e4..57ab4c9 100644
--- a/src/pages/StatsPage.tsx
+++ b/src/pages/StatsPage.tsx
@@ -6,6 +6,7 @@ import * as turf from '@turf/turf';
 import { useShallow } from 'zustand/react/shallow';
 import { useUserData } from '../hooks/useUserData';
 import { useTranslation } from 'react-i18next';
+import Select from 'react-select';
 
 const CITIES = {
     China: [ // Translations are handled below in rendering
@@ -26,7 +27,54 @@ const CITIES = {
     ]
 };
 
+
+const getSelectStyles = () => ({
+    control: (base: any) => ({
+        ...base,
+        backgroundColor: 'transparent',
+        border: 'none',
+        boxShadow: 'none',
+        minHeight: 'auto',
+        cursor: 'pointer',
+    }),
+    valueContainer: (base: any) => ({
+        ...base,
+        padding: '0',
+    }),
+    dropdownIndicator: (base: any) => ({
+        ...base,
+        padding: '0',
+        paddingLeft: '8px'
+    }),
+    indicatorSeparator: () => ({
+        display: 'none',
+    }),
+    singleValue: (base: any) => ({
+        ...base,
+        color: '#374151',
+        fontWeight: 'bold',
+        fontSize: '0.875rem'
+    }),
+    menu: (base: any) => ({
+        ...base,
+        fontSize: '0.875rem',
+        zIndex: 50,
+        minWidth: '150px',
+        right: 0
+    }),
+    option: (base: any, state: any) => ({
+        ...base,
+        cursor: 'pointer',
+        backgroundColor: state.isFocused ? '#f3f4f6' : 'white',
+        color: '#374151',
+        '&:active': {
+            backgroundColor: '#e5e7eb'
+        }
+    })
+});
+
 export const StatsPage: React.FC = () => {
+
     const {
         trips, railwayData, geoData, user, userProfile, segmentGeometries, companyDB, badgeSettings, setBadgeSettings, pins, folders
     } = useStore(useShallow(state => ({
@@ -179,20 +227,26 @@ export const StatsPage: React.FC = () => {
                             <Globe size={16} /> {t('statsPage.language', 'UI 语言 / Language')}
                         </div>
                         <div className="flex items-center gap-2 bg-gray-50 p-2 rounded-lg border border-gray-200">
-                            <select
-                                className="bg-transparent text-gray-700 text-sm font-bold w-full outline-none cursor-pointer"
-                                value={badgeSettings.language || 'zh-CN'}
-                                onChange={(e) => {
-                                    const newSettings = { ...badgeSettings, language: e.target.value };
+                            <Select
+                                value={{
+                                    value: badgeSettings.language || 'zh-CN',
+                                    label: (badgeSettings.language || 'zh-CN') === 'zh-CN' ? '简体中文' : ((badgeSettings.language === 'en') ? 'English' : ((badgeSettings.language === 'zh-TW') ? '繁體中文' : '日本語'))
+                                }}
+                                onChange={(option: any) => {
+                                    const newSettings = { ...badgeSettings, language: option.value };
                                     setBadgeSettings(newSettings);
                                     if (user) saveData(user.token, trips, pins, folders, newSettings).catch(console.error);
                                 }}
-                            >
-                                <option value="zh-CN">简体中文</option>
-                                <option value="en">English</option>
-                                <option value="ja-JP">日本語</option>
-                                <option value="zh-TW">繁體中文</option>
-                            </select>
+                                options={[
+                                    { value: 'zh-CN', label: '简体中文' },
+                                    { value: 'en', label: 'English' },
+                                    { value: 'ja-JP', label: '日本語' },
+                                    { value: 'zh-TW', label: '繁體中文' }
+                                ]}
+                                isSearchable={false}
+                                styles={getSelectStyles()}
+                                className="w-full"
+                            />
                         </div>
                     </div>
 
@@ -226,24 +280,27 @@ export const StatsPage: React.FC = () => {
                     {(!badgeSettings.defaultMapCenter || badgeSettings.defaultMapCenter.mode === 'fixed') && (
                         <div className="flex items-center gap-2 bg-gray-50 p-2 rounded-lg border border-gray-200">
                             <MapPin size={14} className="text-emerald-500 shrink-0 ml-1" />
-                            <select
-                                className="bg-transparent text-gray-700 text-sm font-bold w-full outline-none cursor-pointer"
-                                value={`${badgeSettings.defaultMapCenter?.lat || 35.6812},${badgeSettings.defaultMapCenter?.lng || 139.7671}`}
-                                onChange={(e) => {
-                                    const [lat, lng] = e.target.value.split(',').map(Number);
+                            <Select
+                                value={{
+                                    value: `${badgeSettings.defaultMapCenter?.lat || 35.6812},${badgeSettings.defaultMapCenter?.lng || 139.7671}`,
+                                    label: Object.values(CITIES).flat().find(c => Math.abs(c.lat - (badgeSettings.defaultMapCenter?.lat || 35.6812)) < 0.001 && Math.abs(c.lng - (badgeSettings.defaultMapCenter?.lng || 139.7671)) < 0.001)?.name || 'Custom'
+                                }}
+                                onChange={(option: any) => {
+                                    const [lat, lng] = option.value.split(',').map(Number);
                                     const newSettings = { ...badgeSettings, defaultMapCenter: { mode: 'fixed' as const, lat, lng } };
                                     setBadgeSettings(newSettings);
                                     if (user) saveData(user.token, trips, pins, folders, newSettings).catch(console.error);
                                 }}
-                            >
-                                {Object.entries(CITIES).map(([country, cities]) => (
-                                    <optgroup key={country} label={country === 'China' ? t('setup.china', '中国') : t('setup.japan', '日本')}>
-                                        {cities.map(city => (
-                                            <option key={city.name} value={`${city.lat},${city.lng}`}>{city.name}</option>
-                                        ))}
-                                    </optgroup>
-                                ))}
-                            </select>
+                                options={Object.entries(CITIES).map(([country, cities]) => ({
+                                    label: country === 'China' ? t('setup.china', '中国') : t('setup.japan', '日本'),
+                                    options: cities.map(city => ({
+                                        value: `${city.lat},${city.lng}`,
+                                        label: city.name
+                                    }))
+                                }))}
+                                styles={getSelectStyles()}
+                                className="w-full"
+                            />
                         </div>
                     )}
                 </div>