diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 94ed2b08902b287280c635745ede93160c375435..f7ce79986a1b2ee5e3e0412d3a63c02a500b7ecb 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -20,7 +20,10 @@
 					This is title
 				</slot>
 				<button type="button" class="btn-close" @click="close">
-					X
+					<div style="padding: 10px 10px 10px 0px;">
+            <i class="icon ion-ios-close-outline" ></i>
+          </div>
+          
 				</button>
 			</header>
 
@@ -51,7 +54,7 @@
     left: 50%;
     right: 0;
     transform: translate(-50%, -50%);
-    background-color: rgba(0, 0, 0, 0.3);
+    background-color: rgba(0, 0, 0, 0);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -59,8 +62,11 @@
 
   .modal {
     background: #FFFFFF;
-    box-shadow: 2px 2px 20px 1px;
+    box-shadow: 1px 3px 7px rgba(0, 0, 0, 0.3);
+    border-radius:  20px;
+    border: 1px solid #6992b4;
     /* overflow-x: auto; */
+    overflow: hidden;
     width: 50%;
     height: 30%;
     display: flex;
@@ -82,7 +88,7 @@
   .modal-header {
     position: relative;
     border-bottom: 1px solid #eeeeee;
-    color: #4AAE9B;
+    color: #6992b4;
     justify-content: space-between;
   }
 
@@ -103,17 +109,17 @@
     right: 0;
     border: none;
     font-size: 20px;
-    padding: 10px;
+    
     cursor: pointer;
     font-weight: bold;
-    color: #4AAE9B;
+    color: #6992b4;
     background: transparent;
   }
 
   .btn-green {
     color: white;
-    background: #4AAE9B;
-    border: 1px solid #4AAE9B;
+    background: #6992b4;
+    border: 1px solid #6992b4;
     border-radius: 2px;
   }
 </style>
\ No newline at end of file
diff --git a/src/components/header.vue b/src/components/header.vue
index 2a13e12d628015bda8379be6858437164c251df5..fa56afd77523f437b0b31abca9ebbe833897b31e 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -36,6 +36,7 @@
               ></i>
             </button>
             <Name :name="this.name"/>
+            <!-- <h2 class="text-red" style="text-align: right">Hello, {{username}}</h2> -->
           </div>
         </div>
       </div>
@@ -69,7 +70,7 @@ export default {
     Modal,
     Name
   },
-  //props:{ name: String },
+  props:{ username: String },
   data() {
     return {
       nav_active: true,
@@ -98,15 +99,21 @@ export default {
     getProfile(){
       HTTP.get("users/profile").then((res)=>{
           if (res.data.success == true){
-          //console.log(res.data.data.profile)
+          console.log(res.data.data.profile)
           this.profile = res.data.data.profile
           this.name = res.data.data.profile.name
           //console.log(this.name)
       }})
     }
   },
+  // computed:{
+  //   getName(){
+  //     this.username = this.name
+  //     return this.username
+  //   }
+  // },
   mounted(){
-    this.getProfile()
+    this.getProfile();
   },
 };
 </script>
@@ -133,8 +140,8 @@ export default {
   background-color: transparent;
 }
 /* butuh buat akses class di dalem class modal */
-/* .profile-modal{
-  width: 100px;
-  height: 100px;
-} */
+.profile-modal{
+  width: 30%;
+  height: 60%;
+}
 </style>