diff --git a/src/App.vue b/src/App.vue
index bc89e5bbfae5104184a782f2a5bef53d47d02875..eec3402f390043f27e8ed418bda7fd76b0145b29 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -17,8 +17,9 @@ export default {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
-  margin: 0;
+  margin:0;
   height: 100%;
+  margin-top: 100px;
 }
 
 html,
@@ -59,4 +60,8 @@ body {
 .clickable{
   cursor: pointer;
 }
+
+.content_nav_active {
+  margin-left: 250px !important; 
+} 
 </style>
diff --git a/src/components/header.vue b/src/components/header.vue
index 66a9edca08e33f30cdc871c81e25370801c196a2..8dafca220cfb533c71ed0684e0baed707a9493dd 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -1,6 +1,6 @@
 <template>
-  <div class="header sticky-sm-top">
-    <div class="container-fluid">
+  <div class="header fixed-top " v-bind:class="{ nav_active: nav_active }">
+    <div class="container-fluid"  >
       <div class="row justify-content-between">
         <div class="col align-self-center">
           <button
@@ -82,7 +82,8 @@ export default {
   },
   methods: {
     onclick() {
-      this.nav_active = !this.nav_active;
+      this.nav_active = !this.nav_active
+      document.getElementById("toggleNav").click()
     },
     showModal(){
 			this.isModalVisible = true;
@@ -137,6 +138,11 @@ export default {
 .header {
   margin-bottom: 5px;
   background-color: white;
+  margin-left:5px;
+  
+}
+.nav_active{
+  margin-left: 250px;
 }
 .btn {
   background-color: #6992b4;
diff --git a/src/components/sidebar.vue b/src/components/sidebar.vue
index e4a632093c5774a47093ad5eba108711a61a4dba..a737ffa4d1dec782cd54d1dd6137366295a9075e 100644
--- a/src/components/sidebar.vue
+++ b/src/components/sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="col-auto px-0 sticky-sm-top">
+  <div class="fixed-top">
     <!-- 
         <button  @click="setActive()" class="btn my-4 align-self-center" :class="{active_cont : isActive}" id="menu-btn">></button> -->
     <div id="sidebar" class="collapse collapse-horizontal show border-end">
diff --git a/src/views/UserIndex.vue b/src/views/UserIndex.vue
index 43eb68b369ee5ebca45645cc24594c81298fa5f7..8b7af354ce51ba078fd4c821531a7c0efd3cc5fa 100644
--- a/src/views/UserIndex.vue
+++ b/src/views/UserIndex.vue
@@ -1,5 +1,7 @@
 <template>
-  <div class="container-fluid">
+<div v-bind:class="{content_nav_active: nav_active}">
+  <button hidden="hidden" @click="this.nav_active = !this.nav_active" id="toggleNav"></button>
+  <div class="container-fluid ">
     <div class="row flex-nowrap">
       <Sidebar current_page="Karyawan"></Sidebar>
       <div class="col ps-md-2 pt-2">
@@ -86,6 +88,7 @@
       </div>
     </div>
   </div>
+</div>
 </template>
 
 <script>
@@ -155,7 +158,8 @@ export default {
       filter_type: "department_id",
       selected_filter: "",
       dept_last_page: 1,
-      jabatan: []
+      jabatan: [],
+      nav_active : true,
     };
   },
   methods: {