diff --git a/apps/web/app/(landing)/Hero.tsx b/apps/web/app/(landing)/Hero.tsx
index 547c2a4c..9c25ac5e 100644
--- a/apps/web/app/(landing)/Hero.tsx
+++ b/apps/web/app/(landing)/Hero.tsx
@@ -23,7 +23,7 @@ const slap = {
 function Hero() {
   return (
     <>
-      <section className="relative mt-24 flex max-w-3xl flex-col items-center justify-center gap-5 md:mt-32">
+      <section className="flex relative flex-col gap-5 justify-center items-center mt-24 max-w-xl md:mt-32 md:max-w-2xl lg:max-w-3xl">
         <TwitterBorder />
         <motion.h1
           {...{
@@ -33,7 +33,7 @@ function Hero() {
           className="text-center  mx-auto bg-[linear-gradient(180deg,_#FFF_0%,_rgba(255,_255,_255,_0.00)_202.08%)]  bg-clip-text text-4xl tracking-tighter   text-transparent md:text-7xl"
         >
           Build your own second brain{" "}
-          <span className="bg-gradient-to-r from-zinc-300 to-blue-200 bg-clip-text text-transparent">
+          <span className="text-transparent bg-clip-text bg-gradient-to-r to-blue-200 from-zinc-300">
             with supermemory and bring it at scale
           </span>
         </motion.h1>
@@ -42,7 +42,7 @@ function Hero() {
             ...slap,
             transition: { ...slap.transition, delay: 0.3 },
           }}
-          className="text-soft-foreground-text text-lg  text-center"
+          className="text-lg text-center text-soft-foreground-text"
         >
           Bring saved information from all over the internet into one place
           where you can connect it, and ask AI about it
@@ -52,25 +52,23 @@ function Hero() {
 
       <AnimatedLogoCloud />
       <div className="relative z-20">
-
-      <motion.img
-        {...{
-          ...slap,
-          transition: { ...slap.transition, delay: 0.35 },
-        }}
-        src="/landing-ui.svg"
-        alt="Landing page background"
-        width={1512}
-        height={1405}
-        draggable="false"
-        className="z-40 md:mt-[-40px]  h-full w-[80%] md:w-full select-none "
-      />
-      <div
-        className="absolute -z-10 left-0 top-[10%] h-32 w-[90%] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-100  blur-[337.4px]"
-        style={{ transform: "rotate(-30deg)" }}
-      />
+        <motion.img
+          {...{
+            ...slap,
+            transition: { ...slap.transition, delay: 0.35 },
+          }}
+          src="/landing-ui.svg"
+          alt="Landing page background"
+          width={1512}
+          height={1405}
+          draggable="false"
+          className="z-40 md:mt-[-40px] hidden sm:block h-full w-[80%] mx-auto md:w-full select-none px-5"
+        />
+        <div
+          className="absolute -z-10 left-0 top-[10%] h-32 w-[90%] overflow-x-hidden bg-[rgb(54,157,253)] bg-opacity-100  blur-[337.4px]"
+          style={{ transform: "rotate(-30deg)" }}
+        />
       </div>
-
     </>
   );
 }