4 files changed, 32 insertions, 6 deletions
diff --git a/src/app/globals.css b/src/app/globals.css
index 2422d8f..5ca3a6b 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -23,6 +23,7 @@
     --foreground: #ffffff;
 
     --violet: #464199;
+    --violet-darker: #191635;
     --light-violet: #8784c9;
     --dark-indigo: #0d0c1c;
     --red: #e64c4f;
@@ -62,6 +63,7 @@
     --color-background: var(--background);
     --color-foreground: var(--foreground);
     --color-violet: var(--violet);
+    --color-violet-darker: var(--violet-darker);
     --color-light-violet: var(--light-violet);
     --color-dark-indigo: var(--dark-indigo);
     --color-red: var(--red);
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e81e45b..1c24fe8 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -20,14 +20,14 @@ export default function RootLayout({
 }>) {
     return (
         <html lang="en">
-            <body
-                className={`${nunito.className} antialiased px-37.5 xl:px-10`}
-            >
-                <div className="min-h-dvh flex flex-col mx-auto xl:max-w-[1200px] 2xl:max-w-[1500px] ">
+            <body className={`${nunito.className} antialiased`}>
+                <div className="min-h-dvh flex flex-col">
                     <GlobalContextProvider>
                         <Header />
-                        <main className="mt-[50px] mb-[80px] grow">
-                            {children}
+                        <main className="mt-[50px] mb-[80px] grow flex justify-center">
+                            <div className="w-full xl:max-w-[1200px] 2xl:max-w-[1500px]">
+                                {children}
+                            </div>
                         </main>
                         <Footer />
                     </GlobalContextProvider>
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
new file mode 100644
index 0000000..17e3f62
--- /dev/null
+++ b/src/app/profile/page.tsx
@@ -0,0 +1,3 @@
+export default function Profile() {
+    return <></>;
+}
diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx
new file mode 100644
index 0000000..7237d57
--- /dev/null
+++ b/src/app/settings/page.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import { useState } from 'react';
+import SettingsMenu from '@/components/settings/SettingsMenu';
+import SecurityPage from '@/components/settings/SecurityPage';
+import ProfilePage from '@/components/settings/ProfilePage';
+
+export default function Settings() {
+    const [tab, setTab] = useState('profile');
+
+    return (
+        <div className="flex flex-row gap-[250px] w-full max-w-[1500px] h-full">
+            <SettingsMenu tab={tab} setTab={setTab} />
+
+            <div className="flex-1">
+                {tab === 'profile' && <ProfilePage />}
+                {tab === 'security' && <SecurityPage />}
+            </div>
+        </div>
+    );
+}