diff --git a/app/assets/css/main.css b/app/assets/css/main.css
index 17502027..a25bddcb 100644
--- a/app/assets/css/main.css
+++ b/app/assets/css/main.css
@@ -16,8 +16,8 @@
   --primary-hover: 26, 92%, 65%;
 
   /* Secondary - Clean Blue */
-  --secondary: 210 50% 96%;
-  --secondary-foreground: 210 20% 20%;
+  --secondary: 40 70% 60%;
+  --secondary-foreground: 210 20% 100%;
   --muted: 210 25% 95%;
   --muted-foreground: 210 15% 50%;
 
diff --git a/app/components/pub/my-ui/confirmation/record-confirmation.vue b/app/components/pub/my-ui/confirmation/record-confirmation.vue
index a0455066..cff54b2b 100644
--- a/app/components/pub/my-ui/confirmation/record-confirmation.vue
+++ b/app/components/pub/my-ui/confirmation/record-confirmation.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import Confirmation from './confirmation.vue'
 
 interface RecordData {
   id: number | string
diff --git a/app/components/pub/my-ui/doc-entry/block.vue b/app/components/pub/my-ui/doc-entry/block.vue
index 4ff05d4c..bf76c327 100644
--- a/app/components/pub/my-ui/doc-entry/block.vue
+++ b/app/components/pub/my-ui/doc-entry/block.vue
@@ -60,7 +60,7 @@ const settingClass = computed(() => {
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
     ][getLabelSizeIdx(props.labelSize)]
   } else {
-    cls += ' gap-y-4 2xl:gap-y-5 [&_.label]:pb-1 [&_.label]:!pt-0 ';
+    cls += ' gap-y-2 2xl:gap-y-3 [&_.label]:pb-1 [&_.label]:!pt-0 ';
   }
   cls += ' [&:not(.preview)_.height-default]:pt-2 [&:not(.preview)_.height-default]:2xl:!pt-1.5 [&:not(.preview)_.height-compact]:!pt-1 '
   cls += '[&_textarea]:md:text-xs [&_textarea]:2xl:!text-sm '
diff --git a/app/components/pub/my-ui/modal/dialog.vue b/app/components/pub/my-ui/modal/dialog.vue
index 822991d4..974013a2 100644
--- a/app/components/pub/my-ui/modal/dialog.vue
+++ b/app/components/pub/my-ui/modal/dialog.vue
@@ -1,12 +1,16 @@
 <script setup lang="ts">
 import { Dialog } from '~/components/pub/ui/dialog'
+import DialogContent from '~/components/pub/ui/dialog/DialogContent.vue'
+import DialogDescription from '~/components/pub/ui/dialog/DialogDescription.vue'
 
 interface DialogProps {
   title: string
+  titleIcon?: string
+  titleClass?: string
   description?: string
   preventOutside?: boolean
   open?: boolean
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'full'
+  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full'
 }
 
 const props = withDefaults(defineProps<DialogProps>(), {
@@ -24,8 +28,9 @@ const sizeClass = computed(() => {
   const sizeMap = {
     sm: 'sm:max-w-[350px]',
     md: 'sm:max-w-[425px]',
-    lg: 'sm:max-w-[600px]',
-    xl: 'sm:max-w-[800px]',
+    lg: 'sm:max-w-[720px]',
+    xl: 'sm:max-w-[960px]',
+    '2xl': 'sm:max-w-[1200px]',
     full: 'sm:max-w-[95vw]',
   }
   return sizeMap[props.size]
@@ -46,10 +51,19 @@ const isOpen = computed({
       @pointer-down-outside="(e: any) => preventOutside && e.preventDefault()"
     >
       <DialogHeader>
-        <DialogTitle class="text-[20px]">{{ props.title }}</DialogTitle>
+        <DialogTitle :class="`text-sm 2xl:text-base font-semibold flex ${titleClass || ''}`">
+          <div class="me-2 pt-0.5">
+            <Icon v-if="props.titleIcon" :name="props.titleIcon" :class="`!pt-2`" />
+          </div>
+          <div>
+            {{ props.title }}
+          </div>
+        </DialogTitle>
         <DialogDescription v-if="props.description">{{ props.description }}</DialogDescription>
       </DialogHeader>
-      <slot />
+      <DialogDescription :class="sizeClass">
+        <slot />
+      </DialogDescription>
     </DialogContent>
   </Dialog>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-de-dr-su.vue b/app/components/pub/my-ui/nav-footer/ba-de-dr-su.vue
new file mode 100644
index 00000000..a4df2da3
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-de-dr-su.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'delete' | 'draft' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" />
+        Kembali
+      </Button>
+    </div>
+    <div>
+      <Button variant="destructive" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-x" />
+        Hapus
+      </Button>
+    </div>
+    <div>
+      <Button variant="secondary" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" />
+        Draft
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-primary" type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check" />
+        Submit
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-de-ed-pri.vue b/app/components/pub/my-ui/nav-footer/ba-de-ed-pri.vue
new file mode 100644
index 00000000..0d8fcfb2
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-de-ed-pri.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'delete' | 'print'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Edit
+      </Button>
+    </div>
+    <div>
+      <Button variant="destructive" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-trash" class="me-2 align-middle" />
+        Delete
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-teal-500" type="button" @click="onClick('print')">
+        <Icon name="i-lucide-printer" class="me-2 align-middle" />
+        Print
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-de-su.vue b/app/components/pub/my-ui/nav-footer/ba-de-su.vue
new file mode 100644
index 00000000..47246c4c
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba-de-su.vue
@@ -0,0 +1,44 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'delete' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" />
+        Kembali
+      </Button>
+    </div>
+    <div>
+      <Button variant="destructive" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-trash" />
+        Hapus
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check" />
+        Submit
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue b/app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue
index 78034463..67d5aec5 100644
--- a/app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-dr-su-pr.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'submit' | 'print'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'submit' | 'print'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,22 +21,30 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Draf
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('submit')">
-      <Icon name="i-lucide-check" class="me-2 align-middle" />
-      Submit
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('print')">
-      <Icon name="i-lucide-printer" class="me-2 align-middle" />
-      Print
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">``
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button  variant="secondary" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Draf
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check" class="me-2 align-middle" />
+        Submit
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-teal-500" type="button" @click="onClick('print')">
+        <Icon name="i-lucide-printer" class="me-2 align-middle" />
+        Print
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-dr-su.vue b/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
index 17dbd6dc..4598817b 100644
--- a/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'submit'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'submit'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,18 +21,24 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Draft
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('submit')">
-      <Icon name="i-lucide-check" class="me-2 align-middle" />
-      Submit
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left"  />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button variant="secondary" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" />
+        Draft
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('submit')">
+        <Icon name="i-lucide-check"  />
+        Submit
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-ed-de-pri.vue b/app/components/pub/my-ui/nav-footer/ba-ed-de-pri.vue
deleted file mode 100644
index 4a9d5268..00000000
--- a/app/components/pub/my-ui/nav-footer/ba-ed-de-pri.vue
+++ /dev/null
@@ -1,32 +0,0 @@
-<script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'delete' | 'print'
-
-const emit = defineEmits<{
-  (e: 'click', type: ClickType): void
-}>()
-
-function onClick(type: ClickType) {
-  emit('click', type)
-}
-</script>
-
-<template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Edit
-    </Button>
-    <Button class="bg-red-500" type="button" @click="onClick('delete')">
-      <Icon name="i-lucide-trash" class="me-2 align-middle" />
-      Delete
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('print')">
-      <Icon name="i-lucide-printer" class="me-2 align-middle" />
-      Print
-    </Button>
-  </div>
-</template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-ed-de.vue b/app/components/pub/my-ui/nav-footer/ba-ed-de.vue
index fabaa425..cc607ac0 100644
--- a/app/components/pub/my-ui/nav-footer/ba-ed-de.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-ed-de.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'delete'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'delete'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,18 +21,24 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Edit
-    </Button>
-    <Button class="bg-red-500" type="button" @click="onClick('delete')">
-      <Icon name="i-lucide-trash" class="me-2 align-middle" />
-      Delete
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button class="bg-gray-400" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Edit
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-red-500" type="button" @click="onClick('delete')">
+        <Icon name="i-lucide-trash" class="me-2 align-middle" />
+        Delete
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-ed-pri.vue b/app/components/pub/my-ui/nav-footer/ba-ed-pri.vue
index 97bf62de..331c30af 100644
--- a/app/components/pub/my-ui/nav-footer/ba-ed-pri.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-ed-pri.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'draft' | 'print'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'draft' | 'print'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,18 +21,24 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button class="bg-gray-400" type="button" @click="onClick('cancel')">
-      <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
-      Back
-    </Button>
-    <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
-      <Icon name="i-lucide-file" class="me-2" />
-      Edit
-    </Button>
-    <Button class="bg-primary" type="button" @click="onClick('print')">
-      <Icon name="i-lucide-printer" class="me-2 align-middle" />
-      Print
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button class="bg-gray-400" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-orange-500" variant="outline" type="button" @click="onClick('draft')">
+        <Icon name="i-lucide-file" class="me-2" />
+        Edit
+      </Button>
+    </div>
+    <div>
+      <Button class="bg-primary" type="button" @click="onClick('print')">
+        <Icon name="i-lucide-printer" class="me-2 align-middle" />
+        Print
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-ed.vue b/app/components/pub/my-ui/nav-footer/ba-ed.vue
index ae455a81..aebd4296 100644
--- a/app/components/pub/my-ui/nav-footer/ba-ed.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-ed.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'edit'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'edit'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,29 +21,18 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button
-      class="bg-gray-400"
-      type="button"
-      @click="onClick('cancel')"
-    >
-      <Icon
-        name="i-lucide-arrow-left"
-        class="me-2 align-middle"
-      />
-      Back
-    </Button>
-    <Button
-      class="bg-orange-500"
-      variant="outline"
-      type="button"
-      @click="onClick('edit')"
-    >
-      <Icon
-        name="i-lucide-file"
-        class="me-2 align-middle"
-      />
-      Edit
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('back')">
+        <Icon name="i-lucide-arrow-left" class="me-2 align-middle" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button @click="onClick('edit')">
+        <Icon name="i-lucide-file" class="me-2 align-middle" />
+        Edit
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ba-su.vue b/app/components/pub/my-ui/nav-footer/ba-su.vue
index 9db66bb4..613cac85 100644
--- a/app/components/pub/my-ui/nav-footer/ba-su.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-su.vue
@@ -1,5 +1,15 @@
 <script setup lang="ts">
-type ClickType = 'cancel' | 'submit'
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'back' | 'submit'
 
 const emit = defineEmits<{
   (e: 'click', type: ClickType): void
@@ -11,26 +21,18 @@ function onClick(type: ClickType) {
 </script>
 
 <template>
-  <div class="m-2 flex gap-2 px-2">
-    <Button
-      class="bg-gray-400"
-      @click="onClick('cancel')"
-    >
-      <Icon
-        name="i-lucide-arrow-left"
-        class="me-2 align-middle"
-      />
-      Back
-    </Button>
-    <Button
-      class="bg-primary"
-      @click="onClick('submit')"
-    >
-      <Icon
-        name="i-lucide-check"
-        class="me-2 align-middle"
-      />
-      Submit
-    </Button>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost"@click="onClick('back')" >
+        <Icon name="i-lucide-arrow-left" class="" />
+        Back
+      </Button>
+    </div>
+    <div>
+      <Button @click="onClick('submit')">
+        <Icon name="i-lucide-check" class="" />
+        Submit
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/pub/my-ui/nav-footer/ca-ed-su.vue b/app/components/pub/my-ui/nav-footer/ca-ed-su.vue
new file mode 100644
index 00000000..1f0f5915
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ca-ed-su.vue
@@ -0,0 +1,55 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'cancel' | 'edit' | 'submit'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button
+        variant="destructive"
+        type="button"
+        @click="onClick('cancel')"
+        >
+        <Icon name="i-lucide-x"  />
+        {{ smallMode ? '' : 'Batal' }}
+      </Button>
+    </div>
+    <div>
+      <Button
+        variant="secondary"
+        type="button"
+        @click="onClick('edit')"
+      >
+        <Icon name="i-lucide-pencil" />
+        {{ smallMode ? '' : 'Edit' }}
+      </Button>
+    </div>
+    <div>
+      <Button
+        type="button"
+        @click="onClick('submit')"
+      >
+        <Icon name="i-lucide-check"  />
+        {{ smallMode ? '' : 'Submit' }}
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/ca-sa.vue b/app/components/pub/my-ui/nav-footer/ca-sa.vue
new file mode 100644
index 00000000..cbd5ef7f
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ca-sa.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'cancel' | 'save'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('cancel')">
+        <Icon name="i-lucide-x"  />
+        Batal
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('save')">
+        <Icon name="i-lucide-check"  />
+        Simpan
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/nav-footer/cl-sa.vue b/app/components/pub/my-ui/nav-footer/cl-sa.vue
new file mode 100644
index 00000000..fea6fc56
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/cl-sa.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+const props = defineProps<{
+  smallMode?: boolean
+  defaultClass?: string
+  class?: string
+}>()
+
+const defaultClass = props.defaultClass ?? 'm-2 flex gap-2 px-2'
+const additionalClass = props.class ?? ''
+const btnClass = props.smallMode ? '[&_button]:w-7 [&_button]:h-7 [&_button]:2xl:w-8 [&_button]:2xl:h-9 [&_button]:!p-0' : ''
+
+type ClickType = 'close' | 'save'
+
+const emit = defineEmits<{
+  (e: 'click', type: ClickType): void
+}>()
+
+function onClick(type: ClickType) {
+  emit('click', type)
+}
+</script>
+
+<template>
+  <div :class="`${defaultClass} ${additionalClass} ${btnClass}`">
+    <div>
+      <Button variant="ghost" type="button" @click="onClick('close')">
+        <Icon name="i-lucide-x"  />
+        Tutup
+      </Button>
+    </div>
+    <div>
+      <Button type="button" @click="onClick('save')">
+        <Icon name="i-lucide-check"  />
+        Simpan
+      </Button>
+    </div>
+  </div>
+</template>
diff --git a/app/components/pub/ui/button/index.ts b/app/components/pub/ui/button/index.ts
index c1aa89a8..c4063089 100644
--- a/app/components/pub/ui/button/index.ts
+++ b/app/components/pub/ui/button/index.ts
@@ -12,7 +12,7 @@ export const buttonVariants = cva(
         destructive:
           'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
         outline:
-          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+          'border border-slate-300 dark:border-slate-600 bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
         secondary:
           'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
diff --git a/app/components/pub/ui/dialog/DialogContent.vue b/app/components/pub/ui/dialog/DialogContent.vue
index 5e9e8538..0c0fbf6b 100644
--- a/app/components/pub/ui/dialog/DialogContent.vue
+++ b/app/components/pub/ui/dialog/DialogContent.vue
@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       v-bind="forwarded"
       :class="
         cn(
-          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-5 2xl:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-2 2x:gap-3 border bg-background p-5 2xl:p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
           props.class,
         )"
     >
diff --git a/app/components/pub/ui/dialog/DialogDescription.vue b/app/components/pub/ui/dialog/DialogDescription.vue
index 3444c492..c7ac62d1 100644
--- a/app/components/pub/ui/dialog/DialogDescription.vue
+++ b/app/components/pub/ui/dialog/DialogDescription.vue
@@ -19,7 +19,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 <template>
   <DialogDescription
     v-bind="forwardedProps"
-    :class="cn('text-sm text-muted-foreground', props.class)"
+    :class="cn('text-sm', props.class)"
   >
     <slot />
   </DialogDescription>
diff --git a/app/composables/useQueryParam.ts b/app/composables/useQueryParam.ts
new file mode 100644
index 00000000..29674b88
--- /dev/null
+++ b/app/composables/useQueryParam.ts
@@ -0,0 +1,32 @@
+import { useRoute, useRouter } from 'vue-router'
+
+export function useQueryParam(key: string = 'mode') {
+  const route = useRoute()
+  const router = useRouter()
+
+  const getQueryParam = (key: string) => {
+    return route.query[key]
+  }
+
+  const setQueryParam = (key: string, val: string) => {
+    router.replace({
+      path: route.path,
+      query: {
+        ...route.query,
+        [key]: val === 'list' ? undefined : val,
+      },
+    })
+  }
+
+  const setQueryParams = (keyVal: Record<string, string>) => {
+    router.replace({
+      path: route.path,
+      query: {
+        ...route.query,
+        ...keyVal,
+      },
+    })
+  }
+
+  return { getQueryParam, setQueryParam, setQueryParams}
+}
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 28565a50..3a52b22e 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -66,6 +66,13 @@ export const timeUnitCodes: Record<string, string> = {
   year: 'Tahun',
 }
 
+export const bigTimeUnitCodes: Record<string, string> = {
+  day: 'Hari',
+  week: 'Minggu',
+  month: 'Bulan',
+  year: 'Tahun',
+}
+
 export const dischargeMethodCodes: Record<string, string> = {
   home: "Pulang",
   "home-request": "Pulang Atas Permintaan Sendiri",