diff --git a/src/components/common/AppFooter.vue b/src/components/common/AppFooter.vue
index 9b81a89..0b90b57 100644
--- a/src/components/common/AppFooter.vue
+++ b/src/components/common/AppFooter.vue
@@ -1,11 +1,26 @@
 <template>
-  <ion-footer>
+  <ion-footer class="shadow-none">
     <ion-toolbar class="bg-transparent">
-      <ion-title class="text-white w-full text-center text-sm mb-4">PT Karya Digital Manufacturing</ion-title>
+      <ion-title class="w-full text-center text-sm mb-4" :class="getTextColor()">PT Karya Digital
+        Manufacturing</ion-title>
     </ion-toolbar>
   </ion-footer>
 </template>
 
 <script setup lang="ts">
-  import { IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+import { IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+const props = defineProps({
+  color: { type: String, default: 'neutral' }
+})
+
+function getTextColor() {
+  const { color } = props;
+  if (color === 'black') {
+    return 'text-black'
+  }
+  if (color === 'white') {
+    return 'text-white'
+  }
+  return `text-${color}-500`
+}
 </script>
\ No newline at end of file