diff --git a/src/components/AnalysisBanner.jsx b/src/components/AnalysisBanner.jsx
index c87f3ab..93ce8e6 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="flex flex-col md:flex-row justify-between items-start md:items-center gap-6"
         style={{
           marginBottom: 24,
 
@@ -26,11 +27,6 @@ export default function AnalysisBanner({ page, description, onRun, loading = fal
 
           padding: '20px 22px',
 
-          display: 'flex',
-          justifyContent: 'space-between',
-          alignItems: 'center',
-          gap: 24,
-
           transition: 'var(--transition)',
         }}
       >
@@ -102,12 +98,7 @@ export default function AnalysisBanner({ page, description, onRun, loading = fal
         {/* Right */}
 
         <div
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            gap: 10,
-            flexShrink: 0,
-          }}
+          className="flex flex-col sm:flex-row items-stretch sm:items-center w-full md:w-auto gap-3 shrink-0"
         >
           <button
             type="button"
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index ce4084f..4322bd6 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -23,14 +23,15 @@ export default function Navbar() {
   const lowLimit = rateLimit && rateLimit.remaining < 15
 
   return (
-    <nav style={{
+    <nav 
+      className="flex flex-wrap md:flex-nowrap items-center justify-between gap-4"
+      style={{
       position: 'sticky', top: 0, zIndex: 100,
       background: 'var(--bg)',
       backdropFilter: 'blur(10px)',
       borderBottom: '1px solid var(--border)',
-      padding: '0 24px',
-      display: 'flex', alignItems: 'center', gap: 24, height: 56,
-      justifyContent: 'space-between',
+      padding: '12px 24px',
+      minHeight: 56,
     }}>
       {/* Wordmark */}
       <span
@@ -63,7 +64,7 @@ export default function Navbar() {
       </div>
 
       {/* Right side */}
-      <div style={{ display: 'flex', alignItems: 'center', gap: 14, flexShrink: 0 }}>
+      <div className="flex flex-wrap sm:flex-nowrap items-center gap-3 sm:gap-14 shrink-0" style={{ display: 'flex', alignItems: 'center' }}>
         {rateLimit && (
           <div style={{ display: 'flex', alignItems: 'center', gap: 5, fontSize: 11, color: lowLimit ? 'var(--red)' : 'var(--text2)' }}>
             <FiZap size={12} />
@@ -73,17 +74,19 @@ export default function Navbar() {
         <ThemeToggle />
         <button
           onClick={() => navigate('/settings')}
+          aria-label="Settings"
           style={{ background: 'none', border: '1px solid var(--border)', color: 'var(--text2)', borderRadius: 6, padding: '5px 10px', fontSize: 12, display: 'flex', alignItems: 'center', gap: 5 }}
           className='h-[-webkit-fill-available]'
         >
-          <FiSettings size={13} /> Settings
+          <FiSettings size={13} /> <span className="hidden sm:inline">Settings</span>
         </button>
         <button
           onClick={() => navigate('/support-us')}
-          className="flex items-center gap-2 rounded-md bg-emerald-500 px-4 py-2 text-sm font-medium text-white shadow transition-all duration-200 hover:bg-emerald-600 hover:shadow-lg active:scale-95"
+          aria-label="Support Us"
+          className="flex items-center gap-2 rounded-md bg-emerald-500 px-3 py-2 sm:px-4 text-sm font-medium text-white shadow transition-all duration-200 hover:bg-emerald-600 hover:shadow-lg active:scale-95"
         >
           <FiHeart size={13} fill='white' />
-          Support Us
+          <span className="hidden sm:inline">Support Us</span>
         </button>
       </div>
     </nav>
diff --git a/src/pages/OverviewPage.jsx b/src/pages/OverviewPage.jsx
index 680e77b..98c1ca8 100644
--- a/src/pages/OverviewPage.jsx
+++ b/src/pages/OverviewPage.jsx
@@ -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="flex flex-col md:flex-row items-start md:items-center gap-4 mb-7">
         {isMulti ? (
           <div
             style={{ display: 'flex', alignItems: 'center', cursor: orgs.length > 3 ? 'pointer' : 'default' }}
@@ -168,7 +168,7 @@ export default function OverviewPage() {
               : (orgs[0]?.description || `@${orgs[0]?.login}`)}
           </p>
         </div>
-        <div style={{ display: 'flex', gap: 8 }}>
+        <div className="flex gap-2 mt-4 md:mt-0">
           {!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 }}>
@@ -199,7 +199,7 @@ export default function OverviewPage() {
       )}
 
       {/* Stats */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12, marginBottom: 24 }}>
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-6">
         <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 +214,7 @@ export default function OverviewPage() {
       </div>
 
       {/* Language + top repos */}
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginBottom: 20 }}>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5 mb-5">
         <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 +289,7 @@ export default function OverviewPage() {
       </div>
 
       {/* Nav cards */}
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14 }}>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
         <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/pages/SettingsPage.jsx b/src/pages/SettingsPage.jsx
index 2f26741..447b39f 100644
--- a/src/pages/SettingsPage.jsx
+++ b/src/pages/SettingsPage.jsx
@@ -81,7 +81,7 @@ export default function SettingsPage() {
     <div style={{ padding: '32px 24px', maxWidth: 1100, margin: '0 auto' }} className="fade-up">
       <h1 style={{ fontSize: 26, fontWeight: 700, marginBottom: 24 }}>Settings</h1>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-5">
 
         {/* Left column */}
         <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
@@ -201,7 +201,7 @@ export default function SettingsPage() {
           {/* How to create a PAT */}
           <div style={C.card}>
             <div style={{ fontWeight: 600, fontSize: 15, marginBottom: 14 }}>How to create a PAT</div>
-            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
               {[
                 ['01', 'Go to GitHub Settings → Developer settings → Personal access tokens'],
                 ['02', 'Click "Generate new token" and choose "Fine-grained token"'],