diff --git a/package.json b/package.json
index 80ea6a8..5d43e4a 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "bcrypt": "^6.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "framer-motion": "^11.15.0",
     "install": "^0.13.0",
     "jose": "^6.1.3",
@@ -56,6 +57,7 @@
     "postcss": "^8",
     "prisma": "^7.4.2",
     "tailwindcss": "^3.4.17",
+    "tsx": "^4.21.0",
     "typescript": "^5"
   },
   "pnpm": {
@@ -72,5 +74,8 @@
       "sharp",
       "unrs-resolver"
     ]
+  },
+  "prisma": {
+    "seed": "tsx prisma/seed.ts"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 3238640..ab396d0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -45,6 +45,9 @@ importers:
       clsx:
         specifier: ^2.1.1
         version: 2.1.1
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
       framer-motion:
         specifier: ^11.15.0
         version: 11.18.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -95,7 +98,7 @@ importers:
         version: 2.6.1
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.19)
+        version: 1.0.7(tailwindcss@3.4.19(tsx@4.21.0))
       zod:
         specifier: ^3.24.1
         version: 3.25.76
@@ -138,7 +141,10 @@ importers:
         version: 7.4.2(@types/react@19.2.14)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
       tailwindcss:
         specifier: ^3.4.17
-        version: 3.4.19
+        version: 3.4.19(tsx@4.21.0)
+      tsx:
+        specifier: ^4.21.0
+        version: 4.21.0
       typescript:
         specifier: ^5
         version: 5.9.3
@@ -414,6 +420,162 @@ packages:
   '@emnapi/wasi-threads@1.1.0':
     resolution: {integrity: sha512-WI0DdZ8xFSbgMjR1sFsKABJ/C5OnRrjT06JXbZKexJGrDuPTzZdDYfFlsgcCXCyf+suG5QU2e/y1Wo2V/OapLQ==}
 
+  '@esbuild/aix-ppc64@0.27.3':
+    resolution: {integrity: sha512-9fJMTNFTWZMh5qwrBItuziu834eOCUcEqymSH7pY+zoMVEZg3gcPuBNxH1EvfVYe9h0x/Ptw8KBzv7qxb7l8dg==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [aix]
+
+  '@esbuild/android-arm64@0.27.3':
+    resolution: {integrity: sha512-YdghPYUmj/FX2SYKJ0OZxf+iaKgMsKHVPF1MAq/P8WirnSpCStzKJFjOjzsW0QQ7oIAiccHdcqjbHmJxRb/dmg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [android]
+
+  '@esbuild/android-arm@0.27.3':
+    resolution: {integrity: sha512-i5D1hPY7GIQmXlXhs2w8AWHhenb00+GxjxRncS2ZM7YNVGNfaMxgzSGuO8o8SJzRc/oZwU2bcScvVERk03QhzA==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [android]
+
+  '@esbuild/android-x64@0.27.3':
+    resolution: {integrity: sha512-IN/0BNTkHtk8lkOM8JWAYFg4ORxBkZQf9zXiEOfERX/CzxW3Vg1ewAhU7QSWQpVIzTW+b8Xy+lGzdYXV6UZObQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [android]
+
+  '@esbuild/darwin-arm64@0.27.3':
+    resolution: {integrity: sha512-Re491k7ByTVRy0t3EKWajdLIr0gz2kKKfzafkth4Q8A5n1xTHrkqZgLLjFEHVD+AXdUGgQMq+Godfq45mGpCKg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@esbuild/darwin-x64@0.27.3':
+    resolution: {integrity: sha512-vHk/hA7/1AckjGzRqi6wbo+jaShzRowYip6rt6q7VYEDX4LEy1pZfDpdxCBnGtl+A5zq8iXDcyuxwtv3hNtHFg==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    resolution: {integrity: sha512-ipTYM2fjt3kQAYOvo6vcxJx3nBYAzPjgTCk7QEgZG8AUO3ydUhvelmhrbOheMnGOlaSFUoHXB6un+A7q4ygY9w==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [freebsd]
+
+  '@esbuild/freebsd-x64@0.27.3':
+    resolution: {integrity: sha512-dDk0X87T7mI6U3K9VjWtHOXqwAMJBNN2r7bejDsc+j03SEjtD9HrOl8gVFByeM0aJksoUuUVU9TBaZa2rgj0oA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@esbuild/linux-arm64@0.27.3':
+    resolution: {integrity: sha512-sZOuFz/xWnZ4KH3YfFrKCf1WyPZHakVzTiqji3WDc0BCl2kBwiJLCXpzLzUBLgmp4veFZdvN5ChW4Eq/8Fc2Fg==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [linux]
+
+  '@esbuild/linux-arm@0.27.3':
+    resolution: {integrity: sha512-s6nPv2QkSupJwLYyfS+gwdirm0ukyTFNl3KTgZEAiJDd+iHZcbTPPcWCcRYH+WlNbwChgH2QkE9NSlNrMT8Gfw==}
+    engines: {node: '>=18'}
+    cpu: [arm]
+    os: [linux]
+
+  '@esbuild/linux-ia32@0.27.3':
+    resolution: {integrity: sha512-yGlQYjdxtLdh0a3jHjuwOrxQjOZYD/C9PfdbgJJF3TIZWnm/tMd/RcNiLngiu4iwcBAOezdnSLAwQDPqTmtTYg==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [linux]
+
+  '@esbuild/linux-loong64@0.27.3':
+    resolution: {integrity: sha512-WO60Sn8ly3gtzhyjATDgieJNet/KqsDlX5nRC5Y3oTFcS1l0KWba+SEa9Ja1GfDqSF1z6hif/SkpQJbL63cgOA==}
+    engines: {node: '>=18'}
+    cpu: [loong64]
+    os: [linux]
+
+  '@esbuild/linux-mips64el@0.27.3':
+    resolution: {integrity: sha512-APsymYA6sGcZ4pD6k+UxbDjOFSvPWyZhjaiPyl/f79xKxwTnrn5QUnXR5prvetuaSMsb4jgeHewIDCIWljrSxw==}
+    engines: {node: '>=18'}
+    cpu: [mips64el]
+    os: [linux]
+
+  '@esbuild/linux-ppc64@0.27.3':
+    resolution: {integrity: sha512-eizBnTeBefojtDb9nSh4vvVQ3V9Qf9Df01PfawPcRzJH4gFSgrObw+LveUyDoKU3kxi5+9RJTCWlj4FjYXVPEA==}
+    engines: {node: '>=18'}
+    cpu: [ppc64]
+    os: [linux]
+
+  '@esbuild/linux-riscv64@0.27.3':
+    resolution: {integrity: sha512-3Emwh0r5wmfm3ssTWRQSyVhbOHvqegUDRd0WhmXKX2mkHJe1SFCMJhagUleMq+Uci34wLSipf8Lagt4LlpRFWQ==}
+    engines: {node: '>=18'}
+    cpu: [riscv64]
+    os: [linux]
+
+  '@esbuild/linux-s390x@0.27.3':
+    resolution: {integrity: sha512-pBHUx9LzXWBc7MFIEEL0yD/ZVtNgLytvx60gES28GcWMqil8ElCYR4kvbV2BDqsHOvVDRrOxGySBM9Fcv744hw==}
+    engines: {node: '>=18'}
+    cpu: [s390x]
+    os: [linux]
+
+  '@esbuild/linux-x64@0.27.3':
+    resolution: {integrity: sha512-Czi8yzXUWIQYAtL/2y6vogER8pvcsOsk5cpwL4Gk5nJqH5UZiVByIY8Eorm5R13gq+DQKYg0+JyQoytLQas4dA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [linux]
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-sDpk0RgmTCR/5HguIZa9n9u+HVKf40fbEUt+iTzSnCaGvY9kFP0YKBWZtJaraonFnqef5SlJ8/TiPAxzyS+UoA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [netbsd]
+
+  '@esbuild/netbsd-x64@0.27.3':
+    resolution: {integrity: sha512-P14lFKJl/DdaE00LItAukUdZO5iqNH7+PjoBm+fLQjtxfcfFE20Xf5CrLsmZdq5LFFZzb5JMZ9grUwvtVYzjiA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [netbsd]
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    resolution: {integrity: sha512-AIcMP77AvirGbRl/UZFTq5hjXK+2wC7qFRGoHSDrZ5v5b8DK/GYpXW3CPRL53NkvDqb9D+alBiC/dV0Fb7eJcw==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openbsd]
+
+  '@esbuild/openbsd-x64@0.27.3':
+    resolution: {integrity: sha512-DnW2sRrBzA+YnE70LKqnM3P+z8vehfJWHXECbwBmH/CU51z6FiqTQTHFenPlHmo3a8UgpLyH3PT+87OViOh1AQ==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [openbsd]
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    resolution: {integrity: sha512-NinAEgr/etERPTsZJ7aEZQvvg/A6IsZG/LgZy+81wON2huV7SrK3e63dU0XhyZP4RKGyTm7aOgmQk0bGp0fy2g==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [openharmony]
+
+  '@esbuild/sunos-x64@0.27.3':
+    resolution: {integrity: sha512-PanZ+nEz+eWoBJ8/f8HKxTTD172SKwdXebZ0ndd953gt1HRBbhMsaNqjTyYLGLPdoWHy4zLU7bDVJztF5f3BHA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [sunos]
+
+  '@esbuild/win32-arm64@0.27.3':
+    resolution: {integrity: sha512-B2t59lWWYrbRDw/tjiWOuzSsFh1Y/E95ofKz7rIVYSQkUYBjfSgf6oeYPNWHToFRr2zx52JKApIcAS/D5TUBnA==}
+    engines: {node: '>=18'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@esbuild/win32-ia32@0.27.3':
+    resolution: {integrity: sha512-QLKSFeXNS8+tHW7tZpMtjlNb7HKau0QDpwm49u0vUp9y1WOF+PEzkU84y9GqYaAVW8aH8f3GcBck26jh54cX4Q==}
+    engines: {node: '>=18'}
+    cpu: [ia32]
+    os: [win32]
+
+  '@esbuild/win32-x64@0.27.3':
+    resolution: {integrity: sha512-4uJGhsxuptu3OcpVAzli+/gWusVGwZZHTlS63hh++ehExkVT8SgiEf7/uC/PclrPPkLhZqGgCTjd0VWLo6xMqA==}
+    engines: {node: '>=18'}
+    cpu: [x64]
+    os: [win32]
+
   '@eslint-community/eslint-utils@4.9.1':
     resolution: {integrity: sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -1659,6 +1821,9 @@ packages:
     resolution: {integrity: sha512-BS8PfmtDGnrgYdOonGZQdLZslWIeCGFP9tpan0hi1Co2Zr2NKADsvGYA8XxuG/4UWgJ6Cjtv+YJnB6MM69QGlQ==}
     engines: {node: '>= 0.4'}
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   debug@3.2.7:
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
     peerDependencies:
@@ -1782,6 +1947,11 @@ packages:
     resolution: {integrity: sha512-w+5mJ3GuFL+NjVtJlvydShqE1eN3h3PbI7/5LAsYJP/2qtuMXjfL2LpHSRqo4b4eSF5K/DH1JXKUAHSB2UW50g==}
     engines: {node: '>= 0.4'}
 
+  esbuild@0.27.3:
+    resolution: {integrity: sha512-8VwMnyGCONIs6cWue2IdpHxHnAjzxnw2Zr7MkVxB2vjmQ2ivqGFb4LEG3SMnv0Gb2F/G/2yA8zUaiL1gywDCCg==}
+    engines: {node: '>=18'}
+    hasBin: true
+
   escalade@3.2.0:
     resolution: {integrity: sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==}
     engines: {node: '>=6'}
@@ -3193,6 +3363,11 @@ packages:
   tslib@2.8.1:
     resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==}
 
+  tsx@4.21.0:
+    resolution: {integrity: sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==}
+    engines: {node: '>=18.0.0'}
+    hasBin: true
+
   type-check@0.4.0:
     resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
     engines: {node: '>= 0.8.0'}
@@ -3892,6 +4067,84 @@ snapshots:
       tslib: 2.8.1
     optional: true
 
+  '@esbuild/aix-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/android-arm@0.27.3':
+    optional: true
+
+  '@esbuild/android-x64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/darwin-x64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/freebsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-arm@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/linux-loong64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-mips64el@0.27.3':
+    optional: true
+
+  '@esbuild/linux-ppc64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-riscv64@0.27.3':
+    optional: true
+
+  '@esbuild/linux-s390x@0.27.3':
+    optional: true
+
+  '@esbuild/linux-x64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/netbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/openbsd-x64@0.27.3':
+    optional: true
+
+  '@esbuild/openharmony-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/sunos-x64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-arm64@0.27.3':
+    optional: true
+
+  '@esbuild/win32-ia32@0.27.3':
+    optional: true
+
+  '@esbuild/win32-x64@0.27.3':
+    optional: true
+
   '@eslint-community/eslint-utils@4.9.1(eslint@9.39.3(jiti@1.21.7))':
     dependencies:
       eslint: 9.39.3(jiti@1.21.7)
@@ -5204,6 +5457,8 @@ snapshots:
       es-errors: 1.3.0
       is-data-view: 1.0.2
 
+  date-fns@4.1.0: {}
+
   debug@3.2.7:
     dependencies:
       ms: 2.1.3
@@ -5379,6 +5634,35 @@ snapshots:
       is-date-object: 1.1.0
       is-symbol: 1.1.1
 
+  esbuild@0.27.3:
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.27.3
+      '@esbuild/android-arm': 0.27.3
+      '@esbuild/android-arm64': 0.27.3
+      '@esbuild/android-x64': 0.27.3
+      '@esbuild/darwin-arm64': 0.27.3
+      '@esbuild/darwin-x64': 0.27.3
+      '@esbuild/freebsd-arm64': 0.27.3
+      '@esbuild/freebsd-x64': 0.27.3
+      '@esbuild/linux-arm': 0.27.3
+      '@esbuild/linux-arm64': 0.27.3
+      '@esbuild/linux-ia32': 0.27.3
+      '@esbuild/linux-loong64': 0.27.3
+      '@esbuild/linux-mips64el': 0.27.3
+      '@esbuild/linux-ppc64': 0.27.3
+      '@esbuild/linux-riscv64': 0.27.3
+      '@esbuild/linux-s390x': 0.27.3
+      '@esbuild/linux-x64': 0.27.3
+      '@esbuild/netbsd-arm64': 0.27.3
+      '@esbuild/netbsd-x64': 0.27.3
+      '@esbuild/openbsd-arm64': 0.27.3
+      '@esbuild/openbsd-x64': 0.27.3
+      '@esbuild/openharmony-arm64': 0.27.3
+      '@esbuild/sunos-x64': 0.27.3
+      '@esbuild/win32-arm64': 0.27.3
+      '@esbuild/win32-ia32': 0.27.3
+      '@esbuild/win32-x64': 0.27.3
+
   escalade@3.2.0: {}
 
   escape-string-regexp@4.0.0: {}
@@ -6431,12 +6715,13 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.5.8
 
-  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.8):
+  postcss-load-config@6.0.1(jiti@1.21.7)(postcss@8.5.8)(tsx@4.21.0):
     dependencies:
       lilconfig: 3.1.3
     optionalDependencies:
       jiti: 1.21.7
       postcss: 8.5.8
+      tsx: 4.21.0
 
   postcss-nested@6.2.0(postcss@8.5.8):
     dependencies:
@@ -6837,11 +7122,11 @@ snapshots:
 
   tailwind-merge@2.6.1: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.19):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.19(tsx@4.21.0)):
     dependencies:
-      tailwindcss: 3.4.19
+      tailwindcss: 3.4.19(tsx@4.21.0)
 
-  tailwindcss@3.4.19:
+  tailwindcss@3.4.19(tsx@4.21.0):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -6860,7 +7145,7 @@ snapshots:
       postcss: 8.5.8
       postcss-import: 15.1.0(postcss@8.5.8)
       postcss-js: 4.1.0(postcss@8.5.8)
-      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.8)
+      postcss-load-config: 6.0.1(jiti@1.21.7)(postcss@8.5.8)(tsx@4.21.0)
       postcss-nested: 6.2.0(postcss@8.5.8)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.11
@@ -6907,6 +7192,13 @@ snapshots:
 
   tslib@2.8.1: {}
 
+  tsx@4.21.0:
+    dependencies:
+      esbuild: 0.27.3
+      get-tsconfig: 4.13.6
+    optionalDependencies:
+      fsevents: 2.3.3
+
   type-check@0.4.0:
     dependencies:
       prelude-ls: 1.2.1
diff --git a/prisma.config.ts b/prisma.config.ts
index f77e8b4..e429e91 100644
--- a/prisma.config.ts
+++ b/prisma.config.ts
@@ -1,5 +1,8 @@
 export default {
   datasource: {
-    url: process.env.DATABASE_URL,
+    url: process.env.DATABASE_URL
   },
+  migrations: {
+    seed: "npx tsx prisma/seed.ts"
+  }
 };
diff --git a/prisma/seed.ts b/prisma/seed.ts
index 1d5b572..521ffd6 100644
--- a/prisma/seed.ts
+++ b/prisma/seed.ts
@@ -44,8 +44,8 @@ async function main() {
   await prisma.experience.createMany({
     data: [
       {
-        company: "Tech Corp Indonesia",
-        role: "Senior Fullstack Engineer",
+        company: "PT. Nata Solusi Nusantara",
+        role: "Fullstack Engineer",
         startDate: new Date("2022-01-01"),
         current: true,
         description:
diff --git a/src/app/(portfolio)/blog/[slug]/page.tsx b/src/app/(portfolio)/blog/[slug]/page.tsx
new file mode 100644
index 0000000..e0c9a16
--- /dev/null
+++ b/src/app/(portfolio)/blog/[slug]/page.tsx
@@ -0,0 +1,89 @@
+import { prisma } from "@/lib/prisma";
+import { notFound } from "next/navigation";
+import { format } from "date-fns";
+import Link from "next/link";
+import { ChevronLeft, Calendar, Clock, Tag as TagIcon, Share2 } from "lucide-react";
+
+export default async function BlogDetailPage({ 
+  params 
+}: { 
+  params: Promise<{ slug: string }> 
+}) {
+  const { slug } = await params;
+  const blog = await prisma.blog.findUnique({
+    where: { slug },
+    include: { tags: true },
+  });
+
+  if (!blog || blog.status !== "PUBLISHED") {
+    notFound();
+  }
+
+  return (
+    <article className="min-h-screen pt-32 pb-20 bg-background overflow-hidden relative">
+       {/* Decorative Background Elements */}
+      <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-primary/3 rounded-full blur-[120px] -z-10" />
+
+      <div className="max-w-3xl mx-auto px-6">
+        <Link
+          href="/blog"
+          className="inline-flex items-center gap-2 text-sm text-foreground-muted hover:text-primary mb-8 transition-colors group"
+        >
+          <ChevronLeft size={16} className="group-hover:-translate-x-1 transition-transform" />
+          Back to all posts
+        </Link>
+
+        <div className="space-y-6 mb-12">
+          <div className="flex flex-wrap items-center gap-4">
+             <div className="flex items-center gap-1.5 text-xs text-foreground-muted bg-surface-elevated/50 px-3 py-1.5 rounded-full border border-border/50">
+              <Calendar size={12} className="text-primary/60" />
+              {blog.publishedAt ? format(new Date(blog.publishedAt), "MMMM dd, yyyy") : "Published"}
+            </div>
+            <div className="flex items-center gap-1.5 text-xs text-foreground-muted bg-surface-elevated/50 px-3 py-1.5 rounded-full border border-border/50">
+              <Clock size={12} className="text-primary/60" />
+              6 min read
+            </div>
+          </div>
+
+          <h1 className="text-4xl md:text-5xl font-display font-bold text-foreground leading-tight tracking-tight">
+            {blog.title}
+          </h1>
+
+          <div className="flex items-center justify-between py-6 border-y border-border/50">
+             <div className="flex flex-wrap gap-2">
+              {blog.tags.map((tag) => (
+                <span key={tag.id} className="text-[10px] font-bold uppercase tracking-widest text-primary bg-primary/5 px-2.5 py-1 rounded-md border border-primary/10">
+                  {tag.name}
+                </span>
+              ))}
+            </div>
+            <button className="p-2 text-foreground-muted hover:text-primary transition-colors">
+              <Share2 size={18} />
+            </button>
+          </div>
+        </div>
+
+        {/* Content Section */}
+        <div className="prose prose-slate dark:prose-invert max-w-none prose-pre:bg-surface prose-pre:border prose-pre:border-border/50 prose-pre:rounded-2xl prose-code:text-primary prose-a:text-primary hover:prose-a:underline font-serif text-lg leading-relaxed text-foreground/90">
+          {/* Using a simple div for content here. In a real app we'd use a markdown renderer like react-markdown */}
+          <div className="whitespace-pre-wrap">
+            {blog.content}
+          </div>
+        </div>
+
+        {/* Author Footer */}
+        <div className="mt-20 p-8 bg-surface/50 border border-border/50 rounded-3xl flex items-center gap-6">
+           <div className="w-16 h-16 rounded-2xl bg-primary/10 flex items-center justify-center shrink-0 border border-primary/20">
+              <TagIcon size={24} className="text-primary" />
+           </div>
+           <div>
+              <p className="text-sm font-semibold text-foreground">Written by Fikri</p>
+              <p className="text-xs text-foreground-muted mt-1 leading-relaxed">
+                Fullstack engineer passionate about building beautiful, functional, and user-centric web applications.
+              </p>
+           </div>
+        </div>
+      </div>
+    </article>
+  );
+}
diff --git a/src/app/(portfolio)/blog/page.tsx b/src/app/(portfolio)/blog/page.tsx
new file mode 100644
index 0000000..a16858b
--- /dev/null
+++ b/src/app/(portfolio)/blog/page.tsx
@@ -0,0 +1,115 @@
+import { prisma } from "@/lib/prisma";
+import { format } from "date-fns";
+import Link from "next/link";
+import { Calendar, Clock, ArrowRight, Tag as TagIcon, Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+async function getPublishedBlogs() {
+  return await prisma.blog.findMany({
+    where: { status: "PUBLISHED" },
+    orderBy: { publishedAt: "desc" },
+    include: { tags: true },
+  });
+}
+
+export default async function BlogPage() {
+  const blogs = await getPublishedBlogs();
+
+  return (
+    <div className="min-h-screen pt-32 pb-20 bg-background overflow-hidden relative">
+      {/* Decorative Background Elements */}
+      <div className="absolute top-0 left-1/4 w-[500px] h-[500px] bg-primary/5 rounded-full blur-[120px] -z-10" />
+      <div className="absolute bottom-40 right-1/4 w-[400px] h-[400px] bg-blue-500/5 rounded-full blur-[100px] -z-10" />
+
+      <div className="max-w-6xl mx-auto px-6">
+        {/* Header Section */}
+        <div className="flex flex-col gap-6 mb-16 relative">
+          <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 border border-primary/20 text-primary text-xs font-bold uppercase tracking-wider w-fit">
+            <span className="w-1.5 h-1.5 rounded-full bg-primary animate-pulse" />
+            Writing & Thoughts
+          </div>
+          <h1 className="text-5xl md:text-7xl font-display font-bold tracking-tight text-foreground">
+            Blog<span className="text-primary">.</span>
+          </h1>
+          <p className="max-w-xl text-lg text-foreground-muted leading-relaxed">
+            Exploring the world of fullstack development, architecture, and developer productivity. Sharing what I learn along the way.
+          </p>
+
+          <div className="mt-4 flex flex-col md:flex-row gap-4 items-center">
+            <div className="relative w-full max-w-md group">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-muted group-focus-within:text-primary transition-colors" size={18} />
+              <input 
+                type="text" 
+                placeholder="Search articles..."
+                className="w-full pl-10 pr-4 py-3 bg-surface/50 backdrop-blur-sm border border-border/50 rounded-2xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Featured / Grid Segment */}
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {blogs.map((blog, index) => (
+            <BlogCard key={blog.id} blog={blog} index={index} />
+          ))}
+
+          {blogs.length === 0 && (
+            <div className="col-span-full py-20 flex flex-col items-center text-center gap-4 bg-surface/30 backdrop-blur-sm border border-border/50 rounded-3xl">
+              <div className="w-16 h-16 rounded-full bg-primary/5 flex items-center justify-center">
+                <Clock className="text-primary/40" size={32} />
+              </div>
+              <div className="space-y-1">
+                <h3 className="text-xl font-display font-semibold text-foreground">No publications yet</h3>
+                <p className="text-foreground-muted max-w-xs">Writing takes time. Check back soon for new insights and stories.</p>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function BlogCard({ blog, index }: { blog: any; index: number }) {
+  return (
+    <Link
+      href={`/blog/${blog.slug}`}
+      className="group flex flex-col bg-surface/40 backdrop-blur-md border border-border/50 rounded-3xl overflow-hidden hover:border-primary/30 transition-all duration-500 hover:shadow-2xl hover:shadow-primary/5 hover:-translate-y-1"
+    >
+      <div className="p-8 flex flex-col h-full">
+        <div className="flex items-center gap-3 mb-6">
+          <div className="flex items-center gap-1.5 text-xs text-foreground-muted bg-surface-elevated/50 px-3 py-1.5 rounded-full border border-border/50">
+            <Calendar size={12} className="text-primary/60" />
+            {blog.publishedAt ? format(new Date(blog.publishedAt), "MMM dd, yyyy") : "Draft"}
+          </div>
+          <div className="flex items-center gap-1.5 text-xs text-foreground-muted bg-surface-elevated/50 px-3 py-1.5 rounded-full border border-border/50">
+            <Clock size={12} className="text-primary/60" />
+            5 min read
+          </div>
+        </div>
+
+        <h2 className="text-2xl font-display font-bold text-foreground mb-4 group-hover:text-primary transition-colors line-clamp-2 leading-tight">
+          {blog.title}
+        </h2>
+
+        <p className="text-foreground-muted text-sm leading-relaxed line-clamp-3 mb-8">
+          {blog.excerpt || "No excerpt available for this post. Click to read the full article."}
+        </p>
+
+        <div className="mt-auto pt-6 border-t border-border/20 flex items-center justify-between">
+          <div className="flex flex-wrap gap-2">
+            {blog.tags.slice(0, 2).map((tag: any) => (
+              <span key={tag.id} className="text-[10px] font-bold uppercase tracking-widest text-foreground-muted/60 flex items-center gap-1">
+                <span className="w-1 h-1 rounded-full bg-primary" />
+                {tag.name}
+              </span>
+            ))}
+          </div>
+          <div className="p-2 rounded-full bg-primary/10 text-primary -rotate-45 group-hover:rotate-0 transition-transform duration-500">
+            <ArrowRight size={16} />
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+}
diff --git a/src/app/(portfolio)/layout.tsx b/src/app/(portfolio)/layout.tsx
new file mode 100644
index 0000000..9b50b2e
--- /dev/null
+++ b/src/app/(portfolio)/layout.tsx
@@ -0,0 +1,18 @@
+import { Navbar } from "@/components/sections/portfolio/Navbar";
+import { Footer } from "@/components/sections/portfolio/Footer";
+import { AnalyticsTracker } from "@/components/dashboard/cms/analytics/analyticts-tracker";
+
+export default function PortfolioLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <>
+      <Navbar />
+      <AnalyticsTracker />
+      <main>{children}</main>
+      <Footer />
+    </>
+  );
+}
diff --git a/src/app/page.tsx b/src/app/(portfolio)/page.tsx
similarity index 97%
rename from src/app/page.tsx
rename to src/app/(portfolio)/page.tsx
index edf175d..9d902bf 100644
--- a/src/app/page.tsx
+++ b/src/app/(portfolio)/page.tsx
@@ -7,6 +7,8 @@ import { PrincipleSection } from "@/components/sections/portfolio/PrincipleSecti
 import { ContactSection } from "@/components/sections/portfolio/ContactSection";
 import { prisma } from "@/lib/prisma";
 
+export const dynamic = "force-dynamic";
+
 const fallbackProjects = [
   {
     id: "1",
@@ -55,8 +57,8 @@ const fallbackProjects = [
 const fallbackExperiences = [
   {
     id: "1",
-    company: "Tech Corp Indonesia",
-    role: "Senior Fullstack Engineer",
+    company: "PT. Nata Solusi Nusantara",
+    role: "Fullstack Engineer",
     startDate: new Date("2022-01-01"),
     endDate: null,
     current: true,
diff --git a/src/app/api/dashboard/auth/login/route.ts b/src/app/api/dashboard/auth/login/route.ts
index 39de49d..b4e4b35 100644
--- a/src/app/api/dashboard/auth/login/route.ts
+++ b/src/app/api/dashboard/auth/login/route.ts
@@ -7,8 +7,6 @@ import { cookies } from "next/headers";
 export async function POST(req: Request) {
   const { email, password } = await req.json();
 
-  console.log("API LOGIN", email, password);
-
   const user = await prisma.user.findUnique({
     where: { email },
   });
diff --git a/src/app/api/track/route.ts b/src/app/api/track/route.ts
new file mode 100644
index 0000000..0dc32c8
--- /dev/null
+++ b/src/app/api/track/route.ts
@@ -0,0 +1,52 @@
+import { prisma } from "@/lib/prisma";
+import { NextResponse } from "next/server";
+
+export async function POST(req: Request) {
+  try {
+    const { visitorId, path } = await req.json();
+
+    if (!visitorId || !path) {
+      return NextResponse.json({ error: "Missing visitorId or path" }, { status: 400 });
+    }
+
+    // Try to find an existing session for this visitor within the last 30 minutes
+    // If it exists, update it and add a page view. If not, create a new session.
+    const thirtyMinutesAgo = new Date(Date.now() - 30 * 60 * 1000);
+
+    let session = await prisma.session.findFirst({
+      where: {
+        visitorId,
+        lastSeenAt: {
+          gt: thirtyMinutesAgo,
+        },
+      },
+      orderBy: { lastSeenAt: "desc" },
+    });
+
+    if (!session) {
+      session = await prisma.session.create({
+        data: {
+          visitorId,
+        },
+      });
+    } else {
+      await prisma.session.update({
+        where: { id: session.id },
+        data: { lastSeenAt: new Date() },
+      });
+    }
+
+    // Record the page view
+    await prisma.pageView.create({
+      data: {
+        sessionId: session.id,
+        path,
+      },
+    });
+
+    return NextResponse.json({ success: true });
+  } catch (error) {
+    console.error("Tracking error:", error);
+    return NextResponse.json({ error: "Internal server error" }, { status: 500 });
+  }
+}
diff --git a/src/app/blog/page.tsx b/src/app/blog/page.tsx
deleted file mode 100644
index 06db1e6..0000000
--- a/src/app/blog/page.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export default function BlogPage() {
-  return (
-    <div className="container mx-auto px-4 py-8">
-      <h1 className="text-3xl font-bold mb-4">Blog</h1>
-      <p>Coming soon...</p>
-    </div>
-  );
-}
diff --git a/src/app/dashboard/blog/edit/[id]/page.tsx b/src/app/dashboard/blog/edit/[id]/page.tsx
new file mode 100644
index 0000000..a4f3a4c
--- /dev/null
+++ b/src/app/dashboard/blog/edit/[id]/page.tsx
@@ -0,0 +1,23 @@
+import { prisma } from "@/lib/prisma";
+import { BlogForm } from "@/components/dashboard/blog/BlogForm";
+import { notFound } from "next/navigation";
+
+export default async function EditBlogPage({ 
+  params 
+}: { 
+  params: Promise<{ id: string }> 
+}) {
+  const { id } = await params;
+  const blog = await prisma.blog.findUnique({
+    where: { id },
+    include: { tags: true },
+  });
+
+  if (!blog) notFound();
+
+  return (
+    <div className="p-6">
+      <BlogForm initialData={blog} />
+    </div>
+  );
+}
diff --git a/src/app/dashboard/blog/new/page.tsx b/src/app/dashboard/blog/new/page.tsx
new file mode 100644
index 0000000..bf9972e
--- /dev/null
+++ b/src/app/dashboard/blog/new/page.tsx
@@ -0,0 +1,9 @@
+import { BlogForm } from "@/components/dashboard/blog/BlogForm";
+
+export default function NewBlogPage() {
+  return (
+    <div className="p-6">
+      <BlogForm />
+    </div>
+  );
+}
diff --git a/src/app/dashboard/blog/page.tsx b/src/app/dashboard/blog/page.tsx
new file mode 100644
index 0000000..b189e9d
--- /dev/null
+++ b/src/app/dashboard/blog/page.tsx
@@ -0,0 +1,172 @@
+import { getBlogs, deleteBlog } from "@/lib/actions/blog";
+import { DeleteButton } from "@/components/dashboard/DeleteButton";
+import {
+  Plus,
+  Search,
+  MoreVertical,
+  Edit2,
+  Trash2,
+  FileText,
+  Eye,
+  Calendar,
+  AlertCircle,
+} from "lucide-react";
+import Link from "next/link";
+import { format } from "date-fns";
+import { cn } from "@/lib/utils";
+
+export default async function DashboardBlogPage() {
+  const blogs = await getBlogs();
+
+  return (
+    <div className="p-6 space-y-6 max-w-7xl mx-auto">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div className="space-y-1">
+          <h1 className="text-3xl font-display font-bold text-foreground">
+            Blog Posts
+          </h1>
+          <p className="text-foreground-muted">
+            Manage your articles, thoughts, and announcements.
+          </p>
+        </div>
+        <Link
+          href="/dashboard/blog/new"
+          className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground font-medium rounded-lg hover:bg-primary/90 transition-all shadow-sm shadow-primary/20"
+        >
+          <Plus size={18} />
+          Create Post
+        </Link>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* Search & Filter */}
+        <div className="md:col-span-2 relative group mt-2">
+          <Search
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-muted group-focus-within:text-primary transition-colors"
+            size={18}
+          />
+          <input
+            type="text"
+            placeholder="Search posts by title..."
+            className="w-full pl-10 pr-4 py-2.5 bg-surface border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm"
+          />
+        </div>
+        <div className="flex items-center gap-2 justify-end">
+          <div className="text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+            Total: {blogs.length} Posts
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-surface border border-border/50 rounded-2xl overflow-hidden shadow-sm shadow-black/5">
+        <div className="overflow-x-auto">
+          <table className="w-full text-left">
+            <thead>
+              <tr className="border-b border-border/50 bg-surface-elevated/50">
+                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                  Post
+                </th>
+                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                  Date
+                </th>
+                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider text-right">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border/50">
+              {blogs.map((blog) => (
+                <tr
+                  key={blog.id}
+                  className="hover:bg-surface-elevated/30 transition-colors group"
+                >
+                  <td className="px-6 py-5">
+                    <div className="flex items-center gap-4">
+                      <div className="hidden sm:flex w-12 h-12 rounded-xl bg-primary/5 border border-primary/10 items-center justify-center shrink-0">
+                        <FileText size={20} className="text-primary" />
+                      </div>
+                      <div className="min-w-0">
+                        <Link
+                          href={`/blog/${blog.slug}`}
+                          className="text-sm font-semibold text-foreground hover:text-primary transition-colors line-clamp-1 flex items-center gap-1.5"
+                        >
+                          {blog.title}
+                          <Eye size={12} className="opacity-0 group-hover:opacity-100 transition-opacity" />
+                        </Link>
+                        <div className="text-xs text-foreground-muted flex flex-wrap gap-2 mt-1">
+                          {blog.tags.map((tag) => (
+                            <span key={tag.id}>#{tag.name}</span>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-6 py-5">
+                    <span
+                      className={cn(
+                        "inline-flex items-center px-2 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider",
+                        blog.status === "PUBLISHED"
+                          ? "bg-green-500/10 text-green-500 border border-green-500/20"
+                          : blog.status === "DRAFT"
+                          ? "bg-yellow-500/10 text-yellow-500 border border-yellow-500/20"
+                          : "bg-blue-500/10 text-blue-500 border border-blue-500/20",
+                      )}
+                    >
+                      {blog.status}
+                    </span>
+                  </td>
+                  <td className="px-6 py-5">
+                    <div className="flex flex-col">
+                      <div className="text-sm text-foreground flex items-center gap-1.5">
+                        <Calendar size={13} className="text-foreground-muted" />
+                        {format(new Date(blog.createdAt), "MMM dd, yyyy")}
+                      </div>
+                      <span className="text-[10px] text-foreground-muted mt-0.5">
+                        Added {blog.createdAt.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                      </span>
+                    </div>
+                  </td>
+                  <td className="px-6 py-5 text-right whitespace-nowrap">
+                    <div className="flex items-center justify-end gap-2">
+                      <Link
+                        href={`/dashboard/blog/edit/${blog.id}`}
+                        className="p-2 text-foreground-muted hover:text-primary hover:bg-primary/10 rounded-lg transition-all"
+                        title="Edit"
+                      >
+                        <Edit2 size={16} />
+                      </Link>
+                      <DeleteButton id={blog.id} onDelete={deleteBlog} />
+                    </div>
+                  </td>
+                </tr>
+              ))}
+
+              {blogs.length === 0 && (
+                <tr>
+                  <td colSpan={4} className="px-6 py-20 text-center">
+                    <div className="flex flex-col items-center gap-3">
+                      <AlertCircle size={40} className="text-foreground-muted opacity-20" />
+                      <div>
+                        <p className="text-foreground font-medium">No blog posts found</p>
+                        <p className="text-sm text-foreground-muted">Get started by creating your first article.</p>
+                      </div>
+                      <Link
+                        href="/dashboard/blog/new"
+                        className="mt-2 text-sm text-primary font-medium hover:underline"
+                      >
+                        Create your first post
+                      </Link>
+                    </div>
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/experience/edit/[id]/page.tsx b/src/app/dashboard/experience/edit/[id]/page.tsx
new file mode 100644
index 0000000..61ae613
--- /dev/null
+++ b/src/app/dashboard/experience/edit/[id]/page.tsx
@@ -0,0 +1,22 @@
+import { prisma } from "@/lib/prisma";
+import { ExperienceForm } from "@/components/dashboard/experience/ExperienceForm";
+import { notFound } from "next/navigation";
+
+export default async function EditExperiencePage({ 
+  params 
+}: { 
+  params: Promise<{ id: string }> 
+}) {
+  const { id } = await params;
+  const experience = await prisma.experience.findUnique({
+    where: { id },
+  });
+
+  if (!experience) notFound();
+
+  return (
+    <div className="p-6">
+      <ExperienceForm initialData={experience} />
+    </div>
+  );
+}
diff --git a/src/app/dashboard/experience/new/page.tsx b/src/app/dashboard/experience/new/page.tsx
new file mode 100644
index 0000000..d1e1212
--- /dev/null
+++ b/src/app/dashboard/experience/new/page.tsx
@@ -0,0 +1,9 @@
+import { ExperienceForm } from "@/components/dashboard/experience/ExperienceForm";
+
+export default function NewExperiencePage() {
+  return (
+    <div className="p-6">
+      <ExperienceForm />
+    </div>
+  );
+}
diff --git a/src/app/dashboard/experience/page.tsx b/src/app/dashboard/experience/page.tsx
new file mode 100644
index 0000000..ea5533d
--- /dev/null
+++ b/src/app/dashboard/experience/page.tsx
@@ -0,0 +1,176 @@
+import { getExperiences, deleteExperience } from "@/lib/actions/experience";
+import { DeleteButton } from "@/components/dashboard/DeleteButton";
+import {
+  Plus,
+  Search,
+  Briefcase,
+  Edit2,
+  Trash2,
+  Building2,
+  Calendar,
+  Layers,
+  AlertCircle,
+} from "lucide-react";
+import Link from "next/link";
+import { format } from "date-fns";
+import { cn } from "@/lib/utils";
+
+export default async function DashboardExperiencePage() {
+  const experiences = await getExperiences();
+
+  return (
+    <div className="p-6 space-y-6 max-w-7xl mx-auto">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div className="space-y-1">
+          <h1 className="text-3xl font-display font-bold text-foreground">
+            Work Experience
+          </h1>
+          <p className="text-foreground-muted">
+            Manage your career history and professional achievements.
+          </p>
+        </div>
+        <Link
+          href="/dashboard/experience/new"
+          className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground font-medium rounded-lg hover:bg-primary/90 transition-all shadow-sm shadow-primary/20"
+        >
+          <Plus size={18} />
+          Add Experience
+        </Link>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* Search & Filter */}
+        <div className="md:col-span-2 relative group mt-2">
+          <Search
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-muted group-focus-within:text-primary transition-colors"
+            size={18}
+          />
+          <input
+            type="text"
+            placeholder="Search experiences..."
+            className="w-full pl-10 pr-4 py-2.5 bg-surface border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm"
+          />
+        </div>
+        <div className="flex items-center gap-2 justify-end">
+          <div className="text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+            Total: {experiences.length} Experiences
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-surface border border-border/50 rounded-2xl overflow-hidden shadow-sm shadow-black/5">
+        <div className="overflow-x-auto">
+          <table className="w-full text-left">
+            <thead>
+              <tr className="border-b border-border/50 bg-surface-elevated/50">
+                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                  Company & Role
+                </th>
+                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                  Duration
+                </th>
+                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                  Tech & Skills
+                </th>
+                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider text-right">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border/50">
+              {experiences.map((exp) => (
+                <tr
+                  key={exp.id}
+                  className="hover:bg-surface-elevated/30 transition-colors group"
+                >
+                  <td className="px-6 py-5">
+                    <div className="flex items-center gap-4">
+                      <div className="hidden sm:flex w-12 h-12 rounded-xl bg-primary/5 border border-primary/10 items-center justify-center shrink-0">
+                        <Building2 size={20} className="text-primary" />
+                      </div>
+                      <div className="min-w-0">
+                        <div className="text-sm font-semibold text-foreground">
+                          {exp.role}
+                        </div>
+                        <div className="text-xs text-primary font-medium mt-0.5">
+                          {exp.company}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-6 py-5">
+                    <div className="flex flex-col">
+                      <div className="text-sm text-foreground flex items-center gap-1.5 font-medium">
+                        <Calendar size={13} className="text-foreground-muted" />
+                        {format(new Date(exp.startDate), "MMM yyyy")} -{" "}
+                        {exp.current
+                          ? "Present"
+                          : exp.endDate
+                          ? format(new Date(exp.endDate), "MMM yyyy")
+                          : "-"}
+                      </div>
+                      {exp.current && (
+                        <span className="text-[10px] text-green-500 font-bold uppercase tracking-wider mt-1">
+                          Active Role
+                        </span>
+                      )}
+                    </div>
+                  </td>
+                  <td className="px-6 py-5">
+                    <div className="flex flex-wrap gap-1.5 max-w-[200px]">
+                      {exp.techStack.slice(0, 3).map((tech) => (
+                        <span
+                          key={tech}
+                          className="px-2 py-0.5 rounded-md bg-surface-elevated text-[10px] font-medium text-foreground-muted border border-border/50"
+                        >
+                          {tech}
+                        </span>
+                      ))}
+                      {exp.techStack.length > 3 && (
+                        <span className="text-[10px] text-foreground-muted px-1.5">
+                          +{exp.techStack.length - 3} more
+                        </span>
+                      )}
+                    </div>
+                  </td>
+                  <td className="px-6 py-5 text-right whitespace-nowrap">
+                    <div className="flex items-center justify-end gap-2">
+                       <Link
+                        href={`/dashboard/experience/edit/${exp.id}`}
+                        className="p-2 text-foreground-muted hover:text-primary hover:bg-primary/10 rounded-lg transition-all"
+                        title="Edit"
+                      >
+                        <Edit2 size={16} />
+                      </Link>
+                      <DeleteButton id={exp.id} onDelete={deleteExperience} />
+                    </div>
+                  </td>
+                </tr>
+              ))}
+
+               {experiences.length === 0 && (
+                <tr>
+                  <td colSpan={4} className="px-6 py-20 text-center">
+                    <div className="flex flex-col items-center gap-3">
+                      <AlertCircle size={40} className="text-foreground-muted opacity-20" />
+                      <div>
+                        <p className="text-foreground font-medium">No experiences found</p>
+                        <p className="text-sm text-foreground-muted">Document your professional journey.</p>
+                      </div>
+                      <Link
+                        href="/dashboard/experience/new"
+                        className="mt-2 text-sm text-primary font-medium hover:underline"
+                      >
+                        Add your first experience
+                      </Link>
+                    </div>
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/overview/page.tsx b/src/app/dashboard/overview/page.tsx
deleted file mode 100644
index e2a44f9..0000000
--- a/src/app/dashboard/overview/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-export default function CMSPage() {
-  return (
-    <section className="min-h-[100vh] flex items-center justify-center p-4 relative overflow-hidden bg-background">
-      <h1>CMS</h1>
-    </section>
-  );
-}
diff --git a/src/app/dashboard/page.tsx b/src/app/dashboard/page.tsx
new file mode 100644
index 0000000..413af63
--- /dev/null
+++ b/src/app/dashboard/page.tsx
@@ -0,0 +1,260 @@
+import { prisma } from "@/lib/prisma";
+import {
+  Users,
+  Eye,
+  MousePointer2,
+  TrendingUp,
+  Clock,
+  ArrowUpRight,
+  ArrowDownRight,
+  Monitor,
+  Calendar,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+
+async function getStats() {
+  const [totalVisitors, totalPageViews, recentSessions] = await Promise.all([
+    prisma.session.count(),
+    prisma.pageView.count(),
+    prisma.session.findMany({
+      take: 5,
+      orderBy: { lastSeenAt: "desc" },
+      include: {
+        _count: {
+          select: { pageViews: true },
+        },
+      },
+    }),
+  ]);
+
+  return {
+    totalVisitors,
+    totalPageViews,
+    recentSessions,
+  };
+}
+
+export default async function DashboardPage() {
+  const stats = await getStats();
+
+  return (
+    <div className="p-6 space-y-8 max-w-7xl mx-auto">
+      <div className="flex flex-col gap-1">
+        <h1 className="text-3xl font-display font-bold text-foreground">
+          Dashboard Overview
+        </h1>
+        <p className="text-foreground-muted">
+          Monitor your portfolio performance and user engagement.
+        </p>
+      </div>
+
+      {/* Stats Grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <StatCard
+          label="Total Visitors"
+          value={stats.totalVisitors.toLocaleString()}
+          icon={Users}
+          trend={+12.5}
+          description="Total unique sessions"
+        />
+        <StatCard
+          label="Page Views"
+          value={stats.totalPageViews.toLocaleString()}
+          icon={Eye}
+          trend={+8.2}
+          description="Total pages viewed"
+        />
+        <StatCard
+          label="Avg. Session"
+          value="4m 32s"
+          icon={Clock}
+          trend={-2.4}
+          description="Time spent on site"
+        />
+        <StatCard
+          label="Bounce Rate"
+          value="42%"
+          icon={MousePointer2}
+          trend={+1.2}
+          description="Single page sessions"
+        />
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Recent Activity */}
+        <div className="lg:col-span-2 space-y-4">
+          <div className="flex items-center justify-between">
+            <h2 className="text-xl font-display font-semibold text-foreground">
+              Recent Visitor Activity
+            </h2>
+            <button className="text-sm font-medium text-primary hover:underline">
+              View all
+            </button>
+          </div>
+          <div className="bg-surface border border-border/50 rounded-xl overflow-hidden">
+            <div className="overflow-x-auto">
+              <table className="w-full text-left">
+                <thead>
+                  <tr className="border-b border-border/50 bg-surface-elevated/50">
+                    <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                      Visitor ID
+                    </th>
+                    <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                      Page Views
+                    </th>
+                    <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                      Last Active
+                    </th>
+                    <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                      Status
+                    </th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-border/50">
+                  {stats.recentSessions.map((session) => (
+                    <tr
+                      key={session.id}
+                      className="hover:bg-surface-elevated/30 transition-colors"
+                    >
+                      <td className="px-6 py-4">
+                        <div className="flex items-center gap-3">
+                          <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center">
+                            <Monitor size={14} className="text-primary" />
+                          </div>
+                          <div>
+                            <div className="text-sm font-medium text-foreground">
+                              {session.visitorId.slice(0, 8)}...
+                            </div>
+                            <div className="text-xs text-foreground-muted capitalize">
+                              ID: {session.id.slice(0, 6)}
+                            </div>
+                          </div>
+                        </div>
+                      </td>
+                      <td className="px-6 py-4">
+                        <div className="text-sm text-foreground">
+                          {session._count.pageViews} pages
+                        </div>
+                      </td>
+                      <td className="px-6 py-4">
+                        <div className="text-sm text-foreground">
+                          {new Date(session.lastSeenAt).toLocaleTimeString([], {
+                            hour: "2-digit",
+                            minute: "2-digit",
+                          })}
+                        </div>
+                        <div className="text-xs text-foreground-muted">
+                          {new Date(session.lastSeenAt).toLocaleDateString()}
+                        </div>
+                      </td>
+                      <td className="px-6 py-4">
+                        <span className="inline-flex items-center px-2 py-1 rounded-full text-[10px] font-medium bg-green-500/10 text-green-500 border border-green-500/20">
+                          Active
+                        </span>
+                      </td>
+                    </tr>
+                  ))}
+                  {stats.recentSessions.length === 0 && (
+                    <tr>
+                      <td
+                        colSpan={4}
+                        className="px-6 py-12 text-center text-foreground-muted"
+                      >
+                        No recent activity found.
+                      </td>
+                    </tr>
+                  )}
+                </tbody>
+              </table>
+            </div>
+          </div>
+        </div>
+
+        {/* Quick Stats / Info */}
+        <div className="space-y-6">
+          <div className="bg-surface border border-border/50 rounded-xl p-6 space-y-4">
+            <h3 className="text-lg font-display font-semibold text-foreground flex items-center gap-2">
+              <Calendar size={18} className="text-primary" />
+              Total Period
+            </h3>
+            <div className="space-y-4">
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-foreground-muted">Period Started</span>
+                <span className="text-foreground font-medium">Jan 01, 2024</span>
+              </div>
+              <div className="flex items-center justify-between text-sm">
+                <span className="text-foreground-muted">Today's Visits</span>
+                <span className="text-foreground font-medium">84</span>
+              </div>
+              <div className="pt-2 border-t border-border/50">
+                <div className="flex items-center gap-2 text-xs text-green-500 font-medium">
+                  <TrendingUp size={12} />
+                  <span>Growth is up 12% this week</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-primary/5 border border-primary/20 rounded-xl p-6">
+            <h3 className="text-primary font-semibold text-sm uppercase tracking-wider mb-2">
+              Pro Tip
+            </h3>
+            <p className="text-sm text-foreground-muted leading-relaxed">
+              Updating your project descriptions with relevant keywords can help
+              improve your portfolio's search engine visibility and attract more
+              visitors.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function StatCard({
+  label,
+  value,
+  icon: Icon,
+  trend,
+  description,
+}: {
+  label: string;
+  value: string;
+  icon: any;
+  trend: number;
+  description: string;
+}) {
+  const isPositive = trend > 0;
+
+  return (
+    <div className="bg-surface border border-border/50 rounded-xl p-5 hover:border-primary/30 transition-all group">
+      <div className="flex items-start justify-between">
+        <div className="p-2.5 rounded-lg bg-surface-elevated/50 text-foreground-muted group-hover:text-primary group-hover:bg-primary/10 transition-colors">
+          <Icon size={20} />
+        </div>
+        <div
+          className={cn(
+            "flex items-center gap-0.5 text-xs font-medium px-2 py-1 rounded-full",
+            isPositive
+              ? "text-green-500 bg-green-500/10 border border-green-500/20"
+              : "text-red-500 bg-red-500/10 border border-red-500/20",
+          )}
+        >
+          {isPositive ? (
+            <ArrowUpRight size={12} />
+          ) : (
+            <ArrowDownRight size={12} />
+          )}
+          {Math.abs(trend)}%
+        </div>
+      </div>
+      <div className="mt-4 space-y-1">
+        <h3 className="text-sm font-medium text-foreground-muted">{label}</h3>
+        <p className="text-2xl font-display font-bold text-foreground">
+          {value}
+        </p>
+      </div>
+      <p className="mt-2 text-xs text-foreground-muted">{description}</p>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/projects/edit/[id]/page.tsx b/src/app/dashboard/projects/edit/[id]/page.tsx
new file mode 100644
index 0000000..4b8c22e
--- /dev/null
+++ b/src/app/dashboard/projects/edit/[id]/page.tsx
@@ -0,0 +1,22 @@
+import { prisma } from "@/lib/prisma";
+import { ProjectForm } from "@/components/dashboard/projects/ProjectForm";
+import { notFound } from "next/navigation";
+
+export default async function EditProjectPage({ 
+  params 
+}: { 
+  params: Promise<{ id: string }> 
+}) {
+  const { id } = await params;
+  const project = await prisma.project.findUnique({
+    where: { id },
+  });
+
+  if (!project) notFound();
+
+  return (
+    <div className="p-6">
+      <ProjectForm initialData={project} />
+    </div>
+  );
+}
diff --git a/src/app/dashboard/projects/new/page.tsx b/src/app/dashboard/projects/new/page.tsx
new file mode 100644
index 0000000..ec08faa
--- /dev/null
+++ b/src/app/dashboard/projects/new/page.tsx
@@ -0,0 +1,9 @@
+import { ProjectForm } from "@/components/dashboard/projects/ProjectForm";
+
+export default function NewProjectPage() {
+  return (
+    <div className="p-6">
+      <ProjectForm />
+    </div>
+  );
+}
diff --git a/src/app/dashboard/projects/page.tsx b/src/app/dashboard/projects/page.tsx
new file mode 100644
index 0000000..93aafb9
--- /dev/null
+++ b/src/app/dashboard/projects/page.tsx
@@ -0,0 +1,194 @@
+import { getProjects, deleteProject } from "@/lib/actions/project";
+import { DeleteButton } from "@/components/dashboard/DeleteButton";
+import {
+  Plus,
+  Search,
+  ExternalLink,
+  Edit2,
+  Trash2,
+  FolderGit2,
+  Github,
+  Award,
+  AlertCircle,
+} from "lucide-react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+export default async function DashboardProjectsPage() {
+  const projects = await getProjects();
+
+  return (
+    <div className="p-6 space-y-6 max-w-7xl mx-auto">
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div className="space-y-1">
+          <h1 className="text-3xl font-display font-bold text-foreground">
+            Portfolio Projects
+          </h1>
+          <p className="text-foreground-muted">
+            Manage your showcase projects and case studies.
+          </p>
+        </div>
+        <Link
+          href="/dashboard/projects/new"
+          className="inline-flex items-center justify-center gap-2 px-4 py-2 bg-primary text-primary-foreground font-medium rounded-lg hover:bg-primary/90 transition-all shadow-sm shadow-primary/20"
+        >
+          <Plus size={18} />
+          Add Project
+        </Link>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+        {/* Search & Filter */}
+        <div className="md:col-span-2 relative group mt-2">
+          <Search
+            className="absolute left-3 top-1/2 -translate-y-1/2 text-foreground-muted group-focus-within:text-primary transition-colors"
+            size={18}
+          />
+          <input
+            type="text"
+            placeholder="Search projects..."
+            className="w-full pl-10 pr-4 py-2.5 bg-surface border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm"
+          />
+        </div>
+        <div className="flex items-center gap-2 justify-end">
+          <div className="text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+            Total: {projects.length} Items
+          </div>
+        </div>
+      </div>
+
+      <div className="bg-surface border border-border/50 rounded-2xl overflow-hidden shadow-sm shadow-black/5">
+        <div className="overflow-x-auto">
+          <table className="w-full text-left">
+            <thead>
+              <tr className="border-b border-border/50 bg-surface-elevated/50">
+                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                  Project
+                </th>
+                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                  Tech Stack
+                </th>
+                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider">
+                  Status
+                </th>
+                <th className="px-6 py-4 text-xs font-semibold text-foreground-muted uppercase tracking-wider text-right">
+                  Actions
+                </th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-border/50">
+              {projects.map((project) => (
+                <tr
+                  key={project.id}
+                  className="hover:bg-surface-elevated/30 transition-colors group"
+                >
+                  <td className="px-6 py-5">
+                    <div className="flex items-center gap-4">
+                      <div className="hidden sm:flex w-14 h-14 rounded-xl bg-primary/5 border border-primary/10 items-center justify-center shrink-0 overflow-hidden relative">
+                        {project.imageUrl ? (
+                          <img
+                            src={project.imageUrl}
+                            alt={project.title}
+                            className="w-full h-full object-cover"
+                          />
+                        ) : (
+                          <FolderGit2 size={24} className="text-primary" />
+                        )}
+                        {project.featured && (
+                          <div className="absolute top-0 right-0 p-1 bg-yellow-500 text-white rounded-bl-lg">
+                            <Award size={10} />
+                          </div>
+                        )}
+                      </div>
+                      <div className="min-w-0">
+                        <div className="text-sm font-semibold text-foreground line-clamp-1">
+                          {project.title}
+                        </div>
+                        <div className="text-xs text-foreground-muted line-clamp-1 mt-1">
+                          {project.description}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                  <td className="px-6 py-5">
+                    <div className="flex flex-wrap gap-1.5 max-w-[200px]">
+                      {project.techStack.map((tech) => (
+                        <span
+                          key={tech}
+                          className="px-2 py-0.5 rounded-md bg-surface-elevated text-[10px] font-medium text-foreground-muted border border-border/50"
+                        >
+                          {tech}
+                        </span>
+                      ))}
+                    </div>
+                  </td>
+                  <td className="px-6 py-5">
+                    <div className="flex items-center gap-2">
+                      {project.liveUrl && (
+                        <a
+                          href={project.liveUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="p-1.5 text-foreground-muted hover:text-primary transition-colors"
+                          title="View Live"
+                        >
+                          <ExternalLink size={14} />
+                        </a>
+                      )}
+                      {project.githubUrl && (
+                        <a
+                          href={project.githubUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="p-1.5 text-foreground-muted hover:text-primary transition-colors"
+                          title="Github Source"
+                        >
+                          <Github size={14} />
+                        </a>
+                      )}
+                      {!project.liveUrl && !project.githubUrl && (
+                        <span className="text-xs text-foreground-muted">Private</span>
+                      )}
+                    </div>
+                  </td>
+                  <td className="px-6 py-5 text-right whitespace-nowrap">
+                    <div className="flex items-center justify-end gap-2">
+                       <Link
+                        href={`/dashboard/projects/edit/${project.id}`}
+                        className="p-2 text-foreground-muted hover:text-primary hover:bg-primary/10 rounded-lg transition-all"
+                        title="Edit"
+                      >
+                        <Edit2 size={16} />
+                      </Link>
+                      <DeleteButton id={project.id} onDelete={deleteProject} />
+                    </div>
+                  </td>
+                </tr>
+              ))}
+
+               {projects.length === 0 && (
+                <tr>
+                  <td colSpan={4} className="px-6 py-20 text-center">
+                    <div className="flex flex-col items-center gap-3">
+                      <AlertCircle size={40} className="text-foreground-muted opacity-20" />
+                      <div>
+                        <p className="text-foreground font-medium">No projects found</p>
+                        <p className="text-sm text-foreground-muted">Start showcasing your masterpieces.</p>
+                      </div>
+                      <Link
+                        href="/dashboard/projects/new"
+                        className="mt-2 text-sm text-primary font-medium hover:underline"
+                      >
+                        Add your first project
+                      </Link>
+                    </div>
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 187dad2..580180d 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,8 +1,6 @@
 import type { Metadata } from "next";
 import { Syne, DM_Sans, DM_Mono } from "next/font/google";
 import "./globals.css";
-import { Navbar } from "@/components/sections/portfolio/Navbar";
-import { Footer } from "@/components/sections/portfolio/Footer";
 import { ThemeProvider } from "@/components/ThemeProvider";
 import { Analytics } from "@vercel/analytics/react";
 
@@ -108,9 +106,7 @@ export default function RootLayout({
           enableSystem
           disableTransitionOnChange={false}
         >
-          <Navbar />
-          <main>{children}</main>
-          <Footer />
+          {children}
           <Analytics />
         </ThemeProvider>
       </body>
diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
index 6441e9a..3ebf5a9 100644
--- a/src/app/not-found.tsx
+++ b/src/app/not-found.tsx
@@ -15,7 +15,7 @@ export default function NotFound() {
   if (!mounted) return null;
 
   return (
-    <div className="relative min-h-[calc(100vh-80px)] flex flex-col items-center justify-center overflow-hidden px-6">
+    <div className="relative min-h-screen flex flex-col items-center justify-center overflow-hidden px-6">
       {/* Background effects */}
       <div
         className="absolute inset-0 bg-grid opacity-20"
diff --git a/src/components/dashboard/DeleteButton.tsx b/src/components/dashboard/DeleteButton.tsx
new file mode 100644
index 0000000..c621f63
--- /dev/null
+++ b/src/components/dashboard/DeleteButton.tsx
@@ -0,0 +1,55 @@
+"use client";
+
+import { useState } from "react";
+import { Trash2, Loader2 } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface DeleteButtonProps {
+  id: string;
+  onDelete: (id: string) => Promise<any>;
+  className?: string;
+}
+
+export function DeleteButton({ id, onDelete, className }: DeleteButtonProps) {
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [confirm, setConfirm] = useState(false);
+
+  const handleDelete = async () => {
+    if (!confirm) {
+      setConfirm(true);
+      setTimeout(() => setConfirm(false), 3000);
+      return;
+    }
+
+    setIsDeleting(true);
+    try {
+      await onDelete(id);
+    } catch (error) {
+      console.error(error);
+      alert("Failed to delete.");
+      setIsDeleting(false);
+    }
+  };
+
+  return (
+    <button
+      onClick={handleDelete}
+      disabled={isDeleting}
+      className={cn(
+        "p-2 rounded-lg transition-all flex items-center gap-2",
+        confirm 
+          ? "bg-destructive text-destructive-foreground hover:bg-destructive/90" 
+          : "text-foreground-muted hover:text-destructive hover:bg-destructive/10",
+        className
+      )}
+      title={confirm ? "Click again to confirm" : "Delete"}
+    >
+      {isDeleting ? (
+        <Loader2 size={16} className="animate-spin" />
+      ) : (
+        <Trash2 size={16} />
+      )}
+      {confirm && <span className="text-[10px] font-bold uppercase">Confirm?</span>}
+    </button>
+  );
+}
diff --git a/src/components/dashboard/blog/BlogForm.tsx b/src/components/dashboard/blog/BlogForm.tsx
new file mode 100644
index 0000000..4995e93
--- /dev/null
+++ b/src/components/dashboard/blog/BlogForm.tsx
@@ -0,0 +1,252 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { BlogStatus } from "@prisma/client";
+import { createBlog, updateBlog } from "@/lib/actions/blog";
+import {
+  Save,
+  X,
+  Plus,
+  Trash2,
+  ChevronLeft,
+  Layout,
+  Type,
+  FileText,
+  Tag as TagIcon,
+  Globe,
+  Eye,
+} from "lucide-react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+interface BlogFormProps {
+  initialData?: any;
+}
+
+export function BlogForm({ initialData }: BlogFormProps) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [tags, setTags] = useState<string[]>(
+    initialData?.tags?.map((t: any) => t.name) || [],
+  );
+  const [tagInput, setTagInput] = useState("");
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const formData = new FormData(e.currentTarget);
+      const data = {
+        title: formData.get("title") as string,
+        slug: formData.get("slug") as string,
+        content: formData.get("content") as string,
+        excerpt: formData.get("excerpt") as string,
+        status: formData.get("status") as BlogStatus,
+        tags: tags,
+      };
+
+      if (initialData) {
+        await updateBlog(initialData.id, data);
+      } else {
+        await createBlog(data);
+      }
+
+      router.push("/dashboard/blog");
+      router.refresh();
+    } catch (error) {
+      console.error(error);
+      alert("Something went wrong. Check the console.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const addTag = () => {
+    if (tagInput && !tags.includes(tagInput)) {
+      setTags([...tags, tagInput]);
+      setTagInput("");
+    }
+  };
+
+  const removeTag = (tagToRemove: string) => {
+    setTags(tags.filter((t) => t !== tagToRemove));
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-8 max-w-5xl mx-auto pb-20">
+      <div className="flex items-center justify-between gap-4 border-b border-border pb-6">
+        <div className="flex items-center gap-4">
+          <Link
+            href="/dashboard/blog"
+            className="p-2 hover:bg-surface-elevated rounded-lg text-foreground-muted transition-colors"
+          >
+            <ChevronLeft size={20} />
+          </Link>
+          <div>
+            <h1 className="text-2xl font-display font-bold text-foreground">
+              {initialData ? "Edit Post" : "Create New Post"}
+            </h1>
+            <p className="text-sm text-foreground-muted">
+              {initialData ? "Make changes to your article." : "Draft a new masterpiece."}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => router.back()}
+            className="px-4 py-2 border border-border bg-surface text-foreground font-medium rounded-lg hover:bg-surface-elevated transition-all text-sm"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={loading}
+            className="inline-flex items-center gap-2 px-6 py-2 bg-primary text-primary-foreground font-semibold rounded-lg hover:shadow-lg hover:shadow-primary/20 transition-all disabled:opacity-50 text-sm"
+          >
+            <Save size={18} />
+            {loading ? "Saving..." : initialData ? "Update Changes" : "Publish Post"}
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Main Content */}
+        <div className="lg:col-span-2 space-y-6">
+          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-6 card-shadow">
+            <div className="space-y-2">
+              <label className="text-sm font-semibold text-foreground flex items-center gap-2">
+                <Type size={16} className="text-primary/60" />
+                Post Title
+              </label>
+              <input
+                name="title"
+                defaultValue={initialData?.title}
+                placeholder="Enter a catchy title..."
+                required
+                className="w-full px-4 py-3 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-lg font-medium"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-semibold text-foreground flex items-center gap-2">
+                <Globe size={16} className="text-primary/60" />
+                Slug URL
+              </label>
+              <div className="flex">
+                <span className="inline-flex items-center px-3 rounded-l-xl border border-r-0 border-border/50 bg-surface-elevated text-foreground-muted text-sm italic">
+                  /blog/
+                </span>
+                <input
+                  name="slug"
+                  defaultValue={initialData?.slug}
+                  placeholder="post-slug-here"
+                  required
+                  className="flex-1 px-4 py-2.5 bg-background border border-border/50 rounded-r-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm"
+                />
+              </div>
+            </div>
+
+            <div className="space-y-2">
+              <label className="text-sm font-semibold text-foreground flex items-center gap-2">
+                <FileText size={16} className="text-primary/60" />
+                Content (Markdown supported)
+              </label>
+              <textarea
+                name="content"
+                defaultValue={initialData?.content}
+                placeholder="Write your story here..."
+                required
+                rows={15}
+                className="w-full px-4 py-3 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm font-mono leading-relaxed"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Sidebar / Metadata */}
+        <div className="space-y-6">
+          {/* Status & Settings */}
+          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-6 card-shadow">
+            <h3 className="text-sm font-bold uppercase tracking-widest text-foreground-muted">Publishing</h3>
+            
+            <div className="space-y-2">
+              <label className="text-sm font-semibold text-foreground">Status</label>
+              <select
+                name="status"
+                defaultValue={initialData?.status || BlogStatus.DRAFT}
+                className="w-full px-4 py-2.5 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm"
+              >
+                <option value={BlogStatus.DRAFT}>Draft</option>
+                <option value={BlogStatus.PUBLISHED}>Published</option>
+                <option value={BlogStatus.SCHEDULED}>Scheduled</option>
+              </select>
+            </div>
+
+             <div className="space-y-2 pt-2 border-t border-border/50">
+              <label className="text-sm font-semibold text-foreground flex items-center gap-2">
+                <Layout size={16} className="text-primary/60" />
+                Excerpt
+              </label>
+              <textarea
+                name="excerpt"
+                defaultValue={initialData?.excerpt}
+                placeholder="Brief summary of the post..."
+                rows={4}
+                className="w-full px-4 py-3 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm leading-snug"
+              />
+            </div>
+          </div>
+
+          {/* Tags */}
+          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-4 card-shadow">
+            <h3 className="text-sm font-bold uppercase tracking-widest text-foreground-muted flex items-center gap-2">
+              <TagIcon size={14} />
+              Tags
+            </h3>
+            
+            <div className="flex gap-2">
+              <input
+                value={tagInput}
+                onChange={(e) => setTagInput(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addTag())}
+                placeholder="Add tag..."
+                className="flex-1 px-3 py-2 bg-background border border-border/50 rounded-lg text-xs outline-none focus:border-primary"
+              />
+              <button
+                type="button"
+                onClick={addTag}
+                className="p-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors"
+              >
+                <Plus size={16} />
+              </button>
+            </div>
+
+            <div className="flex flex-wrap gap-2 pt-2">
+              {tags.map((tag) => (
+                <span
+                  key={tag}
+                  className="inline-flex items-center gap-1 px-2 py-1 bg-surface-elevated border border-border/50 rounded-md text-[10px] font-bold text-foreground"
+                >
+                  {tag}
+                  <button
+                    type="button"
+                    onClick={() => removeTag(tag)}
+                    className="p-0.5 hover:text-destructive transition-colors"
+                  >
+                    <X size={10} />
+                  </button>
+                </span>
+              ))}
+              {tags.length === 0 && (
+                <p className="text-xs text-foreground-muted italic">No tags added yet.</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/dashboard/experience/ExperienceForm.tsx b/src/components/dashboard/experience/ExperienceForm.tsx
new file mode 100644
index 0000000..8e4a214
--- /dev/null
+++ b/src/components/dashboard/experience/ExperienceForm.tsx
@@ -0,0 +1,327 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { createExperience, updateExperience } from "@/lib/actions/experience";
+import {
+  Save,
+  ChevronLeft,
+  Briefcase,
+  Layers,
+  Building2,
+  Calendar,
+  Layers as TechIcon,
+  Trash2,
+  Plus,
+  X,
+  ListIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+interface ExperienceFormProps {
+  initialData?: any;
+}
+
+export function ExperienceForm({ initialData }: ExperienceFormProps) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [highlights, setHighlights] = useState<string[]>(
+    initialData?.highlights || [],
+  );
+  const [highlightInput, setHighlightInput] = useState("");
+  const [techStack, setTechStack] = useState<string[]>(
+    initialData?.techStack || [],
+  );
+  const [techInput, setTechInput] = useState("");
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const formData = new FormData(e.currentTarget);
+      const data = {
+        company: formData.get("company") as string,
+        role: formData.get("role") as string,
+        startDate: new Date(formData.get("startDate") as string),
+        endDate: formData.get("endDate") ? new Date(formData.get("endDate") as string) : null,
+        current: formData.get("current") === "on",
+        description: formData.get("description") as string,
+        highlights: highlights,
+        techStack: techStack,
+        order: parseInt(formData.get("order") as string) || 0,
+      };
+
+      if (initialData) {
+        await updateExperience(initialData.id, data);
+      } else {
+        await createExperience(data);
+      }
+
+      router.push("/dashboard/experience");
+      router.refresh();
+    } catch (error) {
+      console.error(error);
+      alert("Something went wrong.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const addHighlight = () => {
+    if (highlightInput && !highlights.includes(highlightInput)) {
+      setHighlights([...highlights, highlightInput]);
+      setHighlightInput("");
+    }
+  };
+
+  const removeHighlight = (h: string) => {
+    setHighlights(highlights.filter((t) => t !== h));
+  };
+
+  const addTech = () => {
+    if (techInput && !techStack.includes(techInput)) {
+      setTechStack([...techStack, techInput]);
+      setTechInput("");
+    }
+  };
+
+  const removeTech = (t: string) => {
+    setTechStack(techStack.filter((tech) => tech !== t));
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-8 max-w-5xl mx-auto pb-20">
+      <div className="flex items-center justify-between gap-4 border-b border-border pb-6">
+        <div className="flex items-center gap-4">
+          <Link
+            href="/dashboard/experience"
+            className="p-2 hover:bg-surface-elevated rounded-lg text-foreground-muted transition-colors"
+          >
+            <ChevronLeft size={20} />
+          </Link>
+          <div>
+            <h1 className="text-2xl font-display font-bold text-foreground">
+              {initialData ? "Edit Position" : "Add Work Experience"}
+            </h1>
+            <p className="text-sm text-foreground-muted">
+              {initialData ? "Updating your career details." : "Showcase your professional journey."}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => router.back()}
+            className="px-4 py-2 border border-border bg-surface text-foreground font-medium rounded-lg hover:bg-surface-elevated transition-all text-sm"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={loading}
+            className="inline-flex items-center gap-2 px-6 py-2 bg-primary text-primary-foreground font-semibold rounded-lg hover:shadow-lg hover:shadow-primary/20 transition-all disabled:opacity-50 text-sm"
+          >
+            <Save size={18} />
+            {loading ? "Saving..." : initialData ? "Update Record" : "Add Experience"}
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2 space-y-6">
+          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-6 card-shadow">
+               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                 <div className="space-y-2">
+                   <label className="text-sm font-semibold text-foreground flex items-center gap-2">
+                     <Building2 size={16} className="text-primary/60" />
+                     Company Name
+                   </label>
+                   <input
+                     name="company"
+                     defaultValue={initialData?.company}
+                     placeholder="e.g. Google"
+                     required
+                     className="w-full px-4 py-2.5 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm font-medium"
+                   />
+                 </div>
+                 <div className="space-y-2">
+                   <label className="text-sm font-semibold text-foreground flex items-center gap-2">
+                     <Briefcase size={16} className="text-primary/60" />
+                     Job Role
+                   </label>
+                   <input
+                     name="role"
+                     defaultValue={initialData?.role}
+                     placeholder="e.g. Senior Frontend Developer"
+                     required
+                     className="w-full px-4 py-2.5 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm font-medium"
+                   />
+                 </div>
+               </div>
+
+               <div className="space-y-2 pt-4">
+                 <label className="text-sm font-semibold text-foreground">Position Overview</label>
+                 <textarea
+                   name="description"
+                   defaultValue={initialData?.description}
+                   placeholder="Briefly summarize your key responsibilities and impact..."
+                   required
+                   rows={4}
+                   className="w-full px-4 py-3 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm leading-relaxed"
+                 />
+               </div>
+          </div>
+
+          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-4 card-shadow">
+             <h3 className="text-sm font-bold uppercase tracking-widest text-foreground-muted flex items-center gap-2">
+              <ListIcon size={14} />
+              Key Highlights & Impact
+            </h3>
+            
+            <div className="flex gap-2">
+              <input
+                value={highlightInput}
+                onChange={(e) => setHighlightInput(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addHighlight())}
+                placeholder="Add high-impact achievement..."
+                className="flex-1 px-3 py-2 bg-background border border-border/50 rounded-lg text-xs outline-none focus:border-primary"
+              />
+              <button
+                type="button"
+                onClick={addHighlight}
+                className="p-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors"
+              >
+                <Plus size={16} />
+              </button>
+            </div>
+
+            <div className="space-y-2 pt-2">
+              {highlights.map((h) => (
+                <div
+                  key={h}
+                  className="flex items-start gap-3 p-3 bg-surface-elevated/50 border border-border/40 rounded-xl group"
+                >
+                  <div className="w-1.5 h-1.5 rounded-full bg-primary shrink-0 mt-1.5" />
+                  <span className="text-xs text-foreground flex-1 leading-normal">{h}</span>
+                  <button
+                    type="button"
+                    onClick={() => removeHighlight(h)}
+                    className="p-1 text-foreground-muted hover:text-destructive transition-colors opacity-0 group-hover:opacity-100"
+                  >
+                    <Trash2 size={12} />
+                  </button>
+                </div>
+              ))}
+              {highlights.length === 0 && (
+                <p className="text-xs text-foreground-muted italic text-center py-4 bg-background/30 rounded-xl border border-dashed border-border/50">Describe your biggest wins in this role.</p>
+              )}
+            </div>
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-6 card-shadow">
+               <h3 className="text-sm font-bold uppercase tracking-widest text-foreground-muted">Timeline</h3>
+               
+               <div className="space-y-4">
+                  <div className="space-y-2">
+                    <label className="text-xs font-semibold text-foreground flex items-center gap-2">
+                      <Calendar size={14} />
+                      Start Date
+                    </label>
+                    <input
+                      name="startDate"
+                      type="date"
+                      defaultValue={initialData?.startDate ? new Date(initialData.startDate).toISOString().split('T')[0] : ""}
+                      required
+                      className="w-full px-3 py-2 bg-background border border-border/50 rounded-lg outline-none text-xs"
+                    />
+                  </div>
+
+                  <div className="space-y-2">
+                    <label className="text-xs font-semibold text-foreground flex items-center gap-2">
+                      <Calendar size={14} />
+                      End Date
+                    </label>
+                    <input
+                      name="endDate"
+                      type="date"
+                      defaultValue={initialData?.endDate ? new Date(initialData.endDate).toISOString().split('T')[0] : ""}
+                      disabled={initialData?.current}
+                      className="w-full px-3 py-2 bg-background border border-border/50 rounded-lg outline-none text-xs disabled:opacity-40"
+                    />
+                  </div>
+
+                  <div className="flex items-center gap-2 pt-2">
+                    <input
+                      name="current"
+                      type="checkbox"
+                      id="current"
+                      defaultChecked={initialData?.current}
+                      className="w-3.5 h-3.5 rounded border-border text-primary focus:ring-primary outline-none"
+                    />
+                    <label htmlFor="current" className="text-xs font-medium text-foreground cursor-pointer">
+                      Ongoing (Currently active)
+                    </label>
+                  </div>
+               </div>
+
+               <div className="pt-4 border-t border-border/50">
+                  <label className="text-xs font-semibold text-foreground">Listing Priority Order</label>
+                  <input
+                    name="order"
+                    type="number"
+                    defaultValue={initialData?.order || 0}
+                    className="w-full mt-2 px-3 py-2 bg-background border border-border/50 rounded-lg outline-none text-xs"
+                  />
+               </div>
+          </div>
+
+           <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-4 card-shadow">
+             <h3 className="text-sm font-bold uppercase tracking-widest text-foreground-muted flex items-center gap-2">
+              <TechIcon size={14} />
+              Skills & Tech
+            </h3>
+            
+            <div className="flex gap-2">
+              <input
+                value={techInput}
+                onChange={(e) => setTechInput(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addTech())}
+                placeholder="Add tech..."
+                className="flex-1 px-3 py-2 bg-background border border-border/50 rounded-lg text-xs outline-none focus:border-primary"
+              />
+              <button
+                type="button"
+                onClick={addTech}
+                className="p-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors"
+              >
+                <Plus size={16} />
+              </button>
+            </div>
+
+            <div className="flex flex-wrap gap-2 pt-2">
+              {techStack.map((tech) => (
+                <span
+                  key={tech}
+                  className="inline-flex items-center gap-1 px-2 py-1 bg-surface-elevated border border-border/50 rounded-md text-[10px] font-bold text-foreground"
+                >
+                  {tech}
+                  <button
+                    type="button"
+                    onClick={() => removeTech(tech)}
+                    className="p-0.5 hover:text-destructive transition-colors"
+                  >
+                    <X size={10} />
+                  </button>
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/src/components/dashboard/projects/ProjectForm.tsx b/src/components/dashboard/projects/ProjectForm.tsx
new file mode 100644
index 0000000..bd7393e
--- /dev/null
+++ b/src/components/dashboard/projects/ProjectForm.tsx
@@ -0,0 +1,270 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { createProject, updateProject } from "@/lib/actions/project";
+import {
+  Save,
+  ChevronLeft,
+  Briefcase,
+  Layers,
+  Link as LinkIcon,
+  Github,
+  Award,
+  Trash2,
+  Plus,
+  X,
+} from "lucide-react";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+interface ProjectFormProps {
+  initialData?: any;
+}
+
+export function ProjectForm({ initialData }: ProjectFormProps) {
+  const router = useRouter();
+  const [loading, setLoading] = useState(false);
+  const [techStack, setTechStack] = useState<string[]>(
+    initialData?.techStack || [],
+  );
+  const [techInput, setTechInput] = useState("");
+
+  async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
+    e.preventDefault();
+    setLoading(true);
+
+    try {
+      const formData = new FormData(e.currentTarget);
+      const data = {
+        title: formData.get("title") as string,
+        description: formData.get("description") as string,
+        imageUrl: formData.get("imageUrl") as string || null,
+        liveUrl: formData.get("liveUrl") as string || null,
+        githubUrl: formData.get("githubUrl") as string || null,
+        techStack: techStack,
+        featured: formData.get("featured") === "on",
+        order: parseInt(formData.get("order") as string) || 0,
+      };
+
+      if (initialData) {
+        await updateProject(initialData.id, data);
+      } else {
+        await createProject(data);
+      }
+
+      router.push("/dashboard/projects");
+      router.refresh();
+    } catch (error) {
+      console.error(error);
+      alert("Something went wrong.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const addTech = () => {
+    if (techInput && !techStack.includes(techInput)) {
+      setTechStack([...techStack, techInput]);
+      setTechInput("");
+    }
+  };
+
+  const removeTech = (tech: string) => {
+    setTechStack(techStack.filter((t) => t !== tech));
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-8 max-w-5xl mx-auto pb-20">
+      <div className="flex items-center justify-between gap-4 border-b border-border pb-6">
+        <div className="flex items-center gap-4">
+          <Link
+            href="/dashboard/projects"
+            className="p-2 hover:bg-surface-elevated rounded-lg text-foreground-muted transition-colors"
+          >
+            <ChevronLeft size={20} />
+          </Link>
+          <div>
+            <h1 className="text-2xl font-display font-bold text-foreground">
+              {initialData ? "Edit Project" : "New Portfolio Project"}
+            </h1>
+            <p className="text-sm text-foreground-muted">
+              {initialData ? "Refine your project details." : "Add a new achievement to your collection."}
+            </p>
+          </div>
+        </div>
+        <div className="flex items-center gap-3">
+          <button
+            type="button"
+            onClick={() => router.back()}
+            className="px-4 py-2 border border-border bg-surface text-foreground font-medium rounded-lg hover:bg-surface-elevated transition-all text-sm"
+          >
+            Cancel
+          </button>
+          <button
+            type="submit"
+            disabled={loading}
+            className="inline-flex items-center gap-2 px-6 py-2 bg-primary text-primary-foreground font-semibold rounded-lg hover:shadow-lg hover:shadow-primary/20 transition-all disabled:opacity-50 text-sm"
+          >
+            <Save size={18} />
+            {loading ? "Saving..." : initialData ? "Update Project" : "Create Project"}
+          </button>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        <div className="lg:col-span-2 space-y-6">
+          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-6 card-shadow">
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <label className="text-sm font-semibold text-foreground flex items-center gap-2">
+                   <Briefcase size={16} className="text-primary/60" />
+                   Project Title
+                </label>
+                <input
+                  name="title"
+                  defaultValue={initialData?.title}
+                  placeholder="e.g. Finance Hub Pro"
+                  required
+                  className="w-full px-4 py-2.5 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm font-medium"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <label className="text-sm font-semibold text-foreground">Detailed Description</label>
+                <textarea
+                  name="description"
+                  defaultValue={initialData?.description}
+                  placeholder="Describe your project, your role, and the value it provided..."
+                  required
+                  rows={8}
+                  className="w-full px-4 py-3 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all text-sm leading-relaxed"
+                />
+              </div>
+            </div>
+          </div>
+
+          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-6 card-shadow">
+             <h3 className="text-sm font-bold uppercase tracking-widest text-foreground-muted">Assets & Visibility</h3>
+             
+             <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <label className="text-sm font-semibold text-foreground">Thumbnail Image URL</label>
+                  <input
+                    name="imageUrl"
+                    defaultValue={initialData?.imageUrl}
+                    placeholder="https://..."
+                    className="w-full px-4 py-2 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 outline-none transition-all text-sm"
+                  />
+                </div>
+                 <div className="space-y-2">
+                  <label className="text-sm font-semibold text-foreground">Display Order</label>
+                  <input
+                    name="order"
+                    type="number"
+                    defaultValue={initialData?.order || 0}
+                    className="w-full px-4 py-2 bg-background border border-border/50 rounded-xl focus:ring-2 focus:ring-primary/20 outline-none transition-all text-sm"
+                  />
+                </div>
+             </div>
+
+             <div className="flex items-center gap-2 pt-4 border-t border-border/50">
+               <input
+                 name="featured"
+                 type="checkbox"
+                 id="featured"
+                 defaultChecked={initialData?.featured}
+                 className="w-4 h-4 rounded border-border text-primary focus:ring-primary"
+               />
+               <label htmlFor="featured" className="text-sm font-medium text-foreground flex items-center gap-1.5 cursor-pointer">
+                 <Award size={14} className="text-yellow-500" />
+                 Feature this project on homepage
+               </label>
+             </div>
+          </div>
+        </div>
+
+        <div className="space-y-6">
+          {/* Links Section */}
+          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-4 card-shadow">
+            <h3 className="text-sm font-bold uppercase tracking-widest text-foreground-muted">Project Links</h3>
+            
+            <div className="space-y-4">
+               <div className="space-y-2">
+                <label className="text-xs font-semibold text-foreground flex items-center gap-2">
+                  <LinkIcon size={14} />
+                  Live Preview URL
+                </label>
+                <input
+                  name="liveUrl"
+                  defaultValue={initialData?.liveUrl}
+                  placeholder="https://example.com"
+                  className="w-full px-3 py-2 bg-background border border-border/50 rounded-lg focus:ring-2 focus:ring-primary/20 outline-none transition-all text-xs"
+                />
+              </div>
+
+               <div className="space-y-2">
+                <label className="text-xs font-semibold text-foreground flex items-center gap-2">
+                  <Github size={14} />
+                  Github Repository
+                </label>
+                <input
+                  name="githubUrl"
+                  defaultValue={initialData?.githubUrl}
+                  placeholder="https://github.com/..."
+                  className="w-full px-3 py-2 bg-background border border-border/50 rounded-lg focus:ring-2 focus:ring-primary/20 outline-none transition-all text-xs"
+                />
+              </div>
+            </div>
+          </div>
+
+          {/* Tech Stack */}
+          <div className="bg-surface border border-border/50 rounded-2xl p-6 space-y-4 card-shadow">
+             <h3 className="text-sm font-bold uppercase tracking-widest text-foreground-muted flex items-center gap-2">
+              <Layers size={14} />
+              Tech Stack
+            </h3>
+            
+            <div className="flex gap-2">
+              <input
+                value={techInput}
+                onChange={(e) => setTechInput(e.target.value)}
+                onKeyDown={(e) => e.key === "Enter" && (e.preventDefault(), addTech())}
+                placeholder="Add tech..."
+                className="flex-1 px-3 py-2 bg-background border border-border/50 rounded-lg text-xs outline-none focus:border-primary"
+              />
+              <button
+                type="button"
+                onClick={addTech}
+                className="p-2 bg-primary/10 text-primary rounded-lg hover:bg-primary/20 transition-colors"
+              >
+                <Plus size={16} />
+              </button>
+            </div>
+
+            <div className="flex flex-wrap gap-2 pt-2">
+              {techStack.map((tech) => (
+                <span
+                  key={tech}
+                  className="inline-flex items-center gap-1 px-2 py-1 bg-surface-elevated border border-border/50 rounded-md text-[10px] font-bold text-foreground"
+                >
+                  {tech}
+                  <button
+                    type="button"
+                    onClick={() => removeTech(tech)}
+                    className="p-0.5 hover:text-destructive transition-colors"
+                  >
+                    <X size={10} />
+                  </button>
+                </span>
+              ))}
+              {techStack.length === 0 && (
+                <p className="text-xs text-foreground-muted italic text-center w-full">No technologies listed.</p>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
diff --git a/src/lib/actions/blog.ts b/src/lib/actions/blog.ts
new file mode 100644
index 0000000..e6f1ca0
--- /dev/null
+++ b/src/lib/actions/blog.ts
@@ -0,0 +1,86 @@
+"use server";
+
+import { prisma } from "@/lib/prisma";
+import { BlogStatus } from "@prisma/client";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+const BlogSchema = z.object({
+  title: z.string().min(1, "Title is required"),
+  slug: z.string().min(1, "Slug is required"),
+  content: z.string().min(1, "Content is required"),
+  excerpt: z.string().optional(),
+  status: z.nativeEnum(BlogStatus),
+  publishedAt: z.coerce.date().nullable().optional(),
+  tags: z.array(z.string()).optional(),
+});
+
+export async function createBlog(data: z.infer<typeof BlogSchema>) {
+  const validated = BlogSchema.parse(data);
+
+  const blog = await prisma.blog.create({
+    data: {
+      title: validated.title,
+      slug: validated.slug,
+      content: validated.content,
+      excerpt: validated.excerpt,
+      status: validated.status,
+      publishedAt: validated.status === BlogStatus.PUBLISHED ? new Date() : null,
+      tags: {
+        connectOrCreate: validated.tags?.map((tag) => ({
+          where: { name: tag },
+          create: { name: tag },
+        })),
+      },
+    },
+  });
+
+  revalidatePath("/dashboard/blog");
+  revalidatePath("/blog");
+  return blog;
+}
+
+export async function updateBlog(id: string, data: z.infer<typeof BlogSchema>) {
+  const validated = BlogSchema.parse(data);
+
+  const blog = await prisma.blog.update({
+    where: { id },
+    data: {
+      title: validated.title,
+      slug: validated.slug,
+      content: validated.content,
+      excerpt: validated.excerpt,
+      status: validated.status,
+      publishedAt: validated.status === BlogStatus.PUBLISHED ? new Date() : null,
+      tags: {
+        set: [], // Clear existing tags
+        connectOrCreate: validated.tags?.map((tag) => ({
+          where: { name: tag },
+          create: { name: tag },
+        })),
+      },
+    },
+  });
+
+  revalidatePath("/dashboard/blog");
+  revalidatePath("/blog");
+  revalidatePath(`/blog/${blog.slug}`);
+  return blog;
+}
+
+export async function deleteBlog(id: string) {
+  const blog = await prisma.blog.delete({
+    where: { id },
+  });
+
+  revalidatePath("/dashboard/blog");
+  revalidatePath("/blog");
+  return blog;
+}
+
+export async function getBlogs() {
+  return await prisma.blog.findMany({
+    orderBy: { createdAt: "desc" },
+    include: { tags: true },
+  });
+}
diff --git a/src/lib/actions/experience.ts b/src/lib/actions/experience.ts
new file mode 100644
index 0000000..809b703
--- /dev/null
+++ b/src/lib/actions/experience.ts
@@ -0,0 +1,58 @@
+"use server";
+
+import { prisma } from "@/lib/prisma";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+const ExperienceSchema = z.object({
+  company: z.string().min(1, "Company is required"),
+  role: z.string().min(1, "Role is required"),
+  startDate: z.coerce.date(),
+  endDate: z.coerce.date().nullable().optional(),
+  current: z.boolean().default(false),
+  description: z.string().min(1, "Description is required"),
+  highlights: z.array(z.string()).optional().default([]),
+  techStack: z.array(z.string()).optional().default([]),
+  order: z.coerce.number().default(0),
+});
+
+export async function createExperience(data: z.infer<typeof ExperienceSchema>) {
+  const validated = ExperienceSchema.parse(data);
+
+  const experience = await prisma.experience.create({
+    data: validated,
+  });
+
+  revalidatePath("/dashboard/experience");
+  revalidatePath("/experience");
+  return experience;
+}
+
+export async function updateExperience(id: string, data: z.infer<typeof ExperienceSchema>) {
+  const validated = ExperienceSchema.parse(data);
+
+  const experience = await prisma.experience.update({
+    where: { id },
+    data: validated,
+  });
+
+  revalidatePath("/dashboard/experience");
+  revalidatePath("/experience");
+  return experience;
+}
+
+export async function deleteExperience(id: string) {
+  const experience = await prisma.experience.delete({
+    where: { id },
+  });
+
+  revalidatePath("/dashboard/experience");
+  revalidatePath("/experience");
+  return experience;
+}
+
+export async function getExperiences() {
+  return await prisma.experience.findMany({
+    orderBy: { startDate: "desc" },
+  });
+}
diff --git a/src/lib/actions/project.ts b/src/lib/actions/project.ts
new file mode 100644
index 0000000..e1903a3
--- /dev/null
+++ b/src/lib/actions/project.ts
@@ -0,0 +1,57 @@
+"use server";
+
+import { prisma } from "@/lib/prisma";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+const ProjectSchema = z.object({
+  title: z.string().min(1, "Title is required"),
+  description: z.string().min(1, "Description is required"),
+  imageUrl: z.string().optional().nullable(),
+  liveUrl: z.string().optional().nullable(),
+  githubUrl: z.string().optional().nullable(),
+  techStack: z.array(z.string()).min(1, "At least one tech stack is required"),
+  featured: z.boolean().default(false),
+  order: z.coerce.number().default(0),
+});
+
+export async function createProject(data: z.infer<typeof ProjectSchema>) {
+  const validated = ProjectSchema.parse(data);
+
+  const project = await prisma.project.create({
+    data: validated,
+  });
+
+  revalidatePath("/dashboard/projects");
+  revalidatePath("/projects");
+  return project;
+}
+
+export async function updateProject(id: string, data: z.infer<typeof ProjectSchema>) {
+  const validated = ProjectSchema.parse(data);
+
+  const project = await prisma.project.update({
+    where: { id },
+    data: validated,
+  });
+
+  revalidatePath("/dashboard/projects");
+  revalidatePath("/projects");
+  return project;
+}
+
+export async function deleteProject(id: string) {
+  const project = await prisma.project.delete({
+    where: { id },
+  });
+
+  revalidatePath("/dashboard/projects");
+  revalidatePath("/projects");
+  return project;
+}
+
+export async function getProjects() {
+  return await prisma.project.findMany({
+    orderBy: [{ order: "asc" }, { createdAt: "desc" }],
+  });
+}