diff --git a/index.html b/index.html
index b19040a..b8a4e05 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,12 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="">
   <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
   </head>
-  <body>
+  <body class="bg-background">
     <div id="app"></div>
     <script type="module" src="/src/main.js"></script>
   </body>
diff --git a/src/App.vue b/src/App.vue
index 60eb228..13ee9ea 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,7 @@
 <script setup>
 import { RouterView } from 'vue-router'
-import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
-  <div class="bg-neutral-900 h-screen w-screen text-white content-center text-center">
-    <div class="grid grid-cols-2">
-      <TheWelcome />
-      <RouterView />
-    </div>
-  </div>
+  <RouterView />
 </template>
diff --git a/src/components/CaButton.vue b/src/components/CaButton.vue
new file mode 100644
index 0000000..8544f8c
--- /dev/null
+++ b/src/components/CaButton.vue
@@ -0,0 +1,8 @@
+<template>
+  <button
+    type="button"
+    class="shadow-button bg-primary rounded-full w-max px-6 py-3.5 text-white flex gap-4 items-center"
+  >
+    <slot />
+  </button>
+</template>
diff --git a/src/components/MainHero.vue b/src/components/MainHero.vue
new file mode 100644
index 0000000..0eb464f
--- /dev/null
+++ b/src/components/MainHero.vue
@@ -0,0 +1,35 @@
+<script setup>
+import CaButton from './CaButton.vue'
+import MynauiArrowRightCircleSolid from '~icons/mynaui/arrow-right-circle-solid'
+</script>
+
+<template>
+  <div class="relative w-full h-[712px] overflow-clip">
+    <div class="grid grid-cols-2 gap-8 p-12 items-center h-full">
+      <section>
+        <h1 class="text-[3.5rem] leading-[4.6rem] font-bold text-customGray">
+          Singapore’s best
+          <span class="text-primary inline-block">AI Home Tutor</span> website for quality education
+        </h1>
+        <p class="mt-4 max-w-[460px] text-base">
+          We are committed to offering personalized AI-driven online classes tailored to the unique
+          learning needs of each student
+        </p>
+        <CaButton class="mt-8">
+          <span>GET STARTED</span>
+          <MynauiArrowRightCircleSolid class="size-7" />
+        </CaButton>
+      </section>
+      <section class="">
+        <img
+          src="https://object.slayerwitch.my.id/image/04c9a0f7-0cdb-4b45-8850-b93d9ffdc09d.png"
+          class="w-full"
+        />
+        <div class="bg-secondary rounded-full size-[117px] absolute -z-10 top-28 right-[47%]"></div>
+        <div
+          class="bg-secondary rounded-full size-[866px] absolute -z-10 -bottom-56 -right-52"
+        ></div>
+      </section>
+    </div>
+  </div>
+</template>
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
deleted file mode 100644
index 45a4f70..0000000
--- a/src/components/TheWelcome.vue
+++ /dev/null
@@ -1,20 +0,0 @@
-<script setup>
-import { RouterLink } from 'vue-router'
-import MynauiMyna from '~icons/mynaui/myna'
-</script>
-
-<template>
-  <header>
-    <div>
-      <div class="flex gap-4 items-center justify-center">
-        <h1 class="text-4xl">Vue + Tailwind + MynaUI</h1>
-        <mynaui-myna class="size-12" />
-      </div>
-
-      <nav class="flex gap-4 text-2xl justify-center my-4">
-        <RouterLink class="hover:underline text-green-400" to="/">Home</RouterLink>
-        <RouterLink class="hover:underline text-green-400" to="/about">About</RouterLink>
-      </nav>
-    </div>
-  </header>
-</template>
diff --git a/src/router/index.js b/src/router/index.js
index 3e49915..8ec265a 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -9,14 +9,14 @@ const router = createRouter({
       name: 'home',
       component: HomeView,
     },
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue'),
-    },
+    // {
+    //   path: '/about',
+    //   name: 'about',
+    //   // route level code-splitting
+    //   // this generates a separate chunk (About.[hash].js) for this route
+    //   // which is lazy-loaded when the route is visited.
+    //   component: () => import('../views/AboutView.vue'),
+    // },
   ],
 })
 
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
deleted file mode 100644
index 0dce204..0000000
--- a/src/views/AboutView.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<template>
-  <div>
-    <h1>This is an about page</h1>
-  </div>
-</template>
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index cf9998a..b5a2dd1 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,7 +1,9 @@
-<script setup></script>
+<script setup>
+import MainHero from '@/components/MainHero.vue'
+</script>
 
 <template>
   <div>
-    <h1>This is your homepage</h1>
+    <MainHero />
   </div>
 </template>
