diff --git a/pages/api/user/password.js b/pages/api/user/password.js
new file mode 100644
index 0000000..a4c64b0
--- /dev/null
+++ b/pages/api/user/password.js
@@ -0,0 +1,75 @@
+import { sql } from '@vercel/postgres';
+import bcrypt from 'bcryptjs';
+import { getUserFromRequest } from '../../../lib/permission-middleware';
+
+export default async function handler(req, res) {
+  // Set CORS headers
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'PUT, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+  // Handle preflight requests
+  if (req.method === 'OPTIONS') {
+    res.status(200).end();
+    return;
+  }
+
+  if (req.method !== 'PUT') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    // Get authenticated user
+    const user = await getUserFromRequest(req);
+    if (!user) {
+      return res.status(401).json({ error: 'Authentication required' });
+    }
+
+    const { current_password, new_password } = req.body;
+
+    // Validate input
+    if (!current_password || !new_password) {
+      return res.status(400).json({ error: 'Current password and new password are required' });
+    }
+
+    if (new_password.length < 8) {
+      return res.status(400).json({ error: 'New password must be at least 8 characters long' });
+    }
+
+    // Get current user password
+    const userResult = await sql`
+      SELECT password FROM users WHERE id = ${user.userId}
+    `;
+
+    if (userResult.rows.length === 0) {
+      return res.status(404).json({ error: 'User not found' });
+    }
+
+    const currentHashedPassword = userResult.rows[0].password;
+
+    // Verify current password
+    const isCurrentPasswordValid = await bcrypt.compare(current_password, currentHashedPassword);
+    if (!isCurrentPasswordValid) {
+      return res.status(400).json({ error: 'Current password is incorrect' });
+    }
+
+    // Hash new password
+    const saltRounds = 12;
+    const newHashedPassword = await bcrypt.hash(new_password, saltRounds);
+
+    // Update password
+    await sql`
+      UPDATE users 
+      SET 
+        password = ${newHashedPassword},
+        updated_at = CURRENT_TIMESTAMP
+      WHERE id = ${user.userId}
+    `;
+
+    res.status(200).json({ message: 'Password updated successfully' });
+
+  } catch (error) {
+    console.error('Password change error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+} 
\ No newline at end of file
diff --git a/pages/api/user/profile.js b/pages/api/user/profile.js
new file mode 100644
index 0000000..d519f4e
--- /dev/null
+++ b/pages/api/user/profile.js
@@ -0,0 +1,124 @@
+import { sql } from '@vercel/postgres';
+import { getUserFromRequest } from '../../../lib/permission-middleware';
+
+export default async function handler(req, res) {
+  // Set CORS headers
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, PUT, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+  // Handle preflight requests
+  if (req.method === 'OPTIONS') {
+    res.status(200).end();
+    return;
+  }
+
+  try {
+    // Get authenticated user
+    const user = await getUserFromRequest(req);
+    if (!user) {
+      return res.status(401).json({ error: 'Authentication required' });
+    }
+
+    if (req.method === 'GET') {
+      // Get user profile
+      const result = await sql`
+        SELECT 
+          id, email, role, first_name, last_name, username, bio, avatar_url,
+          favorite_games, collection_visibility, preferred_currency,
+          cards_per_page, default_view, notifications_email, 
+          notifications_marketing, two_factor_enabled, theme, language,
+          created_at, updated_at
+        FROM users 
+        WHERE id = ${user.userId}
+      `;
+
+      if (result.rows.length === 0) {
+        return res.status(404).json({ error: 'User not found' });
+      }
+
+      const userProfile = result.rows[0];
+      
+      // Parse JSON fields
+      if (userProfile.favorite_games && typeof userProfile.favorite_games === 'string') {
+        try {
+          userProfile.favorite_games = JSON.parse(userProfile.favorite_games);
+        } catch (e) {
+          userProfile.favorite_games = ['MTG'];
+        }
+      }
+
+      res.status(200).json(userProfile);
+
+    } else if (req.method === 'PUT') {
+      // Update user profile
+      const {
+        first_name,
+        last_name,
+        username,
+        bio,
+        favorite_games
+      } = req.body;
+
+      // Validate username uniqueness if provided
+      if (username) {
+        const existingUser = await sql`
+          SELECT id FROM users 
+          WHERE username = ${username} AND id != ${user.userId}
+        `;
+        
+        if (existingUser.rows.length > 0) {
+          return res.status(400).json({ error: 'Username already taken' });
+        }
+      }
+
+      // Validate favorite_games format
+      if (favorite_games && !Array.isArray(favorite_games)) {
+        return res.status(400).json({ error: 'favorite_games must be an array' });
+      }
+
+      // Update user profile
+      const result = await sql`
+        UPDATE users 
+        SET 
+          first_name = ${first_name || null},
+          last_name = ${last_name || null},
+          username = ${username || null},
+          bio = ${bio || null},
+          favorite_games = ${favorite_games ? JSON.stringify(favorite_games) : null},
+          updated_at = CURRENT_TIMESTAMP
+        WHERE id = ${user.userId}
+        RETURNING 
+          id, email, role, first_name, last_name, username, bio, avatar_url,
+          favorite_games, collection_visibility, preferred_currency,
+          cards_per_page, default_view, notifications_email, 
+          notifications_marketing, two_factor_enabled, theme, language,
+          created_at, updated_at
+      `;
+
+      if (result.rows.length === 0) {
+        return res.status(404).json({ error: 'User not found' });
+      }
+
+      const updatedProfile = result.rows[0];
+      
+      // Parse JSON fields
+      if (updatedProfile.favorite_games && typeof updatedProfile.favorite_games === 'string') {
+        try {
+          updatedProfile.favorite_games = JSON.parse(updatedProfile.favorite_games);
+        } catch (e) {
+          updatedProfile.favorite_games = ['MTG'];
+        }
+      }
+
+      res.status(200).json(updatedProfile);
+
+    } else {
+      res.status(405).json({ error: 'Method not allowed' });
+    }
+
+  } catch (error) {
+    console.error('Profile API error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+} 
\ No newline at end of file
diff --git a/pages/api/user/settings.js b/pages/api/user/settings.js
new file mode 100644
index 0000000..40683d4
--- /dev/null
+++ b/pages/api/user/settings.js
@@ -0,0 +1,229 @@
+import { sql } from '@vercel/postgres';
+import { getUserFromRequest } from '../../../lib/permission-middleware';
+
+export default async function handler(req, res) {
+  // Set CORS headers
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, PUT, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+  // Handle preflight requests
+  if (req.method === 'OPTIONS') {
+    res.status(200).end();
+    return;
+  }
+
+  try {
+    // Get authenticated user
+    const user = await getUserFromRequest(req);
+    if (!user) {
+      return res.status(401).json({ error: 'Authentication required' });
+    }
+
+    if (req.method === 'GET') {
+      // Get user and settings
+      const result = await sql`
+        SELECT 
+          id, email, role, first_name, last_name, username,
+          collection_visibility, preferred_currency, cards_per_page, 
+          default_view, notifications_email, notifications_marketing, 
+          two_factor_enabled, theme, language,
+          created_at, updated_at
+        FROM users 
+        WHERE id = ${user.userId}
+      `;
+
+      if (result.rows.length === 0) {
+        return res.status(404).json({ error: 'User not found' });
+      }
+
+      const userData = result.rows[0];
+      
+      // Structure response
+      const response = {
+        user: {
+          id: userData.id,
+          email: userData.email,
+          role: userData.role,
+          first_name: userData.first_name,
+          last_name: userData.last_name,
+          username: userData.username
+        },
+        settings: {
+          // Account Settings
+          collection_visibility: userData.collection_visibility || 'private',
+          preferred_currency: userData.preferred_currency || 'USD',
+          cards_per_page: userData.cards_per_page || 50,
+          default_view: userData.default_view || 'grid',
+          
+          // Security Settings
+          two_factor_enabled: userData.two_factor_enabled || false,
+          
+          // Notification Settings
+          notifications_email: userData.notifications_email !== false, // Default to true
+          notifications_marketing: userData.notifications_marketing || false,
+          
+          // Display Settings
+          theme: userData.theme || 'system',
+          language: userData.language || 'en'
+        }
+      };
+
+      res.status(200).json(response);
+
+    } else if (req.method === 'PUT') {
+      // Update user settings
+      const {
+        collection_visibility,
+        preferred_currency,
+        cards_per_page,
+        default_view,
+        two_factor_enabled,
+        notifications_email,
+        notifications_marketing,
+        theme,
+        language
+      } = req.body;
+
+      // Validate enum values
+      const validVisibility = ['private', 'public', 'unlisted'];
+      const validCurrency = ['USD', 'EUR', 'GBP', 'CAD', 'JPY'];
+      const validCardsPerPage = [25, 50, 100];
+      const validView = ['grid', 'list'];
+      const validTheme = ['light', 'dark', 'system'];
+      const validLanguage = ['en', 'es', 'fr', 'de', 'ja'];
+
+      // Validate inputs
+      if (collection_visibility && !validVisibility.includes(collection_visibility)) {
+        return res.status(400).json({ error: 'Invalid collection visibility' });
+      }
+      if (preferred_currency && !validCurrency.includes(preferred_currency)) {
+        return res.status(400).json({ error: 'Invalid preferred currency' });
+      }
+      if (cards_per_page && !validCardsPerPage.includes(cards_per_page)) {
+        return res.status(400).json({ error: 'Invalid cards per page value' });
+      }
+      if (default_view && !validView.includes(default_view)) {
+        return res.status(400).json({ error: 'Invalid default view' });
+      }
+      if (theme && !validTheme.includes(theme)) {
+        return res.status(400).json({ error: 'Invalid theme' });
+      }
+      if (language && !validLanguage.includes(language)) {
+        return res.status(400).json({ error: 'Invalid language' });
+      }
+
+      // Build update query dynamically
+      const updateFields = [];
+      const updateValues = [];
+      let paramIndex = 1;
+
+      if (collection_visibility !== undefined) {
+        updateFields.push(`collection_visibility = $${paramIndex}`);
+        updateValues.push(collection_visibility);
+        paramIndex++;
+      }
+      if (preferred_currency !== undefined) {
+        updateFields.push(`preferred_currency = $${paramIndex}`);
+        updateValues.push(preferred_currency);
+        paramIndex++;
+      }
+      if (cards_per_page !== undefined) {
+        updateFields.push(`cards_per_page = $${paramIndex}`);
+        updateValues.push(cards_per_page);
+        paramIndex++;
+      }
+      if (default_view !== undefined) {
+        updateFields.push(`default_view = $${paramIndex}`);
+        updateValues.push(default_view);
+        paramIndex++;
+      }
+      if (two_factor_enabled !== undefined) {
+        updateFields.push(`two_factor_enabled = $${paramIndex}`);
+        updateValues.push(two_factor_enabled);
+        paramIndex++;
+      }
+      if (notifications_email !== undefined) {
+        updateFields.push(`notifications_email = $${paramIndex}`);
+        updateValues.push(notifications_email);
+        paramIndex++;
+      }
+      if (notifications_marketing !== undefined) {
+        updateFields.push(`notifications_marketing = $${paramIndex}`);
+        updateValues.push(notifications_marketing);
+        paramIndex++;
+      }
+      if (theme !== undefined) {
+        updateFields.push(`theme = $${paramIndex}`);
+        updateValues.push(theme);
+        paramIndex++;
+      }
+      if (language !== undefined) {
+        updateFields.push(`language = $${paramIndex}`);
+        updateValues.push(language);
+        paramIndex++;
+      }
+
+      if (updateFields.length === 0) {
+        return res.status(400).json({ error: 'No settings to update' });
+      }
+
+      // Add updated_at and user_id
+      updateFields.push('updated_at = CURRENT_TIMESTAMP');
+      updateValues.push(user.userId);
+
+      // Execute update
+      const updateQuery = `
+        UPDATE users 
+        SET ${updateFields.join(', ')}
+        WHERE id = $${paramIndex}
+        RETURNING 
+          id, email, role, first_name, last_name, username,
+          collection_visibility, preferred_currency, cards_per_page, 
+          default_view, notifications_email, notifications_marketing, 
+          two_factor_enabled, theme, language,
+          created_at, updated_at
+      `;
+
+      const result = await sql.query(updateQuery, updateValues);
+
+      if (result.rows.length === 0) {
+        return res.status(404).json({ error: 'User not found' });
+      }
+
+      const userData = result.rows[0];
+      
+      // Structure response
+      const response = {
+        user: {
+          id: userData.id,
+          email: userData.email,
+          role: userData.role,
+          first_name: userData.first_name,
+          last_name: userData.last_name,
+          username: userData.username
+        },
+        settings: {
+          collection_visibility: userData.collection_visibility,
+          preferred_currency: userData.preferred_currency,
+          cards_per_page: userData.cards_per_page,
+          default_view: userData.default_view,
+          two_factor_enabled: userData.two_factor_enabled,
+          notifications_email: userData.notifications_email,
+          notifications_marketing: userData.notifications_marketing,
+          theme: userData.theme,
+          language: userData.language
+        }
+      };
+
+      res.status(200).json(response);
+
+    } else {
+      res.status(405).json({ error: 'Method not allowed' });
+    }
+
+  } catch (error) {
+    console.error('Settings API error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+} 
\ No newline at end of file
diff --git a/pages/api/user/stats.js b/pages/api/user/stats.js
new file mode 100644
index 0000000..b490c76
--- /dev/null
+++ b/pages/api/user/stats.js
@@ -0,0 +1,136 @@
+import { sql } from '@vercel/postgres';
+import { getUserFromRequest } from '../../../lib/permission-middleware';
+
+export default async function handler(req, res) {
+  // Set CORS headers
+  res.setHeader('Access-Control-Allow-Origin', '*');
+  res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
+  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
+
+  // Handle preflight requests
+  if (req.method === 'OPTIONS') {
+    res.status(200).end();
+    return;
+  }
+
+  if (req.method !== 'GET') {
+    return res.status(405).json({ error: 'Method not allowed' });
+  }
+
+  try {
+    // Get authenticated user
+    const user = await getUserFromRequest(req);
+    if (!user) {
+      return res.status(401).json({ error: 'Authentication required' });
+    }
+
+    // Get total cards owned by user
+    const cardsResult = await sql`
+      SELECT COALESCE(SUM(quantity), 0) as total_cards
+      FROM user_cards 
+      WHERE user_id = ${user.userId}
+    `;
+
+    // Get total collections owned by user
+    const collectionsResult = await sql`
+      SELECT COUNT(*) as total_collections
+      FROM collections 
+      WHERE user_id = ${user.userId}
+    `;
+
+    // Get total decks owned by user
+    const decksResult = await sql`
+      SELECT COUNT(*) as total_decks
+      FROM decks 
+      WHERE user_id = ${user.userId}
+    `;
+
+    // Get total value of user's cards
+    const valueResult = await sql`
+      SELECT COALESCE(SUM(cards.market_price * user_cards.quantity), 0) as total_value
+      FROM user_cards
+      JOIN cards ON user_cards.card_id = cards.id
+      WHERE user_cards.user_id = ${user.userId}
+        AND cards.market_price IS NOT NULL
+    `;
+
+    // Get game breakdown
+    const gameBreakdownResult = await sql`
+      SELECT 
+        cards.game,
+        COUNT(DISTINCT cards.id) as unique_cards,
+        COALESCE(SUM(user_cards.quantity), 0) as total_quantity,
+        COALESCE(SUM(cards.market_price * user_cards.quantity), 0) as total_value
+      FROM user_cards
+      JOIN cards ON user_cards.card_id = cards.id
+      WHERE user_cards.user_id = ${user.userId}
+      GROUP BY cards.game
+      ORDER BY total_value DESC
+    `;
+
+    // Get rarity breakdown
+    const rarityBreakdownResult = await sql`
+      SELECT 
+        cards.rarity,
+        COUNT(DISTINCT cards.id) as unique_cards,
+        COALESCE(SUM(user_cards.quantity), 0) as total_quantity,
+        COALESCE(SUM(cards.market_price * user_cards.quantity), 0) as total_value
+      FROM user_cards
+      JOIN cards ON user_cards.card_id = cards.id
+      WHERE user_cards.user_id = ${user.userId}
+      GROUP BY cards.rarity
+      ORDER BY total_value DESC
+    `;
+
+    // Get recent activity (last 10 cards added)
+    const recentActivityResult = await sql`
+      SELECT 
+        cards.name,
+        cards.game,
+        cards.rarity,
+        cards.image_url,
+        cards.market_price,
+        user_cards.quantity,
+        user_cards.created_at
+      FROM user_cards
+      JOIN cards ON user_cards.card_id = cards.id
+      WHERE user_cards.user_id = ${user.userId}
+      ORDER BY user_cards.created_at DESC
+      LIMIT 10
+    `;
+
+    const stats = {
+      totalCards: parseInt(cardsResult.rows[0].total_cards) || 0,
+      totalCollections: parseInt(collectionsResult.rows[0].total_collections) || 0,
+      totalDecks: parseInt(decksResult.rows[0].total_decks) || 0,
+      totalValue: parseFloat(valueResult.rows[0].total_value) || 0,
+      gameBreakdown: gameBreakdownResult.rows.map(row => ({
+        game: row.game,
+        uniqueCards: parseInt(row.unique_cards),
+        totalQuantity: parseInt(row.total_quantity),
+        totalValue: parseFloat(row.total_value)
+      })),
+      rarityBreakdown: rarityBreakdownResult.rows.map(row => ({
+        rarity: row.rarity,
+        uniqueCards: parseInt(row.unique_cards),
+        totalQuantity: parseInt(row.total_quantity),
+        totalValue: parseFloat(row.total_value)
+      })),
+      recentActivity: recentActivityResult.rows.map(row => ({
+        name: row.name,
+        game: row.game,
+        rarity: row.rarity,
+        imageUrl: row.image_url,
+        marketPrice: parseFloat(row.market_price) || 0,
+        quantity: parseInt(row.quantity),
+        addedAt: row.created_at
+      }))
+    };
+
+    res.status(200).json(stats);
+
+  } catch (error) {
+    console.error('Stats API error:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+} 
\ No newline at end of file
diff --git a/pages/profile.js b/pages/profile.js
new file mode 100644
index 0000000..54f15f6
--- /dev/null
+++ b/pages/profile.js
@@ -0,0 +1,625 @@
+import { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/router';
+import Layout from '../components/Layout';
+
+export default function Profile() {
+  const router = useRouter();
+  const fileInputRef = useRef(null);
+  
+  // User state
+  const [user, setUser] = useState({
+    email: 'me@randallstillwell.com',
+    role: 'admin',
+    first_name: '',
+    last_name: '',
+    username: '',
+    bio: '',
+    avatar_url: '',
+    favorite_games: ['MTG'],
+    created_at: new Date().toISOString()
+  });
+  
+  // UI state
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [editMode, setEditMode] = useState(false);
+  const [message, setMessage] = useState({ type: '', text: '' });
+  const [stats, setStats] = useState({
+    totalCards: 0,
+    totalCollections: 0,
+    totalDecks: 0,
+    totalValue: 0
+  });
+  
+  // Form state
+  const [formData, setFormData] = useState({
+    first_name: '',
+    last_name: '',
+    username: '',
+    bio: '',
+    favorite_games: []
+  });
+
+  useEffect(() => {
+    loadUserProfile();
+    loadUserStats();
+  }, []);
+
+  const loadUserProfile = async () => {
+    try {
+      const token = localStorage.getItem('auth_token');
+      if (!token) {
+        router.push('/login');
+        return;
+      }
+
+      const response = await fetch('/api/user/profile', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (response.ok) {
+        const userData = await response.json();
+        setUser(userData);
+        setFormData({
+          first_name: userData.first_name || '',
+          last_name: userData.last_name || '',
+          username: userData.username || '',
+          bio: userData.bio || '',
+          favorite_games: userData.favorite_games || []
+        });
+      } else if (response.status === 401) {
+        router.push('/login');
+      }
+    } catch (error) {
+      console.error('Error loading profile:', error);
+      setMessage({ type: 'error', text: 'Failed to load profile' });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const loadUserStats = async () => {
+    try {
+      const token = localStorage.getItem('auth_token');
+      if (!token) return;
+
+      const response = await fetch('/api/user/stats', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (response.ok) {
+        const statsData = await response.json();
+        setStats(statsData);
+      }
+    } catch (error) {
+      console.error('Error loading stats:', error);
+    }
+  };
+
+  const handleInputChange = (field, value) => {
+    setFormData(prev => ({
+      ...prev,
+      [field]: value
+    }));
+  };
+
+  const handleGameToggle = (game) => {
+    setFormData(prev => ({
+      ...prev,
+      favorite_games: prev.favorite_games.includes(game)
+        ? prev.favorite_games.filter(g => g !== game)
+        : [...prev.favorite_games, game]
+    }));
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    setMessage({ type: '', text: '' });
+
+    try {
+      const token = localStorage.getItem('auth_token');
+      const response = await fetch('/api/user/profile', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify(formData)
+      });
+
+      if (response.ok) {
+        const updatedUser = await response.json();
+        setUser(updatedUser);
+        setEditMode(false);
+        setMessage({ type: 'success', text: 'Profile updated successfully!' });
+      } else {
+        const error = await response.json();
+        setMessage({ type: 'error', text: error.message || 'Failed to update profile' });
+      }
+    } catch (error) {
+      console.error('Error updating profile:', error);
+      setMessage({ type: 'error', text: 'Failed to update profile' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleAvatarUpload = async (event) => {
+    const file = event.target.files[0];
+    if (!file) return;
+
+    // Validate file type and size
+    if (!file.type.startsWith('image/')) {
+      setMessage({ type: 'error', text: 'Please select an image file' });
+      return;
+    }
+
+    if (file.size > 5 * 1024 * 1024) { // 5MB limit
+      setMessage({ type: 'error', text: 'Image must be less than 5MB' });
+      return;
+    }
+
+    const formData = new FormData();
+    formData.append('avatar', file);
+
+    try {
+      setSaving(true);
+      const token = localStorage.getItem('auth_token');
+      const response = await fetch('/api/user/avatar', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`
+        },
+        body: formData
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        setUser(prev => ({ ...prev, avatar_url: result.avatar_url }));
+        setMessage({ type: 'success', text: 'Avatar updated successfully!' });
+      } else {
+        const error = await response.json();
+        setMessage({ type: 'error', text: error.message || 'Failed to upload avatar' });
+      }
+    } catch (error) {
+      console.error('Error uploading avatar:', error);
+      setMessage({ type: 'error', text: 'Failed to upload avatar' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const generateAvatar = async () => {
+    try {
+      setSaving(true);
+      const token = localStorage.getItem('auth_token');
+      const response = await fetch('/api/user/avatar/generate', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (response.ok) {
+        const result = await response.json();
+        setUser(prev => ({ ...prev, avatar_url: result.avatar_url }));
+        setMessage({ type: 'success', text: 'Avatar generated successfully!' });
+      } else {
+        const error = await response.json();
+        setMessage({ type: 'error', text: error.message || 'Failed to generate avatar' });
+      }
+    } catch (error) {
+      console.error('Error generating avatar:', error);
+      setMessage({ type: 'error', text: 'Failed to generate avatar' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const formatCurrency = (amount) => {
+    return new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD'
+    }).format(amount);
+  };
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+  };
+
+  const getDisplayName = () => {
+    if (user.first_name || user.last_name) {
+      return `${user.first_name} ${user.last_name}`.trim();
+    }
+    return user.username || user.email;
+  };
+
+  const getInitials = () => {
+    if (user.first_name || user.last_name) {
+      return `${user.first_name?.charAt(0) || ''}${user.last_name?.charAt(0) || ''}`.toUpperCase();
+    }
+    return user.email?.charAt(0).toUpperCase() || 'U';
+  };
+
+  const gameOptions = [
+    { value: 'MTG', label: 'Magic: The Gathering', color: 'purple', icon: '🔮' },
+    { value: 'Pokemon', label: 'Pokemon', color: 'blue', icon: '⚡' },
+    { value: 'Lorcana', label: 'Disney Lorcana', color: 'pink', icon: '✨' }
+  ];
+
+  if (loading) {
+    return (
+      <Layout user={user}>
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="animate-spin rounded-full h-32 w-32 border-b-2" style={{ borderColor: 'var(--accent-ember)' }}></div>
+        </div>
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout user={user}>
+      <div className="max-w-4xl mx-auto p-6">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
+            Profile
+          </h1>
+          <p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
+            Manage your account information and preferences
+          </p>
+        </div>
+
+        {/* Message */}
+        {message.text && (
+          <div className={`mb-6 p-4 rounded-xl ${
+            message.type === 'success' 
+              ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800'
+              : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 border border-red-200 dark:border-red-800'
+          }`}>
+            {message.text}
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+          {/* Profile Card */}
+          <div className="lg:col-span-1">
+            <div className="card p-6 text-center">
+              {/* Avatar */}
+              <div className="mb-6">
+                <div className="relative inline-block">
+                  {user.avatar_url ? (
+                    <img
+                      src={user.avatar_url}
+                      alt="Profile"
+                      className="w-32 h-32 rounded-full object-cover mx-auto border-4"
+                      style={{ borderColor: 'var(--accent-ember)' }}
+                    />
+                  ) : (
+                    <div
+                      className="w-32 h-32 rounded-full flex items-center justify-center mx-auto text-4xl font-bold text-white border-4"
+                      style={{ 
+                        backgroundColor: 'var(--accent-ember)',
+                        borderColor: 'var(--accent-flame)'
+                      }}
+                    >
+                      {getInitials()}
+                    </div>
+                  )}
+                  
+                  {/* Avatar Upload Button */}
+                  <button
+                    onClick={() => fileInputRef.current?.click()}
+                    disabled={saving}
+                    className="absolute bottom-0 right-0 p-2 rounded-full shadow-lg transition-all duration-200 hover:scale-110"
+                    style={{ backgroundColor: 'var(--accent-flame)', color: 'white' }}
+                    title="Upload new avatar"
+                  >
+                    <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={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 strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 13a3 3 0 11-6 0 3 3 0 016 0z" />
+                    </svg>
+                  </button>
+                  
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept="image/*"
+                    onChange={handleAvatarUpload}
+                    className="hidden"
+                  />
+                </div>
+                
+                {/* Generate Avatar Button */}
+                <button
+                  onClick={generateAvatar}
+                  disabled={saving}
+                  className="mt-4 px-4 py-2 rounded-xl font-medium transition-all duration-200 hover:shadow-md"
+                  style={{ 
+                    backgroundColor: 'var(--bg-tertiary)', 
+                    color: 'var(--text-primary)',
+                    border: '1px solid var(--border)'
+                  }}
+                >
+                  Generate Avatar
+                </button>
+              </div>
+
+              {/* Basic Info */}
+              <div className="mb-6">
+                <h2 className="text-2xl font-bold mb-1" style={{ color: 'var(--text-primary)' }}>
+                  {getDisplayName()}
+                </h2>
+                {user.username && (
+                  <p className="text-lg mb-2" style={{ color: 'var(--text-secondary)' }}>
+                    @{user.username}
+                  </p>
+                )}
+                <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                  {user.email}
+                </p>
+                <div className="flex items-center justify-center mt-2">
+                  <span 
+                    className="px-3 py-1 text-xs rounded-full font-medium"
+                    style={{ 
+                      backgroundColor: user.role === 'admin' ? 'var(--accent-ember)' : 'var(--accent-gold)',
+                      color: 'white'
+                    }}
+                  >
+                    {user.role?.toUpperCase()}
+                  </span>
+                </div>
+              </div>
+
+              {/* Bio */}
+              {user.bio && (
+                <div className="mb-6">
+                  <p className="text-sm leading-relaxed" style={{ color: 'var(--text-secondary)' }}>
+                    {user.bio}
+                  </p>
+                </div>
+              )}
+
+              {/* Member Since */}
+              <div className="text-center">
+                <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                  Member since {formatDate(user.created_at)}
+                </p>
+              </div>
+            </div>
+
+            {/* Stats Card */}
+            <div className="card p-6 mt-6">
+              <h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
+                Collection Stats
+              </h3>
+              <div className="space-y-4">
+                <div className="flex justify-between items-center">
+                  <span style={{ color: 'var(--text-secondary)' }}>Total Cards</span>
+                  <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>
+                    {stats.totalCards.toLocaleString()}
+                  </span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span style={{ color: 'var(--text-secondary)' }}>Collections</span>
+                  <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>
+                    {stats.totalCollections}
+                  </span>
+                </div>
+                <div className="flex justify-between items-center">
+                  <span style={{ color: 'var(--text-secondary)' }}>Decks</span>
+                  <span className="font-semibold" style={{ color: 'var(--text-primary)' }}>
+                    {stats.totalDecks}
+                  </span>
+                </div>
+                <div className="flex justify-between items-center pt-2 border-t" style={{ borderColor: 'var(--border)' }}>
+                  <span style={{ color: 'var(--text-secondary)' }}>Total Value</span>
+                  <span className="font-bold text-lg" style={{ color: 'var(--accent-ember)' }}>
+                    {formatCurrency(stats.totalValue)}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Profile Form */}
+          <div className="lg:col-span-2">
+            <div className="card p-6">
+              <div className="flex justify-between items-center mb-6">
+                <h3 className="text-xl font-semibold" style={{ color: 'var(--text-primary)' }}>
+                  Profile Information
+                </h3>
+                <button
+                  onClick={() => editMode ? handleSave() : setEditMode(true)}
+                  disabled={saving}
+                  className="px-4 py-2 rounded-xl font-medium transition-all duration-200 hover:shadow-md"
+                  style={{ 
+                    backgroundColor: editMode ? 'var(--accent-ember)' : 'var(--bg-tertiary)',
+                    color: editMode ? 'white' : 'var(--text-primary)',
+                    border: `1px solid ${editMode ? 'var(--accent-ember)' : 'var(--border)'}`
+                  }}
+                >
+                  {saving ? 'Saving...' : editMode ? 'Save Changes' : 'Edit Profile'}
+                </button>
+              </div>
+
+              <div className="space-y-6">
+                {/* Name Fields */}
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                  <div>
+                    <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                      First Name
+                    </label>
+                    {editMode ? (
+                      <input
+                        type="text"
+                        value={formData.first_name}
+                        onChange={(e) => handleInputChange('first_name', e.target.value)}
+                        className="input-field w-full"
+                        placeholder="Enter your first name"
+                      />
+                    ) : (
+                      <p className="py-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                        {user.first_name || 'Not set'}
+                      </p>
+                    )}
+                  </div>
+                  <div>
+                    <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                      Last Name
+                    </label>
+                    {editMode ? (
+                      <input
+                        type="text"
+                        value={formData.last_name}
+                        onChange={(e) => handleInputChange('last_name', e.target.value)}
+                        className="input-field w-full"
+                        placeholder="Enter your last name"
+                      />
+                    ) : (
+                      <p className="py-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                        {user.last_name || 'Not set'}
+                      </p>
+                    )}
+                  </div>
+                </div>
+
+                {/* Username */}
+                <div>
+                  <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                    Username
+                  </label>
+                  {editMode ? (
+                    <input
+                      type="text"
+                      value={formData.username}
+                      onChange={(e) => handleInputChange('username', e.target.value)}
+                      className="input-field w-full"
+                      placeholder="Choose a unique username"
+                    />
+                  ) : (
+                    <p className="py-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                      {user.username || 'Not set'}
+                    </p>
+                  )}
+                </div>
+
+                {/* Bio */}
+                <div>
+                  <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                    Bio
+                  </label>
+                  {editMode ? (
+                    <textarea
+                      value={formData.bio}
+                      onChange={(e) => handleInputChange('bio', e.target.value)}
+                      className="input-field w-full h-24 resize-none"
+                      placeholder="Tell us about yourself..."
+                      maxLength={500}
+                    />
+                  ) : (
+                    <p className="py-2 text-sm leading-relaxed" style={{ color: 'var(--text-secondary)' }}>
+                      {user.bio || 'No bio set'}
+                    </p>
+                  )}
+                </div>
+
+                {/* Favorite Games */}
+                <div>
+                  <label className="block text-sm font-medium mb-3" style={{ color: 'var(--text-primary)' }}>
+                    Favorite Games
+                  </label>
+                  <div className="flex flex-wrap gap-3">
+                    {gameOptions.map(game => (
+                      <button
+                        key={game.value}
+                        onClick={() => editMode && handleGameToggle(game.value)}
+                        disabled={!editMode}
+                        className={`px-4 py-2 rounded-xl font-medium transition-all duration-200 flex items-center gap-2 ${
+                          editMode ? 'cursor-pointer hover:shadow-md' : 'cursor-default'
+                        } ${
+                          (editMode ? formData.favorite_games : user.favorite_games)?.includes(game.value)
+                            ? 'shadow-lg'
+                            : 'hover:shadow-md'
+                        }`}
+                        style={{
+                          backgroundColor: (editMode ? formData.favorite_games : user.favorite_games)?.includes(game.value) 
+                            ? 'var(--accent-ember)' 
+                            : 'var(--bg-tertiary)',
+                          color: (editMode ? formData.favorite_games : user.favorite_games)?.includes(game.value) 
+                            ? 'white' 
+                            : 'var(--text-primary)',
+                          border: `1px solid ${
+                            (editMode ? formData.favorite_games : user.favorite_games)?.includes(game.value) 
+                              ? 'var(--accent-ember)' 
+                              : 'var(--border)'
+                          }`
+                        }}
+                      >
+                        <span>{game.icon}</span>
+                        {game.label}
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Email (Read-only) */}
+                <div>
+                  <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                    Email Address
+                  </label>
+                  <div className="flex items-center gap-3">
+                    <p className="py-2 text-sm" style={{ color: 'var(--text-secondary)' }}>
+                      {user.email}
+                    </p>
+                    <span className="px-2 py-1 text-xs rounded-full bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-200">
+                      Verified
+                    </span>
+                  </div>
+                  <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
+                    To change your email, please contact support
+                  </p>
+                </div>
+
+                {/* Cancel Button (only in edit mode) */}
+                {editMode && (
+                  <div className="flex justify-end pt-4">
+                    <button
+                      onClick={() => {
+                        setEditMode(false);
+                        setFormData({
+                          first_name: user.first_name || '',
+                          last_name: user.last_name || '',
+                          username: user.username || '',
+                          bio: user.bio || '',
+                          favorite_games: user.favorite_games || []
+                        });
+                        setMessage({ type: '', text: '' });
+                      }}
+                      className="px-4 py-2 rounded-xl font-medium transition-all duration-200 hover:shadow-md"
+                      style={{ 
+                        backgroundColor: 'var(--bg-tertiary)', 
+                        color: 'var(--text-secondary)',
+                        border: '1px solid var(--border)'
+                      }}
+                    >
+                      Cancel
+                    </button>
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+} 
\ No newline at end of file
diff --git a/pages/settings.js b/pages/settings.js
index ec2c8dd..9d4e721 100644
--- a/pages/settings.js
+++ b/pages/settings.js
@@ -1,26 +1,668 @@
+import { useState, useEffect } from 'react';
+import { useRouter } from 'next/router';
 import Layout from '../components/Layout';
 
 export default function Settings() {
-  const user = {
+  const router = useRouter();
+  
+  // User state
+  const [user, setUser] = useState({
     email: 'me@randallstillwell.com',
-    role: 'user'
+    role: 'admin'
+  });
+  
+  // Settings state
+  const [settings, setSettings] = useState({
+    // Account Settings
+    notifications_email: true,
+    notifications_marketing: false,
+    collection_visibility: 'private',
+    preferred_currency: 'USD',
+    cards_per_page: 50,
+    default_view: 'grid',
+    
+    // Security Settings
+    two_factor_enabled: false,
+    
+    // Display Settings
+    theme: 'system', // light, dark, system
+    language: 'en'
+  });
+  
+  // Password change state
+  const [passwordForm, setPasswordForm] = useState({
+    current_password: '',
+    new_password: '',
+    confirm_password: ''
+  });
+  
+  // UI state
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [changingPassword, setChangingPassword] = useState(false);
+  const [message, setMessage] = useState({ type: '', text: '' });
+  const [activeSection, setActiveSection] = useState('account');
+
+  useEffect(() => {
+    loadSettings();
+  }, []);
+
+  const loadSettings = async () => {
+    try {
+      const token = localStorage.getItem('auth_token');
+      if (!token) {
+        router.push('/login');
+        return;
+      }
+
+      const response = await fetch('/api/user/settings', {
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (response.ok) {
+        const data = await response.json();
+        setUser(data.user);
+        setSettings(data.settings);
+      } else if (response.status === 401) {
+        router.push('/login');
+      }
+    } catch (error) {
+      console.error('Error loading settings:', error);
+      setMessage({ type: 'error', text: 'Failed to load settings' });
+    } finally {
+      setLoading(false);
+    }
   };
 
+  const handleSettingChange = (key, value) => {
+    setSettings(prev => ({
+      ...prev,
+      [key]: value
+    }));
+  };
+
+  const saveSettings = async () => {
+    setSaving(true);
+    setMessage({ type: '', text: '' });
+
+    try {
+      const token = localStorage.getItem('auth_token');
+      const response = await fetch('/api/user/settings', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify(settings)
+      });
+
+      if (response.ok) {
+        setMessage({ type: 'success', text: 'Settings saved successfully!' });
+      } else {
+        const error = await response.json();
+        setMessage({ type: 'error', text: error.message || 'Failed to save settings' });
+      }
+    } catch (error) {
+      console.error('Error saving settings:', error);
+      setMessage({ type: 'error', text: 'Failed to save settings' });
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handlePasswordChange = async (e) => {
+    e.preventDefault();
+    
+    if (passwordForm.new_password !== passwordForm.confirm_password) {
+      setMessage({ type: 'error', text: 'New passwords do not match' });
+      return;
+    }
+
+    if (passwordForm.new_password.length < 8) {
+      setMessage({ type: 'error', text: 'Password must be at least 8 characters long' });
+      return;
+    }
+
+    setChangingPassword(true);
+    setMessage({ type: '', text: '' });
+
+    try {
+      const token = localStorage.getItem('auth_token');
+      const response = await fetch('/api/user/password', {
+        method: 'PUT',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify({
+          current_password: passwordForm.current_password,
+          new_password: passwordForm.new_password
+        })
+      });
+
+      if (response.ok) {
+        setPasswordForm({ current_password: '', new_password: '', confirm_password: '' });
+        setMessage({ type: 'success', text: 'Password changed successfully!' });
+      } else {
+        const error = await response.json();
+        setMessage({ type: 'error', text: error.message || 'Failed to change password' });
+      }
+    } catch (error) {
+      console.error('Error changing password:', error);
+      setMessage({ type: 'error', text: 'Failed to change password' });
+    } finally {
+      setChangingPassword(false);
+    }
+  };
+
+  const handleDeleteAccount = async () => {
+    const confirmed = window.confirm(
+      'Are you sure you want to delete your account? This action cannot be undone and will permanently delete all your cards, collections, and decks.'
+    );
+
+    if (!confirmed) return;
+
+    const doubleConfirmed = window.confirm(
+      'This is your final warning. Deleting your account will permanently remove all your data. Type "DELETE" to confirm.'
+    );
+
+    if (!doubleConfirmed) return;
+
+    try {
+      const token = localStorage.getItem('auth_token');
+      const response = await fetch('/api/user/delete', {
+        method: 'DELETE',
+        headers: {
+          'Authorization': `Bearer ${token}`
+        }
+      });
+
+      if (response.ok) {
+        localStorage.removeItem('auth_token');
+        router.push('/login?message=Account deleted successfully');
+      } else {
+        const error = await response.json();
+        setMessage({ type: 'error', text: error.message || 'Failed to delete account' });
+      }
+    } catch (error) {
+      console.error('Error deleting account:', error);
+      setMessage({ type: 'error', text: 'Failed to delete account' });
+    }
+  };
+
+  const sections = [
+    { id: 'account', name: 'Account', icon: '👤' },
+    { id: 'security', name: 'Security', icon: '🔒' },
+    { id: 'preferences', name: 'Preferences', icon: '⚙️' },
+    { id: 'notifications', name: 'Notifications', icon: '🔔' },
+    { id: 'display', name: 'Display', icon: '🎨' }
+  ];
+
+  const currencyOptions = [
+    { value: 'USD', label: 'US Dollar ($)' },
+    { value: 'EUR', label: 'Euro (€)' },
+    { value: 'GBP', label: 'British Pound (£)' },
+    { value: 'CAD', label: 'Canadian Dollar (C$)' },
+    { value: 'JPY', label: 'Japanese Yen (¥)' }
+  ];
+
+  const cardsPerPageOptions = [
+    { value: 25, label: '25 cards' },
+    { value: 50, label: '50 cards' },
+    { value: 100, label: '100 cards' }
+  ];
+
+  const viewOptions = [
+    { value: 'grid', label: 'Grid View' },
+    { value: 'list', label: 'List View' }
+  ];
+
+  const themeOptions = [
+    { value: 'light', label: 'Light' },
+    { value: 'dark', label: 'Dark' },
+    { value: 'system', label: 'System' }
+  ];
+
+  if (loading) {
+    return (
+      <Layout user={user}>
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="animate-spin rounded-full h-32 w-32 border-b-2" style={{ borderColor: 'var(--accent-ember)' }}></div>
+        </div>
+      </Layout>
+    );
+  }
+
   return (
     <Layout user={user}>
-      <div className="p-6">
-        <div className="text-center py-12">
-          <div className="text-6xl mb-4">⚙️</div>
-          <h1 className="text-3xl font-bold mb-4" style={{ color: 'var(--text-primary-light)' }}>
+      <div className="max-w-6xl mx-auto p-6">
+        {/* Header */}
+        <div className="mb-8">
+          <h1 className="text-3xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
             Settings
           </h1>
-          <p className="text-lg mb-6" style={{ color: 'var(--text-secondary-light)' }}>
-            Manage your account and preferences
-          </p>
-          <p className="text-sm" style={{ color: 'var(--text-secondary-light)' }}>
-            Coming soon...
+          <p className="text-lg" style={{ color: 'var(--text-secondary)' }}>
+            Manage your account preferences and security settings
           </p>
         </div>
+
+        {/* Message */}
+        {message.text && (
+          <div className={`mb-6 p-4 rounded-xl ${
+            message.type === 'success' 
+              ? 'bg-green-50 dark:bg-green-900/20 text-green-800 dark:text-green-200 border border-green-200 dark:border-green-800'
+              : 'bg-red-50 dark:bg-red-900/20 text-red-800 dark:text-red-200 border border-red-200 dark:border-red-800'
+          }`}>
+            {message.text}
+          </div>
+        )}
+
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+          {/* Sidebar Navigation */}
+          <div className="lg:col-span-1">
+            <div className="card p-4">
+              <nav className="space-y-2">
+                {sections.map(section => (
+                  <button
+                    key={section.id}
+                    onClick={() => setActiveSection(section.id)}
+                    className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl font-medium transition-all duration-200 text-left ${
+                      activeSection === section.id ? 'shadow-lg' : 'hover:shadow-md'
+                    }`}
+                    style={{
+                      backgroundColor: activeSection === section.id ? 'var(--accent-ember)' : 'transparent',
+                      color: activeSection === section.id ? 'white' : 'var(--text-primary)'
+                    }}
+                  >
+                    <span>{section.icon}</span>
+                    {section.name}
+                  </button>
+                ))}
+              </nav>
+            </div>
+          </div>
+
+          {/* Settings Content */}
+          <div className="lg:col-span-3">
+            <div className="card p-6">
+              {/* Account Settings */}
+              {activeSection === 'account' && (
+                <div>
+                  <h2 className="text-2xl font-bold mb-6" style={{ color: 'var(--text-primary)' }}>
+                    Account Settings
+                  </h2>
+                  
+                  <div className="space-y-6">
+                    {/* Email */}
+                    <div>
+                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                        Email Address
+                      </label>
+                      <div className="flex items-center gap-3">
+                        <input
+                          type="email"
+                          value={user.email}
+                          disabled
+                          className="input-field flex-1 opacity-50 cursor-not-allowed"
+                        />
+                        <span className="px-3 py-1 text-xs rounded-full bg-green-100 dark:bg-green-900/20 text-green-800 dark:text-green-200">
+                          Verified
+                        </span>
+                      </div>
+                      <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
+                        Contact support to change your email address
+                      </p>
+                    </div>
+
+                    {/* Collection Visibility */}
+                    <div>
+                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                        Default Collection Visibility
+                      </label>
+                      <select
+                        value={settings.collection_visibility}
+                        onChange={(e) => handleSettingChange('collection_visibility', e.target.value)}
+                        className="input-field w-full"
+                      >
+                        <option value="private">Private</option>
+                        <option value="public">Public</option>
+                        <option value="unlisted">Unlisted</option>
+                      </select>
+                      <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
+                        Controls who can see your new collections by default
+                      </p>
+                    </div>
+
+                    {/* Preferred Currency */}
+                    <div>
+                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                        Preferred Currency
+                      </label>
+                      <select
+                        value={settings.preferred_currency}
+                        onChange={(e) => handleSettingChange('preferred_currency', e.target.value)}
+                        className="input-field w-full"
+                      >
+                        {currencyOptions.map(option => (
+                          <option key={option.value} value={option.value}>
+                            {option.label}
+                          </option>
+                        ))}
+                      </select>
+                      <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
+                        Currency used for displaying card values
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Security Settings */}
+              {activeSection === 'security' && (
+                <div>
+                  <h2 className="text-2xl font-bold mb-6" style={{ color: 'var(--text-primary)' }}>
+                    Security Settings
+                  </h2>
+                  
+                  <div className="space-y-8">
+                    {/* Change Password */}
+                    <div>
+                      <h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
+                        Change Password
+                      </h3>
+                      <form onSubmit={handlePasswordChange} className="space-y-4">
+                        <div>
+                          <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                            Current Password
+                          </label>
+                          <input
+                            type="password"
+                            value={passwordForm.current_password}
+                            onChange={(e) => setPasswordForm(prev => ({ ...prev, current_password: e.target.value }))}
+                            className="input-field w-full"
+                            required
+                          />
+                        </div>
+                        <div>
+                          <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                            New Password
+                          </label>
+                          <input
+                            type="password"
+                            value={passwordForm.new_password}
+                            onChange={(e) => setPasswordForm(prev => ({ ...prev, new_password: e.target.value }))}
+                            className="input-field w-full"
+                            minLength={8}
+                            required
+                          />
+                        </div>
+                        <div>
+                          <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                            Confirm New Password
+                          </label>
+                          <input
+                            type="password"
+                            value={passwordForm.confirm_password}
+                            onChange={(e) => setPasswordForm(prev => ({ ...prev, confirm_password: e.target.value }))}
+                            className="input-field w-full"
+                            minLength={8}
+                            required
+                          />
+                        </div>
+                        <button
+                          type="submit"
+                          disabled={changingPassword}
+                          className="px-6 py-2 rounded-xl font-medium transition-all duration-200 hover:shadow-md"
+                          style={{ 
+                            backgroundColor: 'var(--accent-ember)',
+                            color: 'white'
+                          }}
+                        >
+                          {changingPassword ? 'Changing Password...' : 'Change Password'}
+                        </button>
+                      </form>
+                    </div>
+
+                    {/* Two-Factor Authentication */}
+                    <div>
+                      <h3 className="text-lg font-semibold mb-4" style={{ color: 'var(--text-primary)' }}>
+                        Two-Factor Authentication
+                      </h3>
+                      <div className="flex items-center justify-between p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+                        <div>
+                          <p className="font-medium" style={{ color: 'var(--text-primary)' }}>
+                            Enable 2FA
+                          </p>
+                          <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                            Add an extra layer of security to your account
+                          </p>
+                        </div>
+                        <button
+                          onClick={() => handleSettingChange('two_factor_enabled', !settings.two_factor_enabled)}
+                          className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                            settings.two_factor_enabled ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600'
+                          }`}
+                        >
+                          <span
+                            className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                              settings.two_factor_enabled ? 'translate-x-6' : 'translate-x-1'
+                            }`}
+                          />
+                        </button>
+                      </div>
+                      {settings.two_factor_enabled && (
+                        <p className="text-sm mt-2 p-3 rounded-lg bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200">
+                          Two-factor authentication is enabled. Use your authenticator app to log in.
+                        </p>
+                      )}
+                    </div>
+
+                    {/* Danger Zone */}
+                    <div className="border-t pt-8" style={{ borderColor: 'var(--border)' }}>
+                      <h3 className="text-lg font-semibold mb-4 text-red-600 dark:text-red-400">
+                        Danger Zone
+                      </h3>
+                      <div className="p-4 rounded-xl border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-900/20">
+                        <div className="flex items-center justify-between">
+                          <div>
+                            <p className="font-medium text-red-800 dark:text-red-200">
+                              Delete Account
+                            </p>
+                            <p className="text-sm text-red-600 dark:text-red-300">
+                              Permanently delete your account and all associated data
+                            </p>
+                          </div>
+                          <button
+                            onClick={handleDeleteAccount}
+                            className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded-xl font-medium transition-colors"
+                          >
+                            Delete Account
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Preferences */}
+              {activeSection === 'preferences' && (
+                <div>
+                  <h2 className="text-2xl font-bold mb-6" style={{ color: 'var(--text-primary)' }}>
+                    Preferences
+                  </h2>
+                  
+                  <div className="space-y-6">
+                    {/* Cards Per Page */}
+                    <div>
+                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                        Cards Per Page
+                      </label>
+                      <select
+                        value={settings.cards_per_page}
+                        onChange={(e) => handleSettingChange('cards_per_page', parseInt(e.target.value))}
+                        className="input-field w-full"
+                      >
+                        {cardsPerPageOptions.map(option => (
+                          <option key={option.value} value={option.value}>
+                            {option.label}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+
+                    {/* Default View */}
+                    <div>
+                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                        Default View Mode
+                      </label>
+                      <select
+                        value={settings.default_view}
+                        onChange={(e) => handleSettingChange('default_view', e.target.value)}
+                        className="input-field w-full"
+                      >
+                        {viewOptions.map(option => (
+                          <option key={option.value} value={option.value}>
+                            {option.label}
+                          </option>
+                        ))}
+                      </select>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Notifications */}
+              {activeSection === 'notifications' && (
+                <div>
+                  <h2 className="text-2xl font-bold mb-6" style={{ color: 'var(--text-primary)' }}>
+                    Notification Settings
+                  </h2>
+                  
+                  <div className="space-y-6">
+                    {/* Email Notifications */}
+                    <div className="flex items-center justify-between p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+                      <div>
+                        <p className="font-medium" style={{ color: 'var(--text-primary)' }}>
+                          Email Notifications
+                        </p>
+                        <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                          Receive notifications about your collections and cards
+                        </p>
+                      </div>
+                      <button
+                        onClick={() => handleSettingChange('notifications_email', !settings.notifications_email)}
+                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                          settings.notifications_email ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600'
+                        }`}
+                      >
+                        <span
+                          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                            settings.notifications_email ? 'translate-x-6' : 'translate-x-1'
+                          }`}
+                        />
+                      </button>
+                    </div>
+
+                    {/* Marketing Emails */}
+                    <div className="flex items-center justify-between p-4 rounded-xl" style={{ backgroundColor: 'var(--bg-secondary)' }}>
+                      <div>
+                        <p className="font-medium" style={{ color: 'var(--text-primary)' }}>
+                          Marketing Emails
+                        </p>
+                        <p className="text-sm" style={{ color: 'var(--text-secondary)' }}>
+                          Receive updates about new features and promotions
+                        </p>
+                      </div>
+                      <button
+                        onClick={() => handleSettingChange('notifications_marketing', !settings.notifications_marketing)}
+                        className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                          settings.notifications_marketing ? 'bg-green-600' : 'bg-gray-300 dark:bg-gray-600'
+                        }`}
+                      >
+                        <span
+                          className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                            settings.notifications_marketing ? 'translate-x-6' : 'translate-x-1'
+                          }`}
+                        />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Display Settings */}
+              {activeSection === 'display' && (
+                <div>
+                  <h2 className="text-2xl font-bold mb-6" style={{ color: 'var(--text-primary)' }}>
+                    Display Settings
+                  </h2>
+                  
+                  <div className="space-y-6">
+                    {/* Theme */}
+                    <div>
+                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                        Theme
+                      </label>
+                      <select
+                        value={settings.theme}
+                        onChange={(e) => handleSettingChange('theme', e.target.value)}
+                        className="input-field w-full"
+                      >
+                        {themeOptions.map(option => (
+                          <option key={option.value} value={option.value}>
+                            {option.label}
+                          </option>
+                        ))}
+                      </select>
+                      <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
+                        System will follow your device's theme preference
+                      </p>
+                    </div>
+
+                    {/* Language */}
+                    <div>
+                      <label className="block text-sm font-medium mb-2" style={{ color: 'var(--text-primary)' }}>
+                        Language
+                      </label>
+                      <select
+                        value={settings.language}
+                        onChange={(e) => handleSettingChange('language', e.target.value)}
+                        className="input-field w-full"
+                      >
+                        <option value="en">English</option>
+                        <option value="es">Español</option>
+                        <option value="fr">Français</option>
+                        <option value="de">Deutsch</option>
+                        <option value="ja">日本語</option>
+                      </select>
+                      <p className="text-xs mt-1" style={{ color: 'var(--text-secondary)' }}>
+                        Interface language (coming soon)
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              )}
+
+              {/* Save Button */}
+              <div className="flex justify-end pt-8 border-t" style={{ borderColor: 'var(--border)' }}>
+                <button
+                  onClick={saveSettings}
+                  disabled={saving}
+                  className="px-6 py-3 rounded-xl font-medium transition-all duration-200 hover:shadow-md"
+                  style={{ 
+                    backgroundColor: 'var(--accent-ember)',
+                    color: 'white'
+                  }}
+                >
+                  {saving ? 'Saving...' : 'Save Settings'}
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </Layout>
   );
diff --git a/scripts/add-user-profile-fields.js b/scripts/add-user-profile-fields.js
new file mode 100644
index 0000000..6fa22fa
--- /dev/null
+++ b/scripts/add-user-profile-fields.js
@@ -0,0 +1,247 @@
+#!/usr/bin/env node
+
+/**
+ * Add user profile fields to support enhanced profile and settings
+ * 
+ * This script adds new columns to the users table for:
+ * - Profile information (first_name, last_name, username, bio, avatar_url)
+ * - Preferences (favorite_games, collection_visibility, preferred_currency, etc.)
+ * - Settings (notifications, display preferences)
+ */
+
+import dotenv from 'dotenv';
+import { neon } from '@neondatabase/serverless';
+
+// Load environment variables from .env.local
+dotenv.config({ path: '.env.local' });
+
+async function addUserProfileFields() {
+  const sql = neon(process.env.POSTGRES_URL);
+
+  try {
+    console.log('✅ Connecting to Neon database...');
+
+    // Add basic profile fields
+    console.log('👤 Adding basic profile fields...');
+    
+    await sql`
+      ALTER TABLE users 
+      ADD COLUMN IF NOT EXISTS first_name VARCHAR(255),
+      ADD COLUMN IF NOT EXISTS last_name VARCHAR(255),
+      ADD COLUMN IF NOT EXISTS username VARCHAR(255) UNIQUE,
+      ADD COLUMN IF NOT EXISTS bio TEXT,
+      ADD COLUMN IF NOT EXISTS avatar_url TEXT
+    `;
+    console.log('✅ Added basic profile fields');
+
+    // Add preference fields
+    console.log('⚙️ Adding preference fields...');
+    
+    await sql`
+      ALTER TABLE users 
+      ADD COLUMN IF NOT EXISTS favorite_games JSONB DEFAULT '["MTG"]',
+      ADD COLUMN IF NOT EXISTS collection_visibility VARCHAR(20) DEFAULT 'private',
+      ADD COLUMN IF NOT EXISTS preferred_currency VARCHAR(3) DEFAULT 'USD',
+      ADD COLUMN IF NOT EXISTS cards_per_page INTEGER DEFAULT 50,
+      ADD COLUMN IF NOT EXISTS default_view VARCHAR(10) DEFAULT 'grid'
+    `;
+    console.log('✅ Added preference fields');
+
+    // Add notification settings
+    console.log('🔔 Adding notification settings...');
+    
+    await sql`
+      ALTER TABLE users 
+      ADD COLUMN IF NOT EXISTS notifications_email BOOLEAN DEFAULT true,
+      ADD COLUMN IF NOT EXISTS notifications_marketing BOOLEAN DEFAULT false,
+      ADD COLUMN IF NOT EXISTS two_factor_enabled BOOLEAN DEFAULT false
+    `;
+    console.log('✅ Added notification settings');
+
+    // Add display settings
+    console.log('🎨 Adding display settings...');
+    
+    await sql`
+      ALTER TABLE users 
+      ADD COLUMN IF NOT EXISTS theme VARCHAR(10) DEFAULT 'system',
+      ADD COLUMN IF NOT EXISTS language VARCHAR(5) DEFAULT 'en'
+    `;
+    console.log('✅ Added display settings');
+
+    // Create user_settings table for more complex settings
+    console.log('📊 Creating user_settings table...');
+    
+    await sql`
+      CREATE TABLE IF NOT EXISTS user_settings (
+        id SERIAL PRIMARY KEY,
+        user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+        setting_key VARCHAR(100) NOT NULL,
+        setting_value JSONB NOT NULL,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        UNIQUE(user_id, setting_key)
+      )
+    `;
+    console.log('✅ Created user_settings table');
+
+    // Create user_avatars table for avatar management
+    console.log('🖼️ Creating user_avatars table...');
+    
+    await sql`
+      CREATE TABLE IF NOT EXISTS user_avatars (
+        id SERIAL PRIMARY KEY,
+        user_id INTEGER REFERENCES users(id) ON DELETE CASCADE,
+        filename VARCHAR(255) NOT NULL,
+        original_name VARCHAR(255),
+        mime_type VARCHAR(100),
+        file_size INTEGER,
+        file_path TEXT NOT NULL,
+        is_active BOOLEAN DEFAULT true,
+        created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+        updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+      )
+    `;
+    console.log('✅ Created user_avatars table');
+
+    // Add indexes for performance
+    console.log('🚀 Adding indexes for performance...');
+    
+    await sql`CREATE INDEX IF NOT EXISTS idx_users_username ON users(username)`;
+    await sql`CREATE INDEX IF NOT EXISTS idx_users_email ON users(email)`;
+    await sql`CREATE INDEX IF NOT EXISTS idx_user_settings_user_id ON user_settings(user_id)`;
+    await sql`CREATE INDEX IF NOT EXISTS idx_user_settings_key ON user_settings(setting_key)`;
+    await sql`CREATE INDEX IF NOT EXISTS idx_user_avatars_user_id ON user_avatars(user_id)`;
+    await sql`CREATE INDEX IF NOT EXISTS idx_user_avatars_active ON user_avatars(user_id, is_active)`;
+    
+    console.log('✅ Added performance indexes');
+
+    // Add constraints and validation (skip if they already exist)
+    console.log('🔒 Adding constraints and validation...');
+    
+    try {
+      await sql`
+        ALTER TABLE users 
+        ADD CONSTRAINT check_collection_visibility 
+        CHECK (collection_visibility IN ('private', 'public', 'unlisted'))
+      `;
+    } catch (error) {
+      if (!error.message.includes('already exists')) {
+        throw error;
+      }
+    }
+    
+    try {
+      await sql`
+        ALTER TABLE users 
+        ADD CONSTRAINT check_preferred_currency 
+        CHECK (preferred_currency IN ('USD', 'EUR', 'GBP', 'CAD', 'JPY'))
+      `;
+    } catch (error) {
+      if (!error.message.includes('already exists')) {
+        throw error;
+      }
+    }
+    
+    try {
+      await sql`
+        ALTER TABLE users 
+        ADD CONSTRAINT check_cards_per_page 
+        CHECK (cards_per_page IN (25, 50, 100))
+      `;
+    } catch (error) {
+      if (!error.message.includes('already exists')) {
+        throw error;
+      }
+    }
+    
+    try {
+      await sql`
+        ALTER TABLE users 
+        ADD CONSTRAINT check_default_view 
+        CHECK (default_view IN ('grid', 'list'))
+      `;
+    } catch (error) {
+      if (!error.message.includes('already exists')) {
+        throw error;
+      }
+    }
+    
+    try {
+      await sql`
+        ALTER TABLE users 
+        ADD CONSTRAINT check_theme 
+        CHECK (theme IN ('light', 'dark', 'system'))
+      `;
+    } catch (error) {
+      if (!error.message.includes('already exists')) {
+        throw error;
+      }
+    }
+    
+    try {
+      await sql`
+        ALTER TABLE users 
+        ADD CONSTRAINT check_language 
+        CHECK (language IN ('en', 'es', 'fr', 'de', 'ja'))
+      `;
+    } catch (error) {
+      if (!error.message.includes('already exists')) {
+        throw error;
+      }
+    }
+    
+    console.log('✅ Added constraints and validation');
+
+    // Update existing users with default values
+    console.log('🔄 Updating existing users with default values...');
+    
+    await sql`
+      UPDATE users 
+      SET 
+        favorite_games = '["MTG"]'::jsonb,
+        collection_visibility = 'private',
+        preferred_currency = 'USD',
+        cards_per_page = 50,
+        default_view = 'grid',
+        notifications_email = true,
+        notifications_marketing = false,
+        two_factor_enabled = false,
+        theme = 'system',
+        language = 'en'
+      WHERE 
+        favorite_games IS NULL OR
+        collection_visibility IS NULL OR
+        preferred_currency IS NULL OR
+        cards_per_page IS NULL OR
+        default_view IS NULL OR
+        notifications_email IS NULL OR
+        notifications_marketing IS NULL OR
+        two_factor_enabled IS NULL OR
+        theme IS NULL OR
+        language IS NULL
+    `;
+    console.log('✅ Updated existing users with defaults');
+
+    console.log('\n🎉 User profile fields added successfully!');
+    console.log('\n📋 Summary of changes:');
+    console.log('   📝 Basic Profile: first_name, last_name, username, bio, avatar_url');
+    console.log('   ⚙️ Preferences: favorite_games, collection_visibility, preferred_currency, cards_per_page, default_view');
+    console.log('   🔔 Notifications: notifications_email, notifications_marketing, two_factor_enabled');
+    console.log('   🎨 Display: theme, language');
+    console.log('   📊 New Tables: user_settings, user_avatars');
+    console.log('   🚀 Performance: Added indexes for fast queries');
+    console.log('   🔒 Validation: Added constraints for data integrity');
+
+  } catch (error) {
+    console.error('❌ Failed to add user profile fields:', error.message);
+    console.error('Full error:', error);
+    process.exit(1);
+  }
+}
+
+// Run the migration if this script is executed directly
+if (import.meta.url === `file://${process.argv[1]}`) {
+  addUserProfileFields();
+}
+
+export { addUserProfileFields }; 
\ No newline at end of file