diff --git a/src/lib/components/dictionary/test/page/tabs/map.svelte b/src/lib/components/dictionary/test/page/tabs/map.svelte
index 327db50..e58f672 100644
--- a/src/lib/components/dictionary/test/page/tabs/map.svelte
+++ b/src/lib/components/dictionary/test/page/tabs/map.svelte
@@ -126,10 +126,9 @@
             {/if}
         </div>
     </div>
-
-    <Separator />
-
+    
     <div>
+        <Separator />
         <Table.Root>
             <Table.Header>
                 <Table.Row class="hover:bg-transparent">
diff --git a/src/lib/components/dictionary/testmap/config/testmap-form-config.js b/src/lib/components/dictionary/testmap/config/testmap-form-config.js
index a25cdda..53da9d3 100644
--- a/src/lib/components/dictionary/testmap/config/testmap-form-config.js
+++ b/src/lib/components/dictionary/testmap/config/testmap-form-config.js
@@ -46,7 +46,6 @@ export const testMapDefaultErrors = {
 
 export const testMapFormFields = [
     {
-        title: 'Host & Client Information',
         rows: [
             {
                 type: 'row',
diff --git a/src/lib/components/dictionary/testmap/page/create-page.svelte b/src/lib/components/dictionary/testmap/page/create-page.svelte
index 4649907..42ad6ea 100644
--- a/src/lib/components/dictionary/testmap/page/create-page.svelte
+++ b/src/lib/components/dictionary/testmap/page/create-page.svelte
@@ -1 +1,305 @@
-cr
\ No newline at end of file
+<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";
+    import { Separator } from "$lib/components/ui/separator/index.js";
+    import PencilIcon from "@lucide/svelte/icons/pencil";
+    import Trash2Icon from "@lucide/svelte/icons/trash-2";
+    import * as Table from "$lib/components/ui/table/index.js";
+    import { Button } from "$lib/components/ui/button/index.js";
+    import { untrack } from "svelte";
+    import { API } from '$lib/config/api';
+
+    let props = $props();
+
+    let editingId = $state(null);
+    let idCounter = $state(0);
+    let tempMap = $state([]);
+
+    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);
+
+    function snapshotForm() {
+        return untrack(() => {
+            const f = formState.form;
+            // const options = {};
+            // for (const key in masterDetail.formState.selectOptions) {
+            //     options[key] = [...masterDetail.formState.selectOptions[key]];
+            // }
+            return {
+                HostType: f.HostType ?? "",
+                HostID: f.HostID ?? "",
+                HostTestCode: f.HostTestCode ?? "",
+                HostTestName: f.HostTestName ?? "",
+                ClientType: f.ClientType ?? "",
+                ClientID: f.ClientID ?? "",
+                ClientTestCode: f.ClientTestCode ?? "",
+                ClientTestName: f.ClientTestName ?? "",
+                ConDefID: f.ConDefID ?? "",
+                // options: options
+            };
+        });
+    }
+
+    function resetForm() {
+        formState.reset();
+        editingId = null;
+    }
+
+    function handleInsert() {
+        const row = {
+            id: ++idCounter,
+            ...snapshotForm()
+        };
+
+        tempMap = [...tempMap, row];
+
+        resetForm();
+    }
+
+    async function handleEdit(row) {
+        editingId = row.id;
+
+        untrack(() => {
+            const f = formState.form;
+            console.log(row);
+            f.HostType       = row.HostType;
+            f.HostID         = row.HostID;
+            f.HostTestCode   = row.HostTestCode;
+            f.HostTestName   = row.HostTestName;
+            f.ClientType     = row.ClientType;
+            f.ClientID       = row.ClientID;
+            f.ClientTestCode = row.ClientTestCode;
+            f.ClientTestName = row.ClientTestName;
+            f.ConDefID       = row.ConDefID;
+
+            // if (row.options) {
+            //     for (const key in row.options) {
+            //         masterDetail.formState.selectOption[key] = row.options[key];
+            //     }
+            // }
+        });
+    }
+
+    function handleUpdate() {
+        tempMap = tempMap.map((row) =>
+            row.id === editingId ? { id: row.id, ...snapshotForm() } : row
+        );
+        resetForm();
+    }
+
+    function handleCancelEdit() {
+        resetForm();
+    }
+
+    function handleRemove(id) {
+        tempMap = tempMap.filter((row) => row.id !== id);
+        if (editingId === id) {
+            resetForm();
+        }
+    }
+
+    async function handleSave() {
+        const result = await formState.save(masterDetail.mode);
+
+        toast('Test Map Created!');
+        masterDetail?.exitForm(true);
+    }
+
+    const primaryAction = $derived({
+        label: 'Save',
+        onClick: handleSave,
+        disabled: helpers.hasErrors || formState.isSaving.current,
+        loading: formState.isSaving.current
+    });
+
+    const secondaryActions = [];
+
+    const mapFormFieldsTransformed = $derived.by(() => {
+        return formFields.map((group) => ({
+            ...group,
+            rows: group.rows.map((row) => ({
+                ...row,
+                columns: row.columns.map((col) => {
+                    if (col.key === 'HostID') {
+                        if (formState.form.HostType === 'SITE') {
+                            console.log('ini jalan kok');
+                            return {
+                                ...col,
+                                type: 'select',
+                                optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
+                                valueKey: 'SiteID',
+                                labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`
+                            };
+                            
+                        }
+                        return { ...col, type: 'text', optionsEndpoint: undefined };
+                    }
+
+                    if (col.key === 'ClientID') {
+                        if (formState.form.ClientType === 'SITE') {
+                            return {
+                                ...col,
+                                type: 'select',
+                                optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
+                                valueKey: 'SiteID',
+                                labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`
+                            };
+                        }
+                        return { ...col, type: 'text', optionsEndpoint: undefined };
+                    }
+
+                    if (col.key === 'HostTestCode' || col.key === 'HostTestName') {
+						if (formState.form.HostType === 'SITE' && formState.form.HostID) {
+							return {
+								...col,
+								type: 'select',
+								optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${formState.form.HostID}`,
+								valueKey: 'TestSiteID',
+								labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`
+							};
+						}
+						// kalau belum pilih HostID, kembalikan default (misal input biasa)
+						return {
+							...col,
+							type: 'text',
+							optionsEndpoint: undefined
+						};
+					}
+
+					if (col.key === 'ClientTestCode' || col.key === 'ClientTestName') {
+						if (formState.form.ClientType === 'SITE' && formState.form.ClientID) {
+							return {
+								...col,
+								type: 'select',
+								optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${formState.form.ClientID}`,
+								valueKey: 'TestSiteID',
+								labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`
+							};
+						}
+						// kalau belum pilih HostID, kembalikan default (misal input biasa)
+						return {
+							...col,
+							type: 'text',
+							optionsEndpoint: undefined
+						};
+					}
+
+					return col;
+
+                    return col;
+                })
+            }))
+        }));
+    });
+    $inspect(mapFormFieldsTransformed)
+</script>
+
+<FormPageContainer title="Create Test Map" {primaryAction} {secondaryActions} {actions}>
+    <DictionaryFormRenderer 
+        {formState}
+        formFields={mapFormFieldsTransformed}
+        mode="create"
+    />
+    <div class="flex flex-col gap-4">
+        <div class="flex gap-2 mt-1 ms-2">
+            {#if editingId !== null}
+                <Button size="sm" class="cursor-pointer" onclick={handleUpdate}>
+                    Update
+                </Button>
+                <Button size="sm" variant="outline" class="cursor-pointer" onclick={handleCancelEdit}>
+                    Cancel
+                </Button>
+            {:else}
+                <Button size="sm" class="cursor-pointer" onclick={handleInsert}>
+                    Insert
+                </Button>
+            {/if}
+        </div>
+        
+        <div>
+            <Separator />
+            <Table.Root>
+                <Table.Header>
+                    <Table.Row class="hover:bg-transparent">
+                        <Table.Head>Host Type</Table.Head>
+                        <Table.Head>Host ID</Table.Head>
+                        <Table.Head>Host Test Code</Table.Head>
+                        <Table.Head>Host Test Name</Table.Head>
+                        <Table.Head>Client Type</Table.Head>
+                        <Table.Head>Client ID</Table.Head>
+                        <Table.Head>Client Test Code</Table.Head>
+                        <Table.Head>Client Test Name</Table.Head>
+                        <Table.Head>Container</Table.Head>
+                        <Table.Head class="w-[80px]"></Table.Head>
+                    </Table.Row>
+                </Table.Header>
+                <Table.Body>
+                    {#if tempMap.length === 0}
+                        <Table.Row>
+                            <Table.Cell colspan={9} class="text-center text-muted-foreground py-6">
+                                No data. Fill the form above and click Insert.
+                            </Table.Cell>
+                        </Table.Row>
+                    {:else}
+                        {#each tempMap as row (row.id)}
+                            <Table.Row 
+                                class="cursor-pointer hover:bg-muted/50"
+                            >
+                                <Table.Cell>{row.HostType}</Table.Cell>
+                                <Table.Cell>{row.HostID}</Table.Cell>
+                                <Table.Cell>{row.HostTestCode}</Table.Cell>
+                                <Table.Cell>{row.HostTestName}</Table.Cell>
+                                <Table.Cell>{row.ClientType}</Table.Cell>
+                                <Table.Cell>{row.ClientID}</Table.Cell>
+                                <Table.Cell>{row.ClientTestCode}</Table.Cell>
+                                <Table.Cell>{row.ClientTestName}</Table.Cell>
+                                <Table.Cell>{row.ConDefID}</Table.Cell>
+                                <Table.Cell>
+                                    <div class="flex gap-1">
+                                        <Button
+                                            size="icon"
+                                            variant="ghost"
+                                            class="h-7 w-7 cursor-pointer"
+                                            onclick={() => handleEdit(row)}
+                                        >
+                                            <PencilIcon class="h-3.5 w-3.5" />
+                                        </Button>
+                                        <Button
+                                            size="icon"
+                                            variant="ghost"
+                                            class="h-7 w-7 cursor-pointer"
+                                            onclick={() => handleRemove(row.id)}
+                                        >
+                                            <Trash2Icon class="h-3.5 w-3.5" />
+                                        </Button>
+                                    </div>
+                                </Table.Cell>
+                            </Table.Row>
+                        {/each}
+                    {/if}
+                </Table.Body>
+            </Table.Root>
+        </div>
+    </div>
+</FormPageContainer>
+
+<ReusableAlertDialog
+    bind:open={masterDetail.showExitConfirm}
+    onConfirm={masterDetail.confirmExit}
+/>
\ No newline at end of file
diff --git a/src/lib/components/dictionary/testmap/page/view-page.svelte b/src/lib/components/dictionary/testmap/page/view-page.svelte
index 6e9144c..2c37fa4 100644
--- a/src/lib/components/dictionary/testmap/page/view-page.svelte
+++ b/src/lib/components/dictionary/testmap/page/view-page.svelte
@@ -11,7 +11,6 @@
     const { masterDetail, formFields, formActions, schema } = props.context;
 
     let testMap = $derived(masterDetail?.selectedItem?.data);
-    $inspect(testMap)
 
     const handlers = {
         editTest: () => masterDetail.enterEdit("data"),