diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index e52aaa9..0667b63 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -16,11 +16,11 @@ export default function RootLayout({
   return (
     <html lang="en">
       <body className="antialiased bg-black">
-        <Background>
-          <div className="relative h-screen overflow-y-scroll">
+        {/* <Background> */}
+          {/* <div className="relative h-screen overflow-y-scroll"> */}
             {children}
-          </div>
-        </Background>
+          {/* </div> */}
+        {/* </Background> */}
       </body>
     </html>
   );
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 97d8980..b4a8f3e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -24,8 +24,8 @@ export default function App() {
             <p className="font-semibold text-gray-300">
               A 15 year old Software Engineer from Tirane, Albania, with 6 years
               of experience, specializing in full-stack web development, desktop
-              applications, TUI apps, and hacking. I also have a deep interest in
-              low-level programming.
+              applications, TUI apps, and hacking. I also have a deep interest
+              in low-level programming.
             </p>
 
             {/* Socials and skill */}
@@ -36,7 +36,7 @@ export default function App() {
                   <FontAwesomeIcon
                     icon={faGithub}
                     width={36}
-                    className="text-red"
+                    className="text-slate-300"
                   />
                 </a>
                 <a
@@ -46,14 +46,14 @@ export default function App() {
                   <FontAwesomeIcon
                     icon={faLinkedin}
                     width={36}
-                    className="text-red"
+                    className="text-slate-300"
                   />
                 </a>
                 <a href="https://www.instagram.com/kleo.dev/" target="blank_">
                   <FontAwesomeIcon
                     icon={faInstagram}
                     width={36}
-                    className="text-red"
+                    className="text-slate-300"
                   />
                 </a>
               </div>
@@ -70,16 +70,31 @@ export default function App() {
                 </div>
               </div>
             </div>
-            
-            <h1 className="text-red-400">Pinned Projects</h1>
+
+            <h1 className="text-slate-300">Pinned Projects</h1>
             <section className="">
               <PinnedRepos />
             </section>
             <section className="mt-8">
-              <GitHubCalendar username="kleo-dev" theme={{
-                light: ["#1a000f", "#5c001d", "#9f0030", "#d10045", "#f5304c"],
-                dark: ["#1a000f", "#5c001d", "#9f0030", "#d10045", "#f5304c"],
-              }} />
+              <GitHubCalendar
+                username="kleo-dev"
+                theme={{
+                  light: [
+                    "rgba(255, 255, 255, 0.1)",
+                    "rgba(255, 255, 255, 0.3)",
+                    "rgba(255, 255, 255, 0.5)",
+                    "rgba(255, 255, 255, 0.7)",
+                    "rgba(255, 255, 255, 1)",
+                  ],
+                  dark: [
+                    "rgba(255, 255, 255, 0.1)",
+                    "rgba(255, 255, 255, 0.3)",
+                    "rgba(255, 255, 255, 0.5)",
+                    "rgba(255, 255, 255, 0.7)",
+                    "rgba(255, 255, 255, 1)",
+                  ],
+                }}
+              />
             </section>
           </div>
         </div>
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index d2e6226..10aa453 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -13,8 +13,8 @@ export default function Navbar() {
           <Link
             href="/"
             className={
-              "hover:text-red transition-colors duration-300" +
-              (pathname === "/" ? " text-red" : "")
+              "hover:slate-200 transition-colors duration-300" +
+              (pathname === "/" ? " slate-200" : "")
             }
           >
             Home
@@ -22,8 +22,8 @@ export default function Navbar() {
           <Link
             href="/pricing"
             className={
-              "hover:text-red transition-colors duration-300" +
-              (pathname === "/pricing" ? " text-red" : "")
+              "hover:slate-200 transition-colors duration-300" +
+              (pathname === "/pricing" ? " slate-200" : "")
             }
           >
             Pricing
diff --git a/src/components/PinnedRepos.tsx b/src/components/PinnedRepos.tsx
index 229cea7..ae5e85e 100644
--- a/src/components/PinnedRepos.tsx
+++ b/src/components/PinnedRepos.tsx
@@ -1,4 +1,4 @@
-'use client';
+"use client";
 
 import { useEffect, useState } from "react";
 
@@ -31,7 +31,7 @@ export function Repo({
         rounded-xl
         h-full
         border
-        border-red
+        border-slate-300
         hover:shadow-md
         transition-shadow
         duration-300
@@ -41,7 +41,7 @@ export function Repo({
       <div className="w-full">
         <div className="rounded-xl border text-card-foreground shadow h-full bg-transparent border-none flex flex-col">
           <div className="flex flex-col space-y-1.5 p-6 flex-grow">
-            <h3 className="tracking-tight text-base sm:text-lg font-semibold text-red-400">
+            <h3 className="tracking-tight text-base sm:text-lg font-semibold text-slate-300">
               <a
                 href={href}
                 target="_blank"
@@ -106,28 +106,28 @@ export function Repo({
               </div>
               {lang && (
                 <div
-                className="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs bg-red-600/10 border-red-600"
-                data-sentry-component="Badge"
-                data-sentry-source-file="badge.tsx"
-              >
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="lucide lucide-code-xml h-3 w-3 mr-1"
+                  className="inline-flex items-center rounded-md border px-2.5 py-0.5 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground text-xs bg-slate-400/10 border-slate-400"
+                  data-sentry-component="Badge"
+                  data-sentry-source-file="badge.tsx"
                 >
-                  <path d="m18 16 4-4-4-4" />
-                  <path d="m6 8-4 4 4 4" />
-                  <path d="m14.5 4-5 16" />
-                </svg>
-                {lang}
-              </div>
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="24"
+                    height="24"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="lucide lucide-code-xml h-3 w-3 mr-1"
+                  >
+                    <path d="m18 16 4-4-4-4" />
+                    <path d="m6 8-4 4 4 4" />
+                    <path d="m14.5 4-5 16" />
+                  </svg>
+                  {lang}
+                </div>
               )}
             </div>
           </div>
@@ -142,15 +142,19 @@ export default function PinnedRepos() {
     const [pinned, setPinned] = useState<PinnedRepo[]>([]);
 
     useEffect(() => {
-      fetch("https://pinned.berrysauce.dev/get/kleo-dev").then(r => {
-        r.json().then(p => {
-          setPinned(p);
-        }).catch(e => {
-          console.error(e)
+      fetch("https://pinned.berrysauce.dev/get/kleo-dev")
+        .then((r) => {
+          r.json()
+            .then((p) => {
+              setPinned(p);
+            })
+            .catch((e) => {
+              console.error(e);
+            });
         })
-      }).catch(e => {
-        console.error(e)
-      })
+        .catch((e) => {
+          console.error(e);
+        });
     });
 
     return (
@@ -170,8 +174,6 @@ export default function PinnedRepos() {
       </div>
     );
   } catch (e: any) {
-    return (
-      <p>{e.toString()}</p>
-    );
+    return <p>{e.toString()}</p>;
   }
 }
diff --git a/src/components/Skill.tsx b/src/components/Skill.tsx
index b9158b1..84f8cfc 100644
--- a/src/components/Skill.tsx
+++ b/src/components/Skill.tsx
@@ -17,13 +17,13 @@ export default function Skill({
                    bg-black text-white text-sm px-2 py-1 rounded
                    opacity-0 group-hover:opacity-100 transition-opacity duration-300 whitespace-nowrap"
       >
-        Skilled in {" "} {skill}
+        Skilled in {skill}
       </span>
 
       <FontAwesomeIcon
         icon={icon}
         width={40}
-        className={`text-red ${classInsert} cursor-pointer`}
+        className={`text-slate-300 ${classInsert} cursor-pointer`}
       />
     </div>
   );