diff --git a/src/app/(tools)/layout.tsx b/src/app/(tools)/layout.tsx
index c70d623..2f73887 100644
--- a/src/app/(tools)/layout.tsx
+++ b/src/app/(tools)/layout.tsx
@@ -33,9 +33,11 @@ export default function ToolsLayout({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex min-h-screen flex-col justify-between p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
+    <div className="flex min-h-screen flex-col justify-between overflow-hidden p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
       <BackButton />
-      <main className="flex flex-grow flex-col items-center justify-center">
+      <main className="flex flex-grow flex-col items-center justify-center overflow-hidden">
+        <div className="absolute inset-0 left-[-10%] top-[50%] z-50 h-[300px] w-[300px] animate-scalePulse rounded-full bg-gradient-to-br from-purple-800 to-purple-600 opacity-50 blur-[250px] md:h-[500px] md:w-[500px] lg:h-[700px] lg:w-[700px]"></div>
+
         {children}
       </main>
       <footer className="mt-8 text-center text-sm text-gray-500">
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 337be0e..3b890f4 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -33,7 +33,7 @@ export default function RootLayout({
         <PlausibleProvider domain="quickpic.t3.gg" />
       </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} dark antialiased`}
+        className={`${geistSans.variable} ${geistMono.variable} dark overflow-hidden antialiased`}
       >
         {children}
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5d093b4..b0cb2f9 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -4,7 +4,8 @@ export default function Home() {
   return (
     <div className="flex min-h-screen flex-col justify-between p-8 font-[family-name:var(--font-geist-sans)] sm:p-20">
       <main className="flex flex-grow flex-col items-center justify-center">
-        <div>
+        <div className="absolute z-10 h-64 w-64 animate-shift rounded-full border-4 border-purple-600 bg-transparent shadow-2xl sm:h-72 sm:w-72 lg:h-96 lg:w-96" />
+        <div className="z-20">
           Hi. I&apos;m{" "}
           <a
             href="https://twitter.com/t3dotgg"
@@ -16,7 +17,7 @@ export default function Home() {
           </a>
           . I built these tools because I was annoyed they did not exist.
         </div>
-        <div className="mt-4"></div>
+        <div className="z-20 mt-4"></div>
         <Link href="/svg-to-png" className="text-blue-500 hover:underline">
           SVG to PNG converter
         </Link>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 021c393..e29ad1b 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -8,6 +8,36 @@ const config: Config = {
   ],
   theme: {
     extend: {
+      animation: {
+        shift: "shift 4s ease-in-out infinite",
+        scalePulse: "scalePulse 10s ease-in-out infinite",
+      },
+      keyframes: {
+        scalePulse: {
+          "0%": {
+            transform: "scale(1)",
+          },
+          "50%": {
+            transform: "scale(1.3)",
+          },
+          "100%": {
+            transform: "scale(1)",
+          },
+        },
+        shift: {
+          "0%": {
+            transform: "rotate(0deg)",
+            borderRadius: "0%",
+          },
+          "50%": {
+            borderRadius: "50%",
+          },
+          "100%": {
+            transform: "rotate(360deg)",
+            borderRadius: "0%",
+          },
+        },
+      },
       colors: {
         background: "var(--background)",
         foreground: "var(--foreground)",
