diff --git a/apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx b/apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx
index de8bd17..974105e 100644
--- a/apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx
+++ b/apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx
@@ -1,7 +1,40 @@
+import { Button } from "@imphnen-frontend-service/ui/atoms";
+
 export function HeroSection() {
   return (
-    <section className="relative w-full bg-primary-50 md:py-32 lg:py-40">
-      <div>Hero Section</div>
+    <section className="relative w-full py-20 md:py-28 lg:py-32">
+      {/* Background gradients and shapes */}
+      <div className="absolute inset-0 -z-10 overflow-x-clip hidden md:block">
+        <div className="absolute top-10 -left-64 size-[448px] bg-primary-200 rounded-full justify-center items-center hidden lg:flex">
+          <div className="size-[296px] bg-primary-50 rounded-full" />
+        </div>
+        <div className="absolute top-3/5 -right-56 size-96 bg-primary-500 rounded-full flex justify-center items-center lg:top-1/2 lg:-right-64 lg:size-[600px]">
+          <div className="size-64 bg-primary-50 rounded-full lg:size-[400px]" />
+        </div>
+
+        <div className="absolute -top-28 -left-20 size-[248px] bg-radial from-primary-300 rounded-full blur-3xl" />
+        <div className="absolute top-0 -right-72 size-[480px] bg-radial from-primary-400 rounded-full blur-[80px]" />
+      </div>
+
+      <div className="flex flex-col items-center gap-y-10">
+        <div className="flex flex-col items-center gap-y-6">
+          <h1 className="text-2xl font-semibold text-primary-500 md:text-4xl md:font-bold lg:text-5xl">DIMENTORIN</h1>
+          <p className="max-w-52 text-center font-semibold text-xl leading-tight text-primary-500 md:max-w-72 lg:text-4xl lg:max-w-lg">
+            Learn IT smarter with AI & expert mentors!
+          </p>
+          <p className="max-w-3xs text-xs text-neutral-500 text-center font-medium md:max-w-lg md:text-base lg:text-lg lg:max-w-[646px]">
+            Apakah kamu siap untuk grind skill TI-mu ke level Ultimate? Dengan AI sebagai navigator dan mentor profesional sebagai sensei-mu, perjalanan belajarmu akan lebih cepat, efektif, dan penuh EXP!
+          </p>
+        </div>
+
+        <Button
+          type="button"
+          size="sm"
+          className="text-[10px] h-auto px-2.5 py-2 md:text-sm"
+        >
+          Belajar Dengan AI Sekarang
+        </Button>
+      </div>
     </section>
   )
 }
\ No newline at end of file
diff --git a/apps/dimentorin/src/app/(public)/_components/header.tsx b/apps/dimentorin/src/app/(public)/_components/header.tsx
index 40e36e4..9e3744a 100644
--- a/apps/dimentorin/src/app/(public)/_components/header.tsx
+++ b/apps/dimentorin/src/app/(public)/_components/header.tsx
@@ -18,7 +18,7 @@ export const Header: FC = () => {
   const [expandMenu, setExpandMenu] = useState(false);
 
   return (
-    <div className="bg-primary-50 w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky">
+    <div className="w-full px-8 pt-8 top-0 z-50 md:px-[60px] md:pt-[60px] lg:px-20 sticky">
       <header
         className="bg-white shadow-lg rounded-lg h-12 flex justify-between w-full max-w-7xl xl:mx-auto md:h-[60px] lg:h-[71px]"
         aria-roledescription="nav"
diff --git a/apps/dimentorin/src/app/(public)/layout.tsx b/apps/dimentorin/src/app/(public)/layout.tsx
index 368e1e6..47ece0d 100644
--- a/apps/dimentorin/src/app/(public)/layout.tsx
+++ b/apps/dimentorin/src/app/(public)/layout.tsx
@@ -3,9 +3,9 @@ import { Header } from "./_components/header";
 
 export default function Layout() {
   return (
-    <div className="flex min-h-screen flex-col">
+    <div className="flex min-h-screen flex-col bg-primary-50">
       <Header />
-      <main className="flex-1">
+      <main className="flex-1 z-0">
         <Outlet />
       </main>
     </div>