diff --git a/src/components/SimpleCard.vue b/src/components/SimpleCard.vue
new file mode 100644
index 0000000000000000000000000000000000000000..fd808dbdaa30febf35733d3f8187555d5a75f6d3
--- /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 0px;
+    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..d4055acbd7f8bad6fa24b7443684b8b0ec631fc8
--- /dev/null
+++ b/src/components/SimpleCardContainer.vue
@@ -0,0 +1,32 @@
+<template>
+<b-col cols="3">
+  <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>
+
+
+</style>
diff --git a/src/components/pages/LoginPage.vue b/src/components/pages/LoginPage.vue
index 15941fd521dccd1088fe1ee72ae2435283373a22..c2f91150c541fb413a4921616427c08be48f882a 100644
--- a/src/components/pages/LoginPage.vue
+++ b/src/components/pages/LoginPage.vue
@@ -97,7 +97,7 @@ export default {
     }
   },
   created : function() {
-    this.$store.commit('changed','Jenis Keuangan')
+    this.$store.commit('changed','Jenis Anggaran')
   },
   methods: {
     submitLogin: function(event) {
diff --git a/src/components/pages/SemuaAnggaran.vue b/src/components/pages/SemuaAnggaran.vue
index 2cae2a81a87eb321f127cf9b69741a2c21a75428..f282bb9351e439175115847e6d8e4803ce6f5b53 100644
--- a/src/components/pages/SemuaAnggaran.vue
+++ b/src/components/pages/SemuaAnggaran.vue
@@ -1,14 +1,19 @@
 <template>
-  <div>
-    Semua Anggaran
-  </div>
+  <b-container>
+    <b-row >
+        <b-col class="bg-dark" cols="9">
+        </b-col>
+        <simple-card-container/>
+    </b-row>
+  </b-container>
 </template>
 
 <script>
+import SimpleCardContainer from '@/components/SimpleCardContainer'
 export default {
   name: 'SemuaAnggaran',
   components: {
-
+      'simple-card-container' : SimpleCardContainer,
   },
   data() {
     return {
@@ -28,4 +33,7 @@ export default {
 <style lang="scss" scoped>
 @import 'src/assets/css/style.scss';
 
+.container {
+    max-width: 100%;
+}
 </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',
 })