diff --git a/src/components/pages/BiayaLangsungPage.vue b/src/components/pages/BiayaLangsungPage.vue
index a3ae8f5f50c1aca6b71bd0372b13922334992e5a..2e65195f150309c49f0158850cefde5b0d388cba 100644
--- a/src/components/pages/BiayaLangsungPage.vue
+++ b/src/components/pages/BiayaLangsungPage.vue
@@ -4,6 +4,12 @@
     <h2>ANGGARAN BELANJA LANGSUNG APBD JABAR</h2>
     <b-row class="justify-content-md-center">
       <b-col id="visualization" class="bg-light" cols="12">
+        <div id="toggle" v-if="currentData.level == 1">
+          <b-button class="option-toggle float-right" @click="toggleHandler()">
+            <span v-if="toggleData">Tampilan per Dinas</span>
+            <span v-else>Tampilan per urusan</span>
+          </b-button>
+        </div>
         <visualization 
           v-bind:src="data"
           @click-handler="visualizationHandler"
@@ -48,13 +54,15 @@ export default {
   data() {
     return {
       data: [],
-      currentData: null,
-      items: []
+      currentData: {level: 0},
+      items: [],
+      toggleData: false
     }
   },
   methods: {
     visualizationHandler(idobj) {
       let id = idobj.$oid
+      this.toggleData = false
       this.$router.push({ name: 'BiayaLangsungId', params: { id: id } })
     },
     getLowestLevel(data) {
@@ -112,14 +120,20 @@ export default {
         item.to = { name: 'BiayaLangsungId', params: { id: item.id } }
       }
     },
-    getData(id) {
+    getData(id, updateBreadcrumbHandler) {
       let fetchData = {
         method: 'POST',
         body: JSON.stringify({ page_id: id }),
         headers: { "Content-Type": "application/json" }
       }
 
-      fetch(`${this.$store.state.baseUrl}/api/page/get`, fetchData)
+      let url = ''
+      if (this.toggleData)
+        url = `${this.$store.state.baseUrl}/api/page/get-grandchildren`
+      else
+        url = `${this.$store.state.baseUrl}/api/page/get`
+
+      fetch(url, fetchData)
       .then(response => response.json())
       .then(response => {
         if(response.status === 200) {
@@ -127,7 +141,8 @@ export default {
               return b.value - a.value;
           })
           this.currentData = response.data
-          this.breadcrumbHandler()
+          console.log(this.data)
+          if (updateBreadcrumbHandler) this.breadcrumbHandler()
         }
       })
     },
@@ -148,18 +163,23 @@ export default {
         }
       })
     },
+    toggleHandler() {
+      this.toggleData = !this.toggleData
+      this.getData(this.currentData._id.$oid, false)
+      this.$refs.viz.clear()
+    }
   },
   created : function() {
     this.$store.commit('changed','Anggaran Biaya Langsung')
     if (!this.$route.params.id) this.getDataFromTop()
-    else this.getData(this.$route.params.id)
+    else this.getData(this.$route.params.id, true)
   },
   watch: {
     $route(to, from) {
       if (!this.$route.params.id) this.getDataFromTop()
-      else this.getData(this.$route.params.id)
+      else this.getData(this.$route.params.id, true)
       this.$refs.viz.clear()
-    }
+    },
   }
 }
 </script>
@@ -184,7 +204,14 @@ h2 {
 }
 
 #visualization {
-  min-height: 50vh;
+  height: 50vh;
+
+  #toggle {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+    z-index: 3;
+  }
 }
 
 .breadcrumb {
diff --git a/src/components/partials/Visualization.vue b/src/components/partials/Visualization.vue
index 7a787120927a93781c029a62e2641516acf1b91b..6e43297ed0a1b42b1c289fc81f2b1ad3186376f8 100644
--- a/src/components/partials/Visualization.vue
+++ b/src/components/partials/Visualization.vue
@@ -20,23 +20,25 @@
               â–²
             </b-button>
             </div>
-            <b class="mr-3">Tata letak</b>
-            <b-form-group class="mb-0 mr-5">
-              <b-form-radio-group v-model="selected" name="position-options">
-                <b-form-radio value="normal">Normal</b-form-radio>
-                <b-form-radio value="sorted">Merata</b-form-radio>
-                <b-form-radio value="sorted-proportional">Proporsional</b-form-radio>
-                <b-form-radio value="separated">Pisah</b-form-radio>
-                <b-form-input v-if="selected == 'separated'" v-model="separator" type="range" :min="0" :max="src.length-1"></b-form-input>
-              </b-form-radio-group>
-            </b-form-group>
-            <b class="mr-3">Warna</b>
-            <b-form-group class="mb-0">
-              <b-form-radio-group v-model="selectedColor" name="color-options">
-                <b-form-radio value="random">Random</b-form-radio>
-                <b-form-radio value="valueDependent">Sesuai nilai</b-form-radio>
-              </b-form-radio-group>
-            </b-form-group>
+            <div id="option-choice">
+              <b class="mr-3">Tata letak</b>
+              <b-form-group class="mb-0 mr-5">
+                <b-form-radio-group v-model="selected" name="position-options">
+                  <b-form-radio value="normal">Normal</b-form-radio>
+                  <b-form-radio value="sorted">Merata</b-form-radio>
+                  <b-form-radio value="sorted-proportional">Proporsional</b-form-radio>
+                  <b-form-radio value="separated">Pisah</b-form-radio>
+                  <b-form-input v-if="selected == 'separated'" v-model="separator" type="range" :min="0" :max="src.length-1"></b-form-input>
+                </b-form-radio-group>
+              </b-form-group>
+              <b class="mr-3">Warna</b>
+              <b-form-group class="mb-0">
+                <b-form-radio-group v-model="selectedColor" name="color-options">
+                  <b-form-radio value="random">Random</b-form-radio>
+                  <b-form-radio value="valueDependent">Sesuai nilai</b-form-radio>
+                </b-form-radio-group>
+              </b-form-group>
+            </div>
           </div>
         </div>
       </div>
@@ -359,7 +361,6 @@ export default {
   #options-container {
     position: absolute;
     padding: 1rem;
-    background-color: #ffffffcc;
     z-index: 2;
 
     #options {
@@ -367,6 +368,11 @@ export default {
         color: white;
         margin-bottom: 5px;
       }
+
+      #option-choice {
+        background-color: #ffffffcc;
+        padding: 1rem;
+      }
     }
   }