diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
index 86db400..a283a4b 100644
--- a/src/app/admin/page.tsx
+++ b/src/app/admin/page.tsx
@@ -2,54 +2,60 @@
 
 import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
 import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
-import MetricCardTen from "@/components/sections/metrics/MetricCardTen";
-import FeatureBento from "@/components/sections/feature/FeatureBento";
-import FooterBase from "@/components/sections/footer/FooterBase";
-import {
-  Users,
-  BarChart3,
-  Shield,
-  Activity,
-  TrendingUp,
-} from "lucide-react";
+import { useState } from "react";
+import { BarChart3, Users, Briefcase, FileText, TrendingUp, LogOut } from "lucide-react";
 
 const navItems = [
-  { name: "Dashboard", id: "/admin" },
-  { name: "Jobs", id: "/admin#jobs" },
-  { name: "Users", id: "/admin#users" },
-  { name: "Moderation", id: "/admin#moderation" },
-  { name: "Analytics", id: "/admin#analytics" },
+  { name: "Search Jobs", id: "" },
+  { name: "Post a Job", id: "" },
+  { name: "Admin", id: "/admin" },
+  { name: "Browse", id: "" },
+  { name: "Contact", id: "" },
 ];
 
-const footerColumns = [
-  {
-    title: "Admin",    items: [
-      { label: "Dashboard", href: "/admin" },
-      { label: "Settings", href: "/admin#settings" },
-      { label: "Reports", href: "/admin#reports" },
-    ],
-  },
-  {
-    title: "Quick Links",    items: [
-      { label: "Help", href: "#" },
-      { label: "Support", href: "#" },
-      { label: "Documentation", href: "#" },
-    ],
-  },
-];
+type TabType = "jobs" | "applications" | "users" | "analytics";
+
+export default function AdminDashboard() {
+  const [activeTab, setActiveTab] = useState<TabType>("jobs");
+  const [jobs] = useState([
+    { id: 1, title: "Senior Developer", company: "Tech Corp", status: "Active", applications: 12, posted: "2 days ago" },
+    { id: 2, title: "Product Manager", company: "Startup Inc", status: "Active", applications: 8, posted: "5 days ago" },
+    { id: 3, title: "Designer", company: "Creative Agency", status: "Inactive", applications: 5, posted: "10 days ago" },
+  ]);
+
+  const [applications] = useState([
+    { id: 1, candidate: "John Smith", position: "Senior Developer", status: "Under Review", appliedDate: "2025-01-20" },
+    { id: 2, candidate: "Sarah Johnson", position: "Product Manager", status: "Interview", appliedDate: "2025-01-19" },
+    { id: 3, candidate: "Mike Davis", position: "Senior Developer", status: "Rejected", appliedDate: "2025-01-18" },
+  ]);
+
+  const [users] = useState([
+    { id: 1, name: "Alice Chen", email: "alice@example.com", role: "Job Seeker", joined: "2025-01-10", status: "Active" },
+    { id: 2, name: "Bob Wilson", email: "bob@example.com", role: "Employer", joined: "2025-01-05", status: "Active" },
+    { id: 3, name: "Carol White", email: "carol@example.com", role: "Job Seeker", joined: "2024-12-20", status: "Inactive" },
+  ]);
+
+  const [analytics] = useState({
+    totalJobs: 284,
+    activeApplications: 156,
+    totalUsers: 2341,
+    avgTimeToHire: "18 days",    monthlyGrowth: "+12.5%",    conversionRate: "8.3%"});
+
+  const handleLogout = () => {
+    window.location.href = "/";
+  };
 
-export default function AdminPage() {
   return (
     <ThemeProvider
       defaultButtonVariant="text-stagger"
       defaultTextAnimation="reveal-blur"
       borderRadius="pill"
-      contentWidth="smallMedium"
+      contentWidth="medium"
       sizing="mediumLargeSizeLargeTitles"
-      background="circleGradient"
-      cardStyle="gradient-radial"
-      primaryButtonStyle="double-inset"
-      secondaryButtonStyle="glass"
+      background="none"
+      cardStyle="solid"
+      primaryButtonStyle="gradient"
+      secondaryButtonStyle="solid"
       headingFontWeight="bold"
     >
       <div id="nav" data-section="nav">
@@ -57,180 +63,271 @@ export default function AdminPage() {
           brandName="Jobee Admin"
           navItems={navItems}
           button={{
-            text: "Logout",            onClick: () => console.log("logout"),
+            text: "Logout",            onClick: handleLogout,
           }}
         />
       </div>
 
-      <div id="jobs" data-section="jobs" className="pt-20">
-        <MetricCardTen
-          title="Job Management"
-          description="Monitor and manage all job postings across the platform"
-          tag="Active Jobs"
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          metrics={[
-            {
-              id: "1",              title: "Senior Software Engineer, Backend",              subtitle: "Amsterdam, Netherlands · Full-time · Remote eligible",              category: "Engineering",              value: "Posted 2 days ago",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "2",              title: "Product Manager, Enterprise",              subtitle: "Rotterdam, Netherlands · Full-time",              category: "Product",              value: "Posted 5 days ago",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "3",              title: "UX Designer, B2B",              subtitle: "Utrecht, Netherlands · Full-time",              category: "Design",              value: "Posted 1 week ago",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "4",              title: "Data Scientist, ML Platform",              subtitle: "Remote · Full-time",              category: "Data",              value: "Posted 10 days ago",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "5",              title: "DevOps Engineer, Infrastructure",              subtitle: "Amsterdam, Netherlands · Full-time · Remote",              category: "Infrastructure",              value: "Posted 3 weeks ago",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "6",              title: "Marketing Manager, Growth",              subtitle: "The Hague, Netherlands · Full-time",              category: "Marketing",              value: "Posted 1 month ago",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-          ]}
-        />
-      </div>
+      <div className="min-h-screen bg-slate-50 pt-24 pb-12">
+        <div className="mx-auto max-w-7xl px-4">
+          <h1 className="text-4xl font-bold text-slate-900 mb-8">Admin Dashboard</h1>
 
-      <div id="users" data-section="users">
-        <MetricCardTen
-          title="User Management"
-          description="Overview of registered users, job seekers, and employers"
-          tag="Active Users"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
-          metrics={[
-            {
-              id: "1",              title: "Sarah van der Berg",              subtitle: "Amsterdam, Netherlands · Software Developer",              category: "Job Seeker",              value: "Active",              buttons: [
-                { text: "View Profile", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "2",              title: "Acme Corporation",              subtitle: "Rotterdam, Netherlands · Tech Company",              category: "Employer",              value: "Verified",              buttons: [
-                { text: "View", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "3",              title: "Jan Pieterzoon",              subtitle: "Utrecht, Netherlands · HR Manager",              category: "Employer",              value: "Active",              buttons: [
-                { text: "View Profile", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-            {
-              id: "4",              title: "Emma Dijkstra",              subtitle: "The Hague, Netherlands · Marketing Specialist",              category: "Job Seeker",              value: "Active",              buttons: [
-                { text: "View Profile", href: "#" },
-                { text: "Manage", href: "#" },
-              ],
-            },
-          ]}
-        />
-      </div>
+          {/* Tab Navigation */}
+          <div className="flex gap-4 mb-8 border-b border-slate-200">
+            <button
+              onClick={() => setActiveTab("jobs")}
+              className={`pb-4 px-4 font-semibold transition-colors ${
+                activeTab === "jobs"
+                  ? "text-blue-600 border-b-2 border-blue-600"
+                  : "text-slate-600 hover:text-slate-900"
+              }`}
+            >
+              <div className="flex items-center gap-2">
+                <Briefcase size={20} />
+                Job Management
+              </div>
+            </button>
+            <button
+              onClick={() => setActiveTab("applications")}
+              className={`pb-4 px-4 font-semibold transition-colors ${
+                activeTab === "applications"
+                  ? "text-blue-600 border-b-2 border-blue-600"
+                  : "text-slate-600 hover:text-slate-900"
+              }`}
+            >
+              <div className="flex items-center gap-2">
+                <FileText size={20} />
+                Applications
+              </div>
+            </button>
+            <button
+              onClick={() => setActiveTab("users")}
+              className={`pb-4 px-4 font-semibold transition-colors ${
+                activeTab === "users"
+                  ? "text-blue-600 border-b-2 border-blue-600"
+                  : "text-slate-600 hover:text-slate-900"
+              }`}
+            >
+              <div className="flex items-center gap-2">
+                <Users size={20} />
+                User Management
+              </div>
+            </button>
+            <button
+              onClick={() => setActiveTab("analytics")}
+              className={`pb-4 px-4 font-semibold transition-colors ${
+                activeTab === "analytics"
+                  ? "text-blue-600 border-b-2 border-blue-600"
+                  : "text-slate-600 hover:text-slate-900"
+              }`}
+            >
+              <div className="flex items-center gap-2">
+                <BarChart3 size={20} />
+                Analytics
+              </div>
+            </button>
+          </div>
 
-      <div id="analytics" data-section="analytics">
-        <FeatureBento
-          title="Platform Analytics & Insights"
-          description="Monitor key metrics and platform performance across all regions"
-          tag="Real-time Data"
-          tagIcon={Activity}
-          textboxLayout="default"
-          useInvertedBackground={false}
-          animationType="slide-up"
-          carouselMode="buttons"
-          features={[
-            {
-              title: "Job Applications Trend",              description: "Track weekly application volume and trends",              bentoComponent: "line-chart"},
-            {
-              title: "Revenue by Province",              description: "Revenue distribution across Dutch provinces",              bentoComponent: "animated-bar-chart"},
-            {
-              title: "User Growth Metrics",              description: "Active users and engagement statistics",              bentoComponent: "icon-info-cards",              items: [
-                { icon: Users, label: "Total Users", value: "24,500+" },
-                { icon: Activity, label: "Job Postings", value: "3,240" },
-                { icon: TrendingUp, label: "Monthly Growth", value: "12.5%" },
-              ],
-            },
-            {
-              title: "Geographic Distribution",              description: "Job seeker and employer locations worldwide",              bentoComponent: "map"},
-            {
-              title: "Popular Job Categories",              description: "Most sought-after job positions and skills",              bentoComponent: "marquee",              centerIcon: Activity,
-              variant: "text",              texts: [
-                "Software Engineering",                "Product Management",                "Data Science",                "UX Design",                "Marketing",                "Sales"],
-            },
-            {
-              title: "System Status Overview",              description: "Platform health and service monitoring",              bentoComponent: "3d-stack-cards",              items: [
-                {
-                  icon: Activity,
-                  title: "API Health",                  subtitle: "99.9% Uptime",                  detail: "All systems operational"},
-                {
-                  icon: BarChart3,
-                  title: "Database",                  subtitle: "256 GB",                  detail: "45% capacity used"},
-                {
-                  icon: Shield,
-                  title: "Security",                  subtitle: "Secure",                  detail: "No active threats"},
-              ],
-            },
-          ]}
-        />
-      </div>
+          {/* Job Management Tab */}
+          {activeTab === "jobs" && (
+            <div className="space-y-4">
+              <div className="flex justify-between items-center mb-6">
+                <h2 className="text-2xl font-bold text-slate-900">Job Listings</h2>
+                <button className="px-6 py-2 bg-blue-600 text-white rounded-lg font-semibold hover:bg-blue-700 transition">
+                  + New Job
+                </button>
+              </div>
+              <div className="bg-white rounded-lg shadow overflow-hidden">
+                <table className="w-full">
+                  <thead className="bg-slate-100 border-b border-slate-200">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Job Title</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Company</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Applications</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Posted</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {jobs.map((job) => (
+                      <tr key={job.id} className="border-b border-slate-200 hover:bg-slate-50">
+                        <td className="px-6 py-4 text-sm text-slate-900 font-medium">{job.title}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{job.company}</td>
+                        <td className="px-6 py-4 text-sm">
+                          <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                            job.status === "Active"
+                              ? "bg-green-100 text-green-700"
+                              : "bg-gray-100 text-gray-700"
+                          }`}>
+                            {job.status}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{job.applications}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{job.posted}</td>
+                        <td className="px-6 py-4 text-sm space-x-2">
+                          <button className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded transition">Edit</button>
+                          <button className="px-3 py-1 text-red-600 hover:bg-red-50 rounded transition">Delete</button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
 
-      <div id="moderation" data-section="moderation">
-        <MetricCardTen
-          title="Content Moderation"
-          description="Review and manage flagged content, reports, and user complaints"
-          tag="Flagged Content"
-          textboxLayout="default"
-          useInvertedBackground={true}
-          animationType="slide-up"
-          metrics={[
-            {
-              id: "1",              title: "Job Post: Suspicious Salary Offer",              subtitle: "Posted by Employer XYZ · Flag reason: Unusually high salary",              category: "Review",              value: "Pending",              buttons: [
-                { text: "Review", href: "#" },
-                { text: "Action", href: "#" },
-              ],
-            },
-            {
-              id: "2",              title: "User Report: Inappropriate Profile",              subtitle: "Report from user about profile content violation",              category: "Report",              value: "2 days ago",              buttons: [
-                { text: "Investigate", href: "#" },
-                { text: "Resolve", href: "#" },
-              ],
-            },
-            {
-              id: "3",              title: "Automated Alert: Spam Job Posting",              subtitle: "System detected duplicate job posts from same employer",              category: "Alert",              value: "Flagged",              buttons: [
-                { text: "Review", href: "#" },
-                { text: "Remove", href: "#" },
-              ],
-            },
-          ]}
-        />
-      </div>
+          {/* Applications Management Tab */}
+          {activeTab === "applications" && (
+            <div className="space-y-4">
+              <h2 className="text-2xl font-bold text-slate-900 mb-6">Application Management</h2>
+              <div className="bg-white rounded-lg shadow overflow-hidden">
+                <table className="w-full">
+                  <thead className="bg-slate-100 border-b border-slate-200">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Candidate</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Position</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Applied Date</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {applications.map((app) => (
+                      <tr key={app.id} className="border-b border-slate-200 hover:bg-slate-50">
+                        <td className="px-6 py-4 text-sm text-slate-900 font-medium">{app.candidate}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{app.position}</td>
+                        <td className="px-6 py-4 text-sm">
+                          <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                            app.status === "Interview"
+                              ? "bg-blue-100 text-blue-700"
+                              : app.status === "Under Review"
+                              ? "bg-yellow-100 text-yellow-700"
+                              : "bg-red-100 text-red-700"
+                          }`}>
+                            {app.status}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{app.appliedDate}</td>
+                        <td className="px-6 py-4 text-sm space-x-2">
+                          <button className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded transition">View</button>
+                          <button className="px-3 py-1 text-green-600 hover:bg-green-50 rounded transition">Approve</button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
 
-      <div id="footer" data-section="footer">
-        <FooterBase
-          logoText="Jobee Admin"
-          copyrightText="© 2025 Jobee Admin Portal"
-          columns={footerColumns}
-        />
+          {/* User Management Tab */}
+          {activeTab === "users" && (
+            <div className="space-y-4">
+              <h2 className="text-2xl font-bold text-slate-900 mb-6">User Management</h2>
+              <div className="bg-white rounded-lg shadow overflow-hidden">
+                <table className="w-full">
+                  <thead className="bg-slate-100 border-b border-slate-200">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Name</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Email</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Role</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Joined</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Status</th>
+                      <th className="px-6 py-3 text-left text-sm font-semibold text-slate-900">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {users.map((user) => (
+                      <tr key={user.id} className="border-b border-slate-200 hover:bg-slate-50">
+                        <td className="px-6 py-4 text-sm text-slate-900 font-medium">{user.name}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{user.email}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{user.role}</td>
+                        <td className="px-6 py-4 text-sm text-slate-600">{user.joined}</td>
+                        <td className="px-6 py-4 text-sm">
+                          <span className={`px-3 py-1 rounded-full text-xs font-semibold ${
+                            user.status === "Active"
+                              ? "bg-green-100 text-green-700"
+                              : "bg-gray-100 text-gray-700"
+                          }`}>
+                            {user.status}
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-sm space-x-2">
+                          <button className="px-3 py-1 text-blue-600 hover:bg-blue-50 rounded transition">Edit</button>
+                          <button className="px-3 py-1 text-red-600 hover:bg-red-50 rounded transition">Disable</button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </div>
+          )}
+
+          {/* Analytics Tab */}
+          {activeTab === "analytics" && (
+            <div className="space-y-6">
+              <h2 className="text-2xl font-bold text-slate-900 mb-6">Analytics Overview</h2>
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-blue-600">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-slate-600 text-sm font-medium">Total Jobs</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.totalJobs}</p>
+                    </div>
+                    <Briefcase className="text-blue-600" size={40} />
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-green-600">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-slate-600 text-sm font-medium">Active Applications</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.activeApplications}</p>
+                    </div>
+                    <FileText className="text-green-600" size={40} />
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-purple-600">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-slate-600 text-sm font-medium">Total Users</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.totalUsers}</p>
+                    </div>
+                    <Users className="text-purple-600" size={40} />
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-yellow-600">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-slate-600 text-sm font-medium">Avg Time to Hire</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.avgTimeToHire}</p>
+                    </div>
+                    <TrendingUp className="text-yellow-600" size={40} />
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-red-600">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-slate-600 text-sm font-medium">Monthly Growth</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.monthlyGrowth}</p>
+                    </div>
+                    <BarChart3 className="text-red-600" size={40} />
+                  </div>
+                </div>
+                <div className="bg-white rounded-lg shadow p-6 border-l-4 border-indigo-600">
+                  <div className="flex items-center justify-between">
+                    <div>
+                      <p className="text-slate-600 text-sm font-medium">Conversion Rate</p>
+                      <p className="text-3xl font-bold text-slate-900 mt-2">{analytics.conversionRate}</p>
+                    </div>
+                    <BarChart3 className="text-indigo-600" size={40} />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
     </ThemeProvider>
   );