diff --git a/src/components/Hero2.astro b/src/components/Hero2.astro
new file mode 100644
index 0000000..2e062d8
--- /dev/null
+++ b/src/components/Hero2.astro
@@ -0,0 +1,16 @@
+<!-- Hero -->
+<section id="Hero">
+    <div class="hero py-12">
+    <!-- Container -->
+     <div class="container px-12 mx-auto">
+        <!-- Hero Wrapper -->
+        <div class="grid grid-cols-2 gap-6 items-center">
+        <!-- Hero Text -->
+        <div class="hero-text col-span-6 text-center">
+        <h1 class="font-bold text-3xl max-w-full text-black">
+        <slot/ name="Hero-title"></h1>
+        </div>
+        </div>
+    </div>
+    </div>
+</section>
\ No newline at end of file
diff --git a/src/components/Nav.astro b/src/components/Nav.astro
new file mode 100644
index 0000000..2be9760
--- /dev/null
+++ b/src/components/Nav.astro
@@ -0,0 +1,27 @@
+---
+const { Navitems, Navbtn } = Astro.props ;
+---
+
+<div id="Navigation">
+  <nav class="relative flex flex-wrap items-center justify-between px-3 py-3 bg-gray-50 ">
+  <div class="container  items-center justify-between mx-auto flex flex-wrap h-16 px-12 ">
+  <div class="w-full relative flex justify-between lg:w-auto  px-4 lg:static lg:block lg:justify-start">
+     <slot name="Logo"></slot>
+  </div>
+        <div class="lg:flex flex-grow items-center hidden">
+            <ul class="flex flex-col lg:flex-row list-none ml-auto space-x-5">
+                { Navitems.map((item) => ( 
+                    <li>
+                    <a href="/#" class="flex text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">{item}</a>
+                    </li>
+                ))
+            }
+            <li>
+                <a href="/#" class="text-gray-300 px-3 py-2 text-sm font-medium">
+                   <button class="text-gray-800 dark:text-white  hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium">{Navbtn}</button>     
+                        </a>
+                </li>
+            </ul>
+        </div>
+     </nav>
+     </div>
\ No newline at end of file
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 7ecf928..2432f10 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -75,10 +75,10 @@ const pricingFeature = ["Feature 1", "Feature 2", "Feature 3", "Feature 4", "Fea
 
     <!-- Navigation 2 -->
      <div class="w-full px-4 mx-auto max-w-screen-2xl sm:px-6 md:px-8 ">
-      <div class="flex items-center h-16 px-12">
-      <span class="font-semibold text-2xl leading-none tracking-light text-blue-600 px-16
+      <div class="flex items-center justify-between h-16 px-12">
+      <span class="font-semibold justify-between text-2xl leading-none tracking-light text-blue-600 px-16
        ">Mulai</span>
-      <form class="px-5">
+      <form class="px-3 shadow-md">
         <input name="q" type="text" size="15" placeholder="search..." />
       </form>
       <ul class="items-center hidden text-sm space-x-4 px-2 font-medium text-gray-400 md:flex">
@@ -89,7 +89,7 @@ const pricingFeature = ["Feature 1", "Feature 2", "Feature 3", "Feature 4", "Fea
       <li><a class="p-4 px-2 transition rounded-lg focus:outline-none hover:text-gray-700" href="#">Groups</a></li>
       </ul>
 
-       <div class=" inline-flex items-center space-x-4 ml-80 ">
+       <div class="flex items-center space-x-4">
        <a class="w-6 h-5"  href="#"><img  src={icirclesolid} /></a> 
        <a class="w-6 h-5"  href="#"><img  src={bell} /></a> 
         <a  class="p-1 text-white text-sm bg-purple-700 rounded-full focus:outline-none" href="#">JW</a>
@@ -103,12 +103,12 @@ const pricingFeature = ["Feature 1", "Feature 2", "Feature 3", "Feature 4", "Fea
       <div class="flex items-center justify-between h-16 px-12">
       <span class="font-semibold text-2xl leading-none tracking-light text-blue-600 px-16
        ">Mulai</span>
-      <ul class="items-center hidden text-sm space-x-5 md:flex">
-      <li><a class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium " href="#">Offers</a></li>
-      <li><a class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#"><img class="inline-block w-4 h-5 "  src={card} /> Card</a></li>
-      <li><a class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#">Transaction</a></li>
-      <li><a class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#"><img class="inline-block w-4 h-5 " src={booth}/> Booth</a></li>
-      <li><a class="text-gray-300 hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#"><img class="inline-block w-4 h-5 "  src={refers} /> Refer</a></li>
+      <ul class="items-center hidden text-sm space-x-5 md:flex text-gray-400">
+      <li><a class=" hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium " href="#">Offers</a></li>
+      <li><a class=" hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#"><img class="inline-block w-4 h-5 "  src={card} /> Card</a></li>
+      <li><a class=" hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#">Transaction</a></li>
+      <li><a class=" hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#"><img class="inline-block w-4 h-5 " src={booth}/> Booth</a></li>
+      <li><a class=" hover:text-gray-800 dark:hover:text-white px-3 py-2 rounded-md text-sm font-medium" href="#"><img class="inline-block w-4 h-5 "  src={refers} /> Refer</a></li>
       <div>
       </ul>