diff --git a/src/components/reports/LowStockColumns.tsx b/src/components/reports/LowStockColumns.tsx
new file mode 100644
index 0000000..3e5997b
--- /dev/null
+++ b/src/components/reports/LowStockColumns.tsx
@@ -0,0 +1,34 @@
+"use client"
+
+import { ColumnDef } from "@tanstack/react-table"
+
+export type LowStockRecord = {
+  id: string
+  itemName: string
+  sku: string
+  quantity: number
+  threshold: number
+}
+
+export const lowStockColumns: ColumnDef<LowStockRecord>[] = [
+  {
+    accessorKey: "itemName",
+    header: "Item Name",
+  },
+  {
+    accessorKey: "sku",
+    header: "SKU",
+  },
+  {
+    accessorKey: "quantity",
+    header: "Qty",
+    cell: ({ row }) => {
+      const val = row.getValue("quantity") as number
+      return <div className="font-medium">{val}</div>
+    },
+  },
+  {
+    accessorKey: "threshold",
+    header: "Threshold",
+  },
+]
diff --git a/src/components/reports/LowStockReport.tsx b/src/components/reports/LowStockReport.tsx
new file mode 100644
index 0000000..014b38b
--- /dev/null
+++ b/src/components/reports/LowStockReport.tsx
@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from "react"
+import pb from "@/lib/pocketbase"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { lowStockColumns, LowStockRecord } from "./LowStockColumns"
+import { ReportDataTable } from "./ReportDataTable"
+import { showError } from "@/utils/toast"
+import { AlertTriangle } from "lucide-react"
+
+export function LowStockReport() {
+  const [threshold, setThreshold] = React.useState<number>(3)
+  const [data, setData] = React.useState<LowStockRecord[]>([])
+  const [loading, setLoading] = React.useState(false)
+
+  const fetchLowStock = React.useCallback(async () => {
+    setLoading(true)
+    try {
+      const records = await pb.collection("stock_items").getFullList({
+        filter: `quantity < ${threshold}`,
+        sort: "quantity",
+      })
+      const formatted: LowStockRecord[] = records.map((item: any) => ({
+        id: item.id,
+        itemName: item.name,
+        sku: item.sku,
+        quantity: Number(item.quantity ?? 0),
+        threshold,
+      }))
+      setData(formatted)
+    } catch (e) {
+      console.error("Low stock fetch error:", e)
+      showError("Failed to load low stock report.")
+      setData([])
+    } finally {
+      setLoading(false)
+    }
+  }, [threshold])
+
+  React.useEffect(() => {
+    fetchLowStock()
+  }, [fetchLowStock])
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col sm:flex-row sm:items-end gap-2">
+        <div className="flex-1">
+          <label className="block text-sm font-medium text-gray-700 mb-1">Threshold</label>
+          <Input
+            type="number"
+            min={0}
+            step={1}
+            value={threshold}
+            onChange={(e) => setThreshold(Number(e.target.value || 0))}
+            className="max-w-xs"
+          />
+        </div>
+        <Button onClick={fetchLowStock} disabled={loading}>
+          <AlertTriangle className="mr-2 h-4 w-4" />
+          {loading ? "Loading..." : "Refresh"}
+        </Button>
+      </div>
+      <ReportDataTable columns={lowStockColumns} data={data} loading={loading} />
+    </div>
+  )
+}
+
diff --git a/src/pages/Reports.tsx b/src/pages/Reports.tsx
index 74d58d2..257b948 100644
--- a/src/pages/Reports.tsx
+++ b/src/pages/Reports.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { FileText } from "lucide-react";
 import pb from "@/lib/pocketbase";
 import { showError } from "@/utils/toast";
+import { LowStockReport } from "@/components/reports/LowStockReport";
 
 const Reports = () => {
   const [billingCompanies, setBillingCompanies] = useState<{ value: string; label: string }[]>([]);
@@ -102,7 +103,7 @@ const Reports = () => {
       <div className="flex flex-col md:flex-row md:justify-between md:items-center gap-4 mb-6">
         <div>
           <h1 className="text-3xl font-bold">Reports</h1>
-          <p className="text-gray-500">Generate book-out reports by billing company.</p>
+          <p className="text-gray-500">Generate book-out reports by billing company and view low stock.</p>
         </div>
       </div>
 
@@ -125,8 +126,14 @@ const Reports = () => {
       </div>
 
       <ReportDataTable columns={columns} data={reportData} loading={loading} />
+
+      <div className="mt-8">
+        <h2 className="text-2xl font-semibold mb-2">Low Stock Report</h2>
+        <p className="text-gray-500 mb-4">Items below the selected threshold.</p>
+        <LowStockReport />
+      </div>
     </div>
   );
 };
 
-export default Reports;
\ No newline at end of file
+export default Reports;