changed the sidebar animation and added holdings in the analysis section

frontend/src/App.tsx

@@ -1,4 +1,5 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { useState } from 'react';
 import Sidebar from './components/Sidebar';
 import Landing from './pages/Landing';
 import Login from './pages/Login';
@@ -23,10 +24,12 @@ function ProtectedRoute({ children }: { children: React.ReactNode }) {
 }
 
 function AppLayout({ children }: { children: React.ReactNode }) {
+  const [sidebarExpanded, setSidebarExpanded] = useState(false);
+
   return (
     <div className="app-layout">
-      <Sidebar />
-      <main className="app-main">
+      <Sidebar onExpandChange={setSidebarExpanded} />
+      <main className="app-main" style={{ marginLeft: sidebarExpanded ? 260 : 68 }}>
         {children}
       </main>
     </div>

frontend/src/components/Sidebar.tsx

@@ -1,8 +1,27 @@
-import { NavLink, useNavigate } from 'react-router-dom';
+import { NavLink, useNavigate, useLocation } from 'react-router-dom';
+import { useState, useEffect } from 'react';
 
-export default function Sidebar() {
+interface SidebarProps {
+  onExpandChange?: (expanded: boolean) => void;
+}
+
+export default function Sidebar({ onExpandChange }: SidebarProps) {
   const navigate = useNavigate();
+  const location = useLocation();
   const user = JSON.parse(localStorage.getItem('qh_user') || 'null');
+  const [drawerOpen, setDrawerOpen] = useState(false);
+  const [isMobile, setIsMobile] = useState(false);
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  useEffect(() => {
+    const check = () => setIsMobile(window.innerWidth <= 768);
+    check();
+    window.addEventListener('resize', check);
+    return () => window.removeEventListener('resize', check);
+  }, []);
+
+  // Close drawer on route change
+  useEffect(() => { setDrawerOpen(false); }, [location.pathname]);
 
   const handleLogout = () => {
     localStorage.removeItem('qh_token');
@@ -10,7 +29,7 @@ export default function Sidebar() {
     navigate('/login');
   };
 
-  const links = [
+  const allLinks = [
     {
       section: 'Overview',
       items: [
@@ -44,10 +63,21 @@ export default function Sidebar() {
     },
   ];
 
-  return (
-    <aside className="sidebar">
-      {/* Brand */}
-      <div className="sidebar-brand">
+  // Primary nav items for mobile bottom bar (5 key items)
+  const mobileNavItems = [
+    allLinks[0].items[0], // Dashboard
+    allLinks[1].items[0], // Markets
+    allLinks[0].items[1], // Holdings
+    allLinks[1].items[1], // Factor Analysis
+  ];
+
+  // ── Desktop Sidebar ──────────────────────────────────────────────
+  const desktopSidebar = (
+    <aside
+      className={`sidebar${isExpanded ? ' sidebar-expanded' : ''}`}
+      onMouseEnter={() => { setIsExpanded(true); onExpandChange?.(true); }}
+      onMouseLeave={() => { setIsExpanded(false); onExpandChange?.(false); }}
+    >      <div className="sidebar-brand">
         <NavLink to="/dashboard" className="sidebar-logo">
           <svg width="32" height="32" viewBox="0 0 32 32" fill="none">
             <rect width="32" height="32" rx="8" fill="#005241"/>
@@ -59,9 +89,8 @@ export default function Sidebar() {
         </NavLink>
       </div>
 
-      {/* Navigation */}
       <nav className="sidebar-nav">
-        {links.map((group) => (
+        {allLinks.map((group) => (
           <div key={group.section} className="sidebar-section">
             <div className="sidebar-section-label">{group.section}</div>
             {group.items.map((link) => (
@@ -78,7 +107,6 @@ export default function Sidebar() {
         ))}
       </nav>
 
-      {/* Bottom user section */}
       <div className="sidebar-footer">
         {user && (
           <div className="sidebar-user">
@@ -100,4 +128,86 @@ export default function Sidebar() {
       </div>
     </aside>
   );
+
+  // ── Mobile Bottom Tab Bar + Drawer ───────────────────────────────
+  const mobileNav = (
+    <>
+      <nav className="mobile-nav">
+        <div className="mobile-nav-items">
+          {mobileNavItems.map((item) => (
+            <NavLink
+              key={item.to}
+              to={item.to}
+              className={({ isActive }) => `mobile-nav-item ${isActive ? 'active' : ''}`}
+            >
+              {item.icon}
+              <span>{item.label}</span>
+            </NavLink>
+          ))}
+          {/* More button */}
+          <button
+            className={`mobile-nav-item ${drawerOpen ? 'active' : ''}`}
+            onClick={() => setDrawerOpen(!drawerOpen)}
+          >
+            <svg viewBox="0 0 20 20" fill="currentColor" width="20" height="20">
+              <path fillRule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd"/>
+            </svg>
+            <span>More</span>
+          </button>
+        </div>
+      </nav>
+
+      {/* Slide-up drawer with all nav items */}
+      {drawerOpen && (
+        <>
+          <div className="mobile-drawer-overlay" onClick={() => setDrawerOpen(false)} />
+          <div className="mobile-drawer">
+            <div className="mobile-drawer-handle" />
+            {allLinks.map((group) => (
+              <div key={group.section} className="sidebar-section">
+                <div className="sidebar-section-label">{group.section}</div>
+                {group.items.map((link) => (
+                  <NavLink
+                    key={link.to}
+                    to={link.to}
+                    className={({ isActive }) => `sidebar-link ${isActive ? 'active' : ''}`}
+                    onClick={() => setDrawerOpen(false)}
+                  >
+                    <span className="sidebar-icon">{link.icon}</span>
+                    <span className="sidebar-label">{link.label}</span>
+                  </NavLink>
+                ))}
+              </div>
+            ))}
+            {/* User + Logout in drawer */}
+            <div style={{ borderTop: '1px solid var(--border-subtle)', marginTop: '0.5rem', paddingTop: '0.75rem' }}>
+              {user && (
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.75rem', padding: '0.5rem 1rem', marginBottom: '0.5rem' }}>
+                  <div className="sidebar-avatar">
+                    {(user.username || 'U').charAt(0).toUpperCase()}
+                  </div>
+                  <div>
+                    <div style={{ fontSize: '0.85rem', fontWeight: 600 }}>{user.full_name || user.username}</div>
+                    <div style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>{user.email}</div>
+                  </div>
+                </div>
+              )}
+              <button className="sidebar-link sidebar-logout" onClick={handleLogout} style={{ width: '100%' }}>
+                <span className="sidebar-icon">
+                  <svg viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M3 3a1 1 0 00-1 1v12a1 1 0 102 0V4a1 1 0 00-1-1zm10.293 9.293a1 1 0 001.414 1.414l3-3a1 1 0 000-1.414l-3-3a1 1 0 10-1.414 1.414L14.586 9H7a1 1 0 100 2h7.586l-1.293 1.293z" clipRule="evenodd"/></svg>
+                </span>
+                <span className="sidebar-label">Log Out</span>
+              </button>
+            </div>
+          </div>
+        </>
+      )}
+    </>
+  );
+
+  return (
+    <>
+      {isMobile ? mobileNav : desktopSidebar}
+    </>
+  );
 }

frontend/src/index.css

@@ -138,9 +138,8 @@ h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 600; }
   transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
   z-index: 200;
 }
-.sidebar:hover {
+.sidebar.sidebar-expanded {
   width: 260px;
-  box-shadow: var(--shadow-lg);
 }
 
 /* Brand */
@@ -172,7 +171,7 @@ h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 600; }
   transform: translateX(-8px);
   transition: opacity 0.2s ease 0.05s, transform 0.2s ease 0.05s;
 }
-.sidebar:hover .sidebar-brand-text {
+.sidebar.sidebar-expanded .sidebar-brand-text {
   opacity: 1;
   transform: translateX(0);
 }
@@ -204,7 +203,7 @@ h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 600; }
   opacity: 0;
   transition: opacity 0.2s ease 0.05s;
 }
-.sidebar:hover .sidebar-section-label {
+.sidebar.sidebar-expanded .sidebar-section-label {
   opacity: 1;
 }
 
@@ -256,7 +255,7 @@ h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 600; }
   transform: translateX(-8px);
   transition: opacity 0.2s ease 0.05s, transform 0.2s ease 0.05s;
 }
-.sidebar:hover .sidebar-label {
+.sidebar.sidebar-expanded .sidebar-label {
   opacity: 1;
   transform: translateX(0);
 }
@@ -293,7 +292,7 @@ h3 { font-size: 1rem; font-family: var(--font-sans); font-weight: 600; }
   opacity: 0;
   transition: opacity 0.2s ease 0.05s;
 }
-.sidebar:hover .sidebar-user-info {
+.sidebar.sidebar-expanded .sidebar-user-info {
   opacity: 1;
 }
 .sidebar-user-name {
@@ -566,12 +565,393 @@ tr:hover td { background: var(--bg-hover); }
 }
 .icon-box svg { width: 22px; height: 22px; }
 
-/* ── Responsive ──────────────────────────────────────────────────────── */
+/* ═══════════════════════════════════════════════════════════════════════
+   MOBILE RESPONSIVE — max-width: 768px
+   All rules below ONLY apply on mobile. Desktop is untouched.
+   ═══════════════════════════════════════════════════════════════════════ */
+
 @media (max-width: 768px) {
-  .app-main { margin-left: 0; }
-  .sidebar { display: none; }
-  .page { padding: 1.5rem 1rem; }
-  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
+
+  /* ── App Shell ─────────────────────────────────────────────────────── */
+  .app-main {
+    margin-left: 0 !important;
+    padding-bottom: 72px; /* space for bottom tab bar */
+  }
+
+  /* ── Desktop Sidebar hidden on mobile ──────────────────────────────── */
+  .sidebar:not(.mobile-nav) {
+    display: none !important;
+  }
+
+  /* ── Mobile Bottom Tab Bar ─────────────────────────────────────────── */
+  .mobile-nav {
+    display: flex !important;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 64px;
+    background: var(--bg-primary);
+    border-top: 1px solid var(--border-color);
+    z-index: 300;
+    padding: 0 0.25rem;
+    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
+  }
+  .mobile-nav-items {
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+  .mobile-nav-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.2rem;
+    padding: 0.35rem 0.5rem;
+    border-radius: var(--radius-md);
+    color: var(--text-muted);
+    text-decoration: none;
+    font-size: 0.6rem;
+    font-weight: 600;
+    letter-spacing: 0.02em;
+    transition: color var(--transition-fast);
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-family: var(--font-sans);
+  }
+  .mobile-nav-item svg {
+    width: 20px;
+    height: 20px;
+  }
+  .mobile-nav-item.active,
+  .mobile-nav-item:hover {
+    color: var(--accent);
+  }
+
+  /* ── Mobile drawer overlay ─────────────────────────────────────────── */
+  .mobile-drawer-overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.4);
+    z-index: 400;
+    animation: fadeIn 0.2s ease;
+  }
+  .mobile-drawer {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: var(--bg-primary);
+    border-radius: 20px 20px 0 0;
+    padding: 1rem 0.75rem 2rem;
+    z-index: 500;
+    max-height: 70vh;
+    overflow-y: auto;
+    animation: slideUp 0.25s ease;
+  }
+  @keyframes slideUp {
+    from { transform: translateY(100%); }
+    to { transform: translateY(0); }
+  }
+  .mobile-drawer-handle {
+    width: 36px;
+    height: 4px;
+    background: var(--border-color);
+    border-radius: 2px;
+    margin: 0 auto 1rem;
+  }
+  .mobile-drawer .sidebar-link {
+    width: 100%;
+    padding: 0.75rem 1rem;
+    margin: 2px 0;
+    font-size: 0.88rem;
+    border-radius: var(--radius-md);
+    opacity: 1;
+  }
+  .mobile-drawer .sidebar-link .sidebar-label {
+    opacity: 1;
+    transform: none;
+  }
+  .mobile-drawer .sidebar-link .sidebar-icon {
+    width: 22px;
+    height: 22px;
+  }
+  .mobile-drawer .sidebar-section-label {
+    opacity: 1;
+    padding: 0.5rem 1rem 0.25rem;
+    font-size: 0.65rem;
+  }
+
+  /* ── Page layout ───────────────────────────────────────────────────── */
+  .page {
+    padding: 1.25rem 1rem !important;
+    max-width: 100%;
+  }
+  .page-header {
+    margin-bottom: 1.25rem;
+    padding-bottom: 1rem;
+  }
+  .page-header h1 {
+    font-size: 1.5rem !important;
+  }
+  .page-header p {
+    font-size: 0.85rem;
+  }
+
+  /* ── Grids collapse ────────────────────────────────────────────────── */
+  .grid-2,
+  .grid-3,
+  .grid-4 {
+    grid-template-columns: 1fr !important;
+    gap: 1rem !important;
+  }
+
+  /* ── Cards ─────────────────────────────────────────────────────────── */
+  .card {
+    padding: 1.125rem !important;
+    border-radius: var(--radius-md);
+  }
+  .card-header {
+    margin-bottom: 1rem;
+    padding-bottom: 0.75rem;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+  .card-header h3 {
+    font-size: 0.88rem;
+  }
+
+  /* ── Tables ────────────────────────────────────────────────────────── */
+  .table-container {
+    margin: 0 -1.125rem;
+    border-radius: 0;
+    border-left: none;
+    border-right: none;
+    -webkit-overflow-scrolling: touch;
+  }
+  th, td {
+    padding: 0.5rem 0.625rem;
+    font-size: 0.72rem;
+    white-space: nowrap;
+  }
+
+  /* ── Charts ────────────────────────────────────────────────────────── */
+  .chart-container {
+    height: 240px !important;
+    padding: 0.375rem;
+  }
+
+  /* ── Metrics ───────────────────────────────────────────────────────── */
+  .metric { padding: 0.875rem 0.75rem; }
+  .metric-value { font-size: 1.375rem; }
+  .metric-label { font-size: 0.6rem; }
+
+  /* ── Tabs ───────────────────────────────────────────────────────────── */
+  .tabs {
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    flex-wrap: nowrap;
+    gap: 0;
+    margin-bottom: 1.25rem;
+    scrollbar-width: none;
+  }
+  .tabs::-webkit-scrollbar { display: none; }
+  .tab {
+    padding: 0.625rem 0.875rem;
+    font-size: 0.7rem;
+    flex-shrink: 0;
+  }
+
+  /* ── Buttons ───────────────────────────────────────────────────────── */
+  .btn-lg {
+    padding: 0.75rem 1.5rem;
+    font-size: 0.8rem;
+  }
+
+  /* ── Forms ─────────────────────────────────────────────────────────── */
+  .input, select, textarea {
+    font-size: 16px; /* prevents iOS zoom on focus */
+  }
+  .form-group label {
+    font-size: 0.7rem;
+  }
+
+  /* ── Flex Utils ────────────────────────────────────────────────────── */
+  .flex-between {
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  /* ── Empty state ───────────────────────────────────────────────────── */
+  .empty-state {
+    padding: 2.5rem 1.5rem;
+  }
+
+  /* ── Loading ───────────────────────────────────────────────────────── */
+  .loading-overlay {
+    padding: 3rem 1.5rem;
+  }
+
+  /* ── Badge ─────────────────────────────────────────────────────────── */
+  .badge {
+    font-size: 0.6rem;
+    padding: 0.15rem 0.5rem;
+  }
+
+  /* ── Icon box ──────────────────────────────────────────────────────── */
+  .icon-box {
+    width: 40px;
+    height: 40px;
+  }
+  .icon-box svg { width: 18px; height: 18px; }
+
+  /* ═════════════════════════════════════════════════════════════════════
+     PAGE-SPECIFIC MOBILE OVERRIDES
+     ═════════════════════════════════════════════════════════════════════ */
+
+  /* ── Landing Page ──────────────────────────────────────────────────── */
+  .landing-header {
+    padding: 0.875rem 1rem !important;
+  }
+  .landing-header .brand-text {
+    font-size: 1.1rem;
+  }
+  .landing-hero {
+    min-height: 80vh !important;
+    padding: 1rem !important;
+  }
+  .landing-hero h1 {
+    font-size: clamp(1.75rem, 7vw, 2.5rem) !important;
+    line-height: 1.2 !important;
+  }
+  .landing-hero p {
+    font-size: 0.9rem !important;
+  }
+  .landing-hero .flex-gap {
+    flex-direction: column;
+    width: 100%;
+  }
+  .landing-hero .flex-gap .btn {
+    width: 100%;
+  }
+  .landing-section {
+    padding: 3rem 1.25rem !important;
+  }
+  .landing-footer {
+    flex-direction: column !important;
+    gap: 0.5rem;
+    text-align: center;
+    padding: 1.5rem 1rem !important;
+  }
+
+  /* ── Login / Register ──────────────────────────────────────────────── */
+  .auth-container {
+    flex-direction: column !important;
+  }
+  .auth-card {
+    padding: 2rem 1.25rem !important;
+    min-height: 100vh;
+  }
+  .auth-image {
+    display: none !important;
+  }
+
+  /* ── Dashboard ─────────────────────────────────────────────────────── */
+  .dashboard-ticker-strip {
+    gap: 0.375rem !important;
+  }
+  .dashboard-ticker-strip button {
+    min-width: 120px !important;
+    padding: 0.5rem 0.625rem !important;
+  }
+
+  /* ── Market Explorer ───────────────────────────────────────────────── */
+  .market-search-bar {
+    flex-direction: column !important;
+    gap: 0.75rem !important;
+  }
+  .market-search-bar .input {
+    width: 100% !important;
+  }
+  .market-search-bar select {
+    width: 100% !important;
+  }
+  .market-tabs {
+    overflow-x: auto !important;
+    flex-wrap: nowrap !important;
+  }
+  .ticker-chips {
+    flex-wrap: wrap !important;
+    gap: 0.375rem !important;
+  }
+  .company-info-grid {
+    grid-template-columns: 1fr 1fr !important;
+    gap: 0.625rem !important;
+  }
+
+  /* ── Factor Analysis ───────────────────────────────────────────────── */
+  .factor-input-bar {
+    flex-direction: column !important;
+    gap: 0.75rem !important;
+  }
+  .factor-input-bar .input {
+    width: 100% !important;
+  }
+
+  /* ── Sentiment ─────────────────────────────────────────────────────── */
+  .sentiment-gauge-row {
+    grid-template-columns: 1fr !important;
+  }
+
+  /* ── Holdings ──────────────────────────────────────────────────────── */
+  .holdings-actions {
+    flex-direction: column !important;
+    gap: 0.5rem !important;
+  }
+  .holdings-actions .btn {
+    width: 100%;
+  }
+
+  /* ── Strategy Builder ──────────────────────────────────────────────── */
+  .strategy-form-row {
+    flex-direction: column !important;
+    gap: 0.75rem !important;
+  }
+
+  /* ── Portfolio Analysis ────────────────────────────────────────────── */
+  .portfolio-stats-grid {
+    grid-template-columns: 1fr 1fr !important;
+  }
+
+  /* ── Recharts responsive ───────────────────────────────────────────── */
+  .recharts-wrapper {
+    font-size: 0.7rem;
+  }
+  .recharts-cartesian-axis-tick-value {
+    font-size: 0.65rem;
+  }
+
+  /* ── Generic inline-style overrides using attribute selectors ───── */
+  /* Override inline grid/flex styles that use fixed column widths */
+  [style*="grid-template-columns: repeat"] {
+    grid-template-columns: 1fr !important;
+  }
+  [style*="gridTemplateColumns"] {
+    grid-template-columns: 1fr !important;
+  }
+  [style*="padding: 6rem 3rem"],
+  [style*="padding:'6rem 3rem'"] {
+    padding: 3rem 1.25rem !important;
+  }
+
+  /* Fix inline flex layouts that don't wrap */
+  [style*="display: flex"][style*="gap:"] {
+    flex-wrap: wrap;
+  }
 }
 
 /* ── Scrollbar ───────────────────────────────────────────────────────── */

frontend/src/pages/Dashboard.tsx

@@ -105,7 +105,7 @@ export default function Dashboard() {
       </div>
 
       {/* Global Market Ticker Strip */}
-      <div style={{display:'flex',gap:'0.5rem',marginBottom:'1.5rem',overflowX:'auto',paddingBottom:'0.25rem'}}>
+      <div className="dashboard-ticker-strip" style={{display:'flex',gap:'0.5rem',marginBottom:'1.5rem',overflowX:'auto',paddingBottom:'0.25rem'}}>
         {GLOBAL_INDICES.map(idx => {
           const data = globalPrices[idx.ticker];
           const change = data?.change || 0;

frontend/src/pages/FactorAnalysis.tsx

@@ -78,7 +78,7 @@ export default function FactorAnalysis() {
 
       {/* Input */}
       <div className="card" style={{marginBottom:'1.5rem'}}>
-        <div style={{display:'flex',gap:'0.75rem',alignItems:'flex-end',flexWrap:'wrap'}}>
+        <div className="factor-input-bar" style={{display:'flex',gap:'0.75rem',alignItems:'flex-end',flexWrap:'wrap'}}>
           <div style={{flex:1,minWidth:300}}>
             <label style={{fontSize:'0.75rem',fontWeight:600,color:'var(--text-muted)',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:'0.375rem'}}>Ticker Universe (comma-separated)</label>
             <input className="input" value={tickers} onChange={e => setTickers(e.target.value)} placeholder="AAPL, MSFT, GOOGL..." />

frontend/src/pages/Landing.tsx

@@ -36,7 +36,7 @@ export default function Landing() {
   return (
     <div style={{minHeight:'100vh',background:'var(--bg-primary)'}}>
       {/* ── Top Nav ────────────────────────────────────────────── */}
-      <header style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'1.25rem 3rem',position:'absolute',top:0,left:0,right:0,zIndex:10}}>
+      <header className="landing-header" style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'1.25rem 3rem',position:'absolute',top:0,left:0,right:0,zIndex:10}}>
         <div style={{fontFamily:'var(--font-serif)',fontSize:'1.3rem',fontWeight:600,color:'#fff',display:'flex',alignItems:'center',gap:'0.5rem'}}>
           <svg width="28" height="28" viewBox="0 0 32 32" fill="none">
             <rect width="32" height="32" rx="6" fill="rgba(255,255,255,0.15)"/>
@@ -51,7 +51,7 @@ export default function Landing() {
       </header>
 
       {/* ── Hero ──────────────────────────────────────────────── */}
-      <section style={{
+      <section className="landing-hero" style={{
         position:'relative',
         minHeight:'92vh',
         display:'flex',
@@ -86,7 +86,7 @@ export default function Landing() {
       </section>
 
       {/* ── Capabilities ──────────────────────────────────────── */}
-      <section style={{padding:'6rem 3rem',maxWidth:'1200px',margin:'0 auto'}}>
+      <section className="landing-section" style={{padding:'6rem 3rem',maxWidth:'1200px',margin:'0 auto'}}>
         <div style={{textAlign:'center',marginBottom:'4rem'}}>
           <p style={{fontSize:'0.75rem',fontWeight:600,letterSpacing:'0.2em',textTransform:'uppercase',color:'var(--accent)',marginBottom:'0.75rem'}}>Capabilities</p>
           <h2>What Powers Our Platform</h2>
@@ -106,7 +106,7 @@ export default function Landing() {
       </section>
 
       {/* ── Global Coverage ───────────────────────────────────── */}
-      <section style={{
+      <section className="landing-section" style={{
         padding:'6rem 3rem',
         backgroundImage:'url(/images/pattern-bg.png)',
         backgroundSize:'cover',
@@ -134,7 +134,7 @@ export default function Landing() {
       </section>
 
       {/* ── CTA ───────────────────────────────────────────────── */}
-      <section style={{
+      <section className="landing-section" style={{
         position:'relative',
         padding:'6rem 3rem',
         backgroundImage:'url(/images/buildings-bg.png)',
@@ -156,7 +156,7 @@ export default function Landing() {
       </section>
 
       {/* ── Footer ────────────────────────────────────────────── */}
-      <footer style={{padding:'2rem 3rem',borderTop:'1px solid var(--border-color)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
+      <footer className="landing-footer" style={{padding:'2rem 3rem',borderTop:'1px solid var(--border-color)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
         <p style={{color:'var(--text-muted)',fontSize:'0.75rem'}}>
           © 2026 QuantHedge. All rights reserved. For research and educational purposes only.
         </p>

frontend/src/pages/Login.tsx

@@ -25,9 +25,9 @@ export default function Login() {
   };
 
   return (
-    <div style={{minHeight:'100vh',display:'flex'}}>
+    <div className="auth-container" style={{minHeight:'100vh',display:'flex'}}>
       {/* Left — form */}
-      <div style={{flex:1,display:'flex',alignItems:'center',justifyContent:'center',padding:'3rem'}}>
+      <div className="auth-card" style={{flex:1,display:'flex',alignItems:'center',justifyContent:'center',padding:'3rem'}}>
         <div style={{width:'100%',maxWidth:'400px'}}>
           <div style={{marginBottom:'2.5rem'}}>
             <div style={{display:'flex',alignItems:'center',gap:'0.5rem',marginBottom:'2rem'}}>
@@ -70,7 +70,7 @@ export default function Login() {
       </div>
 
       {/* Right — image */}
-      <div style={{
+      <div className="auth-image" style={{
         flex:1,
         backgroundImage:'url(/images/buildings-bg.png)',
         backgroundSize:'cover',

frontend/src/pages/MarketExplorer.tsx

@@ -50,7 +50,7 @@ export default function MarketExplorer() {
 
       {/* Search */}
       <div className="card" style={{marginBottom:'1.5rem'}}>
-        <div style={{display:'flex',gap:'0.75rem',alignItems:'flex-end',flexWrap:'wrap'}}>
+        <div className="market-search-bar" style={{display:'flex',gap:'0.75rem',alignItems:'flex-end',flexWrap:'wrap'}}>
           <div style={{flex:1,minWidth:200}}>
             <label style={{fontSize:'0.75rem',fontWeight:600,color:'var(--text-muted)',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:'0.375rem'}}>Ticker Symbol</label>
             <TickerSearch value={ticker} onChange={v => setTicker(v.toUpperCase())} onSelect={t => setTicker(t.symbol)} placeholder="Search any ticker..." />
@@ -73,7 +73,7 @@ export default function MarketExplorer() {
               <button key={m} className={`tab ${activeMarket === m ? 'active' : ''}`} onClick={() => loadPopularTickers(m)}>{m}</button>
             ))}
           </div>
-          <div style={{display:'flex',gap:'0.5rem',flexWrap:'wrap'}}>
+          <div className="ticker-chips" style={{display:'flex',gap:'0.5rem',flexWrap:'wrap'}}>
             {popularTickers.slice(0, 15).map(t => (
               <button key={t} className="btn btn-secondary btn-sm" style={{fontFamily:'var(--font-mono)',fontSize:'0.75rem'}}
                 onClick={() => search(t)}>{t}</button>
@@ -113,7 +113,7 @@ export default function MarketExplorer() {
           {companyInfo && !companyInfo.error && (
             <div className="card">
               <div className="card-header"><h3>Company Info</h3></div>
-              <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'0.75rem'}}>
+              <div className="company-info-grid" style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'0.75rem'}}>
                 {[
                   ['Sector', companyInfo.sector],
                   ['Industry', companyInfo.industry],

frontend/src/pages/PortfolioAnalysis.tsx

@@ -13,6 +13,7 @@ export default function PortfolioAnalysis() {
   const [activeTab, setActiveTab] = useState('optimize');
   const [corrData, setCorrData] = useState<any>(null);
   const [corrLoading, setCorrLoading] = useState(false);
+  const [holdingsLoading, setHoldingsLoading] = useState(false);
 
   const optimize = async () => {
     setLoading(true);
@@ -27,6 +28,25 @@ export default function PortfolioAnalysis() {
     } catch (e) { console.error(e); } finally { setLoading(false); }
   };
 
+  const useMyHoldings = async () => {
+    setHoldingsLoading(true);
+    try {
+      const res = await holdingsAPI.summary();
+      const holdings = res.data.holdings || [];
+      if (holdings.length === 0) {
+        alert('No holdings found. Add positions in the Holdings section first.');
+        return;
+      }
+      const holdingTickers = holdings.map((h: any) => h.ticker).join(', ');
+      setTickers(holdingTickers);
+    } catch (e) {
+      console.error(e);
+      alert('Failed to fetch holdings. Please try again.');
+    } finally {
+      setHoldingsLoading(false);
+    }
+  };
+
   const pieData = weights?.weights ? Object.entries(weights.weights).filter(([,v]: any) => v > 0.001).map(([ticker, weight]: any) => ({
     name: ticker, value: parseFloat((weight * 100).toFixed(1)),
   })) : [];
@@ -42,7 +62,26 @@ export default function PortfolioAnalysis() {
       <div className="card" style={{marginBottom:'1.5rem'}}>
         <div style={{display:'flex',gap:'0.75rem',alignItems:'flex-end',flexWrap:'wrap'}}>
           <div style={{flex:1,minWidth:300}}>
-            <label style={{fontSize:'0.75rem',fontWeight:600,color:'var(--text-muted)',textTransform:'uppercase',letterSpacing:'0.05em',display:'block',marginBottom:'0.375rem'}}>Portfolio Assets</label>
+            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'0.375rem'}}>
+              <label style={{fontSize:'0.75rem',fontWeight:600,color:'var(--text-muted)',textTransform:'uppercase',letterSpacing:'0.05em'}}>Portfolio Assets</label>
+              <button
+                onClick={useMyHoldings}
+                disabled={holdingsLoading}
+                style={{
+                  background:'none',border:'1px solid var(--border-color)',borderRadius:'var(--radius-sm)',
+                  padding:'0.2rem 0.6rem',fontSize:'0.7rem',fontWeight:600,color:'var(--accent)',
+                  cursor:'pointer',display:'flex',alignItems:'center',gap:'0.3rem',
+                  transition:'all 150ms ease',fontFamily:'var(--font-sans)',
+                }}
+                onMouseEnter={e => { e.currentTarget.style.background = 'var(--accent-lighter)'; e.currentTarget.style.borderColor = 'var(--accent)'; }}
+                onMouseLeave={e => { e.currentTarget.style.background = 'none'; e.currentTarget.style.borderColor = 'var(--border-color)'; }}
+              >
+                {holdingsLoading ? <div className="spinner" style={{width:10,height:10,borderWidth:1.5}} /> : (
+                  <svg width="12" height="12" viewBox="0 0 20 20" fill="currentColor"><path fillRule="evenodd" d="M4 4a2 2 0 00-2 2v4a2 2 0 002 2V6h10a2 2 0 00-2-2H4zm2 6a2 2 0 012-2h8a2 2 0 012 2v4a2 2 0 01-2 2H8a2 2 0 01-2-2v-4zm6 4a2 2 0 100-4 2 2 0 000 4z" clipRule="evenodd"/></svg>
+                )}
+                Use My Holdings
+              </button>
+            </div>
             <input className="input" value={tickers} onChange={e => setTickers(e.target.value)} />
           </div>
           <div>

frontend/src/pages/Register.tsx

@@ -25,9 +25,9 @@ export default function Register() {
   };
 
   return (
-    <div style={{minHeight:'100vh',display:'flex'}}>
+    <div className="auth-container" style={{minHeight:'100vh',display:'flex'}}>
       {/* Left — image */}
-      <div style={{
+      <div className="auth-image" style={{
         flex:1,
         backgroundImage:'url(/images/hero-bg.png)',
         backgroundSize:'cover',
@@ -47,7 +47,7 @@ export default function Register() {
       </div>
 
       {/* Right — form */}
-      <div style={{flex:1,display:'flex',alignItems:'center',justifyContent:'center',padding:'3rem'}}>
+      <div className="auth-card" style={{flex:1,display:'flex',alignItems:'center',justifyContent:'center',padding:'3rem'}}>
         <div style={{width:'100%',maxWidth:'400px'}}>
           <div style={{marginBottom:'2.5rem'}}>
             <div style={{display:'flex',alignItems:'center',gap:'0.5rem',marginBottom:'2rem'}}>