diff --git a/src/components/pages/BiayaLangsungPage.vue b/src/components/pages/BiayaLangsungPage.vue
index 5b5a8c2967ae17a9347406e39ad5bed3a6d421d5..041ffd1b806a13c55bc5ddc03d9689915e05079e 100644
--- a/src/components/pages/BiayaLangsungPage.vue
+++ b/src/components/pages/BiayaLangsungPage.vue
@@ -1,22 +1,76 @@
 <template>
-  <div>
-    Biaya Langsung
-  </div>
+  <b-container>
+    <b-breadcrumb class="bg-light" :items="items" :click="breadcrumbHandler"></b-breadcrumb>
+    <h2>ANGGARAN BIAYA LANGSUNG APBD JABAR</h2>
+    <b-row class="justify-content-md-center">
+      <b-col id="visualization" class="bg-light" cols="12" lg="8">
+        <visualization 
+          src="http://puu.sh/D6W1v.csv"
+          @click-handler="visualizationHandler"
+        />
+      </b-col>
+      <b-col cols="12" lg="4">
+        <b-card/>
+      </b-col>
+    </b-row>
+    <div id="comments-container">
+      <comments/>
+    </div>
+  </b-container>
 </template>
 
 <script>
+import SimpleCardContainer from '@/components/partials/SimpleCardContainer'
+import Comments from '@/components/partials/Comments'
+import Visualization from '@/components/partials/Visualization'
+
 export default {
   name: 'BiayaLangsung',
   components: {
-
+    'simple-card-container' : SimpleCardContainer,
+    'comments' : Comments,
+    'visualization' : Visualization,
   },
   data() {
     return {
-      
+      items: [
+        {
+          text: 'Semua Anggaran',
+          id: 0,
+          to: { name: 'SemuaAnggaran' }
+        },
+        {
+          text: 'Anggaran Biaya Langsung',
+          id: 1,
+          active: true
+        }
+      ]
     }
   },
   methods: {
-      
+    breadcrumbHandler(obj) {
+      console.log(obj)
+      // let item = this.items.pop()
+      // let id = item.id + 1
+      // item.active = false
+
+      // this.items.push(item)
+      // this.items.push({
+      //   text: 'Anggaran Biaya Langsung',
+      //   id: 1,
+      // })
+    },
+    visualizationHandler(id) {
+      if (id === '0') {
+        this.$router.push('/pendapatan')
+      } else if (id === '1') {
+        this.$router.push('/biaya-langsung')
+      } else if (id === '2') {
+        this.$router.push('/biaya-tidak-langsung')
+      } else if (id === '3') {
+        this.$router.push('/pembiayaan')
+      }
+    }
   },
   created : function() {
     this.$store.commit('changed','Anggaran Biaya Langsung')
@@ -28,4 +82,36 @@ export default {
 <style lang="scss" scoped>
 @import 'src/assets/css/style.scss';
 
+h2 {
+  color: $primary;
+  text-shadow: 0 5px 10px rgba(50, 50, 50, 0.25);
+  margin: 10px 10px; 
+}
+
+.container {
+  overflow-x: hidden;
+
+  #comments-container {
+    margin: 10px auto;
+    max-width: 800px;
+  }
+}
+
+#visualization {
+  min-height: 50vh;
+}
+
+.breadcrumb {
+  height: auto;
+  margin: 10px 0;
+  font-size: 0.9rem;
+  color: white;
+  background: $primary;
+}
+
+.breadcrumb-item + .breadcrumb-item:before {
+  color: #aaa;
+  content: ">>";
+}
+
 </style>
\ No newline at end of file