diff --git a/src/components/sections/hero/hero.tsx b/src/components/sections/hero/hero.tsx
index 11e8143..1f95fd7 100644
--- a/src/components/sections/hero/hero.tsx
+++ b/src/components/sections/hero/hero.tsx
@@ -5,8 +5,15 @@ import ImageOrVideo from "@/components/ui/ImageOrVideo";
 export default function Hero() {
   return (
     <section id="hero" aria-label="Hero section" className="py-20">
-      <div className="flex flex-col md:flex-row items-center gap-8 mx-auto w-content-width">
-        <div className="flex flex-col items-start gap-6 text-left w-full md:w-1/2">
+      <div className="grid grid-cols-1 lg:grid-cols-2 items-center gap-12 mx-auto w-content-width">
+        <div className="flex flex-col items-start gap-6 text-left">
+          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full backdrop-blur-md bg-black/10 border border-black/20 text-sm">
+            <span className="relative flex h-2 w-2">
+              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-green-400 opacity-75" />
+              <span className="relative inline-flex rounded-full h-2 w-2 bg-green-500" />
+            </span>
+            Active now
+          </div>
           <TextAnimation
             text="Your Vision, Our Innovation"
             variant="fade"
@@ -26,7 +33,7 @@ export default function Hero() {
             <Button text="Learn More" href="#features" variant="secondary" animationDelay={0.1} />
           </div>
         </div>
-        <div className="w-full md:w-1/2 h-80 md:h-[500px] card rounded overflow-hidden">
+        <div className="w-full h-80 lg:h-[500px] card rounded overflow-hidden">
           <ImageOrVideo imageSrc="https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80" />
         </div>
       </div>