diff --git a/frontend/src/assets/claude_desgin.png b/frontend/src/assets/claude_desgin.png
new file mode 100644
index 0000000..fff9987
Binary files /dev/null and b/frontend/src/assets/claude_desgin.png differ
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
new file mode 100644
index 0000000..606462a
--- /dev/null
+++ b/frontend/src/components/Layout.tsx
@@ -0,0 +1,58 @@
+import { useState, useEffect, useCallback } from 'react'
+import { Outlet } from 'react-router-dom'
+import { listJobs, type Job } from '../services/api'
+import Sidebar from './Sidebar'
+
+type LayoutContext = {
+  refreshJobs: () => void
+}
+
+export default function Layout() {
+  const [sidebarOpen, setSidebarOpen] = useState(true)
+  const [jobs, setJobs] = useState<Job[]>([])
+
+  const refreshJobs = useCallback(() => {
+    listJobs()
+      .then(setJobs)
+      .catch(() => {})
+  }, [])
+
+  useEffect(() => {
+    refreshJobs()
+  }, [refreshJobs])
+
+  return (
+    <div style={{ display: 'flex', minHeight: '100vh' }}>
+      <Sidebar jobs={jobs} isOpen={sidebarOpen} onToggle={() => setSidebarOpen(false)} />
+      <div
+        style={{
+          flex: 1,
+          marginLeft: sidebarOpen ? '350px' : '0px',
+          transition: 'margin-left 0.2s ease',
+          minHeight: '100vh',
+        }}
+      >
+        {!sidebarOpen && (
+          <button
+            onClick={() => setSidebarOpen(true)}
+            style={{
+              position: 'fixed',
+              top: '12px',
+              left: '12px',
+              zIndex: 101,
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '6px',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <span style={{ fontSize: '30px', color: '#9ca3af' }}>☰</span>
+          </button>
+        )}
+        <Outlet context={{ refreshJobs } satisfies LayoutContext} />
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
new file mode 100644
index 0000000..45d8b4c
--- /dev/null
+++ b/frontend/src/components/Sidebar.tsx
@@ -0,0 +1,182 @@
+import { useNavigate, useLocation } from 'react-router-dom'
+import { type Job } from '../services/api'
+import StatusBadge from './StatusBadge'
+import logoIcon from '../assets/claude_desgin.png'
+
+type SidebarProps = {
+  jobs: Job[]
+  isOpen: boolean
+  onToggle: () => void
+}
+
+export default function Sidebar({ jobs, isOpen, onToggle }: SidebarProps) {
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  return (
+    <div
+      style={{
+        position: 'fixed',
+        left: 0,
+        top: 0,
+        bottom: 0,
+        width: isOpen ? '350px' : '0px',
+        backgroundColor: '#1a1a1a',
+        borderRight: '1px solid #374151',
+        display: 'flex',
+        flexDirection: 'column',
+        transition: 'width 0.2s ease',
+        overflow: 'hidden',
+        zIndex: 100,
+      }}
+    >
+      <div
+        style={{
+          width: '350px',
+          minWidth: '350px',
+          display: 'flex',
+          flexDirection: 'column',
+          height: '100%',
+        }}
+      >
+        <div
+          style={{
+            padding: '12px 16px 10px 16px',
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            borderBottom: '1px solid #374151',
+          }}
+        >
+          <img
+            src={logoIcon}
+            alt="UI Recommender"
+            style={{ height: '40px', width: '40px', mixBlendMode: 'screen' }}
+          />
+          <button
+            onClick={onToggle}
+            style={{
+              background: 'none',
+              border: 'none',
+              cursor: 'pointer',
+              padding: '4px',
+              display: 'flex',
+              alignItems: 'center',
+            }}
+          >
+            <svg
+              width="30"
+              height="30"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#9ca3af"
+              strokeWidth="1.5"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            >
+              <rect x="3" y="3" width="18" height="18" rx="3" />
+              <line x1="9" y1="3" x2="9" y2="21" />
+            </svg>
+          </button>
+        </div>
+
+        <div
+          style={{
+            padding: '0 16px',
+            height: '63px',
+            display: 'flex',
+            alignItems: 'center',
+          }}
+        >
+          <button
+            onClick={() => navigate('/')}
+            style={{
+              width: '100%',
+              padding: '10px 16px',
+              backgroundColor: '#2563eb',
+              color: '#fff',
+              border: 'none',
+              borderRadius: '6px',
+              fontSize: '14px',
+              fontWeight: 600,
+              cursor: 'pointer',
+            }}
+          >
+            + New Job
+          </button>
+        </div>
+
+        <div style={{ flex: 1, overflowY: 'auto', padding: '0 8px' }}>
+          {jobs.map((job) => {
+            const isActive = location.pathname === `/jobs/${job.id}`
+            return (
+              <div
+                key={job.id}
+                onClick={() => navigate(`/jobs/${job.id}`)}
+                style={{
+                  padding: '0 12px',
+                  height: '63px',
+                  borderRadius: '6px',
+                  marginBottom: '4px',
+                  cursor: 'pointer',
+                  backgroundColor: isActive ? '#374151' : 'transparent',
+                  display: 'flex',
+                  justifyContent: 'space-between',
+                  alignItems: 'center',
+                }}
+              >
+                <div style={{ overflow: 'hidden', flex: 1, marginRight: '8px' }}>
+                  <div
+                    style={{
+                      fontSize: '14px',
+                      fontWeight: 500,
+                      color: 'rgba(255,255,255,0.87)',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {job.repo_url.replace('https://github.com/', '')}
+                  </div>
+                  <div
+                    style={{
+                      fontSize: '13px',
+                      color: '#9ca3af',
+                      marginTop: '2px',
+                      whiteSpace: 'nowrap',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                    }}
+                  >
+                    {job.instruction.substring(0, 80)}
+                    {job.instruction.length > 80 ? '...' : ''}
+                  </div>
+                </div>
+                <StatusBadge status={job.status} />
+              </div>
+            )
+          })}
+        </div>
+
+        <div
+          onClick={() => navigate('/settings')}
+          style={{
+            padding: '0 16px',
+            height: '63px',
+            borderTop: '1px solid #374151',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            gap: '8px',
+            fontSize: '16px',
+            color: '#9ca3af',
+            backgroundColor: location.pathname === '/settings' ? '#374151' : 'transparent',
+          }}
+        >
+          <span style={{ fontSize: '30px' }}>⚙</span>
+          Settings
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/hooks/useLayoutContext.ts b/frontend/src/hooks/useLayoutContext.ts
new file mode 100644
index 0000000..0b4ff77
--- /dev/null
+++ b/frontend/src/hooks/useLayoutContext.ts
@@ -0,0 +1,9 @@
+import { useOutletContext } from 'react-router-dom'
+
+type LayoutContext = {
+  refreshJobs: () => void
+}
+
+export function useLayoutContext() {
+  return useOutletContext<LayoutContext>()
+}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 08a3ac9..13aaf0a 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -24,12 +24,15 @@ a:hover {
 
 body {
   margin: 0;
-  display: flex;
-  place-items: center;
   min-width: 320px;
   min-height: 100vh;
 }
 
+#root {
+  width: 100%;
+  min-height: 100vh;
+}
+
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index cb70e88..e202e15 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -2,20 +2,22 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { createBrowserRouter, RouterProvider } from 'react-router-dom'
 import './index.css'
+import Layout from './components/Layout'
 import Dashboard from './pages/Dashboard'
 import JobDetail from './pages/JobDetail'
+import Settings from './pages/Settings'
 import ErrorPage from './pages/ErrorPage'
 
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <Dashboard />,
-    errorElement: <ErrorPage />,
-  },
-  {
-    path: '/jobs/:jobId',
-    element: <JobDetail />,
+    element: <Layout />,
     errorElement: <ErrorPage />,
+    children: [
+      { index: true, element: <Dashboard /> },
+      { path: 'jobs/:jobId', element: <JobDetail /> },
+      { path: 'settings', element: <Settings /> },
+    ],
   },
 ])
 
diff --git a/frontend/src/pages/Dashboard.tsx b/frontend/src/pages/Dashboard.tsx
index bf39e4f..17459ec 100644
--- a/frontend/src/pages/Dashboard.tsx
+++ b/frontend/src/pages/Dashboard.tsx
@@ -1,21 +1,30 @@
 import { useState, useEffect } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { createJob, listJobs, type Job } from '../services/api'
-import StatusBadge from '../components/StatusBadge'
+import { useNavigate, Link } from 'react-router-dom'
+import { createJob, getSettings } from '../services/api'
+import { useLayoutContext } from '../hooks/useLayoutContext'
 
 export default function Dashboard() {
   const navigate = useNavigate()
-  const [repoUrl, setRepoUrl] = useState('')
-  const [branch, setBranch] = useState('main')
+  const { refreshJobs } = useLayoutContext()
   const [instruction, setInstruction] = useState('')
   const [isSubmitting, setIsSubmitting] = useState(false)
   const [submitError, setSubmitError] = useState<string | null>(null)
-  const [jobs, setJobs] = useState<Job[]>([])
+  const [repoUrl, setRepoUrl] = useState<string | null>(null)
+  const [branch, setBranch] = useState<string>('main')
+  const [settingsLoaded, setSettingsLoaded] = useState(false)
 
   useEffect(() => {
-    listJobs()
-      .then(setJobs)
-      .catch(() => {})
+    getSettings()
+      .then((settings) => {
+        for (const s of settings) {
+          if (s.key === 'repo_url') setRepoUrl(s.value)
+          if (s.key === 'branch') setBranch(s.value)
+        }
+        setSettingsLoaded(true)
+      })
+      .catch(() => {
+        setSettingsLoaded(true)
+      })
   }, [])
 
   const handleSubmit = async (e: React.FormEvent) => {
@@ -26,7 +35,8 @@ export default function Dashboard() {
     setSubmitError(null)
 
     try {
-      const job = await createJob({ repo_url: repoUrl, branch, instruction })
+      const job = await createJob({ repo_url: repoUrl, branch: branch || 'main', instruction })
+      refreshJobs()
       navigate(`/jobs/${job.id}`)
     } catch (err) {
       setSubmitError((err as Error).message)
@@ -39,55 +49,39 @@ export default function Dashboard() {
     <div style={{ maxWidth: '800px', margin: '0 auto', padding: '24px' }}>
       <h1 style={{ fontSize: '24px', marginBottom: '24px' }}>UI Recommender</h1>
 
-      <form onSubmit={handleSubmit} style={{ marginBottom: '32px' }}>
-        <div style={{ marginBottom: '16px' }}>
-          <label
-            style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: 600 }}
-          >
-            Repository URL
-          </label>
-          <input
-            type="url"
-            value={repoUrl}
-            onChange={(e) => setRepoUrl(e.target.value)}
-            placeholder="https://github.com/user/repo"
-            required
-            style={{
-              width: '100%',
-              padding: '8px 12px',
-              border: '1px solid #d1d5db',
-              borderRadius: '6px',
-              fontSize: '14px',
-              boxSizing: 'border-box',
-            }}
-          />
-        </div>
-
-        <div style={{ marginBottom: '16px' }}>
-          <label
-            style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: 600 }}
-          >
-            Branch
-          </label>
-          <input
-            type="text"
-            value={branch}
-            onChange={(e) => setBranch(e.target.value)}
-            placeholder="main"
-            style={{
-              width: '100%',
-              padding: '8px 12px',
-              border: '1px solid #d1d5db',
-              borderRadius: '6px',
-              fontSize: '14px',
-              boxSizing: 'border-box',
-            }}
-          />
+      {settingsLoaded && (
+        <div
+          style={{
+            padding: '12px 16px',
+            backgroundColor: '#2a2a2a',
+            border: '1px solid #4b5563',
+            borderRadius: '6px',
+            marginBottom: '16px',
+            fontSize: '16px',
+            color: '#9ca3af',
+          }}
+        >
+          {repoUrl ? (
+            <>
+              {repoUrl.replace('https://github.com/', '')}
+              <span style={{ marginLeft: '8px', color: '#6b7280' }}>({branch || 'main'})</span>
+            </>
+          ) : (
+            <>
+              Repository URL is not configured.{' '}
+              <Link to="/settings" style={{ color: '#60a5fa', fontWeight: 600 }}>
+                Go to Settings
+              </Link>{' '}
+              to set it up.
+            </>
+          )}
         </div>
+      )}
 
+      <form onSubmit={handleSubmit}>
         <div style={{ marginBottom: '16px' }}>
           <label
-            style={{ display: 'block', marginBottom: '4px', fontSize: '14px', fontWeight: 600 }}
+            style={{ display: 'block', marginBottom: '4px', fontSize: '16px', fontWeight: 600 }}
           >
             UI Change Instruction
           </label>
@@ -100,17 +94,19 @@ export default function Dashboard() {
             style={{
               width: '100%',
               padding: '8px 12px',
-              border: '1px solid #d1d5db',
+              border: '1px solid #4b5563',
               borderRadius: '6px',
-              fontSize: '14px',
+              fontSize: '16px',
               resize: 'vertical',
               boxSizing: 'border-box',
+              backgroundColor: '#1a1a1a',
+              color: 'rgba(255,255,255,0.87)',
             }}
           />
         </div>
 
         {submitError && (
-          <p style={{ color: '#dc2626', fontSize: '14px', marginBottom: '12px' }}>{submitError}</p>
+          <p style={{ color: '#f87171', fontSize: '16px', marginBottom: '12px' }}>{submitError}</p>
         )}
 
         <button
@@ -118,53 +114,18 @@ export default function Dashboard() {
           disabled={isSubmitting || !repoUrl || !instruction}
           style={{
             padding: '10px 24px',
-            backgroundColor: isSubmitting ? '#9ca3af' : '#2563eb',
+            backgroundColor: isSubmitting || !repoUrl ? '#4b5563' : '#2563eb',
             color: '#fff',
             border: 'none',
             borderRadius: '6px',
-            fontSize: '14px',
+            fontSize: '16px',
             fontWeight: 600,
-            cursor: isSubmitting ? 'not-allowed' : 'pointer',
+            cursor: isSubmitting || !repoUrl ? 'not-allowed' : 'pointer',
           }}
         >
           {isSubmitting ? 'Creating...' : 'Create Job'}
         </button>
       </form>
-
-      {jobs.length > 0 && (
-        <div>
-          <h2 style={{ fontSize: '18px', marginBottom: '12px' }}>Recent Jobs</h2>
-          <div>
-            {jobs.map((job) => (
-              <div
-                key={job.id}
-                onClick={() => navigate(`/jobs/${job.id}`)}
-                style={{
-                  padding: '12px 16px',
-                  border: '1px solid #e5e7eb',
-                  borderRadius: '6px',
-                  marginBottom: '8px',
-                  cursor: 'pointer',
-                  display: 'flex',
-                  justifyContent: 'space-between',
-                  alignItems: 'center',
-                }}
-              >
-                <div>
-                  <div style={{ fontSize: '14px', fontWeight: 500 }}>
-                    {job.repo_url.replace('https://github.com/', '')}
-                  </div>
-                  <div style={{ fontSize: '13px', color: '#6b7280', marginTop: '2px' }}>
-                    {job.instruction.substring(0, 80)}
-                    {job.instruction.length > 80 ? '...' : ''}
-                  </div>
-                </div>
-                <StatusBadge status={job.status} />
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
     </div>
   )
 }
diff --git a/frontend/src/pages/JobDetail.tsx b/frontend/src/pages/JobDetail.tsx
index acfdd2f..fd962fb 100644
--- a/frontend/src/pages/JobDetail.tsx
+++ b/frontend/src/pages/JobDetail.tsx
@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect, useRef } from 'react'
-import { useParams, Link } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import { useJobPolling } from '../hooks/useJobPolling'
 import { createPR, getJob } from '../services/api'
 import StatusBadge from '../components/StatusBadge'
@@ -81,7 +81,6 @@ export default function JobDetail() {
     return (
       <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '24px' }}>
         <p style={{ color: '#dc2626' }}>Error: {error}</p>
-        <Link to="/">Back to Dashboard</Link>
       </div>
     )
   }
@@ -100,16 +99,12 @@ export default function JobDetail() {
 
   return (
     <div style={{ maxWidth: '1000px', margin: '0 auto', padding: '24px' }}>
-      <Link to="/" style={{ fontSize: '14px', color: '#6b7280', textDecoration: 'none' }}>
-        &larr; Back to Dashboard
-      </Link>
-
-      <div style={{ marginTop: '16px', marginBottom: '24px' }}>
+      <div style={{ marginBottom: '24px' }}>
         <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
           <h1 style={{ fontSize: '20px', margin: 0 }}>Job Detail</h1>
           <StatusBadge status={job.status} />
         </div>
-        <div style={{ fontSize: '14px', color: '#6b7280', marginTop: '8px' }}>
+        <div style={{ fontSize: '16px', color: '#6b7280', marginTop: '8px' }}>
           <div>Repository: {job.repo_url}</div>
           <div>Branch: {job.branch}</div>
           <div style={{ marginTop: '4px' }}>Instruction: {job.instruction}</div>
@@ -124,7 +119,7 @@ export default function JobDetail() {
             border: '1px solid #fecaca',
             borderRadius: '6px',
             color: '#991b1b',
-            fontSize: '14px',
+            fontSize: '16px',
             marginBottom: '16px',
           }}
         >
@@ -140,7 +135,7 @@ export default function JobDetail() {
             borderRadius: '6px',
             marginBottom: '16px',
             textAlign: 'center',
-            fontSize: '14px',
+            fontSize: '16px',
             color: '#1e40af',
           }}
         >
@@ -155,7 +150,7 @@ export default function JobDetail() {
         <>
           {job.before_screenshot_url && (
             <div style={{ marginBottom: '24px' }}>
-              <h2 style={{ fontSize: '16px', marginBottom: '8px' }}>Before</h2>
+              <h2 style={{ fontSize: '18px', marginBottom: '8px' }}>Before</h2>
               <img
                 src={job.before_screenshot_url}
                 alt="Before"
@@ -166,7 +161,7 @@ export default function JobDetail() {
 
           {completedProposals.length > 0 && (
             <div>
-              <h2 style={{ fontSize: '16px', marginBottom: '12px' }}>
+              <h2 style={{ fontSize: '18px', marginBottom: '12px' }}>
                 Select a design ({completedProposals.length} proposals)
               </h2>
               <div
@@ -200,7 +195,7 @@ export default function JobDetail() {
                         color: '#fff',
                         borderRadius: '6px',
                         textDecoration: 'none',
-                        fontSize: '14px',
+                        fontSize: '16px',
                         fontWeight: 600,
                       }}
                     >
@@ -213,7 +208,7 @@ export default function JobDetail() {
                         padding: '10px 24px',
                         backgroundColor: '#f0f9ff',
                         borderRadius: '6px',
-                        fontSize: '14px',
+                        fontSize: '16px',
                         color: '#1e40af',
                       }}
                     >
@@ -222,7 +217,7 @@ export default function JobDetail() {
                   )}
                   {selectedProposal.pr_status === 'failed' && (
                     <div>
-                      <p style={{ color: '#dc2626', fontSize: '14px', marginBottom: '8px' }}>
+                      <p style={{ color: '#dc2626', fontSize: '16px', marginBottom: '8px' }}>
                         PR creation failed
                       </p>
                       <button
@@ -235,7 +230,7 @@ export default function JobDetail() {
                           border: 'none',
                           borderRadius: '6px',
                           cursor: prLoading ? 'not-allowed' : 'pointer',
-                          fontSize: '14px',
+                          fontSize: '16px',
                           fontWeight: 600,
                           opacity: prLoading ? 0.7 : 1,
                         }}
@@ -255,7 +250,7 @@ export default function JobDetail() {
                         border: 'none',
                         borderRadius: '6px',
                         cursor: prLoading ? 'not-allowed' : 'pointer',
-                        fontSize: '14px',
+                        fontSize: '16px',
                         fontWeight: 600,
                         opacity: prLoading ? 0.7 : 1,
                       }}
diff --git a/frontend/src/pages/Settings.tsx b/frontend/src/pages/Settings.tsx
new file mode 100644
index 0000000..5539254
--- /dev/null
+++ b/frontend/src/pages/Settings.tsx
@@ -0,0 +1,122 @@
+import { useState, useEffect } from 'react'
+import { getSettings, saveSetting } from '../services/api'
+
+export default function Settings() {
+  const [repoUrl, setRepoUrl] = useState('')
+  const [branch, setBranch] = useState('main')
+  const [isSaving, setIsSaving] = useState(false)
+  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null)
+
+  useEffect(() => {
+    getSettings()
+      .then((settings) => {
+        for (const s of settings) {
+          if (s.key === 'repo_url') setRepoUrl(s.value)
+          if (s.key === 'branch') setBranch(s.value)
+        }
+      })
+      .catch(() => {})
+  }, [])
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setIsSaving(true)
+    setMessage(null)
+
+    try {
+      await saveSetting('repo_url', repoUrl)
+      await saveSetting('branch', branch || 'main')
+      setMessage({ type: 'success', text: 'Settings saved.' })
+    } catch (err) {
+      setMessage({ type: 'error', text: (err as Error).message })
+    } finally {
+      setIsSaving(false)
+    }
+  }
+
+  return (
+    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '24px' }}>
+      <h1 style={{ fontSize: '20px', marginBottom: '24px' }}>Settings</h1>
+
+      <form onSubmit={handleSave}>
+        <div style={{ marginBottom: '16px' }}>
+          <label
+            style={{ display: 'block', marginBottom: '4px', fontSize: '16px', fontWeight: 600 }}
+          >
+            Repository URL
+          </label>
+          <input
+            type="url"
+            value={repoUrl}
+            onChange={(e) => setRepoUrl(e.target.value)}
+            placeholder="https://github.com/user/repo"
+            required
+            style={{
+              width: '100%',
+              padding: '8px 12px',
+              border: '1px solid #4b5563',
+              borderRadius: '6px',
+              fontSize: '16px',
+              boxSizing: 'border-box',
+              backgroundColor: '#1a1a1a',
+              color: 'rgba(255,255,255,0.87)',
+            }}
+          />
+        </div>
+
+        <div style={{ marginBottom: '16px' }}>
+          <label
+            style={{ display: 'block', marginBottom: '4px', fontSize: '16px', fontWeight: 600 }}
+          >
+            Branch
+          </label>
+          <input
+            type="text"
+            value={branch}
+            onChange={(e) => setBranch(e.target.value)}
+            placeholder="main"
+            style={{
+              width: '100%',
+              padding: '8px 12px',
+              border: '1px solid #4b5563',
+              borderRadius: '6px',
+              fontSize: '16px',
+              boxSizing: 'border-box',
+              backgroundColor: '#1a1a1a',
+              color: 'rgba(255,255,255,0.87)',
+            }}
+          />
+        </div>
+
+        {message && (
+          <p
+            style={{
+              fontSize: '16px',
+              marginBottom: '12px',
+              color: message.type === 'success' ? '#34d399' : '#f87171',
+            }}
+          >
+            {message.text}
+          </p>
+        )}
+
+        <button
+          type="submit"
+          disabled={isSaving || !repoUrl}
+          style={{
+            padding: '10px 24px',
+            backgroundColor: isSaving ? '#4b5563' : '#2563eb',
+            color: '#fff',
+            border: 'none',
+            borderRadius: '6px',
+            fontSize: '16px',
+            fontWeight: 600,
+            cursor: isSaving ? 'not-allowed' : 'pointer',
+          }}
+        >
+          {isSaving ? 'Saving...' : 'Save Settings'}
+        </button>
+      </form>
+    </div>
+  )
+}