diff --git a/src/app/admin/page.tsx b/src/app/admin/page.tsx
new file mode 100644
index 0000000..576a630
--- /dev/null
+++ b/src/app/admin/page.tsx
@@ -0,0 +1,246 @@
+"use client";
+
+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,
+  Briefcase,
+  BarChart3,
+  Shield,
+  Activity,
+  TrendingUp,
+  AlertCircle,
+  Settings,
+} 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" },
+];
+
+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: "#" },
+    ],
+  },
+];
+
+export default function AdminPage() {
+  return (
+    <ThemeProvider
+      defaultButtonVariant="text-stagger"
+      defaultTextAnimation="reveal-blur"
+      borderRadius="pill"
+      contentWidth="smallMedium"
+      sizing="mediumLargeSizeLargeTitles"
+      background="circleGradient"
+      cardStyle="gradient-radial"
+      primaryButtonStyle="double-inset"
+      secondaryButtonStyle="glass"
+      headingFontWeight="bold"
+    >
+      <div id="nav" data-section="nav">
+        <NavbarStyleCentered
+          brandName="Jobee Admin"
+          navItems={navItems}
+          button={{
+            text: "Logout",            onClick: () => console.log("logout"),
+          }}
+        />
+      </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 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>
+
+      <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={[
+            {
+              id: 1,
+              title: "Job Applications Trend",              description: "Track weekly application volume and trends",              bentoComponent: "line-chart"},
+            {
+              id: 2,
+              title: "Revenue by Province",              description: "Revenue distribution across Dutch provinces",              bentoComponent: "animated-bar-chart"},
+            {
+              id: 3,
+              title: "User Growth Metrics",              description: "Active users and engagement statistics",              bentoComponent: "icon-info-cards",              items: [
+                { icon: Users, label: "Total Users", value: "24,500+" },
+                { icon: Briefcase, label: "Job Postings", value: "3,240" },
+                { icon: TrendingUp, label: "Monthly Growth", value: "12.5%" },
+              ],
+            },
+            {
+              id: 4,
+              title: "Geographic Distribution",              description: "Job seeker and employer locations worldwide",              bentoComponent: "map"},
+            {
+              id: 5,
+              title: "Popular Job Categories",              description: "Most sought-after job positions and skills",              bentoComponent: "marquee",              centerIcon: Briefcase,
+              variant: "text",              texts: [
+                "Software Engineering",                "Product Management",                "Data Science",                "UX Design",                "Marketing",                "Sales"],
+            },
+            {
+              id: 6,
+              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>
+
+      <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>
+
+      <div id="footer" data-section="footer">
+        <FooterBase
+          logoText="Jobee Admin"
+          copyrightText="© 2025 Jobee Admin Portal"
+          columns={footerColumns}
+        />
+      </div>
+    </ThemeProvider>
+  );
+}