diff --git a/apps/website/src/components/home/logo-hover/logo-hover.css b/apps/website/src/components/home/logo-hover/logo-hover.css
index 8450be5..75c7c43 100644
--- a/apps/website/src/components/home/logo-hover/logo-hover.css
+++ b/apps/website/src/components/home/logo-hover/logo-hover.css
@@ -6,6 +6,11 @@
   line-height: 1;
 }
 
+.logo-hover {
+  position: relative;
+  width: fit-content;
+}
+
 .intro h1 span {
   font-size: var(--step-5);
   display: flex;
@@ -27,9 +32,10 @@
   color: hsl(var(--light));
   opacity: 0;
   scale: 0;
+  left: 50%;
+  top: 0;
   transition: scale 200ms ease, opacity 200ms ease;
   pointer-events: none;
-  top: 0;
   background: var(--off-black);
   border: 1px solid white;
   border-radius: 9999999px;
diff --git a/apps/website/src/components/home/logo-hover/logo-hover.tsx b/apps/website/src/components/home/logo-hover/logo-hover.tsx
index d45e8bd..c6d718a 100644
--- a/apps/website/src/components/home/logo-hover/logo-hover.tsx
+++ b/apps/website/src/components/home/logo-hover/logo-hover.tsx
@@ -50,7 +50,7 @@ export const LogoHover = component$(() => {
   });
 
   return (
-    <>
+    <div class="logo-hover">
       <h1>
         <span
           onMouseEnter$={() => handleMouseEnter(qwikLogoRef, qwikRect)}
@@ -85,6 +85,6 @@ export const LogoHover = component$(() => {
       </h1>
       <QwikIcon ref={qwikLogoRef} class="qwik-logo tooltip" />
       <AstroIcon ref={astroLogoRef} class="astro-logo tooltip" />
-    </>
+    </div>
   );
 });