diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index fb430db..4b9248d 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -22,7 +22,7 @@ export default function Navbar() {
   return (
     <nav style={{
       position: 'sticky', top: 0, zIndex: 100,
-      background: 'rgba(13,13,13,.97)',
+      background: 'var(--bg)',
       backdropFilter: 'blur(10px)',
       borderBottom: '1px solid var(--border)',
       padding: '0 24px',
diff --git a/src/context/AppContext.jsx b/src/context/AppContext.jsx
index 2471f51..fce9b16 100644
--- a/src/context/AppContext.jsx
+++ b/src/context/AppContext.jsx
@@ -1,6 +1,6 @@
 import { createContext, useContext, useState, useCallback, useEffect } from 'react'
 import { fetchOrg, fetchRepos, fetchContributors, fetchIssues, } from '../services/github'
-import { buildAnalyticalModel } from '../services/analytics'
+import { buildAnalyticalModel, getTopRepositories } from '../services/analytics'
 
 const Ctx = createContext(null)
 
@@ -58,7 +58,7 @@ export function AppProvider({ children }) {
 
     return () => clearTimeout(timeout)
   }, [rateLimit])
-
+  const [totalRepo, setTotalRepo] = useState(0);
   const savePat = useCallback(token => {
     setPat(token)
     token ? localStorage.setItem('oe_pat', token) : localStorage.removeItem('oe_pat')
@@ -80,12 +80,20 @@ export function AppProvider({ children }) {
         reposPerOrg[org.login] = await fetchRepos(org.login, org.public_repos, pat)
       }))
 
+      const total = Object.values(reposPerOrg).reduce(
+        (sum, repos) => sum + repos.length,
+        0
+      );
+
+      setTotalRepo(total);
+
       setLoadMsg('Fetching contributor data for top repositories...')
       const contribsPerRepo = {}
       for (const org of validOrgs) {
-        const top = pat ? (reposPerOrg[org.login] || []) : (reposPerOrg[org.login] || [])
-          .sort((a, b) => b.stargazers_count - a.stargazers_count)
-          .slice(0, 10)
+
+        const top = pat ? (reposPerOrg[org.login] || []) : getTopRepositories(reposPerOrg[org.login] || [], 10);
+        reposPerOrg[org.login] = top; // Update to only include top repos
+
         await Promise.allSettled(top.map(async repo => {
           contribsPerRepo[`${org.login}/${repo.name}`] = await fetchContributors(org.login, repo.name, pat)
         }))
@@ -131,7 +139,7 @@ export function AppProvider({ children }) {
   return (
     <Ctx.Provider value={{
       pat, savePat, orgs, model, issuesData,
-      rateLimit, loading, loadMsg, govLoading, error,
+      rateLimit, loading, loadMsg, govLoading, error, totalRepo,
       explore, runAudit, setError,
     }}>
       {children}
diff --git a/src/pages/ContributorsPage.jsx b/src/pages/ContributorsPage.jsx
index 757571b..8ccc2eb 100644
--- a/src/pages/ContributorsPage.jsx
+++ b/src/pages/ContributorsPage.jsx
@@ -6,7 +6,7 @@ import { useSortedData } from '../hooks/useSortedData'
 import { computeBusFactor, exportContributorsCSV } from '../services/analytics'
 import { useNavigate } from 'react-router-dom'
 import EmptyStateCard from '../components/EmptyStateCard'
-import { BsFillInfoSquareFill } from "react-icons/bs";
+import { AiOutlineInfoCircle } from "react-icons/ai";
 
 export default function ContributorsPage() {
   const { model } = useApp()
@@ -90,12 +90,11 @@ export default function ContributorsPage() {
             <p>Bus Factor Risk</p>
 
             <button
-              onClick={() =>
-                setOpenInfo(openInfo === 'busfactor' ? null : 'busfactor')
-              }
-              className="p-2 rounded-full hover:bg-zinc-800 transition"
+              onMouseEnter={()=>setOpenInfo("busfactor")}
+              onMouseLeave={()=>setOpenInfo(null)}
+              className="p-2 rounded-full hover:bg-(--bg) transition"
             >
-              <BsFillInfoSquareFill className="text-white cursor-pointer" />
+              <AiOutlineInfoCircle className="text-(--text) cursor-pointer" />
             </button>
 
             {openInfo === 'busfactor' && (
@@ -152,12 +151,11 @@ export default function ContributorsPage() {
             <p>Freshness Index</p>
 
             <button
-              onClick={() =>
-                setOpenInfo(openInfo === 'freshness' ? null : 'freshness')
-              }
-              className="p-2 rounded-full hover:bg-zinc-800 transition"
+              onMouseEnter={()=>setOpenInfo("freshness")}
+              onMouseLeave={()=>setOpenInfo(null)}
+              className="p-2 rounded-full hover:bg-(--bg) transition"
             >
-              <BsFillInfoSquareFill className="text-white cursor-pointer" />
+              <AiOutlineInfoCircle className="text-(--text) cursor-pointer" />
             </button>
 
             {openInfo === 'freshness' && (
@@ -258,12 +256,11 @@ export default function ContributorsPage() {
                       <p>SIGNALS</p>
 
                       <button
-                        onClick={() =>
-                          setOpenInfo(openInfo === 'signals' ? null : 'signals')
-                        }
-                        className="p-2 rounded-full hover:bg-zinc-800 transition"
+                        onMouseEnter={()=>setOpenInfo("signals")}
+                        onMouseLeave={()=>setOpenInfo(null)}
+                        className="p-2 rounded-full hover:bg-(--bg) transition"
                       >
-                        <BsFillInfoSquareFill className="text-white cursor-pointer" />
+                        <AiOutlineInfoCircle className="text-(--text) cursor-pointer" />
                       </button>
 
                       {openInfo === 'signals' && (
@@ -306,10 +303,23 @@ export default function ContributorsPage() {
                 {visible.map((c, i) => (
                   <tr key={c.login} style={{ borderBottom: '1px solid var(--border)', background: i % 2 ? 'var(--surface2)' : 'transparent' }}>
                     <td style={{ padding: '10px 14px' }}>
+                      <a
+                        href={`https://github.com/${c.login}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{
+                          display: 'inline-flex',
+                          alignItems: 'center',
+                          gap: 8,
+                          textDecoration: 'none',
+                          color: 'inherit',
+                        }}
+                      >
                       <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                         <img src={c.avatar_url} alt={c.login} style={{ width: 28, height: 28, borderRadius: '50%' }} />
                         <span style={{ fontSize: 13, fontWeight: 500 }}>{c.login}</span>
                       </div>
+                      </a>
                     </td>
                     <td style={{ padding: '10px 14px' }}>
                       <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
diff --git a/src/pages/NetworkPage.jsx b/src/pages/NetworkPage.jsx
index 5364d29..9359655 100644
--- a/src/pages/NetworkPage.jsx
+++ b/src/pages/NetworkPage.jsx
@@ -28,7 +28,7 @@ export default function NetworkPage() {
 
     // Top repos and contributors for performance
     const topRepos    = model.allRepos.slice(0, 30)
-    const topContribs = model.contributors.slice(0, 40)
+    const topContribs = model.contributors
 
     const nodes = []
     if (showRepos)    topRepos.forEach(r => nodes.push({ id: `repo:${r.name}`,    type: 'repo',        data: r, ts: new Date(r.pushed_at).getTime() }))
diff --git a/src/pages/OverviewPage.jsx b/src/pages/OverviewPage.jsx
index 3fe7917..89fc753 100644
--- a/src/pages/OverviewPage.jsx
+++ b/src/pages/OverviewPage.jsx
@@ -3,14 +3,15 @@ import { useNavigate } from 'react-router-dom'
 import { FiExternalLink, FiShare2, FiArrowRight } from 'react-icons/fi'
 import { useApp } from '../context/AppContext'
 import { C, StatCard, HealthBar } from '../components/UI'
-import { BsFillInfoSquareFill } from "react-icons/bs";
 import SocialShareButton from '../components/SocialShareButton';
+import { AiOutlineInfoCircle } from "react-icons/ai";
+
 
 const LANG_COLORS = ['#22c55e', '#f5c518', '#3b82f6', '#ef4444', '#a855f7', '#f97316', '#06b6d4']
 const fmt = n => n > 999 ? (n / 1000).toFixed(1) + 'k' : String(n)
 
 export default function OverviewPage() {
-  const { orgs, model } = useApp()
+  const { orgs, model, totalRepo } = useApp()
   const navigate = useNavigate()
   if (!model) return null
 
@@ -71,7 +72,7 @@ export default function OverviewPage() {
           </div>
         ) : (
           orgs[0]?.avatar_url && (
-            <img src={orgs[0].avatar_url} alt="" style={{ width: 56, height: 56, borderRadius: '50%', border: '2px solid var(--border)' }} />
+            <img src={orgs[0].avatar_url} alt="" style={{ width: 56, height: 56 }} />
           )
         )}
         <div style={{ flex: 1 }}>
@@ -102,10 +103,10 @@ export default function OverviewPage() {
 
       {/* Stats */}
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 12, marginBottom: 24 }}>
-        <StatCard label="Total Repos" value={allRepos.length.toLocaleString()} />
+        <StatCard label="Total Repos" value={totalRepo.toLocaleString()} />
         <StatCard label="Total Stars" value={fmt(totalStars)} />
         <StatCard label="Total Forks" value={fmt(totalForks)} />
-        <StatCard label="Active Repos" value={activeRepos} sub={`${Math.round(activeRepos / allRepos.length * 100)}% of total`} />
+        <StatCard label="Active Repos" value={activeRepos} sub={`${Math.round(activeRepos / totalRepo * 100)}% of total`} />
       </div>
 
       {/* Language + top repos */}
@@ -138,16 +139,17 @@ export default function OverviewPage() {
             <p>High Impact Repositories</p>
 
             <button
-              onClick={() => setOpen(prev => !prev)}
-              className="p-3 rounded-full hover:bg-zinc-800 transition"
+              onMouseEnter={()=>setOpen(true)}
+              onMouseLeave={()=>setOpen(false)}
+              className="p-3 rounded-full hover:bg-(--bg) transition"
             >
-              <BsFillInfoSquareFill />
+              <AiOutlineInfoCircle className="text-(--text) cursor-pointer" />
             </button>
           </div>
 
           {open && (
             <div
-              className="absolute top-16 right-2 w-80 z-50 rounded-lg border-2 border-(--border) bg-zinc-900 p-4 shadow-xl text-xs"
+              className="absolute top-16 right-2 w-80 z-50 rounded-lg border-2 border-(--border) bg-(--surface) p-4 shadow-xl text-xs"
             >
               <strong>Health Score</strong> estimates the overall health of a repository on a scale of 0 – 100.
 
@@ -163,7 +165,7 @@ export default function OverviewPage() {
                 </li>
               </ul>
 
-              <p className="mt-2 text-zinc-400">
+              <p className="mt-2 text-xs text-(--text2)">
                 Higher scores indicate healthier and more actively maintained repositories.
               </p>
             </div>
diff --git a/src/pages/RepositoriesPage.jsx b/src/pages/RepositoriesPage.jsx
index d551094..30646da 100644
--- a/src/pages/RepositoriesPage.jsx
+++ b/src/pages/RepositoriesPage.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useMemo, useEffect, useRef } from 'react'
 import { FiDatabase, FiDownload, FiGrid, FiList } from 'react-icons/fi'
-import { BsFillInfoSquareFill } from "react-icons/bs";
+import { AiOutlineInfoCircle } from "react-icons/ai";
 import { useApp } from '../context/AppContext'
 import { C, Badge, HealthBar, SortTh, PageTitle, LoadMore } from '../components/UI'
 import { useSortedData } from '../hooks/useSortedData'
@@ -15,8 +15,7 @@ export default function RepositoriesPage() {
   const { model } = useApp()
   const [search, setSearch] = useState('')
   const [activityClassification, setActivityClassification] = useState('All')
-  const [lang, setLang] = useState('All')
-  const [view, setView] = useState('grid')
+  const [lang, setLang] = useState('All Languages')
   const [shown, setShown] = useState(20)
   const [openInfo, setOpenInfo] = useState(false)
   const infoRef = useRef(null)
@@ -41,12 +40,12 @@ export default function RepositoriesPage() {
   const { allRepos } = model
 
   const langs = useMemo(() =>
-    ['All', ...new Set(allRepos.map(r => r.language).filter(Boolean))].slice(0, 10),
+    ['All Languages', ...new Set(allRepos.map(r => r.language).filter(Boolean))].slice(0, 10),
     [allRepos])
 
   const filtered = useMemo(() => allRepos.filter(r =>
     (activityClassification === 'All' || r.activityClassification === activityClassification) &&
-    (lang === 'All' || r.language === lang) &&
+    (lang === 'All Languages' || r.language === lang) &&
     (!search || r.name.toLowerCase().includes(search.toLowerCase()) ||
       (r.description || '').toLowerCase().includes(search.toLowerCase()))
   ), [allRepos, activityClassification, lang, search])
@@ -60,8 +59,7 @@ export default function RepositoriesPage() {
     ['forks_count', 'Forks'],
     ['open_issues_count', 'Open Issues'],
     ['healthScore', 'Health'],
-    ['activityClassification', 'Activity Classification'],
-    ['pushed_at', 'Last Push'],
+    ['pushed_at', 'Repository Activity'],
   ]
 
   return (
@@ -73,10 +71,11 @@ export default function RepositoriesPage() {
               Repository Explorer
 
               <button
-                onClick={() => setOpenInfo(prev => !prev)}
-                className="p-3 rounded-full hover:bg-zinc-800 transition"
+                onMouseEnter={()=>setOpenInfo(true)}
+                onMouseLeave={()=>setOpenInfo(false)}
+                className="p-3 rounded-full hover:bg-(--bg) transition"
               >
-                <BsFillInfoSquareFill className='size-4' />
+                <AiOutlineInfoCircle className="text-(--text) cursor-pointer" />
               </button>
             </div>
           }
@@ -159,14 +158,6 @@ export default function RepositoriesPage() {
           <select value={lang} onChange={e => setLang(e.target.value)} style={C.select}>
             {langs.map(l => <option key={l}>{l}</option>)}
           </select>
-          <div style={{ display: 'flex', gap: 4 }}>
-            <button onClick={() => setView('grid')} style={{ ...C.btn(view === 'grid' ? 'primary' : 'ghost'), padding: '7px 11px', display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }}>
-              <FiGrid size={13} /> Grid
-            </button>
-            <button onClick={() => setView('list')} style={{ ...C.btn(view === 'list' ? 'primary' : 'ghost'), padding: '7px 11px', display: 'flex', alignItems: 'center', gap: 4, fontSize: 12 }}>
-              <FiList size={13} /> Table
-            </button>
-          </div>
           <button onClick={() => exportReposCSV(filtered)} style={{ ...C.btn('ghost'), padding: '7px 12px', display: 'flex', alignItems: 'center', gap: 5, fontSize: 12 }}>
             <FiDownload size={13} /> CSV
           </button>
@@ -190,7 +181,6 @@ export default function RepositoriesPage() {
       {allRepos?.length ? (
         <>
           {/* Table view */}
-          {view === 'list' && (
             <div style={{ ...C.card, padding: 0, overflowX: 'auto' }}>
               <table style={{ width: '100%', borderCollapse: 'collapse' }}>
                 <thead>
@@ -203,77 +193,37 @@ export default function RepositoriesPage() {
                 <tbody>
                   {visible.map((r, i) => (
                     <tr key={r.id} style={{ borderBottom: '1px solid var(--border)', background: i % 2 ? 'var(--surface2)' : 'transparent' }}>
-                      <td style={{ padding: '10px 14px' }}>
+                    <td style={{ padding: '10px 14px' }}>
+                      <a
+                        href={`${r.html_url}`}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        style={{
+                          textDecoration: 'none',
+                          color: 'inherit',
+                        }}
+                      >
                         <div style={{ fontWeight: 500, fontSize: 13 }}>{r.name}</div>
                         {r.orgLogin && <div style={{ fontSize: 11, color: 'var(--text2)' }}>{r.orgLogin}</div>}
-                      </td>
+                      </a>
+                    </td>
                       <td style={{ padding: '10px 14px', fontSize: 13, color: 'var(--text2)' }}>{r.stargazers_count.toLocaleString()}</td>
                       <td style={{ padding: '10px 14px', fontSize: 13, color: 'var(--text2)' }}>{r.forks_count.toLocaleString()}</td>
                       <td style={{ padding: '10px 14px', fontSize: 13, color: r.open_issues_count > 30 ? 'var(--red)' : 'var(--text2)' }}>{r.open_issues_count}</td>
                       <td style={{ padding: '10px 14px', minWidth: 130 }}><HealthBar score={r.healthScore} /></td>
-                      <td style={{ padding: '10px 14px' }}><Badge text={r.activityClassification} /></td>
-                      <td style={{ padding: '10px 14px', fontSize: 12, color: 'var(--text2)' }}>{r.pushed_at?.slice(0, 10)}</td>
-                    </tr>
+                      <td style={{ padding: '10px 14px' }}>
+                        <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}><Badge text={r.activityClassification} />
+                          <span style={{ fontSize: 11, color: 'var(--text2)' }}>
+                            Last push: {r.pushed_at?.slice(0, 10)}
+                          </span>
+                        </div>
+                      </td>
+                    </tr> 
                   ))}
                 </tbody>
               </table>
               <LoadMore shown={shown} total={sorted.length} onLoad={() => setShown(s => s + 20)} />
             </div>
-          )}
-
-          {/* Grid view */}
-          {view === 'grid' && (
-            <>
-              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill,minmax(300px,1fr))', gap: 16 }}>
-                {visible.map(r => (
-                  <div
-                    key={r.id}
-                    onMouseEnter={e => e.currentTarget.style.borderColor = 'var(--accent)'}
-                    onMouseLeave={e => e.currentTarget.style.borderColor = ACTIVITY_COLORS[r.activityClassification]}
-                    style={{
-                      ...C.card,
-                      borderColor: ACTIVITY_COLORS[r.activityClassification],
-                      transition: 'border-color .2s', display: 'flex', flexDirection: 'column', gap: 10,
-                    }}
-                  >
-                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
-                      <div>
-                        <div style={{ fontWeight: 600, fontSize: 14 }}>{r.name}</div>
-                        {r.orgLogin && <div style={{ fontSize: 11, color: 'var(--text2)' }}>{r.orgLogin}</div>}
-                      </div>
-                      <Badge text={r.activityClassification} />
-                    </div>
-                    <p style={{ fontSize: 12, color: 'var(--text2)', minHeight: 34, overflow: 'hidden', display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical' }}>
-                      {r.description || 'No description provided'}
-                    </p>
-                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', textAlign: 'center', gap: 4 }}>
-                      {[['Stars', r.stargazers_count.toLocaleString()], ['Forks', r.forks_count.toLocaleString()], ['Issues', r.open_issues_count]].map(([l, v]) => (
-                        <div key={l}>
-                          <div style={{ fontSize: 14, fontWeight: 600 }}>{v}</div>
-                          <div style={{ ...C.label, fontSize: 10 }}>{l}</div>
-                        </div>
-                      ))}
-                    </div>
-                    {r.language && (
-                      <div style={{ fontSize: 12, color: 'var(--text2)', display: 'flex', alignItems: 'center', gap: 5 }}>
-                        <span style={{ display: 'inline-block', width: 8, height: 8, borderRadius: '50%', background: 'var(--green)' }} />
-                        {r.language}
-                      </div>
-                    )}
-                    <div>
-                      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 11, color: 'var(--text2)', marginBottom: 4 }}>
-                        <span>HEALTH SCORE</span>
-                        <span>{r.pushed_at?.slice(0, 10)}</span>
-                      </div>
-                      <HealthBar score={r.healthScore} />
-                    </div>
-                    <div style={{ ...C.label, fontSize: 10 }}>ACTIVITY 40% · ISSUES 30% · DIVERSITY 30%</div>
-                  </div>
-                ))}
-              </div>
-              <LoadMore shown={shown} total={sorted.length} onLoad={() => setShown(s => s + 20)} />
-            </>
-          )}
         </>)
         : (
           <div
diff --git a/src/services/analytics.js b/src/services/analytics.js
index 09d1df6..7ca784b 100644
--- a/src/services/analytics.js
+++ b/src/services/analytics.js
@@ -168,3 +168,28 @@ export function exportTrendsCSV(series) {
   const rows   = series.map(s => [s.date, s.prs_created, s.prs_merged, s.prs_closed, s.issues_created, s.issues_closed])
   download([header, ...rows].map(r => r.join(',')).join('\n'), 'orgexplorer-trends.csv')
 }
+
+export function getTopRepositories(repos, limit = 10) {
+  const MS_PER_DAY = 1000 * 60 * 60 * 24;
+
+  return [...repos]
+    .map(repo => {
+      const pushedAtMs = Date.parse(repo.pushed_at);  
+      const daysSinceLastPush = Number.isFinite(pushedAtMs) ? (Date.now() - pushedAtMs) / MS_PER_DAY : Infinity;
+
+      const activityBonus = 0.5 * Math.max(0, 365 - daysSinceLastPush);
+
+      const score =  
+        (repo.stargazers_count ?? 0) +  
+        (repo.forks_count ?? 0) * 2 +  
+        (repo.watchers_count ?? 0) * 1.5 +  
+        activityBonus;  
+
+      return {
+        ...repo,
+        score,
+      };
+    })
+    .sort((a, b) => b.score - a.score)
+    .slice(0, limit);
+}