diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
new file mode 100644
index 0000000..e21ab9e
--- /dev/null
+++ b/frontend/src/App.tsx
@@ -0,0 +1,20 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
+import Login from './routes/Login'
+import ConfigList from './routes/ConfigList'
+import ConfigDetail from './routes/ConfigDetail'
+import ProtectedRoute from './components/ProtectedRoute'
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path="/login" element={<Login />} />
+        <Route element={<ProtectedRoute />}>
+          <Route path="/configs" element={<ConfigList />} />
+          <Route path="/configs/:id" element={<ConfigDetail />} />
+        </Route>
+        <Route path="*" element={<Navigate to="/configs" replace />} />
+      </Routes>
+    </BrowserRouter>
+  )
+}
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
new file mode 100644
index 0000000..10cd7e9
--- /dev/null
+++ b/frontend/src/main.tsx
@@ -0,0 +1,15 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { ThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import App from './App'
+import { theme } from './theme'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <ThemeProvider theme={theme}>
+      <CssBaseline />
+      <App />
+    </ThemeProvider>
+  </React.StrictMode>
+)
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
new file mode 100644
index 0000000..69e7358
--- /dev/null
+++ b/frontend/src/theme.ts
@@ -0,0 +1,17 @@
+import { createTheme } from '@mui/material/styles'
+
+export const theme = createTheme({
+  palette: {
+    mode: 'light',
+    primary: { main: '#3b82f6' },
+    background: { default: '#f5f7fa', paper: '#ffffff' },
+  },
+  components: {
+    MuiAppBar: { styleOverrides: { root: { backgroundColor: '#1a1f2e' } } },
+    MuiDrawer: {
+      styleOverrides: {
+        paper: { backgroundColor: '#1a1f2e', color: '#e2e8f0', borderRight: 'none' },
+      },
+    },
+  },
+})