diff --git a/src/components/SimpleCard.vue b/src/components/SimpleCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..6471063491987beb431396010d734017fae1f92a
--- /dev/null
+++ b/src/components/SimpleCard.vue
@@ -0,0 +1,44 @@
+<template>
+  <div>
+    <b-card bg-variant="info" text-variant="white" >
+        <b-card-text>
+            {{ jenisAnggaran }}
+            <br>
+            <b>{{ total }}</b>
+        </b-card-text>
+      </b-card>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'SimpleCard',
+  props : ['jenisAnggaran','totalAnggaran'],
+  data() {
+      return {
+        total : "Rp "+this.totalAnggaran
+      }
+  },
+  methods : {
+    
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+.card-body {
+    font-size: 1.25rem;
+    padding: 1rem 1.25rem;
+
+}
+
+.card {
+    width : 100%;
+    margin : 15px 25px;
+    padding: 0.5rem 0.25rem;
+    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+}
+</style>
diff --git a/src/components/SimpleCardContainer.vue b/src/components/SimpleCardContainer.vue
new file mode 100644
index 0000000000000000000000000000000000000000..7aa11f4319069381cabee49c65e5410367897ee9
--- /dev/null
+++ b/src/components/SimpleCardContainer.vue
@@ -0,0 +1,35 @@
+<template>
+<b-col cols="4">
+  <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="1.000.000.000.000,00.-"/>
+  <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="1.000.000.000.000,00.-"/>
+  <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="1.000.000.000.000,00.-"/>
+  <simple-card jenisAnggaran="PENDAPATAN" totalAnggaran="1.000.000.000.000,00.-"/>
+</b-col>
+</template>
+
+<script>
+import SimpleCard from './SimpleCard'
+
+export default {
+  name: 'SimpleCardContainer',
+  data() {
+      return {
+      }
+  },
+  components: {
+      'simple-card':SimpleCard,
+  },
+  methods : {
+    
+  },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.container {
+    padding: 0;
+    margin: 0;
+}
+
+</style>
diff --git a/src/components/pages/SemuaAnggaran.vue b/src/components/pages/SemuaAnggaran.vue
index 2cae2a81a87eb321f127cf9b69741a2c21a75428..ae7625f8d773f39f29f88d0a72c4c4bc726ad5ab 100644
--- a/src/components/pages/SemuaAnggaran.vue
+++ b/src/components/pages/SemuaAnggaran.vue
@@ -1,14 +1,20 @@
 <template>
-  <div>
-    Semua Anggaran
-  </div>
+  <b-container>
+    <b-row>
+        <simple-card-container/>
+        <!--ini untuk visualisasi pake d3js-->
+        <b-col cols="8">
+        </b-col>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
+import SimpleCardContainer from '@/components/SimpleCardContainer'
 export default {
   name: 'SemuaAnggaran',
   components: {
-
+      'simple-card-container' : SimpleCardContainer,
   },
   data() {
     return {
@@ -28,4 +34,8 @@ export default {
 <style lang="scss" scoped>
 @import 'src/assets/css/style.scss';
 
+.container {
+    padding: 0;
+    margin: 0;
+}
 </style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 944e9235c1f8e1b7e85635a83609feb29264dfad..c5fb5cb61f9547d6bd046d1f86a1cc75d5e7c976 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,8 @@ import Pembiayaan from '@/components/pages/PembiayaanPage'
 import BiayaTidakLangsung from '@/components/pages/BiayaTidakLangsungPage'
 import BiayaLangsung from '@/components/pages/BiayaLangsungPage'
 import SemuaAnggaran from '@/components/pages/SemuaAnggaran'
+import SimpleCardContainer from '@/components/SimpleCardContainer'
+
 Vue.use(Router)
 
 export default new Router({
@@ -46,6 +48,11 @@ export default new Router({
       name: 'SemuaAnggaran',
       component: SemuaAnggaran
     },
+    {
+      path: '/tes',
+      name: 'SimpleCardContainer',
+      component: SimpleCardContainer
+    },
   ],
   mode: 'history',
 })