diff --git a/app/page.tsx b/app/page.tsx
index 480232a..faa1fed 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -7,7 +7,6 @@ import {
   TicketIcon,
 } from '@heroicons/react/24/solid';
 import Button from '@/components/button/Button';
-import logo from '@/public/logo.png';
 import logo_white from '@/public/logo_white.png';
 import hero from '@/public/hero/home_hero.svg';
 import hero_dark from '@/public/hero/home_hero_dark.svg';
@@ -16,52 +15,13 @@ import hero_mobile_dark from '@/public/hero/home_hero_mobile_dark.svg';
 import googlefordevelopers from '@/public/googlefordevelopers.svg';
 import MobileNavBar from '@/components/navbar/MobileNavBar';
 import Link from 'next/link';
-import ThemeSwitcher from '@/components/ThemeSwitcher';
+import NavBar from '@/components/navbar/NavBar';
 
 export default function Home() {
   return (
     <div className="relative isolate flex flex-col min-h-svh w-full bg-white lg:bg-zinc-100 dark:bg-zinc-900 dark:lg:bg-zinc-950">
       {/* Nav */}
-      <div className="inset-x-0 top-0 max-lg:hidden dark:text-white">
-        <nav className="mx-auto max-w-6xl px-4 flex flex-1 items-center gap-8 py-2.5">
-          <Link href={'/'}>
-            <span className="relative">
-              <Image
-                className="dark:hidden w-64"
-                src={logo}
-                alt="Google I/O Extended Cloud Hanoi 2024"
-              />
-              <Image
-                className="hidden dark:inline w-64"
-                src={logo_white}
-                alt="Google I/O Extended Cloud Hanoi 2024"
-              />
-            </span>
-          </Link>
-          <div className="max-lg:hidden h-6 w-px bg-zinc-950/10 dark:bg-white/10"></div>
-          <div className="max-lg:hidden flex items-center gap-8">
-            <span className="relative">
-              <Link href="#info">Thông tin</Link>
-            </span>
-            <span className="relative">
-              <Link href="#">Lịch trình</Link>
-            </span>
-            <span className="relative">
-              <Link href="#">Diễn giả</Link>
-            </span>
-            <span className="relative">
-              <Link href="#">Tham gia</Link>
-            </span>
-            <span className="relative">
-              <Link href="#">Liên hệ</Link>
-            </span>
-          </div>
-          <div className="-ml-4 flex-1"></div>
-          <div className="flex items-center gap-4">
-            <ThemeSwitcher />
-          </div>
-        </nav>
-      </div>
+      <NavBar />
       {/* Mobile Nav */}
       <MobileNavBar />
       {/* Body */}
@@ -78,10 +38,12 @@ export default function Home() {
               rộng của sự kiện Google I/O dành cho các lập trình viên và những
               người yêu thích công nghệ tại Việt Nam.
             </p>
-            <Button>
-              <TicketIcon />
-              Đăng ký ngay
-            </Button>
+            <Link href="#join">
+              <Button>
+                <TicketIcon />
+                Đăng ký ngay
+              </Button>
+            </Link>
           </div>
           <div className="flex justify-end items-end w-full md:w-3/5 mt-[-55px] md:mt-[60px]">
             <Image
@@ -185,6 +147,147 @@ export default function Home() {
             </div>
           </div>
         </div>
+
+        <div className="flex mx-auto max-w-6xl">
+          <div className="flex flex-1">
+            <Image
+              src={hero_mobile}
+              alt="Hero image"
+              className="block dark:hidden w-full mt-[60px]"
+            />
+            <Image
+              src={hero_mobile_dark}
+              alt="Hero image"
+              className="dark:inline-block dark:md:hidden w-full mt-[60px]"
+            />
+          </div>
+          <div
+            id="join"
+            className="mx-auto flex-1 px-8 mt-24 sm:mt-32 lg:mt-40 text-neutral-950 dark:text-gray-50">
+            <div className="relative flex w-full flex-col rounded-3xl mt-6 p-6 ring-1 ring-neutral-950/5 transition bg-neutral-50 hover:bg-white dark:bg-zinc-900 dark:hover:bg-zinc-800 sm:p-8">
+              <div className="border-b border-gray-900/10 pb-12">
+                <h2 className="text-base font-semibold leading-7 text-gray-900">
+                  Đăng ký tham dự
+                </h2>
+                <p className="mt-1 text-sm leading-6 text-gray-600">
+                  Vé sẽ được gửi tới email của bạn trước thời gian diễn ra sự
+                  kiện
+                </p>
+
+                <div className="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
+                  <div className="sm:col-span-3">
+                    <label
+                      htmlFor="first-name"
+                      className="block text-sm font-medium leading-6 text-gray-900">
+                      Tên
+                    </label>
+                    <div className="mt-2">
+                      <input
+                        type="text"
+                        name="first-name"
+                        id="first-name"
+                        autoComplete="given-name"
+                        className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="sm:col-span-3">
+                    <label
+                      htmlFor="last-name"
+                      className="block text-sm font-medium leading-6 text-gray-900">
+                      Họ
+                    </label>
+                    <div className="mt-2">
+                      <input
+                        type="text"
+                        name="last-name"
+                        id="last-name"
+                        autoComplete="family-name"
+                        className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="sm:col-span-6">
+                    <label
+                      htmlFor="email"
+                      className="block text-sm font-medium leading-6 text-gray-900">
+                      Email
+                    </label>
+                    <div className="mt-2">
+                      <input
+                        id="email"
+                        name="email"
+                        type="email"
+                        autoComplete="email"
+                        className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="col-span-full">
+                    <label
+                      htmlFor="street-address"
+                      className="block text-sm font-medium leading-6 text-gray-900">
+                      Địa chỉ
+                    </label>
+                    <div className="mt-2">
+                      <input
+                        type="text"
+                        name="street-address"
+                        id="street-address"
+                        autoComplete="street-address"
+                        className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="sm:col-span-3 sm:col-start-1">
+                    <label
+                      htmlFor="city"
+                      className="block text-sm font-medium leading-6 text-gray-900">
+                      Thành phố
+                    </label>
+                    <div className="mt-2">
+                      <input
+                        type="text"
+                        name="city"
+                        id="city"
+                        autoComplete="address-level2"
+                        className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="sm:col-span-3">
+                    <label
+                      htmlFor="region"
+                      className="block text-sm font-medium leading-6 text-gray-900">
+                      Quận/Huyện
+                    </label>
+                    <div className="mt-2">
+                      <input
+                        type="text"
+                        name="region"
+                        id="region"
+                        autoComplete="address-level1"
+                        className="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div className="mt-6 flex items-center justify-end gap-x-6">
+                  <button
+                    type="submit"
+                    className="rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
+                    Đăng ký
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </main>
       <footer className="mt-24 sm:mt-32 lg:mt-40 pt-10 pb-16 lg:py-10 px-7 lg:px-16 bg-black flex flex-col lg:flex-row lg:justify-between lg:items-center w-max-full">
         <div className="flex flex-col lg:flex-row items-start lg:items-center space-y-6 lg:space-y-0 lg:space-x-6 text-grey-500 text-[16px] font-medium flex-1">
diff --git a/components/navbar/DefaultRoutes.tsx b/components/navbar/DefaultRoutes.tsx
new file mode 100644
index 0000000..0a48421
--- /dev/null
+++ b/components/navbar/DefaultRoutes.tsx
@@ -0,0 +1,33 @@
+import Link from 'next/link';
+
+export default function DefaultRoutes({ onClick }: { onClick?: () => any }) {
+  return (
+    <>
+      <span className="relative">
+        <Link onClick={onClick} href="#info">
+          Thông tin
+        </Link>
+      </span>
+      <span className="relative">
+        <Link onClick={onClick} href="#agenda">
+          Lịch trình
+        </Link>
+      </span>
+      <span className="relative">
+        <Link onClick={onClick} href="#speakers">
+          Diễn giả
+        </Link>
+      </span>
+      <span className="relative">
+        <Link onClick={onClick} href="#joinus">
+          Tham gia
+        </Link>
+      </span>
+      <span className="relative">
+        <Link onClick={onClick} href="#contacts">
+          Liên hệ
+        </Link>
+      </span>
+    </>
+  );
+}
\ No newline at end of file
diff --git a/components/navbar/MobileNavBar.tsx b/components/navbar/MobileNavBar.tsx
index 4cb7db0..7c7b380 100644
--- a/components/navbar/MobileNavBar.tsx
+++ b/components/navbar/MobileNavBar.tsx
@@ -2,7 +2,6 @@
 import {
   Bars3Icon,
   HomeIcon,
-  LinkIcon,
   XMarkIcon,
 } from '@heroicons/react/24/solid';
 import { Dialog, Button } from '@headlessui/react';
@@ -66,13 +65,11 @@ export default function MobileNavBar() {
               {/* Body */}
               <div className="flex flex-col border-b border-zinc-950/5 p-4 dark:border-white/5 [&>[data-slot=section]+[data-slot=section]]:mt-2.5">
                 <span className="relative">
-                  {/* <span className="absolute inset-y-2 -left-4 w-0.5 rounded-full bg-zinc-950 dark:bg-white"></span> */}
                   <Link
                     href="/"
                     onClick={() => setIsOpen(false)}
                     className="flex w-full items-center gap-3 rounded-lg px-2 py-2.5 text-left text-base/6 font-medium text-zinc-950 sm:py-2 sm:text-sm/5 data-[slot=icon]:*:size-6 data-[slot=icon]:*:shrink-0 data-[slot=icon]:*:fill-zinc-500 sm:data-[slot=icon]:*:size-5 data-[slot=icon]:last:*:ml-auto data-[slot=icon]:last:*:size-5 sm:data-[slot=icon]:last:*:size-4 data-[slot=avatar]:*:-m-0.5 data-[slot=avatar]:*:size-7 data-[slot=avatar]:*:[--ring-opacity:10%] sm:data-[slot=avatar]:*:size-6 data-[hover]:bg-zinc-950/5 data-[slot=icon]:*:data-[hover]:fill-zinc-950 data-[active]:bg-zinc-950/5 data-[slot=icon]:*:data-[active]:fill-zinc-950 data-[slot=icon]:*:data-[current]:fill-zinc-950 dark:text-white dark:data-[slot=icon]:*:fill-zinc-400 dark:data-[hover]:bg-white/5 dark:data-[slot=icon]:*:data-[hover]:fill-white dark:data-[active]:bg-white/5 dark:data-[slot=icon]:*:data-[active]:fill-white dark:data-[slot=icon]:*:data-[current]:fill-white">
                     <HomeIcon />
-                    {/* Label */}
                     <span className="truncate">Home</span>
                   </Link>
                 </span>
diff --git a/components/navbar/NavBar.tsx b/components/navbar/NavBar.tsx
new file mode 100644
index 0000000..9b0edbb
--- /dev/null
+++ b/components/navbar/NavBar.tsx
@@ -0,0 +1,36 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import logo from '@/public/logo.png';
+import logo_white from '@/public/logo_white.png';
+import ThemeSwitcher from '@/components/ThemeSwitcher';
+import DefaultRoutes from './DefaultRoutes';
+export default function NavBar() {
+  return (
+    <div className="inset-x-0 top-0 max-lg:hidden dark:text-white">
+      <nav className="mx-auto max-w-6xl px-4 flex flex-1 items-center gap-8 py-2.5">
+        <Link href={'/'}>
+          <span className="relative">
+            <Image
+              className="dark:hidden w-64"
+              src={logo}
+              alt="Google I/O Extended Cloud Hanoi 2024"
+            />
+            <Image
+              className="hidden dark:inline w-64"
+              src={logo_white}
+              alt="Google I/O Extended Cloud Hanoi 2024"
+            />
+          </span>
+        </Link>
+        <div className="max-lg:hidden h-6 w-px bg-zinc-950/10 dark:bg-white/10"></div>
+        <div className="max-lg:hidden flex items-center gap-8">
+          <DefaultRoutes />
+        </div>
+        <div className="-ml-4 flex-1"></div>
+        <div className="flex items-center gap-4">
+          <ThemeSwitcher />
+        </div>
+      </nav>
+    </div>
+  );
+}