diff --git a/.gitignore b/.gitignore
index 42381fc..ba6ae26 100644
--- a/.gitignore
+++ b/.gitignore
@@ -24,3 +24,4 @@ vite.config.ts.timestamp-*
 
 generated/*
 src/generated/*
+.github/*
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..981fc08
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,12 @@
+{
+  "editor.tabSize": 2,
+  "editor.insertSpaces": true,
+  "[javascript]": {
+    "editor.tabSize": 2,
+    "editor.insertSpaces": true
+  },
+  "[svelte]": {
+    "editor.tabSize": 2,
+    "editor.insertSpaces": true
+  }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index bb48261..e29cda1 100644
--- a/package.json
+++ b/package.json
@@ -17,25 +17,26 @@
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
 		"@sveltejs/adapter-node": "^5.2.12",
-		"@sveltejs/kit": "^2.20.4",
+		"@sveltejs/kit": "^2.20.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/typography": "^0.5.16",
-		"@tailwindcss/vite": "^4.1.2",
+		"@tailwindcss/vite": "^4.1.4",
 		"eslint": "^9.18.0",
 		"eslint-config-prettier": "^10.0.1",
 		"eslint-plugin-svelte": "^3.0.0",
 		"flowbite": "^3.1.2",
-		"flowbite-svelte": "^0.48.4",
+		"flowbite-svelte": "^0.48.6",
 		"globals": "^16.0.0",
-		"prettier": "^3.4.2",
+		"prettier": "^3.5.3",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"prisma": "6.5.0",
-		"svelte": "^5.25.6",
-		"svelte-check": "^4.1.2",
-		"tailwindcss": "^4.1.2",
+		"svelte": "^5.27.0",
+		"svelte-check": "^4.1.6",
+		"svelte-dnd-action": "^0.9.60",
+		"tailwindcss": "^4.1.4",
 		"typescript": "^5.0.0",
-		"vite": "^6.2.5"
+		"vite": "^6.3.0"
 	},
 	"pnpm": {
 		"onlyBuiltDependencies": [
@@ -47,8 +48,9 @@
 		"@fortawesome/free-solid-svg-icons": "^6.7.2",
 		"@prisma/client": "6.5.0",
 		"axios": "^1.8.4",
+		"date-fns": "^4.1.0",
 		"flowbite-svelte-blocks": "^1.1.4",
-		"flowbite-svelte-icons": "^2.1.0",
+		"flowbite-svelte-icons": "^2.1.1",
 		"svelte-fa": "^4.0.3",
 		"uuid": "^11.1.0"
 	}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 920d0e0..68e8fdd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -20,15 +20,18 @@ importers:
       axios:
         specifier: ^1.8.4
         version: 1.8.4
+      date-fns:
+        specifier: ^4.1.0
+        version: 4.1.0
       flowbite-svelte-blocks:
         specifier: ^1.1.4
-        version: 1.1.4(rollup@4.39.0)(svelte@5.25.12)
+        version: 1.1.4(rollup@4.39.0)(svelte@5.27.0)
       flowbite-svelte-icons:
-        specifier: ^2.1.0
-        version: 2.1.1(svelte@5.25.12)(tailwind-merge@3.2.0)
+        specifier: ^2.1.1
+        version: 2.1.1(svelte@5.27.0)(tailwind-merge@3.2.0)
       svelte-fa:
         specifier: ^4.0.3
-        version: 4.0.3(svelte@5.25.12)
+        version: 4.0.3(svelte@5.27.0)
       uuid:
         specifier: ^11.1.0
         version: 11.1.0
@@ -41,19 +44,19 @@ importers:
         version: 9.24.0
       '@sveltejs/adapter-node':
         specifier: ^5.2.12
-        version: 5.2.12(@sveltejs/kit@2.20.5(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2)))
+        version: 5.2.12(@sveltejs/kit@2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2)))
       '@sveltejs/kit':
-        specifier: ^2.20.4
-        version: 2.20.5(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2))
+        specifier: ^2.20.7
+        version: 2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.3
-        version: 5.0.3(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2))
+        version: 5.0.3(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2))
       '@tailwindcss/typography':
         specifier: ^0.5.16
-        version: 0.5.16(tailwindcss@4.1.3)
+        version: 0.5.16(tailwindcss@4.1.4)
       '@tailwindcss/vite':
-        specifier: ^4.1.2
-        version: 4.1.3(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2))
+        specifier: ^4.1.4
+        version: 4.1.4(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2))
       eslint:
         specifier: ^9.18.0
         version: 9.24.0(jiti@2.4.2)
@@ -62,43 +65,46 @@ importers:
         version: 10.1.2(eslint@9.24.0(jiti@2.4.2))
       eslint-plugin-svelte:
         specifier: ^3.0.0
-        version: 3.5.1(eslint@9.24.0(jiti@2.4.2))(svelte@5.25.12)
+        version: 3.5.1(eslint@9.24.0(jiti@2.4.2))(svelte@5.27.0)
       flowbite:
         specifier: ^3.1.2
         version: 3.1.2(rollup@4.39.0)
       flowbite-svelte:
-        specifier: ^0.48.4
-        version: 0.48.6(rollup@4.39.0)(svelte@5.25.12)
+        specifier: ^0.48.6
+        version: 0.48.6(rollup@4.39.0)(svelte@5.27.0)
       globals:
         specifier: ^16.0.0
         version: 16.0.0
       prettier:
-        specifier: ^3.4.2
+        specifier: ^3.5.3
         version: 3.5.3
       prettier-plugin-svelte:
         specifier: ^3.3.3
-        version: 3.3.3(prettier@3.5.3)(svelte@5.25.12)
+        version: 3.3.3(prettier@3.5.3)(svelte@5.27.0)
       prettier-plugin-tailwindcss:
         specifier: ^0.6.11
-        version: 0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.25.12))(prettier@3.5.3)
+        version: 0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.27.0))(prettier@3.5.3)
       prisma:
         specifier: 6.5.0
         version: 6.5.0(typescript@5.8.3)
       svelte:
-        specifier: ^5.25.6
-        version: 5.25.12
+        specifier: ^5.27.0
+        version: 5.27.0
       svelte-check:
-        specifier: ^4.1.2
-        version: 4.1.5(picomatch@4.0.2)(svelte@5.25.12)(typescript@5.8.3)
+        specifier: ^4.1.6
+        version: 4.1.6(picomatch@4.0.2)(svelte@5.27.0)(typescript@5.8.3)
+      svelte-dnd-action:
+        specifier: ^0.9.60
+        version: 0.9.60(svelte@5.27.0)
       tailwindcss:
-        specifier: ^4.1.2
-        version: 4.1.3
+        specifier: ^4.1.4
+        version: 4.1.4
       typescript:
         specifier: ^5.0.0
         version: 5.8.3
       vite:
-        specifier: ^6.2.5
-        version: 6.2.6(jiti@2.4.2)(lightningcss@1.29.2)
+        specifier: ^6.3.0
+        version: 6.3.0(jiti@2.4.2)(lightningcss@1.29.2)
 
 packages:
 
@@ -557,8 +563,8 @@ packages:
     peerDependencies:
       '@sveltejs/kit': ^2.4.0
 
-  '@sveltejs/kit@2.20.5':
-    resolution: {integrity: sha512-zT/97KvVUo19jEGZa972ls7KICjPCB53j54TVxnEFT5VEwL16G+YFqRVwJbfxh7AmS7/Ptr1rKF7Qt4FBMDNlw==}
+  '@sveltejs/kit@2.20.7':
+    resolution: {integrity: sha512-dVbLMubpJJSLI4OYB+yWYNHGAhgc2bVevWuBjDj8jFUXIJOAnLwYP3vsmtcgoxNGUXoq0rHS5f7MFCsryb6nzg==}
     engines: {node: '>=18.13'}
     hasBin: true
     peerDependencies:
@@ -581,77 +587,89 @@ packages:
       svelte: ^5.0.0
       vite: ^6.0.0
 
-  '@tailwindcss/node@4.1.3':
-    resolution: {integrity: sha512-H/6r6IPFJkCfBJZ2dKZiPJ7Ueb2wbL592+9bQEl2r73qbX6yGnmQVIfiUvDRB2YI0a3PWDrzUwkvQx1XW1bNkA==}
+  '@tailwindcss/node@4.1.4':
+    resolution: {integrity: sha512-MT5118zaiO6x6hNA04OWInuAiP1YISXql8Z+/Y8iisV5nuhM8VXlyhRuqc2PEviPszcXI66W44bCIk500Oolhw==}
 
-  '@tailwindcss/oxide-android-arm64@4.1.3':
-    resolution: {integrity: sha512-cxklKjtNLwFl3mDYw4XpEfBY+G8ssSg9ADL4Wm6//5woi3XGqlxFsnV5Zb6v07dxw1NvEX2uoqsxO/zWQsgR+g==}
+  '@tailwindcss/oxide-android-arm64@4.1.4':
+    resolution: {integrity: sha512-xMMAe/SaCN/vHfQYui3fqaBDEXMu22BVwQ33veLc8ep+DNy7CWN52L+TTG9y1K397w9nkzv+Mw+mZWISiqhmlA==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [android]
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.3':
-    resolution: {integrity: sha512-mqkf2tLR5VCrjBvuRDwzKNShRu99gCAVMkVsaEOFvv6cCjlEKXRecPu9DEnxp6STk5z+Vlbh1M5zY3nQCXMXhw==}
+  '@tailwindcss/oxide-darwin-arm64@4.1.4':
+    resolution: {integrity: sha512-JGRj0SYFuDuAGilWFBlshcexev2hOKfNkoX+0QTksKYq2zgF9VY/vVMq9m8IObYnLna0Xlg+ytCi2FN2rOL0Sg==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [darwin]
 
-  '@tailwindcss/oxide-darwin-x64@4.1.3':
-    resolution: {integrity: sha512-7sGraGaWzXvCLyxrc7d+CCpUN3fYnkkcso3rCzwUmo/LteAl2ZGCDlGvDD8Y/1D3ngxT8KgDj1DSwOnNewKhmg==}
+  '@tailwindcss/oxide-darwin-x64@4.1.4':
+    resolution: {integrity: sha512-sdDeLNvs3cYeWsEJ4H1DvjOzaGios4QbBTNLVLVs0XQ0V95bffT3+scptzYGPMjm7xv4+qMhCDrkHwhnUySEzA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [darwin]
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.3':
-    resolution: {integrity: sha512-E2+PbcbzIReaAYZe997wb9rId246yDkCwAakllAWSGqe6VTg9hHle67hfH6ExjpV2LSK/siRzBUs5wVff3RW9w==}
+  '@tailwindcss/oxide-freebsd-x64@4.1.4':
+    resolution: {integrity: sha512-VHxAqxqdghM83HslPhRsNhHo91McsxRJaEnShJOMu8mHmEj9Ig7ToHJtDukkuLWLzLboh2XSjq/0zO6wgvykNA==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [freebsd]
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.3':
-    resolution: {integrity: sha512-GvfbJ8wjSSjbLFFE3UYz4Eh8i4L6GiEYqCtA8j2Zd2oXriPuom/Ah/64pg/szWycQpzRnbDiJozoxFU2oJZyfg==}
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.4':
+    resolution: {integrity: sha512-OTU/m/eV4gQKxy9r5acuesqaymyeSCnsx1cFto/I1WhPmi5HDxX1nkzb8KYBiwkHIGg7CTfo/AcGzoXAJBxLfg==}
     engines: {node: '>= 10'}
     cpu: [arm]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.3':
-    resolution: {integrity: sha512-35UkuCWQTeG9BHcBQXndDOrpsnt3Pj9NVIB4CgNiKmpG8GnCNXeMczkUpOoqcOhO6Cc/mM2W7kaQ/MTEENDDXg==}
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.4':
+    resolution: {integrity: sha512-hKlLNvbmUC6z5g/J4H+Zx7f7w15whSVImokLPmP6ff1QqTVE+TxUM9PGuNsjHvkvlHUtGTdDnOvGNSEUiXI1Ww==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.3':
-    resolution: {integrity: sha512-dm18aQiML5QCj9DQo7wMbt1Z2tl3Giht54uVR87a84X8qRtuXxUqnKQkRDK5B4bCOmcZ580lF9YcoMkbDYTXHQ==}
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.4':
+    resolution: {integrity: sha512-X3As2xhtgPTY/m5edUtddmZ8rCruvBvtxYLMw9OsZdH01L2gS2icsHRwxdU0dMItNfVmrBezueXZCHxVeeb7Aw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.3':
-    resolution: {integrity: sha512-LMdTmGe/NPtGOaOfV2HuO7w07jI3cflPrVq5CXl+2O93DCewADK0uW1ORNAcfu2YxDUS035eY2W38TxrsqngxA==}
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.4':
+    resolution: {integrity: sha512-2VG4DqhGaDSmYIu6C4ua2vSLXnJsb/C9liej7TuSO04NK+JJJgJucDUgmX6sn7Gw3Cs5ZJ9ZLrnI0QRDOjLfNQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.3':
-    resolution: {integrity: sha512-aalNWwIi54bbFEizwl1/XpmdDrOaCjRFQRgtbv9slWjmNPuJJTIKPHf5/XXDARc9CneW9FkSTqTbyvNecYAEGw==}
+  '@tailwindcss/oxide-linux-x64-musl@4.1.4':
+    resolution: {integrity: sha512-v+mxVgH2kmur/X5Mdrz9m7TsoVjbdYQT0b4Z+dr+I4RvreCNXyCFELZL/DO0M1RsidZTrm6O1eMnV6zlgEzTMQ==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.3':
-    resolution: {integrity: sha512-PEj7XR4OGTGoboTIAdXicKuWl4EQIjKHKuR+bFy9oYN7CFZo0eu74+70O4XuERX4yjqVZGAkCdglBODlgqcCXg==}
+  '@tailwindcss/oxide-wasm32-wasi@4.1.4':
+    resolution: {integrity: sha512-2TLe9ir+9esCf6Wm+lLWTMbgklIjiF0pbmDnwmhR9MksVOq+e8aP3TSsXySnBDDvTTVd/vKu1aNttEGj3P6l8Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.4':
+    resolution: {integrity: sha512-VlnhfilPlO0ltxW9/BgfLI5547PYzqBMPIzRrk4W7uupgCt8z6Trw/tAj6QUtF2om+1MH281Pg+HHUJoLesmng==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [win32]
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.3':
-    resolution: {integrity: sha512-T8gfxECWDBENotpw3HR9SmNiHC9AOJdxs+woasRZ8Q/J4VHN0OMs7F+4yVNZ9EVN26Wv6mZbK0jv7eHYuLJLwA==}
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.4':
+    resolution: {integrity: sha512-+7S63t5zhYjslUGb8NcgLpFXD+Kq1F/zt5Xv5qTv7HaFTG/DHyHD9GA6ieNAxhgyA4IcKa/zy7Xx4Oad2/wuhw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [win32]
 
-  '@tailwindcss/oxide@4.1.3':
-    resolution: {integrity: sha512-t16lpHCU7LBxDe/8dCj9ntyNpXaSTAgxWm1u2XQP5NiIu4KGSyrDJJRlK9hJ4U9yJxx0UKCVI67MJWFNll5mOQ==}
+  '@tailwindcss/oxide@4.1.4':
+    resolution: {integrity: sha512-p5wOpXyOJx7mKh5MXh5oKk+kqcz8T+bA3z/5VWWeQwFrmuBItGwz8Y2CHk/sJ+dNb9B0nYFfn0rj/cKHZyjahQ==}
     engines: {node: '>= 10'}
 
   '@tailwindcss/typography@0.5.16':
@@ -659,8 +677,8 @@ packages:
     peerDependencies:
       tailwindcss: '>=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1'
 
-  '@tailwindcss/vite@4.1.3':
-    resolution: {integrity: sha512-lUI/QaDxLtlV52Lho6pu07CG9pSnRYLOPmKGIQjyHdTBagemc6HmgZxyjGAQ/5HMPrNeWBfTVIpQl0/jLXvWHQ==}
+  '@tailwindcss/vite@4.1.4':
+    resolution: {integrity: sha512-4UQeMrONbvrsXKXXp/uxmdEN5JIJ9RkH7YVzs6AMxC/KC1+Np7WZBaNIco7TEjlkthqxZbt8pU/ipD+hKjm80A==}
     peerDependencies:
       vite: ^5.2.0 || ^6
 
@@ -772,6 +790,9 @@ packages:
     engines: {node: '>=4'}
     hasBin: true
 
+  date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+
   debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
@@ -1436,14 +1457,19 @@ packages:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
 
-  svelte-check@4.1.5:
-    resolution: {integrity: sha512-Gb0T2IqBNe1tLB9EB1Qh+LOe+JB8wt2/rNBDGvkxQVvk8vNeAoG+vZgFB/3P5+zC7RWlyBlzm9dVjZFph/maIg==}
+  svelte-check@4.1.6:
+    resolution: {integrity: sha512-P7w/6tdSfk3zEVvfsgrp3h3DFC75jCdZjTQvgGJtjPORs1n7/v2VMPIoty3PWv7jnfEm3x0G/p9wH4pecTb0Wg==}
     engines: {node: '>= 18.0.0'}
     hasBin: true
     peerDependencies:
       svelte: ^4.0.0 || ^5.0.0-next.0
       typescript: '>=5.0.0'
 
+  svelte-dnd-action@0.9.60:
+    resolution: {integrity: sha512-PTz9RlJiSTNXo0mIUGPmYXRMcqzLG/ghr79YqLrsOrq0dM4gQhXn97AkuImTalNuIxl/tohFK3uQPsEML+ZKeQ==}
+    peerDependencies:
+      svelte: '>=3.23.0 || ^5.0.0-next.0'
+
   svelte-eslint-parser@1.1.2:
     resolution: {integrity: sha512-vqFBRamDKo1l70KMfxxXj1/0Cco5TfMDnqaAjgz6D8PyoMhfMcDOLRkAwPg8WkMyZjMtQL3wW66TZ0x59iqO2w==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1458,8 +1484,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0 || ^5.0.0
 
-  svelte@5.25.12:
-    resolution: {integrity: sha512-4Y3mRN4fuZicNwBeb7sPPEUmiNIoN4lwf2NWD6CJdtYM3xVoOvjXhHQayIRbE0pTHG0mgk88n8WZvuOiNbtD8Q==}
+  svelte@5.27.0:
+    resolution: {integrity: sha512-Uai13Ydt1ZE+bUHme6b9U38PCYVNCqBRoBMkUKbFbKiD7kHWjdUUrklYAQZJxyKK81qII4mrBwe/YmvEMSlC9w==}
     engines: {node: '>=18'}
 
   svg.draggable.js@2.2.2:
@@ -1499,13 +1525,17 @@ packages:
   tailwind-merge@3.2.0:
     resolution: {integrity: sha512-FQT/OVqCD+7edmmJpsgCsY820RTD5AkBryuG5IUqR5YQZSdj5xlH5nLgH7YPths7WsLPSpSBNneJdM8aS8aeFA==}
 
-  tailwindcss@4.1.3:
-    resolution: {integrity: sha512-2Q+rw9vy1WFXu5cIxlvsabCwhU2qUwodGq03ODhLJ0jW4ek5BUtoCsnLB0qG+m8AHgEsSJcJGDSDe06FXlP74g==}
+  tailwindcss@4.1.4:
+    resolution: {integrity: sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==}
 
   tapable@2.2.1:
     resolution: {integrity: sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==}
     engines: {node: '>=6'}
 
+  tinyglobby@0.2.12:
+    resolution: {integrity: sha512-qkf4trmKSIiMTs/E63cxH+ojC2unam7rJ0WrauAzpT3ECNTxGRMlaXxVbfxMUC/w0LaYk6jQ4y/nGR9uBO3tww==}
+    engines: {node: '>=12.0.0'}
+
   totalist@3.0.1:
     resolution: {integrity: sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==}
     engines: {node: '>=6'}
@@ -1529,8 +1559,8 @@ packages:
     resolution: {integrity: sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==}
     hasBin: true
 
-  vite@6.2.6:
-    resolution: {integrity: sha512-9xpjNl3kR4rVDZgPNdTL0/c6ao4km69a/2ihNQbcANz8RuCOK3hQBmLSJf3bRKVQjVMda+YvizNE8AwvogcPbw==}
+  vite@6.3.0:
+    resolution: {integrity: sha512-9aC0n4pr6hIbvi1YOpFjwQ+QOTGssvbJKoeYkuHHGWwlXfdxQlI8L2qNMo9awEEcCPSiS+5mJZk5jH1PAqoDeQ==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
@@ -1929,17 +1959,17 @@ snapshots:
     dependencies:
       acorn: 8.14.1
 
-  '@sveltejs/adapter-node@5.2.12(@sveltejs/kit@2.20.5(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2)))':
+  '@sveltejs/adapter-node@5.2.12(@sveltejs/kit@2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2)))':
     dependencies:
       '@rollup/plugin-commonjs': 28.0.3(rollup@4.39.0)
       '@rollup/plugin-json': 6.1.0(rollup@4.39.0)
       '@rollup/plugin-node-resolve': 16.0.1(rollup@4.39.0)
-      '@sveltejs/kit': 2.20.5(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2))
+      '@sveltejs/kit': 2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2))
       rollup: 4.39.0
 
-  '@sveltejs/kit@2.20.5(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2))':
+  '@sveltejs/kit@2.20.7(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -1951,99 +1981,103 @@ snapshots:
       sade: 1.8.1
       set-cookie-parser: 2.7.1
       sirv: 3.0.1
-      svelte: 5.25.12
-      vite: 6.2.6(jiti@2.4.2)(lightningcss@1.29.2)
+      svelte: 5.27.0
+      vite: 6.3.0(jiti@2.4.2)(lightningcss@1.29.2)
 
-  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2))':
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2))
       debug: 4.4.0
-      svelte: 5.25.12
-      vite: 6.2.6(jiti@2.4.2)(lightningcss@1.29.2)
+      svelte: 5.27.0
+      vite: 6.3.0(jiti@2.4.2)(lightningcss@1.29.2)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2))':
+  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.25.12)(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2))
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2)))(svelte@5.27.0)(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
-      svelte: 5.25.12
-      vite: 6.2.6(jiti@2.4.2)(lightningcss@1.29.2)
-      vitefu: 1.0.6(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2))
+      svelte: 5.27.0
+      vite: 6.3.0(jiti@2.4.2)(lightningcss@1.29.2)
+      vitefu: 1.0.6(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2))
     transitivePeerDependencies:
       - supports-color
 
-  '@tailwindcss/node@4.1.3':
+  '@tailwindcss/node@4.1.4':
     dependencies:
       enhanced-resolve: 5.18.1
       jiti: 2.4.2
       lightningcss: 1.29.2
-      tailwindcss: 4.1.3
+      tailwindcss: 4.1.4
+
+  '@tailwindcss/oxide-android-arm64@4.1.4':
+    optional: true
 
-  '@tailwindcss/oxide-android-arm64@4.1.3':
+  '@tailwindcss/oxide-darwin-arm64@4.1.4':
     optional: true
 
-  '@tailwindcss/oxide-darwin-arm64@4.1.3':
+  '@tailwindcss/oxide-darwin-x64@4.1.4':
     optional: true
 
-  '@tailwindcss/oxide-darwin-x64@4.1.3':
+  '@tailwindcss/oxide-freebsd-x64@4.1.4':
     optional: true
 
-  '@tailwindcss/oxide-freebsd-x64@4.1.3':
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.4':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm-gnueabihf@4.1.3':
+  '@tailwindcss/oxide-linux-arm64-gnu@4.1.4':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-gnu@4.1.3':
+  '@tailwindcss/oxide-linux-arm64-musl@4.1.4':
     optional: true
 
-  '@tailwindcss/oxide-linux-arm64-musl@4.1.3':
+  '@tailwindcss/oxide-linux-x64-gnu@4.1.4':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-gnu@4.1.3':
+  '@tailwindcss/oxide-linux-x64-musl@4.1.4':
     optional: true
 
-  '@tailwindcss/oxide-linux-x64-musl@4.1.3':
+  '@tailwindcss/oxide-wasm32-wasi@4.1.4':
     optional: true
 
-  '@tailwindcss/oxide-win32-arm64-msvc@4.1.3':
+  '@tailwindcss/oxide-win32-arm64-msvc@4.1.4':
     optional: true
 
-  '@tailwindcss/oxide-win32-x64-msvc@4.1.3':
+  '@tailwindcss/oxide-win32-x64-msvc@4.1.4':
     optional: true
 
-  '@tailwindcss/oxide@4.1.3':
+  '@tailwindcss/oxide@4.1.4':
     optionalDependencies:
-      '@tailwindcss/oxide-android-arm64': 4.1.3
-      '@tailwindcss/oxide-darwin-arm64': 4.1.3
-      '@tailwindcss/oxide-darwin-x64': 4.1.3
-      '@tailwindcss/oxide-freebsd-x64': 4.1.3
-      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.3
-      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.3
-      '@tailwindcss/oxide-linux-arm64-musl': 4.1.3
-      '@tailwindcss/oxide-linux-x64-gnu': 4.1.3
-      '@tailwindcss/oxide-linux-x64-musl': 4.1.3
-      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.3
-      '@tailwindcss/oxide-win32-x64-msvc': 4.1.3
-
-  '@tailwindcss/typography@0.5.16(tailwindcss@4.1.3)':
+      '@tailwindcss/oxide-android-arm64': 4.1.4
+      '@tailwindcss/oxide-darwin-arm64': 4.1.4
+      '@tailwindcss/oxide-darwin-x64': 4.1.4
+      '@tailwindcss/oxide-freebsd-x64': 4.1.4
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.1.4
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.1.4
+      '@tailwindcss/oxide-linux-arm64-musl': 4.1.4
+      '@tailwindcss/oxide-linux-x64-gnu': 4.1.4
+      '@tailwindcss/oxide-linux-x64-musl': 4.1.4
+      '@tailwindcss/oxide-wasm32-wasi': 4.1.4
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.1.4
+      '@tailwindcss/oxide-win32-x64-msvc': 4.1.4
+
+  '@tailwindcss/typography@0.5.16(tailwindcss@4.1.4)':
     dependencies:
       lodash.castarray: 4.4.0
       lodash.isplainobject: 4.0.6
       lodash.merge: 4.6.2
       postcss-selector-parser: 6.0.10
-      tailwindcss: 4.1.3
+      tailwindcss: 4.1.4
 
-  '@tailwindcss/vite@4.1.3(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2))':
+  '@tailwindcss/vite@4.1.4(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2))':
     dependencies:
-      '@tailwindcss/node': 4.1.3
-      '@tailwindcss/oxide': 4.1.3
-      tailwindcss: 4.1.3
-      vite: 6.2.6(jiti@2.4.2)(lightningcss@1.29.2)
+      '@tailwindcss/node': 4.1.4
+      '@tailwindcss/oxide': 4.1.4
+      tailwindcss: 4.1.4
+      vite: 6.3.0(jiti@2.4.2)(lightningcss@1.29.2)
 
   '@types/cookie@0.6.0': {}
 
@@ -2147,6 +2181,8 @@ snapshots:
 
   cssesc@3.0.0: {}
 
+  date-fns@4.1.0: {}
+
   debug@4.4.0:
     dependencies:
       ms: 2.1.3
@@ -2228,7 +2264,7 @@ snapshots:
     dependencies:
       eslint: 9.24.0(jiti@2.4.2)
 
-  eslint-plugin-svelte@3.5.1(eslint@9.24.0(jiti@2.4.2))(svelte@5.25.12):
+  eslint-plugin-svelte@3.5.1(eslint@9.24.0(jiti@2.4.2))(svelte@5.27.0):
     dependencies:
       '@eslint-community/eslint-utils': 4.5.1(eslint@9.24.0(jiti@2.4.2))
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -2239,9 +2275,9 @@ snapshots:
       postcss-load-config: 3.1.4(postcss@8.5.3)
       postcss-safe-parser: 7.0.1(postcss@8.5.3)
       semver: 7.7.1
-      svelte-eslint-parser: 1.1.2(svelte@5.25.12)
+      svelte-eslint-parser: 1.1.2(svelte@5.27.0)
     optionalDependencies:
-      svelte: 5.25.12
+      svelte: 5.27.0
     transitivePeerDependencies:
       - ts-node
 
@@ -2355,25 +2391,25 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  flowbite-svelte-blocks@1.1.4(rollup@4.39.0)(svelte@5.25.12):
+  flowbite-svelte-blocks@1.1.4(rollup@4.39.0)(svelte@5.27.0):
     dependencies:
       flowbite: 2.5.2(rollup@4.39.0)
-      svelte: 5.25.12
+      svelte: 5.27.0
       tailwind-merge: 2.6.0
     transitivePeerDependencies:
       - rollup
 
-  flowbite-svelte-icons@2.1.1(svelte@5.25.12)(tailwind-merge@3.2.0):
+  flowbite-svelte-icons@2.1.1(svelte@5.27.0)(tailwind-merge@3.2.0):
     dependencies:
-      svelte: 5.25.12
+      svelte: 5.27.0
       tailwind-merge: 3.2.0
 
-  flowbite-svelte@0.48.6(rollup@4.39.0)(svelte@5.25.12):
+  flowbite-svelte@0.48.6(rollup@4.39.0)(svelte@5.27.0):
     dependencies:
       '@floating-ui/dom': 1.6.13
       apexcharts: 3.54.1
       flowbite: 3.1.2(rollup@4.39.0)
-      svelte: 5.25.12
+      svelte: 5.27.0
       tailwind-merge: 3.2.0
     transitivePeerDependencies:
       - rollup
@@ -2660,16 +2696,16 @@ snapshots:
 
   prelude-ls@1.2.1: {}
 
-  prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.25.12):
+  prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.27.0):
     dependencies:
       prettier: 3.5.3
-      svelte: 5.25.12
+      svelte: 5.27.0
 
-  prettier-plugin-tailwindcss@0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.25.12))(prettier@3.5.3):
+  prettier-plugin-tailwindcss@0.6.11(prettier-plugin-svelte@3.3.3(prettier@3.5.3)(svelte@5.27.0))(prettier@3.5.3):
     dependencies:
       prettier: 3.5.3
     optionalDependencies:
-      prettier-plugin-svelte: 3.3.3(prettier@3.5.3)(svelte@5.25.12)
+      prettier-plugin-svelte: 3.3.3(prettier@3.5.3)(svelte@5.27.0)
 
   prettier@3.5.3: {}
 
@@ -2753,19 +2789,23 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@4.1.5(picomatch@4.0.2)(svelte@5.25.12)(typescript@5.8.3):
+  svelte-check@4.1.6(picomatch@4.0.2)(svelte@5.27.0)(typescript@5.8.3):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.3
       fdir: 6.4.3(picomatch@4.0.2)
       picocolors: 1.1.1
       sade: 1.8.1
-      svelte: 5.25.12
+      svelte: 5.27.0
       typescript: 5.8.3
     transitivePeerDependencies:
       - picomatch
 
-  svelte-eslint-parser@1.1.2(svelte@5.25.12):
+  svelte-dnd-action@0.9.60(svelte@5.27.0):
+    dependencies:
+      svelte: 5.27.0
+
+  svelte-eslint-parser@1.1.2(svelte@5.27.0):
     dependencies:
       eslint-scope: 8.3.0
       eslint-visitor-keys: 4.2.0
@@ -2774,13 +2814,13 @@ snapshots:
       postcss-scss: 4.0.9(postcss@8.5.3)
       postcss-selector-parser: 7.1.0
     optionalDependencies:
-      svelte: 5.25.12
+      svelte: 5.27.0
 
-  svelte-fa@4.0.3(svelte@5.25.12):
+  svelte-fa@4.0.3(svelte@5.27.0):
     dependencies:
-      svelte: 5.25.12
+      svelte: 5.27.0
 
-  svelte@5.25.12:
+  svelte@5.27.0:
     dependencies:
       '@ampproject/remapping': 2.3.0
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -2832,10 +2872,15 @@ snapshots:
 
   tailwind-merge@3.2.0: {}
 
-  tailwindcss@4.1.3: {}
+  tailwindcss@4.1.4: {}
 
   tapable@2.2.1: {}
 
+  tinyglobby@0.2.12:
+    dependencies:
+      fdir: 6.4.3(picomatch@4.0.2)
+      picomatch: 4.0.2
+
   totalist@3.0.1: {}
 
   type-check@0.4.0:
@@ -2852,19 +2897,22 @@ snapshots:
 
   uuid@11.1.0: {}
 
-  vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2):
+  vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2):
     dependencies:
       esbuild: 0.25.2
+      fdir: 6.4.3(picomatch@4.0.2)
+      picomatch: 4.0.2
       postcss: 8.5.3
       rollup: 4.39.0
+      tinyglobby: 0.2.12
     optionalDependencies:
       fsevents: 2.3.3
       jiti: 2.4.2
       lightningcss: 1.29.2
 
-  vitefu@1.0.6(vite@6.2.6(jiti@2.4.2)(lightningcss@1.29.2)):
+  vitefu@1.0.6(vite@6.3.0(jiti@2.4.2)(lightningcss@1.29.2)):
     optionalDependencies:
-      vite: 6.2.6(jiti@2.4.2)(lightningcss@1.29.2)
+      vite: 6.3.0(jiti@2.4.2)(lightningcss@1.29.2)
 
   which@2.0.2:
     dependencies:
diff --git a/prisma/migrations/20250417135043_/migration.sql b/prisma/migrations/20250417135043_/migration.sql
new file mode 100644
index 0000000..433cab4
--- /dev/null
+++ b/prisma/migrations/20250417135043_/migration.sql
@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `title` on the `User` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "User" DROP COLUMN "title";
diff --git a/prisma/migrations/20250417163938_/migration.sql b/prisma/migrations/20250417163938_/migration.sql
new file mode 100644
index 0000000..69fa422
--- /dev/null
+++ b/prisma/migrations/20250417163938_/migration.sql
@@ -0,0 +1,93 @@
+-- CreateTable
+CREATE TABLE "Board" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "description" TEXT,
+    "ownerId" TEXT NOT NULL,
+    "organizationId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "Board_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "BoardMember" (
+    "id" TEXT NOT NULL,
+    "boardId" TEXT NOT NULL,
+    "userId" TEXT NOT NULL,
+    "role" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "BoardMember_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "BoardColumn" (
+    "id" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+    "order" INTEGER NOT NULL,
+    "boardId" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "BoardColumn_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "BoardTask" (
+    "id" TEXT NOT NULL,
+    "title" TEXT NOT NULL,
+    "description" TEXT,
+    "order" INTEGER NOT NULL,
+    "columnId" TEXT NOT NULL,
+    "assigneeId" TEXT,
+    "dueDate" TIMESTAMP(3),
+    "completed" BOOLEAN NOT NULL DEFAULT false,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "updatedAt" TIMESTAMP(3) NOT NULL,
+
+    CONSTRAINT "BoardTask_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "BoardTaskActivity" (
+    "id" TEXT NOT NULL,
+    "taskId" TEXT NOT NULL,
+    "authorId" TEXT NOT NULL,
+    "type" TEXT NOT NULL,
+    "content" TEXT NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+
+    CONSTRAINT "BoardTaskActivity_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateIndex
+CREATE UNIQUE INDEX "BoardMember_boardId_userId_key" ON "BoardMember"("boardId", "userId");
+
+-- AddForeignKey
+ALTER TABLE "Board" ADD CONSTRAINT "Board_ownerId_fkey" FOREIGN KEY ("ownerId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "Board" ADD CONSTRAINT "Board_organizationId_fkey" FOREIGN KEY ("organizationId") REFERENCES "Organization"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "BoardMember" ADD CONSTRAINT "BoardMember_boardId_fkey" FOREIGN KEY ("boardId") REFERENCES "Board"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "BoardMember" ADD CONSTRAINT "BoardMember_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "BoardColumn" ADD CONSTRAINT "BoardColumn_boardId_fkey" FOREIGN KEY ("boardId") REFERENCES "Board"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "BoardTask" ADD CONSTRAINT "BoardTask_columnId_fkey" FOREIGN KEY ("columnId") REFERENCES "BoardColumn"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "BoardTask" ADD CONSTRAINT "BoardTask_assigneeId_fkey" FOREIGN KEY ("assigneeId") REFERENCES "User"("id") ON DELETE SET NULL ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "BoardTaskActivity" ADD CONSTRAINT "BoardTaskActivity_taskId_fkey" FOREIGN KEY ("taskId") REFERENCES "BoardTask"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
+
+-- AddForeignKey
+ALTER TABLE "BoardTaskActivity" ADD CONSTRAINT "BoardTaskActivity_authorId_fkey" FOREIGN KEY ("authorId") REFERENCES "User"("id") ON DELETE RESTRICT ON UPDATE CASCADE;
diff --git a/prisma/schema.prisma b/prisma/schema.prisma
index bebc72d..7f78a34 100644
--- a/prisma/schema.prisma
+++ b/prisma/schema.prisma
@@ -17,34 +17,37 @@ enum UserRole {
 }
 
 model User {
-  id              String             @id @default(uuid())
-  user_id         String             @unique
-  email           String             @unique
-  name            String?
-  session_id      String?            @unique
-  role            UserRole           @default(READ_ONLY)
-  createdAt       DateTime           @default(now())
-  updatedAt       DateTime           @updatedAt
-  profilePhoto    String?
-  phone           String?
-  title           String?
-  department      String?
-  isActive        Boolean            @default(true)
-  lastLogin       DateTime?
-  accounts        Account[]
-  deletedAccounts Account[]          @relation("DeletedAccounts")
-  contacts        Contact[]
-  leads           Lead[]
-  opportunities   Opportunity[]
-  tasks           Task[]
-  events          Event[]
-  ownedTasks      Task[]             @relation("TaskOwner")
-  ownedEvents     Event[]            @relation("EventOwner")
-  cases           Case[]
-  comments        Comment[]
-  preparedQuotes  Quote[]            @relation("QuotePreparer")
-  organizations   UserOrganization[]
-  AuditLog        AuditLog[]
+  id                String              @id @default(uuid())
+  user_id           String              @unique
+  email             String              @unique
+  name              String?
+  session_id        String?             @unique
+  role              UserRole            @default(READ_ONLY)
+  createdAt         DateTime            @default(now())
+  updatedAt         DateTime            @updatedAt
+  profilePhoto      String?
+  phone             String?
+  department        String?
+  isActive          Boolean             @default(true)
+  lastLogin         DateTime?
+  accounts          Account[]
+  deletedAccounts   Account[]           @relation("DeletedAccounts")
+  contacts          Contact[]
+  leads             Lead[]
+  opportunities     Opportunity[]
+  tasks             Task[]
+  events            Event[]
+  ownedTasks        Task[]              @relation("TaskOwner")
+  ownedEvents       Event[]             @relation("EventOwner")
+  cases             Case[]
+  comments          Comment[]
+  preparedQuotes    Quote[]             @relation("QuotePreparer")
+  organizations     UserOrganization[]
+  AuditLog          AuditLog[]
+  Board             Board[]
+  BoardMember       BoardMember[]
+  BoardTask         BoardTask[]
+  BoardTaskActivity BoardTaskActivity[]
 }
 
 model Organization {
@@ -73,6 +76,7 @@ model Organization {
   products      Product[]
   solutions     Solution[]
   AuditLog      AuditLog[]
+  Board         Board[]
 }
 
 model UserOrganization {
@@ -543,3 +547,68 @@ model AuditLog {
   @@index([organizationId])
   @@index([action])
 }
+
+// --- Trello-like Board Models ---
+model Board {
+  id             String        @id @default(uuid())
+  name           String
+  description    String?
+  owner          User          @relation(fields: [ownerId], references: [id])
+  ownerId        String
+  organization   Organization  @relation(fields: [organizationId], references: [id])
+  organizationId String
+  members        BoardMember[]
+  columns        BoardColumn[]
+  createdAt      DateTime      @default(now())
+  updatedAt      DateTime      @updatedAt
+}
+
+model BoardMember {
+  id        String   @id @default(uuid())
+  board     Board    @relation(fields: [boardId], references: [id])
+  boardId   String
+  user      User     @relation(fields: [userId], references: [id])
+  userId    String
+  role      String // e.g. "admin", "member"
+  createdAt DateTime @default(now())
+
+  @@unique([boardId, userId])
+}
+
+model BoardColumn {
+  id        String      @id @default(uuid())
+  name      String
+  order     Int
+  board     Board       @relation(fields: [boardId], references: [id])
+  boardId   String
+  tasks     BoardTask[]
+  createdAt DateTime    @default(now())
+  updatedAt DateTime    @updatedAt
+}
+
+model BoardTask {
+  id          String              @id @default(uuid())
+  title       String
+  description String?
+  order       Int
+  column      BoardColumn         @relation(fields: [columnId], references: [id])
+  columnId    String
+  assignee    User?               @relation(fields: [assigneeId], references: [id])
+  assigneeId  String?
+  dueDate     DateTime?
+  completed   Boolean             @default(false)
+  activities  BoardTaskActivity[]
+  createdAt   DateTime            @default(now())
+  updatedAt   DateTime            @updatedAt
+}
+
+model BoardTaskActivity {
+  id        String    @id @default(uuid())
+  task      BoardTask @relation(fields: [taskId], references: [id])
+  taskId    String
+  author    User      @relation(fields: [authorId], references: [id])
+  authorId  String
+  type      String // e.g. "comment", "status_change"
+  content   String
+  createdAt DateTime  @default(now())
+}
diff --git a/src/lib/assets/images/banner.png b/src/lib/assets/images/banner.png
new file mode 100644
index 0000000..641cc18
Binary files /dev/null and b/src/lib/assets/images/banner.png differ
diff --git a/src/lib/components/TaskModal.svelte b/src/lib/components/TaskModal.svelte
new file mode 100644
index 0000000..9711299
--- /dev/null
+++ b/src/lib/components/TaskModal.svelte
@@ -0,0 +1,314 @@
+<script>
+  import { createEventDispatcher, onMount } from 'svelte';
+  export let task;
+  export let boardId;
+  const dispatch = createEventDispatcher();
+  let details = null;
+  let comments = [];
+  let newComment = '';
+  let loading = true;
+  let error = '';
+  let dueDateInput = '';
+  let users = [];
+  let assigneeInput = '';
+
+  $:
+    dueDateInput = details && details.dueDate
+      ? new Date(details.dueDate).toISOString().slice(0, 10)
+      : '';
+
+  async function fetchDetails() {
+    loading = true;
+    error = '';
+    try {
+      const res = await fetch(`/app/tasks/board/${boardId}/task/${task.id}`);
+      if (!res.ok) throw new Error('Failed to load task details');
+      const data = await res.json();
+      details = data.task;
+      // For Kanban tasks, comments come from BoardTaskActivity
+      comments = (data.comments || []).map(c => ({
+        author: c.author,
+        content: c.content,
+        createdAt: c.createdAt
+      }));
+    } catch (e) {
+      error = e.message;
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function fetchUsers() {
+    try {
+      const res = await fetch(`/app/tasks/board/${boardId}/users`);
+      if (!res.ok) throw new Error('Failed to load users');
+      users = await res.json();
+    } catch (e) {
+      error = e.message;
+    }
+  }
+
+  async function addComment() {
+    if (!newComment.trim()) return;
+    const res = await fetch(`/app/tasks/board/${boardId}/task/${task.id}/comment`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ content: newComment })
+    });
+    if (res.ok) {
+      newComment = '';
+      await fetchDetails();
+    }
+  }
+
+  async function updateDueDate(e) {
+    const newDate = e.target.value;
+    if (!newDate) return;
+    try {
+      const res = await fetch(`/app/tasks/board/${boardId}/task/${task.id}/due-date`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ dueDate: newDate })
+      });
+      if (!res.ok) throw new Error('Failed to update due date');
+      await fetchDetails();
+    } catch (e) {
+      error = e.message;
+    }
+  }
+
+  async function updateAssignee(e) {
+    const userId = e.target.value;
+    if (!userId) return;
+    try {
+      const res = await fetch(`/app/tasks/board/${boardId}/task/${task.id}/assignee`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ assigneeId: userId })
+      });
+      if (!res.ok) throw new Error('Failed to update assignee');
+      await fetchDetails();
+    } catch (e) {
+      error = e.message;
+    }
+  }
+
+  onMount(() => {
+    fetchDetails();
+    fetchUsers();
+  });
+</script>
+
+<button type="button" class="modal-backdrop" on:click={() => dispatch('close')} on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && dispatch('close')} aria-label="Close modal" tabindex="0"></button>
+<div class="modal">
+  {#if loading}
+    <div class="modal-loading">
+      <span class="loader"></span>
+      <span>Loading...</span>
+    </div>
+  {:else if error}
+    <p class="error">{error}</p>
+  {:else}
+    <div class="modal-header">
+      <h2>{details.title}</h2>
+      <span class="status-badge {details.completed ? 'completed' : 'open'}">{details.completed ? 'Completed' : 'Open'}</span>
+      <button class="close-icon" on:click={() => dispatch('close')} aria-label="Close">×</button>
+    </div>
+    <p class="modal-description">{details.description}</p>
+    <div class="modal-section">
+      <label for="due-date"><b>Due:</b></label>
+      <input id="due-date" type="date" bind:value={dueDateInput} on:change={updateDueDate} />
+      <span class="date-info">{details.dueDate ? new Date(details.dueDate).toLocaleDateString() : '—'}</span>
+    </div>
+    <div class="modal-section">
+      <label for="assignee"><b>Assigned to:</b></label>
+      <select id="assignee" bind:value={assigneeInput} on:change={updateAssignee}>
+        <option value="">Unassigned</option>
+        {#each users as user}
+          <option value={user.id}>{user.name} ({user.email})</option>
+        {/each}
+      </select>
+      <span class="assignee-info">{details.assignee?.name || 'Unassigned'}</span>
+    </div>
+    <h3 class="modal-section-title">Activity & Comments</h3>
+    <ul class="comments">
+      {#each comments as c}
+        <li class="comment-item">
+          {#if c.author.avatar}
+            <img src={c.author.avatar} alt={c.author.name} class="comment-avatar" />
+          {/if}
+          <div class="comment-content">
+            <b>{c.author.name}:</b> {c.content}
+            <span class="date">{new Date(c.createdAt).toLocaleString()}</span>
+          </div>
+        </li>
+      {/each}
+    </ul>
+    <form class="comment-form" on:submit|preventDefault={addComment}>
+      <textarea bind:value={newComment} placeholder="Add a comment..." rows="2"></textarea>
+      <button type="submit">Comment</button>
+    </form>
+    <button class="close" on:click={() => dispatch('close')}>Close</button>
+  {/if}
+</div>
+
+<style>
+.modal-backdrop {
+  position: fixed;
+  top: 0; left: 0; right: 0; bottom: 0;
+  background: rgba(0,0,0,0.3);
+  z-index: 1000;
+}
+.modal {
+  position: fixed;
+  top: 50%; left: 50%;
+  transform: translate(-50%, -50%);
+  background: #f4f5f7;
+  padding: 2.5rem 2.2rem 2rem 2.2rem;
+  border-radius: 14px;
+  z-index: 1001;
+  min-width: 350px;
+  max-width: 95vw;
+  box-shadow: 0 8px 32px 0 rgba(9,30,66,.22), 0 1.5px 4px rgba(9,30,66,.10);
+  border: 1.5px solid #e2e4ea;
+  display: flex;
+  flex-direction: column;
+  gap: 1.2rem;
+}
+.modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 0.5rem;
+}
+.status-badge {
+  font-size: 0.95rem;
+  padding: 0.2em 0.8em;
+  border-radius: 0.7em;
+  font-weight: 600;
+  background: #e0e7ff;
+  color: #3730a3;
+  margin-left: 0.5em;
+}
+.status-badge.completed {
+  background: #dcfce7;
+  color: #166534;
+}
+.status-badge.open {
+  background: #fee2e2;
+  color: #b91c1c;
+}
+.close-icon {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: #64748b;
+  cursor: pointer;
+  margin-left: auto;
+  margin-right: -0.5rem;
+  margin-top: -0.5rem;
+  transition: color 0.15s;
+}
+.close-icon:hover {
+  color: #2563eb;
+}
+.modal-description {
+  color: #344563;
+  margin-bottom: 0.7rem;
+  font-size: 1.05rem;
+}
+.modal-section {
+  margin-bottom: 1rem;
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+}
+.date-info, .assignee-info {
+  margin-left: 0.5em;
+  color: #888;
+  font-size: 0.95em;
+}
+.modal-section-title {
+  margin-top: 1.2rem;
+  margin-bottom: 0.5rem;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #253858;
+}
+.comment-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.7rem;
+  margin-bottom: 0.5rem;
+  padding: 0.6rem 1rem 0.4rem 1rem;
+  border-bottom: 1px solid #f4f5f7;
+  font-size: 0.98rem;
+}
+.comment-avatar {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-top: 2px;
+}
+.comment-content {
+  flex: 1;
+}
+.comment-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+.comment-form textarea {
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid #b6bac2;
+  padding: 0.5rem 0.7rem;
+  font-size: 1rem;
+  background: #fff;
+  resize: vertical;
+  min-height: 40px;
+}
+.comment-form button[type="submit"] {
+  align-self: flex-end;
+  background: #2563eb;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.4rem 1.1rem;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.comment-form button[type="submit"]:hover {
+  background: #1d4ed8;
+}
+.modal-loading {
+  display: flex;
+  align-items: center;
+  gap: 0.7rem;
+  justify-content: center;
+  min-height: 120px;
+}
+.loader {
+  border: 3px solid #e5e7eb;
+  border-top: 3px solid #2563eb;
+  border-radius: 50%;
+  width: 28px;
+  height: 28px;
+  animation: spin 1s linear infinite;
+}
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+.modal-loading span {
+  color: #2563eb;
+}
+.error {
+  color: #c00;
+}
+</style>
diff --git a/src/lib/stores/auth.js b/src/lib/stores/auth.js
index 87f87d3..ca27bf5 100644
--- a/src/lib/stores/auth.js
+++ b/src/lib/stores/auth.js
@@ -5,3 +5,10 @@ export const auth = writable({
   isAuthenticated: false,
   user: null,
 });
+
+// Helper to get the current session user from event.locals (SvelteKit convention)
+export function getSessionUser(event) {
+  // If you use event.locals.user for authentication, return it
+  // You can adjust this logic if your user is stored differently
+  return event.locals?.user || null;
+}
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 1889ff6..e4ff633 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -2,8 +2,10 @@
 	import '../../app.css'
 	import Navbar from './Navbar.svelte';
 	import Sidebar from './Sidebar.svelte';
-	let drawerHidden = false;
-	export let data;
+	let { data, children } = $props();
+
+	let drawerHidden = $state(false);
+	// export let data;
 </script>
 
 <header
@@ -15,7 +17,7 @@
 	<Sidebar bind:drawerHidden />
 	<div class="relative h-full w-full overflow-y-auto lg:ml-64 pt-[70px]">
 		<div class="w-full">
-			<slot />
+			{@render children()}
 		</div>
 	</div>
 </div>
diff --git a/src/routes/(app)/Sidebar.svelte b/src/routes/(app)/Sidebar.svelte
index da64e46..c1818c8 100644
--- a/src/routes/(app)/Sidebar.svelte
+++ b/src/routes/(app)/Sidebar.svelte
@@ -1,8 +1,8 @@
 <script>
 	import { afterNavigate } from '$app/navigation';
 	import { page } from '$app/stores';
-    import Fa from 'svelte-fa';
-  import { faPieChart  } from '@fortawesome/free-solid-svg-icons';
+	import Fa from 'svelte-fa';
+	import { faPieChart } from '@fortawesome/free-solid-svg-icons';
 	import {
 		Sidebar,
 		SidebarDropdownItem,
@@ -11,9 +11,7 @@
 		SidebarItem,
 		SidebarWrapper
 	} from 'flowbite-svelte';
-	import {
-		LifeSaverSolid,
-	} from 'flowbite-svelte-icons';
+	import { LifeSaverSolid } from 'flowbite-svelte-icons';
 
 	export let drawerHidden = false;
 
@@ -39,62 +37,71 @@
 	});
 
 	let menu = [
-	{ name: 'Dashboard', icon: 'ChartPieOutline', href: '/app/dashboard' },
-	{ name: 'Leads', icon: 'FunnelOutline', href: '/app/leads' },
-	{ name: 'Contacts', icon: 'UserOutline', href: '/app/contacts' },
-	{ name: 'Accounts', icon: 'BuildingOfficeOutline', href: '/app/accounts' },
-	{
-		name: 'Opportunities',
-		icon: 'CurrencyDollarOutline',
-		children: {
-			'All Opportunities': '/app/opportunities',
-			'New Opportunity': '/app/opportunities/new'
-		}
-	},
-	{
-		name: 'Cases',
-		icon: 'LifebuoyOutline',
-		children: {
-			'All Cases': '/app/cases',
-			'New Case': '/app/cases/new'
-		}
-	},
-	{
-		name: 'Tasks',
-		icon: 'ClipboardOutline',
-		children: {
-			'All Tasks': '/app/tasks',
-			'New Task': '/app/tasks/new',
-			Calendar: '/app/tasks/calendar'
-		}
-	},
-	{
-		name: 'Invoices',
-		icon: 'ReceiptOutline',
-		children: {
-			'All Invoices': '/app/invoices',
-			'Create Invoice': '/app/invoices/new'
-		}
-	},
-	{
-		name: 'Reports',
-		icon: 'ChartBarOutline',
-		children: {
-			'Sales Reports': '/app/reports/sales',
-			'Case Stats': '/app/reports/cases',
-			'Invoice Trends': '/app/reports/invoices'
-		}
-	},
-	{
-		name: 'Settings',
-		icon: 'CogOutline',
-		children: {
-			'User Management': '/app/settings/users',
-			'Custom Fields': '/app/settings/fields',
-			Integrations: '/app/settings/integrations'
+		{ name: 'Dashboard', icon: 'ChartPieOutline', href: '/app/dashboard' },
+		{ name: 'Leads', icon: 'FunnelOutline', href: '/app/leads' },
+		{ name: 'Contacts', icon: 'UserOutline', href: '/app/contacts' },
+		{
+			name: 'Accounts',
+			icon: 'BuildingOfficeOutline',
+			children: {
+				'All Accounts': '/app/accounts',
+				'New Account': '/app/accounts/new',
+				'Account Opportunities': '/app/accounts/opportunities',
+				'Deleted/Archived Accounts': '/app/accounts/deleted'
+			}
+		},
+		{
+			name: 'Opportunities',
+			icon: 'CurrencyDollarOutline',
+			children: {
+				'All Opportunities': '/app/opportunities',
+				'New Opportunity': '/app/opportunities/new'
+			}
+		},
+		{
+			name: 'Cases',
+			icon: 'LifebuoyOutline',
+			children: {
+				'All Cases': '/app/cases',
+				'New Case': '/app/cases/new'
+			}
+		},
+		{
+			name: 'Tasks',
+			icon: 'ClipboardOutline',
+			children: {
+				'All Tasks': '/app/tasks',
+				'New Task': '/app/tasks/new',
+				Calendar: '/app/tasks/calendar'
+			}
+		},
+		{
+			name: 'Invoices',
+			icon: 'ReceiptOutline',
+			children: {
+				'All Invoices': '/app/invoices',
+				'Create Invoice': '/app/invoices/new'
+			}
+		},
+		{
+			name: 'Reports',
+			icon: 'ChartBarOutline',
+			children: {
+				'Sales Reports': '/app/reports/sales',
+				'Case Stats': '/app/reports/cases',
+				'Invoice Trends': '/app/reports/invoices'
+			}
+		},
+		{
+			name: 'Settings',
+			icon: 'CogOutline',
+			children: {
+				'User Management': '/app/settings/users',
+				'Custom Fields': '/app/settings/fields',
+				Integrations: '/app/settings/integrations'
+			}
 		}
-	}
-];
+	];
 	let links = [
 		{
 			label: 'Support',
@@ -117,31 +124,102 @@
 	>
 		<nav class="divide-y divide-gray-200 dark:divide-gray-700">
 			<SidebarGroup ulClass={groupClass} class="mb-3">
-                <SidebarItem label="Dashboard" href="/app">
-                    <svelte:fragment slot="icon">
-                        <Fa icon={faPieChart} />
-                    </svelte:fragment>
-                </SidebarItem>
+				<SidebarItem
+					label="Dashboard"
+					href="/app"
+					class={`${itemClass} ${mainSidebarUrl === '/app' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					spanClass="ml-3"
+				>
+					<svelte:fragment slot="icon">
+						<Fa
+							icon={faPieChart}
+							class={`${iconClass} ${mainSidebarUrl === '/app' ? 'text-gray-900 dark:text-white' : ''}`}
+						/>
+					</svelte:fragment>
+				</SidebarItem>
 				<SidebarDropdownWrapper label="Leads">
-                    <SidebarDropdownItem label="Open Leads" href="/app/leads/open" />
-                    <SidebarDropdownItem label="Closed Leads" href="/app/leads/closed" />
-                    <SidebarDropdownItem label="Create Lead" href="/app/leads/new" />
-                </SidebarDropdownWrapper>
-                <SidebarItem label="Tasks" href="/tasks">
-                    <svelte:fragment slot="icon">
-                        <Fa icon={faPieChart} />
-                    </svelte:fragment>
-                </SidebarItem>
+					<SidebarDropdownItem
+						label="Open Leads"
+						href="/app/leads/open"
+						class={`${itemClass} ${mainSidebarUrl === '/app/leads/open' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					/>
+					<SidebarDropdownItem
+						label="Closed Leads"
+						href="/app/leads/closed"
+						class={`${itemClass} ${mainSidebarUrl === '/app/leads/closed' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					/>
+					<SidebarDropdownItem
+						label="Create Lead"
+						href="/app/leads/new"
+						class={`${itemClass} ${mainSidebarUrl === '/app/leads/new' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					/>
+				</SidebarDropdownWrapper>
+
+				<SidebarDropdownWrapper label="Accounts">
+					<SidebarDropdownItem
+						label="All Accounts"
+						href="/app/accounts"
+						class={`${itemClass} ${mainSidebarUrl === '/app/accounts' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					/>
+					<SidebarDropdownItem
+						label="New Account"
+						href="/app/accounts/new"
+						class={`${itemClass} ${mainSidebarUrl === '/app/accounts/new' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					/>
+					<SidebarDropdownItem
+						label="Account Opportunities"
+						href="/app/accounts/opportunities"
+						class={`${itemClass} ${mainSidebarUrl === '/app/accounts/opportunities' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					/>
+					<SidebarDropdownItem
+						label="Deleted/Archived Accounts"
+						href="/app/accounts/deleted"
+						class={`${itemClass} ${mainSidebarUrl === '/app/accounts/deleted' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					/>
+				</SidebarDropdownWrapper>
+
+				<SidebarDropdownWrapper label="Opportunities">
+					<SidebarDropdownItem
+						label="All Opportunities"
+						href="/app/opportunities"
+						class={`${itemClass} ${mainSidebarUrl === '/app/opportunities' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					/>
+					<SidebarDropdownItem
+						label="New Opportunity"
+						href="/app/opportunities/new"
+						class={`${itemClass} ${mainSidebarUrl === '/app/opportunities/new' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					/>
+				</SidebarDropdownWrapper>
+
+				<SidebarDropdownWrapper label="Cases">
+					<SidebarDropdownItem
+						label="All Cases"
+						href="/app/cases"
+						class={`${itemClass} ${mainSidebarUrl === '/app/cases' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					/>
+					<SidebarDropdownItem
+						label="New Case"
+						href="/app/cases/new"
+						class={`${itemClass} ${mainSidebarUrl === '/app/cases/new' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					/>
+				</SidebarDropdownWrapper>
+
+				<SidebarDropdownWrapper label="Tasks">
+					<SidebarDropdownItem
+						label="Boards"
+						href="/app/tasks"
+						class={`${itemClass} ${mainSidebarUrl === '/app/tasks' ? 'bg-blue-100 font-semibold dark:bg-blue-700' : ''}`}
+					/>
+					<SidebarDropdownItem
+						label="Calendar"
+						href="/app/tasks/calendar"
+						class={`${itemClass} ${mainSidebarUrl === '/app/tasks/calendar' ? 'bg-gray-100 font-semibold dark:bg-gray-700' : ''}`}
+					/>
+				</SidebarDropdownWrapper>
 			</SidebarGroup>
 			<SidebarGroup ulClass={groupClass}>
 				{#each links as { label, href, icon } (label)}
-					<SidebarItem
-						{label}
-						{href}
-						spanClass="ml-3"
-						class={itemClass}
-						target="_blank"
-					>
+					<SidebarItem {label} {href} spanClass="ml-3" class={itemClass} target="_blank">
 						<svelte:component this={icon} slot="icon" class={iconClass} />
 					</SidebarItem>
 				{/each}
diff --git a/src/routes/(app)/app/accounts/+page.server.js b/src/routes/(app)/app/accounts/+page.server.js
index bb1d1d8..43a8d63 100644
--- a/src/routes/(app)/app/accounts/+page.server.js
+++ b/src/routes/(app)/app/accounts/+page.server.js
@@ -12,9 +12,15 @@ export async function load({ locals, url }) {
 
     try {
         // Build the where clause for filtering
-        const where = {
-            organizationId: locals.org.id
-        };
+        const where = {};
+
+        // Add status filter
+        const status = url.searchParams.get('status');
+        if (status === 'open') {
+            where.closedAt = null;
+        } else if (status === 'closed') {
+            where.closedAt = { not: null };
+        }
 
         // Fetch accounts with pagination
         const accounts = await prisma.account.findMany({
diff --git a/src/routes/(app)/app/accounts/+page.svelte b/src/routes/(app)/app/accounts/+page.svelte
index 70544bd..36b2883 100644
--- a/src/routes/(app)/app/accounts/+page.svelte
+++ b/src/routes/(app)/app/accounts/+page.svelte
@@ -9,13 +9,14 @@
   let sortField = $page.url.searchParams.get('sort') || 'name';
   let sortOrder = $page.url.searchParams.get('order') || 'asc';
   let isLoading = false;
+  let statusFilter = $page.url.searchParams.get('status') || 'all';
   
   function updateQueryParams() {
     isLoading = true;
     const params = new URLSearchParams($page.url.searchParams);
-    
     params.set('sort', sortField);
     params.set('order', sortOrder);
+    params.set('status', statusFilter); // ensure status is included
     params.set('page', '1'); // Reset to first page when filters change
     
     goto(`?${params.toString()}`, { keepFocus: true });
@@ -55,6 +56,27 @@
         Manage all your customer accounts and business relationships
       </p>
     </div>
+    <div class="flex flex-col sm:flex-row gap-2 mt-4 sm:mt-0 items-center">
+      <input
+        type="text"
+        placeholder="Search accounts..."
+        class="border border-gray-300 dark:border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        on:input={(e) => { $page.url.searchParams.set('q', e.target.value); goto(`?${$page.url.searchParams.toString()}`); }}
+        value={$page.url.searchParams.get('q') || ''}
+      />
+      <select
+        class="border border-gray-300 dark:border-gray-600 rounded px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        bind:value={statusFilter}
+        on:change={updateQueryParams}
+      >
+        <option value="all">All</option>
+        <option value="open">Open</option>
+        <option value="closed">Closed</option>
+      </select>
+      <a href="/app/accounts/new" class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
+        + New Account
+      </a>
+    </div>
   </div>
   
   <!-- Accounts table -->
@@ -132,10 +154,16 @@
           </tr>
         {:else}
           {#each accounts as account}
-            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700">
+            <tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 {account.closedAt ? 'opacity-60' : ''}">
               <td class="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
-                <a href="/app/accounts/{account.id}" class="hover:underline hover:text-blue-600 dark:hover:text-blue-500">
+                <a href="/app/accounts/{account.id}" class="hover:underline hover:text-blue-600 dark:hover:text-blue-500 flex items-center gap-2">
+                  <span class="inline-block bg-gray-200 dark:bg-gray-700 rounded-full w-7 h-7 flex items-center justify-center text-gray-500 text-xs font-bold">
+                    {account.name?.[0]}
+                  </span>
                   {account.name}
+                  {#if account.closedAt}
+                    <span class="ml-2 px-2 py-0.5 rounded bg-red-100 text-red-700 text-xs font-semibold">Closed</span>
+                  {/if}
                 </a>
               </td>
               <td class="px-6 py-4 hidden sm:table-cell">{account.industry || '-'}</td>
@@ -155,17 +183,16 @@
               <td class="px-6 py-4 hidden xl:table-cell">{account.phone || '-'}</td>
               <td class="px-6 py-4 hidden md:table-cell">{account.contactCount}</td>
               <td class="px-6 py-4 hidden md:table-cell">{account.opportunityCount}</td>
-              <td class="px-6 py-4 text-right">
-                <div class="flex justify-end items-center space-x-3">
-                  <a href="/app/accounts/{account.id}" 
-                     class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
-                    View
-                  </a>
-                  <a href="/app/accounts/{account.id}/edit" 
-                     class="font-medium text-blue-600 dark:text-blue-500 hover:underline">
-                    Edit
-                  </a>
-                </div>
+              <td class="px-6 py-4 text-right flex gap-2 justify-end">
+                <a href="/app/accounts/{account.id}" title="View" aria-label="View Account" class="text-blue-600 hover:text-blue-800 dark:text-blue-400 dark:hover:text-blue-200">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
+                </a>
+                <a href="/app/accounts/{account.id}/edit" title="Edit" aria-label="Edit Account" class="text-yellow-600 hover:text-yellow-800 dark:text-yellow-400 dark:hover:text-yellow-200">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5h2m-1 0v14m-7-7h14" /></svg>
+                </a>
+                <a href="/app/accounts/{account.id}/delete" title="Delete" aria-label="Delete Account" class="text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-200">
+                  <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 inline" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+                </a>
               </td>
             </tr>
           {/each}
diff --git a/src/routes/(app)/app/accounts/[accountId]/+page.server.js b/src/routes/(app)/app/accounts/[accountId]/+page.server.js
index 84fcd50..d5a1732 100644
--- a/src/routes/(app)/app/accounts/[accountId]/+page.server.js
+++ b/src/routes/(app)/app/accounts/[accountId]/+page.server.js
@@ -1,6 +1,5 @@
 import { error, fail } from '@sveltejs/kit';
 import prisma from '$lib/prisma';
-import { getUserFromSession } from '$lib/auth';
 
 /** @type {import('./$types').PageServerLoad} */
 export async function load({ params }) {
@@ -112,7 +111,7 @@ export async function load({ params }) {
 export const actions = {
   closeAccount: async ({ params, request, locals }) => {
     try {
-      const user = await getUserFromSession(locals);
+      const user = locals.user;
       
       if (!user) {
         return fail(401, { success: false, message: 'Unauthorized' });
@@ -195,7 +194,7 @@ export const actions = {
   
   reopenAccount: async ({ params, request, locals }) => {
     try {
-      const user = await getUserFromSession(locals);
+      const user = locals.user;
       
       if (!user) {
         return fail(401, { success: false, message: 'Unauthorized' });
diff --git a/src/routes/(app)/app/accounts/[accountId]/edit/+page.server.js b/src/routes/(app)/app/accounts/[accountId]/edit/+page.server.js
new file mode 100644
index 0000000..2ab8502
--- /dev/null
+++ b/src/routes/(app)/app/accounts/[accountId]/edit/+page.server.js
@@ -0,0 +1,33 @@
+import { fail, redirect, error } from '@sveltejs/kit';
+import prisma from '$lib/prisma';
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load({ params }) {
+  const account = await prisma.account.findUnique({
+    where: { id: params.accountId }
+  });
+  if (!account) throw error(404, 'Account not found');
+  return { account };
+}
+
+/** @type {import('./$types').Actions} */
+export const actions = {
+  default: async ({ request, params }) => {
+    const form = await request.formData();
+    const name = form.get('name');
+    const industry = form.get('industry');
+    const type = form.get('type');
+    const website = form.get('website');
+    const phone = form.get('phone');
+
+    if (!name) {
+      return fail(400, { name, missing: true });
+    }
+
+    await prisma.account.update({
+      where: { id: params.accountId },
+      data: { name, industry, type, website, phone }
+    });
+    throw redirect(303, `/app/accounts/${params.accountId}`);
+  }
+};
diff --git a/src/routes/(app)/app/accounts/[accountId]/edit/+page.svelte b/src/routes/(app)/app/accounts/[accountId]/edit/+page.svelte
new file mode 100644
index 0000000..abecc32
--- /dev/null
+++ b/src/routes/(app)/app/accounts/[accountId]/edit/+page.svelte
@@ -0,0 +1,39 @@
+<script>
+  export let data;
+  let account = data.account;
+  let name = account.name;
+  let industry = account.industry || '';
+  let type = account.type || '';
+  let website = account.website || '';
+  let phone = account.phone || '';
+</script>
+
+<div class="max-w-xl mx-auto mt-8 p-6 bg-white dark:bg-gray-800 rounded shadow">
+  <h2 class="text-2xl font-bold mb-4 text-gray-900 dark:text-white">Edit Account</h2>
+  <form method="POST" class="space-y-4">
+    <div>
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Name<span class="text-red-500">*</span></label>
+      <input name="name" bind:value={name} required class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" />
+    </div>
+    <div>
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Industry</label>
+      <input name="industry" bind:value={industry} class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" />
+    </div>
+    <div>
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Type</label>
+      <input name="type" bind:value={type} class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" />
+    </div>
+    <div>
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Website</label>
+      <input name="website" bind:value={website} class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" />
+    </div>
+    <div>
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Phone</label>
+      <input name="phone" bind:value={phone} class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white dark:bg-gray-700 text-gray-900 dark:text-white" />
+    </div>
+    <div class="flex gap-2 mt-6">
+      <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">Save</button>
+      <a href={`/app/accounts/${account.id}`} class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">Cancel</a>
+    </div>
+  </form>
+</div>
diff --git a/src/routes/(app)/app/leads/[lead_id]/+page.server.js b/src/routes/(app)/app/leads/[lead_id]/+page.server.js
index 2e5ed82..d6a674a 100644
--- a/src/routes/(app)/app/leads/[lead_id]/+page.server.js
+++ b/src/routes/(app)/app/leads/[lead_id]/+page.server.js
@@ -23,10 +23,11 @@ export async function load({ params }) {
             author: true
           },
           orderBy: { createdAt: 'desc' }
-        }
+        },
+        contact: true
       }
     });
-    
+    console.log('Lead:', lead);
     if (!lead) {
       throw error(404, 'Lead not found');
     }
diff --git a/src/routes/(app)/app/leads/[lead_id]/+page.svelte b/src/routes/(app)/app/leads/[lead_id]/+page.svelte
index 1952cf7..db22ae5 100644
--- a/src/routes/(app)/app/leads/[lead_id]/+page.svelte
+++ b/src/routes/(app)/app/leads/[lead_id]/+page.svelte
@@ -3,6 +3,7 @@
   import { fly, fade, scale } from 'svelte/transition';
   import { enhance } from '$app/forms';
   import { invalidateAll } from '$app/navigation';
+  import { goto } from '$app/navigation';
 
   export let data;
   export let form;
@@ -17,36 +18,22 @@
   let toastMessage = '';
   let toastType = 'default';
 
-  // Reactive statement to show toast messages based on form action result
-  $: if (form?.status === 'success') {
-    toastMessage = form.message || 'Action completed successfully!';
-    toastType = 'success';
-    showToast = true;
-    invalidateAll();
-    isConverting = false;
-    isSubmittingComment = false;
-    
-    // Reset comment field if the comment was successfully added
-    if (form.comment) {
-      newComment = '';
-    }
-  } else if (form?.status === 'error') {
-    toastMessage = form.message || 'An error occurred.';
-    toastType = 'error';
-    showToast = true;
-    isConverting = false;
-    isSubmittingComment = false;
+  // Function to get the full name of a lead
+  function getFullName(lead) {
+    return `${lead.firstName} ${lead.lastName}`.trim();
   }
 
+  // Function to format date
   function formatDate(dateString) {
     if (!dateString) return '';
-    const date = new Date(dateString);
-    return new Intl.DateTimeFormat('en-US', { 
-      dateStyle: 'medium',
-      timeStyle: 'short'
-    }).format(date);
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric'
+    });
   }
 
+  // Function to map lead status to badge color
   function getStatusColor(status) {
     switch (status) {
       case 'NEW':
@@ -56,18 +43,28 @@
       case 'CONTACTED':
         return 'green';
       case 'QUALIFIED':
-        return 'success';
+        return 'indigo';
       case 'UNQUALIFIED':
-        return 'warning';
+        return 'red';
       case 'CONVERTED':
-        return 'indigo';
+        return 'dark';
       default:
-        return 'info';
+        return 'blue';
     }
   }
 
-  function getFullName(lead) {
-    return `${lead.firstName} ${lead.lastName}`.trim();
+  // Function to get task priority color
+  function getPriorityColor(priority) {
+    switch (priority) {
+      case 'HIGH':
+        return 'red';
+      case 'MEDIUM':
+        return 'yellow';
+      case 'LOW':
+        return 'green';
+      default:
+        return 'green';
+    }
   }
 
   async function addComment() {
@@ -79,27 +76,48 @@
       isSubmittingComment = false;
     }, 1000);
   }
+
+  // Reactive statement to show toast messages based on form action result
+  $: if (form?.status === 'success') {
+    toastMessage = form.message || 'Action completed successfully!';
+    toastType = 'success';
+    showToast = true;
+    invalidateAll();
+    isConverting = false;
+    isSubmittingComment = false;
+    
+    // Reset comment field if the comment was successfully added
+    if (form.comment) {
+      newComment = '';
+    }
+  } else if (form?.status === 'error') {
+    toastMessage = form.message || 'An error occurred.';
+    toastType = 'error';
+    showToast = true;
+    isConverting = false;
+    isSubmittingComment = false;
+  }
 </script>
 
 <!-- Use Toast component properly -->
 {#if showToast}
-  <Toast dismissable bind:open={showToast} color={toastType} position="top-right">
+  <Toast dismissable bind:open={showToast} color={toastType === 'success' ? 'green' : toastType === 'error' ? 'red' : 'blue'} position="top-right">
     <span class="font-medium">{toastMessage}</span>
   </Toast>
 {/if}
 
-<div class="min-h-screen bg-gradient-to-br from-blue-50 to-gray-100">
+<div class="min-h-screen bg-gradient-to-br from-blue-50 to-gray-100 pb-12">
   <!-- Sticky Top Bar -->
-  <header class="sticky top-0 z-20 bg-white/80 backdrop-blur border-b border-blue-100 shadow-sm">
-    <div class="max-w-7xl mx-auto flex items-center justify-between px-4 py-2">
-      <div class="flex items-center gap-2">
-        <a href="/app/leads/open" aria-label="Back to leads list" class="text-blue-700 hover:text-blue-900 rounded-full p-2 transition-colors">
+  <header class="sticky top-0 z-20 bg-white/90 backdrop-blur-md border-b border-blue-100 shadow-sm">
+    <div class="max-w-7xl mx-auto flex items-center justify-between px-4 py-3">
+      <div class="flex items-center gap-3">
+        <a href="/app/leads/open" aria-label="Back to leads list" class="text-blue-700 hover:text-blue-900 bg-blue-50 hover:bg-blue-100 rounded-full p-2 transition-all duration-200">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
           </svg>
         </a>
-        <h1 class="text-xl md:text-2xl font-bold text-blue-900 truncate">{getFullName(lead)}</h1>
-        <Badge color={getStatusColor(lead.status)} class="ml-2">{lead.status}</Badge>
+        <h1 class="text-xl md:text-2xl font-bold text-blue-900 tracking-tight truncate">{getFullName(lead)}</h1>
+        <Badge color={getStatusColor(lead.status)} class="ml-2 text-xs font-medium px-3 py-1">{lead.status}</Badge>
       </div>
       <div class="flex gap-2">
         {#if lead.status !== 'CONVERTED'}
@@ -112,7 +130,7 @@
               // isConverting will be reset by the reactive statement above
             };
           }}>
-            <Button type="submit" color="success" size="sm" disabled={isConverting}>
+            <Button type="submit" color="green" size="sm" disabled={isConverting} class="shadow-sm hover:shadow transition-all duration-200">
               {#if isConverting}
                 <Spinner size="sm" class="mr-1.5" /> Converting...
               {:else}
@@ -124,7 +142,7 @@
             </Button>
           </form>
         {/if}
-        <Button color="light" size="sm" href="/app/leads/{lead.id}/edit" disabled={isConverting || lead.status === 'CONVERTED'}>
+        <Button color="light" size="sm" href="/app/leads/{lead.id}/edit" disabled={isConverting || lead.status === 'CONVERTED'} class="shadow-sm hover:shadow transition-all duration-200">
           <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
           </svg>
@@ -134,331 +152,390 @@
     </div>
   </header>
 
-  <main class="max-w-7xl mx-auto px-2 md:px-6 py-8 grid grid-cols-1 md:grid-cols-3 gap-8">
-    <!-- Sidebar: Lead Summary -->
-    <aside class="md:col-span-1">
-      <Card class="mb-6 shadow-lg border-0 bg-white/90">
-        <div class="flex flex-col items-center py-6">
-          <div class="bg-gradient-to-tr from-blue-200 to-blue-400 text-blue-900 p-5 rounded-full shadow">
-            <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
-            </svg>
-          </div>
-          <h2 class="mt-4 text-lg font-semibold text-blue-900">{getFullName(lead)}</h2>
-          {#if lead.title}
-            <div class="text-sm text-blue-700">{lead.title}</div>
-          {/if}
-          {#if lead.company}
-            <div class="text-sm text-gray-500 mt-1">{lead.company}</div>
-          {/if}
-        </div>
-        <div class="border-t pt-4 px-4 space-y-2">
-          {#if lead.email}
-            <div class="flex items-center gap-2">
-              <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 12H8m8 0a4 4 0 11-8 0 4 4 0 018 0z" />
+  <main class="px-4 sm:px-6 py-6 pb-8 max-w-7xl mx-auto">
+    <!-- Responsive grid: sidebar + main content -->
+    <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+      <!-- Sidebar: Lead Summary -->
+      <div class="space-y-6 md:col-span-1">
+        <!-- Lead Status Card -->
+        <Card class="shadow-lg border-0 bg-white/95 overflow-visible">
+          <div class="flex flex-col items-center py-8 relative">
+            <div class="absolute -top-8 bg-gradient-to-br from-blue-600 to-indigo-700 text-white p-5 rounded-xl shadow-lg transform -rotate-3 hover:rotate-0 transition-transform duration-300">
+              <svg class="w-10 h-10" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
               </svg>
-              <a href="mailto:{lead.email}" class="text-blue-700 hover:underline">{lead.email}</a>
             </div>
-          {/if}
-          {#if lead.phone}
-            <div class="flex items-center gap-2">
-              <svg class="w-4 h-4 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
-              </svg>
-              <a href="tel:{lead.phone}" class="text-green-700 hover:underline">{lead.phone}</a>
+            <div class="mt-10">
+              <h2 class="mt-2 text-2xl font-bold text-blue-900 tracking-tight">{getFullName(lead)}</h2>
+              <div class="flex justify-center mt-2">
+                <Badge color={getStatusColor(lead.status)} class="px-3 py-1 text-sm">{lead.status}</Badge>
+              </div>
+              {#if lead.title}
+                <div class="text-sm text-blue-700 mt-1">{lead.title}</div>
+              {/if}
+              {#if lead.company}
+                <div class="text-sm text-gray-500 mt-1">{lead.company}</div>
+              {/if}
             </div>
-          {/if}
-          <div class="flex items-center gap-2">
-            <Badge color={getStatusColor(lead.status)}>{lead.status}</Badge>
-            {#if lead.leadSource}
-              <span class="text-xs text-gray-500 capitalize">{lead.leadSource.replace('_', ' ').toLowerCase()}</span>
-            {/if}
-          </div>
-        </div>
-        <div class="border-t pt-4 px-4 space-y-1 text-xs text-gray-500 mt-2">
-          <div>Created: <span class="font-medium text-gray-700">{formatDate(lead.createdAt)}</span></div>
-          <div>Updated: <span class="font-medium text-gray-700">{formatDate(lead.updatedAt)}</span></div>
-          {#if lead.isConverted && lead.convertedAt}
-            <div class="text-green-600 font-semibold">Converted: <span class="font-medium">{formatDate(lead.convertedAt)}</span></div>
-            {#if lead.convertedContactId}
-              <div class="text-xs"><a href="/app/contacts/{lead.convertedContactId}" class="text-blue-600 hover:underline">View Contact</a></div>
-            {/if}
-            {#if lead.convertedAccountId}
-              <div class="text-xs"><a href="/app/accounts/{lead.convertedAccountId}" class="text-blue-600 hover:underline">View Account</a></div>
-            {/if}
-             {#if lead.convertedOpportunityId}
-              <div class="text-xs"><a href="/app/opportunities/{lead.convertedOpportunityId}" class="text-blue-600 hover:underline">View Opportunity</a></div>
-            {/if}
-          {/if}
-        </div>
-      </Card>
-
-      <!-- Owner Card -->
-      <Card class="mb-6 shadow border-0 bg-white/90">
-        <h3 class="text-base font-semibold mb-2 text-blue-900">Lead Owner</h3>
-        <div class="flex items-center gap-3">
-          <div class="bg-blue-100 text-blue-700 p-2 rounded-full">
-            <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
-            </svg>
           </div>
-          <div>
-            <div class="font-medium">{lead.owner?.name || 'Unassigned'}</div>
-            {#if lead.owner?.email}
-              <div class="text-xs text-gray-500">{lead.owner.email}</div>
+          
+          <!-- Contact Info -->
+          <div class="border-t border-blue-100 pt-5 px-5 space-y-4 mt-3">
+            <h3 class="text-sm font-semibold text-blue-800 uppercase tracking-wider">Contact Information</h3>
+            {#if lead.email}
+              <div class="flex items-center gap-3 p-3 bg-blue-50/80 rounded-lg hover:bg-blue-100/80 transition-colors duration-200">
+                <div class="bg-blue-100 p-2 rounded-lg text-blue-600">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                  </svg>
+                </div>
+                <a href="mailto:{lead.email}" class="text-blue-700 hover:text-blue-900 hover:underline font-medium">{lead.email}</a>
+              </div>
             {/if}
-            {#if lead.owner?.title}
-              <div class="text-xs text-gray-400">{lead.owner.title}</div>
+            {#if lead.phone}
+              <div class="flex items-center gap-3 p-3 bg-green-50/80 rounded-lg hover:bg-green-100/80 transition-colors duration-200">
+                <div class="bg-green-100 p-2 rounded-lg text-green-600">
+                  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
+                  </svg>
+                </div>
+                <a href="tel:{lead.phone}" class="text-green-700 hover:text-green-900 hover:underline font-medium">{lead.phone}</a>
+              </div>
             {/if}
           </div>
-        </div>
-        <Button size="xs" color="alternative" class="w-full mt-4">Change Owner</Button>
-      </Card>
 
-      <!-- Related Contact -->
-      <!-- Show converted contact info if available -->
-      <Card class="shadow border-0 bg-white/90">
-        <h3 class="text-base font-semibold mb-2 text-blue-900">Related Contact</h3>
-        {#if lead.convertedContactId && lead.contact}
-          <div class="border rounded-lg p-3 bg-green-50 border-green-200" in:scale={{ duration: 200 }}>
-             <div class="font-medium text-gray-900">{lead.contact.firstName} {lead.contact.lastName}</div>
-             {#if lead.contact.email}
-               <div class="text-xs text-gray-500">{lead.contact.email}</div>
-             {/if}
-             {#if lead.contact.phone}
-               <div class="text-xs text-gray-500">{lead.contact.phone}</div>
-             {/if}
-             <Button size="xs" href={`/app/contacts/${lead.contact.id}`} class="w-full mt-2">
-               <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
-               </svg>
-               View Contact
-             </Button>
-           </div>
-        {:else if lead.status === 'CONVERTED'}
-           <div class="text-center py-4 text-gray-400 border border-dashed rounded-lg" in:fade={{ delay: 300 }}>
-             <svg xmlns="http://www.w3.org/2000/svg" class="w-8 h-8 mx-auto text-green-300 mb-2" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
-               <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-             </svg>
-             Lead Converted
-           </div>
-        {:else}
-          <div class="text-center py-4 text-gray-400 border border-dashed rounded-lg" in:fade={{ delay: 300 }}>
-            <svg class="w-8 h-8 mx-auto text-gray-200 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
-            </svg>
-            No related contacts
-            <div class="mt-2">
-              <Button size="xs" color="alternative">Create Contact</Button>
+          <!-- Lead Details -->
+          <div class="border-t border-blue-100 pt-5 px-5 space-y-4 mt-3">
+            <h3 class="text-sm font-semibold text-blue-800 uppercase tracking-wider">Lead Details</h3>
+            <div class="space-y-3 bg-gray-50/80 rounded-lg p-4">
+              {#if lead.leadSource}
+                <div class="flex justify-between items-center">
+                  <span class="text-gray-600 font-medium">Source</span>
+                  <span class="font-medium capitalize bg-blue-100 text-blue-800 px-3 py-1 rounded-md text-sm">{lead.leadSource.replace('_', ' ').toLowerCase()}</span>
+                </div>
+              {/if}
+              {#if lead.industry}
+                <div class="flex justify-between items-center">
+                  <span class="text-gray-600 font-medium">Industry</span>
+                  <span class="font-medium bg-purple-100 text-purple-800 px-3 py-1 rounded-md text-sm">{lead.industry}</span>
+                </div>
+              {/if}
+              {#if lead.rating}
+                <div class="flex justify-between items-center">
+                  <span class="text-gray-600 font-medium">Rating</span>
+                  <div class="flex gap-1">
+                    {#each Array(parseInt(lead.rating) || 0) as _, i}
+                      <svg class="w-5 h-5 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+                        <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
+                      </svg>
+                    {/each}
+                  </div>
+                </div>
+              {/if}
             </div>
           </div>
-        {/if}
-      </Card>
-    </aside>
 
-    <!-- Main Content -->
-    <section class="md:col-span-2 flex flex-col gap-8">
-      <!-- Lead Details Card -->
-      <Card class="shadow-lg border-0 bg-white/95">
-        <div class="grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4">
-          <div>
-            <h4 class="text-xs font-semibold text-gray-400 uppercase mb-1">Full Name</h4>
-            <div class="text-base font-medium text-gray-900">{getFullName(lead)}</div>
-          </div>
-          {#if lead.company}
-            <div>
-              <h4 class="text-xs font-semibold text-gray-400 uppercase mb-1">Company</h4>
-              <div class="text-base text-gray-900">{lead.company}</div>
-            </div>
-          {/if}
-          {#if lead.email}
-            <div>
-              <h4 class="text-xs font-semibold text-gray-400 uppercase mb-1">Email</h4>
-              <a href="mailto:{lead.email}" class="text-blue-700 hover:underline">{lead.email}</a>
-            </div>
-          {/if}
-          {#if lead.phone}
-            <div>
-              <h4 class="text-xs font-semibold text-gray-400 uppercase mb-1">Phone</h4>
-              <a href="tel:{lead.phone}" class="text-green-700 hover:underline">{lead.phone}</a>
-            </div>
-          {/if}
-          {#if lead.title}
-            <div>
-              <h4 class="text-xs font-semibold text-gray-400 uppercase mb-1">Title</h4>
-              <div class="text-base text-gray-900">{lead.title}</div>
-            </div>
-          {/if}
-          {#if lead.leadSource}
-            <div>
-              <h4 class="text-xs font-semibold text-gray-400 uppercase mb-1">Lead Source</h4>
-              <div class="capitalize">{lead.leadSource.replace('_', ' ').toLowerCase()}</div>
+          <!-- Timeline -->
+          <div class="border-t border-blue-100 pt-5 px-5 space-y-4 mt-3">
+            <h3 class="text-sm font-semibold text-blue-800 uppercase tracking-wider">Timeline</h3>
+            <div class="space-y-4 relative before:absolute before:left-2 before:top-0 before:bottom-0 before:w-0.5 before:bg-blue-100">
+              <div class="flex gap-4 items-center">
+                <div class="h-5 w-5 rounded-full bg-blue-200 border-2 border-blue-500 z-10"></div>
+                <div class="flex justify-between w-full items-center">
+                  <span class="text-gray-600 font-medium">Created</span>
+                  <span class="font-medium text-sm bg-blue-50 text-blue-800 px-3 py-1 rounded-md">{formatDate(lead.createdAt)}</span>
+                </div>
+              </div>
+              <div class="flex gap-4 items-center">
+                <div class="h-5 w-5 rounded-full bg-blue-200 border-2 border-blue-500 z-10"></div>
+                <div class="flex justify-between w-full items-center">
+                  <span class="text-gray-600 font-medium">Updated</span>
+                  <span class="font-medium text-sm bg-blue-50 text-blue-800 px-3 py-1 rounded-md">{formatDate(lead.updatedAt)}</span>
+                </div>
+              </div>
+              {#if lead.isConverted && lead.convertedAt}
+                <div class="flex gap-4 items-center">
+                  <div class="h-5 w-5 rounded-full bg-green-200 border-2 border-green-500 z-10"></div>
+                  <div class="flex justify-between w-full items-center">
+                    <span class="text-green-700 font-medium">Converted</span>
+                    <span class="font-medium text-sm bg-green-50 text-green-800 px-3 py-1 rounded-md">{formatDate(lead.convertedAt)}</span>
+                  </div>
+                </div>
+              {/if}
             </div>
-          {/if}
-          {#if lead.industry}
-            <div>
-              <h4 class="text-xs font-semibold text-gray-400 uppercase mb-1">Industry</h4>
-              <div>{lead.industry}</div>
+          </div>
+        </Card>
+
+        <!-- Owner Card -->
+        <Card class="shadow-lg border-0 bg-white/95 hover:shadow-xl transition-shadow duration-300">
+          <h3 class="text-base font-semibold mb-4 text-blue-900 border-b pb-3">Lead Owner</h3>
+          <div class="flex items-center gap-4 p-2">
+            <div class="bg-gradient-to-br from-blue-400 to-blue-600 text-white p-3 rounded-lg shadow-md">
+              <svg class="w-7 h-7" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+              </svg>
             </div>
-          {/if}
-          {#if lead.rating}
             <div>
-              <h4 class="text-xs font-semibold text-gray-400 uppercase mb-1">Rating</h4>
-              <div>{lead.rating}</div>
+              <div class="font-medium text-lg">{lead.owner?.name || 'Unassigned'}</div>
+              {#if lead.owner?.email}
+                <div class="text-sm text-gray-500">{lead.owner.email}</div>
+              {/if}
             </div>
-          {/if}
-        </div>
-        {#if lead.description}
-          <div class="border-t pt-4 mt-4">
-            <h4 class="text-xs font-semibold text-gray-400 uppercase mb-1">Description</h4>
-            <div class="text-gray-800 whitespace-pre-line">{lead.description}</div>
           </div>
-        {/if}
-      </Card>
+          <Button size="xs" color="alternative" class="w-full mt-4 shadow-sm hover:shadow transition-all duration-200">Change Owner</Button>
+        </Card>
 
-      <!-- Tabs Section -->
-      <Card class="shadow-lg border-0 bg-white/95">
-        <Tabs style="underline" contentClass="p-0">
-          <TabItem open title="Comments">
-            <div class="p-4">
-              <div class="mb-4">
-                <form method="POST" action="?/addComment" use:enhance={() => {
-                  isSubmittingComment = true;
-                  return async ({ update }) => {
-                    await update({ reset: false });
-                  };
-                }}>
-                  <Textarea name="comment" bind:value={newComment} placeholder="Add a comment..." rows="3" class="focus:border-blue-500" />
-                  <div class="flex justify-end mt-3">
-                    <Button type="submit" size="sm" color="blue" disabled={!newComment || isSubmittingComment}
-                            class="px-4 py-2 transition-all duration-200 hover:shadow">
-                      {#if isSubmittingComment}
-                        <Spinner size="sm" class="mr-2" />
-                      {:else}
-                        <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-                        </svg>
-                      {/if}
-                      Add Comment
-                    </Button>
-                  </div>
-                </form>
-              </div>
-              {#if lead.comments && lead.comments.length > 0}
-                <div class="space-y-4">
-                  {#each lead.comments as comment, i}
-                    <div class="bg-gray-50 border border-gray-100 rounded-lg p-4 hover:shadow-sm transition-shadow"
-                         in:fly={{ y: 20, delay: i * 80, duration: 300 }}>
-                      <div class="flex flex-wrap justify-between items-start gap-2">
-                        <div class="font-medium">{comment.author?.name || 'Unknown User'}</div>
-                        <div class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded">{formatDate(comment.createdAt)}</div>
-                      </div>
-                      <p class="mt-2 text-gray-800 whitespace-pre-line">{comment.body}</p>
-                    </div>
-                  {/each}
+        <!-- Related Contact -->
+        {#if lead.convertedContactId && lead.contact}
+          <Card class="shadow-lg border-0 bg-white/95 hover:shadow-xl transition-shadow duration-300">
+            <h3 class="text-base font-semibold mb-4 text-blue-900 border-b pb-3">Related Contact</h3>
+            <div class="border rounded-lg p-4 bg-gradient-to-br from-green-50 to-green-100 border-green-200" in:scale={{ duration: 200 }}>
+              <div class="font-medium text-gray-900 text-lg">{lead.contact.firstName} {lead.contact.lastName}</div>
+              {#if lead.contact.email}
+                <div class="text-sm text-gray-600 mt-1 flex items-center gap-2">
+                  <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
+                  </svg>
+                  {lead.contact.email}
                 </div>
-              {:else}
-                <div class="text-center py-10 text-gray-400" in:fade={{ delay: 300 }}>
-                  <svg class="w-10 h-10 mx-auto text-gray-200 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
+              {/if}
+              {#if lead.contact.phone}
+                <div class="text-sm text-gray-600 mt-1 flex items-center gap-2">
+                  <svg class="w-4 h-4 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
                   </svg>
-                  No comments yet
+                  {lead.contact.phone}
                 </div>
               {/if}
+              <Button size="xs" href={`/app/contacts/${lead.contact.id}`} class="w-full mt-3 shadow-sm hover:shadow transition-all duration-200">
+                <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                </svg>
+                View Contact
+              </Button>
             </div>
-          </TabItem>
-          <TabItem title="Tasks">
-            <div class="p-4">
-              <div class="flex justify-end mb-4">
-                <Button size="xs" class="px-3 py-1.5">
-                  <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-                  </svg>
-                  Add Task
-                </Button>
+          </Card>
+        {/if}
+      </div>
+
+      <!-- Main Content -->
+      <div class="space-y-6 md:col-span-2">
+        <!-- Description Card -->
+        {#if lead.description}
+          <Card class="shadow-lg border-0 bg-white/95 hover:shadow-xl transition-shadow duration-300">
+            <div class="flex items-center gap-3 border-b pb-3 mb-4">
+              <div class="bg-blue-100 p-2 rounded-lg text-blue-700">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                </svg>
               </div>
-              {#if lead.tasks && lead.tasks.length > 0}
+              <h3 class="text-lg font-semibold text-blue-900">Description</h3>
+            </div>
+            <div class="prose max-w-none text-gray-700 bg-gray-50/80 p-5 rounded-lg border border-gray-100">
+              {lead.description}
+            </div>
+          </Card>
+        {/if}
+
+        <!-- Tabs Section -->
+        <Card class="shadow-lg border-0 bg-white/95 hover:shadow-xl transition-shadow duration-300">
+          <Tabs style="pills" contentClass="p-0 mt-4">
+            <TabItem open title="Comments">
+              <div class="p-4">
+                <div class="mb-6">
+                  <form method="POST" action="?/addComment" use:enhance={() => {
+                    isSubmittingComment = true;
+                    return async ({ update }) => {
+                      await update({ reset: false });
+                    };
+                  }}>
+                    <Textarea name="comment" bind:value={newComment} placeholder="Add a comment..." rows={3} 
+                              class="focus:border-blue-500 focus:ring-blue-500 bg-blue-50/50" />
+                    <div class="flex justify-end mt-3">
+                      <Button type="submit" size="sm" color="blue" disabled={!newComment || isSubmittingComment}
+                              class="px-4 py-2 transition-all duration-200 hover:shadow shadow-sm">
+                        {#if isSubmittingComment}
+                          <Spinner size="sm" class="mr-2" />
+                        {:else}
+                          <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                          </svg>
+                        {/if}
+                        Add Comment
+                      </Button>
+                    </div>
+                  </form>
+                </div>
+
                 <div class="space-y-4">
-                  {#each lead.tasks as task, i}
-                    <div class="border rounded-lg p-4 hover:shadow-sm transition-shadow" in:fly={{ y: 20, delay: i * 80, duration: 300 }}>
-                      <div class="flex flex-wrap justify-between items-start gap-2">
-                        <div class="font-medium">{task.subject}</div>
-                        <Badge color={task.status === 'Completed' ? 'green' : task.priority === 'High' ? 'red' : 'blue'}>
-                          {task.status}
-                        </Badge>
+                  {#each lead.comments as comment, i}
+                    <div class="border rounded-lg p-5 hover:shadow-md transition-shadow bg-white" in:fly={{ y: 20, delay: i * 80, duration: 300 }}>
+                      <div class="flex items-start gap-4">
+                        <div class="bg-gradient-to-br from-blue-400 to-blue-600 text-white p-3 rounded-lg shadow-sm">
+                          <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                            <path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
+                          </svg>
+                        </div>
+                        <div class="flex-1">
+                          <div class="flex items-center justify-between pb-2 border-b">
+                            <div class="font-medium text-lg">{comment.author?.name || 'Unknown'}</div>
+                            <div class="text-xs text-gray-500 bg-gray-100 px-2 py-1 rounded-md">{formatDate(comment.createdAt)}</div>
+                          </div>
+                          <p class="mt-3 text-gray-700 whitespace-pre-line">{comment.text || comment.content || ''}</p>
+                        </div>
                       </div>
-                      <div class="text-sm text-gray-500 mt-2 flex items-center">
-                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                    </div>
+                  {/each}
+                  
+                  {#if !lead.comments || lead.comments.length === 0}
+                    <div class="text-center py-12 bg-gray-50 rounded-lg border border-dashed border-gray-300">
+                      <div class="text-gray-400 flex flex-col items-center">
+                        <svg class="w-12 h-12 mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 10h.01M12 10h.01M16 10h.01M9 16H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-5l-5 5v-5z"></path>
                         </svg>
-                        Due: {task.dueDate ? formatDate(task.dueDate) : 'No due date'}
+                        <p class="text-lg font-medium">No comments yet</p>
+                        <p class="text-sm mt-1">Be the first to add a comment to this lead</p>
                       </div>
-                      {#if task.description}
-                        <p class="mt-2 text-sm text-gray-600 border-t pt-2">{task.description}</p>
-                      {/if}
                     </div>
-                  {/each}
+                  {/if}
                 </div>
-              {:else}
-                <div class="text-center py-10 text-gray-400" in:fade={{ delay: 300 }}>
-                  <svg class="w-10 h-10 mx-auto text-gray-200 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01"></path>
-                  </svg>
-                  No tasks yet
-                </div>
-              {/if}
-            </div>
-          </TabItem>
-          <TabItem title="Events">
-            <div class="p-4">
-              <div class="flex justify-end mb-4">
-                <Button size="xs" class="px-3 py-1.5">
-                  <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
-                  </svg>
-                  Add Event
-                </Button>
               </div>
-              {#if lead.events && lead.events.length > 0}
-                <div class="space-y-4">
-                  {#each lead.events as event, i}
-                    <div class="border rounded-lg p-4 hover:shadow-sm transition-shadow" in:fly={{ y: 20, delay: i * 80, duration: 300 }}>
-                      <div class="font-medium">{event.subject}</div>
-                      <div class="text-sm text-gray-500 mt-2 flex items-center">
-                        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                        </svg>
-                        {formatDate(event.startDate)} - {formatDate(event.endDate)}
-                      </div>
-                      {#if event.location}
-                        <div class="text-sm mt-2 flex items-center">
-                          <svg class="w-4 h-4 mr-1 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
-                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
-                          </svg>
-                          {event.location}
+            </TabItem>
+
+            <TabItem title="Tasks">
+              <div class="p-4">
+                <div class="flex justify-between items-center mb-4">
+                  <h3 class="font-semibold text-blue-900">Tasks</h3>
+                  <Button size="xs" color="blue" class="px-3 py-1 shadow-sm">
+                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                    New Task
+                  </Button>
+                </div>
+                
+                {#if lead.tasks && lead.tasks.length > 0}
+                  <div class="space-y-4">
+                    {#each lead.tasks as task, i}
+                      <div class="border rounded-lg p-4 hover:shadow-md transition-shadow bg-white" in:fly={{ y: 20, delay: i * 80, duration: 300 }}>
+                        <div class="flex items-start justify-between">
+                          <div class="flex items-center gap-3">
+                            <div class="relative">
+                              <input type="checkbox" class="w-5 h-5 text-blue-600 rounded border-gray-300 focus:ring-blue-500" checked={task.completed || false} />
+                              {#if task.completed}
+                                <div class="absolute inset-0 flex items-center justify-center pointer-events-none">
+                                  <svg class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                                  </svg>
+                                </div>
+                              {/if}
+                            </div>
+                            <div class="font-medium text-lg">{task.subject}</div>
+                          </div>
+                          <Badge color={getPriorityColor(task.priority)} class="text-xs px-2.5 py-1">{task.priority}</Badge>
+                        </div>
+                        {#if task.description}
+                          <p class="mt-3 text-sm text-gray-600 pl-8">{task.description}</p>
+                        {/if}
+                        <div class="mt-3 flex items-center gap-3 text-xs text-gray-500 pl-8">
+                          <div class="flex items-center gap-1">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                            </svg>
+                            <span class="font-medium">Due: {formatDate(task.dueDate)}</span>
+                          </div>
+                          <Button size="xs" color="light" class="text-xs px-2 py-0.5 ml-auto">
+                            <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
+                            </svg>
+                            Edit
+                          </Button>
                         </div>
-                      {/if}
-                      {#if event.description}
-                        <p class="mt-2 text-sm text-gray-600 border-t pt-2">{event.description}</p>
-                      {/if}
+                      </div>
+                    {/each}
+                  </div>
+                {:else}
+                  <div class="text-center py-12 bg-gray-50 rounded-lg border border-dashed border-gray-300">
+                    <div class="text-gray-400 flex flex-col items-center">
+                      <svg class="w-12 h-12 mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2"></path>
+                      </svg>
+                      <p class="text-lg font-medium">No tasks found</p>
+                      <p class="text-sm mt-1">Create a new task for this lead</p>
                     </div>
-                  {/each}
-                </div>
-              {:else}
-                <div class="text-center py-10 text-gray-400" in:fade={{ delay: 300 }}>
-                  <svg class="w-10 h-10 mx-auto text-gray-200 mb-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
-                  </svg>
-                  No events scheduled
+                  </div>
+                {/if}
+              </div>
+            </TabItem>
+
+            <TabItem title="Events">
+              <div class="p-4">
+                <div class="flex justify-between items-center mb-4">
+                  <h3 class="font-semibold text-blue-900">Events</h3>
+                  <Button size="xs" color="blue" class="px-3 py-1 shadow-sm">
+                    <svg class="w-4 h-4 mr-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
+                    </svg>
+                    New Event
+                  </Button>
                 </div>
-              {/if}
-            </div>
-          </TabItem>
-        </Tabs>
-      </Card>
-    </section>
+                
+                {#if lead.events && lead.events.length > 0}
+                  <div class="space-y-4">
+                    {#each lead.events as event, i}
+                      <div class="border rounded-lg p-4 hover:shadow-md transition-shadow bg-white" in:fly={{ y: 20, delay: i * 80, duration: 300 }}>
+                        <div class="flex items-start gap-4">
+                          <div class="bg-gradient-to-br from-indigo-400 to-indigo-600 text-white p-3 rounded-lg shadow-sm flex flex-col items-center justify-center min-w-[3rem]">
+                            <div class="text-xs font-bold">{new Date(event.startDate).toLocaleString('default', { month: 'short' })}</div>
+                            <div class="text-xl font-bold">{new Date(event.startDate).getDate()}</div>
+                          </div>
+                          <div class="flex-1">
+                            <div class="font-medium text-lg text-indigo-900">{event.subject}</div>
+                            <div class="text-sm text-gray-600 mt-2 flex items-center">
+                              <svg class="w-4 h-4 mr-1 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+                              </svg>
+                              {formatDate(event.startDate)} - {formatDate(event.endDate)}
+                            </div>
+                            {#if event.location}
+                              <div class="text-sm mt-2 flex items-center text-gray-600">
+                                <svg class="w-4 h-4 mr-1 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"></path>
+                                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                                </svg>
+                                {event.location}
+                              </div>
+                            {/if}
+                            {#if event.description}
+                              <p class="mt-3 text-sm text-gray-600 bg-indigo-50/60 p-3 rounded border border-indigo-100">{event.description}</p>
+                            {/if}
+                          </div>
+                          <Button size="xs" color="light" class="self-start p-2">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"></path>
+                            </svg>
+                          </Button>
+                        </div>
+                      </div>
+                    {/each}
+                  </div>
+                {:else}
+                  <div class="text-center py-12 bg-gray-50 rounded-lg border border-dashed border-gray-300">
+                    <div class="text-gray-400 flex flex-col items-center">
+                      <svg class="w-12 h-12 mb-3 text-gray-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
+                      </svg>
+                      <p class="text-lg font-medium">No events found</p>
+                      <p class="text-sm mt-1">Schedule a new event for this lead</p>
+                    </div>
+                  </div>
+                {/if}
+              </div>
+            </TabItem>
+          </Tabs>
+        </Card>
+      </div>
+    </div>
   </main>
 </div>
diff --git a/src/routes/(app)/app/leads/[lead_id]/edit/+page.server.js b/src/routes/(app)/app/leads/[lead_id]/edit/+page.server.js
index 6f20b38..c66964d 100644
--- a/src/routes/(app)/app/leads/[lead_id]/edit/+page.server.js
+++ b/src/routes/(app)/app/leads/[lead_id]/edit/+page.server.js
@@ -35,10 +35,16 @@ export async function load({ params }) {
 }
 
 export const actions = {
-  default: async ({ request, params }) => {
+  default: async ({ request, params, locals }) => {
     const { lead_id } = params;
     const formData = await request.formData();
     
+    // Get org from locals
+    const org = locals.org;
+    if (!org) {
+      return { success: false, error: 'Organization not found in session.' };
+    }
+
     const updatedLead = {
       firstName: formData.get('firstName'),
       lastName: formData.get('lastName'),
@@ -51,7 +57,8 @@ export const actions = {
       industry: formData.get('industry') || null,
       rating: formData.get('rating') || null,
       description: formData.get('description') || null,
-      ownerId: formData.get('ownerId')
+      ownerId: formData.get('ownerId'),
+      organizationId: org.id // Always set from session
     };
     
     try {
diff --git a/src/routes/(app)/app/leads/[lead_id]/edit/+page.svelte b/src/routes/(app)/app/leads/[lead_id]/edit/+page.svelte
index 4099602..53ecab9 100644
--- a/src/routes/(app)/app/leads/[lead_id]/edit/+page.svelte
+++ b/src/routes/(app)/app/leads/[lead_id]/edit/+page.svelte
@@ -110,7 +110,7 @@
     </div>
   </header>
 
-  <main class="max-w-4xl mx-auto px-4 py-8">
+  <main class="max-w-4xl mx-auto px-6 py-10">
     {#if formSubmitted && !errorMessage}
       <div in:fly={{ y: -20 }} class="mb-8">
         <Toast dismissable color="green" class="mb-5">
@@ -127,7 +127,9 @@
       </div>
     {/if}
 
-    <Card class="shadow-lg border-0 bg-white/95">
+    <p class="text-sm text-gray-600 mb-6">Editing lead: <span class="font-medium">{lead.firstName} {lead.lastName}</span></p>
+
+    <Card class="px-4 sm:px-6 py-4 pb-8 max-w-5xl shadow-lg border border-gray-200 bg-white rounded-lg mx-auto">
       <form 
         method="POST" 
         use:enhance={({ formData }) => {
@@ -154,9 +156,9 @@
           };
         }}
       >
-        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
           <!-- Personal Information -->
-          <div class="space-y-4">
+          <div class="space-y-4 bg-gray-50 p-6 rounded-lg border border-gray-200">
             <h3 class="text-lg font-semibold text-blue-900 mb-4">Basic Information</h3>
             
             <div>
@@ -219,7 +221,7 @@
           </div>
           
           <!-- Company Information -->
-          <div class="space-y-4">
+          <div class="space-y-4 bg-gray-50 p-6 rounded-lg border border-gray-200">
             <h3 class="text-lg font-semibold text-blue-900 mb-4">Company Information</h3>
             
             <div>
@@ -256,7 +258,7 @@
           </div>
 
           <!-- Lead Information -->
-          <div class="space-y-4 md:col-span-2">
+          <div class="space-y-4 bg-gray-50 p-6 rounded-lg border border-gray-200 md:col-span-2">
             <h3 class="text-lg font-semibold text-blue-900 mb-4">Lead Details</h3>
             
             <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
diff --git a/src/routes/(app)/app/leads/new/+page.server.js b/src/routes/(app)/app/leads/new/+page.server.js
index ecfe5f3..be7392b 100644
--- a/src/routes/(app)/app/leads/new/+page.server.js
+++ b/src/routes/(app)/app/leads/new/+page.server.js
@@ -82,69 +82,101 @@ export const actions = {
     const firstName = formData.get('first_name')?.toString().trim();
     const lastName = formData.get('last_name')?.toString().trim() || '';
     const email = formData.get('email')?.toString().trim();
+    const leadTitle = formData.get('lead_title')?.toString().trim();
     
     if (!firstName) {
       return fail(400, { error: 'First name is required' });
     }
+    
+    if (!lastName) {
+      return fail(400, { error: 'Last name is required' });
+    }
+    
+    if (!leadTitle) {
+      return fail(400, { error: 'Lead title is required' });
+    }
 
     // Extract all form fields
     const leadData = {
       firstName,
       lastName,
+      title: leadTitle,
       email: email || null,
       phone: formData.get('phone')?.toString() || null,
       company: formData.get('company')?.toString() || null,
-      title: formData.get('title')?.toString() || null,
       status: formData.get('status')?.toString() || 'PENDING',
       leadSource: formData.get('source')?.toString() || null,
       industry: formData.get('industry')?.toString() || null,
-      rating: null, // Can be set based on a rating field if added
       description: formData.get('description')?.toString() || null,
+      
+      // Store opportunity amount in description since it's not in the Lead schema
+      opportunityAmount: formData.get('opportunity_amount') ? 
+        parseFloat(formData.get('opportunity_amount')) : null,
+      
+      // Store probability in description since it's not in the Lead schema
+      probability: formData.get('probability') ? 
+        parseFloat(formData.get('probability')) : null,
+      
+      // Address fields
+      street: formData.get('street')?.toString() || null,
+      city: formData.get('city')?.toString() || null,
+      state: formData.get('state')?.toString() || null,
+      postalCode: formData.get('postcode')?.toString() || null,
+      country: formData.get('country')?.toString() || null,
+      
+      // Save these to include in description if not available in the model
+      website: formData.get('website')?.toString() || null,
+      skypeID: formData.get('skype_ID')?.toString() || null,
     };
     
     try {
-      // Create new lead in the database
-      const lead = await prisma.lead.create({
-        data: {
-          ...leadData,
-          owner: {
-            connect: {
-              id: user.id
-            }
-          },
-          organization: {
-            connect: {
-              id: org.id
-            }
+      // Prepare basic lead data that matches the Prisma schema
+      let leadCreateData = {
+        firstName: leadData.firstName,
+        lastName: leadData.lastName,
+        email: leadData.email,
+        phone: leadData.phone,
+        company: leadData.company,
+        title: leadData.title,
+        status: leadData.status,
+        ...(leadData.leadSource ? { leadSource: leadData.leadSource } : {}),
+        industry: leadData.industry,
+        description: leadData.description || '',
+        rating: null, // This is in the schema
+        owner: {
+          connect: {
+            id: user.id
+          }
+        },
+        organization: {
+          connect: {
+            id: org.id
           }
         }
+      };
+
+      // Remove logic that appends extra info to description
+      // All extra fields are now ignored if not in schema
+
+      // Create new lead in the database
+      const lead = await prisma.lead.create({
+        data: leadCreateData
       });
       
-      // Optionally create an address if provided
-      const street = formData.get('street')?.toString() || '';
-      const city = formData.get('city')?.toString() || '';
-      const state = formData.get('state')?.toString() || '';
-      const postalCode = formData.get('postcode')?.toString() || '';
-      const country = formData.get('country')?.toString() || '';
-      
-      if (street || city || state || postalCode || country) {
-        // Create address (this would require extending the Prisma schema to link address to lead)
-        // For now, we'll just add these fields to lead description
-        await prisma.lead.update({
-          where: { id: lead.id },
-          data: {
-            description: `${leadData.description || ''}\n\nAddress:\n${street} ${city} ${state} ${postalCode} ${country}`.trim()
-          }
-        });
-      }
-      
-      // Redirect to the newly created lead
-      throw redirect(303, '/app/leads/');
+      // Return success instead of redirecting
+      return {
+        status: 'success',
+        message: 'Lead created successfully',
+        lead: {
+          id: lead.id,
+          name: `${lead.firstName} ${lead.lastName}`
+        }
+      };
       
     } catch (err) {
       console.error('Error creating lead:', err);
       return fail(500, { 
-        error: 'Failed to create lead',
+        error: 'Failed to create lead: ' + err.message,
         values: leadData // Return entered values so the form can be repopulated
       });
     }
diff --git a/src/routes/(app)/app/leads/new/+page.svelte b/src/routes/(app)/app/leads/new/+page.svelte
index d7ae642..d717766 100644
--- a/src/routes/(app)/app/leads/new/+page.svelte
+++ b/src/routes/(app)/app/leads/new/+page.svelte
@@ -1,31 +1,41 @@
 <script>
     import { enhance } from '$app/forms';
     // Flowbite-Svelte components
-    import { Button, Input, Select, Label, Card, Alert } from 'flowbite-svelte';
+    import { Button, Input, Select, Label, Card, Alert, Toast } from 'flowbite-svelte';
+    import { CheckCircleSolid } from 'flowbite-svelte-icons';
     // Import FontAwesome icons via svelte-fa
     import Fa from 'svelte-fa';
     import {
       faPercent,
     } from '@fortawesome/free-solid-svg-icons';
+    import { goto } from '$app/navigation'; // Import goto for navigation
+    import { fade } from 'svelte/transition';
 
     /** @type {import('./$types').ActionData} */
     export let form;
     export let data;
+    
+    // Toast state
+    let showToast = false;
+    let toastMessage = '';
+    
     /**
      * Object holding the form fields.
      * @type {Object}
      */
     let formData = {
+      lead_title: '',
       opportunity_amount: 0,
       website: '',
       industry: '',
-      status: 'new',
+      status: 'NEW',
       skype_ID: '',
       source: '',
       lead_attachment: '',
       probability: 0,
       first_name: '',
       last_name: '',
+      company: '', 
       title: '',
       phone: '',
       email: '',
@@ -35,7 +45,8 @@
       state: '',
       postcode: '',
       country: '',
-      description: ''
+      description: '',
+      rating: ''
     };
   
     /**
@@ -56,8 +67,12 @@
      * @param {Event} event - The input change event
      */
     function handleChange(event) {
-      const target = event.target;
-      formData[target.name] = target.value;
+      const { name, value } = event.target;
+      formData[name] = value;
+      // Clear error when user starts typing
+      if (errors[name]) {
+        errors[name] = '';
+      }
     }
     
     /**
@@ -65,16 +80,38 @@
      * @returns {boolean} - Whether the form is valid.
      */
     function validateForm() {
-      errors = {}; // Reset errors
-  
-      if (!formData.title.trim()) {
-        errors.title = 'Lead Title is required.';
+      errors = {};
+      let isValid = true;
+      
+      // Required fields
+      const requiredFields = {
+        first_name: 'First name is required',
+        last_name: 'Last name is required',
+        lead_title: 'Lead title is required',
+        email: 'Email is required'
+      };
+      
+      // Check required fields
+      Object.entries(requiredFields).forEach(([field, message]) => {
+        if (!formData[field]?.trim()) {
+          errors[field] = message;
+          isValid = false;
+        }
+      });
+      
+      // Validate email format if provided
+      if (formData.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
+        errors.email = 'Please enter a valid email address';
+        isValid = false;
       }
-      if (!formData.email.trim()) {
-        errors.email = 'Email is required.';
+      
+      // Validate phone format if provided
+      if (formData.phone && !/^[\d\s\-+()]*$/.test(formData.phone)) {
+        errors.phone = 'Please enter a valid phone number';
+        isValid = false;
       }
-  
-      return Object.keys(errors).length === 0;
+      
+      return isValid;
     }
   
     /**
@@ -86,97 +123,204 @@
         event.preventDefault(); // Prevent form submission
       }
     }
-  
+      // Submitting indicator
+    let isSubmitting = false;
+    
+    /**
+     * Resets the form to its initial state
+     */
+    function resetForm() {
+      formData = {
+        lead_title: '',
+        opportunity_amount: 0,
+        website: '',
+        industry: '',
+        status: 'NEW',
+        skype_ID: '',
+        source: '',
+        lead_attachment: '',
+        probability: 0,
+        first_name: '',
+        last_name: '',
+        company: '', 
+        title: '',
+        phone: '',
+        email: '',
+        address_line: '',
+        city: '',
+        street: '',
+        state: '',
+        postcode: '',
+        country: '',
+        description: '',
+        rating: ''
+      };
+      errors = {};
+    }
 </script>
 
 <!-- Main container -->
-<div class="container mx-auto px-4 py-6">
-  <Card class="px-4 sm:px-6 py-4 pb-8 max-w-5xl mx-auto">
-    <!-- Show error if returned from server -->
-    {#if form?.error}
-      <Alert color="red" class="mb-4">
-        <span class="font-medium">Error:</span> {form.error}
-      </Alert>
-    {/if}
+<div class="min-h-screen bg-gray-50 py-6">
+  <!-- Toast notification for success -->
+  {#if showToast}
+    <div class="fixed top-4 right-4 z-50" in:fade>
+      <Toast color="green" dismissable={true} on:dismiss={() => showToast = false}>
+        <svelte:fragment slot="icon">
+          <CheckCircleSolid class="w-5 h-5" />
+        </svelte:fragment>
+        {toastMessage}
+      </Toast>
+    </div>
+  {/if}
 
-    <!-- Form content -->
-    <form method="POST" enctype="multipart/form-data" use:enhance on:submit={handleSubmit} class="pb-4">
+  <div class="w-full max-w-full lg:max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+    <Card class="px-4 sm:px-6 py-4 pb-8 max-w-5xl mx-auto">
+      <!-- Header -->
+      <div class="mb-6">
+        <h1 class="text-2xl font-bold text-gray-900">Create New Lead</h1>
+        <p class="text-gray-600 mt-1">Fill in the details below to create a new lead</p>
+      </div>
+
+      <!-- Show error if returned from server -->
+      {#if form?.error}
+        <Alert color="red" class="mb-6">
+          <span class="font-medium">Error:</span> {form.error}
+        </Alert>
+      {/if}
+
+      <!-- Main Form -->
+      <form method="POST" use:enhance={() => {
+        if (!validateForm()) return;
+        
+        isSubmitting = true;
+        
+        return async ({ result }) => {
+          isSubmitting = false;
+          
+          if (result.type === 'success') {
+            toastMessage = form?.message || 'Lead created successfully!';
+            showToast = true;
+            resetForm();
+            setTimeout(() => goto('/app/leads/open'), 1500);
+          }
+        };
+      }}>
         <!-- Lead Information Section -->
         <div class="mb-8">
           <h2 class="text-xl font-semibold mb-4 text-gray-800 border-b pb-2">Lead Information</h2>
           <div class="grid md:grid-cols-2 gap-x-6 gap-y-4">
-            <!-- Lead Name -->
-            <div>
-              <Label for="title" class="font-medium">Lead Name</Label>
+            <!-- Lead Title -->
+            <div class="md:col-span-2">
+              <Label for="lead_title" class="font-medium">Lead Title *</Label>
               <Input
-                id="title"
-                name="title"
-                bind:value={formData.title}
+                id="lead_title"
+                name="lead_title"
+                bind:value={formData.lead_title}
                 on:input={handleChange}
-                placeholder="Lead Name" required/>
-              {#if errors.title}
-                <span class="text-red-500 text-sm">{errors.title}</span>
+                placeholder="Lead Title"
+                class={errors.lead_title ? 'border-red-500' : ''}
+                required />
+              {#if errors.lead_title}
+                <span class="text-red-500 text-sm mt-1">{errors.lead_title}</span>
               {/if}
             </div>
-            <!-- Amount -->
+            
+            <!-- Company -->
             <div>
-              <Label for="opportunity_amount" class="font-medium">Amount</Label>
+              <Label for="company" class="font-medium">Company</Label>
               <Input
-                type="number"
-                id="opportunity_amount"
-                name="opportunity_amount"
-                bind:value={formData.opportunity_amount}
+                id="company"
+                name="company"
+                bind:value={formData.company}
                 on:input={handleChange}
-                placeholder="Amount" />
+                placeholder="Company Name" />
             </div>
-            <!-- Website -->
+            
+            <!-- Lead Source -->
             <div>
-              <Label for="website" class="font-medium">Website</Label>
-              <Input
-                id="website"
-                name="website"
-                bind:value={formData.website}
-                on:input={handleChange}
-                placeholder="Website" />
+              <Label for="source" class="font-medium">Lead Source</Label>
+              <Select 
+                id="source" 
+                name="source" 
+                bind:value={formData.source} 
+                on:change={handleChange}
+                class="w-full">
+                {#each data.data.source as [value, label]}
+                  <option value={value}>{label}</option>
+                {/each}
+              </Select>
             </div>
+
             <!-- Industry -->
             <div>
               <Label for="industry" class="font-medium">Industry</Label>
-              <Select id="industry" name="industry" bind:value={formData.industry} on:change={handleChange}>
+              <Select 
+                id="industry" 
+                name="industry" 
+                bind:value={formData.industry} 
+                on:change={handleChange}
+                class="w-full">
                 {#each data.data.industries as [value, label]}
                   <option value={value}>{label}</option>
                 {/each}
               </Select>
             </div>
+
             <!-- Status -->
             <div>
               <Label for="status" class="font-medium">Status</Label>
-              <Select id="status" name="status" bind:value={formData.status} on:change={handleChange}>
+              <Select 
+                id="status" 
+                name="status" 
+                bind:value={formData.status} 
+                on:change={handleChange}
+                class="w-full">
                 {#each data.data.status as [value, label]}
                   <option value={value}>{label}</option>
                 {/each}
               </Select>
             </div>
-            <!-- Skype ID -->
+            
+            <!-- Rating -->
             <div>
-              <Label for="skype_ID" class="font-medium">Skype ID</Label>
+              <Label for="rating" class="font-medium">Rating</Label>
+              <Select 
+                id="rating" 
+                name="rating" 
+                bind:value={formData.rating} 
+                on:change={handleChange}
+                class="w-full">
+                <option value="">Select Rating</option>
+                <option value="HOT">Hot</option>
+                <option value="WARM">Warm</option>
+                <option value="COLD">Cold</option>
+              </Select>
+            </div>
+            
+            <!-- Website -->
+            <div>
+              <Label for="website" class="font-medium">Website</Label>
               <Input
-                id="skype_ID"
-                name="skype_ID"
-                bind:value={formData.skype_ID}
+                id="website"
+                name="website"
+                bind:value={formData.website}
                 on:input={handleChange}
-                placeholder="Skype ID" />
+                placeholder="Website URL" />
             </div>
-            <!-- Lead Source -->
+            
+            <!-- Opportunity Amount (stored in description) -->
             <div>
-              <Label for="source" class="font-medium">Lead Source</Label>
-              <Select id="source" name="source" bind:value={formData.source} on:change={handleChange}>
-                {#each data.data.source as [value, label]}
-                  <option value={value}>{label}</option>
-                {/each}
-              </Select>
+              <Label for="opportunity_amount" class="font-medium">Opportunity Amount</Label>
+              <Input
+                type="number"
+                id="opportunity_amount"
+                name="opportunity_amount"
+                bind:value={formData.opportunity_amount}
+                on:input={handleChange}
+                placeholder="Amount" />
             </div>
-            <!-- Probability with Icon -->
+            
+            <!-- Probability with Icon (stored in description) -->
             <div>
               <Label for="probability" class="font-medium">Probability</Label>
               <div class="relative">
@@ -191,6 +335,17 @@
                 </div>
               </div>
             </div>
+            
+            <!-- Skype ID (stored in description) -->
+            <div>
+              <Label for="skype_ID" class="font-medium">Skype ID</Label>
+              <Input
+                id="skype_ID"
+                name="skype_ID"
+                bind:value={formData.skype_ID}
+                on:input={handleChange}
+                placeholder="Skype ID" />
+            </div>
           </div>
         </div>
        
@@ -200,25 +355,33 @@
           <div class="grid md:grid-cols-2 gap-x-6 gap-y-4">
             <!-- First Name -->
             <div>
-              <Label for="first_name" class="font-medium">First Name</Label>
+              <Label for="first_name" class="font-medium">First Name *</Label>
               <Input
                 id="first_name"
                 name="first_name"
                 bind:value={formData.first_name}
                 on:input={handleChange}
                 placeholder="First Name"
+                class={errors.first_name ? 'border-red-500' : ''}
                 required />
+              {#if errors.first_name}
+                <span class="text-red-500 text-sm mt-1">{errors.first_name}</span>
+              {/if}
             </div>
             <!-- Last Name -->
             <div>
-              <Label for="last_name" class="font-medium">Last Name</Label>
+              <Label for="last_name" class="font-medium">Last Name *</Label>
               <Input
                 id="last_name"
                 name="last_name"
                 bind:value={formData.last_name}
                 on:input={handleChange}
                 placeholder="Last Name"
-               />
+                class={errors.last_name ? 'border-red-500' : ''}
+                required />
+              {#if errors.last_name}
+                <span class="text-red-500 text-sm mt-1">{errors.last_name}</span>
+              {/if}
             </div>
             <!-- Job Title -->
             <div>
@@ -232,26 +395,32 @@
             </div>
             <!-- Phone Number -->
             <div>
-              <Label for="phone" class="font-medium">Phone Number</Label>
+              <Label for="phone" class="font-medium">Phone</Label>
               <Input
                 id="phone"
                 name="phone"
                 bind:value={formData.phone}
                 on:input={handleChange}
-                placeholder="+91..." />
+                placeholder="Phone Number"
+                class={errors.phone ? 'border-red-500' : ''} />
+              {#if errors.phone}
+                <span class="text-red-500 text-sm mt-1">{errors.phone}</span>
+              {/if}
             </div>
             <!-- Email Address -->
             <div class="md:col-span-2">
-              <Label for="email" class="font-medium">Email Address</Label>
+              <Label for="email" class="font-medium">Email *</Label>
               <Input
                 id="email"
                 type="email"
                 name="email"
                 bind:value={formData.email}
                 on:input={handleChange}
-                placeholder="Email Address" required />
+                placeholder="Email Address"
+                class={errors.email ? 'border-red-500' : ''}
+                required />
               {#if errors.email}
-                <span class="text-red-500 text-sm">{errors.email}</span>
+                <span class="text-red-500 text-sm mt-1">{errors.email}</span>
               {/if}
             </div>
           </div>
@@ -314,11 +483,12 @@
             <!-- Country -->
             <div>
               <Label for="country" class="font-medium">Country</Label>
-              <Select id="country" name="country" bind:value={formData.country} on:change={handleChange}>
-                {#each data.data.countries as [value, label]}
-                  <option value={value}>{label}</option>
-                {/each}
-              </Select>
+              <Input
+                id="country"
+                name="country"
+                bind:value={formData.country}
+                on:input={handleChange}
+                placeholder="Country" />
             </div>
           </div>
         </div>
@@ -339,11 +509,32 @@
         </div>
 
         <!-- Submit Button - Improved visibility -->
-        <div class="sticky bottom-4 py-4">
-          <div class="flex justify-center">
-            <Button type="submit" color="blue" size="lg" class="px-12 py-3 font-medium">Create Lead</Button>
-          </div>
+        <div class="flex justify-end gap-4 mt-6">
+          <Button
+            type="button"
+            color="light"
+            on:click={() => goto('/app/leads/')}
+            disabled={isSubmitting}>
+            Cancel
+          </Button>
+          <Button
+            type="submit"
+            color="blue"
+            disabled={isSubmitting}>
+            {#if isSubmitting}
+              <span class="flex items-center">
+                <svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+                </svg>
+                Creating...
+              </span>
+            {:else}
+              Create Lead
+            {/if}
+          </Button>
         </div>
-    </form>
-  </Card>
+      </form>
+    </Card>
+  </div>
 </div>
diff --git a/src/routes/(app)/app/leads/open/+page.svelte b/src/routes/(app)/app/leads/open/+page.svelte
index e501b31..b1da418 100644
--- a/src/routes/(app)/app/leads/open/+page.svelte
+++ b/src/routes/(app)/app/leads/open/+page.svelte
@@ -1,11 +1,38 @@
 <script>
-  import { Button, Badge, Spinner } from 'flowbite-svelte';
+  import { Button, Badge, Spinner, Select, Input } from 'flowbite-svelte';
   import { fade, fly } from 'svelte/transition';
+  import { formatDistanceToNow } from 'date-fns';
   
   // Get leads from the data prop passed from the server
   export let data;
   const { leads } = data;
   
+  // State management
+  let searchQuery = '';
+  let statusFilter = 'ALL';
+  let sortBy = 'createdAt';
+  let sortOrder = 'desc';
+  let isLoading = false;
+  
+  // Available statuses for filtering
+  const statuses = [
+    { value: 'ALL', label: 'All Statuses' },
+    { value: 'NEW', label: 'New' },
+    { value: 'PENDING', label: 'Pending' },
+    { value: 'CONTACTED', label: 'Contacted' },
+    { value: 'QUALIFIED', label: 'Qualified' },
+    { value: 'UNQUALIFIED', label: 'Unqualified' },
+    { value: 'CONVERTED', label: 'Converted' }
+  ];
+  
+  // Sort options
+  const sortOptions = [
+    { value: 'createdAt', label: 'Created Date' },
+    { value: 'firstName', label: 'First Name' },
+    { value: 'lastName', label: 'Last Name' },
+    { value: 'company', label: 'Company' }
+  ];
+  
   // Function to get the full name of a lead
   function getFullName(lead) {
     return `${lead.firstName} ${lead.lastName}`.trim();
@@ -21,18 +48,51 @@
       case 'CONTACTED':
         return 'green';
       case 'QUALIFIED':
-        return 'success';
+        return 'indigo';
       case 'UNQUALIFIED':
-        return 'warning';
+        return 'red';
       case 'CONVERTED':
-        return 'indigo';
+        return 'dark';
       default:
-        return 'info';
+        return 'blue';
+    }
+  }
+  
+  // Replace fixed date formatting with relative time
+  function formatDate(dateString) {
+    if (!dateString) return '-';
+    return formatDistanceToNow(new Date(dateString), { addSuffix: true });
+  }
+  
+  // Computed filtered and sorted leads
+  $: filteredLeads = leads.filter(lead => {
+    const matchesSearch = searchQuery === '' || 
+      getFullName(lead).toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (lead.company && lead.company.toLowerCase().includes(searchQuery.toLowerCase()));
+    
+    const matchesStatus = statusFilter === 'ALL' || lead.status === statusFilter;
+    
+    return matchesSearch && matchesStatus;
+  }).sort((a, b) => {
+    const aValue = a[sortBy];
+    const bValue = b[sortBy];
+    
+    if (sortOrder === 'asc') {
+      return aValue > bValue ? 1 : -1;
+    } else {
+      return aValue < bValue ? 1 : -1;
+    }
+  });
+  
+  // Function to toggle sort order
+  function toggleSort(field) {
+    if (sortBy === field) {
+      sortOrder = sortOrder === 'asc' ? 'desc' : 'asc';
+    } else {
+      sortBy = field;
+      sortOrder = 'desc';
     }
   }
-
-  // For demonstration purpose - loading state
-  let isLoading = false;
 </script>
 
 <div class="min-h-screen bg-gray-50">
@@ -44,7 +104,7 @@
           <span class="mr-2">📋</span> Open Leads
         </h1>
         <Button href="/app/leads/new" size="sm" color="light" class="px-4 py-2 flex-shrink-0">
-          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+          <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
             <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path>
           </svg>
           New Lead
@@ -53,16 +113,43 @@
     </div>
   </header>
 
+  <!-- Filters and Search -->
+  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+    <div class="bg-white rounded-lg shadow-sm p-4 mb-4">
+      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+        <div class="col-span-1 md:col-span-2">
+          <Input
+            type="text"
+            placeholder="Search by name or company..."
+            bind:value={searchQuery}
+            class="w-full"
+          >
+            <svg slot="prefix" class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+            </svg>
+          </Input>
+        </div>
+        <div class="col-span-1">
+          <Select bind:value={statusFilter} class="w-full">
+            {#each statuses as status}
+              <option value={status.value}>{status.label}</option>
+            {/each}
+          </Select>
+        </div>
+      </div>
+    </div>
+  </div>
+
   <!-- Main Content -->
-  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+  <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
     {#if isLoading}
       <div class="flex justify-center items-center py-20" transition:fade>
         <Spinner size="xl" />
       </div>
-    {:else if leads.length === 0}
+    {:else if filteredLeads.length === 0}
       <div class="text-center py-16 bg-white rounded-lg shadow-sm border border-gray-100" transition:fade>
         <div class="text-gray-400 text-5xl mb-4">📭</div>
-        <p class="text-gray-600 text-lg mb-6">No open leads found</p>
+        <p class="text-gray-600 text-lg mb-6">No leads found</p>
         <Button href="/app/leads/new" color="blue" class="mt-2 px-6">Create a new lead</Button>
       </div>
     {:else}
@@ -72,32 +159,66 @@
           <table class="min-w-full divide-y divide-gray-200">
             <thead class="bg-gray-50">
               <tr>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Name</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Email</th>
-                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Title</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" on:click={() => toggleSort('firstName')}>
+                  <div class="flex items-center">
+                    Name
+                    {#if sortBy === 'firstName'}
+                      <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={sortOrder === 'asc' ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"}></path>
+                      </svg>
+                    {/if}
+                  </div>
+                </th>
                 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Company</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Phone</th>
                 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
+                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider cursor-pointer hover:bg-gray-100" on:click={() => toggleSort('createdAt')}>
+                  <div class="flex items-center">
+                    Created
+                    {#if sortBy === 'createdAt'}
+                      <svg class="w-4 h-4 ml-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={sortOrder === 'asc' ? "M5 15l7-7 7 7" : "M19 9l-7 7-7-7"}></path>
+                      </svg>
+                    {/if}
+                  </div>
+                </th>
                 <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Owner</th>
               </tr>
             </thead>
             <tbody class="bg-white divide-y divide-gray-200">
-              {#each leads as lead, i}
+              {#each filteredLeads as lead, i}
                 <tr 
                   class="hover:bg-blue-50 transition-colors duration-150"
                   in:fly={{y: 20, duration: 300, delay: i * 50}}
                 >
+                <td class="px-6 py-4 whitespace-nowrap text-gray-600">
+                  <a href="/app/leads/{lead.id}" class="text-blue-600 hover:text-blue-800 font-medium">
+                  {lead.title || '-'}
+                </a>
+                </td>
                   <td class="px-6 py-4 whitespace-nowrap">
-                    <a href="/app/leads/{lead.id}" class="text-blue-600 hover:text-blue-800 font-medium">
                       {getFullName(lead)}
-                    </a>
                   </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-gray-600">{lead.email || '-'}</td>
-                  <td class="px-6 py-4 whitespace-nowrap text-gray-600">{lead.phone || '-'}</td>
-                  <td class="px-6 py-4 whitespace-nowrap text-gray-600">{lead.company || '-'}</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-gray-600">
+                    {lead.company || '-'}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-gray-600">
+                    {#if lead.phone}
+                      <a href="tel:{lead.phone}" class="hover:text-blue-600">{lead.phone}</a>
+                    {:else}
+                      -
+                    {/if}
+                  </td>
                   <td class="px-6 py-4 whitespace-nowrap">
                     <Badge color={getStatusColor(lead.status)}>{lead.status}</Badge>
                   </td>
-                  <td class="px-6 py-4 whitespace-nowrap text-gray-600">{lead.owner?.name || '-'}</td>
+                  <td class="px-6 py-4 whitespace-nowrap text-gray-600">
+                    {formatDate(lead.createdAt)}
+                  </td>
+                  <td class="px-6 py-4 whitespace-nowrap text-gray-600">
+                    {lead.owner?.name || '-'}
+                  </td>
                 </tr>
               {/each}
             </tbody>
@@ -106,7 +227,7 @@
         
         <!-- Mobile Card View -->
         <div class="md:hidden divide-y divide-gray-200">
-          {#each leads as lead, i}
+          {#each filteredLeads as lead, i}
             <div 
               class="p-4 bg-white hover:bg-blue-50 transition-colors duration-150" 
               in:fly={{y: 20, duration: 300, delay: i * 50}}
@@ -118,28 +239,33 @@
                 <Badge color={getStatusColor(lead.status)}>{lead.status}</Badge>
               </div>
               
-              <div class="grid grid-cols-1 gap-1 text-sm">
-                {#if lead.email}
+              <div class="grid grid-cols-1 gap-2 text-sm">
+                {#if lead.title}
                   <div class="flex items-center">
-                    <span class="w-20 text-gray-500">Email:</span>
-                    <span class="text-gray-700">{lead.email}</span>
+                    <span class="w-20 text-gray-500">Title:</span>
+                    <span class="text-gray-700">{lead.title}</span>
                   </div>
                 {/if}
                 
-                {#if lead.phone}
+                {#if lead.company}
                   <div class="flex items-center">
-                    <span class="w-20 text-gray-500">Phone:</span>
-                    <span class="text-gray-700">{lead.phone}</span>
+                    <span class="w-20 text-gray-500">Company:</span>
+                    <span class="text-gray-700">{lead.company}</span>
                   </div>
                 {/if}
                 
-                {#if lead.company}
+                {#if lead.phone}
                   <div class="flex items-center">
-                    <span class="w-20 text-gray-500">Company:</span>
-                    <span class="text-gray-700">{lead.company}</span>
+                    <span class="w-20 text-gray-500">Phone:</span>
+                    <a href="tel:{lead.phone}" class="text-blue-600 hover:text-blue-800">{lead.phone}</a>
                   </div>
                 {/if}
                 
+                <div class="flex items-center">
+                  <span class="w-20 text-gray-500">Created:</span>
+                  <span class="text-gray-700">{formatDate(lead.createdAt)}</span>
+                </div>
+                
                 {#if lead.owner?.name}
                   <div class="flex items-center">
                     <span class="w-20 text-gray-500">Owner:</span>
diff --git a/src/routes/(app)/app/tasks/+page.server.js b/src/routes/(app)/app/tasks/+page.server.js
new file mode 100644
index 0000000..60699c4
--- /dev/null
+++ b/src/routes/(app)/app/tasks/+page.server.js
@@ -0,0 +1,44 @@
+import prisma from '$lib/prisma';
+
+export async function load({ locals }) {
+  const user = locals.user;
+  const org = locals.org;
+  if (!user || !org) return { status: 302, redirect: '/login' };
+  const boards = await prisma.board.findMany({
+    where: { ownerId: user.id, organizationId: org.id },
+    select: { id: true, name: true },
+    orderBy: { createdAt: 'desc' }
+  });
+  return { boards };
+}
+
+export const actions = {
+  create: async ({ request, locals }) => {
+    const user = locals.user;
+    const org = locals.org;
+    if (!user || !org) return { status: 401 };
+    const form = await request.formData();
+    const name = form.get('name')?.toString();
+    if (!name) return { status: 400 };
+    const board = await prisma.board.create({
+      data: {
+        name,
+        ownerId: user.id,
+        organizationId: org.id
+      }
+    });
+    const defaultColumns = ["To Do", "In Progress", "Done"];
+    await prisma.$transaction(
+      defaultColumns.map((col, idx) =>
+        prisma.boardColumn.create({
+          data: {
+            name: col,
+            boardId: board.id,
+            order: idx + 1
+          }
+        })
+      )
+    );
+    return { success: true };
+  }
+};
diff --git a/src/routes/(app)/app/tasks/+page.svelte b/src/routes/(app)/app/tasks/+page.svelte
new file mode 100644
index 0000000..02f53c9
--- /dev/null
+++ b/src/routes/(app)/app/tasks/+page.svelte
@@ -0,0 +1,137 @@
+<script>
+  // Loads boards from server
+  export let data;
+</script>
+
+<div class="board-bg">
+  <h1>Boards</h1>
+  <div class="board-list">
+    {#if data?.boards?.length}
+      {#each data.boards as board}
+        <a class="board-card" href="/app/tasks/board/{board.id}">
+          <div class="board-title">{board.name}</div>
+        </a>
+      {/each}
+    {:else}
+      <p class="no-boards">No boards found.</p>
+    {/if}
+    <form class="board-card board-create" method="POST" action="?/create">
+      <div class="plus-icon">+</div>
+      <input name="name" placeholder="New board name" required />
+      <button type="submit">Create Board</button>
+    </form>
+  </div>
+</div>
+
+<style>
+:global(body) {
+  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
+  background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%);
+  min-height: 100vh;
+}
+.board-bg {
+  padding: 2.5rem 0 2rem 0;
+  min-height: 100vh;
+}
+h1 {
+  color: #253858;
+  font-size: 2.2rem;
+  font-weight: 800;
+  margin-bottom: 1.5rem;
+  letter-spacing: -1px;
+}
+.board-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  margin-top: 2rem;
+}
+.board-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+  background: #f4f5f7;
+  border-radius: 12px;
+  box-shadow: 0 2px 12px 0 rgba(9,30,66,.13);
+  padding: 1.7rem 2.2rem 1.2rem 2.2rem;
+  min-width: 240px;
+  min-height: 120px;
+  text-decoration: none;
+  color: #172b4d;
+  font-size: 1.2rem;
+  font-weight: 600;
+  transition: box-shadow 0.18s, background 0.18s, transform 0.12s;
+  cursor: pointer;
+  position: relative;
+}
+.board-card:hover {
+  background: #e4e6ea;
+  box-shadow: 0 6px 24px 0 rgba(9,30,66,.18);
+  transform: translateY(-3px) scale(1.03);
+}
+.board-title {
+  margin-bottom: 0.5rem;
+  font-size: 1.35rem;
+  font-weight: bold;
+  letter-spacing: -0.5px;
+}
+.board-create {
+  background: #fff;
+  border: 2px dashed #b6bac2;
+  color: #5e6c84;
+  align-items: center;
+  min-height: 120px;
+  justify-content: center;
+  box-shadow: none;
+  transition: border-color 0.15s, box-shadow 0.15s;
+  position: relative;
+}
+.board-create:hover {
+  border-color: #0079bf;
+  box-shadow: 0 2px 12px 0 rgba(9,30,66,.10);
+}
+.board-create input {
+  border: none;
+  background: transparent;
+  font-size: 1.08rem;
+  margin-bottom: 0.5rem;
+  outline: none;
+  width: 100%;
+  color: #253858;
+  padding: 0.2rem 0.1rem;
+  border-bottom: 1.5px solid #e4e6ea;
+  transition: border-color 0.15s;
+}
+.board-create input:focus {
+  border-bottom: 1.5px solid #0079bf;
+}
+.board-create button {
+  background: #0079bf;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.5rem 1.1rem;
+  font-size: 1rem;
+  cursor: pointer;
+  margin-top: 0.5rem;
+  font-weight: 600;
+  transition: background 0.15s;
+  box-shadow: 0 1px 4px 0 rgba(9,30,66,.10);
+}
+.board-create button:hover {
+  background: #026aa7;
+}
+.plus-icon {
+  font-size: 2.2rem;
+  color: #b6bac2;
+  margin-bottom: 0.3rem;
+  font-weight: 700;
+  align-self: center;
+}
+.no-boards {
+  color: #7a869a;
+  font-size: 1.1rem;
+  margin-top: 1.5rem;
+}
+</style>
diff --git a/src/routes/(app)/app/tasks/board/[boardId]/+page.server.js b/src/routes/(app)/app/tasks/board/[boardId]/+page.server.js
new file mode 100644
index 0000000..8d2b6f6
--- /dev/null
+++ b/src/routes/(app)/app/tasks/board/[boardId]/+page.server.js
@@ -0,0 +1,84 @@
+import prisma from '$lib/prisma';
+
+export async function load({ params, locals }) {
+  const user = locals.user;
+  const org = locals.org;
+  if (!user || !org) return { status: 302, redirect: '/login' };
+  const board = await prisma.board.findUnique({
+    where: { id: params.boardId, organizationId: org.id },
+    select: { id: true, name: true, ownerId: true }
+  });
+  if (!board || board.ownerId !== user.id) return { status: 403 };
+  const columns = await prisma.boardColumn.findMany({
+    where: { boardId: board.id },
+    orderBy: { order: 'asc' },
+    select: {
+      id: true,
+      name: true,
+      order: true,
+      tasks: {
+        orderBy: { order: 'asc' },
+        select: { id: true, title: true, order: true }
+      }
+    }
+  });
+  return { board, columns };
+}
+
+export const actions = {
+  createTask: async ({ request, params, locals }) => {
+    const user = locals.user;
+    if (!user) return { status: 401 };
+    const form = await request.formData();
+    const title = form.get('title');
+    const columnId = form.get('columnId');
+    if (!title || !columnId) return { status: 400 };
+    const maxOrder = await prisma.boardTask.aggregate({
+      where: { columnId },
+      _max: { order: true }
+    });
+    await prisma.boardTask.create({
+      data: {
+        title,
+        columnId,
+        order: (maxOrder._max.order ?? 0) + 1
+      }
+    });
+    return { success: true };
+  },
+  createColumn: async ({ request, params, locals }) => {
+    const user = locals.user;
+    if (!user) return { status: 401 };
+    const form = await request.formData();
+    const columnName = form.get('columnName');
+    if (!columnName) return { status: 400 };
+    const maxOrder = await prisma.boardColumn.aggregate({
+      where: { boardId: params.boardId },
+      _max: { order: true }
+    });
+    await prisma.boardColumn.create({
+      data: {
+        name: columnName,
+        boardId: params.boardId,
+        order: (maxOrder._max.order ?? 0) + 1
+      }
+    });
+    return { success: true };
+  },
+  moveTask: async ({ request, params, locals }) => {
+    const user = locals.user;
+    if (!user) return { status: 401 };
+    const { columnId, orderedTaskIds } = await request.json();
+    if (!columnId || !Array.isArray(orderedTaskIds)) return { status: 400 };
+    // Update all tasks in the column to match the new order
+    await Promise.all(
+      orderedTaskIds.map((taskId, idx) =>
+        prisma.boardTask.update({
+          where: { id: taskId },
+          data: { columnId, order: idx + 1 }
+        })
+      )
+    );
+    return { success: true };
+  }
+};
diff --git a/src/routes/(app)/app/tasks/board/[boardId]/+page.svelte b/src/routes/(app)/app/tasks/board/[boardId]/+page.svelte
new file mode 100644
index 0000000..8992603
--- /dev/null
+++ b/src/routes/(app)/app/tasks/board/[boardId]/+page.svelte
@@ -0,0 +1,455 @@
+<script>
+  import { onMount } from 'svelte';
+  import { dndzone } from 'svelte-dnd-action';
+  import TaskModal from '$lib/components/TaskModal.svelte';
+  export let data;
+  
+  // Process columns and tasks to ensure each task has the required id property
+  let columns = data.columns.map(col => ({
+    ...col,
+    tasks: col.tasks.map(task => ({ ...task }))
+  }));
+  
+  let showTaskModal = false;
+  let selectedTask = null;
+  let editTaskTitle = '';
+  let editingTaskId = null;
+  let addingTaskColumnId = null;
+  let newTaskTitle = '';
+  let showColumnMenuId = null;
+
+  function openAddCard(columnId) {
+    addingTaskColumnId = columnId;
+    newTaskTitle = '';
+    setTimeout(() => {
+      const input = document.querySelector('.add-card-input:focus') || document.querySelector('.add-card-input');
+      if (input) input.focus();
+    }, 0);
+  }
+
+  function closeAddCard() {
+    addingTaskColumnId = null;
+    newTaskTitle = '';
+  }
+
+  async function handleAddCard(e, columnId) {
+    e.preventDefault();
+    if (!newTaskTitle.trim()) return;
+    await fetch(`?/createTask`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: `title=${encodeURIComponent(newTaskTitle)}&columnId=${encodeURIComponent(columnId)}`
+    });
+    addingTaskColumnId = null;
+    newTaskTitle = '';
+    location.reload();
+  }
+
+  function toggleColumnMenu(columnId) {
+    showColumnMenuId = showColumnMenuId === columnId ? null : columnId;
+  }
+
+  async function handleDeleteColumn(columnId) {
+    await fetch(`?/deleteColumn`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: `columnId=${encodeURIComponent(columnId)}`
+    });
+    showColumnMenuId = null;
+    location.reload();
+  }
+
+  async function handleRenameColumn(columnId) {
+    const newName = prompt('Rename column:');
+    if (newName && newName.trim()) {
+      await fetch(`?/renameColumn`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+        body: `columnId=${encodeURIComponent(columnId)}&name=${encodeURIComponent(newName)}`
+      });
+      showColumnMenuId = null;
+      location.reload();
+    }
+  }
+
+  function handleTaskDragStart(e) {
+    // Adding event logging
+    console.log('Drag started', e);
+  }
+
+  async function handleDnd(e) {
+    const { items, from, to } = e.detail;
+    console.log('DND event:', e.detail);
+    
+    // Guard against undefined from/to
+    if (!from || !to) {
+      console.warn('Missing from/to in DND event', e.detail);
+      return;
+    }
+    
+    if (from.id === to.id && from.index === to.index) {
+      console.log('No position change, ignoring');
+      return;
+    }
+    
+    console.log('Updating task order', {
+      columnId: to.id,
+      orderedTaskIds: items.map(t => t.id)
+    });
+    
+    try {
+      // Find the column index to update the UI immediately
+      const colIndex = columns.findIndex(col => col.id === to.id);
+      if (colIndex >= 0) {
+        // Update the column's tasks directly for immediate UI feedback
+        columns[colIndex].tasks = [...items];
+        columns = [...columns]; // Trigger reactivity
+      }
+      
+      // Send update to the server
+      await fetch(`/app/tasks/board/${data.board.id}?/moveTask`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          columnId: to.id,
+          orderedTaskIds: items.map(t => t.id)
+        })
+      });
+    } catch (error) {
+      console.error('Failed to update task order:', error);
+    }
+  }
+
+  function openTaskModal(task) {
+    selectedTask = task;
+    showTaskModal = true;
+  }
+  
+  function closeTaskModal() {
+    showTaskModal = false;
+    selectedTask = null;
+  }
+  
+  function startEditTask(task) {
+    editingTaskId = task.id;
+    editTaskTitle = task.title;
+  }
+  
+  async function saveEditTask(task) {
+    if (!editTaskTitle.trim()) return;
+    await fetch(`/app/tasks/board/${data.board.id}?/editTask`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ taskId: task.id, title: editTaskTitle })
+    });
+    editingTaskId = null;
+    location.reload();
+  }
+  
+  function cancelEditTask() {
+    editingTaskId = null;
+    editTaskTitle = '';
+  }
+</script>
+
+<h1 class="kanban-title">{data.board?.name}</h1>
+
+<div class="kanban-board">
+  {#each columns as column (column.id)}
+    <div class="kanban-column">
+      <div class="kanban-column-header">
+        <span>{column.name}</span>
+        <button class="column-menu-btn" on:click={() => toggleColumnMenu(column.id)} aria-label="Column actions">⋮</button>
+        {#if showColumnMenuId === column.id}
+          <div class="column-menu">
+            <button on:click={() => handleRenameColumn(column.id)}>Rename</button>
+            <button on:click={() => handleDeleteColumn(column.id)}>Delete</button>
+          </div>
+        {/if}
+      </div>
+      <ul
+        use:dndzone={{
+          items: column.tasks,
+          flipDurationMs: 150
+        }}
+        on:finalize={handleDnd}
+      >
+        {#each column.tasks as task (task.id)}
+          <li class="kanban-task-card" data-id={task.id}>
+            {#if editingTaskId === task.id}
+              <input class="edit-task-input" bind:value={editTaskTitle} on:keydown={(e) => e.key === 'Enter' && saveEditTask(task)} />
+              <button class="save-btn" on:click={() => saveEditTask(task)}>Save</button>
+              <button class="cancel-btn" on:click={cancelEditTask}>Cancel</button>
+            {:else}
+              <button type="button" class="task-title" on:click={() => openTaskModal(task)} on:keydown={(e) => (e.key === 'Enter' || e.key === ' ') && openTaskModal(task)} aria-label="Open task details">
+                <span class="task-title-main">{task.title}</span>
+                <div class="task-card-preview">
+                  {#if task.assignee?.avatar}
+                    <img class="task-avatar" src={task.assignee.avatar} alt={task.assignee.name} title={task.assignee.name} />
+                  {/if}
+                  {#if task.dueDate}
+                    <span class="task-due-badge {new Date(task.dueDate) < new Date() ? 'overdue' : ''}">{new Date(task.dueDate).toLocaleDateString()}</span>
+                  {/if}
+                  <span class="task-status-badge {task.completed ? 'completed' : 'open'}">{task.completed ? '✔' : ''}</span>
+                </div>
+              </button>
+              <button class="edit-btn" on:click={() => startEditTask(task)}>✏️</button>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+      {#if addingTaskColumnId === column.id}
+        <form class="add-card-form" on:submit|preventDefault={(e) => handleAddCard(e, column.id)}>
+          <input class="add-card-input" bind:value={newTaskTitle} placeholder="Enter a title for this card..." required />
+          <div class="add-card-actions">
+            <button type="submit">Add card</button>
+            <button type="button" on:click={closeAddCard}>Cancel</button>
+          </div>
+        </form>
+      {:else}
+        <button class="add-card-btn" on:click={() => openAddCard(column.id)}>+ Add a card</button>
+      {/if}
+    </div>
+  {/each}
+  <div class="kanban-column add-column">
+    <form method="POST" action="?/createColumn">
+      <input name="columnName" placeholder="New column name" required />
+      <button type="submit">Add Column</button>
+    </form>
+  </div>
+</div>
+
+{#if showTaskModal && selectedTask}
+  <TaskModal task={selectedTask} boardId={data.board.id} on:close={closeTaskModal} />
+{/if}
+
+<style>
+.kanban-title {
+  font-size: 2rem;
+  font-weight: bold;
+  margin-bottom: 2rem;
+  color: #172b4d;
+  letter-spacing: 0.5px;
+  text-shadow: 0 1px 0 #fff;
+}
+.kanban-board {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 1.2rem;
+  background: #0079bf;
+  padding: 2rem 1rem 2rem 1rem;
+  min-height: 100vh;
+  border-radius: 0;
+  box-shadow: none;
+  align-items: flex-start;
+  overflow-x: auto;
+}
+.kanban-column {
+  background: #ebecf0;
+  border-radius: 12px;
+  min-width: 300px;
+  max-width: 340px;
+  padding: 1.2rem 1rem 1.2rem 1rem;
+  box-shadow: 0 1.5px 6px 0 rgba(9,30,66,.13);
+  border: none;
+  margin-bottom: 1rem;
+  position: relative;
+}
+.kanban-column-header {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: #172b4d;
+  margin-bottom: 1rem;
+  padding-bottom: 0.3rem;
+  border-bottom: none;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  position: relative;
+}
+.column-menu-btn {
+  background: none;
+  border: none;
+  font-size: 1.3rem;
+  color: #6b778c;
+  cursor: pointer;
+  margin-left: 0.5rem;
+  border-radius: 4px;
+  padding: 0 0.3rem;
+}
+.column-menu-btn:hover {
+  background: #dfe1e6;
+}
+.column-menu {
+  position: absolute;
+  right: 0;
+  top: 2.2rem;
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 16px rgba(0,0,0,0.13);
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  min-width: 120px;
+  padding: 0.5rem 0;
+}
+.column-menu button {
+  background: none;
+  border: none;
+  text-align: left;
+  padding: 0.6rem 1.2rem;
+  font-size: 1rem;
+  color: #172b4d;
+  cursor: pointer;
+  transition: background 0.13s;
+}
+.column-menu button:hover {
+  background: #f4f5f7;
+}
+.kanban-task-card {
+  background: #fff;
+  border-radius: 8px;
+  box-shadow: 0 1.5px 4px rgba(9,30,66,.10);
+  margin-bottom: 0.7rem;
+  padding: 0.7rem 0.8rem 0.5rem 0.8rem;
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5rem;
+  cursor: grab;
+  border: none;
+  position: relative;
+  transition: box-shadow 0.18s, background 0.18s;
+}
+.kanban-task-card:active, .kanban-task-card.dragging {
+  background: #e4f0f6;
+  box-shadow: 0 8px 24px 0 rgba(9,30,66,.18);
+}
+.task-title {
+  flex: 1;
+  cursor: pointer;
+  font-size: 1.05rem;
+  color: #172b4d;
+  text-align: left;
+  background: none;
+  border: none;
+  outline: none;
+  padding: 0;
+  font-weight: 500;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.3rem;
+}
+.task-title-main {
+  margin-bottom: 0.1rem;
+}
+.task-card-preview {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.2rem;
+}
+.task-avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 1.5px solid #e2e4ea;
+}
+.task-due-badge {
+  background: #f7d070;
+  color: #7c4700;
+  border-radius: 6px;
+  font-size: 0.85rem;
+  padding: 0.1em 0.6em;
+  font-weight: 600;
+}
+.task-due-badge.overdue {
+  background: #f87171;
+  color: #fff;
+}
+.task-status-badge {
+  font-size: 1.1rem;
+  color: #22c55e;
+  margin-left: 0.2em;
+}
+.task-status-badge.open {
+  color: #b91c1c;
+}
+.add-card-btn {
+  background: none;
+  border: none;
+  color: #5e6c84;
+  font-size: 1rem;
+  padding: 0.5rem 0.2rem;
+  border-radius: 6px;
+  cursor: pointer;
+  text-align: left;
+  margin-top: 0.2rem;
+  transition: background 0.13s;
+}
+.add-card-btn:hover {
+  background: #dfe1e6;
+}
+.add-card-form {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+.add-card-input {
+  border-radius: 6px;
+  border: 1px solid #b6bac2;
+  padding: 0.5rem 0.7rem;
+  font-size: 1rem;
+  background: #fff;
+  width: 100%;
+}
+.add-card-actions {
+  display: flex;
+  gap: 0.5rem;
+}
+.add-card-form button[type="submit"] {
+  background: #5aac44;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  padding: 0.4rem 1.1rem;
+  font-size: 1rem;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.15s;
+}
+.add-card-form button[type="submit"]:hover {
+  background: #519839;
+}
+.add-card-form button[type="button"] {
+  background: none;
+  border: none;
+  color: #b04632;
+  font-size: 1rem;
+  cursor: pointer;
+  padding: 0.4rem 0.7rem;
+  border-radius: 4px;
+}
+.add-card-form button[type="button"]:hover {
+  background: #f4f5f7;
+}
+.add-column {
+  background: #e0e0e0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 260px;
+  border-radius: 12px;
+  margin-left: 1rem;
+  box-shadow: none;
+}
+@media (max-width: 700px) {
+  .kanban-column {
+    min-width: 90vw;
+    max-width: 95vw;
+  }
+}
+</style>
diff --git a/src/routes/(app)/app/tasks/board/[boardId]/task/[taskId]/+server.js b/src/routes/(app)/app/tasks/board/[boardId]/task/[taskId]/+server.js
new file mode 100644
index 0000000..ce79f05
--- /dev/null
+++ b/src/routes/(app)/app/tasks/board/[boardId]/task/[taskId]/+server.js
@@ -0,0 +1,21 @@
+import prisma from '$lib/prisma';
+
+export async function GET({ params, locals }) {
+  const user = locals.user;
+  const org = locals.org;
+  if (!user || !org) return new Response('Unauthorized', { status: 401 });
+  const task = await prisma.boardTask.findUnique({
+    where: { id: params.taskId },
+    include: {
+      assignee: { select: { id: true, name: true } },
+      column: { include: { board: true } }
+    }
+  });
+  if (!task || task.column.board.ownerId !== user.id || task.column.board.organizationId !== org.id) return new Response('Forbidden', { status: 403 });
+  const comments = await prisma.boardTaskActivity.findMany({
+    where: { taskId: params.taskId, type: 'comment' },
+    orderBy: { createdAt: 'asc' },
+    include: { author: { select: { id: true, name: true } } }
+  });
+  return new Response(JSON.stringify({ task, comments }), { headers: { 'Content-Type': 'application/json' } });
+}
diff --git a/src/routes/(app)/app/tasks/board/[boardId]/task/[taskId]/assignee/+server.js b/src/routes/(app)/app/tasks/board/[boardId]/task/[taskId]/assignee/+server.js
new file mode 100644
index 0000000..eb5423d
--- /dev/null
+++ b/src/routes/(app)/app/tasks/board/[boardId]/task/[taskId]/assignee/+server.js
@@ -0,0 +1,30 @@
+import prisma from '$lib/prisma.js';
+import { json } from '@sveltejs/kit';
+
+export async function PATCH({ params, request }) {
+  const { boardId, taskId } = params;
+  const { assigneeId } = await request.json();
+  if (!assigneeId) {
+    // Unassign
+    const updated = await prisma.boardTask.update({
+      where: { id: taskId },
+      data: { assigneeId: null }
+    });
+    return json({ success: true, task: updated });
+  }
+  // Check user is in org via board
+  const board = await prisma.board.findUnique({
+    where: { id: boardId },
+    include: { organization: true }
+  });
+  if (!board) return json({ error: 'Board not found' }, { status: 404 });
+  const user = await prisma.user.findFirst({
+    where: { id: assigneeId, organizations: { some: { organizationId: board.organizationId } } }
+  });
+  if (!user) return json({ error: 'User not in organization' }, { status: 400 });
+  const updated = await prisma.boardTask.update({
+    where: { id: taskId },
+    data: { assigneeId }
+  });
+  return json({ success: true, task: updated });
+}
diff --git a/src/routes/(app)/app/tasks/board/[boardId]/task/[taskId]/comment/+server.js b/src/routes/(app)/app/tasks/board/[boardId]/task/[taskId]/comment/+server.js
new file mode 100644
index 0000000..6983429
--- /dev/null
+++ b/src/routes/(app)/app/tasks/board/[boardId]/task/[taskId]/comment/+server.js
@@ -0,0 +1,39 @@
+// SvelteKit POST endpoint for adding a comment to a BoardTask (Kanban task)
+import { getSessionUser } from '$lib/stores/auth.js';
+import prisma from '$lib/prisma.js';
+
+/** @type {import('./$types').RequestHandler} */
+export async function POST({ params, request, locals }) {
+  const user = getSessionUser({ locals });
+  if (!user) {
+    return new Response(JSON.stringify({ error: 'Unauthorized' }), { status: 401 });
+  }
+  const { boardId, taskId } = params;
+  const { content } = await request.json();
+  if (!content || !content.trim()) {
+    return new Response(JSON.stringify({ error: 'Comment cannot be empty' }), { status: 400 });
+  }
+  try {
+    // Find the BoardTask and its column/board for org context (optional, for security)
+    const task = await prisma.boardTask.findUnique({
+      where: { id: taskId },
+      include: { column: { include: { board: true } } }
+    });
+    if (!task) {
+      return new Response(JSON.stringify({ error: 'Task not found' }), { status: 404 });
+    }
+    // Optionally, check if user is a board member or has access
+    // Create the comment as a BoardTaskActivity
+    const activity = await prisma.boardTaskActivity.create({
+      data: {
+        taskId,
+        authorId: user.id,
+        type: 'comment',
+        content,
+      }
+    });
+    return new Response(JSON.stringify({ success: true, activity }), { status: 201 });
+  } catch (e) {
+    return new Response(JSON.stringify({ error: e.message }), { status: 500 });
+  }
+}
diff --git a/src/routes/(app)/app/tasks/board/[boardId]/task/[taskId]/due-date/+server.js b/src/routes/(app)/app/tasks/board/[boardId]/task/[taskId]/due-date/+server.js
new file mode 100644
index 0000000..3b45237
--- /dev/null
+++ b/src/routes/(app)/app/tasks/board/[boardId]/task/[taskId]/due-date/+server.js
@@ -0,0 +1,38 @@
+import prisma from '$lib/prisma.js';
+import { json } from '@sveltejs/kit';
+
+export async function PATCH({ params, request }) {
+  const { boardId, taskId } = params;
+  const { dueDate } = await request.json();
+  if (!dueDate) {
+    return json({ error: 'Missing dueDate' }, { status: 400 });
+  }
+  try {
+    // Log params for debugging
+    console.log('PATCH BoardTask due-date params:', params);
+    // Check if the board task exists and belongs to the board
+    const boardTask = await prisma.boardTask.findFirst({
+      where: {
+        id: taskId,
+        // Ensure the boardId matches
+        column: {
+          board: {
+            id: boardId
+          }
+        }
+      }
+    });
+    console.log('Found boardTask:', boardTask);
+    if (!boardTask) {
+      return json({ error: 'BoardTask not found' }, { status: 404 });
+    }
+    const updated = await prisma.boardTask.update({
+      where: { id: taskId },
+      data: { dueDate: new Date(dueDate) }
+    });
+    return json({ success: true, task: updated });
+  } catch (e) {
+    console.error('Due date update error:', e);
+    return json({ error: 'Failed to update due date', details: e.message }, { status: 500 });
+  }
+}
diff --git a/src/routes/(app)/app/tasks/board/[boardId]/users/+server.js b/src/routes/(app)/app/tasks/board/[boardId]/users/+server.js
new file mode 100644
index 0000000..9a13c59
--- /dev/null
+++ b/src/routes/(app)/app/tasks/board/[boardId]/users/+server.js
@@ -0,0 +1,19 @@
+import prisma from '$lib/prisma.js';
+import { json } from '@sveltejs/kit';
+
+// Returns users related to the board's organization
+export async function GET({ params }) {
+  const { boardId } = params;
+  // Find the board and its organization
+  const board = await prisma.board.findUnique({
+    where: { id: boardId },
+    include: { organization: true }
+  });
+  if (!board) return json([], { status: 404 });
+  // Get users in the same organization
+  const users = await prisma.user.findMany({
+    where: { organizations: { some: { organizationId: board.organizationId } } },
+    select: { id: true, name: true, email: true }
+  });
+  return json(users);
+}
diff --git a/src/routes/(app)/app/tasks/calendar/+page.server.js b/src/routes/(app)/app/tasks/calendar/+page.server.js
new file mode 100644
index 0000000..e579bf1
--- /dev/null
+++ b/src/routes/(app)/app/tasks/calendar/+page.server.js
@@ -0,0 +1,49 @@
+import prisma from '$lib/prisma.js';
+
+export async function load({ locals }) {
+  const user = locals.user;
+  const org = locals.org;
+  if (!user || !org) return { status: 302, redirect: '/login' };
+
+  // Fetch classic CRM tasks
+  const tasks = await prisma.task.findMany({
+    where: {
+      ownerId: user.id,
+      organizationId: org.id,
+      dueDate: { not: null }
+    },
+    select: {
+      id: true,
+      subject: true,
+      description: true,
+      dueDate: true,
+      status: true,
+      priority: true,
+      createdAt: true,
+      updatedAt: true
+    },
+    orderBy: { dueDate: 'asc' }
+  });
+
+  // Fetch Kanban board tasks
+  const boardTasks = await prisma.boardTask.findMany({
+    where: {
+      assigneeId: user.id,
+      dueDate: { not: null },
+      column: { board: { organizationId: org.id } }
+    },
+    select: {
+      id: true,
+      title: true,
+      description: true,
+      dueDate: true,
+      completed: true,
+      createdAt: true,
+      updatedAt: true,
+      column: { select: { boardId: true } }
+    },
+    orderBy: { dueDate: 'asc' }
+  });
+
+  return { tasks, boardTasks };
+}
diff --git a/src/routes/(app)/app/tasks/calendar/+page.svelte b/src/routes/(app)/app/tasks/calendar/+page.svelte
new file mode 100644
index 0000000..e779837
--- /dev/null
+++ b/src/routes/(app)/app/tasks/calendar/+page.svelte
@@ -0,0 +1,225 @@
+<script>
+  export let data;
+  let today = new Date();
+  let selectedDate = today.toISOString().slice(0, 10);
+
+  // Group tasks by due date (YYYY-MM-DD)
+  let tasksByDate = {};
+  if (data) {
+    for (const t of data.tasks) {
+      if (!t.dueDate) continue;
+      const date = (typeof t.dueDate === 'string' ? t.dueDate : t.dueDate?.toISOString?.())?.slice(0, 10);
+      if (!tasksByDate[date]) tasksByDate[date] = [];
+      tasksByDate[date].push({
+        id: t.id,
+        title: t.subject,
+        description: t.description,
+        type: 'CRM',
+        status: t.status,
+        priority: t.priority
+      });
+    }
+    for (const t of data.boardTasks) {
+      if (!t.dueDate) continue;
+      const date = (typeof t.dueDate === 'string' ? t.dueDate : t.dueDate?.toISOString?.())?.slice(0, 10);
+      if (!tasksByDate[date]) tasksByDate[date] = [];
+      tasksByDate[date].push({
+        id: t.id,
+        title: t.title,
+        description: t.description,
+        type: 'Board',
+        completed: t.completed,
+        boardId: t.column.boardId
+      });
+    }
+  }
+
+  // Calendar logic
+  let year = today.getFullYear();
+  let month = today.getMonth(); // 0-indexed
+  let monthStart = new Date(year, month, 1);
+  let monthEnd = new Date(year, month + 1, 0);
+  let startDay = monthStart.getDay(); // 0=Sun
+  let daysInMonth = monthEnd.getDate();
+  let calendar = [];
+  for (let i = 0; i < startDay; i++) calendar.push(null);
+  for (let d = 1; d <= daysInMonth; d++) calendar.push(new Date(Date.UTC(year, month, d)));
+  while (calendar.length % 7 !== 0) calendar.push(null);
+
+  function formatDate(date) {
+    return date.toISOString().slice(0, 10);
+  }
+  function isToday(date) {
+    return date && formatDate(date) === today.toISOString().slice(0, 10);
+  }
+  function hasTasks(date) {
+    return date && tasksByDate[formatDate(date)]?.length > 0;
+  }
+  function selectDay(date) {
+    if (date) {
+      const formatted = formatDate(date);
+      console.log('Clicked date:', date, 'Formatted:', formatted);
+      selectedDate = formatted;
+      selectedTasks = tasksByDate[selectedDate] || [];
+    }
+  }
+  $: selectedTasks = tasksByDate[selectedDate] || [];
+</script>
+
+<style>
+/* Card container for better separation */
+.card {
+  background: #fff;
+  border-radius: 1.25rem;
+  box-shadow: 0 2px 16px 0 rgba(0,0,0,0.06);
+  padding: 2rem 2.5rem;
+  margin: 2rem auto;
+  max-width: 540px;
+}
+
+.calendar {
+  display: grid;
+  grid-template-columns: repeat(7, 2.5rem);
+  gap: 0.25rem;
+  background: #f8fafc;
+  padding: 1rem;
+  border-radius: 1rem;
+  margin-bottom: 2rem;
+}
+.day {
+  aspect-ratio: 1/1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  font-weight: 500;
+  background: white;
+  border: 1px solid #e5e7eb;
+  transition: background 0.2s, color 0.2s;
+  position: relative;
+}
+.day.today {
+  border: 2px solid #2563eb;
+  color: #2563eb;
+}
+.day.selected {
+  background: #2563eb;
+  color: white;
+}
+.day.has-tasks {
+  box-shadow: 0 0 0 2px #22c55e;
+}
+.day:disabled, .day.null {
+  background: transparent;
+  border: none;
+  cursor: default;
+}
+.calendar-header {
+  display: grid;
+  grid-template-columns: repeat(7, 2.5rem);
+  margin-bottom: 0.25rem;
+  font-size: 0.95rem;
+  color: #64748b;
+  text-align: center;
+}
+
+/* Task list improvements */
+.task-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+.task-item {
+  background: #f1f5f9;
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+  margin-bottom: 0.75rem;
+  box-shadow: 0 1px 4px 0 rgba(0,0,0,0.03);
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+.badge {
+  display: inline-block;
+  font-size: 0.8rem;
+  padding: 0.15em 0.7em;
+  border-radius: 0.5em;
+  margin-left: 0.5em;
+  font-weight: 600;
+}
+.badge-crm { background: #dbeafe; color: #2563eb; }
+.badge-board { background: #dcfce7; color: #16a34a; }
+.badge-priority-high { background: #fee2e2; color: #dc2626; }
+.badge-priority-medium { background: #fef9c3; color: #ca8a04; }
+.badge-priority-low { background: #d1fae5; color: #059669; }
+
+h1 {
+  text-align: center;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+}
+
+h2 {
+  margin-top: 1.5rem;
+  margin-bottom: 1rem;
+  font-size: 1.2rem;
+  color: #2563eb;
+}
+
+.no-tasks {
+  color: #64748b;
+  text-align: center;
+  margin: 2rem 0;
+}
+</style>
+
+<h1>Task Calendar</h1>
+<div class="card">
+  <div class="calendar-header">
+    <div>Sun</div><div>Mon</div><div>Tue</div><div>Wed</div><div>Thu</div><div>Fri</div><div>Sat</div>
+  </div>
+  <div class="calendar">
+    {#each calendar as date, i}
+      {#if date}
+        <button
+          class="day {isToday(date) ? 'today' : ''} {formatDate(date) === selectedDate ? 'selected' : ''} {hasTasks(date) ? 'has-tasks' : ''}"
+          on:click={() => selectDay(date)}
+        >
+          {date.getDate()}
+        </button>
+      {:else}
+        <div class="day null"></div>
+      {/if}
+    {/each}
+  </div>
+
+  <main>
+    <h2>Tasks for {selectedDate}</h2>
+    {#if selectedTasks.length}
+      <ul class="task-list">
+        {#each selectedTasks as task}
+          <li class="task-item">
+            <div>
+              <strong>{task.title}</strong>
+              <span class="badge {task.type === 'CRM' ? 'badge-crm' : 'badge-board'}">{task.type}</span>
+              {#if task.type === 'CRM'}
+                <span class="badge {task.priority === 'High' ? 'badge-priority-high' : task.priority === 'Medium' ? 'badge-priority-medium' : 'badge-priority-low'}">{task.priority}</span>
+              {/if}
+            </div>
+            <div style="font-size:0.95em; color:#64748b;">{task.description}</div>
+            <div style="font-size:0.9em; margin-top:0.2em;">
+              {#if task.type === 'CRM'}
+                <span>Status: <b>{task.status}</b></span>
+              {:else}
+                <span>Status: <b>{task.completed ? 'Completed' : 'Open'}</b></span>
+              {/if}
+            </div>
+          </li>
+        {/each}
+      </ul>
+    {:else}
+      <p class="no-tasks">No tasks for this date.</p>
+    {/if}
+  </main>
+</div>
diff --git a/src/routes/(app)/app/tasks/list/+page.server.js b/src/routes/(app)/app/tasks/list/+page.server.js
new file mode 100644
index 0000000..91fa3e0
--- /dev/null
+++ b/src/routes/(app)/app/tasks/list/+page.server.js
@@ -0,0 +1,4 @@
+// Placeholder for classic task list server logic
+export async function load() {
+  return { tasks: [] };
+}
\ No newline at end of file
diff --git a/src/routes/(app)/app/tasks/list/+page.svelte b/src/routes/(app)/app/tasks/list/+page.svelte
new file mode 100644
index 0000000..468ef0c
--- /dev/null
+++ b/src/routes/(app)/app/tasks/list/+page.svelte
@@ -0,0 +1,6 @@
+<script>
+  // Placeholder for classic task list view
+</script>
+
+<h1>My Tasks</h1>
+<p>This will show a classic list of your tasks (not Kanban style).</p>
\ No newline at end of file
diff --git a/src/routes/(site)/+layout.svelte b/src/routes/(site)/+layout.svelte
index f091e3a..8403ecd 100644
--- a/src/routes/(site)/+layout.svelte
+++ b/src/routes/(site)/+layout.svelte
@@ -4,38 +4,23 @@
   import '../../app.css'; // Import the app.css file directly
   
   let isMenuOpen = false;
-  let isDarkMode = false;
   
   // Toggle mobile menu
   function toggleMenu() {
     isMenuOpen = !isMenuOpen;
   }
   
-  // Toggle dark mode
-  function toggleDarkMode() {
-    isDarkMode = !isDarkMode;
-    document.documentElement.classList.toggle('dark', isDarkMode);
-    localStorage.setItem('theme', isDarkMode ? 'dark' : 'light');
-  }
-  
   // Close mobile menu when route changes
   $: if ($page.url.pathname) {
     isMenuOpen = false;
   }
   
   onMount(() => {
-    // Check for dark mode preference
-    const savedTheme = localStorage.getItem('theme');
-    if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-      isDarkMode = true;
-      document.documentElement.classList.add('dark');
-    }
-    
     // Tailwind CSS is being imported in app.css, no need to add it here
   });
 </script>
 
-<div class="min-h-screen flex flex-col {isDarkMode ? 'dark' : ''}">
+<div class="min-h-screen flex flex-col">
   <!-- Navigation -->
   <nav class="bg-gray-900 text-white shadow-lg">
     <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
@@ -54,19 +39,6 @@
           <a href="/contact" class="px-3 py-2 rounded-md text-sm font-medium hover:bg-gray-700">Contact</a>
           <a href="/login" class="ml-4 px-4 py-2 rounded-md text-sm font-medium bg-blue-600 hover:bg-blue-700">Login</a>
           <a href="/signup" class="ml-2 px-4 py-2 rounded-md text-sm font-medium border border-blue-600 hover:bg-blue-700">Sign Up</a>
-          <button on:click={toggleDarkMode} class="ml-4 p-2 rounded-full hover:bg-gray-700" aria-label="Toggle dark mode">
-            {#if isDarkMode}
-              <!-- Sun icon for light mode -->
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
-              </svg>
-            {:else}
-              <!-- Moon icon for dark mode -->
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-              </svg>
-            {/if}
-          </button>
         </div>
         
         <!-- Mobile menu button -->
@@ -94,20 +66,6 @@
           <a href="/contact" class="block px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700">Contact</a>
           <a href="/login" class="block px-3 py-2 rounded-md text-base font-medium bg-blue-600 hover:bg-blue-700 mt-2">Login</a>
           <a href="/signup" class="block px-3 py-2 rounded-md text-base font-medium border border-blue-600 hover:bg-blue-700 mt-2">Sign Up</a>
-          <button on:click={toggleDarkMode} class="w-full text-left px-3 py-2 rounded-md text-base font-medium hover:bg-gray-700 mt-2 flex items-center">
-            {isDarkMode ? 'Light Mode' : 'Dark Mode'}
-            <span class="ml-2">
-              {#if isDarkMode}
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                  <path fill-rule="evenodd" d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" clip-rule="evenodd" />
-                </svg>
-              {:else}
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
-                  <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
-                </svg>
-              {/if}
-            </span>
-          </button>
         </div>
       </div>
     {/if}
@@ -131,8 +89,8 @@
           <ul class="space-y-2">
             <li><a href="/features" class="text-gray-300 hover:text-white">Features</a></li>
             <li><a href="/pricing" class="text-gray-300 hover:text-white">Pricing</a></li>
-            <li><a href="/integrations" class="text-gray-300 hover:text-white">Integrations</a></li>
             <li><a href="/updates" class="text-gray-300 hover:text-white">Updates</a></li>
+            <li><a href="/roadmap" class="text-gray-300 hover:text-white">Roadmap</a></li>
           </ul>
         </div>
         <div>
diff --git a/src/routes/(site)/+page.svelte b/src/routes/(site)/+page.svelte
index 08ec211..590d098 100644
--- a/src/routes/(site)/+page.svelte
+++ b/src/routes/(site)/+page.svelte
@@ -1,6 +1,6 @@
 <script>
   import { onMount } from 'svelte';
-  
+  import banner_img from '$lib/assets/images/banner.png';  
   // Define feature cards
   const features = [
     {
@@ -23,11 +23,11 @@
       description: 'Make data-driven decisions with powerful analytics and reporting tools.',
       icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'
     },
-    {
-      title: 'Email Integration',
-      description: 'Connect your email and automate communication with clients.',
-      icon: 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'
-    },
+    // {
+    //   title: 'Email Integration',
+    //   description: 'Connect your email and automate communication with clients.',
+    //   icon: 'M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'
+    // },
     {
       title: 'Mobile Access',
       description: 'Manage your business on the go with our mobile-friendly platform.',
@@ -86,12 +86,10 @@
         The all-in-one CRM solution for managing leads, customers, and sales with ease.
       </p>
       <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
-        <a href="/signup" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-100 shadow-lg">
+        <a href="/login" class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-100 shadow-lg">
           Get Started Free
         </a>
-        <a href="/demo" class="inline-flex items-center justify-center px-6 py-3 border border-white text-base font-medium rounded-md text-white hover:bg-indigo-700">
-          Request Demo
-        </a>
+        
       </div>
     </div>
     <div class="md:w-1/2 flex justify-center md:justify-end">
@@ -99,9 +97,7 @@
         <div class="h-60 bg-gray-200 relative">
           <!-- Dashboard preview image would go here -->
           <div class="absolute inset-0 flex items-center justify-center text-gray-500">
-            <svg xmlns="http://www.w3.org/2000/svg" class="h-20 w-20" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
-            </svg>
+            <img src="{banner_img}" alt="Dashboard Preview" class="w-full h-full object-cover" />
           </div>
         </div>
         <div class="p-4 bg-gray-50 border-t border-gray-200">
@@ -143,7 +139,7 @@
 </section>
 
 <!-- Testimonial Section -->
-<section class="py-16 bg-white">
+<!-- <section class="py-16 bg-white">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <h2 class="text-3xl font-extrabold text-gray-900 text-center mb-12 sm:text-4xl">
       Trusted by Businesses Worldwide
@@ -190,7 +186,7 @@
       </div>
     </div>
   </div>
-</section>
+</section> -->
 
 <!-- CTA Section -->
 <section class="bg-blue-700 text-white py-16">
@@ -202,11 +198,11 @@
         </h2>
         <p class="mt-3 max-w-3xl text-lg">
           Start managing your customer relationships more effectively today.
-          Try our CRM free for 14 days, no credit card required.
+          Try our CRM for free, no credit card required.
         </p>
       </div>
       <div class="mt-8 flex lg:mt-0 lg:flex-shrink-0 space-x-4">
-        <a href="/signup" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-100">
+        <a href="/login" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-white hover:bg-gray-100">
           Get Started
         </a>
         <a href="/contact" class="inline-flex items-center justify-center px-5 py-3 border border-white text-base font-medium rounded-md text-white hover:bg-blue-800">
@@ -218,7 +214,7 @@
 </section>
 
 <!-- Stats Section -->
-<section class="py-16 bg-gray-50">
+<!-- <section class="py-16 bg-gray-50">
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
     <div class="grid grid-cols-1 gap-8 md:grid-cols-3">
       <div class="bg-white rounded-lg shadow-lg p-8 text-center">
@@ -235,4 +231,4 @@
       </div>
     </div>
   </div>
-</section>
+</section> -->
diff --git a/src/routes/data/product.json b/src/routes/data/product.json
deleted file mode 100644
index daaa68f..0000000
--- a/src/routes/data/product.json
+++ /dev/null
@@ -1,218 +0,0 @@
-[
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 194556,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "No"
-	},
-	{
-		"name": "React UI Kit",
-		"category": "Html templates",
-		"technology": "React JS",
-		"id": 623232,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$129",
-		"discount": "10%"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 194356,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "No"
-	},
-	{
-		"name": "React UI Kit",
-		"category": "Html templates",
-		"technology": "React JS",
-		"id": 323323,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$129",
-		"discount": "No"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 994856,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "25%"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 194256,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "10%"
-	},
-	{
-		"name": "React UI Kit",
-		"category": "Html templates",
-		"technology": "React JS",
-		"id": 623378,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$129",
-		"discount": "No"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 192856,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "No"
-	},
-	{
-		"name": "React UI Kit",
-		"category": "Html templates",
-		"technology": "React JS",
-		"id": 523323,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$129",
-		"discount": "No"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 191857,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "No"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 914856,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "30%"
-	},
-	{
-		"name": "React UI Kit",
-		"category": "Html templates",
-		"technology": "React JS",
-		"id": 633293,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$129",
-		"discount": "No"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 194556,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "No"
-	},
-	{
-		"name": "React UI Kit",
-		"category": "Html templates",
-		"technology": "React JS",
-		"id": 623232,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$129",
-		"discount": "No"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 194356,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "5%"
-	},
-	{
-		"name": "React UI Kit",
-		"category": "Html templates",
-		"technology": "React JS",
-		"id": 323323,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$129",
-		"discount": "No"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 994856,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "No"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 194256,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "No"
-	},
-	{
-		"name": "React UI Kit",
-		"category": "Html templates",
-		"technology": "React JS",
-		"id": 623378,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$129",
-		"discount": "50%"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 192856,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "No"
-	},
-	{
-		"name": "React UI Kit",
-		"category": "Html templates",
-		"technology": "React JS",
-		"id": 523323,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$129",
-		"discount": "No"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 191857,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "10%"
-	},
-	{
-		"name": "Education Dashboard",
-		"category": "Html templates",
-		"technology": "Angular",
-		"id": 914856,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$149",
-		"discount": "No"
-	},
-	{
-		"name": "React UI Kit",
-		"category": "Html templates",
-		"technology": "React JS",
-		"id": 633293,
-		"description": "Start developing with an open-source library of over 450+ UI components, sections, and pages built with the utility classes from Tailwind CSS and designed in Figma.",
-		"price": "$129",
-		"discount": "No"
-	}
-]
diff --git a/src/routes/data/sidebar.json b/src/routes/data/sidebar.json
deleted file mode 100644
index b85afc7..0000000
--- a/src/routes/data/sidebar.json
+++ /dev/null
@@ -1,92 +0,0 @@
-[
-	{
-		"title": "Getting started",
-		"pages": [
-			{
-				"title": "Introduction"
-			},
-			{
-				"title": "Quickstart"
-			},
-			{
-				"title": "Build tools"
-			},
-			{
-				"title": "License"
-			},
-			{
-				"title": "Changelog"
-			}
-		]
-	},
-	{
-		"title": "Customize",
-		"pages": [
-			{
-				"title": "Configuration"
-			},
-			{
-				"title": "Theming"
-			},
-			{
-				"title": "Color"
-			},
-			{
-				"title": "Icons"
-			},
-			{
-				"title": "Optimization"
-			}
-		]
-	},
-	{
-		"title": "Components",
-		"pages": [
-			{
-				"title": "Alerts"
-			},
-			{
-				"title": "Badge"
-			},
-			{
-				"title": "Breadcrumb"
-			},
-			{
-				"title": "Buttons"
-			},
-			{
-				"title": "Button group"
-			},
-			{
-				"title": "Card"
-			},
-			{
-				"title": "Dropdowns"
-			},
-			{
-				"title": "Forms"
-			},
-			{
-				"title": "Typography"
-			},
-			{
-				"title": "Modal"
-			},
-			{
-				"title": "Navbar"
-			},
-			{
-				"title": "Pagination"
-			},
-			{
-				"title": "Progress"
-			},
-			{
-				"title": "Tables"
-			},
-			{
-				"title": "Tooltips"
-			}
-		]
-	}
-]
diff --git a/src/routes/data/users.json b/src/routes/data/users.json
deleted file mode 100644
index ec4e3e5..0000000
--- a/src/routes/data/users.json
+++ /dev/null
@@ -1,202 +0,0 @@
-[
-	{
-		"id": 1,
-		"name": "Neil Sims",
-		"avatar": "neil-sims.png",
-		"email": "neil.sims@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Front-end developer",
-		"country": "United States",
-		"status": "Active"
-	},
-	{
-		"id": 2,
-		"name": "Roberta Casas",
-		"avatar": "roberta-casas.png",
-		"email": "roberta.casas@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Designer",
-		"country": "Spain",
-		"status": "Active"
-	},
-	{
-		"id": 3,
-		"name": "Michael Gough",
-		"avatar": "michael-gough.png",
-		"email": "michael.gough@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "React developer",
-		"country": "United Kingdom",
-		"status": "Active"
-	},
-	{
-		"id": 4,
-		"name": "Jese Leos",
-		"avatar": "jese-leos.png",
-		"email": "jese.leos@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Marketing",
-		"country": "United States",
-		"status": "Active"
-	},
-	{
-		"id": 5,
-		"name": "Bonnie Green",
-		"avatar": "bonnie-green.png",
-		"email": "bonnie.green@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "UI/UX Engineer",
-		"country": "Australia",
-		"status": "Offline"
-	},
-	{
-		"id": 6,
-		"name": "Thomas Lean",
-		"avatar": "thomas-lean.png",
-		"email": "thomas.lean@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Vue developer",
-		"country": "Germany",
-		"status": "Active"
-	},
-	{
-		"id": 7,
-		"name": "Helene Engels",
-		"avatar": "helene-engels.png",
-		"email": "helene.engels@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Product owner",
-		"country": "Canada",
-		"status": "Active"
-	},
-	{
-		"id": 8,
-		"name": "Lana Byrd",
-		"avatar": "lana-byrd.png",
-		"email": "lana.byrd@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Designer",
-		"country": "United States",
-		"status": "Active"
-	},
-	{
-		"id": 9,
-		"name": "Leslie Livingston",
-		"avatar": "leslie-livingston.png",
-		"email": "leslie.livingston@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Web developer",
-		"country": "France",
-		"status": "Offline"
-	},
-	{
-		"id": 10,
-		"name": "Robert Brown",
-		"avatar": "robert-brown.png",
-		"email": "robert.brown@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Laravel developer",
-		"country": "Russia",
-		"status": "Active"
-	},
-	{
-		"id": 11,
-		"name": "Neil Sims",
-		"avatar": "neil-sims.png",
-		"email": "neil.sims@flowbite.com",
-		"position": "Front-end developer",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"country": "United States",
-		"status": "Active"
-	},
-	{
-		"id": 12,
-		"name": "Roberta Casas",
-		"avatar": "roberta-casas.png",
-		"email": "roberta.casas@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Designer",
-		"country": "Spain",
-		"status": "Active"
-	},
-	{
-		"id": 13,
-		"name": "Michael Gough",
-		"avatar": "michael-gough.png",
-		"email": "michael.gough@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "React developer",
-		"country": "United Kingdom",
-		"status": "Active"
-	},
-	{
-		"id": 14,
-		"name": "Jese Leos",
-		"avatar": "jese-leos.png",
-		"email": "jese.leos@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Marketing",
-		"country": "United States",
-		"status": "Active"
-	},
-	{
-		"id": 15,
-		"name": "Bonnie Green",
-		"avatar": "bonnie-green.png",
-		"email": "bonnie.green@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "UI/UX Engineer",
-		"country": "Australia",
-		"status": "Offline"
-	},
-	{
-		"id": 16,
-		"name": "Thomas Lean",
-		"avatar": "thomas-lean.png",
-		"email": "thomas.lean@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Vue developer",
-		"country": "Germany",
-		"status": "Active"
-	},
-	{
-		"id": 17,
-		"name": "Helene Engels",
-		"avatar": "helene-engels.png",
-		"email": "helene.engels@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Product owner",
-		"country": "Canada",
-		"status": "Active"
-	},
-	{
-		"id": 18,
-		"name": "Lana Byrd",
-		"avatar": "lana-byrd.png",
-		"email": "lana.byrd@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Designer",
-		"country": "United States",
-		"status": "Active"
-	},
-	{
-		"id": 19,
-		"name": "Leslie Livingston",
-		"avatar": "leslie-livingston.png",
-		"email": "leslie.livingston@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Web developer",
-		"country": "France",
-		"status": "Offline"
-	},
-	{
-		"id": 20,
-		"name": "Robert Brown",
-		"avatar": "robert-brown.png",
-		"email": "robert.brown@flowbite.com",
-		"biography": "I love working with React and Flowbites to create efficient and user-friendly interfaces. In my spare time, I enjoys baking, hiking, and spending time with my family.",
-		"position": "Laravel developer",
-		"country": "Russia",
-		"status": "Active"
-	}
-]