diff --git a/src/app/teacher-dashboard/page.tsx b/src/app/teacher-dashboard/page.tsx
index e7e7c24..c93bd1d 100644
--- a/src/app/teacher-dashboard/page.tsx
+++ b/src/app/teacher-dashboard/page.tsx
@@ -2,48 +2,85 @@
 
 import { useState } from "react";
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
-import { LineChart, Line, BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend } from "recharts";
+import NavbarStyleFullscreen from "@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen";
+import MetricCardThree from "@/components/sections/metrics/MetricCardThree";
+import {
+  Home,
+  Calendar,
+  Users,
+  MessageSquare,
+  DollarSign,
+  BarChart3,
+  Settings,
+  TrendingUp,
+  Award,
+  Star,
+  Clock,
+  CheckCircle,
+  Clock3,
+  Send,
+} from "lucide-react";
 
-const TeacherDashboard = () => {
-  const [comments, setComments] = useState<Array<{ id: string; name: string; text: string; date: string }>>([]);
-  const [newComment, setNewComment] = useState("");
-  const [newCommentName, setNewCommentName] = useState("");
+export default function TeacherDashboard() {
+  const [activeMenu, setActiveMenu] = useState("home");
 
-  // Monthly earning data
-  const earningData = [
-    { month: "Ocak", earning: 2400 },
-    { month: "Şubat", earning: 3200 },
-    { month: "Mart", earning: 2800 },
-    { month: "Nisan", earning: 3900 },
-    { month: "Mayıs", earning: 4200 },
-    { month: "Haziran", earning: 3800 },
+  const navItems = [
+    { name: "Ana Sayfa", id: "/" },
+    { name: "Öğretmen Paneli", id: "/teacher-dashboard" },
   ];
 
-  // Student count data
-  const studentData = [
-    { month: "Ocak", students: 15 },
-    { month: "Şubat", students: 22 },
-    { month: "Mart", students: 28 },
-    { month: "Nisan", students: 35 },
-    { month: "Mayıs", students: 42 },
-    { month: "Haziran", students: 45 },
+  const menuItems = [
+    { id: "home", label: "Ana Sayfa", icon: Home },
+    { id: "calendar", label: "Takvim", icon: Calendar },
+    { id: "students", label: "Öğrencilerim", icon: Users },
+    { id: "messages", label: "Mesajlar", icon: MessageSquare },
+    { id: "earnings", label: "Kazançlar", icon: DollarSign },
+    { id: "statistics", label: "İstatistikler", icon: BarChart3 },
+    { id: "settings", label: "Ayarlar", icon: Settings },
   ];
 
-  const handleAddComment = () => {
-    if (newComment.trim() && newCommentName.trim()) {
-      setComments([
-        ...comments,
-        {
-          id: Date.now().toString(),
-          name: newCommentName,
-          text: newComment,
-          date: new Date().toLocaleDateString("tr-TR"),
-        },
-      ]);
-      setNewComment("");
-      setNewCommentName("");
-    }
-  };
+  const todayLessons = [
+    {
+      id: "1",      title: "Matematik - Cebir Temelleri",      student: "Ahmet Demir",      time: "09:00 - 10:00",      status: "scheduled"},
+    {
+      id: "2",      title: "İngilizce - Konuşma Pratiği",      student: "Zeynep Kaya",      time: "11:00 - 12:00",      status: "scheduled"},
+    {
+      id: "3",      title: "Fizik - Hareket Kanunları",      student: "Mehmet Yılmaz",      time: "14:00 - 15:00",      status: "in-progress"},
+  ];
+
+  const pendingRequests = [
+    {
+      id: "1",      student: "Ali Şahin",      subject: "Kimya",      date: "5 Şubat 2025",      time: "15:00"},
+    {
+      id: "2",      student: "Emine Çetin",      subject: "Tarih",      date: "6 Şubat 2025",      time: "16:30"},
+  ];
+
+  const newMessages = [
+    {
+      id: "1",      from: "Ahmet Demir",      message: "Ders için teşekkürler, çok faydalı oldu!",      time: "5 dakika önce"},
+    {
+      id: "2",      from: "Zeynep Kaya",      message: "Sonraki ders için kaynak önerebilir misiniz?",      time: "2 saat önce"},
+    {
+      id: "3",      from: "Mehmet Yılmaz",      message: "Pazartesi dersini erteleyebilir miyim?",      time: "4 saat önce"},
+  ];
+
+  const monthlyEarnings = [
+    { month: "Ocak", amount: 2400 },
+    { month: "Şubat", amount: 2800 },
+    { month: "Mart", amount: 2200 },
+    { month: "Nisan", amount: 3000 },
+    { month: "Mayıs", amount: 2600 },
+    { month: "Haziran", amount: 3200 },
+  ];
+
+  const studentCount = [
+    { month: "Ocak", count: 12 },
+    { month: "Şubat", count: 15 },
+    { month: "Mart", count: 18 },
+    { month: "Nisan", count: 16 },
+    { month: "Mayıs", count: 20 },
+    { month: "Haziran", count: 22 },
+  ];
 
   return (
     <ThemeProvider
@@ -58,121 +95,273 @@ const TeacherDashboard = () => {
       secondaryButtonStyle="layered"
       headingFontWeight="light"
     >
-      <div className="min-h-screen p-8 bg-gradient-to-br from-slate-50 to-slate-100">
-        <div className="max-w-7xl mx-auto">
-          {/* Header */}
-          <div className="mb-12">
-            <h1 className="text-4xl font-bold text-slate-900 mb-2">Öğretmen Kontrol Paneli</h1>
-            <p className="text-lg text-slate-600">Aylık kazanç, öğrenci sayısı ve yorumları takip edin</p>
-          </div>
+      <div id="nav" data-section="nav">
+        <NavbarStyleFullscreen
+          navItems={navItems}
+          brandName="Öğretmen Platformu"
+          bottomLeftText="Öğretmen Paneli"
+          bottomRightText="info@platform.com"
+        />
+      </div>
 
-          {/* Charts Grid */}
-          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
-            {/* Monthly Earning Chart */}
-            <div className="bg-white rounded-xl shadow-lg p-8 border border-slate-200">
-              <h2 className="text-2xl font-semibold text-slate-900 mb-6">Aylık Kazançlar</h2>
-              <ResponsiveContainer width="100%" height={300}>
-                <LineChart data={earningData}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
-                  <XAxis dataKey="month" stroke="#64748b" />
-                  <YAxis stroke="#64748b" />
-                  <Tooltip 
-                    contentStyle={{ backgroundColor: "#1e293b", border: "1px solid #475569", borderRadius: "8px", color: "#fff" }}
-                    formatter={(value) => `₺${value}`}
-                  />
-                  <Legend />
-                  <Line 
-                    type="monotone" 
-                    dataKey="earning" 
-                    stroke="#3b82f6" 
-                    strokeWidth={3}
-                    dot={{ fill: "#3b82f6", r: 6 }}
-                    activeDot={{ r: 8 }}
-                    name="Kazanç (₺)"
-                  />
-                </LineChart>
-              </ResponsiveContainer>
-            </div>
-
-            {/* Student Count Chart */}
-            <div className="bg-white rounded-xl shadow-lg p-8 border border-slate-200">
-              <h2 className="text-2xl font-semibold text-slate-900 mb-6">Öğrenci Sayısı Artışı</h2>
-              <ResponsiveContainer width="100%" height={300}>
-                <BarChart data={studentData}>
-                  <CartesianGrid strokeDasharray="3 3" stroke="#e2e8f0" />
-                  <XAxis dataKey="month" stroke="#64748b" />
-                  <YAxis stroke="#64748b" />
-                  <Tooltip 
-                    contentStyle={{ backgroundColor: "#1e293b", border: "1px solid #475569", borderRadius: "8px", color: "#fff" }}
-                    formatter={(value) => `${value} öğrenci`}
-                  />
-                  <Legend />
-                  <Bar 
-                    dataKey="students" 
-                    fill="#10b981" 
-                    radius={[8, 8, 0, 0]}
-                    name="Öğrenci Sayısı"
-                  />
-                </BarChart>
-              </ResponsiveContainer>
-            </div>
-          </div>
-
-          {/* Comments Section */}
-          <div className="bg-white rounded-xl shadow-lg p-8 border border-slate-200">
-            <h2 className="text-2xl font-semibold text-slate-900 mb-6">Öğrenci Yorumları</h2>
-            
-            {/* Add Comment Form */}
-            <div className="mb-8 p-6 bg-slate-50 rounded-lg border border-slate-200">
-              <h3 className="text-lg font-semibold text-slate-900 mb-4">Yeni Yorum Ekle</h3>
-              <div className="space-y-4">
-                <input
-                  type="text"
-                  placeholder="Adınız"
-                  value={newCommentName}
-                  onChange={(e) => setNewCommentName(e.target.value)}
-                  className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-slate-900 placeholder-slate-500"
-                />
-                <textarea
-                  placeholder="Yorumunuz"
-                  value={newComment}
-                  onChange={(e) => setNewComment(e.target.value)}
-                  className="w-full px-4 py-2 border border-slate-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-slate-900 placeholder-slate-500 resize-none"
-                  rows={4}
-                />
+      <div className="flex min-h-screen bg-background pt-24">
+        {/* Left Sidebar Menu */}
+        <aside className="w-64 bg-card border-r border-accent p-6 fixed left-0 top-20 bottom-0 overflow-y-auto">
+          <nav className="space-y-2">
+            {menuItems.map((item) => {
+              const IconComponent = item.icon;
+              return (
                 <button
-                  onClick={handleAddComment}
-                  className="w-full bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg transition-colors duration-200"
+                  key={item.id}
+                  onClick={() => setActiveMenu(item.id)}
+                  className={`w-full flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
+                    activeMenu === item.id
+                      ? "bg-primary-cta text-background"
+                      : "text-foreground hover:bg-background-accent"
+                  }`}
                 >
-                  Yorum Ekle
+                  <IconComponent size={20} />
+                  <span className="font-medium">{item.label}</span>
                 </button>
+              );
+            })}
+          </nav>
+        </aside>
+
+        {/* Main Content */}
+        <main className="ml-64 flex-1 p-8">
+          {activeMenu === "home" && (
+            <div className="space-y-8">
+              {/* Welcome Card */}
+              <div className="grid grid-cols-1 md:grid-cols-4 gap-4">
+                <div className="md:col-span-4 bg-card border border-accent rounded-lg p-6 shadow-lg">
+                  <h2 className="text-3xl font-bold text-foreground mb-2">
+                    Hoşgeldiniz, Ayşe!
+                  </h2>
+                  <p className="text-foreground/70 mb-6">
+                    Ocak ayında başarılı bir ay geçiriyorsunuz.
+                  </p>
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+                    <div className="bg-background rounded-lg p-4">
+                      <div className="text-sm text-foreground/70 mb-1">
+                        Aylık Kazanç
+                      </div>
+                      <div className="text-2xl font-bold text-primary-cta">
+                        ₺2,400
+                      </div>
+                    </div>
+                    <div className="bg-background rounded-lg p-4">
+                      <div className="text-sm text-foreground/70 mb-1">
+                        Ders Sayısı
+                      </div>
+                      <div className="text-2xl font-bold text-accent">24</div>
+                    </div>
+                    <div className="bg-background rounded-lg p-4">
+                      <div className="text-sm text-foreground/70 mb-1">
+                        Puan
+                      </div>
+                      <div className="text-2xl font-bold text-secondary-cta">
+                        4.8/5
+                      </div>
+                    </div>
+                    <div className="bg-background rounded-lg p-4">
+                      <div className="text-sm text-foreground/70 mb-1">
+                        Yeni Öğrenci
+                      </div>
+                      <div className="text-2xl font-bold text-accent">3</div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              {/* Today's Lessons */}
+              <div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
+                <div className="flex items-center gap-2 mb-6">
+                  <Clock size={24} className="text-primary-cta" />
+                  <h3 className="text-2xl font-bold text-foreground">
+                    Bugünün Dersleri
+                  </h3>
+                </div>
+                <div className="space-y-3">
+                  {todayLessons.map((lesson) => (
+                    <div
+                      key={lesson.id}
+                      className="flex items-start gap-4 p-4 bg-background rounded-lg border border-background-accent"
+                    >
+                      <div className="flex-1">
+                        <h4 className="font-semibold text-foreground">
+                          {lesson.title}
+                        </h4>
+                        <p className="text-sm text-foreground/70">
+                          Öğrenci: {lesson.student}
+                        </p>
+                      </div>
+                      <div className="text-right">
+                        <p className="text-sm font-medium text-foreground">
+                          {lesson.time}
+                        </p>
+                        <span
+                          className={`inline-block text-xs px-2 py-1 rounded-full mt-1 ${
+                            lesson.status === "in-progress"
+                              ? "bg-primary-cta/20 text-primary-cta"
+                              : "bg-accent/20 text-accent"
+                          }`}
+                        >
+                          {lesson.status === "in-progress"
+                            ? "Devam Ediyor"
+                            : "Planlandı"}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Pending Requests and New Messages */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Pending Requests */}
+                <div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
+                  <div className="flex items-center gap-2 mb-6">
+                    <CheckCircle size={24} className="text-accent" />
+                    <h3 className="text-xl font-bold text-foreground">
+                      Bekleyen İstekler
+                    </h3>
+                  </div>
+                  <div className="space-y-3">
+                    {pendingRequests.map((request) => (
+                      <div
+                        key={request.id}
+                        className="p-4 bg-background rounded-lg border border-background-accent"
+                      >
+                        <p className="font-semibold text-foreground">
+                          {request.student}
+                        </p>
+                        <p className="text-sm text-foreground/70">
+                          {request.subject} • {request.date} {request.time}
+                        </p>
+                        <div className="flex gap-2 mt-3">
+                          <button className="flex-1 text-xs bg-primary-cta text-background px-3 py-1 rounded hover:opacity-90 transition-opacity">
+                            Onayla
+                          </button>
+                          <button className="flex-1 text-xs bg-background-accent text-foreground px-3 py-1 rounded hover:opacity-80 transition-opacity">
+                            İptal Et
+                          </button>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* New Messages */}
+                <div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
+                  <div className="flex items-center gap-2 mb-6">
+                    <Send size={24} className="text-secondary-cta" />
+                    <h3 className="text-xl font-bold text-foreground">
+                      Yeni Mesajlar
+                    </h3>
+                  </div>
+                  <div className="space-y-3 max-h-64 overflow-y-auto">
+                    {newMessages.map((msg) => (
+                      <div
+                        key={msg.id}
+                        className="p-4 bg-background rounded-lg border border-background-accent hover:border-accent/50 transition-colors cursor-pointer"
+                      >
+                        <p className="font-semibold text-foreground">{msg.from}</p>
+                        <p className="text-sm text-foreground/70 mt-1">{msg.message}</p>
+                        <p className="text-xs text-foreground/50 mt-2">{msg.time}</p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              </div>
+
+              {/* Charts Section */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                {/* Monthly Earnings Chart */}
+                <div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
+                  <h3 className="text-xl font-bold text-foreground mb-6">
+                    Aylık Kazançlar
+                  </h3>
+                  <div className="space-y-4">
+                    {monthlyEarnings.map((item, idx) => (
+                      <div key={idx} className="flex items-center gap-3">
+                        <span className="w-16 text-sm font-medium text-foreground/70">
+                          {item.month}
+                        </span>
+                        <div className="flex-1 bg-background rounded-full h-8 relative">
+                          <div
+                            className="bg-gradient-to-r from-primary-cta to-accent h-full rounded-full flex items-center justify-end px-3"
+                            style={{
+                              width: `${(item.amount / 3200) * 100}%`,
+                            }}
+                          >
+                            {item.amount > 2000 && (
+                              <span className="text-xs font-bold text-background">
+                                ₺{item.amount}
+                              </span>
+                            )}
+                          </div>
+                          {item.amount <= 2000 && (
+                            <span className="absolute inset-y-0 right-2 flex items-center text-xs font-bold text-foreground">
+                              ₺{item.amount}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Student Count Chart */}
+                <div className="bg-card border border-accent rounded-lg p-6 shadow-lg">
+                  <h3 className="text-xl font-bold text-foreground mb-6">
+                    Öğrenci Sayısı Gelişimi
+                  </h3>
+                  <div className="space-y-4">
+                    {studentCount.map((item, idx) => (
+                      <div key={idx} className="flex items-center gap-3">
+                        <span className="w-16 text-sm font-medium text-foreground/70">
+                          {item.month}
+                        </span>
+                        <div className="flex-1 bg-background rounded-full h-8 relative">
+                          <div
+                            className="bg-gradient-to-r from-accent to-secondary-cta h-full rounded-full flex items-center justify-end px-3"
+                            style={{
+                              width: `${(item.count / 22) * 100}%`,
+                            }}
+                          >
+                            {item.count > 10 && (
+                              <span className="text-xs font-bold text-background">
+                                {item.count}
+                              </span>
+                            )}
+                          </div>
+                          {item.count <= 10 && (
+                            <span className="absolute inset-y-0 right-2 flex items-center text-xs font-bold text-foreground">
+                              {item.count}
+                            </span>
+                          )}
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                </div>
               </div>
             </div>
+          )}
 
-            {/* Comments List */}
-            <div className="space-y-4">
-              {comments.length === 0 ? (
-                <p className="text-center text-slate-500 py-8">Henüz yorum yok. Öğrencilerden aldığınız ilk yorumu ekleyin.</p>
-              ) : (
-                comments.map((comment) => (
-                  <div
-                    key={comment.id}
-                    className="p-4 border border-slate-200 rounded-lg bg-slate-50 hover:bg-slate-100 transition-colors duration-200"
-                  >
-                    <div className="flex justify-between items-start mb-2">
-                      <h4 className="font-semibold text-slate-900">{comment.name}</h4>
-                      <span className="text-sm text-slate-500">{comment.date}</span>
-                    </div>
-                    <p className="text-slate-700">{comment.text}</p>
-                  </div>
-                ))
-              )}
+          {activeMenu !== "home" && (
+            <div className="text-center py-20">
+              <h2 className="text-3xl font-bold text-foreground mb-4">
+                {menuItems.find((m) => m.id === activeMenu)?.label}
+              </h2>
+              <p className="text-foreground/70 text-lg">
+                Bu bölüm yakında hazırlanacaktır.
+              </p>
             </div>
-          </div>
-        </div>
+          )}
+        </main>
       </div>
     </ThemeProvider>
   );
-};
-
-export default TeacherDashboard;
+}