diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 35345ce..35cdf51 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -520,7 +520,18 @@ export default function AdminPage() {
               <option value="event">Event</option>
             </select>
           </label>
-          <Text label="Color" value={eventForm.color || '#E8A849'} onChange={(v) => setEventForm({ ...eventForm, color: v })} />
+          <label style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', fontSize: '14px', color: '#555' }}>
+            Color
+            <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem' }}>
+              <input
+                type="color"
+                value={eventForm.color || '#E8A849'}
+                onChange={(e) => setEventForm({ ...eventForm, color: e.target.value })}
+                style={{ width: '3rem', height: '2.4rem', padding: 0, border: '1px solid rgba(1,13,30,0.18)', borderRadius: '10px', cursor: 'pointer', background: 'transparent' }}
+              />
+              <Text label="Hex" value={eventForm.color || '#E8A849'} onChange={(v) => setEventForm({ ...eventForm, color: v })} />
+            </div>
+          </label>
           <Text label="Description" value={eventForm.description || ''} onChange={(v) => setEventForm({ ...eventForm, description: v })} />
           <label style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '14px', color: '#555' }}>
             <input type="checkbox" checked={eventForm.active !== false} onChange={(e) => setEventForm({ ...eventForm, active: e.target.checked })} />