diff --git a/assets/data/contact/relationship.json b/assets/data/contact/relationship.json
new file mode 100644
index 0000000..83d6d11
--- /dev/null
+++ b/assets/data/contact/relationship.json
@@ -0,0 +1,46 @@
+[
+    {
+      "value": "BP",
+      "label": "Billing contact person"
+    },
+    {
+      "value": "CP",
+      "label": "Contact person"
+    },
+    {
+      "value": "EP",
+      "label": "Emergency contact person"
+    },
+    {
+      "value": "PR",
+      "label": "Person preparing referral"
+    },
+    {
+      "value": "E",
+      "label": "Employer"
+    },
+    {
+      "value": "C",
+      "label": "Emergency Contact"
+    },
+    {
+      "value": "F",
+      "label": "Federal Agency"
+    },
+    {
+      "value": "I",
+      "label": "Insurance Company"
+    },
+    {
+      "value": "N",
+      "label": "Next-of-Kin"
+    },
+    {
+      "value": "S",
+      "label": "State Agency"
+    },
+    {
+      "value": "U",
+      "label": "Unknown"
+    }
+  ]
\ No newline at end of file
diff --git a/components/Form/Lib/Contact.vue b/components/Form/Lib/Contact.vue
new file mode 100644
index 0000000..3aec696
--- /dev/null
+++ b/components/Form/Lib/Contact.vue
@@ -0,0 +1,33 @@
+<script setup>
+</script>
+<template>
+      <ListElement
+        name="contact"
+        :rules="['min:1']"
+        :min="1"
+        :max="1"
+        :initial="1"
+    >
+      <template #default="{ index }">
+        <ObjectElement
+          :name="index"
+        >
+        <GroupElement name="container2">
+            <GroupElement name="column1" :columns="{
+                container: 6,
+            }">
+                <FormLibRelationship/>
+            </GroupElement>
+            <GroupElement name="column_2" :columns="{
+                container: 6,
+            }">
+                <FormLibHumanName/>
+            </GroupElement>
+        </GroupElement>
+          <FormLibTelecom/>
+          <FormLibAddress/>
+          <FormLibGender/>
+        </ObjectElement>
+      </template>
+    </ListElement>
+  </template>
\ No newline at end of file
diff --git a/components/Form/Lib/Gender.vue b/components/Form/Lib/Gender.vue
new file mode 100644
index 0000000..1b0ed59
--- /dev/null
+++ b/components/Form/Lib/Gender.vue
@@ -0,0 +1,17 @@
+<template>
+     <RadiogroupElement
+      name="gender"
+      view="tabs"
+      label="Jenis Kelamin"
+      :items="[
+        {
+          value: 'male',
+          label: 'Laki-Laki',
+        },
+        {
+          value: 'female',
+          label: 'female',
+        },
+      ]"
+    />
+</template>
\ No newline at end of file
diff --git a/components/Form/Lib/Relationship.vue b/components/Form/Lib/Relationship.vue
new file mode 100644
index 0000000..2689942
--- /dev/null
+++ b/components/Form/Lib/Relationship.vue
@@ -0,0 +1,76 @@
+<script setup>
+// import items from '~/assets/data/contact/relationship.json'
+</script>
+<template>
+      <ListElement
+        name="relationship"
+        :rules="['min:1']"
+        :min="1"
+        :max="1"
+        :initial="1"
+    >
+      <template #default="{ index }">
+        <ObjectElement
+          :name="index"
+        >
+          <SelectElement
+            name="code"
+            :search="true"
+            :native="false"
+            input-type="search"
+            autocomplete="off"
+            placeholder="Hubungan Dengan Pasien"
+            :columns="{
+              container: 12,
+            }"
+            :items="[
+              {
+                value: 'BP',
+                label: 'Billing contact person',
+              },
+              {
+                value: 'CP',
+                label: 'Contact person',
+              },
+              {
+                value: 'EP',
+                label: 'Emergency contact person',
+              },
+              {
+                value: 'PR',
+                label: 'Person preparing referral',
+              },
+              {
+                value: 'E',
+                label: 'Employer',
+              },
+              {
+                value: 'C',
+                label: 'Emergency Contact',
+              },
+              {
+                value: 'F',
+                label: 'Federal Agency',
+              },
+              {
+                value: 'I',
+                label: 'Insurance Company',
+              },
+              {
+                value: 'N',
+                label: 'Next-of-Kin',
+              },
+              {
+                value: 'S',
+                label: 'State Agency',
+              },
+              {
+                value: 'U',
+                label: 'Unknown',
+              },
+            ]"
+          />
+        </ObjectElement>
+      </template>
+    </ListElement>
+  </template>
\ No newline at end of file
diff --git a/components/Form/Patient/Create.vue b/components/Form/Patient/Create.vue
index 62ba431..99ed1e9 100644
--- a/components/Form/Patient/Create.vue
+++ b/components/Form/Patient/Create.vue
@@ -1,5 +1,5 @@
-<script>
-import { FormLibAddress, FormLibHumanName, FormLibTelecom } from '#components'
+<script setup lang="ts">
+import { FormLibAddress, FormLibContact, FormLibHumanName, FormLibTelecom } from '#components'
 import Identifier from '../Lib/Identifier.vue'
 
 const data = ref('')
@@ -84,14 +84,15 @@ const handleResponse = (response, form$) => {
       <GroupElement name="column1" :columns="{
         container: 6,
       }">
-        <RadiogroupElement name="gender" view="tabs" label="Jenis Kelamin" :items="[
+      <FormLibGender />
+        <!-- <RadiogroupElement name="gender" view="tabs" label="Jenis Kelamin" :items="[
           {
             value: 'male',
             label: 'Laki-laki',
           },
           {
             value: 'female',
-            label: 'Perempuan',
+            label: 'female',
           },
           // {
           //   value: 'other',
@@ -101,7 +102,7 @@ const handleResponse = (response, form$) => {
           //   value: 'unknown',
           //   label: ' ',
           // },
-        ]" default="unknown" />
+        ]" default="unknown" /> -->
       </GroupElement>
       <GroupElement name="column_2" :columns="{
         container: 6,
@@ -177,14 +178,18 @@ const handleResponse = (response, form$) => {
     }" />
     <StaticElement name="divider_1" tag="hr" />
     <StaticElement name="addressTitle" tag="h2" content="Alamat" />
-    <FormLibAddress />
+    <FormLibAddress class="mt"/>
 
     <StaticElement name="divider_2" tag="hr" />
-    <StaticElement name="contactTitle" tag="h4" content="Kontak" />
-    <FormLibTelecom />
+    <StaticElement name="contactTitle" tag="h2" content="Kontak" />
+    <FormLibTelecom class="mt"/>
+    <StaticElement name="divider_2" tag="hr" />
+    <StaticElement name="contactTitle" tag="h2" content="Kontak Penanggung Jawab" />
+    <FormLibContact class="mt"/>
+
     <StaticElement name="divider_3" tag="hr" />
     <StaticElement name="communicationTitle" tag="h2" content="Komunikasi" />
-    <FormLibCommunication />
+    <FormLibCommunication class="mt"/>
     <GroupElement name="container" :columns="{
       default: {
         container: 7,
@@ -219,4 +224,10 @@ const handleResponse = (response, form$) => {
       </GroupElement>
     </GroupElement>
   </Vueform>
+  <p>{{ data }}</p>
 </template>
+<style>
+.mt{
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/components/Form/Practitioner/ListPractitioner.vue b/components/Form/Practitioner/ListPractitioner.vue
new file mode 100644
index 0000000..8a58c67
--- /dev/null
+++ b/components/Form/Practitioner/ListPractitioner.vue
@@ -0,0 +1,147 @@
+<script setup lang="ts">
+// import { ref } from 'vue'
+// import dataSample from '~/assets/data/coba.json'
+const cari = ref()
+const practitionerlist = ref([])
+const loading = ref(false)
+const data = async () => {
+  try {
+    loading.value= true
+    const response = await fetch("/api/practitioner/list")
+    const data = await response.json();
+    // console.log(data)
+    // console.log(response)
+    practitionerlist.value = data
+    // console.log(practitioners.value)
+  } catch (error) {
+    console.log(error)
+  }finally{
+    loading.value=false
+  }
+}
+onMounted(() =>{
+  setTimeout(() => {
+    loading.value = false;
+  }, 2000);
+  loading.value= true
+  data()
+})
+const Search = () => {
+  // console.log(cari)
+}
+// onM
+</script>
+
+<template>
+  <v-container fluid>
+    <h1>Daftar Praktisi</h1>
+
+    <v-row>
+      <v-col class="mt-5">
+        <v-text-field 
+          v-model="cari"
+          prepend-inner-icon="mdi-magnify"
+          label="Search"
+          variant="solo"
+          style="width: 400px"
+          @change="Search"
+        />
+      </v-col>
+    </v-row>
+    <v-row>
+      <template v-if="loading">
+        <v-col
+          v-for="(practitioner, index) in practitionerlist"
+          :key="index"
+          cols="6"
+          sm="6"
+          md="3"
+        >
+      <v-skeleton-loader
+        type="card"
+        height="300"
+        class="mx-auto"
+      />
+    </v-col>
+      </template>
+      <template v-else>
+      <v-col
+      v-for="(practitioner, index) in practitionerlist"
+          :key="index"
+          cols="6"
+          sm="6"
+          md="3"
+      >
+      <v-lazy
+        :min-height="200"
+        :options="{'threshold':0.5}"
+        transition="fade-transition"
+      >
+        <v-card
+          max-width="300"
+          elevation="3"
+          height="350"
+          class="hover-card d-flex flex-column justify-space-between"
+        
+          shaped
+        >
+          <v-card-text class="text-center">
+            <v-row justify="center" class="mt-2">
+              <!-- <v-avatar v-if="practitioner.gender == ''" size="100">
+                <v-img
+                  alt="image"
+                  src="https://cdn.vuetifyjs.com/images/john.png"
+                />
+              </v-avatar>
+              <v-avatar v-else size="100">
+                <v-img
+                  alt="image"
+                  src=""
+                />
+              </v-avatar> -->
+              <DivAvatar
+                        size="80"
+                        class="mr-3"
+                        :gender="practitioner.Jenis_kelamin == 'Laki-laki'? 'male':practitioner.Jenis_kelamin == 'Perempuan'?'female':''"
+                      />
+            </v-row>
+            <!-- {{ console.log(practitioner.Jenis_kelamin) }} -->
+            <v-row  class="justify-center">
+              <div class="text-h6 mb-0 mx-4">{{ practitioner.nama_lengkap }}</div>
+            </v-row>
+            <v-row class="justify-center">
+              <div>
+                <div class="text-overline mb-1">Dokter | {{ practitioner.Jenis_kelamin }}</div>
+                  <DivIconText
+                      icon="mdi-map-marker"
+                      :text="'Jl. Belakang Rumah Sakit Arief'"
+                    />
+                    <DivIconText
+                      icon="mdi-calendar"
+                      :text="'01-01-2000'"
+                    />
+                    <DivIconText
+                      icon="mdi-phone"
+                      :text="'081983293784'"
+                    />
+              </div>
+            </v-row>
+          </v-card-text>
+          <v-card-actions  class="d-flex justify-end mb-2">
+            <v-btn
+              color="deep-purple-accent-4"
+              variant="text"
+            >Detail <v-icon small class="ml-1">mdi-arrow-right</v-icon></v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-lazy>
+      </v-col>
+    </template>
+    </v-row>
+  </v-container>
+</template>
+<style>
+.hover-card:hover{
+  transform: translateY(-10px);
+}
+</style>
diff --git a/package-lock.json b/package-lock.json
index a7dafae..ffb4012 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,6 +6,7 @@
     "": {
       "hasInstallScript": true,
       "dependencies": {
+        "@mdi/font": "^7.4.47",
         "@pinia/nuxt": "^0.10.1",
         "@prisma/nuxt": "^0.3.0",
         "@vueform/nuxt": "^1.11.0",
@@ -1789,6 +1790,12 @@
         "node": "^18.17.0 || >=20.5.0"
       }
     },
+    "node_modules/@mdi/font": {
+      "version": "7.4.47",
+      "resolved": "https://registry.npmjs.org/@mdi/font/-/font-7.4.47.tgz",
+      "integrity": "sha512-43MtGpd585SNzHZPcYowu/84Vz2a2g31TvPMTm9uTiCSWzaheQySUcSyUH/46fPnuPQWof2yd0pGBtzee/IQWw==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@mongodb-js/saslprep": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@mongodb-js/saslprep/-/saslprep-1.2.1.tgz",
diff --git a/package.json b/package.json
index fba1117..ca763e6 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "packageManager": "pnpm@10.6.2",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev -p 3001  --host",
+    "dev": "nuxt dev -p 3000  --host",
     "generate": "nuxt generate",
     "postinstall": "nuxt prepare",
     "preview": "nuxt preview",
@@ -33,6 +33,7 @@
     "vuetify-nuxt-module": "^0.18.3"
   },
   "dependencies": {
+    "@mdi/font": "^7.4.47",
     "@pinia/nuxt": "^0.10.1",
     "@prisma/nuxt": "^0.3.0",
     "@vueform/nuxt": "^1.11.0",
@@ -45,4 +46,4 @@
     "pinia": "^3.0.1",
     "vuetify": "~3.6.15"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/listpractitioner.vue b/pages/listpractitioner.vue
new file mode 100644
index 0000000..c4e4bc4
--- /dev/null
+++ b/pages/listpractitioner.vue
@@ -0,0 +1,12 @@
+<script>
+import { VCard } from 'vuetify/components'
+
+definePageMeta({
+  title: 'Daftar Praktisi',
+  icon: ' mdi-doctor',
+  drawerIndex: 5,
+})
+</script>
+<template>
+    <FormPractitionerListPractitioner/>
+</template>
\ No newline at end of file
diff --git a/pages/pasiens/tambahPasien.vue b/pages/pasiens/tambahPasien.vue
index b8bb0da..36a80c6 100644
--- a/pages/pasiens/tambahPasien.vue
+++ b/pages/pasiens/tambahPasien.vue
@@ -9,12 +9,13 @@ definePageMeta({
 </script>
 <template>
   <v-card class="mx-auto" prepend-icon="mdi-account-injury-outline" subtitle="Isi dan lengkapi dengan data yang sesuai"
-    width="80%">
+    width="80%"
+    style="background-color: #f5f5f5">
     <template v-slot:title>
       <span class="font-weight-black">Formulir Pasien Baru</span>
     </template>
 
-    <v-card-text class="bg-surface-light pt-4">
+    <v-card-text style="background-color: white">
       <FormPatientCreate />
     </v-card-text>
   </v-card>
diff --git a/server/api/practitioner/list.get.ts b/server/api/practitioner/list.get.ts
new file mode 100644
index 0000000..0a3ea17
--- /dev/null
+++ b/server/api/practitioner/list.get.ts
@@ -0,0 +1,11 @@
+import axios from 'axios'
+export default defineEventHandler(async(event)=>{
+    console.log("masuk sini")
+    try {
+        const response = await axios.get("http://10.10.123.140:8084/api/practitioner/getdata")
+        // console.log(response)
+        return response.data
+    } catch (error) {
+        console.log(error)
+    }
+})
\ No newline at end of file