--- a
+++ b/src/pages/Settings/Settings.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from 'react';
+import { Box, Typography, Card, CardContent, Switch, FormGroup, FormControlLabel } from '@mui/material';
+
+const Settings: React.FC = () => {
+  const [state, setState] = useState({
+    darkMode: false,
+    notifications: true,
+    autoSave: true
+  });
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setState({
+      ...state,
+      [event.target.name]: event.target.checked
+    });
+  };
+
+  return (
+    <Box sx={{ p: 3 }}>
+      <Typography variant="h4" gutterBottom>
+        Settings
+      </Typography>
+      <Card>
+        <CardContent>
+          <FormGroup>
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={state.darkMode}
+                  onChange={handleChange}
+                  name="darkMode"
+                />
+              }
+              label="Dark Mode"
+            />
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={state.notifications}
+                  onChange={handleChange}
+                  name="notifications"
+                />
+              }
+              label="Enable Notifications"
+            />
+            <FormControlLabel
+              control={
+                <Switch
+                  checked={state.autoSave}
+                  onChange={handleChange}
+                  name="autoSave"
+                />
+              }
+              label="Auto Save"
+            />
+          </FormGroup>
+        </CardContent>
+      </Card>
+    </Box>
+  );
+};
+
+export default Settings;