diff --git a/app/components/landing-page/Contributors.tsx b/app/components/landing-page/Contributors.tsx
new file mode 100644
index 0000000..0f6f26e
--- /dev/null
+++ b/app/components/landing-page/Contributors.tsx
@@ -0,0 +1,58 @@
+import Image from "next/image";
+import Link from "next/link";
+
+export interface Contributor {
+  id: number;
+  login: string;
+  avatar_url: string;
+  html_url: string;
+}
+
+export default async function Contributors() {
+  const devPulseContributors = await fetch(
+    "https://api.github.com/repos/hallofcodes/devpulse/contributors?per_page=100",
+  );
+
+  if (!devPulseContributors.ok) {
+    throw new Error("Failed to fetch contributors");
+  }
+
+  const contributors = await devPulseContributors.json();
+
+  return (
+    <section className="max-w-5xl mx-auto px-6 pb-5 relative z-10">
+      <div
+        className="glass-card border border-white/5 bg-white/[0.02] backdrop-blur-xl p-8 md:p-12 rounded-3xl"
+        data-aos="fade-up"
+      >
+        <h2 className="text-2xl font-bold mb-4">Contributors</h2>
+        <p className="text-gray-400 text-sm mb-8">
+          A big thank you to all the amazing contributors who have helped make
+          DevPulse better! Your support and contributions are what drive this
+          project forward.
+        </p>
+
+        <div className="flex flex-wrap gap-6">
+          {contributors.map((contributor: Contributor) => (
+            <Link
+              key={contributor.id}
+              href={contributor.html_url}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="flex items-center gap-3 bg-white/5 border border-white/10 rounded-lg px-4 py-2 transition-transform hover:scale-105"
+            >
+              <Image
+                src={contributor.avatar_url}
+                alt={contributor.login}
+                width={32}
+                height={32}
+                className="rounded-full"
+              />
+              <span className="text-sm text-gray-300">{contributor.login}</span>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
diff --git a/app/components/landing-page/LosserMembers.tsx b/app/components/landing-page/LosserMembers.tsx
new file mode 100644
index 0000000..c77c89c
--- /dev/null
+++ b/app/components/landing-page/LosserMembers.tsx
@@ -0,0 +1,65 @@
+export interface LosserMember {
+  email: string;
+  total_seconds: number;
+}
+
+export default async function LosserMembers({
+  losser_members,
+}: {
+  losser_members: LosserMember[];
+}) {
+  return (
+    <>
+      {losser_members && losser_members.length > 0 && (
+        <section className="max-w-5xl mx-auto px-6 pb-5 relative z-10">
+          <div
+            className="glass-card border border-white/5 bg-white/[0.02] backdrop-blur-xl p-8 md:p-12 rounded-3xl"
+            data-aos="fade-up"
+          >
+            <h2 className="text-2xl font-bold text-white mb-4">
+              Losser Leaderboard
+            </h2>
+            <p className="text-gray-400 text-sm mb-8">
+              Top most &quot;dedicated&quot; developers who have spent the least
+              amount of time coding. Remember, its not about how much you code,
+              but how effective you are! 😉
+            </p>
+
+            {(!losser_members || losser_members.length) === 0 && (
+              <div className="text-gray-500 text-sm italic">
+                No idoits found... 😜
+              </div>
+            )}
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {losser_members.map(
+                (
+                  member: { email: string; total_seconds: number },
+                  i: number,
+                ) => (
+                  <div
+                    key={i}
+                    className="stat-card flex justify-between items-center px-6 py-4 group bg-black/20 hover:bg-white/5 transition-all border border-white/5 rounded-xl rounded-tl-sm"
+                    data-aos="fade-up"
+                    data-aos-delay={(i * 50).toString()}
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="w-2 h-2 rounded-full bg-emerald-400 group-hover:shadow-[0_0_10px_rgba(16,185,129,0.8)] transition-all" />
+                      <span className="text-gray-200 font-semibold group-hover:text-white transition">
+                        {member.email.split("@")[0]}
+                      </span>
+                    </div>
+                    <span className="text-gray-500 text-sm group-hover:text-emerald-400 transition flex items-center gap-2">
+                      {Math.floor(member.total_seconds / 3600)}h{" "}
+                      {Math.floor((member.total_seconds % 3600) / 60)}m
+                    </span>
+                  </div>
+                ),
+              )}
+            </div>
+          </div>
+        </section>
+      )}
+    </>
+  );
+}
diff --git a/app/components/landing-page/RecentLeaderboard.tsx b/app/components/landing-page/RecentLeaderboard.tsx
new file mode 100644
index 0000000..10963ed
--- /dev/null
+++ b/app/components/landing-page/RecentLeaderboard.tsx
@@ -0,0 +1,86 @@
+import Link from "next/link";
+
+export interface RecentLeaderboardProps {
+  id: string;
+  name: string;
+  slug: string;
+}
+
+export default function RecentLeaderboard({
+  leaderboards,
+}: {
+  leaderboards: RecentLeaderboardProps[];
+}) {
+  return (
+    <>
+      {leaderboards && leaderboards.length > 0 && (
+        <section className="max-w-5xl mx-auto px-6 pb-5 relative z-10">
+          <div
+            className="glass-card border border-white/5 bg-white/[0.02] backdrop-blur-xl p-8 md:p-12 rounded-3xl"
+            data-aos="fade-up"
+          >
+            <div className="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
+              <div>
+                <h2 className="text-2xl font-bold text-white mb-2">
+                  Active Leaderboards
+                </h2>
+                <p className="text-gray-400 text-sm">
+                  Join the top engineering communities today.
+                </p>
+              </div>
+              <Link
+                href="/signup"
+                className="text-sm text-indigo-400 hover:text-indigo-300 font-medium flex items-center gap-1 group"
+              >
+                Create yours{" "}
+                <span className="group-hover:translate-x-1 transition-transform">
+                  →
+                </span>
+              </Link>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              {leaderboards.map(
+                (
+                  board: { id: string; name: string; slug: string },
+                  i: number,
+                ) => (
+                  <Link
+                    key={board.id}
+                    href={`/leaderboard/${board.slug}`}
+                    className="stat-card flex justify-between items-center px-6 py-4 group bg-black/20 hover:bg-white/5 transition-all border border-white/5 rounded-xl rounded-tl-sm hover:border-indigo-500/30"
+                    data-aos="fade-up"
+                    data-aos-delay={(i * 50).toString()}
+                  >
+                    <div className="flex items-center gap-3">
+                      <div className="w-2 h-2 rounded-full bg-indigo-500 group-hover:shadow-[0_0_10px_rgba(99,102,241,0.8)] transition-all" />
+                      <span className="text-gray-200 font-semibold group-hover:text-white transition">
+                        {board.name}
+                      </span>
+                    </div>
+                    <span className="text-gray-500 text-sm group-hover:text-indigo-400 transition flex items-center gap-2">
+                      View
+                      <svg
+                        className="w-4 h-4 opacity-0 -ml-2 group-hover:opacity-100 group-hover:ml-0 transition-all"
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M9 5l7 7-7 7"
+                        />
+                      </svg>
+                    </span>
+                  </Link>
+                ),
+              )}
+            </div>
+          </div>
+        </section>
+      )}
+    </>
+  );
+}
diff --git a/app/components/landing-page/TopLeaderbord.tsx b/app/components/landing-page/TopLeaderbord.tsx
new file mode 100644
index 0000000..9258182
--- /dev/null
+++ b/app/components/landing-page/TopLeaderbord.tsx
@@ -0,0 +1,57 @@
+export interface TopMember {
+  email: string;
+  total_seconds: number;
+}
+
+export default function TopLeaderboard({
+  top_members,
+}: {
+  top_members: TopMember[];
+}) {
+  return (
+    <>
+      {top_members && top_members.length > 0 && (
+        <section className="max-w-5xl mx-auto px-6 pb-5 relative z-10">
+          <div
+            className="glass-card border border-white/5 bg-white/[0.02] backdrop-blur-xl p-8 md:p-12 rounded-3xl"
+            data-aos="fade-up"
+          >
+            <h2 className="text-2xl font-bold text-white mb-4">
+              Top Developers of the Week
+            </h2>
+            <p className="text-gray-400 text-sm mb-8">
+              Celebrating the most dedicated coders in our community.
+            </p>
+
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+              {top_members.map(
+                (
+                  member: { email: string; total_seconds: number },
+                  i: number,
+                ) => (
+                  <div
+                    key={i}
+                    className="stat-card flex flex-col items-center px-6 py-4 group bg-black/20 hover:bg-white/5 transition-all border border-white/5 rounded-xl rounded-tl-sm"
+                    data-aos="fade-up"
+                    data-aos-delay={(i * 50).toString()}
+                  >
+                    <div className="flex items-center gap-3 mb-2">
+                      <div className="w-2 h-2 rounded-full bg-yellow-400 group-hover:shadow-[0_0_10px_rgba(250,204,21,0.8)] transition-all" />
+                      <span className="text-gray-200 font-semibold group-hover:text-white transition">
+                        {member.email.split("@")[0]}
+                      </span>
+                    </div>
+                    <span className="text-gray-500 text-sm group-hover:text-yellow-400 transition">
+                      {Math.floor(member.total_seconds / 3600)}h{" "}
+                      {Math.floor((member.total_seconds % 3600) / 60)}m
+                    </span>
+                  </div>
+                ),
+              )}
+            </div>
+          </div>
+        </section>
+      )}
+    </>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
index de04475..5e58204 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -3,6 +3,10 @@ import Image from "next/image";
 import { createClient } from "./lib/supabase/server";
 import Footer from "./components/layout/Footer";
 import CTA from "./components/layout/CTA";
+import Contributors from "./components/landing-page/Contributors";
+import LosserMembers from "./components/landing-page/LosserMembers";
+import RecentLeaderboard from "./components/landing-page/RecentLeaderboard";
+import TopLeaderboard from "./components/landing-page/TopLeaderbord";
 
 export default async function Home() {
   const supabase = await createClient();
@@ -319,172 +323,11 @@ export default async function Home() {
         </div>
       </section>
 
-      {top_members && top_members.length > 0 && (
-        <section className="max-w-5xl mx-auto px-6 pb-5 relative z-10">
-          <div
-            className="glass-card border border-white/5 bg-white/[0.02] backdrop-blur-xl p-8 md:p-12 rounded-3xl"
-            data-aos="fade-up"
-          >
-            <h2 className="text-2xl font-bold text-white mb-4">
-              Top Developers of the Week
-            </h2>
-            <p className="text-gray-400 text-sm mb-8">
-              Celebrating the most dedicated coders in our community.
-            </p>
-
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              {top_members.map(
-                (
-                  member: { email: string; total_seconds: number },
-                  i: number,
-                ) => (
-                  <div
-                    key={i}
-                    className="stat-card flex flex-col items-center px-6 py-4 group bg-black/20 hover:bg-white/5 transition-all border border-white/5 rounded-xl rounded-tl-sm"
-                    data-aos="fade-up"
-                    data-aos-delay={(i * 50).toString()}
-                  >
-                    <div className="flex items-center gap-3 mb-2">
-                      <div className="w-2 h-2 rounded-full bg-yellow-400 group-hover:shadow-[0_0_10px_rgba(250,204,21,0.8)] transition-all" />
-                      <span className="text-gray-200 font-semibold group-hover:text-white transition">
-                        {member.email.split("@")[0]}
-                      </span>
-                    </div>
-                    <span className="text-gray-500 text-sm group-hover:text-yellow-400 transition">
-                      {Math.floor(member.total_seconds / 3600)}h{" "}
-                      {Math.floor((member.total_seconds % 3600) / 60)}m
-                    </span>
-                  </div>
-                ),
-              )}
-            </div>
-          </div>
-        </section>
-      )}
-
-      {/* Recent Leaderboards */}
-      {leaderboards && leaderboards.length > 0 && (
-        <section className="max-w-5xl mx-auto px-6 pb-5 relative z-10">
-          <div
-            className="glass-card border border-white/5 bg-white/[0.02] backdrop-blur-xl p-8 md:p-12 rounded-3xl"
-            data-aos="fade-up"
-          >
-            <div className="flex flex-col md:flex-row md:items-center justify-between mb-8 gap-4">
-              <div>
-                <h2 className="text-2xl font-bold text-white mb-2">
-                  Active Leaderboards
-                </h2>
-                <p className="text-gray-400 text-sm">
-                  Join the top engineering communities today.
-                </p>
-              </div>
-              <Link
-                href="/signup"
-                className="text-sm text-indigo-400 hover:text-indigo-300 font-medium flex items-center gap-1 group"
-              >
-                Create yours{" "}
-                <span className="group-hover:translate-x-1 transition-transform">
-                  →
-                </span>
-              </Link>
-            </div>
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {leaderboards.map(
-                (
-                  board: { id: string; name: string; slug: string },
-                  i: number,
-                ) => (
-                  <Link
-                    key={board.id}
-                    href={`/leaderboard/${board.slug}`}
-                    className="stat-card flex justify-between items-center px-6 py-4 group bg-black/20 hover:bg-white/5 transition-all border border-white/5 rounded-xl rounded-tl-sm hover:border-indigo-500/30"
-                    data-aos="fade-up"
-                    data-aos-delay={(i * 50).toString()}
-                  >
-                    <div className="flex items-center gap-3">
-                      <div className="w-2 h-2 rounded-full bg-indigo-500 group-hover:shadow-[0_0_10px_rgba(99,102,241,0.8)] transition-all" />
-                      <span className="text-gray-200 font-semibold group-hover:text-white transition">
-                        {board.name}
-                      </span>
-                    </div>
-                    <span className="text-gray-500 text-sm group-hover:text-indigo-400 transition flex items-center gap-2">
-                      View
-                      <svg
-                        className="w-4 h-4 opacity-0 -ml-2 group-hover:opacity-100 group-hover:ml-0 transition-all"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                          strokeWidth={2}
-                          d="M9 5l7 7-7 7"
-                        />
-                      </svg>
-                    </span>
-                  </Link>
-                ),
-              )}
-            </div>
-          </div>
-        </section>
-      )}
-
-      {losser_members && losser_members.length > 0 && (
-        <section className="max-w-5xl mx-auto px-6 pb-24 relative z-10">
-          <div
-            className="glass-card border border-white/5 bg-white/[0.02] backdrop-blur-xl p-8 md:p-12 rounded-3xl"
-            data-aos="fade-up"
-          >
-            <h2 className="text-2xl font-bold text-white mb-4">
-              Losser Leaderboard
-            </h2>
-            <p className="text-gray-400 text-sm mb-8">
-              Top most &quot;dedicated&quot; developers who have spent the least
-              amount of time coding. Remember, its not about how much you code,
-              but how effective you are! 😉
-            </p>
-
-            {(!losser_members || losser_members.length) === 0 && (
-              <div className="text-gray-500 text-sm italic">
-                No idoits found... 😜
-              </div>
-            )}
-
-            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-              {losser_members.map(
-                (
-                  member: { email: string; total_seconds: number },
-                  i: number,
-                ) => (
-                  <div
-                    key={i}
-                    className="stat-card flex justify-between items-center px-6 py-4 group bg-black/20 hover:bg-white/5 transition-all border border-white/5 rounded-xl rounded-tl-sm"
-                    data-aos="fade-up"
-                    data-aos-delay={(i * 50).toString()}
-                  >
-                    <div className="flex items-center gap-3">
-                      <div className="w-2 h-2 rounded-full bg-emerald-400 group-hover:shadow-[0_0_10px_rgba(16,185,129,0.8)] transition-all" />
-                      <span className="text-gray-200 font-semibold group-hover:text-white transition">
-                        {member.email.split("@")[0]}
-                      </span>
-                    </div>
-                    <span className="text-gray-500 text-sm group-hover:text-emerald-400 transition flex items-center gap-2">
-                      {Math.floor(member.total_seconds / 3600)}h{" "}
-                      {Math.floor((member.total_seconds % 3600) / 60)}m
-                    </span>
-                  </div>
-                ),
-              )}
-            </div>
-          </div>
-        </section>
-      )}
-
+      <TopLeaderboard top_members={top_members ?? []} />
+      <RecentLeaderboard leaderboards={leaderboards ?? []} />
+      <LosserMembers losser_members={losser_members ?? []} />
+      <Contributors />
       <CTA />
-
       <Footer />
     </div>
   );
diff --git a/next.config.ts b/next.config.ts
index e9ffa30..6373d60 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,6 +2,16 @@ import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   /* config options here */
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**",
+      },
+    ],
+
+    unoptimized: true,
+  },
 };
 
 export default nextConfig;