diff --git a/.idea/.gitignore b/.idea/.gitignore
new file mode 100644
index 0000000..13566b8
--- /dev/null
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
diff --git a/.idea/New_Matdash2.iml b/.idea/New_Matdash2.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/.idea/New_Matdash2.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..b24b48f
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/New_Matdash2.iml" filepath="$PROJECT_DIR$/.idea/New_Matdash2.iml" />
+    </modules>
+  </component>
+</project>
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..35eb1dd
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>
\ No newline at end of file
diff --git a/components/Master/CardList.vue b/components/Master/CardList.vue
index 047cbf8..7529570 100644
--- a/components/Master/CardList.vue
+++ b/components/Master/CardList.vue
@@ -1,98 +1,34 @@
 <script setup lang="ts">
-import {Icon} from "@iconify/vue";
+import { Icon } from "@iconify/vue";
+import { boolean } from "zod/v4";
+
+const props = withDefaults(defineProps<{
+  item: Record<string, any>;
+}>(), {
+  item: () => ({}),
+});
+const emit = defineEmits(['detail']);
+const state = ref(false)
 
-withDefaults(
-    defineProps<{
-        item: Object;
-        // type: string;
-    }>(),
-    {
-        item: () => ({}),
-        // type: () => ({}),
-    }
-)
-const emit = defineEmits(["detail"]);
 </script>
 <template>
-    <v-card
-            elevation="10"
-            :class="[
-              'mx-auto',
-              item.status === 'planned'
-                ? ''
-                : item.status === 'in-progress'
-                ? 'bg-info'
-                : item.status === 'completed'
-                ? 'bg-success'
-                : item.status === 'cancelled'
-                ? 'bg-error'
-                : '',
-            ]"
-          >
-            <template v-slot:prepend>
-              <v-avatar
-                size="50"
-                :class="[
-                  'mx-auto rounded-md',
-                  item.status === 'planned'
-                    ? ''
-                    : item.status === 'in-progress'
-                    ? 'bg-info'
-                    : item.status === 'completed'
-                    ? 'bg-success'
-                    : item.status === 'cancelled'
-                    ? 'bg-error'
-                    : '',
-                ]"
-              >
-                <Icon
-                  icon="solar:user-circle-broken"
-                  :class="[
-                    item.status === 'planned'
-                      ? 'text-primary'
-                      : item.status === 'in-progress'
-                      ? 'text-primary'
-                      : item.status === 'completed'
-                      ? 'text-light'
-                      : item.status === 'cancelled'
-                      ? 'text-light'
-                      : '',
-                  ]"
-                  height="36"
-                />
-              </v-avatar>
-            </template>
-            <template v-slot:title>
-                <h3>{{item.display}}</h3>
-              <!-- <h3>{{ item.subject.display }}</h3> -->
-            </template>
-            <template v-slot:subtitle> </template>
-            <template v-slot:text>
-              <div class="pl-3">
-                <div class="align-center d-flex">
-                  <!-- <Icon icon="mdi:doctor" class="text-primary" height="25" />
-                  <h4>actor</h4> -->
-                  <!-- <h4>{{ item.participant[0].actor.display }}</h4> -->
-                </div>
-              </div>
-              <div class="pl-3 pt-2">
-                <div class="align-center d-flex">
-                  <!-- <Icon
-                    icon="mdi:hospital-marker"
-                    class="text-primary"
-                    height="25"
-                  /> -->
-                  <!-- <h4>location</h4> -->
-                  <!-- <h4>Sps. {{ item.location[0].location.display }}</h4> -->
-                </div>
-              </div>
-            </template>
-            <template v-slot:actions>
-              <v-btn color="primary" class="ms-auto" @click="emit('detail', props?.item)">Detail</v-btn>
-               <!-- <v-btn v-for="itemButton in showButtons" @click="$emit(itemButton.tipe, props?.item)" :color="itemButton.color" class="ms-auto">
-                    <v-icon :color="itemButton.color">{{ itemButton.icon }}</v-icon>
-                    {{ itemButton.text }}
-                </v-btn> -->
-            </template>
-          </v-card>
+  <v-card elevation="10" style="overflow: hidden;min-width: 300px;" @click="state = true">
+    <template v-slot:prepend>
+      <v-avatar size="50">
+        <Icon icon="solar:user-circle-broken" height="32" />
+      </v-avatar>
+    </template>
+    <template v-slot:title>
+      <h4>{{ item.display }}</h4>
+      <!-- <h3>{{ item.subject.display }}</h3> -->
+    </template>
+    <!-- <template v-slot:subtitle> </template> -->
+
+    <!-- <template v-slot:actions>
+      <v-btn color="primary" class="ms-auto" @click="emit('detail', props?.item)">Detail</v-btn>
+
+    </template> -->
+  </v-card>
+
+  <MasterDialogModal v-if="state" :stateValue="state" @stateValue="val => state = val" />
 </template>
\ No newline at end of file
diff --git a/components/Master/DialogModal.vue b/components/Master/DialogModal.vue
new file mode 100644
index 0000000..f245f9c
--- /dev/null
+++ b/components/Master/DialogModal.vue
@@ -0,0 +1,112 @@
+<script lang="ts" setup>
+import { ref, watch, defineProps } from 'vue';
+
+const props = defineProps({
+  stateValue: { type: Boolean, required: true }
+});
+
+const isActive = ref(props.stateValue);
+// const emits = defineEmits({
+//   stateValue: false
+// });
+
+
+// Watch for changes in props.stateValue to update isActive
+watch(() => props.stateValue, (newValue) => {
+  isActive.value = newValue;
+});
+</script>
+
+
+<template>
+  <div class="pa-4 text-center">
+    <v-dialog max-width="800" v-model="isActive" persistent>
+      <!-- <template v-slot:activator="{ props: activatorProps }">
+        <v-btn v-bind="activatorProps" text="Open Dialog"></v-btn>
+      </template> -->
+
+      <template v-slot:default="{ isActive }">
+        <v-card>
+          <template v-slot:title>
+            <div class="d-flex justify-lg-space-between">
+              <div>
+                <h3>List Menu</h3>
+              </div>
+              <div>
+                <v-btn icon="mdi-close" variant="flat" @click="$emit('stateValue', false)"></v-btn>
+              </div>
+            </div>
+          </template>
+          <template v-slot:text>
+            Lorem ipsum dolor sit amet, semper quis, sapien id natoque elit. Nostra urna at, magna at neque sed sed ante
+            imperdiet, dolor mauris cursus velit, velit non, sem nec. Volutpat sem ridiculus placerat leo, augue in,
+            duis erat proin condimentum in a eget, sed fermentum sed vestibulum varius ac, vestibulum volutpat orci ut
+            elit eget tortor. Ultrices nascetur nulla gravida ante arcu. Pharetra rhoncus morbi ipsum, nunc tempor
+            debitis, ipsum pellentesque, vitae id quam ut mauris dui tempor, aptent non. Quisque turpis. Phasellus quis
+            lectus luctus orci eget rhoncus. Amet donec vestibulum mattis commodo, nulla aliquet, nibh praesent,
+            elementum nulla. Sit lacus pharetra tempus magna neque pellentesque, nulla vel erat.
+
+            <br>
+
+            Fringilla tempor felis augue magna. Cum arcu a, id vitae. Pellentesque pharetra in cras sociis adipiscing
+            est. Nibh nec mattis at maecenas, nisl orci aliquam nulla justo egestas venenatis, elementum duis vel porta
+            eros, massa vitae, eligendi imperdiet amet. Nec neque luctus suscipit, justo sem praesent, ut nisl quisque,
+            volutpat torquent wisi tellus aliquam reprehenderit, curabitur cras at quis massa porttitor mauris. Eros sed
+            ultrices. Amet dignissim justo urna feugiat mauris litora, etiam accumsan, lobortis a orci suspendisse.
+            Semper ac mauris, varius bibendum pretium, orci urna nunc ullamcorper auctor, saepe sem integer quam, at
+            feugiat egestas duis. Urna ligula ante. Leo elementum nonummy. Sagittis mauris est in ipsum, nulla amet non
+            justo, proin id potenti platea posuere sit ut, nunc sit erat bibendum. Nibh id auctor, ab nulla vivamus
+            ultrices, posuere morbi nunc tellus gravida vivamus.
+
+            <br>
+
+            Mauris nec, facilisi quam fermentum, ut mauris integer, orci tellus tempus diam ut in pellentesque. Wisi
+            faucibus tempor et odio leo diam, eleifend quis integer curabitur sit scelerisque ac, mauris consequat
+            luctus quam penatibus fringilla dis, vitae lacus in, est eu ac tempus. Consectetuer amet ipsum amet dui, sed
+            blandit id sed. Tellus integer, dignissim id pede sodales quis, felis dolorem id mauris orci, orci tempus
+            ut. Nullam hymenaeos. Curabitur in a, tortor ut praesent placerat tincidunt interdum, ac dignissim metus
+            nonummy hendrerit wisi, etiam ut.
+
+            <br>
+
+            Semper praesent integer fusce, tortor suspendisse, augue ligula orci ante asperiores ullamcorper. In sit per
+            mi sed sed, mi vestibulum mus nam, morbi mauris neque vitae aliquam proin senectus. Ac amet arcu mollis ante
+            congue elementum, inceptos eget optio quam pellentesque quis lobortis, sollicitudin sed vestibulum
+            sollicitudin, lectus parturient nullam, leo orci ligula ultrices. At tincidunt enim, suspendisse est sit sem
+            ac. Amet tellus molestie est purus magna augue, non etiam et in wisi id. Non commodo, metus lorem facilisi
+            lobortis ac velit, montes neque sed risus consectetuer fringilla dolor. Quam justo et integer aliquam,
+            cursus nulla enim orci, nam cursus adipiscing, integer torquent non, fringilla per maecenas. Libero ipsum
+            sed tellus purus et. Duis molestie placerat erat donec ut. Dolor enim erat massa faucibus ultrices in, ante
+            ultricies orci lacus, libero consectetuer mauris magna feugiat neque dapibus, donec pretium et. Aptent dui,
+            aliquam et et amet nostra ligula.
+
+            <br>
+
+            Augue curabitur duis dui volutpat, tempus sed ut pede donec. Interdum luctus, lectus nulla aenean elit, id
+            sit magna, vulputate ultrices pellentesque vel id fermentum morbi. Tortor et. Adipiscing augue lorem cum non
+            lacus, rutrum sodales laoreet duis tortor, modi placerat facilisis et malesuada eros ipsum, vehicula tempus.
+            Ac vivamus amet non aliquam venenatis lectus, sociosqu adipiscing consequat nec arcu odio. Blandit orci nec
+            nec, posuere in pretium, enim ut, consectetuer nullam urna, risus vel. Nullam odio vehicula massa sed, etiam
+            sociis mauris, lacus ullamcorper, libero imperdiet non sodales placerat justo vehicula. Nec morbi imperdiet.
+            Fermentum sem libero iaculis bibendum et eros, eget maecenas non nunc, ad pellentesque. Ut nec diam
+            elementum interdum. Elementum vitae tellus lacus vitae, ipsum phasellus, corporis vehicula in ac sed massa
+            vivamus, rutrum elit, ultricies metus volutpat.
+
+            <br>
+
+            Semper wisi et, sollicitudin nunc vestibulum, cursus accumsan nunc pede tempus mi ipsum, ligula sed. Non
+            condimentum ac dolor sit. Mollis eu aliquam, vel mattis mollis massa ut dolor ante, tempus lacinia arcu.
+            Urna vestibulum lorem, nulla fermentum, iaculis ut congue ac vivamus. Nam libero orci, pulvinar nulla, enim
+            pellentesque consectetuer leo, feugiat rhoncus rhoncus vel. Magna sociosqu donec, dictum cursus ullamcorper
+            viverra. Ultricies quis orci lorem, suspendisse ut vestibulum integer, purus sed lorem pulvinar habitasse
+            turpis.
+          </template>
+
+          <v-card-actions>
+            <v-btn text @click="$emit('stateValue', false)">Disagree</v-btn>
+          </v-card-actions>
+        </v-card>
+      </template>
+    </v-dialog>
+  </div>
+</template>
diff --git a/pages/Setting/typeUser/index.vue b/pages/Setting/typeUser/index.vue
index 140d6ef..16877f3 100644
--- a/pages/Setting/typeUser/index.vue
+++ b/pages/Setting/typeUser/index.vue
@@ -19,17 +19,19 @@ const dialog = ref(false);
 <!-- ini list -->
 <template>
   <v-row no-gutters>
-    <div class="d-flex justify-space-between">
-      <template v-if="typeUser && typeUser.length > 0">
-        <v-col v-for="(item, index) in typeUser" :key="index">
-          <MasterCardList :item="item" @detail="detailType" />
-        </v-col>
-      </template>
-      <template v-else>
-        <div class="d-flex justify-content-center align-items-center">
-          <p>Tidak ada Pasien</p>
-        </div>
-      </template>
-    </div>
+    <v-col cols="12" md="4">
+      <div class="d-flex justify-space-between">
+        <template v-if="typeUser && typeUser.length > 0">
+          <v-col v-for="(item, index) in typeUser" :key="index">
+            <MasterCardList :item="item" @detail="detailType" />
+          </v-col>
+        </template>
+        <template v-else>
+          <div class="d-flex justify-content-center align-items-center">
+            <p>Tidak ada Pasien</p>
+          </div>
+        </template>
+      </div>
+    </v-col>
   </v-row>
 </template>