diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
index f8ccf5d7..b811e093 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -11,6 +11,7 @@ import ProfilePage from "../pages/Profile/ProfilePage.tsx";
 import EditProfilePage from "../pages/Profile/EditProfilePage.tsx";
 import Activity from "../pages/Activity.tsx";
 import PrivacyPolicy from "../pages/Privacy/PrivacyPolicy.tsx"; // ✅ Updated import path to match your new folder structure
+import RepoCompare from "../pages/RepoCompare/RepoCompare.tsx";
 
 const Router = () => {
   return (
@@ -26,6 +27,7 @@ const Router = () => {
       <Route path="/me" element={<ProfilePage />}></Route>
       <Route path="/profile/edit" element={<EditProfilePage />}></Route>
       <Route path="/activity" element={<Activity />} />
+      <Route path="/compare" element={<RepoCompare />} />
 
       {/* Privacy Policy page route */}
       <Route path="/privacy" element={<PrivacyPolicy />} />
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index f4a19bd4..e5f7eb4f 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,16 +1,12 @@
 import { NavLink, Link } from "react-router-dom";
 import { useState, useContext } from "react";
 import { ThemeContext } from "../context/ThemeContext";
-import ProfileDropDown from "./Profile/ProfileDropDown";
-import { logoutUser } from "../services/auth";
-
-import { Moon, Sun, Menu, X, Github } from "lucide-react";
+import { Moon, Sun, Menu, X } from "lucide-react";
 
 const Navbar: React.FC = () => {
   const [isOpen, setIsOpen] = useState(false);
 
   const themeContext = useContext(ThemeContext);
-
   if (!themeContext) return null;
 
   const { toggleTheme, mode } = themeContext;
@@ -47,7 +43,6 @@ const Navbar: React.FC = () => {
             alt="CRL Icon"
             className="h-8 w-8 object-contain"
           />
-
           <span>GitHub Tracker</span>
         </Link>
 
@@ -61,6 +56,11 @@ const Navbar: React.FC = () => {
             Tracker
           </NavLink>
 
+          {/* ✅ NEW FEATURE */}
+          <NavLink to="/compare" className={navLinkStyles}>
+            Compare
+          </NavLink>
+
           <NavLink to="/contributors" className={navLinkStyles}>
             Contributors
           </NavLink>
@@ -122,27 +122,20 @@ const Navbar: React.FC = () => {
         <div className="md:hidden border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
           <div className="px-6 py-5 flex flex-col gap-3">
 
-            <NavLink
-              to="/"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
+            <NavLink to="/" className={navLinkStyles} onClick={closeMenu}>
               Home
             </NavLink>
 
-            <NavLink
-              to="/track"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
+            <NavLink to="/track" className={navLinkStyles} onClick={closeMenu}>
               Tracker
             </NavLink>
 
-            <NavLink
-              to="/contributors"
-              className={navLinkStyles}
-              onClick={closeMenu}
-            >
+            {/* ✅ NEW FEATURE */}
+            <NavLink to="/compare" className={navLinkStyles} onClick={closeMenu}>
+              Compare
+            </NavLink>
+
+            <NavLink to="/contributors" className={navLinkStyles} onClick={closeMenu}>
               Contributors
             </NavLink>
             {!user && (
@@ -182,15 +175,10 @@ const Navbar: React.FC = () => {
               </>
             )}
 
-            <button
-              onClick={() => {
-                toggleTheme();
-                setIsOpen(false);
-              }}
-              className="text-sm font-semibold px-3 py-1 rounded border border-gray-500 hover:text-gray-300 hover:border-gray-300 transition duration-200 w-full text-left"
-            >
-              {mode === "dark" ? "🌞 Light" : "🌙 Dark"}
-            </button>
+            <NavLink to="/login" className={navLinkStyles} onClick={closeMenu}>
+              Login
+            </NavLink>
+
           </div>
         </div>
       )}
@@ -198,4 +186,4 @@ const Navbar: React.FC = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;
\ No newline at end of file
diff --git a/src/pages/RepoCompare/RepoCompare.tsx b/src/pages/RepoCompare/RepoCompare.tsx
new file mode 100644
index 00000000..d4a5a453
--- /dev/null
+++ b/src/pages/RepoCompare/RepoCompare.tsx
@@ -0,0 +1,176 @@
+import { useState } from "react";
+
+type RepoData = {
+  full_name: string;
+  stargazers_count: number;
+  forks_count: number;
+  open_issues_count: number;
+  watchers_count: number;
+  language: string;
+  updated_at: string;
+  description: string;
+};
+
+const RepoCompare = () => {
+  const [repo1, setRepo1] = useState("");
+  const [repo2, setRepo2] = useState("");
+
+  const [data1, setData1] = useState<RepoData | null>(null);
+  const [data2, setData2] = useState<RepoData | null>(null);
+
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const fetchRepo = async (repo: string): Promise<RepoData> => {
+    const res = await fetch(`https://api.github.com/repos/${repo}`);
+
+    if (!res.ok) {
+      throw new Error(`Repository not found: ${repo}`);
+    }
+
+    return res.json();
+  };
+
+  const handleCompare = async () => {
+    if (!repo1 || !repo2) {
+      setError("Please enter both repositories");
+      return;
+    }
+
+    try {
+      setLoading(true);
+      setError("");
+
+      const [r1, r2] = await Promise.all([
+        fetchRepo(repo1),
+        fetchRepo(repo2),
+      ]);
+
+      setData1(r1);
+      setData2(r2);
+    } catch (err: any) {
+      setError(err.message || "Something went wrong");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const formatDate = (date: string) => {
+    return new Date(date).toLocaleDateString();
+  };
+
+  return (
+    <div style={{ padding: "20px", maxWidth: "1000px", margin: "auto" }}>
+      <h1 style={{ textAlign: "center" }}>🔍 GitHub Repo Comparison</h1>
+
+      {/* INPUT SECTION */}
+      <div style={{ display: "flex", gap: "10px", marginBottom: "20px" }}>
+        <input
+          type="text"
+          placeholder="e.g. facebook/react"
+          value={repo1}
+          onChange={(e) => setRepo1(e.target.value)}
+          style={{ flex: 1, padding: "10px" }}
+        />
+
+        <input
+          type="text"
+          placeholder="e.g. vuejs/core"
+          value={repo2}
+          onChange={(e) => setRepo2(e.target.value)}
+          style={{ flex: 1, padding: "10px" }}
+        />
+
+        <button onClick={handleCompare} style={{ padding: "10px 20px" }}>
+          Compare
+        </button>
+      </div>
+
+      {/* ERROR */}
+      {error && (
+        <div style={{ color: "red", marginBottom: "10px" }}>{error}</div>
+      )}
+
+      {/* LOADING */}
+      {loading && <p>Loading comparison...</p>}
+
+      {/* RESULT TABLE */}
+      {data1 && data2 && (
+        <div style={{ overflowX: "auto" }}>
+          <table
+            style={{
+              width: "100%",
+              borderCollapse: "collapse",
+              textAlign: "center",
+            }}
+          >
+            <thead>
+              <tr>
+                <th style={thStyle}>Metric</th>
+                <th style={thStyle}>{data1.full_name}</th>
+                <th style={thStyle}>{data2.full_name}</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td style={tdStyle}>⭐ Stars</td>
+                <td style={tdStyle}>{data1.stargazers_count}</td>
+                <td style={tdStyle}>{data2.stargazers_count}</td>
+              </tr>
+
+              <tr>
+                <td style={tdStyle}>🍴 Forks</td>
+                <td style={tdStyle}>{data1.forks_count}</td>
+                <td style={tdStyle}>{data2.forks_count}</td>
+              </tr>
+
+              <tr>
+                <td style={tdStyle}>🐛 Issues</td>
+                <td style={tdStyle}>{data1.open_issues_count}</td>
+                <td style={tdStyle}>{data2.open_issues_count}</td>
+              </tr>
+
+              <tr>
+                <td style={tdStyle}>👀 Watchers</td>
+                <td style={tdStyle}>{data1.watchers_count}</td>
+                <td style={tdStyle}>{data2.watchers_count}</td>
+              </tr>
+
+              <tr>
+                <td style={tdStyle}>💻 Language</td>
+                <td style={tdStyle}>{data1.language}</td>
+                <td style={tdStyle}>{data2.language}</td>
+              </tr>
+
+              <tr>
+                <td style={tdStyle}>📅 Last Updated</td>
+                <td style={tdStyle}>{formatDate(data1.updated_at)}</td>
+                <td style={tdStyle}>{formatDate(data2.updated_at)}</td>
+              </tr>
+
+              <tr>
+                <td style={tdStyle}>🧾 Description</td>
+                <td style={tdStyle}>{data1.description}</td>
+                <td style={tdStyle}>{data2.description}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const thStyle: React.CSSProperties = {
+  border: "1px solid #ddd",
+  padding: "10px",
+  background: "#f4f4f4",
+};
+
+const tdStyle: React.CSSProperties = {
+  border: "1px solid #ddd",
+  padding: "10px",
+};
+
+export default RepoCompare;
\ No newline at end of file
diff --git a/src/utils/github.ts b/src/utils/github.ts
new file mode 100644
index 00000000..e3621fdd
--- /dev/null
+++ b/src/utils/github.ts
@@ -0,0 +1,18 @@
+export async function fetchRepo(repo: string) {
+  const normalizedRepo = repo.trim();
+  const res = await fetch(`https://api.github.com/repos/${normalizedRepo}`);
+  if (!res.ok) {
+    throw new Error(`Repository not found: ${normalizedRepo}`);
+  }
+  return res.json();
+}
+}
+
+export async function compareRepos(repo1: string, repo2: string) {
+  const [a, b] = await Promise.all([
+    fetchRepo(repo1),
+    fetchRepo(repo2),
+  ]);
+
+  return { a, b };
+}
\ No newline at end of file