diff --git a/src/components/BackgroundChess.astro b/src/components/BackgroundChess.astro
new file mode 100644
index 0000000..e70d22c
--- /dev/null
+++ b/src/components/BackgroundChess.astro
@@ -0,0 +1,35 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cn } from "../lib/utils";
+
+type Props = HTMLAttributes<"div">;
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<div
+    class={cn(
+        "pointer-events-none absolute h-full w-full overflow-hidden opacity-50 [perspective:200px]",
+        className
+    )}
+    {...rest}
+>
+    <div class="absolute inset-0 [transform:rotateX(35deg)]">
+        <div
+            class={cn(
+                "animate-grid",
+
+                "[background-repeat:repeat] [background-size:60px_60px] [height:300vh] [inset:0%_0px] [margin-left:-50%] [transform-origin:100%_0_0] [width:600vw]",
+
+                "[background-image:linear-gradient(to_right,rgba(255,255,255,0.2)_1px,transparent_0),linear-gradient(to_bottom,rgba(255,255,255,0.2)_1px,transparent_0)]"
+            )}
+        >
+        </div>
+    </div>
+
+    {/* Background Gradient */}
+    <div
+        class="absolute inset-0 bg-gradient-to-t from-white to-transparent to-90% dark:from-black"
+    >
+    </div>
+</div>
diff --git a/src/components/BackgroundChess.tsx b/src/components/BackgroundChess.tsx
deleted file mode 100644
index 23a3108..0000000
--- a/src/components/BackgroundChess.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-"use client";
-import React from "react";
-import { motion } from "framer-motion";
-import { cn } from "../lib/utils";
-
-export const BackgroundChessCore = ({ className, ...rest }: { className?: string }) => {
-  const rows = new Array(150).fill(1);
-  const cols = new Array(100).fill(1);
-  let colors = [
-    "--gray-100",
-		"--gray-200",
-		"--gray-300",
-		"--gray-400",
-		"--gray-500",
-		"--gray-600",
-		"--gray-700",
-		"--gray-800",
-		"--gray-900",
-  ];
-  const getRandomColor = () => {
-    return colors[Math.floor(Math.random() * colors.length)];
-  };
-
-  return (
-    <div
-      style={{
-        transform: `translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)`,
-      }}
-      className={cn(
-        "absolute left-1/4 p-4 -top-1/4 flex  -translate-x-1/2 -translate-y-1/2 w-full h-full z-0 ",
-        className
-      )}
-      {...rest}
-    >
-      {rows.map((_, i) => (
-        <motion.div
-          key={`row` + i}
-          className="w-16 h-8  border-l  border-slate-700 relative"
-        >
-          {cols.map((_, j) => (
-            <motion.div
-              whileHover={{
-                backgroundColor: `var(${getRandomColor()})`,
-                transition: { duration: 0 },
-              }}
-              animate={{
-                transition: { duration: 2 },
-              }}
-              key={`col` + j}
-              className="w-16 h-8  border-r border-t border-slate-700 relative"
-            >
-              {j % 2 === 0 && i % 2 === 0 ? (
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth="1.5"
-                  stroke="currentColor"
-                  className="absolute h-6 w-10 -top-[14px] -left-[22px] text-slate-700 stroke-[1px] pointer-events-none"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M12 6v12m6-6H6"
-                  />
-                </svg>
-              ) : null}
-            </motion.div>
-          ))}
-        </motion.div>
-      ))}
-    </div>
-  );
-};
-
-export const BackgroundChess = React.memo(BackgroundChessCore);
diff --git a/src/components/ExpandableHoloJobCard.tsx b/src/components/ExpandableHoloJobCard.tsx
index 7ce7b4f..2c02640 100644
--- a/src/components/ExpandableHoloJobCard.tsx
+++ b/src/components/ExpandableHoloJobCard.tsx
@@ -91,9 +91,15 @@ export function ExpandableHoloJobCard({
                     >
                       {active.title}
                     </motion.h3>
+										<motion.p
+											layoutId={`role-${active.id}-${id}`}
+											className="text-neutral-600 dark:text-neutral-400 text-base"
+										>
+											{active.role}
+										</motion.p>
                     <motion.p
                       layoutId={`timeperiod-${active.id}-${id}`}
-                      className="text-neutral-600 dark:text-neutral-400 text-base"
+                      className="text-neutral-600 dark:text-neutral-400 text-base text-xs"
                     >
                       {active.timePeriod}
                     </motion.p>
diff --git a/src/components/FlipWords.tsx b/src/components/FlipWords.tsx
index c2c773f..3a8e25c 100644
--- a/src/components/FlipWords.tsx
+++ b/src/components/FlipWords.tsx
@@ -28,9 +28,6 @@ export const FlipWords = ({
       }, duration);
   }, [isAnimating, duration, startAnimation]);
 
-	console.log(currentWord.split(""), currentWord.split("").map((letter, index) => (
-		`${letter}`
-	)))
   return (
     <AnimatePresence
       onExitComplete={() => {
diff --git a/src/components/Globe.tsx b/src/components/Globe.tsx
index 5ef365e..b5bb2f6 100644
--- a/src/components/Globe.tsx
+++ b/src/components/Globe.tsx
@@ -73,6 +73,7 @@ export function Globe() {
 		<div className="w-full max-w-full flex justify-center">
 			<canvas
 				ref={canvasRef}
+				className="bg-transparent"
 				style={{
 					width: size,
 					height: size,
diff --git a/src/components/HoloCard.tsx b/src/components/HoloCard.tsx
index ec24fec..28a13f7 100644
--- a/src/components/HoloCard.tsx
+++ b/src/components/HoloCard.tsx
@@ -56,7 +56,6 @@ export const HoloCard = ({
 
   const updateStyles = () => {
     if (refElement.current) {
-      console.log(state.current);
       const { background, rotate, holo } = state.current;
       refElement.current?.style.setProperty("--m-x", `${holo.x}%`);
       refElement.current?.style.setProperty("--m-y", `${holo.y}%`);
diff --git a/src/components/Particles.tsx b/src/components/Particles.tsx
index 3395e74..057412f 100644
--- a/src/components/Particles.tsx
+++ b/src/components/Particles.tsx
@@ -41,7 +41,6 @@ export const Particles = (props: ParticlesProps) => {
 
   const particlesLoaded = async (container?: Container) => {
     if (container) {
-      console.log(container);
       controls.start({
         opacity: 1,
         transition: {
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 99ca4a2..04b9ceb 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -8,7 +8,7 @@ import Section from "../components/Section.astro";
 import ConicHeader from "../components/ConicHeader.astro";
 import { Particles } from "../components/Particles";
 import Separator from "../components/Separator.astro";
-import { BackgroundChess } from "../components/BackgroundChess.tsx";
+import { BackgroundChess } from "../components/BackgroundChess.astro";
 import { FlipWords } from "../components/FlipWords";
 import Anchor from "../components/Anchor.astro";
 import { mailUrl } from "../constants/site";
@@ -23,6 +23,41 @@ import Contact from "../sections/Contact.astro";
     <Hero />
     <About />
     <Jobs />
-
+    <div class="relative w-full flex flex-col">
+        <ConicHeader
+            color="rgba(97,106,115,.12)"
+            borderColor="rgba(247,247,247,.22)"
+        />
+        <div
+            class="w-full max-w-[40rem] h-40 relative self-center [mask-image:radial-gradient(350px_200px_at_top,white_20%,transparent)]"
+        >
+            <Particles
+                client:visible
+                background="transparent"
+                minSize={0.4}
+                maxSize={1}
+                particleDensity={100}
+                className="w-full h-full"
+                particleColor="#FFFFFF"
+            />
+        </div>
+        <Section
+            id="projects"
+            class="relative py-24 min-h-[90vh] flex flex-col"
+        >
+            <div class="grid md:grid-cols-2 gap-12 md:px-12">
+                <div class="flex gap-4 col-start-2">
+                    <Separator
+                        class="inline flex-1 w-fit translate-y-1 border-primary"
+                    />
+                    <h2
+                        class="inline text-2xl font-bold tracking-tight sm:text-4xl md:text-5xl"
+                    >
+                        Projects
+                    </h2>
+                </div>
+            </div>
+        </Section>
+    </div>
     <Contact />
 </Layout>
diff --git a/src/sections/Contact.astro b/src/sections/Contact.astro
index 7a4b591..5e9ac72 100644
--- a/src/sections/Contact.astro
+++ b/src/sections/Contact.astro
@@ -1,12 +1,14 @@
 ---
 import Anchor from "../components/Anchor.astro";
-import { BackgroundChess } from "../components/BackgroundChess";
+import BackgroundChess from "../components/BackgroundChess.astro";
 import { FlipWords } from "../components/FlipWords";
 import Section from "../components/Section.astro";
 import { mailUrl } from "../constants/site";
 ---
 
 <div class="relative w-full flex flex-col h-[80vh] overflow-hidden">
+    <BackgroundChess />
+
     <Section
         id="jobs"
         class="py-24 h-full flex flex-col justify-center items-center"
@@ -15,9 +17,9 @@ import { mailUrl } from "../constants/site";
             class="absolute inset-0 w-full h-full bg-background z-20 [mask-image:radial-gradient(transparent,white)] pointer-events-none"
         >
         </div>
-        <BackgroundChess className="" client:load />
+
         <h2
-            class="relative text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl"
+            class="relative text-4xl font-bold tracking-tight sm:text-5xl md:text-6xl text-center"
         >
             <span aria-hidden="false" class="visually-hidden"
                 >Let's build the future together</span
@@ -40,7 +42,7 @@ import { mailUrl } from "../constants/site";
             Get in touch
         </Anchor>
     </Section>
-    <p class="relative mt-auto mb-2 text-center text-foreground/80">
+    <p class="relative mt-auto mb-2 text-center text-foreground/80 text-xs">
         © {new Date().getFullYear()} Rubén Buzón.
     </p>
 </div>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
index 7eb97a5..f872288 100644
--- a/tailwind.config.mjs
+++ b/tailwind.config.mjs
@@ -89,6 +89,10 @@ export default {
             transform: "rotate(215deg) translateX(-100vh)",
             opacity: 0,
           },
+        },
+				grid: {
+          "0%": { transform: "translateY(-50%)" },
+          "100%": { transform: "translateY(0)" },
         },
       },
       animation: {
@@ -96,6 +100,7 @@ export default {
         "accordion-up": "accordion-up 0.2s ease-out",
 				spotlight: "spotlight 2s ease .75s 1 forwards",
 				meteor: "meteor 5s linear infinite",
+				grid: "grid 15s linear infinite",
       },
     },
   },