diff --git a/src/app/globals.css b/src/app/globals.css
index 71e4021..0587713 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -11,7 +11,8 @@
 :root {
   --background: #020712;
   --foreground: #fef3c7;
-  --font-cinzel: var(--font-cinzel), serif;
+  --font-exo2: var(--font-exo2), sans-serif;
+  --font-lora: var(--font-lora), serif;
   --font-outfit: var(--font-outfit), sans-serif;
   --font-chopsic: 'Chopsic', sans-serif;
 }
@@ -19,7 +20,8 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-cinzel: var(--font-cinzel);
+  --font-exo2: var(--font-exo2);
+  --font-lora: var(--font-lora);
   --font-outfit: var(--font-outfit);
   --font-chopsic: var(--font-chopsic);
 }
@@ -27,7 +29,7 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: var(--font-outfit);
+  font-family: var(--font-lora);
 }
 
 .ink-mask {
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b83449d..862783c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,23 +1,24 @@
 import type { Metadata } from "next";
-import { Cinzel, Outfit, Playfair_Display, Inter } from "next/font/google";
+import { Exo_2, Lora, Outfit, Inter } from "next/font/google";
 import AppShell from "@/components/layout/AppShell";
 import "./globals.css";
 
-const cinzel = Cinzel({
-  variable: "--font-cinzel",
+const exo2 = Exo_2({
+  variable: "--font-exo2",
   subsets: ["latin"],
   weight: ["400", "500", "600", "700", "800"],
 });
 
-const outfit = Outfit({
-  variable: "--font-outfit",
+const lora = Lora({
+  variable: "--font-lora",
   subsets: ["latin"],
-  weight: ["300", "400", "500", "600", "700"],
+  weight: ["400", "500", "600", "700"],
 });
 
-const playfair = Playfair_Display({
-  variable: "--font-playfair",
+const outfit = Outfit({
+  variable: "--font-outfit",
   subsets: ["latin"],
+  weight: ["300", "400", "500", "600", "700"],
 });
 
 const inter = Inter({
@@ -38,9 +39,9 @@ export default function RootLayout({
   return (
     <html
       lang="en"
-      className={`${cinzel.variable} ${outfit.variable} ${playfair.variable} ${inter.variable} h-full antialiased`}
+      className={`${exo2.variable} ${lora.variable} ${outfit.variable} ${inter.variable} h-full antialiased`}
     >
-      <body className={`${outfit.className} min-h-full flex flex-col bg-[#020712] text-white`}>
+      <body className={`${lora.className} min-h-full flex flex-col bg-[#020712] text-white`}>
         <AppShell>{children}</AppShell>
       </body>
     </html>
diff --git a/src/components/events/EventCarousel.tsx b/src/components/events/EventCarousel.tsx
index 39ccfa6..854e0db 100644
--- a/src/components/events/EventCarousel.tsx
+++ b/src/components/events/EventCarousel.tsx
@@ -30,7 +30,7 @@ const EVENTS = [
   },
   {
     id: "hackinnovision",
-    title: "HACKINNOVISION",
+    title: "HACK INNOVISION",
     subtitle: "FLAGSHIP EVENT",
     description:
       "A 24-hour hackathon where brilliant minds converge to build the future. Code, collaborate, and compete for glory. Push the boundaries of innovation — one commit at a time.",
@@ -115,7 +115,7 @@ export default function EventCarousel({ isActive = true }: { isActive?: boolean
       </div>
 
       {/* ===== MAIN CONTENT ===== */}
-      <main className="flex-grow flex flex-col items-center justify-start pt-[8vh] md:pt-[10vh] relative z-20 px-4 pointer-events-none">
+      <main className="flex-grow flex flex-col items-center justify-start pt-[14vh] md:pt-[18vh] relative z-20 px-4 pointer-events-none">
         
         <AnimatePresence mode="wait" custom={direction}>
           <motion.div
@@ -129,12 +129,12 @@ export default function EventCarousel({ isActive = true }: { isActive?: boolean
             className="flex flex-col items-center text-center max-w-3xl pointer-events-auto"
           >
             {/* Subtitle */}
-            <h2 className="text-sm md:text-lg uppercase tracking-[0.4em] text-gray-400 mb-3">
+            <h2 className="text-[10px] md:text-sm uppercase tracking-[0.5em] text-cyan-300 mb-4 font-medium drop-shadow-[0_0_18px_rgba(34,211,238,0.7)]" style={{ fontFamily: "var(--font-exo2), sans-serif" }}>
               {currentEvent.subtitle}
             </h2>
 
             {/* Title */}
-            <h1 className="text-4xl md:text-7xl lg:text-[7.5rem] whitespace-nowrap leading-none tracking-[0.1em] mb-5 drop-shadow-[0_10px_25px_rgba(0,0,0,0.8)] font-bold" style={{ fontFamily: "var(--font-playfair), Georgia, serif" }}>
+            <h1 className="text-3xl md:text-6xl lg:text-[6.8rem] whitespace-nowrap leading-[0.9] tracking-[0.08em] mb-5 drop-shadow-[0_12px_30px_rgba(0,0,0,0.85)] font-semibold" style={{ fontFamily: "var(--font-exo2), sans-serif" }}>
               {currentEvent.title}
             </h1>
 
@@ -142,12 +142,12 @@ export default function EventCarousel({ isActive = true }: { isActive?: boolean
             <div className="w-12 h-[2px] bg-cyan-400 mb-6" />
 
             {/* Description */}
-            <p className="text-sm md:text-base leading-relaxed text-white font-medium max-w-xl mx-auto drop-shadow-[0_4px_10px_rgba(0,0,0,0.8)] mb-8">
+            <p className="text-sm md:text-base leading-relaxed text-slate-100/90 max-w-xl mx-auto drop-shadow-[0_4px_10px_rgba(0,0,0,0.8)] mb-8" style={{ fontFamily: "var(--font-lora), serif" }}>
               {currentEvent.description}
             </p>
             
             {/* CTA Button */}
-            <button className="border border-gray-400 text-white px-10 py-3 rounded-full font-bold text-sm tracking-[0.2em] hover:bg-white hover:text-black transition-all duration-300 backdrop-blur-sm">
+            <button className="border border-cyan-400/60 text-white px-10 py-3 rounded-full font-bold text-[10px] md:text-xs tracking-[0.28em] hover:bg-cyan-300 hover:text-slate-950 transition-all duration-300 backdrop-blur-sm shadow-[0_0_20px_rgba(34,211,238,0.18)]" style={{ fontFamily: "var(--font-exo2), sans-serif" }}>
               GET STARTED
             </button>
           </motion.div>
diff --git a/src/components/events/EventGlobe.tsx b/src/components/events/EventGlobe.tsx
index 3d8820e..9d1d75a 100644
--- a/src/components/events/EventGlobe.tsx
+++ b/src/components/events/EventGlobe.tsx
@@ -23,14 +23,10 @@ function Planet({ texture, index, currentIndex, total }: PlanetProps) {
   useFrame(() => {
     if (!meshRef.current) return;
     
-    // For 3 items, angle diff is either 0, 120 (2.09 rad), or 240 (-2.09 rad)
     const angle = diff * (2 * Math.PI / total);
-    
-    // Circle radius is 16. Center (diff=0) is pushed forward to z=0, sides are pushed back.
     const radius = 16;
-    
     const targetX = Math.sin(angle) * radius;
-    const targetZ = Math.cos(angle) * radius - radius; // so angle=0 is z=0, angle=120 is z=-24
+    const targetZ = Math.cos(angle) * radius - radius;
     let targetY = -1;
     let targetScale = 0.6;
     
@@ -39,16 +35,13 @@ function Planet({ texture, index, currentIndex, total }: PlanetProps) {
       targetScale = 1.2;
     }
 
-    // Smoothly interpolate position
     meshRef.current.position.x = MathUtils.lerp(meshRef.current.position.x, targetX, 0.04);
     meshRef.current.position.y = MathUtils.lerp(meshRef.current.position.y, targetY, 0.04);
     meshRef.current.position.z = MathUtils.lerp(meshRef.current.position.z, targetZ, 0.04);
     
-    // Smoothly interpolate scale
     const scale = MathUtils.lerp(meshRef.current.scale.x, targetScale, 0.04);
     meshRef.current.scale.set(scale, scale, scale);
 
-    // Constant slow rotation
     meshRef.current.rotation.y += 0.001;
   });
 
@@ -78,7 +71,6 @@ function Scene({ textures, currentIndex }: SceneProps) {
       <directionalLight position={[10, 5, 5]} intensity={3.0} />
       <directionalLight position={[-10, -5, -5]} intensity={0.8} color="#6688ff" />
       
-      {/* Immersive Starry Background */}
       <Stars radius={100} depth={50} count={5000} factor={4} saturation={0} fade speed={1} />
 
       {loadedTextures.map((texture, index) => (