diff --git a/app/components/app/encounter/quick-info.vue b/app/components/app/encounter/quick-info.vue
new file mode 100644
index 00000000..95fe57d1
--- /dev/null
+++ b/app/components/app/encounter/quick-info.vue
@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/custom-ui/doc-entry';
+
+defineProps<{
+  data: any
+}>()
+</script>
+
+<template>
+  <div class="w-full rounded-md border bg-white p-4 shadow-sm">
+    <!-- Data Pasien -->
+    <h2 class="mb-2 md:text-base 2xl:text-lg font-semibold">{{ 'data.patient.person.name' }} - {{ 'data.patient.number' }}</h2>
+
+    <div class="grid grid-cols-3" >
+      <div>
+        <DE.Block mode="preview" labelSize="large">
+          <DE.Cell>
+            <DE.Label>Tgl. Lahir</DE.Label>
+            <DE.Field>
+              {{ 'data.patient.person.birthDate' }}
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>Jenis Kelamin</DE.Label>
+            <DE.Field>
+              {{ 'data.patient.person.gender_code' }}
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>Alamat</DE.Label>
+            <DE.Field>
+              <div v-html="'data.patient.person .addresses[0].address'"></div>
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+      <div>
+        <DE.Block mode="preview" labelSize="large">
+          <DE.Cell>
+            <DE.Label>Tgl. Kunjungan</DE.Label>
+            <DE.Field>
+              {{ 'data.date' }}
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>Klinik</DE.Label>
+            <DE.Field>
+              {{ 'data.unit.name' }}
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>DPJP</DE.Label>
+            <DE.Field>
+              {{ 'data.doctor.name' }}
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+      <div>
+        <DE.Block mode="preview" labelSize="large">
+          <DE.Cell>
+            <DE.Label>Tgl. Kunjungan</DE.Label>
+            <DE.Field>
+              {{ 'data.date' }}
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>Klinik</DE.Label>
+            <DE.Field>
+              {{ 'data.unit.name' }}
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>DPJP</DE.Label>
+            <DE.Field>
+              {{ 'data.doctor.name' }}
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/components/app/patient/quick-info.vue b/app/components/app/patient/quick-info.vue
deleted file mode 100644
index 1f8943c2..00000000
--- a/app/components/app/patient/quick-info.vue
+++ /dev/null
@@ -1,75 +0,0 @@
-<script setup lang="ts">
-interface PatientData {
-  noRm: string
-  nama: string
-  alamat: string
-  tanggalKunjungan: string
-  klinik: string
-  tanggalLahir: string
-  jenisKelamin: string
-  jenisPembayaran: string
-  noBilling: string
-  dpjp: string
-}
-
-defineProps<{
-  data: PatientData
-}>()
-</script>
-
-<template>
-  <div class="w-full rounded-md border bg-white p-4 shadow-sm">
-    <!-- Data Pasien -->
-    <h2 class="mb-2 text-base font-semibold">Data Pasien:</h2>
-
-    <div class="grid grid-cols-1 gap-y-2 text-sm md:grid-cols-2 lg:grid-cols-3">
-      <!-- col 1 -->
-      <div class="grid grid-cols-[140px_auto]">
-        <span class="font-medium">No. RM</span>
-        <span>: {{ data.noRm }}</span>
-      </div>
-      <div class="grid grid-cols-[140px_auto]">
-        <span class="font-medium">Tanggal Kunjungan</span>
-        <span>: {{ data.tanggalKunjungan }}</span>
-      </div>
-      <div class="grid grid-cols-[100px_auto]">
-        <span class="font-medium">Klinik</span>
-        <span>: {{ data.klinik }}</span>
-      </div>
-
-      <!-- col 2 -->
-      <div class="grid grid-cols-[140px_auto]">
-        <span class="font-medium">Nama Pasien</span>
-        <span>: {{ data.nama }}</span>
-      </div>
-      <div class="grid grid-cols-[140px_auto]">
-        <span class="font-medium">Tanggal Lahir</span>
-        <span>: {{ data.tanggalLahir }}</span>
-      </div>
-      <div class="grid grid-cols-[140px_auto]">
-        <span class="font-medium">Jenis Pembayaran</span>
-        <span>: {{ data.jenisPembayaran }}</span>
-      </div>
-
-      <!-- col 3 -->
-      <div class="grid grid-cols-[140px_auto]">
-        <span class="font-medium">Alamat</span>
-        <span>: {{ data.alamat }}</span>
-      </div>
-      <div class="grid grid-cols-[140px_auto]">
-        <span class="font-medium">Jenis Kelamin</span>
-        <span>: {{ data.jenisKelamin }}</span>
-      </div>
-      <div class="grid grid-cols-[140px_auto]">
-        <span class="font-medium">No. Billing</span>
-        <span>: {{ data.noBilling }}</span>
-      </div>
-
-      <!-- full row -->
-      <div class="grid grid-cols-[140px_auto] lg:col-span-3">
-        <span class="font-medium">DPJP</span>
-        <span>: {{ data.dpjp }}</span>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index cdadbd63..eb69f690 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -40,7 +40,7 @@ const data = {
       </Button>
     </div>
 
-    <AppPatientQuickInfo :data="data" />
+    <AppEncounterQuickInfo :data="data" />
 
     <AppEncounterProcess :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
   </div>
diff --git a/app/components/pub/ui/textarea/Textarea.vue b/app/components/pub/ui/textarea/Textarea.vue
index a6b182a3..a946b49a 100644
--- a/app/components/pub/ui/textarea/Textarea.vue
+++ b/app/components/pub/ui/textarea/Textarea.vue
@@ -20,5 +20,5 @@ const modelValue = useVModel(props, 'modelValue', emits, {
 </script>
 
 <template>
-  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
+  <textarea v-model="modelValue" :class="cn('flex min-h-20 w-full rounded-md border border-slate-400 bg-white dark:bg-slate-950 px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50', props.class)" />
 </template>