diff --git a/src/components/AnalysisBanner.jsx b/src/components/AnalysisBanner.jsx
index c87f3ab..b9b6be9 100644
--- a/src/components/AnalysisBanner.jsx
+++ b/src/components/AnalysisBanner.jsx
@@ -16,6 +16,7 @@ export default function AnalysisBanner({ page, description, onRun, loading = fal
   return (
     <>
       <div
+        className="analysis-banner"
         style={{
           marginBottom: 24,
 
@@ -37,6 +38,7 @@ export default function AnalysisBanner({ page, description, onRun, loading = fal
         {/* Left */}
 
         <div
+          className="analysis-banner-content"
           style={{
             display: 'flex',
             alignItems: 'center',
@@ -102,6 +104,7 @@ export default function AnalysisBanner({ page, description, onRun, loading = fal
         {/* Right */}
 
         <div
+          className="analysis-banner-actions"
           style={{
             display: 'flex',
             alignItems: 'center',
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index bdafb79..82899e8 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -1,29 +1,60 @@
-import React from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { NavLink, useNavigate } from 'react-router-dom'
-import { FiHeart, FiSettings, FiZap } from 'react-icons/fi'
+import { FiBarChart2, FiBook, FiChevronRight, FiExternalLink, FiHeart, FiHome, FiMenu, FiSettings, FiShare2, FiShield, FiSun, FiUsers, FiZap, FiX } from 'react-icons/fi'
 import { useApp } from '../context/AppContext'
 import ThemeToggle from './ThemeToggle'
 import Logo from "../assets/og-logo.svg?react";
-import { useTheme } from '../context/ThemeContext'
 
 const LINKS = [
-  { to: '/overview', label: 'Overview' },
-  { to: '/repositories', label: 'Repositories' },
-  { to: '/contributors', label: 'Contributors' },
-  { to: '/network', label: 'Network' },
-  { to: '/analytics', label: 'Analytics' },
-  { to: '/governance', label: 'Governance' },
+  { to: '/overview', label: 'Overview', icon: FiHome },
+  { to: '/repositories', label: 'Repositories', icon: FiBook },
+  { to: '/contributors', label: 'Contributors', icon: FiUsers },
+  { to: '/network', label: 'Network', icon: FiShare2 },
+  { to: '/analytics', label: 'Analytics', icon: FiBarChart2 },
+  { to: '/governance', label: 'Governance', icon: FiShield },
 ]
 
 export default function Navbar() {
-  const { orgs, rateLimit } = useApp()
-  const { theme } = useTheme();
+  const { rateLimit } = useApp()
   const navigate = useNavigate()
-  const hasData = orgs.length > 0
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+  const [isOverflowing, setIsOverflowing] = useState(false)
+  const navbarRef = useRef(null)
+  const linksRef = useRef(null)
+  const menuToggleRef = useRef(null)
   const lowLimit = rateLimit && rateLimit.remaining < 15
 
+  useEffect(() => {
+    const navbar = navbarRef.current
+    const links = linksRef.current
+    const menuToggle = menuToggleRef.current
+    if (!navbar || !links || !menuToggle) return
+
+    const measureOverflow = () => {
+      const wasOverflowing = links.classList.contains('navbar-links-overflowing')
+      links.classList.remove('navbar-links-overflowing')
+      menuToggle.classList.remove('navbar-menu-toggle-visible')
+      const nextOverflowing = links.scrollWidth > links.clientWidth
+      if (wasOverflowing) {
+        links.classList.add('navbar-links-overflowing')
+        menuToggle.classList.add('navbar-menu-toggle-visible')
+      }
+      setIsOverflowing(current => current === nextOverflowing ? current : nextOverflowing)
+    }
+
+    const observer = new ResizeObserver(measureOverflow)
+    observer.observe(navbar)
+    observer.observe(links)
+    measureOverflow()
+    return () => observer.disconnect()
+  }, [])
+
+  useEffect(() => {
+    if (!isOverflowing) setMobileMenuOpen(false)
+  }, [isOverflowing])
+
   return (
-    <nav style={{
+    <nav ref={navbarRef} className={`app-navbar${mobileMenuOpen ? ' app-navbar-menu-open' : ''}`} style={{
       position: 'sticky', top: 0, zIndex: 100,
       background: 'var(--bg)',
       backdropFilter: 'blur(10px)',
@@ -40,8 +71,8 @@ export default function Navbar() {
       </span>
 
       {/* Nav links — only visible when data is loaded */}
-      <div style={{ display: 'flex', gap: 2, flex: 1, overflowX: 'auto' }}>
-        {hasData && LINKS.map(({ to, label }) => (
+      <div ref={linksRef} className={`navbar-links${isOverflowing ? ' navbar-links-overflowing' : ''}`} style={{ display: 'flex', gap: 2, flex: 1, overflowX: 'auto' }}>
+        {LINKS.map(({ to, label }) => (
           <NavLink
             key={to} to={to}
             className="navbar-link"
@@ -63,9 +94,9 @@ export default function Navbar() {
       </div>
 
       {/* Right side */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexShrink: 0 }}>
+      <div className="navbar-controls" style={{ display: 'flex', alignItems: 'center', gap: 14, flexShrink: 0 }}>
         {rateLimit && (
-          <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, color: lowLimit ? 'var(--red)' : 'var(--text2)' }}>
+          <div className="navbar-rate-limit" style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, color: lowLimit ? 'var(--red)' : 'var(--text2)' }}>
             <FiZap size={12} />
             {rateLimit.remaining.toLocaleString()} / {rateLimit.limit.toLocaleString()}
           </div>
@@ -86,6 +117,68 @@ export default function Navbar() {
           Support Us
         </button>
       </div>
+
+      <button
+        type="button"
+        ref={menuToggleRef}
+        className={`navbar-menu-toggle${isOverflowing ? ' navbar-menu-toggle-visible' : ''}`}
+        aria-label="Toggle navigation"
+        aria-expanded={mobileMenuOpen}
+        aria-controls="mobile-navigation"
+        onClick={() => setMobileMenuOpen(open => !open)}
+      >
+        <FiMenu className="navbar-menu-icon" size={19} />
+        <FiX className="navbar-close-icon" size={19} />
+      </button>
+
+      {mobileMenuOpen && (
+        <div id="mobile-navigation" className="mobile-nav-menu mobile-nav-menu-visible">
+          <div className="mobile-nav-header">
+            <button
+              type="button"
+              aria-label="Close navigation"
+              onClick={() => setMobileMenuOpen(false)}
+            >
+              <FiX size={19} />
+            </button>
+          </div>
+          <div className="mobile-nav-heading">Main navigation</div>
+          {LINKS.map(({ to, label, icon: Icon }) => (
+            <NavLink
+              key={to}
+              to={to}
+              className="navbar-link mobile-nav-row"
+              onClick={() => setMobileMenuOpen(false)}
+              style={({ isActive }) => ({
+                color: isActive ? 'var(--accent)' : 'var(--text2)',
+                background: isActive ? 'rgba(245,197,24,.1)' : 'transparent',
+                borderLeft: isActive ? '2px solid var(--accent)' : '2px solid transparent',
+              })}
+            >
+              <Icon size={16} />
+              <span>{label}</span>
+              <FiChevronRight className="mobile-nav-arrow" size={15} />
+            </NavLink>
+          ))}
+          <div className="mobile-nav-divider" />
+          <div className="mobile-nav-heading">Other controls</div>
+          <button className="mobile-nav-row" onClick={() => { navigate('/settings'); setMobileMenuOpen(false) }}>
+            <FiSettings size={16} />
+            <span>Settings</span>
+            <FiChevronRight className="mobile-nav-arrow" size={15} />
+          </button>
+          <div className="mobile-nav-row">
+            <FiSun size={16} />
+            <span>Theme</span>
+            <span className="mobile-nav-theme-toggle"><ThemeToggle /></span>
+          </div>
+          <button className="mobile-nav-row" onClick={() => { navigate('/support-us'); setMobileMenuOpen(false) }}>
+            <FiHeart size={16} />
+            <span>Support Us</span>
+            <FiExternalLink className="mobile-nav-arrow" size={15} />
+          </button>
+        </div>
+      )}
     </nav>
   )
 }
diff --git a/src/components/RateLimitBanner.jsx b/src/components/RateLimitBanner.jsx
index b09369d..99bf704 100644
--- a/src/components/RateLimitBanner.jsx
+++ b/src/components/RateLimitBanner.jsx
@@ -15,17 +15,20 @@ export default function RateLimitBanner() {
   const Icon = crit ? FiAlertTriangle : FiZap
 
   return (
-    <div style={{
+    <div className="rate-limit-banner" style={{
       borderLeft: `3px solid ${crit ? 'var(--red)' : 'var(--accent)'}`,
       background: crit ? 'rgba(239,68,68,.07)' : 'rgba(245,197,24,.06)',
       padding: '9px 24px',
       display: 'flex', justifyContent: 'space-between', alignItems: 'center',
     }}>
-      <span style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
-        <Icon size={13} color={crit ? 'var(--red)' : 'var(--accent)'} />
-        API RATE LIMIT: <strong style={{ marginLeft: 2 }}>{rateLimit.remaining} / {rateLimit.limit}</strong> REQUESTS REMAINING
+      <span className="rate-limit-top-row" style={{ fontSize: 12, display: 'flex', alignItems: 'center', gap: 8 }}>
+        <span className="rate-limit-summary">
+          <Icon size={13} color={crit ? 'var(--red)' : 'var(--accent)'} />
+          API RATE LIMIT: <strong style={{ marginLeft: 2 }}>{rateLimit.remaining} / {rateLimit.limit}</strong> <span className="rate-limit-remaining-label">REQUESTS REMAINING</span>
+        </span>
         {!pat && (
           <span
+            className="rate-limit-pat"
             onClick={() => navigate('/settings')}
             style={{ color: 'var(--accent)', marginLeft: 10, cursor: 'pointer', fontWeight: 600 }}
           >
@@ -33,7 +36,7 @@ export default function RateLimitBanner() {
           </span>
         )}
       </span>
-      <span style={{ fontSize: 11, color: 'var(--text2)' }}>
+      <span className="rate-limit-used" style={{ fontSize: 11, color: 'var(--text2)' }}>
         Used: {rateLimit.used} • Reset at{' '}
         {new Date(rateLimit.reset * 1000).toLocaleTimeString()}
       </span>
diff --git a/src/components/layout/Footer.jsx b/src/components/layout/Footer.jsx
index 3041221..0bc9b85 100644
--- a/src/components/layout/Footer.jsx
+++ b/src/components/layout/Footer.jsx
@@ -31,7 +31,7 @@ const footerLinks = [
   },
   {
     label: "Support Us",
-    href:"/support-us"
+    href: "/support-us"
   }
 ];
 
@@ -71,23 +71,23 @@ const socialLinks = [
 export default function Footer() {
   const { theme } = useTheme();
   return (
-    <footer role="contentinfo" style={{ borderTop: "1px solid var(--border)" }}>
-      <div className="flex w-full flex-col gap-8 px-4 py-8 md:px-6 lg:flex-row lg:items-center lg:justify-around">
+    <footer className="site-footer" role="contentinfo" style={{ borderTop: "1px solid var(--border)" }}>
+      <div className="site-footer-inner flex w-full flex-col gap-8 px-4 py-8 md:px-6 lg:flex-row lg:items-center lg:justify-around">
 
         {/* LEFT SECTION */}
-        <div className="flex items-center gap-8 justify-center">
+        <div className="site-footer-brand flex items-center gap-8 justify-center">
           {/* Logo */}
           <img
             src="/aossie-logo.svg"
             alt="AOSSIE"
-            className="h-16 w-auto"/>
+            className="h-16 w-auto" />
 
           {/* Separator */}
-          <div className="h-20 w-px bg-zinc-700" />
+          <div className="site-footer-divider h-20 w-px bg-zinc-700" />
 
           {/* Description */}
-          <div className="max-w-sm">
-            <p className="mt-2 text-sm leading-5" style={{color: "var(--text2)"}}>
+          <div className="site-footer-description max-w-sm">
+            <p className="mt-2 text-sm leading-5" style={{ color: "var(--text2)" }}>
               AOSSIE is a non-profit organization dedicated to building
               impactful open-source software, mentoring contributors,
               and fostering innovation through global collaboration.
@@ -96,20 +96,21 @@ export default function Footer() {
         </div>
 
         {/* MIDDLE SECTION */}
-        <div className="flex flex-col lg:flex-row lg:gap-8 items-center">
+        <div className="site-footer-links flex flex-col lg:flex-row lg:gap-8 items-center">
           {/* Separator */}
-          <div className="h-25 w-px bg-zinc-700 rotate-90 lg:rotate-180" />
-        
-          <div className="flex flex-col gap-6">
+          <div className="site-footer-divider h-25 w-px bg-zinc-700 rotate-90 lg:rotate-180" />
+
+          <div className="site-footer-links-column flex flex-col gap-6">
             {/* NAVIGATION */}
             <nav
               aria-label="Footer Navigation"
-              className="flex flex-wrap items-center gap-x-6 gap-y-3 justify-center"
+              className="site-footer-nav flex flex-wrap items-center gap-x-6 gap-y-3 justify-center"
             >
               {footerLinks.map((item) => (
                 <Link
                   key={item.label}
                   to={item.href}
+                  className={item.label === "Support Us" ? "site-footer-support-link" : undefined}
                   style={{
                     color: "var(--text2)",
                     transition: "color 0.2s ease",
@@ -127,7 +128,7 @@ export default function Footer() {
             </nav>
 
             {/* SOCIAL LINKS */}
-            <div className="flex items-center gap-6 justify-center">
+            <div className="site-footer-socials flex items-center gap-6 justify-center">
               {socialLinks.map((item) => {
                 const Icon = item.icon;
 
@@ -138,6 +139,7 @@ export default function Footer() {
                     target="_blank"
                     rel="noopener noreferrer"
                     aria-label={`Visit our ${item.label}`}
+                    className="site-footer-social-link"
                     style={{
                       color: "var(--text2)",
                       transition: "color 0.2s ease",
@@ -156,20 +158,20 @@ export default function Footer() {
             </div>
           </div>
         </div>
-        
+
         {/* RIGHT SECTION */}
-        <div className="flex flex-col lg:flex-row lg:gap-8 items-center">
+        <div className="site-footer-meta-section flex flex-col lg:flex-row lg:gap-8 items-center">
           {/* Separator */}
-          <div className="h-25 w-px bg-zinc-700 rotate-90 lg:rotate-180" />
-          
-          <div className="flex flex-col gap-2 items-end text-right">
+          <div className="site-footer-divider h-25 w-px bg-zinc-700 rotate-90 lg:rotate-180" />
+
+          <div className="site-footer-meta flex flex-col gap-2 items-end text-right">
             <p
               className=" flex items-center
                 text-xs tracking-[0.2em]"
             >
               © {new Date().getFullYear()}
               <span>
-                <Logo className="h-15 w-auto"/>
+                <Logo className="h-15 w-auto" />
               </span>
             </p>
 
diff --git a/src/pages/HomePage.jsx b/src/pages/HomePage.jsx
index 712116a..3012074 100644
--- a/src/pages/HomePage.jsx
+++ b/src/pages/HomePage.jsx
@@ -36,7 +36,7 @@ export default function HomePage() {
     const orgs = targets || (chips.length ? chips : input.trim() ? [input.trim()] : [])
     if (!orgs.length) return
     const success = await explore(orgs)
-    if(success) navigate('/overview')
+    if (success) navigate('/overview')
   }
 
   return (
@@ -98,7 +98,7 @@ export default function HomePage() {
           <p style={{ color: 'var(--text2)', fontSize: 13 }}>{loadMsg}</p>
         </div>
       )}
-  
+
       {/* Recent */}
       {recent.length > 0 && !loading && (
         <div style={{ textAlign: 'center' }}>
@@ -128,7 +128,7 @@ export default function HomePage() {
       )}
 
       {/* Stats bar */}
-      <div style={{ display: 'flex', gap: 48, padding: '20px 40px', background: 'var(--surface)', borderRadius: 'var(--radius)', border: '1px solid var(--border)' }}>
+      <div className="home-stats-bar" style={{ display: 'flex', gap: 48, padding: '20px 40px', background: 'var(--surface)', borderRadius: 'var(--radius)', border: '1px solid var(--border)' }}>
         {[['5,000', 'req/hr with PAT', 'var(--green)'], ['1HR', 'intelligent cache', 'var(--green)'], ['ZERO', 'backend latency', 'var(--accent)']].map(([v, l, color]) => (
           <div key={l} style={{ textAlign: 'center' }}>
             <div style={{ fontSize: 22, fontWeight: 800, color }}>{v}</div>
diff --git a/src/pages/OverviewPage.jsx b/src/pages/OverviewPage.jsx
index 680e77b..a5cab38 100644
--- a/src/pages/OverviewPage.jsx
+++ b/src/pages/OverviewPage.jsx
@@ -7,7 +7,7 @@ import SocialShareButton from '../components/SocialShareButton';
 import { AiOutlineInfoCircle } from "react-icons/ai";
 import AnalysisBanner from '../components/AnalysisBanner'
 import { OverviewSkeleton } from '../components/Orgexplorerskeletons'
-import {formatNumber} from '../utils/formatNumber'
+import { formatNumber } from '../utils/formatNumber'
 import { useTheme } from '../context/ThemeContext'
 
 const LANG_COLORS = ['#22c55e', '#f5c518', '#3b82f6', '#ef4444', '#a855f7', '#f97316', '#06b6d4']
@@ -38,7 +38,7 @@ export default function OverviewPage() {
     setOrgFilter('All Organizations')
   }, [orgs])
 
-  if(loading) return <OverviewSkeleton />
+  if (loading) return <OverviewSkeleton />
   if (!model) return null
 
   const { totalRepos } = model
@@ -59,7 +59,7 @@ export default function OverviewPage() {
 
   const topRepos = [...filteredRepos].sort((a, b) => b.healthScore - a.healthScore).slice(0, 5)
 
- 
+
 
 
   const NavCard = ({ to, label, sub }) => (
@@ -70,14 +70,14 @@ export default function OverviewPage() {
       onMouseLeave={e => {
         e.currentTarget.style.borderColor = 'var(--border)'
       }}
-      style={{...C.card,transition: 'border-color .2s' }} >
+      style={{ ...C.card, transition: 'border-color .2s' }} >
       <div
-        style={{ fontWeight: 600,marginBottom: 4, fontSize: 14 }} >
+        style={{ fontWeight: 600, marginBottom: 4, fontSize: 14 }} >
         {label}
       </div>
 
       <div
-        style={{fontSize: 12, color: 'var(--text2)', marginBottom: 12, minHeight: 32 }}>
+        style={{ fontSize: 12, color: 'var(--text2)', marginBottom: 12, minHeight: 32 }}>
         {sub}
       </div>
 
@@ -92,7 +92,7 @@ export default function OverviewPage() {
   )
 
   return (
-    <div style={{ padding: '32px 24px', maxWidth: 1100, margin: '0 auto' }} className="fade-up">
+    <div style={{ padding: '32px 24px', maxWidth: 1100, margin: '0 auto' }} className="fade-up overview-page">
 
       <AnalysisBanner
         page="overview"
@@ -102,7 +102,7 @@ export default function OverviewPage() {
         onRun={runFullExplore}
       />
       {/* Org identity bar */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28 }}>
+      <div className="overview-org-header overview-org-card" style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 28 }}>
         {isMulti ? (
           <div
             style={{ display: 'flex', alignItems: 'center', cursor: orgs.length > 3 ? 'pointer' : 'default' }}
@@ -123,6 +123,7 @@ export default function OverviewPage() {
                 }}
               >
                 <img
+                  className="overview-org-logo"
                   src={o.avatar_url}
                   alt={o.login}
                   style={{
@@ -155,10 +156,10 @@ export default function OverviewPage() {
           </div>
         ) : (
           orgs[0]?.avatar_url && (
-            <img src={orgs[0].avatar_url} alt="" style={{ width: 56, height: 56 }} />
+            <img className="overview-org-logo" src={orgs[0].avatar_url} alt="" style={{ width: 56, height: 56 }} />
           )
         )}
-        <div style={{ flex: 1 }}>
+        <div className="overview-org-info" style={{ flex: 1 }}>
           <h1 style={{ fontSize: 22, fontWeight: 700 }}>
             {isMulti ? orgs.map(o => o.login).join(' + ') : (orgs[0]?.name || orgs[0]?.login)}
           </h1>
@@ -168,16 +169,16 @@ export default function OverviewPage() {
               : (orgs[0]?.description || `@${orgs[0]?.login}`)}
           </p>
         </div>
-        <div style={{ display: 'flex', gap: 8 }}>
+        <div className="overview-org-actions" style={{ display: 'flex', gap: 8 }}>
           {!isMulti && orgs[0]?.html_url && (
             <a href={orgs[0].html_url} target="_blank" rel="noreferrer"
               style={{ ...C.btn('primary'), display: 'flex', alignItems: 'center', gap: 6, fontSize: 12 }}>
               <FiExternalLink size={13} /> View on GitHub
             </a>
           )}
-          <SocialShareButton 
+          <SocialShareButton
             theme={theme}
-           buttonStyle={theme === 'dark' ? 'default' : 'light'}
+            buttonStyle={theme === 'dark' ? 'default' : 'light'}
             title={isMulti ? `OrgExplorer: ${orgs.map(o => o.login).join(' + ')}` : `OrgExplorer: ${orgs[0]?.name || orgs[0]?.login}`}
             description={isMulti ? `${orgs.length} organizations — combined portfolio view` : (orgs[0]?.description || `@${orgs[0]?.login}`)}
           />
@@ -199,7 +200,7 @@ export default function OverviewPage() {
       )}
 
       {/* Stats */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12, marginBottom: 24 }}>
+      <div className="overview-stats-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12, marginBottom: 24 }}>
         <StatCard label="Total Repos" value={formatNumber(orgFilter === 'All Organizations' ? totalRepo : filteredRepos.length)} />
         <StatCard label="Total Stars" value={formatNumber(totalStars)} />
         <StatCard label="Total Forks" value={formatNumber(totalForks)} />
@@ -214,7 +215,7 @@ export default function OverviewPage() {
       </div>
 
       {/* Language + top repos */}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
+      <div className="overview-charts-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
         <div style={C.card}>
           <div style={{ fontWeight: 600, marginBottom: 4 }}>Language Distribution</div>
           <div style={{ ...C.label, marginBottom: 16 }}>Technology Stack Analysis</div>
@@ -289,7 +290,7 @@ export default function OverviewPage() {
       </div>
 
       {/* Nav cards */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14 }}>
+      <div className="overview-nav-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14 }}>
         <NavCard to="/repositories" label="Repositories" sub="Explore and sort repos by health, and activity classification state" />
         <NavCard to="/contributors" label="Contributors" sub="Analyze contribution patterns, bus factor, and connector signals" />
         <NavCard to="/network" label="Network Graph" sub="Visualize contributor-repository relationships with D3 force graph" />
diff --git a/src/styles/global.css b/src/styles/global.css
index d6f6d51..542f45d 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -1,41 +1,43 @@
 @import "tailwindcss";
 
 :root {
-  --bg:       #060606;
-  --surface:  #141414;
+  --bg: #060606;
+  --surface: #141414;
   --surface2: #1a1a1a;
-  --border:   #2a2a2a;
-  --accent:   #f5c518;
-  --text:     #ffffff;
-  --text2:    #888888;
-  --text3:    #444444;
-  --green:    #22c55e;
-  --red:      #ef4444;
-  --blue:     #3b82f6;
-  --amber:    #f59e0b;
-  --purple:   #a855f7;
-  --radius:   8px;
+  --border: #2a2a2a;
+  --accent: #f5c518;
+  --text: #ffffff;
+  --text2: #888888;
+  --text3: #444444;
+  --green: #22c55e;
+  --red: #ef4444;
+  --blue: #3b82f6;
+  --amber: #f59e0b;
+  --purple: #a855f7;
+  --radius: 8px;
 }
 
 /* Light Theme */
 [data-theme="light"] {
-  --bg:       #ffffff;
-  --surface:  #f5f5f5;
+  --bg: #ffffff;
+  --surface: #f5f5f5;
   --surface2: #ececec;
-  --border:   #d5d5d5;
-  --accent:   #d4a500;
-  --text:     #060606;
-  --text2:    #666666;
-  --text3:    #999999;
-  --green:    #16a34a;
-  --red:      #dc2626;
-  --blue:     #2563eb;
-  --amber:    #d97706;
-  --purple:   #9333ea;
-  --radius:   8px;
-}
-
-html, body, #root {
+  --border: #d5d5d5;
+  --accent: #d4a500;
+  --text: #060606;
+  --text2: #666666;
+  --text3: #999999;
+  --green: #16a34a;
+  --red: #dc2626;
+  --blue: #2563eb;
+  --amber: #d97706;
+  --purple: #9333ea;
+  --radius: 8px;
+}
+
+html,
+body,
+#root {
   min-height: 100%;
   background: var(--bg);
   color: var(--text);
@@ -44,21 +46,53 @@ html, body, #root {
   line-height: 1.6;
 }
 
-button { cursor: pointer; font-family: inherit; }
-input, select { font-family: inherit; }
-a { color: var(--accent); text-decoration: none; }
+button {
+  cursor: pointer;
+  font-family: inherit;
+}
+
+input,
+select {
+  font-family: inherit;
+}
 
-::-webkit-scrollbar { width: 5px; height: 5px; }
-::-webkit-scrollbar-track { background: var(--bg); }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
+a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+::-webkit-scrollbar {
+  width: 5px;
+  height: 5px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--bg);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
 
 @keyframes spin {
-  to { transform: rotate(360deg); }
+  to {
+    transform: rotate(360deg);
+  }
 }
+
 @keyframes fadeUp {
-  from { opacity: 0; transform: translateY(10px); }
-  to   { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
+
 .fade-up {
   animation: fadeUp 0.22s ease;
 }
@@ -80,4 +114,712 @@ input[type="date"]::-webkit-calendar-picker-indicator {
 
 .navbar-link:hover {
   color: var(--accent) !important;
+}
+
+/* Mobile responsiveness */
+@media (max-width: 768px) {
+  .overview-stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+
+  .overview-charts-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .overview-nav-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
+  }
+
+  .app-navbar {
+    padding: 0 12px !important;
+    gap: 12px !important;
+    overflow: hidden;
+    height: auto !important;
+    min-height: 56px;
+    flex-wrap: wrap;
+    justify-content: flex-start !important;
+  }
+
+  .app-navbar>span {
+    order: 1;
+    flex-shrink: 0;
+  }
+
+  .app-navbar .navbar-links {
+    order: 3;
+    flex: 0 1 100% !important;
+    width: 100%;
+    min-width: 0;
+  }
+
+  .app-navbar>div:last-child {
+    order: 2;
+    min-width: 0;
+    flex-shrink: 1 !important;
+    flex-wrap: wrap;
+    justify-content: flex-end;
+    gap: 8px !important;
+  }
+
+  .analysis-banner {
+    align-items: stretch !important;
+    flex-direction: column;
+  }
+
+  .analysis-banner-actions {
+    justify-content: flex-end;
+    flex-wrap: wrap;
+  }
+}
+
+@media (max-width: 380px) {
+  .overview-nav-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .app-navbar {
+    gap: 8px !important;
+  }
+}
+
+@media (min-width: 601px) and (max-width: 1024px) {
+  .app-navbar {
+    gap: 8px !important;
+  }
+
+  .app-navbar .navbar-controls {
+    order: 1;
+    margin-left: auto;
+  }
+
+  .app-navbar .navbar-menu-toggle-visible {
+    order: 2;
+  }
+}
+
+@media (max-width: 428px) {
+  .home-stats-bar {
+    width: 100%;
+    max-width: 100%;
+    gap: 0;
+    padding: 20px 12px;
+  }
+
+  .home-stats-bar>div {
+    flex: 1;
+    min-width: 0;
+  }
+}
+
+@media (max-width: 600px) {
+  .rate-limit-banner {
+    padding: 10px 12px !important;
+    display: flex !important;
+    flex-direction: column;
+    align-items: stretch !important;
+    gap: 4px;
+  }
+
+  .rate-limit-top-row {
+    flex-wrap: wrap;
+    justify-content: space-between;
+    gap: 6px 12px !important;
+  }
+
+  .rate-limit-summary {
+    display: inline-flex;
+    align-items: center;
+    flex: 1 1 auto;
+    min-width: 0;
+    white-space: nowrap;
+  }
+
+  .rate-limit-pat {
+    margin-left: auto !important;
+    white-space: nowrap;
+  }
+
+  .rate-limit-used {
+    text-align: left;
+  }
+
+  .rate-limit-summary strong {
+    flex-shrink: 0;
+  }
+
+  .rate-limit-remaining-label {
+    display: none;
+  }
+}
+
+@media (max-width: 375px) {
+  .rate-limit-top-row {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .rate-limit-summary {
+    white-space: normal;
+  }
+
+  .rate-limit-pat {
+    margin-left: 21px !important;
+  }
+}
+
+@media (min-width: 601px) {
+  .rate-limit-summary {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .rate-limit-summary>svg {
+    margin-right: 12px;
+  }
+
+  .rate-limit-summary strong {
+    margin-left: 12px !important;
+    margin-right: 12px;
+  }
+}
+
+@media (max-width: 600px) {
+  .app-navbar {
+    padding: 0 8px !important;
+    gap: 6px !important;
+    height: 56px !important;
+    min-height: 56px;
+    flex-wrap: nowrap !important;
+    justify-content: space-between !important;
+    position: relative !important;
+    overflow: visible;
+  }
+
+  .app-navbar>span {
+    min-width: 0;
+    flex-shrink: 1;
+    overflow: hidden;
+  }
+
+  .app-navbar .navbar-controls {
+    display: none !important;
+    min-width: 0;
+    flex: 1 1 auto;
+    flex-wrap: nowrap;
+    gap: 4px !important;
+    overflow: hidden;
+  }
+
+  .app-navbar .navbar-rate-limit {
+    flex-shrink: 1;
+    white-space: nowrap;
+    font-size: 10px !important;
+  }
+
+  .mobile-nav-menu {
+    position: absolute;
+    inset: 0;
+    min-height: 100vh;
+    max-height: 100vh;
+    overflow-y: auto;
+    padding: 10px 12px 18px;
+    background: var(--bg);
+    z-index: 102;
+  }
+
+  .mobile-nav-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 36px;
+    margin-bottom: 14px;
+  }
+
+  .mobile-nav-header button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    padding: 0;
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text2);
+  }
+
+  .mobile-nav-heading {
+    padding: 6px 10px 4px;
+    color: var(--text3);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: .08em;
+  }
+
+  .mobile-nav-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    min-height: 42px;
+    box-sizing: border-box;
+    padding: 9px 10px;
+    border: 0;
+    background: transparent;
+    color: var(--text) !important;
+    text-align: left;
+    text-decoration: none;
+  }
+
+  .mobile-nav-row:hover {
+    background: var(--surface2);
+  }
+
+  .mobile-nav-row[aria-current="page"] {
+    color: var(--accent) !important;
+  }
+
+  .mobile-nav-arrow {
+    margin-left: auto;
+    color: var(--text);
+  }
+
+  .mobile-nav-divider {
+    height: 1px;
+    margin: 8px 10px;
+    background: var(--border);
+  }
+
+  .mobile-nav-theme-toggle {
+    margin-left: auto;
+  }
+
+  .mobile-nav-theme-toggle button {
+    width: 32px;
+    height: 30px;
+    padding: 0 !important;
+    justify-content: center;
+  }
+
+}
+
+.navbar-menu-toggle,
+.mobile-nav-menu {
+  display: none;
+}
+
+.navbar-links-overflowing {
+  display: none !important;
+}
+
+.navbar-menu-toggle-visible {
+  display: flex;
+  order: 2;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 34px;
+  width: 34px;
+  height: 34px;
+  padding: 0 !important;
+  background: none;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  color: var(--text2);
+}
+
+.navbar-close-icon {
+  display: none;
+}
+
+.mobile-nav-menu-visible {
+  display: block;
+  position: absolute;
+  inset: 0;
+  min-height: 100vh;
+  max-height: 100vh;
+  overflow-y: auto;
+  padding: 10px 12px 18px;
+  background: var(--bg);
+  z-index: 102;
+}
+
+@media (min-width: 601px) and (max-width: 1024px) {
+  .app-navbar.app-navbar-menu-open .navbar-menu-icon {
+    display: none;
+  }
+
+  .app-navbar.app-navbar-menu-open .navbar-close-icon {
+    display: block;
+  }
+
+  .app-navbar.app-navbar-menu-open .mobile-nav-header button {
+    visibility: hidden;
+  }
+
+  .app-navbar.app-navbar-menu-open {
+    backdrop-filter: none !important;
+  }
+
+  .app-navbar .mobile-nav-menu.mobile-nav-menu-visible {
+    display: block;
+    position: fixed;
+    top: 56px;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    min-height: 0;
+    max-height: none;
+    overflow-y: auto;
+    padding: 10px 24px 18px;
+    background: var(--surface);
+    color: var(--text);
+    z-index: 102;
+  }
+
+  .app-navbar .mobile-nav-header {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    height: 44px;
+    margin-bottom: 14px;
+  }
+
+  .app-navbar .mobile-nav-header button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 34px;
+    height: 34px;
+    padding: 0;
+    background: none;
+    border: 1px solid var(--border);
+    border-radius: 6px;
+    color: var(--text) !important;
+  }
+
+  .app-navbar .mobile-nav-heading {
+    padding: 6px 10px 4px;
+    color: var(--text2);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: .08em;
+  }
+
+  .app-navbar .mobile-nav-row {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    min-height: 46px;
+    box-sizing: border-box;
+    padding: 9px 10px;
+    border: 0;
+    background: transparent;
+    color: var(--text) !important;
+    text-align: left;
+    text-decoration: none;
+  }
+
+  .app-navbar .mobile-nav-row[aria-current="page"] {
+    color: var(--accent) !important;
+    background: rgba(245, 197, 24, .14) !important;
+  }
+
+  .app-navbar .mobile-nav-arrow {
+    margin-left: auto;
+    color: var(--text) !important;
+  }
+
+  .app-navbar .mobile-nav-divider {
+    height: 1px;
+    margin: 10px 10px;
+    background: var(--border);
+  }
+
+  .app-navbar .mobile-nav-theme-toggle {
+    margin-left: auto;
+  }
+
+  .app-navbar .mobile-nav-theme-toggle button {
+    width: 32px;
+    height: 30px;
+    padding: 0 !important;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 768px) {
+  .overview-page {
+    padding: 24px 12px !important;
+  }
+
+  .overview-org-header {
+    align-items: flex-start !important;
+    flex-wrap: wrap;
+  }
+
+  .overview-org-info {
+    min-width: 0;
+  }
+
+  .overview-org-actions {
+    flex: 0 0 auto;
+    justify-content: flex-end;
+  }
+
+  .analysis-banner {
+    gap: 16px !important;
+    padding: 16px !important;
+  }
+
+  .analysis-banner-content {
+    min-width: 0;
+    width: 100%;
+    gap: 12px !important;
+  }
+
+  .analysis-banner-actions {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .analysis-banner-actions button {
+    flex: 1 1 140px;
+    justify-content: center;
+  }
+}
+
+@media (min-width: 601px) and (max-width: 768px) {
+  .app-navbar {
+    padding: 0 12px !important;
+    gap: 8px !important;
+    height: 56px !important;
+    min-height: 56px;
+    flex-wrap: nowrap !important;
+    justify-content: space-between !important;
+  }
+
+  .app-navbar>span {
+    order: initial;
+    flex-shrink: 0;
+  }
+
+  .app-navbar .navbar-links {
+    order: initial;
+    flex: 1 1 auto !important;
+    width: auto;
+    min-width: 0;
+    overflow-x: auto;
+  }
+
+  .app-navbar>div:last-child {
+    order: initial;
+    flex-shrink: 0 !important;
+    flex-wrap: nowrap;
+    gap: 6px !important;
+  }
+
+  .overview-charts-grid {
+    grid-template-columns: 1fr 1fr !important;
+  }
+
+  .analysis-banner {
+    flex-direction: row;
+    align-items: center !important;
+  }
+
+  .analysis-banner-actions {
+    width: auto;
+    flex-shrink: 0;
+    flex-wrap: nowrap;
+  }
+
+  .analysis-banner-actions button {
+    flex: 0 1 auto;
+    padding: 8px 12px !important;
+    font-size: 12px !important;
+  }
+}
+
+@media (max-width: 428px) {
+  .overview-org-info {
+    flex: 1 1 0 !important;
+  }
+
+  .overview-org-actions {
+    flex: 0 0 100%;
+    width: 100%;
+    box-sizing: border-box;
+    justify-content: flex-start;
+  }
+
+  .analysis-banner-actions {
+    flex-direction: column;
+  }
+
+  .analysis-banner-actions button {
+    width: 100%;
+    flex: 0 0 auto;
+  }
+}
+
+@media (max-width: 600px) {
+  .overview-org-card {
+    padding: 16px;
+    background: var(--surface);
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    gap: 12px;
+  }
+
+  .overview-org-logo {
+    flex: 0 0 48px;
+    width: 48px !important;
+    height: 48px !important;
+  }
+
+  .overview-org-logo-group {
+    flex: 0 0 48px;
+    width: 48px;
+  }
+
+  .overview-org-logo-group .overview-org-logo {
+    flex: 0 0 36px;
+    width: 36px !important;
+    height: 36px !important;
+  }
+
+  .overview-org-info {
+    flex: 1 1 0 !important;
+  }
+
+  .overview-org-info h1,
+  .overview-org-info p {
+    overflow-wrap: anywhere;
+  }
+
+  .overview-org-actions {
+    flex: 0 0 100%;
+    width: 100%;
+    box-sizing: border-box;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  .overview-org-actions>a,
+  .overview-org-actions>button {
+    width: 100%;
+    min-height: 38px;
+    justify-content: center;
+    box-sizing: border-box;
+  }
+
+  .overview-org-actions>div {
+    display: flex;
+    width: 100%;
+  }
+
+  .overview-org-actions>div>button {
+    width: 100% !important;
+    min-height: 38px;
+    padding: 8px 18px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+  }
+}
+
+@media (min-width: 1025px) {
+  .overview-page {
+    max-width: 1200px !important;
+  }
+}
+
+@media (max-width: 600px) {
+  .site-footer-inner {
+    align-items: stretch;
+    gap: 0;
+    padding: 24px 16px 20px;
+  }
+
+  .site-footer-brand {
+    flex-direction: column;
+    gap: 14px;
+    text-align: center;
+  }
+
+  .site-footer-brand .site-footer-divider {
+    display: none;
+  }
+
+  .site-footer-description {
+    max-width: 340px;
+  }
+
+  .site-footer-description p {
+    margin-top: 0;
+  }
+
+  .site-footer-divider {
+    width: 100%;
+    height: 0;
+    margin: 22px 0 0;
+    background: transparent;
+    border-top: 1px solid var(--border);
+    transform: none;
+  }
+
+  .site-footer-links {
+    align-items: stretch;
+  }
+
+  .site-footer-links-column {
+    gap: 0;
+  }
+
+  .site-footer-nav {
+    gap: 10px 16px;
+    padding: 20px 0;
+    border-bottom: 1px solid var(--border);
+    text-align: center;
+  }
+
+  .site-footer-support-link {
+    flex-basis: 100%;
+  }
+
+  .site-footer-socials {
+    gap: 12px;
+    padding: 20px 0;
+    border-bottom: 1px solid var(--border);
+  }
+
+  .site-footer-social-link {
+    display: inline-flex;
+    width: 34px;
+    height: 34px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--border);
+    border-radius: 50%;
+    color: var(--text2);
+    transition: color 0.2s ease, border-color 0.2s ease;
+  }
+
+  .site-footer-meta-section {
+    align-items: stretch;
+  }
+
+  .site-footer-meta {
+    align-items: center;
+    gap: 8px;
+    padding-top: 20px;
+    text-align: center;
+  }
+
+  .site-footer-meta p {
+    justify-content: center;
+    text-align: center;
+  }
 }
\ No newline at end of file