diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 914d150..3adbacd 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -1,17 +1,50 @@
-export default function Dashboard() {
+import { DashboardHeader } from "@/components/dashboard/header";
+import { StatCard } from "@/components/dashboard/stat-card";
+import { ActivityList } from "@/components/dashboard/activity-list";
+import { ProjectCard } from "@/components/dashboard/project-card";
+import { QuickActions } from "@/components/dashboard/quick-actions";
+
+import {
+  statsData,
+  activityData,
+  projects,
+  actions,
+} from "@/config/dashboard";
+
+export default function DashboardPage() {
   return (
-    <section className="mt-20 relative flex min-h-screen items-center justify-center overflow-hidden px-4 text-center">
-      <div className="relative z-10 mx-auto max-w-5xl">
-        <h1 className="text-4xl md:text-6xl font-bold leading-tight">
-          Dashboard For the Developers
-        </h1>
-
-        <p className="mt-4 md:mt-6 text-sm md:text-xl text-foreground/60 max-w-2xl mx-auto">
-          Welcome to the central hub of the 100 ReactJS Projects platform.
-          Explore curated projects, track your progress, and discover real-world
-          applications built with React and Next.js.
-        </p>
+    <div className="p-6 space-y-6">
+
+      <DashboardHeader />
+
+      <div className="grid sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        {statsData.map((stat: any, i: number) => (
+          <StatCard key={i} {...stat} />
+        ))}
+      </div>
+
+      <div className="grid lg:grid-cols-3 gap-6">
+
+        <div className="lg:col-span-2 bg-card border rounded-xl p-5">
+          <h2 className="text-lg font-medium mb-4">Recent Activity</h2>
+          <ActivityList data={activityData} />
+        </div>
+
+        <div className="bg-card border rounded-xl p-5">
+          <h2 className="text-lg font-medium mb-4">Quick Actions</h2>
+          <QuickActions actions={actions} />
+        </div>
+      </div>
+
+      <div className="bg-card border rounded-xl p-5">
+        <h2 className="text-lg font-medium mb-4">Projects</h2>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {projects.map((p: any, i: number) => (
+            <ProjectCard key={i} project={p} />
+          ))}
+        </div>
       </div>
-    </section>
+    </div>
   );
-}
+}
\ No newline at end of file
diff --git a/app/dashboard/quick-actions.tsx b/app/dashboard/quick-actions.tsx
new file mode 100644
index 0000000..d8bc148
--- /dev/null
+++ b/app/dashboard/quick-actions.tsx
@@ -0,0 +1,14 @@
+export function QuickActions({ actions }: any) {
+  return (
+    <div className="space-y-3">
+      {actions.map((a: string, i: number) => (
+        <button
+          key={i}
+          className="w-full text-left p-3 rounded-lg bg-muted hover:bg-accent transition text-sm"
+        >
+          {a}
+        </button>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/app/projects/page.tsx b/app/projects/page.tsx
index 7522e27..359dde6 100644
--- a/app/projects/page.tsx
+++ b/app/projects/page.tsx
@@ -1,30 +1,181 @@
-import ProjectGrid from "@/components/project/project-grid";
-import { AuroraText } from "@/components/utils/aurora-text";
-import { generateMetadata as getMetadata } from "@/config/meta";
-import { projectConfig } from "@/config/projects";
+"use client";
 
-export const metadata = getMetadata("/projects");
+import React from "react";
+import {
+  FileText,
+  Users,
+  DollarSign,
+  Activity,
+  Plus,
+  ArrowUpRight,
+  TrendingUp,
+  Clock,
+} from "lucide-react";
+import { motion } from "framer-motion";
 
-export default function Projects() {
+export default function DashboardPage() {
   return (
-    <section className="mt-20 relative flex min-h-screen items-center justify-center overflow-hidden px-4 text-center">
-      <div className="relative z-10 mx-auto max-w-5xl">
-        <h1 className="text-4xl md:text-7xl font-bold leading-tight">
-          100+{" "}
-          <AuroraText
-            colors={["#22d3ee", "#3b82f6", "#6366f1", "#a855f7", "#ec4899"]}
-          >
-            React JS
-          </AuroraText>{" "}
-          Projects
-        </h1>
-
-        <p className="mt-4 md:mt-6 text-sm md:text-xl text-foreground/60 max-w-2xl mx-auto">
-          {projectConfig.description}
-        </p>
-
-        <ProjectGrid />
+    <div className="p-6 space-y-6">
+      {/* Header */}
+      <div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
+        <div>
+          <h1 className="text-3xl font-semibold tracking-tight">
+            Dashboard
+          </h1>
+          <p className="text-sm text-muted-foreground">
+            Overview of your platform performance and activity
+          </p>
+        </div>
+
+        <button className="flex items-center gap-2 bg-primary text-primary-foreground px-4 py-2 rounded-lg shadow hover:opacity-90 transition">
+          <Plus size={16} />
+          New Project
+        </button>
+      </div>
+
+      {/* Stats */}
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          title="Projects"
+          value="24"
+          change="+12%"
+          icon={<FileText size={18} />}
+        />
+        <StatCard
+          title="Users"
+          value="1,240"
+          change="+5%"
+          icon={<Users size={18} />}
+        />
+        <StatCard
+          title="Revenue"
+          value="$12.4K"
+          change="+18%"
+          icon={<DollarSign size={18} />}
+        />
+        <StatCard
+          title="Growth"
+          value="89%"
+          change="+3%"
+          icon={<TrendingUp size={18} />}
+        />
+      </div>
+
+      {/* Main Grid */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Activity */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="lg:col-span-2 bg-card p-5 rounded-xl border shadow-sm"
+        >
+          <div className="flex items-center justify-between mb-4">
+            <h2 className="text-lg font-medium">Recent Activity</h2>
+            <Clock size={16} className="text-muted-foreground" />
+          </div>
+
+          <div className="space-y-3">
+            {activityData.map((item, i) => (
+              <div
+                key={i}
+                className="flex items-center justify-between p-3 rounded-lg bg-muted hover:bg-accent transition cursor-pointer"
+              >
+                <div>
+                  <p className="text-sm">{item.title}</p>
+                  <span className="text-xs text-muted-foreground">
+                    {item.time}
+                  </span>
+                </div>
+                <ArrowUpRight size={16} />
+              </div>
+            ))}
+          </div>
+        </motion.div>
+
+        {/* Quick Actions */}
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          className="bg-card p-5 rounded-xl border shadow-sm"
+        >
+          <h2 className="text-lg font-medium mb-4">Quick Actions</h2>
+
+          <div className="space-y-3">
+            {actions.map((a, i) => (
+              <button
+                key={i}
+                className="w-full text-left p-3 rounded-lg bg-muted hover:bg-accent transition text-sm"
+              >
+                {a}
+              </button>
+            ))}
+          </div>
+        </motion.div>
+      </div>
+
+      {/* Projects */}
+      <div className="bg-card p-5 rounded-xl border shadow-sm">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-lg font-medium">Projects</h2>
+          <button className="text-sm text-primary hover:underline">
+            View all
+          </button>
+        </div>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-4">
+          {projects.map((p, i) => (
+            <motion.div
+              key={i}
+              whileHover={{ scale: 1.03 }}
+              className="p-4 rounded-lg border bg-muted hover:bg-accent transition cursor-pointer"
+            >
+              <h3 className="font-medium">{p.name}</h3>
+              <p className="text-xs text-muted-foreground mt-1">
+                {p.desc}
+              </p>
+            </motion.div>
+          ))}
+        </div>
       </div>
-    </section>
+    </div>
   );
 }
+
+
+function StatCard({ title, value, change, icon }: any) {
+  return (
+    <motion.div
+      whileHover={{ scale: 1.02 }}
+      className="bg-card p-4 rounded-xl border shadow-sm flex flex-col gap-2"
+    >
+      <div className="flex items-center justify-between text-muted-foreground">
+        {icon}
+        <span className="text-xs text-green-500">{change}</span>
+      </div>
+
+      <h3 className="text-xl font-semibold">{value}</h3>
+      <p className="text-sm text-muted-foreground">{title}</p>
+    </motion.div>
+  );
+}
+
+/* Data */
+const activityData = [
+  { title: "New user registered", time: "2 min ago" },
+  { title: "Payment received", time: "10 min ago" },
+  { title: "Project updated", time: "1 hour ago" },
+  { title: "New project created", time: "3 hours ago" },
+];
+
+const actions = [
+  "Create Project",
+  "Invite User",
+  "Generate Report",
+  "View Analytics",
+];
+
+const projects = [
+  { name: "Admin Dashboard", desc: "Internal analytics panel" },
+  { name: "E-commerce App", desc: "Shopping platform UI" },
+  { name: "Portfolio Website", desc: "Personal branding site" },
+];
diff --git a/components/dashboards/activity-list.tsx b/components/dashboards/activity-list.tsx
new file mode 100644
index 0000000..6ecf825
--- /dev/null
+++ b/components/dashboards/activity-list.tsx
@@ -0,0 +1,17 @@
+export function ActivityList({ data }: any) {
+  return (
+    <div className="space-y-3">
+      {data.map((item: any, i: number) => (
+        <div
+          key={i}
+          className="p-3 rounded-lg bg-muted hover:bg-accent transition"
+        >
+          <p className="text-sm">{item.title}</p>
+          <span className="text-xs text-muted-foreground">
+            {item.time}
+          </span>
+        </div>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/dashboards/header.tsx b/components/dashboards/header.tsx
new file mode 100644
index 0000000..7a8ba41
--- /dev/null
+++ b/components/dashboards/header.tsx
@@ -0,0 +1,10 @@
+export function DashboardHeader() {
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold">Dashboard</h1>
+      <p className="text-sm text-muted-foreground">
+        Welcome back! Here's what's happening.
+      </p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/dashboards/project-card.tsx b/components/dashboards/project-card.tsx
new file mode 100644
index 0000000..9b4f639
--- /dev/null
+++ b/components/dashboards/project-card.tsx
@@ -0,0 +1,10 @@
+export function ProjectCard({ project }: any) {
+  return (
+    <div className="p-4 rounded-lg border bg-muted hover:bg-accent transition">
+      <h3 className="font-medium">{project.name}</h3>
+      <p className="text-xs text-muted-foreground">
+        {project.desc}
+      </p>
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/dashboards/quick-actions.tsx b/components/dashboards/quick-actions.tsx
new file mode 100644
index 0000000..d8bc148
--- /dev/null
+++ b/components/dashboards/quick-actions.tsx
@@ -0,0 +1,14 @@
+export function QuickActions({ actions }: any) {
+  return (
+    <div className="space-y-3">
+      {actions.map((a: string, i: number) => (
+        <button
+          key={i}
+          className="w-full text-left p-3 rounded-lg bg-muted hover:bg-accent transition text-sm"
+        >
+          {a}
+        </button>
+      ))}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/components/dashboards/stat-card.tsx b/components/dashboards/stat-card.tsx
new file mode 100644
index 0000000..417bc22
--- /dev/null
+++ b/components/dashboards/stat-card.tsx
@@ -0,0 +1,13 @@
+import { Card } from "../ui/card";
+
+export function StatCard({ title, value, change }: any) {
+  return (
+    <Card>
+      <div className="flex justify-between text-sm text-muted-foreground">
+        <span>{title}</span>
+        <span className="text-green-500">{change}</span>
+      </div>
+      <h2 className="text-xl font-semibold mt-2">{value}</h2>
+    </Card>
+  );
+}
\ No newline at end of file
diff --git a/config/dashboard.ts b/config/dashboard.ts
new file mode 100644
index 0000000..9f11899
--- /dev/null
+++ b/config/dashboard.ts
@@ -0,0 +1,25 @@
+export const statsData = [
+  { title: "Projects", value: "24", change: "+12%" },
+  { title: "Users", value: "1,240", change: "+5%" },
+  { title: "Revenue", value: "$12.4K", change: "+18%" },
+  { title: "Growth", value: "89%", change: "+3%" },
+];
+
+export const activityData = [
+  { title: "New user registered", time: "2 min ago" },
+  { title: "Payment received", time: "10 min ago" },
+  { title: "Project updated", time: "1 hour ago" },
+];
+
+export const projects = [
+  { name: "Admin Dashboard", desc: "Analytics panel" },
+  { name: "E-commerce App", desc: "Shopping UI" },
+  { name: "Portfolio", desc: "Personal site" },
+];
+
+export const actions = [
+  "Create Project",
+  "Invite User",
+  "Generate Report",
+  "View Analytics",
+];
\ No newline at end of file
diff --git a/styles/globals.css b/styles/globals.css
index 2386f39..2fd1b97 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -2,7 +2,27 @@
 
 @custom-variant dark (&:is(.dark *));
 
-:root {
+@layer base {
+  :root {
+    --color-background: var(--background);
+    --color-foreground: var(--foreground);
+    --color-card: var(--card);
+    --color-card-foreground: var(--card-foreground);
+    --color-popover: var(--popover);
+    --color-popover-foreground: var(--popover-foreground);
+    --color-primary: var(--primary);
+    --color-primary-foreground: var(--primary-foreground);
+    --color-secondary: var(--secondary);
+    --color-secondary-foreground: var(--secondary-foreground);
+    --color-muted: var(--muted);
+    --color-muted-foreground: var(--muted-foreground);
+    --color-accent: var(--accent);
+    --color-accent-foreground: var(--accent-foreground);
+    --color-destructive: var(--destructive);
+    --color-destructive-foreground: var(--destructive-foreground);
+    --color-border: var(--border);
+    --color-input: var(--input);
+    --color-ring: var(--ring);
   --background: oklch(0.9911 0 0);
   --foreground: oklch(0.2046 0 0);
   --card: oklch(0.9911 0 0);
@@ -62,6 +82,8 @@
   --spacing: 0.25rem;
 }
 
+}
+
 .dark {
   --background: oklch(0.1822 0 0);
   --foreground: oklch(0.9288 0.0126 255.5078);
@@ -181,7 +203,128 @@
 
   --animate-aurora: aurora 8s ease-in-out infinite alternate;
 
-  @keyframes aurora {
+  
+{
+  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
+}
+
+/* Better text rendering */
+body {
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+/* Scrollbar (modern minimal) */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(0 0% 60% / 0.4);
+  border-radius: 999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(0 0% 50% / 0.6);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: hsl(0 0% 40% / 0.5);
+}
+
+::selection {
+  background: var(--color-primary);
+  color: var(--color-primary-foreground);
+}
+
+/* Smooth anchor scrolling */
+html {
+  scroll-behavior: smooth;
+}
+
+.card {
+  @apply bg-card text-card-foreground border rounded-xl shadow-sm;
+}
+
+
+.card-hover {
+  @apply hover:shadow-md hover:-translate-y-1;
+}
+.btn {
+  @apply inline-flex items-center justify-center rounded-lg px-4 py-2 text-sm font-medium transition;
+}
+
+.btn-primary {
+  @apply bg-primary text-primary-foreground hover:opacity-90 active:scale-95;
+}
+
+/* Secondary button */
+.btn-secondary {
+  @apply bg-secondary text-secondary-foreground hover:bg-muted;
+}
+
+/* Input styling */
+.input {
+  @apply w-full px-3 py-2 rounded-lg border bg-input text-sm outline-none focus:ring-2 focus:ring-ring;
+}
+
+/* Glass effect */
+.glass {
+  background: rgba(255, 255, 255, 0.6);
+  backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.dark .glass {
+  background: rgba(20, 20, 20, 0.6);
+  border: 1px solid rgba(255, 255, 255, 0.05);
+}
+
+/* Gradient text */
+.gradient-text {
+  background: linear-gradient(to right, var(--color-primary), #60a5fa);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-fadeUp {
+  animation: fadeUp 0.4s ease forwards;
+}
+
+.animate-fadeIn {
+  animation: fadeIn 0.3s ease forwards;
+}
+
+:focus-visible {
+  outline: 2px solid var(--color-ring);
+  outline-offset: 2px;
+}
+@keyframes aurora {
     0% {
       background-position: 0% 50%;
       transform: rotate(-5deg) scale(0.9);