diff --git a/src/lib/components/app-sidebar.svelte b/src/lib/components/app-sidebar.svelte
index 85caeaa..4c1a0aa 100644
--- a/src/lib/components/app-sidebar.svelte
+++ b/src/lib/components/app-sidebar.svelte
@@ -10,6 +10,9 @@
 	import SendIcon from "@lucide/svelte/icons/send";
 	import Settings2Icon from "@lucide/svelte/icons/settings-2";
 	import SquareTerminalIcon from "@lucide/svelte/icons/square-terminal";
+	import ArchiveIcon from "@lucide/svelte/icons/archive";
+	import FlaskConicalIcon from "@lucide/svelte/icons/flask-conical";
+	import BrickWallIcon from "@lucide/svelte/icons/brick-wall";
 
 	const data = {
 		user: {
@@ -73,7 +76,7 @@
 			{
 				title: "Sample",
 				url: "/dictionary",
-				icon: BookOpenIcon,
+				icon: ArchiveIcon,
 				submenus: [
 					{
 						title: "Container",
@@ -84,7 +87,7 @@
 			{
 				title: "Organization",
 				url: "/dictionary",
-				icon: BookOpenIcon,
+				icon: BrickWallIcon,
 				submenus: [
 					{
 						title: "Account",
@@ -111,7 +114,7 @@
 			{
 				title: "Test",
 				url: "/dictionary/test",
-				icon: BookOpenIcon,
+				icon: FlaskConicalIcon,
 			},
 		]
 	};
diff --git a/src/lib/components/dictionary/contact/api/contact-api.js b/src/lib/components/dictionary/contact/api/contact-api.js
new file mode 100644
index 0000000..d731a34
--- /dev/null
+++ b/src/lib/components/dictionary/contact/api/contact-api.js
@@ -0,0 +1,18 @@
+import { API } from '$lib/config/api.js';
+import { getById, searchWithParams, create, update } from '$lib/api/api-client';
+
+export async function getContacts(searchQuery) {
+  return await searchWithParams(API.CONTACT, searchQuery)
+}
+
+export async function getContact(searchQuery) {
+  return await getById(API.CONTACT, searchQuery)
+}
+
+export async function createContact(newContactForm) {
+  return await create(API.CONTACT, newContactForm)
+}
+
+export async function editContact(editContactForm) {
+  return await update(API.CONTACT, editContactForm)
+}
\ No newline at end of file
diff --git a/src/lib/components/dictionary/contact/config/contact-config.js b/src/lib/components/dictionary/contact/config/contact-config.js
new file mode 100644
index 0000000..3325e7d
--- /dev/null
+++ b/src/lib/components/dictionary/contact/config/contact-config.js
@@ -0,0 +1,72 @@
+import PlusIcon from "@lucide/svelte/icons/plus";
+import Settings2Icon from "@lucide/svelte/icons/settings-2";
+import PencilIcon from "@lucide/svelte/icons/pencil";
+import { API } from "$lib/config/api";
+
+export const searchFields = [
+    {
+        key: "Initial",
+        label: "Initial",
+        type: "text",
+    },
+];
+
+export const detailSections = [
+    {
+        title: "",
+        class: "grid grid-cols-1 md:grid-cols-2 gap-4",
+        groups: [
+            {
+                class: "space-y-3",
+                fields: [
+                    { key: "Title", label: "Title" },
+                    { key: "Initial", label: "Initial" },
+                    { key: "NameFirst", label: "First Name" },
+                    { key: "NameLast", label: "Last Name" },
+                    { key: "Birthdate", label: "Birthdate" },
+                ]
+            },
+            {
+                class: "space-y-3",
+                fields: [
+                    { key: "EmailAddress1", label: "Email Address 1" },
+                    { key: "EmailAddress2", label: "Email Address 2" },
+                    { key: "Phone", label: "Phone" },
+                    { key: "MobilePhone1", label: "Mobile Phone 1" },
+                    { key: "MobilePhone2", label: "Mobile Phone 2" },
+                ]
+            }
+        ]
+    },
+    {
+        class: "grid grid-cols-2 gap-4 items-center",
+        fields: [
+            { key: "Specialty", label: "Specialty" },
+            { key: "SubSpecialty", label: "Sub Specialty" },
+        ]
+    },
+];
+
+export function contactActions(masterDetail) {
+    return [
+        { 
+            Icon: PlusIcon, 
+            label: 'Add Contact',
+            onClick: () => masterDetail.enterCreate(),
+        },
+        { 
+            Icon: Settings2Icon, 
+            label: 'Search Parameters',
+        },
+    ];
+}
+
+export function viewActions(handlers){
+    return [
+        { 
+            Icon: PencilIcon, 
+            label: 'Edit Contact',
+            onClick: handlers.editContact,
+        },
+    ]
+}
\ No newline at end of file
diff --git a/src/lib/components/dictionary/contact/config/contact-form-config.js b/src/lib/components/dictionary/contact/config/contact-form-config.js
new file mode 100644
index 0000000..f13406c
--- /dev/null
+++ b/src/lib/components/dictionary/contact/config/contact-form-config.js
@@ -0,0 +1,224 @@
+import { API } from "$lib/config/api";
+import EraserIcon from "@lucide/svelte/icons/eraser";
+import { z } from "zod";
+
+export const contactSchema = z.object({
+    NameFirst: z.string().min(1, "Required"),
+    Initial: z.string().min(1, "Required"),
+});
+
+export const contactInitialForm = {
+    ContactID: '',
+    NameFirst: '',
+    NameLast: '',
+    Title: '',
+    Initial: '',
+    Birthdate: '',
+    EmailAddress1: '',
+    EmailAddress2: '',
+    Phone: '',
+    MobilePhone1: '',
+    MobilePhone2: '',
+    Specialty: '',
+    SubSpecialty: '',
+};
+
+export const contactDetailInitialForm = {
+    SiteID: '',
+    ContactDetID: '',
+    ContactCode: '',
+    ContactEmail: '',
+    OccupationID: '',
+    JobTitle: '',
+    Department: '',
+};
+
+export const contactDefaultErrors = {
+    NameFirst: "Required",
+    Initial: "Required",
+};
+
+export const contactFormFields = [
+    {
+        title: "Personal Information",
+        rows: [
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "NameFirst", 
+                        label: "First Name", 
+                        required: true, 
+                        type: "text", 
+                        validateOn: ["input"] 
+                    },
+                    { 
+                        key: "NameLast", 
+                        label: "Last Name", 
+                        required: false, 
+                        type: "text", 
+                    },
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "Title", 
+                        label: "Title", 
+                        required: false,
+                        type: "text",
+                    },
+                    { 
+                        key: "Initial", 
+                        label: "Initial", 
+                        required: true,
+                        type: "text",
+                        validateOn: ["input"]
+                    },
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "Birthdate", 
+                        label: "Birthdate", 
+                        required: false, 
+                        type: "date",
+                        fullWidth: false
+                    },
+                ]
+            },
+        ]
+    },
+    {
+        title: "Contact Information",
+        rows: [
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "EmailAddress1", 
+                        label: "Email Address 1", 
+                        required: false, 
+                        type: "text", 
+                    },
+                    { 
+                        key: "EmailAddress2", 
+                        label: "Email Address 2", 
+                        required: false, 
+                        type: "text", 
+                    },
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "MobilePhone1", 
+                        label: "Mobile Phone 1", 
+                        required: false, 
+                        type: "text", 
+                    },
+                    { 
+                        key: "MobilePhone2", 
+                        label: "Mobile Phone 2", 
+                        required: false, 
+                        type: "text", 
+                    },
+                    { 
+                        key: "Phone", 
+                        label: "Phone", 
+                        required: false, 
+                        type: "text", 
+                    },
+                ]
+            },
+        ]
+    },
+    {
+        title: "Professional Detail",
+        rows: [
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "Specialty", 
+                        label: "Specialty", 
+                        required: false, 
+                        type: "text", 
+                    },
+                    { 
+                        key: "SubSpecialty", 
+                        label: "Sub Specialty", 
+                        required: false, 
+                        type: "text", 
+                    },
+                ]
+            },
+        ]
+    }
+];
+
+export const contactDetailFormFields = [
+    {
+        rows: [
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "SiteID", 
+                        label: "Site", 
+                        required: false, 
+                        type: "select", 
+                        optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
+                        valueKey: "SiteID",
+                        labelKey: "SiteName",
+                    },
+                    { key: "ContactCode", label: "Code", required: false, type: "text" },
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "Department", 
+                        label: "Department", 
+                        required: false, 
+                        type: "select", 
+                        optionsEndpoint: `${API.BASE_URL}${API.DEPARTMENT}`,
+                        valueKey: "DepartmentID",
+                        labelKey: "DepartmentName",
+                    },
+                    { 
+                        key: "OccupationID", 
+                        label: "Occupation", 
+                        required: false, 
+                        type: "select", 
+                        optionsEndpoint: `${API.BASE_URL}${API.OCCUPATION}`,
+                        valueKey: "OccupationID",
+                        labelKey: "OccText",
+                    },
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { key: "JobTitle", label: "Job Title", required: false, type: "text" },
+                    { key: "ContactEmail", label: "Email", required: false, type: "text" },
+                ]
+            }
+        ]
+    }
+];
+
+export function getContactFormActions(handlers) {
+    return [
+        { 
+            Icon: EraserIcon, 
+            label: 'Clear Form',
+            onClick: handlers.clearForm,
+        },
+    ];
+}
\ No newline at end of file
diff --git a/src/lib/components/dictionary/contact/page/create-page.svelte b/src/lib/components/dictionary/contact/page/create-page.svelte
new file mode 100644
index 0000000..b2b1ef3
--- /dev/null
+++ b/src/lib/components/dictionary/contact/page/create-page.svelte
@@ -0,0 +1,54 @@
+<script>
+    import { useDictionaryForm } from "$lib/components/composable/use-dictionary-form.svelte";
+    import FormPageContainer from "$lib/components/reusable/form/form-page-container.svelte";
+    import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
+    import { toast } from "svelte-sonner";
+    import ReusableAlertDialog from "$lib/components/reusable/reusable-alert-dialog.svelte";
+
+    let props = $props();
+
+    const { masterDetail, formFields, formActions, schema } = props.context;
+
+    const { formState } = masterDetail;
+
+    const helpers = useDictionaryForm(formState);
+
+    const handlers = {
+        clearForm: () => {
+            formState.reset();
+        }
+    };
+
+    const actions = formActions(handlers);
+
+    let showConfirm = $state(false);
+
+    async function handleSave() {
+        const result = await formState.save(masterDetail.mode);
+
+        toast('Contact Created!');
+        masterDetail?.exitForm(true);
+    }
+
+    const primaryAction = $derived({
+        label: 'Save',
+        onClick: handleSave,
+        disabled: helpers.hasErrors || formState.isSaving.current,
+        loading: formState.isSaving.current
+    });
+
+    const secondaryActions = [];
+</script>
+
+<FormPageContainer title="Create Contact" {primaryAction} {secondaryActions} {actions}>
+    <DictionaryFormRenderer 
+        {formState}
+        formFields={formFields}
+        mode="create"
+    />
+</FormPageContainer>
+
+<ReusableAlertDialog
+    bind:open={masterDetail.showExitConfirm}
+    onConfirm={masterDetail.confirmExit}
+/>
\ No newline at end of file
diff --git a/src/lib/components/dictionary/contact/page/edit-page.svelte b/src/lib/components/dictionary/contact/page/edit-page.svelte
new file mode 100644
index 0000000..428ffd8
--- /dev/null
+++ b/src/lib/components/dictionary/contact/page/edit-page.svelte
@@ -0,0 +1,281 @@
+<script>
+    import { useDictionaryForm } from "$lib/components/composable/use-dictionary-form.svelte";
+    import FormPageContainer from "$lib/components/reusable/form/form-page-container.svelte";
+    import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
+    import { toast } from "svelte-sonner";
+    import { untrack } from "svelte";
+    import { API } from "$lib/config/api";
+    import ReusableAlertDialog from "$lib/components/reusable/reusable-alert-dialog.svelte";
+    import { Separator } from "$lib/components/ui/separator/index.js";
+    import PlusIcon from "@lucide/svelte/icons/plus";
+    import * as Card from "$lib/components/ui/card/index.js";
+    import { Badge } from "$lib/components/ui/badge/index.js";
+    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
+    import { contactDetailInitialForm, contactDetailFormFields } from "$lib/components/dictionary/contact/config/contact-form-config";
+    import { Button } from "$lib/components/ui/button/index.js";
+    import { useForm } from "$lib/components/composable/use-form.svelte";
+    import XIcon from "@lucide/svelte/icons/x";
+    import Edit2Icon from "@lucide/svelte/icons/edit-2";
+
+    let props = $props();
+
+    const { masterDetail, formFields, formActions, schema, initialForm } = props.context;
+
+    const { formState } = masterDetail;
+
+    const detailFormState = useForm({
+        schema: null,
+        initialForm: contactDetailInitialForm,
+        defaultErrors: {},
+        mode: 'create',
+        modeOpt: 'default',
+        saveEndpoint: null,
+        editEndpoint: null,
+    });
+
+    let showDetailForm = $state(false);
+
+    let editingDetailIndex = $state(null);
+
+    let isEditingDetail = $derived(editingDetailIndex !== null);
+
+    const helpers = useDictionaryForm(formState);
+
+    let showConfirm = $state(false);
+
+    function getLabel(fieldKey, value) {
+        if (!detailFormState.selectOptions?.[fieldKey]) return value;
+        const option = detailFormState.selectOptions[fieldKey].find(opt => opt.value === value);
+        return option?.label || value || "-";
+    }
+$inspect(detailFormState.selectOptions)
+    $effect(() => {
+        untrack(() => {
+            formFields.forEach(group => {
+                group.rows.forEach(row => {
+                    row.columns.forEach(col => {
+                        if (col.type === "group") {
+                            col.columns.forEach(child => {
+                                if (child.type === "select" && child.optionsEndpoint) {
+                                    formState.fetchOptions(child, formState.form);
+                                }
+                            });
+                        } else if ((col.type === "select") && col.optionsEndpoint) {
+                            formState.fetchOptions(col, formState.form);
+                        }
+                    });
+                });
+            });
+        });
+    });
+
+    $effect(() => {
+        untrack(() => {
+            contactDetailFormFields.forEach(group => {
+                group.rows.forEach(row => {
+                    row.columns.forEach(col => {
+                        if (col.type === "select" && col.optionsEndpoint) {
+                            detailFormState.fetchOptions(col, detailFormState.form);
+                        }
+                    });
+                });
+            });
+        });
+    });
+    
+    async function handleEdit() {
+        const customPayload = {
+            ...formState.form,
+            Details: masterDetail.selectedItem?.data?.Details || []
+        };
+
+        const result = await formState.save(masterDetail.mode, customPayload);
+        
+        if (result.status === 'success') {
+            console.log('Contact updated successfully');
+            toast('Contact Updated!');
+            masterDetail.exitForm(true);
+        } else {
+            console.error('Failed to update contact:', result.message);
+        }
+    }
+
+    const primaryAction = $derived({
+        label: 'Edit',
+        onClick: handleEdit,
+        disabled: helpers.hasErrors || formState.isSaving.current,
+        loading: formState.isSaving.current
+    });
+
+    const secondaryActions = [];
+
+    const actionsDetail = [
+        { 
+            Icon: PlusIcon, 
+            label: 'Add Contact Detail',
+            onClick: () => addDetail(),
+        },
+    ];
+
+    function addDetail() {
+        editingDetailIndex = null; // Mode create baru
+        detailFormState.reset(); // Reset form ke initialForm
+        detailFormState.setForm({ ...contactDetailInitialForm }); // Set form kosong
+        showDetailForm = true;
+    }
+
+    async function saveDetail() {
+        // Ambil current form dari detailFormState.form
+        const newDetail = { ...detailFormState.form };
+        
+        if (isEditingDetail) {
+            // Mode edit: update detail yang ada
+            masterDetail.selectedItem.data.Details[editingDetailIndex] = newDetail;
+            toast('Contact Detail Updated!');
+        } else {
+            // Mode create: tambah detail baru
+            if (!masterDetail.selectedItem.data.Details) {
+                masterDetail.selectedItem.data.Details = [];
+            }
+            masterDetail.selectedItem.data.Details.push(newDetail);
+            toast('Contact Detail Added!');
+        }
+        
+        // Reset form dan tutup form
+        detailFormState.reset();
+        detailFormState.setForm({ ...contactDetailInitialForm });
+        editingDetailIndex = null;
+        showDetailForm = false;
+    }
+
+    function editDetail(index) {
+        const detailToEdit = masterDetail.selectedItem.data.Details[index];
+        editingDetailIndex = index; // Set mode edit dengan index
+        detailFormState.setForm({ ...detailToEdit }); // Load data ke form
+        showDetailForm = true;
+    }
+
+    function cancelDetail() {
+        detailFormState.reset();
+        detailFormState.setForm({ ...contactDetailInitialForm });
+        editingDetailIndex = null;
+        showDetailForm = false;
+    }
+
+    function removeDetail(index) {
+        masterDetail.selectedItem.data.Details = masterDetail.selectedItem.data.Details.filter((_, i) => i !== index);
+        toast('Contact Detail Removed!');
+        
+        // Jika sedang mengedit detail yang dihapus, reset form
+        if (editingDetailIndex === index) {
+            cancelDetail();
+        } else if (editingDetailIndex !== null && editingDetailIndex > index) {
+            // Adjust index jika mengedit detail setelah yang dihapus
+            editingDetailIndex--;
+        }
+    }
+</script>
+
+<FormPageContainer title="Edit Contact" {primaryAction} {secondaryActions}>
+    <DictionaryFormRenderer
+        {formState}
+        formFields={formFields}
+        mode="edit"
+    />
+    <Separator class="my-4"/>
+    <div class="flex flex-col px-2 py-1 gap-2 h-fit w-full">
+        <TopbarWrapper 
+            title="Contact Detail" 
+            actions={actionsDetail} 
+        />
+        <div class="flex flex-col gap-4">
+            {#if showDetailForm}
+                <Card.Root class="w-full gap-2 2xl:gap-4 py-2 2xl:py-4">
+                    <Card.Content class="space-y-3">
+                        <DictionaryFormRenderer 
+                            formState={detailFormState}
+                            formFields={contactDetailFormFields}
+                        />
+                    </Card.Content>
+                    <Card.Footer class="flex justify-end flex-end gap-2">
+                        <Button size="sm" onclick={saveDetail}>
+                            {isEditingDetail ? 'Update Detail' : 'Save Detail'}
+                        </Button>
+                        <Button size="sm" variant="outline" onclick={cancelDetail}>Cancel</Button>
+                    </Card.Footer>
+                </Card.Root>
+            {/if}
+            {#each masterDetail.selectedItem?.data?.Details as contactdetail, index}
+                <Card.Root class="w-full gap-2 2xl:gap-4 py-2 2xl:py-4">
+                    <Card.Header>
+                        <div class="flex items-start justify-between">
+                            <div class="space-y-1">
+                                <Card.Title class="text-sm font-medium">
+                                    {contactdetail.ContactCode || "null"}
+                                </Card.Title>
+                                <Card.Description class="text-sm font-medium">
+                                    {contactdetail.ContactEmail || "null"}
+                                </Card.Description>
+                            </div>
+                            <div class="flex items-center gap-4">
+                                <Badge variant="outline" class="text-xs">
+                                    {getLabel('SiteID', contactdetail.SiteID)}
+                                </Badge>
+                                <div>
+                                    <Button 
+                                        size="icon" 
+                                        variant="ghost" class="size-7"
+                                        onclick={() => editDetail(index)}
+                                    >
+                                        <Edit2Icon class="h-4 w-4" />
+                                    </Button>
+                                    <Button 
+                                        size="icon" 
+                                        variant="ghost" class="size-7" 
+                                        onclick={() => removeDetail(index)}
+                                    >
+                                        <XIcon class="h-4 w-4" />
+                                    </Button>
+                                </div>
+                            </div>
+                        </div>
+                    </Card.Header>
+                    <Card.Content class="space-y-3">
+                        <div class="grid grid-cols-3 gap-3">
+                            <div class="space-y-1">
+                                <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                    Department
+                                </p>
+                                <p class="text-sm font-medium">
+                                    {getLabel('Department', contactdetail.Department)}
+                                </p>
+                            </div>
+                            <div class="space-y-1">
+                                <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                    Job Title
+                                </p>
+                                <p class="text-sm font-medium">
+                                    {contactdetail.JobTitle || "-"}
+                                </p>
+                            </div>
+                            <div class="space-y-1">
+                                <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                    Occupation
+                                </p>
+                                <p class="text-sm font-medium">
+                                    <!-- {contactdetail.OccupationID || "-"} -->
+                                    {getLabel('OccupationID', contactdetail.OccupationID)}
+                                </p>
+                            </div>
+                        </div>
+                    </Card.Content>
+                </Card.Root>
+            {/each}
+        </div>
+    </div>
+</FormPageContainer>
+
+<ReusableAlertDialog
+    bind:open={masterDetail.showExitConfirm}
+    onConfirm={masterDetail.confirmExit}
+/>
\ No newline at end of file
diff --git a/src/lib/components/dictionary/contact/page/master-page.svelte b/src/lib/components/dictionary/contact/page/master-page.svelte
new file mode 100644
index 0000000..8f064bd
--- /dev/null
+++ b/src/lib/components/dictionary/contact/page/master-page.svelte
@@ -0,0 +1,68 @@
+<script>
+	import { contactColumns } from "$lib/components/dictionary/contact/table/contact-columns";
+	import { getContacts, getContact } from "$lib/components/dictionary/contact/api/contact-api";
+    import { useSearch } from "$lib/components/composable/use-search.svelte";
+    import { searchFields, contactActions } from "$lib/components/dictionary/contact/config/contact-config";
+    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
+    import ReusableSearchParam from "$lib/components/reusable/reusable-search-param.svelte";
+    import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
+	import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
+    import UserXIcon from "@lucide/svelte/icons/user-x";
+
+    let props = $props();
+
+    const search = useSearch(searchFields, getContacts);
+    const initialForm = props.masterDetail.formState.form;
+    const actions = contactActions(props.masterDetail, initialForm)
+    actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
+
+	let activeRowId = $state(null);
+</script>
+
+{#snippet searchParamSnippet()} 
+	<ReusableSearchParam {searchFields} 
+        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
+        selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
+    />
+{/snippet}
+
+<div 
+    role="button"
+    tabindex="0"
+    onclick={() => props.masterDetail.isFormMode && props.masterDetail.exitForm()}
+    onkeydown={(e) => e.key === 'Enter' && props.masterDetail.isFormMode && props.masterDetail.exitForm()}
+    class={`
+        ${props.masterDetail.isMobile ? "w-full" : props.masterDetail.isFormMode ? "w-[3%] cursor-pointer" : "w-[35%]"} 
+        transition-all duration-300 flex flex-col items-center p-2 h-full overflow-y-auto
+    `}
+>
+    <div class={`flex w-full ${props.masterDetail.isFormMode ? "flex-col justify-center h-full items-center" : "flex-col justify-start h-full"}`} >
+        {#if props.masterDetail.isFormMode}
+            <span class="flex flex-col items-center justify-center gap-4 tracking-widest font-semibold select-none">
+                {#each "CONTACT".split("") as c}
+                    <span class="leading-none">{c}</span>
+                {/each}
+            </span>
+        {/if}
+
+        {#if !props.masterDetail.isFormMode}
+            <div role="button" tabindex="0" class="flex flex-1 flex-col" onclick={(e) => e.stopPropagation()} onkeydown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+                }
+            }}> 
+                <TopbarWrapper {actions}/>
+                <div class="flex-1 w-full h-full">
+                    {#if search.searchData.length > 0}
+                        <ReusableDataTable data={search.searchData} columns={contactColumns} handleRowClick={props.masterDetail.select} {activeRowId} rowIdKey="ContactID"/>
+                    {:else}
+                        <div class="flex h-full">
+                            <ReusableEmpty icon={UserXIcon} desc="Try searching from search parameters"/>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        {/if}
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/dictionary/contact/page/view-page.svelte b/src/lib/components/dictionary/contact/page/view-page.svelte
new file mode 100644
index 0000000..08df044
--- /dev/null
+++ b/src/lib/components/dictionary/contact/page/view-page.svelte
@@ -0,0 +1,157 @@
+<script>
+    import { formatUTCDate } from "$lib/utils/formatUTCDate";
+    import { detailSections, viewActions } from "$lib/components/dictionary/contact/config/contact-config";
+    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
+    import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
+    import UserXIcon from "@lucide/svelte/icons/user-x";
+    import { Separator } from "$lib/components/ui/separator/index.js";
+    import PlusIcon from "@lucide/svelte/icons/plus";
+    import * as Card from "$lib/components/ui/card/index.js";
+    import { Badge } from "$lib/components/ui/badge/index.js";
+
+    let props = $props();
+
+    const { masterDetail, formFields, formActions, schema } = props.context;
+
+    let contact = $derived(masterDetail?.selectedItem?.data);
+
+    const handlers = {
+        editContact: () => masterDetail.enterEdit("data"),
+    };
+
+    const actions = viewActions(handlers);
+    const actionsDetail = [
+        // { 
+        //     Icon: PlusIcon, 
+        //     label: 'Add Contact Detail',
+        // },
+    ];
+
+    function getFieldValue(field) {
+        if (!contact) return "-";
+
+        if (field.keys) {
+            return field.keys
+                .map(k => field.parentKey ? contact[field.parentKey]?.[k] : contact[k])
+                .filter(val => val && val.trim() !== "")
+                .join(" / ");
+        }
+
+        return field.parentKey ? contact[field.parentKey]?.[field.key] : contact[field.key];
+    }
+</script>
+
+{#snippet Fieldset({ value, label, isUTCDate = false })}
+    <div class="space-y-1.5">
+        <dt class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            {label}
+        </dt>
+        <dd class="text-sm font-medium">
+            {#if isUTCDate}
+                {formatUTCDate(value)}
+            {:else}
+                {value ?? "-"}
+            {/if}
+        </dd>
+    </div>
+{/snippet}
+
+{#if masterDetail.selectedItem}
+    <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
+        <TopbarWrapper 
+            title={masterDetail.selectedItem.data.NameFirst} 
+            {actions} 
+        />
+        <div class="flex-1 min-h-0 overflow-y-auto space-y-4">
+            {#each detailSections as section}
+                <div class="p-4">
+                    {#if section.groups}
+                        <div class={section.class}>
+                            {#each section.groups as group}
+                                <div>
+                                    <div class={group.class}>
+                                        {#each group.fields as field}
+                                            {@render Fieldset({
+                                                label: field.label,
+                                                value: getFieldValue(field),
+                                                isUTCDate: field.isUTCDate
+                                            })}
+                                        {/each}
+                                    </div>
+                                </div>
+                            {/each}
+                        </div>
+                    {:else}
+                        <div class={section.class}>
+                            {#each section.fields as field}
+                                {@render Fieldset({
+                                    label: field.label,
+                                    value: getFieldValue(field),
+                                    isUTCDate: field.isUTCDate
+                                })}
+                            {/each}
+                        </div>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </div>
+    <Separator />
+    <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
+        <TopbarWrapper 
+            title="Contact Detail" 
+            actions={actionsDetail} 
+        />
+        <div class="flex flex-col gap-4">
+            {#each masterDetail.selectedItem?.data?.Details as contactdetail}
+                <Card.Root class="w-full gap-2 2xl:gap-4 py-2 2xl:py-4">
+                    <Card.Header>
+                        <div class="flex items-start justify-between">
+                            <div class="space-y-1">
+                                <Card.Title class="text-sm font-medium">
+                                    {contactdetail.ContactCode}
+                                </Card.Title>
+                                <Card.Description class="text-sm font-medium">
+                                    {contactdetail.ContactEmail}
+                                </Card.Description>
+                            </div>
+                            <Badge variant="secondary" class="text-xs">
+                                Site {contactdetail.SiteID}
+                            </Badge>
+                        </div>
+                    </Card.Header>
+                    <Card.Content class="space-y-3">
+                        <div class="grid grid-cols-3 gap-3">
+                            <div class="space-y-1">
+                                <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                    Department
+                                </p>
+                                <p class="text-sm font-medium">
+                                    {contactdetail.Department || "-"}
+                                </p>
+                            </div>
+                            <div class="space-y-1">
+                                <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                    Job Title
+                                </p>
+                                <p class="text-sm font-medium">
+                                    {contactdetail.JobTitle || "-"}
+                                </p>
+                            </div>
+                            <div class="space-y-1">
+                                <p class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                                    Occupation
+                                </p>
+                                <p class="text-sm font-medium">
+                                    {contactdetail.OccupationID || "-"}
+                                </p>
+                            </div>
+                        </div>
+                    </Card.Content>
+                </Card.Root>
+            {/each}
+        </div>
+    </div>
+{:else}
+    <ReusableEmpty icon={UserXIcon} desc="Select a contact to see details"/>
+{/if}
\ No newline at end of file
diff --git a/src/lib/components/dictionary/contact/table/contact-columns.js b/src/lib/components/dictionary/contact/table/contact-columns.js
new file mode 100644
index 0000000..2c405c1
--- /dev/null
+++ b/src/lib/components/dictionary/contact/table/contact-columns.js
@@ -0,0 +1,14 @@
+export const contactColumns = [
+    {
+        accessorKey: "Initial",
+        header: "Initial",
+    },
+    {
+        accessorKey: "NameFirst",
+        header: "Contact Name",
+    },
+    {
+        accessorKey: "Specialty",
+        header: "Specialty",
+    },
+];
\ No newline at end of file
diff --git a/src/lib/components/dictionary/testdef/api/testdef-api.js b/src/lib/components/dictionary/test/api/test-api.js
similarity index 90%
rename from src/lib/components/dictionary/testdef/api/testdef-api.js
rename to src/lib/components/dictionary/test/api/test-api.js
index 9219a84..7822b1d 100644
--- a/src/lib/components/dictionary/testdef/api/testdef-api.js
+++ b/src/lib/components/dictionary/test/api/test-api.js
@@ -1,7 +1,7 @@
 import { API } from '$lib/config/api.js';
 import { getById, searchWithParams, create, update } from '$lib/api/api-client';
 
-export async function searchParam(searchQuery) {
+export async function getTests(searchQuery) {
   return await searchWithParams(API.TEST, searchQuery)
 }
 
diff --git a/src/lib/components/dictionary/test/config/test-config.js b/src/lib/components/dictionary/test/config/test-config.js
new file mode 100644
index 0000000..52bb302
--- /dev/null
+++ b/src/lib/components/dictionary/test/config/test-config.js
@@ -0,0 +1,50 @@
+import PlusIcon from "@lucide/svelte/icons/plus";
+import Settings2Icon from "@lucide/svelte/icons/settings-2";
+import PencilIcon from "@lucide/svelte/icons/pencil";
+import { API } from "$lib/config/api";
+
+export const searchFields = [
+    {
+        key: "TestSiteCode",
+        label: "Test Code",
+        type: "text",
+    },
+    {
+        key: "TestSiteName",
+        label: "Test Name",
+        type: "text",
+    },
+    {
+        key: "TestType",
+        label: "Test Type",
+        type: "select",
+        optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/test_type`, 
+    },
+
+];
+
+export const detailSections = [];
+
+export function testActions(masterDetail) {
+    return [
+        { 
+            Icon: PlusIcon, 
+            label: 'Add Test',
+            onClick: () => masterDetail.enterCreate(),
+        },
+        { 
+            Icon: Settings2Icon, 
+            label: 'Search Parameters',
+        },
+    ];
+}
+
+export function viewActions(handlers){
+    return [
+        { 
+            Icon: PencilIcon, 
+            label: 'Edit Test',
+            onClick: handlers.editTest,
+        },
+    ]
+}
\ No newline at end of file
diff --git a/src/lib/components/dictionary/test/config/test-form-config.js b/src/lib/components/dictionary/test/config/test-form-config.js
new file mode 100644
index 0000000..5d128c3
--- /dev/null
+++ b/src/lib/components/dictionary/test/config/test-form-config.js
@@ -0,0 +1,310 @@
+import { API } from "$lib/config/api";
+import EraserIcon from "@lucide/svelte/icons/eraser";
+import { z } from "zod";
+import { cleanEmptyStrings } from "$lib/utils/cleanEmptyStrings";
+
+export const testSchema = z.object({});
+
+export const testInitialForm = {
+    TestSiteID: "",
+    SiteID: "",
+    TestSiteCode: "",
+    TestSiteName: "",
+    TestType: "",
+    Description: "",
+    DisciplineID: "",
+    DepartmentID: "",
+    ResultType: "",
+    RefType: "",
+    Vset: "",
+    Unit1: "",
+    Factor: "",
+    Unit2: "",
+    Decimal: "",
+    ReqQty: "",
+    ReqQtyUnit: "",
+    CollReq: "",
+    Method: "",
+    ExpectedTXT: "",
+    SeqScr: "",
+    SeqRpt: "",
+    VisibleScr: "",
+    VisibleRpt: "",
+    CountStat: "",
+    Level: "",
+};
+
+export const testDefaultErrors = {};
+
+export const testFormFields = [
+    {
+        title: "Basic Information",
+        rows: [
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "SiteID", 
+                        label: "Site ID", 
+                        required: false, 
+                        type: "select", 
+                        optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
+                        valueKey: "SiteID",
+                        labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`,
+                    },
+                    { 
+                        key: "TestSiteCode", 
+                        label: "Test Code", 
+                        required: true, 
+                        type: "text",
+                        validateOn: ["input"]
+                    }
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "TestSiteName", 
+                        label: "Test Name", 
+                        required: true, 
+                        type: "text",
+                        validateOn: ["input"]
+                    },
+                    { 
+                        key: "TestType", 
+                        label: "Test Type", 
+                        required: true, 
+                        type: "text",
+                        validateOn: ["input"]
+                    }
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "Description", 
+                        label: "Description", 
+                        required: false, 
+                        type: "textarea",
+                    },
+                ]
+            },
+        ]
+    },
+    {
+        title: "Organizational Assignment",
+        rows: [
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "DisciplineID", 
+                        label: "Discipline", 
+                        required: false, 
+                        type: "select", 
+                        optionsEndpoint: `${API.BASE_URL}${API.DISCIPLINE}`,
+                        valueKey: "DisciplineID",
+                        labelKey: "DisciplineName",
+                    },
+                    { 
+                        key: "DepartmentID", 
+                        label: "Department", 
+                        required: false, 
+                        type: "select", 
+                        optionsEndpoint: `${API.BASE_URL}${API.DEPARTMENT}`,
+                        valueKey: "DepartmentID",
+                        labelKey: "DepartmentName",
+                    },
+                ]
+            },
+        ]
+    },
+    {
+        title: "Result Configuration",
+        rows: [
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "ResultType", 
+                        label: "Result Type", 
+                        required: true, 
+                        type: "select",
+                        optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/result_type`,
+                    },
+                    { 
+                        key: "RefType", 
+                        label: "Reference Type", 
+                        required: true, 
+                        type: "select",
+                        optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/reference_type`,
+                    }
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "VSet", 
+                        label: "Value Set", 
+                        required: false, 
+                        type: "select",
+                        optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/service_classes`,
+                    },
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "Unit1", 
+                        label: "Unit 1", 
+                        required: false, 
+                        type: "text",
+                    },
+                    { 
+                        key: "Factor", 
+                        label: "Factor", 
+                        required: false, 
+                        type: "text",
+                    },
+                    { 
+                        key: "Unit2", 
+                        label: "Unit 2", 
+                        required: false, 
+                        type: "text",
+                    },
+                    { 
+                        key: "Decimal", 
+                        label: "Decimal", 
+                        required: false, 
+                        type: "text",
+                    },
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "ExpectedTAT", 
+                        label: "Expected TAT", 
+                        required: false, 
+                        type: "select",
+                    },
+                ]
+            },
+        ]
+    },
+    {
+        title: "Specimen Requirements",
+        rows: [
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "ReqQty", 
+                        label: "Required Quantity", 
+                        required: false, 
+                        type: "text",
+                    },
+                    { 
+                        key: "CollReq", 
+                        label: "Collection Requirement", 
+                        required: false, 
+                        type: "text",
+                    },
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "ReqQtyUnit", 
+                        label: "Quantity Unit", 
+                        required: false, 
+                        type: "text",
+                    },
+                    { 
+                        key: "Method", 
+                        label: "Method", 
+                        required: false, 
+                        type: "text",
+                    },
+                ]
+            },
+        ]
+    },
+    {
+        title: "Display Settings",
+        rows: [
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "SeqScr", 
+                        label: "Sequence on Screen", 
+                        required: false, 
+                        type: "text",
+                    },
+                    { 
+                        key: "VisibleScr", 
+                        label: "Visible on Screen", 
+                        required: false, 
+                        type: "text",
+                    },
+                ]
+            },
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "SeqRpt", 
+                        label: "Sequence on Report", 
+                        required: false, 
+                        type: "text",
+                    },
+                    { 
+                        key: "VisibleRpt", 
+                        label: "Visible on Report", 
+                        required: false, 
+                        type: "text",
+                    },
+                ]
+            },
+        ]
+    },
+    {
+        title: "Other Settings",
+        rows: [
+            {
+                type: "row",
+                columns: [
+                    { 
+                        key: "CountStat", 
+                        label: "Statistic", 
+                        required: false, 
+                        type: "text",
+                    },
+                    { 
+                        key: "Level", 
+                        label: "Level", 
+                        required: false, 
+                        type: "text",
+                    },
+                ]
+            },
+        ]
+    },
+];
+
+export function getTestFormActions(handlers) {
+    return [
+        { 
+            Icon: EraserIcon, 
+            label: 'Clear Form',
+            onClick: handlers.clearForm,
+        },
+    ];
+}
\ No newline at end of file
diff --git a/src/lib/components/dictionary/test/page/create-page.svelte b/src/lib/components/dictionary/test/page/create-page.svelte
new file mode 100644
index 0000000..b310016
--- /dev/null
+++ b/src/lib/components/dictionary/test/page/create-page.svelte
@@ -0,0 +1,54 @@
+<script>
+    import { useDictionaryForm } from "$lib/components/composable/use-dictionary-form.svelte";
+    import FormPageContainer from "$lib/components/reusable/form/form-page-container.svelte";
+    import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
+    import { toast } from "svelte-sonner";
+    import ReusableAlertDialog from "$lib/components/reusable/reusable-alert-dialog.svelte";
+
+    let props = $props();
+
+    const { masterDetail, formFields, formActions, schema } = props.context;
+
+    const { formState } = masterDetail;
+
+    const helpers = useDictionaryForm(formState);
+
+    const handlers = {
+        clearForm: () => {
+            formState.reset();
+        }
+    };
+
+    const actions = formActions(handlers);
+
+    let showConfirm = $state(false);
+
+    async function handleSave() {
+        const result = await formState.save(masterDetail.mode);
+
+        toast('Test Created!');
+        masterDetail?.exitForm(true);
+    }
+
+    const primaryAction = $derived({
+        label: 'Save',
+        onClick: handleSave,
+        disabled: helpers.hasErrors || formState.isSaving.current,
+        loading: formState.isSaving.current
+    });
+
+    const secondaryActions = [];
+</script>
+
+<FormPageContainer title="Test Location" {primaryAction} {secondaryActions} {actions}>
+    <DictionaryFormRenderer 
+        {formState}
+        formFields={formFields}
+        mode="create"
+    />
+</FormPageContainer>
+
+<ReusableAlertDialog
+    bind:open={masterDetail.showExitConfirm}
+    onConfirm={masterDetail.confirmExit}
+/>
\ No newline at end of file
diff --git a/src/lib/components/dictionary/test/page/edit-page.svelte b/src/lib/components/dictionary/test/page/edit-page.svelte
new file mode 100644
index 0000000..d1b0c29
--- /dev/null
+++ b/src/lib/components/dictionary/test/page/edit-page.svelte
@@ -0,0 +1,73 @@
+<script>
+    import { useDictionaryForm } from "$lib/components/composable/use-dictionary-form.svelte";
+    import FormPageContainer from "$lib/components/reusable/form/form-page-container.svelte";
+    import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
+    import { toast } from "svelte-sonner";
+    import { untrack } from "svelte";
+    import { API } from "$lib/config/api";
+    import ReusableAlertDialog from "$lib/components/reusable/reusable-alert-dialog.svelte";
+
+    let props = $props();
+
+    const { masterDetail, formFields, formActions, schema, initialForm } = props.context;
+
+    const { formState } = masterDetail;
+
+    const helpers = useDictionaryForm(formState);
+
+    let showConfirm = $state(false);
+
+    $effect(() => {
+        untrack(() => {
+            formFields.forEach(group => {
+                group.rows.forEach(row => {
+                    row.columns.forEach(col => {
+                        if (col.type === "group") {
+                            col.columns.forEach(child => {
+                                if (child.type === "select" && child.optionsEndpoint) {
+                                    formState.fetchOptions(child, formState.form);
+                                }
+                            });
+                        } else if ((col.type === "select") && col.optionsEndpoint) {
+                            formState.fetchOptions(col, formState.form);
+                        }
+                    });
+                });
+            });
+        });
+    });
+    
+    async function handleEdit() {
+        const result = await formState.save(masterDetail.mode);
+        
+        if (result.status === 'success') {
+            console.log('Test updated successfully');
+            toast('Test Updated!');
+            masterDetail.exitForm(true);
+        } else {
+            console.error('Failed to update test:', result.message);
+        }
+    }
+
+    const primaryAction = $derived({
+        label: 'Edit',
+        onClick: handleEdit,
+        disabled: helpers.hasErrors || formState.isSaving.current,
+        loading: formState.isSaving.current
+    });
+
+    const secondaryActions = [];
+</script>
+
+<FormPageContainer title="Edit Test" {primaryAction} {secondaryActions}>
+    <DictionaryFormRenderer
+        {formState}
+        formFields={formFields}
+        mode="edit"
+    />
+</FormPageContainer>
+
+<ReusableAlertDialog
+    bind:open={masterDetail.showExitConfirm}
+    onConfirm={masterDetail.confirmExit}
+/>
\ No newline at end of file
diff --git a/src/lib/components/dictionary/test/page/master-page.svelte b/src/lib/components/dictionary/test/page/master-page.svelte
new file mode 100644
index 0000000..5ebc759
--- /dev/null
+++ b/src/lib/components/dictionary/test/page/master-page.svelte
@@ -0,0 +1,68 @@
+<script>
+	import { testColumns } from "$lib/components/dictionary/test/table/test-columns";
+	import { getTests, getTest } from "$lib/components/dictionary/test/api/test-api";
+    import { useSearch } from "$lib/components/composable/use-search.svelte";
+    import { searchFields, testActions } from "$lib/components/dictionary/test/config/test-config";
+    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
+    import ReusableSearchParam from "$lib/components/reusable/reusable-search-param.svelte";
+    import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
+	import ReusableDataTable from "$lib/components/reusable/reusable-data-table.svelte";
+    import FlaskConicalOffIcon from "@lucide/svelte/icons/flask-conical-off";
+
+    let props = $props();
+
+    const search = useSearch(searchFields, getTests);
+    const initialForm = props.masterDetail.formState.form;
+    const actions = testActions(props.masterDetail, initialForm)
+    actions.find(a => a.label === 'Search Parameters').popoverContent = searchParamSnippet;
+
+	let activeRowId = $state(null);
+</script>
+
+{#snippet searchParamSnippet()} 
+	<ReusableSearchParam {searchFields} 
+        bind:searchQuery={search.searchQuery} onSearch={search.handleSearch} onReset={search.handleReset} isLoading={search.isLoading}
+        selectOptions={search.selectOptions} loadingOptions={search.loadingOptions} fetchOptions={search.fetchOptions}
+    />
+{/snippet}
+
+<div 
+    role="button"
+    tabindex="0"
+    onclick={() => props.masterDetail.isFormMode && props.masterDetail.exitForm()}
+    onkeydown={(e) => e.key === 'Enter' && props.masterDetail.isFormMode && props.masterDetail.exitForm()}
+    class={`
+        ${props.masterDetail.isMobile ? "w-full" : props.masterDetail.isFormMode ? "w-[3%] cursor-pointer" : "w-[35%]"} 
+        transition-all duration-300 flex flex-col items-center p-2 h-full overflow-y-auto
+    `}
+>
+    <div class={`flex w-full ${props.masterDetail.isFormMode ? "flex-col justify-center h-full items-center" : "flex-col justify-start h-full"}`} >
+        {#if props.masterDetail.isFormMode}
+            <span class="flex flex-col items-center justify-center gap-4 tracking-widest font-semibold select-none">
+                {#each "TEST".split("") as c}
+                    <span class="leading-none">{c}</span>
+                {/each}
+            </span>
+        {/if}
+
+        {#if !props.masterDetail.isFormMode}
+            <div role="button" tabindex="0" class="flex flex-1 flex-col" onclick={(e) => e.stopPropagation()} onkeydown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                e.stopPropagation();
+                }
+            }}> 
+                <TopbarWrapper {actions}/>
+                <div class="flex-1 w-full h-full">
+                    {#if search.searchData.length > 0}
+                        <ReusableDataTable data={search.searchData} columns={testColumns} handleRowClick={props.masterDetail.select} {activeRowId} rowIdKey="TestSiteID"/>
+                    {:else}
+                        <div class="flex h-full">
+                            <ReusableEmpty icon={FlaskConicalOffIcon} desc="Try searching from search parameters"/>
+                        </div>
+                    {/if}
+                </div>
+            </div>
+        {/if}
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/lib/components/dictionary/test/page/view-page.svelte b/src/lib/components/dictionary/test/page/view-page.svelte
new file mode 100644
index 0000000..b5a7959
--- /dev/null
+++ b/src/lib/components/dictionary/test/page/view-page.svelte
@@ -0,0 +1,91 @@
+<script>
+    import { formatUTCDate } from "$lib/utils/formatUTCDate";
+    import { detailSections, viewActions } from "$lib/components/dictionary/test/config/test-config";
+    import TopbarWrapper from "$lib/components/topbar/topbar-wrapper.svelte";
+    import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
+    import FlaskConicalOffIcon from "@lucide/svelte/icons/flask-conical-off";
+
+    let props = $props();
+
+    const { masterDetail, formFields, formActions, schema } = props.context;
+
+    let test = $derived(masterDetail?.selectedItem?.data);
+$inspect(test)
+    const handlers = {
+        editTest: () => masterDetail.enterEdit("data"),
+    };
+
+    const actions = viewActions(handlers);
+
+    function getFieldValue(field) {
+        if (!test) return "-";
+
+        if (field.keys) {
+            return field.keys
+                .map(k => field.parentKey ? test[field.parentKey]?.[k] : test[k])
+                .filter(val => val && val.trim() !== "")
+                .join(" / ");
+        }
+
+        return field.parentKey ? test[field.parentKey]?.[field.key] : test[field.key];
+    }
+</script>
+
+{#snippet Fieldset({ value, label, isUTCDate = false })}
+    <div class="space-y-1.5">
+        <dt class="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+            {label}
+        </dt>
+        <dd class="text-sm font-medium">
+            {#if isUTCDate}
+                {formatUTCDate(value)}
+            {:else}
+                {value ?? "-"}
+            {/if}
+        </dd>
+    </div>
+{/snippet}
+
+{#if masterDetail.selectedItem}
+    <div class="flex flex-col px-2 py-1 gap-2 h-full w-full">
+        <TopbarWrapper 
+            title={masterDetail.selectedItem.data.TestSiteName} 
+            {actions} 
+        />
+        <div class="flex-1 min-h-0 overflow-y-auto space-y-4">
+            {#each detailSections as section}
+                <div class="p-4">
+                    {#if section.groups}
+                        <div class={section.class}>
+                            {#each section.groups as group}
+                                <div>
+                                    <div class={group.class}>
+                                        {#each group.fields as field}
+                                            {@render Fieldset({
+                                                label: field.label,
+                                                value: getFieldValue(field),
+                                                isUTCDate: field.isUTCDate
+                                            })}
+                                        {/each}
+                                    </div>
+                                </div>
+                            {/each}
+                        </div>
+                    {:else}
+                        <div class={section.class}>
+                            {#each section.fields as field}
+                                {@render Fieldset({
+                                    label: field.label,
+                                    value: getFieldValue(field),
+                                    isUTCDate: field.isUTCDate
+                                })}
+                            {/each}
+                        </div>
+                    {/if}
+                </div>
+            {/each}
+        </div>
+    </div>
+{:else}
+    <ReusableEmpty icon={FlaskConicalOffIcon} desc="Select a test to see details"/>
+{/if}
\ No newline at end of file
diff --git a/src/lib/components/dictionary/test/table/test-columns.js b/src/lib/components/dictionary/test/table/test-columns.js
new file mode 100644
index 0000000..8ba6b8d
--- /dev/null
+++ b/src/lib/components/dictionary/test/table/test-columns.js
@@ -0,0 +1,14 @@
+export const testColumns = [
+    {
+        accessorKey: "TestSiteCode",
+        header: "Test Code",
+    },
+    {
+        accessorKey: "TestSiteName",
+        header: "Test Name",
+    },
+    {
+        accessorKey: "TestType",
+        header: "Test Type",
+    },
+];
\ No newline at end of file
diff --git a/src/lib/components/dictionary/testdef/config/testdef-config.js b/src/lib/components/dictionary/testdef/config/testdef-config.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/dictionary/testdef/config/testdef-form-config.js b/src/lib/components/dictionary/testdef/config/testdef-form-config.js
deleted file mode 100644
index 94cd262..0000000
--- a/src/lib/components/dictionary/testdef/config/testdef-form-config.js
+++ /dev/null
@@ -1,211 +0,0 @@
-import { API } from "$lib/config/api";
-import EraserIcon from "@lucide/svelte/icons/eraser";
-import { z } from "zod";
-import { cleanEmptyStrings } from "$lib/utils/cleanEmptyStrings";
-
-export const testSchema = z.object({});
-
-export const admissionInitialForm = {
-    InternalPVID: "",
-    InternalPID: "",
-    PVID: "",
-    EpisodeID: "",
-    DiagCode: "",
-    Diagnosis: "",
-    ADTCode: "",
-    LocationID: "",
-    AttDoc: "",
-    RefDoc: "",
-    AdmDoc: "",
-    CnsDoc: "",
-    isDischarge: false
-};
-
-export const admissionDefaultErrors = {};
-
-export const admissionFormFields = [
-    {
-        title: "Visit Information",
-        rows: [
-            {
-                type: "row",
-                columns: [
-                    // { 
-                    //     key: "PVID", 
-                    //     label: "Visit ID", 
-                    //     required: false, 
-                    //     type: "text",
-                    // },
-                    { 
-                        key: "EpisodeID", 
-                        label: "Episode ID", 
-                        required: false, 
-                        type: "text",
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        title: "Medical Team",
-        rows: [
-            {
-                type: "row",
-                columns: [
-                    { 
-                        key: "AttDoc", 
-                        label: "Attended Doctor", 
-                        required: false, 
-                        type: "select",
-                        optionsEndpoint: `${API.BASE_URL}${API.CONTACT}`,
-                        valueKey: "ContactID",
-                        labelKey: (item) => `${item.Initial} - ${item.NameFirst} ${item.NameLast}`,
-                    },
-                    { 
-                        key: "RefDoc", 
-                        label: "Reference Doctor", 
-                        required: false, 
-                        type: "select",
-                        optionsEndpoint: `${API.BASE_URL}${API.CONTACT}`,
-                        valueKey: "ContactID",
-                        labelKey: (item) => `${item.Initial} - ${item.NameFirst} ${item.NameLast}`,
-                    }
-                ]
-            },
-            {
-                type: "row",
-                columns: [
-                    { 
-                        key: "AdmDoc", 
-                        label: "Admitted Doctor", 
-                        required: false, 
-                        type: "select",
-                        optionsEndpoint: `${API.BASE_URL}${API.CONTACT}`,
-                        valueKey: "ContactID",
-                        labelKey: (item) => `${item.Initial} - ${item.NameFirst} ${item.NameLast}`,
-                    },
-                    { 
-                        key: "CnsDoc", 
-                        label: "Consulte Doctor", 
-                        required: false, 
-                        type: "select",
-                        optionsEndpoint: `${API.BASE_URL}${API.CONTACT}`,
-                        valueKey: "ContactID",
-                        labelKey: (item) => `${item.Initial} - ${item.NameFirst} ${item.NameLast}`,
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        title: "Visit Classification",
-        rows: [
-            {
-                type: "row",
-                columns: [
-                    { 
-                        key: "LocationID", 
-                        label: "Location", 
-                        required: false, 
-                        type: "select",
-                        optionsEndpoint: `${API.BASE_URL}${API.LOCATION}`,
-                        valueKey: "LocationID",
-                        labelKey: (item) => `${item.LocCode} - ${item.LocFull}`,
-                    },
-                    { 
-                        key: "VisitClass", 
-                        label: "Visit Class", 
-                        required: false, 
-                        type: "select",
-                        // optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/visit_classes`,
-                    }
-                ]
-            },
-            {
-                type: "row",
-                columns: [
-                    { 
-                        key: "ServiceClass", 
-                        label: "Service Class", 
-                        required: false, 
-                        type: "select",
-                        // optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/service_classes`,
-                    },
-                    { 
-                        key: "isDischarge", 
-                        label: "Admission Status", 
-                        required: false, 
-                        type: "toggle",
-                        defaultValue: false,
-                    }
-                ]
-            }
-        ]
-    },
-    {
-        title: "Clinical Information",
-        rows: [
-            {
-                type: "row",
-                columns: [
-                    { 
-                        key: "Diagnosis", 
-                        label: "Diagnosis", 
-                        required: false, 
-                        type: "textarea",
-                        rows: 4,
-                        maxLength: 1000,
-                    }
-                ]
-            }
-        ]
-    }
-];
-
-export function getAdmissionFormActions(handlers) {
-    return [
-        { 
-            Icon: EraserIcon, 
-            label: 'Clear Form',
-            onClick: handlers.clearForm,
-        },
-    ];
-}
-
-const admissionTemplate = {
-  PVID: 'PVID',
-  InternalPID: 'InternalPID',
-  EpisodeID: 'EpisodeID',
-  PatDiag: {
-    DiagCode: 'DiagCode',
-    Diagnosis: 'Diagnosis',
-  },
-  PatVisitADT: {
-    ADTCode: () => 'A04',
-    LocationID: 'LocationID',
-    AttDoc: 'AttDoc',
-    RefDoc: 'RefDoc',
-    AdmDoc: 'AdmDoc',
-    CnsDoc: 'CnsDoc',
-  },
-};
-
-export function buildPayload(form, schema = admissionTemplate) {
-  const payload = {};
-
-  for (const [key, config] of Object.entries(schema)) {
-    if (typeof config === 'string') {
-      // Kirim nilai dari form, atau null jika tidak ada (agar key tetap ada)
-      payload[key] = form[config] ?? null;
-    } 
-    else if (typeof config === 'function') {
-      payload[key] = config(form);
-    } 
-    else if (typeof config === 'object' && config !== null) {
-      // Rekursif tanpa pengecekan panjang keys, agar objek nested selalu dibuat
-      payload[key] = buildPayload(form, config);
-    }
-  }
-
-  return cleanEmptyStrings(payload);
-}
\ No newline at end of file
diff --git a/src/lib/components/dictionary/testdef/page/create-page.svelte b/src/lib/components/dictionary/testdef/page/create-page.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/dictionary/testdef/page/edit-page.svelte b/src/lib/components/dictionary/testdef/page/edit-page.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/dictionary/testdef/page/master-page.svelte b/src/lib/components/dictionary/testdef/page/master-page.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/dictionary/testdef/page/view-page.svelte b/src/lib/components/dictionary/testdef/page/view-page.svelte
deleted file mode 100644
index e69de29..0000000
diff --git a/src/lib/components/patient/reusable/form-page-container.svelte b/src/lib/components/patient/reusable/form-page-container.svelte
index 059dd64..055784e 100644
--- a/src/lib/components/patient/reusable/form-page-container.svelte
+++ b/src/lib/components/patient/reusable/form-page-container.svelte
@@ -17,8 +17,11 @@
 
 <div class="flex flex-col p-2 gap-4 h-full w-full">
     <TopbarWrapper actions={actions} title={title}/>
-    {@render children()}
-    <div class="mt-auto flex justify-end items-center pt-2">
+    <div class="flex-1 min-h-0 overflow-y-auto p-2">
+        {@render children()}
+    </div>
+    <!-- <div class="mt-auto flex justify-end items-center pt-2"> -->
+    <div class="shrink-0 border-t pt-2 flex justify-end items-center">
         <Button 
             size="sm" 
             class="cursor-pointer {secondaryActions.length ? 'rounded-r-none' : ''}"
diff --git a/src/lib/components/patient/reusable/patient-form-renderer.svelte b/src/lib/components/patient/reusable/patient-form-renderer.svelte
index 3f03f32..24318e1 100644
--- a/src/lib/components/patient/reusable/patient-form-renderer.svelte
+++ b/src/lib/components/patient/reusable/patient-form-renderer.svelte
@@ -323,7 +323,8 @@
     </div>
 {/snippet}
 
-<div class="flex-1 min-h-0 overflow-y-auto p-2 space-y-6">
+<!-- <div class="flex-1 min-h-0 overflow-y-auto p-2 space-y-6"> -->
+<div class="p-2 space-y-6">
     {#each formFields as group}
         <div class="space-y-6">
             {#if group.title}
diff --git a/src/lib/components/reusable/form/dictionary-form-renderer.svelte b/src/lib/components/reusable/form/dictionary-form-renderer.svelte
index 02de285..a415c48 100644
--- a/src/lib/components/reusable/form/dictionary-form-renderer.svelte
+++ b/src/lib/components/reusable/form/dictionary-form-renderer.svelte
@@ -6,6 +6,7 @@
     import { Input } from "$lib/components/ui/input/index.js";
     import { Label } from "$lib/components/ui/label/index.js";
     import { Spinner } from "$lib/components/ui/spinner/index.js";
+    import ReusableCalendar from "$lib/components/reusable/reusable-calendar.svelte";
 
     let {
         formState,
@@ -17,9 +18,9 @@
 
     function getFilteredOptions(key) {
         const query = searchQuery[key] || "";
-        if (!query) return formState.selectOptions[key] ?? [];
+        if (!query) return formState.selectOptions?.[key] ?? [];
         
-        return (formState.selectOptions[key] ?? []).filter(opt => 
+        return (formState.selectOptions?.[key] ?? []).filter(opt => 
             opt.label.toLowerCase().includes(query.toLowerCase())
         );
     }
@@ -126,23 +127,29 @@
                     bind:value={formState.form[key]}
                 ></textarea>
             {:else if type === "select"}
-                {@const selectedLabel = formState.selectOptions[key]?.find(opt => opt.value === formState.form[key])?.label || "Choose"}
+                {@const selectedLabel = formState.selectOptions?.[key]?.find(opt => opt.value === formState.form[key])?.label || "Choose"}
                 {@const filteredOptions = getFilteredOptions(key)}
                 <Select.Root type="single" bind:value={formState.form[key]} 
                     onValueChange={(val) => {
                         formState.form[key] = val;
                         if (validateOn?.includes("input")) {
-                            formState.validateField(key, formState.form[key], false);
+                            formState.validateField?.(key, formState.form[key], false);
                         }
                         if (key === "Province") {
                             formState.form.City = "";
-                            formState.selectOptions.City = [];
-                            formState.lastFetched.City = null;
+                            // formState.selectOptions.City = [];
+                            // formState.lastFetched.City = null;
+                            if (formState.selectOptions) {
+                                formState.selectOptions.City = [];
+                            }
+                            if (formState.lastFetched) {
+                                formState.lastFetched.City = null;
+                            }
                         }
                     }}
                     onOpenChange={(open) => {
                         if (open && optionsEndpoint) {
-                            formState.fetchOptions(
+                            formState.fetchOptions?.(
                                 { key, optionsEndpoint, dependsOn, endpointParamKey, valueKey, labelKey }, 
                                 formState.form
                             );
@@ -161,7 +168,7 @@
                                 bind:value={searchQuery[key]}
                             />
                         </div>
-                        {#if formState.loadingOptions[key]}
+                        {#if formState.loadingOptions?.[key]}
                             <Select.Item disabled value="loading">Loading...</Select.Item>
                         {:else}
                             {#if !required}
@@ -175,6 +182,16 @@
                         {/if}
                     </Select.Content>
                 </Select.Root>
+            {:else if type === "date"}
+                <ReusableCalendar 
+                    bind:value={formState.form[key]}
+                    parentFunction={(dateStr) => {
+                        formState.form[key] = dateStr;
+                        if (validateOn?.includes("input")) {
+                            formState.validateField(key, dateStr, false);
+                        }
+                    }}
+                />
             {:else}
                 <Input 
                     type="text" 
@@ -194,7 +211,8 @@
     </div>
 {/snippet}
 
-<div class="flex-1 min-h-0 overflow-y-auto p-2 space-y-6">
+<!-- <div class="flex-1 min-h-0 overflow-y-auto p-2 space-y-6"> -->
+<div class="p-2 space-y-6">
     {#each formFields as group}
         <div class="space-y-6">
             {#if group.title}
@@ -204,12 +222,6 @@
             {/if}
 
             {#each group.rows as row}
-                <!-- <div
-                    class="grid grid-cols-1 space-y-2 gap-6 md:gap-4"
-                    class:md:grid-cols-1={row.columns.length === 1}
-                    class:md:grid-cols-2={row.columns.length === 2}
-                    class:md:grid-cols-3={row.columns.length === 3}
-                > -->
                 <div
                     class="grid grid-cols-1 space-y-2 gap-6 md:gap-4"
                     class:md:grid-cols-1={row.columns.length === 1 && row.columns[0].fullWidth !== false}
@@ -218,12 +230,6 @@
                 >
                     {#each row.columns as col}
                         {#if col.type === "group"}
-                            <!-- <div
-                                class="grid grid-cols-1 gap-6 md:gap-2"
-                                class:md:grid-cols-1={col.columns.length === 1}
-                                class:md:grid-cols-2={col.columns.length === 2}
-                                class:md:grid-cols-3={col.columns.length === 3}
-                            > -->
                             <div
                                 class="grid grid-cols-1 gap-6 md:gap-2"
                                 class:md:grid-cols-1={col.columns.length === 1 && col.columns[0].fullWidth !== false}
diff --git a/src/lib/components/reusable/form/form-page-container.svelte b/src/lib/components/reusable/form/form-page-container.svelte
index 059dd64..927b591 100644
--- a/src/lib/components/reusable/form/form-page-container.svelte
+++ b/src/lib/components/reusable/form/form-page-container.svelte
@@ -17,8 +17,13 @@
 
 <div class="flex flex-col p-2 gap-4 h-full w-full">
     <TopbarWrapper actions={actions} title={title}/>
-    {@render children()}
-    <div class="mt-auto flex justify-end items-center pt-2">
+    <!-- <div class="flex-1 min-h-0 flex flex-col gap-4"> -->
+    <div class="flex-1 min-h-0 overflow-y-auto p-2">
+        {@render children()}
+    </div>
+    <!-- <div class="mt-auto flex justify-end items-center pt-2"> -->
+    <!-- <div class="flex justify-end items-center pt-2"> -->
+    <div class="shrink-0 border-t pt-2 flex justify-end items-center">
         <Button 
             size="sm" 
             class="cursor-pointer {secondaryActions.length ? 'rounded-r-none' : ''}"
diff --git a/src/lib/components/ui/badge/badge.svelte b/src/lib/components/ui/badge/badge.svelte
new file mode 100644
index 0000000..cd071e9
--- /dev/null
+++ b/src/lib/components/ui/badge/badge.svelte
@@ -0,0 +1,45 @@
+<script module>
+	import { tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] [&>svg]:pointer-events-none [&>svg]:size-3",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
+				destructive:
+					"bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/70 border-transparent text-white",
+				outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+</script>
+
+<script>
+	import { cn } from "$lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		href,
+		class: className,
+		variant = "default",
+		children,
+		...restProps
+	} = $props();
+</script>
+
+<svelte:element
+	this={href ? "a" : "span"}
+	bind:this={ref}
+	data-slot="badge"
+	{href}
+	class={cn(badgeVariants({ variant }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</svelte:element>
\ No newline at end of file
diff --git a/src/lib/components/ui/badge/index.js b/src/lib/components/ui/badge/index.js
new file mode 100644
index 0000000..4f7f9a3
--- /dev/null
+++ b/src/lib/components/ui/badge/index.js
@@ -0,0 +1,2 @@
+export { default as Badge } from "./badge.svelte";
+export { badgeVariants, } from "./badge.svelte";
\ No newline at end of file
diff --git a/src/routes/+layout.server.js b/src/routes/+layout.server.js
index b608f3f..887945f 100644
--- a/src/routes/+layout.server.js
+++ b/src/routes/+layout.server.js
@@ -9,6 +9,9 @@ export async function load({ url }) {
         '/patient/admission': {
             title: 'Patient Admission',
         },
+        '/dictionary/contact': {
+            title: 'Contact'
+        },
         '/dictionary/location': {
             title: 'Location'
         },
diff --git a/src/routes/dictionary/contact/+page.svelte b/src/routes/dictionary/contact/+page.svelte
new file mode 100644
index 0000000..ab99793
--- /dev/null
+++ b/src/routes/dictionary/contact/+page.svelte
@@ -0,0 +1,51 @@
+<script>
+    import { Separator } from "$lib/components/ui/separator/index.js";
+	import { useMasterDetail } from "$lib/components/composable/use-master-detail.svelte";
+	import { getContact, createContact, editContact } from "$lib/components/dictionary/contact/api/contact-api";
+	import MasterPage from "$lib/components/dictionary/contact/page/master-page.svelte";
+	import ViewPage from "$lib/components/dictionary/contact/page/view-page.svelte";
+	import CreatePage from "$lib/components/dictionary/contact/page/create-page.svelte";
+	import EditPage from "$lib/components/dictionary/contact/page/edit-page.svelte";
+	import { contactSchema, contactInitialForm, contactDefaultErrors, contactFormFields, getContactFormActions } from "$lib/components/dictionary/contact/config/contact-form-config";
+
+	const masterDetail = useMasterDetail({
+        onSelect: async (row) => {
+			return await getContact(row.ContactID);
+		},
+		formConfig: {
+			schema: contactSchema,
+			initialForm: contactInitialForm,
+			defaultErrors: contactDefaultErrors,
+			mode: 'create',
+			modeOpt: 'default',
+			saveEndpoint: createContact,
+			editEndpoint: editContact,
+		}
+	});
+
+	const pageContext = {
+		masterDetail,
+		formFields: contactFormFields,
+		formActions: getContactFormActions,
+		schema: contactSchema,
+		initialForm: contactInitialForm,
+	}
+</script>
+
+<div class="flex w-full h-full overflow-hidden">
+	{#if masterDetail.showMaster}
+		<MasterPage {masterDetail} />
+	{/if}
+    	<Separator orientation="vertical"/>
+	{#if masterDetail.showDetail}
+		 <main class={`${masterDetail.isMobile ? 'w-full' : masterDetail.isFormMode ? 'w-[97%] flex flex-col items-start' : 'w-[65%]'} h-full overflow-y-auto flex flex-col items-center transition-all duration-300`}>
+			{#if masterDetail.mode === "view"}
+				<ViewPage context={pageContext}/>
+			{:else if masterDetail.mode === "create"}
+				<CreatePage context={pageContext}/>
+			{:else if masterDetail.mode === "edit"}
+				<EditPage context={pageContext}/>
+			{/if}
+		</main>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/src/routes/dictionary/test/+page.svelte b/src/routes/dictionary/test/+page.svelte
new file mode 100644
index 0000000..839f1d3
--- /dev/null
+++ b/src/routes/dictionary/test/+page.svelte
@@ -0,0 +1,51 @@
+<script>
+    import { Separator } from "$lib/components/ui/separator/index.js";
+	import { useMasterDetail } from "$lib/components/composable/use-master-detail.svelte";
+	import { getTest, createTest, editTest } from "$lib/components/dictionary/test/api/test-api";
+	import MasterPage from "$lib/components/dictionary/test/page/master-page.svelte";
+	import ViewPage from "$lib/components/dictionary/test/page/view-page.svelte";
+	import CreatePage from "$lib/components/dictionary/test/page/create-page.svelte";
+	import EditPage from "$lib/components/dictionary/test/page/edit-page.svelte";
+	import { testSchema, testInitialForm, testDefaultErrors, testFormFields, getTestFormActions } from "$lib/components/dictionary/test/config/test-form-config";
+
+	const masterDetail = useMasterDetail({
+        onSelect: async (row) => {
+			return await getTest(row.TestSiteID);
+		},
+		formConfig: {
+			schema: testSchema,
+			initialForm: testInitialForm,
+			defaultErrors: testDefaultErrors,
+			mode: 'create',
+			modeOpt: 'default',
+			saveEndpoint: createTest,
+			editEndpoint: editTest,
+		}
+	});
+
+	const pageContext = {
+		masterDetail,
+		formFields: testFormFields,
+		formActions: getTestFormActions,
+		schema: testSchema,
+		initialForm: testInitialForm,
+	}
+</script>
+
+<div class="flex w-full h-full overflow-hidden">
+	{#if masterDetail.showMaster}
+		<MasterPage {masterDetail} />
+	{/if}
+    	<Separator orientation="vertical"/>
+	{#if masterDetail.showDetail}
+		 <main class={`${masterDetail.isMobile ? 'w-full' : masterDetail.isFormMode ? 'w-[97%] flex flex-col items-start' : 'w-[65%]'} h-full overflow-y-auto flex flex-col items-center transition-all duration-300`}>
+			{#if masterDetail.mode === "view"}
+				<ViewPage context={pageContext}/>
+			{:else if masterDetail.mode === "create"}
+				<CreatePage context={pageContext}/>
+			{:else if masterDetail.mode === "edit"}
+				<EditPage context={pageContext}/>
+			{/if}
+		</main>
+	{/if}
+</div>
\ No newline at end of file
diff --git a/src/routes/dictionary/testdef/+page.svelte b/src/routes/dictionary/testdef/+page.svelte
deleted file mode 100644
index 5b65cb6..0000000
--- a/src/routes/dictionary/testdef/+page.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-    import { Separator } from "$lib/components/ui/separator/index.js";
-	import { useMasterDetail } from "$lib/components/composable/use-master-detail.svelte";
-	import { getTest, createTest, editTest } from "$lib/components/dictionary/testdef/api/testdef-api";
-	import MasterPage from "$lib/components/dictionary/testdef/page/master-page.svelte";
-	import ViewPage from "$lib/components/dictionary/testdef/page/view-page.svelte";
-	import CreatePage from "$lib/components/dictionary/testdef/page/create-page.svelte";
-	import EditPage from "$lib/components/dictionary/testdef/page/edit-page.svelte";
-	import { admissionSchema, admissionInitialForm, admissionDefaultErrors, admissionFormFields, getAdmissionFormActions, buildPayload } from "$lib/components/dictionary/testdef/config/testdef-form-config";
-
-	const masterDetail = useMasterDetail({
-		onSelect: async (row) => {
-			const response =  await getVisit(row.PVID);
-			if (response?.data) {
-				response.data.isDischarge = response.data.ADTCode === "A03";
-			}
-
-			return response
-		},
-		formConfig: {
-			schema: admissionSchema,
-			initialForm: admissionInitialForm,
-			defaultErrors: admissionDefaultErrors,
-			mode: 'create',
-			modeOpt: 'default',
-			saveEndpoint: createAdmission,
-			editEndpoint: editAdmission,
-		}
-	});
-
-	const pageContext = {
-		masterDetail,
-		formFields: admissionFormFields,
-		formActions: getAdmissionFormActions,
-		schema: admissionSchema,
-		initialForm: admissionInitialForm,
-		defaultErrors: {
-        	create: admissionDefaultErrors,
-			edit: {}
-		}
-	}
-</script>
-
-<div class="flex w-full h-full overflow-hidden">
-	{#if masterDetail.showMaster}
-		<MasterPage {masterDetail} />
-	{/if}
-    	<Separator orientation="vertical"/>
-	{#if masterDetail.showDetail}
-		 <main class={`${masterDetail.isMobile ? 'w-full' : masterDetail.isFormMode ? 'w-[97%] flex flex-col items-start' : 'w-[65%]'} h-full overflow-y-auto flex flex-col items-center transition-all duration-300`}>
-			{#if masterDetail.mode === "view"}
-				<ViewPage context={pageContext}/>
-			{:else if masterDetail.mode === "create"}
-				<CreatePage context={pageContext}/>
-			{:else if masterDetail.mode === "edit"}
-				<EditPage context={pageContext}/>
-			{/if}
-		</main>
-	{/if}
-</div>
\ No newline at end of file