diff --git a/packages/claw-client/src/components/home/HeroBanner.tsx b/packages/claw-client/src/components/home/HeroBanner.tsx
new file mode 100644
index 0000000..e975f38
--- /dev/null
+++ b/packages/claw-client/src/components/home/HeroBanner.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+/**
+ * Hero banner for OpenClaw OS - appears on the home page.
+ * On mobile, displays "Meet OpenClaw OS" as the main message.
+ */
+export function HeroBanner() {
+  return (
+    <a
+      href="https://www.openui.com/openclaw-os"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="mb-m block w-full overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10 border border-border-default/50 transition-all hover:shadow-lg dark:border-border-default/20"
+    >
+      <div className="px-ml py-m">
+        <h2 className="font-heading text-lg font-bold text-text-neutral-primary">
+          Meet OpenClaw OS
+        </h2>
+        <p className="mt-xs font-body text-sm text-text-neutral-secondary">
+          The generative UI workspace for OpenClaw
+        </p>
+      </div>
+    </a>
+  );
+}
+
+/**
+ * Mobile-optimized hero banner - shows only the main message
+ */
+export function MobileHeroBanner() {
+  return (
+    <a
+      href="https://www.openui.com/openclaw-os"
+      target="_blank"
+      rel="noopener noreferrer"
+      className="mb-m block w-full overflow-hidden rounded-2xl bg-gradient-to-br from-blue-500/10 via-purple-500/10 to-pink-500/10 border border-border-default/50 transition-all active:scale-[0.98] dark:border-border-default/20"
+    >
+      <div className="px-ml py-m text-center">
+        <h2 className="font-heading text-lg font-bold text-text-neutral-primary">
+          Meet OpenClaw OS
+        </h2>
+      </div>
+    </a>
+  );
+}
diff --git a/packages/claw-client/src/components/home/HomeView.tsx b/packages/claw-client/src/components/home/HomeView.tsx
index 80cbfd3..599ff9b 100644
--- a/packages/claw-client/src/components/home/HomeView.tsx
+++ b/packages/claw-client/src/components/home/HomeView.tsx
@@ -29,6 +29,7 @@ import { relTime } from "@/lib/time";
 import type { ClawThread } from "@/types/claw-thread";
 
 import { Greeting } from "./Greeting";
+import { HeroBanner } from "./HeroBanner";
 import { HomeRow } from "./HomeRow";
 import { SectionHeader } from "./SectionHeader";
 import { NotifPanel } from "./notif/NotifPanel";
@@ -208,6 +209,7 @@ export function HomeView({
         <div className="flex-1 overflow-y-auto">
           <div className="mx-auto max-w-[1080px] px-3xl pb-l pt-3xl">
             <Greeting name={userName} />
+            <HeroBanner />
 
             {/* Top agents */}
             <section className="mb-2xl">
diff --git a/packages/claw-client/src/components/mobile/MobileHomeView.tsx b/packages/claw-client/src/components/mobile/MobileHomeView.tsx
index f0d91db..2d59527 100644
--- a/packages/claw-client/src/components/mobile/MobileHomeView.tsx
+++ b/packages/claw-client/src/components/mobile/MobileHomeView.tsx
@@ -13,6 +13,7 @@ import { useMemo } from "react";
 
 import { AgentCard, type AgentCardData } from "@/components/cards/AgentCard";
 import { Greeting } from "@/components/home/Greeting";
+import { MobileHeroBanner } from "@/components/home/HeroBanner";
 import type { HomeViewProps } from "@/components/home/HomeView";
 import { SectionHeader } from "@/components/home/SectionHeader";
 import { MobileButton } from "@/components/mobile/MobileButton";
@@ -100,6 +101,7 @@ export function MobileHomeView({
       <div className="flex-1 overflow-y-auto">
         <div className="mx-auto max-w-[1080px] px-ml pb-ml pt-ml">
           <Greeting name={userName} />
+          <MobileHeroBanner />
 
           <section className="mb-ml">
             <SectionHeader title="Top agents" />