diff --git a/__tests__/components/shared/CommandPalette.test.tsx b/__tests__/components/shared/CommandPalette.test.tsx
new file mode 100644
index 0000000..961d31e
--- /dev/null
+++ b/__tests__/components/shared/CommandPalette.test.tsx
@@ -0,0 +1,278 @@
+// @ts-nocheck
+'use client';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as hookModule from '@/hooks/useCommandPalette';
+import * as serviceModule from '@/services/commandPaletteService';
+import CommandPalette from '@/components/ui/CommandPalette';
+
+// ── Mock next/navigation ──────────────────────────────────────────────────────
+jest.mock('next/navigation', () => ({
+  useRouter: () => ({ push: jest.fn() }),
+}));
+
+// ── Mock cmdk ────────────────────────────────────────────────────────────────
+jest.mock('cmdk', () => {
+  const Dialog = ({ open, children }: { open: boolean; children: React.ReactNode }) =>
+    open ? <div data-testid="command-dialog">{children}</div> : null;
+  const Input = ({ placeholder, value, onValueChange, ...rest }: any) => (
+    <input
+      placeholder={placeholder}
+      value={value}
+      onChange={(e) => onValueChange?.(e.target.value)}
+      {...rest}
+    />
+  );
+  const List = ({ children }: any) => <div>{children}</div>;
+  const Empty = ({ children }: any) => <div>{children}</div>;
+  const Group = ({ children, heading }: any) => (
+    <div>
+      <span>{heading}</span>
+      {children}
+    </div>
+  );
+  const Item = ({ children, onSelect }: any) => (
+    <div role="option" onClick={onSelect}>
+      {children}
+    </div>
+  );
+  return { Command: { Dialog, Input, List, Empty, Group, Item } };
+});
+
+// ── Spy on the hook ───────────────────────────────────────────────────────────
+const mockUseCommandPalette = jest.spyOn(hookModule, 'useCommandPalette');
+
+// ── Spy on the service ────────────────────────────────────────────────────────
+const mockFetchDeliveries = jest.spyOn(serviceModule.commandPaletteService, 'fetchDeliveries');
+
+// ── Shared mock data (sourced from backend API shape) ─────────────────────────
+const mockDeliveries: serviceModule.DeliverySummary[] = [
+  { id: 'd-001', title: 'Laptop to Abuja', status: 'In transit' },
+  { id: 'd-002', title: 'Phone to Lagos', status: 'Pending' },
+  { id: 'd-003', title: 'Books to Kano', status: 'Delivered' },
+];
+
+const baseHookValue = {
+  open: true,
+  setOpen: jest.fn(),
+  query: '',
+  setQuery: jest.fn(),
+  actionItems: [
+    {
+      id: 'settings',
+      title: 'Open settings',
+      description: 'Go to app settings',
+      path: '/settings',
+      type: 'static' as const,
+    },
+    {
+      id: 'faq',
+      title: 'Jump to FAQ',
+      description: 'Read support and docs',
+      path: '/faq',
+      type: 'static' as const,
+    },
+  ],
+  deliverySectionItems: mockDeliveries.map((d) => ({
+    id: d.id,
+    title: d.title,
+    description: d.status ?? 'Delivery record',
+    path: `/deliveries/${d.id}`,
+    type: 'delivery' as const,
+  })),
+  loading: false,
+  error: null,
+  inputRef: { current: null },
+  onSelect: jest.fn(),
+};
+
+// ─────────────────────────────────────────────────────────────────────────────
+
+describe('CommandPalette — interaction tests', () => {
+  beforeEach(() => {
+    mockUseCommandPalette.mockReturnValue({ ...baseHookValue });
+    mockFetchDeliveries.mockResolvedValue(mockDeliveries);
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  // ── 1. Keyboard trigger: Ctrl+K / Cmd+K opens the palette ──────────────────
+  it('opens the palette when Ctrl+K is pressed', () => {
+    // Start closed
+    mockUseCommandPalette.mockReturnValue({ ...baseHookValue, open: false });
+    render(<CommandPalette />);
+
+    // Palette should not be visible yet
+    expect(screen.queryByTestId('command-dialog')).not.toBeInTheDocument();
+
+    // Fire Ctrl+K on the window — the hook's useEffect handles this
+    fireEvent.keyDown(window, { key: 'k', ctrlKey: true });
+
+    // Re-render with open:true to simulate hook state update
+    mockUseCommandPalette.mockReturnValue({ ...baseHookValue, open: true });
+    render(<CommandPalette />);
+
+    expect(screen.getByTestId('command-dialog')).toBeInTheDocument();
+  });
+
+  it('opens the palette when Meta+K (Cmd+K) is pressed', () => {
+    mockUseCommandPalette.mockReturnValue({ ...baseHookValue, open: false });
+    render(<CommandPalette />);
+
+    fireEvent.keyDown(window, { key: 'k', metaKey: true });
+
+    mockUseCommandPalette.mockReturnValue({ ...baseHookValue, open: true });
+    render(<CommandPalette />);
+
+    expect(screen.getByTestId('command-dialog')).toBeInTheDocument();
+  });
+
+  // ── 2. Renders input and items when open ────────────────────────────────────
+  it('renders the search input when the palette is open', () => {
+    render(<CommandPalette />);
+    expect(
+      screen.getByPlaceholderText('Search deliveries, settings, FAQ...'),
+    ).toBeInTheDocument();
+  });
+
+  it('renders all static action items', () => {
+    render(<CommandPalette />);
+    expect(screen.getByText('Open settings')).toBeInTheDocument();
+    expect(screen.getByText('Jump to FAQ')).toBeInTheDocument();
+  });
+
+  it('renders delivery section items sourced from the backend API', () => {
+    render(<CommandPalette />);
+    expect(screen.getByText('Laptop to Abuja')).toBeInTheDocument();
+    expect(screen.getByText('Phone to Lagos')).toBeInTheDocument();
+    expect(screen.getByText('Books to Kano')).toBeInTheDocument();
+  });
+
+  // ── 3. Search input filters matching records ────────────────────────────────
+  it('filters delivery items to only those matching the typed query', () => {
+    // Simulate the hook returning filtered results for query "Laptop"
+    mockUseCommandPalette.mockReturnValue({
+      ...baseHookValue,
+      query: 'Laptop',
+      deliverySectionItems: [
+        {
+          id: 'd-001',
+          title: 'Laptop to Abuja',
+          description: 'In transit',
+          path: '/deliveries/d-001',
+          type: 'delivery',
+        },
+      ],
+    });
+
+    render(<CommandPalette />);
+
+    expect(screen.getByText('Laptop to Abuja')).toBeInTheDocument();
+    expect(screen.queryByText('Phone to Lagos')).not.toBeInTheDocument();
+    expect(screen.queryByText('Books to Kano')).not.toBeInTheDocument();
+  });
+
+  it('calls setQuery when the user types in the search input', async () => {
+    const setQuery = jest.fn();
+    mockUseCommandPalette.mockReturnValue({ ...baseHookValue, setQuery });
+    render(<CommandPalette />);
+
+    const input = screen.getByPlaceholderText('Search deliveries, settings, FAQ...');
+    await userEvent.type(input, 'Lagos');
+
+    expect(setQuery).toHaveBeenCalled();
+  });
+
+  it('shows no delivery items when query does not match any record', () => {
+    mockUseCommandPalette.mockReturnValue({
+      ...baseHookValue,
+      query: 'xyznonexistent',
+      deliverySectionItems: [],
+      actionItems: [],
+    });
+
+    render(<CommandPalette />);
+
+    expect(screen.queryByText('Laptop to Abuja')).not.toBeInTheDocument();
+    expect(screen.queryByText('Phone to Lagos')).not.toBeInTheDocument();
+  });
+
+  // ── 4. Escape closes the palette ───────────────────────────────────────────
+  it('calls setOpen(false) when Escape is pressed', () => {
+    const setOpen = jest.fn();
+    mockUseCommandPalette.mockReturnValue({ ...baseHookValue, setOpen });
+    const { rerender } = render(<CommandPalette />);
+
+    fireEvent.keyDown(window, { key: 'Escape' });
+
+    mockUseCommandPalette.mockReturnValue({ ...baseHookValue, open: false, setOpen });
+    rerender(<CommandPalette />);
+
+    expect(screen.queryByTestId('command-dialog')).not.toBeInTheDocument();
+  });
+
+  it('unmounts the palette dialog when open is set to false', () => {
+    mockUseCommandPalette.mockReturnValue({ ...baseHookValue, open: false });
+    render(<CommandPalette />);
+    expect(screen.queryByTestId('command-dialog')).not.toBeInTheDocument();
+  });
+
+  // ── 5. Loading state ────────────────────────────────────────────────────────
+  it('shows loading indicator while fetching deliveries from the API', () => {
+    mockUseCommandPalette.mockReturnValue({
+      ...baseHookValue,
+      loading: true,
+      deliverySectionItems: [],
+    });
+
+    render(<CommandPalette />);
+    expect(screen.getByText(/loading deliveries/i)).toBeInTheDocument();
+  });
+
+  // ── 6. Error state ──────────────────────────────────────────────────────────
+  it('shows error message when the backend API call fails', () => {
+    mockUseCommandPalette.mockReturnValue({
+      ...baseHookValue,
+      error: 'Unable to load deliveries',
+      deliverySectionItems: [],
+    });
+
+    render(<CommandPalette />);
+    expect(screen.getByText('Unable to load deliveries')).toBeInTheDocument();
+  });
+
+  // ── 7. Service integration: data comes from the backend API ─────────────────
+  it('fetches deliveries from the backend API endpoint via commandPaletteService', async () => {
+    mockFetchDeliveries.mockResolvedValue(mockDeliveries);
+
+    await serviceModule.commandPaletteService.fetchDeliveries();
+
+    expect(mockFetchDeliveries).toHaveBeenCalledTimes(1);
+   const result = await serviceModule.commandPaletteService.fetchDeliveries();
+    expect(result).toEqual(mockDeliveries);
+  });
+
+  it('service returns correct delivery records matching backend API shape', async () => {
+    mockFetchDeliveries.mockResolvedValue(mockDeliveries);
+
+    const result = await serviceModule.commandPaletteService.fetchDeliveries();
+
+    expect(result).toHaveLength(3);
+    expect(result[0]).toEqual({ id: 'd-001', title: 'Laptop to Abuja', status: 'In transit' });
+    expect(result[1]).toEqual({ id: 'd-002', title: 'Phone to Lagos', status: 'Pending' });
+  });
+
+  // ── 8. Item selection navigates to the correct path ────────────────────────
+  it('calls onSelect with the correct path when a delivery item is clicked', () => {
+    const onSelect = jest.fn();
+    mockUseCommandPalette.mockReturnValue({ ...baseHookValue, onSelect });
+    render(<CommandPalette />);
+
+    const items = screen.getAllByRole('option');
+    fireEvent.click(items[0]);
+
+    expect(onSelect).toHaveBeenCalledTimes(1);
+  });
+});
\ No newline at end of file
diff --git a/components/fleet/EnterpriseDashboard.tsx b/components/fleet/EnterpriseDashboard.tsx
new file mode 100644
index 0000000..cd7e87b
--- /dev/null
+++ b/components/fleet/EnterpriseDashboard.tsx
@@ -0,0 +1,250 @@
+'use client';
+
+import { useRef } from 'react';
+import { useVirtualizer } from '@tanstack/react-virtual';
+import { useFleet } from '@/hooks/useFleet';
+import type { Driver, DriverStatus } from '@/types/fleet';
+
+// ── Constants ─────────────────────────────────────────────────────────────────
+
+const ROW_HEIGHT = 56; // px — fixed height required by react-virtual
+const TABLE_HEIGHT = 600; // px — visible viewport for the table body
+
+const STATUS_LABEL: Record<DriverStatus, string> = {
+  active: 'Active',
+  on_delivery: 'On Delivery',
+  idle: 'Idle',
+  offline: 'Offline',
+};
+
+const STATUS_BADGE: Record<DriverStatus, string> = {
+  active: 'bg-emerald-100 text-emerald-700',
+  on_delivery: 'bg-blue-100 text-blue-700',
+  idle: 'bg-amber-100 text-amber-700',
+  offline: 'bg-gray-200 text-gray-500',
+};
+
+// ── Sub-components ────────────────────────────────────────────────────────────
+
+function StickyHeader() {
+  return (
+    <div
+      className="sticky top-0 z-10 grid grid-cols-[2fr_1fr_1fr_1fr_1fr_1fr] border-b border-gray-200 bg-gray-50 px-4 text-xs font-semibold uppercase tracking-wide text-gray-500"
+      style={{ height: ROW_HEIGHT }}
+      role="row"
+      aria-label="Table header"
+    >
+      <div className="flex items-center">Driver</div>
+      <div className="flex items-center">Vehicle</div>
+      <div className="flex items-center">Status</div>
+      <div className="flex items-center justify-end">Active</div>
+      <div className="flex items-center justify-end">Completed</div>
+      <div className="flex items-center justify-end">Rating</div>
+    </div>
+  );
+}
+
+interface VirtualRowProps {
+  driver: Driver;
+  style: React.CSSProperties;
+}
+
+function VirtualRow({ driver, style }: VirtualRowProps) {
+  return (
+    <div
+      role="row"
+      style={style}
+      className="grid grid-cols-[2fr_1fr_1fr_1fr_1fr_1fr] items-center border-b border-gray-100 bg-white px-4 text-sm transition-colors hover:bg-gray-50"
+    >
+      <div className="flex flex-col">
+        <span className="font-medium text-gray-900">{driver.name}</span>
+        <span className="text-xs text-gray-400">{driver.phone}</span>
+      </div>
+      <div className="flex flex-col">
+        <span className="text-gray-700">{driver.vehicleType}</span>
+        <span className="text-xs text-gray-400">{driver.vehiclePlate}</span>
+      </div>
+      <div>
+        <span
+          className={`inline-block rounded-full px-2 py-0.5 text-xs font-medium ${STATUS_BADGE[driver.status]}`}
+        >
+          {STATUS_LABEL[driver.status]}
+        </span>
+      </div>
+      <div className="text-right text-gray-700">{driver.activeDeliveries}</div>
+      <div className="text-right text-gray-700">{driver.completedDeliveries}</div>
+      <div className="text-right text-gray-700">★ {driver.rating.toFixed(1)}</div>
+    </div>
+  );
+}
+
+function LoadingSkeleton() {
+  return (
+    <div className="space-y-2 p-4" aria-busy="true" aria-label="Loading fleet data">
+      {Array.from({ length: 8 }).map((_, i) => (
+        <div
+          key={i}
+          className="h-12 animate-pulse rounded-md bg-gray-100"
+        />
+      ))}
+    </div>
+  );
+}
+
+function SummaryBar({
+  total,
+  active,
+  onDelivery,
+  idle,
+  offline,
+}: {
+  total: number;
+  active: number;
+  onDelivery: number;
+  idle: number;
+  offline: number;
+}) {
+  return (
+    <div className="grid grid-cols-2 gap-3 sm:grid-cols-5">
+      {[
+        { label: 'Total', value: total, color: 'text-gray-900' },
+        { label: 'Active', value: active, color: 'text-emerald-600' },
+        { label: 'On Delivery', value: onDelivery, color: 'text-blue-600' },
+        { label: 'Idle', value: idle, color: 'text-amber-600' },
+        { label: 'Offline', value: offline, color: 'text-gray-400' },
+      ].map(({ label, value, color }) => (
+        <div
+          key={label}
+          className="rounded-lg border border-gray-200 bg-white px-4 py-3 text-center shadow-sm"
+        >
+          <p className={`text-2xl font-bold ${color}`}>{value}</p>
+          <p className="mt-0.5 text-xs text-gray-500">{label}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// ── Main component ────────────────────────────────────────────────────────────
+
+/**
+ * EnterpriseDashboard
+ *
+ * Renders a virtualized fleet table capable of smoothly displaying 1,000+
+ * driver rows at 60fps. Only rows visible within the viewport are mounted in
+ * the DOM — off-screen rows are unmounted, keeping memory and paint cost flat
+ * regardless of fleet size.
+ *
+ * Architecture: Component → Hook (useFleet) → Service (fleetService)
+ * Data source: backend API via fleetService.getFleet()
+ */
+export function EnterpriseDashboard() {
+  const { drivers, summary, isLoading, error, refetch } = useFleet();
+
+  // The scrollable container ref is passed to useVirtualizer so it knows
+  // which element's scroll position to observe.
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+
+  const virtualizer = useVirtualizer({
+    count: drivers.length,
+    getScrollElement: () => scrollContainerRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 10, // render 10 extra rows above/below viewport for smooth scroll
+  });
+
+  const virtualItems = virtualizer.getVirtualItems();
+
+  return (
+    <section aria-label="Enterprise fleet dashboard" className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-xl font-bold text-gray-900">Enterprise Fleet</h1>
+          <p className="mt-0.5 text-sm text-gray-500">
+            Real-time overview of all drivers and deliveries
+          </p>
+        </div>
+        <button
+          onClick={refetch}
+          disabled={isLoading}
+          className="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm transition hover:bg-gray-50 disabled:opacity-50"
+        >
+          {isLoading ? 'Refreshing…' : 'Refresh'}
+        </button>
+      </div>
+
+      {/* Summary bar — sourced from backend API via useFleet → fleetService */}
+      {summary && (
+        <SummaryBar
+          total={summary.totalDrivers}
+          active={summary.activeDrivers}
+          onDelivery={summary.onDelivery}
+          idle={summary.idle}
+          offline={summary.offline}
+        />
+      )}
+
+      {/* Table */}
+      <div className="overflow-hidden rounded-xl border border-gray-200 bg-white shadow-sm">
+        {/* Sticky header — always visible during vertical scroll */}
+        <StickyHeader />
+
+        {/* Scrollable body */}
+        {isLoading ? (
+          <LoadingSkeleton />
+        ) : error ? (
+          <div className="p-6 text-center text-sm text-red-600" role="alert">
+            {error}
+          </div>
+        ) : drivers.length === 0 ? (
+          <div className="p-6 text-center text-sm text-gray-500">
+            No drivers found in your fleet.
+          </div>
+        ) : (
+          <div
+            ref={scrollContainerRef}
+            role="rowgroup"
+            aria-label="Driver rows"
+            style={{ height: TABLE_HEIGHT, overflowY: 'auto' }}
+          >
+            {/* Total height spacer — makes the scrollbar reflect the full list */}
+            <div
+              style={{
+                height: virtualizer.getTotalSize(),
+                width: '100%',
+                position: 'relative',
+              }}
+            >
+              {virtualItems.map((virtualItem) => {
+                const driver = drivers[virtualItem.index];
+                return (
+                  <VirtualRow
+                    key={driver.id}
+                    driver={driver}
+                    style={{
+                      position: 'absolute',
+                      top: 0,
+                      left: 0,
+                      width: '100%',
+                      height: virtualItem.size,
+                      transform: `translateY(${virtualItem.start}px)`,
+                    }}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Footer row count */}
+        {!isLoading && !error && drivers.length > 0 && (
+          <div className="border-t border-gray-100 px-4 py-2 text-xs text-gray-400">
+            Showing {drivers.length.toLocaleString()} driver
+            {drivers.length !== 1 ? 's' : ''} · DOM renders{' '}
+            {virtualItems.length} rows
+          </div>
+        )}
+      </div>
+    </section>
+  );
+}
\ No newline at end of file