diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..fce8d56
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,6 @@
+node_modules
+client/node_modules
+client/build
+*.db
+.env
+.git
diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..3d528e4
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,3 @@
+PORT=5000
+JWT_SECRET=change-this-to-a-random-secret-string
+NODE_ENV=development
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..e3f76e5
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,6 @@
+node_modules/
+client/node_modules/
+client/build/
+.env
+*.db
+.DS_Store
diff --git a/Dockerfile b/Dockerfile
new file mode 100644
index 0000000..6dc26e5
--- /dev/null
+++ b/Dockerfile
@@ -0,0 +1,22 @@
+FROM node:20-alpine
+
+WORKDIR /app
+
+# Install backend dependencies
+COPY package.json package-lock.json* ./
+RUN npm install --production
+
+# Install and build frontend
+COPY client/package.json client/package-lock.json* ./client/
+RUN cd client && npm install
+COPY client/ ./client/
+RUN cd client && npm run build
+
+# Copy backend
+COPY server/ ./server/
+
+ENV NODE_ENV=production
+ENV PORT=5000
+EXPOSE 5000
+
+CMD ["node", "server/index.js"]
diff --git a/SETUP.md b/SETUP.md
new file mode 100644
index 0000000..2e200cd
--- /dev/null
+++ b/SETUP.md
@@ -0,0 +1,139 @@
+# CRM Dashboard — Setup & Deployment Guide
+
+## Quick Start (Local Development)
+
+### Prerequisites
+- Node.js 18+
+- npm
+
+### 1. Install dependencies
+```bash
+npm run install-all
+```
+
+### 2. Configure environment
+```bash
+cp .env.example .env
+# Edit .env and set a strong JWT_SECRET
+```
+
+### 3. Run development servers
+```bash
+npm run dev
+```
+
+This starts:
+- Backend API on http://localhost:5000
+- React dev server on http://localhost:3000 (proxied to backend)
+
+### Default Login
+- Email: `admin@crm.local`
+- Password: `admin123`
+
+> Change the default password after first login by registering a new account.
+
+---
+
+## Project Structure
+
+```
+├── server/
+│   ├── index.js              # Express entry point
+│   ├── database.js           # SQLite setup & schema
+│   ├── middleware/
+│   │   └── auth.js           # JWT auth middleware
+│   └── routes/
+│       ├── auth.js           # Login/register
+│       ├── leads.js          # Lead CRUD + follow-up + bulk ops
+│       ├── kpi.js            # Dashboard analytics
+│       ├── targets.js        # Monthly target management
+│       └── csv.js            # CSV import/export
+├── client/
+│   ├── public/index.html     # Tailwind CSS via CDN
+│   └── src/
+│       ├── App.js            # Router setup
+│       ├── api.js            # API helper (fetch + auth)
+│       ├── context/
+│       │   └── AuthContext.js # Auth state management
+│       ├── components/
+│       │   ├── Layout.js     # Sidebar navigation
+│       │   └── LeadModal.js  # Add/edit lead form
+│       └── pages/
+│           ├── LoginPage.js
+│           ├── DashboardPage.js
+│           ├── LeadsPage.js
+│           ├── PipelinePage.js
+│           ├── FollowUpsPage.js
+│           ├── TargetsPage.js
+│           └── ImportExportPage.js
+├── Dockerfile
+├── .env.example
+└── package.json
+```
+
+---
+
+## Features
+
+| Feature | Description |
+|---------|-------------|
+| **Lead Database** | Full table view with search, filter by status/source, sortable columns, pagination |
+| **Pipeline (Kanban)** | Drag-and-drop cards between status columns |
+| **KPI Dashboard** | Stats cards, conversion funnel, monthly progress vs targets |
+| **Follow-up System** | Shows overdue/today follow-ups, mark done & schedule next |
+| **Monthly Targets** | Set targets per month, track progress on dashboard |
+| **CSV Import/Export** | Download leads as CSV, upload CSV to bulk-import |
+| **Authentication** | Email + password login with JWT tokens |
+
+---
+
+## Deployment Options
+
+### Option 1: Docker
+```bash
+docker build -t crm-dashboard .
+docker run -p 5000:5000 -e JWT_SECRET=your-secret -v crm-data:/app crm-dashboard
+```
+
+### Option 2: Production Build
+```bash
+npm run build          # Build React frontend
+npm start              # Serve everything from Express
+```
+
+### Option 3: Railway / Render / Fly.io
+1. Push to a Git repo
+2. Connect to your deployment platform
+3. Set environment variables:
+   - `JWT_SECRET` — a random string
+   - `NODE_ENV` — `production`
+   - `PORT` — usually auto-assigned
+4. Build command: `npm run install-all && npm run build`
+5. Start command: `npm start`
+
+---
+
+## API Reference
+
+All API routes require `Authorization: Bearer <token>` header (except auth endpoints).
+
+| Method | Path | Description |
+|--------|------|-------------|
+| POST | `/api/auth/register` | Register new user |
+| POST | `/api/auth/login` | Login |
+| GET | `/api/auth/me` | Get current user |
+| GET | `/api/leads` | List leads (with filters, sorting, pagination) |
+| POST | `/api/leads` | Create lead |
+| GET | `/api/leads/:id` | Get lead details + activity log |
+| PUT | `/api/leads/:id` | Update lead |
+| DELETE | `/api/leads/:id` | Delete lead |
+| POST | `/api/leads/:id/followup` | Mark follow-up done |
+| PATCH | `/api/leads/bulk-status` | Bulk status update |
+| GET | `/api/kpi/overview` | Dashboard overview stats |
+| GET | `/api/kpi/daily` | Daily stats (charts) |
+| GET | `/api/kpi/funnel` | Conversion funnel |
+| GET | `/api/kpi/monthly-progress` | Progress vs targets |
+| GET | `/api/targets/:month` | Get monthly target |
+| PUT | `/api/targets/:month` | Set monthly target |
+| GET | `/api/csv/export` | Export leads as CSV |
+| POST | `/api/csv/import` | Import leads from CSV |
diff --git a/client/package.json b/client/package.json
new file mode 100644
index 0000000..c4c4350
--- /dev/null
+++ b/client/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "crm-dashboard-client",
+  "version": "1.0.0",
+  "private": true,
+  "proxy": "http://localhost:5000",
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.0",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "browserslist": {
+    "production": [">0.2%", "not dead", "not op_mini all"],
+    "development": ["last 1 chrome version", "last 1 firefox version", "last 1 safari version"]
+  }
+}
diff --git a/client/public/index.html b/client/public/index.html
new file mode 100644
index 0000000..033e3cb
--- /dev/null
+++ b/client/public/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>CRM Dashboard — Intui.travel BD</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script>
+    tailwind.config = {
+      theme: {
+        extend: {
+          colors: {
+            primary: { 50: '#eff6ff', 100: '#dbeafe', 200: '#bfdbfe', 300: '#93c5fd', 400: '#60a5fa', 500: '#3b82f6', 600: '#2563eb', 700: '#1d4ed8', 800: '#1e40af', 900: '#1e3a8a' },
+          }
+        }
+      }
+    }
+  </script>
+  <style>
+    .kanban-column { min-height: 400px; }
+    .drag-over { background-color: #eff6ff; border-color: #3b82f6; }
+  </style>
+</head>
+<body class="bg-gray-50">
+  <div id="root"></div>
+</body>
+</html>
diff --git a/client/src/App.js b/client/src/App.js
new file mode 100644
index 0000000..eab11b0
--- /dev/null
+++ b/client/src/App.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { AuthProvider, useAuth } from './context/AuthContext';
+import Layout from './components/Layout';
+import LoginPage from './pages/LoginPage';
+import DashboardPage from './pages/DashboardPage';
+import LeadsPage from './pages/LeadsPage';
+import PipelinePage from './pages/PipelinePage';
+import FollowUpsPage from './pages/FollowUpsPage';
+import ImportExportPage from './pages/ImportExportPage';
+import TargetsPage from './pages/TargetsPage';
+
+function ProtectedRoute({ children }) {
+  const { user, loading } = useAuth();
+  if (loading) return <div className="flex items-center justify-center h-screen"><div className="text-gray-500">Loading...</div></div>;
+  if (!user) return <Navigate to="/login" />;
+  return children;
+}
+
+function App() {
+  return (
+    <AuthProvider>
+      <BrowserRouter>
+        <Routes>
+          <Route path="/login" element={<LoginPage />} />
+          <Route path="/" element={<ProtectedRoute><Layout /></ProtectedRoute>}>
+            <Route index element={<DashboardPage />} />
+            <Route path="leads" element={<LeadsPage />} />
+            <Route path="pipeline" element={<PipelinePage />} />
+            <Route path="followups" element={<FollowUpsPage />} />
+            <Route path="import-export" element={<ImportExportPage />} />
+            <Route path="targets" element={<TargetsPage />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
+    </AuthProvider>
+  );
+}
+
+export default App;
diff --git a/client/src/api.js b/client/src/api.js
new file mode 100644
index 0000000..be02180
--- /dev/null
+++ b/client/src/api.js
@@ -0,0 +1,43 @@
+const API = process.env.REACT_APP_API_URL || '';
+
+export async function apiFetch(path, options = {}) {
+  const token = localStorage.getItem('crm_token');
+  const headers = { 'Content-Type': 'application/json', ...options.headers };
+  if (token) headers['Authorization'] = `Bearer ${token}`;
+
+  const res = await fetch(`${API}${path}`, { ...options, headers });
+
+  if (res.status === 401) {
+    localStorage.removeItem('crm_token');
+    window.location.href = '/login';
+    throw new Error('Unauthorized');
+  }
+
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error || `Request failed (${res.status})`);
+  }
+
+  if (res.headers.get('content-type')?.includes('text/csv')) {
+    return res.text();
+  }
+  return res.json();
+}
+
+export async function apiUpload(path, file) {
+  const token = localStorage.getItem('crm_token');
+  const formData = new FormData();
+  formData.append('file', file);
+
+  const res = await fetch(`${API}${path}`, {
+    method: 'POST',
+    headers: { Authorization: `Bearer ${token}` },
+    body: formData,
+  });
+
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.error || 'Upload failed');
+  }
+  return res.json();
+}
diff --git a/client/src/components/Layout.js b/client/src/components/Layout.js
new file mode 100644
index 0000000..2b2b87b
--- /dev/null
+++ b/client/src/components/Layout.js
@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Outlet, NavLink, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const navItems = [
+  { to: '/', label: 'Dashboard', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-4 0h4' },
+  { to: '/leads', label: 'Leads', icon: 'M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z' },
+  { to: '/pipeline', label: 'Pipeline', icon: 'M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2' },
+  { to: '/followups', label: 'Follow-ups', icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z' },
+  { to: '/targets', label: 'Targets', icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z' },
+  { to: '/import-export', label: 'CSV', icon: 'M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10' },
+];
+
+export default function Layout() {
+  const { user, logout } = useAuth();
+  const navigate = useNavigate();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+
+  const handleLogout = () => { logout(); navigate('/login'); };
+
+  const linkClass = ({ isActive }) =>
+    `flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+      isActive ? 'bg-primary-600 text-white' : 'text-gray-600 hover:bg-gray-100 hover:text-gray-900'
+    }`;
+
+  const sidebar = (
+    <div className="flex flex-col h-full">
+      <div className="px-4 py-5 border-b border-gray-200">
+        <h1 className="text-lg font-bold text-gray-900">CRM Dashboard</h1>
+        <p className="text-xs text-gray-500 mt-0.5">Intui.travel BD</p>
+      </div>
+      <nav className="flex-1 px-3 py-4 space-y-1">
+        {navItems.map(item => (
+          <NavLink key={item.to} to={item.to} end={item.to === '/'} className={linkClass} onClick={() => setSidebarOpen(false)}>
+            <svg className="w-5 h-5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d={item.icon} />
+            </svg>
+            {item.label}
+          </NavLink>
+        ))}
+      </nav>
+      <div className="px-3 py-4 border-t border-gray-200">
+        <div className="text-sm text-gray-700 font-medium mb-2 px-3">{user?.name}</div>
+        <button onClick={handleLogout} className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-red-600 hover:bg-red-50 w-full">
+          <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
+          </svg>
+          Sign out
+        </button>
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="flex h-screen">
+      {/* Mobile overlay */}
+      {sidebarOpen && (
+        <div className="fixed inset-0 bg-black/30 z-40 lg:hidden" onClick={() => setSidebarOpen(false)} />
+      )}
+
+      {/* Sidebar */}
+      <aside className={`fixed inset-y-0 left-0 z-50 w-64 bg-white border-r border-gray-200 transform transition-transform lg:relative lg:translate-x-0 ${sidebarOpen ? 'translate-x-0' : '-translate-x-full'}`}>
+        {sidebar}
+      </aside>
+
+      {/* Main content */}
+      <div className="flex-1 flex flex-col min-w-0">
+        <header className="bg-white border-b border-gray-200 px-4 py-3 flex items-center gap-4 lg:hidden">
+          <button onClick={() => setSidebarOpen(true)} className="p-1 rounded hover:bg-gray-100">
+            <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+            </svg>
+          </button>
+          <h1 className="text-lg font-bold text-gray-900">CRM Dashboard</h1>
+        </header>
+        <main className="flex-1 overflow-auto p-4 lg:p-6">
+          <Outlet />
+        </main>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/components/LeadModal.js b/client/src/components/LeadModal.js
new file mode 100644
index 0000000..7bb7369
--- /dev/null
+++ b/client/src/components/LeadModal.js
@@ -0,0 +1,132 @@
+import React, { useState, useEffect } from 'react';
+
+const SOURCES = ['Google Maps', 'LinkedIn', 'Event', 'Referral', 'Email Outreach', 'Other'];
+const STATUSES = ['New', 'Contacted', 'Replied', 'Registered', 'Activated', 'Rejected'];
+
+export default function LeadModal({ lead, onClose, onSave }) {
+  const [form, setForm] = useState({
+    company_name: '', country: '', city: '', contact_person: '', email: '',
+    linkedin: '', source: 'Other', status: 'New', notes: '',
+    last_contact_date: '', next_followup_date: '',
+  });
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (lead) {
+      setForm({
+        company_name: lead.company_name || '',
+        country: lead.country || '',
+        city: lead.city || '',
+        contact_person: lead.contact_person || '',
+        email: lead.email || '',
+        linkedin: lead.linkedin || '',
+        source: lead.source || 'Other',
+        status: lead.status || 'New',
+        notes: lead.notes || '',
+        last_contact_date: lead.last_contact_date || '',
+        next_followup_date: lead.next_followup_date || '',
+      });
+    }
+  }, [lead]);
+
+  const set = (field) => (e) => setForm(prev => ({ ...prev, [field]: e.target.value }));
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    if (!form.company_name.trim()) { setError('Company name is required'); return; }
+    setSaving(true);
+    setError('');
+    try {
+      await onSave(form);
+      onClose();
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={onClose}>
+      <div className="bg-white rounded-2xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-auto" onClick={e => e.stopPropagation()}>
+        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
+          <h3 className="text-lg font-semibold text-gray-900">{lead ? 'Edit Lead' : 'Add New Lead'}</h3>
+          <button onClick={onClose} className="text-gray-400 hover:text-gray-600">
+            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
+          </button>
+        </div>
+        <form onSubmit={handleSubmit} className="p-6 space-y-4">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Company Name *</label>
+              <input type="text" value={form.company_name} onChange={set('company_name')} required
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Contact Person</label>
+              <input type="text" value={form.contact_person} onChange={set('contact_person')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Country</label>
+              <input type="text" value={form.country} onChange={set('country')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">City</label>
+              <input type="text" value={form.city} onChange={set('city')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
+              <input type="email" value={form.email} onChange={set('email')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">LinkedIn Profile</label>
+              <input type="url" value={form.linkedin} onChange={set('linkedin')} placeholder="https://linkedin.com/in/..."
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Source</label>
+              <select value={form.source} onChange={set('source')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-sm">
+                {SOURCES.map(s => <option key={s} value={s}>{s}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Status</label>
+              <select value={form.status} onChange={set('status')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-sm">
+                {STATUSES.map(s => <option key={s} value={s}>{s}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Last Contact Date</label>
+              <input type="date" value={form.last_contact_date} onChange={set('last_contact_date')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-sm" />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Next Follow-up Date</label>
+              <input type="date" value={form.next_followup_date} onChange={set('next_followup_date')}
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-sm" />
+            </div>
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Notes</label>
+            <textarea value={form.notes} onChange={set('notes')} rows={3}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none text-sm resize-none" />
+          </div>
+          {error && <p className="text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg">{error}</p>}
+          <div className="flex justify-end gap-3 pt-2">
+            <button type="button" onClick={onClose} className="px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
+            <button type="submit" disabled={saving} className="px-4 py-2 text-sm text-white bg-primary-600 rounded-lg hover:bg-primary-700 disabled:opacity-50">
+              {saving ? 'Saving...' : lead ? 'Update Lead' : 'Add Lead'}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/context/AuthContext.js b/client/src/context/AuthContext.js
new file mode 100644
index 0000000..819cb83
--- /dev/null
+++ b/client/src/context/AuthContext.js
@@ -0,0 +1,49 @@
+import React, { createContext, useContext, useState, useEffect } from 'react';
+
+const AuthContext = createContext(null);
+
+const API = process.env.REACT_APP_API_URL || '';
+
+export function AuthProvider({ children }) {
+  const [user, setUser] = useState(null);
+  const [token, setToken] = useState(localStorage.getItem('crm_token'));
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    if (token) {
+      fetch(`${API}/api/auth/me`, {
+        headers: { Authorization: `Bearer ${token}` },
+      })
+        .then(res => {
+          if (!res.ok) throw new Error('Invalid token');
+          return res.json();
+        })
+        .then(data => { setUser(data); setLoading(false); })
+        .catch(() => { logout(); setLoading(false); });
+    } else {
+      setLoading(false);
+    }
+  }, [token]);
+
+  function login(tokenValue, userData) {
+    localStorage.setItem('crm_token', tokenValue);
+    setToken(tokenValue);
+    setUser(userData);
+  }
+
+  function logout() {
+    localStorage.removeItem('crm_token');
+    setToken(null);
+    setUser(null);
+  }
+
+  return (
+    <AuthContext.Provider value={{ user, token, loading, login, logout }}>
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth() {
+  return useContext(AuthContext);
+}
diff --git a/client/src/index.js b/client/src/index.js
new file mode 100644
index 0000000..593edf1
--- /dev/null
+++ b/client/src/index.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
diff --git a/client/src/pages/DashboardPage.js b/client/src/pages/DashboardPage.js
new file mode 100644
index 0000000..ac8d544
--- /dev/null
+++ b/client/src/pages/DashboardPage.js
@@ -0,0 +1,128 @@
+import React, { useState, useEffect } from 'react';
+import { apiFetch } from '../api';
+
+const STATUS_COLORS = {
+  New: 'bg-blue-100 text-blue-800',
+  Contacted: 'bg-yellow-100 text-yellow-800',
+  Replied: 'bg-purple-100 text-purple-800',
+  Registered: 'bg-green-100 text-green-800',
+  Activated: 'bg-emerald-100 text-emerald-800',
+  Rejected: 'bg-red-100 text-red-800',
+};
+
+export default function DashboardPage() {
+  const [overview, setOverview] = useState(null);
+  const [funnel, setFunnel] = useState(null);
+  const [progress, setProgress] = useState(null);
+  const [month, setMonth] = useState(new Date().toISOString().slice(0, 7));
+
+  useEffect(() => {
+    apiFetch('/api/kpi/overview').then(setOverview);
+    apiFetch(`/api/kpi/funnel?month=${month}`).then(setFunnel);
+    apiFetch(`/api/kpi/monthly-progress?month=${month}`).then(setProgress);
+  }, [month]);
+
+  if (!overview) return <div className="text-gray-500">Loading dashboard...</div>;
+
+  const statCards = [
+    { label: 'Total Leads', value: overview.total, color: 'bg-blue-500' },
+    { label: 'New Today', value: overview.new_today, color: 'bg-green-500' },
+    { label: 'Overdue Follow-ups', value: overview.overdue_followups, color: 'bg-red-500' },
+  ];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-bold text-gray-900">Dashboard</h2>
+        <input type="month" value={month} onChange={e => setMonth(e.target.value)}
+          className="px-3 py-1.5 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 outline-none" />
+      </div>
+
+      {/* Stat cards */}
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+        {statCards.map(card => (
+          <div key={card.label} className="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
+            <p className="text-sm text-gray-500">{card.label}</p>
+            <p className="text-3xl font-bold text-gray-900 mt-1">{card.value}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Status breakdown */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
+        <h3 className="text-sm font-semibold text-gray-700 mb-3">Leads by Status</h3>
+        <div className="flex flex-wrap gap-3">
+          {['New', 'Contacted', 'Replied', 'Registered', 'Activated', 'Rejected'].map(status => (
+            <div key={status} className={`px-4 py-2 rounded-lg ${STATUS_COLORS[status]}`}>
+              <span className="font-semibold text-lg">{overview.by_status[status] || 0}</span>
+              <span className="text-sm ml-1.5">{status}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Conversion Funnel */}
+      {funnel && (
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
+          <h3 className="text-sm font-semibold text-gray-700 mb-4">Conversion Funnel ({month})</h3>
+          <div className="space-y-3">
+            {['New', 'Contacted', 'Replied', 'Registered', 'Activated'].map(stage => {
+              const count = funnel.funnel[stage] || 0;
+              const pct = funnel.total > 0 ? (count / funnel.total * 100) : 0;
+              return (
+                <div key={stage} className="flex items-center gap-3">
+                  <span className="text-sm text-gray-600 w-24">{stage}</span>
+                  <div className="flex-1 bg-gray-100 rounded-full h-6 relative overflow-hidden">
+                    <div className="bg-primary-500 h-full rounded-full transition-all" style={{ width: `${Math.max(pct, 2)}%` }} />
+                    <span className="absolute inset-0 flex items-center justify-center text-xs font-medium">{count} ({pct.toFixed(1)}%)</span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          {funnel.rates && (
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3 mt-4 pt-4 border-t border-gray-100">
+              {Object.entries(funnel.rates).map(([key, val]) => (
+                <div key={key} className="text-center">
+                  <p className="text-xl font-bold text-primary-600">{val}%</p>
+                  <p className="text-xs text-gray-500 capitalize">{key.replace(/_/g, ' ')}</p>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Monthly Progress vs Target */}
+      {progress && (
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-5">
+          <h3 className="text-sm font-semibold text-gray-700 mb-4">Monthly Progress vs Target ({progress.month})</h3>
+          <div className="space-y-3">
+            {[
+              { label: 'Leads Added', actual: progress.actual.leads, target: progress.target.target_leads },
+              { label: 'Contacted', actual: progress.actual.contacted, target: progress.target.target_contacted },
+              { label: 'Replied', actual: progress.actual.replied, target: progress.target.target_replied },
+              { label: 'Registered', actual: progress.actual.registered, target: progress.target.target_registered },
+              { label: 'Activated', actual: progress.actual.activated, target: progress.target.target_activated },
+            ].map(item => {
+              const pct = item.target > 0 ? Math.min((item.actual / item.target * 100), 100) : 0;
+              const isOnTrack = item.target === 0 || item.actual >= item.target;
+              return (
+                <div key={item.label} className="flex items-center gap-3">
+                  <span className="text-sm text-gray-600 w-24">{item.label}</span>
+                  <div className="flex-1 bg-gray-100 rounded-full h-6 relative overflow-hidden">
+                    <div className={`h-full rounded-full transition-all ${isOnTrack ? 'bg-green-500' : 'bg-amber-500'}`} style={{ width: `${Math.max(pct, 2)}%` }} />
+                    <span className="absolute inset-0 flex items-center justify-center text-xs font-medium">
+                      {item.actual} / {item.target || '—'}
+                    </span>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+          <p className="text-xs text-gray-400 mt-3">Set targets in the Targets page</p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/client/src/pages/FollowUpsPage.js b/client/src/pages/FollowUpsPage.js
new file mode 100644
index 0000000..024d956
--- /dev/null
+++ b/client/src/pages/FollowUpsPage.js
@@ -0,0 +1,137 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { apiFetch } from '../api';
+
+const STATUS_COLORS = {
+  New: 'bg-blue-100 text-blue-700',
+  Contacted: 'bg-yellow-100 text-yellow-700',
+  Replied: 'bg-purple-100 text-purple-700',
+  Registered: 'bg-green-100 text-green-700',
+  Activated: 'bg-emerald-100 text-emerald-700',
+  Rejected: 'bg-red-100 text-red-700',
+};
+
+export default function FollowUpsPage() {
+  const [leads, setLeads] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [followupModal, setFollowupModal] = useState(null);
+  const [nextDate, setNextDate] = useState('');
+  const [notes, setNotes] = useState('');
+  const [saving, setSaving] = useState(false);
+
+  const today = new Date().toISOString().split('T')[0];
+
+  const fetchFollowups = useCallback(async () => {
+    setLoading(true);
+    // Fetch all non-terminal leads and filter those with overdue/today followups
+    const data = await apiFetch('/api/leads?limit=200&sort_by=next_followup_date&sort_order=ASC');
+    const filtered = data.leads.filter(
+      l => l.next_followup_date && l.next_followup_date <= today && !['Activated', 'Rejected'].includes(l.status)
+    );
+    setLeads(filtered);
+    setLoading(false);
+  }, [today]);
+
+  useEffect(() => { fetchFollowups(); }, [fetchFollowups]);
+
+  async function handleFollowupDone() {
+    if (!followupModal) return;
+    setSaving(true);
+    await apiFetch(`/api/leads/${followupModal.id}/followup`, {
+      method: 'POST',
+      body: JSON.stringify({ next_followup_date: nextDate || null, notes }),
+    });
+    setSaving(false);
+    setFollowupModal(null);
+    setNextDate('');
+    setNotes('');
+    fetchFollowups();
+  }
+
+  function openFollowup(lead) {
+    setFollowupModal(lead);
+    // Default next followup to 3 days from now
+    const d = new Date();
+    d.setDate(d.getDate() + 3);
+    setNextDate(d.toISOString().split('T')[0]);
+    setNotes('');
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-bold text-gray-900">Follow-ups Due</h2>
+        <span className="text-sm text-gray-500">Today: {today}</span>
+      </div>
+
+      {loading ? (
+        <p className="text-gray-500">Loading...</p>
+      ) : leads.length === 0 ? (
+        <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8 text-center">
+          <p className="text-gray-500 text-lg">No follow-ups due today</p>
+          <p className="text-gray-400 text-sm mt-1">All caught up!</p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {leads.map(lead => {
+            const isOverdue = lead.next_followup_date < today;
+            return (
+              <div key={lead.id} className={`bg-white rounded-xl shadow-sm border ${isOverdue ? 'border-red-300' : 'border-gray-200'} p-4 flex flex-wrap items-center gap-4`}>
+                <div className="flex-1 min-w-0">
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-medium text-gray-900">{lead.company_name}</h3>
+                    <span className={`px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[lead.status]}`}>{lead.status}</span>
+                    {isOverdue && <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-700">Overdue</span>}
+                  </div>
+                  <p className="text-sm text-gray-500 mt-0.5">
+                    {lead.contact_person || 'No contact'} &middot; {lead.email || 'No email'} &middot; {lead.source}
+                  </p>
+                  <p className="text-sm text-gray-400 mt-0.5">
+                    Follow-up scheduled: {lead.next_followup_date}
+                    {lead.last_contact_date && ` &middot; Last contact: ${lead.last_contact_date}`}
+                  </p>
+                  {lead.notes && <p className="text-xs text-gray-400 mt-1 truncate">Notes: {lead.notes}</p>}
+                </div>
+                <button onClick={() => openFollowup(lead)}
+                  className="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700 flex-shrink-0">
+                  Mark Done
+                </button>
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Follow-up Modal */}
+      {followupModal && (
+        <div className="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" onClick={() => setFollowupModal(null)}>
+          <div className="bg-white rounded-2xl shadow-xl w-full max-w-md" onClick={e => e.stopPropagation()}>
+            <div className="px-6 py-4 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">Complete Follow-up</h3>
+              <p className="text-sm text-gray-500">{followupModal.company_name}</p>
+            </div>
+            <div className="p-6 space-y-4">
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Schedule Next Follow-up</label>
+                <input type="date" value={nextDate} onChange={e => setNextDate(e.target.value)}
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-sm" />
+                <p className="text-xs text-gray-400 mt-1">Leave empty if no further follow-up needed</p>
+              </div>
+              <div>
+                <label className="block text-sm font-medium text-gray-700 mb-1">Notes (optional)</label>
+                <textarea value={notes} onChange={e => setNotes(e.target.value)} rows={3} placeholder="What happened during this follow-up..."
+                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-sm resize-none" />
+              </div>
+              <div className="flex justify-end gap-3">
+                <button onClick={() => setFollowupModal(null)} className="px-4 py-2 text-sm text-gray-700 border border-gray-300 rounded-lg hover:bg-gray-50">Cancel</button>
+                <button onClick={handleFollowupDone} disabled={saving}
+                  className="px-4 py-2 text-sm text-white bg-primary-600 rounded-lg hover:bg-primary-700 disabled:opacity-50">
+                  {saving ? 'Saving...' : 'Mark Done & Schedule'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/client/src/pages/ImportExportPage.js b/client/src/pages/ImportExportPage.js
new file mode 100644
index 0000000..72e3514
--- /dev/null
+++ b/client/src/pages/ImportExportPage.js
@@ -0,0 +1,128 @@
+import React, { useState, useRef } from 'react';
+import { apiFetch, apiUpload } from '../api';
+
+const API = process.env.REACT_APP_API_URL || '';
+
+export default function ImportExportPage() {
+  const [importResult, setImportResult] = useState(null);
+  const [importing, setImporting] = useState(false);
+  const [exportStatus, setExportStatus] = useState('');
+  const [exportFilter, setExportFilter] = useState('');
+  const fileRef = useRef();
+
+  async function handleImport(e) {
+    e.preventDefault();
+    const file = fileRef.current?.files?.[0];
+    if (!file) return;
+
+    setImporting(true);
+    setImportResult(null);
+    try {
+      const result = await apiUpload('/api/csv/import', file);
+      setImportResult(result);
+    } catch (err) {
+      setImportResult({ error: err.message });
+    } finally {
+      setImporting(false);
+      if (fileRef.current) fileRef.current.value = '';
+    }
+  }
+
+  async function handleExport() {
+    setExportStatus('Downloading...');
+    const token = localStorage.getItem('crm_token');
+    const params = exportFilter ? `?status=${encodeURIComponent(exportFilter)}` : '';
+    try {
+      const res = await fetch(`${API}/api/csv/export${params}`, {
+        headers: { Authorization: `Bearer ${token}` },
+      });
+      if (!res.ok) throw new Error('Export failed');
+      const blob = await res.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `leads_export_${new Date().toISOString().split('T')[0]}.csv`;
+      document.body.appendChild(a);
+      a.click();
+      a.remove();
+      URL.revokeObjectURL(url);
+      setExportStatus('Download complete');
+    } catch (err) {
+      setExportStatus(`Error: ${err.message}`);
+    }
+    setTimeout(() => setExportStatus(''), 3000);
+  }
+
+  return (
+    <div className="space-y-6 max-w-2xl">
+      <h2 className="text-xl font-bold text-gray-900">Import & Export</h2>
+
+      {/* Export */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">Export Leads to CSV</h3>
+        <div className="flex flex-wrap items-end gap-3">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Filter by Status (optional)</label>
+            <select value={exportFilter} onChange={e => setExportFilter(e.target.value)}
+              className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 outline-none">
+              <option value="">All Leads</option>
+              {['New', 'Contacted', 'Replied', 'Registered', 'Activated', 'Rejected'].map(s => <option key={s} value={s}>{s}</option>)}
+            </select>
+          </div>
+          <button onClick={handleExport}
+            className="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700">
+            Download CSV
+          </button>
+        </div>
+        {exportStatus && <p className="text-sm text-gray-600 mt-2">{exportStatus}</p>}
+      </div>
+
+      {/* Import */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-200 p-6">
+        <h3 className="text-lg font-semibold text-gray-900 mb-4">Import Leads from CSV</h3>
+        <form onSubmit={handleImport} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">CSV File</label>
+            <input type="file" accept=".csv" ref={fileRef}
+              className="block text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-lg file:border-0 file:text-sm file:font-medium file:bg-primary-50 file:text-primary-700 hover:file:bg-primary-100" />
+          </div>
+          <button type="submit" disabled={importing}
+            className="px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 disabled:opacity-50">
+            {importing ? 'Importing...' : 'Import'}
+          </button>
+        </form>
+
+        {importResult && (
+          <div className={`mt-4 p-4 rounded-lg ${importResult.error ? 'bg-red-50 text-red-700' : 'bg-green-50 text-green-700'}`}>
+            {importResult.error ? (
+              <p>{importResult.error}</p>
+            ) : (
+              <>
+                <p className="font-medium">Import complete</p>
+                <p className="text-sm mt-1">Imported: {importResult.imported} | Skipped: {importResult.skipped}</p>
+                {importResult.errors?.length > 0 && (
+                  <ul className="text-sm mt-2 space-y-0.5">
+                    {importResult.errors.map((err, i) => <li key={i}>{err}</li>)}
+                  </ul>
+                )}
+              </>
+            )}
+          </div>
+        )}
+
+        <div className="mt-4 p-4 bg-gray-50 rounded-lg">
+          <h4 className="text-sm font-medium text-gray-700">Expected CSV Format</h4>
+          <p className="text-xs text-gray-500 mt-1">
+            Headers: Company Name, Country, City, Contact Person, Email, LinkedIn, Source, Status, Notes, Date Added, Last Contact Date, Next Follow-up Date
+          </p>
+          <p className="text-xs text-gray-500 mt-1">
+            Sources: Google Maps, LinkedIn, Event, Referral, Email Outreach, Other
+          </p>
+          <p className="text-xs text-gray-500 mt-1">
+            Statuses: New, Contacted, Replied, Registered, Activated, Rejected
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/LeadsPage.js b/client/src/pages/LeadsPage.js
new file mode 100644
index 0000000..96702d8
--- /dev/null
+++ b/client/src/pages/LeadsPage.js
@@ -0,0 +1,189 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { apiFetch } from '../api';
+import LeadModal from '../components/LeadModal';
+
+const STATUS_COLORS = {
+  New: 'bg-blue-100 text-blue-700',
+  Contacted: 'bg-yellow-100 text-yellow-700',
+  Replied: 'bg-purple-100 text-purple-700',
+  Registered: 'bg-green-100 text-green-700',
+  Activated: 'bg-emerald-100 text-emerald-700',
+  Rejected: 'bg-red-100 text-red-700',
+};
+
+export default function LeadsPage() {
+  const [leads, setLeads] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [page, setPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [search, setSearch] = useState('');
+  const [filterStatus, setFilterStatus] = useState('');
+  const [filterSource, setFilterSource] = useState('');
+  const [sortBy, setSortBy] = useState('date_added');
+  const [sortOrder, setSortOrder] = useState('DESC');
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingLead, setEditingLead] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  const fetchLeads = useCallback(async () => {
+    setLoading(true);
+    const params = new URLSearchParams({ page, limit: 25, sort_by: sortBy, sort_order: sortOrder });
+    if (search) params.set('search', search);
+    if (filterStatus) params.set('status', filterStatus);
+    if (filterSource) params.set('source', filterSource);
+
+    const data = await apiFetch(`/api/leads?${params}`);
+    setLeads(data.leads);
+    setTotal(data.total);
+    setTotalPages(data.total_pages);
+    setLoading(false);
+  }, [page, search, filterStatus, filterSource, sortBy, sortOrder]);
+
+  useEffect(() => { fetchLeads(); }, [fetchLeads]);
+
+  async function handleSave(form) {
+    if (editingLead) {
+      await apiFetch(`/api/leads/${editingLead.id}`, { method: 'PUT', body: JSON.stringify(form) });
+    } else {
+      await apiFetch('/api/leads', { method: 'POST', body: JSON.stringify(form) });
+    }
+    fetchLeads();
+  }
+
+  async function handleDelete(id) {
+    if (!window.confirm('Delete this lead?')) return;
+    await apiFetch(`/api/leads/${id}`, { method: 'DELETE' });
+    fetchLeads();
+  }
+
+  function handleSort(col) {
+    if (sortBy === col) {
+      setSortOrder(prev => prev === 'ASC' ? 'DESC' : 'ASC');
+    } else {
+      setSortBy(col);
+      setSortOrder('ASC');
+    }
+  }
+
+  const SortIcon = ({ col }) => (
+    sortBy === col ? (
+      <span className="ml-1 text-primary-500">{sortOrder === 'ASC' ? '\u2191' : '\u2193'}</span>
+    ) : null
+  );
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <h2 className="text-xl font-bold text-gray-900">Leads ({total})</h2>
+        <button onClick={() => { setEditingLead(null); setModalOpen(true); }}
+          className="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700">
+          + Add Lead
+        </button>
+      </div>
+
+      {/* Filters */}
+      <div className="flex flex-wrap gap-3">
+        <input type="text" placeholder="Search leads..." value={search} onChange={e => { setSearch(e.target.value); setPage(1); }}
+          className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 outline-none w-64" />
+        <select value={filterStatus} onChange={e => { setFilterStatus(e.target.value); setPage(1); }}
+          className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 outline-none">
+          <option value="">All Statuses</option>
+          {['New', 'Contacted', 'Replied', 'Registered', 'Activated', 'Rejected'].map(s => <option key={s} value={s}>{s}</option>)}
+        </select>
+        <select value={filterSource} onChange={e => { setFilterSource(e.target.value); setPage(1); }}
+          className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 outline-none">
+          <option value="">All Sources</option>
+          {['Google Maps', 'LinkedIn', 'Event', 'Referral', 'Email Outreach', 'Other'].map(s => <option key={s} value={s}>{s}</option>)}
+        </select>
+      </div>
+
+      {/* Table */}
+      <div className="bg-white rounded-xl shadow-sm border border-gray-200 overflow-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="bg-gray-50 border-b border-gray-200">
+              <th className="text-left px-4 py-3 font-medium text-gray-600 cursor-pointer hover:text-gray-900" onClick={() => handleSort('company_name')}>
+                Company<SortIcon col="company_name" />
+              </th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Contact</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Location</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600">Source</th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600 cursor-pointer hover:text-gray-900" onClick={() => handleSort('status')}>
+                Status<SortIcon col="status" />
+              </th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600 cursor-pointer hover:text-gray-900" onClick={() => handleSort('date_added')}>
+                Added<SortIcon col="date_added" />
+              </th>
+              <th className="text-left px-4 py-3 font-medium text-gray-600 cursor-pointer hover:text-gray-900" onClick={() => handleSort('next_followup_date')}>
+                Follow-up<SortIcon col="next_followup_date" />
+              </th>
+              <th className="px-4 py-3"></th>
+            </tr>
+          </thead>
+          <tbody>
+            {loading ? (
+              <tr><td colSpan={8} className="px-4 py-8 text-center text-gray-500">Loading...</td></tr>
+            ) : leads.length === 0 ? (
+              <tr><td colSpan={8} className="px-4 py-8 text-center text-gray-500">No leads found</td></tr>
+            ) : leads.map(lead => (
+              <tr key={lead.id} className="border-b border-gray-100 hover:bg-gray-50">
+                <td className="px-4 py-3">
+                  <div className="font-medium text-gray-900">{lead.company_name}</div>
+                  {lead.email && <div className="text-xs text-gray-500">{lead.email}</div>}
+                </td>
+                <td className="px-4 py-3">
+                  <div className="text-gray-700">{lead.contact_person || '—'}</div>
+                  {lead.linkedin && (
+                    <a href={lead.linkedin} target="_blank" rel="noopener noreferrer" className="text-xs text-primary-600 hover:underline">LinkedIn</a>
+                  )}
+                </td>
+                <td className="px-4 py-3 text-gray-600">
+                  {[lead.city, lead.country].filter(Boolean).join(', ') || '—'}
+                </td>
+                <td className="px-4 py-3 text-gray-600">{lead.source}</td>
+                <td className="px-4 py-3">
+                  <span className={`inline-block px-2.5 py-0.5 rounded-full text-xs font-medium ${STATUS_COLORS[lead.status]}`}>{lead.status}</span>
+                </td>
+                <td className="px-4 py-3 text-gray-600">{lead.date_added || '—'}</td>
+                <td className="px-4 py-3">
+                  {lead.next_followup_date ? (
+                    <span className={`text-xs font-medium ${new Date(lead.next_followup_date) <= new Date() ? 'text-red-600' : 'text-gray-600'}`}>
+                      {lead.next_followup_date}
+                    </span>
+                  ) : '—'}
+                </td>
+                <td className="px-4 py-3">
+                  <div className="flex gap-1">
+                    <button onClick={() => { setEditingLead(lead); setModalOpen(true); }}
+                      className="p-1.5 text-gray-400 hover:text-primary-600 hover:bg-primary-50 rounded" title="Edit">
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" /></svg>
+                    </button>
+                    <button onClick={() => handleDelete(lead.id)}
+                      className="p-1.5 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded" title="Delete">
+                      <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+                    </button>
+                  </div>
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between">
+          <p className="text-sm text-gray-500">Page {page} of {totalPages}</p>
+          <div className="flex gap-2">
+            <button onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page <= 1}
+              className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50">Previous</button>
+            <button onClick={() => setPage(p => Math.min(totalPages, p + 1))} disabled={page >= totalPages}
+              className="px-3 py-1.5 text-sm border border-gray-300 rounded-lg hover:bg-gray-50 disabled:opacity-50">Next</button>
+          </div>
+        </div>
+      )}
+
+      {modalOpen && <LeadModal lead={editingLead} onClose={() => setModalOpen(false)} onSave={handleSave} />}
+    </div>
+  );
+}
diff --git a/client/src/pages/LoginPage.js b/client/src/pages/LoginPage.js
new file mode 100644
index 0000000..5daa057
--- /dev/null
+++ b/client/src/pages/LoginPage.js
@@ -0,0 +1,94 @@
+import React, { useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+
+const API = process.env.REACT_APP_API_URL || '';
+
+export default function LoginPage() {
+  const [isRegister, setIsRegister] = useState(false);
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const [name, setName] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+  const { login, user } = useAuth();
+  const navigate = useNavigate();
+
+  if (user) { navigate('/'); return null; }
+
+  async function handleSubmit(e) {
+    e.preventDefault();
+    setError('');
+    setLoading(true);
+
+    const endpoint = isRegister ? '/api/auth/register' : '/api/auth/login';
+    const body = isRegister ? { email, password, name } : { email, password };
+
+    try {
+      const res = await fetch(`${API}${endpoint}`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(body),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Request failed');
+      login(data.token, data.user);
+      navigate('/');
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center p-4">
+      <div className="bg-white rounded-2xl shadow-xl w-full max-w-md p-8">
+        <div className="text-center mb-8">
+          <h1 className="text-2xl font-bold text-gray-900">CRM Dashboard</h1>
+          <p className="text-sm text-gray-500 mt-1">Intui.travel Business Development</p>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {isRegister && (
+            <div>
+              <label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
+              <input type="text" value={name} onChange={e => setName(e.target.value)} required
+                className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none" />
+            </div>
+          )}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
+            <input type="email" value={email} onChange={e => setEmail(e.target.value)} required
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none" />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-gray-700 mb-1">Password</label>
+            <input type="password" value={password} onChange={e => setPassword(e.target.value)} required minLength={6}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 outline-none" />
+          </div>
+
+          {error && <p className="text-sm text-red-600 bg-red-50 px-3 py-2 rounded-lg">{error}</p>}
+
+          <button type="submit" disabled={loading}
+            className="w-full bg-primary-600 text-white py-2.5 rounded-lg font-medium hover:bg-primary-700 disabled:opacity-50 transition-colors">
+            {loading ? 'Please wait...' : isRegister ? 'Create Account' : 'Sign In'}
+          </button>
+        </form>
+
+        <p className="text-center text-sm text-gray-500 mt-6">
+          {isRegister ? 'Already have an account?' : "Don't have an account?"}{' '}
+          <button onClick={() => { setIsRegister(!isRegister); setError(''); }} className="text-primary-600 font-medium hover:underline">
+            {isRegister ? 'Sign in' : 'Register'}
+          </button>
+        </p>
+
+        {!isRegister && (
+          <p className="text-center text-xs text-gray-400 mt-4">
+            Default: admin@crm.local / admin123
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/client/src/pages/PipelinePage.js b/client/src/pages/PipelinePage.js
new file mode 100644
index 0000000..c99a59f
--- /dev/null
+++ b/client/src/pages/PipelinePage.js
@@ -0,0 +1,121 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { apiFetch } from '../api';
+import LeadModal from '../components/LeadModal';
+
+const STATUSES = ['New', 'Contacted', 'Replied', 'Registered', 'Activated', 'Rejected'];
+
+const STATUS_COLORS = {
+  New: { bg: 'bg-blue-50', border: 'border-blue-200', header: 'bg-blue-500', badge: 'bg-blue-100 text-blue-700' },
+  Contacted: { bg: 'bg-yellow-50', border: 'border-yellow-200', header: 'bg-yellow-500', badge: 'bg-yellow-100 text-yellow-700' },
+  Replied: { bg: 'bg-purple-50', border: 'border-purple-200', header: 'bg-purple-500', badge: 'bg-purple-100 text-purple-700' },
+  Registered: { bg: 'bg-green-50', border: 'border-green-200', header: 'bg-green-500', badge: 'bg-green-100 text-green-700' },
+  Activated: { bg: 'bg-emerald-50', border: 'border-emerald-200', header: 'bg-emerald-500', badge: 'bg-emerald-100 text-emerald-700' },
+  Rejected: { bg: 'bg-red-50', border: 'border-red-200', header: 'bg-red-500', badge: 'bg-red-100 text-red-700' },
+};
+
+export default function PipelinePage() {
+  const [leadsByStatus, setLeadsByStatus] = useState({});
+  const [draggedLead, setDraggedLead] = useState(null);
+  const [editingLead, setEditingLead] = useState(null);
+  const [modalOpen, setModalOpen] = useState(false);
+
+  const fetchLeads = useCallback(async () => {
+    const grouped = {};
+    for (const status of STATUSES) {
+      const data = await apiFetch(`/api/leads?status=${encodeURIComponent(status)}&limit=100&sort_by=date_added&sort_order=DESC`);
+      grouped[status] = data.leads;
+    }
+    setLeadsByStatus(grouped);
+  }, []);
+
+  useEffect(() => { fetchLeads(); }, [fetchLeads]);
+
+  function handleDragStart(e, lead) {
+    setDraggedLead(lead);
+    e.dataTransfer.effectAllowed = 'move';
+  }
+
+  function handleDragOver(e) {
+    e.preventDefault();
+    e.currentTarget.classList.add('drag-over');
+  }
+
+  function handleDragLeave(e) {
+    e.currentTarget.classList.remove('drag-over');
+  }
+
+  async function handleDrop(e, newStatus) {
+    e.preventDefault();
+    e.currentTarget.classList.remove('drag-over');
+    if (!draggedLead || draggedLead.status === newStatus) return;
+
+    await apiFetch(`/api/leads/${draggedLead.id}`, {
+      method: 'PUT',
+      body: JSON.stringify({ status: newStatus }),
+    });
+    setDraggedLead(null);
+    fetchLeads();
+  }
+
+  async function handleSave(form) {
+    if (editingLead) {
+      await apiFetch(`/api/leads/${editingLead.id}`, { method: 'PUT', body: JSON.stringify(form) });
+    } else {
+      await apiFetch('/api/leads', { method: 'POST', body: JSON.stringify(form) });
+    }
+    fetchLeads();
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-bold text-gray-900">Pipeline</h2>
+        <button onClick={() => { setEditingLead(null); setModalOpen(true); }}
+          className="px-4 py-2 bg-primary-600 text-white text-sm font-medium rounded-lg hover:bg-primary-700">
+          + Add Lead
+        </button>
+      </div>
+
+      <div className="flex gap-4 overflow-x-auto pb-4" style={{ minHeight: '70vh' }}>
+        {STATUSES.map(status => {
+          const leads = leadsByStatus[status] || [];
+          const colors = STATUS_COLORS[status];
+          return (
+            <div key={status}
+              className={`kanban-column flex-shrink-0 w-72 rounded-xl border-2 ${colors.border} ${colors.bg} flex flex-col`}
+              onDragOver={handleDragOver} onDragLeave={handleDragLeave} onDrop={e => handleDrop(e, status)}>
+              <div className={`${colors.header} text-white px-4 py-2.5 rounded-t-lg flex items-center justify-between`}>
+                <span className="font-semibold text-sm">{status}</span>
+                <span className="bg-white/20 px-2 py-0.5 rounded-full text-xs font-bold">{leads.length}</span>
+              </div>
+              <div className="flex-1 p-2 space-y-2 overflow-y-auto">
+                {leads.map(lead => (
+                  <div key={lead.id} draggable onDragStart={e => handleDragStart(e, lead)}
+                    className="bg-white rounded-lg shadow-sm border border-gray-200 p-3 cursor-grab active:cursor-grabbing hover:shadow-md transition-shadow"
+                    onClick={() => { setEditingLead(lead); setModalOpen(true); }}>
+                    <p className="font-medium text-gray-900 text-sm">{lead.company_name}</p>
+                    {lead.contact_person && <p className="text-xs text-gray-500 mt-0.5">{lead.contact_person}</p>}
+                    <div className="flex items-center gap-2 mt-2">
+                      {lead.country && <span className="text-xs text-gray-400">{lead.country}</span>}
+                      <span className="text-xs text-gray-400">{lead.source}</span>
+                    </div>
+                    {lead.next_followup_date && (
+                      <p className={`text-xs mt-1.5 ${new Date(lead.next_followup_date) <= new Date() ? 'text-red-600 font-medium' : 'text-gray-400'}`}>
+                        Follow-up: {lead.next_followup_date}
+                      </p>
+                    )}
+                  </div>
+                ))}
+                {leads.length === 0 && (
+                  <p className="text-center text-xs text-gray-400 py-8">Drop leads here</p>
+                )}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+
+      {modalOpen && <LeadModal lead={editingLead} onClose={() => setModalOpen(false)} onSave={handleSave} />}
+    </div>
+  );
+}
diff --git a/client/src/pages/TargetsPage.js b/client/src/pages/TargetsPage.js
new file mode 100644
index 0000000..253f26f
--- /dev/null
+++ b/client/src/pages/TargetsPage.js
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import { apiFetch } from '../api';
+
+export default function TargetsPage() {
+  const [month, setMonth] = useState(new Date().toISOString().slice(0, 7));
+  const [target, setTarget] = useState({
+    target_leads: 0, target_contacted: 0, target_replied: 0,
+    target_registered: 0, target_activated: 0,
+  });
+  const [saving, setSaving] = useState(false);
+  const [saved, setSaved] = useState(false);
+
+  useEffect(() => {
+    apiFetch(`/api/targets/${month}`).then(data => {
+      setTarget({
+        target_leads: data.target_leads || 0,
+        target_contacted: data.target_contacted || 0,
+        target_replied: data.target_replied || 0,
+        target_registered: data.target_registered || 0,
+        target_activated: data.target_activated || 0,
+      });
+      setSaved(false);
+    });
+  }, [month]);
+
+  async function handleSave(e) {
+    e.preventDefault();
+    setSaving(true);
+    await apiFetch(`/api/targets/${month}`, {
+      method: 'PUT',
+      body: JSON.stringify(target),
+    });
+    setSaving(false);
+    setSaved(true);
+    setTimeout(() => setSaved(false), 2000);
+  }
+
+  const fields = [
+    { key: 'target_leads', label: 'New Leads Target' },
+    { key: 'target_contacted', label: 'Contacted Target' },
+    { key: 'target_replied', label: 'Replies Target' },
+    { key: 'target_registered', label: 'Registrations Target' },
+    { key: 'target_activated', label: 'Activations Target' },
+  ];
+
+  return (
+    <div className="space-y-6 max-w-lg">
+      <h2 className="text-xl font-bold text-gray-900">Monthly Targets</h2>
+
+      <div>
+        <label className="block text-sm font-medium text-gray-700 mb-1">Month</label>
+        <input type="month" value={month} onChange={e => setMonth(e.target.value)}
+          className="px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-primary-500 outline-none" />
+      </div>
+
+      <form onSubmit={handleSave} className="bg-white rounded-xl shadow-sm border border-gray-200 p-6 space-y-4">
+        {fields.map(f => (
+          <div key={f.key}>
+            <label className="block text-sm font-medium text-gray-700 mb-1">{f.label}</label>
+            <input type="number" min={0} value={target[f.key]}
+              onChange={e => setTarget(prev => ({ ...prev, [f.key]: parseInt(e.target.value) || 0 }))}
+              className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 outline-none text-sm" />
+          </div>
+        ))}
+
+        <div className="flex items-center gap-3 pt-2">
+          <button type="submit" disabled={saving}
+            className="px-4 py-2 text-sm text-white bg-primary-600 rounded-lg hover:bg-primary-700 disabled:opacity-50">
+            {saving ? 'Saving...' : 'Save Targets'}
+          </button>
+          {saved && <span className="text-sm text-green-600">Saved!</span>}
+        </div>
+      </form>
+    </div>
+  );
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..6ff25b7
--- /dev/null
+++ b/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "crm-dashboard",
+  "version": "1.0.0",
+  "description": "B2B Sales CRM Dashboard for transport supplier onboarding",
+  "scripts": {
+    "server": "node server/index.js",
+    "client": "cd client && npm start",
+    "dev": "concurrently \"npm run server\" \"npm run client\"",
+    "build": "cd client && npm run build",
+    "start": "NODE_ENV=production node server/index.js",
+    "install-all": "npm install && cd client && npm install"
+  },
+  "dependencies": {
+    "bcryptjs": "^2.4.3",
+    "better-sqlite3": "^11.7.0",
+    "concurrently": "^9.1.0",
+    "cors": "^2.8.5",
+    "csv-parse": "^5.6.0",
+    "csv-stringify": "^6.5.2",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.1",
+    "jsonwebtoken": "^9.0.2",
+    "multer": "^1.4.5-lts.1"
+  }
+}
diff --git a/server/database.js b/server/database.js
new file mode 100644
index 0000000..e1f2765
--- /dev/null
+++ b/server/database.js
@@ -0,0 +1,81 @@
+const Database = require('better-sqlite3');
+const path = require('path');
+const bcrypt = require('bcryptjs');
+
+const dbPath = path.join(__dirname, '..', 'crm.db');
+const db = new Database(dbPath);
+
+db.pragma('journal_mode = WAL');
+db.pragma('foreign_keys = ON');
+
+function initialize() {
+  db.exec(`
+    CREATE TABLE IF NOT EXISTS users (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      email TEXT UNIQUE NOT NULL,
+      password TEXT NOT NULL,
+      name TEXT NOT NULL,
+      created_at TEXT DEFAULT (datetime('now'))
+    );
+
+    CREATE TABLE IF NOT EXISTS leads (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      company_name TEXT NOT NULL,
+      country TEXT DEFAULT '',
+      city TEXT DEFAULT '',
+      contact_person TEXT DEFAULT '',
+      email TEXT DEFAULT '',
+      linkedin TEXT DEFAULT '',
+      source TEXT CHECK(source IN ('Google Maps', 'LinkedIn', 'Event', 'Referral', 'Email Outreach', 'Other')) DEFAULT 'Other',
+      status TEXT CHECK(status IN ('New', 'Contacted', 'Replied', 'Registered', 'Activated', 'Rejected')) DEFAULT 'New',
+      notes TEXT DEFAULT '',
+      date_added TEXT DEFAULT (date('now')),
+      last_contact_date TEXT,
+      next_followup_date TEXT,
+      created_by INTEGER REFERENCES users(id),
+      created_at TEXT DEFAULT (datetime('now')),
+      updated_at TEXT DEFAULT (datetime('now'))
+    );
+
+    CREATE TABLE IF NOT EXISTS targets (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      user_id INTEGER REFERENCES users(id),
+      month TEXT NOT NULL,
+      target_leads INTEGER DEFAULT 0,
+      target_contacted INTEGER DEFAULT 0,
+      target_replied INTEGER DEFAULT 0,
+      target_registered INTEGER DEFAULT 0,
+      target_activated INTEGER DEFAULT 0,
+      UNIQUE(user_id, month)
+    );
+
+    CREATE TABLE IF NOT EXISTS activity_log (
+      id INTEGER PRIMARY KEY AUTOINCREMENT,
+      lead_id INTEGER REFERENCES leads(id) ON DELETE CASCADE,
+      user_id INTEGER REFERENCES users(id),
+      action TEXT NOT NULL,
+      details TEXT DEFAULT '',
+      created_at TEXT DEFAULT (datetime('now'))
+    );
+
+    CREATE INDEX IF NOT EXISTS idx_leads_status ON leads(status);
+    CREATE INDEX IF NOT EXISTS idx_leads_next_followup ON leads(next_followup_date);
+    CREATE INDEX IF NOT EXISTS idx_leads_created_by ON leads(created_by);
+    CREATE INDEX IF NOT EXISTS idx_leads_date_added ON leads(date_added);
+  `);
+
+  // Create a default admin user if none exists
+  const userCount = db.prepare('SELECT COUNT(*) as count FROM users').get();
+  if (userCount.count === 0) {
+    const hash = bcrypt.hashSync('admin123', 10);
+    db.prepare('INSERT INTO users (email, password, name) VALUES (?, ?, ?)').run(
+      'admin@crm.local',
+      hash,
+      'Admin'
+    );
+  }
+}
+
+initialize();
+
+module.exports = db;
diff --git a/server/index.js b/server/index.js
new file mode 100644
index 0000000..be139a9
--- /dev/null
+++ b/server/index.js
@@ -0,0 +1,36 @@
+require('dotenv').config();
+
+const express = require('express');
+const cors = require('cors');
+const path = require('path');
+
+const authRoutes = require('./routes/auth');
+const leadRoutes = require('./routes/leads');
+const kpiRoutes = require('./routes/kpi');
+const targetRoutes = require('./routes/targets');
+const csvRoutes = require('./routes/csv');
+
+const app = express();
+const PORT = process.env.PORT || 5000;
+
+app.use(cors());
+app.use(express.json());
+
+// API routes
+app.use('/api/auth', authRoutes);
+app.use('/api/leads', leadRoutes);
+app.use('/api/kpi', kpiRoutes);
+app.use('/api/targets', targetRoutes);
+app.use('/api/csv', csvRoutes);
+
+// Serve React build in production
+if (process.env.NODE_ENV === 'production') {
+  app.use(express.static(path.join(__dirname, '..', 'client', 'build')));
+  app.get('*', (req, res) => {
+    res.sendFile(path.join(__dirname, '..', 'client', 'build', 'index.html'));
+  });
+}
+
+app.listen(PORT, () => {
+  console.log(`CRM server running on port ${PORT}`);
+});
diff --git a/server/middleware/auth.js b/server/middleware/auth.js
new file mode 100644
index 0000000..4b30ebb
--- /dev/null
+++ b/server/middleware/auth.js
@@ -0,0 +1,21 @@
+const jwt = require('jsonwebtoken');
+
+const JWT_SECRET = process.env.JWT_SECRET || 'dev-secret-change-in-production';
+
+function authMiddleware(req, res, next) {
+  const header = req.headers.authorization;
+  if (!header || !header.startsWith('Bearer ')) {
+    return res.status(401).json({ error: 'Authentication required' });
+  }
+
+  const token = header.split(' ')[1];
+  try {
+    const decoded = jwt.verify(token, JWT_SECRET);
+    req.user = decoded;
+    next();
+  } catch {
+    return res.status(401).json({ error: 'Invalid or expired token' });
+  }
+}
+
+module.exports = { authMiddleware, JWT_SECRET };
diff --git a/server/routes/auth.js b/server/routes/auth.js
new file mode 100644
index 0000000..bfd9da0
--- /dev/null
+++ b/server/routes/auth.js
@@ -0,0 +1,56 @@
+const express = require('express');
+const bcrypt = require('bcryptjs');
+const jwt = require('jsonwebtoken');
+const db = require('../database');
+const { authMiddleware, JWT_SECRET } = require('../middleware/auth');
+
+const router = express.Router();
+
+router.post('/register', (req, res) => {
+  const { email, password, name } = req.body;
+  if (!email || !password || !name) {
+    return res.status(400).json({ error: 'Email, password, and name are required' });
+  }
+
+  const existing = db.prepare('SELECT id FROM users WHERE email = ?').get(email);
+  if (existing) {
+    return res.status(409).json({ error: 'Email already registered' });
+  }
+
+  const hash = bcrypt.hashSync(password, 10);
+  const result = db.prepare('INSERT INTO users (email, password, name) VALUES (?, ?, ?)').run(
+    email, hash, name
+  );
+
+  const token = jwt.sign({ id: result.lastInsertRowid, email, name }, JWT_SECRET, {
+    expiresIn: '7d',
+  });
+
+  res.status(201).json({ token, user: { id: result.lastInsertRowid, email, name } });
+});
+
+router.post('/login', (req, res) => {
+  const { email, password } = req.body;
+  if (!email || !password) {
+    return res.status(400).json({ error: 'Email and password are required' });
+  }
+
+  const user = db.prepare('SELECT * FROM users WHERE email = ?').get(email);
+  if (!user || !bcrypt.compareSync(password, user.password)) {
+    return res.status(401).json({ error: 'Invalid email or password' });
+  }
+
+  const token = jwt.sign({ id: user.id, email: user.email, name: user.name }, JWT_SECRET, {
+    expiresIn: '7d',
+  });
+
+  res.json({ token, user: { id: user.id, email: user.email, name: user.name } });
+});
+
+router.get('/me', authMiddleware, (req, res) => {
+  const user = db.prepare('SELECT id, email, name, created_at FROM users WHERE id = ?').get(req.user.id);
+  if (!user) return res.status(404).json({ error: 'User not found' });
+  res.json(user);
+});
+
+module.exports = router;
diff --git a/server/routes/csv.js b/server/routes/csv.js
new file mode 100644
index 0000000..9fc6073
--- /dev/null
+++ b/server/routes/csv.js
@@ -0,0 +1,132 @@
+const express = require('express');
+const multer = require('multer');
+const { parse } = require('csv-parse/sync');
+const { stringify } = require('csv-stringify/sync');
+const db = require('../database');
+const { authMiddleware } = require('../middleware/auth');
+
+const router = express.Router();
+router.use(authMiddleware);
+
+const upload = multer({ storage: multer.memoryStorage(), limits: { fileSize: 5 * 1024 * 1024 } });
+
+// Export leads as CSV
+router.get('/export', (req, res) => {
+  const { status, source } = req.query;
+
+  const conditions = ['1=1'];
+  const params = [];
+  if (status) { conditions.push('status = ?'); params.push(status); }
+  if (source) { conditions.push('source = ?'); params.push(source); }
+
+  const leads = db.prepare(
+    `SELECT company_name, country, city, contact_person, email, linkedin, source, status, notes, date_added, last_contact_date, next_followup_date FROM leads WHERE ${conditions.join(' AND ')} ORDER BY date_added DESC`
+  ).all(...params);
+
+  const csv = stringify(leads, {
+    header: true,
+    columns: [
+      { key: 'company_name', header: 'Company Name' },
+      { key: 'country', header: 'Country' },
+      { key: 'city', header: 'City' },
+      { key: 'contact_person', header: 'Contact Person' },
+      { key: 'email', header: 'Email' },
+      { key: 'linkedin', header: 'LinkedIn' },
+      { key: 'source', header: 'Source' },
+      { key: 'status', header: 'Status' },
+      { key: 'notes', header: 'Notes' },
+      { key: 'date_added', header: 'Date Added' },
+      { key: 'last_contact_date', header: 'Last Contact Date' },
+      { key: 'next_followup_date', header: 'Next Follow-up Date' },
+    ],
+  });
+
+  res.setHeader('Content-Type', 'text/csv');
+  res.setHeader('Content-Disposition', `attachment; filename=leads_export_${new Date().toISOString().split('T')[0]}.csv`);
+  res.send(csv);
+});
+
+// Import leads from CSV
+router.post('/import', upload.single('file'), (req, res) => {
+  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
+
+  let records;
+  try {
+    records = parse(req.file.buffer.toString(), {
+      columns: true,
+      skip_empty_lines: true,
+      trim: true,
+    });
+  } catch (err) {
+    return res.status(400).json({ error: 'Invalid CSV format' });
+  }
+
+  const validSources = ['Google Maps', 'LinkedIn', 'Event', 'Referral', 'Email Outreach', 'Other'];
+  const validStatuses = ['New', 'Contacted', 'Replied', 'Registered', 'Activated', 'Rejected'];
+
+  const insert = db.prepare(`
+    INSERT INTO leads (company_name, country, city, contact_person, email, linkedin, source, status, notes, date_added, last_contact_date, next_followup_date, created_by)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `);
+
+  const headerMap = {
+    'company name': 'company_name', 'company_name': 'company_name', 'companyname': 'company_name',
+    'country': 'country',
+    'city': 'city',
+    'contact person': 'contact_person', 'contact_person': 'contact_person', 'contactperson': 'contact_person',
+    'email': 'email',
+    'linkedin': 'linkedin',
+    'source': 'source',
+    'status': 'status',
+    'notes': 'notes',
+    'date added': 'date_added', 'date_added': 'date_added', 'dateadded': 'date_added',
+    'last contact date': 'last_contact_date', 'last_contact_date': 'last_contact_date',
+    'next follow-up date': 'next_followup_date', 'next_followup_date': 'next_followup_date', 'next followup date': 'next_followup_date',
+  };
+
+  let imported = 0;
+  let skipped = 0;
+  const errors = [];
+
+  const transaction = db.transaction(() => {
+    for (let i = 0; i < records.length; i++) {
+      const raw = records[i];
+      const row = {};
+      for (const [key, value] of Object.entries(raw)) {
+        const mapped = headerMap[key.toLowerCase().trim()];
+        if (mapped) row[mapped] = value;
+      }
+
+      if (!row.company_name) {
+        skipped++;
+        errors.push(`Row ${i + 2}: Missing company name`);
+        continue;
+      }
+
+      const source = validSources.includes(row.source) ? row.source : 'Other';
+      const status = validStatuses.includes(row.status) ? row.status : 'New';
+
+      insert.run(
+        row.company_name,
+        row.country || '',
+        row.city || '',
+        row.contact_person || '',
+        row.email || '',
+        row.linkedin || '',
+        source,
+        status,
+        row.notes || '',
+        row.date_added || new Date().toISOString().split('T')[0],
+        row.last_contact_date || null,
+        row.next_followup_date || null,
+        req.user.id
+      );
+      imported++;
+    }
+  });
+
+  transaction();
+  res.json({ imported, skipped, errors: errors.slice(0, 20) });
+});
+
+module.exports = router;
diff --git a/server/routes/kpi.js b/server/routes/kpi.js
new file mode 100644
index 0000000..51d5b9d
--- /dev/null
+++ b/server/routes/kpi.js
@@ -0,0 +1,136 @@
+const express = require('express');
+const db = require('../database');
+const { authMiddleware } = require('../middleware/auth');
+
+const router = express.Router();
+router.use(authMiddleware);
+
+// Overview KPIs
+router.get('/overview', (req, res) => {
+  const total = db.prepare('SELECT COUNT(*) as count FROM leads').get().count;
+  const byStatus = db.prepare(
+    'SELECT status, COUNT(*) as count FROM leads GROUP BY status'
+  ).all();
+
+  const statusMap = {};
+  byStatus.forEach(row => { statusMap[row.status] = row.count; });
+
+  const today = new Date().toISOString().split('T')[0];
+  const newToday = db.prepare(
+    'SELECT COUNT(*) as count FROM leads WHERE date_added = ?'
+  ).get(today).count;
+
+  const overdueFollowups = db.prepare(
+    "SELECT COUNT(*) as count FROM leads WHERE next_followup_date <= ? AND status NOT IN ('Activated', 'Rejected')"
+  ).get(today).count;
+
+  res.json({
+    total,
+    by_status: statusMap,
+    new_today: newToday,
+    overdue_followups: overdueFollowups,
+  });
+});
+
+// Daily stats for charts (last 30 days)
+router.get('/daily', (req, res) => {
+  const days = parseInt(req.query.days) || 30;
+
+  const newLeads = db.prepare(`
+    SELECT date_added as date, COUNT(*) as count
+    FROM leads
+    WHERE date_added >= date('now', '-' || ? || ' days')
+    GROUP BY date_added
+    ORDER BY date_added
+  `).all(days);
+
+  const contacted = db.prepare(`
+    SELECT date(created_at) as date, COUNT(*) as count
+    FROM activity_log
+    WHERE action = 'status_change' AND details LIKE '%"Contacted"%'
+      AND created_at >= datetime('now', '-' || ? || ' days')
+    GROUP BY date(created_at)
+    ORDER BY date(created_at)
+  `).all(days);
+
+  const replies = db.prepare(`
+    SELECT date(created_at) as date, COUNT(*) as count
+    FROM activity_log
+    WHERE action = 'status_change' AND details LIKE '%"Replied"%'
+      AND created_at >= datetime('now', '-' || ? || ' days')
+    GROUP BY date(created_at)
+    ORDER BY date(created_at)
+  `).all(days);
+
+  const registrations = db.prepare(`
+    SELECT date(created_at) as date, COUNT(*) as count
+    FROM activity_log
+    WHERE action = 'status_change' AND details LIKE '%"Registered"%'
+      AND created_at >= datetime('now', '-' || ? || ' days')
+    GROUP BY date(created_at)
+    ORDER BY date(created_at)
+  `).all(days);
+
+  res.json({ new_leads: newLeads, contacted, replies, registrations });
+});
+
+// Conversion funnel
+router.get('/funnel', (req, res) => {
+  const month = req.query.month; // format: YYYY-MM
+
+  let dateFilter = '';
+  const params = [];
+  if (month) {
+    dateFilter = "WHERE date_added LIKE ? || '%'";
+    params.push(month);
+  }
+
+  const stages = ['New', 'Contacted', 'Replied', 'Registered', 'Activated', 'Rejected'];
+  const funnel = {};
+
+  for (const stage of stages) {
+    const query = month
+      ? `SELECT COUNT(*) as count FROM leads WHERE date_added LIKE ? || '%' AND status = ?`
+      : 'SELECT COUNT(*) as count FROM leads WHERE status = ?';
+    const p = month ? [month, stage] : [stage];
+    funnel[stage] = db.prepare(query).get(...p).count;
+  }
+
+  // Conversion rates
+  const total = Object.values(funnel).reduce((a, b) => a + b, 0);
+  const rates = {};
+  if (total > 0) {
+    const pipeline = total - (funnel['Rejected'] || 0);
+    rates['contacted_rate'] = total > 0 ? (((funnel['Contacted'] || 0) + (funnel['Replied'] || 0) + (funnel['Registered'] || 0) + (funnel['Activated'] || 0)) / total * 100).toFixed(1) : 0;
+    rates['reply_rate'] = total > 0 ? (((funnel['Replied'] || 0) + (funnel['Registered'] || 0) + (funnel['Activated'] || 0)) / total * 100).toFixed(1) : 0;
+    rates['registration_rate'] = total > 0 ? (((funnel['Registered'] || 0) + (funnel['Activated'] || 0)) / total * 100).toFixed(1) : 0;
+    rates['activation_rate'] = total > 0 ? ((funnel['Activated'] || 0) / total * 100).toFixed(1) : 0;
+  }
+
+  res.json({ funnel, rates, total });
+});
+
+// Monthly progress vs target
+router.get('/monthly-progress', (req, res) => {
+  const month = req.query.month || new Date().toISOString().slice(0, 7);
+
+  const target = db.prepare(
+    'SELECT * FROM targets WHERE user_id = ? AND month = ?'
+  ).get(req.user.id, month);
+
+  const actual = {
+    leads: db.prepare("SELECT COUNT(*) as count FROM leads WHERE date_added LIKE ? || '%'").get(month).count,
+    contacted: db.prepare("SELECT COUNT(*) as count FROM leads WHERE date_added LIKE ? || '%' AND status IN ('Contacted','Replied','Registered','Activated')").get(month).count,
+    replied: db.prepare("SELECT COUNT(*) as count FROM leads WHERE date_added LIKE ? || '%' AND status IN ('Replied','Registered','Activated')").get(month).count,
+    registered: db.prepare("SELECT COUNT(*) as count FROM leads WHERE date_added LIKE ? || '%' AND status IN ('Registered','Activated')").get(month).count,
+    activated: db.prepare("SELECT COUNT(*) as count FROM leads WHERE date_added LIKE ? || '%' AND status = 'Activated'").get(month).count,
+  };
+
+  res.json({
+    month,
+    target: target || { target_leads: 0, target_contacted: 0, target_replied: 0, target_registered: 0, target_activated: 0 },
+    actual,
+  });
+});
+
+module.exports = router;
diff --git a/server/routes/leads.js b/server/routes/leads.js
new file mode 100644
index 0000000..2b38850
--- /dev/null
+++ b/server/routes/leads.js
@@ -0,0 +1,207 @@
+const express = require('express');
+const db = require('../database');
+const { authMiddleware } = require('../middleware/auth');
+
+const router = express.Router();
+router.use(authMiddleware);
+
+// List leads with filtering, sorting, and pagination
+router.get('/', (req, res) => {
+  const {
+    status, source, search,
+    sort_by = 'date_added', sort_order = 'DESC',
+    page = 1, limit = 50,
+  } = req.query;
+
+  const conditions = ['1=1'];
+  const params = [];
+
+  if (status) {
+    conditions.push('status = ?');
+    params.push(status);
+  }
+  if (source) {
+    conditions.push('source = ?');
+    params.push(source);
+  }
+  if (search) {
+    conditions.push('(company_name LIKE ? OR contact_person LIKE ? OR email LIKE ? OR city LIKE ? OR country LIKE ?)');
+    const term = `%${search}%`;
+    params.push(term, term, term, term, term);
+  }
+
+  const allowedSorts = ['date_added', 'company_name', 'status', 'last_contact_date', 'next_followup_date', 'created_at'];
+  const sortCol = allowedSorts.includes(sort_by) ? sort_by : 'date_added';
+  const order = sort_order === 'ASC' ? 'ASC' : 'DESC';
+
+  const offset = (Math.max(1, parseInt(page)) - 1) * parseInt(limit);
+
+  const where = conditions.join(' AND ');
+  const countRow = db.prepare(`SELECT COUNT(*) as total FROM leads WHERE ${where}`).get(...params);
+  const leads = db.prepare(
+    `SELECT * FROM leads WHERE ${where} ORDER BY ${sortCol} ${order} LIMIT ? OFFSET ?`
+  ).all(...params, parseInt(limit), offset);
+
+  res.json({
+    leads,
+    total: countRow.total,
+    page: parseInt(page),
+    total_pages: Math.ceil(countRow.total / parseInt(limit)),
+  });
+});
+
+// Get single lead
+router.get('/:id', (req, res) => {
+  const lead = db.prepare('SELECT * FROM leads WHERE id = ?').get(req.params.id);
+  if (!lead) return res.status(404).json({ error: 'Lead not found' });
+
+  const activities = db.prepare(
+    'SELECT * FROM activity_log WHERE lead_id = ? ORDER BY created_at DESC LIMIT 50'
+  ).all(req.params.id);
+
+  res.json({ ...lead, activities });
+});
+
+// Create lead
+router.post('/', (req, res) => {
+  const {
+    company_name, country, city, contact_person, email, linkedin,
+    source, status, notes, next_followup_date,
+  } = req.body;
+
+  if (!company_name) {
+    return res.status(400).json({ error: 'Company name is required' });
+  }
+
+  const result = db.prepare(`
+    INSERT INTO leads (company_name, country, city, contact_person, email, linkedin, source, status, notes, next_followup_date, created_by)
+    VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?, ?)
+  `).run(
+    company_name,
+    country || '',
+    city || '',
+    contact_person || '',
+    email || '',
+    linkedin || '',
+    source || 'Other',
+    status || 'New',
+    notes || '',
+    next_followup_date || null,
+    req.user.id
+  );
+
+  db.prepare('INSERT INTO activity_log (lead_id, user_id, action, details) VALUES (?, ?, ?, ?)').run(
+    result.lastInsertRowid, req.user.id, 'created', `Lead "${company_name}" created`
+  );
+
+  const lead = db.prepare('SELECT * FROM leads WHERE id = ?').get(result.lastInsertRowid);
+  res.status(201).json(lead);
+});
+
+// Update lead
+router.put('/:id', (req, res) => {
+  const existing = db.prepare('SELECT * FROM leads WHERE id = ?').get(req.params.id);
+  if (!existing) return res.status(404).json({ error: 'Lead not found' });
+
+  const {
+    company_name, country, city, contact_person, email, linkedin,
+    source, status, notes, last_contact_date, next_followup_date,
+  } = req.body;
+
+  db.prepare(`
+    UPDATE leads SET
+      company_name = ?, country = ?, city = ?, contact_person = ?, email = ?, linkedin = ?,
+      source = ?, status = ?, notes = ?, last_contact_date = ?, next_followup_date = ?,
+      updated_at = datetime('now')
+    WHERE id = ?
+  `).run(
+    company_name ?? existing.company_name,
+    country ?? existing.country,
+    city ?? existing.city,
+    contact_person ?? existing.contact_person,
+    email ?? existing.email,
+    linkedin ?? existing.linkedin,
+    source ?? existing.source,
+    status ?? existing.status,
+    notes ?? existing.notes,
+    last_contact_date ?? existing.last_contact_date,
+    next_followup_date ?? existing.next_followup_date,
+    req.params.id
+  );
+
+  // Log status change
+  if (status && status !== existing.status) {
+    db.prepare('INSERT INTO activity_log (lead_id, user_id, action, details) VALUES (?, ?, ?, ?)').run(
+      req.params.id, req.user.id, 'status_change', `Status changed from "${existing.status}" to "${status}"`
+    );
+  }
+
+  const updated = db.prepare('SELECT * FROM leads WHERE id = ?').get(req.params.id);
+  res.json(updated);
+});
+
+// Delete lead
+router.delete('/:id', (req, res) => {
+  const existing = db.prepare('SELECT * FROM leads WHERE id = ?').get(req.params.id);
+  if (!existing) return res.status(404).json({ error: 'Lead not found' });
+
+  db.prepare('DELETE FROM leads WHERE id = ?').run(req.params.id);
+  res.json({ message: 'Lead deleted' });
+});
+
+// Mark follow-up done and schedule next
+router.post('/:id/followup', (req, res) => {
+  const existing = db.prepare('SELECT * FROM leads WHERE id = ?').get(req.params.id);
+  if (!existing) return res.status(404).json({ error: 'Lead not found' });
+
+  const { next_followup_date, notes } = req.body;
+
+  db.prepare(`
+    UPDATE leads SET
+      last_contact_date = date('now'),
+      next_followup_date = ?,
+      notes = CASE WHEN ? != '' THEN ? ELSE notes END,
+      updated_at = datetime('now')
+    WHERE id = ?
+  `).run(
+    next_followup_date || null,
+    notes || '',
+    notes || '',
+    req.params.id
+  );
+
+  db.prepare('INSERT INTO activity_log (lead_id, user_id, action, details) VALUES (?, ?, ?, ?)').run(
+    req.params.id, req.user.id, 'followup_done',
+    `Follow-up completed. Next: ${next_followup_date || 'none scheduled'}`
+  );
+
+  const updated = db.prepare('SELECT * FROM leads WHERE id = ?').get(req.params.id);
+  res.json(updated);
+});
+
+// Bulk status update (for Kanban drag-and-drop)
+router.patch('/bulk-status', (req, res) => {
+  const { lead_ids, status } = req.body;
+  const validStatuses = ['New', 'Contacted', 'Replied', 'Registered', 'Activated', 'Rejected'];
+  if (!validStatuses.includes(status)) {
+    return res.status(400).json({ error: 'Invalid status' });
+  }
+  if (!Array.isArray(lead_ids) || lead_ids.length === 0) {
+    return res.status(400).json({ error: 'lead_ids must be a non-empty array' });
+  }
+
+  const update = db.prepare("UPDATE leads SET status = ?, updated_at = datetime('now') WHERE id = ?");
+  const logEntry = db.prepare('INSERT INTO activity_log (lead_id, user_id, action, details) VALUES (?, ?, ?, ?)');
+
+  const transaction = db.transaction(() => {
+    for (const id of lead_ids) {
+      update.run(status, id);
+      logEntry.run(id, req.user.id, 'status_change', `Status changed to "${status}"`);
+    }
+  });
+
+  transaction();
+  res.json({ message: `Updated ${lead_ids.length} leads to "${status}"` });
+});
+
+module.exports = router;
diff --git a/server/routes/targets.js b/server/routes/targets.js
new file mode 100644
index 0000000..fa34c6b
--- /dev/null
+++ b/server/routes/targets.js
@@ -0,0 +1,54 @@
+const express = require('express');
+const db = require('../database');
+const { authMiddleware } = require('../middleware/auth');
+
+const router = express.Router();
+router.use(authMiddleware);
+
+// Get target for a month
+router.get('/:month', (req, res) => {
+  const target = db.prepare(
+    'SELECT * FROM targets WHERE user_id = ? AND month = ?'
+  ).get(req.user.id, req.params.month);
+
+  res.json(target || {
+    month: req.params.month,
+    target_leads: 0,
+    target_contacted: 0,
+    target_replied: 0,
+    target_registered: 0,
+    target_activated: 0,
+  });
+});
+
+// Set/update target for a month
+router.put('/:month', (req, res) => {
+  const { target_leads, target_contacted, target_replied, target_registered, target_activated } = req.body;
+
+  db.prepare(`
+    INSERT INTO targets (user_id, month, target_leads, target_contacted, target_replied, target_registered, target_activated)
+    VALUES (?, ?, ?, ?, ?, ?, ?)
+    ON CONFLICT(user_id, month) DO UPDATE SET
+      target_leads = excluded.target_leads,
+      target_contacted = excluded.target_contacted,
+      target_replied = excluded.target_replied,
+      target_registered = excluded.target_registered,
+      target_activated = excluded.target_activated
+  `).run(
+    req.user.id,
+    req.params.month,
+    target_leads || 0,
+    target_contacted || 0,
+    target_replied || 0,
+    target_registered || 0,
+    target_activated || 0
+  );
+
+  const target = db.prepare(
+    'SELECT * FROM targets WHERE user_id = ? AND month = ?'
+  ).get(req.user.id, req.params.month);
+
+  res.json(target);
+});
+
+module.exports = router;