diff --git a/README.md b/README.md
index b799a66..ca7b269 100644
--- a/README.md
+++ b/README.md
@@ -152,7 +152,7 @@ Displays a track map with the current position of the cars on track and the trac
 
 We welcome contributions to the IRDashies project! If you have any ideas, suggestions, or bug reports, please open an issue or submit a pull request.
 
-Join our discord here: https://discord.gg/E3KKB6W4
+Join our discord here: https://discord.gg/YMAqduF2Ft
 
 ## License
 
diff --git a/package.json b/package.json
index 2029045..f134943 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,10 @@
   "productName": "irdashies",
   "version": "0.0.7",
   "description": "iRacing Dashboards & Overlays",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tariknz/irdashies"
+  },
   "main": ".vite/build/main.js",
   "scripts": {
     "start": "electron-forge start --enable-logging",
diff --git a/src/app/bridge/dashboard/dashboardBridge.ts b/src/app/bridge/dashboard/dashboardBridge.ts
index 2394443..9899ed6 100644
--- a/src/app/bridge/dashboard/dashboardBridge.ts
+++ b/src/app/bridge/dashboard/dashboardBridge.ts
@@ -17,4 +17,8 @@ export async function publishDashboardUpdates(overlayManager: OverlayManager) {
     overlayManager.closeOrCreateWindows(dashboard);
     overlayManager.publishMessage('dashboardUpdated', dashboard);
   });
+
+  ipcMain.handle('toggleLockOverlays', () => {
+    return overlayManager.toggleLockOverlays();
+  });
 }
diff --git a/src/app/bridge/rendererExposeBridge.ts b/src/app/bridge/rendererExposeBridge.ts
index a7a03f7..34e2f8e 100644
--- a/src/app/bridge/rendererExposeBridge.ts
+++ b/src/app/bridge/rendererExposeBridge.ts
@@ -45,5 +45,8 @@ export function exposeBridge() {
     saveDashboard: (value: DashboardLayout) => {
       ipcRenderer.send('saveDashboard', value);
     },
+    toggleLockOverlays: () => {
+      return ipcRenderer.invoke('toggleLockOverlays');
+    },
   } as DashboardBridge);
 }
diff --git a/src/frontend/App.tsx b/src/frontend/App.tsx
index 9571aa5..36e668e 100644
--- a/src/frontend/App.tsx
+++ b/src/frontend/App.tsx
@@ -46,7 +46,7 @@ const AppRoutes = () => {
           />
         );
       })}
-      <Route path="/settings" element={<Settings />} />
+      <Route path="/settings/*" element={<Settings />} />
     </Routes>
   );
 };
diff --git a/src/frontend/components/EditMode/EditMode.stories.tsx b/src/frontend/components/EditMode/EditMode.stories.tsx
index 1652dd1..329664d 100644
--- a/src/frontend/components/EditMode/EditMode.stories.tsx
+++ b/src/frontend/components/EditMode/EditMode.stories.tsx
@@ -25,6 +25,7 @@ const mockBridge: (editMode: boolean) => DashboardBridge = (editMode) => ({
   onEditModeToggled: (callback) => {
     callback(editMode);
   },
+  toggleLockOverlays: () => Promise.resolve(true),
 });
 
 export const Primary = {
diff --git a/src/frontend/components/Settings/Settings.tsx b/src/frontend/components/Settings/Settings.tsx
index 9c0723c..d1bbe1c 100644
--- a/src/frontend/components/Settings/Settings.tsx
+++ b/src/frontend/components/Settings/Settings.tsx
@@ -1,5 +1,5 @@
 import { useDashboard } from '@irdashies/context';
-import { SettingsForm } from './SettingsForm';
+import { SettingsLayout } from './SettingsLayout';
 
 export const Settings = () => {
   const { currentDashboard, onDashboardUpdated } = useDashboard();
@@ -8,9 +8,6 @@ export const Settings = () => {
   }
 
   return (
-    <SettingsForm
-      currentDashboard={currentDashboard}
-      onDashboardUpdated={onDashboardUpdated}
-    />
+    <SettingsLayout />
   );
 };
diff --git a/src/frontend/components/Settings/SettingsForm.stories.tsx b/src/frontend/components/Settings/SettingsForm.stories.tsx
deleted file mode 100644
index 8154463..0000000
--- a/src/frontend/components/Settings/SettingsForm.stories.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { SettingsForm } from './SettingsForm';
-
-export default {
-  component: SettingsForm,
-} as Meta;
-
-type Story = StoryObj<typeof SettingsForm>;
-
-export const Primary: Story = {
-  args: {
-    currentDashboard: {
-      widgets: [
-        {
-          id: 'test',
-          enabled: false,
-          layout: {
-            x: 0,
-            y: 0,
-            width: 0,
-            height: 0,
-          },
-        },
-      ],
-    },
-  },
-};
diff --git a/src/frontend/components/Settings/SettingsForm.tsx b/src/frontend/components/Settings/SettingsForm.tsx
deleted file mode 100644
index 19160dc..0000000
--- a/src/frontend/components/Settings/SettingsForm.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useState } from 'react';
-import { DashboardLayout } from '@irdashies/types';
-
-export const SettingsForm = ({
-  currentDashboard,
-  onDashboardUpdated,
-}: {
-  currentDashboard: DashboardLayout | undefined;
-  onDashboardUpdated: (dashboard: DashboardLayout) => void;
-}) => {
-  const [dashboardInput, setDashboardInput] = useState<string | undefined>(
-    JSON.stringify(currentDashboard, undefined, 2)
-  );
-
-  const onInputUpdated = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-    setDashboardInput(e.target.value);
-  };
-
-  const save = () => {
-    if (!dashboardInput) {
-      return;
-    }
-
-    try {
-      const dashboard = JSON.parse(dashboardInput);
-      onDashboardUpdated(dashboard);
-    } catch (e) {
-      console.error(e);
-      // TODO: shitty validation
-      alert('Invalid JSON');
-    }
-  };
-
-  return (
-    <div className="bg-slate-700 w-full h-full p-2 flex flex-col gap-2">
-      <h1 className="py-2">Settings</h1>
-      <textarea
-        className="w-full h-full bg-slate-800 p-2 text-monospace text-sm min-h-60"
-        value={dashboardInput}
-        onChange={(e) => onInputUpdated(e)}
-      />
-      <div className="flex gap-2">
-        <button
-          type="button"
-          onClick={save}
-          className="bg-blue-700 hover:bg-blue-800 rounded-xs text-sm px-2 py-1 w-20"
-        >
-          Save
-        </button>
-      </div>
-    </div>
-  );
-};
diff --git a/src/frontend/components/Settings/SettingsLayout.stories.tsx b/src/frontend/components/Settings/SettingsLayout.stories.tsx
new file mode 100644
index 0000000..36f2edd
--- /dev/null
+++ b/src/frontend/components/Settings/SettingsLayout.stories.tsx
@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { DashboardProvider } from '@irdashies/context';
+import { SettingsLayout } from './SettingsLayout';
+import { mockDashboardBridge } from './__mocks__/mockBridge';
+
+interface StoryProps {
+  initialPath: string;
+}
+
+const meta: Meta<typeof SettingsLayout> = {
+  component: SettingsLayout,
+  decorators: [
+    (Story, context) => {
+      const { initialPath = 'standings' } =
+        context.args as StoryProps;
+      return (
+        <DashboardProvider bridge={mockDashboardBridge}>
+          <MemoryRouter initialEntries={[initialPath]}>
+            <Routes>
+              <Route
+                path="/settings/*"
+                element={
+                  <div style={{ height: '100vh' }}>
+                    <Story />
+                  </div>
+                }
+              />
+            </Routes>
+          </MemoryRouter>
+        </DashboardProvider>
+      );
+    },
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof SettingsLayout>;
+
+export const Default: Story = {
+  args: {
+    initialPath: '/settings/standings',
+  },
+};
+
+// Add more stories for different routes
+export const RelativeRoute: Story = {
+  args: {
+    initialPath: '/settings/relative',
+  },
+};
+
+export const WeatherRoute: Story = {
+  args: {
+    initialPath: '/settings/weather',
+  },
+};
diff --git a/src/frontend/components/Settings/SettingsLayout.tsx b/src/frontend/components/Settings/SettingsLayout.tsx
new file mode 100644
index 0000000..c5535fc
--- /dev/null
+++ b/src/frontend/components/Settings/SettingsLayout.tsx
@@ -0,0 +1,140 @@
+import { Gear, Lock, LockOpen } from '@phosphor-icons/react';
+import { Link, Route, Routes, useLocation } from 'react-router-dom';
+import { StandingsSettings } from './sections/StandingsSettings';
+import { RelativeSettings } from './sections/RelativeSettings';
+import { WeatherSettings } from './sections/WeatherSettings';
+import { TrackMapSettings } from './sections/TrackMapSettings';
+import { AdvancedSettings } from './sections/AdvancedSettings';
+import { InputSettings } from './sections/InputSettings';
+import { AboutSettings } from './sections/AboutSettings';
+import { useDashboard } from '@irdashies/context';
+import { useState } from 'react';
+
+export const SettingsLayout = () => {
+  const location = useLocation();
+  const { bridge, editMode } = useDashboard();
+  const [isLocked, setIsLocked] = useState(!editMode);
+
+  const isActive = (path: string) => {
+    return location.pathname === `/settings${path}`;
+  };
+
+  const menuItemClass = (path: string) =>
+    `block w-full p-2 rounded cursor-pointer ${
+      isActive(path) ? 'bg-slate-700' : 'hover:bg-slate-700'
+    }`;
+
+  const handleToggleLock = async () => {
+    const locked = await bridge.toggleLockOverlays();
+    setIsLocked(locked);
+  };
+
+  return (
+    <div className="flex flex-col gap-4 bg-slate-700 p-4 rounded-md w-full h-full">
+      <div className="flex flex-row gap-4 items-center justify-between">
+        <div className="flex flex-row gap-4 items-center">
+          <Gear size={32} weight="bold" />
+          <h1 className="text-2xl font-bold">Overlay Setup</h1>
+        </div>
+        <button
+          onClick={handleToggleLock}
+          className="flex flex-row gap-2 items-center px-3 py-2 rounded bg-slate-800 hover:bg-slate-600 transition-colors"
+        >
+          {isLocked ? (
+            <>
+              <Lock size={20} weight="bold" />
+              <span>Edit Layout</span>
+            </>
+          ) : (
+            <>
+              <LockOpen size={20} weight="bold" />
+              <span>Editing Layout</span>
+            </>
+          )}
+        </button>
+      </div>
+      <div className="flex flex-row gap-4 flex-1">
+        {/* Left Column - Widget Menu */}
+        <div className="w-1/3 bg-slate-800 p-4 rounded-md flex flex-col">
+          <ul className="flex flex-col gap-2 flex-1">
+            <li>
+              <Link to="/settings/input" className={menuItemClass('/input')}>
+                Input Traces
+              </Link>
+            </li>
+            <li>
+              <Link
+                to="/settings/standings"
+                className={menuItemClass('/standings')}
+              >
+                Standings
+              </Link>
+            </li>
+            <li>
+              <Link
+                to="/settings/relative"
+                className={menuItemClass('/relative')}
+              >
+                Relative
+              </Link>
+            </li>
+            <li>
+              <Link
+                to="/settings/weather"
+                className={menuItemClass('/weather')}
+              >
+                Weather
+              </Link>
+            </li>
+            <li>
+              <Link to="/settings/map" className={menuItemClass('/track-map')}>
+                <div className="flex flex-row gap-2 items-center">
+                  Track Map
+                  <span className="text-xs bg-yellow-600 text-yellow-100 px-2 py-0.5 rounded-full flex flex-row gap-1 items-center">
+                    Experimental
+                  </span>
+                </div>
+              </Link>
+            </li>
+          </ul>
+          {/* Advanced settings pushed to bottom */}
+          <div className="mt-auto pt-4 border-t border-slate-700 flex flex-col gap-2">
+            <Link
+              to="/settings/advanced"
+              className={menuItemClass('/advanced')}
+            >
+              Advanced
+            </Link>
+            <Link
+              to="/settings/about"
+              className={menuItemClass('/about')}
+            >
+              About
+            </Link>
+          </div>
+        </div>
+
+        {/* Right Column - Widget Settings */}
+        <div className="w-2/3 bg-slate-800 p-4 rounded-md">
+          <Routes>
+            <Route path="standings" element={<StandingsSettings />} />
+            <Route path="relative" element={<RelativeSettings />} />
+            <Route path="weather" element={<WeatherSettings />} />
+            <Route path="map" element={<TrackMapSettings />} />
+            <Route path="input" element={<InputSettings />} />
+            <Route path="advanced" element={<AdvancedSettings />} />
+            <Route path="about" element={<AboutSettings />} />
+            <Route
+              path="*"
+              element={
+                <div className="text-slate-400">
+                  Select a widget from the left to customize its settings
+                </div>
+              }
+            />
+          </Routes>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/src/frontend/components/Settings/__mocks__/mockBridge.ts b/src/frontend/components/Settings/__mocks__/mockBridge.ts
new file mode 100644
index 0000000..d95b89b
--- /dev/null
+++ b/src/frontend/components/Settings/__mocks__/mockBridge.ts
@@ -0,0 +1,24 @@
+import type { DashboardBridge } from '@irdashies/types';
+import { defaultDashboard } from '../../../../app/storage/defaultDashboard';
+
+export const mockDashboardBridge: DashboardBridge = {
+  reloadDashboard: () => {
+    // noop
+  },
+  saveDashboard: () => {
+    // noop
+  },
+  dashboardUpdated: (callback) => {
+    callback(defaultDashboard);
+    return () => {
+      // noop
+    };
+  },
+  onEditModeToggled: (callback) => {
+    callback(false);
+    return () => {
+      // noop
+    };
+  },
+  toggleLockOverlays: () => Promise.resolve(true),
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/components/BaseSettingsSection.tsx b/src/frontend/components/Settings/components/BaseSettingsSection.tsx
new file mode 100644
index 0000000..287c69b
--- /dev/null
+++ b/src/frontend/components/Settings/components/BaseSettingsSection.tsx
@@ -0,0 +1,65 @@
+import { ReactNode } from 'react';
+import { ToggleSwitch } from './ToggleSwitch';
+import { BaseWidgetSettings } from '../types';
+import { useDashboard } from '@irdashies/context';
+
+interface BaseSettingsSectionProps<T extends BaseWidgetSettings> {
+  title: string;
+  description: string;
+  settings: T;
+  onSettingsChange: (settings: T) => void;
+  widgetId: string;
+  children?: ReactNode;
+}
+
+export const BaseSettingsSection = <T extends BaseWidgetSettings>({
+  title,
+  description,
+  settings,
+  onSettingsChange,
+  widgetId,
+  children,
+}: BaseSettingsSectionProps<T>) => {
+  const { currentDashboard, onDashboardUpdated } = useDashboard();
+
+  const handleSettingsChange = (newSettings: T) => {
+    onSettingsChange(newSettings);
+    
+    if (currentDashboard && onDashboardUpdated) {
+      const updatedDashboard = {
+        ...currentDashboard,
+        widgets: currentDashboard.widgets.map(widget => 
+          widget.id === widgetId 
+            ? { ...widget, enabled: newSettings.enabled }
+            : widget
+        )
+      };
+      onDashboardUpdated(updatedDashboard);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-xl mb-4">{title}</h2>
+        <p className="text-slate-400">{description}</p>
+      </div>
+
+      <div className="space-y-4">
+        <div className="border-b border-slate-700 pb-4">
+          <ToggleSwitch
+            enabled={settings.enabled}
+            onToggle={(enabled) => handleSettingsChange({ ...settings, enabled })}
+            label="Enable Widget"
+          />
+        </div>
+
+        {children && (
+          <div className="pt-4 space-y-4">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/components/ToggleSwitch.tsx b/src/frontend/components/Settings/components/ToggleSwitch.tsx
new file mode 100644
index 0000000..2325302
--- /dev/null
+++ b/src/frontend/components/Settings/components/ToggleSwitch.tsx
@@ -0,0 +1,28 @@
+interface ToggleSwitchProps {
+  enabled: boolean;
+  onToggle: (enabled: boolean) => void;
+  label?: string;
+}
+
+export const ToggleSwitch = ({ enabled, onToggle, label }: ToggleSwitchProps) => {
+  return (
+    <div className="flex items-center gap-3">
+      <button
+        type="button"
+        role="switch"
+        aria-checked={enabled}
+        onClick={() => onToggle(!enabled)}
+        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 ${
+          enabled ? 'bg-blue-600' : 'bg-slate-600'
+        }`}
+      >
+        <span
+          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+            enabled ? 'translate-x-6' : 'translate-x-1'
+          }`}
+        />
+      </button>
+      {label && <span className="text-sm text-slate-200">{label}</span>}
+    </div>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/AboutSettings.tsx b/src/frontend/components/Settings/sections/AboutSettings.tsx
new file mode 100644
index 0000000..383755b
--- /dev/null
+++ b/src/frontend/components/Settings/sections/AboutSettings.tsx
@@ -0,0 +1,43 @@
+import { GithubLogo, DiscordLogo } from '@phosphor-icons/react';
+
+export const AboutSettings = () => {
+  return (
+    <div className="flex flex-col gap-6">
+      <div>
+        <h2 className="text-xl font-bold mb-4">About</h2>
+        <p className="text-slate-300">
+          iRacing Dashies is an open-source iRacing Dashboards & Overlays application that helps you customize and enhance your racing experience.
+        </p>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <h3 className="text-lg font-semibold">Version</h3>
+        <p className="text-slate-300">v0.0.7</p>
+      </div>
+
+      <div className="flex flex-col gap-4">
+        <h3 className="text-lg font-semibold">Connect</h3>
+        
+        <a 
+          href="https://github.com/tariknz/irdashies" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 text-slate-300 hover:text-white transition-colors w-fit"
+        >
+          <GithubLogo size={24} weight="bold" />
+          <span>GitHub Repository</span>
+        </a>
+
+        <a 
+          href="https://discord.gg/YMAqduF2Ft" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          className="flex items-center gap-2 text-slate-300 hover:text-white transition-colors w-fit"
+        >
+          <DiscordLogo size={24} weight="bold" />
+          <span>Join our Discord Community</span>
+        </a>
+      </div>
+    </div>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/AdvancedSettings.tsx b/src/frontend/components/Settings/sections/AdvancedSettings.tsx
new file mode 100644
index 0000000..7e0dbb1
--- /dev/null
+++ b/src/frontend/components/Settings/sections/AdvancedSettings.tsx
@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { useDashboard } from '@irdashies/context';
+
+export const AdvancedSettings = () => {
+  const { currentDashboard, onDashboardUpdated } = useDashboard();
+  const [dashboardInput, setDashboardInput] = useState<string | undefined>(
+    JSON.stringify(currentDashboard, undefined, 2)
+  );
+
+  if (!currentDashboard || !onDashboardUpdated) {
+    return <>Loading...</>;
+  }
+
+  const onInputUpdated = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setDashboardInput(e.target.value);
+  };
+
+  const handleSave = () => {
+    if (!dashboardInput) {
+      return;
+    }
+
+    try {
+      const dashboard = JSON.parse(dashboardInput);
+      onDashboardUpdated(dashboard);
+    } catch (e) {
+      console.error(e);
+      alert('Invalid JSON format');
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full space-y-4">
+      <div>
+        <h2 className="text-xl mb-4">Advanced Settings</h2>
+        <p className="text-slate-400 mb-4">Configure advanced system settings and preferences.</p>
+      </div>
+      
+      <textarea
+        className="flex-1 w-full bg-slate-800 p-4 font-mono text-sm rounded border border-slate-600 focus:border-slate-500 focus:outline-none"
+        value={dashboardInput}
+        onChange={onInputUpdated}
+        placeholder="Dashboard configuration JSON..."
+      />
+      
+      <div>
+        <button
+          type="button"
+          onClick={handleSave}
+          className="w-full bg-slate-700 hover:bg-slate-600 rounded px-4 py-2 transition-colors cursor-pointer"
+        >
+          Save
+        </button>
+      </div>
+    </div>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/InputSettings.tsx b/src/frontend/components/Settings/sections/InputSettings.tsx
new file mode 100644
index 0000000..f72ce8c
--- /dev/null
+++ b/src/frontend/components/Settings/sections/InputSettings.tsx
@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { BaseSettingsSection } from '../components/BaseSettingsSection';
+import { InputWidgetSettings } from '../types';
+import { useDashboard } from '@irdashies/context';
+
+export const InputSettings = () => {
+  const { currentDashboard } = useDashboard();
+  const [settings, setSettings] = useState<InputWidgetSettings>({
+    enabled: currentDashboard?.widgets.find(w => w.id === 'input')?.enabled ?? false,
+    showThrottle: true,
+    showBrake: true,
+    showClutch: true,
+    opacity: 0.8,
+  });
+
+  if (!currentDashboard) {
+    return <>Loading...</>;
+  }
+
+  return (
+    <BaseSettingsSection
+      title="Input Traces Settings"
+      description="Configure the input traces display settings for throttle, brake, and clutch."
+      settings={settings}
+      onSettingsChange={setSettings}
+      widgetId="input"
+    >
+      <div className="text-slate-300">
+        Additional settings will appear here
+      </div>
+    </BaseSettingsSection>
+  );
+};
diff --git a/src/frontend/components/Settings/sections/RelativeSettings.tsx b/src/frontend/components/Settings/sections/RelativeSettings.tsx
new file mode 100644
index 0000000..71df43a
--- /dev/null
+++ b/src/frontend/components/Settings/sections/RelativeSettings.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { BaseSettingsSection } from '../components/BaseSettingsSection';
+import { RelativeWidgetSettings } from '../types';
+import { useDashboard } from '@irdashies/context';
+
+export const RelativeSettings = () => {
+  const { currentDashboard } = useDashboard();
+  const [settings, setSettings] = useState<RelativeWidgetSettings>({
+    enabled: currentDashboard?.widgets.find(w => w.id === 'relative')?.enabled ?? false,
+    // Add other settings here as needed
+  });
+
+  if (!currentDashboard) {
+    return <>Loading...</>;
+  }
+
+  return (
+    <BaseSettingsSection
+      title="Relative Settings"
+      description="Configure the relative timing display settings."
+      settings={settings}
+      onSettingsChange={setSettings}
+      widgetId="relative"
+    >
+      {/* Add specific settings controls here */}
+      <div className="text-slate-300">
+        Additional settings will appear here
+      </div>
+    </BaseSettingsSection>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/StandingsSettings.tsx b/src/frontend/components/Settings/sections/StandingsSettings.tsx
new file mode 100644
index 0000000..0119a22
--- /dev/null
+++ b/src/frontend/components/Settings/sections/StandingsSettings.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { BaseSettingsSection } from '../components/BaseSettingsSection';
+import { StandingsWidgetSettings } from '../types';
+import { useDashboard } from '@irdashies/context';
+
+export const StandingsSettings = () => {
+  const { currentDashboard } = useDashboard();
+  const [settings, setSettings] = useState<StandingsWidgetSettings>({
+    enabled: currentDashboard?.widgets.find(w => w.id === 'standings')?.enabled ?? false,
+    // Add other settings here as needed
+  });
+
+  if (!currentDashboard) {
+    return <>Loading...</>;
+  }
+
+  return (
+    <BaseSettingsSection
+      title="Standings Settings"
+      description="Configure how the standings widget appears and behaves."
+      settings={settings}
+      onSettingsChange={setSettings}
+      widgetId="standings"
+    >
+      {/* Add specific settings controls here */}
+      <div className="text-slate-300">
+        Additional settings will appear here
+      </div>
+    </BaseSettingsSection>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/TrackMapSettings.tsx b/src/frontend/components/Settings/sections/TrackMapSettings.tsx
new file mode 100644
index 0000000..482d1ef
--- /dev/null
+++ b/src/frontend/components/Settings/sections/TrackMapSettings.tsx
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { BaseSettingsSection } from '../components/BaseSettingsSection';
+import { TrackMapWidgetSettings } from '../types';
+import { useDashboard } from '@irdashies/context';
+
+export const TrackMapSettings = () => {
+  const { currentDashboard } = useDashboard();
+  const [settings, setSettings] = useState<TrackMapWidgetSettings>({
+    enabled: currentDashboard?.widgets.find(w => w.id === 'map')?.enabled ?? false,
+    // Add other settings here as needed
+  });
+
+  if (!currentDashboard) {
+    return <>Loading...</>;
+  }
+
+  return (
+    <BaseSettingsSection
+      title="Track Map Settings"
+      description="Configure track map visualization settings."
+      settings={settings}
+      onSettingsChange={setSettings}
+      widgetId="map"
+    >
+      <div className="bg-yellow-600/20 text-yellow-100 p-4 rounded-md mb-4">
+        <p>This feature is experimental and may not work as expected.</p>
+      </div>
+      {/* Add specific settings controls here */}
+      <div className="text-slate-300">
+        Additional settings will appear here
+      </div>
+    </BaseSettingsSection>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/WeatherSettings.tsx b/src/frontend/components/Settings/sections/WeatherSettings.tsx
new file mode 100644
index 0000000..601a878
--- /dev/null
+++ b/src/frontend/components/Settings/sections/WeatherSettings.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { BaseSettingsSection } from '../components/BaseSettingsSection';
+import { WeatherWidgetSettings } from '../types';
+import { useDashboard } from '@irdashies/context';
+
+export const WeatherSettings = () => {
+  const { currentDashboard } = useDashboard();
+  const [settings, setSettings] = useState<WeatherWidgetSettings>({
+    enabled: currentDashboard?.widgets.find(w => w.id === 'weather')?.enabled ?? false,
+    // Add other settings here as needed
+  });
+
+  if (!currentDashboard) {
+    return <>Loading...</>;
+  }
+
+  return (
+    <BaseSettingsSection
+      title="Weather Settings"
+      description="Configure weather widget display options."
+      settings={settings}
+      onSettingsChange={setSettings}
+      widgetId="weather"
+    >
+      {/* Add specific settings controls here */}
+      <div className="text-slate-300">
+        Additional settings will appear here
+      </div>
+    </BaseSettingsSection>
+  );
+}; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/sections/index.ts b/src/frontend/components/Settings/sections/index.ts
new file mode 100644
index 0000000..6643139
--- /dev/null
+++ b/src/frontend/components/Settings/sections/index.ts
@@ -0,0 +1,5 @@
+export * from './StandingsSettings';
+export * from './RelativeSettings';
+export * from './WeatherSettings';
+export * from './TrackMapSettings';
+export * from './AdvancedSettings'; 
\ No newline at end of file
diff --git a/src/frontend/components/Settings/types.ts b/src/frontend/components/Settings/types.ts
new file mode 100644
index 0000000..a0f6797
--- /dev/null
+++ b/src/frontend/components/Settings/types.ts
@@ -0,0 +1,31 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+export interface BaseWidgetSettings {
+  enabled: boolean;
+}
+
+export interface StandingsWidgetSettings extends BaseWidgetSettings {
+  // Add specific standings settings here
+}
+
+export interface RelativeWidgetSettings extends BaseWidgetSettings {
+  // Add specific relative settings here
+}
+
+export interface WeatherWidgetSettings extends BaseWidgetSettings {
+  // Add specific weather settings here
+}
+
+export interface TrackMapWidgetSettings extends BaseWidgetSettings {
+  // Add specific track map settings here
+}
+
+export interface InputWidgetSettings extends BaseWidgetSettings {
+  showThrottle: boolean;
+  showBrake: boolean;
+  showClutch: boolean;
+  opacity: number;
+}
+
+export interface AdvancedSettings extends BaseWidgetSettings {
+  // Add specific advanced settings here
+} 
\ No newline at end of file
diff --git a/src/frontend/components/Standings/DynamicTelemetrySelector.tsx b/src/frontend/components/Standings/DynamicTelemetrySelector.tsx
index 5c6c830..70903eb 100644
--- a/src/frontend/components/Standings/DynamicTelemetrySelector.tsx
+++ b/src/frontend/components/Standings/DynamicTelemetrySelector.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 
 // Predefined list of test data directories
 export const TEST_DATA_DIRS = [
+  '1745282969339',
   '1731637331038', // MultiClassPCCWithClio
   '1732274253573', // SupercarsRace
   '1732260478001', // AdvancedMX5
@@ -11,6 +12,8 @@ export const TEST_DATA_DIRS = [
   '1732359661942', // GT3Race
   '1731732047131', // LegendsQualifying
   '1733030013074', // PCCRaceWithMicUse
+  '1745282979879',
+  '1745291694179',
 ];
 
 interface DynamicTelemetrySelectorProps {
diff --git a/src/frontend/components/Standings/Relative.stories.tsx b/src/frontend/components/Standings/Relative.stories.tsx
index dea1215..26d7eb6 100644
--- a/src/frontend/components/Standings/Relative.stories.tsx
+++ b/src/frontend/components/Standings/Relative.stories.tsx
@@ -26,7 +26,7 @@ export const Primary: Story = {
 
 export const DynamicTelemetry: Story = {
   decorators: [(Story, context) => {
-    const [selectedPath, setSelectedPath] = useState('/test-data/1735296198162');
+    const [selectedPath, setSelectedPath] = useState('/test-data/1745291694179');
     
     return (
       <>
diff --git a/src/frontend/components/Standings/Relative.tsx b/src/frontend/components/Standings/Relative.tsx
index 8603a31..2792062 100644
--- a/src/frontend/components/Standings/Relative.tsx
+++ b/src/frontend/components/Standings/Relative.tsx
@@ -6,7 +6,7 @@ import { SessionBar } from './SessionBar/SessionBar';
 import { SessionFooter } from './SessionFooter/SessionFooter';
 
 export const Relative = () => {
-  const standings = useDriverRelatives({ buffer: 3 });
+  const standings = useDriverRelatives({ buffer: 5 });
   const [parent] = useAutoAnimate();
 
   return (
diff --git a/src/frontend/components/Standings/Standings.stories.tsx b/src/frontend/components/Standings/Standings.stories.tsx
index 326b9d2..05c2b59 100644
--- a/src/frontend/components/Standings/Standings.stories.tsx
+++ b/src/frontend/components/Standings/Standings.stories.tsx
@@ -16,7 +16,7 @@ export const Primary: Story = {
 
 export const DynamicTelemetry: Story = {
   decorators: [(Story, context) => {
-    const [selectedPath, setSelectedPath] = useState('/test-data/1735296198162');
+    const [selectedPath, setSelectedPath] = useState('/test-data/1745291694179');
     
     return (
       <>
diff --git a/src/frontend/context/DashboardContext/DashboardContext.spec.tsx b/src/frontend/context/DashboardContext/DashboardContext.spec.tsx
index 05caf41..8f792cc 100644
--- a/src/frontend/context/DashboardContext/DashboardContext.spec.tsx
+++ b/src/frontend/context/DashboardContext/DashboardContext.spec.tsx
@@ -9,6 +9,7 @@ const mockBridge: DashboardBridge = {
   dashboardUpdated: vi.fn(),
   saveDashboard: vi.fn(),
   onEditModeToggled: vi.fn(),
+  toggleLockOverlays: vi.fn().mockResolvedValue(true),
 };
 
 const TestComponent: React.FC = () => {
diff --git a/src/frontend/context/DashboardContext/DashboardContext.tsx b/src/frontend/context/DashboardContext/DashboardContext.tsx
index 2279f78..89dd938 100644
--- a/src/frontend/context/DashboardContext/DashboardContext.tsx
+++ b/src/frontend/context/DashboardContext/DashboardContext.tsx
@@ -11,6 +11,7 @@ interface DashboardContextProps {
   editMode: boolean;
   currentDashboard: DashboardLayout | undefined;
   onDashboardUpdated?: (dashboard: DashboardLayout) => void;
+  bridge: DashboardBridge;
 }
 
 const DashboardContext = createContext<DashboardContextProps | undefined>(
@@ -40,6 +41,7 @@ export const DashboardProvider: React.FC<{
         editMode: editMode,
         currentDashboard: dashboard,
         onDashboardUpdated: saveDashboard,
+        bridge,
       }}
     >
       {children}
diff --git a/src/types/dashboardBridge.ts b/src/types/dashboardBridge.ts
index 8f22f6b..a35e7fd 100644
--- a/src/types/dashboardBridge.ts
+++ b/src/types/dashboardBridge.ts
@@ -5,4 +5,5 @@ export interface DashboardBridge {
   dashboardUpdated: (callback: (value: DashboardLayout) => void) => void;
   reloadDashboard: () => void;
   saveDashboard: (value: DashboardLayout) => void;
+  toggleLockOverlays: () => Promise<boolean>;
 }