diff --git a/bun.lockb b/bun.lockb
index f30c244e..4ba0703c 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/web/app/(pages)/settings/page.tsx b/web/app/(pages)/settings/page.tsx
new file mode 100644
index 00000000..2843adbe
--- /dev/null
+++ b/web/app/(pages)/settings/page.tsx
@@ -0,0 +1,5 @@
+import SettingsRoute from "@/components/routes/SettingsRoute"
+
+export default function ProfilePage() {
+	return <SettingsRoute />
+}
diff --git a/web/components/routes/SettingsRoute.tsx b/web/components/routes/SettingsRoute.tsx
new file mode 100644
index 00000000..041952f0
--- /dev/null
+++ b/web/components/routes/SettingsRoute.tsx
@@ -0,0 +1,20 @@
+import { Button } from "../ui/button"
+
+export default function SettingsRoute() {
+	return (
+		<div className="flex flex-1 flex-col">
+			<p className="h-[74px] p-[20px] text-2xl font-semibold text-white/30">Settings</p>
+			<div className="flex flex-col space-y-4 p-[20px]">
+				<button className="text-foreground bg-foreground/50 w-full max-w-[300px] rounded-lg p-2">
+					Settings button for something
+				</button>
+			</div>
+		</div>
+		// <div className="flex flex-1 flex-col">
+		// 	<p className="h-[74px] p-[20px] text-2xl font-semibold text-white/30">Settings</p>
+		// 	<div className="mx-auto w-[60%]">
+		// 		<Button className="text-foreground">Settings button for something</Button>
+		// 	</div>
+		// </div>
+	)
+}
diff --git a/web/next.config.mjs b/web/next.config.mjs
index 80c75822..a5a55694 100644
--- a/web/next.config.mjs
+++ b/web/next.config.mjs
@@ -1,6 +1,7 @@
 // with this set to true, website works in both tauri (`bun app` and website with `bun web`)
 // TODO: find a nicer way to do this, seems bad
-const DEV = process.env.DEV
+// const DEV = process.env.DEV
+const DEV = false
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {