diff --git a/src/components/pages/BiayaLangsungPage.vue b/src/components/pages/BiayaLangsungPage.vue
index b6788ab8ce6406d7255e3a614256e7299cab9f89..4c26a63a861f740189030b68fa71e6edc8f8d608 100644
--- a/src/components/pages/BiayaLangsungPage.vue
+++ b/src/components/pages/BiayaLangsungPage.vue
@@ -1,7 +1,7 @@
 <template>
   <b-container>
     <b-breadcrumb class="bg-light" :items="items"></b-breadcrumb>
-    <h2>ANGGARAN BIAYA LANGSUNG APBD JABAR</h2>
+    <h2>ANGGARAN BELANJA LANGSUNG APBD JABAR</h2>
     <b-row class="justify-content-md-center">
       <b-col id="visualization" class="bg-light" cols="12">
         <visualization 
@@ -16,7 +16,9 @@
         <detail-card  :detailAnggaran='items' />
       </b-col>
       <b-col id="anggaran-detail-card" cols="12" lg="6">
-        <simple-card-container-scroll  :dataBubble='data' />
+        <simple-card-container-scroll
+          :dataBubble='data'
+        />
       </b-col>
     </b-row>
     <b-col id="comments-container" cols="12" lg="8">
diff --git a/src/components/partials/DetailCard.vue b/src/components/partials/DetailCard.vue
index 78b3e64f5ca43183e110e24bca661fc4118e0f87..29ee08840390d56c213d7dd8fad0d74674e9dfa7 100644
--- a/src/components/partials/DetailCard.vue
+++ b/src/components/partials/DetailCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="placeholder">
-    <h4 class="font-weight-bold">
+    <h4 class="font-weight-bold title">
       Hierarki
     </h4>
     <b-card 
@@ -54,7 +54,9 @@ export default {
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style lang="scss" scoped>
+@import 'src/assets/css/style.scss';
+
 #placeholder {
   padding: 10px;
 }
@@ -64,6 +66,11 @@ export default {
   padding: 0 1rem;
 }
 
+.title {
+  color: $primary;
+  text-shadow: 0 5px 10px rgba(50, 50, 50, 0.25);
+}
+
 .card {
   width : 100%;
   margin-top : 10px;
diff --git a/src/components/partials/SimpleCardContainerScroll.vue b/src/components/partials/SimpleCardContainerScroll.vue
index 38a1eca21b6d20c4c03bc093a557fec0c73541d4..0b2f9c677908fdc69d4f4487ba4d23cf1a5e6f29 100644
--- a/src/components/partials/SimpleCardContainerScroll.vue
+++ b/src/components/partials/SimpleCardContainerScroll.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="placeholder">
-    <h4 class="font-weight-bold">
-      {{"Detail KEGIATAN"+ "(" + rows + ")" }}
+    <h4 class="font-weight-bold title">
+      {{"Detail (" + rows + ")" }}
     </h4>
     <b-row id="content-detail">
         <simple-card v-for="(data, index) in dataBubble" :key="data._id.$oid" :index="index" :jenisAnggaran="data.name" :totalAnggaran="data.value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, '.') +
@@ -41,6 +41,11 @@ b-col {
   margin: 0;
 }
 
+.title {
+  color: $primary;
+  text-shadow: 0 5px 10px rgba(50, 50, 50, 0.25);
+}
+
 #placeholder {
   width: 100%;
   padding: 10px;