diff --git a/src/components/partials/DetailCard.vue b/src/components/partials/DetailCard.vue
index 5d52921133b26955a6b8a263647f299770e55c6c..49aeee219c067226ec130a7eb4b7a725e5ef83d0 100644
--- a/src/components/partials/DetailCard.vue
+++ b/src/components/partials/DetailCard.vue
@@ -13,14 +13,14 @@
           {{ "Rp "+ head.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') + ',00.-' }} 
         </b></h5> 
       </div>
-      <b-card-text class="text-left">
-        <div v-for="data in tail" :key=data.text>
-            {{ data.text }}
-          <div class="text-right"><b>
-            {{ "Rp "+ data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') + ',00.-' }}
-          </b></div>
-        </div>
-      </b-card-text>
+      <div class="content-anggaran" v-for="data in tail" :key=data.text>
+        <p class="text-center separator">â–¼</p>
+        {{ data.text }}
+        <div class="text-right"><b>
+          {{ "Rp "+ data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') + ',00.-' }}
+        </b></div>
+        <hr/>
+      </div>
     </b-card>
   </div>
 </template>
@@ -54,18 +54,28 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .card-body {
-    font-size: 1rem;
-    padding: 1rem;
+  font-size: 1rem;
+  padding: 0 1rem;
 }
 
 .card {
-    width : 100%;
-    margin-top : 10px;
-    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
+  width : 100%;
+  margin-top : 10px;
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.25);
 }
 
 .card-header {
   font-size: 1.25rem;
   padding: 0.2rem;
 }
+
+.separator {
+  color: #00000020;
+  margin-top: -0.45rem;
+  margin-bottom: 0;
+}
+
+hr {
+  margin-bottom: 0;
+}
 </style>
\ No newline at end of file