diff --git a/app/(app)/leads/page.tsx b/app/(app)/leads/page.tsx
new file mode 100644
index 0000000..c3b244f
--- /dev/null
+++ b/app/(app)/leads/page.tsx
@@ -0,0 +1,121 @@
+"use client";
+
+import { useState } from "react";
+import { useQuery } from "@tanstack/react-query";
+import { UserPlus, RefreshCw } from "lucide-react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/Card";
+import { Table, TableHead, TableBody, TableRow, Th, Td, EmptyState } from "@/components/ui/Table";
+import { Badge } from "@/components/ui/Badge";
+import { Button } from "@/components/ui/Button";
+import { Input } from "@/components/ui/Input";
+import { formatDate } from "@/lib/utils";
+import api from "@/lib/api";
+import type { Lead } from "@/types";
+
+const statusVariant: Record<string, "success" | "warning" | "danger" | "muted" | "default"> = {
+  NEW: "muted",
+  CONTACTED: "default",
+  INTERESTED: "warning",
+  CONVERTED: "success",
+  LOST: "danger",
+};
+
+export default function LeadsPage() {
+  const [search, setSearch] = useState("");
+
+  const { data, isLoading, refetch } = useQuery<Lead[]>({
+    queryKey: ["leads", search],
+    queryFn: async () => {
+      const params = new URLSearchParams({ limit: "50" });
+      if (search) params.set("search", search);
+      const res = await api.get<Lead[] | { data: Lead[] }>(`/api/v1/leads?${params}`);
+      const d = res.data;
+      return Array.isArray(d) ? d : d.data ?? [];
+    },
+  });
+
+  const leads = data ?? [];
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Leads</h1>
+          <p className="text-sm text-gray-500 mt-1">Prospective customers pipeline</p>
+        </div>
+        <Button onClick={() => refetch()} variant="outline" size="sm">
+          <RefreshCw size={14} className="mr-1.5" /> Refresh
+        </Button>
+      </div>
+
+      {/* Status summary */}
+      <div className="flex gap-3 flex-wrap">
+        {Object.entries(statusVariant).map(([status]) => {
+          const count = leads.filter(l => l.status === status).length;
+          return count > 0 ? (
+            <div key={status} className="bg-white border rounded-lg px-3 py-2 text-center min-w-[80px]">
+              <p className="text-lg font-bold text-gray-800">{count}</p>
+              <p className="text-xs text-gray-500">{status}</p>
+            </div>
+          ) : null;
+        })}
+      </div>
+
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between gap-4">
+            <CardTitle>All Leads ({leads.length})</CardTitle>
+            <Input
+              placeholder="Search by name or phone..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="max-w-xs"
+            />
+          </div>
+        </CardHeader>
+        <CardContent className="p-0">
+          <Table>
+            <TableHead>
+              <TableRow>
+                <Th>Name</Th>
+                <Th>Phone</Th>
+                <Th>Email</Th>
+                <Th>Address</Th>
+                <Th>Status</Th>
+                <Th>Assigned To</Th>
+                <Th>Added</Th>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {isLoading ? (
+                <TableRow><Td colSpan={7} className="text-center py-8 text-gray-400">Loading...</Td></TableRow>
+              ) : leads.length === 0 ? (
+                <EmptyState colSpan={7} message="No leads yet" icon={<UserPlus size={24} />} />
+              ) : (
+                leads.map((lead) => (
+                  <TableRow key={lead.id}>
+                    <Td className="font-medium">{lead.firstName} {lead.lastName}</Td>
+                    <Td>{lead.phone}</Td>
+                    <Td className="text-gray-500">{lead.email ?? "—"}</Td>
+                    <Td className="text-gray-500 max-w-[150px] truncate">{lead.address ?? "—"}</Td>
+                    <Td>
+                      <Badge variant={statusVariant[lead.status] ?? "muted"}>
+                        {lead.status}
+                      </Badge>
+                    </Td>
+                    <Td className="text-gray-500">
+                      {lead.assignedTo
+                        ? `${lead.assignedTo.firstName} ${lead.assignedTo.lastName}`
+                        : "—"}
+                    </Td>
+                    <Td className="text-gray-400 text-sm">{formatDate(lead.createdAt)}</Td>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/app/(app)/tasks/page.tsx b/app/(app)/tasks/page.tsx
index 84b80fb..30750fb 100644
--- a/app/(app)/tasks/page.tsx
+++ b/app/(app)/tasks/page.tsx
@@ -30,7 +30,7 @@ export default function TasksPage() {
   const { data, isLoading, refetch } = useQuery<PaginatedResponse<Task>>({
     queryKey: ["tasks", page],
     queryFn: async () => {
-      const res = await api.get<PaginatedResponse<Task>>(`/api/v1/tasks?page=${page}&limit=20`);
+      const res = await api.get<PaginatedResponse<Task>>(`/api/v1/manual-tasks?page=${page}&limit=20`);
       return res.data;
     },
   });
@@ -79,7 +79,7 @@ export default function TasksPage() {
               ) : (
                 tasks.map((task) => (
                   <TableRow key={task.id} className="hover:bg-gray-50 transition-colors">
-                    <Td className="font-medium">{task.title}</Td>
+                    <Td className="font-medium">{task.type?.replace(/_/g," ")}</Td>
                     <Td><Badge variant="muted">{task.type}</Badge></Td>
                     <Td>
                       <Badge variant={statusVariant[task.status] ?? "muted"}>
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 4dd3f62..0da83a7 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -4,13 +4,14 @@ import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { useAuthStore } from '@/lib/auth-store';
 import {
-  LayoutDashboard, Users, FileText, CreditCard, ArrowLeftRight,
+  LayoutDashboard, Users, UserPlus, FileText, CreditCard, ArrowLeftRight,
   Ticket, BarChart3, Settings, Wifi, ClipboardList, ScrollText,
 } from 'lucide-react';
 
 const navItems = [
   { label: 'Dashboard',     href: '/dashboard',      icon: LayoutDashboard, roles: [] },
   { label: 'Clients',       href: '/clients',         icon: Users,           roles: [] },
+  { label: 'Leads',         href: '/leads',           icon: UserPlus,        roles: ['admin','staff'] },
   { label: 'Subscriptions', href: '/subscriptions',   icon: Wifi,            roles: [] },
   { label: 'Invoices',      href: '/invoices',        icon: FileText,        roles: [] },
   { label: 'Payments',      href: '/payments',        icon: CreditCard,      roles: [] },
diff --git a/src/types/index.ts b/src/types/index.ts
index 9a24d9d..2fc66d1 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -207,3 +207,17 @@ export interface LegacyPaginatedResponse<T> {
   page: number;
   limit: number;
 }
+
+export interface Lead {
+  id: string;
+  firstName: string;
+  lastName: string;
+  phone: string;
+  email?: string;
+  address?: string;
+  status: 'NEW' | 'CONTACTED' | 'INTERESTED' | 'CONVERTED' | 'LOST';
+  source?: string;
+  notes?: string;
+  assignedTo?: { firstName: string; lastName: string };
+  createdAt: string;
+}