diff --git a/components/ui/Hero/Hero.tsx b/components/ui/Hero/Hero.tsx
index ad600ec83..aeb301e9a 100644
--- a/components/ui/Hero/Hero.tsx
+++ b/components/ui/Hero/Hero.tsx
@@ -9,20 +9,24 @@ interface Props {
 
 const Hero: FC<Props> = ({ headline, description }) => {
   return (
-    <Container>
-      <div className="mx-auto grid grid-cols-2 bg-black py-32">
-        <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
-          {headline}
-        </h2>
-        <div className="flex flex-col justify-between">
-          <p className="mt-5 text-xl leading-7 text-accent-2">{description}</p>
-          <a className="block text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer">
-            <span>Read it here</span>
-            <RightArrow width="20" heigh="20" className="ml-1" />
-          </a>
+    <div className="bg-black">
+      <Container>
+        <div className="mx-auto grid grid-cols-1 py-32 md:grid-cols-2 gap-4">
+          <h2 className="text-4xl leading-10 font-extrabold text-white sm:text-5xl sm:leading-none sm:tracking-tight lg:text-6xl">
+            {headline}
+          </h2>
+          <div className="flex flex-col justify-between">
+            <p className="mt-5 text-xl leading-7 text-accent-2 text-white">
+              {description}
+            </p>
+            <a className="text-white pt-3 font-bold hover:underline flex flex-row cursor-pointer w-max-content">
+              <span>Read it here</span>
+              <RightArrow width="20" heigh="20" className="ml-1" />
+            </a>
+          </div>
         </div>
-      </div>
-    </Container>
+      </Container>
+    </div>
   )
 }