diff --git a/src/components/MetricCard.tsx b/src/components/MetricCard.tsx
new file mode 100644
index 0000000..35f1ad3
--- /dev/null
+++ b/src/components/MetricCard.tsx
@@ -0,0 +1,30 @@
+import React, { useState } from "react";
+
+interface MetricCardProps {
+  username: string;
+}
+
+const MetricCard: React.FC<MetricCardProps> = ({ username }) => {
+  const [loading, setLoading] = useState(true);
+
+  if (!username) return null;
+
+  const metricsURL = `https://metrics.lecoq.io/${username}`;
+
+  return (
+    <div className="w-full flex flex-col items-center p-4">
+      {loading && <p className="text-gray-500 mb-2">Loading metrics...</p>}
+      <iframe
+        src={metricsURL}
+        width="100%"
+        height="400"
+        frameBorder="0"
+        title="GitHub Metrics"
+        className="rounded-lg shadow-md"
+        onLoad={() => setLoading(false)}
+      ></iframe>
+    </div>
+  );
+};
+
+export default MetricCard;
diff --git a/src/pages/ContributorProfile/ContributorProfile.tsx b/src/pages/ContributorProfile/ContributorProfile.tsx
index b4ab931..39a71ac 100644
--- a/src/pages/ContributorProfile/ContributorProfile.tsx
+++ b/src/pages/ContributorProfile/ContributorProfile.tsx
@@ -1,6 +1,7 @@
 import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
+import MetricCard from "../../components/MetricCard";
 
 type PR = {
   title: string;
@@ -68,6 +69,10 @@ export default function ContributorProfile() {
         </button>
       </div>
 
+      {/* GitHub Metrics Preview */}
+      <h3 className="text-xl font-semibold mt-6 mb-2">GitHub Metrics</h3>
+      <MetricCard username={username || ""} />
+
       <h3 className="text-xl font-semibold mt-6 mb-2">Pull Requests</h3>
       {prs.length > 0 ? (
         <ul className="list-disc ml-6 space-y-2">