diff --git a/web/client/src/components/AlertsPanel.jsx b/web/client/src/components/AlertsPanel.jsx
new file mode 100644
index 0000000..7a4c8e5
--- /dev/null
+++ b/web/client/src/components/AlertsPanel.jsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { useInventoryStore } from '../store/inventoryStore';
+import { formatItemName } from '../utils/itemUtils';
+import ItemIcon from './ItemIcon';
+import './AlertsPanel.css';
+
+function AlertsPanel() {
+  const alerts = useInventoryStore((state) => state.alerts);
+
+  return (
+    <div className="alerts-panel">
+      <div className="alerts-header">
+        <h2>🔔 Low-Stock Alerts</h2>
+        <span className="alert-count">
+          {alerts.length} alert{alerts.length !== 1 ? 's' : ''}
+        </span>
+      </div>
+
+      {alerts.length > 0 ? (
+        <div className="alert-list">
+          {alerts.map((alert, idx) => (
+            <div key={idx} className={`alert-card ${alert.triggered ? 'triggered' : 'ok'}`}>
+              <div className="alert-icon">
+                {alert.triggered ? '🔴' : '🟢'}
+              </div>
+              <div className="alert-info">
+                <div className="alert-item-row">
+                  <ItemIcon itemName={alert.item} size={20} />
+                  <span className="alert-item-name">{formatItemName(alert.item)}</span>
+                </div>
+                <div className="alert-details">
+                  <span className="alert-stock">
+                    Stock: <strong>{alert.current ?? '?'}</strong>
+                  </span>
+                  <span className="alert-threshold">
+                    Min: <strong>{alert.threshold || alert.min || '?'}</strong>
+                  </span>
+                </div>
+              </div>
+              <div className={`alert-badge ${alert.triggered ? 'low' : 'ok'}`}>
+                {alert.triggered ? 'LOW' : 'OK'}
+              </div>
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="no-alerts">
+          <span className="no-alerts-icon">✅</span>
+          <span>No alerts configured or all stock levels are OK</span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default AlertsPanel;