diff --git a/src/app/api/contribs/route.ts b/src/app/api/contribs/route.ts
new file mode 100644
index 0000000..a107556
--- /dev/null
+++ b/src/app/api/contribs/route.ts
@@ -0,0 +1,34 @@
+import { NextRequest, NextResponse } from "next/server";
+
+export async function GET(req: NextRequest) {
+  const username = "kleo-dev";
+  const token = process.env.GITHUB_TOKEN;
+
+  const query = `
+    query {
+      user(login: "${username}") {
+        contributionsCollection {
+          contributionCalendar {
+            totalContributions
+          }
+        }
+      }
+    }
+  `;
+
+  const response = await fetch("https://api.github.com/graphql", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`,
+    },
+    body: JSON.stringify({ query }),
+  });
+
+  const data = await response.json();
+  const total =
+    data.data.user.contributionsCollection.contributionCalendar
+      .totalContributions;
+
+  return NextResponse.json({ total }, { status: 200 });
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 0667b63..3c5b57c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -15,13 +15,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className="antialiased bg-black">
-        {/* <Background> */}
-          {/* <div className="relative h-screen overflow-y-scroll"> */}
-            {children}
-          {/* </div> */}
-        {/* </Background> */}
-      </body>
+      <body className="antialiased bg-black">{children}</body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
index b4a8f3e..7e683db 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import PinnedRepos from "@/components/PinnedRepos";
 import Skill from "@/components/Skill";
 import {
@@ -12,9 +14,22 @@ import {
 } from "@fortawesome/free-brands-svg-icons";
 import { faJava } from "@fortawesome/free-brands-svg-icons/faJava";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useEffect, useState } from "react";
 import GitHubCalendar from "react-github-calendar";
 
 export default function App() {
+  const [contribs, setContribs] = useState<number>();
+
+  useEffect(() => {
+    const fetchContributions = async () => {
+      const res = await fetch("/api/contribs");
+      const data = await res.json();
+      console.log("Total contributions:", data.total);
+      setContribs(data.total || undefined);
+    };
+    fetchContributions();
+  }, []);
+
   return (
     <div>
       <div className="content-center w-full lg:mx-auto pt-5 relative z-20 pb-10 animate-fadeIn">
@@ -35,8 +50,7 @@ export default function App() {
                 <a href="https://github.com/kleo-dev/" target="blank_">
                   <FontAwesomeIcon
                     icon={faGithub}
-                    width={36}
-                    className="text-slate-300"
+                    className="text-slate-300 size-[2.3rem]"
                   />
                 </a>
                 <a
@@ -45,15 +59,16 @@ export default function App() {
                 >
                   <FontAwesomeIcon
                     icon={faLinkedin}
-                    width={36}
-                    className="text-slate-300"
+                    className="text-slate-300 size-[2.3rem]"
                   />
                 </a>
-                <a href="https://www.instagram.com/kleo.dev/" target="blank_">
+                <a
+                  href="https://www.instagram.com/selimaj.dev/"
+                  target="blank_"
+                >
                   <FontAwesomeIcon
                     icon={faInstagram}
-                    width={36}
-                    className="text-slate-300"
+                    className="text-slate-300 size-[2.3rem]"
                   />
                 </a>
               </div>
@@ -75,7 +90,10 @@ export default function App() {
             <section className="">
               <PinnedRepos />
             </section>
-            <section className="mt-8">
+            <h2 className="text-slate-300 mt-7">
+              {contribs || "Loading.."} contributions in the last year
+            </h2>
+            <section className="mt-4">
               <GitHubCalendar
                 username="kleo-dev"
                 theme={{
diff --git a/src/components/PinnedRepos.tsx b/src/components/PinnedRepos.tsx
index ae5e85e..cf2c861 100644
--- a/src/components/PinnedRepos.tsx
+++ b/src/components/PinnedRepos.tsx
@@ -73,7 +73,7 @@ export function Repo({
                     strokeWidth="2"
                     strokeLinecap="round"
                     strokeLinejoin="round"
-                    className="lucide lucide-star text-yellow-500 h-3 w-3 sm:h-4 sm:w-4"
+                    className="lucide lucide-star text-gray-300 h-3 w-3 sm:h-4 sm:w-4"
                   >
                     <polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2" />
                   </svg>
diff --git a/src/components/Skill.tsx b/src/components/Skill.tsx
index 84f8cfc..de9fc89 100644
--- a/src/components/Skill.tsx
+++ b/src/components/Skill.tsx
@@ -22,8 +22,7 @@ export default function Skill({
 
       <FontAwesomeIcon
         icon={icon}
-        width={40}
-        className={`text-slate-300 ${classInsert} cursor-pointer`}
+        className={`text-gray-300 ${classInsert} size-[2.3rem]`}
       />
     </div>
   );