diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
index fbdd8bd..bc4f4bd 100644
--- a/src/app/contact/page.tsx
+++ b/src/app/contact/page.tsx
@@ -5,7 +5,6 @@ const page = () => {
   return (
     <main className="w-100 m-0 h-screen">
       <Stars />
-      <div className="fixed top-1/2"></div>
     </main>
   );
 };
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8f221b1..63c9a5e 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,5 +1,7 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { Zilla_Slab_Highlight } from "next/font/google";
+import { Zen_Tokyo_Zoo } from "next/font/google";
 import "./globals.css";
 import Stars from "@/components/stars";
 import Footer from "@/components/footer";
@@ -8,6 +10,14 @@ import Loading from "./loading";
 import Link from "next/link";
 
 const inter = Inter({ subsets: ["latin"] });
+const zilla_slab_highlight = Zilla_Slab_Highlight({
+  weight: "700",
+  subsets: ["latin"],
+});
+const zen_tokyo_zoo = Zen_Tokyo_Zoo({
+  weight: "400",
+  subsets: ["latin"],
+});
 
 export const metadata: Metadata = {
   title: "Create Next App",
@@ -23,7 +33,14 @@ export default function RootLayout({
     <html lang="en">
       <body className={inter.className}>
         <Link href={"/"}>
-          <h1 className="fixed text-white top-0 z-50 m-5 text-5xl">J4roid</h1>
+          <div className="fixed text-white top-0 z-50 m-5 text-8xl flex flex-row gap-1">
+            <h1
+              className={`${zilla_slab_highlight.className} text-stachowiak-green-950`}
+            >
+              J4
+            </h1>
+            <h1 className={`${zen_tokyo_zoo.className} text-8xl`}>studio</h1>
+          </div>
         </Link>
         <Suspense fallback={<Loading />}>{children}</Suspense>
         <Footer />
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d1ec954..f10a94e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -12,11 +12,11 @@ export default function Home() {
     <main className="w-100 m-0 h-screen">
       <Stars />
 
-      <div className="fixed z-50 flex flex-col content-start text-left top-1/3 left-1/4 gap-5 mt-20 text-white">
+      <div className="fixed z-50 flex flex-col content-start text-left top-1/3 left-1/4 gap-5 mt-20 text-white text-7xl ">
         <Link href={"/about"}>
           <FramerTextAnimate
             styles={
-              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300"
             }
             duration={2}
             delay={0.5}
@@ -24,10 +24,10 @@ export default function Home() {
             {about}
           </FramerTextAnimate>
         </Link>
-        <Link className="text-5xl hover:text-shadow" href={"/models"}>
+        <Link className="" href={"/models"}>
           <FramerTextAnimate
             styles={
-              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300"
             }
             duration={2}
             delay={1}
@@ -35,10 +35,10 @@ export default function Home() {
             {models}
           </FramerTextAnimate>
         </Link>
-        <Link className="text-5xl hover:text-shadow" href={"/contact"}>
+        <Link className="" href={"/contact"}>
           <FramerTextAnimate
             styles={
-              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-shadow"
+              "whitespace-normal tracking-wide text-6xl leading-relaxed hover:text-stachowiak-green-950 transition ease-in-out duration-300"
             }
             duration={2}
             delay={1.5}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
index f818265..24f7923 100644
--- a/src/components/footer.tsx
+++ b/src/components/footer.tsx
@@ -7,21 +7,21 @@ export default function Footer() {
   return (
     <footer className="fixed z-50 bottom-0 flex row gap-3 m-5">
       <Link
-        className="border-4 border-white rounded-xl p-2 text-white hover:text-black hover:bg-white hover:border-black"
+        className="border-4 border-white rounded-xl p-2 text-white hover:text-black hover:bg-stachowiak-green-950 hover:border-black transition ease-in-out duration-300"
         target="_blank"
         href={"https://www.myminifactory.com/users/j4roid"}
       >
         <MyMiniFactory className="" />
       </Link>
       <Link
-        className="border-4 border-white rounded-xl p-2 text-white hover:text-black hover:bg-white hover:border-black"
+        className="border-4 border-white rounded-xl p-2 text-white hover:text-black hover:bg-stachowiak-green-950 hover:border-black transition ease-in-out duration-300"
         target="_blank"
         href={"https://cults3d.com/en/users/j4roid/3d-models"}
       >
         <Discord className="" />
       </Link>
       <Link
-        className="border-4 border-white rounded-xl p-2 text-white hover:text-black hover:bg-white hover:border-black"
+        className="border-4 border-white rounded-xl p-2 text-white hover:text-black hover:bg-stachowiak-green-950 hover:border-black transition ease-in-out duration-300"
         target="_blank"
         href={"https://www.patreon.com/j4roid"}
       >
diff --git a/src/components/framer/framerTextAnimate.tsx b/src/components/framer/framerTextAnimate.tsx
index bab058f..cb80ef3 100644
--- a/src/components/framer/framerTextAnimate.tsx
+++ b/src/components/framer/framerTextAnimate.tsx
@@ -1,10 +1,10 @@
 "use client";
 
 import { animate, motion, useMotionValue, useTransform } from "framer-motion";
-import { Special_Elite } from "next/font/google";
-import React, { useEffect } from "react";
+import { Courier_Prime } from "next/font/google";
+import React, { useEffect, useState } from "react";
 
-const special_elite = Special_Elite({ weight: "400", subsets: ["latin"] });
+const special_elite = Courier_Prime({ weight: "400", subsets: ["latin"] });
 
 type props = {
   children: string;
@@ -17,16 +17,29 @@ const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {
   const count = useMotionValue(0);
   const baseText = children as string;
 
+  const [durationInternal, setDurationInternal] = useState<number>(duration);
+
   const rounded = useTransform(count, (latest) => Math.round(latest));
   const displayText = useTransform(rounded, (latest) =>
     baseText.slice(0, latest)
   );
 
+  //   Skip the animation on mouse press
+  useEffect(() => {
+    const handleClick = (event: MouseEvent) => {
+      setDurationInternal(0.5);
+    };
+    document.addEventListener("click", handleClick);
+    return () => {
+      document.removeEventListener("click", handleClick);
+    };
+  }, []);
+
   useEffect(() => {
     // Delay the animation start
     const delayTimeout = setTimeout(() => {
       const controls = animate(count, baseText.length, {
-        duration: duration,
+        duration: durationInternal,
         ease: "easeInOut",
       });
       return () => controls.stop();
@@ -34,11 +47,19 @@ const FramerTextAnimate = ({ children, styles, duration, delay }: props) => {
 
     // Clear the timeout on unmount to prevent memory leaks
     return () => clearTimeout(delayTimeout);
-  }, []);
+  }, [durationInternal]);
+
+  const handleUserInput = () => {
+    setDurationInternal(0);
+    console.log("test");
+  };
 
   return (
     <>
-      <motion.span className={`${special_elite.className} ${styles}`}>
+      <motion.span
+        onClick={handleUserInput}
+        className={`${special_elite.className} ${styles}`}
+      >
         {displayText}
       </motion.span>
     </>
diff --git a/src/components/stars.tsx b/src/components/stars.tsx
index 152aed4..02deafc 100644
--- a/src/components/stars.tsx
+++ b/src/components/stars.tsx
@@ -35,7 +35,7 @@ export default function Stars(props: any) {
         {meshArray.map((el) => {
           return (
             <mesh position={[el.x, el.y, el.z]}>
-              <sphereGeometry args={[0.2 * Math.random()]} />
+              <sphereGeometry args={[0.15 * Math.random()]} />
               <meshPhysicalMaterial color="white" />
             </mesh>
           );
diff --git a/tailwind.config.js b/tailwind.config.js
index 5e402f1..8f89923 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -14,7 +14,22 @@ module.exports = {
     extend: {
       textShadow: {
         DEFAULT:
-          "0 0 10px #fff, 0 0 20px #fff, 0 0 30px #23d400, 0 0 40px #00a30e, 0 0 50px #0a7c00, 0 0 60px #0b5e00, 0 0 70px #00440b",
+          "0 0 10px #fff, 0 0 20px #fff, 0 0 30px #00440b, 0 0 40px #00440b, 0 0 50px #0a7c00, 0 0 60px #00440b, 0 0 70px #00440b",
+      },
+      colors: {
+        "stachowiak-green": {
+          50: "#eeffef",
+          100: "#d8ffdc",
+          200: "#b4febb",
+          300: "#79fc87",
+          400: "#38f04c",
+          500: "#0ed926",
+          600: "#05b419",
+          700: "#088d18",
+          800: "#0c6f19",
+          900: "#0c5b17",
+          950: "#00440b", //stachowiak-green
+        },
       },
     },
   },
