diff --git a/README.md b/README.md
index e215bc4..a96e94d 100644
--- a/README.md
+++ b/README.md
@@ -27,6 +27,14 @@ To learn more about Next.js, take a look at the following resources:
 - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
+## Install
+- Jose
+- Node.js
+- Add emoji pakages
+- Install postgres for databases
+- Typescript
+
+
 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
 
 ## Deploy on Vercel
diff --git a/database/migrations/003_chat.sql b/database/migrations/003_chat.sql
new file mode 100644
index 0000000..9221490
--- /dev/null
+++ b/database/migrations/003_chat.sql
@@ -0,0 +1,80 @@
+-- ============================================================================
+-- Chat System: conversations, participants, and messages
+-- ============================================================================
+
+CREATE TABLE IF NOT EXISTS conversations (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    updated_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+CREATE TABLE IF NOT EXISTS conversation_participants (
+    conversation_id UUID NOT NULL REFERENCES conversations(id) ON DELETE CASCADE,
+    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    joined_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    PRIMARY KEY (conversation_id, user_id)
+);
+
+CREATE TABLE IF NOT EXISTS messages (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    conversation_id UUID NOT NULL REFERENCES conversations(id) ON DELETE CASCADE,
+    sender_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    content TEXT NOT NULL,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW(),
+    updated_at TIMESTAMPTZ,
+    deleted_at TIMESTAMPTZ
+);
+
+CREATE INDEX IF NOT EXISTS idx_messages_conversation_id ON messages(conversation_id);
+CREATE INDEX IF NOT EXISTS idx_messages_created_at ON messages(created_at);
+CREATE INDEX IF NOT EXISTS idx_conversation_participants_user_id ON conversation_participants(user_id);
+
+-- Seed conversations between superadmin and other users
+INSERT INTO conversations (id, created_at) VALUES
+    ('c0000000-0000-0000-0000-000000000001', NOW() - INTERVAL '2 hours'),
+    ('c0000000-0000-0000-0000-000000000002', NOW() - INTERVAL '1 hour'),
+    ('c0000000-0000-0000-0000-000000000003', NOW() - INTERVAL '30 minutes')
+ON CONFLICT DO NOTHING;
+
+-- Add participants (superadmin + each sales/dev user)
+INSERT INTO conversation_participants (conversation_id, user_id) VALUES
+    ('c0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000001'),
+    ('c0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003'),
+    ('c0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000001'),
+    ('c0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000004'),
+    ('c0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000001'),
+    ('c0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000002')
+ON CONFLICT DO NOTHING;
+
+-- Seed some messages
+INSERT INTO messages (id, conversation_id, sender_id, content, created_at) VALUES
+    ('00000000-0000-0000-0000-000000000101', 'c0000000-0000-0000-0000-000000000001',
+     '00000000-0000-0000-0000-000000000003', 'Hey! Just finalized the TechCorp deal.',
+     NOW() - INTERVAL '2 hours'),
+    ('00000000-0000-0000-0000-000000000102', 'c0000000-0000-0000-0000-000000000001',
+     '00000000-0000-0000-0000-000000000001', 'Great work! What were the final terms?',
+     NOW() - INTERVAL '105 minutes'),
+    ('00000000-0000-0000-0000-000000000103', 'c0000000-0000-0000-0000-000000000001',
+     '00000000-0000-0000-0000-000000000003', '3-year enterprise license, 15% discount. They signed this morning.',
+     NOW() - INTERVAL '100 minutes'),
+    ('00000000-0000-0000-0000-000000000104', 'c0000000-0000-0000-0000-000000000002',
+     '00000000-0000-0000-0000-000000000004', 'The API integration tests are passing on staging.',
+     NOW() - INTERVAL '50 minutes'),
+    ('00000000-0000-0000-0000-000000000105', 'c0000000-0000-0000-0000-000000000002',
+     '00000000-0000-0000-0000-000000000001', 'Great, when can we deploy to production?',
+     NOW() - INTERVAL '45 minutes'),
+    ('00000000-0000-0000-0000-000000000106', 'c0000000-0000-0000-0000-000000000002',
+     '00000000-0000-0000-0000-000000000004', 'Tomorrow morning after final review.',
+     NOW() - INTERVAL '40 minutes'),
+    ('00000000-0000-0000-0000-000000000107', 'c0000000-0000-0000-0000-000000000003',
+     '00000000-0000-0000-0000-000000000002', 'New report shows 23% increase in lead conversion this quarter.',
+     NOW() - INTERVAL '25 minutes'),
+    ('00000000-0000-0000-0000-000000000108', 'c0000000-0000-0000-0000-000000000003',
+     '00000000-0000-0000-0000-000000000001', 'That is excellent! Let us discuss in the next team meeting.',
+     NOW() - INTERVAL '20 minutes')
+ON CONFLICT DO NOTHING;
+
+-- Update conversation timestamps
+UPDATE conversations SET updated_at = NOW() - INTERVAL '20 minutes' WHERE id = 'c0000000-0000-0000-0000-000000000003';
+UPDATE conversations SET updated_at = NOW() - INTERVAL '40 minutes' WHERE id = 'c0000000-0000-0000-0000-000000000002';
+UPDATE conversations SET updated_at = NOW() - INTERVAL '100 minutes' WHERE id = 'c0000000-0000-0000-0000-000000000001';
diff --git a/database/migrations/004_avatar_url.sql b/database/migrations/004_avatar_url.sql
new file mode 100644
index 0000000..dda99f4
--- /dev/null
+++ b/database/migrations/004_avatar_url.sql
@@ -0,0 +1 @@
+ALTER TABLE users ADD COLUMN IF NOT EXISTS avatar_url TEXT;
\ No newline at end of file
diff --git a/database/migrations/005_last_read_at.sql b/database/migrations/005_last_read_at.sql
new file mode 100644
index 0000000..06510fb
--- /dev/null
+++ b/database/migrations/005_last_read_at.sql
@@ -0,0 +1,2 @@
+ALTER TABLE conversation_participants ADD COLUMN IF NOT EXISTS last_read_at TIMESTAMPTZ;
+UPDATE conversation_participants SET last_read_at = NOW() WHERE last_read_at IS NULL;
\ No newline at end of file
diff --git a/database/migrations/006_test_leads.sql b/database/migrations/006_test_leads.sql
new file mode 100644
index 0000000..df557da
--- /dev/null
+++ b/database/migrations/006_test_leads.sql
@@ -0,0 +1,87 @@
+-- Test leads - 2026-06-18
+INSERT INTO leads (id, stage_id, assigned_to, company_name, contact_name, email, phone, created_at, updated_at) VALUES
+('c0011001-0000-0000-0000-000000000001', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 1', 'Contact 1', 'contact1@test.com', '555-2636', '2025-12-23T22:09:54Z', '2025-12-23T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000002', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 2', 'Contact 2', 'contact2@test.com', '555-5691', '2025-12-29T22:09:54Z', '2025-12-29T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000003', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 3', 'Contact 3', 'contact3@test.com', '555-6446', '2025-12-24T22:09:54Z', '2025-12-24T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000004', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 4', 'Contact 4', 'contact4@test.com', '555-5969', '2026-01-02T22:09:54Z', '2026-01-02T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000005', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 5', 'Contact 5', 'contact5@test.com', '555-4200', '2026-01-14T22:09:54Z', '2026-01-14T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000006', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 6', 'Contact 6', 'contact6@test.com', '555-8324', '2026-01-03T22:09:54Z', '2026-01-03T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000007', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 7', 'Contact 7', 'contact7@test.com', '555-1047', '2025-12-27T22:09:54Z', '2025-12-27T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000008', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 8', 'Contact 8', 'contact8@test.com', '555-634', '2026-01-20T22:09:54Z', '2026-01-20T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000009', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 9', 'Contact 9', 'contact9@test.com', '555-3245', '2026-01-15T22:09:54Z', '2026-01-15T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000010', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 10', 'Contact 10', 'contact10@test.com', '555-3656', '2026-01-12T22:09:54Z', '2026-01-12T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000011', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 11', 'Contact 11', 'contact11@test.com', '555-2993', '2026-01-23T22:09:54Z', '2026-01-23T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000012', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 12', 'Contact 12', 'contact12@test.com', '555-1634', '2026-02-24T22:09:54Z', '2026-02-24T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000013', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 13', 'Contact 13', 'contact13@test.com', '555-2032', '2026-02-10T22:09:54Z', '2026-02-10T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000014', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 14', 'Contact 14', 'contact14@test.com', '555-867', '2026-01-31T22:09:54Z', '2026-01-31T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000015', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 15', 'Contact 15', 'contact15@test.com', '555-2136', '2026-02-02T22:09:54Z', '2026-02-02T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000016', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 16', 'Contact 16', 'contact16@test.com', '555-89', '2026-01-20T22:09:54Z', '2026-01-20T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000017', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 17', 'Contact 17', 'contact17@test.com', '555-4274', '2026-01-25T22:09:54Z', '2026-01-25T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000018', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 18', 'Contact 18', 'contact18@test.com', '555-4294', '2026-03-16T22:09:54Z', '2026-03-16T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000019', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 19', 'Contact 19', 'contact19@test.com', '555-7998', '2025-12-30T22:09:54Z', '2025-12-30T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000020', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 20', 'Contact 20', 'contact20@test.com', '555-8557', '2026-02-13T22:09:54Z', '2026-02-13T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000021', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 21', 'Contact 21', 'contact21@test.com', '555-5170', '2026-04-11T22:09:54Z', '2026-04-11T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000022', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 22', 'Contact 22', 'contact22@test.com', '555-6250', '2025-12-21T22:09:54Z', '2025-12-21T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000023', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 23', 'Contact 23', 'contact23@test.com', '555-5611', '2026-01-06T22:09:54Z', '2026-01-06T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000024', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 24', 'Contact 24', 'contact24@test.com', '555-3467', '2026-04-16T22:09:54Z', '2026-04-16T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000025', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 25', 'Contact 25', 'contact25@test.com', '555-7087', '2026-05-07T22:09:54Z', '2026-05-07T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000026', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 26', 'Contact 26', 'contact26@test.com', '555-2945', '2025-12-22T22:09:54Z', '2025-12-22T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000027', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 27', 'Contact 27', 'contact27@test.com', '555-9502', '2026-01-09T22:09:54Z', '2026-01-09T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000028', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 28', 'Contact 28', 'contact28@test.com', '555-8114', '2026-05-10T22:09:54Z', '2026-05-10T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000029', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 29', 'Contact 29', 'contact29@test.com', '555-4926', '2026-03-02T22:09:54Z', '2026-03-02T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000030', 'e0000000-0000-0000-0000-000000000001', '00000000-0000-0000-0000-000000000003', 'Test Company 30', 'Contact 30', 'contact30@test.com', '555-2421', '2026-03-17T22:09:54Z', '2026-03-17T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000031', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 31', 'Contact 31', 'contact31@test.com', '555-7506', '2025-12-21T22:09:54Z', '2025-12-21T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000032', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 32', 'Contact 32', 'contact32@test.com', '555-6832', '2025-12-29T22:09:54Z', '2025-12-29T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000033', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 33', 'Contact 33', 'contact33@test.com', '555-6548', '2026-01-07T22:09:54Z', '2026-01-07T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000034', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 34', 'Contact 34', 'contact34@test.com', '555-8793', '2026-01-02T22:09:54Z', '2026-01-02T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000035', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 35', 'Contact 35', 'contact35@test.com', '555-6217', '2026-01-29T22:09:54Z', '2026-01-29T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000036', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 36', 'Contact 36', 'contact36@test.com', '555-9206', '2025-12-31T22:09:54Z', '2025-12-31T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000037', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 37', 'Contact 37', 'contact37@test.com', '555-1599', '2025-12-26T22:09:54Z', '2025-12-26T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000038', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 38', 'Contact 38', 'contact38@test.com', '555-3873', '2025-12-29T22:09:54Z', '2025-12-29T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000039', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 39', 'Contact 39', 'contact39@test.com', '555-6122', '2026-01-09T22:09:54Z', '2026-01-09T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000040', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 40', 'Contact 40', 'contact40@test.com', '555-832', '2026-01-13T22:09:54Z', '2026-01-13T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000041', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 41', 'Contact 41', 'contact41@test.com', '555-5979', '2026-01-11T22:09:54Z', '2026-01-11T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000042', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 42', 'Contact 42', 'contact42@test.com', '555-1823', '2025-12-26T22:09:54Z', '2025-12-26T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000043', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 43', 'Contact 43', 'contact43@test.com', '555-7102', '2026-02-28T22:09:54Z', '2026-02-28T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000044', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 44', 'Contact 44', 'contact44@test.com', '555-5106', '2026-01-22T22:09:54Z', '2026-01-22T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000045', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 45', 'Contact 45', 'contact45@test.com', '555-3278', '2026-03-27T22:09:54Z', '2026-03-27T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000046', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 46', 'Contact 46', 'contact46@test.com', '555-4973', '2026-04-28T22:09:54Z', '2026-04-28T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000047', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 47', 'Contact 47', 'contact47@test.com', '555-3297', '2026-03-01T22:09:54Z', '2026-03-01T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000048', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 48', 'Contact 48', 'contact48@test.com', '555-4584', '2026-03-18T22:09:54Z', '2026-03-18T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000049', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 49', 'Contact 49', 'contact49@test.com', '555-6788', '2026-03-04T22:09:54Z', '2026-03-04T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000050', 'e0000000-0000-0000-0000-000000000002', '00000000-0000-0000-0000-000000000003', 'Test Company 50', 'Contact 50', 'contact50@test.com', '555-2734', '2026-01-03T22:09:54Z', '2026-01-03T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000051', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 51', 'Contact 51', 'contact51@test.com', '555-2625', '2025-12-19T22:09:54Z', '2025-12-19T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000052', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 52', 'Contact 52', 'contact52@test.com', '555-620', '2025-12-21T22:09:54Z', '2025-12-21T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000053', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 53', 'Contact 53', 'contact53@test.com', '555-6691', '2025-12-22T22:09:54Z', '2025-12-22T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000054', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 54', 'Contact 54', 'contact54@test.com', '555-8847', '2026-01-25T22:09:54Z', '2026-01-25T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000055', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 55', 'Contact 55', 'contact55@test.com', '555-2187', '2026-02-02T22:09:54Z', '2026-02-02T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000056', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 56', 'Contact 56', 'contact56@test.com', '555-3267', '2026-01-19T22:09:54Z', '2026-01-19T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000057', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 57', 'Contact 57', 'contact57@test.com', '555-8119', '2026-03-05T22:09:54Z', '2026-03-05T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000058', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 58', 'Contact 58', 'contact58@test.com', '555-3181', '2025-12-19T22:09:54Z', '2025-12-19T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000059', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 59', 'Contact 59', 'contact59@test.com', '555-4403', '2026-02-23T22:09:54Z', '2026-02-23T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000060', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 60', 'Contact 60', 'contact60@test.com', '555-1407', '2026-04-06T22:09:54Z', '2026-04-06T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000061', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 61', 'Contact 61', 'contact61@test.com', '555-2333', '2026-02-27T22:09:54Z', '2026-02-27T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000062', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 62', 'Contact 62', 'contact62@test.com', '555-1436', '2026-04-26T22:09:54Z', '2026-04-26T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000063', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 63', 'Contact 63', 'contact63@test.com', '555-7135', '2026-04-19T22:09:54Z', '2026-04-19T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000064', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 64', 'Contact 64', 'contact64@test.com', '555-9366', '2026-01-22T22:09:54Z', '2026-01-22T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000065', 'e0000000-0000-0000-0000-000000000003', '00000000-0000-0000-0000-000000000003', 'Test Company 65', 'Contact 65', 'contact65@test.com', '555-7135', '2026-02-18T22:09:54Z', '2026-02-18T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000066', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 66', 'Contact 66', 'contact66@test.com', '555-6854', '2025-12-19T22:09:54Z', '2025-12-19T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000067', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 67', 'Contact 67', 'contact67@test.com', '555-2322', '2025-12-24T22:09:54Z', '2025-12-24T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000068', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 68', 'Contact 68', 'contact68@test.com', '555-2632', '2026-01-13T22:09:54Z', '2026-01-13T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000069', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 69', 'Contact 69', 'contact69@test.com', '555-876', '2025-12-29T22:09:54Z', '2025-12-29T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000070', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 70', 'Contact 70', 'contact70@test.com', '555-974', '2026-01-15T22:09:54Z', '2026-01-15T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000071', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 71', 'Contact 71', 'contact71@test.com', '555-1919', '2026-01-18T22:09:54Z', '2026-01-18T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000072', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 72', 'Contact 72', 'contact72@test.com', '555-3034', '2025-12-25T22:09:54Z', '2025-12-25T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000073', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 73', 'Contact 73', 'contact73@test.com', '555-1795', '2026-01-27T22:09:54Z', '2026-01-27T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000074', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 74', 'Contact 74', 'contact74@test.com', '555-727', '2026-01-08T22:09:54Z', '2026-01-08T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000075', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 75', 'Contact 75', 'contact75@test.com', '555-3877', '2026-03-08T22:09:54Z', '2026-03-08T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000076', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 76', 'Contact 76', 'contact76@test.com', '555-6384', '2026-01-13T22:09:54Z', '2026-01-13T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000077', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 77', 'Contact 77', 'contact77@test.com', '555-5607', '2026-01-12T22:09:54Z', '2026-01-12T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000078', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 78', 'Contact 78', 'contact78@test.com', '555-6225', '2026-01-12T22:09:54Z', '2026-01-12T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000079', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 79', 'Contact 79', 'contact79@test.com', '555-9288', '2026-04-16T22:09:54Z', '2026-04-16T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000080', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 80', 'Contact 80', 'contact80@test.com', '555-8660', '2026-02-16T22:09:54Z', '2026-02-16T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000081', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 81', 'Contact 81', 'contact81@test.com', '555-826', '2025-12-28T22:09:54Z', '2025-12-28T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000082', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 82', 'Contact 82', 'contact82@test.com', '555-1761', '2026-03-11T22:09:54Z', '2026-03-11T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000083', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 83', 'Contact 83', 'contact83@test.com', '555-9860', '2026-05-18T22:09:54Z', '2026-05-18T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000084', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 84', 'Contact 84', 'contact84@test.com', '555-1104', '2026-06-01T22:09:54Z', '2026-06-01T22:09:54Z'),
+('c0011001-0000-0000-0000-000000000085', 'e0000000-0000-0000-0000-000000000007', '00000000-0000-0000-0000-000000000003', 'Test Company 85', 'Contact 85', 'contact85@test.com', '555-9528', '2026-06-14T22:09:54Z', '2026-06-14T22:09:54Z');
diff --git a/src/app/(dashboard)/chats/page.tsx b/src/app/(dashboard)/chats/page.tsx
index 580b980..0af8154 100644
--- a/src/app/(dashboard)/chats/page.tsx
+++ b/src/app/(dashboard)/chats/page.tsx
@@ -14,7 +14,6 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu"
-import { conversations as conversationsData } from "@/data/chats"
 import {
   Search, Send, Phone, Video, MoreHorizontal, Paperclip,
   Smile, Flag, Ban, Trash2, Image, FileIcon, X, Mic, Square, Play, Pause, Check, CheckCheck,
@@ -94,7 +93,7 @@ function VoiceMessagePlayer({ src, initialDuration }: { src: string; initialDura
 export default function ChatsPage() {
   const { theme } = useTheme()
   const { user } = useUser()
-  const [activeChat, setActiveChat] = useState(conversationsData[0]?.id ?? null)
+  const [activeChat, setActiveChat] = useState<string | null>(null)
   const [messageInput, setMessageInput] = useState("")
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const [attachments, setAttachments] = useState<File[]>([])
@@ -103,7 +102,7 @@ export default function ChatsPage() {
   const [reportDialogOpen, setReportDialogOpen] = useState(false)
   const [reportReason, setReportReason] = useState("")
   const [forwardDialogOpen, setForwardDialogOpen] = useState(false)
-  const [forwardMessage, setForwardMessage] = useState<typeof conversationsData[0]["messages"][0] | null>(null)
+  const [forwardMessage, setForwardMessage] = useState<any>(null)
   const [forwardSearch, setForwardSearch] = useState("")
   const [searchQuery, setSearchQuery] = useState("")
   const [isRecording, setIsRecording] = useState(false)
@@ -112,18 +111,17 @@ export default function ChatsPage() {
   const recordingDurationRef = useRef(0)
   const [voiceMessages, setVoiceMessages] = useState<Map<string, { url: string; duration: number }>>(new Map())
   const [messageAttachments, setMessageAttachments] = useState<Map<string, { name: string; type: string; url: string }[]>>(new Map())
-  const [replyingTo, setReplyingTo] = useState<typeof conversationsData[0]["messages"][0] | null>(null)
-  const [editingMessage, setEditingMessage] = useState<typeof conversationsData[0]["messages"][0] | null>(null)
+  const [replyingTo, setReplyingTo] = useState<any>(null)
+  const [editingMessage, setEditingMessage] = useState<any>(null)
   const [replyMap, setReplyMap] = useState<Map<string, { repliedToSender: string; repliedToContent: string }>>(new Map())
-  const [messageStatus, setMessageStatus] = useState<Map<string, "sent" | "delivered" | "read">>(() => {
-    const map = new Map<string, "sent" | "delivered" | "read">()
-    conversationsData.forEach((conv) =>
-      conv.messages.forEach((msg) => {
-        if (msg.senderId === "user1") map.set(msg.id, "read")
-      })
-    )
-    return map
-  })
+  // message status tracking removed — now using msg.read from API
+  const [conversations, setConversations] = useState<any[]>([])
+  const [conversationMessages, setConversationMessages] = useState<Map<string, any[]>>(new Map())
+  const [loadingChats, setLoadingChats] = useState(true)
+  const [searchResults, setSearchResults] = useState<any[]>([])
+  const [searchingUsers, setSearchingUsers] = useState(false)
+  const [unreadMap, setUnreadMap] = useState<Map<string, number>>(new Map())
+  const [previewAvatarUrl, setPreviewAvatarUrl] = useState<string | null>(null)
   const fileInputRef = useRef<HTMLInputElement>(null)
   const textareaRef = useRef<HTMLTextAreaElement>(null)
   const emojiPickerRef = useRef<HTMLDivElement>(null)
@@ -141,15 +139,79 @@ export default function ChatsPage() {
     ta.style.height = `${ta.scrollHeight}px`
   }, [])
 
-  const [conversations, setConversations] = useState(conversationsData)
   if (!user) return null
+
+  const messages = conversationMessages.get(activeChat || "") || []
   const conversation = conversations.find((c) => c.id === activeChat)
-  const otherParticipant = (conv: typeof conversationsData[0]) =>
-    conv.participants.find((p) => p.id !== "user1") ?? conv.participants[0]
+  const otherParticipant = (conv: any) => conv.otherUser
   const filteredConversations = searchQuery.trim()
     ? conversations.filter((conv) => otherParticipant(conv).name.toLowerCase().includes(searchQuery.toLowerCase()))
     : conversations
 
+  // Fetch conversations from API
+  useEffect(() => {
+    const fetchConvs = async () => {
+      try {
+        const res = await fetch("/api/conversations")
+        if (res.ok) {
+          const data = await res.json()
+          const convs = data.conversations || []
+          setConversations(convs)
+          setUnreadMap(new Map(convs.map((c: any) => [c.id, c.unread])))
+          if (convs.length > 0) setActiveChat(convs[0].id)
+        }
+      } catch {
+        // ignore
+      } finally {
+        setLoadingChats(false)
+      }
+    }
+    fetchConvs()
+  }, [])
+
+  // Fetch messages when active chat changes, and mark as read
+  useEffect(() => {
+    if (!activeChat) return
+    const fetchMsgs = async () => {
+      try {
+        const res = await fetch(`/api/conversations/${activeChat}/messages`)
+        if (res.ok) {
+          const data = await res.json()
+          setConversationMessages((prev) => {
+            const next = new Map(prev)
+            next.set(activeChat, data.messages || [])
+            return next
+          })
+        }
+      } catch {
+        // ignore
+      }
+      // Mark conversation as read
+      fetch(`/api/conversations/${activeChat}/read`, { method: "POST" }).catch(() => {})
+      setUnreadMap((prev) => { const m = new Map(prev); m.set(activeChat, 0); return m })
+    }
+    fetchMsgs()
+  }, [activeChat])
+
+  // Search users when search query changes
+  useEffect(() => {
+    const q = searchQuery.trim()
+    if (!q) { setSearchResults([]); return }
+    const timer = setTimeout(async () => {
+      setSearchingUsers(true)
+      try {
+        const res = await fetch(`/api/users/search?q=${encodeURIComponent(q)}`)
+        if (res.ok) {
+          const data = await res.json()
+          const existingIds = new Set(conversations.map((c) => otherParticipant(c).id))
+          setSearchResults(data.users.filter((u: any) => !existingIds.has(u.id)))
+        }
+      } catch { /* ignore */ }
+      setSearchingUsers(false)
+    }, 300)
+    return () => clearTimeout(timer)
+  }, [searchQuery, conversations])
+
   useEffect(() => {
     const handleClickOutside = (e: MouseEvent) => {
       if (emojiPickerRef.current && !emojiPickerRef.current.contains(e.target as Node)) {
@@ -202,79 +264,77 @@ export default function ChatsPage() {
     setAttachments((prev) => prev.filter((_, i) => i !== index))
   }
 
-  const addMessageToChat = (content: string, voice?: { url: string; duration: number }, replyTo?: { senderName: string; content: string }, attachments?: { name: string; type: string; url: string }[]) => {
-    const id = crypto.randomUUID()
-    const newMessage = {
-      id,
-      conversationId: activeChat!,
-      senderId: "user1",
-      senderName: "Sarah Chen",
-      senderAvatar: "SC",
-      content,
-      timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
-    }
-    setConversations((prev) =>
-      prev.map((conv) =>
-        conv.id === activeChat
-          ? {
-              ...conv,
-              messages: [...conv.messages, newMessage],
-              lastMessage: voice ? "🎤 Voice note" : (replyTo ? `↪ ${content}` : content),
-              lastMessageTime: "Just now",
-              unread: 0,
-            }
-          : conv
-      )
-    )
-    setMessageStatus((prev) => {
-      const next = new Map(prev)
-      next.set(id, "sent")
-      return next
-    })
-    setTimeout(() => {
-      setMessageStatus((prev) => {
+  const addMessageToChat = async (content: string, voice?: { url: string; duration: number }, replyTo?: { senderName: string; content: string }, fileAttachments?: { name: string; type: string; url: string }[]) => {
+    if (!activeChat || !user) return
+    const payload = voice ? "[Voice message]" : content
+    try {
+      const res = await fetch(`/api/conversations/${activeChat}/messages`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: payload }),
+      })
+      if (!res.ok) return
+      const data = await res.json()
+      const msg = data.message
+      setConversationMessages((prev) => {
         const next = new Map(prev)
-        if (next.get(id) === "sent") next.set(id, "delivered")
+        const existing = next.get(activeChat) || []
+        next.set(activeChat, [...existing, msg])
         return next
       })
-    }, 1000)
-    if (voice) {
-      setVoiceMessages((prev) => {
-        const next = new Map(prev)
-        next.set(id, voice)
-        return next
-      })
-    }
-    if (replyTo) {
-      setReplyMap((prev) => {
-        const next = new Map(prev)
-        next.set(id, { repliedToSender: replyTo.senderName, repliedToContent: replyTo.content })
-        return next
-      })
-    }
-    if (attachments && attachments.length > 0) {
-      setMessageAttachments((prev) => {
-        const next = new Map(prev)
-        next.set(id, attachments)
-        return next
+      setConversations((prev) => {
+        const updated = prev.map((conv) =>
+          conv.id === activeChat
+            ? { ...conv, lastMessage: content, lastMessageTime: "Just now" }
+            : conv
+        )
+        const idx = updated.findIndex((c) => c.id === activeChat)
+        if (idx > 0) {
+          const [item] = updated.splice(idx, 1)
+          updated.unshift(item)
+        }
+        return updated
       })
+      setUnreadMap((prev) => { const m = new Map(prev); m.set(activeChat, 0); return m })
+      await fetch(`/api/conversations/${activeChat}/read`, { method: "POST" })
+      if (voice) {
+        setVoiceMessages((prev) => {
+          const next = new Map(prev)
+          next.set(msg.id, voice)
+          return next
+        })
+      }
+      if (replyTo) {
+        setReplyMap((prev) => {
+          const next = new Map(prev)
+          next.set(msg.id, { repliedToSender: replyTo.senderName, repliedToContent: replyTo.content })
+          return next
+        })
+      }
+      if (fileAttachments && fileAttachments.length > 0) {
+        setMessageAttachments((prev) => {
+          const next = new Map(prev)
+          next.set(msg.id, fileAttachments)
+          return next
+        })
+      }
+    } catch {
+      toast.error("Failed to send message")
     }
   }
 
-  const handleSend = (e: React.FormEvent) => {
+  const handleSend = async (e: React.FormEvent) => {
     e.preventDefault()
     if (!messageInput.trim() && attachments.length === 0) return
     if (editingMessage) {
-      setConversations((prev) =>
-        prev.map((conv) => ({
-          ...conv,
-          messages: conv.messages.map((m) =>
-            m.id === editingMessage.id ? { ...m, content: messageInput.trim() } : m
-          ),
-          lastMessage: conv.id === activeChat && conv.messages.some((m) => m.id === editingMessage.id)
-            ? messageInput.trim() : conv.lastMessage,
-        }))
-      )
+      setConversationMessages((prev) => {
+        const next = new Map(prev)
+        const msgs = (next.get(activeChat || "") || []).map((m) =>
+          m.id === editingMessage.id ? { ...m, content: messageInput.trim() } : m
+        )
+        next.set(activeChat || "", msgs)
+        return next
+      })
       setEditingMessage(null)
       setMessageInput("")
       setTimeout(() => autoResizeTextarea(), 0)
@@ -284,11 +344,11 @@ export default function ChatsPage() {
       ? attachments.map((f) => ({ name: f.name, type: f.type, url: URL.createObjectURL(f) }))
       : undefined
     if (replyingTo) {
-      const replySender = replyingTo.senderId === "user1" ? user.name : otherParticipant(conversation!).name
-      addMessageToChat(messageInput.trim(), undefined, { senderName: replySender, content: replyingTo.content }, fileAttachments)
+      const replySender = replyingTo.senderId === user.id ? user.name : otherParticipant(conversation!).name
+      await addMessageToChat(messageInput.trim(), undefined, { senderName: replySender, content: replyingTo.content }, fileAttachments)
       setReplyingTo(null)
     } else {
-      addMessageToChat(messageInput.trim(), undefined, undefined, fileAttachments)
+      await addMessageToChat(messageInput.trim(), undefined, undefined, fileAttachments)
     }
     setMessageInput("")
     setTimeout(() => autoResizeTextarea(), 0)
@@ -296,12 +356,18 @@ export default function ChatsPage() {
   }
 
   const handleDeleteMessage = (messageId: string) => {
+    setConversationMessages((prev) => {
+      const next = new Map(prev)
+      const msgs = (next.get(activeChat || "") || []).filter((m) => m.id !== messageId)
+      next.set(activeChat || "", msgs)
+      return next
+    })
     setConversations((prev) =>
-      prev.map((conv) => ({
-        ...conv,
-        messages: conv.messages.filter((m) => m.id !== messageId),
-        lastMessage: conv.messages.filter((m) => m.id !== messageId).at(-1)?.content ?? conv.lastMessage,
-      }))
+      prev.map((conv) =>
+        conv.id === activeChat
+          ? { ...conv, lastMessage: conversationMessages.get(activeChat || "")?.filter((m) => m.id !== messageId).at(-1)?.content ?? conv.lastMessage }
+          : conv
+      )
     )
     toast.success("Message deleted")
   }
@@ -405,16 +471,30 @@ export default function ChatsPage() {
             const person = otherParticipant(conv)
             const isActive = conv.id === activeChat
             return (
-              <button
-                key={conv.id}
-                onClick={() => setActiveChat(conv.id)}
+                <button
+                  key={conv.id}
+                  onClick={() => {
+                    setActiveChat(conv.id)
+                    setUnreadMap((prev) => { const m = new Map(prev); m.set(conv.id, 0); return m })
+                    setConversations((prev) => {
+                      const idx = prev.findIndex((c) => c.id === conv.id)
+                      if (idx > 0) {
+                        const u = [...prev]
+                        const [item] = u.splice(idx, 1)
+                        u.unshift(item)
+                        return u
+                      }
+                      return prev
+                    })
+                  }}
                 className={cn(
-                  "w-full flex items-start gap-3 p-4 text-left transition-colors hover:bg-muted/50",
+                  "w-full flex items-start gap-3 p-4 text-left transition-colors hover:bg-muted/50 relative",
                   isActive && "bg-muted"
                 )}
               >
                 <Avatar className="h-10 w-10 shrink-0">
-                  <AvatarFallback>{person.avatar}</AvatarFallback>
+                  <AvatarImage src={person.avatar} />
+                  <AvatarFallback>{person.name?.charAt(0) || "?"}</AvatarFallback>
                 </Avatar>
                 <div className="flex-1 min-w-0">
                   <div className="flex items-center justify-between gap-2">
@@ -423,15 +503,55 @@ export default function ChatsPage() {
                   </div>
                   <p className="text-xs text-muted-foreground truncate mt-0.5">{conv.lastMessage}</p>
                 </div>
-                {conv.unread > 0 && (
-                  <span className="shrink-0 flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-[10px] font-medium text-primary-foreground">
-                    {conv.unread}
-                  </span>
+                {!isActive && (unreadMap.get(conv.id) || 0) > 0 && (
+                  <div className="shrink-0 h-3 w-3 rounded-full bg-red-500 animate-pulse shadow-[0_0_10px_#ef4444] self-center" />
                 )}
               </button>
             )
           })}
-          {filteredConversations.length === 0 && searchQuery && (
+          {searchResults.length > 0 && (
+            <>
+              {searchQuery && <div className="px-4 py-2 text-xs font-medium text-muted-foreground">New conversation</div>}
+              {searchResults.map((person: any) => (
+                <button
+                  key={person.id}
+                  onClick={async () => {
+                    try {
+                      const res = await fetch("/api/conversations", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ userId: person.id }),
+                      })
+                      if (res.ok) {
+                        const data = await res.json()
+                        const conv = data.conversation || conversations.find((c) => c.id === data.conversationId)
+                        if (conv) {
+                          setConversations((prev) => [conv, ...prev])
+                          setUnreadMap((prev) => { const m = new Map(prev); m.set(conv.id, 0); return m })
+                          setActiveChat(conv.id)
+                          setSearchQuery("")
+                        }
+                      }
+                    } catch { /* ignore */ }
+                  }}
+                  className="w-full flex items-center gap-3 p-4 text-left transition-colors hover:bg-muted/50"
+                >
+                  <div className="relative">
+                    <Avatar className="h-10 w-10 shrink-0">
+                      <AvatarImage src={person.avatar} />
+                      <AvatarFallback>{person.name?.charAt(0) || "?"}</AvatarFallback>
+                    </Avatar>
+                    <span className="absolute -bottom-0.5 -right-0.5 flex h-5 w-5 items-center justify-center rounded-full bg-primary text-[10px] text-primary-foreground font-bold">+</span>
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <span className="text-sm font-medium truncate block">{person.name}</span>
+                    <span className="text-xs text-muted-foreground truncate block">{person.email}</span>
+                  </div>
+                </button>
+              ))}
+            </>
+          )}
+          {filteredConversations.length === 0 && searchResults.length === 0 && searchQuery && !searchingUsers && (
             <div className="p-4 text-center text-sm text-muted-foreground">No conversations found</div>
           )}
         </ScrollArea>
@@ -451,8 +571,9 @@ export default function ChatsPage() {
           {/* Chat header */}
           <div className="flex items-center justify-between gap-4 px-6 h-16 border-b shrink-0">
             <div className="flex items-center gap-3 min-w-0">
-              <Avatar className="h-9 w-9 shrink-0">
-                <AvatarFallback>{otherParticipant(conversation).avatar}</AvatarFallback>
+              <Avatar className="h-9 w-9 shrink-0 cursor-pointer" onClick={() => setPreviewAvatarUrl(otherParticipant(conversation).avatar)}>
+                <AvatarImage src={otherParticipant(conversation).avatar} />
+                <AvatarFallback>{otherParticipant(conversation).name?.charAt(0) || "?"}</AvatarFallback>
               </Avatar>
               <div className="min-w-0">
                 <p className="text-sm font-medium truncate">{otherParticipant(conversation).name}</p>
@@ -493,15 +614,15 @@ export default function ChatsPage() {
           {/* Messages */}
           <div className="flex-1 overflow-y-auto p-6" style={{ scrollbarWidth: "thin", scrollbarColor: "hsl(var(--muted-foreground) / 0.3) transparent" }}>
             <div className="space-y-4 min-h-0">
-              {conversation.messages.map((msg) => {
-                const isMe = msg.senderId === "user1"
+              {messages.map((msg) => {
+                const isMe = msg.senderId === user?.id
                 const voiceUrl = voiceMessages.get(msg.id)
                 return (
                   <div key={msg.id} className={cn("group flex gap-3", isMe && "flex-row-reverse")}>
-                    <Avatar className="h-8 w-8 mt-0.5 shrink-0">
-                      {isMe ? <AvatarImage src={user.avatar} /> : null}
+                    <Avatar className="h-8 w-8 mt-0.5 shrink-0 cursor-pointer" onClick={() => setPreviewAvatarUrl(msg.senderAvatar)}>
+                      <AvatarImage src={msg.senderAvatar} />
                       <AvatarFallback className={cn("text-xs", isMe && "bg-primary text-primary-foreground")}>
-                        {msg.senderAvatar}
+                        {msg.senderName?.charAt(0) || "?"}
                       </AvatarFallback>
                     </Avatar>
                     <div className={cn("max-w-[70%]", isMe && "items-end flex flex-col")}>
@@ -608,12 +729,9 @@ export default function ChatsPage() {
                       <span className="flex items-center gap-1 text-xs text-muted-foreground mt-1.5 px-1">
                         {msg.timestamp}
                         {isMe && (
-                          (() => {
-                            const status = messageStatus.get(msg.id)
-                            if (status === "read") return <CheckCheck className="h-3 w-3 text-blue-400" />
-                            if (status === "delivered") return <CheckCheck className="h-3 w-3 text-muted-foreground/60" />
-                            return <Check className="h-3 w-3 text-muted-foreground/60" />
-                          })()
+                          msg.read
+                            ? <CheckCheck className="h-3 w-3 text-blue-400" />
+                            : <Check className="h-3 w-3 text-muted-foreground/60" />
                         )}
                       </span>
                     </div>
@@ -649,7 +767,7 @@ export default function ChatsPage() {
               <div className="flex items-center gap-2 rounded-lg border-l-4 border-primary bg-muted/50 px-3 py-2 text-sm">
                 <div className="flex-1 min-w-0">
                   <p className="text-xs font-medium text-primary">
-                    Replying to {replyingTo.senderId === "user1" ? "yourself" : otherParticipant(conversation).name}
+                    Replying to {replyingTo.senderId === user?.id ? "yourself" : otherParticipant(conversation).name}
                   </p>
                   <p className="text-xs text-muted-foreground truncate">{replyingTo.content}</p>
                 </div>
@@ -690,7 +808,7 @@ export default function ChatsPage() {
                   </div>
                 ) : (
                   <>
-                    <textarea ref={textareaRef} value={messageInput} onChange={(e) => { setMessageInput(e.target.value); autoResizeTextarea() }} onPaste={(e) => { const items = Array.from(e.clipboardData.items).filter((item) => item.type.startsWith("image/")); if (items.length > 0) { e.preventDefault(); const files = items.map((item) => item.getAsFile()).filter((f): f is File => f !== null); setAttachments((prev) => [...prev, ...files]) } }} placeholder={editingMessage ? "Edit message..." : "Type a message..."} className="w-full resize-none overflow-hidden rounded-md border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 min-h-[36px] max-h-[200px] pr-16" style={{ height: "auto" }} rows={1} />
+                    <textarea ref={textareaRef} value={messageInput} onChange={(e) => { setMessageInput(e.target.value); autoResizeTextarea() }} onPaste={(e) => { if (!e.clipboardData) return; const items = Array.from(e.clipboardData.items).filter((item) => item.type.startsWith("image/")); if (items.length > 0) { e.preventDefault(); const files = items.map((item) => item.getAsFile()).filter((f): f is File => f !== null); setAttachments((prev) => [...prev, ...files]) } }} placeholder={editingMessage ? "Edit message..." : "Type a message..."} className="w-full resize-none overflow-hidden rounded-md border border-input bg-transparent px-3 py-1.5 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 min-h-[36px] max-h-[200px] pr-16" style={{ height: "auto" }} rows={1} />
                     <div className="absolute right-0 top-0 bottom-0 flex items-center pr-1" ref={emojiPickerRef}>
                       <Button type="button" variant="ghost" size="icon" className="h-7 w-7 shrink-0" onClick={() => setShowEmojiPicker(!showEmojiPicker)}>
                         <Smile className="h-4 w-4 text-muted-foreground" />
@@ -740,6 +858,19 @@ export default function ChatsPage() {
         </DialogContent>
       </Dialog>
 
+      {/* Avatar preview dialog */}
+      <Dialog open={!!previewAvatarUrl} onOpenChange={(o) => { if (!o) setPreviewAvatarUrl(null) }}>
+        <DialogContent className="sm:max-w-sm p-0 overflow-hidden bg-transparent border-0 shadow-none">
+          {previewAvatarUrl && (
+            <img
+              src={previewAvatarUrl}
+              alt="Profile picture"
+              className="w-full h-auto max-h-[80vh] object-contain rounded-2xl"
+            />
+          )}
+        </DialogContent>
+      </Dialog>
+
       {/* Forward dialog */}
       <Dialog open={forwardDialogOpen} onOpenChange={setForwardDialogOpen}>
         <DialogContent className="sm:max-w-sm">
@@ -754,8 +885,6 @@ export default function ChatsPage() {
           <ScrollArea className="max-h-64">
             <div className="space-y-0.5">
               {conversations
-                .slice()
-                .sort((a, b) => b.messages.length - a.messages.length)
                 .filter((conv) => {
                   const person = otherParticipant(conv)
                   return person.name.toLowerCase().includes(forwardSearch.toLowerCase())
@@ -766,45 +895,33 @@ export default function ChatsPage() {
                     <button
                       key={conv.id}
                       type="button"
-                      onClick={() => {
+                      onClick={async () => {
                         const msg = forwardMessage
-                        if (!msg) return
+                        if (!msg || !user) return
                         const newContent = `📨 Forwarded: ${msg.content}`
-                        setConversations((prev) =>
-                          prev.map((c) =>
-                            c.id === conv.id
-                              ? {
-                                  ...c,
-                                  messages: [
-                                    ...c.messages,
-                                    {
-                                      id: crypto.randomUUID(),
-                                      conversationId: conv.id,
-                                      senderId: "user1",
-                                      senderName: "Sarah Chen",
-                                      senderAvatar: "SC",
-                                      content: newContent,
-                                      timestamp: new Date().toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }),
-                                    },
-                                  ],
-                                  lastMessage: newContent,
-                                  lastMessageTime: "Just now",
-                                }
-                              : c
-                          )
-                        )
-                        setForwardDialogOpen(false)
-                        setForwardSearch("")
-                        toast.success("Message forwarded")
+                        try {
+                          const res = await fetch(`/api/conversations/${conv.id}/messages`, {
+                            method: "POST",
+                            headers: { "Content-Type": "application/json" },
+                            body: JSON.stringify({ content: newContent }),
+                          })
+                          if (res.ok) {
+                            setForwardDialogOpen(false)
+                            setForwardSearch("")
+                            toast.success("Message forwarded")
+                          }
+                        } catch {
+                          toast.error("Failed to forward message")
+                        }
                       }}
                       className="w-full flex items-center gap-3 rounded-lg p-2.5 text-left transition-colors hover:bg-muted"
                     >
                       <Avatar className="h-9 w-9 shrink-0">
-                        <AvatarFallback>{person.avatar}</AvatarFallback>
+                        <AvatarFallback>{person.name.charAt(0)}</AvatarFallback>
                       </Avatar>
                       <div className="flex-1 min-w-0">
                         <p className="text-sm font-medium truncate">{person.name}</p>
-                        <p className="text-xs text-muted-foreground truncate">{person.role} · {conv.messages.length} messages</p>
+                        <p className="text-xs text-muted-foreground truncate">{person.email || ""}</p>
                       </div>
                     </button>
                   )
diff --git a/src/app/(dashboard)/dashboard/page.tsx b/src/app/(dashboard)/dashboard/page.tsx
index 5de5930..c3715fe 100644
--- a/src/app/(dashboard)/dashboard/page.tsx
+++ b/src/app/(dashboard)/dashboard/page.tsx
@@ -1,13 +1,12 @@
 "use client"
 
-import { useState, useEffect } from "react"
+import { useState, useEffect, useRef } from "react"
 import { PageHeader } from "@/components/shared/page-header"
 import { StatCard } from "@/components/dashboard/stat-card"
 import { StatCardSkeleton } from "@/components/dashboard/stat-card-skeleton"
 import { RecentLeadsTable } from "@/components/dashboard/recent-leads-table"
 import { LeadStatusChart } from "@/components/dashboard/lead-status-chart"
 import { LeadsPerMonthChart } from "@/components/dashboard/leads-per-month-chart"
-import { getDashboardStats } from "@/data/dashboard"
 import {
   Users,
   UserPlus,
@@ -29,19 +28,36 @@ import { DashboardStats } from "@/types"
 export default function DashboardPage() {
   const [period, setPeriod] = useState("6months")
   const [stats, setStats] = useState<DashboardStats | null>(null)
+  const pollingRef = useRef<NodeJS.Timeout | null>(null)
+
+  async function fetchStats(p: string) {
+    try {
+      const res = await fetch(`/api/dashboard?period=${p}`)
+      if (res.ok) {
+        const data = await res.json()
+        setStats(data)
+      }
+    } catch {
+      // ignore
+    }
+  }
 
   useEffect(() => {
-    setStats(getDashboardStats(period))
+    fetchStats(period)
+    pollingRef.current = setInterval(() => fetchStats(period), 30000)
+    return () => {
+      if (pollingRef.current) clearInterval(pollingRef.current)
+    }
   }, [period])
 
   const statCards = stats
     ? [
-        { title: "Total Leads", value: stats.totalLeads, icon: Users, variant: "blue" as const, description: stats.periodLabel },
-        { title: "Open Leads", value: stats.openLeads, icon: UserPlus, variant: "blue" as const, description: "Needs attention" },
-        { title: "Contacted", value: stats.contactedLeads, icon: PhoneCall, variant: "amber" as const, description: "In conversation" },
-        { title: "Pending", value: stats.pendingLeads, icon: Clock, variant: "purple" as const, description: "Awaiting decision" },
-        { title: "Closed", value: stats.closedLeads, icon: CheckCircle2, variant: "emerald" as const, description: "Won" },
-        { title: "Conversion Rate", value: `${stats.conversionRate}%`, icon: TrendingUp, variant: "emerald" as const, description: `${stats.closedLeads} of ${stats.totalLeads} leads` },
+        { title: "Total Leads", value: stats.totalLeads, icon: Users, description: stats.periodLabel, trend: stats.trends.totalLeads, sparklineField: "total" as const },
+        { title: "Open Leads", value: stats.openLeads, icon: UserPlus, description: "Needs attention", trend: stats.trends.openLeads, sparklineField: "open" as const },
+        { title: "Contacted", value: stats.contactedLeads, icon: PhoneCall, description: "In conversation", trend: stats.trends.contactedLeads, sparklineField: "contacted" as const },
+        { title: "Pending", value: stats.pendingLeads, icon: Clock, description: "Awaiting decision", trend: stats.trends.pendingLeads, sparklineField: "pending" as const },
+        { title: "Closed", value: stats.closedLeads, icon: CheckCircle2, description: "Won", trend: stats.trends.closedLeads, sparklineField: "closed" as const },
+        { title: "Conversion Rate", value: `${stats.conversionRate}%`, icon: TrendingUp, description: `${stats.closedLeads} of ${stats.totalLeads} leads`, trend: stats.trends.conversionRate, sparklineField: "closed" as const, conversionRate: stats.conversionRate },
       ]
     : []
 
@@ -67,7 +83,7 @@ export default function DashboardPage() {
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6">
         {stats
           ? statCards.map((card, i) => (
-              <StatCard key={card.title} {...card} index={i} />
+              <StatCard key={card.title} {...card} index={i} monthlyBreakdown={stats.monthlyBreakdown} />
             ))
           : Array.from({ length: 6 }).map((_, i) => <StatCardSkeleton key={i} />)
         }
diff --git a/src/app/(dashboard)/layout.tsx b/src/app/(dashboard)/layout.tsx
index 2a73b5a..94b1d8d 100644
--- a/src/app/(dashboard)/layout.tsx
+++ b/src/app/(dashboard)/layout.tsx
@@ -2,6 +2,7 @@
 
 import { AppShell } from "@/components/layout/app-shell"
 import { UserProvider, useUser } from "@/providers/user-provider"
+import { NotificationProvider } from "@/providers/notification-provider"
 import { Loader2 } from "lucide-react"
 
 function DashboardContent({ children }: { children: React.ReactNode }) {
@@ -27,7 +28,9 @@ export default function DashboardLayout({
 }) {
   return (
     <UserProvider>
-      <DashboardContent>{children}</DashboardContent>
+      <NotificationProvider>
+        <DashboardContent>{children}</DashboardContent>
+      </NotificationProvider>
     </UserProvider>
   )
 }
diff --git a/src/app/(dashboard)/leads/[id]/page.tsx b/src/app/(dashboard)/leads/[id]/page.tsx
index 9136b4c..6cbd4b7 100644
--- a/src/app/(dashboard)/leads/[id]/page.tsx
+++ b/src/app/(dashboard)/leads/[id]/page.tsx
@@ -1,5 +1,6 @@
 "use client"
 
+import { useState, useEffect } from "react"
 import Link from "next/link"
 import { motion } from "framer-motion"
 import { use } from "react"
@@ -16,14 +17,39 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select"
-import { getLeadById } from "@/data/leads"
-import { getNotesByLeadId } from "@/data/notes"
 import { ArrowLeft, Edit, ExternalLink } from "lucide-react"
+import { Lead, Note } from "@/types"
 
 export default function LeadDetailsPage({ params }: { params: Promise<{ id: string }> }) {
   const { id } = use(params)
-  const lead = getLeadById(id)
-  const leadNotes = lead ? getNotesByLeadId(lead.id) : []
+  const [lead, setLead] = useState<Lead | null>(null)
+  const [leadNotes, setLeadNotes] = useState<Note[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    async function fetchData() {
+      try {
+        const [leadRes, notesRes] = await Promise.all([
+          fetch(`/api/leads/${id}`),
+          fetch(`/api/leads/${id}/notes`),
+        ])
+        if (leadRes.ok) setLead(await leadRes.json())
+        if (notesRes.ok) setLeadNotes(await notesRes.json())
+      } catch {
+        // ignore
+      }
+      setLoading(false)
+    }
+    fetchData()
+  }, [id])
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-[60vh]">
+        <p className="text-muted-foreground">Loading...</p>
+      </div>
+    )
+  }
 
   if (!lead) {
     return (
@@ -61,71 +87,45 @@ export default function LeadDetailsPage({ params }: { params: Promise<{ id: stri
         }
         description={lead.contactName}
       >
-        <div className="flex items-center gap-3">
-          <Select defaultValue={lead.status}>
-            <SelectTrigger className="h-9 w-[140px]">
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="open">Open</SelectItem>
-              <SelectItem value="contacted">Contacted</SelectItem>
-              <SelectItem value="pending">Pending</SelectItem>
-              <SelectItem value="closed">Closed</SelectItem>
-              <SelectItem value="ignored">Ignored</SelectItem>
-            </SelectContent>
-          </Select>
-          <Button className="gap-2">
-            <Edit className="h-4 w-4" />
-            Edit
-          </Button>
-        </div>
+        <Select
+          value={lead.status}
+          onValueChange={(v) => {
+            setLead((prev) => prev ? { ...prev, status: v as Lead["status"] } : prev)
+          }}
+        >
+          <SelectTrigger className="h-9 w-[140px]">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="open">Open</SelectItem>
+            <SelectItem value="contacted">Contacted</SelectItem>
+            <SelectItem value="pending">Pending</SelectItem>
+            <SelectItem value="closed">Closed</SelectItem>
+            <SelectItem value="ignored">Ignored</SelectItem>
+          </SelectContent>
+        </Select>
+        <Button variant="outline" size="sm">
+          <Edit className="mr-2 h-4 w-4" />
+          Edit
+        </Button>
       </PageHeader>
 
       <div className="grid gap-6 lg:grid-cols-3">
-        <div className="space-y-6 lg:col-span-2">
-          <LeadDetailsCard lead={lead} />
-          <div className="space-y-6">
-            <NoteForm leadId={lead.id} />
-            <NoteTimeline notes={leadNotes} />
-          </div>
-        </div>
+        <div className="lg:col-span-2 space-y-6">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3 }}
+          >
+            <LeadDetailsCard lead={lead} />
+          </motion.div>
 
-        <div className="space-y-6">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.3, delay: 0.1 }}
           >
-            <div className="rounded-lg border bg-card">
-              <div className="border-b px-6 py-4">
-                <h3 className="font-semibold">Activity</h3>
-              </div>
-              <div className="divide-y">
-                {[
-                  { action: "Lead created", date: lead.createdAt, user: lead.assignedUser?.name || "System" },
-                  ...leadNotes.slice(0, 3).map((n) => ({
-                    action: "Note added",
-                    date: n.createdAt,
-                    user: n.authorName,
-                  })),
-                ].map((activity, i) => (
-                  <div key={i} className="px-6 py-3">
-                    <div className="flex items-center gap-2">
-                      <div className="h-2 w-2 rounded-full bg-primary/60 shrink-0" />
-                      <p className="text-sm">{activity.action}</p>
-                    </div>
-                    <p className="mt-0.5 text-xs text-muted-foreground pl-4">
-                      by {activity.user} &middot; {new Date(activity.date).toLocaleDateString(undefined, {
-                        month: "short",
-                        day: "numeric",
-                        hour: "2-digit",
-                        minute: "2-digit",
-                      })}
-                    </p>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <NoteForm leadId={lead.id} />
           </motion.div>
 
           <motion.div
@@ -133,20 +133,54 @@ export default function LeadDetailsPage({ params }: { params: Promise<{ id: stri
             animate={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.3, delay: 0.2 }}
           >
-            <div className="rounded-lg border bg-card">
-              <div className="border-b px-6 py-4">
-                <h3 className="font-semibold">Quick Actions</h3>
-              </div>
-              <div className="p-4 space-y-2">
-                <Button variant="outline" className="w-full justify-start" size="sm">
-                  <ExternalLink className="mr-2 h-4 w-4" />
-                  Send Email
-                </Button>
-                <Button variant="outline" className="w-full justify-start" size="sm">
-                  <ExternalLink className="mr-2 h-4 w-4" />
-                  Call Lead
-                </Button>
+            <NoteTimeline notes={leadNotes} />
+          </motion.div>
+        </div>
+
+        <div className="space-y-6">
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.3, delay: 0.15 }}
+            className="rounded-lg border bg-card p-6"
+          >
+            <h3 className="font-semibold mb-4">Activity</h3>
+            <div className="space-y-4">
+              <div className="flex items-center gap-3 text-sm">
+                <div className="h-2 w-2 rounded-full bg-blue-500" />
+                <div>
+                  <p className="font-medium">Lead Created</p>
+                  <p className="text-xs text-muted-foreground">{new Date(lead.createdAt).toLocaleDateString()}</p>
+                </div>
               </div>
+              {leadNotes.slice(0, 3).map((note) => (
+                <div key={note.id} className="flex items-start gap-3 text-sm">
+                  <div className="h-2 w-2 rounded-full bg-muted-foreground mt-1.5" />
+                  <div>
+                    <p className="font-medium">{note.authorName}</p>
+                    <p className="text-xs text-muted-foreground">{note.note.slice(0, 60)}...</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, x: 20 }}
+            animate={{ opacity: 1, x: 0 }}
+            transition={{ duration: 0.3, delay: 0.25 }}
+            className="rounded-lg border bg-card p-6"
+          >
+            <h3 className="font-semibold mb-4">Quick Actions</h3>
+            <div className="space-y-2">
+              <Button variant="outline" className="w-full justify-start" size="sm">
+                <ExternalLink className="mr-2 h-4 w-4" />
+                Send Email
+              </Button>
+              <Button variant="outline" className="w-full justify-start" size="sm">
+                <ExternalLink className="mr-2 h-4 w-4" />
+                Call Lead
+              </Button>
             </div>
           </motion.div>
         </div>
diff --git a/src/app/(dashboard)/leads/new/page.tsx b/src/app/(dashboard)/leads/new/page.tsx
index 4db1ae7..6b926c8 100644
--- a/src/app/(dashboard)/leads/new/page.tsx
+++ b/src/app/(dashboard)/leads/new/page.tsx
@@ -29,6 +29,7 @@ import { ArrowLeft } from "lucide-react"
 import { Lead, LeadStatus } from "@/types"
 import { leads } from "@/data/leads"
 import { users } from "@/data/users"
+import { useNotifications } from "@/providers/notification-provider"
 import { LEAD_SOURCES, LEAD_STATUSES } from "@/lib/constants"
 
 const leadFormSchema = z.object({
@@ -46,6 +47,7 @@ type LeadFormValues = z.infer<typeof leadFormSchema>
 
 export default function CreateLeadPage() {
   const router = useRouter()
+  const { addNotification } = useNotifications()
   const [saving, setSaving] = useState(false)
 
   const form = useForm<LeadFormValues>({
@@ -84,6 +86,12 @@ export default function CreateLeadPage() {
     }
 
     leads.unshift(newLead)
+    addNotification(
+      "lead_created",
+      "New Lead Created",
+      `${newLead.companyName} — ${newLead.contactName}`,
+      `/leads/${newLead.id}`
+    )
     router.push("/leads")
   }
 
diff --git a/src/app/(dashboard)/leads/page.tsx b/src/app/(dashboard)/leads/page.tsx
index cb13e1c..a0b7cd9 100644
--- a/src/app/(dashboard)/leads/page.tsx
+++ b/src/app/(dashboard)/leads/page.tsx
@@ -1,42 +1,34 @@
 "use client"
 
-import { useState, useMemo } from "react"
+import { useState, useEffect } from "react"
 import { useRouter } from "next/navigation"
 import { PageHeader } from "@/components/shared/page-header"
 import { LeadsTable } from "@/components/leads/leads-table"
 import { LeadsTableToolbar } from "@/components/leads/leads-table-toolbar"
-import { leads } from "@/data/leads"
-import { filterLeadsByPeriod } from "@/lib/date-utils"
+import { Lead } from "@/types"
 
 export default function LeadsPage() {
   const router = useRouter()
   const [search, setSearch] = useState("")
   const [statusFilter, setStatusFilter] = useState("all")
   const [periodFilter, setPeriodFilter] = useState("all")
+  const [leadsData, setLeadsData] = useState<Lead[]>([])
+  const [loading, setLoading] = useState(true)
 
-  const filteredLeads = useMemo(() => {
-    let result = leads
+  useEffect(() => {
+    const params = new URLSearchParams()
+    if (search) params.set("search", search)
+    if (statusFilter !== "all") params.set("status", statusFilter)
+    if (periodFilter !== "all") params.set("period", periodFilter)
 
-    if (periodFilter && periodFilter !== "all") {
-      result = filterLeadsByPeriod(result, periodFilter)
-    }
-
-    if (search) {
-      const q = search.toLowerCase()
-      result = result.filter(
-        (l) =>
-          l.companyName.toLowerCase().includes(q) ||
-          l.contactName.toLowerCase().includes(q) ||
-          l.email.toLowerCase().includes(q) ||
-          l.phone.includes(q)
-      )
-    }
-
-    if (statusFilter && statusFilter !== "all") {
-      result = result.filter((l) => l.status === statusFilter)
-    }
-
-    return result
+    setLoading(true)
+    fetch(`/api/leads?${params.toString()}`)
+      .then((r) => r.json())
+      .then((data) => {
+        setLeadsData(data)
+        setLoading(false)
+      })
+      .catch(() => setLoading(false))
   }, [search, statusFilter, periodFilter])
 
   return (
@@ -58,7 +50,7 @@ export default function LeadsPage() {
             onCreateClick={() => router.push("/leads/new")}
           />
         </div>
-        <LeadsTable data={filteredLeads} />
+        <LeadsTable data={leadsData} loading={loading} />
       </div>
     </div>
   )
diff --git a/src/app/(dashboard)/profile/page.tsx b/src/app/(dashboard)/profile/page.tsx
index d630642..ad9c1f9 100644
--- a/src/app/(dashboard)/profile/page.tsx
+++ b/src/app/(dashboard)/profile/page.tsx
@@ -14,7 +14,7 @@ export default function ProfilePage() {
   if (!user) return null
   const fileInputRef = useRef<HTMLInputElement>(null)
 
-  const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleAvatarChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
     const validTypes = ["image/png", "image/jpeg"]
@@ -22,9 +22,27 @@ export default function ProfilePage() {
       toast.error("Only PNG and JPEG files are allowed")
       return
     }
-    const url = URL.createObjectURL(file)
-    updateAvatar(url)
-    toast.success("Avatar updated")
+    const reader = new FileReader()
+    reader.onload = async () => {
+      const dataUrl = reader.result as string
+      try {
+        const res = await fetch("/api/users/avatar", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ avatar: dataUrl }),
+        })
+        if (res.ok) {
+          const data = await res.json()
+          updateAvatar(data.avatar)
+          toast.success("Avatar updated")
+        } else {
+          toast.error("Failed to save avatar")
+        }
+      } catch {
+        toast.error("Failed to save avatar")
+      }
+    }
+    reader.readAsDataURL(file)
   }
 
   return (
diff --git a/src/app/(dashboard)/users/page.tsx b/src/app/(dashboard)/users/page.tsx
index be937a7..d56659f 100644
--- a/src/app/(dashboard)/users/page.tsx
+++ b/src/app/(dashboard)/users/page.tsx
@@ -6,23 +6,26 @@ import { UsersTable } from "@/components/users/users-table"
 import { UserFormDialog } from "@/components/users/user-form-dialog"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
-import { Plus, Search, Users as UsersIcon } from "lucide-react"
-import { User } from "@/types"
-import { toast } from "sonner"
+import { useUser } from "@/providers/user-provider"
+import { Plus, Users as UsersIcon, Search } from "lucide-react"
+import type { User } from "@/types"
 
 export default function UsersPage() {
-  const [createOpen, setCreateOpen] = useState(false)
+  const { user } = useUser()
   const [users, setUsers] = useState<User[]>([])
   const [loading, setLoading] = useState(true)
-  const [searchQuery, setSearchQuery] = useState("")
+  const [createOpen, setCreateOpen] = useState(false)
+  const [search, setSearch] = useState("")
 
   const fetchUsers = useCallback(async () => {
     try {
       const res = await fetch("/api/users")
-      const data = await res.json()
-      if (data.users) setUsers(data.users)
+      if (res.ok) {
+        const data = await res.json()
+        setUsers(data.users || [])
+      }
     } catch {
-      toast.error("Failed to load users")
+      // ignore
     } finally {
       setLoading(false)
     }
@@ -32,23 +35,28 @@ export default function UsersPage() {
     fetchUsers()
   }, [fetchUsers])
 
-  const filteredUsers = searchQuery.trim()
-    ? users.filter((u) =>
-        u.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
-        u.email.toLowerCase().includes(searchQuery.toLowerCase())
-      )
-    : users
+  const activeUsers = users.filter((u) => u.active !== false)
+  const admins = users.filter((u) => u.role === "admin")
 
   const stats = [
-    { label: "Total Users", value: users.length, color: "bg-blue-500/10", textColor: "text-blue-600 dark:text-blue-400" },
-    { label: "Active", value: users.filter((u) => u.active).length, color: "bg-emerald-500/10", textColor: "text-emerald-600 dark:text-emerald-400" },
-    { label: "Admins", value: users.filter((u) => u.role === "admin" || u.role === "super_admin").length, color: "bg-purple-500/10", textColor: "text-purple-600 dark:text-purple-400" },
-    { label: "Sales", value: users.filter((u) => u.role === "sales_user").length, color: "bg-amber-500/10", textColor: "text-amber-600 dark:text-amber-400" },
+    { label: "Total Users", value: users.length, color: "bg-blue-500/10", textColor: "text-blue-500" },
+    { label: "Active", value: activeUsers.length, color: "bg-green-500/10", textColor: "text-green-500" },
+    { label: "Admins", value: admins.length, color: "bg-purple-500/10", textColor: "text-purple-500" },
+    { label: "Sales", value: users.filter((u) => u.role === "sales").length, color: "bg-orange-500/10", textColor: "text-orange-500" },
   ]
 
+  const filtered = users.filter((u) => {
+    if (!search) return true
+    const q = search.toLowerCase()
+    return u.name?.toLowerCase().includes(q) || u.email?.toLowerCase().includes(q)
+  })
+
   return (
     <div className="space-y-4">
-      <PageHeader title="Users" description="Manage team members and their roles">
+      <PageHeader
+        title="Users"
+        description="Manage team members and their roles"
+      >
         <Button className="gap-2" onClick={() => setCreateOpen(true)}>
           <Plus className="h-4 w-4" />
           Add User
@@ -59,7 +67,9 @@ export default function UsersPage() {
         {stats.map((s) => (
           <div key={s.label} className="rounded-lg border bg-card p-4">
             <div className="flex items-center gap-3">
-              <div className={`flex h-10 w-10 items-center justify-center rounded-lg ${s.color}`}>
+              <div
+                className={`flex h-10 w-10 items-center justify-center rounded-lg ${s.color}`}
+              >
                 <UsersIcon className={`h-5 w-5 ${s.textColor}`} />
               </div>
               <div>
@@ -71,17 +81,25 @@ export default function UsersPage() {
         ))}
       </div>
 
-      <div className="rounded-lg border bg-card">
-        <div className="flex items-center gap-2 p-4 pb-0">
-          <div className="relative flex-1 max-w-sm">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
-            <Input value={searchQuery} onChange={(e) => setSearchQuery(e.target.value)} placeholder="Search users by name or email..." className="h-9 pl-9" />
-          </div>
-        </div>
-        <UsersTable data={filteredUsers} loading={loading} onUserDeleted={fetchUsers} />
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          placeholder="Search by name or email..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="h-9 pl-9"
+        />
       </div>
 
-      <UserFormDialog open={createOpen} onOpenChange={setCreateOpen} onUserCreated={fetchUsers} />
+      <div className="rounded-lg border bg-card">
+        <UsersTable data={filtered} loading={loading} onUserDeleted={fetchUsers} />
+      </div>
+
+      <UserFormDialog
+        open={createOpen}
+        onOpenChange={setCreateOpen}
+        onUserCreated={fetchUsers}
+      />
     </div>
   )
 }
diff --git a/src/app/api/conversations/[id]/messages/route.ts b/src/app/api/conversations/[id]/messages/route.ts
new file mode 100644
index 0000000..f395322
--- /dev/null
+++ b/src/app/api/conversations/[id]/messages/route.ts
@@ -0,0 +1,115 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getSessionUser } from "@/lib/auth"
+import { query } from "@/lib/db"
+
+export async function GET(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    const { id } = await params
+
+    const [msgResult, otherReadResult] = await Promise.all([
+      query(
+        `SELECT m.id, m.sender_id, m.content, m.created_at, m.updated_at, m.deleted_at,
+                u.first_name || ' ' || u.last_name AS sender_name,
+                u.email AS sender_email,
+                u.avatar_url AS sender_avatar_url
+         FROM messages m
+         JOIN users u ON u.id = m.sender_id
+         WHERE m.conversation_id = $1 AND m.deleted_at IS NULL
+         ORDER BY m.created_at ASC`,
+        [id],
+      ),
+      query(
+        `SELECT last_read_at FROM conversation_participants
+         WHERE conversation_id = $1 AND user_id != $2`,
+        [id, user.id],
+      ),
+    ])
+
+    const otherLastReadAt = otherReadResult.rows[0]?.last_read_at
+      ? new Date(otherReadResult.rows[0].last_read_at).getTime()
+      : 0
+
+    const messages = msgResult.rows.map((row: any) => ({
+      id: row.id,
+      conversationId: id,
+      senderId: row.sender_id,
+      senderName: row.sender_name,
+      senderAvatar: row.sender_avatar_url || `https://ui-avatars.com/api/?name=${encodeURIComponent(row.sender_name)}&background=1d4ed8&color=fff&size=128`,
+      content: row.content,
+      timestamp: formatTime(new Date(row.created_at)),
+      createdAt: row.created_at,
+      read: row.sender_id === user.id
+        ? new Date(row.created_at).getTime() <= otherLastReadAt
+        : true,
+    }))
+
+    return NextResponse.json({ messages })
+  } catch (error) {
+    console.error("Messages error:", error)
+    return NextResponse.json({ error: "Failed to load messages" }, { status: 500 })
+  }
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    const { id } = await params
+    const { content } = await request.json()
+
+    if (!content?.trim()) {
+      return NextResponse.json({ error: "Message content is required" }, { status: 400 })
+    }
+
+    const result = await query(
+      `INSERT INTO messages (conversation_id, sender_id, content)
+       VALUES ($1, $2, $3)
+       RETURNING id, created_at`,
+      [id, user.id, content.trim()],
+    )
+
+    await query(
+      `UPDATE conversations SET updated_at = NOW() WHERE id = $1`,
+      [id],
+    )
+
+    const msg = result.rows[0]
+
+    return NextResponse.json({
+      message: {
+        id: msg.id,
+        conversationId: id,
+        senderId: user.id,
+        senderName: `${user.firstName} ${user.lastName}`,
+        senderAvatar: user.avatar,
+        content: content.trim(),
+        timestamp: formatTime(new Date(msg.created_at)),
+        createdAt: msg.created_at,
+        read: false,
+      },
+    })
+  } catch (error) {
+    console.error("Send message error:", error)
+    return NextResponse.json({ error: "Failed to send message" }, { status: 500 })
+  }
+}
+
+function formatTime(date: Date): string {
+  const now = new Date()
+  const isToday = date.toDateString() === now.toDateString()
+  if (isToday) {
+    return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+  }
+  return date.toLocaleDateString([], { month: "short", day: "numeric" }) + " " +
+    date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
+}
diff --git a/src/app/api/conversations/[id]/read/route.ts b/src/app/api/conversations/[id]/read/route.ts
new file mode 100644
index 0000000..758fd90
--- /dev/null
+++ b/src/app/api/conversations/[id]/read/route.ts
@@ -0,0 +1,27 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getSessionUser } from "@/lib/auth"
+import { query } from "@/lib/db"
+
+export async function POST(
+  _request: NextRequest,
+  { params }: { params: Promise<{ id: string }> },
+) {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    const { id } = await params
+
+    await query(
+      `UPDATE conversation_participants
+       SET last_read_at = NOW()
+       WHERE conversation_id = $1 AND user_id = $2`,
+      [id, user.id],
+    )
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("Mark read error:", error)
+    return NextResponse.json({ error: "Failed to mark as read" }, { status: 500 })
+  }
+}
diff --git a/src/app/api/conversations/route.ts b/src/app/api/conversations/route.ts
new file mode 100644
index 0000000..6c6a35b
--- /dev/null
+++ b/src/app/api/conversations/route.ts
@@ -0,0 +1,129 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getSessionUser } from "@/lib/auth"
+import { query } from "@/lib/db"
+
+export async function GET() {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    const result = await query(
+      `SELECT
+         c.id,
+         c.updated_at,
+         cp_me.last_read_at,
+         u.id AS other_user_id,
+         u.first_name || ' ' || u.last_name AS other_user_name,
+         u.email AS other_user_email,
+         u.avatar_url AS other_user_avatar_url,
+         (SELECT content FROM messages WHERE conversation_id = c.id ORDER BY created_at DESC LIMIT 1) AS last_message,
+         (SELECT created_at FROM messages WHERE conversation_id = c.id ORDER BY created_at DESC LIMIT 1) AS last_message_time,
+         (SELECT count(*) FROM messages WHERE conversation_id = c.id AND sender_id != $1 AND created_at > COALESCE(cp_me.last_read_at, '1970-01-01')) AS unread
+       FROM conversations c
+       JOIN conversation_participants cp_me ON cp_me.conversation_id = c.id AND cp_me.user_id = $1
+       JOIN conversation_participants cp ON cp.conversation_id = c.id
+       JOIN users u ON u.id = cp.user_id AND u.id != $1
+       WHERE c.id IN (
+         SELECT conversation_id FROM conversation_participants WHERE user_id = $1
+       )
+       ORDER BY c.updated_at DESC`,
+      [user.id],
+    )
+
+    const conversations = result.rows.map((row: any) => ({
+      id: row.id,
+      updatedAt: row.updated_at,
+      otherUser: {
+        id: row.other_user_id,
+        name: row.other_user_name,
+        email: row.other_user_email,
+        avatar: row.other_user_avatar_url || `https://ui-avatars.com/api/?name=${encodeURIComponent(row.other_user_name)}&background=1d4ed8&color=fff&size=128`,
+      },
+      lastMessage: row.last_message || "",
+      lastMessageTime: row.last_message_time ? timeAgo(new Date(row.last_message_time)) : "",
+      unread: parseInt(row.unread) || 0,
+    }))
+
+    return NextResponse.json({ conversations })
+  } catch (error) {
+    console.error("Conversations error:", error)
+    return NextResponse.json({ error: "Failed to load conversations" }, { status: 500 })
+  }
+}
+
+export async function POST(request: NextRequest) {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    const { userId } = await request.json()
+    if (!userId) {
+      return NextResponse.json({ error: "userId is required" }, { status: 400 })
+    }
+
+    if (userId === user.id) {
+      return NextResponse.json({ error: "Cannot start a conversation with yourself" }, { status: 400 })
+    }
+
+    const existing = await query(
+      `SELECT c.id FROM conversations c
+       JOIN conversation_participants cp1 ON cp1.conversation_id = c.id AND cp1.user_id = $1
+       JOIN conversation_participants cp2 ON cp2.conversation_id = c.id AND cp2.user_id = $2
+       LIMIT 1`,
+      [user.id, userId],
+    )
+
+    if (existing.rows.length > 0) {
+      return NextResponse.json({ conversationId: existing.rows[0].id })
+    }
+
+    const convResult = await query(
+      `INSERT INTO conversations DEFAULT VALUES RETURNING id`,
+    )
+    const conversationId = convResult.rows[0].id
+
+    await query(
+      `INSERT INTO conversation_participants (conversation_id, user_id, last_read_at) VALUES ($1, $2, NOW()), ($1, $3, NOW())`,
+      [conversationId, user.id, userId],
+    )
+
+    const otherUser = await query(
+      `SELECT id, first_name || ' ' || last_name AS name, email, avatar_url
+       FROM users WHERE id = $1`,
+      [userId],
+    )
+
+    const other = otherUser.rows[0]
+
+    return NextResponse.json({
+      conversation: {
+        id: conversationId,
+        updatedAt: new Date().toISOString(),
+        otherUser: {
+          id: other.id,
+          name: other.name,
+          email: other.email,
+          avatar: other.avatar_url || `https://ui-avatars.com/api/?name=${encodeURIComponent(other.name)}&background=1d4ed8&color=fff&size=128`,
+        },
+        lastMessage: "",
+        lastMessageTime: "",
+        unread: 0,
+      },
+    })
+  } catch (error) {
+    console.error("Create conversation error:", error)
+    return NextResponse.json({ error: "Failed to create conversation" }, { status: 500 })
+  }
+}
+
+function timeAgo(date: Date): string {
+  const seconds = Math.floor((Date.now() - date.getTime()) / 1000)
+  if (seconds < 60) return "now"
+  const minutes = Math.floor(seconds / 60)
+  if (minutes < 60) return `${minutes}m ago`
+  const hours = Math.floor(minutes / 60)
+  if (hours < 24) return `${hours}h ago`
+  const days = Math.floor(hours / 24)
+  if (days < 7) return `${days}d ago`
+  return date.toLocaleDateString()
+}
diff --git a/src/app/api/dashboard/route.ts b/src/app/api/dashboard/route.ts
new file mode 100644
index 0000000..d1dfd78
--- /dev/null
+++ b/src/app/api/dashboard/route.ts
@@ -0,0 +1,207 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getSessionUser } from "@/lib/auth"
+import { query } from "@/lib/db"
+
+function getPeriodDateRange(period: string): { start: Date; end: Date } {
+  const end = new Date()
+  let start: Date
+  switch (period) {
+    case "7days":
+      start = new Date(end); start.setDate(start.getDate() - 7); break
+    case "30days":
+      start = new Date(end); start.setDate(start.getDate() - 30); break
+    case "12months":
+      start = new Date(end); start.setFullYear(start.getFullYear() - 12); break
+    case "6months":
+    default:
+      start = new Date(end); start.setMonth(start.getMonth() - 6); break
+  }
+  return { start, end }
+}
+
+function getPreviousPeriodRange(period: string, currentStart: Date): { start: Date; end: Date } {
+  const end = new Date(currentStart)
+  const diff = end.getTime() - currentStart.getTime()
+  const start = new Date(end.getTime() - diff)
+  return { start, end }
+}
+
+const periodLabels: Record<string, string> = {
+  "7days": "Last 7 days",
+  "30days": "Last 30 days",
+  "6months": "Last 6 months",
+  "12months": "Last 12 months",
+}
+
+function stageToStatus(name: string): string {
+  switch (name) {
+    case "New": return "open"
+    case "Contacted": return "contacted"
+    case "Qualified":
+    case "Interested":
+    case "Demo Scheduled":
+    case "Negotiation": return "pending"
+    case "Closed Won": return "closed"
+    case "Closed Lost": return "ignored"
+    default: return "open"
+  }
+}
+
+async function fetchLeadsInRange(start: Date, end: Date) {
+  const result = await query(
+    `SELECT l.id, l.created_at, l.company_name, l.contact_name, l.email, l.phone,
+            l.notes, l.assigned_to, l.score,
+            ls.name AS stage_name,
+            u.id AS user_id, u.first_name, u.last_name, u.email AS user_email, u.avatar_url
+     FROM leads l
+     JOIN lead_stages ls ON ls.id = l.stage_id
+     LEFT JOIN users u ON u.id = l.assigned_to
+     WHERE l.deleted_at IS NULL
+       AND l.created_at >= $1 AND l.created_at <= $2
+     ORDER BY l.created_at DESC`,
+    [start.toISOString(), end.toISOString()]
+  )
+  return result.rows.map((r: any) => ({
+    ...r,
+    status: stageToStatus(r.stage_name),
+  }))
+}
+
+function countStatuses(leads: any[]) {
+  const counts = { open: 0, contacted: 0, pending: 0, closed: 0, ignored: 0 }
+  leads.forEach((l: any) => {
+    const s = l.status as keyof typeof counts
+    if (s in counts) counts[s]++
+  })
+  return counts
+}
+
+function buildMonthlyBreakdown(leads: any[], period: string) {
+  const { start, end } = getPeriodDateRange(period)
+  const result: { label: string; total: number; open: number; contacted: number; pending: number; closed: number; ignored: number }[] = []
+  const current = new Date(start)
+  const isMonthly = period === "6months" || period === "12months"
+
+  while (current <= end) {
+    const label = isMonthly
+      ? current.toLocaleDateString("en-US", { month: "short", year: "2-digit" })
+      : current.toLocaleDateString("en-US", { month: "short", day: "numeric" })
+
+    const ps = new Date(current)
+    const pe = isMonthly
+      ? new Date(current.getFullYear(), current.getMonth() + 1, 0, 23, 59, 59)
+      : (() => { const d = new Date(current); d.setHours(23, 59, 59, 999); return d })()
+
+    const inPeriod = leads.filter((l: any) => {
+      const d = new Date(l.created_at)
+      return d >= ps && d <= pe
+    })
+
+    const counts = countStatuses(inPeriod)
+    result.push({ label, total: inPeriod.length, ...counts })
+
+    if (isMonthly) current.setMonth(current.getMonth() + 1)
+    else current.setDate(current.getDate() + 1)
+  }
+  return result
+}
+
+function computeTrend(current: number, previous: number): { pct: number; up: boolean } {
+  if (previous === 0) return { pct: current > 0 ? 100 : 0, up: current > 0 }
+  const pct = Math.round(((current - previous) / previous) * 100)
+  return { pct: Math.abs(pct), up: pct >= 0 }
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    const { searchParams } = new URL(request.url)
+    const period = searchParams.get("period") || "6months"
+    const yearParam = searchParams.get("year")
+    let start: Date, end: Date, prevRange: { start: Date; end: Date }
+    if (yearParam) {
+      const y = parseInt(yearParam)
+      start = new Date(y, 0, 1)
+      end = new Date(y, 11, 31, 23, 59, 59)
+      prevRange = { start: new Date(y - 1, 0, 1), end: new Date(y - 1, 11, 31, 23, 59, 59) }
+    } else {
+      const r = getPeriodDateRange(period)
+      start = r.start; end = r.end
+      prevRange = getPreviousPeriodRange(period, start)
+    }
+
+    const [currentLeads, prevLeads] = await Promise.all([
+      fetchLeadsInRange(start, end),
+      fetchLeadsInRange(prevRange.start, prevRange.end),
+    ])
+
+    const currentCounts = countStatuses(currentLeads)
+    const prevCounts = countStatuses(prevLeads)
+
+    const totalLeads = currentLeads.length
+    const closedLeads = currentCounts.closed
+    const conversionRate = totalLeads > 0 ? Math.round((closedLeads / totalLeads) * 100) : 0
+
+    const mappedLeads = currentLeads.map((r: any) => ({
+      id: r.id,
+      companyName: r.company_name || "",
+      contactName: r.contact_name,
+      email: r.email || "",
+      phone: r.phone || "",
+      source: "",
+      description: r.notes || "",
+      status: r.status,
+      assignedUserId: r.assigned_to,
+      assignedUser: r.assigned_to ? {
+        id: r.user_id,
+        name: `${r.first_name} ${r.last_name}`,
+        email: r.user_email,
+        avatar: r.avatar_url || `https://ui-avatars.com/api/?name=${encodeURIComponent(`${r.first_name} ${r.last_name}`)}&background=1d4ed8&color=fff&size=128`,
+      } : null,
+      createdAt: r.created_at,
+      updatedAt: r.updated_at,
+    }))
+
+    const monthlyBreakdown = buildMonthlyBreakdown(currentLeads, period)
+
+    const trends = {
+      totalLeads: computeTrend(currentCounts.open + currentCounts.contacted + currentCounts.pending + currentCounts.closed + currentCounts.ignored,
+        prevCounts.open + prevCounts.contacted + prevCounts.pending + prevCounts.closed + prevCounts.ignored),
+      openLeads: computeTrend(currentCounts.open, prevCounts.open),
+      contactedLeads: computeTrend(currentCounts.contacted, prevCounts.contacted),
+      pendingLeads: computeTrend(currentCounts.pending, prevCounts.pending),
+      closedLeads: computeTrend(currentCounts.closed, prevCounts.closed),
+      conversionRate: computeTrend(conversionRate,
+        prevLeads.length > 0 ? Math.round((prevCounts.closed / prevLeads.length) * 100) : 0),
+    }
+
+    const stats = {
+      totalLeads,
+      openLeads: currentCounts.open,
+      contactedLeads: currentCounts.contacted,
+      pendingLeads: currentCounts.pending,
+      closedLeads,
+      ignoredLeads: currentCounts.ignored,
+      conversionRate,
+      monthlyBreakdown,
+      leadsPerMonth: monthlyBreakdown.map((m: any) => ({ label: m.label, leads: m.total, closed: m.closed })),
+      trends,
+      recentLeads: mappedLeads.slice(0, 10),
+      statusDistribution: [
+        { name: "Open", value: currentCounts.open, color: "#3b82f6" },
+        { name: "Contacted", value: currentCounts.contacted, color: "#f59e0b" },
+        { name: "Pending", value: currentCounts.pending, color: "#8b5cf6" },
+        { name: "Closed", value: currentCounts.closed, color: "#10b981" },
+        { name: "Ignored", value: currentCounts.ignored, color: "#6B7280" },
+      ],
+      periodLabel: periodLabels[period] ?? "Selected period",
+    }
+
+    return NextResponse.json(stats)
+  } catch (error) {
+    console.error("Dashboard API error:", error)
+    return NextResponse.json({ error: "Failed to load dashboard stats" }, { status: 500 })
+  }
+}
diff --git a/src/app/api/leads/[id]/notes/route.ts b/src/app/api/leads/[id]/notes/route.ts
new file mode 100644
index 0000000..c7108d3
--- /dev/null
+++ b/src/app/api/leads/[id]/notes/route.ts
@@ -0,0 +1,62 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getSessionUser } from "@/lib/auth"
+import { query } from "@/lib/db"
+
+export async function POST(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    const { id } = await params
+    const { content } = await request.json()
+    if (!content?.trim()) {
+      return NextResponse.json({ error: "Content is required" }, { status: 400 })
+    }
+
+    await query(
+      `INSERT INTO customer_notes (customer_id, author_id, content)
+       VALUES ($1, $2, $3)`,
+      [id, user.id, content.trim()]
+    )
+
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error("Create note error:", error)
+    return NextResponse.json({ error: "Failed to create note" }, { status: 500 })
+  }
+}
+
+export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    const { id } = await params
+
+    const result = await query(
+      `SELECT cn.id, cn.created_at, cn.updated_at, cn.content,
+              u.id AS user_id, u.first_name, u.last_name, u.avatar_url
+       FROM customer_notes cn
+       JOIN users u ON u.id = cn.author_id
+       WHERE cn.customer_id = $1 AND cn.deleted_at IS NULL
+       ORDER BY cn.created_at DESC`,
+      [id]
+    )
+
+    const notes = result.rows.map((r: any) => ({
+      id: r.id,
+      leadId: id,
+      userId: r.user_id,
+      authorName: `${r.first_name} ${r.last_name}`,
+      authorAvatar: r.avatar_url || `https://ui-avatars.com/api/?name=${encodeURIComponent(`${r.first_name} ${r.last_name}`)}&background=1d4ed8&color=fff&size=128`,
+      note: r.content,
+      createdAt: r.created_at,
+      updatedAt: r.updated_at,
+    }))
+
+    return NextResponse.json(notes)
+  } catch (error) {
+    console.error("Lead notes API error:", error)
+    return NextResponse.json({ error: "Failed to load notes" }, { status: 500 })
+  }
+}
diff --git a/src/app/api/leads/[id]/route.ts b/src/app/api/leads/[id]/route.ts
new file mode 100644
index 0000000..71512e6
--- /dev/null
+++ b/src/app/api/leads/[id]/route.ts
@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getSessionUser } from "@/lib/auth"
+import { query } from "@/lib/db"
+
+function stageToStatus(name: string): string {
+  switch (name) {
+    case "New": return "open"
+    case "Contacted": return "contacted"
+    case "Qualified":
+    case "Interested":
+    case "Demo Scheduled":
+    case "Negotiation": return "pending"
+    case "Closed Won": return "closed"
+    case "Closed Lost": return "ignored"
+    default: return "open"
+  }
+}
+
+export async function GET(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    const { id } = await params
+
+    const result = await query(
+      `SELECT l.id, l.company_name, l.contact_name, l.email, l.phone, l.score,
+              l.assigned_to, l.created_at, l.updated_at, l.notes, l.source_id,
+              ls.name AS stage_name,
+              u.id AS user_id, u.first_name, u.last_name, u.email AS user_email, u.avatar_url
+       FROM leads l
+       JOIN lead_stages ls ON ls.id = l.stage_id
+       LEFT JOIN users u ON u.id = l.assigned_to
+       WHERE l.id = $1 AND l.deleted_at IS NULL`,
+      [id]
+    )
+
+    if (result.rows.length === 0) {
+      return NextResponse.json({ error: "Lead not found" }, { status: 404 })
+    }
+
+    const r = result.rows[0]
+    const lead = {
+      id: r.id,
+      companyName: r.company_name || "",
+      contactName: r.contact_name,
+      email: r.email || "",
+      phone: r.phone || "",
+      source: "",
+      description: r.notes || "",
+      status: stageToStatus(r.stage_name),
+      assignedUserId: r.assigned_to,
+      assignedUser: r.assigned_to ? {
+        id: r.user_id,
+        name: `${r.first_name} ${r.last_name}`,
+        email: r.user_email,
+        avatar: r.avatar_url || `https://ui-avatars.com/api/?name=${encodeURIComponent(`${r.first_name} ${r.last_name}`)}&background=1d4ed8&color=fff&size=128`,
+      } : null,
+      createdAt: r.created_at,
+      updatedAt: r.updated_at,
+    }
+
+    return NextResponse.json(lead)
+  } catch (error) {
+    console.error("Lead detail API error:", error)
+    return NextResponse.json({ error: "Failed to load lead" }, { status: 500 })
+  }
+}
diff --git a/src/app/api/leads/route.ts b/src/app/api/leads/route.ts
new file mode 100644
index 0000000..8b1105c
--- /dev/null
+++ b/src/app/api/leads/route.ts
@@ -0,0 +1,105 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getSessionUser } from "@/lib/auth"
+import { query } from "@/lib/db"
+
+function stageToStatus(name: string): string {
+  switch (name) {
+    case "New": return "open"
+    case "Contacted": return "contacted"
+    case "Qualified":
+    case "Interested":
+    case "Demo Scheduled":
+    case "Negotiation": return "pending"
+    case "Closed Won": return "closed"
+    case "Closed Lost": return "ignored"
+    default: return "open"
+  }
+}
+
+function getPeriodDateRange(period: string): { start: Date; end: Date } | null {
+  if (period === "all") return null
+  const end = new Date()
+  let start: Date
+  switch (period) {
+    case "7days": start = new Date(end); start.setDate(start.getDate() - 7); break
+    case "30days": start = new Date(end); start.setDate(start.getDate() - 30); break
+    case "12months": start = new Date(end); start.setFullYear(start.getFullYear() - 12); break
+    case "6months": default: start = new Date(end); start.setMonth(start.getMonth() - 6); break
+  }
+  return { start, end }
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    const { searchParams } = new URL(request.url)
+    const search = searchParams.get("search") || ""
+    const status = searchParams.get("status") || "all"
+    const period = searchParams.get("period") || "all"
+
+    let sql = `SELECT l.id, l.company_name, l.contact_name, l.email, l.phone, l.score,
+                      l.assigned_to, l.created_at, l.updated_at, l.notes, l.source_id,
+                      ls.name AS stage_name,
+                      u.id AS user_id, u.first_name, u.last_name, u.email AS user_email, u.avatar_url
+               FROM leads l
+               JOIN lead_stages ls ON ls.id = l.stage_id
+               LEFT JOIN users u ON u.id = l.assigned_to
+               WHERE l.deleted_at IS NULL`
+
+    const params: any[] = []
+    let paramIdx = 1
+
+    if (period !== "all") {
+      const range = getPeriodDateRange(period)
+      if (range) {
+        sql += ` AND l.created_at >= $${paramIdx} AND l.created_at <= $${paramIdx + 1}`
+        params.push(range.start.toISOString(), range.end.toISOString())
+        paramIdx += 2
+      }
+    }
+
+    if (search) {
+      sql += ` AND (l.contact_name ILIKE $${paramIdx} OR l.company_name ILIKE $${paramIdx} OR l.email ILIKE $${paramIdx} OR l.phone ILIKE $${paramIdx})`
+      params.push(`%${search}%`)
+      paramIdx++
+    }
+
+    sql += ` ORDER BY l.created_at DESC`
+
+    const result = await query(sql, params)
+
+    let leads = result.rows.map((r: any) => {
+      const s = stageToStatus(r.stage_name)
+      return {
+        id: r.id,
+        companyName: r.company_name || "",
+        contactName: r.contact_name,
+        email: r.email || "",
+        phone: r.phone || "",
+        source: "",
+        description: r.notes || "",
+        status: s,
+        assignedUserId: r.assigned_to,
+        assignedUser: r.assigned_to ? {
+          id: r.user_id,
+          name: `${r.first_name} ${r.last_name}`,
+          email: r.user_email,
+          avatar: r.avatar_url || `https://ui-avatars.com/api/?name=${encodeURIComponent(`${r.first_name} ${r.last_name}`)}&background=1d4ed8&color=fff&size=128`,
+        } : null,
+        createdAt: r.created_at,
+        updatedAt: r.updated_at,
+      }
+    })
+
+    if (status !== "all") {
+      leads = leads.filter((l: any) => l.status === status)
+    }
+
+    return NextResponse.json(leads)
+  } catch (error) {
+    console.error("Leads API error:", error)
+    return NextResponse.json({ error: "Failed to load leads" }, { status: 500 })
+  }
+}
diff --git a/src/app/api/system/monitor/route.ts b/src/app/api/system/monitor/route.ts
new file mode 100644
index 0000000..1569b92
--- /dev/null
+++ b/src/app/api/system/monitor/route.ts
@@ -0,0 +1,29 @@
+import { NextResponse } from "next/server"
+import os from "os"
+
+let prevCpu = process.cpuUsage()
+let prevTime = Date.now()
+
+export async function GET() {
+  const now = Date.now()
+  const elapsed = now - prevTime
+  const currentCpu = process.cpuUsage()
+
+  const user = currentCpu.user - prevCpu.user
+  const sys = currentCpu.system - prevCpu.system
+  const totalUs = user + sys
+
+  // CPU time (ms) / wall time (ms) * 100 = % of one core
+  const cpuPct = elapsed > 0 ? Math.round((totalUs / 1000) / elapsed * 100 * 10) / 10 : 0
+
+  prevCpu = currentCpu
+  prevTime = now
+
+  const mem = process.memoryUsage()
+
+  return NextResponse.json({
+    rssMB: Math.round(mem.rss / 1024 / 1024),
+    cpuPct,
+    cores: os.cpus().length,
+  })
+}
diff --git a/src/app/api/users/avatar/route.ts b/src/app/api/users/avatar/route.ts
new file mode 100644
index 0000000..bbcce5b
--- /dev/null
+++ b/src/app/api/users/avatar/route.ts
@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getSessionUser } from "@/lib/auth"
+import { query } from "@/lib/db"
+
+export async function POST(request: NextRequest) {
+  try {
+    const user = await getSessionUser()
+    if (!user) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    const { avatar } = await request.json()
+    if (!avatar || typeof avatar !== "string") {
+      return NextResponse.json({ error: "Invalid avatar data" }, { status: 400 })
+    }
+
+    await query(
+      `UPDATE users SET avatar_url = $1 WHERE id = $2`,
+      [avatar, user.id],
+    )
+
+    return NextResponse.json({ avatar })
+  } catch (error) {
+    console.error("Avatar upload error:", error)
+    return NextResponse.json({ error: "Failed to update avatar" }, { status: 500 })
+  }
+}
diff --git a/src/app/api/users/route.ts b/src/app/api/users/route.ts
index 32bb235..71779e9 100644
--- a/src/app/api/users/route.ts
+++ b/src/app/api/users/route.ts
@@ -6,7 +6,7 @@ export async function GET() {
   try {
     const result = await query(
       `SELECT u.id, u.username, u.email, u.first_name, u.last_name,
-              u.is_active AS active, u.created_at,
+              u.is_active AS active, u.created_at, u.avatar_url,
               r.name AS role
        FROM users u
        JOIN user_roles ur ON ur.user_id = u.id
@@ -20,7 +20,7 @@ export async function GET() {
       email: row.email,
       role: row.role.toLowerCase(),
       active: row.active,
-      avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(`${row.first_name}+${row.last_name}`)}&background=1d4ed8&color=fff&size=128`,
+      avatar: row.avatar_url || `https://ui-avatars.com/api/?name=${encodeURIComponent(`${row.first_name}+${row.last_name}`)}&background=1d4ed8&color=fff&size=128`,
       createdAt: row.created_at,
     }))
     return NextResponse.json({ users }, { status: 200 })
diff --git a/src/app/api/users/search/route.ts b/src/app/api/users/search/route.ts
new file mode 100644
index 0000000..362ebe9
--- /dev/null
+++ b/src/app/api/users/search/route.ts
@@ -0,0 +1,40 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getSessionUser } from "@/lib/auth"
+import { query } from "@/lib/db"
+
+export async function GET(request: NextRequest) {
+  try {
+    const currentUser = await getSessionUser()
+    if (!currentUser) return NextResponse.json({ error: "Unauthorized" }, { status: 401 })
+
+    const q = request.nextUrl.searchParams.get("q") || ""
+
+    if (!q.trim()) {
+      return NextResponse.json({ users: [] })
+    }
+
+    const result = await query(
+      `SELECT id, first_name || ' ' || last_name AS name, email, avatar_url
+       FROM users
+       WHERE deleted_at IS NULL
+         AND id != $1
+         AND (LOWER(first_name || ' ' || last_name) LIKE LOWER($2)
+              OR LOWER(email) LIKE LOWER($2))
+       ORDER BY first_name ASC
+       LIMIT 10`,
+      [currentUser.id, `%${q}%`],
+    )
+
+    const users = result.rows.map((row: any) => ({
+      id: row.id,
+      name: row.name,
+      email: row.email,
+      avatar: row.avatar_url || `https://ui-avatars.com/api/?name=${encodeURIComponent(row.name)}&background=1d4ed8&color=fff&size=128`,
+    }))
+
+    return NextResponse.json({ users })
+  } catch (error) {
+    console.error("User search error:", error)
+    return NextResponse.json({ error: "Search failed" }, { status: 500 })
+  }
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index 5615ace..5489282 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -63,6 +63,7 @@
   --sidebar-ring: 224.3 76.3% 48%;
 }
 
+@layer base {
   * {
     @apply border-border;
   }
@@ -72,3 +73,254 @@
     font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
   }
 }
+
+/* Login page custom styles */
+.left-panel {
+  background: #0a0a0f;
+  position: relative;
+  overflow: hidden;
+}
+.right-panel {
+  background: #111118;
+  width: 420px;
+  flex: none;
+  position: relative;
+}
+.panel-divider {
+  width: 1px;
+  background: rgba(180, 192, 210, 0.1);
+  flex: none;
+}
+.growth-word {
+  position: relative;
+  color: #1BB0CE;
+}
+.growth-word::after {
+  content: "";
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: #1BB0CE;
+  animation: pulseUnderline 2.5s ease-in-out infinite;
+}
+@keyframes pulseUnderline {
+  0%, 100% { background-color: #1BB0CE; }
+  50% { background-color: rgba(180, 192, 210, 0.6); }
+}
+.stats-row {
+  display: flex;
+  justify-content: center;
+  margin-top: 32px;
+  gap: 0;
+}
+.stat {
+  flex: 1;
+  max-width: 120px;
+  text-align: center;
+  position: relative;
+  padding-top: 12px;
+}
+.stat::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, #1BB0CE, rgba(180,192,210,1), #1BB0CE);
+  background-size: 200% 100%;
+  animation: statSweep 2.5s ease-in-out infinite;
+}
+.stat:nth-child(2)::before {
+  animation-delay: 0.6s;
+}
+.stat:nth-child(3)::before {
+  animation-delay: 1.2s;
+}
+@keyframes statSweep {
+  0% { background-position: 0% 0; }
+  100% { background-position: -200% 0; }
+}
+.stat-number {
+  font-size: 24px;
+  font-weight: 700;
+  color: #1BB0CE;
+  line-height: 1.2;
+}
+.stat-label {
+  font-size: 11px;
+  color: rgba(232,232,239,0.3);
+  margin-top: 4px;
+  letter-spacing: 0.3px;
+}
+.testimonial {
+  border-left: 2px solid rgba(27,176,206,0.25);
+  background: rgba(27,176,206,0.06);
+  padding: 10px 14px;
+}
+.stars-canvas {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  z-index: 0;
+}
+.wave-canvas {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 200px;
+  z-index: 0;
+  pointer-events: none;
+  background: #0a0a0f;
+}
+.accent-line {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, #1BB0CE, rgba(232,232,239,0.15), transparent);
+  animation: pulseAccent 3s ease-in-out infinite;
+}
+@keyframes pulseAccent {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+.input-sheen {
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+}
+.input-sheen::before {
+  content: "";
+  position: absolute;
+  top: -10%;
+  left: -100%;
+  width: 60%;
+  height: 120%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
+  transform: rotate(-15deg);
+  animation: sheenFloat 3.2s ease-in-out infinite;
+  pointer-events: none;
+  z-index: 2;
+}
+.input-sheen-delayed::before {
+  animation-delay: 1s;
+}
+.input-sheen:focus-within::before {
+  animation: none;
+  opacity: 0;
+}
+@keyframes sheenFloat {
+  0% { left: -100%; }
+  100% { left: 200%; }
+}
+.login-input {
+  width: 100%;
+  height: 44px;
+  background: linear-gradient(135deg, #0d0d15, #151520, #0d0d15);
+  background-size: 200% 200%;
+  animation: bgShift 6s ease-in-out infinite;
+  border: 1.5px solid rgba(180,192,210,0.15);
+  border-radius: 4px;
+  font-size: 13px;
+  color: #e8e8ef;
+  padding: 0 12px;
+  position: relative;
+  z-index: 1;
+  transition: border-color 0.2s ease, background 0.2s ease;
+  box-sizing: border-box;
+}
+.login-input::placeholder {
+  color: rgba(232,232,239,0.2);
+}
+.login-input:focus {
+  border-color: #1BB0CE;
+  outline: none;
+  background: #111118;
+  animation: none;
+}
+@keyframes bgShift {
+  0%, 100% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+}
+.password-toggle {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  background: none;
+  border: none;
+  color: rgba(232,232,239,0.3);
+  cursor: pointer;
+  padding: 4px;
+  display: flex;
+  align-items: center;
+  z-index: 3;
+}
+.password-toggle:hover {
+  color: rgba(232,232,239,0.5);
+}
+.login-checkbox {
+  accent-color: #1BB0CE;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+}
+.auth-btn {
+  width: 100%;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: #1BB0CE;
+  color: #ffffff;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 13px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  transition: background 0.2s ease;
+}
+.auth-btn:hover {
+  background: #17a0bc;
+}
+.auth-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.auth-btn::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 60%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
+  animation: btnSweep 2.2s ease-in-out infinite;
+  pointer-events: none;
+}
+@keyframes btnSweep {
+  0% { left: -100%; }
+  100% { left: 200%; }
+}
+.login-label {
+  font-size: 12px;
+  font-weight: 600;
+  color: rgba(232,232,239,0.4);
+  display: block;
+  margin-bottom: 6px;
+}
+.body-text { color: rgba(232,232,239,0.5); }
+.subheading-text { color: rgba(232,232,239,0.38); }
+.checkbox-text { color: rgba(232,232,239,0.38); }
+.footer-text { color: rgba(232,232,239,0.2); }
+
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b333a78..08e274e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next"
+import type { Metadata, Viewport } from "next"
 import { Inter } from "next/font/google"
 import { ThemeProvider } from "@/providers/theme-provider"
 import { Toaster } from "@/components/ui/sonner"
@@ -9,8 +9,13 @@ const inter = Inter({
   subsets: ["latin"],
 })
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+}
+
 export const metadata: Metadata = {
-  title: "Coast IT - CRM",
+  title: "CRM",
   description: "Customer Relationship Management System",
   icons: {
     icon: "/logo/CompanyMiniLogo.png",
diff --git a/src/app/login/layout.tsx b/src/app/login/layout.tsx
new file mode 100644
index 0000000..4bbc136
--- /dev/null
+++ b/src/app/login/layout.tsx
@@ -0,0 +1,7 @@
+export default function LoginLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}
diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
index c42efd0..6bf887e 100644
--- a/src/app/login/page.tsx
+++ b/src/app/login/page.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef } from "react"
 import { useRouter } from "next/navigation"
-
+import { motion } from "framer-motion"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
@@ -10,444 +10,40 @@ import { Checkbox } from "@/components/ui/checkbox"
 import { COMPANY_NAME } from "@/lib/constants"
 import { Eye, EyeOff, Loader2 } from "lucide-react"
 
-export default function LoginForm() {
+function LoginForm() {
   const router = useRouter()
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const [showPassword, setShowPassword] = useState(false)
   const [loading, setLoading] = useState(false)
   const [remember, setRemember] = useState(false)
-  const [counts, setCounts] = useState({ leads: 0, conversion: 0, users: 0 })
-  const counterStarted = useRef(false)
-  const canvasRef = useRef<HTMLCanvasElement>(null)
-  const starsCanvasRightRef = useRef<HTMLCanvasElement>(null)
-
-  const waves = [
-    { a: 16, f: 0.011, s: 0.018, y: 0.38, fill: "rgba(27,176,206,0.18)" },
-    { a: 20, f: 0.008, s: 0.013, y: 0.52, fill: "rgba(27,176,206,0.25)" },
-    { a: 12, f: 0.015, s: 0.025, y: 0.28, fill: "rgba(180,192,210,0.06)" },
-    { a: 26, f: 0.006, s: 0.010, y: 0.65, fill: "rgba(180,192,210,0.15)" },
-    { a: 10, f: 0.019, s: 0.030, y: 0.20, fill: "rgba(27,176,206,0.10)" },
-  ]
-
-  useEffect(() => {
-    const canvas = canvasRef.current
-    if (!canvas) return
-    const ctx = canvas.getContext("2d")
-    if (!ctx) return
-
-    let animId: number
-    let time = 0
-
-    const resize = () => {
-      const parent = canvas.parentElement!
-      const rect = parent.getBoundingClientRect()
-      const dpr = window.devicePixelRatio || 1
-      canvas.width = rect.width * dpr
-      canvas.height = 200 * dpr
-      canvas.style.width = rect.width + "px"
-      canvas.style.height = "200px"
-      ctx!.setTransform(dpr, 0, 0, dpr, 0, 0)
-    }
-
-    resize()
-    window.addEventListener("resize", resize)
-
-    const draw = () => {
-      const w = canvas.width / (window.devicePixelRatio || 1)
-      const h = 200
-      ctx!.clearRect(0, 0, w, h)
-
-      for (const wave of waves) {
-        ctx!.beginPath()
-        ctx!.moveTo(0, h)
-        for (let x = 0; x <= w; x++) {
-          const y = wave.y * h + Math.sin(x * wave.f + time * wave.s) * wave.a
-          ctx!.lineTo(x, y)
-        }
-        ctx!.lineTo(w, h)
-        ctx!.closePath()
-        ctx!.fillStyle = wave.fill
-        ctx!.fill()
-      }
-
-      time += 1
-      animId = requestAnimationFrame(draw)
-    }
-
-    animId = requestAnimationFrame(draw)
-
-    return () => {
-      cancelAnimationFrame(animId)
-      window.removeEventListener("resize", resize)
-    }
-  }, [])
-
-  useEffect(() => {
-    const canvases = [starsCanvasRightRef.current].filter(Boolean) as HTMLCanvasElement[]
-    if (canvases.length === 0) return
-
-    const stars = Array.from({ length: 312 }, () => ({
-      x: Math.random(),
-      y: Math.random(),
-      r: 0.2 + Math.random() * 0.6,
-      baseOpacity: 0.12 + Math.random() * 0.43,
-      speed: 0.003 + Math.random() * 0.015,
-      phase: Math.random() * Math.PI * 2,
-      driftX: (Math.random() - 0.5) * 0.00003,
-      driftY: (Math.random() - 0.5) * 0.00003,
-    }))
-
-    let animId: number
-    let time = 0
-
-    const resize = () => {
-      for (const c of canvases) {
-        const dpr = window.devicePixelRatio || 1
-        const rect = c.getBoundingClientRect()
-        c.width = rect.width * dpr
-        c.height = rect.height * dpr
-        const ctx = c.getContext("2d")
-        if (ctx) ctx.setTransform(dpr, 0, 0, dpr, 0, 0)
-      }
-    }
-
-    resize()
-    const ros = canvases.map((c) => {
-      const ro = new ResizeObserver(() => resize())
-      ro.observe(c.parentElement!)
-      return ro
-    })
-    window.addEventListener("resize", resize)
-
-    const draw = () => {
-      time += 1
-      for (const c of canvases) {
-        const dpr = window.devicePixelRatio || 1
-        const w = c.width / dpr
-        const h = c.height / dpr
-        const ctx = c.getContext("2d")
-        if (!ctx) continue
-        ctx.clearRect(0, 0, w, h)
-
-        for (const star of stars) {
-          const x = ((star.x + time * star.driftX) % 1) * w
-          const y = ((star.y + time * star.driftY) % 1) * h
-          const opacity = star.baseOpacity * (0.5 + 0.5 * Math.sin(time * star.speed + star.phase))
-
-          ctx.beginPath()
-          ctx.arc(x, y, star.r, 0, Math.PI * 2)
-          ctx.fillStyle = `rgba(255,255,255,${opacity})`
-          ctx.fill()
-
-          if (star.r > 0.5) {
-            ctx.beginPath()
-            ctx.arc(x, y, star.r * 1.8, 0, Math.PI * 2)
-            ctx.fillStyle = `rgba(255,255,255,${opacity * 0.06})`
-            ctx.fill()
-          }
-        }
-      }
-
-      animId = requestAnimationFrame(draw)
-    }
-
-    animId = requestAnimationFrame(draw)
-
-    return () => {
-      cancelAnimationFrame(animId)
-      ros.forEach((ro) => ro.disconnect())
-      window.removeEventListener("resize", resize)
-    }
-  }, [])
-
-  useEffect(() => {
-    if (counterStarted.current) return
-    counterStarted.current = true
-    const targets = { leads: 1247, conversion: 40, users: 83 }
-    const steps = 150
-
-    const delayTimer = setTimeout(() => {
-      let step = 0
-      const interval = setInterval(() => {
-        step++
-        if (step >= steps) {
-          clearInterval(interval)
-          setCounts(targets)
-          return
-        }
-        setCounts({
-          leads: Math.min(Math.floor((targets.leads / steps) * step), targets.leads),
-          conversion: Math.min(Math.floor((targets.conversion / steps) * step), targets.conversion),
-          users: Math.min(Math.floor((targets.users / steps) * step), targets.users),
-        })
-      }, 15)
-    }, 400)
-
-    return () => clearTimeout(delayTimer)
-  }, [])
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setLoading(true)
 
-    await new Promise((resolve) => setTimeout(resolve, 1200))
+    try {
+      const res = await fetch("/api/auth/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, password }),
+      })
 
-    router.push("/dashboard")
+      if (res.ok) {
+        router.push("/dashboard")
+      } else {
+        const data = await res.json().catch(() => ({}))
+        setError(data.error || "Invalid email or password.")
+      }
+    } catch {
+      setError("Connection error. Please try again.")
+    } finally {
+      setLoading(false)
+    }
   }
 
   return (
-    <>
-      <style>{`
-.left-panel {
-  background: #0a0a0f;
-  position: relative;
-  overflow: hidden;
-}
-.right-panel {
-  background: #111118;
-  width: 420px;
-  flex: none;
-  position: relative;
-}
-.panel-divider {
-  width: 1px;
-  background: rgba(180, 192, 210, 0.1);
-  flex: none;
-}
-.growth-word {
-  position: relative;
-  color: #1BB0CE;
-}
-.growth-word::after {
-  content: "";
-  position: absolute;
-  bottom: -2px;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: #1BB0CE;
-  animation: pulseUnderline 2.5s ease-in-out infinite;
-}
-@keyframes pulseUnderline {
-  0%, 100% { background-color: #1BB0CE; }
-  50% { background-color: rgba(180, 192, 210, 0.6); }
-}
-.stats-row {
-  display: flex;
-  justify-content: center;
-  margin-top: 32px;
-  gap: 0;
-}
-.stat {
-  flex: 1;
-  max-width: 120px;
-  text-align: center;
-  position: relative;
-  padding-top: 12px;
-}
-.stat::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, #1BB0CE, rgba(180,192,210,1), #1BB0CE);
-  background-size: 200% 100%;
-  animation: statSweep 2.5s ease-in-out infinite;
-}
-.stat:nth-child(2)::before {
-  animation-delay: 0.6s;
-}
-.stat:nth-child(3)::before {
-  animation-delay: 1.2s;
-}
-@keyframes statSweep {
-  0% { background-position: 0% 0; }
-  100% { background-position: -200% 0; }
-}
-.stat-number {
-  font-size: 24px;
-  font-weight: 700;
-  color: #1BB0CE;
-  line-height: 1.2;
-}
-.stat-label {
-  font-size: 11px;
-  color: rgba(232,232,239,0.3);
-  margin-top: 4px;
-  letter-spacing: 0.3px;
-}
-.testimonial {
-  border-left: 2px solid rgba(27,176,206,0.25);
-  background: rgba(27,176,206,0.06);
-  padding: 10px 14px;
-}
-.stars-canvas {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: 0;
-}
-.wave-canvas {
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  height: 200px;
-  z-index: 0;
-  pointer-events: none;
-  background: #0a0a0f;
-}
-.accent-line {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  background: linear-gradient(90deg, transparent, #1BB0CE, rgba(232,232,239,0.15), transparent);
-  animation: pulseAccent 3s ease-in-out infinite;
-}
-@keyframes pulseAccent {
-  0%, 100% { opacity: 0.5; }
-  50% { opacity: 1; }
-}
-.input-sheen {
-  position: relative;
-  overflow: hidden;
-  border-radius: 4px;
-}
-.input-sheen::before {
-  content: "";
-  position: absolute;
-  top: -10%;
-  left: -100%;
-  width: 60%;
-  height: 120%;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
-  transform: rotate(-15deg);
-  animation: sheenFloat 3.2s ease-in-out infinite;
-  pointer-events: none;
-  z-index: 2;
-}
-.input-sheen-delayed::before {
-  animation-delay: 1s;
-}
-.input-sheen:focus-within::before {
-  animation: none;
-  opacity: 0;
-}
-@keyframes sheenFloat {
-  0% { left: -100%; }
-  100% { left: 200%; }
-}
-.login-input {
-  width: 100%;
-  height: 44px;
-  background: linear-gradient(135deg, #0d0d15, #151520, #0d0d15);
-  background-size: 200% 200%;
-  animation: bgShift 6s ease-in-out infinite;
-  border: 1.5px solid rgba(180,192,210,0.15);
-  border-radius: 4px;
-  font-size: 13px;
-  color: #e8e8ef;
-  padding: 0 12px;
-  position: relative;
-  z-index: 1;
-  transition: border-color 0.2s ease, background 0.2s ease;
-  box-sizing: border-box;
-}
-.login-input::placeholder {
-  color: rgba(232,232,239,0.2);
-}
-.login-input:focus {
-  border-color: #1BB0CE;
-  outline: none;
-  background: #111118;
-  animation: none;
-}
-@keyframes bgShift {
-  0%, 100% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-}
-.password-toggle {
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  background: none;
-  border: none;
-  color: rgba(232,232,239,0.3);
-  cursor: pointer;
-  padding: 4px;
-  display: flex;
-  align-items: center;
-  z-index: 3;
-}
-.password-toggle:hover {
-  color: rgba(232,232,239,0.5);
-}
-.login-checkbox {
-  accent-color: #1BB0CE;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}
-.auth-btn {
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  background: #1BB0CE;
-  color: #ffffff;
-  font-size: 14px;
-  font-weight: 700;
-  padding: 13px;
-  border-radius: 4px;
-  border: none;
-  cursor: pointer;
-  position: relative;
-  overflow: hidden;
-  transition: background 0.2s ease;
-}
-.auth-btn:hover {
-  background: #17a0bc;
-}
-.auth-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-.auth-btn::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 60%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-  animation: btnSweep 2.2s ease-in-out infinite;
-  pointer-events: none;
-}
-@keyframes btnSweep {
-  0% { left: -100%; }
-  100% { left: 200%; }
-}
-.login-label {
-  font-size: 12px;
-  font-weight: 600;
-  color: rgba(232,232,239,0.4);
-  display: block;
-  margin-bottom: 6px;
-}
-.body-text { color: rgba(232,232,239,0.5); }
-.subheading-text { color: rgba(232,232,239,0.38); }
-.checkbox-text { color: rgba(232,232,239,0.38); }
-.footer-text { color: rgba(232,232,239,0.2); }
-      `}</style>
-
-      <div className="flex min-h-screen bg-[#0a0a0f]">
+    <div className="flex min-h-screen bg-[#0a0a0f]">
         <div className="left-panel flex flex-1 flex-col p-12">
           <div className="relative z-10">
             <img
@@ -484,13 +80,32 @@ export default function LoginForm() {
             </div>
           </div>
 
-          <div className="relative z-10 testimonial">
-            <p className="text-[12px] italic" style={{ color: "#0a0a0f" }}>
-              &ldquo;This CRM transformed how we manage our sales pipeline. We&apos;ve seen a 40% increase in lead conversion.&rdquo;
-            </p>
-            <p className="text-[11px] mt-1" style={{ color: "#0a0a0f" }}>
-              Marcus Johnson, Sales Lead at Coast IT
-            </p>
+          <div className="relative z-10 testimonial" style={{ background: "rgba(255,255,255,0.7)", padding: "16px 20px 16px 16px", clipPath: "url(#testimonialClip)" }}>
+            <svg width="0" height="0" style={{ position: "absolute" }}>
+              <defs>
+                <clipPath id="testimonialClip" clipPathUnits="objectBoundingBox">
+                  <path d="M0,0 L0.92,0 C0.96,0 1,0.03 1,0.08 C1,0.14 0.97,0.22 0.9,0.3 C0.85,0.36 0.83,0.42 0.83,0.5 C0.83,0.58 0.85,0.64 0.9,0.7 C0.97,0.78 1,0.86 1,0.92 C1,0.97 0.96,1 0.92,1 L0,1 Z" />
+                </clipPath>
+              </defs>
+            </svg>
+            <div className="transition-opacity duration-500" key={testimonialIndex}>
+              <p className="text-sm font-semibold leading-relaxed" style={{ color: "#0a0a0f" }}>
+                &ldquo;{testimonials[testimonialIndex].text}&rdquo;
+              </p>
+              <p className="text-xs font-bold mt-2" style={{ color: "#0a0a0f" }}>
+                {testimonials[testimonialIndex].author}
+              </p>
+            </div>
+            <div className="flex items-center justify-center gap-1.5 mt-3">
+              {testimonials.map((_, i) => (
+                <button
+                  key={i}
+                  type="button"
+                  onClick={() => setTestimonialIndex(i)}
+                  className={`h-1.5 rounded-full transition-all duration-300 ${i === testimonialIndex ? "w-5 bg-[#1BB0CE]" : "w-1.5 bg-[#1BB0CE]/30"}`}
+                />
+              ))}
+            </div>
           </div>
 
           <canvas ref={canvasRef} className="wave-canvas" />
@@ -510,69 +125,84 @@ export default function LoginForm() {
               Sign in to your account to continue
             </p>
 
-          <form onSubmit={handleSubmit} className="space-y-5">
-            <div className="space-y-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                type="email"
-                placeholder="name@company.com"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-                autoComplete="email"
-              />
-            </div>
-
-            <div className="space-y-2">
-              <div className="flex items-center justify-between">
-                <Label htmlFor="password">Password</Label>
-                <button
-                  type="button"
-                  className="text-xs text-primary hover:underline"
-                >
-                  Forgot password?
-                </button>
+            {error && (
+              <div className="mb-4 rounded bg-red-500/10 px-4 py-2 text-sm text-red-400">
+                {error}
               </div>
-              <div className="relative">
-                <Input
-                  id="password"
-                  type={showPassword ? "text" : "password"}
-                  placeholder="Enter your password"
-                  value={password}
-                  onChange={(e) => setPassword(e.target.value)}
-                  required
-                  autoComplete="current-password"
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-5">
+              <div>
+                <label htmlFor="email" className="login-label">
+                  Email
+                </label>
+                <div className="input-sheen">
+                  <input
+                    id="email"
+                    type="email"
+                    placeholder="name@company.com"
+                    value={email}
+                    onChange={(e) => setEmail(e.target.value)}
+                    required
+                    autoComplete="email"
+                    className="login-input"
+                  />
+                </div>
+              </div>
+
+              <div>
+                <div className="flex items-center justify-between mb-[6px]">
+                  <label htmlFor="password" className="login-label" style={{ marginBottom: 0 }}>
+                    Password
+                  </label>
+                  <button type="button" className="text-[12px] text-[#1BB0CE] hover:underline">
+                    Forgot password?
+                  </button>
+                </div>
+                <div className="input-sheen input-sheen-delayed">
+                  <div className="relative">
+                    <input
+                      id="password"
+                      type={showPassword ? "text" : "password"}
+                      placeholder="Enter your password"
+                      value={password}
+                      onChange={(e) => setPassword(e.target.value)}
+                      required
+                      autoComplete="current-password"
+                      className="login-input"
+                    />
+                    <button
+                      type="button"
+                      onClick={() => setShowPassword(!showPassword)}
+                      className="password-toggle"
+                    >
+                      {showPassword ? (
+                        <EyeOff className="h-4 w-4" />
+                      ) : (
+                        <Eye className="h-4 w-4" />
+                      )}
+                    </button>
+                  </div>
+                </div>
+              </div>
+
+              <label className="flex items-center gap-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={remember}
+                  onChange={(e) => setRemember(e.target.checked)}
+                  className="login-checkbox"
                 />
-                <button
-                  type="button"
-                  onClick={() => setShowPassword(!showPassword)}
-                  className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-                >
-                  {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
-                </button>
-              </div>
-            </div>
-
-            <div className="flex items-center space-x-2">
-              <Checkbox
-                id="remember"
-                checked={remember}
-                onCheckedChange={(checked) => setRemember(checked as boolean)}
-              />
-              <label
-                htmlFor="remember"
-                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-              >
-                Remember me
+                <span className="text-[13px] checkbox-text">
+                  Remember me
+                </span>
               </label>
-            </div>
 
-            <Button type="submit" className="w-full" disabled={loading}>
-              {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
-              {loading ? "Signing in..." : "Sign in"}
-            </Button>
-          </form>
+              <button type="submit" className="auth-btn" disabled={loading}>
+                {loading && <Loader2 className="h-4 w-4 animate-spin" />}
+                {loading ? "Signing in..." : "Sign in"}
+              </button>
+            </form>
 
             <p className="text-center text-[11px] mt-4 footer-text">
               By signing in, you agree to our{" "}
@@ -587,6 +217,5 @@ export default function LoginForm() {
           </div>
         </div>
       </div>
-    </>
   )
 }
diff --git a/src/components/dashboard/lead-status-chart.tsx b/src/components/dashboard/lead-status-chart.tsx
index 12ec99f..30d2780 100644
--- a/src/components/dashboard/lead-status-chart.tsx
+++ b/src/components/dashboard/lead-status-chart.tsx
@@ -36,6 +36,21 @@ export function LeadStatusChart({ data }: LeadStatusChartProps) {
 
   const total = data.reduce((s, d) => s + d.value, 0)
 
+  if (total === 0) {
+    return (
+      <Card className="h-full">
+        <CardHeader>
+          <CardTitle>Lead Status</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-center h-[400px] text-sm text-muted-foreground">
+            No data for this period
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
   let cum = 0
   const segs = data.map((d) => {
     const start = cum
diff --git a/src/components/dashboard/leads-per-month-chart.tsx b/src/components/dashboard/leads-per-month-chart.tsx
index 029ef2f..0924951 100644
--- a/src/components/dashboard/leads-per-month-chart.tsx
+++ b/src/components/dashboard/leads-per-month-chart.tsx
@@ -1,8 +1,10 @@
 "use client"
 
-import { useState, useMemo } from "react"
+import { useState, useMemo, useEffect } from "react"
 import { motion } from "framer-motion"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { ChevronLeft, ChevronRight } from "lucide-react"
 
 interface IntervalData {
   label: string
@@ -17,9 +19,35 @@ interface LeadsPerMonthChartProps {
 const NEW_LEADS = "#0d9488"
 const CLOSED = "#c9a96e"
 
-export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
+export function LeadsPerMonthChart({ data: initialData }: LeadsPerMonthChartProps) {
+  const [year, setYear] = useState(new Date().getFullYear())
+  const [chartData, setChartData] = useState<IntervalData[]>(initialData)
   const [hovered, setHovered] = useState<number | null>(null)
 
+  useEffect(() => {
+    setChartData(initialData)
+  }, [initialData])
+
+  useEffect(() => {
+    async function fetchYearData() {
+      try {
+        const res = await fetch(`/api/dashboard?year=${year}`)
+        if (res.ok) {
+          const data = await res.json()
+          setChartData(data.leadsPerMonth || [])
+        }
+      } catch {
+        // ignore
+      }
+    }
+    const thisYear = new Date().getFullYear()
+    if (year !== thisYear || initialData.length === 0) {
+      fetchYearData()
+    } else {
+      setChartData(initialData)
+    }
+  }, [year, initialData])
+
   const width = 880
   const height = 620
   const padding = { top: 128, right: 24, bottom: 48, left: 44 }
@@ -27,28 +55,57 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
   const chartH = height - padding.top - padding.bottom
 
   const maxVal = useMemo(() => {
-    const max = Math.max(...data.map((d) => Math.max(d.leads, d.closed)))
-    return Math.ceil(max / 7) * 7
-  }, [data])
+    if (chartData.length === 0) return 1
+    const max = Math.max(...chartData.map((d) => Math.max(d.leads, d.closed)))
+    return Math.max(Math.ceil(max / 7) * 7, 1)
+  }, [chartData])
 
   const ticks = useMemo(() => {
     const steps = 4
     return Array.from({ length: steps + 1 }, (_, i) => Math.round((maxVal / steps) * i))
   }, [maxVal])
 
-  const groupW = chartW / data.length
+  const groupW = chartW / Math.max(chartData.length, 1)
   const barW = groupW * 0.28
   const gap = groupW * 0.06
 
   const yScale = (v: number) => chartH - (v / maxVal) * chartH
 
   const active = hovered
-  const activeDatum = active !== null ? data[active] : null
+  const activeDatum = active !== null ? chartData[active] : null
 
-  const totalNew = data.reduce((s, d) => s + d.leads, 0)
-  const totalClosed = data.reduce((s, d) => s + d.closed, 0)
+  const totalNew = chartData.reduce((s, d) => s + d.leads, 0)
+  const totalClosed = chartData.reduce((s, d) => s + d.closed, 0)
   const closeRate = totalNew > 0 ? Math.round((totalClosed / totalNew) * 100) : 0
 
+  const currentYear = new Date().getFullYear()
+
+  if (chartData.length === 0) {
+    return (
+      <Card className="h-full">
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <CardTitle>Leads Per Month</CardTitle>
+            <div className="flex items-center gap-1">
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setYear((y) => y - 1)}>
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+              <span className="min-w-[60px] text-center text-sm font-medium">{year}</span>
+              <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => setYear((y) => Math.min(y + 1, currentYear))} disabled={year >= currentYear}>
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent>
+          <div className="flex items-center justify-center h-[400px] text-sm text-muted-foreground">
+            No data for {year}
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
@@ -74,6 +131,15 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
                 <span className="inline-block h-2.5 w-2.5 rounded-sm" style={{ background: CLOSED }} />
                 <span className="text-xs text-muted-foreground">Closed</span>
               </div>
+              <div className="ml-2 flex items-center gap-1 rounded-lg border px-2 py-1">
+                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setYear((y) => y - 1)}>
+                  <ChevronLeft className="h-3.5 w-3.5" />
+                </Button>
+                <span className="min-w-[50px] text-center text-sm font-semibold">{year}</span>
+                <Button variant="ghost" size="icon" className="h-6 w-6" onClick={() => setYear((y) => Math.min(y + 1, currentYear))} disabled={year >= currentYear}>
+                  <ChevronRight className="h-3.5 w-3.5" />
+                </Button>
+              </div>
             </div>
           </div>
         </CardHeader>
@@ -129,7 +195,7 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
                 ))}
 
                 {/* Bars */}
-                {data.map((d, i) => {
+                {chartData.map((d, i) => {
                   const groupX = i * groupW
                   const isActive = active === i
                   const newH = chartH - yScale(d.leads)
@@ -142,7 +208,6 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
                       onMouseLeave={() => setHovered(null)}
                       style={{ cursor: "pointer" }}
                     >
-                      {/* Hover highlight band */}
                       <rect
                         x={groupX}
                         y={0}
@@ -152,7 +217,6 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
                         rx={6}
                       />
 
-                      {/* New Leads bar */}
                       <rect
                         x={groupX + groupW / 2 - barW - gap / 2}
                         y={yScale(d.leads)}
@@ -165,7 +229,6 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
                         style={{ transition: "opacity 0.15s ease" }}
                       />
 
-                      {/* Closed bar */}
                       <rect
                         x={groupX + groupW / 2 + gap / 2}
                         y={yScale(d.closed)}
@@ -178,7 +241,6 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
                         style={{ transition: "opacity 0.15s ease" }}
                       />
 
-                      {/* Month label */}
                       <text
                         x={groupX + groupW / 2}
                         y={chartH + 26}
@@ -195,13 +257,12 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
               </g>
             </svg>
 
-            {/* Tooltip */}
             {activeDatum && (
               <div
                 className="pointer-events-none absolute top-0"
                 style={{
-                  left: `${((active! + 0.5) / data.length) * 100}%`,
-                  transform: active! > data.length - 2
+                  left: `${((active! + 0.5) / chartData.length) * 100}%`,
+                  transform: active! > chartData.length - 2
                     ? "translate(-100%, 0)"
                     : "translate(-12%, 0)",
                   transition: "left 0.15s ease",
diff --git a/src/components/dashboard/stat-card-skeleton.tsx b/src/components/dashboard/stat-card-skeleton.tsx
index a26b8a3..918a7e4 100644
--- a/src/components/dashboard/stat-card-skeleton.tsx
+++ b/src/components/dashboard/stat-card-skeleton.tsx
@@ -5,8 +5,8 @@ import { Skeleton } from "@/components/ui/skeleton"
 
 export function StatCardSkeleton() {
   return (
-    <Card>
-      <CardContent className="p-6">
+    <Card className="h-full">
+      <CardContent className="p-6 flex flex-col">
         <div className="flex items-center justify-between">
           <div className="space-y-2">
             <Skeleton className="h-4 w-24" />
diff --git a/src/components/dashboard/stat-card.tsx b/src/components/dashboard/stat-card.tsx
index 01b44fc..960476f 100644
--- a/src/components/dashboard/stat-card.tsx
+++ b/src/components/dashboard/stat-card.tsx
@@ -10,62 +10,47 @@ interface StatCardProps {
   title: string
   value: string | number
   icon: LucideIcon
-  variant?: "default" | "blue" | "amber" | "purple" | "emerald" | "zinc"
   description?: string
   index?: number
+  trend?: { pct: number; up: boolean }
+  sparklineField?: "total" | "open" | "contacted" | "pending" | "closed" | "ignored"
+  monthlyBreakdown?: { label: string; total: number; open: number; contacted: number; pending: number; closed: number; ignored: number }[]
+  conversionRate?: number
 }
 
-const variantStyles = {
-  default: { bg: "bg-muted", text: "text-foreground" },
-  blue: { bg: "bg-teal-500/10", text: "text-teal-600 dark:text-teal-400" },
-  amber: { bg: "bg-amber-500/10", text: "text-amber-600 dark:text-amber-400" },
-  purple: { bg: "bg-purple-500/10", text: "text-purple-600 dark:text-purple-400" },
-  emerald: { bg: "bg-emerald-500/10", text: "text-emerald-600 dark:text-emerald-400" },
-  zinc: { bg: "bg-zinc-500/10", text: "text-zinc-600 dark:text-zinc-400" },
+const cardColors: Record<string, { bg: string; text: string; glow: string; accent: string }> = {
+  "Total Leads":      { bg: "bg-cyan-500/10",   text: "text-cyan-600 dark:text-cyan-400",     glow: "via-[rgba(6,182,212,0.25)]",  accent: "#06b6d4" },
+  "Open Leads":       { bg: "bg-blue-500/10",   text: "text-blue-600 dark:text-blue-400",     glow: "via-[rgba(59,130,246,0.25)]", accent: "#3b82f6" },
+  "Contacted":        { bg: "bg-amber-500/10",  text: "text-amber-600 dark:text-amber-400",   glow: "via-[rgba(245,158,11,0.25)]", accent: "#f59e0b" },
+  "Pending":          { bg: "bg-violet-500/10", text: "text-violet-600 dark:text-violet-400", glow: "via-[rgba(139,92,246,0.25)]", accent: "#8b5cf6" },
+  "Closed":           { bg: "bg-yellow-500/10", text: "text-yellow-600 dark:text-yellow-400", glow: "via-[rgba(234,179,8,0.25)]",  accent: "#eab308" },
+  "Conversion Rate":  { bg: "bg-rose-500/10",   text: "text-rose-600 dark:text-rose-400",     glow: "via-[rgba(244,63,94,0.25)]",  accent: "#f43f5e" },
 }
 
-const cardGradients: Record<string, string> = {
-  "Total Leads": "from-[#0d9488] to-[#5eead4]",
-  "Open Leads": "from-[#14b8a6] to-[#5eead4]",
-  "Contacted": "from-[#c9a96e] to-[#e8d5a3]",
-  "Pending": "from-[#94a3b8] to-[#cbd5e1]",
-  "Closed": "from-[#c9a96e] to-[#e8d5a3]",
-  "Conversion Rate": "from-[#f43f5e] to-[#fb7185]",
+function computeGoal(max: number): number {
+  if (max <= 0) return 100
+  return Math.ceil(max / 100) * 100 || 100
 }
 
-const trendBadges: Record<string, { label: string; up: boolean }> = {
-  "Total Leads": { label: "12%", up: true },
-  "Open Leads": { label: "8%", up: true },
-  "Contacted": { label: "5%", up: true },
-  "Pending": { label: "3%", up: false },
-  "Closed": { label: "15%", up: true },
-  "Conversion Rate": { label: "2%", up: true },
+function smoothPath(points: { x: number; y: number }[]): string {
+  if (points.length === 0) return ""
+  if (points.length === 1) return `M${points[0].x.toFixed(1)},${points[0].y.toFixed(1)}`
+  let d = `M${points[0].x.toFixed(1)},${points[0].y.toFixed(1)}`
+  for (let i = 1; i < points.length - 1; i++) {
+    const p0 = points[i - 1]
+    const p1 = points[i]
+    const p2 = points[i + 1]
+    const cp1x = p1.x - (p2.x - p0.x) * 0.15
+    const cp1y = p1.y - (p2.y - p0.y) * 0.15
+    const cp2x = p1.x + (p2.x - p0.x) * 0.15
+    const cp2y = p1.y + (p2.y - p0.y) * 0.15
+    d += `C${cp1x.toFixed(1)},${cp1y.toFixed(1)} ${cp2x.toFixed(1)},${cp2y.toFixed(1)} ${p2.x.toFixed(1)},${p2.y.toFixed(1)}`
+  }
+  return d
 }
 
-const sparklines: Record<string, string> = {
-  "Total Leads": "M0,28 L10,22 L20,18 L30,20 L40,12 L50,8 L60,6",
-  "Open Leads": "M0,28 L10,24 L20,26 L30,20 L40,22 L50,18 L60,14",
-  "Contacted": "M0,28 L10,20 L20,16 L30,18 L40,10 L50,6 L60,4",
-  "Pending": "M0,28 L10,26 L20,24 L30,22 L40,20 L50,18 L60,16",
-  "Closed": "M0,28 L10,24 L20,18 L30,14 L40,10 L50,6 L60,2",
-  "Conversion Rate": "M0,28 L10,22 L20,20 L30,16 L40,12 L50,8 L60,4",
-}
-
-const sparklineColors: Record<string, string> = {
-  "Total Leads": "#0d9488",
-  "Open Leads": "#14b8a6",
-  "Contacted": "#c9a96e",
-  "Pending": "#94a3b8",
-  "Closed": "#c9a96e",
-  "Conversion Rate": "#f43f5e",
-}
-
-export function StatCard({ title, value, icon: Icon, variant = "default", description, index = 0 }: StatCardProps) {
-  const style = variantStyles[variant]
-  const gradient = cardGradients[title] ?? "from-[#0d9488] to-[#5eead4]"
-  const sparkPath = sparklines[title] ?? "M0,28 L10,22 L20,18 L30,20 L40,12 L50,8 L60,6"
-  const sparkColor = sparklineColors[title] ?? "#0d9488"
-  const badge = trendBadges[title]
+export function StatCard({ title, value, icon: Icon, description, index = 0, trend, sparklineField, monthlyBreakdown, conversionRate }: StatCardProps) {
+  const color = cardColors[title] ?? cardColors["Total Leads"]
 
   const isNumeric = typeof value === "number"
   const [display, setDisplay] = useState(0)
@@ -89,6 +74,39 @@ export function StatCard({ title, value, icon: Icon, variant = "default", descri
     return () => clearInterval(timer)
   }, [target, isNumeric])
 
+  function buildSparklineSvg(): { path: string; area: string; goal: number; gridLines: { y: number }[] } {
+    if (!monthlyBreakdown || !sparklineField) return { path: "", area: "", goal: 100, gridLines: [] }
+    const values = monthlyBreakdown.map((m) => m[sparklineField]).reverse()
+    const max = Math.max(...values, 0)
+    const goal = computeGoal(max)
+    const dataRange = Math.max(max, 1)
+    const range = goal <= 10 ? Math.max(dataRange * 2, 10) : Math.min(goal, Math.max(dataRange * 3, 10))
+    const w = values.length - 1 || 1
+    const pad = 4
+    const graphW = 60 - pad * 2
+    const graphH = 28
+
+    const points = values.map((v, i) => ({
+      x: pad + (i / w) * graphW,
+      y: graphH - (v / range) * (graphH - 3) - 1,
+    }))
+
+    const smooth = smoothPath(points)
+    const area = points.length > 0
+      ? `${smooth} L${points[points.length - 1].x.toFixed(1)},${graphH} L${points[0].x.toFixed(1)},${graphH} Z`
+      : ""
+
+    const steps = 4
+    const gridLines = Array.from({ length: steps - 1 }, (_, i) => ({
+      y: graphH - ((i + 1) / steps) * (graphH - 3) - 1,
+    }))
+
+    return { path: smooth, area, goal, gridLines }
+  }
+
+  const { path: sparkPath, area: sparkArea, goal, gridLines } = buildSparklineSvg()
+  const sparkColor = color.accent
+
   return (
     <motion.div
       initial={{ opacity: 0, y: 20 }}
@@ -96,8 +114,8 @@ export function StatCard({ title, value, icon: Icon, variant = "default", descri
       transition={{ duration: 0.3, delay: index * 0.05 }}
       className="relative"
     >
-      <Card className="group hover:shadow-md transition-all duration-200">
-        <CardContent className="p-6">
+      <Card className="group h-full hover:shadow-md transition-all duration-200">
+        <CardContent className="p-6 flex flex-col">
           <div className="flex items-center justify-between">
             <div className="space-y-1">
               <p className="text-sm font-medium text-muted-foreground">{title}</p>
@@ -107,49 +125,71 @@ export function StatCard({ title, value, icon: Icon, variant = "default", descri
               {description && (
                 <p className="text-xs text-muted-foreground">{description}</p>
               )}
-              {badge && (
+              {trend && (
                 <span className={cn(
                   "inline-flex items-center gap-0.5 text-xs font-semibold",
-                  badge.up ? "text-emerald-500" : "text-rose-500"
+                  trend.up ? "text-emerald-500" : "text-rose-500"
                 )}>
-                  {badge.up ? "↑" : "↓"} {badge.label}
+                  {trend.up ? "↑" : "↓"} {trend.pct}%
                 </span>
               )}
             </div>
-            <div className={cn("flex h-12 w-12 items-center justify-center rounded-xl shrink-0", style.bg)}>
-              <Icon className={cn("h-6 w-6", style.text)} />
+            <div className={cn("flex h-12 w-12 items-center justify-center rounded-xl shrink-0", color.bg)}>
+              <Icon className={cn("h-6 w-6", color.text)} />
             </div>
           </div>
 
-          <div className="mt-6">
-            <svg width="60" height="28" viewBox="0 0 60 28" className="opacity-60 group-hover:opacity-100 transition-opacity duration-200">
-              <defs>
-                <linearGradient id={`spark-fill-${title.replace(/\s/g, "")}`} x1="0" y1="0" x2="0" y2="1">
-                  <stop offset="0%" stopColor={sparkColor} stopOpacity="0.25" />
-                  <stop offset="100%" stopColor={sparkColor} stopOpacity="0" />
-                </linearGradient>
-              </defs>
-              <path d={`${sparkPath} L60,28 L0,28 Z`} fill={`url(#spark-fill-${title.replace(/\s/g, "")})`} />
-              <path d={sparkPath} fill="none" stroke={sparkColor} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-            </svg>
-          </div>
+          {sparkPath && (
+            <div className="mt-auto relative">
+              <svg width="60" height="28" viewBox="0 0 60 28" className="opacity-60 group-hover:opacity-100 transition-opacity duration-200">
+                <defs>
+                  <linearGradient id={`spark-fill-${title.replace(/\s/g, "")}`} x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="0%" stopColor={sparkColor} stopOpacity="0.2" />
+                    <stop offset="100%" stopColor={sparkColor} stopOpacity="0" />
+                  </linearGradient>
+                  <filter id={`glow-${title.replace(/\s/g, "")}`}>
+                    <feGaussianBlur stdDeviation="2" result="blur" />
+                    <feMerge>
+                      <feMergeNode in="blur" />
+                      <feMergeNode in="SourceGraphic" />
+                    </feMerge>
+                  </filter>
+                </defs>
+                {gridLines.map((gl, i) => (
+                  <line key={i} x1="0" y1={gl.y} x2="60" y2={gl.y} stroke="currentColor" strokeOpacity="0.08" strokeWidth="1" strokeDasharray="2,2" />
+                ))}
+                <path d={sparkArea} fill={`url(#spark-fill-${title.replace(/\s/g, "")})`} />
+                <path
+                  d={sparkPath}
+                  fill="none"
+                  stroke={sparkColor}
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  className="animate-pulse"
+                  filter={`url(#glow-${title.replace(/\s/g, "")})`}
+                />
+              </svg>
+              <span className="absolute -bottom-0.5 right-0 text-[9px] font-medium text-muted-foreground/60">
+                /{goal}
+              </span>
+            </div>
+          )}
 
-          {title === "Conversion Rate" && (
+          {title === "Conversion Rate" && conversionRate !== undefined && (
             <div className="mt-3">
               <div className="w-full h-1.5 bg-muted rounded-full overflow-hidden">
-                <div className="h-full rounded-full bg-gradient-to-r from-[#0d9488] to-[#5eead4]" style={{ width: "22%" }} />
+                <div className="h-full rounded-full bg-gradient-to-r from-[#f43f5e] to-[#fda4af]" style={{ width: `${Math.min(conversionRate, 100)}%` }} />
               </div>
-              <p className="text-xs text-muted-foreground mt-1">22% conversion rate</p>
+              <p className="text-xs text-muted-foreground mt-1">{conversionRate}% conversion rate</p>
             </div>
           )}
         </CardContent>
 
-        {(title === "Closed" || title === "Conversion Rate") && (
-          <div className={cn(
-            "absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent to-transparent",
-            title === "Closed" ? "via-[rgba(201,169,110,0.2)]" : "via-[rgba(244,63,94,0.2)]"
-          )} />
-        )}
+        <div className={cn(
+          "absolute bottom-0 left-0 right-0 h-1 bg-gradient-to-r from-transparent to-transparent",
+          color.glow
+        )} />
       </Card>
     </motion.div>
   )
diff --git a/src/components/layout/app-shell.tsx b/src/components/layout/app-shell.tsx
index 064ec26..ebd04ef 100644
--- a/src/components/layout/app-shell.tsx
+++ b/src/components/layout/app-shell.tsx
@@ -5,6 +5,7 @@ import { usePathname } from "next/navigation"
 import { motion, AnimatePresence } from "framer-motion"
 import { Sidebar } from "./sidebar"
 import { Topbar } from "./topbar"
+import { SystemMonitor } from "./system-monitor"
 
 interface AppShellProps {
   children: React.ReactNode
@@ -34,6 +35,7 @@ export function AppShell({ children }: AppShellProps) {
 
   return (
     <div className="min-h-screen bg-background">
+      <SystemMonitor />
       <Sidebar
         collapsed={sidebarCollapsed}
         onToggle={toggleSidebar}
diff --git a/src/components/layout/sidebar.tsx b/src/components/layout/sidebar.tsx
index f79fa83..396fd60 100644
--- a/src/components/layout/sidebar.tsx
+++ b/src/components/layout/sidebar.tsx
@@ -20,9 +20,7 @@ import {
 } from "lucide-react"
 import { COMPANY_NAME } from "@/lib/constants"
 import { useUser } from "@/providers/user-provider"
-import { conversations as conversationsData } from "@/data/chats"
-
-const totalUnread = conversationsData.reduce((sum, c) => sum + c.unread, 0)
+import { useNotifications } from "@/providers/notification-provider"
 
 const navItems = [
   { href: "/dashboard", label: "Dashboard", icon: LayoutDashboard },
@@ -42,6 +40,7 @@ interface SidebarProps {
 export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: SidebarProps) {
   const pathname = usePathname()
   const { user } = useUser()
+  const { unreadChatCount } = useNotifications()
   if (!user) return null
   const initials = user.name.split(" ").map((n) => n[0]).join("")
 
@@ -104,10 +103,8 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
                     )}
                   >
                     <item.icon className="h-5 w-5" />
-                    {item.label === "Chats" && totalUnread > 0 && (
-                      <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-destructive px-1 text-[10px] font-medium text-destructive-foreground">
-                        {totalUnread}
-                      </span>
+                    {item.label === "Chats" && unreadChatCount > 0 && (
+                      <span className="absolute -right-0.5 -top-0.5 flex h-3 w-3 rounded-full bg-red-500 animate-pulse shadow-[0_0_10px_#ef4444]" />
                     )}
                   </Link>
                 </TooltipTrigger>
@@ -127,7 +124,12 @@ export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: Side
                   : "text-sidebar-foreground/60 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
               )}
             >
-              <item.icon className="h-5 w-5 shrink-0" />
+              <div className="relative shrink-0">
+                <item.icon className="h-5 w-5" />
+                {item.label === "Chats" && unreadChatCount > 0 && (
+                  <span className="absolute -right-1 -top-1 flex h-2.5 w-2.5 rounded-full bg-red-500 animate-pulse shadow-[0_0_8px_#ef4444]" />
+                )}
+              </div>
               <motion.span
                 initial={{ opacity: 0 }}
                 animate={{ opacity: 1 }}
diff --git a/src/components/layout/system-monitor.tsx b/src/components/layout/system-monitor.tsx
new file mode 100644
index 0000000..dcd5d7b
--- /dev/null
+++ b/src/components/layout/system-monitor.tsx
@@ -0,0 +1,43 @@
+"use client"
+
+import { useState, useEffect } from "react"
+
+const RAM_LIMIT_MB = 8192
+const CPU_LIMIT_PCT = 400 // 4 cores * 100%
+
+export function SystemMonitor() {
+  const [rssMB, setRssMB] = useState(0)
+  const [cpuPct, setCpuPct] = useState(0)
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      try {
+        const res = await fetch("/api/system/monitor")
+        if (!res.ok) return
+        const data = await res.json()
+        setRssMB(data.rssMB)
+        setCpuPct(data.cpuPct)
+      } catch {
+        // ignore
+      }
+    }
+
+    fetchStats()
+    const interval = setInterval(fetchStats, 3000)
+    return () => clearInterval(interval)
+  }, [])
+
+  const ramOver = rssMB > RAM_LIMIT_MB
+  const cpuOver = cpuPct > CPU_LIMIT_PCT
+
+  return (
+    <div className="fixed top-0 left-0 z-[9999] flex items-center gap-3 px-3 py-1 text-[11px] font-mono bg-black/80 rounded-br-lg select-none">
+      <span className={ramOver ? "text-red-400" : "text-green-400"}>
+        RAM: {rssMB}MB / 8192MB
+      </span>
+      <span className={cpuOver ? "text-red-400" : "text-green-400"}>
+        CPU: {cpuPct}%
+      </span>
+    </div>
+  )
+}
diff --git a/src/components/layout/topbar.tsx b/src/components/layout/topbar.tsx
index 76a89fb..b28720c 100644
--- a/src/components/layout/topbar.tsx
+++ b/src/components/layout/topbar.tsx
@@ -1,12 +1,14 @@
-"use client"
+"use client";
 
-import { useState, useEffect } from "react"
-import { useRouter } from "next/navigation"
-import { useTheme } from "next-themes"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { useUser } from "@/providers/user-provider"
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useTheme } from "next-themes";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useUser } from "@/providers/user-provider";
+import { useNotifications } from "@/providers/notification-provider";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -14,8 +16,8 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Badge } from "@/components/ui/badge"
+} from "@/components/ui/dropdown-menu";
+import { Badge } from "@/components/ui/badge";
 import {
   Search,
   Bell,
@@ -25,33 +27,62 @@ import {
   LogOut,
   User,
   Settings,
-} from "lucide-react"
+  CheckCheck,
+  Trash2,
+} from "lucide-react";
 
 interface TopbarProps {
-  onMenuClick: () => void
+  onMenuClick: () => void;
 }
 
 export function Topbar({ onMenuClick }: TopbarProps) {
-  const router = useRouter()
-  const { theme, setTheme } = useTheme()
-  const { user, logout } = useUser()
-  const [mounted, setMounted] = useState(false)
-  const [searchOpen, setSearchOpen] = useState(false)
+  const router = useRouter();
+  const { theme, setTheme } = useTheme();
+  const { user, logout } = useUser();
+  const { notifications, unreadCount, markAsRead, markAllAsRead, dismiss } =
+    useNotifications();
+  const [mounted, setMounted] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);
 
-  useEffect(() => { setMounted(true) }, [])
-  if (!user) return null
-  const initials = user.name.split(" ").map((n: string) => n[0]).join("").toUpperCase()
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!user) return null;
+
+  function formatTimeAgo(ts: string): string {
+    const diff = Date.now() - new Date(ts).getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 1) return "Just now";
+    if (mins < 60) return `${mins}m ago`;
+    const hrs = Math.floor(mins / 60);
+    if (hrs < 24) return `${hrs}h ago`;
+    const days = Math.floor(hrs / 24);
+    if (days < 7) return `${days}d ago`;
+    return new Date(ts).toLocaleDateString();
+  }
+  const initials = user.name
+    .split(" ")
+    .map((n: string) => n[0])
+    .join("")
+    .toUpperCase();
 
   return (
     <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-background px-4 lg:px-6">
       {/* Logo */}
       <div className="flex items-center gap-2 mr-2 shrink-0">
         <div className="w-3 h-3 rounded-full bg-[#0d9488]" />
-        <span className="text-[#0d9488] font-bold text-sm tracking-wide">CRM</span>
+        <span className="text-[#0d9488] font-bold text-sm tracking-wide">
+          CRM
+        </span>
       </div>
 
       {/* Mobile menu button */}
-      <Button variant="ghost" size="icon" className="lg:hidden" onClick={onMenuClick}>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="lg:hidden"
+        onClick={onMenuClick}
+      >
         <Menu className="h-5 w-5" />
       </Button>
 
@@ -82,37 +113,87 @@ export function Topbar({ onMenuClick }: TopbarProps) {
           onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
           className="text-muted-foreground"
         >
-          {mounted ? (theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />) : <div className="h-5 w-5" />}
+          {mounted ? (
+            theme === "dark" ? (
+              <Sun className="h-5 w-5" />
+            ) : (
+              <Moon className="h-5 w-5" />
+            )
+          ) : (
+            <div className="h-5 w-5" />
+          )}
         </Button>
 
         {/* Notifications */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="relative text-muted-foreground">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="relative text-muted-foreground"
+            >
               <Bell className="h-5 w-5" />
-              <span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-[#f43f5e] text-white text-[10px] font-medium">
+              <span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
                 3
               </span>
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-80">
-            <DropdownMenuLabel>Notifications</DropdownMenuLabel>
+            <DropdownMenuLabel className="flex items-center justify-between">
+              <span>Notifications</span>
+              {notifications.length > 0 && (
+                <button
+                  onClick={markAllAsRead}
+                  className="flex items-center gap-1 text-xs text-primary hover:underline"
+                >
+                  <CheckCheck className="h-3 w-3" />
+                  Mark all read
+                </button>
+              )}
+            </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <div className="space-y-1 p-2">
-              {[
-                { text: "New lead assigned to you", time: "5m ago" },
-                { text: "Lead status updated to Closed", time: "1h ago" },
-                { text: "Note added to Brightwave Studios", time: "3h ago" },
-              ].map((n, i) => (
-                <div key={i} className="flex items-start gap-3 rounded-lg p-2 hover:bg-muted/50">
-                  <div className="h-2 w-2 mt-2 rounded-full bg-primary shrink-0" />
-                  <div className="flex-1 space-y-0.5">
-                    <p className="text-sm">{n.text}</p>
-                    <p className="text-xs text-muted-foreground">{n.time}</p>
+            {notifications.length === 0 ? (
+              <div className="py-6 text-center text-sm text-muted-foreground">
+                No notifications
+              </div>
+            ) : (
+              <div className="max-h-[360px] space-y-1 overflow-y-auto p-2">
+                {notifications.slice(0, 20).map((n) => (
+                  <div
+                    key={n.id}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      if (!n.read) markAsRead(n.id);
+                      if (n.link) router.push(n.link);
+                    }}
+                    className={`flex cursor-pointer items-start gap-3 rounded-lg p-2 transition-colors hover:bg-muted/50 ${!n.read ? "bg-muted/30" : ""}`}
+                  >
+                    <div
+                      className={`mt-2 h-2 w-2 shrink-0 rounded-full ${n.read ? "bg-transparent" : "bg-primary"}`}
+                    />
+                    <div className="flex-1 space-y-0.5">
+                      <p className="text-sm font-medium">{n.title}</p>
+                      <p className="text-xs text-muted-foreground">
+                        {n.description}
+                      </p>
+                      <p className="text-[10px] text-muted-foreground/60">
+                        {formatTimeAgo(n.timestamp)}
+                      </p>
+                    </div>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        dismiss(n.id);
+                      }}
+                      className="mt-1 shrink-0 text-muted-foreground/40 hover:text-destructive"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </button>
                   </div>
-                </div>
-              ))}
-            </div>
+                ))}
+              </div>
+            )}
           </DropdownMenuContent>
         </DropdownMenu>
 
@@ -124,7 +205,9 @@ export function Topbar({ onMenuClick }: TopbarProps) {
                 <AvatarImage src={user.avatar} />
                 <AvatarFallback>{initials}</AvatarFallback>
               </Avatar>
-              <span className="hidden text-sm font-medium md:inline-block">{user.name}</span>
+              <span className="hidden text-sm font-medium md:inline-block">
+                {user.name}
+              </span>
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-56">
@@ -132,7 +215,12 @@ export function Topbar({ onMenuClick }: TopbarProps) {
               <div className="flex flex-col space-y-1">
                 <p className="text-sm font-medium">{user.name}</p>
                 <p className="text-xs text-muted-foreground">{user.email}</p>
-                <Badge variant="secondary" className="mt-1 w-fit text-xs capitalize">{user.role}</Badge>
+                <Badge
+                  variant="secondary"
+                  className="mt-1 w-fit text-xs capitalize"
+                >
+                  {user.role}
+                </Badge>
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
@@ -153,5 +241,5 @@ export function Topbar({ onMenuClick }: TopbarProps) {
         </DropdownMenu>
       </div>
     </header>
-  )
-}
\ No newline at end of file
+  );
+}
diff --git a/src/components/leads/lead-form-dialog.tsx b/src/components/leads/lead-form-dialog.tsx
index a7c3579..afa6081 100644
--- a/src/components/leads/lead-form-dialog.tsx
+++ b/src/components/leads/lead-form-dialog.tsx
@@ -33,6 +33,7 @@ import {
 import { Lead, LeadStatus, User } from "@/types"
 import { LEAD_SOURCES, LEAD_STATUSES } from "@/lib/constants"
 import { users } from "@/data/users"
+import { useNotifications } from "@/providers/notification-provider"
 
 const leadFormSchema = z.object({
   companyName: z.string().min(1, "Company name is required"),
@@ -55,6 +56,7 @@ interface LeadFormDialogProps {
 
 export function LeadFormDialog({ open, onOpenChange, lead }: LeadFormDialogProps) {
   const isEditing = !!lead
+  const { addNotification } = useNotifications()
 
   const form = useForm<LeadFormValues>({
     resolver: zodResolver(leadFormSchema),
@@ -101,6 +103,15 @@ export function LeadFormDialog({ open, onOpenChange, lead }: LeadFormDialogProps
       ...values,
       assignedUserId: values.assignedUserId === "none" ? null : values.assignedUserId,
     }
+    if (!isEditing) {
+      const now = new Date().toISOString()
+      addNotification(
+        "lead_created",
+        "New Lead Created",
+        `${values.companyName} — ${values.contactName}`,
+        "#"
+      )
+    }
     console.log(payload)
     onOpenChange(false)
   }
diff --git a/src/components/notes/note-form.tsx b/src/components/notes/note-form.tsx
index d602774..48fd499 100644
--- a/src/components/notes/note-form.tsx
+++ b/src/components/notes/note-form.tsx
@@ -15,14 +15,21 @@ export function NoteForm({ leadId }: NoteFormProps) {
   const [note, setNote] = useState("")
   const [submitting, setSubmitting] = useState(false)
 
-  const handleSubmit = () => {
+  const handleSubmit = async () => {
     if (!note.trim()) return
     setSubmitting(true)
-    setTimeout(() => {
-      console.log("Note added:", { leadId, note })
+    try {
+      await fetch(`/api/leads/${leadId}/notes`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ content: note }),
+      })
       setNote("")
-      setSubmitting(false)
-    }, 500)
+      window.location.reload()
+    } catch {
+      // ignore
+    }
+    setSubmitting(false)
   }
 
   return (
diff --git a/src/components/users/user-form-dialog.tsx b/src/components/users/user-form-dialog.tsx
index 9a8c959..3d76077 100644
--- a/src/components/users/user-form-dialog.tsx
+++ b/src/components/users/user-form-dialog.tsx
@@ -1,9 +1,9 @@
-"use client"
+"use client";
 
-import { useState, useEffect } from "react"
-import { useForm } from "react-hook-form"
-import { zodResolver } from "@hookform/resolvers/zod"
-import * as z from "zod"
+import { useState, useEffect } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
 import {
   Dialog,
   DialogContent,
@@ -11,8 +11,8 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog"
-import { Button } from "@/components/ui/button"
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
 import {
   Form,
   FormControl,
@@ -20,18 +20,18 @@ import {
   FormItem,
   FormLabel,
   FormMessage,
-} from "@/components/ui/form"
-import { Input } from "@/components/ui/input"
+} from "@/components/ui/form";
+import { Input } from "@/components/ui/input";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select"
-import { Switch } from "@/components/ui/switch"
-import { User } from "@/types"
-import { toast } from "sonner"
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { User } from "@/types";
+import { toast } from "sonner";
 
 const createSchema = z.object({
   name: z.string().min(1, "Name is required"),
@@ -39,22 +39,25 @@ const createSchema = z.object({
   password: z.string().min(6, "Password must be at least 6 characters"),
   role: z.string().min(1, "Role is required"),
   active: z.boolean(),
-})
-
-type UserFormValues = z.infer<typeof createSchema>
-
+});
 
+type UserFormValues = z.infer<typeof createSchema>;
 
 interface UserFormDialogProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
-  user?: User | null
-  onUserCreated?: () => void
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  user?: User | null;
+  onUserCreated?: () => void;
 }
 
-export function UserFormDialog({ open, onOpenChange, user, onUserCreated }: UserFormDialogProps) {
-  const isEditing = !!user
-  const [submitting, setSubmitting] = useState(false)
+export function UserFormDialog({
+  open,
+  onOpenChange,
+  user,
+  onUserCreated,
+}: UserFormDialogProps) {
+  const isEditing = !!user;
+  const [submitting, setSubmitting] = useState(false);
 
   const form = useForm<UserFormValues>({
     resolver: zodResolver(createSchema),
@@ -65,7 +68,7 @@ export function UserFormDialog({ open, onOpenChange, user, onUserCreated }: User
       role: "sales_user",
       active: true,
     },
-  })
+  });
 
   useEffect(() => {
     if (user) {
@@ -75,32 +78,38 @@ export function UserFormDialog({ open, onOpenChange, user, onUserCreated }: User
         password: "",
         role: user.role,
         active: user.active,
-      })
+      });
     } else {
-      form.reset({ name: "", email: "", password: "", role: "sales_user", active: true })
+      form.reset({
+        name: "",
+        email: "",
+        password: "",
+        role: "sales_user",
+        active: true,
+      });
     }
-  }, [user, form])
+  }, [user, form]);
 
   async function onSubmit(values: UserFormValues) {
-    setSubmitting(true)
+    setSubmitting(true);
     try {
       const res = await fetch("/api/users", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify(values),
-      })
-      const data = await res.json()
+      });
+      const data = await res.json();
       if (!res.ok) {
-        toast.error(data.error || "Failed to create user")
-        return
+        toast.error(data.error || "Failed to create user");
+        return;
       }
-      toast.success("User created")
-      onOpenChange(false)
-      onUserCreated?.()
+      toast.success("User created");
+      onOpenChange(false);
+      onUserCreated?.();
     } catch {
-      toast.error("Failed to create user")
+      toast.error("Failed to create user");
     } finally {
-      setSubmitting(false)
+      setSubmitting(false);
     }
   }
 
@@ -137,7 +146,11 @@ export function UserFormDialog({ open, onOpenChange, user, onUserCreated }: User
                 <FormItem>
                   <FormLabel>Email</FormLabel>
                   <FormControl>
-                    <Input placeholder="john@coastit.co.za" type="email" {...field} />
+                    <Input
+                      placeholder="john@coastit.co.za"
+                      type="email"
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -149,7 +162,10 @@ export function UserFormDialog({ open, onOpenChange, user, onUserCreated }: User
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>Role</FormLabel>
-                  <Select onValueChange={field.onChange} defaultValue={field.value}>
+                  <Select
+                    onValueChange={field.onChange}
+                    defaultValue={field.value}
+                  >
                     <FormControl>
                       <SelectTrigger>
                         <SelectValue placeholder="Select role" />
@@ -158,8 +174,7 @@ export function UserFormDialog({ open, onOpenChange, user, onUserCreated }: User
                     <SelectContent>
                       <SelectItem value="super_admin">Super Admin</SelectItem>
                       <SelectItem value="admin">Admin</SelectItem>
-                      <SelectItem value="sales_user">Sales</SelectItem>
-                      <SelectItem value="developer">Developer</SelectItem>
+                      <SelectItem value="sales">Sales</SelectItem>
                     </SelectContent>
                   </Select>
                   <FormMessage />
@@ -173,7 +188,15 @@ export function UserFormDialog({ open, onOpenChange, user, onUserCreated }: User
                 <FormItem>
                   <FormLabel>Password</FormLabel>
                   <FormControl>
-                    <Input type="password" placeholder={isEditing ? "Leave blank to keep current" : "Enter password"} {...field} />
+                    <Input
+                      type="password"
+                      placeholder={
+                        isEditing
+                          ? "Leave blank to keep current"
+                          : "Enter password"
+                      }
+                      {...field}
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -200,16 +223,24 @@ export function UserFormDialog({ open, onOpenChange, user, onUserCreated }: User
               )}
             />
             <DialogFooter>
-              <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => onOpenChange(false)}
+              >
                 Cancel
               </Button>
               <Button type="submit" disabled={submitting}>
-                {submitting ? "Saving..." : isEditing ? "Save Changes" : "Create User"}
+                {submitting
+                  ? "Saving..."
+                  : isEditing
+                    ? "Save Changes"
+                    : "Create User"}
               </Button>
             </DialogFooter>
           </form>
         </Form>
       </DialogContent>
     </Dialog>
-  )
+  );
 }
diff --git a/src/data/users.ts b/src/data/users.ts
index b4924a1..227d07f 100644
--- a/src/data/users.ts
+++ b/src/data/users.ts
@@ -1,6 +1,15 @@
 import { User, UserRole } from "@/types"
 
 export const users: User[] = [
+  {
+    id: "u-super",
+    name: "Jason Oosthuizen",
+    email: "jason@coastalit.com",
+    role: "super_admin",
+    active: true,
+    avatar: "https://ui-avatars.com/api/?name=Jason+Oosthuizen&background=0f172a&color=fff&size=128",
+    createdAt: "2025-01-01T08:00:00Z",
+  },
   {
     id: "u1",
     name: "Sarah Chen",
@@ -14,7 +23,7 @@ export const users: User[] = [
     id: "u2",
     name: "Marcus Johnson",
     email: "marcus@coastalit.com",
-    role: "sales_user",
+    role: "sales",
     active: true,
     avatar: "https://ui-avatars.com/api/?name=Marcus+Johnson&background=2563eb&color=fff&size=128",
     createdAt: "2025-02-01T09:00:00Z",
@@ -23,7 +32,7 @@ export const users: User[] = [
     id: "u3",
     name: "Emily Rodriguez",
     email: "emily@coastalit.com",
-    role: "sales_user",
+    role: "sales",
     active: true,
     avatar: "https://ui-avatars.com/api/?name=Emily+Rodriguez&background=3b82f6&color=fff&size=128",
     createdAt: "2025-02-15T10:00:00Z",
@@ -32,7 +41,7 @@ export const users: User[] = [
     id: "u4",
     name: "David Kim",
     email: "david@coastalit.com",
-    role: "sales_user",
+    role: "sales",
     active: true,
     avatar: "https://ui-avatars.com/api/?name=David+Kim&background=60a5fa&color=fff&size=128",
     createdAt: "2025-03-01T08:00:00Z",
@@ -41,7 +50,7 @@ export const users: User[] = [
     id: "u5",
     name: "Jessica Patel",
     email: "jessica@coastalit.com",
-    role: "sales_user",
+    role: "sales",
     active: false,
     avatar: "https://ui-avatars.com/api/?name=Jessica+Patel&background=93c5fd&color=fff&size=128",
     createdAt: "2025-03-10T09:00:00Z",
@@ -50,7 +59,7 @@ export const users: User[] = [
     id: "u6",
     name: "Alex Thompson",
     email: "alex@coastalit.com",
-    role: "sales_user",
+    role: "sales",
     active: true,
     avatar: "https://ui-avatars.com/api/?name=Alex+Thompson&background=1d4ed8&color=fff&size=128",
     createdAt: "2025-04-01T08:00:00Z",
@@ -59,7 +68,7 @@ export const users: User[] = [
     id: "u7",
     name: "Rachel Williams",
     email: "rachel@coastalit.com",
-    role: "sales_user",
+    role: "sales",
     active: true,
     avatar: "https://ui-avatars.com/api/?name=Rachel+Williams&background=2563eb&color=fff&size=128",
     createdAt: "2025-04-15T10:00:00Z",
diff --git a/src/lib/auth.ts b/src/lib/auth.ts
index 07c74ab..ec030e5 100644
--- a/src/lib/auth.ts
+++ b/src/lib/auth.ts
@@ -1,35 +1,35 @@
-import { SignJWT, jwtVerify } from "jose"
-import bcrypt from "bcryptjs"
-import { query } from "@/lib/db"
-import { cookies } from "next/headers"
+import { SignJWT, jwtVerify } from "jose";
+import bcrypt from "bcryptjs";
+import { query } from "@/lib/db";
+import { cookies } from "next/headers";
 
 const JWT_SECRET = new TextEncoder().encode(
-  process.env.JWT_SECRET || "fallback-dev-secret-do-not-use-in-production"
-)
+  process.env.JWT_SECRET || "fallback-dev-secret-do-not-use-in-production",
+);
 
-const SESSION_COOKIE = "session"
-const MAX_FAILED_ATTEMPTS = 5
-const LOCKOUT_DURATION_MINUTES = 15
+const SESSION_COOKIE = "session";
+const MAX_FAILED_ATTEMPTS = 5;
+const LOCKOUT_DURATION_MINUTES = 15;
 
 export interface SessionUser {
-  id: string
-  username: string
-  email: string
-  firstName: string
-  lastName: string
-  role: string
-  avatar: string
+  id: string;
+  username: string;
+  email: string;
+  firstName: string;
+  lastName: string;
+  role: string;
+  avatar: string;
 }
 
 export async function hashPassword(password: string): Promise<string> {
-  return bcrypt.hash(password, 12)
+  return bcrypt.hash(password, 12);
 }
 
 export async function comparePassword(
   password: string,
-  hash: string
+  hash: string,
 ): Promise<boolean> {
-  return bcrypt.compare(password, hash)
+  return bcrypt.compare(password, hash);
 }
 
 export async function signToken(payload: { userId: string; role: string }) {
@@ -37,63 +37,63 @@ export async function signToken(payload: { userId: string; role: string }) {
     .setProtectedHeader({ alg: "HS256" })
     .setExpirationTime("24h")
     .setIssuedAt()
-    .sign(JWT_SECRET)
+    .sign(JWT_SECRET);
 }
 
 export async function verifyToken(token: string) {
   try {
-    const { payload } = await jwtVerify(token, JWT_SECRET)
-    return payload as { userId: string; role: string }
+    const { payload } = await jwtVerify(token, JWT_SECRET);
+    return payload as { userId: string; role: string };
   } catch {
-    return null
+    return null;
   }
 }
 
 export async function getUserByEmail(email: string) {
   const result = await query(
-    `SELECT u.id, u.username, u.email, u.password_hash, u.first_name, u.last_name,
+    `    SELECT u.id, u.username, u.email, u.password_hash, u.first_name, u.last_name,
             u.is_active, u.is_locked, u.failed_login_attempts, u.locked_until,
-            u.password_change_required,
+            u.password_change_required, u.avatar_url,
             r.name AS role_name
      FROM users u
      JOIN user_roles ur ON ur.user_id = u.id
      JOIN roles r ON r.id = ur.role_id
      WHERE u.email = $1 AND u.deleted_at IS NULL
      LIMIT 1`,
-    [email.toLowerCase().trim()]
-  )
-  return result.rows[0] || null
+    [email.toLowerCase().trim()],
+  );
+  return result.rows[0] || null;
 }
 
 export async function getUserByUsername(username: string) {
   const result = await query(
-    `SELECT u.id, u.username, u.email, u.password_hash, u.first_name, u.last_name,
+    `    SELECT u.id, u.username, u.email, u.password_hash, u.first_name, u.last_name,
             u.is_active, u.is_locked, u.failed_login_attempts, u.locked_until,
-            u.password_change_required,
+            u.password_change_required, u.avatar_url,
             r.name AS role_name
      FROM users u
      JOIN user_roles ur ON ur.user_id = u.id
      JOIN roles r ON r.id = ur.role_id
      WHERE u.username = $1 AND u.deleted_at IS NULL
      LIMIT 1`,
-    [username.toLowerCase().trim()]
-  )
-  return result.rows[0] || null
+    [username.toLowerCase().trim()],
+  );
+  return result.rows[0] || null;
 }
 
 export async function getUserById(id: string) {
   const result = await query(
-    `SELECT u.id, u.username, u.email, u.first_name, u.last_name,
-            u.is_active,
+    `    SELECT u.id, u.username, u.email, u.first_name, u.last_name,
+            u.is_active, u.avatar_url,
             r.name AS role_name
      FROM users u
      JOIN user_roles ur ON ur.user_id = u.id
      JOIN roles r ON r.id = ur.role_id
      WHERE u.id = $1 AND u.deleted_at IS NULL
      LIMIT 1`,
-    [id]
-  )
-  return result.rows[0] || null
+    [id],
+  );
+  return result.rows[0] || null;
 }
 
 export async function recordLoginAttempt(
@@ -102,13 +102,20 @@ export async function recordLoginAttempt(
   ipAddress: string,
   userAgent: string | null,
   wasSuccessful: boolean,
-  failureReason?: string
+  failureReason?: string,
 ) {
   await query(
     `INSERT INTO login_attempts (user_id, username_attempted, ip_address, user_agent, was_successful, failure_reason)
      VALUES ($1, $2, $3, $4, $5, $6)`,
-    [userId, usernameAttempted, ipAddress, userAgent, wasSuccessful, failureReason || null]
-  )
+    [
+      userId,
+      usernameAttempted,
+      ipAddress,
+      userAgent,
+      wasSuccessful,
+      failureReason || null,
+    ],
+  );
 }
 
 export async function incrementFailedAttempts(userId: string) {
@@ -121,8 +128,8 @@ export async function incrementFailedAttempts(userId: string) {
            ELSE locked_until
          END
      WHERE id = $1`,
-    [userId, MAX_FAILED_ATTEMPTS, LOCKOUT_DURATION_MINUTES]
-  )
+    [userId, MAX_FAILED_ATTEMPTS, LOCKOUT_DURATION_MINUTES],
+  );
 }
 
 export async function resetFailedAttempts(userId: string) {
@@ -132,31 +139,45 @@ export async function resetFailedAttempts(userId: string) {
          locked_until = NULL,
          last_login_at = NOW()
      WHERE id = $1`,
-    [userId]
-  )
+    [userId],
+  );
 }
 
 export async function isAccountLocked(user: {
-  is_locked: boolean
-  locked_until: Date | null
+  is_locked: boolean;
+  locked_until: Date | null;
 }): Promise<{ locked: boolean; reason?: string }> {
   if (user.is_locked) {
-    return { locked: true, reason: "Account has been locked by an administrator." }
+    return {
+      locked: true,
+      reason: "Account has been locked by an administrator.",
+    };
   }
   if (user.locked_until && new Date(user.locked_until) > new Date()) {
     const minutes = Math.ceil(
-      (new Date(user.locked_until).getTime() - Date.now()) / 60000
-    )
+      (new Date(user.locked_until).getTime() - Date.now()) / 60000,
+    );
     return {
       locked: true,
       reason: `Account is temporarily locked due to too many failed attempts. Try again in ${minutes} minute(s).`,
-    }
+    };
   }
-  return { locked: false }
+  return { locked: false };
 }
 
-export function mapDbUserToSessionUser(dbUser: Record<string, unknown>): SessionUser {
-  const roleName = (dbUser.role_name as string).toLowerCase()
+export function mapDbUserToSessionUser(
+  dbUser: Record<string, unknown>,
+): SessionUser {
+  const roleName = dbUser.role_name as string;
+
+  const roleMapping: Record<string, string> = {
+    SUPER_ADMIN: "super_admin",
+    ADMIN: "admin",
+    SALES_USER: "sales",
+    DEVELOPER: "sales",
+  };
+
+  const avatarUrl = dbUser.avatar_url as string | null
 
   return {
     id: dbUser.id as string,
@@ -164,53 +185,53 @@ export function mapDbUserToSessionUser(dbUser: Record<string, unknown>): Session
     email: dbUser.email as string,
     firstName: dbUser.first_name as string,
     lastName: dbUser.last_name as string,
-    role: roleName,
-    avatar: `https://ui-avatars.com/api/?name=${encodeURIComponent(
-      `${dbUser.first_name}+${dbUser.last_name}`
+    role: roleMapping[roleName] || roleName.toLowerCase(),
+    avatar: avatarUrl || `https://ui-avatars.com/api/?name=${encodeURIComponent(
+      `${dbUser.first_name}+${dbUser.last_name}`,
     )}&background=1d4ed8&color=fff&size=128`,
-  }
+  };
 }
 
 export async function createSession(userId: string, role: string) {
-  const token = await signToken({ userId, role })
+  const token = await signToken({ userId, role });
 
-  const cookieStore = await cookies()
+  const cookieStore = await cookies();
   cookieStore.set(SESSION_COOKIE, token, {
     httpOnly: true,
     secure: process.env.NODE_ENV === "production",
     sameSite: "lax",
     path: "/",
     maxAge: 60 * 60 * 24, // 24 hours
-  })
+  });
 
-  return token
+  return token;
 }
 
 export async function destroySession() {
-  const cookieStore = await cookies()
+  const cookieStore = await cookies();
   cookieStore.set(SESSION_COOKIE, "", {
     httpOnly: true,
     secure: process.env.NODE_ENV === "production",
     sameSite: "lax",
     path: "/",
     maxAge: 0,
-  })
+  });
 }
 
 export async function getSessionUser(): Promise<SessionUser | null> {
   try {
-    const cookieStore = await cookies()
-    const token = cookieStore.get(SESSION_COOKIE)?.value
-    if (!token) return null
+    const cookieStore = await cookies();
+    const token = cookieStore.get(SESSION_COOKIE)?.value;
+    if (!token) return null;
 
-    const payload = await verifyToken(token)
-    if (!payload) return null
+    const payload = await verifyToken(token);
+    if (!payload) return null;
 
-    const dbUser = await getUserById(payload.userId)
-    if (!dbUser) return null
+    const dbUser = await getUserById(payload.userId);
+    if (!dbUser) return null;
 
-    return mapDbUserToSessionUser(dbUser)
+    return mapDbUserToSessionUser(dbUser);
   } catch {
-    return null
+    return null;
   }
 }
diff --git a/src/middleware.ts b/src/middleware.ts
index 0c0abec..152c048 100644
--- a/src/middleware.ts
+++ b/src/middleware.ts
@@ -10,6 +10,7 @@ const publicRoutes = [
   "/login",
   "/api/auth/login",
   "/api/auth/logout",
+  "/api/system",
   "/_next/static",
   "/_next/image",
   "/favicon.ico",
diff --git a/src/providers/notification-provider.tsx b/src/providers/notification-provider.tsx
new file mode 100644
index 0000000..2275e51
--- /dev/null
+++ b/src/providers/notification-provider.tsx
@@ -0,0 +1,154 @@
+"use client"
+
+import { createContext, useContext, useState, useCallback, useMemo, useEffect, ReactNode } from "react"
+import { Notification, NotificationType } from "@/types"
+import { leads } from "@/data/leads"
+
+interface NotificationContextValue {
+  notifications: Notification[]
+  unreadCount: number
+  unreadChatCount: number
+  addNotification: (type: NotificationType, title: string, description: string, link?: string) => void
+  markAsRead: (id: string) => void
+  markAllAsRead: () => void
+  dismiss: (id: string) => void
+}
+
+const NotificationContext = createContext<NotificationContextValue | null>(null)
+
+function generateId(): string {
+  return `notif-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`
+}
+
+function seedInitialNotifications(): Notification[] {
+  const result: Notification[] = []
+
+  const recentLeads = leads.slice(0, 5)
+  recentLeads.forEach((lead) => {
+    result.push({
+      id: generateId(),
+      type: "lead_created",
+      title: "New Lead Created",
+      description: `${lead.companyName} — ${lead.contactName}`,
+      timestamp: lead.createdAt,
+      read: false,
+      link: `/leads/${lead.id}`,
+    })
+  })
+
+  const statusChanged = leads.filter((l) => l.status !== "open").slice(0, 3)
+  statusChanged.forEach((lead) => {
+    result.push({
+      id: generateId(),
+      type: "lead_status_changed",
+      title: "Lead Status Updated",
+      description: `${lead.companyName} moved to ${lead.status}`,
+      timestamp: lead.updatedAt,
+      read: false,
+      link: `/leads/${lead.id}`,
+    })
+  })
+
+  const assignedLeads = leads.filter((l) => l.assignedUser).slice(0, 3)
+  assignedLeads.forEach((lead) => {
+    result.push({
+      id: generateId(),
+      type: "lead_assigned",
+      title: "Lead Assigned",
+      description: `${lead.companyName} assigned to ${lead.assignedUser!.name}`,
+      timestamp: lead.updatedAt,
+      read: false,
+      link: `/leads/${lead.id}`,
+    })
+  })
+
+  result.sort((a, b) => new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime())
+
+  return result
+}
+
+export function NotificationProvider({ children }: { children: ReactNode }) {
+  const [notifications, setNotifications] = useState<Notification[]>(seedInitialNotifications)
+
+  const [unreadChatCount, setUnreadChatCount] = useState(0)
+
+  useEffect(() => {
+    let cancelled = false
+    async function fetchUnread() {
+      try {
+        const res = await fetch("/api/conversations")
+        if (!res.ok) return
+        const data = await res.json()
+        if (!cancelled) {
+          const list = data.conversations || []
+          const total = list.reduce((sum: number, c: any) => sum + (c.unread || 0), 0)
+          setUnreadChatCount(total)
+        }
+      } catch {
+        // ignore
+      }
+    }
+    fetchUnread()
+    const id = setInterval(fetchUnread, 5000)
+    return () => { cancelled = true; clearInterval(id) }
+  }, [])
+
+  const unreadCount = useMemo(
+    () => notifications.filter((n) => !n.read).length,
+    [notifications]
+  )
+
+  const addNotification = useCallback(
+    (type: NotificationType, title: string, description: string, link?: string) => {
+      const notif: Notification = {
+        id: generateId(),
+        type,
+        title,
+        description,
+        timestamp: new Date().toISOString(),
+        read: false,
+        link,
+      }
+      setNotifications((prev) => [notif, ...prev])
+    },
+    []
+  )
+
+  const markAsRead = useCallback((id: string) => {
+    setNotifications((prev) =>
+      prev.map((n) => (n.id === id ? { ...n, read: true } : n))
+    )
+  }, [])
+
+  const markAllAsRead = useCallback(() => {
+    setNotifications((prev) => prev.map((n) => ({ ...n, read: true })))
+  }, [])
+
+  const dismiss = useCallback((id: string) => {
+    setNotifications((prev) => prev.filter((n) => n.id !== id))
+  }, [])
+
+  return (
+    <NotificationContext.Provider
+      value={{
+        notifications,
+        unreadCount,
+        unreadChatCount,
+        addNotification,
+        markAsRead,
+        markAllAsRead,
+        dismiss,
+      }}
+    >
+      {children}
+    </NotificationContext.Provider>
+  )
+}
+
+export function useNotifications(): NotificationContextValue {
+  const ctx = useContext(NotificationContext)
+  if (!ctx) {
+    throw new Error("useNotifications must be used within a NotificationProvider")
+  }
+  return ctx
+}
diff --git a/src/types/index.ts b/src/types/index.ts
index a23c635..42096d1 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -1,77 +1,99 @@
-export type LeadStatus = "open" | "contacted" | "pending" | "closed" | "ignored"
-export type UserRole = "super_admin" | "admin" | "sales_user" | "developer"
+export type LeadStatus =
+  | "open"
+  | "contacted"
+  | "pending"
+  | "closed"
+  | "ignored";
+export type UserRole = "super_admin" | "admin" | "sales";
 
 export interface User {
-  id: string
-  name: string
-  email: string
-  role: UserRole
-  active: boolean
-  avatar: string
-  createdAt: string
+  id: string;
+  name: string;
+  email: string;
+  role: UserRole;
+  active: boolean;
+  avatar: string;
+  createdAt: string;
 }
 
 export interface Lead {
-  id: string
-  companyName: string
-  contactName: string
-  email: string
-  phone: string
-  source: string
-  description: string
-  status: LeadStatus
-  assignedUserId: string | null
-  assignedUser: User | null
-  createdAt: string
-  updatedAt: string
+  id: string;
+  companyName: string;
+  contactName: string;
+  email: string;
+  phone: string;
+  source: string;
+  description: string;
+  status: LeadStatus;
+  assignedUserId: string | null;
+  assignedUser: User | null;
+  createdAt: string;
+  updatedAt: string;
 }
 
 export interface Note {
-  id: string
-  leadId: string
-  userId: string
-  authorName: string
-  authorAvatar: string
-  authorRole: UserRole
-  note: string
-  createdAt: string
-  updatedAt: string
+  id: string;
+  leadId: string;
+  userId: string;
+  authorName: string;
+  authorAvatar: string;
+  authorRole: UserRole;
+  note: string;
+  createdAt: string;
+  updatedAt: string;
 }
 
 export interface DashboardStats {
-  totalLeads: number
-  openLeads: number
-  contactedLeads: number
-  pendingLeads: number
-  closedLeads: number
-  ignoredLeads: number
-  conversionRate: number
-  leadsPerMonth: { label: string; leads: number; closed: number }[]
-  recentLeads: Lead[]
-  statusDistribution: { name: string; value: number; color: string }[]
-  periodLabel: string
+  totalLeads: number;
+  openLeads: number;
+  contactedLeads: number;
+  pendingLeads: number;
+  closedLeads: number;
+  ignoredLeads: number;
+  conversionRate: number;
+  leadsPerMonth: { label: string; leads: number; closed: number }[];
+  recentLeads: Lead[];
+  statusDistribution: { name: string; value: number; color: string }[];
+  periodLabel: string;
 }
 
 export interface ColumnFilter {
-  id: string
-  value: unknown
+  id: string;
+  value: unknown;
+}
+
+export type NotificationType =
+  | "lead_created"
+  | "lead_status_changed"
+  | "lead_assigned"
+  | "chat_message"
+  | "note_added";
+
+export interface Notification {
+  id: string;
+  type: NotificationType;
+  title: string;
+  description: string;
+  timestamp: string;
+  read: boolean;
+  link?: string;
 }
 
 export interface ChatMessage {
-  id: string
-  conversationId: string
-  senderId: string
-  senderName: string
-  senderAvatar: string
-  content: string
-  timestamp: string
+  id: string;
+  conversationId: string;
+  senderId: string;
+  senderName: string;
+  senderAvatar: string;
+  content: string;
+  timestamp: string;
 }
 
 export interface Conversation {
-  id: string
-  participants: { id: string; name: string; avatar: string; role: string }[]
-  lastMessage: string
-  lastMessageTime: string
-  unread: number
-  messages: ChatMessage[]
+  id: string;
+  participants: { id: string; name: string; avatar: string; role: string }[];
+  lastMessage: string;
+  lastMessageTime: string;
+  unread: number;
+  messages: ChatMessage[];
 }