From 2516bcb203ca37dae1c6230877982f0536391cd9 Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 13:52:59 +0530
Subject: [PATCH 01/13] feat: add Supabase backend infrastructure and setup
 documentation

---
 backend/SUPABASE_SETUP.md         | 61 +++++++++++++++++++++++++++++++
 backend/add-user-id-migration.sql | 48 ++++++++++++++++++++++++
 backend/clean-database.js         | 39 ++++++++++++++++++++
 backend/fix-rls-policies.sql      | 43 ++++++++++++++++++++++
 backend/init-db.js                | 33 +++++++++++++++++
 backend/src/config/supabase.js    | 16 ++++++++
 backend/src/middleware/auth.js    | 55 ++++++++++++++++++++++++++++
 backend/supabase-schema.sql       | 32 ++++++++++++++++
 8 files changed, 327 insertions(+)
 create mode 100644 backend/SUPABASE_SETUP.md
 create mode 100644 backend/add-user-id-migration.sql
 create mode 100644 backend/clean-database.js
 create mode 100644 backend/fix-rls-policies.sql
 create mode 100644 backend/init-db.js
 create mode 100644 backend/src/config/supabase.js
 create mode 100644 backend/src/middleware/auth.js
 create mode 100644 backend/supabase-schema.sql

diff --git a/backend/SUPABASE_SETUP.md b/backend/SUPABASE_SETUP.md
new file mode 100644
index 0000000..eea403e
--- /dev/null
+++ b/backend/SUPABASE_SETUP.md
@@ -0,0 +1,61 @@
+# Supabase Setup Guide
+
+This guide will help you set up your Supabase project for the Portfolio Tracker application.
+
+## 1. Create a Supabase Project
+
+1. Go to [https://supabase.com/](https://supabase.com/) and sign up or log in
+2. Click "New Project" and follow the steps to create a new project
+3. Choose a name for your project and set a secure database password
+4. Select a region closest to you
+5. Wait for your project to be created (this may take a few minutes)
+
+## 2. Create Database Tables
+
+1. In your Supabase dashboard, go to the "SQL Editor" section
+2. Create a new query
+3. Copy and paste the contents of the `supabase-schema.sql` file into the editor
+4. Click "Run" to execute the SQL and create the tables
+
+## 3. Set Up API Access
+
+1. In your Supabase dashboard, go to the "Settings" section
+2. Click on "API" in the sidebar
+3. Under "Project API keys", copy the "anon" public key
+4. Also copy the "URL" value from the "Project URL" section
+
+## 4. Configure Environment Variables
+
+Update your `.env` file with the Supabase URL and key:
+
+```
+SUPABASE_URL=your_project_url
+SUPABASE_KEY=your_anon_key
+FINNHUB_API_KEY=your_finnhub_api_key
+PORT=5000
+```
+
+## 5. Test the Connection
+
+Run the initialization script to test your connection:
+
+```bash
+npm run init-db
+```
+
+If successful, you should see a message confirming the connection to Supabase.
+
+## 6. Row Level Security (Optional but Recommended)
+
+For production environments, you should set up Row Level Security (RLS) policies in Supabase:
+
+1. Go to the "Authentication" section, then "Policies"
+2. For each table, create appropriate RLS policies based on your requirements
+
+## 7. Additional Configuration
+
+- Consider setting up Supabase Auth if you want to add user authentication
+- Set up automated backups for your database
+- Configure CORS settings if needed
+
+For more information, refer to the [Supabase documentation](https://supabase.com/docs). 
\ No newline at end of file
diff --git a/backend/add-user-id-migration.sql b/backend/add-user-id-migration.sql
new file mode 100644
index 0000000..fe110af
--- /dev/null
+++ b/backend/add-user-id-migration.sql
@@ -0,0 +1,48 @@
+-- Migration to add user_id columns for user-specific data isolation
+-- Run this in your Supabase SQL Editor
+
+-- Add user_id column to stocks table
+ALTER TABLE stocks 
+ADD COLUMN IF NOT EXISTS user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE;
+
+-- Add user_id column to watchlists table  
+ALTER TABLE watchlists 
+ADD COLUMN IF NOT EXISTS user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE;
+
+-- Create indexes for better performance
+CREATE INDEX IF NOT EXISTS idx_stocks_user_id ON stocks(user_id);
+CREATE INDEX IF NOT EXISTS idx_watchlists_user_id ON watchlists(user_id);
+
+-- Add RLS (Row Level Security) policies
+-- Enable RLS on both tables
+ALTER TABLE stocks ENABLE ROW LEVEL SECURITY;
+ALTER TABLE watchlists ENABLE ROW LEVEL SECURITY;
+
+-- Create policy for stocks table - users can only see their own stocks
+CREATE POLICY "Users can view own stocks" ON stocks
+  FOR SELECT USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert own stocks" ON stocks
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can update own stocks" ON stocks
+  FOR UPDATE USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can delete own stocks" ON stocks
+  FOR DELETE USING (auth.uid() = user_id);
+
+-- Create policy for watchlists table - users can only see their own watchlist items
+CREATE POLICY "Users can view own watchlist" ON watchlists
+  FOR SELECT USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert own watchlist items" ON watchlists
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can update own watchlist items" ON watchlists
+  FOR UPDATE USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can delete own watchlist items" ON watchlists
+  FOR DELETE USING (auth.uid() = user_id);
+
+-- Note: After running this migration, existing data will have NULL user_id
+-- You may want to clean up existing data or assign it to a specific user 
\ No newline at end of file
diff --git a/backend/clean-database.js b/backend/clean-database.js
new file mode 100644
index 0000000..f56be3d
--- /dev/null
+++ b/backend/clean-database.js
@@ -0,0 +1,39 @@
+require('dotenv').config();
+const supabase = require('./src/config/supabase');
+
+async function cleanDatabase() {
+  try {
+    console.log('Cleaning database...');
+    
+    // Delete all records from stocks table
+    const { error: stocksError } = await supabase
+      .from('stocks')
+      .delete()
+      .neq('id', 0); // This will delete all records
+    
+    if (stocksError) {
+      console.error('Error deleting stocks:', stocksError);
+    } else {
+      console.log('Successfully deleted all stocks');
+    }
+    
+    // Delete all records from watchlists table
+    const { error: watchlistsError } = await supabase
+      .from('watchlists')
+      .delete()
+      .neq('id', 0); // This will delete all records
+    
+    if (watchlistsError) {
+      console.error('Error deleting watchlists:', watchlistsError);
+    } else {
+      console.log('Successfully deleted all watchlists');
+    }
+    
+    console.log('Database cleaning completed');
+  } catch (error) {
+    console.error('Error cleaning database:', error);
+  }
+}
+
+// Run the cleaning
+cleanDatabase(); 
\ No newline at end of file
diff --git a/backend/fix-rls-policies.sql b/backend/fix-rls-policies.sql
new file mode 100644
index 0000000..d5c32e2
--- /dev/null
+++ b/backend/fix-rls-policies.sql
@@ -0,0 +1,43 @@
+-- Fix RLS policies to work with backend API authentication
+-- Run this in your Supabase SQL Editor
+
+-- Drop existing policies
+DROP POLICY IF EXISTS "Users can view own stocks" ON stocks;
+DROP POLICY IF EXISTS "Users can insert own stocks" ON stocks;
+DROP POLICY IF EXISTS "Users can update own stocks" ON stocks;
+DROP POLICY IF EXISTS "Users can delete own stocks" ON stocks;
+
+DROP POLICY IF EXISTS "Users can view own watchlist" ON watchlists;
+DROP POLICY IF EXISTS "Users can insert own watchlist items" ON watchlists;
+DROP POLICY IF EXISTS "Users can update own watchlist items" ON watchlists;
+DROP POLICY IF EXISTS "Users can delete own watchlist items" ON watchlists;
+
+-- Create new policies that work with backend API
+-- For stocks table
+CREATE POLICY "Users can view own stocks" ON stocks
+  FOR SELECT USING (user_id IS NOT NULL);
+
+CREATE POLICY "Users can insert own stocks" ON stocks
+  FOR INSERT WITH CHECK (user_id IS NOT NULL);
+
+CREATE POLICY "Users can update own stocks" ON stocks
+  FOR UPDATE USING (user_id IS NOT NULL);
+
+CREATE POLICY "Users can delete own stocks" ON stocks
+  FOR DELETE USING (user_id IS NOT NULL);
+
+-- For watchlists table
+CREATE POLICY "Users can view own watchlist" ON watchlists
+  FOR SELECT USING (user_id IS NOT NULL);
+
+CREATE POLICY "Users can insert own watchlist items" ON watchlists
+  FOR INSERT WITH CHECK (user_id IS NOT NULL);
+
+CREATE POLICY "Users can update own watchlist items" ON watchlists
+  FOR UPDATE USING (user_id IS NOT NULL);
+
+CREATE POLICY "Users can delete own watchlist items" ON watchlists
+  FOR DELETE USING (user_id IS NOT NULL);
+
+-- Note: This approach relies on the backend to properly set user_id
+-- The backend authentication middleware ensures only authenticated users can access the API 
\ No newline at end of file
diff --git a/backend/init-db.js b/backend/init-db.js
new file mode 100644
index 0000000..10bc244
--- /dev/null
+++ b/backend/init-db.js
@@ -0,0 +1,33 @@
+require('dotenv').config();
+const supabase = require('./src/config/supabase');
+
+async function initializeDatabase() {
+  try {
+    console.log('Testing connection to Supabase...');
+    
+    // Test connection by fetching version
+    const { data, error } = await supabase.from('stocks').select('*').limit(1);
+    
+    if (error) {
+      console.error('Error connecting to Supabase:', error);
+      console.log('Please make sure:');
+      console.log('1. Your Supabase URL and API key are correct in .env');
+      console.log('2. You have created the "stocks" and "watchlists" tables in Supabase');
+      console.log('3. You have proper permissions set up');
+      process.exit(1);
+    }
+    
+    console.log('Successfully connected to Supabase!');
+    console.log('Tables should be created in the Supabase dashboard.');
+    console.log('Make sure you have the following tables:');
+    console.log('1. stocks - with columns: id, name, ticker, shares, buy_price, current_price, target_price, is_in_watchlist, last_updated');
+    console.log('2. watchlists - with columns: id, name, ticker, target_price, current_price, last_updated, created_at, updated_at');
+    
+  } catch (error) {
+    console.error('Error initializing database:', error);
+    process.exit(1);
+  }
+}
+
+// Run the initialization
+initializeDatabase(); 
\ No newline at end of file
diff --git a/backend/src/config/supabase.js b/backend/src/config/supabase.js
new file mode 100644
index 0000000..8440ba7
--- /dev/null
+++ b/backend/src/config/supabase.js
@@ -0,0 +1,16 @@
+const { createClient } = require('@supabase/supabase-js');
+require('dotenv').config();
+
+const SUPABASE_URL = process.env.SUPABASE_URL;
+const SUPABASE_KEY = process.env.SUPABASE_KEY;
+
+if (!SUPABASE_URL || !SUPABASE_KEY) {
+  console.warn('SUPABASE_URL or SUPABASE_KEY environment variables are not set. Some features will be limited.');
+}
+
+const supabase = createClient(
+  SUPABASE_URL || 'https://example.supabase.co',
+  SUPABASE_KEY || 'demo-key'
+);
+
+module.exports = supabase; 
\ No newline at end of file
diff --git a/backend/src/middleware/auth.js b/backend/src/middleware/auth.js
new file mode 100644
index 0000000..ea169e9
--- /dev/null
+++ b/backend/src/middleware/auth.js
@@ -0,0 +1,55 @@
+const { createClient } = require('@supabase/supabase-js');
+
+// Debug environment variables
+console.log('🔍 Auth Middleware Environment Check:', {
+  hasSupabaseUrl: !!process.env.SUPABASE_URL,
+  hasSupabaseKey: !!process.env.SUPABASE_KEY,
+  supabaseUrl: process.env.SUPABASE_URL ? 'Set' : 'Missing',
+  supabaseKey: process.env.SUPABASE_KEY ? 'Set' : 'Missing'
+});
+
+// Create Supabase client for auth verification
+const supabase = createClient(
+  process.env.SUPABASE_URL,
+  process.env.SUPABASE_KEY
+);
+
+const authenticateUser = async (req, res, next) => {
+  try {
+    console.log('🔍 Auth Middleware Debug:', {
+      url: req.url,
+      method: req.method,
+      hasAuthHeader: !!req.headers.authorization,
+      authHeaderPreview: req.headers.authorization ? `${req.headers.authorization.substring(0, 30)}...` : 'No header'
+    });
+
+    const authHeader = req.headers.authorization;
+    
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+      console.log('❌ No valid auth header found');
+      return res.status(401).json({ error: 'No token provided' });
+    }
+
+    const token = authHeader.substring(7); // Remove 'Bearer ' prefix
+    console.log('🔑 Token extracted, length:', token.length);
+    
+    // Verify the JWT token with Supabase
+    const { data: { user }, error } = await supabase.auth.getUser(token);
+    
+    if (error || !user) {
+      console.error('❌ Token verification failed:', error);
+      return res.status(401).json({ error: 'Invalid token' });
+    }
+
+    console.log('✅ User authenticated:', user.id);
+    
+    // Add user to request object
+    req.user = user;
+    next();
+  } catch (error) {
+    console.error('❌ Auth middleware error:', error);
+    res.status(500).json({ error: 'Authentication failed' });
+  }
+};
+
+module.exports = { authenticateUser }; 
\ No newline at end of file
diff --git a/backend/supabase-schema.sql b/backend/supabase-schema.sql
new file mode 100644
index 0000000..af04695
--- /dev/null
+++ b/backend/supabase-schema.sql
@@ -0,0 +1,32 @@
+-- Create stocks table
+CREATE TABLE IF NOT EXISTS stocks (
+  id SERIAL PRIMARY KEY,
+  name TEXT NOT NULL,
+  ticker TEXT NOT NULL,
+  shares FLOAT NOT NULL DEFAULT 0,
+  buy_price FLOAT NOT NULL DEFAULT 0,
+  current_price FLOAT NOT NULL DEFAULT 0,
+  target_price FLOAT NOT NULL DEFAULT 0,
+  is_in_watchlist BOOLEAN NOT NULL DEFAULT false,
+  last_updated TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create watchlists table
+CREATE TABLE IF NOT EXISTS watchlists (
+  id SERIAL PRIMARY KEY,
+  name TEXT NOT NULL,
+  ticker TEXT NOT NULL,
+  target_price DECIMAL(10, 2) NOT NULL,
+  current_price DECIMAL(10, 2),
+  last_updated TIMESTAMP WITH TIME ZONE,
+  created_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP,
+  updated_at TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP
+);
+
+-- Create indexes for better performance
+CREATE INDEX IF NOT EXISTS idx_stocks_ticker ON stocks(ticker);
+CREATE INDEX IF NOT EXISTS idx_watchlists_ticker ON watchlists(ticker);
+
+-- Note: Run this script in the Supabase SQL Editor 
\ No newline at end of file

From 4e63d41e285d1ab39168b55ef397faf4518f686d Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 13:53:14 +0530
Subject: [PATCH 02/13] feat: add Finnhub API integration and market calendar
 endpoints

---
 backend/src/routes/stocks.js              | 526 ++++++++++++++++++++--
 backend/src/routes/watchlist.js           | 206 ++++++---
 backend/src/services/stockPriceService.js |  44 +-
 3 files changed, 672 insertions(+), 104 deletions(-)

diff --git a/backend/src/routes/stocks.js b/backend/src/routes/stocks.js
index b69fb37..499f00c 100644
--- a/backend/src/routes/stocks.js
+++ b/backend/src/routes/stocks.js
@@ -2,9 +2,9 @@ const express = require('express');
 const router = express.Router();
 const Stock = require('../models/Stock');
 const stockPriceService = require('../services/stockPriceService');
-const { Op } = require('sequelize');
-const { finnhubClient } = require('../config/finnhub');
 const axios = require('axios');
+const supabase = require('../config/supabase');
+const { authenticateUser } = require('../middleware/auth');
 
 // Test Finnhub connection
 router.get('/test-finnhub/:ticker', async (req, res) => {
@@ -31,19 +31,122 @@ router.get('/test-finnhub/:ticker', async (req, res) => {
   }
 });
 
-// Get all stocks
-router.get('/', async (req, res) => {
+// Test Finnhub search
+router.get('/test-search/:query', async (req, res) => {
   try {
-    console.log('Fetching stocks...');
-    const stocks = await Stock.findAll({
-      where: {
-        shares: {
-          [Op.gt]: 0
-        }
-      },
-      order: [['name', 'ASC']]
+    const { query } = req.params;
+    console.log('Testing Finnhub search for query:', query);
+    
+    const response = await axios.get('https://finnhub.io/api/v1/search', {
+      params: {
+        q: query,
+        token: process.env.FINNHUB_API_KEY
+      }
+    });
+    
+    console.log('Finnhub search test response:', response.data);
+    res.json(response.data);
+  } catch (error) {
+    console.error('Finnhub search test error:', error.response?.data || error.message);
+    res.status(500).json({ 
+      error: 'Finnhub search test failed',
+      details: error.response?.data || error.message,
+      apiKey: process.env.FINNHUB_API_KEY ? 'Present' : 'Missing'
+    });
+  }
+});
+
+// Search stocks using Finnhub API
+router.get('/search', async (req, res) => {
+  try {
+    const { q } = req.query;
+    
+    if (!q || q.length < 2) {
+      return res.json({ result: [] });
+    }
+
+    console.log('Searching stocks for query:', q);
+    console.log('Using API key:', process.env.FINNHUB_API_KEY ? 'Present' : 'Missing');
+    
+    const url = `https://finnhub.io/api/v1/search?q=${encodeURIComponent(q)}&token=${process.env.FINNHUB_API_KEY}`;
+    console.log('Making request to:', url.replace(process.env.FINNHUB_API_KEY, '***'));
+    
+    const response = await axios.get(url);
+    
+    console.log('Finnhub search response status:', response.status);
+    console.log('Finnhub search response data:', JSON.stringify(response.data, null, 2));
+    
+    if (response.data && response.data.result) {
+      console.log('Raw results count:', response.data.result.length);
+      
+      // First try to filter for common stock exchanges
+      let filteredResults = response.data.result
+        .filter(stock => 
+          stock.symbol && 
+          stock.description && 
+          (stock.primaryExchange === 'NASDAQ' || 
+           stock.primaryExchange === 'NYSE' || 
+           stock.primaryExchange === 'BATS' ||
+           stock.primaryExchange === 'ARCA')
+        );
+      
+      // If no results, try less restrictive filtering
+      if (filteredResults.length === 0) {
+        console.log('No results with strict filtering, trying less restrictive...');
+        filteredResults = response.data.result
+          .filter(stock => 
+            stock.symbol && 
+            stock.description && 
+            stock.type === 'Common Stock'
+          );
+      }
+      
+      // If still no results, return all results with symbols
+      if (filteredResults.length === 0) {
+        console.log('No results with type filtering, returning all with symbols...');
+        filteredResults = response.data.result
+          .filter(stock => stock.symbol && stock.description);
+      }
+      
+      // Limit to 10 results
+      filteredResults = filteredResults.slice(0, 10);
+      
+      console.log(`Found ${filteredResults.length} filtered stocks for query: ${q}`);
+      console.log('Filtered results:', JSON.stringify(filteredResults, null, 2));
+      
+      res.json({ result: filteredResults });
+    } else {
+      console.log('No results found in response');
+      res.json({ result: [] });
+    }
+  } catch (error) {
+    console.error('Error searching stocks:', error.message);
+    console.error('Error response:', error.response?.data);
+    console.error('Error status:', error.response?.status);
+    res.status(500).json({ 
+      error: 'Failed to search stocks',
+      details: error.response?.data || error.message
     });
-    console.log(`Found ${stocks.length} stocks`);
+  }
+});
+
+// Get all stocks (portfolio)
+router.get('/', authenticateUser, async (req, res) => {
+  try {
+    console.log('Fetching portfolio stocks for user:', req.user.id);
+    
+    // Use direct Supabase query to be more explicit about filtering
+    const { data: stocks, error } = await supabase
+      .from('stocks')
+      .select('*')
+      .eq('user_id', req.user.id)
+      .gt('shares', 0)
+      .eq('is_in_watchlist', false) // Only get stocks that are NOT in watchlist
+      .order('name', { ascending: true });
+    
+    if (error) throw error;
+    
+    console.log(`Found ${stocks.length} portfolio stocks for user ${req.user.id}`);
     res.json(stocks);
   } catch (error) {
     console.error('Error fetching stocks:', error);
@@ -93,10 +196,10 @@ router.get('/:ticker/quote', async (req, res) => {
 });
 
 // Add new stock
-router.post('/', async (req, res) => {
+router.post('/', authenticateUser, async (req, res) => {
   try {
     const { name, ticker, shares, buy_price, target_price } = req.body;
-    console.log('Received request to add stock:', req.body);
+    console.log('Received request to add stock for user:', req.user.id, req.body);
 
     // Validate required fields
     if (!name || !ticker || !shares || !buy_price) {
@@ -129,17 +232,28 @@ router.post('/', async (req, res) => {
       throw new Error('Unable to fetch current price for ticker');
     }
 
-    console.log('Creating stock in database');
-    const stock = await Stock.create({
+    console.log('Creating stock in database for user:', req.user.id);
+    console.log('User object:', {
+      id: req.user.id,
+      email: req.user.email,
+      aud: req.user.aud
+    });
+    
+    const stockData = {
       name: name.trim(),
       ticker: ticker.toUpperCase().trim(),
       shares: parsedShares,
       buy_price: parsedBuyPrice,
       current_price: quote.c,
       target_price: parsedTargetPrice,
-      is_in_watchlist: false,
+      is_in_watchlist: false, // Explicitly set to false for portfolio stocks
+      user_id: req.user.id, // Add user_id
       last_updated: new Date()
-    });
+    };
+    
+    console.log('Stock data to insert:', stockData);
+    
+    const stock = await Stock.create(stockData);
 
     console.log('Stock added successfully:', stock.id);
     res.status(201).json(stock);
@@ -150,17 +264,22 @@ router.post('/', async (req, res) => {
 });
 
 // Update stock
-router.put('/:id', async (req, res) => {
+router.put('/:id', authenticateUser, async (req, res) => {
   try {
     const { id } = req.params;
     const { name, ticker, shares, buy_price } = req.body;
-    console.log('Updating stock:', id, { name, ticker, shares, buy_price });
+    console.log('Updating stock for user:', req.user.id, id, { name, ticker, shares, buy_price });
 
     const stock = await Stock.findByPk(id);
     if (!stock) {
       return res.status(404).json({ error: 'Stock not found' });
     }
 
+    // Check if the stock belongs to the user
+    if (stock.user_id !== req.user.id) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
     // Validate numeric values if provided
     let parsedShares = shares !== undefined ? parseFloat(shares) : stock.shares;
     let parsedBuyPrice = buy_price !== undefined ? parseFloat(buy_price) : stock.buy_price;
@@ -201,16 +320,21 @@ router.put('/:id', async (req, res) => {
 });
 
 // Delete stock
-router.delete('/:id', async (req, res) => {
+router.delete('/:id', authenticateUser, async (req, res) => {
   try {
     const { id } = req.params;
-    console.log('Deleting stock:', id);
+    console.log('Deleting stock for user:', req.user.id, id);
 
     const stock = await Stock.findByPk(id);
     if (!stock) {
       return res.status(404).json({ error: 'Stock not found' });
     }
 
+    // Check if the stock belongs to the user
+    if (stock.user_id !== req.user.id) {
+      return res.status(403).json({ error: 'Access denied' });
+    }
+
     await stock.destroy();
     console.log('Stock deleted:', id);
     res.json({ message: 'Stock deleted successfully' });
@@ -221,16 +345,19 @@ router.delete('/:id', async (req, res) => {
 });
 
 // Get portfolio summary
-router.get('/summary', async (req, res) => {
+router.get('/summary', authenticateUser, async (req, res) => {
   try {
-    console.log('Getting portfolio summary...');
-    const stocks = await Stock.findAll({
-      where: {
-        shares: {
-          [Op.gt]: 0
-        }
-      }
-    });
+    console.log('Getting portfolio summary for user:', req.user.id);
+    
+    // Use direct Supabase query to be more explicit about filtering
+    const { data: stocks, error } = await supabase
+      .from('stocks')
+      .select('*')
+      .eq('user_id', req.user.id)
+      .gt('shares', 0)
+      .eq('is_in_watchlist', false); // Only get stocks that are NOT in watchlist
+    
+    if (error) throw error;
 
     const summary = {
       totalValue: 0,
@@ -255,11 +382,91 @@ router.get('/summary', async (req, res) => {
     console.log('Portfolio summary:', summary);
     res.json(summary);
   } catch (error) {
-    console.error('Error getting summary:', error);
+    console.error('Error getting portfolio summary:', error);
     res.status(500).json({ error: 'Failed to get portfolio summary' });
   }
 });
 
+// Diagnostic endpoint to check for data inconsistencies
+router.get('/diagnostic/check-overlap', async (req, res) => {
+  try {
+    console.log('Running diagnostic check for portfolio/watchlist overlap...');
+    
+    // Get all stocks
+    const { data: allStocks, error } = await supabase
+      .from('stocks')
+      .select('*');
+    
+    if (error) throw error;
+    
+    const portfolioStocks = allStocks.filter(stock => stock.shares > 0);
+    const watchlistStocks = allStocks.filter(stock => stock.is_in_watchlist === true);
+    const overlapStocks = allStocks.filter(stock => stock.shares > 0 && stock.is_in_watchlist === true);
+    
+    const diagnostic = {
+      totalStocks: allStocks.length,
+      portfolioStocks: portfolioStocks.length,
+      watchlistStocks: watchlistStocks.length,
+      overlapStocks: overlapStocks.length,
+      overlapDetails: overlapStocks.map(stock => ({
+        id: stock.id,
+        ticker: stock.ticker,
+        name: stock.name,
+        shares: stock.shares,
+        is_in_watchlist: stock.is_in_watchlist
+      }))
+    };
+    
+    console.log('Diagnostic results:', diagnostic);
+    res.json(diagnostic);
+  } catch (error) {
+    console.error('Error running diagnostic:', error);
+    res.status(500).json({ error: 'Failed to run diagnostic' });
+  }
+});
+
+// Cleanup endpoint to fix overlapping stocks
+router.post('/cleanup/fix-overlap', async (req, res) => {
+  try {
+    console.log('Running cleanup to fix portfolio/watchlist overlap...');
+    
+    // Get all stocks
+    const { data: allStocks, error } = await supabase
+      .from('stocks')
+      .select('*');
+    
+    if (error) throw error;
+    
+    // Find stocks that have both shares > 0 and is_in_watchlist = true
+    const overlapStocks = allStocks.filter(stock => stock.shares > 0 && stock.is_in_watchlist === true);
+    
+    console.log(`Found ${overlapStocks.length} stocks with overlap`);
+    
+    // Fix each overlapping stock by setting is_in_watchlist to false
+    // (since they have shares > 0, they should be portfolio stocks)
+    for (const stock of overlapStocks) {
+      const { error: updateError } = await supabase
+        .from('stocks')
+        .update({ is_in_watchlist: false })
+        .eq('id', stock.id);
+      
+      if (updateError) {
+        console.error(`Error fixing stock ${stock.ticker}:`, updateError);
+      } else {
+        console.log(`Fixed stock ${stock.ticker} - removed from watchlist`);
+      }
+    }
+    
+    res.json({ 
+      message: `Fixed ${overlapStocks.length} overlapping stocks`,
+      fixedStocks: overlapStocks.map(stock => stock.ticker)
+    });
+  } catch (error) {
+    console.error('Error running cleanup:', error);
+    res.status(500).json({ error: 'Failed to run cleanup' });
+  }
+});
+
 // Get stock price history
 router.get('/history/:ticker', async (req, res) => {
   try {
@@ -331,7 +538,18 @@ router.get('/:ticker/historical', async (req, res) => {
         from = to - 24 * 60 * 60;
     }
 
-    const data = await finnhubClient.stockCandles(ticker, resolution, from, to);
+    // Use direct API call instead of finnhubClient
+    const response = await axios.get('https://finnhub.io/api/v1/stock/candle', {
+      params: {
+        symbol: ticker,
+        resolution: resolution,
+        from: from,
+        to: to,
+        token: process.env.FINNHUB_API_KEY
+      }
+    });
+
+    const data = response.data;
     
     if (data.s !== 'ok') {
       throw new Error('Failed to fetch historical data');
@@ -349,4 +567,244 @@ router.get('/:ticker/historical', async (req, res) => {
   }
 });
 
+// Get stock profile information
+router.get('/:ticker/profile', async (req, res) => {
+  try {
+    const { ticker } = req.params;
+    console.log('Fetching stock profile for:', ticker);
+
+    const response = await axios.get('https://finnhub.io/api/v1/stock/profile2', {
+      params: {
+        symbol: ticker,
+        token: process.env.FINNHUB_API_KEY
+      }
+    });
+
+    console.log('Profile response:', response.data);
+    res.json(response.data);
+  } catch (error) {
+    console.error('Error fetching stock profile:', error);
+    res.status(500).json({ error: 'Failed to fetch stock profile' });
+  }
+});
+
+// Get stock metrics (P/E, P/B, etc.)
+router.get('/:ticker/metrics', async (req, res) => {
+  try {
+    const { ticker } = req.params;
+    console.log('Fetching stock metrics for:', ticker);
+
+    const response = await axios.get('https://finnhub.io/api/v1/stock/metric', {
+      params: {
+        symbol: ticker,
+        metric: 'all',
+        token: process.env.FINNHUB_API_KEY
+      }
+    });
+
+    console.log('Metrics response:', response.data);
+    res.json(response.data);
+  } catch (error) {
+    console.error('Error fetching stock metrics:', error);
+    res.status(500).json({ error: 'Failed to fetch stock metrics' });
+  }
+});
+
+// Get company news
+router.get('/:ticker/news', async (req, res) => {
+  try {
+    const { ticker } = req.params;
+    const { from, to } = req.query;
+    
+    console.log('Fetching company news for:', ticker);
+
+    const response = await axios.get('https://finnhub.io/api/v1/company-news', {
+      params: {
+        symbol: ticker,
+        from: from || new Date(Date.now() - 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], // 30 days ago
+        to: to || new Date().toISOString().split('T')[0], // today
+        token: process.env.FINNHUB_API_KEY
+      }
+    });
+
+    console.log('News response count:', response.data?.length || 0);
+    res.json(response.data || []);
+  } catch (error) {
+    console.error('Error fetching company news:', error);
+    res.status(500).json({ error: 'Failed to fetch company news' });
+  }
+});
+
+// Get analyst recommendations
+router.get('/:ticker/recommendations', async (req, res) => {
+  try {
+    const { ticker } = req.params;
+    console.log('Fetching analyst recommendations for:', ticker);
+
+    const response = await axios.get('https://finnhub.io/api/v1/stock/recommendation', {
+      params: {
+        symbol: ticker,
+        token: process.env.FINNHUB_API_KEY
+      }
+    });
+
+    console.log('Recommendations response:', response.data);
+    res.json(response.data);
+  } catch (error) {
+    console.error('Error fetching analyst recommendations:', error);
+    res.status(500).json({ error: 'Failed to fetch analyst recommendations' });
+  }
+});
+
+// Get upcoming earnings calendar (MUST come before /:ticker/earnings)
+router.get('/calendar/earnings', async (req, res) => {
+  try {
+    const { from, to } = req.query;
+    console.log('📅 Fetching earnings calendar...');
+
+    const fromDate = from || new Date().toISOString().split('T')[0];
+    const toDate = to || new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
+    
+    console.log('📅 Date range:', { from: fromDate, to: toDate });
+
+    const response = await axios.get('https://finnhub.io/api/v1/calendar/earnings', {
+      params: {
+        from: fromDate,
+        to: toDate,
+        token: process.env.FINNHUB_API_KEY
+      }
+    });
+
+    console.log('📅 Earnings calendar response:', {
+      status: response.status,
+      dataLength: response.data?.earningsCalendar?.length || 0,
+      hasData: !!response.data?.earningsCalendar
+    });
+    
+    // Return the real data from Finnhub API
+    res.json(response.data);
+  } catch (error) {
+    console.error('❌ Error fetching earnings calendar:', error.response?.data || error.message);
+    res.status(500).json({ error: 'Failed to fetch earnings calendar' });
+  }
+});
+
+// Get earnings calendar for specific ticker
+router.get('/:ticker/earnings', async (req, res) => {
+  try {
+    const { ticker } = req.params;
+    console.log('Fetching earnings calendar for:', ticker);
+
+    const response = await axios.get('https://finnhub.io/api/v1/calendar/earnings', {
+      params: {
+        symbol: ticker,
+        from: new Date().toISOString().split('T')[0],
+        to: new Date(Date.now() + 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], // 1 year from now
+        token: process.env.FINNHUB_API_KEY
+      }
+    });
+
+    console.log('Earnings response:', response.data);
+    res.json(response.data);
+  } catch (error) {
+    console.error('Error fetching earnings calendar:', error);
+    res.status(500).json({ error: 'Failed to fetch earnings calendar' });
+  }
+});
+
+// Get stock peers (competitors)
+router.get('/:ticker/peers', async (req, res) => {
+  try {
+    const { ticker } = req.params;
+    console.log('Fetching stock peers for:', ticker);
+
+    const response = await axios.get('https://finnhub.io/api/v1/stock/peers', {
+      params: {
+        symbol: ticker,
+        token: process.env.FINNHUB_API_KEY
+      }
+    });
+
+    console.log('Peers response:', response.data);
+    res.json(response.data);
+  } catch (error) {
+    console.error('Error fetching stock peers:', error);
+    res.status(500).json({ error: 'Failed to fetch stock peers' });
+  }
+});
+
+// Get dividend history
+router.get('/:ticker/dividends', async (req, res) => {
+  try {
+    const { ticker } = req.params;
+    const { from, to } = req.query;
+    
+    console.log('Fetching dividend history for:', ticker);
+
+    const response = await axios.get('https://finnhub.io/api/v1/stock/dividend', {
+      params: {
+        symbol: ticker,
+        from: from || new Date(Date.now() - 365 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], // 1 year ago
+        to: to || new Date().toISOString().split('T')[0], // today
+        token: process.env.FINNHUB_API_KEY
+      }
+    });
+
+    console.log('Dividends response:', response.data);
+    res.json(response.data);
+  } catch (error) {
+    console.error('Error fetching dividend history:', error);
+    res.status(500).json({ error: 'Failed to fetch dividend history' });
+  }
+});
+
+// Get market status
+router.get('/market/status', async (req, res) => {
+  try {
+    console.log('🏛️ Fetching market status...');
+
+    const response = await axios.get('https://finnhub.io/api/v1/stock/market-status', {
+      params: {
+        exchange: 'US',
+        token: process.env.FINNHUB_API_KEY
+      }
+    });
+
+    console.log('🏛️ Market status response:', {
+      status: response.status,
+      data: response.data,
+      hasData: !!response.data
+    });
+    
+    res.json(response.data);
+  } catch (error) {
+    console.error('❌ Error fetching market status:', error.response?.data || error.message);
+    res.status(500).json({ error: 'Failed to fetch market status' });
+  }
+});
+
+
+
+// Get IPO calendar
+router.get('/calendar/ipo', async (req, res) => {
+  try {
+    const { from, to } = req.query;
+    console.log('Fetching IPO calendar');
+
+    const response = await axios.get('https://finnhub.io/api/v1/calendar/ipo', {
+      params: {
+        from: from || new Date().toISOString().split('T')[0],
+        to: to || new Date(Date.now() + 90 * 24 * 60 * 60 * 1000).toISOString().split('T')[0], // 90 days from now
+        token: process.env.FINNHUB_API_KEY
+      }
+    });
+
+    console.log('IPO calendar response count:', response.data?.length || 0);
+    res.json(response.data || []);
+  } catch (error) {
+    console.error('Error fetching IPO calendar:', error);
+    res.status(500).json({ error: 'Failed to fetch IPO calendar' });
+  }
+});
+
 module.exports = router; 
\ No newline at end of file
diff --git a/backend/src/routes/watchlist.js b/backend/src/routes/watchlist.js
index 81e0293..8f5918c 100644
--- a/backend/src/routes/watchlist.js
+++ b/backend/src/routes/watchlist.js
@@ -2,16 +2,22 @@ const express = require('express');
 const router = express.Router();
 const Stock = require('../models/Stock');
 const stockPriceService = require('../services/stockPriceService');
-const { Op } = require('sequelize');
+const supabase = require('../config/supabase');
+const { authenticateUser } = require('../middleware/auth');
 
 // Get all watchlist stocks
-router.get('/', async (req, res) => {
+router.get('/', authenticateUser, async (req, res) => {
   try {
-    console.log('Fetching watchlist stocks');
-    const stocks = await Stock.findAll({
-      where: { is_in_watchlist: true },
-      order: [['name', 'ASC']]
-    });
+    console.log('Fetching watchlist stocks for user:', req.user.id);
+    const { data: stocks, error } = await supabase
+      .from('stocks')
+      .select('*')
+      .eq('user_id', req.user.id)
+      .eq('is_in_watchlist', true)
+      .order('name', { ascending: true });
+    
+    if (error) throw error;
+    
     console.log('Found watchlist stocks:', stocks.length);
     res.json(stocks);
   } catch (error) {
@@ -21,10 +27,10 @@ router.get('/', async (req, res) => {
 });
 
 // Add stock to watchlist
-router.post('/', async (req, res) => {
+router.post('/', authenticateUser, async (req, res) => {
   try {
     const { name, ticker, target_price } = req.body;
-    console.log('Adding stock to watchlist:', { name, ticker, target_price });
+    console.log('Adding stock to watchlist for user:', req.user.id, { name, ticker, target_price });
 
     // Validate numeric values
     const parsedTargetPrice = parseFloat(target_price);
@@ -32,25 +38,71 @@ router.post('/', async (req, res) => {
       throw new Error('Invalid target price');
     }
 
-    // Get current price from Finnhub
-    const quote = await stockPriceService.getStockQuote(ticker);
-    if (!quote || !quote.c) {
-      throw new Error('Unable to fetch current price for ticker');
+    // Validate ticker format (basic validation)
+    const tickerRegex = /^[A-Z]{1,5}$/;
+    if (!tickerRegex.test(ticker.toUpperCase().trim())) {
+      throw new Error('Invalid ticker format. Please use a valid US stock ticker (1-5 letters, e.g., AAPL, GOOG, MSFT)');
+    }
+
+    // Check if stock already exists in portfolio for this user
+    const { data: existingStock, error: checkError } = await supabase
+      .from('stocks')
+      .select('*')
+      .eq('user_id', req.user.id)
+      .eq('ticker', ticker.toUpperCase().trim())
+      .single();
+
+    if (checkError && checkError.code !== 'PGRST116') { // PGRST116 is "not found"
+      throw checkError;
     }
 
-    const stock = await Stock.create({
-      name: name.trim(),
-      ticker: ticker.toUpperCase().trim(),
-      shares: 0,
-      buy_price: 0,
-      current_price: quote.c,
-      target_price: parsedTargetPrice,
-      is_in_watchlist: true,
-      last_updated: new Date()
-    });
-
-    console.log('Stock added to watchlist:', stock.id);
-    res.status(201).json(stock);
+    if (existingStock) {
+      // If stock exists in portfolio, just add it to watchlist
+      const { data: updatedStock, error: updateError } = await supabase
+        .from('stocks')
+        .update({
+          is_in_watchlist: true,
+          target_price: parsedTargetPrice,
+          last_updated: new Date().toISOString()
+        })
+        .eq('id', existingStock.id)
+        .select()
+        .single();
+
+      if (updateError) throw updateError;
+
+      console.log('Stock added to watchlist (existing):', updatedStock.id);
+      res.status(200).json(updatedStock);
+    } else {
+      // Get current price from Finnhub
+      const quote = await stockPriceService.getStockQuote(ticker);
+      if (!quote || !quote.c) {
+        console.error(`Failed to fetch price for ${ticker}:`, quote);
+        throw new Error(`Unable to fetch current price for ${ticker}. This ticker may not be available in your current plan or may not exist. Please try a different ticker (e.g., GOOG instead of GOOG.MX).`);
+      }
+
+      // Create new stock record for watchlist only
+      const { data: stock, error } = await supabase
+        .from('stocks')
+        .insert([{
+          name: name.trim(),
+          ticker: ticker.toUpperCase().trim(),
+          shares: 0, // Explicitly set to 0 to indicate it's not in portfolio
+          buy_price: 0, // Explicitly set to 0 to indicate it's not in portfolio
+          current_price: quote.c,
+          target_price: parsedTargetPrice,
+          is_in_watchlist: true, // Explicitly set to true
+          user_id: req.user.id, // Add user_id
+          last_updated: new Date().toISOString()
+        }])
+        .select()
+        .single();
+
+      if (error) throw error;
+
+      console.log('Stock added to watchlist (new):', stock.id);
+      res.status(201).json(stock);
+    }
   } catch (error) {
     console.error('Error adding stock to watchlist:', error);
     res.status(400).json({ error: error.message || 'Failed to add stock to watchlist' });
@@ -58,25 +110,33 @@ router.post('/', async (req, res) => {
 });
 
 // Sync portfolio stocks to watchlist
-router.post('/sync-portfolio', async (req, res) => {
+router.post('/sync-portfolio', authenticateUser, async (req, res) => {
   try {
-    console.log('Syncing portfolio stocks to watchlist');
-    const portfolioStocks = await Stock.findAll({
-      where: { shares: { [Op.gt]: 0 } }
-    });
+    console.log('Syncing portfolio stocks to watchlist for user:', req.user.id);
+    const { data: portfolioStocks, error } = await supabase
+      .from('stocks')
+      .select('*')
+      .eq('user_id', req.user.id)
+      .gt('shares', 0);
+
+    if (error) throw error;
 
     console.log('Found portfolio stocks:', portfolioStocks.length);
 
     for (const stock of portfolioStocks) {
       // If no target price is set, use current price + 10%
-      if (!stock.target_price) {
-        await stock.update({
+      const targetPrice = !stock.target_price ? stock.current_price * 1.1 : stock.target_price;
+      
+      const { error: updateError } = await supabase
+        .from('stocks')
+        .update({
           is_in_watchlist: true,
-          target_price: stock.current_price * 1.1
-        });
-      } else {
-        await stock.update({ is_in_watchlist: true });
-      }
+          target_price: targetPrice,
+          updated_at: new Date().toISOString()
+        })
+        .eq('id', stock.id);
+      
+      if (updateError) throw updateError;
     }
 
     console.log('Portfolio stocks synced to watchlist');
@@ -88,21 +148,38 @@ router.post('/sync-portfolio', async (req, res) => {
 });
 
 // Delete stock from watchlist
-router.delete('/:id', async (req, res) => {
+router.delete('/:id', authenticateUser, async (req, res) => {
   try {
-    console.log('Deleting stock from watchlist:', req.params.id);
-    const stock = await Stock.findByPk(req.params.id);
+    console.log('Deleting stock from watchlist for user:', req.user.id, req.params.id);
     
-    if (!stock) {
+    // First check if stock exists and belongs to user
+    const { data: stock, error: fetchError } = await supabase
+      .from('stocks')
+      .select('*')
+      .eq('id', req.params.id)
+      .eq('user_id', req.user.id)
+      .single();
+    
+    if (fetchError || !stock) {
       return res.status(404).json({ error: 'Stock not found' });
     }
 
     if (stock.shares > 0) {
       // If stock is in portfolio, just remove from watchlist
-      await stock.update({ is_in_watchlist: false });
+      const { error: updateError } = await supabase
+        .from('stocks')
+        .update({ is_in_watchlist: false })
+        .eq('id', stock.id);
+      
+      if (updateError) throw updateError;
     } else {
       // If stock is not in portfolio, delete it completely
-      await stock.destroy();
+      const { error: deleteError } = await supabase
+        .from('stocks')
+        .delete()
+        .eq('id', stock.id);
+      
+      if (deleteError) throw deleteError;
     }
 
     console.log('Stock removed from watchlist');
@@ -114,11 +191,11 @@ router.delete('/:id', async (req, res) => {
 });
 
 // Update stock target price
-router.put('/:id', async (req, res) => {
+router.put('/:id', authenticateUser, async (req, res) => {
   try {
     const { id } = req.params;
     const { target_price } = req.body;
-    console.log('Updating stock target price:', { id, target_price });
+    console.log('Updating stock target price for user:', req.user.id, { id, target_price });
 
     // Validate numeric values
     const parsedTargetPrice = parseFloat(target_price);
@@ -126,18 +203,31 @@ router.put('/:id', async (req, res) => {
       throw new Error('Invalid target price');
     }
 
-    const stock = await Stock.findByPk(id);
-    if (!stock) {
+    // First check if stock exists
+    const { data: stock, error: fetchError } = await supabase
+      .from('stocks')
+      .select('*')
+      .eq('id', id)
+      .single();
+    
+    if (fetchError || !stock) {
       return res.status(404).json({ error: 'Stock not found' });
     }
 
-    await stock.update({
-      target_price: parsedTargetPrice,
-      last_updated: new Date()
-    });
+    const { data: updatedStock, error: updateError } = await supabase
+      .from('stocks')
+      .update({
+        target_price: parsedTargetPrice,
+        last_updated: new Date().toISOString()
+      })
+      .eq('id', id)
+      .select()
+      .single();
+    
+    if (updateError) throw updateError;
 
-    console.log('Stock target price updated:', stock.id);
-    res.json(stock);
+    console.log('Stock target price updated:', id);
+    res.json(updatedStock);
   } catch (error) {
     console.error('Error updating stock target price:', error);
     res.status(400).json({ error: error.message || 'Failed to update stock target price' });
@@ -148,9 +238,13 @@ router.put('/:id', async (req, res) => {
 router.get('/:id/history', async (req, res) => {
   try {
     const { id } = req.params;
-    const stock = await Stock.findByPk(id);
+    const { data: stock, error: fetchError } = await supabase
+      .from('stocks')
+      .select('*')
+      .eq('id', id)
+      .single();
     
-    if (!stock) {
+    if (fetchError || !stock) {
       return res.status(404).json({ error: 'Stock not found' });
     }
 
diff --git a/backend/src/services/stockPriceService.js b/backend/src/services/stockPriceService.js
index 32861b7..61e4987 100644
--- a/backend/src/services/stockPriceService.js
+++ b/backend/src/services/stockPriceService.js
@@ -1,6 +1,6 @@
 const axios = require('axios');
 const Stock = require('../models/Stock');
-const { Op } = require('sequelize');
+const supabase = require('../config/supabase');
 
 const FINNHUB_API_KEY = process.env.FINNHUB_API_KEY;
 const FINNHUB_BASE_URL = 'https://finnhub.io/api/v1';
@@ -51,14 +51,21 @@ const getHistoricalData = async (ticker) => {
 const updateStockPrices = async () => {
   try {
     console.log('Starting stock price update...');
-    const stocks = await Stock.findAll({
-      where: {
-        [Op.or]: [
-          { shares: { [Op.gt]: 0 } },
-          { is_in_watchlist: true }
-        ]
-      }
-    });
+    // Query stocks with shares > 0 or in watchlist
+    const { data: stocks, error } = await supabase
+      .from('stocks')
+      .select('*')
+      .or('shares.gt.0,is_in_watchlist.eq.true');
+
+    if (error) {
+      console.error('Error fetching stocks for update:', error);
+      return;
+    }
+
+    if (!stocks || stocks.length === 0) {
+      console.log('No stocks found in database. Skipping price updates.');
+      return;
+    }
 
     console.log(`Found ${stocks.length} stocks to update`);
 
@@ -66,11 +73,20 @@ const updateStockPrices = async () => {
       try {
         const quote = await getStockQuote(stock.ticker);
         if (quote && quote.c > 0) {
-          await stock.update({
-            current_price: quote.c,
-            last_updated: new Date()
-          });
-          console.log(`Updated price for ${stock.ticker}: $${quote.c}`);
+          // Update stock price directly with Supabase
+          const { error: updateError } = await supabase
+            .from('stocks')
+            .update({
+              current_price: quote.c,
+              last_updated: new Date().toISOString()
+            })
+            .eq('id', stock.id);
+          
+          if (updateError) {
+            console.error(`Error updating ${stock.ticker}:`, updateError);
+          } else {
+            console.log(`Updated price for ${stock.ticker}: $${quote.c}`);
+          }
         } else {
           console.log(`Failed to get valid price for ${stock.ticker}`);
         }

From a7fdf174308b0641fc4740e8b43ac674e65c2aa2 Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 13:53:40 +0530
Subject: [PATCH 03/13] feat: implement Supabase authentication system with
 protected routes

---
 src/components/auth/ProtectedRoute.jsx |  23 +++++
 src/context/AuthContext.jsx            | 121 +++++++++++++++++++++++++
 src/services/api.js                    |  67 ++++++++++++++
 3 files changed, 211 insertions(+)
 create mode 100644 src/components/auth/ProtectedRoute.jsx
 create mode 100644 src/context/AuthContext.jsx
 create mode 100644 src/services/api.js

diff --git a/src/components/auth/ProtectedRoute.jsx b/src/components/auth/ProtectedRoute.jsx
new file mode 100644
index 0000000..ededcc2
--- /dev/null
+++ b/src/components/auth/ProtectedRoute.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '../../context/AuthContext';
+
+const ProtectedRoute = ({ children }) => {
+  const { user, loading } = useAuth();
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+      </div>
+    );
+  }
+
+  if (!user) {
+    return <Navigate to="/" replace />;
+  }
+
+  return children;
+};
+
+export default ProtectedRoute; 
\ No newline at end of file
diff --git a/src/context/AuthContext.jsx b/src/context/AuthContext.jsx
new file mode 100644
index 0000000..be2fda2
--- /dev/null
+++ b/src/context/AuthContext.jsx
@@ -0,0 +1,121 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { supabase } from '../config/supabase';
+
+const AuthContext = createContext({});
+
+export const useAuth = () => {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuth must be used within an AuthProvider');
+  }
+  return context;
+};
+
+export const AuthProvider = ({ children }) => {
+  const [user, setUser] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    // Get initial session
+    const getSession = async () => {
+      const { data: { session } } = await supabase.auth.getSession();
+      setUser(session?.user ?? null);
+      setLoading(false);
+    };
+
+    getSession();
+
+    // Listen for auth changes
+    const { data: { subscription } } = supabase.auth.onAuthStateChange(
+      async (event, session) => {
+        setUser(session?.user ?? null);
+        setLoading(false);
+      }
+    );
+
+    return () => subscription.unsubscribe();
+  }, []);
+
+  const signUp = async (email, password, name) => {
+    try {
+      const { data, error } = await supabase.auth.signUp({
+        email,
+        password,
+        options: {
+          data: {
+            full_name: name,
+          },
+        },
+      });
+
+      if (error) throw error;
+      return { data, error: null };
+    } catch (error) {
+      return { data: null, error };
+    }
+  };
+
+  const signIn = async (email, password) => {
+    try {
+      const { data, error } = await supabase.auth.signInWithPassword({
+        email,
+        password,
+      });
+
+      if (error) throw error;
+      return { data, error: null };
+    } catch (error) {
+      return { data: null, error };
+    }
+  };
+
+  const signOut = async () => {
+    try {
+      const { error } = await supabase.auth.signOut();
+      if (error) throw error;
+      return { error: null };
+    } catch (error) {
+      return { error };
+    }
+  };
+
+  const resetPassword = async (email) => {
+    try {
+      const { error } = await supabase.auth.resetPasswordForEmail(email, {
+        redirectTo: `${window.location.origin}/reset-password`,
+      });
+      if (error) throw error;
+      return { error: null };
+    } catch (error) {
+      return { error };
+    }
+  };
+
+  const updateProfile = async (updates) => {
+    try {
+      const { data, error } = await supabase.auth.updateUser({
+        data: updates,
+      });
+      if (error) throw error;
+      return { data, error: null };
+    } catch (error) {
+      return { data: null, error };
+    }
+  };
+
+  const value = {
+    user,
+    loading,
+    signUp,
+    signIn,
+    signOut,
+    resetPassword,
+    updateProfile,
+  };
+
+  return (
+    <AuthContext.Provider value={value}>
+      {children}
+    </AuthContext.Provider>
+  );
+}; 
\ No newline at end of file
diff --git a/src/services/api.js b/src/services/api.js
new file mode 100644
index 0000000..9ff4b6f
--- /dev/null
+++ b/src/services/api.js
@@ -0,0 +1,67 @@
+import axios from 'axios';
+import { supabase } from '../config/supabase';
+
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://portfolio-tracker-backend-y7ne.onrender.com/api';
+
+// Create axios instance with base URL
+const api = axios.create({
+  baseURL: API_BASE_URL,
+  timeout: 10000
+});
+
+// Add request interceptor to include auth token
+api.interceptors.request.use(
+  async (config) => {
+    try {
+      // Get the current session
+      const { data: { session } } = await supabase.auth.getSession();
+      
+      console.log('🔍 API Request Debug:', {
+        url: config.url,
+        method: config.method,
+        hasSession: !!session,
+        hasToken: !!session?.access_token,
+        tokenPreview: session?.access_token ? `${session.access_token.substring(0, 20)}...` : 'No token'
+      });
+      
+      if (session?.access_token) {
+        config.headers.Authorization = `Bearer ${session.access_token}`;
+        console.log('✅ Auth token added to request');
+      } else {
+        console.log('❌ No auth token available');
+      }
+    } catch (error) {
+      console.error('❌ Error getting auth token:', error);
+    }
+    
+    return config;
+  },
+  (error) => {
+    console.error('❌ Request interceptor error:', error);
+    return Promise.reject(error);
+  }
+);
+
+// Add response interceptor to handle auth errors
+api.interceptors.response.use(
+  (response) => {
+    console.log('✅ API Response success:', response.config.url);
+    return response;
+  },
+  async (error) => {
+    console.error('❌ API Response error:', {
+      url: error.config?.url,
+      status: error.response?.status,
+      message: error.response?.data?.error || error.message
+    });
+    
+    if (error.response?.status === 401) {
+      // Token expired or invalid, redirect to login
+      console.log('🔐 Authentication failed, redirecting to login...');
+      window.location.href = '/';
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default api; 
\ No newline at end of file

From 772652b114d343ab211e81e8e09d5a5cdbdeedc1 Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 13:54:05 +0530
Subject: [PATCH 04/13] feat: add Homepage, Market Calendar, and News pages
 with enhanced UI

---
 src/pages/Homepage.jsx       | 1687 ++++++++++++++++++++++++++++++++++
 src/pages/MarketCalendar.jsx |  490 ++++++++++
 src/pages/News.jsx           |  588 ++++++++++++
 3 files changed, 2765 insertions(+)
 create mode 100644 src/pages/Homepage.jsx
 create mode 100644 src/pages/MarketCalendar.jsx
 create mode 100644 src/pages/News.jsx

diff --git a/src/pages/Homepage.jsx b/src/pages/Homepage.jsx
new file mode 100644
index 0000000..d247021
--- /dev/null
+++ b/src/pages/Homepage.jsx
@@ -0,0 +1,1687 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Link, useNavigate } from 'react-router-dom';
+import { useAuth } from '../context/AuthContext';
+import { HiOutlineEye, HiOutlineEyeOff, HiOutlineMail, HiOutlineLockClosed, HiOutlineUser, HiOutlineChartBar, HiOutlineTrendingUp, HiOutlineBell, HiOutlineShieldCheck } from 'react-icons/hi';
+
+const Homepage = () => {
+  const [isLogin, setIsLogin] = useState(true);
+  const [showPassword, setShowPassword] = useState(false);
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+  const [formData, setFormData] = useState({
+    email: '',
+    password: '',
+    name: ''
+  });
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
+  const [selectedBlog, setSelectedBlog] = useState(null);
+  const [isBlogModalOpen, setIsBlogModalOpen] = useState(false);
+  const [isStatusTooltipOpen, setIsStatusTooltipOpen] = useState(false);
+  const [systemStatus, setSystemStatus] = useState({
+    overall: 'operational',
+    api: 'operational',
+    database: 'operational',
+    lastChecked: new Date().toLocaleTimeString()
+  });
+  const navigate = useNavigate();
+  const { user, signIn, signUp } = useAuth();
+
+  // Initialize theme and redirect if user is already logged in
+  useEffect(() => {
+    // Initialize theme
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    setTheme(savedTheme);
+    document.documentElement.classList.toggle('dark', savedTheme === 'dark');
+    
+    // Redirect to dashboard if user is already logged in
+    if (user) {
+      navigate('/dashboard');
+    }
+  }, [user, navigate]);
+
+  // Close status tooltip when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (isStatusTooltipOpen && !event.target.closest('.status-tooltip-container')) {
+        setIsStatusTooltipOpen(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [isStatusTooltipOpen]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    setIsLoading(true);
+    setError('');
+    setSuccess('');
+
+    try {
+      if (isLogin) {
+        // Sign in
+        const { error } = await signIn(formData.email, formData.password);
+        if (error) {
+          setError(error.message);
+        } else {
+          setSuccess('Successfully signed in!');
+          navigate('/dashboard');
+        }
+      } else {
+        // Sign up
+        const { error } = await signUp(formData.email, formData.password, formData.name);
+        if (error) {
+          setError(error.message);
+        } else {
+          setSuccess('Account created successfully! Please check your email to verify your account.');
+        }
+      }
+    } catch (err) {
+      setError('An unexpected error occurred. Please try again.');
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const handleInputChange = (e) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value
+    });
+  };
+
+  const toggleTheme = () => {
+    const newTheme = theme === 'light' ? 'dark' : 'light';
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+    
+    // Dispatch custom event for theme change
+    window.dispatchEvent(new CustomEvent('themeChange', { 
+      detail: { theme: newTheme } 
+    }));
+  };
+
+  // Blog data
+  const blogPosts = [
+    {
+      id: 1,
+      title: "Building a Diversified Portfolio in 2024",
+      category: "Investment Strategy",
+      date: "Jan 15, 2024",
+      author: "Sarah Johnson",
+      readTime: "8 min read",
+      image: "from-blue-400 to-purple-500",
+      content: `
+        <div class="space-y-6">
+          <p class="text-lg leading-relaxed">
+            In today's rapidly evolving financial landscape, building a diversified portfolio has never been more crucial. The traditional 60/40 stock-bond split that worked for decades is being challenged by new market dynamics, technological disruption, and changing economic policies.
+          </p>
+          
+          <h3 class="text-2xl font-bold mt-8 mb-4">Understanding Modern Diversification</h3>
+          <p class="leading-relaxed">
+            Modern portfolio diversification goes beyond simply mixing stocks and bonds. It involves understanding correlation, risk factors, and the impact of global events on different asset classes. A truly diversified portfolio should include:
+          </p>
+          
+          <ul class="list-disc list-inside space-y-2 ml-4">
+            <li>Domestic and international equities</li>
+            <li>Government and corporate bonds</li>
+            <li>Real estate investment trusts (REITs)</li>
+            <li>Commodities and precious metals</li>
+            <li>Alternative investments (private equity, hedge funds)</li>
+            <li>Cryptocurrencies (with proper risk management)</li>
+          </ul>
+          
+          <h3 class="text-2xl font-bold mt-8 mb-4">The Role of Technology in Portfolio Management</h3>
+          <p class="leading-relaxed">
+            Technology has revolutionized how we approach portfolio diversification. AI-powered tools can now analyze thousands of data points to identify optimal asset allocations, while robo-advisors provide sophisticated portfolio management at a fraction of traditional costs.
+          </p>
+          
+          <p class="leading-relaxed">
+            However, it's important to remember that technology should enhance, not replace, fundamental investment principles. The core tenets of diversification—spreading risk across uncorrelated assets—remain unchanged.
+          </p>
+          
+          <h3 class="text-2xl font-bold mt-8 mb-4">Risk Management in 2024</h3>
+          <p class="leading-relaxed">
+            With increased market volatility and geopolitical uncertainty, risk management has become paramount. Consider implementing:
+          </p>
+          
+          <ul class="list-disc list-inside space-y-2 ml-4">
+            <li>Regular portfolio rebalancing (quarterly or annually)</li>
+            <li>Stress testing your portfolio against various scenarios</li>
+            <li>Maintaining adequate cash reserves for opportunities</li>
+            <li>Using stop-loss orders for individual positions</li>
+          </ul>
+          
+          <p class="leading-relaxed">
+            Remember, diversification is not about eliminating risk—it's about managing it intelligently while positioning your portfolio for long-term growth.
+          </p>
+        </div>
+      `
+    },
+    {
+      id: 2,
+      title: "Understanding Market Volatility",
+      category: "Market Analysis",
+      date: "Jan 12, 2024",
+      author: "Michael Chen",
+      readTime: "6 min read",
+      image: "from-green-400 to-blue-500",
+      content: `
+        <div class="space-y-6">
+          <p class="text-lg leading-relaxed">
+            Market volatility is often misunderstood and feared by investors. However, understanding volatility is crucial for making informed investment decisions and maintaining a long-term perspective during turbulent times.
+          </p>
+          
+          <h3 class="text-2xl font-bold mt-8 mb-4">What is Volatility?</h3>
+          <p class="leading-relaxed">
+            Volatility measures the rate at which the price of a security or market index increases or decreases for a given set of returns. It's essentially a measure of risk and uncertainty in the market. Higher volatility means larger price swings, while lower volatility indicates more stable prices.
+          </p>
+          
+          <h3 class="text-2xl font-bold mt-8 mb-4">Types of Volatility</h3>
+          <p class="leading-relaxed">
+            There are several types of volatility that investors should understand:
+          </p>
+          
+          <ul class="list-disc list-inside space-y-2 ml-4">
+            <li><strong>Historical Volatility:</strong> Based on past price movements</li>
+            <li><strong>Implied Volatility:</strong> Market's expectation of future volatility</li>
+            <li><strong>Realized Volatility:</strong> Actual volatility experienced over a period</li>
+          </ul>
+          
+          <h3 class="text-2xl font-bold mt-8 mb-4">Causes of Market Volatility</h3>
+          <p class="leading-relaxed">
+            Market volatility can be caused by various factors:
+          </p>
+          
+          <ul class="list-disc list-inside space-y-2 ml-4">
+            <li>Economic data releases and policy changes</li>
+            <li>Geopolitical events and conflicts</li>
+            <li>Corporate earnings announcements</li>
+            <li>Changes in interest rates and monetary policy</li>
+            <li>Technological disruptions and innovations</li>
+            <li>Natural disasters and global health crises</li>
+          </ul>
+          
+          <h3 class="text-2xl font-bold mt-8 mb-4">Strategies for Volatile Markets</h3>
+          <p class="leading-relaxed">
+            During volatile periods, consider these strategies:
+          </p>
+          
+          <ul class="list-disc list-inside space-y-2 ml-4">
+            <li>Maintain a long-term perspective</li>
+            <li>Dollar-cost averaging into positions</li>
+            <li>Focus on quality companies with strong fundamentals</li>
+            <li>Consider defensive sectors and dividend-paying stocks</li>
+            <li>Keep adequate cash reserves for opportunities</li>
+          </ul>
+          
+          <p class="leading-relaxed">
+            Remember, volatility creates opportunities for disciplined investors. The key is to stay calm, stick to your investment plan, and use volatility to your advantage rather than letting it drive emotional decisions.
+          </p>
+        </div>
+      `
+    },
+    {
+      id: 3,
+      title: "AI in Investment Management",
+      category: "Technology",
+      date: "Jan 10, 2024",
+      author: "Dr. Emily Rodriguez",
+      readTime: "10 min read",
+      image: "from-purple-400 to-pink-500",
+      content: `
+        <div class="space-y-6">
+          <p class="text-lg leading-relaxed">
+            Artificial Intelligence is revolutionizing the investment management industry, from algorithmic trading to portfolio optimization and risk assessment. As we move further into 2024, AI technologies are becoming increasingly sophisticated and accessible to both institutional and individual investors.
+          </p>
+          
+          <h3 class="text-2xl font-bold mt-8 mb-4">The Evolution of AI in Finance</h3>
+          <p class="leading-relaxed">
+            The integration of AI in investment management has evolved significantly over the past decade. What started with simple rule-based algorithms has now progressed to sophisticated machine learning models that can process vast amounts of data and identify patterns invisible to human analysts.
+          </p>
+          
+          <h3 class="text-2xl font-bold mt-8 mb-4">Key Applications of AI in Investment Management</h3>
+          
+          <h4 class="text-xl font-semibold mt-6 mb-3">1. Algorithmic Trading</h4>
+          <p class="leading-relaxed">
+            AI-powered trading algorithms can execute trades at optimal times based on market conditions, news sentiment, and technical indicators. These systems can process information in milliseconds and make decisions faster than any human trader.
+          </p>
+          
+          <h4 class="text-xl font-semibold mt-6 mb-3">2. Portfolio Optimization</h4>
+          <p class="leading-relaxed">
+            Machine learning algorithms can analyze historical data, market conditions, and individual preferences to create optimized portfolio allocations that maximize returns while minimizing risk.
+          </p>
+          
+          <h4 class="text-xl font-semibold mt-6 mb-3">3. Risk Assessment</h4>
+          <p class="leading-relaxed">
+            AI models can identify potential risks by analyzing market data, news sentiment, and economic indicators. This helps investors make more informed decisions about their investments.
+          </p>
+          
+          <h4 class="text-xl font-semibold mt-6 mb-3">4. Sentiment Analysis</h4>
+          <p class="leading-relaxed">
+            Natural language processing (NLP) algorithms can analyze news articles, social media posts, and earnings calls to gauge market sentiment and predict potential market movements.
+          </p>
+          
+          <h3 class="text-2xl font-bold mt-8 mb-4">Benefits and Challenges</h3>
+          
+          <h4 class="text-xl font-semibold mt-6 mb-3">Benefits:</h4>
+          <ul class="list-disc list-inside space-y-2 ml-4">
+            <li>Improved decision-making through data-driven insights</li>
+            <li>Reduced emotional bias in trading decisions</li>
+            <li>24/7 market monitoring and analysis</li>
+            <li>Cost-effective portfolio management</li>
+            <li>Access to sophisticated strategies previously available only to institutions</li>
+          </ul>
+          
+          <h4 class="text-xl font-semibold mt-6 mb-3">Challenges:</h4>
+          <ul class="list-disc list-inside space-y-2 ml-4">
+            <li>Over-reliance on historical data</li>
+            <li>Potential for algorithmic bias</li>
+            <li>Regulatory and ethical considerations</li>
+            <li>Need for human oversight and interpretation</li>
+          </ul>
+          
+          <h3 class="text-2xl font-bold mt-8 mb-4">The Future of AI in Investment Management</h3>
+          <p class="leading-relaxed">
+            As AI technology continues to advance, we can expect to see even more sophisticated applications in investment management. The key will be finding the right balance between automation and human judgment, ensuring that AI enhances rather than replaces human decision-making.
+          </p>
+          
+          <p class="leading-relaxed">
+            For individual investors, the democratization of AI-powered investment tools means access to strategies and insights that were once the exclusive domain of large financial institutions.
+          </p>
+        </div>
+      `
+    }
+  ];
+
+  const openBlogModal = (blog) => {
+    setSelectedBlog(blog);
+    setIsBlogModalOpen(true);
+    document.body.style.overflow = 'hidden';
+  };
+
+  const closeBlogModal = () => {
+    setIsBlogModalOpen(false);
+    setSelectedBlog(null);
+    document.body.style.overflow = 'unset';
+  };
+
+  const toggleStatusTooltip = () => {
+    setIsStatusTooltipOpen(!isStatusTooltipOpen);
+  };
+
+  const getStatusColor = (status) => {
+    switch (status) {
+      case 'operational':
+        return 'text-green-500';
+      case 'degraded':
+        return 'text-yellow-500';
+      case 'down':
+        return 'text-red-500';
+      default:
+        return 'text-gray-500';
+    }
+  };
+
+  const getStatusIcon = (status) => {
+    switch (status) {
+      case 'operational':
+        return (
+          <svg className="w-4 h-4 text-green-500" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
+          </svg>
+        );
+      case 'degraded':
+        return (
+          <svg className="w-4 h-4 text-yellow-500" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+          </svg>
+        );
+      case 'down':
+        return (
+          <svg className="w-4 h-4 text-red-500" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+          </svg>
+        );
+      default:
+        return (
+          <svg className="w-4 h-4 text-gray-500" fill="currentColor" viewBox="0 0 20 20">
+            <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z" clipRule="evenodd" />
+          </svg>
+        );
+    }
+  };
+
+  return (
+    <div className={`${theme === 'dark' ? 'bg-black text-white' : 'bg-white text-gray-900'}`}>
+      {/* Clean Modern Navigation */}
+      <nav className={`sticky top-0 z-50 backdrop-blur-sm transition-all duration-300 ${
+        theme === 'dark' 
+          ? 'bg-black shadow-lg shadow-black/10' 
+          : 'bg-white'
+      }`}>
+        <div className="max-w-7xl mx-auto px-6 py-4">
+          <div className="flex justify-between items-center">
+            {/* Logo Section */}
+            <div className="flex items-center space-x-3 group cursor-pointer">
+              <div className={`w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-200 ${
+                theme === 'dark' 
+                  ? 'bg-gray-800 group-hover:bg-gray-700' 
+                  : 'bg-gray-100 group-hover:bg-gray-200'
+              }`}>
+                <HiOutlineChartBar className={`w-5 h-5 transition-colors duration-200 ${
+                  theme === 'dark' 
+                    ? 'text-blue-400 group-hover:text-blue-300' 
+                    : 'text-blue-600 group-hover:text-blue-500'
+                }`} />
+              </div>
+              <span className={`text-xl font-bold transition-colors duration-200 ${
+                theme === 'dark' 
+                  ? 'text-white group-hover:text-blue-300' 
+                  : 'text-gray-900 group-hover:text-blue-600'
+              }`}>
+                PortfolioTracker
+              </span>
+            </div>
+
+            {/* Navigation Links - Center */}
+            <div className="hidden md:flex items-center space-x-8">
+              <a href="#home" className={`text-sm font-medium transition-colors duration-200 ${
+                theme === 'dark' 
+                  ? 'text-gray-300 hover:text-white' 
+                  : 'text-gray-600 hover:text-gray-900'
+              }`}>
+                Home
+              </a>
+              <div className="relative group">
+                <a href="#features" className={`text-sm font-medium transition-colors duration-200 flex items-center space-x-1 ${
+                  theme === 'dark' 
+                    ? 'text-gray-300 hover:text-white' 
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}>
+                  <span>Features</span>
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </a>
+              </div>
+              <div className="relative group">
+                <a href="#resources" className={`text-sm font-medium transition-colors duration-200 flex items-center space-x-1 ${
+                  theme === 'dark' 
+                    ? 'text-gray-300 hover:text-white' 
+                    : 'text-gray-600 hover:text-gray-900'
+                }`}>
+                  <span>Resources</span>
+                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                  </svg>
+                </a>
+              </div>
+              <a href="#pricing" className={`text-sm font-medium transition-colors duration-200 ${
+                theme === 'dark' 
+                  ? 'text-gray-300 hover:text-white' 
+                  : 'text-gray-600 hover:text-gray-900'
+              }`}>
+                Pricing
+              </a>
+              <a href="#blog" className={`text-sm font-medium transition-colors duration-200 ${
+                theme === 'dark' 
+                  ? 'text-gray-300 hover:text-white' 
+                  : 'text-gray-600 hover:text-gray-900'
+              }`}>
+                Blog
+              </a>
+            </div>
+
+            {/* Right Side Actions */}
+            <div className="flex items-center space-x-4">
+              {/* Cool Theme Toggle */}
+              <button
+                onClick={toggleTheme}
+                className={`relative p-2 rounded-xl transition-all duration-300 group overflow-hidden ${
+                  theme === 'dark' 
+                    ? 'hover:bg-gray-800/50' 
+                    : 'hover:bg-gray-100/50'
+                }`}
+                title={theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
+              >
+                {/* Background gradient effect */}
+                <div className={`absolute inset-0 rounded-xl transition-all duration-300 ${
+                  theme === 'dark'
+                    ? 'bg-gradient-to-r from-yellow-400/20 via-orange-400/20 to-red-400/20 opacity-0 group-hover:opacity-100'
+                    : 'bg-gradient-to-r from-blue-400/20 via-purple-400/20 to-indigo-400/20 opacity-0 group-hover:opacity-100'
+                }`}></div>
+                
+                {/* Icon container */}
+                <div className="relative flex items-center justify-center">
+                  {/* Sun icon for dark mode */}
+                  <svg 
+                    className={`w-5 h-5 transition-all duration-300 ${
+                      theme === 'dark' 
+                        ? 'text-yellow-400 rotate-0 scale-100' 
+                        : 'text-gray-400 -rotate-90 scale-0'
+                    }`}
+                    fill="currentColor" 
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
+                  </svg>
+                  
+                  {/* Moon icon for light mode */}
+                  <svg 
+                    className={`w-5 h-5 transition-all duration-300 absolute ${
+                      theme === 'dark' 
+                        ? 'text-gray-400 rotate-90 scale-0' 
+                        : 'text-gray-600 rotate-0 scale-100'
+                    }`}
+                    fill="currentColor" 
+                    viewBox="0 0 24 24"
+                  >
+                    <path d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"/>
+                  </svg>
+                </div>
+                
+                {/* Ripple effect */}
+                <div className={`absolute inset-0 rounded-xl transition-all duration-300 ${
+                  theme === 'dark'
+                    ? 'bg-yellow-400/10 scale-0 group-hover:scale-100'
+                    : 'bg-blue-400/10 scale-0 group-hover:scale-100'
+                }`}></div>
+              </button>
+
+              {/* Login Button */}
+              <button 
+                onClick={() => setIsLogin(true)}
+                className={`hidden md:block px-4 py-2 rounded-lg font-medium transition-all duration-200 border hover:scale-105 ${
+                  theme === 'dark'
+                    ? 'bg-transparent border-gray-700 text-gray-300 hover:bg-gray-800 hover:border-gray-600'
+                    : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50 hover:border-gray-400'
+                }`}
+              >
+                Log in
+              </button>
+
+              {/* Sign Up Button */}
+              <button 
+                onClick={() => setIsLogin(false)}
+                className={`hidden md:block px-4 py-2 rounded-lg font-medium transition-all duration-200 hover:scale-105 ${
+                  theme === 'dark'
+                    ? 'bg-white text-gray-900 hover:bg-gray-100'
+                    : 'bg-gray-900 text-white hover:bg-gray-800'
+                }`}
+              >
+                Sign up
+              </button>
+
+              {/* Mobile Menu Button */}
+              <button 
+                onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
+                className={`md:hidden p-2 rounded-lg transition-colors duration-200 ${
+                  theme === 'dark' 
+                    ? 'hover:bg-gray-800 text-gray-300' 
+                    : 'hover:bg-gray-100 text-gray-600'
+                }`}
+              >
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 6h16M4 12h16M4 18h16" />
+                </svg>
+              </button>
+            </div>
+          </div>
+        </div>
+
+        {/* Mobile Menu */}
+        <div className={`md:hidden transition-all duration-300 ${isMobileMenuOpen ? 'block' : 'hidden'}`}>
+          <div className={`px-6 py-4 space-y-4 border-t ${
+            theme === 'dark' ? 'border-gray-800' : 'border-gray-200'
+          }`}>
+            <a href="#home" className={`block text-sm font-medium ${
+              theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
+            }`}>
+              Home
+            </a>
+            <a href="#features" className={`block text-sm font-medium ${
+              theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
+            }`}>
+              Features
+            </a>
+            <a href="#resources" className={`block text-sm font-medium ${
+              theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
+            }`}>
+              Resources
+            </a>
+            <a href="#pricing" className={`block text-sm font-medium ${
+              theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
+            }`}>
+              Pricing
+            </a>
+            <a href="#blog" className={`block text-sm font-medium ${
+              theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
+            }`}>
+              Blog
+            </a>
+                        <div className="pt-4 space-y-3">
+              <button 
+                onClick={() => setIsLogin(true)}
+                className={`w-full px-4 py-2 rounded-lg font-medium border transition-all duration-200 ${
+                  theme === 'dark'
+                    ? 'bg-transparent border-gray-700 text-gray-300 hover:bg-gray-800'
+                    : 'bg-white border-gray-300 text-gray-700 hover:bg-gray-50'
+                }`}
+              >
+                Log in
+              </button>
+              <button 
+                onClick={() => setIsLogin(false)}
+                className={`w-full px-4 py-2 rounded-lg font-medium transition-all duration-200 ${
+                  theme === 'dark'
+                    ? 'bg-white text-gray-900 hover:bg-gray-100'
+                    : 'bg-gray-900 text-white hover:bg-gray-800'
+                }`}
+              >
+                Sign up
+              </button>
+            </div>
+          </div>
+        </div>
+      </nav>
+
+      {/* Hero Section */}
+      <section id="home" className="min-h-screen flex items-center justify-center">
+        <div className="max-w-7xl mx-auto px-6 py-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            {/* Left Side - Hero Content */}
+            <motion.div
+              initial={{ opacity: 0, x: -50 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6 }}
+              className="space-y-8"
+            >
+              <div className="space-y-4">
+                <h1 className={`text-5xl lg:text-6xl font-bold leading-tight ${
+                  theme === 'dark' ? 'text-white' : 'text-gray-900'
+                }`}>
+                  Track Your
+                  <span className={`block ${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`}>
+                    Portfolio
+                  </span>
+                  Like a Pro
+                </h1>
+                <p className={`text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                  Monitor your investments, track performance, and make informed decisions with our comprehensive portfolio tracking platform.
+                </p>
+              </div>
+
+              {/* Features */}
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+                <div className={`flex items-center space-x-3 p-4 rounded-xl ${
+                  theme === 'dark' ? 'bg-gray-800/50' : 'bg-white'
+                } shadow-sm`}>
+                  <HiOutlineTrendingUp className={`w-6 h-6 ${theme === 'dark' ? 'text-green-400' : 'text-green-600'}`} />
+                  <div>
+                    <h3 className={`font-semibold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                      Real-time Tracking
+                    </h3>
+                    <p className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                      Live stock prices and updates
+                    </p>
+                  </div>
+                </div>
+
+                <div className={`flex items-center space-x-3 p-4 rounded-xl ${
+                  theme === 'dark' ? 'bg-gray-800/50' : 'bg-white'
+                } shadow-sm`}>
+                  <HiOutlineBell className={`w-6 h-6 ${theme === 'dark' ? 'text-yellow-400' : 'text-yellow-600'}`} />
+                  <div>
+                    <h3 className={`font-semibold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                      Smart Alerts
+                    </h3>
+                    <p className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                      Price alerts and notifications
+                    </p>
+                  </div>
+                </div>
+
+                <div className={`flex items-center space-x-3 p-4 rounded-xl ${
+                  theme === 'dark' ? 'bg-gray-800/50' : 'bg-white'
+                } shadow-sm`}>
+                  <HiOutlineChartBar className={`w-6 h-6 ${theme === 'dark' ? 'text-purple-400' : 'text-purple-600'}`} />
+                  <div>
+                    <h3 className={`font-semibold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                      Analytics
+                    </h3>
+                    <p className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                      Detailed performance insights
+                    </p>
+                  </div>
+                </div>
+
+                <div className={`flex items-center space-x-3 p-4 rounded-xl ${
+                  theme === 'dark' ? 'bg-gray-800/50' : 'bg-white'
+                } shadow-sm`}>
+                  <HiOutlineShieldCheck className={`w-6 h-6 ${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`} />
+                  <div>
+                    <h3 className={`font-semibold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                      Secure
+                    </h3>
+                    <p className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                      Your data is protected
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </motion.div>
+
+            {/* Right Side - Auth Form */}
+            <motion.div
+              initial={{ opacity: 0, x: 50 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className={`p-8 rounded-2xl shadow-xl ${
+                theme === 'dark' ? 'bg-[#1f1f1f] border border-gray-800' : 'bg-white border border-gray-200'
+              }`}
+            >
+            <div className="text-center mb-8">
+              <h2 className={`text-3xl font-bold mb-2 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                {isLogin ? 'Welcome Back' : 'Create Account'}
+              </h2>
+              <p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                {isLogin ? 'Sign in to your account' : 'Start tracking your portfolio today'}
+              </p>
+            </div>
+
+            {/* Toggle Buttons */}
+            <div className={`flex rounded-xl p-1 mb-6 ${
+              theme === 'dark' ? 'bg-gray-800' : 'bg-gray-100'
+            }`}>
+              <button
+                onClick={() => setIsLogin(true)}
+                className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all duration-200 ${
+                  isLogin
+                    ? 'bg-blue-600 text-white shadow-sm'
+                    : theme === 'dark' ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                Sign In
+              </button>
+              <button
+                onClick={() => setIsLogin(false)}
+                className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all duration-200 ${
+                  !isLogin
+                    ? 'bg-blue-600 text-white shadow-sm'
+                    : theme === 'dark' ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'
+                }`}
+              >
+                Sign Up
+              </button>
+            </div>
+
+            {/* Error and Success Messages */}
+            {error && (
+              <div className={`p-4 rounded-xl border ${
+                theme === 'dark'
+                  ? 'bg-red-900/20 border-red-800 text-red-400'
+                  : 'bg-red-50 border-red-200 text-red-700'
+              }`}>
+                {error}
+              </div>
+            )}
+            
+            {success && (
+              <div className={`p-4 rounded-xl border ${
+                theme === 'dark'
+                  ? 'bg-green-900/20 border-green-800 text-green-400'
+                  : 'bg-green-50 border-green-200 text-green-700'
+              }`}>
+                {success}
+              </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="space-y-6">
+              {!isLogin && (
+                <div>
+                  <label className={`block text-sm font-medium mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                    Full Name
+                  </label>
+                  <div className="relative">
+                    <HiOutlineUser className={`absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 ${
+                      theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                    }`} />
+                    <input
+                      type="text"
+                      name="name"
+                      value={formData.name}
+                      onChange={handleInputChange}
+                      className={`w-full pl-10 pr-4 py-3 rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
+                        theme === 'dark'
+                          ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                          : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                      }`}
+                      placeholder="Enter your full name"
+                      required={!isLogin}
+                    />
+                  </div>
+                </div>
+              )}
+
+              <div>
+                <label className={`block text-sm font-medium mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                  Email Address
+                </label>
+                <div className="relative">
+                  <HiOutlineMail className={`absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 ${
+                    theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                  }`} />
+                  <input
+                    type="email"
+                    name="email"
+                    value={formData.email}
+                    onChange={handleInputChange}
+                    className={`w-full pl-10 pr-4 py-3 rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
+                      theme === 'dark'
+                        ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                        : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                    }`}
+                    placeholder="Enter your email"
+                    required
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className={`block text-sm font-medium mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                  Password
+                </label>
+                <div className="relative">
+                  <HiOutlineLockClosed className={`absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 ${
+                    theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                  }`} />
+                  <input
+                    type={showPassword ? 'text' : 'password'}
+                    name="password"
+                    value={formData.password}
+                    onChange={handleInputChange}
+                    className={`w-full pl-10 pr-12 py-3 rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
+                      theme === 'dark'
+                        ? 'bg-gray-800 border-gray-700 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                        : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                    }`}
+                    placeholder="Enter your password"
+                    required
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword(!showPassword)}
+                    className={`absolute right-3 top-1/2 transform -translate-y-1/2 p-1 rounded ${
+                      theme === 'dark' ? 'hover:bg-gray-700 text-gray-400' : 'hover:bg-gray-100 text-gray-500'
+                    }`}
+                  >
+                    {showPassword ? <HiOutlineEyeOff className="w-5 h-5" /> : <HiOutlineEye className="w-5 h-5" />}
+                  </button>
+                </div>
+              </div>
+
+              {isLogin && (
+                <div className="flex items-center justify-between">
+                  <label className="flex items-center">
+                    <input
+                      type="checkbox"
+                      className={`rounded border-2 ${
+                        theme === 'dark' ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-300'
+                      } text-blue-600 focus:ring-blue-500`}
+                    />
+                    <span className={`ml-2 text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                      Remember me
+                    </span>
+                  </label>
+                  <button
+                    type="button"
+                    className={`text-sm ${theme === 'dark' ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-500'}`}
+                  >
+                    Forgot password?
+                  </button>
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={isLoading}
+                className={`w-full py-3 px-4 font-semibold rounded-xl transition-all duration-200 shadow-lg hover:shadow-xl ${
+                  isLoading
+                    ? 'bg-gray-400 text-gray-200 cursor-not-allowed'
+                    : 'bg-gradient-to-r from-blue-600 to-blue-700 text-white hover:from-blue-700 hover:to-blue-800'
+                }`}
+              >
+                {isLoading ? (
+                  <div className="flex items-center justify-center">
+                    <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white mr-2"></div>
+                    {isLogin ? 'Signing In...' : 'Creating Account...'}
+                  </div>
+                ) : (
+                  isLogin ? 'Sign In' : 'Create Account'
+                )}
+              </button>
+            </form>
+
+            <div className={`mt-6 text-center ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+              {isLogin ? "Don't have an account? " : "Already have an account? "}
+              <button
+                onClick={() => setIsLogin(!isLogin)}
+                className={`font-semibold ${theme === 'dark' ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-500'}`}
+              >
+                {isLogin ? 'Sign up' : 'Sign in'}
+              </button>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+
+      {/* Features Section */}
+      <section id="features" className={`py-20 ${theme === 'dark' ? 'bg-black' : 'bg-gray-50'}`}>
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-16">
+            <h2 className={`text-4xl font-bold mb-4 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+              Powerful Features
+            </h2>
+            <p className={`text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+              Everything you need to manage your portfolio effectively
+            </p>
+          </div>
+          
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {/* Feature 1 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+              className={`p-6 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} shadow-lg`}
+            >
+              <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${
+                theme === 'dark' ? 'bg-blue-500/20' : 'bg-blue-100'
+              }`}>
+                <HiOutlineTrendingUp className={`w-6 h-6 ${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`} />
+              </div>
+              <h3 className={`text-xl font-semibold mb-3 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Real-time Tracking
+              </h3>
+              <p className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                Get live stock prices, real-time updates, and instant notifications for your portfolio.
+              </p>
+            </motion.div>
+
+            {/* Feature 2 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.1 }}
+              className={`p-6 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} shadow-lg`}
+            >
+              <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${
+                theme === 'dark' ? 'bg-green-500/20' : 'bg-green-100'
+              }`}>
+                <HiOutlineChartBar className={`w-6 h-6 ${theme === 'dark' ? 'text-green-400' : 'text-green-600'}`} />
+              </div>
+              <h3 className={`text-xl font-semibold mb-3 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Advanced Analytics
+              </h3>
+              <p className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                Detailed performance insights, portfolio analysis, and investment recommendations.
+              </p>
+            </motion.div>
+
+            {/* Feature 3 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className={`p-6 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} shadow-lg`}
+            >
+              <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${
+                theme === 'dark' ? 'bg-purple-500/20' : 'bg-purple-100'
+              }`}>
+                <HiOutlineBell className={`w-6 h-6 ${theme === 'dark' ? 'text-purple-400' : 'text-purple-600'}`} />
+              </div>
+              <h3 className={`text-xl font-semibold mb-3 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Smart Alerts
+              </h3>
+              <p className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                Custom price alerts, news notifications, and portfolio milestone tracking.
+              </p>
+            </motion.div>
+
+            {/* Feature 4 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.3 }}
+              className={`p-6 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} shadow-lg`}
+            >
+              <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${
+                theme === 'dark' ? 'bg-yellow-500/20' : 'bg-yellow-100'
+              }`}>
+                <HiOutlineShieldCheck className={`w-6 h-6 ${theme === 'dark' ? 'text-yellow-400' : 'text-yellow-600'}`} />
+              </div>
+              <h3 className={`text-xl font-semibold mb-3 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Secure & Private
+              </h3>
+              <p className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                Bank-level security, data encryption, and complete privacy protection.
+              </p>
+            </motion.div>
+
+            {/* Feature 5 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.4 }}
+              className={`p-6 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} shadow-lg`}
+            >
+              <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${
+                theme === 'dark' ? 'bg-red-500/20' : 'bg-red-100'
+              }`}>
+                <svg className={`w-6 h-6 ${theme === 'dark' ? 'text-red-400' : 'text-red-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+                </svg>
+              </div>
+              <h3 className={`text-xl font-semibold mb-3 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Portfolio Insights
+              </h3>
+              <p className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                Comprehensive portfolio analysis, risk assessment, and performance metrics.
+              </p>
+            </motion.div>
+
+            {/* Feature 6 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.5 }}
+              className={`p-6 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} shadow-lg`}
+            >
+              <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${
+                theme === 'dark' ? 'bg-indigo-500/20' : 'bg-indigo-100'
+              }`}>
+                <svg className={`w-6 h-6 ${theme === 'dark' ? 'text-indigo-400' : 'text-indigo-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z" />
+                </svg>
+              </div>
+              <h3 className={`text-xl font-semibold mb-3 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Stock News
+              </h3>
+              <p className={`${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                Stay updated with the latest stock news, market updates, and financial insights.
+              </p>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Resources Section */}
+      <section id="resources" className="py-20">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-16">
+            <h2 className={`text-4xl font-bold mb-4 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+              Resources & Learning
+            </h2>
+            <p className={`text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+              Learn, grow, and make better investment decisions
+            </p>
+          </div>
+          
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {/* Resource 1 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+              className={`p-6 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} shadow-lg border ${
+                theme === 'dark' ? 'border-gray-700' : 'border-gray-200'
+              }`}
+            >
+              <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${
+                theme === 'dark' ? 'bg-blue-500/20' : 'bg-blue-100'
+              }`}>
+                <svg className={`w-6 h-6 ${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C19.832 18.477 18.246 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+                </svg>
+              </div>
+              <h3 className={`text-xl font-semibold mb-3 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Investment Guide
+              </h3>
+              <p className={`mb-4 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                Comprehensive guide to building and managing your investment portfolio.
+              </p>
+              <button className={`text-sm font-medium ${theme === 'dark' ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-500'}`}>
+                Read More →
+              </button>
+            </motion.div>
+
+            {/* Resource 2 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.1 }}
+              className={`p-6 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} shadow-lg border ${
+                theme === 'dark' ? 'border-gray-700' : 'border-gray-200'
+              }`}
+            >
+              <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${
+                theme === 'dark' ? 'bg-green-500/20' : 'bg-green-100'
+              }`}>
+                <svg className={`w-6 h-6 ${theme === 'dark' ? 'text-green-400' : 'text-green-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z" />
+                </svg>
+              </div>
+              <h3 className={`text-xl font-semibold mb-3 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Video Tutorials
+              </h3>
+              <p className={`mb-4 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                Step-by-step video tutorials to help you master portfolio management.
+              </p>
+              <button className={`text-sm font-medium ${theme === 'dark' ? 'text-green-400 hover:text-green-300' : 'text-green-600 hover:text-green-500'}`}>
+                Watch Now →
+              </button>
+            </motion.div>
+
+            {/* Resource 3 */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className={`p-6 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} shadow-lg border ${
+                theme === 'dark' ? 'border-gray-700' : 'border-gray-200'
+              }`}
+            >
+              <div className={`w-12 h-12 rounded-lg flex items-center justify-center mb-4 ${
+                theme === 'dark' ? 'bg-purple-500/20' : 'bg-purple-100'
+              }`}>
+                <svg className={`w-6 h-6 ${theme === 'dark' ? 'text-purple-400' : 'text-purple-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+                </svg>
+              </div>
+              <h3 className={`text-xl font-semibold mb-3 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                FAQ & Support
+              </h3>
+              <p className={`mb-4 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                Find answers to common questions and get expert support when needed.
+              </p>
+              <button className={`text-sm font-medium ${theme === 'dark' ? 'text-purple-400 hover:text-purple-300' : 'text-purple-600 hover:text-purple-500'}`}>
+                Get Help →
+              </button>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Pricing Section */}
+      <section id="pricing" className={`py-20 ${theme === 'dark' ? 'bg-black' : 'bg-gray-50'}`}>
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-16">
+            <h2 className={`text-4xl font-bold mb-4 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+              Simple, Transparent Pricing
+            </h2>
+            <p className={`text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+              Choose the plan that fits your investment needs
+            </p>
+          </div>
+          
+          <div className="grid md:grid-cols-3 gap-8">
+            {/* Free Plan */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6 }}
+              className={`p-8 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} shadow-lg border ${
+                theme === 'dark' ? 'border-gray-700' : 'border-gray-200'
+              }`}
+            >
+              <h3 className={`text-2xl font-bold mb-2 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Free
+              </h3>
+              <p className={`text-4xl font-bold mb-6 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                $0
+                <span className={`text-lg font-normal ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                  /month
+                </span>
+              </p>
+              <ul className={`space-y-3 mb-8 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                <li className="flex items-center">
+                  <svg className="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                  Up to 10 stocks
+                </li>
+                <li className="flex items-center">
+                  <svg className="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                  Basic analytics
+                </li>
+                <li className="flex items-center">
+                  <svg className="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                  Price alerts
+                </li>
+              </ul>
+              <button className={`w-full py-3 px-4 rounded-lg font-medium transition-colors ${
+                theme === 'dark'
+                  ? 'bg-gray-700 text-white hover:bg-gray-600'
+                  : 'bg-gray-200 text-gray-900 hover:bg-gray-300'
+              }`}>
+                Get Started
+              </button>
+            </motion.div>
+
+            {/* Pro Plan */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.1 }}
+              className={`p-8 rounded-xl relative ${theme === 'dark' ? 'bg-blue-600' : 'bg-blue-600'} shadow-lg border-2 border-blue-500`}
+            >
+              <div className={`absolute -top-4 left-1/2 transform -translate-x-1/2 px-4 py-1 rounded-full text-sm font-medium ${
+                theme === 'dark' ? 'bg-yellow-400 text-gray-900' : 'bg-yellow-400 text-gray-900'
+              }`}>
+                Most Popular
+              </div>
+              <h3 className={`text-2xl font-bold mb-2 text-white`}>
+                Pro
+              </h3>
+              <p className={`text-4xl font-bold mb-6 text-white`}>
+                $9
+                <span className={`text-lg font-normal text-blue-200`}>
+                  /month
+                </span>
+              </p>
+              <ul className={`space-y-3 mb-8 text-blue-100`}>
+                <li className="flex items-center">
+                  <svg className="w-5 h-5 text-white mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                  Unlimited stocks
+                </li>
+                <li className="flex items-center">
+                  <svg className="w-5 h-5 text-white mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                  Advanced analytics
+                </li>
+                <li className="flex items-center">
+                  <svg className="w-5 h-5 text-white mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                  Smart alerts
+                </li>
+                <li className="flex items-center">
+                  <svg className="w-5 h-5 text-white mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                  Portfolio insights
+                </li>
+              </ul>
+              <button className={`w-full py-3 px-4 rounded-lg font-medium bg-white text-blue-600 hover:bg-gray-100 transition-colors`}>
+                Start Free Trial
+              </button>
+            </motion.div>
+
+            {/* Enterprise Plan */}
+            <motion.div
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.6, delay: 0.2 }}
+              className={`p-8 rounded-xl ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} shadow-lg border ${
+                theme === 'dark' ? 'border-gray-700' : 'border-gray-200'
+              }`}
+            >
+              <h3 className={`text-2xl font-bold mb-2 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Enterprise
+              </h3>
+              <p className={`text-4xl font-bold mb-6 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                $29
+                <span className={`text-lg font-normal ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                  /month
+                </span>
+              </p>
+              <ul className={`space-y-3 mb-8 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                <li className="flex items-center">
+                  <svg className="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                  Everything in Pro
+                </li>
+                <li className="flex items-center">
+                  <svg className="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                  Team collaboration
+                </li>
+                <li className="flex items-center">
+                  <svg className="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                  Priority support
+                </li>
+                <li className="flex items-center">
+                  <svg className="w-5 h-5 text-green-500 mr-3" fill="currentColor" viewBox="0 0 20 20">
+                    <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+                  </svg>
+                  Custom integrations
+                </li>
+              </ul>
+              <button className={`w-full py-3 px-4 rounded-lg font-medium transition-colors ${
+                theme === 'dark'
+                  ? 'bg-gray-700 text-white hover:bg-gray-600'
+                  : 'bg-gray-200 text-gray-900 hover:bg-gray-300'
+              }`}>
+                Contact Sales
+              </button>
+            </motion.div>
+          </div>
+        </div>
+      </section>
+
+      {/* Blog Section */}
+      <section id="blog" className="py-20">
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="text-center mb-16">
+            <h2 className={`text-4xl font-bold mb-4 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+              Latest Insights
+            </h2>
+            <p className={`text-xl ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+              Stay updated with the latest investment trends and strategies
+            </p>
+          </div>
+          
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {blogPosts.map((blog, index) => (
+              <motion.div
+                key={blog.id}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                transition={{ duration: 0.6, delay: index * 0.1 }}
+                className={`rounded-xl overflow-hidden ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} shadow-lg border ${
+                  theme === 'dark' ? 'border-gray-700' : 'border-gray-200'
+                } cursor-pointer hover:shadow-xl transition-all duration-300 hover:-translate-y-1`}
+                onClick={() => openBlogModal(blog)}
+              >
+                <div className={`h-48 bg-gradient-to-br ${blog.image}`}></div>
+                <div className="p-6">
+                  <div className={`text-sm font-medium mb-2 ${
+                    blog.category === 'Investment Strategy' ? (theme === 'dark' ? 'text-blue-400' : 'text-blue-600') :
+                    blog.category === 'Market Analysis' ? (theme === 'dark' ? 'text-green-400' : 'text-green-600') :
+                    (theme === 'dark' ? 'text-purple-400' : 'text-purple-600')
+                  }`}>
+                    {blog.category}
+                  </div>
+                  <h3 className={`text-xl font-semibold mb-3 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                    {blog.title}
+                  </h3>
+                  <p className={`mb-4 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                    {blog.category === 'Investment Strategy' ? 'Learn the key principles of portfolio diversification and how to apply them in today\'s market.' :
+                     blog.category === 'Market Analysis' ? 'A comprehensive guide to navigating market volatility and protecting your investments.' :
+                     'How artificial intelligence is revolutionizing portfolio management and investment decisions.'}
+                  </p>
+                  <div className="flex items-center justify-between">
+                    <span className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`}>
+                      {blog.date}
+                    </span>
+                    <button className={`text-sm font-medium ${
+                      blog.category === 'Investment Strategy' ? (theme === 'dark' ? 'text-blue-400 hover:text-blue-300' : 'text-blue-600 hover:text-blue-500') :
+                      blog.category === 'Market Analysis' ? (theme === 'dark' ? 'text-green-400 hover:text-green-300' : 'text-green-600 hover:text-green-500') :
+                      (theme === 'dark' ? 'text-purple-400 hover:text-purple-300' : 'text-purple-600 hover:text-purple-500')
+                    }`}>
+                      Read More →
+                    </button>
+                  </div>
+                </div>
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Footer */}
+      <footer className={`py-16 ${theme === 'dark' ? 'bg-black border-t border-gray-800' : 'bg-gray-50 border-t border-gray-200'}`}>
+        <div className="max-w-7xl mx-auto px-6">
+          <div className="grid md:grid-cols-4 gap-8">
+            {/* Company Info */}
+            <div className="md:col-span-2">
+              <div className="flex items-center space-x-3 mb-4">
+                <div className={`w-8 h-8 rounded-lg flex items-center justify-center ${
+                  theme === 'dark' ? 'bg-gray-800' : 'bg-gray-100'
+                }`}>
+                  <HiOutlineChartBar className={`w-5 h-5 ${
+                    theme === 'dark' ? 'text-blue-400' : 'text-blue-600'
+                  }`} />
+                </div>
+                <span className={`text-xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                  PortfolioTracker
+                </span>
+              </div>
+              <p className={`mb-6 max-w-md ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                The ultimate platform for tracking your investments, analyzing performance, and making informed financial decisions.
+              </p>
+              <div className="flex space-x-4">
+                <a href="https://twitter.com/Hackstyx" target="_blank" rel="noopener noreferrer" className={`p-2 rounded-lg transition-colors duration-200 ${
+                  theme === 'dark' 
+                    ? 'text-gray-400 hover:text-white hover:bg-gray-800' 
+                    : 'text-gray-500 hover:text-gray-900 hover:bg-gray-200'
+                }`}>
+                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/>
+                  </svg>
+                </a>
+                <a href="https://github.com/Hackstyx" target="_blank" rel="noopener noreferrer" className={`p-2 rounded-lg transition-colors duration-200 ${
+                  theme === 'dark' 
+                    ? 'text-gray-400 hover:text-white hover:bg-gray-800' 
+                    : 'text-gray-500 hover:text-gray-900 hover:bg-gray-200'
+                }`}>
+                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/>
+                  </svg>
+                </a>
+                <a href="https://linkedin.com/in/princekumargupta" target="_blank" rel="noopener noreferrer" className={`p-2 rounded-lg transition-colors duration-200 ${
+                  theme === 'dark' 
+                    ? 'text-gray-400 hover:text-white hover:bg-gray-800' 
+                    : 'text-gray-500 hover:text-gray-900 hover:bg-gray-200'
+                }`}>
+                  <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                    <path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/>
+                  </svg>
+                </a>
+              </div>
+            </div>
+
+            {/* Quick Links */}
+            <div>
+              <h3 className={`text-lg font-semibold mb-4 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Product
+              </h3>
+              <ul className={`space-y-3 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                <li><a href="#features" className="hover:text-blue-500 transition-colors duration-200">Features</a></li>
+                <li><a href="#pricing" className="hover:text-blue-500 transition-colors duration-200">Pricing</a></li>
+                <li><a href="#resources" className="hover:text-blue-500 transition-colors duration-200">Resources</a></li>
+                <li><a href="#blog" className="hover:text-blue-500 transition-colors duration-200">Blog</a></li>
+              </ul>
+            </div>
+
+            {/* Support */}
+            <div>
+              <h3 className={`text-lg font-semibold mb-4 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Support
+              </h3>
+              <ul className={`space-y-3 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                <li><a href="#" className="hover:text-blue-500 transition-colors duration-200">Help Center</a></li>
+                <li><a href="#" className="hover:text-blue-500 transition-colors duration-200">Contact Us</a></li>
+                <li><a href="#" className="hover:text-blue-500 transition-colors duration-200">Privacy Policy</a></li>
+                <li><a href="#" className="hover:text-blue-500 transition-colors duration-200">Terms of Service</a></li>
+              </ul>
+            </div>
+          </div>
+
+          {/* Bottom Bar */}
+          <div className={`mt-12 pt-8 border-t ${
+            theme === 'dark' ? 'border-gray-800' : 'border-gray-200'
+          }`}>
+            <div className="flex flex-col md:flex-row justify-between items-center space-y-4 md:space-y-0">
+              <p className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                © 2024 PortfolioTracker. All rights reserved.
+              </p>
+              <div className="flex items-center space-x-6">
+                <button
+                  onClick={toggleTheme}
+                  className={`p-2 rounded-lg transition-colors duration-200 ${
+                    theme === 'dark' 
+                      ? 'text-gray-400 hover:text-white hover:bg-gray-800' 
+                      : 'text-gray-500 hover:text-gray-900 hover:bg-gray-200'
+                  }`}
+                  title={theme === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
+                >
+                  {theme === 'dark' ? (
+                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M12 2.25a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V3a.75.75 0 01.75-.75zM7.5 12a4.5 4.5 0 119 0 4.5 4.5 0 01-9 0zM18.894 6.166a.75.75 0 00-1.06-1.06l-1.591 1.59a.75.75 0 101.06 1.061l1.591-1.59zM21.75 12a.75.75 0 01-.75.75h-2.25a.75.75 0 010-1.5H21a.75.75 0 01.75.75zM17.834 18.894a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 10-1.061 1.06l1.59 1.591zM12 18a.75.75 0 01.75.75V21a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18zM7.758 17.303a.75.75 0 00-1.061-1.06l-1.591 1.59a.75.75 0 001.06 1.061l1.591-1.59zM6 12a.75.75 0 01-.75.75H3a.75.75 0 010-1.5h2.25A.75.75 0 016 12zM6.697 7.757a.75.75 0 001.06-1.06l-1.59-1.591a.75.75 0 00-1.061 1.06l1.59 1.591z"/>
+                    </svg>
+                  ) : (
+                    <svg className="w-5 h-5" fill="currentColor" viewBox="0 0 24 24">
+                      <path d="M9.528 1.718a.75.75 0 01.162.819A8.97 8.97 0 009 6a9 9 0 009 9 8.97 8.97 0 003.463-.69.75.75 0 01.981.98 10.503 10.503 0 01-9.694 6.46c-5.799 0-10.5-4.701-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 01.818.162z"/>
+                    </svg>
+                  )}
+                </button>
+                <div className="relative status-tooltip-container">
+                  <button
+                    onClick={toggleStatusTooltip}
+                    className={`text-sm ${theme === 'dark' ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'} transition-colors duration-200`}
+                  >
+                    Status
+                  </button>
+                  
+                  {/* Status Tooltip */}
+                  {isStatusTooltipOpen && (
+                    <motion.div
+                      initial={{ opacity: 0, scale: 0.95, y: 10 }}
+                      animate={{ opacity: 1, scale: 1, y: 0 }}
+                      exit={{ opacity: 0, scale: 0.95, y: 10 }}
+                      transition={{ duration: 0.2 }}
+                      className={`absolute bottom-full right-0 mb-2 w-80 p-4 rounded-xl shadow-2xl border ${
+                        theme === 'dark' 
+                          ? 'bg-gray-800 border-gray-700' 
+                          : 'bg-white border-gray-200'
+                      }`}
+                    >
+                      {/* Arrow */}
+                      <div className={`absolute top-full right-4 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent ${
+                        theme === 'dark' ? 'border-t-gray-800' : 'border-t-white'
+                      }`}></div>
+                      
+                      {/* Header */}
+                      <div className="flex items-center justify-between mb-4">
+                        <h4 className={`font-semibold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                          System Status
+                        </h4>
+                        <div className="flex items-center space-x-2">
+                          {getStatusIcon(systemStatus.overall)}
+                          <span className={`text-sm font-medium capitalize ${getStatusColor(systemStatus.overall)}`}>
+                            {systemStatus.overall}
+                          </span>
+                        </div>
+                      </div>
+                      
+                      {/* Status Items */}
+                      <div className="space-y-3">
+                        <div className="flex items-center justify-between">
+                          <span className={`text-sm ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                            API
+                          </span>
+                          <div className="flex items-center space-x-2">
+                            {getStatusIcon(systemStatus.api)}
+                            <span className={`text-sm font-medium capitalize ${getStatusColor(systemStatus.api)}`}>
+                              {systemStatus.api}
+                            </span>
+                          </div>
+                        </div>
+                        
+                        <div className="flex items-center justify-between">
+                          <span className={`text-sm ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                            Database
+                          </span>
+                          <div className="flex items-center space-x-2">
+                            {getStatusIcon(systemStatus.database)}
+                            <span className={`text-sm font-medium capitalize ${getStatusColor(systemStatus.database)}`}>
+                              {systemStatus.database}
+                            </span>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      {/* Footer */}
+                      <div className={`mt-4 pt-3 border-t ${
+                        theme === 'dark' ? 'border-gray-700' : 'border-gray-200'
+                      }`}>
+                        <div className="flex items-center justify-between">
+                          <span className={`text-xs ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`}>
+                            Last checked: {systemStatus.lastChecked}
+                          </span>
+                          <button
+                            onClick={() => {
+                              setSystemStatus({
+                                ...systemStatus,
+                                lastChecked: new Date().toLocaleTimeString()
+                              });
+                            }}
+                            className={`text-xs font-medium ${
+                              theme === 'dark' 
+                                ? 'text-blue-400 hover:text-blue-300' 
+                                : 'text-blue-600 hover:text-blue-500'
+                            } transition-colors duration-200`}
+                          >
+                            Refresh
+                          </button>
+                        </div>
+                      </div>
+                    </motion.div>
+                  )}
+                </div>
+                <a href="#" className={`text-sm ${theme === 'dark' ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'} transition-colors duration-200`}>
+                  Security
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </footer>
+
+      {/* Blog Modal */}
+      {isBlogModalOpen && selectedBlog && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          {/* Backdrop */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            exit={{ opacity: 0 }}
+            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+            onClick={closeBlogModal}
+          />
+          
+          {/* Modal Content */}
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9, y: 20 }}
+            animate={{ opacity: 1, scale: 1, y: 0 }}
+            exit={{ opacity: 0, scale: 0.9, y: 20 }}
+            transition={{ duration: 0.3, ease: "easeOut" }}
+            className={`relative w-full max-w-4xl max-h-[90vh] overflow-hidden rounded-2xl shadow-2xl ${
+              theme === 'dark' ? 'bg-gray-900' : 'bg-white'
+            }`}
+          >
+            {/* Header */}
+            <div className={`relative h-64 bg-gradient-to-br ${selectedBlog.image}`}>
+              <div className="absolute inset-0 bg-black/20"></div>
+              <div className="absolute inset-0 flex items-end p-8">
+                <div className="w-full">
+                  <div className={`inline-block px-3 py-1 rounded-full text-sm font-medium mb-4 ${
+                    selectedBlog.category === 'Investment Strategy' ? 'bg-blue-500/20 text-blue-300' :
+                    selectedBlog.category === 'Market Analysis' ? 'bg-green-500/20 text-green-300' :
+                    'bg-purple-500/20 text-purple-300'
+                  }`}>
+                    {selectedBlog.category}
+                  </div>
+                  <h1 className={`text-3xl md:text-4xl font-bold mb-2 ${theme === 'dark' ? 'text-white' : 'text-white'}`}>
+                    {selectedBlog.title}
+                  </h1>
+                  <div className={`flex items-center space-x-4 text-sm ${theme === 'dark' ? 'text-gray-300' : 'text-gray-200'}`}>
+                    <span>By {selectedBlog.author}</span>
+                    <span>•</span>
+                    <span>{selectedBlog.date}</span>
+                    <span>•</span>
+                    <span>{selectedBlog.readTime}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Close Button */}
+            <button
+              onClick={closeBlogModal}
+              className={`absolute top-4 right-4 p-2 rounded-full transition-all duration-200 ${
+                theme === 'dark' 
+                  ? 'bg-gray-800/50 text-gray-300 hover:bg-gray-700/50 hover:text-white' 
+                  : 'bg-white/20 text-white hover:bg-white/30'
+              }`}
+            >
+              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+
+            {/* Content */}
+            <div className="p-8 overflow-y-auto max-h-[calc(90vh-16rem)]">
+              <div 
+                className={`prose prose-lg max-w-none ${
+                  theme === 'dark' 
+                    ? 'prose-invert prose-headings:text-white prose-p:text-gray-300 prose-strong:text-white prose-li:text-gray-300' 
+                    : 'prose-headings:text-gray-900 prose-p:text-gray-700 prose-strong:text-gray-900 prose-li:text-gray-700'
+                }`}
+                dangerouslySetInnerHTML={{ __html: selectedBlog.content }}
+              />
+              
+              {/* Author Bio */}
+              <div className={`mt-12 p-6 rounded-xl ${
+                theme === 'dark' ? 'bg-gray-800/50' : 'bg-gray-50'
+              }`}>
+                <div className="flex items-center space-x-4">
+                  <div className={`w-12 h-12 rounded-full flex items-center justify-center ${
+                    theme === 'dark' ? 'bg-gray-700' : 'bg-gray-200'
+                  }`}>
+                    <span className={`text-lg font-semibold ${
+                      theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
+                    }`}>
+                      {selectedBlog.author.split(' ').map(n => n[0]).join('')}
+                    </span>
+                  </div>
+                  <div>
+                    <h4 className={`font-semibold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                      {selectedBlog.author}
+                    </h4>
+                    <p className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                      Investment Expert & Financial Analyst
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              {/* Action Buttons */}
+              <div className="mt-8 flex flex-col sm:flex-row gap-4">
+                <button
+                  onClick={closeBlogModal}
+                  className={`flex-1 px-6 py-3 rounded-xl font-medium transition-all duration-200 ${
+                    theme === 'dark'
+                      ? 'bg-gray-800 text-white hover:bg-gray-700'
+                      : 'bg-gray-200 text-gray-900 hover:bg-gray-300'
+                  }`}
+                >
+                  Close Article
+                </button>
+                <button className={`flex-1 px-6 py-3 rounded-xl font-medium transition-all duration-200 ${
+                  selectedBlog.category === 'Investment Strategy' ? 'bg-blue-600 text-white hover:bg-blue-700' :
+                  selectedBlog.category === 'Market Analysis' ? 'bg-green-600 text-white hover:bg-green-700' :
+                  'bg-purple-600 text-white hover:bg-purple-700'
+                }`}>
+                  Share Article
+                </button>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default Homepage; 
\ No newline at end of file
diff --git a/src/pages/MarketCalendar.jsx b/src/pages/MarketCalendar.jsx
new file mode 100644
index 0000000..c00d15e
--- /dev/null
+++ b/src/pages/MarketCalendar.jsx
@@ -0,0 +1,490 @@
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Card, Title, Text, Badge } from '@tremor/react';
+import { 
+  HiCalendar, 
+  HiTrendingUp, 
+  HiTrendingDown, 
+  HiCurrencyDollar,
+  HiClock,
+  HiStar,
+  HiNewspaper
+} from 'react-icons/hi';
+import api from '../services/api';
+import Tabs from '../components/ui/Tabs';
+
+const MarketCalendar = ({ theme = 'light' }) => {
+  const [earnings, setEarnings] = useState([]);
+  const [ipos, setIpos] = useState([]);
+  const [marketStatus, setMarketStatus] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    fetchMarketData();
+  }, []);
+
+  const fetchMarketData = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      console.log('🔄 Fetching market data...');
+
+      // Fetch market data in parallel
+      const [earningsRes, iposRes, statusRes] = await Promise.allSettled([
+        api.get('/stocks/calendar/earnings'),
+        api.get('/stocks/calendar/ipo'),
+        api.get('/stocks/market/status')
+      ]);
+
+      console.log('📊 API Responses:', {
+        earnings: earningsRes.status === 'fulfilled' ? earningsRes.value.data : 'Failed',
+        ipos: iposRes.status === 'fulfilled' ? iposRes.value.data : 'Failed',
+        status: statusRes.status === 'fulfilled' ? statusRes.value.data : 'Failed'
+      });
+
+
+
+      // Handle nested data structure from Finnhub API
+      const earningsData = earningsRes.status === 'fulfilled' 
+        ? (earningsRes.value.data?.earningsCalendar || earningsRes.value.data || [])
+        : [];
+      
+      const iposData = iposRes.status === 'fulfilled' 
+        ? (iposRes.value.data?.ipoCalendar || iposRes.value.data || [])
+        : [];
+      
+      const statusData = statusRes.status === 'fulfilled' 
+        ? statusRes.value.data 
+        : null;
+
+      setEarnings(earningsData);
+      setIpos(iposData);
+      setMarketStatus(statusData);
+
+      console.log('✅ Market data loaded:', {
+        earningsCount: earningsData.length,
+        iposCount: iposData.length,
+        hasStatus: !!statusData
+      });
+    } catch (error) {
+      console.error('❌ Error fetching market data:', error);
+      setError('Failed to fetch market data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getMarketStatusColor = (status) => {
+    if (status?.isOpen) {
+      return 'green';
+    } else {
+      return 'red';
+    }
+  };
+
+  const getMarketStatusText = (status) => {
+    if (status?.isOpen) {
+      return 'Open';
+    } else {
+      return 'Closed';
+    }
+  };
+
+  const formatDate = (dateString) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      weekday: 'short',
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  };
+
+  const formatTime = (timeString) => {
+    if (!timeString) return 'TBD';
+    
+    // Handle Finnhub time codes
+    switch (timeString) {
+      case 'bmo':
+        return 'Before Market Open';
+      case 'dmt':
+        return 'During Market Trading';
+      case 'amc':
+        return 'After Market Close';
+      default:
+        // Handle regular time strings
+        try {
+          return new Date(`2000-01-01T${timeString}`).toLocaleTimeString('en-US', {
+            hour: '2-digit',
+            minute: '2-digit'
+          });
+        } catch {
+          return timeString;
+        }
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center p-8">
+        <div className="text-red-500 text-lg">{error}</div>
+      </div>
+    );
+  }
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="p-6 space-y-6"
+    >
+      {/* Header */}
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+            Market Calendar
+          </h1>
+          <p className={`mt-2 text-lg ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+            Track earnings, IPOs, and market events
+          </p>
+        </div>
+        
+        {/* Market Status */}
+        {marketStatus && (
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
+          >
+            <Card 
+              className={`relative overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-2xl hover:-translate-y-1 rounded-2xl ${
+                theme === 'dark' 
+                  ? 'bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700/50' 
+                  : 'bg-gradient-to-br from-white to-gray-50 border border-gray-200/50'
+              }`}
+              decoration="none"
+            >
+              <div className="absolute top-0 right-0 w-24 h-24 transform translate-x-8 -translate-y-8">
+                <div className={`absolute inset-0 ${
+                  getMarketStatusColor(marketStatus) === 'green' ? 'bg-emerald-500' : 'bg-red-500'
+                } opacity-20 rounded-full blur-2xl`}></div>
+              </div>
+              <div className="relative flex items-center space-x-4">
+                <div className={`p-3 rounded-xl shadow-lg ${
+                  getMarketStatusColor(marketStatus) === 'green'
+                    ? `bg-gradient-to-br from-emerald-500 to-emerald-600 ${
+                        theme === 'dark' ? 'shadow-emerald-500/20' : 'shadow-emerald-500/30'
+                      }`
+                    : `bg-gradient-to-br from-red-500 to-red-600 ${
+                        theme === 'dark' ? 'shadow-red-500/20' : 'shadow-red-500/30'
+                      }`
+                }`}>
+                  <HiClock className="h-6 w-6 text-white" />
+                </div>
+                <div>
+                  <Text className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Market Status</Text>
+                  <div className="flex items-center mt-1">
+                    <Title className={`text-2xl font-bold ${
+                      getMarketStatusColor(marketStatus) === 'green' ? 'text-emerald-500' : 'text-red-500'
+                    }`}>
+                      {getMarketStatusText(marketStatus)}
+                    </Title>
+                    <div className={`w-2 h-2 rounded-full ml-2 ${
+                      getMarketStatusColor(marketStatus) === 'green' 
+                        ? 'bg-emerald-500 animate-pulse' 
+                        : 'bg-red-500'
+                    }`}></div>
+                  </div>
+                </div>
+              </div>
+            </Card>
+          </motion.div>
+        )}
+      </div>
+
+      {/* Animated Tabs */}
+      <div className="h-[40rem] [perspective:1000px] relative flex flex-col max-w-6xl mx-auto w-full items-start justify-start">
+                <Tabs
+          key={theme} // Force re-render when theme changes
+          theme={theme}
+          tabs={[
+            {
+              title: "Earnings",
+              value: "earnings",
+              content: (
+                <div className={`w-full overflow-hidden relative h-full rounded-2xl p-6 backdrop-blur-xl ${
+                  theme === 'dark' 
+                    ? 'bg-gray-950/95 border border-gray-800/50 shadow-2xl' 
+                    : 'bg-gradient-to-br from-blue-50/95 via-indigo-50/95 to-blue-100/95 shadow-lg border border-blue-200/50'
+                }`}>
+                  <div className="flex justify-between items-center mb-6">
+                    <Title className={`text-2xl ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                      Upcoming Earnings
+                    </Title>
+                    <Badge color="blue">{earnings.length} events</Badge>
+                  </div>
+                  
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4 max-h-[30rem] overflow-y-auto">
+                    {earnings.length > 0 ? (
+                      earnings.slice(0, 20).map((earning, index) => (
+                        <div key={index} className={`flex items-center justify-between p-4 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1 backdrop-blur-sm ${
+                          theme === 'dark' 
+                            ? 'bg-gray-900/95 border border-gray-800/50 hover:bg-gray-900/98' 
+                            : 'bg-gradient-to-r from-blue-50/95 to-indigo-50/95 hover:from-blue-50/98 hover:to-indigo-50/98 hover:shadow-lg border border-blue-100/50'
+                        }`}>
+                          <div className="flex items-center gap-3">
+                            <div className={`p-2 rounded-lg ${
+                              theme === 'dark' 
+                                ? 'bg-blue-500/20 border border-blue-500/30' 
+                                : 'bg-blue-100'
+                            }`}>
+                              <HiTrendingUp className={`w-5 h-5 ${
+                                theme === 'dark' ? 'text-blue-400' : 'text-blue-600'
+                              }`} />
+                            </div>
+                            <div>
+                              <div className="flex items-center gap-2 mb-1">
+                                <div className={`font-semibold text-lg ${
+                                  theme === 'dark' ? 'text-white' : 'text-gray-900'
+                                }`}>{earning.symbol}</div>
+                                <Badge color="blue" className="text-xs">{earning.quarter}</Badge>
+                              </div>
+                              <div className={`text-sm mb-1 ${
+                                theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
+                              }`}>
+                                {earning.name || earning.company}
+                              </div>
+                              <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+                                <span className="flex items-center gap-1">
+                                  <HiCalendar className="w-3 h-3" />
+                                  {formatDate(earning.date)}
+                                </span>
+                                <span className="flex items-center gap-1">
+                                  <HiClock className="w-3 h-3" />
+                                  {formatTime(earning.hour)}
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                          <div className="text-right">
+                            <div className={`text-xs ${
+                              theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                            }`}>Est. EPS</div>
+                            <div className={`font-semibold text-sm ${
+                              theme === 'dark' ? 'text-white' : 'text-gray-900'
+                            }`}>
+                              {earning.estimate ? `$${earning.estimate}` : 'N/A'}
+                            </div>
+                          </div>
+                        </div>
+                      ))
+                    ) : (
+                      <div className={`col-span-full text-center py-8 ${
+                        theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                      }`}>
+                        No upcoming earnings found
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ),
+            },
+            {
+              title: "IPOs",
+              value: "ipos",
+              content: (
+                <div className={`w-full overflow-hidden relative h-full rounded-2xl p-6 backdrop-blur-xl ${
+                  theme === 'dark' 
+                    ? 'bg-gray-800/95 border border-gray-600/50 shadow-2xl' 
+                    : 'bg-gradient-to-br from-emerald-50/95 via-green-50/95 to-teal-50/95 shadow-lg border border-emerald-200/50'
+                }`}>
+                  <div className="flex justify-between items-center mb-6">
+                    <Title className={`text-2xl ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                      Upcoming IPOs
+                    </Title>
+                    <Badge color="green">{ipos.length} events</Badge>
+                  </div>
+                  
+                  <div className="grid grid-cols-1 gap-4 max-h-[30rem] overflow-y-auto">
+                    {ipos.length > 0 ? (
+                      ipos.slice(0, 20).map((ipo, index) => (
+                        <div key={index} className={`flex items-center justify-between p-4 rounded-lg shadow-sm hover:shadow-md transition-all duration-300 hover:-translate-y-1 backdrop-blur-sm ${
+                          theme === 'dark' 
+                            ? 'bg-gray-700/95 border border-gray-600/50 hover:bg-gray-700/98' 
+                            : 'bg-gradient-to-r from-emerald-50/95 to-teal-50/95 hover:from-emerald-50/98 hover:to-teal-50/98 hover:shadow-lg border border-emerald-100/50'
+                        }`}>
+                          <div className="flex items-center gap-3">
+                            <div className={`p-2 rounded-lg ${
+                              theme === 'dark' 
+                                ? 'bg-green-500/20 border border-green-500/30' 
+                                : 'bg-green-100'
+                            }`}>
+                              <HiStar className={`w-5 h-5 ${
+                                theme === 'dark' ? 'text-green-400' : 'text-green-600'
+                              }`} />
+                            </div>
+                            <div>
+                              <div className="flex items-center gap-2 mb-1">
+                                <div className={`font-semibold text-lg ${
+                                  theme === 'dark' ? 'text-white' : 'text-gray-900'
+                                }`}>{ipo.symbol}</div>
+                                <Badge color="green" className="text-xs">IPO</Badge>
+                              </div>
+                              <div className={`text-sm mb-1 ${
+                                theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
+                              }`}>
+                                {ipo.companyName}
+                              </div>
+                              <div className="flex items-center gap-3 text-xs text-gray-500 dark:text-gray-400">
+                                <span className="flex items-center gap-1">
+                                  <HiCalendar className="w-3 h-3" />
+                                  {formatDate(ipo.date)}
+                                </span>
+                                <span className="flex items-center gap-1">
+                                  <HiCurrencyDollar className="w-3 h-3" />
+                                  ${ipo.priceLow} - ${ipo.priceHigh}
+                                </span>
+                              </div>
+                            </div>
+                          </div>
+                          <div className="text-right">
+                            <div className={`text-xs ${
+                              theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                            }`}>Shares</div>
+                            <div className={`font-semibold text-sm ${
+                              theme === 'dark' ? 'text-white' : 'text-gray-900'
+                            }`}>
+                              {ipo.numberOfShares ? (ipo.numberOfShares / 1e6).toFixed(1) + 'M' : 'N/A'}
+                            </div>
+                          </div>
+                        </div>
+                      ))
+                    ) : (
+                      <div className={`col-span-full text-center py-8 ${
+                        theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                      }`}>
+                        No upcoming IPOs found
+                      </div>
+                    )}
+                  </div>
+                </div>
+              ),
+            },
+            {
+              title: "Market Events",
+              value: "events",
+              content: (
+                <div className={`w-full overflow-hidden relative h-full rounded-2xl p-6 backdrop-blur-xl ${
+                  theme === 'dark' 
+                    ? 'bg-gradient-to-br from-indigo-900/95 via-purple-900/95 to-pink-900/95 border border-indigo-700/50 shadow-2xl' 
+                    : 'bg-gradient-to-br from-indigo-50/95 via-purple-50/95 to-pink-50/95 shadow-lg border border-indigo-200/50'
+                }`}>
+                  <Title className={`text-2xl mb-6 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                    Market Events
+                  </Title>
+                  <div className="space-y-4">
+                    <div className={`flex items-center justify-between p-4 rounded-lg shadow-sm transition-all duration-300 hover:-translate-y-1 backdrop-blur-sm ${
+                      theme === 'dark' 
+                        ? 'bg-gradient-to-r from-indigo-800/95 to-purple-800/95 border border-indigo-600/50 hover:from-indigo-800/98 hover:to-purple-800/98' 
+                        : 'bg-gradient-to-r from-indigo-100/95 to-purple-100/95 hover:from-indigo-100/98 hover:to-purple-100/98 hover:shadow-lg'
+                    }`}>
+                      <div className="flex items-center gap-3">
+                        <div className={`p-2 rounded-lg ${
+                          theme === 'dark' 
+                            ? 'bg-green-500/20 border border-green-500/30' 
+                            : 'bg-green-100'
+                        }`}>
+                          <HiTrendingUp className={`w-5 h-5 ${
+                            theme === 'dark' ? 'text-green-400' : 'text-green-500'
+                          }`} />
+                        </div>
+                        <div>
+                          <div className={`font-semibold ${
+                            theme === 'dark' ? 'text-white' : 'text-gray-900'
+                          }`}>Market Open</div>
+                          <div className={`text-sm ${
+                            theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                          }`}>9:30 AM ET</div>
+                        </div>
+                      </div>
+                      <Badge color="green">Daily</Badge>
+                    </div>
+                    
+                    <div className={`flex items-center justify-between p-4 rounded-lg shadow-sm transition-all duration-300 hover:-translate-y-1 backdrop-blur-sm ${
+                      theme === 'dark' 
+                        ? 'bg-gradient-to-r from-purple-800/95 to-pink-800/95 border border-purple-600/50 hover:from-purple-800/98 hover:to-pink-800/98' 
+                        : 'bg-gradient-to-r from-purple-100/95 to-pink-100/95 hover:from-purple-100/98 hover:to-pink-100/98 hover:shadow-lg'
+                    }`}>
+                      <div className="flex items-center gap-3">
+                        <div className={`p-2 rounded-lg ${
+                          theme === 'dark' 
+                            ? 'bg-red-500/20 border border-red-500/30' 
+                            : 'bg-red-100'
+                        }`}>
+                          <HiTrendingDown className={`w-5 h-5 ${
+                            theme === 'dark' ? 'text-red-400' : 'text-red-500'
+                          }`} />
+                        </div>
+                        <div>
+                          <div className={`font-semibold ${
+                            theme === 'dark' ? 'text-white' : 'text-gray-900'
+                          }`}>Market Close</div>
+                          <div className={`text-sm ${
+                            theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                          }`}>4:00 PM ET</div>
+                        </div>
+                      </div>
+                      <Badge color="red">Daily</Badge>
+                    </div>
+                    
+                    <div className={`flex items-center justify-between p-4 rounded-lg shadow-sm transition-all duration-300 hover:-translate-y-1 backdrop-blur-sm ${
+                      theme === 'dark' 
+                        ? 'bg-gradient-to-r from-pink-800/95 to-rose-800/95 border border-pink-600/50 hover:from-pink-800/98 hover:to-rose-800/98' 
+                        : 'bg-gradient-to-r from-pink-100/95 to-rose-100/95 hover:from-pink-100/98 hover:to-rose-100/98 hover:shadow-lg'
+                    }`}>
+                      <div className="flex items-center gap-3">
+                        <div className={`p-2 rounded-lg ${
+                          theme === 'dark' 
+                            ? 'bg-blue-500/20 border border-blue-500/30' 
+                            : 'bg-blue-100'
+                        }`}>
+                          <HiCurrencyDollar className={`w-5 h-5 ${
+                            theme === 'dark' ? 'text-blue-400' : 'text-blue-500'
+                          }`} />
+                        </div>
+                        <div>
+                          <div className={`font-semibold ${
+                            theme === 'dark' ? 'text-white' : 'text-gray-900'
+                          }`}>Fed Meeting</div>
+                          <div className={`text-sm ${
+                            theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                          }`}>Next: TBD</div>
+                        </div>
+                      </div>
+                      <Badge color="blue">Monthly</Badge>
+                    </div>
+                  </div>
+                </div>
+              ),
+            },
+          ]}
+          containerClassName="mb-8"
+          activeTabClassName={`${theme === 'dark' ? 'bg-gray-700 border-gray-600' : 'bg-blue-500'} shadow-lg`}
+          tabClassName={`${theme === 'dark' ? 'text-gray-400 hover:text-white' : 'text-gray-600 hover:text-gray-900'} transition-all duration-200`}
+        />
+      </div>
+    </motion.div>
+  );
+};
+
+export default MarketCalendar; 
\ No newline at end of file
diff --git a/src/pages/News.jsx b/src/pages/News.jsx
new file mode 100644
index 0000000..70a0cd5
--- /dev/null
+++ b/src/pages/News.jsx
@@ -0,0 +1,588 @@
+import React, { useState, useEffect } from 'react';
+import { HiOutlineNewspaper, HiOutlineClock, HiOutlineUser, HiOutlineTrendingUp, HiOutlineTrendingDown, HiOutlineEye, HiOutlineRefresh } from 'react-icons/hi';
+import axios from 'axios';
+
+const News = () => {
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+  const [selectedCategory, setSelectedCategory] = useState('all');
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isLoading, setIsLoading] = useState(false);
+  const [lastUpdated, setLastUpdated] = useState(null);
+  const [newsArticles, setNewsArticles] = useState([]);
+  const [error, setError] = useState(null);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [hasMore, setHasMore] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+
+  // Initialize theme and listen for changes
+  useEffect(() => {
+    const handleThemeChange = (e) => {
+      const newTheme = e.detail?.theme || e.detail || localStorage.getItem('theme') || 'light';
+      console.log('News: Theme change detected:', newTheme);
+      setTheme(newTheme);
+      document.documentElement.classList.toggle('dark', newTheme === 'dark');
+    };
+
+    // Set initial theme
+    const savedTheme = localStorage.getItem('theme') || 'light';
+    setTheme(savedTheme);
+    document.documentElement.classList.toggle('dark', savedTheme === 'dark');
+
+    // Listen to theme change events
+    window.addEventListener('themeChange', handleThemeChange);
+    window.addEventListener('storage', () => {
+      const storedTheme = localStorage.getItem('theme') || 'light';
+      handleThemeChange({ detail: { theme: storedTheme } });
+    });
+    document.addEventListener('themeChanged', handleThemeChange);
+
+    return () => {
+      window.removeEventListener('themeChange', handleThemeChange);
+      window.removeEventListener('storage', handleThemeChange);
+      document.removeEventListener('themeChanged', handleThemeChange);
+    };
+  }, []);
+
+  // Fallback news data
+  const fallbackNews = [
+    {
+      id: 1,
+      title: "Federal Reserve Signals Potential Rate Cuts in 2024",
+      category: "Market News",
+      date: "Jan 20, 2024",
+      author: "Financial Times",
+      readTime: "5 min read",
+      image: "from-blue-500 to-purple-600",
+      summary: "The Federal Reserve's latest meeting minutes indicate a more dovish stance, with officials discussing potential interest rate reductions in the coming months.",
+      trending: "up",
+      views: "2.4k",
+      url: "#"
+    },
+    {
+      id: 2,
+      title: "Tech Giants Report Strong Q4 Earnings",
+      category: "Earnings",
+      date: "Jan 19, 2024",
+      author: "Reuters",
+      readTime: "4 min read",
+      image: "from-green-500 to-blue-600",
+      summary: "Major technology companies exceeded analyst expectations in their fourth-quarter earnings reports, driven by strong cloud services and AI investments.",
+      trending: "up",
+      views: "1.8k",
+      url: "#"
+    },
+    {
+      id: 3,
+      title: "Oil Prices Volatile Amid Geopolitical Tensions",
+      category: "Commodities",
+      date: "Jan 18, 2024",
+      author: "Bloomberg",
+      readTime: "6 min read",
+      image: "from-yellow-500 to-orange-600",
+      summary: "Crude oil prices experienced significant volatility as tensions in key oil-producing regions intensified, affecting global energy markets.",
+      trending: "down",
+      views: "1.2k",
+      url: "#"
+    },
+    {
+      id: 4,
+      title: "Cryptocurrency Market Shows Signs of Recovery",
+      category: "Crypto",
+      date: "Jan 17, 2024",
+      author: "CoinDesk",
+      readTime: "7 min read",
+      image: "from-purple-500 to-pink-600",
+      summary: "Bitcoin and other major cryptocurrencies have shown strong recovery signals, with institutional adoption continuing to grow.",
+      trending: "up",
+      views: "3.1k",
+      url: "#"
+    },
+    {
+      id: 5,
+      title: "Housing Market Shows Mixed Signals",
+      category: "Real Estate",
+      date: "Jan 16, 2024",
+      author: "Wall Street Journal",
+      readTime: "5 min read",
+      image: "from-indigo-500 to-purple-600",
+      summary: "Recent housing market data reveals a complex picture, with some regions showing strength while others face challenges from high interest rates.",
+      trending: "down",
+      views: "956",
+      url: "#"
+    },
+    {
+      id: 6,
+      title: "ESG Investing Continues to Gain Momentum",
+      category: "ESG",
+      date: "Jan 15, 2024",
+      author: "Financial News",
+      readTime: "6 min read",
+      image: "from-teal-500 to-green-600",
+      summary: "Environmental, Social, and Governance (ESG) investing strategies are attracting record inflows as investors prioritize sustainability and responsible business practices.",
+      trending: "up",
+      views: "1.5k",
+      url: "#"
+    }
+  ];
+
+  // Fetch news from Finnhub API with pagination
+  const fetchNews = async (page = 1, append = false) => {
+    try {
+      if (page === 1) {
+        setIsLoading(true);
+      } else {
+        setIsLoadingMore(true);
+      }
+      setError(null);
+      
+      // Get Finnhub API key from environment variables
+      const FINNHUB_API_KEY = import.meta.env.VITE_FINNHUB_API_KEY;
+      
+      console.log('🔍 Checking for Finnhub API key...');
+      console.log('API Key exists:', !!FINNHUB_API_KEY);
+      
+      if (!FINNHUB_API_KEY) {
+        console.warn('⚠️ Finnhub API key not found. Using fallback data.');
+        const paginatedFallback = paginateData(fallbackNews, page, 12);
+        setNewsArticles(paginatedFallback.articles);
+        setTotalPages(paginatedFallback.totalPages);
+        setHasMore(paginatedFallback.hasMore);
+        setLastUpdated(new Date());
+        setIsLoading(false);
+        setIsLoadingMore(false);
+        return;
+      }
+
+      console.log('🚀 Fetching news from Finnhub API...');
+
+      // Fetch general market news with pagination
+      const response = await axios.get(`https://finnhub.io/api/v1/news?category=general&token=${FINNHUB_API_KEY}&minId=0`);
+      
+      console.log('📡 API Response received:', response.data?.length || 0, 'articles');
+      
+      if (response.data && Array.isArray(response.data)) {
+        console.log('✅ Transforming API data...');
+        // Transform the data to match our component structure
+        const transformedNews = response.data.map((article, index) => ({
+          id: article.id || index,
+          title: article.headline || 'No title available',
+          category: article.category || 'Market News',
+          date: new Date(article.datetime * 1000).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+          }),
+          author: article.source || 'Financial News',
+          readTime: `${Math.max(1, Math.floor(article.headline?.length / 200))} min read`,
+          image: getRandomGradient(),
+          summary: article.summary || 'No summary available',
+          trending: Math.random() > 0.5 ? 'up' : 'down',
+          views: `${Math.floor(Math.random() * 5) + 1}k`,
+          url: article.url || '#'
+        }));
+        
+        const paginatedData = paginateData(transformedNews, page, 12);
+        
+        if (append) {
+          setNewsArticles(prev => [...prev, ...paginatedData.articles]);
+        } else {
+          setNewsArticles(paginatedData.articles);
+        }
+        
+        setTotalPages(paginatedData.totalPages);
+        setHasMore(paginatedData.hasMore);
+        setCurrentPage(page);
+        setLastUpdated(new Date());
+        console.log('🎉 Successfully loaded', paginatedData.articles.length, 'articles from Finnhub API (page', page, ')');
+      } else {
+        throw new Error('Invalid response format from API');
+      }
+    } catch (err) {
+      console.error('❌ Error fetching news:', err);
+      setError(err.message || 'Failed to fetch news. Please try again later.');
+      // Use fallback data on error
+      console.log('🔄 Using fallback data due to error');
+      const paginatedFallback = paginateData(fallbackNews, page, 12);
+      setNewsArticles(paginatedFallback.articles);
+      setTotalPages(paginatedFallback.totalPages);
+      setHasMore(paginatedFallback.hasMore);
+    } finally {
+      setIsLoading(false);
+      setIsLoadingMore(false);
+    }
+  };
+
+  // Pagination helper function
+  const paginateData = (data, page, itemsPerPage) => {
+    const startIndex = (page - 1) * itemsPerPage;
+    const endIndex = startIndex + itemsPerPage;
+    const articles = data.slice(startIndex, endIndex);
+    const totalPages = Math.ceil(data.length / itemsPerPage);
+    const hasMore = page < totalPages;
+    
+    return {
+      articles,
+      totalPages,
+      hasMore,
+      currentPage: page
+    };
+  };
+
+  // Get random gradient for article images
+  const getRandomGradient = () => {
+    const gradients = [
+      'from-blue-500 to-purple-600',
+      'from-green-500 to-blue-600',
+      'from-yellow-500 to-orange-600',
+      'from-purple-500 to-pink-600',
+      'from-indigo-500 to-purple-600',
+      'from-teal-500 to-green-600',
+      'from-red-500 to-pink-600',
+      'from-orange-500 to-red-600'
+    ];
+    return gradients[Math.floor(Math.random() * gradients.length)];
+  };
+
+  // Initialize news data
+  useEffect(() => {
+    if (newsArticles.length === 0) {
+      fetchNews();
+    }
+  }, []);
+
+  // Generate categories from news data
+  const generateCategories = () => {
+    const categoryCounts = {};
+    newsArticles.forEach(article => {
+      const category = article.category;
+      categoryCounts[category] = (categoryCounts[category] || 0) + 1;
+    });
+    
+    const categories = [
+      { id: 'all', name: 'All News', count: newsArticles.length }
+    ];
+    
+    Object.entries(categoryCounts).forEach(([category, count]) => {
+      categories.push({
+        id: category.toLowerCase().replace(/\s+/g, '-'),
+        name: category,
+        count: count
+      });
+    });
+    
+    return categories;
+  };
+
+  const categories = generateCategories();
+
+  // Filter articles based on category and search
+  const filteredArticles = newsArticles.filter(article => {
+    const matchesCategory = selectedCategory === 'all' || 
+      article.category.toLowerCase().includes(selectedCategory.replace('-', ' '));
+    const matchesSearch = article.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      article.summary.toLowerCase().includes(searchQuery.toLowerCase());
+    return matchesCategory && matchesSearch;
+  });
+
+  // Get category color styling
+  const getCategoryColor = (category) => {
+    switch (category) {
+      case 'Market News':
+        return 'text-blue-600 bg-blue-100 dark:text-blue-400 dark:bg-blue-900/20';
+      case 'Earnings':
+        return 'text-green-600 bg-green-100 dark:text-green-400 dark:bg-green-900/20';
+      case 'Commodities':
+        return 'text-yellow-600 bg-yellow-100 dark:text-yellow-400 dark:bg-yellow-900/20';
+      case 'Crypto':
+        return 'text-purple-600 bg-purple-100 dark:text-purple-400 dark:bg-purple-900/20';
+      case 'Real Estate':
+        return 'text-indigo-600 bg-indigo-100 dark:text-indigo-400 dark:bg-indigo-900/20';
+      case 'ESG':
+        return 'text-teal-600 bg-teal-100 dark:text-teal-400 dark:bg-teal-900/20';
+      default:
+        return 'text-gray-600 bg-gray-100 dark:text-gray-400 dark:bg-gray-900/20';
+    }
+  };
+
+  // Handle refresh
+  const handleRefresh = () => {
+    setCurrentPage(1);
+    fetchNews(1, false);
+  };
+
+  // Handle load more
+  const handleLoadMore = () => {
+    if (hasMore && !isLoadingMore) {
+      fetchNews(currentPage + 1, true);
+    }
+  };
+
+  return (
+    <div className={`min-h-screen ${theme === 'dark' ? 'bg-[#171717] text-white' : 'bg-white text-gray-900'}`}>
+      {/* Header */}
+      <div className={`sticky top-0 z-40 ${theme === 'dark' ? 'bg-[#171717] border-b border-gray-800' : 'bg-white border-b border-gray-200'}`}>
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex items-center justify-between h-16">
+            <div className="flex items-center space-x-4">
+              <div className={`p-2 rounded-lg ${theme === 'dark' ? 'bg-gray-800' : 'bg-gray-100'}`}>
+                <HiOutlineNewspaper className={`w-6 h-6 ${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`} />
+              </div>
+              <div>
+                <h1 className={`text-2xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                  Financial News
+                </h1>
+                <p className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                  Stay updated with the latest market insights
+                </p>
+              </div>
+            </div>
+            
+            {/* Search Bar */}
+            <div className="flex-1 max-w-md ml-8">
+              <div className={`relative ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} rounded-lg border ${theme === 'dark' ? 'border-gray-700' : 'border-gray-300'}`}>
+                <input
+                  type="text"
+                  placeholder="Search news..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className={`w-full pl-10 pr-4 py-2 bg-transparent border-0 focus:outline-none focus:ring-0 ${
+                    theme === 'dark' ? 'text-white placeholder-gray-400' : 'text-gray-900 placeholder-gray-500'
+                  }`}
+                />
+                <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+                  <svg className={`w-5 h-5 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+                  </svg>
+                </div>
+              </div>
+            </div>
+
+            {/* Refresh Button and Last Updated */}
+            <div className="flex items-center space-x-4">
+              {lastUpdated && (
+                <div className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                  Last updated: {lastUpdated.toLocaleTimeString()}
+                </div>
+              )}
+              <button
+                onClick={handleRefresh}
+                disabled={isLoading}
+                className={`p-2 rounded-lg transition-all duration-200 ${
+                  isLoading
+                    ? 'opacity-50 cursor-not-allowed'
+                    : 'hover:scale-105'
+                } ${
+                  theme === 'dark'
+                    ? 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+                    : 'bg-white text-gray-600 hover:bg-gray-100 border border-gray-300'
+                }`}
+                title="Refresh news"
+              >
+                <HiOutlineRefresh className={`w-5 h-5 ${isLoading ? 'animate-spin' : ''}`} />
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Loading State */}
+        {isLoading && (
+          <div className="text-center py-12">
+            <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500 mx-auto mb-4"></div>
+            <h3 className={`text-xl font-semibold mb-2 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+              Loading latest news...
+            </h3>
+            <p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+              Fetching the most recent financial news
+            </p>
+          </div>
+        )}
+
+        {/* Error State */}
+        {error && !isLoading && (
+          <div className="text-center py-12">
+            <div className={`w-16 h-16 mx-auto mb-4 rounded-full flex items-center justify-center ${
+              theme === 'dark' ? 'bg-red-900/20' : 'bg-red-100'
+            }`}>
+              <svg className="w-8 h-8 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
+              </svg>
+            </div>
+            <h3 className={`text-xl font-semibold mb-2 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+              API Error - Using Fallback Data
+            </h3>
+            <p className={`mb-4 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+              {error}
+            </p>
+            <button
+              onClick={fetchNews}
+              className={`px-4 py-2 rounded-lg font-medium transition-colors ${
+                theme === 'dark'
+                  ? 'bg-blue-600 text-white hover:bg-blue-700'
+                  : 'bg-blue-600 text-white hover:bg-blue-700'
+              }`}
+            >
+              Try Again
+            </button>
+          </div>
+        )}
+
+        {/* Categories */}
+        {!isLoading && (
+          <div className="mb-8">
+            <div className="flex flex-wrap gap-2">
+              {categories.map((category) => (
+                <button
+                  key={category.id}
+                  onClick={() => setSelectedCategory(category.id)}
+                  className={`px-4 py-2 rounded-full text-sm font-medium transition-all duration-200 ${
+                    selectedCategory === category.id
+                      ? 'bg-blue-600 text-white shadow-lg'
+                      : theme === 'dark'
+                        ? 'bg-gray-800 text-gray-300 hover:bg-gray-700'
+                        : 'bg-white text-gray-700 hover:bg-gray-100 border border-gray-300'
+                  }`}
+                >
+                  {category.name} ({category.count})
+                </button>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* News Grid */}
+        {!isLoading && (
+          <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+            {filteredArticles.map((article, index) => (
+            <div
+              key={article.id}
+              className={`group cursor-pointer ${theme === 'dark' ? 'bg-gray-800' : 'bg-white'} rounded-xl shadow-lg border ${
+                theme === 'dark' ? 'border-gray-700' : 'border-gray-200'
+              } overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-1`}
+              onClick={() => window.open(article.url, '_blank')}
+            >
+              {/* Image */}
+              <div className={`h-48 bg-gradient-to-br ${article.image} relative overflow-hidden`}>
+                <div className="absolute inset-0 bg-black/20"></div>
+                <div className="absolute top-4 left-4">
+                  <span className={`px-3 py-1 rounded-full text-xs font-medium ${getCategoryColor(article.category)}`}>
+                    {article.category}
+                  </span>
+                </div>
+                <div className="absolute top-4 right-4 flex items-center space-x-2">
+                  {article.trending === 'up' ? (
+                    <HiOutlineTrendingUp className="w-5 h-5 text-green-400" />
+                  ) : (
+                    <HiOutlineTrendingDown className="w-5 h-5 text-red-400" />
+                  )}
+                  <span className={`text-xs font-medium ${
+                    article.trending === 'up' ? 'text-green-400' : 'text-red-400'
+                  }`}>
+                    {article.trending === 'up' ? 'Trending' : 'Declining'}
+                  </span>
+                </div>
+              </div>
+
+              {/* Content */}
+              <div className="p-6">
+                <h3 className={`text-xl font-bold mb-3 group-hover:text-blue-600 transition-colors duration-200 ${
+                  theme === 'dark' ? 'text-white' : 'text-gray-900'
+                }`}>
+                  {article.title}
+                </h3>
+                <p className={`mb-4 line-clamp-3 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-600'}`}>
+                  {article.summary}
+                </p>
+
+                {/* Meta */}
+                <div className="flex items-center justify-between text-sm">
+                  <div className={`flex items-center space-x-4 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`}>
+                    <div className="flex items-center space-x-1">
+                      <HiOutlineUser className="w-4 h-4" />
+                      <span>{article.author}</span>
+                    </div>
+                    <div className="flex items-center space-x-1">
+                      <HiOutlineClock className="w-4 h-4" />
+                      <span>{article.readTime}</span>
+                    </div>
+                  </div>
+                  <div className={`flex items-center space-x-1 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`}>
+                    <HiOutlineEye className="w-4 h-4" />
+                    <span>{article.views}</span>
+                  </div>
+                </div>
+
+                {/* Date */}
+                <div className={`mt-3 text-xs ${theme === 'dark' ? 'text-gray-500' : 'text-gray-400'}`}>
+                  {article.date}
+                </div>
+              </div>
+            </div>
+          ))}
+          </div>
+        )}
+
+        {/* No Results */}
+        {!isLoading && filteredArticles.length === 0 && (
+          <div className="text-center py-12">
+            <HiOutlineNewspaper className={`w-16 h-16 mx-auto mb-4 ${theme === 'dark' ? 'text-gray-600' : 'text-gray-400'}`} />
+            <h3 className={`text-xl font-semibold mb-2 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+              No news found
+            </h3>
+            <p className={`${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+              Try adjusting your search or category filters
+            </p>
+          </div>
+        )}
+
+        {/* Pagination */}
+        {!isLoading && filteredArticles.length > 0 && (
+          <div className="mt-8 flex flex-col items-center space-y-4">
+            {/* Load More Button */}
+            {hasMore && (
+              <button
+                onClick={handleLoadMore}
+                disabled={isLoadingMore}
+                className={`px-6 py-3 rounded-lg font-medium transition-all duration-200 ${
+                  isLoadingMore
+                    ? 'opacity-50 cursor-not-allowed'
+                    : 'hover:scale-105'
+                } ${
+                  theme === 'dark'
+                    ? 'bg-blue-600 text-white hover:bg-blue-700'
+                    : 'bg-blue-600 text-white hover:bg-blue-700'
+                }`}
+              >
+                {isLoadingMore ? (
+                  <div className="flex items-center space-x-2">
+                    <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
+                    <span>Loading...</span>
+                  </div>
+                ) : (
+                  'Load More Articles'
+                )}
+              </button>
+            )}
+
+            {/* Page Info */}
+            <div className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+              Showing {newsArticles.length} articles
+              {totalPages > 1 && ` • Page ${currentPage} of ${totalPages}`}
+            </div>
+
+            {/* End of Results */}
+            {!hasMore && (
+              <div className={`text-sm ${theme === 'dark' ? 'text-gray-500' : 'text-gray-400'}`}>
+                You've reached the end of all available articles
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default News; 
\ No newline at end of file

From 4a2e96b770f56225bd1441b71bf0f0beaeb070e5 Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 13:54:17 +0530
Subject: [PATCH 05/13] feat: add custom UI components including animated tabs
 and utility functions

---
 src/components/ui/Tabs.jsx | 115 +++++++++++++++++++++++++++++++++++++
 src/config/supabase.js     |  13 +++++
 src/lib/utils.js           |   6 ++
 3 files changed, 134 insertions(+)
 create mode 100644 src/components/ui/Tabs.jsx
 create mode 100644 src/config/supabase.js
 create mode 100644 src/lib/utils.js

diff --git a/src/components/ui/Tabs.jsx b/src/components/ui/Tabs.jsx
new file mode 100644
index 0000000..6444ad7
--- /dev/null
+++ b/src/components/ui/Tabs.jsx
@@ -0,0 +1,115 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { motion } from "motion/react";
+import { cn } from "../../lib/utils";
+
+const Tabs = ({
+  tabs: propTabs,
+  containerClassName,
+  activeTabClassName,
+  tabClassName,
+  contentClassName,
+  theme = 'light',
+}) => {
+  const currentTheme = theme;
+  const [active, setActive] = useState(propTabs[0]);
+  const [tabs, setTabs] = useState(propTabs);
+
+  // Force re-render when theme changes
+  useEffect(() => {
+    setTabs([...propTabs]);
+  }, [theme, propTabs]);
+
+  const moveSelectedTabToTop = (idx) => {
+    const newTabs = [...propTabs];
+    const selectedTab = newTabs.splice(idx, 1);
+    newTabs.unshift(selectedTab[0]);
+    setTabs(newTabs);
+    setActive(newTabs[0]);
+  };
+
+  const [hovering, setHovering] = useState(false);
+
+  return (
+    <>
+      <div
+        className={cn(
+          "flex flex-row items-center justify-start [perspective:1000px] relative overflow-auto sm:overflow-visible no-visible-scrollbar max-w-full w-full",
+          containerClassName
+        )}
+      >
+        {propTabs.map((tab, idx) => (
+          <button
+            key={tab.title}
+            onClick={() => {
+              moveSelectedTabToTop(idx);
+            }}
+            onMouseEnter={() => setHovering(true)}
+            onMouseLeave={() => setHovering(false)}
+            className={cn("relative px-4 py-2 rounded-full", tabClassName)}
+            style={{
+              transformStyle: "preserve-3d",
+            }}
+          >
+            {active.value === tab.value && (
+              <motion.div
+                layoutId="clickedbutton"
+                transition={{ type: "spring", bounce: 0.3, duration: 0.6 }}
+                className={cn(
+                  "absolute inset-0 rounded-full",
+                  activeTabClassName
+                )}
+              />
+            )}
+
+            <span className={`relative block ${currentTheme === 'dark' ? 'text-white' : 'text-black'}`}>
+              {tab.title}
+            </span>
+          </button>
+        ))}
+      </div>
+      <FadeInDiv
+        tabs={tabs}
+        active={active}
+        key={active.value}
+        hovering={hovering}
+        className={cn("mt-8", contentClassName)}
+      />
+    </>
+  );
+};
+
+const FadeInDiv = ({
+  className,
+  tabs,
+  hovering,
+}) => {
+  const isActive = (tab) => {
+    return tab.value === tabs[0].value;
+  };
+  return (
+    <div className="relative w-full h-full">
+      {tabs.map((tab, idx) => (
+        <motion.div
+          key={tab.value}
+          layoutId={tab.value}
+          style={{
+            scale: 1 - idx * 0.1,
+            top: hovering ? idx * -50 : 0,
+            zIndex: -idx,
+            opacity: idx < 3 ? 1 - idx * 0.1 : 0,
+          }}
+          animate={{
+            y: isActive(tab) ? [0, 40, 0] : 0,
+          }}
+          className={cn("w-full h-full absolute top-0 left-0", className)}
+        >
+          {tab.content}
+        </motion.div>
+      ))}
+    </div>
+  );
+};
+
+export default Tabs; 
\ No newline at end of file
diff --git a/src/config/supabase.js b/src/config/supabase.js
new file mode 100644
index 0000000..4109244
--- /dev/null
+++ b/src/config/supabase.js
@@ -0,0 +1,13 @@
+import { createClient } from '@supabase/supabase-js';
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
+
+if (!supabaseUrl || !supabaseAnonKey) {
+  console.warn('VITE_SUPABASE_URL or VITE_SUPABASE_ANON_KEY environment variables are not set. Authentication will not work.');
+}
+
+export const supabase = createClient(
+  supabaseUrl || 'https://example.supabase.co',
+  supabaseAnonKey || 'demo-key'
+); 
\ No newline at end of file
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 0000000..42f72ba
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+ 
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+} 
\ No newline at end of file

From 8aad16a54edb96ca9f6f816307ab13447e100a6d Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 13:54:44 +0530
Subject: [PATCH 06/13] feat: update existing pages with improved theme support
 and white backgrounds

---
 src/pages/Dashboard.jsx   |   72 ++-
 src/pages/Portfolio.jsx   | 1198 ++++++++++++++++++++++---------------
 src/pages/StockDetail.jsx |  377 +++++++++---
 src/pages/Watchlist.jsx   |  765 ++++++++++++++---------
 4 files changed, 1539 insertions(+), 873 deletions(-)

diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx
index 497e3ba..7fd2a46 100644
--- a/src/pages/Dashboard.jsx
+++ b/src/pages/Dashboard.jsx
@@ -2,17 +2,11 @@ import React, { useState, useEffect } from 'react';
 import { motion } from 'framer-motion';
 import { AreaChart, Card, Title, Badge, TabGroup, TabList, Tab } from '@tremor/react';
 import { HiTrendingUp, HiTrendingDown, HiCurrencyDollar, HiChartPie, HiClock } from 'react-icons/hi';
-import axios from 'axios';
 import PortfolioAnalytics from '../components/dashboard/PortfolioAnalytics';
 import StockDetail from '../components/dashboard/StockDetail';
+import api from '../services/api';
 
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://portfolio-tracker-backend-y7ne.onrender.com/api';
 
-// Create axios instance with base URL
-const api = axios.create({
-  baseURL: API_BASE_URL,
-  timeout: 10000
-});
 
 const containerVariants = {
   hidden: { opacity: 0 },
@@ -128,7 +122,7 @@ export default function Dashboard({ theme: propTheme }) {
 
   const fetchStocks = async () => {
     try {
-      console.log('Fetching stocks from:', API_BASE_URL);
+      console.log('Fetching stocks from API');
       const response = await api.get('/stocks');
       console.log('Stocks fetched successfully:', response.data);
       setStocks(response.data);
@@ -481,19 +475,67 @@ export default function Dashboard({ theme: propTheme }) {
           <div className="flex justify-between items-center mb-4">
             <TabGroup 
               defaultIndex={1}
-              className="mb-4"
+              className="mb-4 [&>div]:border-none"
               onIndexChange={(index) => {
                 const periods = ['1D', '1W', '1M', '3M', '1Y', 'ALL'];
                 setSelectedPeriod(periods[index]);
               }}
             >
               <TabList className={theme === 'dark' ? 'text-white' : ''}>
-                <Tab className={theme === 'dark' ? 'text-white hover:text-blue-400' : ''}>1D</Tab>
-                <Tab className={theme === 'dark' ? 'text-white hover:text-blue-400' : ''}>1W</Tab>
-                <Tab className={theme === 'dark' ? 'text-white hover:text-blue-400' : ''}>1M</Tab>
-                <Tab className={theme === 'dark' ? 'text-white hover:text-blue-400' : ''}>3M</Tab>
-                <Tab className={theme === 'dark' ? 'text-white hover:text-blue-400' : ''}>1Y</Tab>
-                <Tab className={theme === 'dark' ? 'text-white hover:text-blue-400' : ''}>ALL</Tab>
+                <Tab className={`px-3 py-1 text-sm font-medium transition-all ${
+                  selectedPeriod === '1D'
+                    ? theme === 'dark' 
+                      ? 'text-blue-400 font-semibold' 
+                      : 'text-blue-600 font-semibold'
+                    : theme === 'dark'
+                      ? 'text-gray-300 hover:text-white'
+                      : 'text-gray-600 hover:text-gray-900'
+                }`}>1D</Tab>
+                <Tab className={`px-3 py-1 text-sm font-medium transition-all ${
+                  selectedPeriod === '1W'
+                    ? theme === 'dark' 
+                      ? 'text-blue-400 font-semibold' 
+                      : 'text-blue-600 font-semibold'
+                    : theme === 'dark'
+                      ? 'text-gray-300 hover:text-white'
+                      : 'text-gray-600 hover:text-gray-900'
+                }`}>1W</Tab>
+                <Tab className={`px-3 py-1 text-sm font-medium transition-all ${
+                  selectedPeriod === '1M'
+                    ? theme === 'dark' 
+                      ? 'text-blue-400 font-semibold' 
+                      : 'text-blue-600 font-semibold'
+                    : theme === 'dark'
+                      ? 'text-gray-300 hover:text-white'
+                      : 'text-gray-600 hover:text-gray-900'
+                }`}>1M</Tab>
+                <Tab className={`px-3 py-1 text-sm font-medium transition-all ${
+                  selectedPeriod === '3M'
+                    ? theme === 'dark' 
+                      ? 'text-blue-400 font-semibold' 
+                      : 'text-blue-600 font-semibold'
+                    : theme === 'dark'
+                      ? 'text-gray-300 hover:text-white'
+                      : 'text-gray-600 hover:text-gray-900'
+                }`}>3M</Tab>
+                <Tab className={`px-3 py-1 text-sm font-medium transition-all ${
+                  selectedPeriod === '1Y'
+                    ? theme === 'dark' 
+                      ? 'text-blue-400 font-semibold' 
+                      : 'text-blue-600 font-semibold'
+                    : theme === 'dark'
+                      ? 'text-gray-300 hover:text-white'
+                      : 'text-gray-600 hover:text-gray-900'
+                }`}>1Y</Tab>
+                <Tab className={`px-3 py-1 text-sm font-medium transition-all ${
+                  selectedPeriod === 'ALL'
+                    ? theme === 'dark' 
+                      ? 'text-blue-400 font-semibold' 
+                      : 'text-blue-600 font-semibold'
+                    : theme === 'dark'
+                      ? 'text-gray-300 hover:text-white'
+                      : 'text-gray-600 hover:text-gray-900'
+                }`}>ALL</Tab>
               </TabList>
             </TabGroup>
             <div className={`flex flex-col items-end ${
diff --git a/src/pages/Portfolio.jsx b/src/pages/Portfolio.jsx
index b1da257..2bd4317 100644
--- a/src/pages/Portfolio.jsx
+++ b/src/pages/Portfolio.jsx
@@ -1,6 +1,7 @@
 import React, { useState, useEffect } from 'react';
-import axios from 'axios';
 import { motion } from 'framer-motion';
+import { createPortal } from 'react-dom';
+import api from '../services/api';
 import { 
   Card,
   Title,
@@ -20,65 +21,60 @@ import {
   HiTrash,
   HiTrendingUp,
   HiTrendingDown,
-  HiX,
   HiCurrencyDollar,
   HiCollection,
   HiChartBar
 } from 'react-icons/hi';
 
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://portfolio-tracker-backend-y7ne.onrender.com/api';
 
-// Create axios instance with base URL
-const api = axios.create({
-  baseURL: API_BASE_URL,
-  timeout: 10000
-});
 
-export default function Portfolio() {
+const Portfolio = () => {
   const [stocks, setStocks] = useState([]);
   const [showAddModal, setShowAddModal] = useState(false);
   const [showEditModal, setShowEditModal] = useState(false);
   const [editingStock, setEditingStock] = useState(null);
-  const [newStock, setNewStock] = useState({
-    name: '',
-    ticker: '',
-    shares: 1,
-    buy_price: ''
-  });
+  const [newStock, setNewStock] = useState({ name: '', ticker: '', shares: 1, buy_price: '' });
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+  const [buttonHover, setButtonHover] = useState(false);
+  
+  // Autocomplete states
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
 
   useEffect(() => {
-    // Listen for theme changes
-    const handleThemeChange = () => {
-      setTheme(localStorage.getItem('theme') || 'light');
+    console.log('Portfolio component mounted');
+    fetchStocks();
+
+    const handleThemeChange = (e) => {
+      const newTheme = e.detail || localStorage.getItem('theme') || 'light';
+      console.log('Theme changed to:', newTheme);
+      setTheme(newTheme);
     };
 
-    window.addEventListener('storage', handleThemeChange);
+    // Listen for theme changes
+    window.addEventListener('themeChange', handleThemeChange);
     document.addEventListener('themeChanged', handleThemeChange);
 
     return () => {
-      window.removeEventListener('storage', handleThemeChange);
+      window.removeEventListener('themeChange', handleThemeChange);
       document.removeEventListener('themeChanged', handleThemeChange);
     };
   }, []);
 
-  useEffect(() => {
-    fetchStocks();
-  }, []);
-
   const fetchStocks = async () => {
     try {
-      console.log('Fetching stocks from:', API_BASE_URL);
+      console.log('Fetching stocks from API');
       const response = await api.get('/stocks');
-      console.log('Stocks fetched successfully:', response.data);
+      console.log('Stocks response:', response.data);
       setStocks(response.data);
-      setError(null);
-    } catch (err) {
-      console.error('Error fetching stocks:', err);
-      setError('Failed to fetch stocks. Please try again.');
-    } finally {
+      setLoading(false);
+    } catch (error) {
+      console.error('Error fetching stocks:', error);
+      setError('Failed to fetch stocks');
       setLoading(false);
     }
   };
@@ -86,58 +82,119 @@ export default function Portfolio() {
   const handleAddStock = async (e) => {
     e.preventDefault();
     try {
+      console.log('Adding stock:', newStock);
       const response = await api.post('/stocks', {
         name: newStock.name,
         ticker: newStock.ticker,
         shares: parseFloat(newStock.shares),
         buy_price: parseFloat(newStock.buy_price)
       });
-      
-      setStocks([response.data, ...stocks]);
-      setShowAddModal(false);
-      setNewStock({ name: '', ticker: '', shares: 1, buy_price: '' });
-      setError(null);
-    } catch (err) {
-      console.error('Error adding stock:', err);
-      setError(err.response?.data?.error || 'Failed to add stock. Please try again.');
+      handleModalClose();
+      await fetchStocks();
+    } catch (error) {
+      console.error('Error adding stock:', error);
+      setError(error.response?.data?.error || 'Failed to add stock');
     }
   };
 
   const handleEditStock = async (e) => {
     e.preventDefault();
     try {
-      const response = await api.put(`/stocks/${editingStock.id}`, {
+      console.log('Updating stock:', editingStock);
+      await api.put(`/stocks/${editingStock.id}`, {
         name: editingStock.name,
         ticker: editingStock.ticker,
         shares: parseFloat(editingStock.shares),
         buy_price: parseFloat(editingStock.buy_price)
       });
-      
-      setStocks(stocks.map(stock => 
-        stock.id === editingStock.id ? response.data : stock
-      ));
       setShowEditModal(false);
       setEditingStock(null);
-      setError(null);
-    } catch (err) {
-      console.error('Error updating stock:', err);
-      setError(err.response?.data?.error || 'Failed to update stock. Please try again.');
+      await fetchStocks();
+    } catch (error) {
+      console.error('Error updating stock:', error);
+      setError(error.response?.data?.error || 'Failed to update stock');
     }
   };
 
   const handleDeleteStock = async (id) => {
     if (window.confirm('Are you sure you want to delete this stock?')) {
       try {
+        console.log('Deleting stock:', id);
         await api.delete(`/stocks/${id}`);
-        setStocks(stocks.filter(stock => stock.id !== id));
-        setError(null);
-      } catch (err) {
-        console.error('Error deleting stock:', err);
-        setError('Failed to delete stock. Please try again.');
+        await fetchStocks();
+      } catch (error) {
+        console.error('Error deleting stock:', error);
+        setError('Failed to delete stock');
+      }
+    }
+  };
+
+  const handleEditClick = (stock) => {
+    setEditingStock(stock);
+    setShowEditModal(true);
+  };
+
+  // Stock search and autocomplete functions
+  const searchStocks = async (query) => {
+    if (!query || query.length < 2) {
+      setSearchResults([]);
+      setShowDropdown(false);
+      return;
+    }
+
+    setIsSearching(true);
+    try {
+      // Use our backend endpoint to search for stocks
+      const response = await api.get(`/stocks/search?q=${encodeURIComponent(query)}`);
+      
+      if (response.data && response.data.result) {
+        setSearchResults(response.data.result);
+        setShowDropdown(true);
+      } else {
+        setSearchResults([]);
+        setShowDropdown(false);
       }
+    } catch (error) {
+      console.error('Error searching stocks:', error);
+      setSearchResults([]);
+      setShowDropdown(false);
+    } finally {
+      setIsSearching(false);
     }
   };
 
+  const handleSearchChange = (e) => {
+    const query = e.target.value;
+    setSearchQuery(query);
+    setNewStock({ ...newStock, name: '', ticker: '' });
+    
+    // Debounce the search
+    const timeoutId = setTimeout(() => {
+      searchStocks(query);
+    }, 300);
+
+    return () => clearTimeout(timeoutId);
+  };
+
+  const selectStock = (stock) => {
+    setNewStock({
+      ...newStock,
+      name: stock.description,
+      ticker: stock.symbol
+    });
+    setSearchQuery(stock.symbol);
+    setShowDropdown(false);
+    setSearchResults([]);
+  };
+
+  const handleModalClose = () => {
+    setShowAddModal(false);
+    setNewStock({ name: '', ticker: '', shares: 1, buy_price: '' });
+    setSearchQuery('');
+    setSearchResults([]);
+    setShowDropdown(false);
+  };
+
   const getTotalValue = () => {
     return stocks.reduce((total, stock) => total + (stock.current_price * stock.shares), 0);
   };
@@ -150,496 +207,677 @@ export default function Portfolio() {
     return stocks.length > 0 ? totalGainLoss / stocks.length : 0;
   };
 
+  console.log('Rendering Portfolio component with theme:', theme);
+
   return (
-    <motion.div 
-      initial={{ opacity: 0, y: 20 }}
-      animate={{ opacity: 1, y: 0 }}
-      transition={{ duration: 0.5 }}
-      className="p-6 space-y-6"
-    >
-      {/* Header Section */}
-      <div className="flex justify-between items-center mb-8">
-        <div>
-          <Title className="text-2xl font-bold">Portfolio</Title>
-          <Text className="text-gray-500 dark:text-gray-400">Manage your stock investments</Text>
-        </div>
-        <button
-          onClick={() => setShowAddModal(true)}
-          className={`px-6 py-2.5 flex items-center gap-2 rounded-xl font-semibold transition-all duration-200 ${
-            theme === 'dark'
-              ? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40'
-              : 'bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30'
-          } hover:-translate-y-0.5`}
-        >
-          <HiPlus className="w-5 h-5" />
-          Add Stock
-        </button>
-      </div>
-
-      {/* Quick Stats */}
-      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3, delay: 0.1 }}
-        >
-          <Card 
-            className={`relative overflow-hidden transition-all duration-300 hover:shadow-lg dark:hover:shadow-2xl hover:-translate-y-1 rounded-2xl ${
-              theme === 'dark' 
-                ? 'bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700/50' 
-                : 'bg-gradient-to-br from-white to-gray-50 border border-gray-200/50'
+    <>
+      <motion.div 
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="p-6 space-y-6"
+      >
+        {/* Header Section */}
+        <div className="flex justify-between items-center mb-8">
+          <div>
+            <h1 className={`text-4xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+              Portfolio
+            </h1>
+            <p className={`mt-2 text-lg ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+              Manage your stock investments
+            </p>
+          </div>
+          <motion.button
+            onClick={() => setShowAddModal(true)}
+            onMouseEnter={() => setButtonHover(true)}
+            onMouseLeave={() => setButtonHover(false)}
+            whileHover={{ scale: 1.05 }}
+            whileTap={{ scale: 0.95 }}
+            className={`px-6 py-2.5 flex items-center gap-2 rounded-xl font-semibold transition-all duration-300 relative overflow-hidden ${
+              theme === 'dark'
+                ? 'bg-gradient-to-r from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white shadow-lg shadow-blue-500/25 hover:shadow-blue-500/40'
+                : 'bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 text-white shadow-lg shadow-blue-500/20 hover:shadow-blue-500/30'
             }`}
-            decoration="none"
           >
-            <div className="absolute top-0 right-0 w-24 h-24 transform translate-x-8 -translate-y-8">
-              <div className="absolute inset-0 bg-blue-500 opacity-20 rounded-full blur-2xl"></div>
-            </div>
-            <div className="relative flex items-center space-x-4">
-              <div className={`p-3 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg ${
-                theme === 'dark' ? 'shadow-blue-500/20' : 'shadow-blue-500/30'
-              }`}>
-                <HiCollection className="h-6 w-6 text-white" />
+            {buttonHover && (
+              <motion.span 
+                className="absolute inset-0 bg-white opacity-20"
+                initial={{ x: -100, opacity: 0 }}
+                animate={{ x: 200, opacity: 0.3 }}
+                transition={{ duration: 0.8, ease: "easeInOut" }}
+              />
+            )}
+            <span className="relative flex items-center justify-center w-6 h-6 bg-white bg-opacity-20 rounded-full">
+              <HiPlus className="w-4 h-4" />
+            </span>
+            <span className="relative">Add Stock</span>
+          </motion.button>
+        </div>
+
+        {/* Quick Stats */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
+          >
+            <Card 
+              className={`relative overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-2xl hover:-translate-y-1 rounded-2xl ${
+                theme === 'dark' 
+                  ? 'bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700/50' 
+                  : 'bg-gradient-to-br from-white to-gray-50 border border-gray-200/50'
+              }`}
+              decoration="none"
+            >
+              <div className="absolute top-0 right-0 w-24 h-24 transform translate-x-8 -translate-y-8">
+                <div className="absolute inset-0 bg-blue-500 opacity-20 rounded-full blur-2xl"></div>
               </div>
-              <div>
-                <Text className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Total Holdings</Text>
-                <Title className={`text-2xl font-bold mt-1 ${
-                  theme === 'dark' ? 'text-white' : 'text-gray-900'
-                }`}>{stocks.length} Stocks</Title>
+              <div className="relative flex items-center space-x-4">
+                <div className={`p-3 rounded-xl bg-gradient-to-br from-blue-500 to-blue-600 shadow-lg ${
+                  theme === 'dark' ? 'shadow-blue-500/20' : 'shadow-blue-500/30'
+                }`}>
+                  <HiCollection className="h-6 w-6 text-white" />
+                </div>
+                <div>
+                  <Text className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Total Holdings</Text>
+                  <Title className={`text-2xl font-bold mt-1 ${
+                    theme === 'dark' ? 'text-white' : 'text-gray-900'
+                  }`}>{stocks.length} Stocks</Title>
+                </div>
               </div>
-            </div>
-          </Card>
-      </motion.div>
+            </Card>
+          </motion.div>
 
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3, delay: 0.2 }}
-        >
-          <Card 
-            className={`relative overflow-hidden transition-all duration-300 hover:shadow-lg dark:hover:shadow-2xl hover:-translate-y-1 rounded-2xl ${
-              theme === 'dark' 
-                ? 'bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700/50' 
-                : 'bg-gradient-to-br from-white to-gray-50 border border-gray-200/50'
-            }`}
-            decoration="none"
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3, delay: 0.2 }}
           >
-            <div className="absolute top-0 right-0 w-24 h-24 transform translate-x-8 -translate-y-8">
-              <div className="absolute inset-0 bg-emerald-500 opacity-20 rounded-full blur-2xl"></div>
-            </div>
-            <div className="relative flex items-center space-x-4">
-              <div className={`p-3 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 shadow-lg ${
-                theme === 'dark' ? 'shadow-emerald-500/20' : 'shadow-emerald-500/30'
-              }`}>
-                <HiCurrencyDollar className="h-6 w-6 text-white" />
+            <Card 
+              className={`relative overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-2xl hover:-translate-y-1 rounded-2xl ${
+                theme === 'dark' 
+                  ? 'bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700/50' 
+                  : 'bg-gradient-to-br from-white to-gray-50 border border-gray-200/50'
+              }`}
+              decoration="none"
+            >
+              <div className="absolute top-0 right-0 w-24 h-24 transform translate-x-8 -translate-y-8">
+                <div className="absolute inset-0 bg-emerald-500 opacity-20 rounded-full blur-2xl"></div>
               </div>
-                            <div>
-                <Text className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Portfolio Value</Text>
-                <Title className={`text-2xl font-bold mt-1 ${
-                  theme === 'dark' ? 'text-white' : 'text-gray-900'
-                }`}>${getTotalValue().toLocaleString()}</Title>
+              <div className="relative flex items-center space-x-4">
+                <div className={`p-3 rounded-xl bg-gradient-to-br from-emerald-500 to-emerald-600 shadow-lg ${
+                  theme === 'dark' ? 'shadow-emerald-500/20' : 'shadow-emerald-500/30'
+                }`}>
+                  <HiCurrencyDollar className="h-6 w-6 text-white" />
+                </div>
+                <div>
+                  <Text className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Portfolio Value</Text>
+                  <Title className={`text-2xl font-bold mt-1 ${
+                    theme === 'dark' ? 'text-white' : 'text-gray-900'
+                  }`}>${getTotalValue().toLocaleString()}</Title>
+                </div>
               </div>
-            </div>
-          </Card>
-        </motion.div>
-
-        <motion.div
-          initial={{ opacity: 0, y: 20 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ duration: 0.3, delay: 0.3 }}
-        >
-          <Card 
-            className={`relative overflow-hidden transition-all duration-300 hover:shadow-lg dark:hover:shadow-2xl hover:-translate-y-1 rounded-2xl ${
-              theme === 'dark' 
-                ? 'bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700/50' 
-                : 'bg-gradient-to-br from-white to-gray-50 border border-gray-200/50'
-            }`}
-            decoration="none"
+            </Card>
+          </motion.div>
+
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.3, delay: 0.3 }}
           >
-            <div className="absolute top-0 right-0 w-24 h-24 transform translate-x-8 -translate-y-8">
-              <div className={`absolute inset-0 ${
-                getTotalGainLoss() >= 0 ? 'bg-emerald-500' : 'bg-red-500'
-              } opacity-20 rounded-full blur-2xl`}></div>
-            </div>
-            <div className="relative flex items-center space-x-4">
-              <div className={`p-3 rounded-xl shadow-lg ${
-                getTotalGainLoss() >= 0 
-                  ? `bg-gradient-to-br from-emerald-500 to-emerald-600 ${
-                      theme === 'dark' ? 'shadow-emerald-500/20' : 'shadow-emerald-500/30'
-                    }`
-                  : `bg-gradient-to-br from-red-500 to-red-600 ${
-                      theme === 'dark' ? 'shadow-red-500/20' : 'shadow-red-500/30'
-                    }`
-              }`}>
-                <HiChartBar className="h-6 w-6 text-white" />
-                            </div>
-              <div>
-                <Text className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Average Return</Text>
-                <div className="flex items-center mt-1">
-                  {getTotalGainLoss() >= 0 ? (
-                    <HiTrendingUp className="h-5 w-5 text-emerald-500 mr-1" />
-                  ) : (
-                    <HiTrendingDown className="h-5 w-5 text-red-500 mr-1" />
-                  )}
-                  <Title className={`text-2xl font-bold ${
-                    getTotalGainLoss() >= 0 ? 'text-emerald-500' : 'text-red-500'
-                  }`}>
-                    {getTotalGainLoss().toFixed(2)}%
-                  </Title>
+            <Card 
+              className={`relative overflow-hidden transition-all duration-300 hover:shadow-lg hover:shadow-2xl hover:-translate-y-1 rounded-2xl ${
+                theme === 'dark' 
+                  ? 'bg-gradient-to-br from-gray-800/50 to-gray-900/50 border border-gray-700/50' 
+                  : 'bg-gradient-to-br from-white to-gray-50 border border-gray-200/50'
+              }`}
+              decoration="none"
+            >
+              <div className="absolute top-0 right-0 w-24 h-24 transform translate-x-8 -translate-y-8">
+                <div className={`absolute inset-0 ${
+                  getTotalGainLoss() >= 0 ? 'bg-emerald-500' : 'bg-red-500'
+                } opacity-20 rounded-full blur-2xl`}></div>
+              </div>
+              <div className="relative flex items-center space-x-4">
+                <div className={`p-3 rounded-xl shadow-lg ${
+                  getTotalGainLoss() >= 0 
+                    ? `bg-gradient-to-br from-emerald-500 to-emerald-600 ${
+                        theme === 'dark' ? 'shadow-emerald-500/20' : 'shadow-emerald-500/30'
+                      }`
+                    : `bg-gradient-to-br from-red-500 to-red-600 ${
+                        theme === 'dark' ? 'shadow-red-500/20' : 'shadow-red-500/30'
+                      }`
+                }`}>
+                  <HiChartBar className="h-6 w-6 text-white" />
                 </div>
-                            </div>
+                <div>
+                  <Text className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Average Return</Text>
+                  <div className="flex items-center mt-1">
+                    {getTotalGainLoss() >= 0 ? (
+                      <HiTrendingUp className="h-5 w-5 text-emerald-500 mr-1" />
+                    ) : (
+                      <HiTrendingDown className="h-5 w-5 text-red-500 mr-1" />
+                    )}
+                    <Title className={`text-2xl font-bold ${
+                      getTotalGainLoss() >= 0 ? 'text-emerald-500' : 'text-red-500'
+                    }`}>
+                      {getTotalGainLoss().toFixed(2)}%
+                    </Title>
+                  </div>
                 </div>
-              </Card>
-        </motion.div>
-      </div>
-
-      {/* Error Message */}
-      {error && (
-        <motion.div
-          initial={{ opacity: 0, y: -10 }}
-          animate={{ opacity: 1, y: 0 }}
-          className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 text-red-700 dark:text-red-400"
-        >
-          {error}
-        </motion.div>
-      )}
+              </div>
+            </Card>
+          </motion.div>
+        </div>
 
-      {/* Stocks Table */}
-      <div className={`rounded-xl overflow-hidden border ${
-        theme === 'dark' 
-          ? 'bg-[#171717] border-gray-700/50' 
-          : 'bg-white border-gray-200/70'
-      } shadow-xl`}>
-        <div className="overflow-x-auto">
-          <table className={`w-full border-collapse ${
-            theme === 'dark' ? 'bg-[#171717]' : 'bg-white'
-          }`}>
-            <thead>
-              <tr className={`border-b ${
-                theme === 'dark' 
-                  ? 'bg-gray-800/50 border-gray-700/50' 
-                  : 'bg-gray-50 border-gray-200/70'
+        {/* Error Message */}
+        {error && (
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            className={`rounded-lg p-4 ${
+              theme === 'dark' 
+                ? 'bg-red-900/20 border border-red-800 text-red-400' 
+                : 'bg-red-50 border border-red-200 text-red-700'
+            }`}
+          >
+            {error}
+          </motion.div>
+        )}
+
+        {/* Stocks Table */}
+        <div className={`rounded-xl overflow-hidden border shadow-xl ${
+          theme === 'dark' 
+            ? 'bg-[#171717] border-gray-700/50' 
+            : 'bg-white border-gray-200/70'
+        }`}>
+          <div className="overflow-x-auto">
+            <table className={`w-full border-collapse ${
+              theme === 'dark' ? 'bg-[#171717]' : 'bg-white'
+            }`}>
+              <thead>
+                <tr className={`border-b ${
+                  theme === 'dark' 
+                    ? 'bg-gray-800/50 border-gray-700/50' 
+                    : 'bg-gray-50 border-gray-200/70'
+                }`}>
+                  <th className={`px-6 py-4 text-left text-sm font-semibold ${
+                    theme === 'dark' ? 'text-gray-200' : 'text-gray-600'
+                  }`}>Stock</th>
+                  <th className={`px-6 py-4 text-left text-sm font-semibold ${
+                    theme === 'dark' ? 'text-gray-200' : 'text-gray-600'
+                  }`}>Current Price</th>
+                  <th className={`px-6 py-4 text-left text-sm font-semibold ${
+                    theme === 'dark' ? 'text-gray-200' : 'text-gray-600'
+                  }`}>Holdings</th>
+                  <th className={`px-6 py-4 text-left text-sm font-semibold ${
+                    theme === 'dark' ? 'text-gray-200' : 'text-gray-600'
+                  }`}>Total Value</th>
+                  <th className={`px-6 py-4 text-left text-sm font-semibold ${
+                    theme === 'dark' ? 'text-gray-200' : 'text-gray-600'
+                  }`}>Return</th>
+                  <th className={`px-6 py-4 text-left text-sm font-semibold ${
+                    theme === 'dark' ? 'text-gray-200' : 'text-gray-600'
+                  }`}>Actions</th>
+                </tr>
+              </thead>
+              <tbody className={`divide-y ${
+                theme === 'dark' ? 'divide-gray-700/50' : 'divide-gray-200'
               }`}>
-                <th className={`px-6 py-4 text-left text-sm font-semibold ${
-                  theme === 'dark' ? 'text-gray-200' : 'text-gray-600'
-                }`}>Stock</th>
-                <th className={`px-6 py-4 text-left text-sm font-semibold ${
-                  theme === 'dark' ? 'text-gray-200' : 'text-gray-600'
-                }`}>Current Price</th>
-                <th className={`px-6 py-4 text-left text-sm font-semibold ${
-                  theme === 'dark' ? 'text-gray-200' : 'text-gray-600'
-                }`}>Holdings</th>
-                <th className={`px-6 py-4 text-left text-sm font-semibold ${
-                  theme === 'dark' ? 'text-gray-200' : 'text-gray-600'
-                }`}>Total Value</th>
-                <th className={`px-6 py-4 text-left text-sm font-semibold ${
-                  theme === 'dark' ? 'text-gray-200' : 'text-gray-600'
-                }`}>Return</th>
-                <th className={`px-6 py-4 text-left text-sm font-semibold ${
-                  theme === 'dark' ? 'text-gray-200' : 'text-gray-600'
-                }`}>Actions</th>
-              </tr>
-            </thead>
-            <tbody className="divide-y divide-gray-200 dark:divide-gray-700/50">
-              {stocks.map((stock) => {
-                const value = stock.current_price * stock.shares;
-                const gainLoss = ((stock.current_price - stock.buy_price) / stock.buy_price) * 100;
-                const valueChange = (stock.current_price - stock.buy_price) * stock.shares;
-                
-                return (
-                  <tr 
-                    key={stock.id}
-                    className={`transition-colors ${
-                      theme === 'dark' 
-                        ? 'hover:bg-gray-800/50 bg-[#171717]' 
-                        : 'hover:bg-gray-50 bg-white'
-                    }`}
-                  >
-                    <td className="px-6 py-4">
-                      <div className="flex flex-col">
-                        <span className={`font-medium ${
-                          theme === 'dark' ? 'text-gray-200' : 'text-gray-900'
-                        }`}>{stock.name}</span>
-                        <span className={`text-sm ${
-                          theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
-                        }`}>{stock.ticker}</span>
+                {loading ? (
+                  <tr>
+                    <td colSpan="6" className="px-6 py-8 text-center">
+                      <div className="flex items-center justify-center">
+                        <div className="animate-spin rounded-full h-8 w-8 border-4 border-blue-500 border-t-transparent"></div>
                       </div>
                     </td>
-                    <td className={`px-6 py-4 ${
-                      theme === 'dark' ? 'text-gray-200' : 'text-gray-900'
-                    }`}>
-                      ${stock.current_price.toLocaleString()}
-                    </td>
-                    <td className="px-6 py-4">
-                      <div className="flex flex-col">
-                        <span className={`font-medium ${
-                          theme === 'dark' ? 'text-gray-200' : 'text-gray-900'
-                        }`}>{stock.shares.toLocaleString()} shares</span>
-                        <span className={`text-sm ${
-                          theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
-                        }`}>@ ${stock.buy_price.toLocaleString()}</span>
-                      </div>
-                    </td>
-                    <td className={`px-6 py-4 font-medium ${
-                      theme === 'dark' ? 'text-gray-200' : 'text-gray-900'
+                  </tr>
+                ) : stocks.length === 0 ? (
+                  <tr>
+                    <td colSpan="6" className={`px-6 py-8 text-center ${
+                      theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
                     }`}>
-                      ${value.toLocaleString()}
-                    </td>
-                    <td className="px-6 py-4">
-                      <div className="flex flex-col gap-1">
-                        <div className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium ${
-                          gainLoss >= 0
-                            ? theme === 'dark'
-                              ? 'bg-emerald-900/30 text-emerald-400'
-                              : 'bg-emerald-100 text-emerald-800'
-                            : theme === 'dark'
-                              ? 'bg-red-900/30 text-red-400'
-                              : 'bg-red-100 text-red-800'
-                        }`}>
-                          <span className="mr-1">
-                            {gainLoss >= 0 ? (
-                              <HiTrendingUp className="w-4 h-4" />
-                            ) : (
-                              <HiTrendingDown className="w-4 h-4" />
-                            )}
-                          </span>
-                          {gainLoss >= 0 ? '+' : ''}{gainLoss.toFixed(2)}%
-                        </div>
-                        <span className={`text-sm ${
-                          gainLoss >= 0
-                            ? theme === 'dark'
-                              ? 'text-emerald-400'
-                              : 'text-emerald-600'
-                            : theme === 'dark'
-                              ? 'text-red-400'
-                              : 'text-red-600'
-                        }`}>
-                          {valueChange >= 0 ? '+' : ''}${valueChange.toLocaleString()}
-                        </span>
-                      </div>
-                    </td>
-                    <td className="px-6 py-4">
-                      <div className="flex items-center gap-2">
+                      <div className="flex flex-col items-center">
+                        <HiCollection className={`w-12 h-12 ${theme === 'dark' ? 'text-gray-600' : 'text-gray-400'}`} />
+                        <p className="mt-2">No stocks in portfolio</p>
                         <button
-                          onClick={() => {
-                            setEditingStock({
-                              ...stock,
-                              shares: stock.shares,
-                            });
-                            setShowEditModal(true);
-                          }}
-                          className={`p-2 rounded-lg transition-colors ${
-                            theme === 'dark'
-                              ? 'bg-gray-800 hover:bg-gray-700 text-gray-200 hover:text-white'
-                              : 'bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-900'
-                          }`}
-                        >
-                          <HiPencil className="w-5 h-5" />
-                        </button>
-                        <button
-                          onClick={() => handleDeleteStock(stock.id)}
-                          className={`p-2 rounded-lg transition-colors ${
-                            theme === 'dark'
-                              ? 'bg-red-900/30 hover:bg-red-900/50 text-red-400 hover:text-red-300'
-                              : 'bg-red-100 hover:bg-red-200 text-red-600 hover:text-red-700'
-                          }`}
+                          onClick={() => setShowAddModal(true)}
+                          className="mt-4 px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700 transition-colors"
                         >
-                          <HiTrash className="w-5 h-5" />
+                          Add Your First Stock
                         </button>
                       </div>
                     </td>
                   </tr>
-                );
-              })}
-            </tbody>
-          </table>
+                ) : (
+                  stocks.map((stock) => {
+                    const value = stock.current_price * stock.shares;
+                    const gainLoss = ((stock.current_price - stock.buy_price) / stock.buy_price) * 100;
+                    const valueChange = (stock.current_price - stock.buy_price) * stock.shares;
+                    
+                    return (
+                      <tr 
+                        key={stock.id}
+                        className={`transition-colors ${
+                          theme === 'dark' 
+                            ? 'hover:bg-gray-800/50 bg-[#171717]' 
+                            : 'hover:bg-gray-50 bg-white'
+                        }`}
+                      >
+                        <td className="px-6 py-4">
+                          <div className="flex flex-col">
+                            <span className={`font-medium ${
+                              theme === 'dark' ? 'text-gray-200' : 'text-gray-900'
+                            }`}>{stock.name}</span>
+                            <span className={`text-sm ${
+                              theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                            }`}>{stock.ticker}</span>
+                          </div>
+                        </td>
+                        <td className={`px-6 py-4 ${
+                          theme === 'dark' ? 'text-gray-200' : 'text-gray-900'
+                        }`}>
+                          ${stock.current_price.toLocaleString()}
+                        </td>
+                        <td className="px-6 py-4">
+                          <div className="flex flex-col">
+                            <span className={`font-medium ${
+                              theme === 'dark' ? 'text-gray-200' : 'text-gray-900'
+                            }`}>{stock.shares.toLocaleString()} shares</span>
+                            <span className={`text-sm ${
+                              theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                            }`}>@ ${stock.buy_price.toLocaleString()}</span>
+                          </div>
+                        </td>
+                        <td className={`px-6 py-4 font-medium ${
+                          theme === 'dark' ? 'text-gray-200' : 'text-gray-900'
+                        }`}>
+                          ${value.toLocaleString()}
+                        </td>
+                        <td className="px-6 py-4">
+                          <div className="flex flex-col gap-1">
+                            <div className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-sm font-medium ${
+                              gainLoss >= 0
+                                ? theme === 'dark'
+                                  ? 'bg-emerald-900/30 text-emerald-400'
+                                  : 'bg-emerald-100 text-emerald-800'
+                                : theme === 'dark'
+                                  ? 'bg-red-900/30 text-red-400'
+                                  : 'bg-red-100 text-red-800'
+                            }`}>
+                              <span className="mr-1">
+                                {gainLoss >= 0 ? (
+                                  <HiTrendingUp className="w-4 h-4" />
+                                ) : (
+                                  <HiTrendingDown className="w-4 h-4" />
+                                )}
+                              </span>
+                              {gainLoss >= 0 ? '+' : ''}{gainLoss.toFixed(2)}%
+                            </div>
+                            <span className={`text-sm ${
+                              gainLoss >= 0
+                                ? theme === 'dark'
+                                  ? 'text-emerald-400'
+                                  : 'text-emerald-600'
+                                : theme === 'dark'
+                                  ? 'text-red-400'
+                                  : 'text-red-600'
+                            }`}>
+                              {valueChange >= 0 ? '+' : ''}${valueChange.toLocaleString()}
+                            </span>
+                          </div>
+                        </td>
+                        <td className="px-6 py-4">
+                          <div className="flex items-center gap-2">
+                            <button
+                              onClick={() => handleEditClick(stock)}
+                              className={`p-2 rounded-lg transition-colors ${
+                                theme === 'dark'
+                                  ? 'bg-gray-800 hover:bg-gray-700 text-gray-200 hover:text-white'
+                                  : 'bg-gray-100 hover:bg-gray-200 text-gray-600 hover:text-gray-900'
+                              }`}
+                            >
+                              <HiPencil className="w-5 h-5" />
+                            </button>
+                            <button
+                              onClick={() => handleDeleteStock(stock.id)}
+                              className={`p-2 rounded-lg transition-colors ${
+                                theme === 'dark'
+                                  ? 'bg-red-900/30 hover:bg-red-900/50 text-red-400 hover:text-red-300'
+                                  : 'bg-red-100 hover:bg-red-200 text-red-600 hover:text-red-700'
+                              }`}
+                            >
+                              <HiTrash className="w-5 h-5" />
+                            </button>
+                          </div>
+                        </td>
+                      </tr>
+                    );
+                  })
+                )}
+              </tbody>
+            </table>
+          </div>
         </div>
-      </div>
+      </motion.div>
 
-      {/* Add Stock Modal */}
-      {showAddModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      {/* Modals using Portal */}
+      {showAddModal && createPortal(
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
           <motion.div
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            className="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-md w-full mx-4"
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            className={`w-full max-w-md p-6 rounded-2xl shadow-2xl ${
+              theme === 'dark'
+                ? 'bg-[#1f1f1f] border border-gray-600'
+                : 'bg-white border border-gray-200'
+            }`}
           >
-            <div className="flex justify-between items-center mb-4">
-              <Title>Add New Stock</Title>
+            <div className="flex justify-between items-center mb-5">
+              <h3 className={`text-xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Add New Stock
+              </h3>
               <button
-                onClick={() => setShowAddModal(false)}
-                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+                onClick={handleModalClose}
+                className={`p-2 rounded-lg transition-colors ${
+                  theme === 'dark'
+                    ? 'hover:bg-gray-700 text-gray-400 hover:text-white'
+                    : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'
+                }`}
               >
-                <HiX className="h-6 w-6" />
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
               </button>
             </div>
-            <form onSubmit={handleAddStock} className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Company Name
-                </label>
-                <input
-                  type="text"
-                  value={newStock.name}
-                  onChange={(e) => setNewStock({...newStock, name: e.target.value})}
-                  className="w-full px-4 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500"
-                  required
-                />
-              </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Ticker Symbol
-                </label>
-                <input
-                  type="text"
-                  value={newStock.ticker}
-                  onChange={(e) => setNewStock({...newStock, ticker: e.target.value.toUpperCase()})}
-                  className="w-full px-4 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500"
-                  required
-                />
+            <form onSubmit={handleAddStock}>
+              <div className="space-y-4">
+                {/* Stock Search with Autocomplete */}
+                <div className="relative">
+                  <label className={`block text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                    Search Stock
+                  </label>
+                  <div className="relative">
+                    <input
+                      type="text"
+                      value={searchQuery}
+                      onChange={handleSearchChange}
+                      className={`w-full px-3 py-3 text-base rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
+                        theme === 'dark'
+                          ? 'bg-gray-800 border-gray-600 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                          : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                      }`}
+                      placeholder="Search for a stock (e.g., AAPL, Apple)"
+                      required
+                    />
+                    {isSearching && (
+                      <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
+                        <div className="animate-spin rounded-full h-5 w-5 border-2 border-blue-500 border-t-transparent"></div>
+                      </div>
+                    )}
                   </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Number of Shares
-                </label>
-                <input
-                  type="number"
-                  min="1"
-                  step="1"
-                  value={newStock.shares}
-                  onChange={(e) => setNewStock({...newStock, shares: Math.max(1, parseInt(e.target.value) || 0)})}
-                  className="w-full px-4 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500"
-                  required
-                />
+                  
+                  {/* Autocomplete Dropdown */}
+                  {showDropdown && searchResults.length > 0 && (
+                    <div className={`absolute z-10 w-full mt-1 rounded-xl border-2 shadow-xl max-h-60 overflow-y-auto ${
+                      theme === 'dark'
+                        ? 'bg-gray-800 border-gray-600'
+                        : 'bg-white border-gray-200'
+                    }`}>
+                      {searchResults.map((stock, index) => (
+                        <button
+                          key={`${stock.symbol}-${index}`}
+                          type="button"
+                          onClick={() => selectStock(stock)}
+                          className={`w-full px-4 py-3 text-left hover:bg-blue-500 hover:text-white transition-colors ${
+                            theme === 'dark'
+                              ? 'text-gray-200 hover:bg-blue-600'
+                              : 'text-gray-900 hover:bg-blue-500'
+                          } ${index === 0 ? 'rounded-t-xl' : ''} ${index === searchResults.length - 1 ? 'rounded-b-xl' : ''}`}
+                        >
+                          <div className="flex justify-between items-center">
+                            <div>
+                              <div className="font-semibold">{stock.symbol}</div>
+                              <div className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                                {stock.description}
+                              </div>
+                            </div>
+                            <div className={`text-xs px-2 py-1 rounded ${
+                              theme === 'dark' ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-600'
+                            }`}>
+                              {stock.primaryExchange}
+                            </div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {/* Selected Stock Display */}
+                {newStock.ticker && newStock.name && (
+                  <div className={`p-3 rounded-xl border-2 ${
+                    theme === 'dark'
+                      ? 'bg-blue-900/20 border-blue-600/50'
+                      : 'bg-blue-50 border-blue-200'
+                  }`}>
+                    <div className="flex justify-between items-center">
+                      <div>
+                        <div className={`font-semibold ${theme === 'dark' ? 'text-blue-300' : 'text-blue-700'}`}>
+                          {newStock.ticker}
+                        </div>
+                        <div className={`text-sm ${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`}>
+                          {newStock.name}
+                        </div>
+                      </div>
+                      <div className={`text-xs px-2 py-1 rounded ${
+                        theme === 'dark' ? 'bg-blue-600 text-white' : 'bg-blue-100 text-blue-700'
+                      }`}>
+                        Selected
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                <div>
+                  <label className={`block text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                    Number of Shares
+                  </label>
+                  <input
+                    type="number"
+                    min="1"
+                    step="1"
+                    value={newStock.shares}
+                    onChange={(e) => setNewStock({ ...newStock, shares: Math.max(1, parseInt(e.target.value) || 0) })}
+                    className={`w-full px-3 py-3 text-base rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
+                      theme === 'dark'
+                        ? 'bg-gray-800 border-gray-600 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                        : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                    }`}
+                    required
+                  />
+                </div>
+                <div>
+                  <label className={`block text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                    Buy Price
+                  </label>
+                  <input
+                    type="number"
+                    min="0.01"
+                    step="0.01"
+                    value={newStock.buy_price}
+                    onChange={(e) => setNewStock({ ...newStock, buy_price: Math.max(0.01, parseFloat(e.target.value) || 0) })}
+                    className={`w-full px-3 py-3 text-base rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
+                      theme === 'dark'
+                        ? 'bg-gray-800 border-gray-600 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                        : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                    }`}
+                    placeholder="0.00"
+                    required
+                  />
                 </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Buy Price
-                </label>
-                <input
-                  type="number"
-                  min="0.01"
-                  step="0.01"
-                  value={newStock.buy_price}
-                  onChange={(e) => setNewStock({...newStock, buy_price: Math.max(0.01, parseFloat(e.target.value) || 0)})}
-                  className="w-full px-4 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500"
-                  required
-                />
               </div>
-              <div className="flex justify-end space-x-4 mt-6">
-                <Button
-                  variant="secondary"
-                  color="gray"
-                  onClick={() => setShowAddModal(false)}
+              <div className="mt-6 flex justify-end space-x-3">
+                <button
+                  type="button"
+                  onClick={handleModalClose}
+                  className={`px-4 py-2 rounded-xl font-semibold transition-all duration-200 ${
+                    theme === 'dark'
+                      ? 'bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white'
+                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300 hover:text-gray-900'
+                  }`}
                 >
                   Cancel
-                </Button>
-                <Button
+                </button>
+                <button
                   type="submit"
-                  color="blue"
+                  disabled={!newStock.ticker || !newStock.name}
+                  className={`px-4 py-2 rounded-xl font-semibold transition-all duration-200 shadow-lg hover:shadow-xl ${
+                    newStock.ticker && newStock.name
+                      ? 'bg-gradient-to-r from-blue-600 to-blue-700 text-white hover:from-blue-700 hover:to-blue-800'
+                      : 'bg-gray-400 text-gray-200 cursor-not-allowed'
+                  }`}
                 >
                   Add Stock
-                </Button>
+                </button>
               </div>
             </form>
           </motion.div>
-        </div>
+        </div>,
+        document.body
       )}
 
-      {/* Edit Stock Modal */}
-      {showEditModal && editingStock && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      {showEditModal && editingStock && createPortal(
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
           <motion.div
-            initial={{ opacity: 0, scale: 0.95 }}
-            animate={{ opacity: 1, scale: 1 }}
-            className="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-md w-full mx-4"
+            initial={{ scale: 0.9, opacity: 0 }}
+            animate={{ scale: 1, opacity: 1 }}
+            className={`w-full max-w-md p-6 rounded-2xl shadow-2xl ${
+              theme === 'dark'
+                ? 'bg-[#1f1f1f] border border-gray-600'
+                : 'bg-white border border-gray-200'
+            }`}
           >
-            <div className="flex justify-between items-center mb-4">
-              <Title>Edit Stock</Title>
+            <div className="flex justify-between items-center mb-5">
+              <h3 className={`text-xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Edit Stock
+              </h3>
               <button
                 onClick={() => {
                   setShowEditModal(false);
                   setEditingStock(null);
                 }}
-                className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+                className={`p-2 rounded-lg transition-colors ${
+                  theme === 'dark'
+                    ? 'hover:bg-gray-700 text-gray-400 hover:text-white'
+                    : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'
+                }`}
               >
-                <HiX className="h-6 w-6" />
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
               </button>
-                  </div>
-            <form onSubmit={handleEditStock} className="space-y-4">
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Company Name
-                </label>
-                <input
-                  type="text"
-                  value={editingStock.name}
-                  onChange={(e) => setEditingStock({...editingStock, name: e.target.value})}
-                  className="w-full px-4 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500"
-                  required
-                />
+            </div>
+            <form onSubmit={handleEditStock}>
+              <div className="space-y-4">
+                <div>
+                  <label className={`block text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                    Company Name
+                  </label>
+                  <input
+                    type="text"
+                    value={editingStock.name}
+                    onChange={(e) => setEditingStock({ ...editingStock, name: e.target.value })}
+                    className={`w-full px-3 py-3 text-base rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
+                      theme === 'dark'
+                        ? 'bg-gray-800 border-gray-600 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                        : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                    }`}
+                    required
+                  />
                 </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Ticker Symbol
-                </label>
-                <input
-                  type="text"
-                  value={editingStock.ticker}
-                  onChange={(e) => setEditingStock({...editingStock, ticker: e.target.value.toUpperCase()})}
-                  className="w-full px-4 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500"
-                  required
-                />
-                        </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Number of Shares
-                </label>
-                <input
-                  type="number"
-                  min="1"
-                  step="1"
-                  value={editingStock.shares}
-                  onChange={(e) => setEditingStock({...editingStock, shares: Math.max(1, parseInt(e.target.value) || 0)})}
-                  className="w-full px-4 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500"
-                  required
-                />
-                      </div>
-              <div>
-                <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
-                  Buy Price
-                </label>
-                <input
-                  type="number"
-                  min="0.01"
-                  step="0.01"
-                  value={editingStock.buy_price}
-                  onChange={(e) => setEditingStock({...editingStock, buy_price: Math.max(0.01, parseFloat(e.target.value) || 0)})}
-                  className="w-full px-4 py-2 rounded-lg bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500"
-                  required
-                />
-                  </div>
-              <div className="flex justify-end space-x-4 mt-6">
-                <Button
-                  variant="secondary"
-                  color="gray"
+                <div>
+                  <label className={`block text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                    Ticker Symbol
+                  </label>
+                  <input
+                    type="text"
+                    value={editingStock.ticker}
+                    onChange={(e) => setEditingStock({ ...editingStock, ticker: e.target.value.toUpperCase() })}
+                    className={`w-full px-3 py-3 text-base rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
+                      theme === 'dark'
+                        ? 'bg-gray-800 border-gray-600 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                        : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                    }`}
+                    required
+                  />
+                </div>
+                <div>
+                  <label className={`block text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                    Number of Shares
+                  </label>
+                  <input
+                    type="number"
+                    min="1"
+                    step="1"
+                    value={editingStock.shares}
+                    onChange={(e) => setEditingStock({ ...editingStock, shares: Math.max(1, parseInt(e.target.value) || 0) })}
+                    className={`w-full px-3 py-3 text-base rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
+                      theme === 'dark'
+                        ? 'bg-gray-800 border-gray-600 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                        : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                    }`}
+                    required
+                  />
+                </div>
+                <div>
+                  <label className={`block text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                    Buy Price
+                  </label>
+                  <input
+                    type="number"
+                    min="0.01"
+                    step="0.01"
+                    value={editingStock.buy_price}
+                    onChange={(e) => setEditingStock({ ...editingStock, buy_price: Math.max(0.01, parseFloat(e.target.value) || 0) })}
+                    className={`w-full px-3 py-3 text-base rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
+                      theme === 'dark'
+                        ? 'bg-gray-800 border-gray-600 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                        : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                    }`}
+                    required
+                  />
+                </div>
+              </div>
+              <div className="mt-6 flex justify-end space-x-3">
+                <button
+                  type="button"
                   onClick={() => {
                     setShowEditModal(false);
                     setEditingStock(null);
                   }}
+                  className={`px-4 py-2 rounded-xl font-semibold transition-all duration-200 ${
+                    theme === 'dark'
+                      ? 'bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white'
+                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300 hover:text-gray-900'
+                  }`}
                 >
                   Cancel
-                </Button>
-                <Button
+                </button>
+                <button
                   type="submit"
-                  color="blue"
+                  className="px-4 py-2 rounded-xl bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl"
                 >
                   Save Changes
-                </Button>
-                </div>
+                </button>
+              </div>
             </form>
-      </motion.div>
-        </div>
+          </motion.div>
+        </div>,
+        document.body
       )}
-    </motion.div>
+    </>
   );
-} 
\ No newline at end of file
+};
+
+export default Portfolio; 
\ No newline at end of file
diff --git a/src/pages/StockDetail.jsx b/src/pages/StockDetail.jsx
index 6335b41..ebbdfe3 100644
--- a/src/pages/StockDetail.jsx
+++ b/src/pages/StockDetail.jsx
@@ -1,94 +1,299 @@
-import { useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { Card, Title, Text, AreaChart, TabGroup, TabList, Tab, TabPanels, TabPanel, Metric, Flex, Badge } from '@tremor/react';
-import { ArrowTrendingUpIcon, ArrowTrendingDownIcon } from '@heroicons/react/24/solid';
-
-const chartdata = [
-  { date: "1D", price: 150.20 },
-  { date: "2D", price: 151.40 },
-  { date: "3D", price: 152.80 },
-  { date: "4D", price: 149.90 },
-  { date: "5D", price: 153.20 },
-];
-
-const stockStats = {
-  marketCap: "2.5T",
-  peRatio: "25.6",
-  dividend: "0.88%",
-  volume: "52.4M",
-  avgVolume: "48.2M",
-  high52: "$182.94",
-  low52: "$124.17",
-};
+import React, { useState, useEffect } from 'react';
+import { motion } from 'framer-motion';
+import { Card, Title, Text, Badge, TabGroup, TabList, Tab, TabPanels, TabPanel } from '@tremor/react';
+import { 
+  HiTrendingUp, 
+  HiTrendingDown, 
+  HiCurrencyDollar, 
+  HiChartBar,
+  HiNewspaper,
+  HiUserGroup,
+  HiCalendar,
+  HiLightningBolt,
+  HiStar
+} from 'react-icons/hi';
+import api from '../services/api';
+
+const StockDetail = ({ ticker }) => {
+  const [stockData, setStockData] = useState(null);
+  const [financials, setFinancials] = useState(null);
+  const [recommendations, setRecommendations] = useState(null);
+  const [news, setNews] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+
+  useEffect(() => {
+    if (ticker) {
+      fetchStockData();
+    }
+  }, [ticker]);
+
+  useEffect(() => {
+    const handleThemeChange = (e) => {
+      const newTheme = e.detail || localStorage.getItem('theme') || 'light';
+      setTheme(newTheme);
+    };
+
+    window.addEventListener('themeChange', handleThemeChange);
+    document.addEventListener('themeChanged', handleThemeChange);
+
+    return () => {
+      window.removeEventListener('themeChange', handleThemeChange);
+      document.removeEventListener('themeChanged', handleThemeChange);
+    };
+  }, []);
+
+  const fetchStockData = async () => {
+    try {
+      setLoading(true);
+      setError(null);
+
+      // Fetch multiple data points in parallel
+      const [quoteRes, profileRes, metricsRes, newsRes] = await Promise.allSettled([
+        api.get(`/stocks/${ticker}/quote`),
+        api.get(`/stocks/${ticker}/profile`),
+        api.get(`/stocks/${ticker}/metrics`),
+        api.get(`/stocks/${ticker}/news`)
+      ]);
+
+      const data = {
+        quote: quoteRes.status === 'fulfilled' ? quoteRes.value.data : null,
+        profile: profileRes.status === 'fulfilled' ? profileRes.value.data : null,
+        metrics: metricsRes.status === 'fulfilled' ? metricsRes.value.data : null,
+        news: newsRes.status === 'fulfilled' ? newsRes.value.data : []
+      };
+
+      setStockData(data);
+      setNews(data.news.slice(0, 5)); // Show latest 5 news items
+    } catch (error) {
+      console.error('Error fetching stock data:', error);
+      setError('Failed to fetch stock data');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const getPriceChangeColor = (change) => {
+    return change >= 0 ? 'text-green-500' : 'text-red-500';
+  };
+
+  const getPriceChangeIcon = (change) => {
+    return change >= 0 ? <HiTrendingUp className="w-4 h-4" /> : <HiTrendingDown className="w-4 h-4" />;
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-64">
+        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="text-center p-8">
+        <div className="text-red-500 text-lg">{error}</div>
+      </div>
+    );
+  }
+
+  if (!stockData) {
+    return (
+      <div className="text-center p-8">
+        <div className="text-gray-500 text-lg">No data available</div>
+      </div>
+    );
+  }
 
-export default function StockDetail() {
-  const { symbol } = useParams();
-  const [selectedView, setSelectedView] = useState(0);
+  const { quote, profile, metrics } = stockData;
 
   return (
-    <div className="space-y-6">
-      <Card>
-        <Flex justifyContent="between" alignItems="center">
-          <div>
-            <Title>Apple Inc. (AAPL)</Title>
-            <Text>NASDAQ</Text>
-          </div>
-          <div className="text-right">
-            <Metric>$150.20</Metric>
-            <Flex justifyContent="end" className="space-x-2">
-              <Badge color="green" icon={ArrowTrendingUpIcon}>
-                +2.5%
-              </Badge>
-              <Text>Today</Text>
-            </Flex>
-          </div>
-        </Flex>
-
-        <TabGroup className="mt-6" onIndexChange={setSelectedView}>
-          <TabList>
-            <Tab>1D</Tab>
-            <Tab>1W</Tab>
-            <Tab>1M</Tab>
-            <Tab>3M</Tab>
-            <Tab>1Y</Tab>
-            <Tab>ALL</Tab>
-          </TabList>
-          <TabPanels>
-            <TabPanel>
-              <AreaChart
-                className="h-72 mt-4"
-                data={chartdata}
-                index="date"
-                categories={["price"]}
-                colors={["blue"]}
-                showLegend={false}
-                valueFormatter={(number) => `$${number.toFixed(2)}`}
-              />
-            </TabPanel>
-          </TabPanels>
-        </TabGroup>
-      </Card>
-
-      <div className="grid grid-cols-1 gap-6 sm:grid-cols-2">
-        <Card>
-          <Title>Key Statistics</Title>
-          <div className="mt-4 grid grid-cols-2 gap-4">
-            {Object.entries(stockStats).map(([key, value]) => (
-              <div key={key} className="space-y-1">
-                <Text className="text-gray-500">{key}</Text>
-                <Text className="font-medium">{value}</Text>
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      className="p-6 space-y-6"
+    >
+      {/* Header */}
+      <div className="flex justify-between items-start">
+        <div>
+          <h1 className={`text-3xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+            {profile?.name || ticker}
+          </h1>
+          <p className={`text-lg ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+            {profile?.exchange} • {profile?.finnhubIndustry}
+          </p>
+        </div>
+        <Badge color="blue" size="lg">
+          {ticker}
+        </Badge>
+      </div>
+
+      {/* Price and Change */}
+      {quote && (
+        <Card className="p-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <div className={`text-3xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                ${quote.c?.toFixed(2)}
               </div>
-            ))}
+              <div className={`flex items-center gap-2 mt-2 ${getPriceChangeColor(quote.d)}`}>
+                {getPriceChangeIcon(quote.d)}
+                <span className="font-semibold">
+                  {quote.d >= 0 ? '+' : ''}{quote.d?.toFixed(2)} ({quote.dp >= 0 ? '+' : ''}{quote.dp?.toFixed(2)}%)
+                </span>
+              </div>
+            </div>
+            <div className="text-right">
+              <div className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                Day Range: ${quote.l?.toFixed(2)} - ${quote.h?.toFixed(2)}
+              </div>
+              <div className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                Volume: {quote.v?.toLocaleString()}
+              </div>
+            </div>
           </div>
         </Card>
+      )}
 
-        <Card>
-          <Title>About</Title>
-          <Text className="mt-4">
-            Apple Inc. designs, manufactures, and markets smartphones, personal computers, tablets, wearables, and accessories worldwide. The company offers iPhone, Mac, iPad, and Wearables, Home and Accessories.
-          </Text>
-        </Card>
-      </div>
-    </div>
+      {/* Tabs */}
+      <TabGroup>
+        <TabList variant="solid">
+          <Tab icon={HiChartBar}>Overview</Tab>
+          <Tab icon={HiNewspaper}>News</Tab>
+          <Tab icon={HiUserGroup}>Analysts</Tab>
+          <Tab icon={HiCalendar}>Earnings</Tab>
+        </TabList>
+        <TabPanels>
+          {/* Overview Tab */}
+          <TabPanel>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mt-6">
+              {/* Key Metrics */}
+              {metrics && (
+                <Card>
+                  <Title>Key Metrics</Title>
+                  <div className="space-y-3 mt-4">
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">P/E Ratio</span>
+                      <span className="font-semibold">{metrics.pe?.toFixed(2) || 'N/A'}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">P/B Ratio</span>
+                      <span className="font-semibold">{metrics.pb?.toFixed(2) || 'N/A'}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Market Cap</span>
+                      <span className="font-semibold">
+                        ${(metrics.marketCapitalization / 1e9)?.toFixed(2)}B
+                      </span>
+                    </div>
+                  </div>
+                </Card>
+              )}
+
+              {/* Company Info */}
+              {profile && (
+                <Card>
+                  <Title>Company Info</Title>
+                  <div className="space-y-3 mt-4">
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Sector</span>
+                      <span className="font-semibold">{profile.finnhubIndustry}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">Country</span>
+                      <span className="font-semibold">{profile.country}</span>
+                    </div>
+                    <div className="flex justify-between">
+                      <span className="text-gray-600">IPO Date</span>
+                      <span className="font-semibold">
+                        {profile.ipo ? new Date(profile.ipo).toLocaleDateString() : 'N/A'}
+                      </span>
+                    </div>
+                  </div>
+                </Card>
+              )}
+
+              {/* Quick Actions */}
+              <Card>
+                <Title>Quick Actions</Title>
+                <div className="space-y-3 mt-4">
+                  <button className="w-full bg-blue-500 text-white px-4 py-2 rounded-lg hover:bg-blue-600 transition-colors">
+                    Add to Portfolio
+                  </button>
+                  <button className="w-full bg-green-500 text-white px-4 py-2 rounded-lg hover:bg-green-600 transition-colors">
+                    Add to Watchlist
+                  </button>
+                  <button className="w-full bg-purple-500 text-white px-4 py-2 rounded-lg hover:bg-purple-600 transition-colors">
+                    View Chart
+                  </button>
+                </div>
+              </Card>
+            </div>
+          </TabPanel>
+
+          {/* News Tab */}
+          <TabPanel>
+            <div className="mt-6 space-y-4">
+              {news.length > 0 ? (
+                news.map((article, index) => (
+                  <Card key={index} className="p-4">
+                    <div className="flex justify-between items-start">
+                      <div className="flex-1">
+                        <h3 className="font-semibold text-lg mb-2">{article.headline}</h3>
+                        <p className="text-gray-600 text-sm mb-2">{article.summary}</p>
+                        <div className="flex items-center gap-4 text-xs text-gray-500">
+                          <span>{article.source}</span>
+                          <span>{new Date(article.datetime * 1000).toLocaleDateString()}</span>
+                        </div>
+                      </div>
+                      <a
+                        href={article.url}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="bg-blue-500 text-white px-3 py-1 rounded text-sm hover:bg-blue-600 transition-colors"
+                      >
+                        Read
+                      </a>
+                    </div>
+                  </Card>
+                ))
+              ) : (
+                <div className="text-center py-8 text-gray-500">
+                  No news available
+                </div>
+              )}
+            </div>
+          </TabPanel>
+
+          {/* Analysts Tab */}
+          <TabPanel>
+            <div className="mt-6">
+              <Card>
+                <Title>Analyst Recommendations</Title>
+                <div className="text-center py-8 text-gray-500">
+                  Analyst data will be available here
+                </div>
+              </Card>
+            </div>
+          </TabPanel>
+
+          {/* Earnings Tab */}
+          <TabPanel>
+            <div className="mt-6">
+              <Card>
+                <Title>Earnings Calendar</Title>
+                <div className="text-center py-8 text-gray-500">
+                  Earnings data will be available here
+                </div>
+              </Card>
+            </div>
+          </TabPanel>
+        </TabPanels>
+      </TabGroup>
+    </motion.div>
   );
-} 
\ No newline at end of file
+};
+
+export default StockDetail; 
\ No newline at end of file
diff --git a/src/pages/Watchlist.jsx b/src/pages/Watchlist.jsx
index e6a4cfa..7dc89cb 100644
--- a/src/pages/Watchlist.jsx
+++ b/src/pages/Watchlist.jsx
@@ -1,17 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import axios from 'axios';
 import { motion } from 'framer-motion';
 import { HiOutlineEye, HiOutlineTrash, HiSearch, HiPlus, HiTrendingUp, HiTrendingDown, HiOutlineBell, HiOutlineChartBar, HiOutlineClock, HiOutlinePencil } from 'react-icons/hi';
+import api from '../services/api';
 import { Card, Text, Metric, Badge, ProgressBar } from '@tremor/react';
 import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';
 
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://portfolio-tracker-backend-y7ne.onrender.com/api';
 
-// Create axios instance with base URL
-const api = axios.create({
-  baseURL: API_BASE_URL,
-  timeout: 10000
-});
 
 const Watchlist = () => {
   const [watchlist, setWatchlist] = useState([]);
@@ -25,11 +19,17 @@ const Watchlist = () => {
   const [error, setError] = useState(null);
   const [searchQuery, setSearchQuery] = useState('');
   const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
+  
+  // Autocomplete states
+  const [stockSearchQuery, setStockSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState([]);
+  const [isSearching, setIsSearching] = useState(false);
+  const [showDropdown, setShowDropdown] = useState(false);
 
   useEffect(() => {
     console.log('Watchlist component mounted');
     fetchWatchlist();
-    syncPortfolioStocks();
+    // Removed automatic sync - watchlist should only show manually added stocks
 
     const handleThemeChange = (e) => {
       const newTheme = e.detail || localStorage.getItem('theme') || 'light';
@@ -49,7 +49,7 @@ const Watchlist = () => {
 
   const fetchWatchlist = async () => {
     try {
-      console.log('Fetching watchlist from:', API_BASE_URL);
+      console.log('Fetching watchlist from API');
       const response = await api.get('/watchlist');
       console.log('Watchlist response:', response.data);
       setWatchlist(response.data);
@@ -77,8 +77,7 @@ const Watchlist = () => {
     try {
       console.log('Adding stock:', newStock);
       await api.post('/watchlist', newStock);
-      setShowAddModal(false);
-      setNewStock({ name: '', ticker: '', target_price: '' });
+      handleModalClose();
       await fetchWatchlist();
     } catch (error) {
       console.error('Error adding stock:', error);
@@ -99,6 +98,40 @@ const Watchlist = () => {
     }
   };
 
+  const clearAllWatchlist = async () => {
+    if (window.confirm('Are you sure you want to clear all stocks from your watchlist? This action cannot be undone.')) {
+      try {
+        console.log('Clearing all watchlist stocks...');
+        
+        // Get current watchlist and delete each stock individually
+        const response = await api.get('/watchlist');
+        const currentWatchlist = response.data;
+        
+        console.log(`Found ${currentWatchlist.length} stocks to remove`);
+        
+        // Delete each stock one by one
+        for (const stock of currentWatchlist) {
+          try {
+            console.log(`Removing ${stock.ticker} (ID: ${stock.id}) from watchlist...`);
+            await api.delete(`/watchlist/${stock.id}`);
+            console.log(`Successfully removed ${stock.ticker}`);
+          } catch (deleteError) {
+            console.error(`Failed to remove ${stock.ticker}:`, deleteError);
+            // Continue with other stocks
+          }
+        }
+        
+        // Refresh the watchlist
+        await fetchWatchlist();
+        console.log('Watchlist clearing completed');
+        
+      } catch (error) {
+        console.error('Error in clearAllWatchlist:', error);
+        setError('Failed to clear watchlist. Please try refreshing the page and deleting stocks individually.');
+      }
+    }
+  };
+
   const handleUpdateStock = async (e) => {
     e.preventDefault();
     try {
@@ -136,6 +169,67 @@ const Watchlist = () => {
     setShowUpdateModal(true);
   };
 
+  // Stock search and autocomplete functions
+  const searchStocks = async (query) => {
+    if (!query || query.length < 2) {
+      setSearchResults([]);
+      setShowDropdown(false);
+      return;
+    }
+
+    setIsSearching(true);
+    try {
+      // Use our backend endpoint to search for stocks
+      const response = await api.get(`/stocks/search?q=${encodeURIComponent(query)}`);
+      
+      if (response.data && response.data.result) {
+        setSearchResults(response.data.result);
+        setShowDropdown(true);
+      } else {
+        setSearchResults([]);
+        setShowDropdown(false);
+      }
+    } catch (error) {
+      console.error('Error searching stocks:', error);
+      setSearchResults([]);
+      setShowDropdown(false);
+    } finally {
+      setIsSearching(false);
+    }
+  };
+
+  const handleSearchChange = (e) => {
+    const query = e.target.value;
+    setStockSearchQuery(query);
+    setNewStock({ ...newStock, name: '', ticker: '' });
+    
+    // Debounce the search
+    const timeoutId = setTimeout(() => {
+      searchStocks(query);
+    }, 300);
+
+    return () => clearTimeout(timeoutId);
+  };
+
+  const selectStock = (stock) => {
+    setNewStock({
+      ...newStock,
+      name: stock.description,
+      ticker: stock.symbol
+    });
+    setStockSearchQuery(stock.symbol);
+    setShowDropdown(false);
+    setSearchResults([]);
+  };
+
+  const handleModalClose = () => {
+    setShowAddModal(false);
+    setNewStock({ name: '', ticker: '', target_price: '' });
+    setStockSearchQuery('');
+    setSearchResults([]);
+    setShowDropdown(false);
+  };
+
   const filteredWatchlist = watchlist.filter(stock => 
     stock.name.toLowerCase().includes(searchQuery.toLowerCase()) ||
     stock.ticker.toLowerCase().includes(searchQuery.toLowerCase())
@@ -184,8 +278,8 @@ const Watchlist = () => {
     <motion.div 
       initial={{ opacity: 0 }}
       animate={{ opacity: 1 }}
-      transition={{ duration: 0.5 }}
-      className={`p-6 min-h-screen ${theme === 'dark' ? 'bg-[#171717] text-white' : 'bg-gray-50 text-gray-800'}`}
+      transition={{ duration: 0.3 }}
+      className={`p-6 min-h-screen ${theme === 'dark' ? 'bg-[#171717] text-white' : 'bg-white text-gray-800'}`}
     >
       {/* Header Section */}
       <div className="max-w-7xl mx-auto">
@@ -222,6 +316,15 @@ const Watchlist = () => {
               <HiPlus className="w-5 h-5" />
               <span>Add to Watchlist</span>
             </button>
+            {watchlist.length > 0 && (
+              <button
+                onClick={clearAllWatchlist}
+                className="flex items-center justify-center gap-2 px-4 py-2 bg-red-600 text-white rounded-xl hover:bg-red-700 transition-colors shadow-sm"
+              >
+                <HiOutlineTrash className="w-5 h-5" />
+                <span>Clear All</span>
+              </button>
+            )}
           </div>
         </div>
 
@@ -229,15 +332,21 @@ const Watchlist = () => {
         <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
           {/* Portfolio Overview Card */}
           <motion.div
-            initial={{ y: 20, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            transition={{ duration: 0.5 }}
-            className={`p-6 rounded-2xl ${
+            whileHover={{ y: -2 }}
+            transition={{ duration: 0.2 }}
+            className={`relative p-6 rounded-2xl overflow-hidden ${
               theme === 'dark'
-                ? 'bg-[#1f1f1f] border border-white/10'
-                : 'bg-white border border-gray-200'
-            } shadow-sm hover:shadow-md transition-shadow`}
+                ? 'bg-[#1f1f1f]/80 border border-white/10 backdrop-blur-md'
+                : 'bg-white/80 border border-gray-200 backdrop-blur-md'
+            } shadow-lg hover:shadow-xl transition-all duration-300`}
           >
+            {/* Blurry background decoration */}
+            <div className={`absolute inset-0 bg-gradient-to-br ${
+              theme === 'dark' 
+                ? 'from-blue-500/10 via-purple-500/5 to-transparent' 
+                : 'from-blue-100/30 via-purple-100/20 to-transparent'
+            } blur-xl`}></div>
+            <div className="relative z-10">
             <div className="flex items-center justify-between mb-4">
               <div>
                 <Text className={`text-sm font-medium ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
@@ -247,8 +356,8 @@ const Watchlist = () => {
                   {stats.totalStocks} Stocks
                 </Metric>
               </div>
-              <div className={`p-3 rounded-xl ${
-                theme === 'dark' ? 'bg-blue-500/10' : 'bg-blue-50'
+                <div className={`p-3 rounded-xl backdrop-blur-sm ${
+                  theme === 'dark' ? 'bg-blue-500/20 border border-blue-500/30' : 'bg-blue-100/80 border border-blue-200/50'
               }`}>
                 <HiOutlineChartBar className={`w-6 h-6 ${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`} />
               </div>
@@ -265,21 +374,28 @@ const Watchlist = () => {
               <div className="flex justify-between items-center">
                 <Text className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Below Target</Text>
                 <Badge color="red">{stats.belowTarget}</Badge>
+                </div>
               </div>
             </div>
           </motion.div>
 
           {/* Target Progress Card */}
           <motion.div
-            initial={{ y: 20, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            transition={{ duration: 0.5, delay: 0.1 }}
-            className={`p-6 rounded-2xl ${
+            whileHover={{ y: -2 }}
+            transition={{ duration: 0.2 }}
+            className={`relative p-6 rounded-2xl overflow-hidden ${
               theme === 'dark'
-                ? 'bg-[#1f1f1f] border border-white/10'
-                : 'bg-white border border-gray-200'
-            } shadow-sm hover:shadow-md transition-shadow`}
+                ? 'bg-[#1f1f1f]/80 border border-white/10 backdrop-blur-md'
+                : 'bg-white/80 border border-gray-200 backdrop-blur-md'
+            } shadow-lg hover:shadow-xl transition-all duration-300`}
           >
+            {/* Blurry background decoration */}
+            <div className={`absolute inset-0 bg-gradient-to-br ${
+              theme === 'dark' 
+                ? 'from-green-500/10 via-emerald-500/5 to-transparent' 
+                : 'from-green-100/30 via-emerald-100/20 to-transparent'
+            } blur-xl`}></div>
+            <div className="relative z-10">
             <div className="flex items-center justify-between mb-4">
               <div>
                 <Text className={`text-sm font-medium ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
@@ -294,8 +410,8 @@ const Watchlist = () => {
                   </Text>
                 </div>
               </div>
-              <div className={`p-3 rounded-xl ${
-                theme === 'dark' ? 'bg-green-500/10' : 'bg-green-50'
+                <div className={`p-3 rounded-xl backdrop-blur-sm ${
+                  theme === 'dark' ? 'bg-green-500/20 border border-green-500/30' : 'bg-green-100/80 border border-green-200/50'
               }`}>
                 <HiOutlineBell className={`w-6 h-6 ${theme === 'dark' ? 'text-green-400' : 'text-green-600'}`} />
               </div>
@@ -323,20 +439,27 @@ const Watchlist = () => {
                   </div>
                 </div>
               )}
+              </div>
             </div>
           </motion.div>
 
           {/* Value Analysis Card */}
           <motion.div
-            initial={{ y: 20, opacity: 0 }}
-            animate={{ y: 0, opacity: 1 }}
-            transition={{ duration: 0.5, delay: 0.2 }}
-            className={`p-6 rounded-2xl ${
+            whileHover={{ y: -2 }}
+            transition={{ duration: 0.2 }}
+            className={`relative p-6 rounded-2xl overflow-hidden ${
               theme === 'dark'
-                ? 'bg-[#1f1f1f] border border-white/10'
-                : 'bg-white border border-gray-200'
-            } shadow-sm hover:shadow-md transition-shadow`}
+                ? 'bg-[#1f1f1f]/80 border border-white/10 backdrop-blur-md'
+                : 'bg-white/80 border border-gray-200 backdrop-blur-md'
+            } shadow-lg hover:shadow-xl transition-all duration-300`}
           >
+            {/* Blurry background decoration */}
+            <div className={`absolute inset-0 bg-gradient-to-br ${
+              theme === 'dark' 
+                ? 'from-purple-500/10 via-pink-500/5 to-transparent' 
+                : 'from-purple-100/30 via-pink-100/20 to-transparent'
+            } blur-xl`}></div>
+            <div className="relative z-10">
             <div className="flex items-center justify-between mb-4">
               <div>
                 <Text className={`text-sm font-medium ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
@@ -348,8 +471,8 @@ const Watchlist = () => {
                   </Metric>
                 </div>
               </div>
-              <div className={`p-3 rounded-xl ${
-                theme === 'dark' ? 'bg-purple-500/10' : 'bg-purple-50'
+                <div className={`p-3 rounded-xl backdrop-blur-sm ${
+                  theme === 'dark' ? 'bg-purple-500/20 border border-purple-500/30' : 'bg-purple-100/80 border border-purple-200/50'
               }`}>
                 <HiOutlineClock className={`w-6 h-6 ${theme === 'dark' ? 'text-purple-400' : 'text-purple-600'}`} />
               </div>
@@ -370,6 +493,7 @@ const Watchlist = () => {
                   <Text className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
                     {new Date().toLocaleTimeString()}
                   </Text>
+                  </div>
                 </div>
               </div>
             </div>
@@ -377,9 +501,7 @@ const Watchlist = () => {
         </div>
 
         {error && (
-          <motion.div
-            initial={{ opacity: 0, y: -10 }}
-            animate={{ opacity: 1, y: 0 }}
+          <div
             className={`mb-6 p-4 rounded-xl border ${
               theme === 'dark'
                 ? 'bg-red-900/20 border-red-800 text-red-400'
@@ -387,40 +509,54 @@ const Watchlist = () => {
             }`}
           >
             {error}
-          </motion.div>
+          </div>
         )}
 
         {/* Watchlist Table */}
-        <motion.div
-          initial={{ y: 20, opacity: 0 }}
-          animate={{ y: 0, opacity: 1 }}
-          transition={{ duration: 0.5, delay: 0.3 }}
-          className={`rounded-2xl border overflow-hidden ${
-            theme === 'dark' ? 'border-white/10' : 'border-gray-200'
-          } shadow-sm`}
+        <div
+          className={`relative rounded-2xl overflow-hidden ${
+            theme === 'dark' 
+              ? 'bg-[#1f1f1f]/80 border border-white/10 backdrop-blur-md' 
+              : 'bg-white/80 border border-gray-200 backdrop-blur-md'
+          } shadow-lg`}
         >
+          {/* Blurry background decoration */}
+          <div className={`absolute inset-0 bg-gradient-to-br ${
+            theme === 'dark' 
+              ? 'from-gray-500/5 via-blue-500/3 to-transparent' 
+              : 'from-gray-100/20 via-blue-100/10 to-transparent'
+          } blur-xl`}></div>
+          <div className="relative z-10">
           <div className="overflow-x-auto">
             <table className="w-full">
-              <thead className={theme === 'dark' ? 'bg-[#1f1f1f]' : 'bg-gray-50'}>
-                <tr>
-                  <th className={`px-6 py-4 text-left text-xs font-medium tracking-wider ${
-                    theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                <thead className={`${
+                  theme === 'dark' 
+                    ? 'bg-gray-800/60 border-b border-gray-700/50' 
+                    : 'bg-gray-50/80 border-b border-gray-200/50'
+                } backdrop-blur-sm`}>
+                  <tr>
+                    <th className={`px-6 py-4 text-left text-xs font-semibold tracking-wider uppercase ${
+                      theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
                   }`}>Stock</th>
-                  <th className={`px-6 py-4 text-left text-xs font-medium tracking-wider ${
-                    theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                    <th className={`px-6 py-4 text-left text-xs font-semibold tracking-wider uppercase ${
+                      theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
                   }`}>Current Price</th>
-                  <th className={`px-6 py-4 text-left text-xs font-medium tracking-wider ${
-                    theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                    <th className={`px-6 py-4 text-left text-xs font-semibold tracking-wider uppercase ${
+                      theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
                   }`}>Target Price</th>
-                  <th className={`px-6 py-4 text-left text-xs font-medium tracking-wider ${
-                    theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                    <th className={`px-6 py-4 text-left text-xs font-semibold tracking-wider uppercase ${
+                      theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
                   }`}>Distance to Target</th>
-                  <th className={`px-6 py-4 text-left text-xs font-medium tracking-wider ${
-                    theme === 'dark' ? 'text-gray-400' : 'text-gray-500'
+                    <th className={`px-6 py-4 text-left text-xs font-semibold tracking-wider uppercase ${
+                      theme === 'dark' ? 'text-gray-300' : 'text-gray-600'
                   }`}>Actions</th>
                 </tr>
               </thead>
-              <tbody className={`divide-y ${theme === 'dark' ? 'divide-gray-800' : 'divide-gray-200'}`}>
+                <tbody className={`divide-y ${
+                  theme === 'dark' 
+                    ? 'divide-gray-700/50' 
+                    : 'divide-gray-200/50'
+                }`}>
                 {loading ? (
                   <tr>
                     <td colSpan="5" className="px-6 py-8 text-center">
@@ -450,20 +586,24 @@ const Watchlist = () => {
                   filteredWatchlist.map((stock) => (
                     <tr
                       key={stock.id}
-                      className={theme === 'dark' ? 'bg-[#1f1f1f]' : 'bg-white'}
+                        className={`${
+                          theme === 'dark' 
+                            ? 'bg-gray-800/40 hover:bg-gray-700/60' 
+                            : 'bg-white/60 hover:bg-gray-50/80'
+                        } transition-all duration-200 backdrop-blur-sm`}
                     >
                       <td className={`px-6 py-4 whitespace-nowrap ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
                         <div className="flex items-center">
                           <div>
-                            <div className="font-medium">{stock.name}</div>
+                              <div className="font-semibold">{stock.name}</div>
                             <div className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-500'}`}>{stock.ticker}</div>
                           </div>
                         </div>
                       </td>
-                      <td className={`px-6 py-4 whitespace-nowrap ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                        <td className={`px-6 py-4 whitespace-nowrap font-medium ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
                         ${parseFloat(stock.current_price || 0).toFixed(2)}
                       </td>
-                      <td className={`px-6 py-4 whitespace-nowrap ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                        <td className={`px-6 py-4 whitespace-nowrap font-medium ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
                         ${parseFloat(stock.target_price || 0).toFixed(2)}
                       </td>
                       <td className={`px-6 py-4 whitespace-nowrap`}>
@@ -478,10 +618,10 @@ const Watchlist = () => {
                         <div className="inline-flex items-center gap-2">
                           <button
                             onClick={() => handleViewStock(stock)}
-                            className={`p-2 rounded-lg transition-colors ${
+                              className={`p-2 rounded-lg transition-all duration-200 ${
                               theme === 'dark' 
-                                ? 'hover:bg-blue-500/10 text-blue-400 hover:text-blue-300'
-                                : 'hover:bg-blue-50 text-blue-500 hover:text-blue-600'
+                                  ? 'hover:bg-blue-500/20 text-blue-400 hover:text-blue-300 hover:shadow-lg' 
+                                  : 'hover:bg-blue-100 text-blue-500 hover:text-blue-600 hover:shadow-md'
                             }`}
                             title="View Details"
                           >
@@ -489,10 +629,10 @@ const Watchlist = () => {
                           </button>
                           <button
                             onClick={() => handleUpdateClick(stock)}
-                            className={`p-2 rounded-lg transition-colors ${
+                              className={`p-2 rounded-lg transition-all duration-200 ${
                               theme === 'dark'
-                                ? 'hover:bg-green-500/10 text-green-400 hover:text-green-300'
-                                : 'hover:bg-green-50 text-green-500 hover:text-green-600'
+                                  ? 'hover:bg-green-500/20 text-green-400 hover:text-green-300 hover:shadow-lg'
+                                  : 'hover:bg-green-100 text-green-500 hover:text-green-600 hover:shadow-md'
                             }`}
                             title="Update Target"
                           >
@@ -500,10 +640,10 @@ const Watchlist = () => {
                           </button>
                           <button
                             onClick={() => handleDeleteStock(stock.id)}
-                            className={`p-2 rounded-lg transition-colors ${
+                              className={`p-2 rounded-lg transition-all duration-200 ${
                               theme === 'dark'
-                                ? 'hover:bg-red-500/10 text-red-400 hover:text-red-300'
-                                : 'hover:bg-red-50 text-red-500 hover:text-red-600'
+                                  ? 'hover:bg-red-500/20 text-red-400 hover:text-red-300 hover:shadow-lg'
+                                  : 'hover:bg-red-100 text-red-500 hover:text-red-600 hover:shadow-md'
                             }`}
                             title="Remove from Watchlist"
                           >
@@ -517,73 +657,255 @@ const Watchlist = () => {
               </tbody>
             </table>
           </div>
-        </motion.div>
+          </div>
+        </div>
       </div>
 
       {/* Add Stock Modal */}
       {showAddModal && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
           <motion.div
-            initial={{ scale: 0.9, opacity: 0 }}
+            initial={{ scale: 0.95, opacity: 0 }}
             animate={{ scale: 1, opacity: 1 }}
-            className={`w-full max-w-md p-6 rounded-2xl ${
+            transition={{ duration: 0.2 }}
+            className={`w-full max-w-md p-6 rounded-2xl shadow-2xl ${
               theme === 'dark'
-                ? 'bg-[#1f1f1f] border border-white/10'
+                ? 'bg-[#1f1f1f] border border-gray-600'
                 : 'bg-white border border-gray-200'
             }`}
           >
-            <h3 className={`text-lg font-medium mb-4 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+            <div className="flex justify-between items-center mb-5">
+              <h3 className={`text-xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
               Add Stock to Watchlist
             </h3>
+              <button
+                onClick={handleModalClose}
+                className={`p-2 rounded-lg transition-colors ${
+                  theme === 'dark'
+                    ? 'hover:bg-gray-700 text-gray-400 hover:text-white'
+                    : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
             <form onSubmit={handleAddStock}>
+              <div className="space-y-4">
+                {/* Stock Search with Autocomplete */}
+                <div className="relative">
+                  <label className={`block text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                    Search Stock
+                  </label>
+                  <div className="relative">
+                    <input
+                      type="text"
+                      value={stockSearchQuery}
+                      onChange={handleSearchChange}
+                      className={`w-full px-3 py-3 text-base rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
+                        theme === 'dark'
+                          ? 'bg-gray-800 border-gray-600 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                          : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                      }`}
+                      placeholder="Search for a stock (e.g., AAPL, Apple)"
+                      required
+                    />
+                    {isSearching && (
+                      <div className="absolute right-3 top-1/2 transform -translate-y-1/2">
+                        <div className="animate-spin rounded-full h-5 w-5 border-2 border-blue-500 border-t-transparent"></div>
+                      </div>
+                    )}
+                  </div>
+                  
+                  {/* Autocomplete Dropdown */}
+                  {showDropdown && searchResults.length > 0 && (
+                    <div className={`absolute z-10 w-full mt-1 rounded-xl border-2 shadow-xl max-h-60 overflow-y-auto ${
+                      theme === 'dark'
+                        ? 'bg-gray-800 border-gray-600'
+                        : 'bg-white border-gray-200'
+                    }`}>
+                      {searchResults.map((stock, index) => (
+                        <button
+                          key={`${stock.symbol}-${index}`}
+                          type="button"
+                          onClick={() => selectStock(stock)}
+                          className={`w-full px-4 py-3 text-left hover:bg-blue-500 hover:text-white transition-colors ${
+                            theme === 'dark'
+                              ? 'text-gray-200 hover:bg-blue-600'
+                              : 'text-gray-900 hover:bg-blue-500'
+                          } ${index === 0 ? 'rounded-t-xl' : ''} ${index === searchResults.length - 1 ? 'rounded-b-xl' : ''}`}
+                        >
+                          <div className="flex justify-between items-center">
+                <div>
+                              <div className="font-semibold">{stock.symbol}</div>
+                              <div className={`text-sm ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+                                {stock.description}
+                              </div>
+                            </div>
+                            <div className={`text-xs px-2 py-1 rounded ${
+                              theme === 'dark' ? 'bg-gray-700 text-gray-300' : 'bg-gray-100 text-gray-600'
+                            }`}>
+                              {stock.primaryExchange}
+                            </div>
+                          </div>
+                        </button>
+                      ))}
+                    </div>
+                  )}
+                </div>
+
+                {/* Selected Stock Display */}
+                {newStock.ticker && newStock.name && (
+                  <div className={`p-3 rounded-xl border-2 ${
+                    theme === 'dark'
+                      ? 'bg-blue-900/20 border-blue-600/50'
+                      : 'bg-blue-50 border-blue-200'
+                  }`}>
+                    <div className="flex justify-between items-center">
+                      <div>
+                        <div className={`font-semibold ${theme === 'dark' ? 'text-blue-300' : 'text-blue-700'}`}>
+                          {newStock.ticker}
+                        </div>
+                        <div className={`text-sm ${theme === 'dark' ? 'text-blue-400' : 'text-blue-600'}`}>
+                          {newStock.name}
+                        </div>
+                      </div>
+                      <div className={`text-xs px-2 py-1 rounded ${
+                        theme === 'dark' ? 'bg-blue-600 text-white' : 'bg-blue-100 text-blue-700'
+                      }`}>
+                        Selected
+                      </div>
+                    </div>
+                  </div>
+                )}
+
+                <div>
+                  <label className={`block text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                    Target Price ($)
+                  </label>
+                  <input
+                    type="number"
+                    step="0.01"
+                    min="0"
+                    value={newStock.target_price}
+                    onChange={(e) => setNewStock({ ...newStock, target_price: e.target.value })}
+                    className={`w-full px-3 py-3 text-base rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
+                      theme === 'dark'
+                        ? 'bg-gray-800 border-gray-600 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                        : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                    }`}
+                    placeholder="0.00"
+                    required
+                  />
+                </div>
+              </div>
+              <div className="mt-6 flex justify-end space-x-3">
+                <button
+                  type="button"
+                  onClick={handleModalClose}
+                  className={`px-4 py-2 rounded-xl font-semibold transition-all duration-200 ${
+                    theme === 'dark'
+                      ? 'bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white'
+                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300 hover:text-gray-900'
+                  }`}
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={!newStock.ticker || !newStock.name}
+                  className={`px-4 py-2 rounded-xl font-semibold transition-all duration-200 shadow-lg hover:shadow-xl ${
+                    newStock.ticker && newStock.name
+                      ? 'bg-gradient-to-r from-blue-600 to-blue-700 text-white hover:from-blue-700 hover:to-blue-800'
+                      : 'bg-gray-400 text-gray-200 cursor-not-allowed'
+                  }`}
+                >
+                  Add Stock
+                </button>
+              </div>
+            </form>
+          </motion.div>
+        </div>
+      )}
+
+      {/* Update Stock Modal */}
+      {showUpdateModal && selectedStock && (
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div
+            className={`w-full max-w-md p-6 rounded-2xl shadow-2xl ${
+              theme === 'dark'
+                ? 'bg-[#1f1f1f] border border-gray-600'
+                : 'bg-white border border-gray-200'
+            }`}
+          >
+            <div className="flex justify-between items-center mb-5">
+              <h3 className={`text-xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                Update Target Price
+              </h3>
+              <button
+                onClick={() => {
+                  setShowUpdateModal(false);
+                  setSelectedStock(null);
+                }}
+                className={`p-2 rounded-lg transition-colors ${
+                  theme === 'dark'
+                    ? 'hover:bg-gray-700 text-gray-400 hover:text-white'
+                    : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'
+                }`}
+              >
+                <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+            <form onSubmit={handleUpdateStock}>
               <div className="space-y-4">
                 <div>
-                  <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-gray-400' : 'text-gray-700'}`}>
+                  <label className={`block text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
                     Company Name
                   </label>
                   <input
                     type="text"
-                    value={newStock.name}
-                    onChange={(e) => setNewStock({ ...newStock, name: e.target.value })}
-                    className={`mt-1 block w-full rounded-xl ${
+                    value={selectedStock.name}
+                    disabled
+                    className={`w-full px-3 py-3 text-base rounded-xl border-2 ${
                       theme === 'dark'
-                        ? 'bg-gray-800 border-gray-700 text-white'
-                        : 'bg-white border-gray-300'
-                    } shadow-sm focus:ring-blue-500 focus:border-blue-500`}
-                    required
+                        ? 'bg-gray-700 border-gray-600 text-gray-300'
+                        : 'bg-gray-100 border-gray-300 text-gray-500'
+                    }`}
                   />
                 </div>
                 <div>
-                  <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-gray-400' : 'text-gray-700'}`}>
+                  <label className={`block text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
                     Ticker Symbol
                   </label>
                   <input
                     type="text"
-                    value={newStock.ticker}
-                    onChange={(e) => setNewStock({ ...newStock, ticker: e.target.value.toUpperCase() })}
-                    className={`mt-1 block w-full rounded-xl ${
+                    value={selectedStock.ticker}
+                    disabled
+                    className={`w-full px-3 py-3 text-base rounded-xl border-2 ${
                       theme === 'dark'
-                        ? 'bg-gray-800 border-gray-700 text-white'
-                        : 'bg-white border-gray-300'
-                    } shadow-sm focus:ring-blue-500 focus:border-blue-500`}
-                    required
+                        ? 'bg-gray-700 border-gray-600 text-gray-300'
+                        : 'bg-gray-100 border-gray-300 text-gray-500'
+                    }`}
                   />
                 </div>
                 <div>
-                  <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-gray-400' : 'text-gray-700'}`}>
+                  <label className={`block text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
                     Target Price ($)
                   </label>
                   <input
                     type="number"
                     step="0.01"
                     min="0"
-                    value={newStock.target_price}
-                    onChange={(e) => setNewStock({ ...newStock, target_price: e.target.value })}
-                    className={`mt-1 block w-full rounded-xl ${
+                    value={selectedStock.target_price}
+                    onChange={(e) => setSelectedStock({ ...selectedStock, target_price: e.target.value })}
+                    className={`w-full px-3 py-3 text-base rounded-xl border-2 transition-all duration-200 focus:outline-none focus:ring-4 ${
                       theme === 'dark'
-                        ? 'bg-gray-800 border-gray-700 text-white'
-                        : 'bg-white border-gray-300'
-                    } shadow-sm focus:ring-blue-500 focus:border-blue-500`}
+                        ? 'bg-gray-800 border-gray-600 text-white placeholder-gray-400 focus:border-blue-500 focus:ring-blue-500/20'
+                        : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500 focus:ring-blue-500/20'
+                    }`}
                     required
                   />
                 </div>
@@ -591,40 +913,41 @@ const Watchlist = () => {
               <div className="mt-6 flex justify-end space-x-3">
                 <button
                   type="button"
-                  onClick={() => setShowAddModal(false)}
-                  className={`px-4 py-2 rounded-xl ${
+                  onClick={() => {
+                    setShowUpdateModal(false);
+                    setSelectedStock(null);
+                  }}
+                  className={`px-4 py-2 rounded-xl font-semibold transition-all duration-200 ${
                     theme === 'dark'
-                      ? 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
+                      ? 'bg-gray-700 text-gray-300 hover:bg-gray-600 hover:text-white'
+                      : 'bg-gray-200 text-gray-700 hover:bg-gray-300 hover:text-gray-900'
                   }`}
                 >
                   Cancel
                 </button>
                 <button
                   type="submit"
-                  className="px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700"
+                  className="px-4 py-2 rounded-xl bg-gradient-to-r from-blue-600 to-blue-700 text-white font-semibold hover:from-blue-700 hover:to-blue-800 transition-all duration-200 shadow-lg hover:shadow-xl"
                 >
-                  Add Stock
+                  Update Price
                 </button>
               </div>
             </form>
-          </motion.div>
+          </div>
         </div>
       )}
 
       {/* View Stock Modal */}
       {showViewModal && selectedStock && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
-          <motion.div
-            initial={{ scale: 0.9, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            className={`w-full max-w-3xl p-6 rounded-2xl ${
+        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50">
+          <div
+            className={`w-full max-w-3xl p-6 rounded-2xl shadow-2xl ${
               theme === 'dark'
-                ? 'bg-[#1f1f1f] border border-white/10'
+                ? 'bg-[#1f1f1f] border border-gray-600'
                 : 'bg-white border border-gray-200'
             }`}
           >
-            <div className="flex justify-between items-center mb-4">
+            <div className="flex justify-between items-center mb-5">
               <div>
                 <h3 className={`text-xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
                   {selectedStock.name}
@@ -638,8 +961,10 @@ const Watchlist = () => {
                   setShowViewModal(false);
                   setSelectedStock(null);
                 }}
-                className={`p-2 rounded-lg hover:bg-gray-100 ${
-                  theme === 'dark' ? 'hover:bg-gray-800' : ''
+                className={`p-2 rounded-lg transition-colors ${
+                  theme === 'dark'
+                    ? 'hover:bg-gray-700 text-gray-400 hover:text-white'
+                    : 'hover:bg-gray-100 text-gray-500 hover:text-gray-700'
                 }`}
               >
                 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -649,8 +974,12 @@ const Watchlist = () => {
             </div>
 
             {/* Price Chart */}
-            <div className={`mt-4 p-4 rounded-xl ${theme === 'dark' ? 'bg-black/20' : 'bg-gray-50'}`}>
-              <h4 className={`text-sm font-medium mb-3 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
+            <div className={`mt-4 p-4 rounded-xl border-2 ${
+              theme === 'dark' 
+                ? 'bg-gray-800 border-gray-600' 
+                : 'bg-white border-gray-200'
+            }`}>
+              <h4 className={`text-sm font-semibold mb-3 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
                 Price History
               </h4>
               <div className="h-48">
@@ -698,7 +1027,7 @@ const Watchlist = () => {
                       type="monotone"
                       dataKey="price"
                       stroke={theme === 'dark' ? '#60A5FA' : '#3B82F6'}
-                      fillOpacity={1}
+                      strokeWidth={2}
                       fill="url(#colorPrice)"
                     />
                   </AreaChart>
@@ -706,182 +1035,34 @@ const Watchlist = () => {
               </div>
             </div>
 
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mt-4">
-              {/* Price Information */}
-              <div className={`p-4 rounded-xl ${theme === 'dark' ? 'bg-black/20' : 'bg-gray-50'}`}>
-                <h4 className={`text-sm font-medium mb-3 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
-                  Price Information
-                </h4>
-                <div className="space-y-3">
-                  <div className="flex justify-between items-center">
-                    <span className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Current Price</span>
-                    <span className={`font-medium ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
-                      ${parseFloat(selectedStock.current_price || 0).toFixed(2)}
-                    </span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Target Price</span>
-                    <span className={`font-medium ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
-                      ${parseFloat(selectedStock.target_price || 0).toFixed(2)}
-                    </span>
-                  </div>
-                  <div className="flex justify-between items-center">
-                    <span className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Distance to Target</span>
-                    <Badge
-                      color={parseFloat(selectedStock.current_price || 0) >= parseFloat(selectedStock.target_price || 0) ? 'emerald' : 'red'}
-                      icon={parseFloat(selectedStock.current_price || 0) >= parseFloat(selectedStock.target_price || 0) ? HiTrendingUp : HiTrendingDown}
-                    >
-                      {(((parseFloat(selectedStock.current_price || 0) - parseFloat(selectedStock.target_price || 0)) / parseFloat(selectedStock.target_price || 1)) * 100).toFixed(1)}%
-                    </Badge>
-                  </div>
-                </div>
-              </div>
-
-              {/* Portfolio Status */}
-              <div className={`p-4 rounded-xl ${theme === 'dark' ? 'bg-black/20' : 'bg-gray-50'}`}>
-                <h4 className={`text-sm font-medium mb-3 ${theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}`}>
-                  Portfolio Status
-                </h4>
-                <div className="space-y-3">
-                  <div className="flex justify-between items-center">
-                    <span className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Shares Held</span>
-                    <span className={`font-medium ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
-                      {parseInt(selectedStock.shares || 0, 10)}
-                    </span>
-                  </div>
-                  {selectedStock.shares > 0 && (
-                    <>
-                      <div className="flex justify-between items-center">
-                        <span className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Buy Price</span>
-                        <span className={`font-medium ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
-                          ${parseFloat(selectedStock.buy_price || 0).toFixed(2)}
-                        </span>
-                      </div>
-                      <div className="flex justify-between items-center">
-                        <span className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Total Value</span>
-                        <span className={`font-medium ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
-                          ${(parseFloat(selectedStock.current_price || 0) * parseInt(selectedStock.shares || 0, 10)).toFixed(2)}
-                        </span>
-                      </div>
-                      <div className="flex justify-between items-center">
-                        <span className={theme === 'dark' ? 'text-gray-400' : 'text-gray-600'}>Profit/Loss</span>
-                        <Badge
-                          color={parseFloat(selectedStock.current_price || 0) >= parseFloat(selectedStock.buy_price || 0) ? 'emerald' : 'red'}
-                          icon={parseFloat(selectedStock.current_price || 0) >= parseFloat(selectedStock.buy_price || 0) ? HiTrendingUp : HiTrendingDown}
-                        >
-                          {(((parseFloat(selectedStock.current_price || 0) - parseFloat(selectedStock.buy_price || 0)) / parseFloat(selectedStock.buy_price || 1)) * 100).toFixed(1)}%
-                        </Badge>
-                      </div>
-                    </>
-                  )}
-                </div>
-              </div>
-            </div>
-
-            <div className="mt-4 flex justify-end gap-3">
-              <button
-                onClick={() => {
-                  setShowViewModal(false);
-                  setSelectedStock(null);
-                }}
-                className={`px-4 py-2 rounded-xl ${
+            {/* Stock Details */}
+            <div className="mt-4 grid grid-cols-2 gap-4">
+              <div className={`p-4 rounded-xl border-2 ${
                   theme === 'dark'
-                    ? 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-                    : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                }`}
-              >
-                Close
-              </button>
-              <button
-                onClick={() => {
-                  setShowViewModal(false);
-                  handleUpdateClick(selectedStock);
-                }}
-                className="px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700"
-              >
-                Update Target
-              </button>
-            </div>
-          </motion.div>
-        </div>
-      )}
-
-      {/* Update Stock Modal */}
-      {showUpdateModal && selectedStock && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
-          <motion.div
-            initial={{ scale: 0.9, opacity: 0 }}
-            animate={{ scale: 1, opacity: 1 }}
-            className={`w-full max-w-md p-6 rounded-2xl ${
-              theme === 'dark'
-                ? 'bg-[#1f1f1f] border border-white/10'
-                : 'bg-white border border-gray-200'
-            }`}
-          >
-            <h3 className={`text-lg font-medium mb-4 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
-              Update Target Price
-            </h3>
-            <form onSubmit={handleUpdateStock}>
-              <div className="space-y-4">
-                <div>
-                  <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-gray-400' : 'text-gray-700'}`}>
-                    Stock
-                  </label>
-                  <p className={`mt-1 font-medium ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
-                    {selectedStock.name} ({selectedStock.ticker})
-                  </p>
-                </div>
-                <div>
-                  <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-gray-400' : 'text-gray-700'}`}>
+                  ? 'bg-gray-800 border-gray-600' 
+                  : 'bg-white border-gray-200'
+              }`}>
+                <h5 className={`text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
                     Current Price
-                  </label>
-                  <p className={`mt-1 ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                </h5>
+                <p className={`text-2xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
                     ${parseFloat(selectedStock.current_price || 0).toFixed(2)}
                   </p>
                 </div>
-                <div>
-                  <label className={`block text-sm font-medium ${theme === 'dark' ? 'text-gray-400' : 'text-gray-700'}`}>
-                    New Target Price ($)
-                  </label>
-                  <input
-                    type="number"
-                    step="0.01"
-                    min="0"
-                    value={selectedStock.target_price}
-                    onChange={(e) => setSelectedStock({ ...selectedStock, target_price: e.target.value })}
-                    className={`mt-1 block w-full rounded-xl ${
+              <div className={`p-4 rounded-xl border-2 ${
                       theme === 'dark'
-                        ? 'bg-gray-800 border-gray-700 text-white'
-                        : 'bg-white border-gray-300'
-                    } shadow-sm focus:ring-blue-500 focus:border-blue-500`}
-                    required
-                  />
+                  ? 'bg-gray-800 border-gray-600' 
+                  : 'bg-white border-gray-200'
+              }`}>
+                <h5 className={`text-sm font-semibold mb-2 ${theme === 'dark' ? 'text-gray-300' : 'text-gray-700'}`}>
+                  Target Price
+                </h5>
+                <p className={`text-2xl font-bold ${theme === 'dark' ? 'text-white' : 'text-gray-900'}`}>
+                  ${parseFloat(selectedStock.target_price || 0).toFixed(2)}
+                </p>
                 </div>
               </div>
-              <div className="mt-6 flex justify-end space-x-3">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowUpdateModal(false);
-                    setSelectedStock(null);
-                  }}
-                  className={`px-4 py-2 rounded-xl ${
-                    theme === 'dark'
-                      ? 'bg-gray-800 text-gray-300 hover:bg-gray-700'
-                      : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
-                  }`}
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  className="px-4 py-2 bg-blue-600 text-white rounded-xl hover:bg-blue-700"
-                >
-                  Update Target
-                </button>
               </div>
-            </form>
-          </motion.div>
         </div>
       )}
     </motion.div>

From 3218b170a8f9e520a835051520c5d1aa6e2e63f4 Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 13:54:57 +0530
Subject: [PATCH 07/13] feat: update layout components and navigation with
 theme support

---
 src/App.jsx                               |  88 ++++++++++++---
 src/components/layout/DashboardLayout.jsx |  26 ++---
 src/components/layout/Sidebar.jsx         | 128 ++++------------------
 src/index.css                             |  10 ++
 4 files changed, 113 insertions(+), 139 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index 74f34bd..9b9575e 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -1,9 +1,17 @@
 import React, { useState, useEffect } from 'react';
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
-import Sidebar from './components/layout/Sidebar';
+import { AuthProvider } from './context/AuthContext';
+import ProtectedRoute from './components/auth/ProtectedRoute';
+import Homepage from './pages/Homepage';
+import DashboardLayout from './components/layout/DashboardLayout';
 import Dashboard from './pages/Dashboard';
 import Portfolio from './pages/Portfolio';
 import Watchlist from './pages/Watchlist';
+import Profile from './pages/Profile';
+import Settings from './pages/Settings';
+import StockDetail from './pages/StockDetail';
+import News from './pages/News';
+import MarketCalendar from './pages/MarketCalendar';
 
 export default function App() {
   const [theme, setTheme] = useState(localStorage.getItem('theme') || 'light');
@@ -39,17 +47,71 @@ export default function App() {
   }, [theme]);
 
   return (
-    <Router>
-      <div className={`flex h-screen ${theme === 'dark' ? 'bg-[#171717]' : 'bg-white'}`}>
-        <Sidebar theme={theme} />
-        <div className="flex-1 overflow-auto">
-          <Routes>
-            <Route path="/" element={<Dashboard theme={theme} />} />
-            <Route path="/portfolio" element={<Portfolio theme={theme} />} />
-            <Route path="/watchlist" element={<Watchlist theme={theme} />} />
-          </Routes>
-        </div>
-      </div>
-    </Router>
+    <AuthProvider>
+      <Router>
+        <Routes>
+          {/* Public routes */}
+          <Route path="/" element={<Homepage />} />
+          
+          {/* Protected dashboard routes */}
+          <Route path="/dashboard" element={
+            <ProtectedRoute>
+              <DashboardLayout theme={theme}>
+                <Dashboard theme={theme} />
+              </DashboardLayout>
+            </ProtectedRoute>
+          } />
+          <Route path="/portfolio" element={
+            <ProtectedRoute>
+              <DashboardLayout theme={theme}>
+                <Portfolio theme={theme} />
+              </DashboardLayout>
+            </ProtectedRoute>
+          } />
+          <Route path="/watchlist" element={
+            <ProtectedRoute>
+              <DashboardLayout theme={theme}>
+                <Watchlist theme={theme} />
+              </DashboardLayout>
+            </ProtectedRoute>
+          } />
+          <Route path="/profile" element={
+            <ProtectedRoute>
+              <DashboardLayout theme={theme}>
+                <Profile theme={theme} />
+              </DashboardLayout>
+            </ProtectedRoute>
+          } />
+          <Route path="/settings" element={
+            <ProtectedRoute>
+              <DashboardLayout theme={theme}>
+                <Settings theme={theme} />
+              </DashboardLayout>
+            </ProtectedRoute>
+          } />
+          <Route path="/stock/:id" element={
+            <ProtectedRoute>
+              <DashboardLayout theme={theme}>
+                <StockDetail theme={theme} />
+              </DashboardLayout>
+            </ProtectedRoute>
+          } />
+          <Route path="/news" element={
+            <ProtectedRoute>
+              <DashboardLayout theme={theme}>
+                <News theme={theme} />
+              </DashboardLayout>
+            </ProtectedRoute>
+          } />
+          <Route path="/calendar" element={
+            <ProtectedRoute>
+              <DashboardLayout theme={theme}>
+                <MarketCalendar theme={theme} />
+              </DashboardLayout>
+            </ProtectedRoute>
+          } />
+        </Routes>
+      </Router>
+    </AuthProvider>
   );
 }
diff --git a/src/components/layout/DashboardLayout.jsx b/src/components/layout/DashboardLayout.jsx
index 4e20194..e217a2f 100644
--- a/src/components/layout/DashboardLayout.jsx
+++ b/src/components/layout/DashboardLayout.jsx
@@ -1,23 +1,15 @@
-import { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import Sidebar from './Sidebar';
-import Navbar from './Navbar';
-
-export default function DashboardLayout({ children }) {
-  const [sidebarOpen, setSidebarOpen] = useState(false);
 
+const DashboardLayout = ({ children, theme }) => {
   return (
-    <div className="min-h-screen bg-gray-50">
-      <Sidebar open={sidebarOpen} setOpen={setSidebarOpen} />
-      
-      <div className="lg:pl-72">
-        <Navbar onMenuClick={() => setSidebarOpen(true)} />
-        
-        <main className="py-6">
-          <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
-            {children}
-          </div>
-        </main>
+    <div className={`flex h-screen ${theme === 'dark' ? 'bg-[#171717]' : 'bg-white'}`}>
+      <Sidebar theme={theme} />
+      <div className="flex-1 overflow-auto">
+        {children}
       </div>
     </div>
   );
-} 
\ No newline at end of file
+};
+
+export default DashboardLayout; 
\ No newline at end of file
diff --git a/src/components/layout/Sidebar.jsx b/src/components/layout/Sidebar.jsx
index 706dbdd..7366c8f 100644
--- a/src/components/layout/Sidebar.jsx
+++ b/src/components/layout/Sidebar.jsx
@@ -1,11 +1,14 @@
 import React, { useState } from 'react';
 import { motion } from 'framer-motion';
-import { Link, useLocation } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
+import { useAuth } from '../../context/AuthContext';
 import axios from 'axios';
 import { 
   HiHome, 
   HiChartBar, 
   HiStar,
+  HiNewspaper,
+  HiCalendar,
   HiChevronLeft,
   HiChevronRight,
   HiSun,
@@ -33,134 +36,41 @@ const LoadingOverlay = ({ message }) => (
 
 export default function Sidebar({ theme }) {
   const location = useLocation();
+  const navigate = useNavigate();
+  const { signOut } = useAuth();
   const [isExpanded, setIsExpanded] = useState(true);
   const [isLoading, setIsLoading] = useState(false);
   const [loadingMessage, setLoadingMessage] = useState('');
 
   const navItems = [
-    { path: '/', icon: HiHome, label: 'Dashboard' },
+    { path: '/dashboard', icon: HiHome, label: 'Dashboard' },
     { path: '/portfolio', icon: HiChartBar, label: 'Portfolio' },
-    { path: '/watchlist', icon: HiStar, label: 'Watchlist' }
+    { path: '/watchlist', icon: HiStar, label: 'Watchlist' },
+    { path: '/news', icon: HiNewspaper, label: 'News' },
+    { path: '/calendar', icon: HiCalendar, label: 'Calendar' }
   ];
 
-  const randomStocks = [
-    { name: 'Apple Inc.', ticker: 'AAPL', buy_price: 175.50, targetPrice: 200.00, current_price: 175.50 },
-    { name: 'Microsoft Corporation', ticker: 'MSFT', buy_price: 340.20, targetPrice: 380.00, current_price: 340.20 },
-    { name: 'Amazon.com Inc.', ticker: 'AMZN', buy_price: 125.30, targetPrice: 150.00, current_price: 125.30 },
-    { name: 'Alphabet Inc.', ticker: 'GOOGL', buy_price: 135.60, targetPrice: 160.00, current_price: 135.60 },
-    { name: 'NVIDIA Corporation', ticker: 'NVDA', buy_price: 450.80, targetPrice: 500.00, current_price: 450.80 },
-    { name: 'Meta Platforms Inc.', ticker: 'META', buy_price: 290.40, targetPrice: 320.00, current_price: 290.40 },
-    { name: 'Tesla Inc.', ticker: 'TSLA', buy_price: 240.50, targetPrice: 280.00, current_price: 240.50 },
-    { name: 'Netflix Inc.', ticker: 'NFLX', buy_price: 385.70, targetPrice: 420.00, current_price: 385.70 },
-    { name: 'Adobe Inc.', ticker: 'ADBE', buy_price: 420.30, targetPrice: 460.00, current_price: 420.30 },
-    { name: 'Salesforce Inc.', ticker: 'CRM', buy_price: 210.90, targetPrice: 240.00, current_price: 210.90 }
-  ];
+
 
   const handleLogout = async () => {
-    if (window.confirm('Are you sure you want to logout? This will reset your portfolio..')) {
+    if (window.confirm('Are you sure you want to logout?')) {
       try {
         setIsLoading(true);
-        setLoadingMessage('Resetting your portfolio...');
-
-        // Get all current stocks
-        const portfolioResponse = await api.get('/stocks');
-        const portfolioStocks = portfolioResponse.data || [];
+        setLoadingMessage('Logging out...');
         
-        console.log('Current portfolio stocks:', portfolioStocks);
-        
-        // Delete all current stocks if there are any
-        if (portfolioStocks.length > 0) {
-          await Promise.all(portfolioStocks.map(stock => 
-            api.delete(`/stocks/${stock.id}`)
-          ));
-          console.log('Successfully deleted all portfolio stocks');
+        const { error } = await signOut();
+        if (error) {
+          throw error;
         }
-
-        // Shuffle and pick 5 random stocks
-        const shuffled = [...randomStocks].sort(() => 0.5 - Math.random());
-        const selectedStocks = shuffled.slice(0, 5);
-        console.log('Selected stocks to add:', selectedStocks);
-
-        // Keep track of successful and failed additions
-        const results = {
-          successful: [],
-          failed: []
-        };
-
-        // Add the random stocks one by one
-        for (const stock of selectedStocks) {
-          try {
-            console.log('Adding stock:', stock);
-            
-            // Add to portfolio with all required fields
-            const portfolioStock = {
-              name: stock.name,
-              ticker: stock.ticker,
-              shares: 1,
-              buy_price: parseFloat(stock.buy_price),
-              current_price: parseFloat(stock.current_price),
-              target_price: parseFloat(stock.targetPrice)
-            };
-            
-            // Add to portfolio
-            const response = await api.post('/stocks', portfolioStock);
-            console.log(`Successfully added stock ${stock.ticker}`);
-            results.successful.push(stock.ticker);
-          } catch (error) {
-            console.error(`Error adding stock ${stock.ticker}:`, error);
-            results.failed.push(stock.ticker);
-            
-            // If a stock fails, try to add a different one from our list
-            const remainingStocks = randomStocks.filter(s => 
-              !selectedStocks.includes(s) && 
-              !results.successful.includes(s.ticker) && 
-              !results.failed.includes(s.ticker)
-            );
-            
-            if (remainingStocks.length > 0) {
-              const replacementStock = remainingStocks[0];
-              console.log(`Trying replacement stock: ${replacementStock.ticker}`);
-              try {
-                const portfolioStock = {
-                  name: replacementStock.name,
-                  ticker: replacementStock.ticker,
-                  shares: 1,
-                  buy_price: parseFloat(replacementStock.buy_price),
-                  current_price: parseFloat(replacementStock.current_price),
-                  target_price: parseFloat(replacementStock.targetPrice)
-                };
-                
-                const response = await api.post('/stocks', portfolioStock);
-                console.log(`Successfully added replacement stock ${replacementStock.ticker}`);
-                results.successful.push(replacementStock.ticker);
-              } catch (retryError) {
-                console.error(`Error adding replacement stock ${replacementStock.ticker}:`, retryError);
-                results.failed.push(replacementStock.ticker);
-              }
-            }
-          }
-        }
-
-        // Check if we have 5 successful additions
-        if (results.successful.length === 5) {
-          console.log('Successfully added all 5 stocks:', results.successful);
-        } else {
-          console.warn(`Only added ${results.successful.length} stocks successfully:`, results.successful);
-          console.warn('Failed stocks:', results.failed);
-          throw new Error(`Could only add ${results.successful.length} out of 5 stocks`);
-        }
-
-        // Small delay before refreshing
-        await new Promise(resolve => setTimeout(resolve, 1000));
         
-        // Refresh the page
-        window.location.reload();
+        // Navigate to homepage
+        navigate('/');
       } catch (error) {
         console.error('Error during logout:', error);
         setLoadingMessage('Error occurred. Please try again.');
         await new Promise(resolve => setTimeout(resolve, 2000));
         setIsLoading(false);
-        alert(error.message || 'Failed to logout. Please try again.');
+        alert('Failed to logout. Please try again.');
       }
     }
   };
diff --git a/src/index.css b/src/index.css
index 3c0aa88..d6df601 100644
--- a/src/index.css
+++ b/src/index.css
@@ -2,6 +2,16 @@
 @tailwind components;
 @tailwind utilities;
 
+.no-visible-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+  -webkit-overflow-scrolling: touch;
+}
+
+.no-visible-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
 :root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

From c38b789d7f29edced838139d277ed46a7d347766 Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 13:55:13 +0530
Subject: [PATCH 08/13] feat: update backend configuration and database models
 for Supabase integration

---
 backend/package-lock.json                     | 157 +++++++++++++++++-
 backend/package.json                          |   9 +-
 backend/src/config/database.js                |  51 +++---
 backend/src/config/finnhub.js                 |   6 +-
 .../migrations/20240115_create_watchlist.js   |  16 ++
 backend/src/migrations/init.js                |  35 +---
 backend/src/models/Stock.js                   | 131 ++++++++++-----
 backend/src/models/Watchlist.js               |  91 ++++++----
 8 files changed, 347 insertions(+), 149 deletions(-)

diff --git a/backend/package-lock.json b/backend/package-lock.json
index 1913023..9243bed 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -8,9 +8,10 @@
       "name": "portfolio-tracker-backend",
       "version": "1.0.0",
       "dependencies": {
+        "@supabase/supabase-js": "^2.52.0",
         "axios": "^1.6.2",
         "cors": "^2.8.5",
-        "dotenv": "^16.3.1",
+        "dotenv": "^16.6.1",
         "express": "^4.18.2",
         "mysql2": "^3.11.5",
         "sequelize": "^6.37.5"
@@ -19,6 +20,81 @@
         "nodemon": "^3.0.2"
       }
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.71.1",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.71.1.tgz",
+      "integrity": "sha512-mMIQHBRc+SKpZFRB2qtupuzulaUhFYupNyxqDj5Jp/LyPvcWvjaJzZzObv6URtL/O6lPxkanASnotGtNpS3H2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.4.5.tgz",
+      "integrity": "sha512-v5GSqb9zbosquTo6gBwIiq7W9eQ7rE5QazsK/ezNiQXdCbY+bH8D9qEaBIkhVvX4ZRW5rP03gEfw5yw9tiq4EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/node-fetch": {
+      "version": "2.6.15",
+      "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
+      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "1.19.4",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.19.4.tgz",
+      "integrity": "sha512-O4soKqKtZIW3olqmbXXbKugUtByD2jPa8kL2m2c1oozAO11uCcGrRhkZL0kVxjBLrXHE0mdSkFsMj7jDSfyNpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.11.15",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.11.15.tgz",
+      "integrity": "sha512-HQKRnwAqdVqJW/P9TjKVK+/ETpW4yQ8tyDPPtRMKOH4Uh3vQD74vmj353CYs8+YwVBKubeUOOEpI9CT8mT4obw==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.13",
+        "@types/phoenix": "^1.6.6",
+        "@types/ws": "^8.18.1",
+        "isows": "^1.0.7",
+        "ws": "^8.18.2"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.7.1.tgz",
+      "integrity": "sha512-asYHcyDR1fKqrMpytAS1zjyEfvxuOIp1CIXX7ji4lHHcJKqyk+sLl/Vxgm4sN6u8zvuUtae9e4kDxQP2qrwWBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.52.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.52.0.tgz",
+      "integrity": "sha512-jbs3CV1f2+ge7sgBeEduboT9v/uGjF22v0yWi/5/XFn5tbM8MfWRccsMtsDwAwu24XK8H6wt2LJDiNnZLtx/bg==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.71.1",
+        "@supabase/functions-js": "2.4.5",
+        "@supabase/node-fetch": "2.6.15",
+        "@supabase/postgrest-js": "1.19.4",
+        "@supabase/realtime-js": "2.11.15",
+        "@supabase/storage-js": "2.7.1"
+      }
+    },
     "node_modules/@types/debug": {
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
@@ -43,12 +119,27 @@
         "undici-types": "~6.20.0"
       }
     },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
+      "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==",
+      "license": "MIT"
+    },
     "node_modules/@types/validator": {
       "version": "13.12.2",
       "resolved": "https://registry.npmjs.org/@types/validator/-/validator-13.12.2.tgz",
       "integrity": "sha512-6SlHBzUW8Jhf3liqrGGXyTJSIFe4nqlJ5A5KaMZ2l/vbM3Wh3KSybots/wfWVzNLK4D1NZluDlSQIbIEPx6oyA==",
       "license": "MIT"
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/accepts": {
       "version": "1.3.8",
       "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
@@ -354,9 +445,9 @@
       }
     },
     "node_modules/dotenv": {
-      "version": "16.4.7",
-      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.4.7.tgz",
-      "integrity": "sha512-47qPchRCykZC03FhkYAhrvwU4xDBFIj1QPqaarj6mdM/hgUzfPHcpkHJOn3mJAufFeeAxAzeGsr5X0M4k6fLZQ==",
+      "version": "16.6.1",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
+      "integrity": "sha512-uBq4egWHTcTt33a72vpSG0z3HnPuIl6NqYcTrKEg2azoEyl2hpW0zqlxysq2pK9HlDIHyHyakeYaYnSAwd8bow==",
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=12"
@@ -801,6 +892,21 @@
       "integrity": "sha512-Ks/IoX00TtClbGQr4TWXemAnktAQvYB7HzcCxDGqEZU6oCmb2INHuOoKxbtR+HFkmYWBKv/dOZtGRiAjDhj92g==",
       "license": "MIT"
     },
+    "node_modules/isows": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/isows/-/isows-1.0.7.tgz",
+      "integrity": "sha512-I1fSfDCZL5P0v33sVqeTDSpcstAg/N+wF5HS033mogOVIp4B+oHC7oOCsA3axAbBSGTJ8QubbNmnIRN/h8U7hg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/wevm"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "ws": "*"
+      }
+    },
     "node_modules/lodash": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
@@ -1565,6 +1671,12 @@
         "nodetouch": "bin/nodetouch.js"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
     "node_modules/type-is": {
       "version": "1.6.18",
       "resolved": "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz",
@@ -1636,6 +1748,22 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/wkx": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/wkx/-/wkx-0.5.0.tgz",
@@ -1644,6 +1772,27 @@
       "dependencies": {
         "@types/node": "*"
       }
+    },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/backend/package.json b/backend/package.json
index d39c9b4..73a3679 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -5,15 +5,16 @@
   "main": "src/server.js",
   "scripts": {
     "start": "node src/server.js",
-    "dev": "nodemon src/server.js"
+    "dev": "nodemon src/server.js",
+    "init-db": "node init-db.js",
+    "clean-db": "node clean-database.js"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.39.7",
     "axios": "^1.6.2",
     "cors": "^2.8.5",
     "dotenv": "^16.3.1",
-    "express": "^4.18.2",
-    "mysql2": "^3.11.5",
-    "sequelize": "^6.37.5"
+    "express": "^4.18.2"
   },
   "devDependencies": {
     "nodemon": "^3.0.2"
diff --git a/backend/src/config/database.js b/backend/src/config/database.js
index e84d25c..accf209 100644
--- a/backend/src/config/database.js
+++ b/backend/src/config/database.js
@@ -1,42 +1,29 @@
-const { Sequelize } = require('sequelize');
+const { createClient } = require('@supabase/supabase-js');
 require('dotenv').config();
 
-let sequelize;
+const SUPABASE_URL = process.env.SUPABASE_URL;
+const SUPABASE_KEY = process.env.SUPABASE_KEY;
 
-if (process.env.DATABASE_URL) {
-  // Production configuration for Railway
-  sequelize = new Sequelize(process.env.DATABASE_URL, {
-    dialect: 'mysql',
-    dialectOptions: {
-      ssl: {
-        require: true,
-        rejectUnauthorized: false
-      }
-    },
-    logging: false
-  });
-} else {
-  // Local configuration
-  sequelize = new Sequelize(process.env.DB_NAME, process.env.DB_USER, process.env.DB_PASSWORD, {
-    host: process.env.DB_HOST,
-    dialect: 'mysql',
-    logging: console.log,
-    pool: {
-      max: 5,
-      min: 0,
-      acquire: 30000,
-      idle: 10000
-    }
-  });
+if (!SUPABASE_URL || !SUPABASE_KEY) {
+  console.warn('SUPABASE_URL or SUPABASE_KEY environment variables are not set. Some features will be limited.');
 }
 
+const supabase = createClient(
+  SUPABASE_URL || 'https://example.supabase.co',
+  SUPABASE_KEY || 'demo-key'
+);
+
 // Test the connection
-sequelize.authenticate()
-  .then(() => {
-    console.log('Database connection has been established successfully.');
+supabase.from('stocks').select('count', { count: 'exact', head: true })
+  .then(({ count, error }) => {
+    if (error) {
+      console.error('Unable to connect to Supabase:', error);
+    } else {
+      console.log('Supabase connection has been established successfully.');
+    }
   })
   .catch(err => {
-    console.error('Unable to connect to the database:', err);
+    console.error('Unable to connect to Supabase:', err);
   });
 
-module.exports = sequelize; 
\ No newline at end of file
+module.exports = supabase; 
\ No newline at end of file
diff --git a/backend/src/config/finnhub.js b/backend/src/config/finnhub.js
index 45046a7..6936742 100644
--- a/backend/src/config/finnhub.js
+++ b/backend/src/config/finnhub.js
@@ -3,11 +3,11 @@ require('dotenv').config();
 const FINNHUB_API_KEY = process.env.FINNHUB_API_KEY;
 
 if (!FINNHUB_API_KEY) {
-  console.error('FINNHUB_API_KEY environment variable is not set');
-  process.exit(1);
+  console.warn('FINNHUB_API_KEY environment variable is not set. Some features will be limited.');
+  // We'll continue running but with limited functionality
 }
 
 module.exports = {
-  API_KEY: FINNHUB_API_KEY,
+  API_KEY: FINNHUB_API_KEY || 'demo', // Use 'demo' as a fallback
   BASE_URL: 'https://finnhub.io/api/v1'
 }; 
diff --git a/backend/src/migrations/20240115_create_watchlist.js b/backend/src/migrations/20240115_create_watchlist.js
index b619a01..b0421fa 100644
--- a/backend/src/migrations/20240115_create_watchlist.js
+++ b/backend/src/migrations/20240115_create_watchlist.js
@@ -1,3 +1,8 @@
+// This migration file is for Sequelize and is not used with Supabase
+// For Supabase, tables are created through the Supabase dashboard or SQL migrations
+// See supabase-schema.sql for the actual table creation
+
+/*
 const { DataTypes } = require('sequelize');
 
 module.exports = {
@@ -44,4 +49,15 @@ module.exports = {
   down: async (queryInterface, Sequelize) => {
     await queryInterface.dropTable('watchlists');
   }
+};
+*/
+
+// Supabase migration placeholder
+module.exports = {
+  up: async () => {
+    console.log('Migration not needed for Supabase - tables are managed separately');
+  },
+  down: async () => {
+    console.log('Migration not needed for Supabase - tables are managed separately');
+  }
 }; 
\ No newline at end of file
diff --git a/backend/src/migrations/init.js b/backend/src/migrations/init.js
index d215eb6..0c36320 100644
--- a/backend/src/migrations/init.js
+++ b/backend/src/migrations/init.js
@@ -1,34 +1,13 @@
-const Stock = require('../models/Stock');
-const sequelize = require('../config/database');
+const supabase = require('../config/supabase');
 
 async function initializeDatabase() {
   try {
-    // Sync all models with the database
-    await sequelize.sync({ force: true });
-    console.log('Database tables created successfully');
-
-    // Create some initial stocks for testing
-    await Stock.bulkCreate([
-      {
-        name: 'Apple Inc.',
-        ticker: 'AAPL',
-        shares: 10,
-        buy_price: 150.00,
-        current_price: 155.00,
-        target_price: 180.00,
-        is_in_watchlist: false
-      },
-      {
-        name: 'Microsoft Corporation',
-        ticker: 'MSFT',
-        shares: 5,
-        buy_price: 280.00,
-        current_price: 290.00,
-        target_price: 320.00,
-        is_in_watchlist: false
-      }
-    ]);
-    console.log('Initial stocks created successfully');
+    console.log('Database initialization not needed for Supabase - tables are managed separately');
+    
+    // Note: For Supabase, tables are created through the Supabase dashboard or SQL migrations
+    // This function is kept for compatibility but doesn't need to do anything
+    
+    console.log('Database initialization completed');
 
   } catch (error) {
     console.error('Error initializing database:', error);
diff --git a/backend/src/models/Stock.js b/backend/src/models/Stock.js
index 113962b..44b3cf9 100644
--- a/backend/src/models/Stock.js
+++ b/backend/src/models/Stock.js
@@ -1,53 +1,92 @@
-const { DataTypes } = require('sequelize');
-const sequelize = require('../config/database');
+const supabase = require('../config/supabase');
 
-const Stock = sequelize.define('Stock', {
-  id: {
-    type: DataTypes.INTEGER,
-    primaryKey: true,
-    autoIncrement: true
-  },
-  name: {
-    type: DataTypes.STRING,
-    allowNull: false
-  },
-  ticker: {
-    type: DataTypes.STRING,
-    allowNull: false
-  },
-  shares: {
-    type: DataTypes.FLOAT,
-    allowNull: false,
-    defaultValue: 0
-  },
-  buy_price: {
-    type: DataTypes.FLOAT,
-    allowNull: false,
-    defaultValue: 0
-  },
-  current_price: {
-    type: DataTypes.FLOAT,
-    allowNull: false,
-    defaultValue: 0
+const Stock = {
+  async findAll(options = {}) {
+    let query = supabase.from('stocks').select('*');
+    
+    if (options.where) {
+      // Handle where clauses
+      Object.entries(options.where).forEach(([key, value]) => {
+        if (typeof value === 'object' && value !== null) {
+          // Handle operators like Op.gt
+          if (value.hasOwnProperty('gt')) {
+            query = query.gt(key, value.gt);
+          } else if (value.hasOwnProperty('lt')) {
+            query = query.lt(key, value.lt);
+          }
+          // Add more operators as needed
+        } else {
+          // Simple equality
+          query = query.eq(key, value);
+        }
+      });
+    }
+
+    if (options.order) {
+      // Handle order clauses - Supabase uses orderBy instead of order
+      options.order.forEach(([column, direction]) => {
+        query = query.order(column, { ascending: direction === 'ASC' });
+      });
+    }
+
+    const { data, error } = await query;
+    
+    if (error) throw error;
+    return data || [];
   },
-  target_price: {
-    type: DataTypes.FLOAT,
-    allowNull: false,
-    defaultValue: 0
+
+  async findByPk(id) {
+    const { data, error } = await supabase
+      .from('stocks')
+      .select('*')
+      .eq('id', id)
+      .single();
+    
+    if (error) throw error;
+    return data ? {
+      ...data,
+      update: async (values) => {
+        const { data: updatedData, error: updateError } = await supabase
+          .from('stocks')
+          .update(values)
+          .eq('id', id)
+          .select()
+          .single();
+        
+        if (updateError) throw updateError;
+        return updatedData;
+      },
+      destroy: async () => {
+        const { error: deleteError } = await supabase
+          .from('stocks')
+          .delete()
+          .eq('id', id);
+        
+        if (deleteError) throw deleteError;
+        return true;
+      }
+    } : null;
   },
-  is_in_watchlist: {
-    type: DataTypes.BOOLEAN,
-    allowNull: false,
-    defaultValue: false
+
+  async create(values) {
+    const { data, error } = await supabase
+      .from('stocks')
+      .insert([values])
+      .select()
+      .single();
+    
+    if (error) throw error;
+    return data;
   },
-  last_updated: {
-    type: DataTypes.DATE,
-    allowNull: false,
-    defaultValue: DataTypes.NOW
+
+  async count() {
+    const { count, error } = await supabase
+      .from('stocks')
+      .select('*', { count: 'exact', head: true });
+    
+    if (error) throw error;
+    return count || 0;
   }
-}, {
-  timestamps: true,
-  tableName: 'stocks'
-});
+};
 
 module.exports = Stock; 
\ No newline at end of file
diff --git a/backend/src/models/Watchlist.js b/backend/src/models/Watchlist.js
index 6c446b8..196215d 100644
--- a/backend/src/models/Watchlist.js
+++ b/backend/src/models/Watchlist.js
@@ -1,38 +1,65 @@
-const { DataTypes } = require('sequelize');
-const sequelize = require('../config/database');
+const supabase = require('../config/supabase');
 
-const Watchlist = sequelize.define('Watchlist', {
-  id: {
-    type: DataTypes.INTEGER,
-    primaryKey: true,
-    autoIncrement: true
+const Watchlist = {
+  async findAll() {
+    const { data, error } = await supabase
+      .from('watchlists')
+      .select('*');
+    
+    if (error) throw error;
+    return data || [];
   },
-  name: {
-    type: DataTypes.STRING,
-    allowNull: false
-  },
-  ticker: {
-    type: DataTypes.STRING,
-    allowNull: false
-  },
-  target_price: {
-    type: DataTypes.DECIMAL(10, 2),
-    allowNull: false
-  },
-  current_price: {
-    type: DataTypes.DECIMAL(10, 2),
-    allowNull: true
+
+  async findByPk(id) {
+    const { data, error } = await supabase
+      .from('watchlists')
+      .select('*')
+      .eq('id', id)
+      .single();
+    
+    if (error) throw error;
+    return data ? {
+      ...data,
+      update: async (values) => {
+        const { data: updatedData, error: updateError } = await supabase
+          .from('watchlists')
+          .update(values)
+          .eq('id', id)
+          .select()
+          .single();
+        
+        if (updateError) throw updateError;
+        return updatedData;
+      },
+      destroy: async () => {
+        const { error: deleteError } = await supabase
+          .from('watchlists')
+          .delete()
+          .eq('id', id);
+        
+        if (deleteError) throw deleteError;
+        return true;
+      }
+    } : null;
   },
-  last_updated: {
-    type: DataTypes.DATE,
-    allowNull: true
+
+  async create(values) {
+    // Add timestamps if they don't exist
+    const dataToInsert = {
+      ...values,
+      created_at: values.created_at || new Date().toISOString(),
+      updated_at: values.updated_at || new Date().toISOString()
+    };
+
+    const { data, error } = await supabase
+      .from('watchlists')
+      .insert([dataToInsert])
+      .select()
+      .single();
+    
+    if (error) throw error;
+    return data;
   }
-}, {
-  tableName: 'watchlists',
-  underscored: true,
-  timestamps: true,
-  createdAt: 'created_at',
-  updatedAt: 'updated_at'
-});
+};
 
 module.exports = Watchlist; 
\ No newline at end of file

From d3012928d6c9a6184eff0d09a96c5f32b38a096b Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 13:55:56 +0530
Subject: [PATCH 09/13] docs: add comprehensive setup documentation and
 environment configuration

---
 .env.example               |   6 ++
 EMAIL_TEMPLATES_SETUP.md   | 202 ++++++++++++++++++++++++++++++++++
 README.md                  |  22 ++--
 SUPABASE_AUTH_SETUP.md     | 124 +++++++++++++++++++++
 USER_SETUP_INSTRUCTIONS.md | 216 +++++++++++++++++++++++++++++++++++++
 5 files changed, 560 insertions(+), 10 deletions(-)
 create mode 100644 .env.example
 create mode 100644 EMAIL_TEMPLATES_SETUP.md
 create mode 100644 SUPABASE_AUTH_SETUP.md
 create mode 100644 USER_SETUP_INSTRUCTIONS.md

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..f529a35
--- /dev/null
+++ b/.env.example
@@ -0,0 +1,6 @@
+# Supabase Configuration
+VITE_SUPABASE_URL=your_supabase_project_url
+VITE_SUPABASE_ANON_KEY=your_supabase_anon_key
+
+# API Configuration
+VITE_API_BASE_URL=https://portfolio-tracker-backend-y7ne.onrender.com/api 
\ No newline at end of file
diff --git a/EMAIL_TEMPLATES_SETUP.md b/EMAIL_TEMPLATES_SETUP.md
new file mode 100644
index 0000000..33aeb1c
--- /dev/null
+++ b/EMAIL_TEMPLATES_SETUP.md
@@ -0,0 +1,202 @@
+# 📧 Email Templates Setup Guide
+
+This guide will help you implement the beautiful, aesthetic email templates for your Portfolio Tracker project in Supabase.
+
+## 🎨 Template Overview
+
+We've created three stunning email templates:
+
+1. **Confirm Signup** - Welcome new users with feature highlights
+2. **Reset Password** - Secure password reset with security tips
+3. **Magic Link** - Passwordless authentication with benefits showcase
+
+## 🚀 Implementation Steps
+
+### Step 1: Access Supabase Email Templates
+
+1. Go to your [Supabase Dashboard](https://supabase.com/dashboard)
+2. Select your Portfolio Tracker project
+3. Navigate to **Authentication** → **Email Templates**
+
+### Step 2: Configure Confirm Signup Template
+
+1. Click on **"Confirm signup"** template
+2. Replace the default content with the content from `email-templates/confirm-signup.html`
+3. **Important**: Replace `{{ .Email }}` with `{{ .Email }}` (Supabase uses this format)
+4. Replace `{{ .ConfirmationURL }}` with `{{ .ConfirmationURL }}`
+5. Click **Save**
+
+### Step 3: Configure Reset Password Template
+
+1. Click on **"Reset password"** template
+2. Replace the default content with the content from `email-templates/reset-password.html`
+3. Replace `{{ .Email }}` with `{{ .Email }}`
+4. Replace `{{ .ConfirmationURL }}` with `{{ .ConfirmationURL }}`
+5. Click **Save**
+
+### Step 4: Configure Magic Link Template
+
+1. Click on **"Magic link"** template
+2. Replace the default content with the content from `email-templates/magic-link.html`
+3. Replace `{{ .Email }}` with `{{ .Email }}`
+4. Replace `{{ .ConfirmationURL }}` with `{{ .ConfirmationURL }}`
+5. Click **Save**
+
+## 🎯 Template Features
+
+### ✨ Design Highlights
+
+- **Modern Gradient Headers**: Each template has a unique color scheme
+- **Responsive Design**: Works perfectly on mobile and desktop
+- **Brand Consistency**: Matches your Portfolio Tracker theme
+- **Professional Typography**: Clean, readable fonts
+- **Interactive Elements**: Hover effects and smooth transitions
+
+### 🔧 Customization Options
+
+#### Colors & Branding
+- **Confirm Signup**: Blue gradient (#3b82f6 to #1d4ed8)
+- **Reset Password**: Red gradient (#ef4444 to #dc2626)
+- **Magic Link**: Purple gradient (#8b5cf6 to #7c3aed)
+
+#### Content Sections
+- **Welcome Messages**: Personalized greetings
+- **Feature Highlights**: Showcase key benefits
+- **Security Information**: Important safety reminders
+- **Call-to-Action Buttons**: Clear, prominent CTAs
+- **Footer Links**: Support and social media
+
+## 📱 Mobile Optimization
+
+All templates are fully responsive and include:
+- Mobile-first design approach
+- Optimized typography for small screens
+- Touch-friendly button sizes
+- Proper spacing for mobile viewing
+
+## 🔒 Security Features
+
+### Built-in Security Elements
+- **Expiration Notices**: Clear time limits for links
+- **Security Warnings**: Alerts for unintended requests
+- **Privacy Information**: Data protection notices
+- **Support Contacts**: Easy access to help
+
+### Template Variables
+- `{{ .Email }}` - User's email address
+- `{{ .ConfirmationURL }}` - Secure confirmation link
+- `{{ .TokenHash }}` - Security token (if needed)
+- `{{ .SiteURL }}` - Your application URL
+
+## 🎨 Customization Guide
+
+### Changing Colors
+To modify the color scheme, update these CSS variables:
+
+```css
+/* Confirm Signup - Blue Theme */
+background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+
+/* Reset Password - Red Theme */
+background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+
+/* Magic Link - Purple Theme */
+background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+```
+
+### Updating Content
+- **Company Name**: Replace "Portfolio Tracker" with your brand
+- **Support Email**: Update `support@portfoliotracker.com`
+- **Social Links**: Add your actual social media URLs
+- **Features**: Customize the feature highlights for your app
+
+### Adding Your Logo
+Replace the SVG icon in the header with your actual logo:
+
+```html
+<div class="logo">
+    <!-- Replace with your logo -->
+    <img src="your-logo-url.png" alt="Your Brand" style="width: 32px; height: 32px;">
+</div>
+```
+
+## 📊 Testing Your Templates
+
+### 1. Enable Email Confirmations
+1. Go to **Authentication** → **Settings**
+2. Enable **"Enable email confirmations"**
+3. Set **Site URL** to your domain
+4. Add redirect URLs for your app
+
+### 2. Test Each Template
+1. **Signup Test**: Create a new account
+2. **Password Reset Test**: Use "Forgot Password" feature
+3. **Magic Link Test**: Enable magic link authentication
+
+### 3. Preview Templates
+Use Supabase's built-in preview feature to see how templates look before sending.
+
+## 🚨 Troubleshooting
+
+### Common Issues
+
+#### Template Not Loading
+- Check for syntax errors in HTML
+- Ensure all CSS is properly formatted
+- Verify template variables are correct
+
+#### Styling Issues
+- Test in different email clients
+- Use inline CSS for better compatibility
+- Avoid complex CSS animations
+
+#### Links Not Working
+- Verify `{{ .ConfirmationURL }}` is properly set
+- Check redirect URLs in Supabase settings
+- Test link expiration times
+
+### Email Client Compatibility
+- **Gmail**: Full support
+- **Outlook**: Good support (some CSS limitations)
+- **Apple Mail**: Full support
+- **Mobile Apps**: Responsive design works well
+
+## 📈 Best Practices
+
+### Content Guidelines
+- Keep subject lines under 50 characters
+- Use clear, action-oriented language
+- Include your brand name in subject lines
+- Test with different email addresses
+
+### Design Guidelines
+- Use high contrast for readability
+- Keep images under 1MB
+- Use web-safe fonts as fallbacks
+- Test on multiple devices
+
+### Security Guidelines
+- Never include sensitive data in emails
+- Use HTTPS for all links
+- Implement proper link expiration
+- Monitor for suspicious activity
+
+## 🎉 Success Metrics
+
+Track these metrics to measure template effectiveness:
+- **Open Rates**: Aim for 20-30%
+- **Click-Through Rates**: Target 2-5%
+- **Conversion Rates**: Measure signup completions
+- **Bounce Rates**: Keep under 5%
+
+## 📞 Support
+
+If you need help with the templates:
+1. Check the Supabase documentation
+2. Review email client compatibility guides
+3. Test with different email providers
+4. Contact Supabase support if needed
+
+---
+
+**🎨 Your Portfolio Tracker now has beautiful, professional email templates that will enhance user experience and build trust with your users!** 
\ No newline at end of file
diff --git a/README.md b/README.md
index 4098128..a3796a5 100644
--- a/README.md
+++ b/README.md
@@ -6,7 +6,7 @@
 [![Render](https://img.shields.io/badge/Render-46E3B7?style=for-the-badge&logo=render&logoColor=white)](https://portfolio-tracker-backend-y7ne.onrender.com/api)
 [![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/)
 [![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)](https://vitejs.dev/)
-[![MySQL](https://img.shields.io/badge/MySQL-4479A1?style=for-the-badge&logo=mysql&logoColor=white)](https://www.mysql.com/)
+[![Supabase](https://img.shields.io/badge/Supabase-3ECF8E?style=for-the-badge&logo=supabase&logoColor=white)](https://supabase.com/)
 [![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
 [![Node.js](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white)](https://nodejs.org/)
 [![Finnhub](https://img.shields.io/badge/Finnhub-1B1B1B?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyA2aDJsMTUgMk0xNyA2djE0TTcgMTZoMTAiLz48L3N2Zz4=)](https://finnhub.io/)
@@ -41,7 +41,7 @@
 
 - Node.js 14+
 - npm or yarn
-- MySQL
+- Supabase account
 - Finnhub API Key (get one at [finnhub.io](https://finnhub.io/))
 
 ### Frontend Setup
@@ -73,15 +73,18 @@ npm install
 
 2. Configure `.env`:
 ```env
-DATABASE_URL=mysql://user:password@localhost:3306/portfolio_tracker
+SUPABASE_URL=your_supabase_url
+SUPABASE_KEY=your_supabase_anon_key
 PORT=5000
-NODE_ENV=development
 FINNHUB_API_KEY=your_finnhub_api_key
 ```
 
-3. Run migrations and start:
+3. Set up Supabase:
+   - Follow the instructions in `backend/SUPABASE_SETUP.md`
+
+4. Test connection and start:
 ```bash
-npm run migrate
+npm run init-db
 npm start
 ```
 
@@ -142,8 +145,7 @@ Visit our [API Documentation](https://hackstyx.github.io/portfolio-tracker/)
 ### 🛠 Backend
 - **Runtime**: [Node.js](https://nodejs.org/) - JavaScript runtime
 - **Framework**: [Express](https://expressjs.com/) - Web framework for Node.js
-- **Database**: [MySQL](https://www.mysql.com/) - Open-source relational database
-- **ORM**: [Sequelize](https://sequelize.org/) - Modern TypeScript and Node.js ORM
+- **Database**: [Supabase](https://supabase.com/) - Open source Firebase alternative
 - **Market Data**: [Finnhub](https://finnhub.io/) - Real-time RESTful APIs for stocks
 - **API Documentation**: [Github Pages](https://hackstyx.github.io/portfolio-tracker/)
 
@@ -156,8 +158,8 @@ Visit our [API Documentation](https://hackstyx.github.io/portfolio-tracker/)
   - Containerized deployment
   - Automatic scaling
   - Built-in monitoring
-- **Database Hosting**: [Railway](https://railway.app/)
-  - Managed MySQL database
+- **Database Hosting**: [Supabase](https://supabase.com/)
+  - PostgreSQL database
   - Automated backups
   - High availability
 
diff --git a/SUPABASE_AUTH_SETUP.md b/SUPABASE_AUTH_SETUP.md
new file mode 100644
index 0000000..264f1dd
--- /dev/null
+++ b/SUPABASE_AUTH_SETUP.md
@@ -0,0 +1,124 @@
+# Supabase Authentication Setup
+
+This guide will help you set up Supabase authentication for the Portfolio Tracker application.
+
+## Prerequisites
+
+1. A Supabase account (sign up at [supabase.com](https://supabase.com))
+2. A Supabase project created
+
+## Setup Steps
+
+### 1. Create a Supabase Project
+
+1. Go to [supabase.com](https://supabase.com) and sign in
+2. Click "New Project"
+3. Choose your organization
+4. Enter a project name (e.g., "portfolio-tracker")
+5. Enter a database password
+6. Choose a region close to your users
+7. Click "Create new project"
+
+### 2. Get Your Project Credentials
+
+1. In your Supabase dashboard, go to Settings > API
+2. Copy the following values:
+   - **Project URL** (looks like: `https://your-project-id.supabase.co`)
+   - **anon public** key (starts with `eyJ...`)
+
+### 3. Configure Environment Variables
+
+1. Create a `.env` file in the root of your project
+2. Add the following variables:
+
+```env
+VITE_SUPABASE_URL=https://your-project-id.supabase.co
+VITE_SUPABASE_ANON_KEY=your_anon_key_here
+VITE_API_BASE_URL=https://portfolio-tracker-backend-y7ne.onrender.com/api
+```
+
+### 4. Configure Authentication Settings
+
+1. In your Supabase dashboard, go to Authentication > Settings
+2. Configure the following:
+
+#### Site URL
+- Set to `http://localhost:5173` for development
+- Set to your production URL for production
+
+#### Redirect URLs
+Add these redirect URLs:
+- `http://localhost:5173/dashboard`
+- `http://localhost:5173/`
+- Your production URLs when deployed
+
+### 5. Email Templates (Optional)
+
+1. Go to Authentication > Email Templates
+2. Customize the email templates for:
+   - Confirm signup
+   - Reset password
+   - Magic link
+
+### 6. Enable Email Confirmation (Recommended)
+
+1. Go to Authentication > Settings
+2. Enable "Enable email confirmations"
+3. This ensures users verify their email before accessing the app
+
+## Features Implemented
+
+### Authentication Functions
+- **Sign Up**: Users can create accounts with email, password, and name
+- **Sign In**: Users can sign in with email and password
+- **Sign Out**: Users can sign out and return to homepage
+- **Password Reset**: Users can request password reset emails
+- **Email Verification**: Users receive confirmation emails (if enabled)
+
+### Protected Routes
+- All dashboard routes (`/dashboard`, `/portfolio`, `/watchlist`, etc.) are protected
+- Unauthenticated users are redirected to the homepage
+- Loading states are shown during authentication checks
+
+### User Experience
+- Form validation and error handling
+- Loading states during authentication
+- Success/error messages
+- Automatic redirect to dashboard after successful login
+- Persistent sessions across browser refreshes
+
+## Testing the Setup
+
+1. Start the development server: `npm run dev`
+2. Navigate to `http://localhost:5173`
+3. Try creating a new account
+4. Try signing in with the created account
+5. Test the logout functionality
+
+## Troubleshooting
+
+### Common Issues
+
+1. **"Invalid API key" error**
+   - Check that your `VITE_SUPABASE_ANON_KEY` is correct
+   - Make sure you're using the "anon public" key, not the service role key
+
+2. **"Invalid redirect URL" error**
+   - Add your localhost URL to the redirect URLs in Supabase settings
+   - Make sure the URL matches exactly (including protocol and port)
+
+3. **Email not received**
+   - Check spam folder
+   - Verify email templates are configured in Supabase
+   - Check Supabase logs for email delivery issues
+
+4. **Authentication not working**
+   - Verify environment variables are loaded correctly
+   - Check browser console for errors
+   - Ensure Supabase project is active and not paused
+
+### Getting Help
+
+- Check the [Supabase documentation](https://supabase.com/docs)
+- Review the [Supabase Auth documentation](https://supabase.com/docs/guides/auth)
+- Check the browser console for detailed error messages 
\ No newline at end of file
diff --git a/USER_SETUP_INSTRUCTIONS.md b/USER_SETUP_INSTRUCTIONS.md
new file mode 100644
index 0000000..896be18
--- /dev/null
+++ b/USER_SETUP_INSTRUCTIONS.md
@@ -0,0 +1,216 @@
+# 🔐 User-Specific Data Setup Instructions
+
+## 🎯 **Overview**
+This guide will help you set up user-specific data isolation so that each user only sees their own portfolio and watchlist data.
+
+## 📋 **Prerequisites**
+- Supabase project with authentication enabled
+- Access to Supabase SQL Editor
+- Backend server running
+
+## 🗄️ **Step 1: Database Migration**
+
+### **1.1 Run the Migration Script**
+1. Go to your **Supabase Dashboard**
+2. Navigate to **SQL Editor**
+3. Copy and paste the following SQL script:
+
+```sql
+-- Migration to add user_id columns for user-specific data isolation
+-- Run this in your Supabase SQL Editor
+
+-- Add user_id column to stocks table
+ALTER TABLE stocks 
+ADD COLUMN IF NOT EXISTS user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE;
+
+-- Add user_id column to watchlists table  
+ALTER TABLE watchlists 
+ADD COLUMN IF NOT EXISTS user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE;
+
+-- Create indexes for better performance
+CREATE INDEX IF NOT EXISTS idx_stocks_user_id ON stocks(user_id);
+CREATE INDEX IF NOT EXISTS idx_watchlists_user_id ON watchlists(user_id);
+
+-- Add RLS (Row Level Security) policies
+-- Enable RLS on both tables
+ALTER TABLE stocks ENABLE ROW LEVEL SECURITY;
+ALTER TABLE watchlists ENABLE ROW LEVEL SECURITY;
+
+-- Create policy for stocks table - users can only see their own stocks
+CREATE POLICY "Users can view own stocks" ON stocks
+  FOR SELECT USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert own stocks" ON stocks
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can update own stocks" ON stocks
+  FOR UPDATE USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can delete own stocks" ON stocks
+  FOR DELETE USING (auth.uid() = user_id);
+
+-- Create policy for watchlists table - users can only see their own watchlist items
+CREATE POLICY "Users can view own watchlist" ON watchlists
+  FOR SELECT USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can insert own watchlist items" ON watchlists
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "Users can update own watchlist items" ON watchlists
+  FOR UPDATE USING (auth.uid() = user_id);
+
+CREATE POLICY "Users can delete own watchlist items" ON watchlists
+  FOR DELETE USING (auth.uid() = user_id);
+```
+
+4. Click **Run** to execute the migration
+
+### **1.2 Verify Migration**
+Run this query to verify the changes:
+
+```sql
+-- Check if user_id columns were added
+SELECT column_name, data_type 
+FROM information_schema.columns 
+WHERE table_name = 'stocks' AND column_name = 'user_id';
+
+SELECT column_name, data_type 
+FROM information_schema.columns 
+WHERE table_name = 'watchlists' AND column_name = 'user_id';
+
+-- Check if RLS is enabled
+SELECT schemaname, tablename, rowsecurity 
+FROM pg_tables 
+WHERE tablename IN ('stocks', 'watchlists');
+```
+
+## 🔧 **Step 2: Backend Setup**
+
+### **2.1 Install Dependencies**
+Make sure your backend has the required dependencies:
+
+```bash
+cd backend
+npm install @supabase/supabase-js
+```
+
+### **2.2 Environment Variables**
+Ensure your backend `.env` file has:
+
+```env
+SUPABASE_URL=your_supabase_url
+SUPABASE_ANON_KEY=your_supabase_anon_key
+SUPABASE_SERVICE_ROLE_KEY=your_supabase_service_role_key
+```
+
+### **2.3 Restart Backend**
+Restart your backend server to apply the changes:
+
+```bash
+npm run dev
+```
+
+## 🎨 **Step 3: Frontend Setup**
+
+### **3.1 Verify API Service**
+The frontend has been updated to use a centralized API service with authentication. Check that `src/services/api.js` exists and includes:
+
+- Request interceptor for adding auth tokens
+- Response interceptor for handling auth errors
+- Automatic token refresh
+
+### **3.2 Test User Isolation**
+1. Create two different user accounts
+2. Log in with the first user and add some stocks
+3. Log out and log in with the second user
+4. Verify that the second user sees an empty portfolio/watchlist
+
+## 🧪 **Step 4: Testing**
+
+### **4.1 Test User Registration**
+1. Go to your application homepage
+2. Create a new account with email/password
+3. Verify you can log in successfully
+
+### **4.2 Test Data Isolation**
+1. **User A**: Add stocks to portfolio and watchlist
+2. **User B**: Create a different account and verify empty data
+3. **User A**: Log back in and verify data is still there
+
+### **4.3 Test API Endpoints**
+Test these endpoints with authentication:
+
+```bash
+# Get portfolio stocks (requires auth)
+curl -H "Authorization: Bearer YOUR_TOKEN" \
+  http://localhost:5000/api/stocks
+
+# Get watchlist (requires auth)
+curl -H "Authorization: Bearer YOUR_TOKEN" \
+  http://localhost:5000/api/watchlist
+
+# Add stock to portfolio (requires auth)
+curl -X POST -H "Authorization: Bearer YOUR_TOKEN" \
+  -H "Content-Type: application/json" \
+  -d '{"name":"Apple Inc","ticker":"AAPL","shares":10,"buy_price":150}' \
+  http://localhost:5000/api/stocks
+```
+
+## 🔍 **Step 5: Troubleshooting**
+
+### **5.1 Common Issues**
+
+**Issue**: "No token provided" error
+**Solution**: Check that the frontend is properly sending auth headers
+
+**Issue**: "Access denied" error
+**Solution**: Verify RLS policies are correctly set up
+
+**Issue**: Users seeing each other's data
+**Solution**: Check that `user_id` is being set correctly in database operations
+
+### **5.2 Debug Commands**
+
+```sql
+-- Check current user's stocks
+SELECT * FROM stocks WHERE user_id = auth.uid();
+
+-- Check all stocks (admin only)
+SELECT * FROM stocks;
+
+-- Check RLS policies
+SELECT schemaname, tablename, policyname, permissive, roles, cmd, qual 
+FROM pg_policies 
+WHERE tablename IN ('stocks', 'watchlists');
+```
+
+## 🎉 **Step 6: Verification Checklist**
+
+- [ ] Database migration completed successfully
+- [ ] RLS policies are active
+- [ ] Backend authentication middleware is working
+- [ ] Frontend API service includes auth tokens
+- [ ] User registration and login works
+- [ ] Data isolation between users is working
+- [ ] All CRUD operations work with authentication
+- [ ] Error handling for unauthorized access works
+
+## 🚀 **Benefits After Setup**
+
+✅ **Complete Data Isolation**: Each user only sees their own data
+✅ **Security**: Row Level Security prevents unauthorized access
+✅ **Scalability**: System can handle multiple users efficiently
+✅ **Compliance**: Meets data privacy requirements
+✅ **User Experience**: Clean, personalized interface for each user
+
+## 📞 **Support**
+
+If you encounter any issues:
+1. Check the browser console for frontend errors
+2. Check the backend logs for API errors
+3. Verify Supabase authentication is working
+4. Test with a fresh user account
+
+---
+
+**🎯 Result**: Each user will now have their own isolated portfolio and watchlist data! 
\ No newline at end of file

From 91447ab4df8acd8abc8a970d94ee3a30332ef795 Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 13:56:07 +0530
Subject: [PATCH 10/13] chore: update package dependencies and server
 configuration

---
 backend/src/server.js               |  81 +------
 email-templates/confirm-signup.html | 298 +++++++++++++++++++++++
 email-templates/magic-link.html     | 360 ++++++++++++++++++++++++++++
 email-templates/reset-password.html | 278 +++++++++++++++++++++
 package-lock.json                   | 292 ++++++++++++++++++++--
 package.json                        |  11 +-
 6 files changed, 1222 insertions(+), 98 deletions(-)
 create mode 100644 email-templates/confirm-signup.html
 create mode 100644 email-templates/magic-link.html
 create mode 100644 email-templates/reset-password.html

diff --git a/backend/src/server.js b/backend/src/server.js
index 5ff7c7a..d1e0181 100644
--- a/backend/src/server.js
+++ b/backend/src/server.js
@@ -2,60 +2,10 @@ const express = require('express');
 const cors = require('cors');
 require('dotenv').config();
 
-const sequelize = require('./config/database');
+const supabase = require('./config/supabase');
 const stockRoutes = require('./routes/stocks');
 const watchlistRoutes = require('./routes/watchlist');
 const stockPriceService = require('./services/stockPriceService');
-const Stock = require('./models/Stock');
-
-// Sample stocks data for initialization
-const defaultStocks = [
-  {
-    name: 'Apple Inc.',
-    ticker: 'AAPL',
-    shares: 1,
-    buy_price: 175.50,
-    current_price: 175.50,
-    target_price: 200.00,
-    is_in_watchlist: true
-  },
-  {
-    name: 'Microsoft Corporation',
-    ticker: 'MSFT',
-    shares: 1,
-    buy_price: 350.00,
-    current_price: 350.00,
-    target_price: 400.00,
-    is_in_watchlist: true
-  },
-  {
-    name: 'Amazon.com Inc.',
-    ticker: 'AMZN',
-    shares: 1,
-    buy_price: 145.00,
-    current_price: 145.00,
-    target_price: 170.00,
-    is_in_watchlist: true
-  },
-  {
-    name: 'NVIDIA Corporation',
-    ticker: 'NVDA',
-    shares: 1,
-    buy_price: 480.00,
-    current_price: 480.00,
-    target_price: 550.00,
-    is_in_watchlist: true
-  },
-  {
-    name: 'Tesla Inc.',
-    ticker: 'TSLA',
-    shares: 1,
-    buy_price: 240.00,
-    current_price: 240.00,
-    target_price: 280.00,
-    is_in_watchlist: true
-  }
-];
 
 const app = express();
 
@@ -94,36 +44,9 @@ app.use('/api/watchlist', watchlistRoutes);
 
 const PORT = process.env.PORT || 5000;
 
-const initializeStocks = async () => {
-  try {
-    // Check if there are any existing stocks
-    const stockCount = await Stock.count();
-    
-    if (stockCount === 0) {
-      console.log('No stocks found. Initializing with default stocks...');
-      
-      // Create default stocks
-      await Promise.all(defaultStocks.map(stock => Stock.create(stock)));
-      
-      console.log('Default stocks created successfully');
-    } else {
-      console.log(`Found ${stockCount} existing stocks. Skipping initialization.`);
-    }
-  } catch (error) {
-    console.error('Error initializing stocks:', error);
-  }
-};
-
 const start = async () => {
   try {
-    // Sync database
-    await sequelize.sync();
-    console.log('Database synced successfully');
-
-    // Initialize stocks
-    await initializeStocks();
-
-    // Start periodic stock price updates
+    // Start periodic stock price updates for existing stocks
     stockPriceService.startPeriodicUpdates();
 
     app.listen(PORT, () => {
diff --git a/email-templates/confirm-signup.html b/email-templates/confirm-signup.html
new file mode 100644
index 0000000..a7b1bad
--- /dev/null
+++ b/email-templates/confirm-signup.html
@@ -0,0 +1,298 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Welcome to Portfolio Tracker</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #1f2937;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 20px;
+        }
+        
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+        
+        .header {
+            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            padding: 40px 30px;
+            text-align: center;
+            position: relative;
+        }
+        
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+            opacity: 0.3;
+        }
+        
+        .logo {
+            width: 60px;
+            height: 60px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 20px;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .logo svg {
+            width: 32px;
+            height: 32px;
+            fill: white;
+        }
+        
+        .header h1 {
+            color: white;
+            font-size: 28px;
+            font-weight: 700;
+            margin-bottom: 8px;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .header p {
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 16px;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .content {
+            padding: 40px 30px;
+        }
+        
+        .welcome-section {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        
+        .welcome-section h2 {
+            font-size: 24px;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: 12px;
+        }
+        
+        .welcome-section p {
+            color: #6b7280;
+            font-size: 16px;
+            margin-bottom: 30px;
+        }
+        
+        .features {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 20px;
+            margin-bottom: 40px;
+        }
+        
+        .feature {
+            background: #f8fafc;
+            padding: 20px;
+            border-radius: 12px;
+            text-align: center;
+            border: 1px solid #e2e8f0;
+        }
+        
+        .feature-icon {
+            width: 40px;
+            height: 40px;
+            background: linear-gradient(135deg, #10b981 0%, #059669 100%);
+            border-radius: 10px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 12px;
+        }
+        
+        .feature-icon svg {
+            width: 20px;
+            height: 20px;
+            fill: white;
+        }
+        
+        .feature h3 {
+            font-size: 14px;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: 4px;
+        }
+        
+        .feature p {
+            font-size: 12px;
+            color: #6b7280;
+        }
+        
+        .cta-section {
+            text-align: center;
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+            padding: 30px;
+            border-radius: 16px;
+            border: 1px solid #bae6fd;
+        }
+        
+        .cta-button {
+            display: inline-block;
+            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
+            color: white;
+            text-decoration: none;
+            padding: 16px 32px;
+            border-radius: 12px;
+            font-weight: 600;
+            font-size: 16px;
+            margin: 20px 0;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.4);
+        }
+        
+        .cta-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px 0 rgba(59, 130, 246, 0.5);
+        }
+        
+        .footer {
+            background: #f8fafc;
+            padding: 30px;
+            text-align: center;
+            border-top: 1px solid #e2e8f0;
+        }
+        
+        .footer p {
+            color: #6b7280;
+            font-size: 14px;
+            margin-bottom: 8px;
+        }
+        
+        .footer a {
+            color: #3b82f6;
+            text-decoration: none;
+        }
+        
+        .footer a:hover {
+            text-decoration: underline;
+        }
+        
+        .social-links {
+            margin-top: 20px;
+        }
+        
+        .social-links a {
+            display: inline-block;
+            margin: 0 8px;
+            color: #6b7280;
+            text-decoration: none;
+        }
+        
+        @media (max-width: 600px) {
+            .features {
+                grid-template-columns: 1fr;
+            }
+            
+            .header, .content {
+                padding: 30px 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <div class="logo">
+                <svg viewBox="0 0 24 24">
+                    <path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/>
+                </svg>
+            </div>
+            <h1>Portfolio Tracker</h1>
+            <p>Your journey to smart investing starts here</p>
+        </div>
+        
+        <div class="content">
+            <div class="welcome-section">
+                <h2>Welcome aboard! 🎉</h2>
+                <p>Hi {{ .Email }}, thank you for joining Portfolio Tracker. We're excited to help you track your investments and make informed decisions.</p>
+            </div>
+            
+            <div class="features">
+                <div class="feature">
+                    <div class="feature-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                        </svg>
+                    </div>
+                    <h3>Real-time Tracking</h3>
+                    <p>Monitor your portfolio with live stock prices and updates</p>
+                </div>
+                
+                <div class="feature">
+                    <div class="feature-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                        </svg>
+                    </div>
+                    <h3>Smart Analytics</h3>
+                    <p>Get detailed insights and performance analytics</p>
+                </div>
+                
+                <div class="feature">
+                    <div class="feature-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
+                        </svg>
+                    </div>
+                    <h3>Price Alerts</h3>
+                    <p>Set custom alerts for your target prices</p>
+                </div>
+                
+                <div class="feature">
+                    <div class="feature-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
+                        </svg>
+                    </div>
+                    <h3>Secure & Private</h3>
+                    <p>Your data is protected with enterprise-grade security</p>
+                </div>
+            </div>
+            
+            <div class="cta-section">
+                <h3 style="color: #1e40af; margin-bottom: 16px; font-size: 18px;">Ready to start tracking?</h3>
+                <p style="color: #6b7280; margin-bottom: 20px;">Click the button below to verify your email and access your dashboard.</p>
+                <a href="{{ .ConfirmationURL }}" class="cta-button">Verify Email & Get Started</a>
+                <p style="font-size: 12px; color: #6b7280; margin-top: 16px;">This link will expire in 24 hours for security reasons.</p>
+            </div>
+        </div>
+        
+        <div class="footer">
+            <p>If you didn't create this account, you can safely ignore this email.</p>
+            <p>Need help? <a href="mailto:support@portfoliotracker.com">Contact our support team</a></p>
+            <div class="social-links">
+                <a href="#">Twitter</a> • <a href="#">LinkedIn</a> • <a href="#">Blog</a>
+            </div>
+        </div>
+    </div>
+</body>
+</html> 
\ No newline at end of file
diff --git a/email-templates/magic-link.html b/email-templates/magic-link.html
new file mode 100644
index 0000000..bf5ace3
--- /dev/null
+++ b/email-templates/magic-link.html
@@ -0,0 +1,360 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Magic Link - Portfolio Tracker</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #1f2937;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 20px;
+        }
+        
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+        
+        .header {
+            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+            padding: 40px 30px;
+            text-align: center;
+            position: relative;
+        }
+        
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+            opacity: 0.3;
+        }
+        
+        .logo {
+            width: 60px;
+            height: 60px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 20px;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .logo svg {
+            width: 32px;
+            height: 32px;
+            fill: white;
+        }
+        
+        .header h1 {
+            color: white;
+            font-size: 28px;
+            font-weight: 700;
+            margin-bottom: 8px;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .header p {
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 16px;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .content {
+            padding: 40px 30px;
+        }
+        
+        .main-section {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        
+        .main-section h2 {
+            font-size: 24px;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: 12px;
+        }
+        
+        .main-section p {
+            color: #6b7280;
+            font-size: 16px;
+            margin-bottom: 30px;
+        }
+        
+        .magic-info {
+            background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
+            border: 1px solid #c084fc;
+            border-radius: 16px;
+            padding: 24px;
+            margin-bottom: 40px;
+            text-align: center;
+        }
+        
+        .magic-info h3 {
+            color: #7c3aed;
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        
+        .magic-info h3::before {
+            content: '✨';
+            margin-right: 8px;
+            font-size: 20px;
+        }
+        
+        .magic-info p {
+            color: #6b21a8;
+            font-size: 14px;
+            margin-bottom: 0;
+        }
+        
+        .benefits {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 16px;
+            margin-bottom: 40px;
+        }
+        
+        .benefit {
+            background: #f8fafc;
+            padding: 16px;
+            border-radius: 12px;
+            text-align: center;
+            border: 1px solid #e2e8f0;
+        }
+        
+        .benefit-icon {
+            width: 32px;
+            height: 32px;
+            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+            border-radius: 8px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 8px;
+        }
+        
+        .benefit-icon svg {
+            width: 16px;
+            height: 16px;
+            fill: white;
+        }
+        
+        .benefit h4 {
+            font-size: 12px;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: 4px;
+        }
+        
+        .benefit p {
+            font-size: 10px;
+            color: #6b7280;
+        }
+        
+        .cta-section {
+            text-align: center;
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+            padding: 30px;
+            border-radius: 16px;
+            border: 1px solid #bae6fd;
+        }
+        
+        .cta-button {
+            display: inline-block;
+            background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
+            color: white;
+            text-decoration: none;
+            padding: 16px 32px;
+            border-radius: 12px;
+            font-weight: 600;
+            font-size: 16px;
+            margin: 20px 0;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 14px 0 rgba(139, 92, 246, 0.4);
+        }
+        
+        .cta-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px 0 rgba(139, 92, 246, 0.5);
+        }
+        
+        .security-notice {
+            background: #fef3c7;
+            border: 1px solid #f59e0b;
+            border-radius: 12px;
+            padding: 20px;
+            margin-top: 30px;
+            text-align: center;
+        }
+        
+        .security-notice h4 {
+            color: #92400e;
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        
+        .security-notice p {
+            color: #92400e;
+            font-size: 14px;
+        }
+        
+        .footer {
+            background: #f8fafc;
+            padding: 30px;
+            text-align: center;
+            border-top: 1px solid #e2e8f0;
+        }
+        
+        .footer p {
+            color: #6b7280;
+            font-size: 14px;
+            margin-bottom: 8px;
+        }
+        
+        .footer a {
+            color: #3b82f6;
+            text-decoration: none;
+        }
+        
+        .footer a:hover {
+            text-decoration: underline;
+        }
+        
+        .social-links {
+            margin-top: 20px;
+        }
+        
+        .social-links a {
+            display: inline-block;
+            margin: 0 8px;
+            color: #6b7280;
+            text-decoration: none;
+        }
+        
+        @media (max-width: 600px) {
+            .benefits {
+                grid-template-columns: 1fr;
+            }
+            
+            .header, .content {
+                padding: 30px 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <div class="logo">
+                <svg viewBox="0 0 24 24">
+                    <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                </svg>
+            </div>
+            <h1>Magic Link</h1>
+            <p>Secure, passwordless access</p>
+        </div>
+        
+        <div class="content">
+            <div class="main-section">
+                <h2>Your Magic Link is Ready! ✨</h2>
+                <p>Hi {{ .Email }}, click the button below to instantly sign in to your Portfolio Tracker account. No password needed!</p>
+            </div>
+            
+            <div class="magic-info">
+                <h3>Why Magic Links?</h3>
+                <p>Magic links provide the most secure and convenient way to access your portfolio. No passwords to remember, no security risks.</p>
+            </div>
+            
+            <div class="benefits">
+                <div class="benefit">
+                    <div class="benefit-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4z"/>
+                        </svg>
+                    </div>
+                    <h4>Ultra Secure</h4>
+                    <p>One-time use links that expire automatically</p>
+                </div>
+                
+                <div class="benefit">
+                    <div class="benefit-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
+                        </svg>
+                    </div>
+                    <h4>Instant Access</h4>
+                    <p>No passwords to remember or type</p>
+                </div>
+                
+                <div class="benefit">
+                    <div class="benefit-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                        </svg>
+                    </div>
+                    <h4>Convenient</h4>
+                    <p>Just click and you're in</p>
+                </div>
+                
+                <div class="benefit">
+                    <div class="benefit-icon">
+                        <svg viewBox="0 0 24 24">
+                            <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z"/>
+                        </svg>
+                    </div>
+                    <h4>Smart Notifications</h4>
+                    <p>Get alerts when someone tries to access</p>
+                </div>
+            </div>
+            
+            <div class="cta-section">
+                <h3 style="color: #1e40af; margin-bottom: 16px; font-size: 18px;">Ready to access your portfolio?</h3>
+                <p style="color: #6b7280; margin-bottom: 20px;">Click the button below to instantly sign in to your Portfolio Tracker dashboard.</p>
+                <a href="{{ .ConfirmationURL }}" class="cta-button">Sign In Instantly</a>
+                <p style="font-size: 12px; color: #6b7280; margin-top: 16px;">This link will expire in 10 minutes for security reasons.</p>
+            </div>
+            
+            <div class="security-notice">
+                <h4>🔒 Security Notice</h4>
+                <p>If you didn't request this magic link, you can safely ignore this email. Your account remains secure.</p>
+            </div>
+        </div>
+        
+        <div class="footer">
+            <p>Need help? <a href="mailto:support@portfoliotracker.com">Contact our support team</a></p>
+            <p>This is an automated message, please do not reply to this email.</p>
+            <div class="social-links">
+                <a href="#">Twitter</a> • <a href="#">LinkedIn</a> • <a href="#">Blog</a>
+            </div>
+        </div>
+    </div>
+</body>
+</html> 
\ No newline at end of file
diff --git a/email-templates/reset-password.html b/email-templates/reset-password.html
new file mode 100644
index 0000000..4e0b4e7
--- /dev/null
+++ b/email-templates/reset-password.html
@@ -0,0 +1,278 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Reset Your Password - Portfolio Tracker</title>
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+            line-height: 1.6;
+            color: #1f2937;
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            padding: 20px;
+        }
+        
+        .container {
+            max-width: 600px;
+            margin: 0 auto;
+            background: white;
+            border-radius: 20px;
+            overflow: hidden;
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+        }
+        
+        .header {
+            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            padding: 40px 30px;
+            text-align: center;
+            position: relative;
+        }
+        
+        .header::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="white" opacity="0.1"/><circle cx="75" cy="75" r="1" fill="white" opacity="0.1"/><circle cx="50" cy="10" r="0.5" fill="white" opacity="0.1"/><circle cx="10" cy="60" r="0.5" fill="white" opacity="0.1"/><circle cx="90" cy="40" r="0.5" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
+            opacity: 0.3;
+        }
+        
+        .logo {
+            width: 60px;
+            height: 60px;
+            background: rgba(255, 255, 255, 0.2);
+            border-radius: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto 20px;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .logo svg {
+            width: 32px;
+            height: 32px;
+            fill: white;
+        }
+        
+        .header h1 {
+            color: white;
+            font-size: 28px;
+            font-weight: 700;
+            margin-bottom: 8px;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .header p {
+            color: rgba(255, 255, 255, 0.9);
+            font-size: 16px;
+            position: relative;
+            z-index: 1;
+        }
+        
+        .content {
+            padding: 40px 30px;
+        }
+        
+        .main-section {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+        
+        .main-section h2 {
+            font-size: 24px;
+            font-weight: 600;
+            color: #1f2937;
+            margin-bottom: 12px;
+        }
+        
+        .main-section p {
+            color: #6b7280;
+            font-size: 16px;
+            margin-bottom: 30px;
+        }
+        
+        .security-info {
+            background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+            border: 1px solid #f59e0b;
+            border-radius: 16px;
+            padding: 24px;
+            margin-bottom: 40px;
+            text-align: left;
+        }
+        
+        .security-info h3 {
+            color: #92400e;
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: 12px;
+            display: flex;
+            align-items: center;
+        }
+        
+        .security-info h3::before {
+            content: '🔒';
+            margin-right: 8px;
+            font-size: 20px;
+        }
+        
+        .security-info ul {
+            color: #92400e;
+            font-size: 14px;
+            padding-left: 20px;
+        }
+        
+        .security-info li {
+            margin-bottom: 6px;
+        }
+        
+        .cta-section {
+            text-align: center;
+            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
+            padding: 30px;
+            border-radius: 16px;
+            border: 1px solid #bae6fd;
+        }
+        
+        .cta-button {
+            display: inline-block;
+            background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+            color: white;
+            text-decoration: none;
+            padding: 16px 32px;
+            border-radius: 12px;
+            font-weight: 600;
+            font-size: 16px;
+            margin: 20px 0;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.4);
+        }
+        
+        .cta-button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px 0 rgba(239, 68, 68, 0.5);
+        }
+        
+        .warning-box {
+            background: #fef2f2;
+            border: 1px solid #fecaca;
+            border-radius: 12px;
+            padding: 20px;
+            margin-top: 30px;
+            text-align: center;
+        }
+        
+        .warning-box h4 {
+            color: #dc2626;
+            font-size: 16px;
+            font-weight: 600;
+            margin-bottom: 8px;
+        }
+        
+        .warning-box p {
+            color: #7f1d1d;
+            font-size: 14px;
+        }
+        
+        .footer {
+            background: #f8fafc;
+            padding: 30px;
+            text-align: center;
+            border-top: 1px solid #e2e8f0;
+        }
+        
+        .footer p {
+            color: #6b7280;
+            font-size: 14px;
+            margin-bottom: 8px;
+        }
+        
+        .footer a {
+            color: #3b82f6;
+            text-decoration: none;
+        }
+        
+        .footer a:hover {
+            text-decoration: underline;
+        }
+        
+        .social-links {
+            margin-top: 20px;
+        }
+        
+        .social-links a {
+            display: inline-block;
+            margin: 0 8px;
+            color: #6b7280;
+            text-decoration: none;
+        }
+        
+        @media (max-width: 600px) {
+            .header, .content {
+                padding: 30px 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div class="header">
+            <div class="logo">
+                <svg viewBox="0 0 24 24">
+                    <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm9 14H6V10h12v10z"/>
+                </svg>
+            </div>
+            <h1>Password Reset</h1>
+            <p>Secure access to your portfolio</p>
+        </div>
+        
+        <div class="content">
+            <div class="main-section">
+                <h2>Reset Your Password 🔐</h2>
+                <p>Hi {{ .Email }}, we received a request to reset your Portfolio Tracker password. Click the button below to create a new secure password.</p>
+            </div>
+            
+            <div class="security-info">
+                <h3>Security Reminders</h3>
+                <ul>
+                    <li>Use a strong password with at least 8 characters</li>
+                    <li>Include a mix of letters, numbers, and symbols</li>
+                    <li>Don't use the same password for multiple accounts</li>
+                    <li>Never share your password with anyone</li>
+                </ul>
+            </div>
+            
+            <div class="cta-section">
+                <h3 style="color: #1e40af; margin-bottom: 16px; font-size: 18px;">Ready to reset?</h3>
+                <p style="color: #6b7280; margin-bottom: 20px;">Click the button below to securely reset your password and regain access to your portfolio.</p>
+                <a href="{{ .ConfirmationURL }}" class="cta-button">Reset Password</a>
+                <p style="font-size: 12px; color: #6b7280; margin-top: 16px;">This link will expire in 1 hour for security reasons.</p>
+            </div>
+            
+            <div class="warning-box">
+                <h4>⚠️ Didn't request this?</h4>
+                <p>If you didn't request a password reset, you can safely ignore this email. Your account remains secure.</p>
+            </div>
+        </div>
+        
+        <div class="footer">
+            <p>Need help? <a href="mailto:support@portfoliotracker.com">Contact our support team</a></p>
+            <p>This is an automated message, please do not reply to this email.</p>
+            <div class="social-links">
+                <a href="#">Twitter</a> • <a href="#">LinkedIn</a> • <a href="#">Blog</a>
+            </div>
+        </div>
+    </div>
+</body>
+</html> 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d64293e..0fe93cf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,19 +10,23 @@
       "dependencies": {
         "@headlessui/react": "^2.2.0",
         "@headlessui/tailwindcss": "^0.2.1",
+        "@supabase/supabase-js": "^2.52.0",
         "axios": "^1.7.9",
+        "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
+        "motion": "^12.23.6",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-hot-toast": "^2.4.1",
-        "recharts": "^2.15.0"
+        "recharts": "^2.15.0",
+        "tailwind-merge": "^3.3.1"
       },
       "devDependencies": {
         "@eslint/js": "^9.17.0",
         "@heroicons/react": "^2.2.0",
         "@tremor/react": "^3.18.6",
-        "@types/react": "^18.3.17",
-        "@types/react-dom": "^18.3.5",
+        "@types/react": "^18.3.23",
+        "@types/react-dom": "^18.3.7",
         "@vitejs/plugin-react": "^4.3.4",
         "autoprefixer": "^10.4.20",
         "eslint": "^9.17.0",
@@ -35,6 +39,7 @@
         "react-icons": "^5.4.0",
         "react-router-dom": "^7.1.0",
         "tailwindcss": "^3.4.17",
+        "typescript": "^5.8.3",
         "vite": "^6.0.3"
       }
     },
@@ -1525,6 +1530,81 @@
         "win32"
       ]
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.71.1",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.71.1.tgz",
+      "integrity": "sha512-mMIQHBRc+SKpZFRB2qtupuzulaUhFYupNyxqDj5Jp/LyPvcWvjaJzZzObv6URtL/O6lPxkanASnotGtNpS3H2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.4.5.tgz",
+      "integrity": "sha512-v5GSqb9zbosquTo6gBwIiq7W9eQ7rE5QazsK/ezNiQXdCbY+bH8D9qEaBIkhVvX4ZRW5rP03gEfw5yw9tiq4EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/node-fetch": {
+      "version": "2.6.15",
+      "resolved": "https://registry.npmjs.org/@supabase/node-fetch/-/node-fetch-2.6.15.tgz",
+      "integrity": "sha512-1ibVeYUacxWYi9i0cf5efil6adJ9WRyZBLivgjs+AUpewx1F3xPi7gLgaASI2SmIQxPoCEjAsLAzKPgMJVgOUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "1.19.4",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-1.19.4.tgz",
+      "integrity": "sha512-O4soKqKtZIW3olqmbXXbKugUtByD2jPa8kL2m2c1oozAO11uCcGrRhkZL0kVxjBLrXHE0mdSkFsMj7jDSfyNpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.11.15",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.11.15.tgz",
+      "integrity": "sha512-HQKRnwAqdVqJW/P9TjKVK+/ETpW4yQ8tyDPPtRMKOH4Uh3vQD74vmj353CYs8+YwVBKubeUOOEpI9CT8mT4obw==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.13",
+        "@types/phoenix": "^1.6.6",
+        "@types/ws": "^8.18.1",
+        "isows": "^1.0.7",
+        "ws": "^8.18.2"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.7.1.tgz",
+      "integrity": "sha512-asYHcyDR1fKqrMpytAS1zjyEfvxuOIp1CIXX7ji4lHHcJKqyk+sLl/Vxgm4sN6u8zvuUtae9e4kDxQP2qrwWBA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/node-fetch": "^2.6.14"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.52.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.52.0.tgz",
+      "integrity": "sha512-jbs3CV1f2+ge7sgBeEduboT9v/uGjF22v0yWi/5/XFn5tbM8MfWRccsMtsDwAwu24XK8H6wt2LJDiNnZLtx/bg==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.71.1",
+        "@supabase/functions-js": "2.4.5",
+        "@supabase/node-fetch": "2.6.15",
+        "@supabase/postgrest-js": "1.19.4",
+        "@supabase/realtime-js": "2.11.15",
+        "@supabase/storage-js": "2.7.1"
+      }
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -1611,6 +1691,17 @@
         "react-dom": ">=16.8.0"
       }
     },
+    "node_modules/@tremor/react/node_modules/tailwind-merge": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.6.0.tgz",
+      "integrity": "sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
     "node_modules/@types/babel__core": {
       "version": "7.20.5",
       "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
@@ -1740,6 +1831,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/node": {
+      "version": "24.0.15",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.15.tgz",
+      "integrity": "sha512-oaeTSbCef7U/z7rDeJA138xpG3NuKc64/rZ2qmUFkFJmnMsAPaluIifqyWd8hSSMxyP9oie3dLAqYPblag9KgA==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.8.0"
+      }
+    },
+    "node_modules/@types/phoenix": {
+      "version": "1.6.6",
+      "resolved": "https://registry.npmjs.org/@types/phoenix/-/phoenix-1.6.6.tgz",
+      "integrity": "sha512-PIzZZlEppgrpoT2QgbnDU+MMzuR6BbCjllj0bM70lWoejMeNJAxCchxnv7J3XFkI8MpygtRpzXrIlmWUBclP5A==",
+      "license": "MIT"
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
@@ -1748,9 +1854,9 @@
       "license": "MIT"
     },
     "node_modules/@types/react": {
-      "version": "18.3.18",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
-      "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
+      "version": "18.3.23",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
+      "integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -1759,15 +1865,24 @@
       }
     },
     "node_modules/@types/react-dom": {
-      "version": "18.3.5",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.5.tgz",
-      "integrity": "sha512-P4t6saawp+b/dFrUr2cvkVsfvPguwsxtH6dNIYRllMsefqFzkZk5UIjzyDOv5g1dXIPdG4Sp1yCR4Z6RCUsG/Q==",
+      "version": "18.3.7",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.3.7.tgz",
+      "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "dev": true,
       "license": "MIT",
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
     },
+    "node_modules/@types/ws": {
+      "version": "8.18.1",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.18.1.tgz",
+      "integrity": "sha512-ThVF6DCVhA8kUGy+aazFQ4kXQ7E1Ty7A3ypFOe0IcJV8O/M511G99AW24irKrW56Wt44yG9+ij8FaqoBGkuBXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.3.4.tgz",
@@ -2251,9 +2366,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001690",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz",
-      "integrity": "sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==",
+      "version": "1.0.30001727",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001727.tgz",
+      "integrity": "sha512-pB68nIHmbN6L/4C6MH1DokyR3bYqFwjaSs/sWDHGj4CTcFtQUQMuJftVwWkXq7mNWOybD3KhUv3oWHoGxgP14Q==",
       "dev": true,
       "funding": [
         {
@@ -4218,6 +4333,21 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
+    "node_modules/isows": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/isows/-/isows-1.0.7.tgz",
+      "integrity": "sha512-I1fSfDCZL5P0v33sVqeTDSpcstAg/N+wF5HS033mogOVIp4B+oHC7oOCsA3axAbBSGTJ8QubbNmnIRN/h8U7hg==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/wevm"
+        }
+      ],
+      "license": "MIT",
+      "peerDependencies": {
+        "ws": "*"
+      }
+    },
     "node_modules/iterator.prototype": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.4.tgz",
@@ -4510,6 +4640,32 @@
         "node": ">=16 || 14 >=14.17"
       }
     },
+    "node_modules/motion": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion/-/motion-12.23.6.tgz",
+      "integrity": "sha512-6U55IW5i6Vut2ryKEhrZKg55490k9d6qdGXZoNSf98oQgDj5D7bqTnVJotQ6UW3AS6QfbW6KSLa7/e1gy+a07g==",
+      "license": "MIT",
+      "dependencies": {
+        "framer-motion": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/motion-dom": {
       "version": "11.14.3",
       "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-11.14.3.tgz",
@@ -4524,6 +4680,48 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/motion/node_modules/framer-motion": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.23.6.tgz",
+      "integrity": "sha512-dsJ389QImVE3lQvM8Mnk99/j8tiZDM/7706PCqvkQ8sSCnpmWxsgX+g0lj7r5OBVL0U36pIecCTBoIWcM2RuKw==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-dom": "^12.23.6",
+        "motion-utils": "^12.23.6",
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0 || ^19.0.0",
+        "react-dom": "^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/motion/node_modules/motion-dom": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.23.6.tgz",
+      "integrity": "sha512-G2w6Nw7ZOVSzcQmsdLc0doMe64O/Sbuc2bVAbgMz6oP/6/pRStKRiVRV4bQfHp5AHYAKEGhEdVHTM+R3FDgi5w==",
+      "license": "MIT",
+      "dependencies": {
+        "motion-utils": "^12.23.6"
+      }
+    },
+    "node_modules/motion/node_modules/motion-utils": {
+      "version": "12.23.6",
+      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.23.6.tgz",
+      "integrity": "sha512-eAWoPgr4eFEOFfg2WjIsMoqJTW6Z8MTUCgn/GZ3VRpClWBdnbjryiA3ZSNLyxCTmCQx4RmYX6jX1iWHbenUPNQ==",
+      "license": "MIT"
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -5940,10 +6138,9 @@
       "license": "MIT"
     },
     "node_modules/tailwind-merge": {
-      "version": "2.5.5",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz",
-      "integrity": "sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA==",
-      "dev": true,
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
+      "integrity": "sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==",
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -6046,6 +6243,12 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==",
+      "license": "MIT"
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -6156,6 +6359,20 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.8.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
+      "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/unbox-primitive": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz",
@@ -6175,6 +6392,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/undici-types": {
+      "version": "7.8.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.8.0.tgz",
+      "integrity": "sha512-9UJ2xGDvQ43tYyVMpuHlsgApydB8ZKfVYTsLDhXkFL/6gfkp+U8xTGdh8pMJv1SpZna0zxG1DwsKZsreLbXBxw==",
+      "license": "MIT"
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.1.tgz",
@@ -6316,6 +6539,22 @@
         }
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==",
+      "license": "MIT",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -6517,6 +6756,27 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/ws": {
+      "version": "8.18.3",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.3.tgz",
+      "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/package.json b/package.json
index f333f84..eb4a96c 100644
--- a/package.json
+++ b/package.json
@@ -12,19 +12,23 @@
   "dependencies": {
     "@headlessui/react": "^2.2.0",
     "@headlessui/tailwindcss": "^0.2.1",
+    "@supabase/supabase-js": "^2.52.0",
     "axios": "^1.7.9",
+    "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
+    "motion": "^12.23.6",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-hot-toast": "^2.4.1",
-    "recharts": "^2.15.0"
+    "recharts": "^2.15.0",
+    "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
     "@heroicons/react": "^2.2.0",
     "@tremor/react": "^3.18.6",
-    "@types/react": "^18.3.17",
-    "@types/react-dom": "^18.3.5",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.17.0",
@@ -37,6 +41,7 @@
     "react-icons": "^5.4.0",
     "react-router-dom": "^7.1.0",
     "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3",
     "vite": "^6.0.3"
   }
 }

From 233be08b81cdc4b3ce74d900f00b152bb71a0448 Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 14:02:16 +0530
Subject: [PATCH 11/13] docs: add comprehensive deployment guide for Vercel and
 Render

---
 DEPLOYMENT_GUIDE.md | 274 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 274 insertions(+)
 create mode 100644 DEPLOYMENT_GUIDE.md

diff --git a/DEPLOYMENT_GUIDE.md b/DEPLOYMENT_GUIDE.md
new file mode 100644
index 0000000..ceff8a4
--- /dev/null
+++ b/DEPLOYMENT_GUIDE.md
@@ -0,0 +1,274 @@
+# 🚀 Portfolio Tracker Deployment Guide
+
+This guide will help you deploy your Portfolio Tracker application to production.
+
+## 📋 Prerequisites
+
+1. **Supabase Account** - [Sign up here](https://supabase.com)
+2. **Finnhub API Key** - [Get free API key here](https://finnhub.io/register)
+3. **GitHub Account** - Your code is already there
+4. **Render Account** - [Sign up here](https://render.com) (for backend)
+5. **Vercel Account** - [Sign up here](https://vercel.com) (for frontend)
+
+## 🎯 Deployment Strategy
+
+- **Frontend (React/Vite)** → **Vercel**
+- **Backend (Express.js)** → **Render**
+
+---
+
+## 🔧 Step 1: Backend Deployment (Render)
+
+### 1.1 Create Supabase Project
+
+1. Go to [supabase.com](https://supabase.com) and sign in
+2. Click "New Project"
+3. Choose your organization
+4. Enter project name: `portfolio-tracker`
+5. Enter a database password (save this!)
+6. Choose a region close to your users
+7. Click "Create new project"
+
+### 1.2 Get Supabase Credentials
+
+1. In your Supabase dashboard, go to **Settings > API**
+2. Copy these values:
+   - **Project URL**: `https://your-project-id.supabase.co`
+   - **anon public key**: `eyJ...` (starts with eyJ)
+   - **service_role key**: `eyJ...` (starts with eyJ)
+
+### 1.3 Get Finnhub API Key
+
+1. Go to [finnhub.io/register](https://finnhub.io/register)
+2. Sign up for a free account
+3. Copy your API key from the dashboard
+
+### 1.4 Deploy Backend to Render
+
+1. Go to [render.com](https://render.com) and sign up/login
+2. Click **"New +"** → **"Web Service"**
+3. Connect your GitHub repository: `HackStyx/portfolio-tracker`
+4. Configure the service:
+
+   **Basic Settings:**
+   - **Name**: `portfolio-tracker-backend`
+   - **Environment**: `Node`
+   - **Region**: Choose closest to your users
+   - **Branch**: `main`
+   - **Root Directory**: `backend`
+   - **Build Command**: `npm install`
+   - **Start Command**: `npm start`
+   - **Plan**: Free
+
+5. **Add Environment Variables** (click "Advanced" → "Add Environment Variable"):
+
+   ```
+   NODE_ENV=production
+   PORT=5000
+   FINNHUB_API_KEY=your_finnhub_api_key_here
+   SUPABASE_URL=https://your-project-id.supabase.co
+   SUPABASE_KEY=your_supabase_service_role_key_here
+   ```
+
+6. Click **"Create Web Service"**
+
+7. **Wait for deployment** (usually 2-5 minutes)
+
+8. **Copy your backend URL** (e.g., `https://portfolio-tracker-backend-abc123.onrender.com`)
+
+---
+
+## 🌐 Step 2: Frontend Deployment (Vercel)
+
+### 2.1 Deploy Frontend to Vercel
+
+1. Go to [vercel.com](https://vercel.com) and sign up/login
+2. Click **"New Project"**
+3. Import your GitHub repository: `HackStyx/portfolio-tracker`
+4. Configure the project:
+
+   **Build Settings:**
+   - **Framework Preset**: Vite
+   - **Root Directory**: `./` (leave empty)
+   - **Build Command**: `npm run build`
+   - **Output Directory**: `dist`
+   - **Install Command**: `npm install`
+
+5. **Add Environment Variables** (click "Environment Variables"):
+
+   ```
+   VITE_SUPABASE_URL=https://your-project-id.supabase.co
+   VITE_SUPABASE_ANON_KEY=your_supabase_anon_key_here
+   VITE_API_BASE_URL=https://your-render-backend-url.onrender.com/api
+   ```
+
+6. Click **"Deploy"**
+
+7. **Wait for deployment** (usually 1-3 minutes)
+
+8. **Copy your frontend URL** (e.g., `https://portfolio-tracker-abc123.vercel.app`)
+
+---
+
+## ⚙️ Step 3: Configure Supabase Settings
+
+### 3.1 Update Site URL
+
+1. Go to your Supabase dashboard
+2. Navigate to **Authentication > Settings**
+3. Update **Site URL** to your Vercel frontend URL:
+   ```
+   https://your-frontend-url.vercel.app
+   ```
+
+### 3.2 Add Redirect URLs
+
+1. In the same Authentication settings
+2. Add these **Redirect URLs**:
+   ```
+   https://your-frontend-url.vercel.app/dashboard
+   https://your-frontend-url.vercel.app/
+   http://localhost:5173/dashboard
+   http://localhost:5173/
+   ```
+
+### 3.3 Enable Email Confirmation (Recommended)
+
+1. In Authentication settings
+2. Enable **"Enable email confirmations"**
+3. This ensures users verify their email before accessing the app
+
+---
+
+## 🧪 Step 4: Test Your Deployment
+
+### 4.1 Test Backend
+
+1. Visit your backend URL: `https://your-backend-url.onrender.com/api/health`
+2. You should see a response indicating the server is running
+
+### 4.2 Test Frontend
+
+1. Visit your frontend URL: `https://your-frontend-url.vercel.app`
+2. Try creating a new account
+3. Test the login functionality
+4. Navigate through the dashboard
+
+### 4.3 Test API Integration
+
+1. Sign in to your app
+2. Try adding stocks to your watchlist
+3. Check if stock data loads correctly
+4. Test the news and calendar features
+
+---
+
+## 🔍 Troubleshooting
+
+### Common Issues
+
+#### Backend Issues
+
+1. **"Module not found" errors**
+   - Check that all dependencies are in `backend/package.json`
+   - Verify the build command is correct
+
+2. **"Environment variable not set" errors**
+   - Double-check all environment variables in Render dashboard
+   - Make sure there are no extra spaces
+
+3. **"Port already in use" errors**
+   - Render automatically sets the PORT environment variable
+   - Make sure your code uses `process.env.PORT`
+
+#### Frontend Issues
+
+1. **"Invalid API key" errors**
+   - Verify your Supabase anon key is correct
+   - Check that environment variables are set in Vercel
+
+2. **"CORS errors"**
+   - Backend should already be configured for CORS
+   - Check that your frontend URL is allowed
+
+3. **"Authentication not working"**
+   - Verify Supabase site URL and redirect URLs
+   - Check browser console for detailed errors
+
+#### Database Issues
+
+1. **"Table not found" errors**
+   - Run the database migrations in Supabase
+   - Check the SQL editor in Supabase dashboard
+
+2. **"RLS policy errors"**
+   - Verify Row Level Security policies are set up
+   - Check the authentication is working properly
+
+---
+
+## 📊 Monitoring
+
+### Render Monitoring
+
+1. Go to your Render dashboard
+2. Click on your backend service
+3. Monitor logs, performance, and uptime
+
+### Vercel Monitoring
+
+1. Go to your Vercel dashboard
+2. Click on your project
+3. Monitor deployments, performance, and analytics
+
+### Supabase Monitoring
+
+1. Go to your Supabase dashboard
+2. Monitor database usage, API calls, and authentication
+
+---
+
+## 🔄 Updating Your Deployment
+
+### Backend Updates
+
+1. Push changes to your GitHub repository
+2. Render will automatically redeploy
+3. Monitor the deployment logs
+
+### Frontend Updates
+
+1. Push changes to your GitHub repository
+2. Vercel will automatically redeploy
+3. Monitor the deployment status
+
+---
+
+## 🎉 Success!
+
+Your Portfolio Tracker is now live! 
+
+- **Frontend**: `https://your-frontend-url.vercel.app`
+- **Backend**: `https://your-backend-url.onrender.com`
+- **Database**: Supabase dashboard
+
+### Next Steps
+
+1. **Customize your app** - Update branding, colors, and features
+2. **Add more features** - Implement additional portfolio tracking features
+3. **Monitor performance** - Keep an eye on usage and performance
+4. **Scale up** - Upgrade plans as your user base grows
+
+---
+
+## 📞 Support
+
+If you encounter issues:
+
+1. Check the troubleshooting section above
+2. Review the deployment logs in Render/Vercel
+3. Check the browser console for frontend errors
+4. Review Supabase logs for backend errors
+5. Check the GitHub repository for updates
+
+**Happy deploying! 🚀** 
\ No newline at end of file

From ea347ef84fff9b1c56bdec3434d325721b9fc5f9 Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 14:21:39 +0530
Subject: [PATCH 12/13] docs: update README with deployment status and trigger
 redeploy

---
 README.md | 215 +++++++-----------------------------------------------
 1 file changed, 28 insertions(+), 187 deletions(-)

diff --git a/README.md b/README.md
index a3796a5..5c7f36e 100644
--- a/README.md
+++ b/README.md
@@ -1,198 +1,39 @@
-# Stock Portfolio Tracker 📈
+# Portfolio Tracker
 
-<div align="center">
+A modern portfolio tracking application built with React, Vite, and Supabase.
 
-[![Vercel](https://img.shields.io/badge/Vercel-000000?style=for-the-badge&logo=vercel&logoColor=white)](https://portfolio-tracker-hackstyx.vercel.app)
-[![Render](https://img.shields.io/badge/Render-46E3B7?style=for-the-badge&logo=render&logoColor=white)](https://portfolio-tracker-backend-y7ne.onrender.com/api)
-[![React](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)](https://reactjs.org/)
-[![Vite](https://img.shields.io/badge/Vite-646CFF?style=for-the-badge&logo=vite&logoColor=white)](https://vitejs.dev/)
-[![Supabase](https://img.shields.io/badge/Supabase-3ECF8E?style=for-the-badge&logo=supabase&logoColor=white)](https://supabase.com/)
-[![TailwindCSS](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)](https://tailwindcss.com/)
-[![Node.js](https://img.shields.io/badge/Node.js-339933?style=for-the-badge&logo=nodedotjs&logoColor=white)](https://nodejs.org/)
-[![Finnhub](https://img.shields.io/badge/Finnhub-1B1B1B?style=for-the-badge&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj48cGF0aCBkPSJNMyA2aDJsMTUgMk0xNyA2djE0TTcgMTZoMTAiLz48L3N2Zz4=)](https://finnhub.io/)
-[![API Docs](https://img.shields.io/badge/API_Docs-000000?style=for-the-badge&logo=github&logoColor=white)](https://hackstyx.github.io/portfolio-tracker/)
+## 🚀 Deployment Status
 
-<p align="center">
-  <strong>A modern, responsive stock portfolio tracker built with React and Node.js</strong>
-</p>
+- **Frontend**: [https://portfolio-tracker-hackstyx.vercel.app/](https://portfolio-tracker-hackstyx.vercel.app/)
+- **Backend**: [https://portfolio-tracker-backend-eh7r.onrender.com](https://portfolio-tracker-backend-eh7r.onrender.com)
+- **Database**: Supabase
 
-[Live Demo](https://portfolio-tracker-hackstyx.vercel.app) • [API Documentation](https://hackstyx.github.io/portfolio-tracker/) • [Report Bug](https://github.com/HackStyx/portfolio-tracker/issues)
+## Features
 
-> **Note**: Due to the free tier limitations of Render, the initial load of the demo might take 30-60 seconds. If no data appears, please refresh the page. If issues persist, click the logout button to reset the application state. The backend spins down after 15 minutes of inactivity and needs time to restart.
+- Real-time stock tracking
+- Portfolio management
+- Watchlist functionality
+- Market calendar
+- News integration
+- Dark/Light theme
+- Responsive design
 
-![Portfolio Dashboard](https://github.com/user-attachments/assets/c18f253c-2ac2-4df9-8025-c91858b74237)
+## Tech Stack
 
-</div>
+- **Frontend**: React 18, Vite, Tailwind CSS, Tremor UI
+- **Backend**: Node.js, Express.js
+- **Database**: Supabase (PostgreSQL)
+- **Authentication**: Supabase Auth
+- **Stock Data**: Finnhub API
+- **Deployment**: Vercel (Frontend), Render (Backend)
 
-## ✨ Features
+## Getting Started
 
-- 📊 **Portfolio Management** - Track your stocks with real-time updates
-- 👀 **Watchlist** - Monitor potential investments
-- 🌓 **Dark/Light Mode** - Easy on the eyes, day and night
-- 📱 **Fully Responsive** - Perfect on desktop and mobile
-- 🔄 **Live Updates** - Real-time stock prices via Finnhub API
-- 📈 **Price History** - Visualize stock performance with historical data
-- 💹 **Market Data** - Real-time quotes and market status tracking
-- 🎯 **Price Targets** - Set and monitor stock price targets
+1. Clone the repository
+2. Install dependencies: `npm install`
+3. Set up environment variables (see `.env.example`)
+4. Start development server: `npm run dev`
 
-## 🚀 Quick Start
+## Documentation
 
-### Prerequisites
-
-- Node.js 14+
-- npm or yarn
-- Supabase account
-- Finnhub API Key (get one at [finnhub.io](https://finnhub.io/))
-
-### Frontend Setup
-
-1. Clone and install:
-```bash
-git clone https://github.com/HackStyx/portfolio-tracker.git
-cd portfolio-tracker
-npm install
-```
-
-2. Create `.env`:
-```env
-VITE_API_BASE_URL=http://localhost:5000/api
-```
-
-3. Start development server:
-```bash
-npm run dev
-```
-
-### Backend Setup
-
-1. Setup backend:
-```bash
-cd backend
-npm install
-```
-
-2. Configure `.env`:
-```env
-SUPABASE_URL=your_supabase_url
-SUPABASE_KEY=your_supabase_anon_key
-PORT=5000
-FINNHUB_API_KEY=your_finnhub_api_key
-```
-
-3. Set up Supabase:
-   - Follow the instructions in `backend/SUPABASE_SETUP.md`
-
-4. Test connection and start:
-```bash
-npm run init-db
-npm start
-```
-
-## 🔌 API Documentation
-
-Our API is fully documented and available at [https://hackstyx.github.io/portfolio-tracker/](https://hackstyx.github.io/portfolio-tracker/)
-
-### Base URL
-```
-https://portfolio-tracker-backend-y7ne.onrender.com/api
-```
-
-### Key Endpoints
-
-#### Portfolio Management
-```http
-GET     /stocks              # Get all stocks in portfolio
-POST    /stocks              # Add new stock
-PUT     /stocks/:id          # Update existing stock
-DELETE  /stocks/:id          # Remove stock from portfolio
-```
-
-#### Watchlist Management
-```http
-GET     /watchlist           # Get watchlist items
-POST    /watchlist           # Add stock to watchlist
-DELETE  /watchlist/:id       # Remove from watchlist
-```
-
-#### Market Data
-```http
-GET     /stocks/:ticker/quote    # Get real-time stock quote
-GET     /stocks/:ticker/history  # Get historical price data
-GET     /stocks/summary         # Get portfolio analytics
-```
-
-For detailed API documentation including:
-- Request/Response formats
-- Authentication details
-- Rate limiting
-- Error handling
-- Code examples
-
-Visit our [API Documentation](https://hackstyx.github.io/portfolio-tracker/)
-
-## ⚡️ Tech Stack
-
-### 🎨 Frontend
-- **Framework**: [React](https://reactjs.org/) - A JavaScript library for building user interfaces
-- **Build Tool**: [Vite](https://vitejs.dev/) - Next generation frontend tooling
-- **Styling**: 
-  - [TailwindCSS](https://tailwindcss.com/) - Utility-first CSS framework
-  - [Tremor](https://www.tremor.so/) - React library for dashboards and charts
-  - [Framer Motion](https://www.framer.com/motion/) - Animation library
-- **State Management**: React Context API
-- **HTTP Client**: [Axios](https://axios-http.com/) - Promise based HTTP client
-
-### 🛠 Backend
-- **Runtime**: [Node.js](https://nodejs.org/) - JavaScript runtime
-- **Framework**: [Express](https://expressjs.com/) - Web framework for Node.js
-- **Database**: [Supabase](https://supabase.com/) - Open source Firebase alternative
-- **Market Data**: [Finnhub](https://finnhub.io/) - Real-time RESTful APIs for stocks
-- **API Documentation**: [Github Pages](https://hackstyx.github.io/portfolio-tracker/)
-
-### 🚀 DevOps & Infrastructure
-- **Frontend Hosting**: [Vercel](https://vercel.com/)
-  - Zero-config deployments
-  - Automatic HTTPS
-  - Edge Network for optimal performance
-- **Backend Hosting**: [Render](https://render.com/)
-  - Containerized deployment
-  - Automatic scaling
-  - Built-in monitoring
-- **Database Hosting**: [Supabase](https://supabase.com/)
-  - PostgreSQL database
-  - Automated backups
-  - High availability
-
-### 📦 Additional Tools
-- **Version Control**: Git & GitHub
-- **Code Quality**: ESLint & Prettier
-- **API Testing**: Thunder Client
-- **Environment Variables**: dotenv
-- **Security**: CORS
-- **Real-time Monitoring**: UpTimeRobot
-
-## ⚠️ Limitations
-
-- Uses simulated stock data when Finnhub API rate limit is reached
-- Single-user environment
-- Price updates every minute
-- Best viewed in modern browsers
-- Backend spins down after 15 minutes of inactivity and needs time to restart
-- Limited to 60 API calls per minute (Finnhub free tier)
-
-## 📄 License
-
-This project is licensed under the MIT License.
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-
-For more information, see the [LICENSE](LICENSE) file in the repository.
-
-
-
-<div align="center">
-  <p>THANK YOU FOR VISITING ❤️</p>
-</div>
-
-<p align="center">
-	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
-</p>
+See [DEPLOYMENT_GUIDE.md](./DEPLOYMENT_GUIDE.md) for detailed deployment instructions.

From 6206f8833d4e7e410d956eb71e73abe9620b1e7e Mon Sep 17 00:00:00 2001
From: HackStyx <1bi22cs118@bit-bangalore.edu.in>
Date: Sun, 20 Jul 2025 20:18:21 +0530
Subject: [PATCH 13/13] fix: remove fallback to old backend URL, use only env
 variable for API base URL

---
 src/components/layout/Sidebar.jsx       | 2 +-
 src/components/modals/AddStockModal.jsx | 2 +-
 src/services/api.js                     | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/layout/Sidebar.jsx b/src/components/layout/Sidebar.jsx
index 7366c8f..9fd63a6 100644
--- a/src/components/layout/Sidebar.jsx
+++ b/src/components/layout/Sidebar.jsx
@@ -16,7 +16,7 @@ import {
   HiLogout
 } from 'react-icons/hi';
 
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://portfolio-tracker-backend-y7ne.onrender.com/api';
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
 // Create axios instance with base URL
 const api = axios.create({
diff --git a/src/components/modals/AddStockModal.jsx b/src/components/modals/AddStockModal.jsx
index 247a5be..6391d39 100644
--- a/src/components/modals/AddStockModal.jsx
+++ b/src/components/modals/AddStockModal.jsx
@@ -5,7 +5,7 @@ import { TextInput, NumberInput, Button } from '@tremor/react';
 import axios from 'axios';
 
 // Get API URL from environment variable, fallback to production URL if not set
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://portfolio-tracker-backend-y7ne.onrender.com/api';
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
 // Create axios instance with base URL
 const api = axios.create({
diff --git a/src/services/api.js b/src/services/api.js
index 9ff4b6f..8f80f54 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -1,7 +1,7 @@
 import axios from 'axios';
 import { supabase } from '../config/supabase';
 
-const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://portfolio-tracker-backend-y7ne.onrender.com/api';
+const API_BASE_URL = import.meta.env.VITE_API_BASE_URL;
 
 // Create axios instance with base URL
 const api = axios.create({