diff --git a/.gitignore b/.gitignore
index 3bfa397..088d27e 100644
Binary files a/.gitignore and b/.gitignore differ
diff --git a/css/index.css b/css/index.css
index b3ca57a..3218961 100644
--- a/css/index.css
+++ b/css/index.css
@@ -53,7 +53,7 @@
 }
 
 @media (prefers-color-scheme: dark) {
-  :root {
+  :root:not([data-theme="light"]) {
     --color-background-primary: #181816;
     --color-background-secondary: #20201e;
     --color-background-tertiary: #272725;
@@ -83,6 +83,42 @@
   }
 }
 
+:root[data-theme="dark"] {
+  --color-background-primary: #181816;
+  --color-background-secondary: #20201e;
+  --color-background-tertiary: #272725;
+  --color-text-primary: #efede5;
+  --color-text-secondary: #a3a198;
+  --color-text-tertiary: #73726c;
+  --color-border-tertiary: rgba(255, 255, 255, 0.06);
+  --color-border-secondary: rgba(255, 255, 255, 0.12);
+  --color-border-primary: rgba(255, 255, 255, 0.22);
+}
+
+:root[data-theme="amoled"] {
+  --color-background-primary: #000000;
+  --color-background-secondary: #0a0a0a;
+  --color-background-tertiary: #111111;
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #aaaaaa;
+  --color-text-tertiary: #777777;
+  --color-border-tertiary: rgba(255, 255, 255, 0.1);
+  --color-border-secondary: rgba(255, 255, 255, 0.15);
+  --color-border-primary: rgba(255, 255, 255, 0.25);
+}
+
+:root[data-theme="light"] {
+  --color-background-primary: #ffffff;
+  --color-background-secondary: #f7f7f5;
+  --color-background-tertiary: #efefec;
+  --color-text-primary: #1a1a18;
+  --color-text-secondary: #6b6b66;
+  --color-text-tertiary: #9c9a92;
+  --color-border-tertiary: rgba(0, 0, 0, 0.08);
+  --color-border-secondary: rgba(0, 0, 0, 0.15);
+  --color-border-primary: rgba(0, 0, 0, 0.30);
+}
+
 body {
   font-family: var(--font-sans);
   background: var(--color-background-tertiary);
@@ -5013,3 +5049,72 @@ body {
 @keyframes slideDown {
   to { opacity: 0; transform: translateY(10px); }
 }
+
+/* Profile Customization Styles */
+:root {
+  --accent-color: var(--color-text-primary);
+  --dashboard-bg-color: var(--color-background-primary);
+}
+
+.btn-primary {
+  background: var(--accent-color) !important;
+}
+
+.app {
+  background: var(--dashboard-bg-color) !important;
+}
+
+.profile-input::placeholder {
+  color: var(--color-text-tertiary);
+  opacity: 0.7;
+}
+
+.color-option {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid transparent;
+  transition: transform 0.2s, border-color 0.2s;
+}
+
+.color-option.active {
+  transform: scale(1.1);
+  border-color: var(--color-text-primary);
+}
+
+.preset-cover {
+  height: 80px;
+  border-radius: 8px;
+  background-size: cover;
+  background-position: center;
+  cursor: pointer;
+  transition: transform 0.2s, box-shadow 0.2s;
+  border: 2px solid transparent;
+}
+
+.preset-cover:hover {
+  transform: scale(1.05);
+  box-shadow: var(--shadow-md);
+}
+
+.preset-cover.active {
+  border-color: var(--accent-color);
+}
+
+.theme-btn {
+  border: 1px solid var(--color-border-secondary);
+  background: var(--color-background-primary);
+  color: var(--color-text-primary);
+}
+
+.theme-btn.active {
+  border-color: var(--color-text-primary);
+  box-shadow: 0 0 0 1px var(--color-text-primary);
+}
+
+
+/* Profile Banner Transition */
+#profile-banner {
+  transition: object-position 0.15s ease-out;
+}
diff --git a/database.js b/database.js
index 6fc7bec..ddeeffa 100644
--- a/database.js
+++ b/database.js
@@ -40,6 +40,32 @@ function initDb() {
       }
     });
 
+    // Users Table (for persistence)
+    db.run(`CREATE TABLE IF NOT EXISTS users (
+      email TEXT PRIMARY KEY,
+      password TEXT NOT NULL,
+      created_at DATETIME DEFAULT CURRENT_TIMESTAMP
+    )`);
+
+    // User Profiles Table
+    db.run(`CREATE TABLE IF NOT EXISTS user_profiles (
+      email TEXT PRIMARY KEY,
+      display_name TEXT,
+      bio TEXT,
+      academic_details TEXT,
+      social_links TEXT,
+      avatar_url TEXT,
+      banner_url TEXT,
+      banner_position_y TEXT DEFAULT '50%',
+      theme_mode TEXT DEFAULT 'dark',
+      accent_color TEXT,
+      font_family TEXT DEFAULT 'Inter',
+      dashboard_bg TEXT,
+      dashboard_layout TEXT DEFAULT '{"calendar":true,"tasks":true,"focus":true,"statistics":true,"order":["greeting","calendar","tasks","focus","statistics"]}',
+      updated_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+      FOREIGN KEY (email) REFERENCES users(email)
+    )`);
+
     // Pre-populate some subjects if empty
     db.get('SELECT COUNT(*) as count FROM subjects', (err, row) => {
       if (row && row.count === 0) {
diff --git a/index.html b/index.html
index cd7ef13..64e6c2c 100644
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
   <script src="/js/lib/confetti.browser.min.js"></script>
 
   <link rel="icon" type="image/x-icon" href="/public/favicon.ico" />
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&family=Playfair+Display:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
 </head>
 <body>
   <!-- Auth Modal -->
@@ -61,7 +61,7 @@ <h1 class="site-title">StudyPlan</h1>
   </nav>
 
   <div class="header-right">
-    <button class="profile-btn">Profile</button>
+    <button class="profile-btn" id="nav-profile-btn">Profile</button>
     <button class="profile-btn" id="logout-btn">Logout</button>
   </div>
 </header>
@@ -197,6 +197,110 @@ <h1 class="site-title">StudyPlan</h1>
           </div>
         </div>
       </div>
+
+      <!-- Statistics (Placeholder) -->
+      <div id="statistics-section" class="statistics-section" style="padding: 24px;">
+        <h3 style="font-size: 16px; margin-bottom: 16px;">Study Statistics</h3>
+        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
+          <div style="background: var(--color-background-secondary); padding: 16px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-tertiary);">
+            <div style="font-size: 24px; font-weight: 700;">0h</div>
+            <div style="font-size: 12px; color: var(--color-text-secondary);">Total Focus Time</div>
+          </div>
+          <div style="background: var(--color-background-secondary); padding: 16px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-tertiary);">
+            <div style="font-size: 24px; font-weight: 700;">0</div>
+            <div style="font-size: 12px; color: var(--color-text-secondary);">Tasks Completed</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Profile Section -->
+      <div id="profile-section" class="profile-section hidden" style="display: none; padding: 0 0 40px; overflow-y: auto;">
+        <div class="profile-header">
+          <div class="profile-banner-container" style="position: relative; height: 250px; background: #e0e0e0; overflow: hidden; display: flex; align-items: center; justify-content: center;">
+            <img id="profile-banner" src="" alt="Banner" style="width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: none;">
+            <div class="banner-controls" style="position: absolute; top: 16px; right: 16px; display: flex; gap: 8px;">
+              <button id="change-banner-btn" class="btn btn-primary" style="font-size: 12px; padding: 6px 12px; background: rgba(0,0,0,0.6); color: white; border: none;">Change Cover</button>
+              <button id="remove-banner-btn" class="btn" style="font-size: 12px; padding: 6px 12px; background: rgba(255,255,255,0.8); color: black; border: none; display: none;">Remove</button>
+            </div>
+            <input type="file" id="banner-upload-input" accept="image/*,video/*" style="display: none;">
+          </div>
+          
+          <div class="profile-info-container" style="max-width: 800px; margin: -50px auto 0; padding: 0 24px; position: relative; z-index: 10;">
+            <div class="avatar-wrapper" style="position: relative; width: 100px; height: 100px; border-radius: 50%; border: 4px solid var(--color-background-primary); background: var(--color-background-secondary); overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer;">
+              <img id="profile-avatar" src="" alt="Avatar" style="width: 100%; height: 100%; object-fit: cover; display: none;">
+              <div class="avatar-overlay" id="change-avatar-btn" style="position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s;">
+                <svg width="24" height="24" fill="none" stroke="white" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+              </div>
+              <input type="file" id="avatar-upload-input" accept="image/*" style="display: none;">
+              <svg id="default-avatar-icon" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="var(--color-text-secondary)"><path d="M20 21v-2a4 4 0 00-4-4H8a4 4 0 00-4 4v2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="7" r="4" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+            </div>
+            
+            <div class="profile-details-form" style="margin-top: 16px; display: flex; flex-direction: column; gap: 8px;">
+              <input type="text" id="profile-name-input" class="profile-input" placeholder="Display Name" style="font-size: 24px; font-weight: 700; border: none; background: transparent; color: var(--color-text-primary); outline: none;">
+              <input type="text" id="profile-bio-input" class="profile-input" placeholder="Bio (e.g., Comp Sci Major @ Univ)" style="font-size: 14px; border: none; background: transparent; color: var(--color-text-secondary); outline: none;">
+              <input type="text" id="profile-academic-input" class="profile-input" placeholder="Academic Details (e.g., Class of 2026)" style="font-size: 13px; border: none; background: transparent; color: var(--color-text-tertiary); outline: none;">
+              <input type="text" id="profile-social-input" class="profile-input" placeholder="Social Link (e.g., github.com/username)" style="font-size: 13px; border: none; background: transparent; color: var(--color-text-info); outline: none;">
+              <div style="margin-top: 8px;">
+                <button id="save-profile-info-btn" class="btn btn-primary btn-sm">Save Details</button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div class="profile-customization" style="max-width: 800px; margin: 40px auto 0; padding: 0 24px;">
+          <h3 style="font-size: 18px; margin-bottom: 20px; font-weight: 600;">Workspace Customization</h3>
+          
+          <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px;">
+            <!-- Theme -->
+            <div style="background: var(--color-background-secondary); padding: 16px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-tertiary);">
+              <h4 style="font-size: 14px; margin-bottom: 12px; color: var(--color-text-secondary);">Theme Mode</h4>
+              <div style="display: flex; gap: 8px;">
+                <button class="btn theme-btn" data-theme="light" style="flex: 1;">Light</button>
+                <button class="btn theme-btn" data-theme="dark" style="flex: 1;">Dark</button>
+                <button class="btn theme-btn" data-theme="amoled" style="flex: 1; background: #000; color: #fff;">AMOLED</button>
+              </div>
+            </div>
+
+            <!-- Accent Color -->
+            <div style="background: var(--color-background-secondary); padding: 16px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-tertiary);">
+              <h4 style="font-size: 14px; margin-bottom: 12px; color: var(--color-text-secondary);">Accent Color</h4>
+              <div id="accent-color-options" style="display: flex; gap: 10px; flex-wrap: wrap;">
+                <!-- JS will generate these -->
+              </div>
+            </div>
+
+            <!-- Font -->
+            <div style="background: var(--color-background-secondary); padding: 16px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-tertiary);">
+              <h4 style="font-size: 14px; margin-bottom: 12px; color: var(--color-text-secondary);">Font Family</h4>
+              <select id="font-select" style="width: 100%; padding: 8px; border-radius: 6px; border: 1px solid var(--color-border-secondary); background: var(--color-background-primary); color: var(--color-text-primary); outline: none;">
+                <option value="Inter">Inter (Default)</option>
+                <option value="Roboto">Roboto</option>
+                <option value="Playfair Display">Playfair Display</option>
+                <option value="JetBrains Mono">JetBrains Mono</option>
+              </select>
+            </div>
+
+            <!-- Dashboard Layout -->
+            <div style="background: var(--color-background-secondary); padding: 16px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-tertiary);">
+              <h4 style="font-size: 14px; margin-bottom: 12px; color: var(--color-text-secondary);">Dashboard Layout</h4>
+              <div style="display: flex; flex-direction: column; gap: 8px;">
+                <label style="font-size: 13px; display: flex; align-items: center; gap: 8px;"><input type="checkbox" id="layout-cal-toggle" checked> Calendar</label>
+                <label style="font-size: 13px; display: flex; align-items: center; gap: 8px;"><input type="checkbox" id="layout-tasks-toggle" checked> Tasks</label>
+                <label style="font-size: 13px; display: flex; align-items: center; gap: 8px;"><input type="checkbox" id="layout-focus-toggle" checked> Focus Mode</label>
+                <label style="font-size: 13px; display: flex; align-items: center; gap: 8px;"><input type="checkbox" id="layout-stats-toggle" checked> Statistics</label>
+              </div>
+            </div>
+          </div>
+        </div>
+        
+        <!-- Preset Gallery -->
+        <div style="max-width: 800px; margin: 40px auto 0; padding: 0 24px;">
+          <h3 style="font-size: 18px; margin-bottom: 20px; font-weight: 600;">Preset Covers</h3>
+          <div id="preset-gallery" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px;">
+            <!-- JS populated -->
+          </div>
+        </div>
+      </div>
     </div>
 
     <!-- Right Panel -->
@@ -303,7 +407,7 @@ <h3 style="font-size:12px; font-weight:700; text-transform:uppercase; color:var(
   </div>
 </div>
 
-  <script type="module" src="/js/app.js"></script>
+  <script type="module" src="/js/app.js?v=2"></script>
   <script>
   let isLogin = true;
 
diff --git a/js/app.js b/js/app.js
index 6f646ef..aa258d7 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,6 +3,7 @@ import { extractTasksFromText } from './utils/api.js';
 import { initGlobalErrorBoundary } from './utils/errorBoundary.js';
 import { analyzeWorkload } from './utils/scheduler.js';
 import { Toast } from './utils/toast.js';
+import './profile.js?v=2';
 
 initGlobalErrorBoundary();
 
diff --git a/js/profile.js b/js/profile.js
new file mode 100644
index 0000000..9587e8e
--- /dev/null
+++ b/js/profile.js
@@ -0,0 +1,377 @@
+import { Toast } from './utils/toast.js';
+
+let userEmail = null;
+let currentProfile = {};
+
+// Default preset covers
+const PRESET_COVERS = [
+  '/public/cover1.png',
+  '/public/cover2.png',
+  '/public/cover3.png',
+];
+
+const ACCENT_COLORS = [
+  '#efede5', // Default light text
+  '#4f46e5', // Indigo
+  '#ec4899', // Pink
+  '#10b981', // Emerald
+  '#f59e0b', // Amber
+  '#3b82f6', // Blue
+  '#8b5cf6', // Purple
+  '#ef4444', // Red
+];
+
+// Elements
+const profileBtn = document.getElementById('nav-profile-btn');
+const profileSection = document.getElementById('profile-section');
+const mainSections = [
+  document.querySelector('.dashboard-greeting'),
+  document.querySelector('.cal-section'),
+  document.getElementById('tasks-section'),
+  document.getElementById('focus-section'),
+  document.getElementById('statistics-section'),
+  document.querySelector('.topbar')
+];
+const rightPanel = document.querySelector('.panel');
+
+const bannerImg = document.getElementById('profile-banner');
+const avatarImg = document.getElementById('profile-avatar');
+const defaultAvatarIcon = document.getElementById('default-avatar-icon');
+const nameInput = document.getElementById('profile-name-input');
+const bioInput = document.getElementById('profile-bio-input');
+const academicInput = document.getElementById('profile-academic-input');
+const socialInput = document.getElementById('profile-social-input');
+
+const changeBannerBtn = document.getElementById('change-banner-btn');
+const removeBannerBtn = document.getElementById('remove-banner-btn');
+const bannerUploadInput = document.getElementById('banner-upload-input');
+
+const changeAvatarBtn = document.getElementById('change-avatar-btn');
+const avatarUploadInput = document.getElementById('avatar-upload-input');
+const saveProfileInfoBtn = document.getElementById('save-profile-info-btn');
+
+const themeBtns = document.querySelectorAll('.theme-btn');
+const accentColorContainer = document.getElementById('accent-color-options');
+const fontSelect = document.getElementById('font-select');
+
+// Layout toggles
+const layoutToggles = {
+  calendar: document.getElementById('layout-cal-toggle'),
+  tasks: document.getElementById('layout-tasks-toggle'),
+  focus: document.getElementById('layout-focus-toggle'),
+  statistics: document.getElementById('layout-stats-toggle'),
+};
+
+const presetGallery = document.getElementById('preset-gallery');
+
+// Initialize Profile Module
+export function initProfile() {
+  const storedUser = localStorage.getItem('studyplan_user');
+  if (storedUser) {
+    userEmail = JSON.parse(storedUser).email;
+    loadProfile();
+  }
+
+  setupEventListeners();
+  populateAccentColors();
+  populatePresets();
+}
+
+async function loadProfile() {
+  try {
+    const res = await fetch(`/api/profile?email=${encodeURIComponent(userEmail)}`);
+    if (!res.ok) throw new Error('Failed to load profile');
+    currentProfile = await res.json();
+    applyProfileData();
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+function applyProfileData() {
+  // Details
+  nameInput.value = currentProfile.display_name || '';
+  bioInput.value = currentProfile.bio || '';
+  academicInput.value = currentProfile.academic_details || '';
+  socialInput.value = currentProfile.social_links || '';
+
+  // Images
+  if (currentProfile.banner_url) {
+    bannerImg.src = currentProfile.banner_url;
+    bannerImg.style.display = 'block';
+    
+    let posY = currentProfile.banner_position_y || 50;
+    // Strip % if it accidentally got saved
+    if (typeof posY === 'string' && posY.endsWith('%')) {
+      posY = posY.replace('%', '');
+    }
+    bannerImg.style.objectPosition = `50% ${posY}%`;
+    removeBannerBtn.style.display = 'inline-block';
+  } else {
+    bannerImg.style.display = 'none';
+    removeBannerBtn.style.display = 'none';
+  }
+
+  if (currentProfile.avatar_url) {
+    avatarImg.src = currentProfile.avatar_url;
+    avatarImg.style.display = 'block';
+    defaultAvatarIcon.style.display = 'none';
+  } else {
+    avatarImg.style.display = 'none';
+    defaultAvatarIcon.style.display = 'block';
+  }
+
+  // Theme
+  document.documentElement.setAttribute('data-theme', currentProfile.theme_mode || 'dark');
+  themeBtns.forEach(btn => {
+    btn.style.opacity = btn.dataset.theme === (currentProfile.theme_mode || 'dark') ? '1' : '0.5';
+  });
+
+  // Accent Color
+  if (currentProfile.accent_color) {
+    document.documentElement.style.setProperty('--accent-color', currentProfile.accent_color);
+  } else {
+    document.documentElement.style.removeProperty('--accent-color');
+  }
+  updateAccentColorSelection();
+
+  // Font
+  const font = currentProfile.font_family || 'Inter';
+  fontSelect.value = font;
+  let cssFont = 'Inter, system-ui, sans-serif';
+  if (font === 'Roboto') cssFont = 'Roboto, system-ui, sans-serif';
+  if (font === 'Playfair Display') cssFont = '"Playfair Display", serif';
+  if (font === 'JetBrains Mono') cssFont = '"JetBrains Mono", monospace';
+  document.documentElement.style.setProperty('--font-sans', cssFont);
+
+  // Layout
+  if (currentProfile.dashboard_layout) {
+    try {
+      const layout = JSON.parse(currentProfile.dashboard_layout);
+      layoutToggles.calendar.checked = !!layout.calendar;
+      layoutToggles.tasks.checked = !!layout.tasks;
+      layoutToggles.focus.checked = !!layout.focus;
+      layoutToggles.statistics.checked = !!layout.statistics;
+      applyLayoutVisibility(layout);
+    } catch(e) {}
+  }
+}
+
+function applyLayoutVisibility(layout) {
+  const calSec = document.querySelector('.cal-section');
+  const taskSec = document.getElementById('tasks-section');
+  const focusSec = document.getElementById('focus-section');
+  const statSec = document.getElementById('statistics-section');
+  
+  if(calSec) calSec.style.display = layout.calendar ? '' : 'none';
+  if(taskSec && !taskSec.closest('.profile-section')) taskSec.style.display = layout.tasks ? '' : 'none';
+  if(focusSec && !focusSec.closest('.profile-section')) focusSec.style.display = layout.focus ? '' : 'none';
+  if(statSec) statSec.style.display = layout.statistics ? '' : 'none';
+}
+
+async function saveProfile(updates) {
+  try {
+    const res = await fetch(`/api/profile?email=${encodeURIComponent(userEmail)}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(updates)
+    });
+    if (!res.ok) throw new Error('Failed to save profile');
+    currentProfile = { ...currentProfile, ...updates };
+    applyProfileData();
+    Toast.show('Profile updated successfully', 'success');
+    return true;
+  } catch (error) {
+    console.error(error);
+    Toast.show('Failed to update profile', 'error');
+    return false;
+  }
+}
+
+async function uploadFile(file) {
+  const formData = new FormData();
+  formData.append('file', file);
+  try {
+    const res = await fetch('/api/upload', {
+      method: 'POST',
+      body: formData
+    });
+    const data = await res.json();
+    if (!res.ok) throw new Error(data.error);
+    return data.url;
+  } catch (err) {
+    Toast.show('Upload failed', 'error');
+    return null;
+  }
+}
+
+function setupEventListeners() {
+  if (profileBtn) {
+    profileBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      // Hide main sections
+      mainSections.forEach(s => { if(s) s.classList.add('hidden'); if(s && s.style) s.style.display = 'none'; });
+      // Show profile
+      if (profileSection) {
+        profileSection.classList.remove('hidden');
+        profileSection.style.display = 'block';
+      }
+      // Hide right panel to give full width
+      if (rightPanel) rightPanel.style.display = 'none';
+    });
+  }
+
+  // Restore main sections when clicking other nav items
+  document.querySelectorAll('.nav-item').forEach(btn => {
+    btn.addEventListener('click', () => {
+      if (profileSection) {
+        profileSection.classList.add('hidden');
+        profileSection.style.display = 'none';
+      }
+      if (rightPanel) rightPanel.style.display = '';
+      // We rely on the layout config to restore correct display
+      if (currentProfile && currentProfile.dashboard_layout) {
+        applyLayoutVisibility(JSON.parse(currentProfile.dashboard_layout));
+      } else {
+        mainSections.forEach(s => { if(s) { s.classList.remove('hidden'); s.style.display = ''; } });
+      }
+      const topbar = document.querySelector('.topbar');
+      if (topbar) { topbar.classList.remove('hidden'); topbar.style.display = ''; }
+      const greeting = document.querySelector('.dashboard-greeting');
+      if (greeting) { greeting.classList.remove('hidden'); greeting.style.display = ''; }
+    });
+  });
+
+  // Save info
+  if (saveProfileInfoBtn) {
+    saveProfileInfoBtn.addEventListener('click', () => {
+      saveProfile({
+        display_name: nameInput.value,
+        bio: bioInput.value,
+        academic_details: academicInput.value,
+        social_links: socialInput.value
+      });
+    });
+  }
+
+  // Theme
+  themeBtns.forEach(btn => {
+    btn.addEventListener('click', () => {
+      saveProfile({ theme_mode: btn.dataset.theme });
+    });
+  });
+
+  // Font
+  if (fontSelect) {
+    fontSelect.addEventListener('change', () => {
+      saveProfile({ font_family: fontSelect.value });
+    });
+  }
+
+  // Avatar Upload
+  if (changeAvatarBtn && avatarUploadInput) {
+    changeAvatarBtn.addEventListener('click', () => avatarUploadInput.click());
+    avatarUploadInput.addEventListener('change', async (e) => {
+      const file = e.target.files[0];
+      if (file) {
+        const url = await uploadFile(file);
+        if (url) saveProfile({ avatar_url: url });
+      }
+    });
+  }
+
+  // Banner Upload
+  if (changeBannerBtn && bannerUploadInput) {
+    changeBannerBtn.addEventListener('click', () => bannerUploadInput.click());
+    bannerUploadInput.addEventListener('change', async (e) => {
+      const file = e.target.files[0];
+      if (file) {
+        const url = await uploadFile(file);
+        if (url) saveProfile({ banner_url: url });
+      }
+    });
+  }
+
+  if (removeBannerBtn) {
+    removeBannerBtn.addEventListener('click', () => {
+      saveProfile({ banner_url: null, banner_position_y: '50%' });
+    });
+  }
+
+
+  // Layout toggles
+  Object.keys(layoutToggles).forEach(key => {
+    const el = layoutToggles[key];
+    if (el) {
+      el.addEventListener('change', () => {
+        const newLayout = {
+          calendar: layoutToggles.calendar.checked,
+          tasks: layoutToggles.tasks.checked,
+          focus: layoutToggles.focus.checked,
+          statistics: layoutToggles.statistics.checked,
+        };
+        saveProfile({ dashboard_layout: JSON.stringify(newLayout) });
+      });
+    }
+  });
+
+  // Drag and drop banner
+  const bannerContainer = document.querySelector('.profile-banner-container');
+  if (bannerContainer) {
+    bannerContainer.addEventListener('dragover', (e) => { e.preventDefault(); bannerContainer.style.opacity = 0.8; });
+    bannerContainer.addEventListener('dragleave', (e) => { e.preventDefault(); bannerContainer.style.opacity = 1; });
+    bannerContainer.addEventListener('drop', async (e) => {
+      e.preventDefault();
+      bannerContainer.style.opacity = 1;
+      if (e.dataTransfer.files && e.dataTransfer.files[0]) {
+        const url = await uploadFile(e.dataTransfer.files[0]);
+        if (url) saveProfile({ banner_url: url });
+      }
+    });
+  }
+}
+
+function populateAccentColors() {
+  if (!accentColorContainer) return;
+  ACCENT_COLORS.forEach(color => {
+    const div = document.createElement('div');
+    div.className = 'color-option';
+    div.style.background = color;
+    if (currentProfile.accent_color === color) div.classList.add('active');
+    
+    div.addEventListener('click', () => {
+      saveProfile({ accent_color: color });
+    });
+    
+    accentColorContainer.appendChild(div);
+  });
+}
+
+function updateAccentColorSelection() {
+  if (!accentColorContainer) return;
+  const options = accentColorContainer.querySelectorAll('.color-option');
+  options.forEach(opt => {
+    if (opt.style.background === (currentProfile.accent_color || ACCENT_COLORS[0])) {
+      opt.classList.add('active');
+    } else {
+      opt.classList.remove('active');
+    }
+  });
+}
+
+function populatePresets() {
+  if (!presetGallery) return;
+  PRESET_COVERS.forEach(url => {
+    const div = document.createElement('div');
+    div.className = 'preset-cover';
+    div.style.backgroundImage = `url(${url})`;
+    
+    div.addEventListener('click', () => {
+      saveProfile({ banner_url: url });
+    });
+    
+    presetGallery.appendChild(div);
+  });
+}
+
+initProfile();
diff --git a/package-lock.json b/package-lock.json
index 5652882..f4caa2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,10 +13,11 @@
         "cors": "^2.8.6",
         "dotenv": "^17.4.2",
         "express": "^5.2.1",
+        "multer": "^2.1.1",
         "sqlite3": "^6.0.1"
       },
       "engines": {
-        "node": "20.x"
+        "node": ">=20.x"
       }
     },
     "node_modules/@google/genai": {
@@ -164,6 +165,12 @@
         "node": ">= 14"
       }
     },
+    "node_modules/append-field": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/append-field/-/append-field-1.0.0.tgz",
+      "integrity": "sha512-klpgFSWLW1ZEs8svjfb7g4qWY0YS5imI82dTg+QahUvJ8YqAY0P10Uk8tTyh9ZGuYEZEMaeJYCF5BFuX552hsw==",
+      "license": "MIT"
+    },
     "node_modules/base64-js": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
@@ -267,6 +274,23 @@
       "integrity": "sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/buffer-from": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz",
+      "integrity": "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==",
+      "license": "MIT"
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
     "node_modules/bytes": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
@@ -314,6 +338,21 @@
         "node": ">=18"
       }
     },
+    "node_modules/concat-stream": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-2.0.0.tgz",
+      "integrity": "sha512-MWufYdFw53ccGjCA+Ol7XJYpAlW6/prSMzuPOTRnJGcGzuhLn4Scrz7qf6o8bROZ514ltazcIFJZevcfbo0x7A==",
+      "engines": [
+        "node >= 6.0"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "buffer-from": "^1.0.0",
+        "inherits": "^2.0.3",
+        "readable-stream": "^3.0.2",
+        "typedarray": "^0.0.6"
+      }
+    },
     "node_modules/content-disposition": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-1.1.0.tgz",
@@ -1122,6 +1161,68 @@
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
       "license": "MIT"
     },
+    "node_modules/multer": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/multer/-/multer-2.1.1.tgz",
+      "integrity": "sha512-mo+QTzKlx8R7E5ylSXxWzGoXoZbOsRMpyitcht8By2KHvMbf3tjwosZ/Mu/XYU6UuJ3VZnODIrak5ZrPiPyB6A==",
+      "license": "MIT",
+      "dependencies": {
+        "append-field": "^1.0.0",
+        "busboy": "^1.6.0",
+        "concat-stream": "^2.0.0",
+        "type-is": "^1.6.18"
+      },
+      "engines": {
+        "node": ">= 10.16.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
+    "node_modules/multer/node_modules/media-typer": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/multer/node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/multer/node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/multer/node_modules/type-is": {
+      "version": "1.6.18",
+      "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
+      "integrity": "sha512-TkRKr9sUTxEH8MdfuCSP7VizJyzRNMjj2J2do2Jr3Kym598JVdEksuzPQCnlFPW4ky9Q+iA+ma9BGm06XQBy8g==",
+      "license": "MIT",
+      "dependencies": {
+        "media-typer": "0.3.0",
+        "mime-types": "~2.1.24"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/napi-build-utils": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/napi-build-utils/-/napi-build-utils-2.0.0.tgz",
@@ -1743,6 +1844,14 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/string_decoder": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.3.0.tgz",
@@ -1863,6 +1972,12 @@
         "node": ">= 0.6"
       }
     },
+    "node_modules/typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
+      "license": "MIT"
+    },
     "node_modules/undici": {
       "version": "6.25.0",
       "resolved": "https://registry.npmjs.org/undici/-/undici-6.25.0.tgz",
diff --git a/package.json b/package.json
index 37df9f0..0b03fce 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "cors": "^2.8.6",
     "dotenv": "^17.4.2",
     "express": "^5.2.1",
+    "multer": "^2.1.1",
     "sqlite3": "^6.0.1"
   },
   "engines": {
diff --git a/public/cover1.png b/public/cover1.png
new file mode 100644
index 0000000..44f599a
Binary files /dev/null and b/public/cover1.png differ
diff --git a/public/cover2.png b/public/cover2.png
new file mode 100644
index 0000000..b1978d3
Binary files /dev/null and b/public/cover2.png differ
diff --git a/public/cover3.png b/public/cover3.png
new file mode 100644
index 0000000..df2cc02
Binary files /dev/null and b/public/cover3.png differ
diff --git a/server.js b/server.js
index 47e1429..ce0667e 100644
--- a/server.js
+++ b/server.js
@@ -4,8 +4,11 @@ const cors = require('cors');
 const { db, initDb } = require('./database');
 const { GoogleGenAI } = require('@google/genai');
 const path = require('path');
+const multer = require('multer');
 const csvDownloadRouter = require('./backend/routers/csvDownload.router.js');
 
+const upload = multer({ dest: path.join(__dirname, 'public/uploads/') });
+
 const app = express();
 app.use(cors());
 app.use(express.json());
@@ -508,19 +511,23 @@ Text: "${text}"
   const tasks = nlpExtractTasksFromText(text);
   return res.json(tasks);
 });
-// ================= AUTH =================
-const users = {}; // Simple in-memory user store
-
+// ================= AUTH (SQLite) =================
 app.post('/api/auth/signup', (req, res) => {
   const { email, password } = req.body;
   if (!email || !password) {
     return res.status(400).json({ error: 'Email and password required' });
   }
-  if (users[email]) {
-    return res.status(400).json({ error: 'User already exists' });
-  }
-  users[email] = { email, password };
-  res.json({ success: true, message: 'Account created successfully' });
+  db.get('SELECT email FROM users WHERE email = ?', [email], (err, row) => {
+    if (err) return res.status(500).json({ error: err.message });
+    if (row) return res.status(400).json({ error: 'User already exists' });
+    
+    db.run('INSERT INTO users (email, password) VALUES (?, ?)', [email, password], function(err) {
+      if (err) return res.status(500).json({ error: err.message });
+      // Initialize an empty profile for the new user
+      db.run('INSERT INTO user_profiles (email) VALUES (?)', [email]);
+      res.json({ success: true, message: 'Account created successfully' });
+    });
+  });
 });
 
 app.post('/api/auth/login', (req, res) => {
@@ -528,11 +535,94 @@ app.post('/api/auth/login', (req, res) => {
   if (!email || !password) {
     return res.status(400).json({ error: 'Email and password required' });
   }
-  const user = users[email];
-  if (!user || user.password !== password) {
-    return res.status(401).json({ error: 'Invalid email or password' });
-  }
-  res.json({ success: true, email: user.email });
+  db.get('SELECT email, password FROM users WHERE email = ?', [email], (err, user) => {
+    if (err) return res.status(500).json({ error: err.message });
+    if (!user || user.password !== password) {
+      return res.status(401).json({ error: 'Invalid email or password' });
+    }
+    res.json({ success: true, email: user.email });
+  });
+});
+
+// ================= PROFILE API =================
+app.get('/api/profile', (req, res) => {
+  const { email } = req.query;
+  if (!email) return res.status(400).json({ error: 'Email required' });
+
+  db.get('SELECT * FROM user_profiles WHERE email = ?', [email], (err, profile) => {
+    if (err) return res.status(500).json({ error: err.message });
+    if (!profile) {
+      // If profile doesn't exist for some reason, return a default one
+      return res.json({ 
+        email, 
+        theme_mode: 'dark', 
+        font_family: 'Inter', 
+        dashboard_layout: '{"calendar":true,"tasks":true,"focus":true,"statistics":true,"order":["greeting","calendar","tasks","focus","statistics"]}' 
+      });
+    }
+    res.json(profile);
+  });
+});
+
+app.put('/api/profile', (req, res) => {
+  const { email } = req.query;
+  if (!email) return res.status(400).json({ error: 'Email required' });
+
+  const {
+    display_name, bio, academic_details, social_links,
+    avatar_url, banner_url, banner_position_y,
+    theme_mode, accent_color, font_family, dashboard_bg,
+    dashboard_layout
+  } = req.body;
+
+  let query = 'UPDATE user_profiles SET updated_at = CURRENT_TIMESTAMP';
+  const params = [];
+  const updates = [];
+
+  if (display_name !== undefined) { updates.push('display_name = ?'); params.push(display_name); }
+  if (bio !== undefined) { updates.push('bio = ?'); params.push(bio); }
+  if (academic_details !== undefined) { updates.push('academic_details = ?'); params.push(academic_details); }
+  if (social_links !== undefined) { updates.push('social_links = ?'); params.push(social_links); }
+  if (avatar_url !== undefined) { updates.push('avatar_url = ?'); params.push(avatar_url); }
+  if (banner_url !== undefined) { updates.push('banner_url = ?'); params.push(banner_url); }
+  if (banner_position_y !== undefined) { updates.push('banner_position_y = ?'); params.push(banner_position_y); }
+  if (theme_mode !== undefined) { updates.push('theme_mode = ?'); params.push(theme_mode); }
+  if (accent_color !== undefined) { updates.push('accent_color = ?'); params.push(accent_color); }
+  if (font_family !== undefined) { updates.push('font_family = ?'); params.push(font_family); }
+  if (dashboard_bg !== undefined) { updates.push('dashboard_bg = ?'); params.push(dashboard_bg); }
+  if (dashboard_layout !== undefined) { updates.push('dashboard_layout = ?'); params.push(dashboard_layout); }
+
+  if (updates.length === 0) return res.json({ success: true, message: 'No changes' });
+
+  query += ', ' + updates.join(', ') + ' WHERE email = ?';
+  params.push(email);
+
+  db.run(query, params, function(err) {
+    if (err) return res.status(500).json({ error: err.message });
+    // If no changes, profile might not exist, insert it
+    if (this.changes === 0) {
+      db.run('INSERT INTO user_profiles (email) VALUES (?)', [email], (err2) => {
+        if (err2) return res.status(500).json({ error: err2.message });
+        db.run(query, params, (err3) => {
+          if (err3) return res.status(500).json({ error: err3.message });
+          res.json({ success: true });
+        });
+      });
+    } else {
+      res.json({ success: true });
+    }
+  });
+});
+
+app.post('/api/upload', upload.single('file'), (req, res) => {
+  if (!req.file) return res.status(400).json({ error: 'No file uploaded' });
+  // In production, we'd rename it with extension, but for simplicity we can serve the generic file or rename it here
+  const fs = require('fs');
+  const ext = path.extname(req.file.originalname) || '';
+  const newFilename = req.file.filename + ext;
+  const newPath = path.join(req.file.destination, newFilename);
+  fs.renameSync(req.file.path, newPath);
+  res.json({ success: true, url: '/public/uploads/' + newFilename });
 });
 
 // Intentional test route for verifying server error page behavior.