diff --git a/web/client/src/App.jsx b/web/client/src/App.jsx
index f610b9d..20799d4 100644
--- a/web/client/src/App.jsx
+++ b/web/client/src/App.jsx
@@ -5,6 +5,7 @@ import SmeltingPanel from './components/SmeltingPanel';
 import CraftingPanel from './components/CraftingPanel';
 import AlertsPanel from './components/AlertsPanel';
 import AnalyticsPanel from './components/AnalyticsPanel';
+import SettingsPanel from './components/SettingsPanel';
 import ErrorBoundary from './components/ErrorBoundary';
 import { useInventoryStore } from './store/inventoryStore';
 import './App.css';
@@ -18,6 +19,7 @@ function App() {
   const alerts = useInventoryStore((state) => state.alerts) || [];
   const [panelTab, setPanelTab] = useState('inventory');
   const [showAlerts, setShowAlerts] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
   const [, forceRender] = useState(0);
 
   useEffect(() => {
@@ -58,6 +60,14 @@ function App() {
       <div className="app-header">
         <h1>⛏️ Inventory Manager</h1>
         <div className="header-right">
+          {/* Settings gear button */}
+          <button
+            className="settings-gear"
+            onClick={() => setShowSettings(!showSettings)}
+            title="Settings"
+          >
+            ⚙️
+          </button>
           {/* Alerts bell button */}
           <button
             className={`alerts-bell ${triggeredAlerts.length > 0 ? 'has-alerts' : ''}`}
@@ -96,6 +106,9 @@ function App() {
       {/* Alerts popup overlay */}
       <AlertsPanel isOpen={showAlerts} onClose={() => setShowAlerts(false)} />
 
+      {/* Settings overlay */}
+      <SettingsPanel isOpen={showSettings} onClose={() => setShowSettings(false)} />
+
       <div className="app-content">
         <div className="sidebar">
           <ErrorBoundary>