diff --git a/src/Master.vue b/src/Master.vue
new file mode 100644
index 0000000..785f6c9
--- /dev/null
+++ b/src/Master.vue
@@ -0,0 +1,17 @@
+<template>
+  <router-view></router-view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+#style {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index e33007a..584b483 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,7 +1,7 @@
 <template>
   <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
     <div class="container-fluid">
-      <a class="navbar-brand text-primary fw-bold" href="/">Sistem Lelong</a>
+      <router-link class="navbar-brand text-primary fw-bold" to="/">Sistem Lelong</router-link>
       <button
         class="navbar-toggler"
         type="button"
@@ -19,7 +19,7 @@
             <router-link class="nav-link" to="/">Home</router-link>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="/list">Senarai</a>
+            <router-link class="nav-link" to="/list">Senarai</router-link>
           </li>
           <!-- <li class="nav-item">
             <router-link class="nav-link" to="/cart">Cart</router-link>
@@ -28,7 +28,7 @@
             <router-link class="nav-link" to="/bid-history">Rekod Bidaan</router-link>
           </li>
           <li class="nav-item">
-            <router-link class="nav-link" to="/result">Keputusan</router-link>
+            <router-link class="nav-link" to="/payment-history">Keputusan</router-link>
           </li>
           <li class="nav-item">
             <router-link class="nav-link" to="/profile">Profil</router-link>
diff --git a/src/components/authentication/TheLogin.vue b/src/components/authentication/TheLogin.vue
new file mode 100644
index 0000000..b221c82
--- /dev/null
+++ b/src/components/authentication/TheLogin.vue
@@ -0,0 +1,55 @@
+<template>
+  <div class="container mt-5">
+    <div class="row justify-content-center">
+      <div class="col-7">
+        <form>
+          <h5>Login</h5>
+          <div class="mb-3">
+            <label for="exampleInputEmail1" class="form-label"
+              >Email address</label
+            >
+            <input
+              type="email"
+              class="form-control"
+              id="exampleInputEmail1"
+              aria-describedby="emailHelp"
+            />
+            <div id="emailHelp" class="form-text">
+              We'll never share your email with anyone else.
+            </div>
+          </div>
+          <div class="mb-3">
+            <label for="exampleInputPassword1" class="form-label"
+              >Password</label
+            >
+            <input
+              type="password"
+              class="form-control"
+              id="exampleInputPassword1"
+            />
+          </div>
+          <div class="mb-3 form-check">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="exampleCheck1"
+            />
+            <label class="form-check-label" for="exampleCheck1"
+              >Check me out</label
+            >
+          </div>
+          <div class="mb-3">
+            <router-link
+              v-bind:to="{ name: 'register' }"
+              class="btn btn-secondary"
+              >Register</router-link
+            >
+          </div>
+          <router-link v-bind:to="{ name: 'home' }" class="btn btn-primary"
+            >Submit</router-link
+          >
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/authentication/TheRegister.vue b/src/components/authentication/TheRegister.vue
new file mode 100644
index 0000000..370d6a3
--- /dev/null
+++ b/src/components/authentication/TheRegister.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="container mt-5">
+    <div class="row justify-content-center">
+      <div class="col-7">
+        <form>
+          <h5>Register</h5>
+          <div class="mb-3">
+            <label for="exampleInputEmail1" class="form-label"
+              >Email address</label
+            >
+            <input
+              type="email"
+              class="form-control"
+              id="exampleInputEmail1"
+              aria-describedby="emailHelp"
+            />
+            <div id="emailHelp" class="form-text">
+              We'll never share your email with anyone else.
+            </div>
+          </div>
+          <div class="mb-3">
+            <label for="exampleInputPassword1" class="form-label"
+              >Password</label
+            >
+            <input
+              type="password"
+              class="form-control"
+              id="exampleInputPassword1"
+            />
+          </div>
+          <div class="mb-3 form-check">
+            <input
+              type="checkbox"
+              class="form-check-input"
+              id="exampleCheck1"
+            />
+            <label class="form-check-label" for="exampleCheck1"
+              >Check me out</label
+            >
+          </div>
+          <div class="mb-3">
+            <router-link v-bind:to="{ name: 'login' }" class="btn btn-secondary"
+              >Login</router-link
+            >
+          </div>
+        </form>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/base/BaseCard.vue b/src/components/base/BaseCard.vue
new file mode 100644
index 0000000..dc3bb4a
--- /dev/null
+++ b/src/components/base/BaseCard.vue
@@ -0,0 +1,15 @@
+<template>
+  <div>
+    <slot></slot>
+  </div>
+</template>
+
+<style scoped>
+div {
+  margin: 2rem auto;
+  /* max-width: 40rem; */
+  padding: 1rem;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+}
+</style>
\ No newline at end of file
diff --git a/src/components/base/BaseDialog.vue b/src/components/base/BaseDialog.vue
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/bidRecord/TheBidRecord.vue b/src/components/bidRecord/TheBidRecord.vue
new file mode 100644
index 0000000..74a5590
--- /dev/null
+++ b/src/components/bidRecord/TheBidRecord.vue
@@ -0,0 +1,7 @@
+<template>
+  <the-template>
+    <base-card>
+      <p>this is the bid record</p>
+    </base-card>
+  </the-template>
+</template>
\ No newline at end of file
diff --git a/src/components/cart/TheCart.vue b/src/components/cart/TheCart.vue
new file mode 100644
index 0000000..f44494b
--- /dev/null
+++ b/src/components/cart/TheCart.vue
@@ -0,0 +1,5 @@
+<template>
+    <the-template>
+        <p>this is the cart</p>
+    </the-template>
+</template>
\ No newline at end of file
diff --git a/src/components/home/TheHome.vue b/src/components/home/TheHome.vue
new file mode 100644
index 0000000..6ae8251
--- /dev/null
+++ b/src/components/home/TheHome.vue
@@ -0,0 +1,96 @@
+<template>
+  <the-template>
+    <div class="container">
+      <div class="row">
+        <div class="col-md-8">
+          <base-card>
+            <div>
+              <h5>Lelongan Hari Ini</h5>
+              <table class="table table-bordered table-hover">
+                <thead>
+                  <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">First</th>
+                    <th scope="col">Last</th>
+                    <th scope="col">Handle</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <th scope="row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                    <td>@mdo</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">2</th>
+                    <td>Jacob</td>
+                    <td>Thornton</td>
+                    <td>@fat</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">3</th>
+                    <td colspan="2">Larry the Bird</td>
+                    <td>@twitter</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </base-card>
+          <base-card>
+            <div>
+              <h5>Lelongan Seterusnya</h5>
+              <table class="table table-bordered table-hover">
+                <thead>
+                  <tr>
+                    <th scope="col">#</th>
+                    <th scope="col">First</th>
+                    <th scope="col">Last</th>
+                    <th scope="col">Handle</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <th scope="row">1</th>
+                    <td>Mark</td>
+                    <td>Otto</td>
+                    <td>@mdo</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">2</th>
+                    <td>Jacob</td>
+                    <td>Thornton</td>
+                    <td>@fat</td>
+                  </tr>
+                  <tr>
+                    <th scope="row">3</th>
+                    <td colspan="2">Larry the Bird</td>
+                    <td>@twitter</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </base-card>
+        </div>
+        <div class="col-md-4">
+          <div class="col">
+            <base-card>
+              <div>
+                <h5>Karat</h5>
+                <p>Mutu</p>
+                <p>Harga</p>
+              </div>
+            </base-card>
+            <base-card>
+              <div>
+                <h5>Karat</h5>
+                <p>Mutu</p>
+                <p>Harga</p>
+              </div>
+            </base-card>
+          </div>
+        </div>
+      </div>
+    </div>
+  </the-template>
+</template>
\ No newline at end of file
diff --git a/src/components/layouts/TheFooter.vue b/src/components/layouts/TheFooter.vue
new file mode 100644
index 0000000..77abfb3
--- /dev/null
+++ b/src/components/layouts/TheFooter.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="container-fluid bg-light">
+    <footer
+      class="
+        d-flex
+        flex-wrap
+        justify-content-between
+        align-items-center
+        py-3
+        my-4
+        mb-0
+      "
+    >
+      <p class="col-md-4 mb-0 text-muted justify-content-start">
+        &copy; 2022 Company, Inc
+      </p>
+
+      <a
+        href="/"
+        class="
+          col-md-4
+          d-flex
+          align-items-center
+          justify-content-center
+          mb-3 mb-md-0
+          me-md-auto
+          link-dark
+          text-decoration-none
+        "
+      >
+        <svg class="bi me-2" width="40" height="32">
+          <!-- <use xlink:href="#bootstrap" /> -->
+          <!-- <i class="bi bi-spotify"></i> -->
+        </svg>
+      </a>
+
+      <ul class="nav col-md-4 justify-content-center">
+        <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted"
+            >Permodalan Kelantan Berhad</a
+          >
+        </li>
+        <!-- <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted">Home</a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted">Features</a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted">Pricing</a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted">FAQs</a>
+        </li>
+        <li class="nav-item">
+          <a href="#" class="nav-link px-2 text-muted">About</a>
+        </li> -->
+      </ul>
+    </footer>
+  </div>
+</template>
+
+<style scoped>
+.foot {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+}
+</style>
diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
new file mode 100644
index 0000000..d5ffd7e
--- /dev/null
+++ b/src/components/layouts/TheHeader.vue
@@ -0,0 +1,50 @@
+<template>
+  <nav class="navbar navbar-expand-lg navbar-light bg-light">
+    <div class="container-fluid">
+      <router-link class="navbar-brand" to="/home">Sistem Lelong</router-link>
+      <button
+        class="navbar-toggler"
+        type="button"
+        data-bs-toggle="collapse"
+        data-bs-target="#navbarSupportedContent"
+        aria-controls="navbarSupportedContent"
+        aria-expanded="false"
+        aria-label="Toggle navigation"
+      >
+        <span class="navbar-toggler-icon"></span>
+      </button>
+      <div class="collapse navbar-collapse" id="navbarSupportedContent">
+        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
+          <li class="nav-item">
+            <router-link class="nav-link" v-bind:to="{name: 'home'}">Utama</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link class="nav-link" v-bind:to="{name: 'list'}">Senarai</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link class="nav-link" v-bind:to="{name: 'cart'}">Troli</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link class="nav-link" v-bind:to="{name: 'bid-record'}">Rekod Bidaan</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link class="nav-link" v-bind:to="{name: 'result'}">Keputusan</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link class="nav-link" v-bind:to="{name: 'profile'}">Profil</router-link>
+          </li>
+          <li class="nav-item">
+            <router-link class="nav-link" v-bind:to="{name: 'login'}">Log Keluar</router-link>
+          </li>
+        
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<style scoped>
+.nav-link:hover {
+    color: blue;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/layouts/TheTemplate.vue b/src/components/layouts/TheTemplate.vue
new file mode 100644
index 0000000..6f0ac48
--- /dev/null
+++ b/src/components/layouts/TheTemplate.vue
@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <the-header />
+    <div>
+      <div class="container pt-5">
+        <slot></slot>
+      </div>
+    </div>
+    <the-footer />
+  </div>
+</template>
+
+<script>
+import TheHeader from "./TheHeader.vue";
+import TheFooter from "./TheFooter.vue";
+
+export default {
+  components: {
+    "the-header": TheHeader,
+    "the-footer": TheFooter,
+  },
+};
+</script>
+
+<style scoped>
+</style>
+
+
diff --git a/src/components/list/TheList.vue b/src/components/list/TheList.vue
new file mode 100644
index 0000000..e498579
--- /dev/null
+++ b/src/components/list/TheList.vue
@@ -0,0 +1,5 @@
+<template>
+  <the-template>
+    <p>this is the list</p>
+  </the-template>
+</template>
\ No newline at end of file
diff --git a/src/components/profile/TheProfile.vue b/src/components/profile/TheProfile.vue
new file mode 100644
index 0000000..35013fc
--- /dev/null
+++ b/src/components/profile/TheProfile.vue
@@ -0,0 +1,5 @@
+<template>
+    <the-template>
+        <p>this is the profile</p>
+    </the-template>
+</template>
\ No newline at end of file
diff --git a/src/components/result/TheResult.vue b/src/components/result/TheResult.vue
new file mode 100644
index 0000000..165ff4f
--- /dev/null
+++ b/src/components/result/TheResult.vue
@@ -0,0 +1,5 @@
+<template>
+    <the-template>
+        <p>this is the result</p>
+    </the-template>
+</template>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index cc139e8..40c0d3d 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
-import App from './App.vue'
+// import App from './App.vue'
+import Master from './Master.vue'
 import router from './router'
 import store from './store'
 // import useVuelidate from '@vuelidate/core'
@@ -8,5 +9,16 @@ import "bootstrap/dist/css/bootstrap.css"
 import "bootstrap/dist/js/bootstrap.js"
 import 'bootstrap-icons/font/bootstrap-icons.css'
 
-createApp(App).use(router).use(store).mount('#app')
+import TheTemplate from './components/layouts/TheTemplate.vue'
+import BaseCard from './components/base/BaseCard.vue'
+
+const app = createApp(Master);
+
+app.component('the-template', TheTemplate);
+app.component('base-card', BaseCard);
+
+app.use(router).use(store).mount('#app');
+
+// createApp(App).use(router).use(store).mount('#app')
+// createApp(Master).use(router).use(store).mount('#app')
 // createApp(App).use(router).use(store).use(useVuelidate).mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
index 78df04e..4e02c16 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,99 +1,100 @@
-import { createRouter, createWebHistory, createMemoryHistory } from "vue-router";
-import Login from '../components/Login.vue';
-import Register from '../components/Register.vue';
-import Dashboard from './../components/Dashboard.vue';
-import Cart from './../components/Cart.vue';
-import List from './../components/List.vue'
-import Pay from '../components/Pay.vue'
-import Profile from './../components/Profile.vue'
-import BidHistory from '../components/BidHistory.vue'
-import Test from "../components/Test.vue"
-import IndexPaymentHistory from '../components/IndexPaymentHistory.vue'
+import {
+  createRouter,
+  createWebHistory,
+  createMemoryHistory,
+} from "vue-router";
+import Login from "../components/Login.vue";
+import Register from "../components/Register.vue";
+import Dashboard from "./../components/Dashboard.vue";
+import Cart from "./../components/Cart.vue";
+import List from "./../components/List.vue";
+import Pay from "../components/Pay.vue";
+import Profile from "./../components/Profile.vue";
+import BidHistory from "../components/BidHistory.vue";
+import Test from "../components/Test.vue";
+import IndexPaymentHistory from "../components/IndexPaymentHistory.vue";
 // import Modals from './../components/Modal.vue'
 // import { Modal } from "bootstrap";
 
+import TheLogin from '../components/authentication/TheLogin.vue'
+import TheRegister from '../components/authentication/TheRegister.vue'
+import TheHome from '../components/home/TheHome.vue'
+import TheCart from '../components/cart/TheCart.vue'
+import TheResult from '../components/result/TheResult.vue'
+import TheProfile from '../components/profile/TheProfile.vue'
+import TheBidRecord from '../components/bidRecord/TheBidRecord.vue'
+import TheList from '../components/list/TheList.vue'
+
 const routes = [
-    {
-        path: '/login',
-        name: 'Login',
-        component: Login,
-        // meta: { guest: true }
-    },
-    {
-        path: '/register',
-        name: 'Register',
-        component: Register,
-        // meta: { guest: true }
+  {
+    path: "/login",
+    name: "login",
+    component: TheLogin,
+  },
+  {
+    path: "/register",
+    name: "register",
+    component: TheRegister,
+  },
+  {
+    path: "/home",
+    name: "home",
+    component: TheHome,
+  },
 
-    },
-    {
-        path: '/',
-        name: 'Dashboard',
-        component: Dashboard,
-        // meta: { requiresAuth: true }
-    },
+  {
+    path: "/cart",
+    name: "cart",
+    component: TheCart,
+  },
+  {
+    path: "/list",
+    name: "list",
+    component: TheList,
+  },
+  {
+    path: "/pay",
+    name: "Pay",
+    component: Pay,
+  },
+  {
+    path: "/profile",
+    name: "profile",
+    component: TheProfile,
+  },
+  {
+    path: "/bid-record",
+    name: "bid-record",
+    component: TheBidRecord,
+  },
+  {
+    path: "/result",
+    name: "result",
+    component: TheResult,
 
-    {
-        path: '/cart',
-        name: 'Cart',
-        component: Cart,
-        // meta: { requiresAuth: true }
-
-    },
-    {
-        path: '/list',
-        name: 'List',
-        component: List,
-        // meta: { requiresAuth: true }
-
-    },
-    {
-        path: '/pay',
-        name: 'Pay',
-        component: Pay,
-        // meta: { requiresAuth: true }
-
-    },
-    {
-        path: '/profile',
-        name: 'Profile',
-        component: Profile,
-        // meta: { requiresAuth: true }
-
-    }, 
-    {
-        path: '/bid-history',
-        name: 'BidHistory',
-        component: BidHistory,
-        // meta: { requiresAuth: true }
-
-    }, 
-    {
-        path: '/payment-history',
-        name: 'PaymentHistory',
-        component: IndexPaymentHistory,
-        // meta: { requiresAuth: true }
-
-    }, 
-    {
-        path: '/test',
-        name: 'test',
-        component: Test,
-        // meta: { requiresAuth: true }
-
-    }, 
-    // {
-    //     name: 'Modal',
-    //     component: Modals,
-    // }
-
-]
+  },
+  {
+    path: "/payment-history",
+    name: "payment-history",
+    component: IndexPaymentHistory,
+  },
+  {
+    path: "/test",
+    name: "test",
+    component: Test,
+  },
+  // {
+  //     name: 'Modal',
+  //     component: Modals,
+  // }
+];
 
 const router = createRouter({
-    // history: createWebHistory(process.env.BASE_URL),
-    history: createMemoryHistory(),
-    routes,
-})
+  // history: createWebHistory(process.env.BASE_URL),
+  history: createWebHistory(),
+  // history: createMemoryHistory(),
+  routes,
+});
 
 // function loggedIn() {
 //     return true;
@@ -117,4 +118,4 @@ const router = createRouter({
 //     }
 // })
 
-export default router
\ No newline at end of file
+export default router;