diff --git a/src/App.tsx b/src/App.tsx
index e9adacf..3cc2eeb 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,3 +1,4 @@
+import MetricCard from "./components/MetricCard";
 import Navbar from "./components/Navbar";
 import Footer from "./components/Footer";
 import ScrollProgressBar from './components/ScrollProgressBar';
diff --git a/src/Routes/Router.tsx b/src/Routes/Router.tsx
index 007d11d..1ef8817 100644
--- a/src/Routes/Router.tsx
+++ b/src/Routes/Router.tsx
@@ -1,3 +1,5 @@
+
+import Metrics from "../components/MetricCard.tsx";
 import { Navigate, Route, Routes } from "react-router-dom";
 
 import Home from "../pages/Home/Home"; // Import the Home component
@@ -7,6 +9,7 @@ import Contributors from "../pages/Contributors/Contributors";
 import Signup from "../pages/Signup/Signup.tsx";
 import Login from "../pages/Login/Login.tsx";
 import UserProfile from "../pages/UserProfile/UserProfile.tsx";
+import MetricCard from "../components/MetricCard.tsx";
 
 const Router = () => {
   return (
@@ -20,6 +23,8 @@ const Router = () => {
       <Route path="/home" element={<Home />} />
       <Route path="/contributors" element={<Contributors />} />
       <Route path="/user/:username" element={<UserProfile />} />
+
+      <Route path="/metrics" element={<Metrics />} />
     </Routes>
   );
 };
diff --git a/src/components/MetricCard.tsx b/src/components/MetricCard.tsx
new file mode 100644
index 0000000..f7d9555
--- /dev/null
+++ b/src/components/MetricCard.tsx
@@ -0,0 +1,26 @@
+
+import React from "react";
+
+function MetricCard({ username="md-jasim123" }) {
+    const ProfileUrl = `https://metrics.lecoq.io/${username}`;
+    return (
+        <div className="flex justify-center mt-10">
+            <div className="bg-white shadow-md p-8 rounded-lg text-center">     
+            <h2 className="text-2xl font-semibold mb-4">GitHub Metric</h2>
+             <p className="mb-4">
+                Click the button below to view the Github metrics of <strong>{username}</strong>
+             </p>
+             <a 
+                href={ProfileUrl}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+               >
+                View Metrics
+             </a>   
+        </div>
+        </div>
+    )
+}
+
+export default MetricCard;
\ No newline at end of file
diff --git a/src/page/Metrics/Metrics.tsx b/src/page/Metrics/Metrics.tsx
new file mode 100644
index 0000000..aad9a94
--- /dev/null
+++ b/src/page/Metrics/Metrics.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+import MetricCard from "../../components/MetricCard";
+
+const Metrics: React.FC = () => {
+    return (
+        <div className="mt-10 flex justify-center">
+            <MetricCard />
+        </div>
+    );
+
+};
+
+export default Metrics;
\ No newline at end of file