diff --git a/frontend/package.json b/frontend/package.json
index a6bde70..1ba3cbd 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -9,6 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^7.1.0",
+    "@fortawesome/free-solid-svg-icons": "^7.1.0",
+    "@fortawesome/react-fontawesome": "^3.1.0",
     "@radix-ui/react-slot": "^1.0.2",
     "axios": "^1.5.1",
     "class-variance-authority": "^0.7.0",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 2b7e0c4..41c8bf7 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -9,6 +9,7 @@ function App() {
       <Route path="/login" element={<LoginPage />} />
       <Route element={<ProtectedRoute />}>
         <Route path="/admin" element={<AdminPage />} />
+        <Route path="/jobs" element={<AdminPage />} />
       </Route>
       <Route path="*" element={<Navigate to="/admin" replace />} />
     </Routes>
diff --git a/frontend/src/components/ThemeToggle.tsx b/frontend/src/components/ThemeToggle.tsx
index e717702..15cd38b 100644
--- a/frontend/src/components/ThemeToggle.tsx
+++ b/frontend/src/components/ThemeToggle.tsx
@@ -1,12 +1,26 @@
 import { Moon, Sun } from "lucide-react";
-import { Button } from "./ui/button";
+import { Button, type ButtonProps } from "./ui/button";
 import { useTheme } from "../providers/theme-provider";
 
-export function ThemeToggle() {
+export function ThemeToggle({
+  className,
+  size = "icon",
+  variant = "outline"
+}: {
+  className?: string;
+  size?: ButtonProps["size"];
+  variant?: ButtonProps["variant"];
+}) {
   const { theme, toggleTheme } = useTheme();
 
   return (
-    <Button variant="outline" size="icon" aria-label="Tema değiştir" onClick={toggleTheme}>
+    <Button
+      variant={variant}
+      size={size}
+      aria-label="Tema değiştir"
+      onClick={toggleTheme}
+      className={className}
+    >
       {theme === "light" ? <Moon className="h-5 w-5" /> : <Sun className="h-5 w-5" />}
     </Button>
   );
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b9fd8ea..db3dc32 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -9,7 +9,7 @@
   --card-foreground: 0 0% 4%;
   --popover: 0 0% 100%;
   --popover-foreground: 0 0% 4%;
-  --primary: 0 0% 4%;
+  --primary: 180 1.2% 16.3%;
   --primary-foreground: 0 0% 98%;
   --secondary: 0 0% 96.1%;
   --secondary-foreground: 0 0% 9%;
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
index 97284ca..96e02d0 100644
--- a/frontend/src/pages/AdminPage.tsx
+++ b/frontend/src/pages/AdminPage.tsx
@@ -1,12 +1,15 @@
 import { useEffect, useMemo, useState } from "react";
-import { useNavigate } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router-dom";
 import { io, Socket } from "socket.io-client";
 import { toast } from "sonner";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faHouse, faBriefcase, faArrowRightFromBracket, faUser } from "@fortawesome/free-solid-svg-icons";
 import { Button } from "../components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../components/ui/card";
 import { ThemeToggle } from "../components/ThemeToggle";
 import { useAuth } from "../providers/auth-provider";
 import { apiClient } from "../api/client";
+import { cn } from "../lib/utils";
 
 export function AdminPage() {
   const { user, token, logout } = useAuth();
@@ -48,66 +51,100 @@ export function AdminPage() {
     socket.emit("ping");
   };
 
+  const navigation = [
+    { label: "Home", to: "/admin", icon: faHouse },
+    { label: "Jobs", to: "/jobs", icon: faBriefcase }
+  ];
+
   return (
     <div className="min-h-screen bg-background text-foreground">
-      <header className="flex items-center justify-between border-b border-border px-6 py-4">
-        <div className="flex items-center gap-3">
-          <div className="text-lg font-semibold">Yönetim Paneli</div>
-          {user?.username && <span className="text-sm text-muted-foreground">Hoş geldin, {user.username}</span>}
-        </div>
-        <div className="flex items-center gap-3">
-          <ThemeToggle />
-          <Button variant="outline" onClick={handleLogout}>
-            Çıkış Yap
-          </Button>
-        </div>
-      </header>
-
-      <main className="mx-auto grid max-w-4xl gap-6 px-6 py-10 md:grid-cols-2">
-        <Card className="border-border card-shadow">
-          <CardHeader>
-            <CardTitle>Bağlantı</CardTitle>
-            <CardDescription>Backend'e bağlanıp basit ping/pong testi yapın.</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-4">
-            <Button onClick={sendPing} disabled={!socket}>
-              Ping Gönder
-            </Button>
-            <div className="rounded-md border border-border bg-muted/40 p-3 text-sm text-muted-foreground">
-              <div className="mb-2 text-xs uppercase tracking-wide text-foreground">Socket Mesajları</div>
-              <div className="space-y-1">
-                {messages.length === 0 && <div>Mesaj yok.</div>}
-                {messages.map((msg, idx) => (
-                  <div key={idx} className="text-foreground/80">
-                    • {msg}
-                  </div>
-                ))}
+      <div className="flex min-h-screen">
+        <aside className="hidden w-64 flex-col border-r border-border bg-card/40 md:flex">
+          <div className="flex h-16 items-center border-b border-border px-6">
+            <span className="text-lg font-semibold tracking-tight">Wisecolt CI</span>
+          </div>
+          <nav className="flex-1 space-y-1 px-3 py-4">
+            {navigation.map((item) => (
+              <NavLink
+                key={item.to}
+                to={item.to}
+                className={({ isActive }) =>
+                  cn(
+                    "flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition",
+                    isActive
+                      ? "bg-primary text-primary-foreground shadow-sm"
+                      : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
+                  )
+                }
+              >
+                <FontAwesomeIcon icon={item.icon} className="h-4 w-4" />
+                <span>{item.label}</span>
+              </NavLink>
+            ))}
+          </nav>
+          <div className="mt-auto space-y-3 border-t border-border px-4 py-4">
+            <div className="flex gap-3">
+              <ThemeToggle size="icon" className="h-10 w-10 justify-center" />
+              <div className="flex h-10 flex-1 items-center gap-3 rounded-md border border-border bg-background px-3">
+                <FontAwesomeIcon icon={faUser} className="h-4 w-4 text-muted-foreground" />
+                <span className="text-sm font-medium text-foreground">{user?.username ?? "-"}</span>
               </div>
             </div>
-          </CardContent>
-        </Card>
+            <Button variant="outline" className="w-full justify-center gap-2" onClick={handleLogout}>
+              <FontAwesomeIcon icon={faArrowRightFromBracket} className="h-4 w-4" />
+              Çıkış Yap
+            </Button>
+          </div>
+        </aside>
 
-        <Card className="border-border card-shadow">
-          <CardHeader>
-            <CardTitle>Durum</CardTitle>
-            <CardDescription>Auth & bağlantı bilgileri.</CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-3 text-sm text-muted-foreground">
-            <div className="flex items-center justify-between">
-              <span>API URL</span>
-              <span className="font-medium text-foreground">{socketUrl}</span>
-            </div>
-            <div className="flex items-center justify-between">
-              <span>Kullanıcı</span>
-              <span className="font-medium text-foreground">{user?.username ?? "-"}</span>
-            </div>
-            <div className="flex items-center justify-between">
-              <span>Token</span>
-              <span className="truncate font-mono text-foreground/80">{token?.slice(0, 24) ?? "-"}...</span>
-            </div>
-          </CardContent>
-        </Card>
-      </main>
+        <main className="flex-1">
+          <div className="mx-auto grid max-w-5xl gap-6 px-6 py-10 md:grid-cols-2">
+            <Card className="border-border card-shadow">
+              <CardHeader>
+                <CardTitle>Bağlantı</CardTitle>
+                <CardDescription>Backend'e bağlanıp basit ping/pong testi yapın.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <Button onClick={sendPing} disabled={!socket}>
+                  Ping Gönder
+                </Button>
+                <div className="rounded-md border border-border bg-muted/40 p-3 text-sm text-muted-foreground">
+                  <div className="mb-2 text-xs uppercase tracking-wide text-foreground">Socket Mesajları</div>
+                  <div className="space-y-1">
+                    {messages.length === 0 && <div>Mesaj yok.</div>}
+                    {messages.map((msg, idx) => (
+                      <div key={idx} className="text-foreground/80">
+                        • {msg}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="border-border card-shadow">
+              <CardHeader>
+                <CardTitle>Durum</CardTitle>
+                <CardDescription>Auth & bağlantı bilgileri.</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3 text-sm text-muted-foreground">
+                <div className="flex items-center justify-between">
+                  <span>API URL</span>
+                  <span className="font-medium text-foreground">{socketUrl}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>Kullanıcı</span>
+                  <span className="font-medium text-foreground">{user?.username ?? "-"}</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span>Token</span>
+                  <span className="truncate font-mono text-foreground/80">{token?.slice(0, 24) ?? "-"}...</span>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+        </main>
+      </div>
     </div>
   );
 }