diff --git a/src/components/authentication/TheLogin.vue b/src/components/authentication/TheLogin.vue
index eaf3044..966c5d2 100644
--- a/src/components/authentication/TheLogin.vue
+++ b/src/components/authentication/TheLogin.vue
@@ -25,19 +25,14 @@
       "
     >
       <div class="text-center mb-5">
-        <img class="logo-img" src="img/erahn-logo.png" alt="erahn-logo" />
-        <div class="text-200 text-3xl font-semibold mb-3">
-          E-Rahn Lelong
-        
-        </div>
-        <span class="text-dark-300 font-medium line-height-3"
-          >Belum punyai akaun?</span
-        >
-        <router-link
-          v-bind:to="{ name: 'register' }"
-          class="font-medium no-underline ml-2 text-white cursor-pointer"
-          >Daftar sekarang!</router-link
-        >
+        <img class="logo-img" src="img/e-rahn-lelong.png" alt="erahn-logo" />
+          <div class="text-200 text-3xl font-semibold mb-3 mt-2">Log Masuk</div>
+            <span class="text-dark-300 font-medium line-height-3">Belum punyai akaun?</span>
+              <router-link
+              v-bind:to="{ name: 'register' }"
+              class="font-medium no-underline ml-2 text-white cursor-pointer"
+              >Daftar sekarang!
+              </router-link>
       </div>
       <form @submit.prevent="submit">
         <div class="px-0 text-center md:px-8">
@@ -47,14 +42,7 @@
             <div class="col">
               <span class="p-input-icon-right">
                 <i class="pi pi-user" />
-                <InputText
-                  class="mb-2"
-                  v-model="form.username"
-                  type="text"
-                  placeholder="Username"
-                  required
-                  style="width: 360px"
-                ></InputText>
+                <InputText class="mb-2" v-model="form.username" type="text" placeholder="Username" required></InputText>
               </span>
             </div>
             <InlineMessage class="flex-auto" v-if="v$.form.username.$error">Username diperlukan</InlineMessage>
@@ -234,7 +222,7 @@ export default {
 }
 
 .logo-img {
-  width: 70px;
+  width: 350px;
   height: 60px;
 }
 
diff --git a/src/components/authentication/TheRegister.vue b/src/components/authentication/TheRegister.vue
index 0abab27..0e96c33 100644
--- a/src/components/authentication/TheRegister.vue
+++ b/src/components/authentication/TheRegister.vue
@@ -3,16 +3,16 @@
   <div class="flex main-container min-h-screen align-items-center justify-content-center m-5">
     <div class= "surface-card fadein p-4 shadow-2 border-round w-11 md:w-10 lg:w-10 xl:w-8">
       <div class="text-center mb-5">
-        <img class="logo-img" src="img/erahn-logo.png" alt="arrahn-logo" />
-        <div class="text-200 text-3xl font-semibold mb-3">E-Rahn Lelong</div>
-        <span class="text-600 font-medium line-height-3">Sudah punyai akaun?</span>
+        <img class="logo-img" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
+        <div class="text-200 text-3xl font-semibold mb-3 mt-3">Daftar Akaun</div>
+        <span class="text-800 font-medium line-height-3">Sudah punyai akaun?</span>
         <router-link
           v-bind:to="{ name: 'login' }"
-          class="font-medium no-underline ml-2 text-blue-500 cursor-pointer"
+          class="font-medium no-underline ml-2 text-gray-700 cursor-pointer"
           >Log masuk sekarang!
         </router-link>
       </div>
-      <h5 class="text-200">Daftar Akaun</h5>
+      <!-- <h5 class="text-200">Daftar Akaun</h5> -->
       <div class="grid">
         <div class="col-12 lg:col-6">
           <div class="field text-200">
@@ -40,15 +40,16 @@
           </div>
         </div>
         <div class="col-12 lg:col-6">
-          <div class="field">
-            <!-- <label for="nokp">No Kad Pengenalan</label> -->
-            <select
+          <div class="field text-200">
+            <label for="nokp">No Kad Pengenalan</label>
+            <!-- <select
               class="p-0 mb-2 form-select"
               style="width: 190px; border: none"
             >
               <option selected value="nokp">No Kad Pengenalan</option>
               <option value="passpor">No Passport</option>
-            </select>
+            </select> -->
+          
             <InputText
               id="nokp"
               type="text"
@@ -232,9 +233,9 @@
             >
           </div>
         </div> -->
-        <div class="col-12">
+        <!-- <div class="col-12">
           <div class="field text-200">
-            <label for="frontic">Kad Pengenalan Hadapan</label>
+            <label for="frontic">Kad Pengenalan Hadapan</label> -->
             <!-- <FileUpload
               name="demo[]"
               url="./upload"
@@ -245,30 +246,29 @@
               :showCancelButton="false"
               v-model="form.images.file1"
             /> -->
-            <input
+            <!-- <input
               class="form-control"
               type="file"
               id="formFile"
               ref="formFileRef"
               @change="readImage()"
-            />
+            /> -->
             <!-- <InlineMessage class="mt-1" v-if="v$.form.images.file1.$error"
               >Kad pengenalan hadapan diperlukan</InlineMessage
-            >
-            </div>
-          </div>
+            > -->
+          <!-- </div>
         </div>
         <div class="col-12">
           <div class="field text-200">
             <label for="backic">Kad Pengenalan Belakang</label>
-            <input class="form-control" type="file" />
+            <input class="form-control" type="file" /> -->
             <!-- <InlineMessage class="mt-1" v-if="v$.form.images.file2.$error"
               >Kad pengenalan belakang diperlukan</InlineMessage
             > -->
-          </div>
-        </div>
+          <!-- </div>
+        </div> -->
         <div class="col-12">
-          <div class="mt-3 mb-1 text-500">
+          <div class="mt-3 mb-1 text-800">
             <label>
               <input type="checkbox" v-model="form.register_agree" />
               Setuju Dengan <terms-and-conditions></terms-and-conditions>
@@ -449,8 +449,22 @@ export default {
 
 <style scoped>
 
+.main-container {
+  /* background: linear-gradient(
+    135deg,
+    rgba(139, 198, 236, 0.3) 0%,
+    #9599e2 100%
+  ),
+  url("/src/assets/background_arrahn.jpg"); */
+  background-image: url("/src/assets/background-lelong.png");
+  /* background-color: #fec234; */
+  background-position: center;
+  background-size: cover;
+}
+
+
 .logo-img {
-  width: 70px;
+  width: 250px;
   height: 60px;
 }
 
diff --git a/src/components/layouts/TheHeader.vue b/src/components/layouts/TheHeader.vue
index bcdf8d1..9439882 100644
--- a/src/components/layouts/TheHeader.vue
+++ b/src/components/layouts/TheHeader.vue
@@ -5,8 +5,8 @@
     <div class="flex justify-content-between px-3 md:px-6 h-3rem flex-wrap main-color">
       <div class="flex align-items-center justify-content-center">
         <div class="company-title" type="button" v-on:click="toHome()">
-          <img class="logo-img mr-2" src="img/erahn-logo.png" alt="arrahn-logo" />
-          <div class="logo-title">E-Rahn Lelong</div>  
+          <img class="logo-img mr-2" src="img/e-rahn-lelong.png" alt="arrahn-logo" />
+          <!-- <div class="logo-title">E-Rahn Lelong</div>   -->
         </div>
       </div>
       <div class="flex align-items-center justify-content-center">
@@ -431,7 +431,7 @@ router-link:hover {
   padding: 25px 10px;
 }
 .main-color {
-  background-color: #eeeeee;
+  background-color: #333333;
 }
 
 .border-none {
@@ -457,7 +457,7 @@ router-link:hover {
   justify-content: center;
   align-items: center;
   color: #212223;
-  font-size: 1rem;
+  font-size: 3rem;
   font-weight: 500;
 }
 
@@ -484,7 +484,7 @@ router-link:hover {
   align-items: center;
   justify-content: center;
   height: 2.4rem;
-  color: #000000;
+  color: #eaf0f9;
   font-weight: 500;
   font-size: 1rem;
   transition: all 0.3s;
@@ -501,11 +501,11 @@ router-link:hover {
 .nav-button {
   text-decoration: none;
   margin: 0 1.5rem;
-  color: #000000;
+  color: #eaf0f9;
 }
 
 .nav-button:hover {
-  color: #000000;
+  color: #eaf0f9;
 }
 
 a.router-link-exact-active {
@@ -516,7 +516,7 @@ a.router-link-exact-active {
 }
 
 a.router-link-exact-active:hover {
-  color: #132a4f;
+  color: #000000;
 }
 
 .profile-title {