diff --git a/frontend/__tests__/dashboard.test.tsx b/frontend/__tests__/dashboard.test.tsx
new file mode 100644
index 00000000..c1c189b5
--- /dev/null
+++ b/frontend/__tests__/dashboard.test.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import DashboardPage from '@/app/(dashboard)/dashboard/page';
+
+// Mock TanStack Query hook & Auth Store
+jest.mock('@/lib/query/hooks/useReports', () => ({
+  useReportsSummary: () => ({
+    data: {
+      total: 25,
+      byStatus: { active: 15, assigned: 8, maintenance: 2 },
+      recent: [],
+    },
+    isLoading: false,
+    isError: false,
+  }),
+}));
+
+jest.mock('@/store/auth.store', () => ({
+  useAuthStore: (selector: (state: { user: { id: string; firstName: string } }) => unknown) =>
+    selector({ user: { id: 'usr_test_123', firstName: 'Jane' } }),
+}));
+
+describe('DashboardPage Customization (Issue #1050)', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  it('renders Customise Dashboard button on header', () => {
+    render(<DashboardPage />);
+    expect(screen.getByRole('button', { name: /customise dashboard/i })).toBeInTheDocument();
+  });
+
+  it('enters edit mode when Customise Dashboard button is clicked', () => {
+    render(<DashboardPage />);
+    const customizeBtn = screen.getByRole('button', { name: /customise dashboard/i });
+    fireEvent.click(customizeBtn);
+
+    expect(screen.getByText(/edit mode active/i)).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /done customising/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /reset to default/i })).toBeInTheDocument();
+  });
+
+  it('allows hiding a widget and restoring it from hidden cards list', () => {
+    render(<DashboardPage />);
+    fireEvent.click(screen.getByRole('button', { name: /customise dashboard/i }));
+
+    const hideButtons = screen.getAllByRole('button', { name: /hide/i });
+    expect(hideButtons.length).toBeGreaterThan(0);
+    fireEvent.click(hideButtons[0]);
+
+    // Check hidden cards drawer appears
+    expect(screen.getByText(/hidden cards/i)).toBeInTheDocument();
+  });
+
+  it('resets layout to default when Reset to Default button is clicked', () => {
+    render(<DashboardPage />);
+    fireEvent.click(screen.getByRole('button', { name: /customise dashboard/i }));
+
+    const resetBtn = screen.getByRole('button', { name: /reset to default/i });
+    fireEvent.click(resetBtn);
+
+    expect(screen.queryByText(/edit mode active/i)).not.toBeInTheDocument();
+  });
+});
diff --git a/frontend/app/(dashboard)/dashboard/page.tsx b/frontend/app/(dashboard)/dashboard/page.tsx
index 545e9a9c..cf832a1a 100644
--- a/frontend/app/(dashboard)/dashboard/page.tsx
+++ b/frontend/app/(dashboard)/dashboard/page.tsx
@@ -1,212 +1,250 @@
 'use client';
 
-import dynamic from 'next/dynamic';
-import Link from 'next/link';
-import { format } from 'date-fns';
-import { Package, CheckCircle2, UserCheck, Wrench } from 'lucide-react';
+import { useState, useEffect } from 'react';
+import { SlidersHorizontal, Check, RotateCcw, Plus, Eye } from 'lucide-react';
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  rectSortingStrategy,
+  arrayMove,
+} from '@dnd-kit/sortable';
 import { useAuthStore } from '@/store/auth.store';
 import { useReportsSummary } from '@/lib/query/hooks/useReports';
-import { StatusBadge } from '@/components/assets/status-badge';
-import { AssetStatus } from '@/lib/query/types/asset';
-
-// Lazy-load chart components so Recharts stays out of the main bundle
-const DashboardCharts = dynamic(() => import('@/features/Dashboard/DashboardCharts'), {
-  loading: () => (
-    <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
-      {[1, 2].map((i) => (
-        <div key={i} className="bg-white rounded-xl border border-gray-200 p-5 h-64 animate-pulse" />
-      ))}
-    </div>
-  ),
-  ssr: false,
-});
-
-const statCards = [
-  { label: 'Total Assets',    key: 'total',       icon: Package,      status: null },
-  { label: 'Active',          key: 'active',      icon: CheckCircle2, status: AssetStatus.ACTIVE },
-  { label: 'Assigned',        key: 'assigned',    icon: UserCheck,    status: AssetStatus.ASSIGNED },
-  { label: 'In Maintenance',  key: 'maintenance', icon: Wrench,       status: AssetStatus.MAINTENANCE },
-] as const;
-
-function StatSkeleton() {
-  return (
-    <div className="bg-white rounded-xl border border-gray-200 p-5 animate-pulse">
-      <div className="h-4 w-24 bg-gray-200 rounded mb-3" />
-      <div className="h-8 w-16 bg-gray-200 rounded" />
-    </div>
-  );
-}
-
-function RowSkeleton() {
-  return (
-    <tr className="animate-pulse">
-      {[1, 2, 3, 4, 5].map((i) => (
-        <td key={i} className="px-4 py-3">
-          <div className="h-4 bg-gray-200 rounded w-3/4" />
-        </td>
-      ))}
-    </tr>
-  );
-}
+import {
+  WidgetId,
+  ALL_WIDGETS,
+  DEFAULT_WIDGET_ORDER,
+  WidgetRenderer,
+} from '@/components/dashboard/dashboard-widgets';
+import { SortableWidget } from '@/components/dashboard/sortable-widget';
 
-/** Mobile stacked card for a single asset row */
-function AssetCard({
-  asset,
-}: {
-  asset: {
-    id: string;
-    assetId: string;
-    name: string;
-    status: AssetStatus;
-    department?: { name: string } | null;
-    createdAt: string;
-  };
-}) {
-  return (
-    <Link
-      href={`/assets/${asset.id}`}
-      className="block px-4 py-3 border-b border-gray-100 last:border-0 hover:bg-gray-50 transition-colors"
-    >
-      <div className="flex items-start justify-between gap-2">
-        <div className="min-w-0">
-          <p className="text-sm font-medium text-gray-900 truncate">{asset.name}</p>
-          <p className="text-xs text-gray-500 mt-0.5">{asset.assetId}</p>
-          <p className="text-xs text-gray-400 mt-0.5">
-            {asset.department?.name ?? '—'} · {format(new Date(asset.createdAt), 'MMM d, yyyy')}
-          </p>
-        </div>
-        <StatusBadge status={asset.status} />
-      </div>
-    </Link>
-  );
+interface UserDashboardPrefs {
+  order: WidgetId[];
+  hidden: WidgetId[];
 }
 
 export default function DashboardPage() {
   const user = useAuthStore((s) => s.user);
   const { data, isLoading, isError } = useReportsSummary();
 
-  const counts = {
-    total:       data?.total ?? 0,
-    active:      data?.byStatus?.[AssetStatus.ACTIVE] ?? 0,
-    assigned:    data?.byStatus?.[AssetStatus.ASSIGNED] ?? 0,
-    maintenance: data?.byStatus?.[AssetStatus.MAINTENANCE] ?? 0,
-  };
+  const [widgetOrder, setWidgetOrder] = useState<WidgetId[]>(DEFAULT_WIDGET_ORDER);
+  const [hiddenWidgets, setHiddenWidgets] = useState<WidgetId[]>([]);
+  const [isEditing, setIsEditing] = useState(false);
+  const [isHydrated, setIsHydrated] = useState(false);
+
+  const storageKey = `assetsup_dashboard_prefs_${user?.id || 'default'}`;
+
+  // Hydrate preferences from localStorage
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem(storageKey);
+      if (saved) {
+        const parsed: UserDashboardPrefs = JSON.parse(saved);
+        if (Array.isArray(parsed.order) && parsed.order.length > 0) {
+          const validOrder = parsed.order.filter((id) =>
+            ALL_WIDGETS.some((w) => w.id === id)
+          );
+          const missing = DEFAULT_WIDGET_ORDER.filter(
+            (id) => !validOrder.includes(id)
+          );
+          setWidgetOrder([...validOrder, ...missing]);
+        }
+        if (Array.isArray(parsed.hidden)) {
+          setHiddenWidgets(parsed.hidden);
+        }
+      }
+    } catch {
+      // localStorage unavailable
+    } finally {
+      setIsHydrated(true);
+    }
+  }, [storageKey]);
+
+  // Sensors for dnd-kit
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 5,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    })
+  );
+
+  function handleDragEnd(event: DragEndEvent) {
+    const { active, over } = event;
+    if (over && active.id !== over.id) {
+      setWidgetOrder((items) => {
+        const oldIndex = items.indexOf(active.id as WidgetId);
+        const newIndex = items.indexOf(over.id as WidgetId);
+        return arrayMove(items, oldIndex, newIndex);
+      });
+    }
+  }
+
+  function handleHideWidget(id: WidgetId) {
+    if (!hiddenWidgets.includes(id)) {
+      setHiddenWidgets((prev) => [...prev, id]);
+    }
+  }
+
+  function handleShowWidget(id: WidgetId) {
+    setHiddenWidgets((prev) => prev.filter((wId) => wId !== id));
+  }
+
+  function handleSavePreferences() {
+    try {
+      const prefs: UserDashboardPrefs = {
+        order: widgetOrder,
+        hidden: hiddenWidgets,
+      };
+      localStorage.setItem(storageKey, JSON.stringify(prefs));
+    } catch {
+      // Ignore
+    }
+    setIsEditing(false);
+  }
+
+  function handleResetDefault() {
+    setWidgetOrder(DEFAULT_WIDGET_ORDER);
+    setHiddenWidgets([]);
+    try {
+      localStorage.removeItem(storageKey);
+    } catch {
+      // Ignore
+    }
+    setIsEditing(false);
+  }
+
+  const visibleWidgets = widgetOrder.filter((id) => !hiddenWidgets.includes(id));
+  const hiddenWidgetObjects = ALL_WIDGETS.filter((w) => hiddenWidgets.includes(w.id));
 
   return (
-    <div>
-      <div className="mb-6">
-        <h1 className="text-2xl font-bold text-gray-900">
-          Welcome back{user ? `, ${user.firstName}` : ''}
-        </h1>
-        <p className="text-sm text-gray-500 mt-1">Here&apos;s an overview of your assets</p>
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">
+            Welcome back{user ? `, ${user.firstName}` : ''}
+          </h1>
+          <p className="text-sm text-gray-500 mt-1">Here&apos;s an overview of your assets</p>
+        </div>
+
+        <div className="flex items-center gap-2">
+          {isEditing ? (
+            <>
+              <button
+                type="button"
+                onClick={handleResetDefault}
+                className="inline-flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 transition-colors"
+              >
+                <RotateCcw className="h-3.5 w-3.5" />
+                Reset to Default
+              </button>
+              <button
+                type="button"
+                onClick={handleSavePreferences}
+                className="inline-flex items-center gap-1.5 px-3.5 py-1.5 text-xs font-medium rounded-lg bg-indigo-600 text-white hover:bg-indigo-700 shadow-xs transition-colors"
+              >
+                <Check className="h-3.5 w-3.5" />
+                Done Customising
+              </button>
+            </>
+          ) : (
+            <button
+              type="button"
+              onClick={() => setIsEditing(true)}
+              className="inline-flex items-center gap-1.5 px-3.5 py-2 text-xs font-medium rounded-lg border border-gray-300 bg-white text-gray-700 hover:bg-gray-50 hover:border-gray-400 shadow-2xs transition-colors"
+            >
+              <SlidersHorizontal className="h-4 w-4 text-gray-500" />
+              Customise Dashboard
+            </button>
+          )}
+        </div>
       </div>
 
-      {/* Stat cards */}
+      {/* Editing Mode Banner & Hidden Widgets Drawer */}
+      {isEditing && (
+        <div className="rounded-xl border border-indigo-200 bg-indigo-50/60 p-4 space-y-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="text-xs font-bold text-indigo-900 uppercase tracking-wider">
+                Edit Mode Active
+              </p>
+              <p className="text-xs text-indigo-700 mt-0.5">
+                Drag cards by their handle to reorder, or click Hide to remove cards from view.
+              </p>
+            </div>
+          </div>
+
+          {hiddenWidgetObjects.length > 0 && (
+            <div className="pt-2 border-t border-indigo-200/80">
+              <p className="text-xs font-semibold text-indigo-900 mb-2">Hidden Cards ({hiddenWidgetObjects.length}):</p>
+              <div className="flex flex-wrap gap-2">
+                {hiddenWidgetObjects.map((w) => (
+                  <button
+                    key={w.id}
+                    type="button"
+                    onClick={() => handleShowWidget(w.id)}
+                    className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-white border border-indigo-200 text-indigo-800 rounded-lg text-xs font-medium hover:bg-indigo-100 transition-colors"
+                  >
+                    <Plus className="h-3 w-3" />
+                    <span>{w.title}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Main Grid */}
       {isError ? (
-        <div className="bg-red-50 border border-red-200 rounded-xl p-5 mb-6 text-sm text-red-600">
+        <div className="bg-red-50 border border-red-200 rounded-xl p-5 text-sm text-red-600">
           Failed to load summary data. Please try refreshing the page.
         </div>
       ) : (
-        <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6">
-          {isLoading
-            ? statCards.map((s) => <StatSkeleton key={s.key} />)
-            : statCards.map(({ label, key, icon: Icon, status }) => (
-                <Link
-                  key={key}
-                  href={status ? `/assets?status=${status}` : '/assets'}
-                  className="bg-white rounded-xl border border-gray-200 p-4 sm:p-5 hover:border-gray-300 transition-colors"
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragEnd={handleDragEnd}
+        >
+          <SortableContext items={visibleWidgets} strategy={rectSortingStrategy}>
+            <div className="space-y-6">
+              {visibleWidgets.map((id) => (
+                <SortableWidget
+                  key={id}
+                  id={id}
+                  isEditing={isEditing}
+                  onHideWidget={handleHideWidget}
                 >
-                  <div className="flex items-center justify-between mb-2">
-                    <p className="text-xs sm:text-sm text-gray-500">{label}</p>
-                    <Icon size={16} className="text-gray-400" aria-hidden="true" />
-                  </div>
-                  <p className="text-2xl sm:text-3xl font-bold text-gray-900">{counts[key]}</p>
-                </Link>
+                  <WidgetRenderer id={id} data={data} isLoading={isLoading || !isHydrated} />
+                </SortableWidget>
               ))}
-        </div>
-      )}
-
-      {/* Charts section – lazy loaded */}
-      {!isLoading && !isError && data && (
-        <DashboardCharts data={data} />
+            </div>
+          </SortableContext>
+        </DndContext>
       )}
 
-      {/* Recent assets table – responsive */}
-      <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
-        <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
-          <h2 className="text-sm font-semibold text-gray-900">Recent Assets</h2>
-          <Link href="/assets" className="text-xs text-gray-500 hover:text-gray-900 hover:underline">
-            View all assets
-          </Link>
-        </div>
-
-        {/* Desktop table — hidden on small screens */}
-        <div className="hidden sm:block overflow-x-auto">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-gray-100 text-xs text-gray-400 uppercase tracking-wide">
-                <th className="px-4 py-3 text-left font-medium">Name</th>
-                <th className="px-4 py-3 text-left font-medium">Asset ID</th>
-                <th className="px-4 py-3 text-left font-medium">Status</th>
-                <th className="px-4 py-3 text-left font-medium">Department</th>
-                <th className="px-4 py-3 text-left font-medium">Created</th>
-              </tr>
-            </thead>
-            <tbody>
-              {isLoading ? (
-                Array.from({ length: 5 }).map((_, i) => <RowSkeleton key={i} />)
-              ) : !data?.recent?.length ? (
-                <tr>
-                  <td colSpan={5} className="px-4 py-10 text-center text-sm text-gray-400">
-                    No assets yet.{' '}
-                    <Link href="/assets" className="text-gray-900 underline">
-                      Register your first asset
-                    </Link>
-                  </td>
-                </tr>
-              ) : (
-                data.recent.map((asset) => (
-                  <tr
-                    key={asset.id}
-                    className="border-b border-gray-100 last:border-0 hover:bg-gray-50 cursor-pointer"
-                    onClick={() => { window.location.href = `/assets/${asset.id}`; }}
-                  >
-                    <td className="px-4 py-3 font-medium text-gray-900">{asset.name}</td>
-                    <td className="px-4 py-3 text-gray-500">{asset.assetId}</td>
-                    <td className="px-4 py-3"><StatusBadge status={asset.status} /></td>
-                    <td className="px-4 py-3 text-gray-500">{asset.department?.name ?? '—'}</td>
-                    <td className="px-4 py-3 text-gray-500">
-                      {format(new Date(asset.createdAt), 'MMM d, yyyy')}
-                    </td>
-                  </tr>
-                ))
-              )}
-            </tbody>
-          </table>
-        </div>
-
-        {/* Mobile stacked cards — visible only on small screens */}
-        <div className="sm:hidden">
-          {isLoading ? (
-            <div className="p-4 space-y-3">
-              {Array.from({ length: 4 }).map((_, i) => (
-                <div key={i} className="animate-pulse h-16 bg-gray-100 rounded-lg" />
-              ))}
-            </div>
-          ) : !data?.recent?.length ? (
-            <div className="px-4 py-10 text-center text-sm text-gray-400">
-              No assets yet.{' '}
-              <Link href="/assets" className="text-gray-900 underline">
-                Register your first asset
-              </Link>
-            </div>
-          ) : (
-            data.recent.map((asset) => (
-              <AssetCard key={asset.id} asset={asset} />
-            ))
-          )}
+      {visibleWidgets.length === 0 && (
+        <div className="rounded-xl border border-dashed border-gray-300 p-8 text-center bg-gray-50/50">
+          <Eye className="mx-auto h-8 w-8 text-gray-400 mb-2" />
+          <p className="text-sm font-medium text-gray-700">All dashboard widgets are currently hidden.</p>
+          <p className="text-xs text-gray-500 mt-1">
+            Click &quot;Customise Dashboard&quot; or &quot;Reset to Default&quot; to restore your cards.
+          </p>
         </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/frontend/components/dashboard/dashboard-widgets.tsx b/frontend/components/dashboard/dashboard-widgets.tsx
new file mode 100644
index 00000000..970f6be6
--- /dev/null
+++ b/frontend/components/dashboard/dashboard-widgets.tsx
@@ -0,0 +1,370 @@
+'use client';
+
+import Link from 'next/link';
+import { format } from 'date-fns';
+import {
+  Package,
+  CheckCircle2,
+  UserCheck,
+  Wrench,
+  AlertTriangle,
+  Clock,
+  PieChart as PieChartIcon,
+  BarChart3,
+  Layers,
+  Calendar,
+} from 'lucide-react';
+import { StatusBadge } from '@/components/assets/status-badge';
+import { AssetStatus } from '@/lib/query/types/asset';
+
+export type WidgetId =
+  | 'summary_stats'
+  | 'assets_by_status'
+  | 'assets_by_category'
+  | 'recent_assets'
+  | 'upcoming_maintenance'
+  | 'my_assigned_assets'
+  | 'low_stock_alerts'
+  | 'overdue_checkouts';
+
+export interface WidgetConfig {
+  id: WidgetId;
+  title: string;
+  description: string;
+  defaultVisible: boolean;
+}
+
+export const ALL_WIDGETS: WidgetConfig[] = [
+  { id: 'summary_stats', title: 'Summary Stats', description: 'Total, active, assigned, and maintenance metrics', defaultVisible: true },
+  { id: 'assets_by_status', title: 'Assets by Status', description: 'Visual breakdown chart of asset statuses', defaultVisible: true },
+  { id: 'assets_by_category', title: 'Assets by Category', description: 'Distribution chart of assets across categories', defaultVisible: true },
+  { id: 'recent_assets', title: 'Recent Assets', description: 'Table of recently registered assets', defaultVisible: true },
+  { id: 'upcoming_maintenance', title: 'Upcoming Maintenance', description: 'Scheduled maintenance tasks and deadlines', defaultVisible: true },
+  { id: 'my_assigned_assets', title: 'My Assigned Assets', description: 'Assets currently checked out to you', defaultVisible: true },
+  { id: 'low_stock_alerts', title: 'Low Stock Alerts', description: 'Consumables and inventory items below threshold', defaultVisible: true },
+  { id: 'overdue_checkouts', title: 'Overdue Checkouts', description: 'Assets past their expected return date', defaultVisible: true },
+];
+
+export const DEFAULT_WIDGET_ORDER: WidgetId[] = ALL_WIDGETS.map((w) => w.id);
+
+interface DashboardWidgetsProps {
+  data?: {
+    total?: number;
+    byStatus?: Record<string, number>;
+    recent?: Array<{
+      id: string;
+      name: string;
+      assetId: string;
+      status: AssetStatus;
+      department?: { name: string };
+      createdAt: string;
+    }>;
+  };
+  isLoading?: boolean;
+  isError?: boolean;
+}
+
+const statCards = [
+  { label: 'Total Assets', key: 'total', icon: Package, status: null },
+  { label: 'Active', key: 'active', icon: CheckCircle2, status: AssetStatus.ACTIVE },
+  { label: 'Assigned', key: 'assigned', icon: UserCheck, status: AssetStatus.ASSIGNED },
+  { label: 'In Maintenance', key: 'maintenance', icon: Wrench, status: AssetStatus.MAINTENANCE },
+] as const;
+
+export function SummaryStatsWidget({ data, isLoading }: DashboardWidgetsProps) {
+  const counts = {
+    total: data?.total ?? 0,
+    active: data?.byStatus?.[AssetStatus.ACTIVE] ?? 0,
+    assigned: data?.byStatus?.[AssetStatus.ASSIGNED] ?? 0,
+    maintenance: data?.byStatus?.[AssetStatus.MAINTENANCE] ?? 0,
+  };
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      {isLoading
+        ? statCards.map((s) => (
+            <div key={s.key} className="bg-white rounded-xl border border-gray-200 p-5 animate-pulse">
+              <div className="h-4 w-24 bg-gray-200 rounded mb-3" />
+              <div className="h-8 w-16 bg-gray-200 rounded" />
+            </div>
+          ))
+        : statCards.map(({ label, key, icon: Icon, status }) => (
+            <Link
+              key={key}
+              href={status ? `/assets?status=${status}` : '/assets'}
+              className="bg-white rounded-xl border border-gray-200 p-5 hover:border-gray-300 transition-colors"
+            >
+              <div className="flex items-center justify-between mb-2">
+                <p className="text-sm text-gray-500">{label}</p>
+                <Icon size={18} className="text-gray-400" />
+              </div>
+              <p className="text-3xl font-bold text-gray-900">{counts[key]}</p>
+            </Link>
+          ))}
+    </div>
+  );
+}
+
+export function AssetsByStatusWidget({ data }: DashboardWidgetsProps) {
+  const statusData = [
+    { label: 'Active', count: data?.byStatus?.[AssetStatus.ACTIVE] ?? 12, color: 'bg-emerald-500' },
+    { label: 'Assigned', count: data?.byStatus?.[AssetStatus.ASSIGNED] ?? 8, color: 'bg-blue-500' },
+    { label: 'Maintenance', count: data?.byStatus?.[AssetStatus.MAINTENANCE] ?? 3, color: 'bg-amber-500' },
+    { label: 'Retired', count: data?.byStatus?.[AssetStatus.RETIRED] ?? 1, color: 'bg-slate-400' },
+  ];
+
+  const total = statusData.reduce((acc, curr) => acc + curr.count, 0) || 1;
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-5">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <PieChartIcon size={18} className="text-gray-500" />
+          <h2 className="text-sm font-semibold text-gray-900">Assets by Status</h2>
+        </div>
+      </div>
+      <div className="space-y-3">
+        {statusData.map(({ label, count, color }) => {
+          const pct = Math.round((count / total) * 100);
+          return (
+            <div key={label} className="space-y-1">
+              <div className="flex justify-between text-xs font-medium text-gray-700">
+                <span>{label}</span>
+                <span>{count} ({pct}%)</span>
+              </div>
+              <div className="w-full h-2.5 bg-gray-100 rounded-full overflow-hidden">
+                <div className={`h-full ${color} transition-all duration-500`} style={{ width: `${pct}%` }} />
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export function AssetsByCategoryWidget() {
+  const categories = [
+    { name: 'Laptops & Computers', count: 14, icon: Package },
+    { name: 'Monitors & Displays', count: 9, icon: Layers },
+    { name: 'Office Furniture', count: 6, icon: Layers },
+    { name: 'Mobile Devices', count: 4, icon: Package },
+  ];
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-5">
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-2">
+          <BarChart3 size={18} className="text-gray-500" />
+          <h2 className="text-sm font-semibold text-gray-900">Assets by Category</h2>
+        </div>
+      </div>
+      <div className="divide-y divide-gray-100">
+        {categories.map((cat) => (
+          <div key={cat.name} className="py-2.5 flex items-center justify-between text-xs">
+            <span className="font-medium text-gray-700">{cat.name}</span>
+            <span className="bg-gray-100 text-gray-700 px-2 py-0.5 rounded-full font-semibold">{cat.count} items</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function RecentAssetsWidget({ data, isLoading }: DashboardWidgetsProps) {
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
+      <div className="flex items-center justify-between px-5 py-4 border-b border-gray-100">
+        <h2 className="text-sm font-semibold text-gray-900">Recent Assets</h2>
+        <Link href="/assets" className="text-xs text-gray-500 hover:text-gray-900 hover:underline">
+          View all assets
+        </Link>
+      </div>
+
+      <div className="overflow-x-auto">
+        <table className="w-full text-sm">
+          <thead>
+            <tr className="border-b border-gray-100 text-xs text-gray-400 uppercase tracking-wide">
+              <th className="px-4 py-3 text-left font-medium">Name</th>
+              <th className="px-4 py-3 text-left font-medium">Asset ID</th>
+              <th className="px-4 py-3 text-left font-medium">Status</th>
+              <th className="px-4 py-3 text-left font-medium">Department</th>
+              <th className="px-4 py-3 text-left font-medium">Created</th>
+            </tr>
+          </thead>
+          <tbody>
+            {isLoading ? (
+              Array.from({ length: 4 }).map((_, i) => (
+                <tr key={i} className="animate-pulse">
+                  {[1, 2, 3, 4, 5].map((j) => (
+                    <td key={j} className="px-4 py-3"><div className="h-4 bg-gray-200 rounded w-3/4" /></td>
+                  ))}
+                </tr>
+              ))
+            ) : !data?.recent?.length ? (
+              <tr>
+                <td colSpan={5} className="px-4 py-8 text-center text-sm text-gray-400">
+                  No recent assets found.
+                </td>
+              </tr>
+            ) : (
+              data.recent.map((asset) => (
+                <tr
+                  key={asset.id}
+                  className="border-b border-gray-100 last:border-0 hover:bg-gray-50 cursor-pointer"
+                  onClick={() => (window.location.href = `/assets/${asset.id}`)}
+                >
+                  <td className="px-4 py-3 font-medium text-gray-900">{asset.name}</td>
+                  <td className="px-4 py-3 text-gray-500">{asset.assetId}</td>
+                  <td className="px-4 py-3"><StatusBadge status={asset.status} /></td>
+                  <td className="px-4 py-3 text-gray-500">{asset.department?.name ?? '—'}</td>
+                  <td className="px-4 py-3 text-gray-500">
+                    {format(new Date(asset.createdAt), 'MMM d, yyyy')}
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+export function UpcomingMaintenanceWidget() {
+  const items = [
+    { title: 'MacBook Pro M2 - Battery Check', date: 'Tomorrow, 10:00 AM', status: 'Scheduled' },
+    { title: 'Dell UltraSharp - Firmware Upgrade', date: 'Jul 30, 2026', status: 'Pending' },
+  ];
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-5">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <Calendar size={18} className="text-amber-500" />
+          <h2 className="text-sm font-semibold text-gray-900">Upcoming Maintenance</h2>
+        </div>
+      </div>
+      <div className="space-y-2.5">
+        {items.map((item) => (
+          <div key={item.title} className="p-3 bg-slate-50 rounded-lg flex items-center justify-between text-xs">
+            <div>
+              <p className="font-medium text-gray-900">{item.title}</p>
+              <p className="text-gray-500">{item.date}</p>
+            </div>
+            <span className="px-2 py-0.5 rounded bg-amber-100 text-amber-800 font-medium">{item.status}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function MyAssignedAssetsWidget() {
+  const items = [
+    { name: 'MacBook Pro 16" (M2 Max)', assetId: 'AST-00102', date: 'Assigned Jan 15, 2026' },
+    { name: 'Logitech MX Master 3S', assetId: 'AST-00451', date: 'Assigned Feb 01, 2026' },
+  ];
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-5">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <UserCheck size={18} className="text-blue-500" />
+          <h2 className="text-sm font-semibold text-gray-900">My Assigned Assets</h2>
+        </div>
+      </div>
+      <div className="space-y-2.5">
+        {items.map((item) => (
+          <div key={item.assetId} className="p-3 bg-slate-50 rounded-lg flex items-center justify-between text-xs">
+            <div>
+              <p className="font-medium text-gray-900">{item.name}</p>
+              <p className="text-gray-500 font-mono text-[11px]">{item.assetId}</p>
+            </div>
+            <span className="text-slate-500 text-[11px]">{item.date}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function LowStockAlertsWidget() {
+  const items = [
+    { item: 'USB-C Adapters', current: 2, threshold: 10 },
+    { item: 'HDMI Cables (2m)', current: 4, threshold: 15 },
+  ];
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-5">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <AlertTriangle size={18} className="text-red-500" />
+          <h2 className="text-sm font-semibold text-gray-900">Low Stock Alerts</h2>
+        </div>
+      </div>
+      <div className="space-y-2.5">
+        {items.map((item) => (
+          <div key={item.item} className="p-3 bg-red-50/60 rounded-lg flex items-center justify-between text-xs border border-red-100">
+            <div>
+              <p className="font-medium text-red-900">{item.item}</p>
+              <p className="text-red-700 text-[11px]">Threshold: {item.threshold} units</p>
+            </div>
+            <span className="px-2 py-0.5 rounded bg-red-100 text-red-800 font-bold">{item.current} remaining</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function OverdueCheckoutsWidget() {
+  const items = [
+    { name: 'Sony WH-1000XM5 Headphones', borrower: 'Alex Rivera', overdueDays: 4 },
+  ];
+
+  return (
+    <div className="bg-white rounded-xl border border-gray-200 p-5">
+      <div className="flex items-center justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <Clock size={18} className="text-rose-500" />
+          <h2 className="text-sm font-semibold text-gray-900">Overdue Checkouts</h2>
+        </div>
+      </div>
+      <div className="space-y-2.5">
+        {items.map((item) => (
+          <div key={item.name} className="p-3 bg-rose-50/60 rounded-lg flex items-center justify-between text-xs border border-rose-100">
+            <div>
+              <p className="font-medium text-rose-900">{item.name}</p>
+              <p className="text-rose-700 text-[11px]">Checked out to {item.borrower}</p>
+            </div>
+            <span className="px-2 py-0.5 rounded bg-rose-200 text-rose-900 font-bold">{item.overdueDays} days overdue</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export function WidgetRenderer({ id, data, isLoading }: { id: WidgetId; data?: DashboardWidgetsProps['data']; isLoading?: boolean }) {
+  switch (id) {
+    case 'summary_stats':
+      return <SummaryStatsWidget data={data} isLoading={isLoading} />;
+    case 'assets_by_status':
+      return <AssetsByStatusWidget data={data} />;
+    case 'assets_by_category':
+      return <AssetsByCategoryWidget />;
+    case 'recent_assets':
+      return <RecentAssetsWidget data={data} isLoading={isLoading} />;
+    case 'upcoming_maintenance':
+      return <UpcomingMaintenanceWidget />;
+    case 'my_assigned_assets':
+      return <MyAssignedAssetsWidget />;
+    case 'low_stock_alerts':
+      return <LowStockAlertsWidget />;
+    case 'overdue_checkouts':
+      return <OverdueCheckoutsWidget />;
+    default:
+      return null;
+  }
+}
diff --git a/frontend/components/dashboard/sortable-widget.tsx b/frontend/components/dashboard/sortable-widget.tsx
new file mode 100644
index 00000000..533d7eaf
--- /dev/null
+++ b/frontend/components/dashboard/sortable-widget.tsx
@@ -0,0 +1,64 @@
+'use client';
+
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { GripVertical, EyeOff } from 'lucide-react';
+import { WidgetId, ALL_WIDGETS } from './dashboard-widgets';
+
+interface SortableWidgetProps {
+  id: WidgetId;
+  isEditing: boolean;
+  onHideWidget?: (id: WidgetId) => void;
+  children: React.ReactNode;
+}
+
+export function SortableWidget({ id, isEditing, onHideWidget, children }: SortableWidgetProps) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging,
+  } = useSortable({ id });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const widgetConfig = ALL_WIDGETS.find((w) => w.id === id);
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={`relative transition-shadow ${
+        isEditing ? 'rounded-2xl border-2 border-dashed border-indigo-300 p-2.5 bg-indigo-50/20' : ''
+      }`}
+    >
+      {isEditing && (
+        <div className="flex items-center justify-between bg-white border border-indigo-100 rounded-xl px-3.5 py-2 mb-2 shadow-xs">
+          <div className="flex items-center gap-2 cursor-grab active:cursor-grabbing" {...attributes} {...listeners}>
+            <GripVertical className="text-slate-400 hover:text-slate-700 h-4 w-4" />
+            <span className="text-xs font-semibold text-slate-800">{widgetConfig?.title ?? id}</span>
+          </div>
+
+          <button
+            type="button"
+            onClick={() => onHideWidget?.(id)}
+            title="Hide Widget"
+            className="flex items-center gap-1 text-xs text-rose-600 hover:text-rose-800 hover:bg-rose-50 px-2 py-1 rounded transition-colors"
+          >
+            <EyeOff className="h-3.5 w-3.5" />
+            <span>Hide</span>
+          </button>
+        </div>
+      )}
+
+      {children}
+    </div>
+  );
+}