diff --git a/src/lib/components/dictionary/test/config/test-form-config.js b/src/lib/components/dictionary/test/config/test-form-config.js
index 9f2d136..0ac6e67 100644
--- a/src/lib/components/dictionary/test/config/test-form-config.js
+++ b/src/lib/components/dictionary/test/config/test-form-config.js
@@ -73,6 +73,10 @@ export const testCalSchema = z
 		}
 	});
 
+export const testGroupSchema = z.object({
+		Member: z.string().optional()
+	});
+
 export const refNumSchema = z
 	.object({
 		AgeStart: z.string().optional(),
@@ -212,6 +216,12 @@ export const testCalInitialForm = {
 	FormulaCode: ''
 };
 
+export const testGroupInitialForm = {
+	TestGrpID: '',
+	TestSiteID: '',
+	Member: '',
+}
+
 export const refNumInitialForm = {
 	RefNumID: '',
 	SiteID: '',
@@ -270,9 +280,13 @@ export const testDefaultErrors = {
 
 export const testCalDefaultErrors = {
 	FormulaInput: 'Required',
-	FormulaCode: null
+	FormulaCode: null,
 };
 
+export const testGroupDefaultErrors = {
+	Member: null,
+}
+
 export const refNumDefaultErrors = {
 	AgeStart: null,
 	AgeEnd: null,
@@ -597,6 +611,28 @@ export const testCalFormFields = [
 	}
 ];
 
+export const testGroupFormFields = [
+	{
+		rows: [
+			{
+				type: 'row',
+				columns: [
+					{
+						key: 'Member',
+						label: 'Member Test',
+						required: false,
+						type: 'members',
+						optionsEndpoint: `${API.BASE_URL}${API.TEST}`,
+						valueKey: 'TestSiteCode',
+						labelKey: (item) => `${item.TestSiteCode} - ${item.TestSiteName}`,
+						validateOn: ['input']
+					}
+				]
+			},
+		]
+	}
+];
+
 export const refNumFormFields = [
 	{
 		rows: [
@@ -1013,21 +1049,25 @@ export function getTestFormActions(handlers) {
 // 	return cleanEmptyStrings(payload);
 // }
 
-export function buildTestPayload({ mainForm, activeFormStates, testType }) {
-    let payload = {
-        ...mainForm
-    };
+export function buildTestPayload({ mainForm, activeFormStates, testType, refNumData, refTxtData }) {
+	let payload = {
+		...mainForm
+	};
 
-    for (const key in activeFormStates) {
+	for (const key in activeFormStates) {
 		const state = activeFormStates[key];
 
-		if (state?.form) {
+		if (key === 'refNum' && refNumData?.length > 0) {
+			payload[key] = refNumData;
+		} else if (key === 'refTxt' && refTxtData?.length > 0) {
+			payload[key] = refTxtData;
+
+		} else if (state?.form) {
 			payload[key] = {
 				...state.form
 			};
 		}
 	}
 
-
-    return cleanEmptyStrings(payload);
+	return cleanEmptyStrings(payload);
 }
diff --git a/src/lib/components/dictionary/test/page/create-page.svelte b/src/lib/components/dictionary/test/page/create-page.svelte
index 3154a92..b09f8e8 100644
--- a/src/lib/components/dictionary/test/page/create-page.svelte
+++ b/src/lib/components/dictionary/test/page/create-page.svelte
@@ -1,502 +1,524 @@
 <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 * as Tabs from "$lib/components/ui/tabs/index.js";
-    import { useForm } from "$lib/components/composable/use-form.svelte";
-    import { buildTestPayload, 
-            testCalSchema, testCalInitialForm, testCalDefaultErrors, testCalFormFields, 
-            refNumSchema, refNumDefaultErrors, refNumInitialForm, refNumFormFields, 
-            refTxtSchema, refTxtDefaultErrors, refTxtInitialForm, refTxtFormFields,
-            testMapSchema, testMapInitialForm, testMapDefaultErrors, testMapFormFields
-        } from "$lib/components/dictionary/test/config/test-form-config";
-    import ReusableEmpty from "$lib/components/reusable/reusable-empty.svelte";
-    import RefNum from "./tabs/ref-num.svelte";
-    import RefTxt from "./tabs/ref-txt.svelte";
-    import Calculation from "./tabs/calculation.svelte";
-    import Map from "./tabs/map.svelte";
-    import { API } from "$lib/config/api";
-    import { untrack } from "svelte";
+	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 * as Tabs from '$lib/components/ui/tabs/index.js';
+	import { useForm } from '$lib/components/composable/use-form.svelte';
+	import {
+		buildTestPayload,
+		testCalSchema,
+		testCalInitialForm,
+		testCalDefaultErrors,
+		testCalFormFields,
+		refNumSchema,
+		refNumDefaultErrors,
+		refNumInitialForm,
+		refNumFormFields,
+		refTxtSchema,
+		refTxtDefaultErrors,
+		refTxtInitialForm,
+		refTxtFormFields,
+		testMapSchema,
+		testMapInitialForm,
+		testMapDefaultErrors,
+		testMapFormFields,
+		testGroupSchema,
+		testGroupInitialForm,
+		testGroupDefaultErrors,
+        testGroupFormFields
+	} from '$lib/components/dictionary/test/config/test-form-config';
+	import ReusableEmpty from '$lib/components/reusable/reusable-empty.svelte';
+	import RefNum from './tabs/ref-num.svelte';
+	import RefTxt from './tabs/ref-txt.svelte';
+	import Calculation from './tabs/calculation.svelte';
+	import Map from './tabs/map.svelte';
+    import Group from './tabs/group.svelte';
+	import { API } from '$lib/config/api';
+	import { untrack } from 'svelte';
 
-    let props = $props();
+	let props = $props();
 
-    let resetRefNum = $state();
-    let resetRefTxt = $state();
-    let resetMap = $state();
+	let resetRefNum = $state();
+	let resetRefTxt = $state();
+	let resetMap = $state();
+	let refNumData = $state([]);
+	let refTxtData = $state([]);
 
-    const { masterDetail, formFields, formActions, schema, initialForm } = props.context;
+	const { masterDetail, formFields, formActions, schema, initialForm } = props.context;
 
-    const { formState } = masterDetail;
+	const { formState } = masterDetail;
 
-    const calFormState = useForm({
-        schema: testCalSchema,
-        initialForm: testCalInitialForm,
-        defaultErrors: testCalDefaultErrors,
+	const calFormState = useForm({
+		schema: testCalSchema,
+		initialForm: testCalInitialForm,
+		defaultErrors: testCalDefaultErrors
+	});
+
+    const groupFormState = useForm({
+        schema: testGroupSchema,
+        initialForm: testGroupInitialForm,
+        defaultErrors: testGroupDefaultErrors,
     });
 
-    const refNumState = useForm({
-        schema: refNumSchema,
-        initialForm: refNumInitialForm,
-        defaultErrors: refNumDefaultErrors,
-    });
+	const refNumState = useForm({
+		schema: refNumSchema,
+		initialForm: refNumInitialForm,
+		defaultErrors: refNumDefaultErrors
+	});
 
-    const refTxtState = useForm({
-        schema: refTxtSchema,
-        initialForm: refTxtInitialForm,
-        defaultErrors: refTxtDefaultErrors,
-    });
+	const refTxtState = useForm({
+		schema: refTxtSchema,
+		initialForm: refTxtInitialForm,
+		defaultErrors: refTxtDefaultErrors
+	});
 
-    const mapFormState = useForm({
-        schema: testMapSchema,
-        initialForm: testMapInitialForm,
-        defaultErrors: testMapDefaultErrors,
-        modeOpt: 'cascade'
-    })
+	const mapFormState = useForm({
+		schema: testMapSchema,
+		initialForm: testMapInitialForm,
+		defaultErrors: testMapDefaultErrors,
+		modeOpt: 'cascade'
+	});
 
-    // const activeFormStates = $derived.by(() => {
-    //     switch (formState.form.TestType) {
-    //         case "TEST":
-    //         case "PARAM":
-    //             return [refNumState, refTxtState, mapFormState];
-    //         case "CALC":
-    //             return [calFormState, refNumState, refTxtState, mapFormState];
-    //         case "GROUP":
-    //             return [];
-    //         case "TITLE":
-    //             return [];
-    //         default:
-    //             return [];
-    //     }
-    // });
+	// const activeFormStates = $derived.by(() => {
+	//     switch (formState.form.TestType) {
+	//         case "TEST":
+	//         case "PARAM":
+	//             return [refNumState, refTxtState, mapFormState];
+	//         case "CALC":
+	//             return [calFormState, refNumState, refTxtState, mapFormState];
+	//         case "GROUP":
+	//             return [];
+	//         case "TITLE":
+	//             return [];
+	//         default:
+	//             return [];
+	//     }
+	// });
 
-    const activeFormStates = $derived.by(() => {
-        const testType = formState.form.TestType ?? "";
-        const refType = formState.form.RefType ?? "";
+	const activeFormStates = $derived.by(() => {
+		const testType = formState.form.TestType ?? '';
+		const refType = formState.form.RefType ?? '';
 
-        let refState = {};
+		let refState = {};
 
-        if (refType === "RANGE" || refType === "THOLD") {
-            refState = { refNum: refNumState };
-        } else if (refType === "TEXT" || refType === "VSET") {
-            refState = { refTxt: refTxtState };
-        }
+		if (refType === 'RANGE' || refType === 'THOLD') {
+			refState = { refNum: refNumState };
+		} else if (refType === 'TEXT' || refType === 'VSET') {
+			refState = { refTxt: refTxtState };
+		}
 
-        switch (testType) {
-            case "TEST":
-            case "PARAM":
-                return {
-                    ...refState,
-                    map: mapFormState
-                };
-            case "CALC":
-                return {
-                    cal: calFormState,
-                    ...refState,
-                    map: mapFormState
-                };
-            case "GROUP":
-            case "TITLE":
-            default:
-                return {};
-        }
-    });
+		switch (testType) {
+			case 'TEST':
+			case 'PARAM':
+				return {
+					...refState,
+					map: mapFormState
+				};
+			case 'CALC':
+				return {
+					cal: calFormState,
+					...refState,
+					map: mapFormState
+				};
+			case 'GROUP':
+			case 'TITLE':
+			default:
+				return {};
+		}
+	});
 
-    // const helpers = useDictionaryForm(formState);
-    const helpers = useDictionaryForm(formState, () => activeFormStates);
+	// const helpers = useDictionaryForm(formState);
+	const helpers = useDictionaryForm(formState, () => activeFormStates);
 
-    const handlers = {
-        clearForm: () => {
-            formState.reset();
-        }
-    };
+	const handlers = {
+		clearForm: () => {
+			formState.reset();
+		}
+	};
 
-    const actions = formActions(handlers);
+	const actions = formActions(handlers);
 
-    const allColumns = formFields.flatMap(
-        (section) => section.rows.flatMap(
-            (row) => row.columns ?? []
-        )
-    );
+	const allColumns = formFields.flatMap((section) =>
+		section.rows.flatMap((row) => row.columns ?? [])
+	);
 
-    let showConfirm = $state(false);
+	let showConfirm = $state(false);
 
-    async function handleSave() {
-        const mainForm = masterDetail.formState.form;
-        const testType = mainForm.TestType;
+	async function handleSave() {
+		const mainForm = masterDetail.formState.form;
+		const testType = mainForm.TestType;
 
-        const payload = buildTestPayload({
-            mainForm,
-            activeFormStates,
-            testType: testType
-        });
-        console.log(payload);
-        // const result = await formState.save(masterDetail.mode);
+		const payload = buildTestPayload({
+			mainForm,
+			activeFormStates,
+			testType: testType,
+			refNumData: refNumData,
+			refTxtData: refTxtData
+		});
+		console.log(payload);
+		// const result = await formState.save(masterDetail.mode);
 
-        // toast('Test Created!');
-        // masterDetail?.exitForm(true);
-    }
+		// toast('Test Created!');
+		// masterDetail?.exitForm(true);
+	}
 
-    const primaryAction = $derived({
-        label: 'Save',
-        onClick: handleSave,
-        disabled: helpers.hasErrors || formState.isSaving.current,
-        loading: formState.isSaving.current
-    });
+	const primaryAction = $derived({
+		label: 'Save',
+		onClick: handleSave,
+		disabled: helpers.hasErrors || formState.isSaving.current,
+		loading: formState.isSaving.current
+	});
 
-    const secondaryActions = [];
+	const secondaryActions = [];
 
-    // ==================================================================
-    
-    let availableTabs = $derived.by(() => {
-        const testType = formState?.form?.TestType;
-        
-        switch(testType) {
-            case 'TEST':
-            case 'PARAM':
-                return ['definition', 'map', 'reference'];
-            case 'CALC':
-                return ['definition', 'calculation', 'map', 'reference'];
-            case 'GROUP':
-                return ['definition', 'group'];
-            default:
-                return ['definition'];
-        }
-    });
+	// ==================================================================
 
-    let disabledResultTypes = $derived.by(() => {
-        const testType = formState?.form?.TestType;
-        
-        switch(testType) {
-            case 'TEST':
-            case 'PARAM':
-                return [];
-            case 'CALC':
-                return ['RANGE', 'TEXT', 'VSET', 'NORES'];
-            case 'GROUP':
-                return ['NMRIC', 'RANGE', 'TEXT', 'VSET', 'NORES'];
-            case 'TITLE':
-                return ['NMRIC', 'RANGE', 'TEXT', 'VSET', 'NORES'];
-            default:
-                return [];
-        }
-    });
+	let availableTabs = $derived.by(() => {
+		const testType = formState?.form?.TestType;
 
-    let disabledReferenceTypes = $derived.by(() => {
-        const resultType = formState?.form?.ResultType;
-        
-        switch(resultType) {
-            case 'NMRIC':
-                return ['TEXT', 'VSET', 'NOREF'];
-            case 'RANGE':
-                return ['TEXT', 'VSET', 'NOREF'];
-            case 'TEXT':
-                return ['RANGE', 'THOLD', 'VSET', 'NOREF'];
-            case 'VSET':
-                return ['RANGE', 'THOLD', 'TEXT', 'NOREF'];
-            case 'NORES':
-                return ['RANGE', 'THOLD', 'TEXT', 'VSET'];
-            default:
-                return ['RANGE', 'THOLD', 'TEXT', 'VSET', 'NOREF'];
-        }
-    });
+		switch (testType) {
+			case 'TEST':
+			case 'PARAM':
+				return ['definition', 'map', 'reference'];
+			case 'CALC':
+				return ['definition', 'calculation', 'map', 'reference'];
+			case 'GROUP':
+				return ['definition', 'group'];
+			default:
+				return ['definition'];
+		}
+	});
 
-    let hiddenFields = $derived.by(() => {
-        const resultType = formState?.form?.ResultType;
-        return resultType !== "VSET" ? ["VSet"] : [];
-    });
+	let disabledResultTypes = $derived.by(() => {
+		const testType = formState?.form?.TestType;
 
-    let refComponent = $derived.by(() => {
-        const refType = formState.form.RefType;
-        if (refType === 'RANGE' || refType === 'THOLD') return 'numeric';
-        if (refType === 'TEXT' || refType === 'VSET') return 'text';
-        return null;
-    });
+		switch (testType) {
+			case 'TEST':
+			case 'PARAM':
+				return [];
+			case 'CALC':
+				return ['RANGE', 'TEXT', 'VSET', 'NORES'];
+			case 'GROUP':
+				return ['NMRIC', 'RANGE', 'TEXT', 'VSET', 'NORES'];
+			case 'TITLE':
+				return ['NMRIC', 'RANGE', 'TEXT', 'VSET', 'NORES'];
+			default:
+				return [];
+		}
+	});
 
-    const refTxtFormFieldsTransformed = $derived.by(() => {
-        return refTxtFormFields.map(group => ({
-            ...group,
-            rows: group.rows.map(row => ({
-                ...row,
-                columns: row.columns.map(col => {
-                    if (col.key !== "RefTxt") return col;
+	let disabledReferenceTypes = $derived.by(() => {
+		const resultType = formState?.form?.ResultType;
 
-                    if (formState.form.ResultType !== "VSET" || !formState.form.VSet) {
-                        return {
-                            ...col,
-                            type: "textarea",
-                            optionsEndpoint: undefined
-                        };
-                    }
+		switch (resultType) {
+			case 'NMRIC':
+				return ['TEXT', 'VSET', 'NOREF'];
+			case 'RANGE':
+				return ['TEXT', 'VSET', 'NOREF'];
+			case 'TEXT':
+				return ['RANGE', 'THOLD', 'VSET', 'NOREF'];
+			case 'VSET':
+				return ['RANGE', 'THOLD', 'TEXT', 'NOREF'];
+			case 'NORES':
+				return ['RANGE', 'THOLD', 'TEXT', 'VSET'];
+			default:
+				return ['RANGE', 'THOLD', 'TEXT', 'VSET', 'NOREF'];
+		}
+	});
 
-                    return {
-                        ...col,
-                        type: "select",
-                        optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/${formState.form.VSet}`,
-                        fullWidth: false
-                    };
-                })
-            }))
-        }));
-    });
+	let hiddenFields = $derived.by(() => {
+		const resultType = formState?.form?.ResultType;
+		return resultType !== 'VSET' ? ['VSet'] : [];
+	});
 
-    const testMapFormFieldsTransformed = $derived.by(() => {
-        return testMapFormFields.map(group => ({
-            ...group,
-            rows: group.rows.map(row => ({
-                ...row,
-                columns: row.columns.map(col => {
-                    
-                    if (col.key === "HostID") {
-                        if (mapFormState.form.HostType === "SITE") {
-                            return {
-                                ...col,
-                                type: "select",
-                                optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
-                                valueKey: "SiteID",
-                                labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`,
-                            };
-                        }
-                        return col;
-                    }
+	let refComponent = $derived.by(() => {
+		const refType = formState.form.RefType;
+		if (refType === 'RANGE' || refType === 'THOLD') return 'numeric';
+		if (refType === 'TEXT' || refType === 'VSET') return 'text';
+		return null;
+	});
 
-                    if (col.key === "ClientID") {
-                        if (mapFormState.form.ClientType === "SITE") {
-                            return {
-                                ...col,
-                                type: "select",
-                                optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
-                                valueKey: "SiteID",
-                                labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`,
-                            };
-                        }
-                        return col;
-                    }
+	const refTxtFormFieldsTransformed = $derived.by(() => {
+		return refTxtFormFields.map((group) => ({
+			...group,
+			rows: group.rows.map((row) => ({
+				...row,
+				columns: row.columns.map((col) => {
+					if (col.key !== 'RefTxt') return col;
 
-                    if (col.key === "HostTestCode" || col.key === "HostTestName") {
-                        if (mapFormState.form.HostType === "SITE" && mapFormState.form.HostID) {
-                            return {
-                                ...col,
-                                type: "select",
-                                optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.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 (formState.form.ResultType !== 'VSET' || !formState.form.VSet) {
+						return {
+							...col,
+							type: 'textarea',
+							optionsEndpoint: undefined
+						};
+					}
 
-                    if (col.key === "ClientTestCode" || col.key === "ClientTestName") {
-                        if (mapFormState.form.ClientType === "SITE" && mapFormState.form.ClientID) {
-                            return {
-                                ...col,
-                                type: "select",
-                                optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.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,
+						type: 'select',
+						optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/${formState.form.VSet}`,
+						fullWidth: false
+					};
+				})
+			}))
+		}));
+	});
 
-                    return col;
-                })
-            }))
-        }));
-    });
+	const testMapFormFieldsTransformed = $derived.by(() => {
+		return testMapFormFields.map((group) => ({
+			...group,
+			rows: group.rows.map((row) => ({
+				...row,
+				columns: row.columns.map((col) => {
+					if (col.key === 'HostID') {
+						if (mapFormState.form.HostType === 'SITE') {
+							return {
+								...col,
+								type: 'select',
+								optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
+								valueKey: 'SiteID',
+								labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`
+							};
+						}
+						return col;
+					}
 
-// $inspect(activeFormState.errors)
-    let activeTab = $state('definition');
+					if (col.key === 'ClientID') {
+						if (mapFormState.form.ClientType === 'SITE') {
+							return {
+								...col,
+								type: 'select',
+								optionsEndpoint: `${API.BASE_URL}${API.SITE}`,
+								valueKey: 'SiteID',
+								labelKey: (item) => `${item.SiteCode} - ${item.SiteName}`
+							};
+						}
+						return col;
+					}
 
-    $effect(() => {
-        if (!availableTabs.includes(activeTab)) {
-            activeTab = availableTabs[0];
-        }
-    });
+					if (col.key === 'HostTestCode' || col.key === 'HostTestName') {
+						if (mapFormState.form.HostType === 'SITE' && mapFormState.form.HostID) {
+							return {
+								...col,
+								type: 'select',
+								optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.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
+						};
+					}
 
-    $effect(() => {
-        for (const key of hiddenFields) {
-            formState.form[key] = "";
-        }
-    });
+					if (col.key === 'ClientTestCode' || col.key === 'ClientTestName') {
+						if (mapFormState.form.ClientType === 'SITE' && mapFormState.form.ClientID) {
+							return {
+								...col,
+								type: 'select',
+								optionsEndpoint: `${API.BASE_URL}${API.TEST}?SiteID=${mapFormState.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
+						};
+					}
 
-    $effect(() => {
-        if (formState.form.Factor && !formState.form.Unit2) {
-            formState.errors.Unit2 = "Required";
-        } else {
-            formState.errors.Unit2 = null;
-        }
-    });
+					return col;
+				})
+			}))
+		}));
+	});
 
-    $effect(() => {
-        const allColumns = formFields.flatMap(
-            (section) => section.rows.flatMap(
-                (row) => row.columns ?? []
-            )
-        );
-        
-        untrack(() => {
-            for (const col of allColumns) {
-                if (!col.optionsEndpoint) continue;
-                if (!col.optionsEndpoint || col.autoFetch === false) continue;
-    
-                formState.fetchOptions?.(
-                    {
-                        key: col.key,
-                        optionsEndpoint: col.optionsEndpoint,
-                        valueKey: col.valueKey,
-                        labelKey: col.labelKey,
-                    },
-                    formState.form
-                );
-            }
-        })
-    });
+	// $inspect(activeFormState.errors)
+	let activeTab = $state('definition');
 
-    function handleTestTypeChange(value) {
-        formState.form.TestType = value;
+	$effect(() => {
+		if (!availableTabs.includes(activeTab)) {
+			activeTab = availableTabs[0];
+		}
+	});
 
-        formState.form.ResultType = "";
-        formState.errors.ResultType = null;
-        formState.form.RefType = "";
-        formState.errors.RefType = null;
+	$effect(() => {
+		for (const key of hiddenFields) {
+			formState.form[key] = '';
+		}
+	});
 
-        calFormState.reset();
-        refNumState.reset();
-        refTxtState.reset();
+	$effect(() => {
+		if (formState.form.Factor && !formState.form.Unit2) {
+			formState.errors.Unit2 = 'Required';
+		} else {
+			formState.errors.Unit2 = null;
+		}
+	});
 
-        resetRefNum?.();
-        resetRefTxt?.();
-    }
+	$effect(() => {
+		const allColumns = formFields.flatMap((section) =>
+			section.rows.flatMap((row) => row.columns ?? [])
+		);
 
-    function handleResultTypeChange(value) {
-        formState.form.ResultType = value;
+		untrack(() => {
+			for (const col of allColumns) {
+				if (!col.optionsEndpoint) continue;
+				if (!col.optionsEndpoint || col.autoFetch === false) continue;
 
-        formState.form.RefType = "";
-        formState.errors.RefType = null;
+				formState.fetchOptions?.(
+					{
+						key: col.key,
+						optionsEndpoint: col.optionsEndpoint,
+						valueKey: col.valueKey,
+						labelKey: col.labelKey
+					},
+					formState.form
+				);
+			}
+		});
+	});
 
-        calFormState.reset();
-        refNumState.reset();
-        refTxtState.reset();
+	function handleTestTypeChange(value) {
+		formState.form.TestType = value;
 
-        resetRefNum?.();
-        resetRefTxt?.();
+		formState.form.ResultType = '';
+		formState.errors.ResultType = null;
+		formState.form.RefType = '';
+		formState.errors.RefType = null;
 
-        let newRefType = "";
-        if (value === 'TEXT') {
-            newRefType = 'TEXT';
-        }
-        if (value === 'VSET') {
-            newRefType = 'VSET';
-        }
-        if (value === 'NORES') {
-            newRefType = 'NOREF';
-        }
-        
-        if (newRefType) {
-            formState.form.RefType = newRefType;
-            handleRefTypeChange(newRefType);
-        }
-    }
+		calFormState.reset();
+		refNumState.reset();
+		refTxtState.reset();
 
-    function handleRefTypeChange(value) {
-        formState.form.RefType = value;
+		resetRefNum?.();
+		resetRefTxt?.();
+	}
 
-        refNumState.reset();
-        refTxtState.reset();
+	function handleResultTypeChange(value) {
+		formState.form.ResultType = value;
 
-        resetRefNum?.();
-        resetRefTxt?.();
+		formState.form.RefType = '';
+		formState.errors.RefType = null;
 
-        if (value === 'RANGE' || value === 'THOLD') {
-            refNumState.form.NumRefType = value;
-        }
-        if (value === 'TEXT' || value === 'VSET') {
-            refTxtState.form.TxtRefType = value;
-        }
-    }
+		calFormState.reset();
+		refNumState.reset();
+		refTxtState.reset();
 
-    // $inspect({
-    //     definition: formState.errors,
-    //     active: activeFormStates.map(fs => fs.errors)
-    // });
+		resetRefNum?.();
+		resetRefTxt?.();
 
-    // $inspect({
-    //     definition: formState.errors,
-    //     active: Object.values(activeFormStates).map(fs => fs.errors)
-    // });
+		let newRefType = '';
+		if (value === 'TEXT') {
+			newRefType = 'TEXT';
+		}
+		if (value === 'VSET') {
+			newRefType = 'VSET';
+		}
+		if (value === 'NORES') {
+			newRefType = 'NOREF';
+		}
+
+		if (newRefType) {
+			formState.form.RefType = newRefType;
+			handleRefTypeChange(newRefType);
+		}
+	}
+
+	function handleRefTypeChange(value) {
+		formState.form.RefType = value;
+
+		refNumState.reset();
+		refTxtState.reset();
+
+		resetRefNum?.();
+		resetRefTxt?.();
+
+		if (value === 'RANGE' || value === 'THOLD') {
+			refNumState.form.NumRefType = value;
+		}
+		if (value === 'TEXT' || value === 'VSET') {
+			refTxtState.form.TxtRefType = value;
+		}
+	}
+
+	// $inspect({
+	//     definition: formState.errors,
+	//     active: activeFormStates.map(fs => fs.errors)
+	// });
+
+	// $inspect({
+	//     definition: formState.errors,
+	//     active: Object.values(activeFormStates).map(fs => fs.errors)
+	// });
 </script>
 
 <FormPageContainer title="Create Test" {primaryAction} {secondaryActions} {actions}>
-    <Tabs.Root bind:value={activeTab} class="w-full h-full">
-        <Tabs.List>
-            {#if availableTabs.includes('definition')}
-                <Tabs.Trigger value="definition">Definition</Tabs.Trigger>
-            {/if}
-            {#if availableTabs.includes('calculation')}
-                <Tabs.Trigger value="calculation">Calculation</Tabs.Trigger>
-            {/if}
-            {#if availableTabs.includes('group')}
-                <Tabs.Trigger value="group">Group</Tabs.Trigger>
-            {/if}
-            {#if availableTabs.includes('reference')}
-                <Tabs.Trigger value="reference">Reference</Tabs.Trigger>
-            {/if}
-            {#if availableTabs.includes('map')}
-                <Tabs.Trigger value="map">Map</Tabs.Trigger>
-            {/if}
-        </Tabs.List>
-        <Tabs.Content value="definition">
-            <DictionaryFormRenderer 
-                {formState}
-                formFields={formFields}
-                mode="create"
-                {disabledResultTypes}
-                {disabledReferenceTypes}
-                {hiddenFields}
-                {handleTestTypeChange}
-                {handleResultTypeChange}
-                {handleRefTypeChange}
-            />
+	<Tabs.Root bind:value={activeTab} class="w-full h-full">
+		<Tabs.List>
+			{#if availableTabs.includes('definition')}
+				<Tabs.Trigger value="definition">Definition</Tabs.Trigger>
+			{/if}
+			{#if availableTabs.includes('calculation')}
+				<Tabs.Trigger value="calculation">Calculation</Tabs.Trigger>
+			{/if}
+			{#if availableTabs.includes('group')}
+				<Tabs.Trigger value="group">Group</Tabs.Trigger>
+			{/if}
+			{#if availableTabs.includes('reference')}
+				<Tabs.Trigger value="reference">Reference</Tabs.Trigger>
+			{/if}
+			{#if availableTabs.includes('map')}
+				<Tabs.Trigger value="map">Map</Tabs.Trigger>
+			{/if}
+		</Tabs.List>
+		<Tabs.Content value="definition">
+			<DictionaryFormRenderer
+				{formState}
+				{formFields}
+				mode="create"
+				{disabledResultTypes}
+				{disabledReferenceTypes}
+				{hiddenFields}
+				{handleTestTypeChange}
+				{handleResultTypeChange}
+				{handleRefTypeChange}
+			/>
+		</Tabs.Content>
+		<Tabs.Content value="calculation">
+			<Calculation {calFormState} {testCalFormFields} />
+		</Tabs.Content>
+		<Tabs.Content value="group">
+            <Group {groupFormState} {testGroupFormFields} />
         </Tabs.Content>
-        <Tabs.Content value="calculation">
-            <Calculation {calFormState} {testCalFormFields} />
-        </Tabs.Content>
-        <Tabs.Content value="group">
-            group
-        </Tabs.Content>
-        <Tabs.Content value="map">
-            <Map {mapFormState} testMapFormFields={testMapFormFieldsTransformed} bind:resetMap={resetMap}/>
-        </Tabs.Content>
-        <Tabs.Content value="reference">
-            <div class="w-full h-full flex items-start">
-                {#if refComponent === 'numeric'}
-                    <RefNum {refNumState} {refNumFormFields} bind:resetRefNum={resetRefNum}/>
-                {:else if refComponent === 'text'}
-                    <RefTxt {refTxtState} refTxtFormFields={refTxtFormFieldsTransformed} bind:resetRefTxt={resetRefTxt} />
-                {:else}
-                    <div class="h-full w-full flex items-center">
-                        <ReusableEmpty desc="Select a Reference Type" />
-                    </div>
-                {/if}
-            </div>
-        </Tabs.Content>
-    </Tabs.Root>
-    
+		<Tabs.Content value="map">
+			<Map {mapFormState} testMapFormFields={testMapFormFieldsTransformed} bind:resetMap />
+		</Tabs.Content>
+		<Tabs.Content value="reference">
+			<div class="w-full h-full flex items-start">
+				{#if refComponent === 'numeric'}
+					<RefNum {refNumState} {refNumFormFields} bind:tempNumeric={refNumData} bind:resetRefNum />
+				{:else if refComponent === 'text'}
+					<RefTxt {refTxtState} refTxtFormFields={refTxtFormFieldsTransformed} bind:tempTxt={refTxtData} bind:resetRefTxt />
+				{:else}
+					<div class="h-full w-full flex items-center">
+						<ReusableEmpty desc="Select a Reference Type" />
+					</div>
+				{/if}
+			</div>
+		</Tabs.Content>
+	</Tabs.Root>
 </FormPageContainer>
 
 <ReusableAlertDialog
-    bind:open={masterDetail.showExitConfirm}
-    onConfirm={masterDetail.confirmExit}
-/>
\ No newline at end of file
+	bind:open={masterDetail.showExitConfirm}
+	onConfirm={masterDetail.confirmExit}
+/>
diff --git a/src/lib/components/dictionary/test/page/tabs/calculation.svelte b/src/lib/components/dictionary/test/page/tabs/calculation.svelte
index 077d943..87945ba 100644
--- a/src/lib/components/dictionary/test/page/tabs/calculation.svelte
+++ b/src/lib/components/dictionary/test/page/tabs/calculation.svelte
@@ -9,154 +9,11 @@
     import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte';
 
 	let props = $props();
-
-	// const formState = props.calFormState;
-
-	// let options = $state([]);
-	// let isLoading = $state(false);
-    // let errors = $state({});
-
-	// function hasExactKeyword(input, keyword) {
-	// 	const regex = new RegExp(`\\b${keyword}\\b`, 'i');
-	// 	return regex.test(input);
-	// }
-
-	// // 🔹 FETCH OPTIONS
-	// async function fetchTests() {
-	// 	isLoading = true;
-	// 	try {
-	// 		const res = await fetch(`${API.BASE_URL}${API.TEST}`);
-	// 		const data = await res.json();
-    //         console.log(data);
-
-	// 		options = data.data.map((item) => ({
-	// 			value: item.TestSiteCode,
-	// 			label: `${item.TestSiteCode} - ${item.TestSiteName}`
-	// 		}));
-	// 	} catch (err) {
-	// 		console.error('Failed to fetch tests', err);
-	// 	} finally {
-	// 		isLoading = false;
-	// 	}
-	// }
-
-	// $effect(() => {
-	// 	fetchTests();
-	// });
-
-	// // 🔹 VALIDATION
-	// $effect(() => {
-	// 	const result = testCalSchema.safeParse(formState.form);
-
-	// 	if (!result.success) {
-	// 		const fieldErrors = {};
-	// 		for (const issue of result.error.issues) {
-	// 			fieldErrors[issue.path[0]] = issue.message;
-	// 		}
-	// 		errors = fieldErrors;
-	// 	} else {
-	// 		errors = {};
-	// 	}
-	// });
-
-	// // 🔹 Badge status
-	// const inputStatus = $derived.by(() => {
-	// 	const inputs = formState.form.FormulaInput || [];
-	// 	const code = formState.form.FormulaCode || '';
-
-	// 	return inputs.map((v) => ({
-	// 		value: v,
-	// 		done: hasExactKeyword(code, v)
-	// 	}));
-	// });
-
-    // function unselectAll() {
-    //     formState.form.FormulaInput = [];
-    //     errors = {};
-    // }
 </script>
 
 <div class="flex flex-col gap-4 w-full">
     <DictionaryFormRenderer formState={props.calFormState} formFields={props.testCalFormFields}/>
 </div>
 
-<!-- <div class="p-2 space-y-6">
-    <div class="grid grid-cols-1 space-y-2 gap-6 md:gap-4">
-        <div class="flex w-full flex-col gap-1.5">
-            <div class="flex justify-between items-center w-full">
-                <Label>Formula Input</Label>
-            </div>
-            <div class="relative flex flex-col items-center w-full">
-                <Select.Root
-                    type="multiple"
-                    bind:value={formState.form.FormulaInput}
-                >
-                    <Select.Trigger class="w-full">
-                        {formState.form.FormulaInput?.length
-                            ? options
-                                    .filter(o => formState.form.FormulaInput.includes(o.value))
-                                    .map(o => o.label)
-                                    .join(', ')
-                            : 'Select parameters'}
-                    </Select.Trigger>
-            
-                    <Select.Content>
-                        <Select.Group>
-                            {#if isLoading}
-                                <div class="p-2 text-sm text-muted-foreground">
-                                    Loading...
-                                </div>
-                            {:else}
-                                {#if formState.form.FormulaInput.length > 0}
-                                    <Select.Separator />
-                                    <button
-                                        class="w-full px-2 py-1.5 text-left text-sm hover:bg-accent hover:text-accent-foreground"
-                                        onclick={unselectAll}
-                                    >
-                                        Unselect All
-                                    </button>
-                                {/if}
-                                {#each options as opt (opt.value)}
-                                    <Select.Item value={opt.value} label={opt.label}>
-                                        {opt.label}
-                                    </Select.Item>
-                                {/each}
-                            {/if}
-                        </Select.Group>
-                        
-                    </Select.Content>
-                </Select.Root>
-            </div>
-        </div>
-        
-        <div class="flex w-full flex-col gap-1.5">
-            <div class="flex justify-between items-center w-full">
-                <Label>Formula Code</Label>
-            </div>
-            <div class="relative flex flex-col items-center w-full">
-                <Textarea
-                    class="border rounded p-2"
-                    bind:value={formState.form.FormulaCode}
-                />
-            </div>
-        </div>
-    </div>
-
-    {#if errors.FormulaCode}
-        <div class="flex flex-col gap-2 text-sm text-destructive">
-            <span>{errors.FormulaCode}</span>
-    
-            <div class="flex gap-1">
-                {#each inputStatus as item (item.value)}
-                    <Badge variant={item.done ? 'default' : 'destructive'}>
-                        {item.value}
-                    </Badge>
-                {/each}
-            </div>
-        </div>
-    {/if}
-</div> -->
- 
-
 
 
diff --git a/src/lib/components/dictionary/test/page/tabs/group.svelte b/src/lib/components/dictionary/test/page/tabs/group.svelte
new file mode 100644
index 0000000..75ecc4f
--- /dev/null
+++ b/src/lib/components/dictionary/test/page/tabs/group.svelte
@@ -0,0 +1,25 @@
+<script>
+    import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
+
+    let props = $props();
+
+    let members = $state([{ id: 1, value: "" }]);
+
+    function addMember() {
+        members = [...members, { id: Date.now(), value: "" }];
+    }
+
+    function removeMember(id) {
+        members = members.filter(m => m.id !== id);
+    }
+</script>
+
+<div class="flex flex-col gap-4 w-full">
+    <DictionaryFormRenderer 
+        formState={props.groupFormState} 
+        formFields={props.testGroupFormFields} 
+        {members}
+        onAddMember={addMember}
+        onRemoveMember={removeMember}
+    />
+</div>
\ No newline at end of file
diff --git a/src/lib/components/dictionary/test/page/tabs/ref-num.svelte b/src/lib/components/dictionary/test/page/tabs/ref-num.svelte
index a5054e1..ada7670 100644
--- a/src/lib/components/dictionary/test/page/tabs/ref-num.svelte
+++ b/src/lib/components/dictionary/test/page/tabs/ref-num.svelte
@@ -1,307 +1,301 @@
 <script>
-    import DictionaryFormRenderer from "$lib/components/reusable/form/dictionary-form-renderer.svelte";
-    import { Separator } from "$lib/components/ui/separator/index.js";
-    import * as Table from "$lib/components/ui/table/index.js";
-    import { Button } from "$lib/components/ui/button/index.js";
-    import { Badge } from "$lib/components/ui/badge/index.js";
-    import { buildAgeText } from "$lib/utils/ageUtils";
-    import PencilIcon from "@lucide/svelte/icons/pencil";
-    import Trash2Icon from "@lucide/svelte/icons/trash-2";
-    import { untrack } from "svelte";
-    import { toDays } from "$lib/utils/ageUtils";
+	import DictionaryFormRenderer from '$lib/components/reusable/form/dictionary-form-renderer.svelte';
+	import { Separator } from '$lib/components/ui/separator/index.js';
+	import * as Table from '$lib/components/ui/table/index.js';
+	import { Button } from '$lib/components/ui/button/index.js';
+	import { Badge } from '$lib/components/ui/badge/index.js';
+	import { buildAgeText } from '$lib/utils/ageUtils';
+	import PencilIcon from '@lucide/svelte/icons/pencil';
+	import Trash2Icon from '@lucide/svelte/icons/trash-2';
+	import { untrack } from 'svelte';
+	import { toDays } from '$lib/utils/ageUtils';
 
-    let { resetRefNum = $bindable(), ...props } = $props()
+	let { tempNumeric = $bindable([]), resetRefNum = $bindable(), ...props } = $props();
 
-    let tempNumeric = $state([]);
-    let editingId = $state(null);
-    let idCounter = $state(0);
+	let editingId = $state(null);
+	let idCounter = $state(0);
 
-    resetRefNum = () => {
-        tempNumeric = [];
-    };
+	resetRefNum = () => {
+		tempNumeric = [];
+	};
 
-    let joinFields = $state({
-        AgeStart: { DD: "", MM: "", YY: "" },
-        AgeEnd: { DD: "", MM: "", YY: "" },
-    });
+	let joinFields = $state({
+		AgeStart: { DD: '', MM: '', YY: '' },
+		AgeEnd: { DD: '', MM: '', YY: '' }
+	});
 
-    let disabledSign = $derived.by(() => {
-        const refType = props.refNumState.form.NumRefType;
-        
-        if (refType === "RANGE") return true;
-        if (refType === "THOLD") return false;
-        
-        return false;
-    });
-    
-    function snapshotForm() {
-        const f = props.refNumState.form;
-        return {
-            SpcType: f.SpcType ?? "",
-            Sex: f.Sex ?? "",
-            AgeStart: f.AgeStart ?? "",
-            AgeEnd: f.AgeEnd ?? "",
-            NumRefType: f.NumRefType ?? "",
-            RangeType: f.RangeType ?? "",
-            LowSign: f.LowSign ?? "",
-            Low: f.Low ?? "",
-            HighSign: f.HighSign ?? "",
-            High: f.High ?? "",
-            Display: f.Display ?? "",
-            Flag: f.Flag ?? "",
-            Interpretation: f.Interpretation ?? "",
-            Notes: f.Notes ?? "",
-        };
-    }
+	let disabledSign = $derived.by(() => {
+		const refType = props.refNumState.form.NumRefType;
 
-    function resetForm() {
-        props.refNumState.reset?.();
-        joinFields = {
-            AgeStart: { DD: "", MM: "", YY: "" },
-            AgeEnd: { DD: "", MM: "", YY: "" },
-        };
-        editingId = null;
-    }
+		if (refType === 'RANGE') return true;
+		if (refType === 'THOLD') return false;
 
-    function handleInsert() {
-        // console.log(props.refNumState.form);
-        // const low = Number(props.refNumState.form.Low);
-        // const high = Number(props.refNumState.form.High);
-        const newStart = toDays(props.refNumState.form.AgeStart);
-        const newEnd = toDays(props.refNumState.form.AgeEnd);
-        // const row = { id: ++idCounter, ...snapshotForm() };
-        // tempNumeric = [...tempNumeric, row];
-        // resetForm();
+		return false;
+	});
 
-        const isOverlap = tempNumeric.some(row => {
-            const existingStart = toDays(row.AgeStart);
-            const existingEnd = toDays(row.AgeEnd);
+	function snapshotForm() {
+		const f = props.refNumState.form;
+		return {
+			SpcType: f.SpcType ?? '',
+			Sex: f.Sex ?? '',
+			AgeStart: f.AgeStart ?? '',
+			AgeEnd: f.AgeEnd ?? '',
+			NumRefType: f.NumRefType ?? '',
+			RangeType: f.RangeType ?? '',
+			LowSign: f.LowSign ?? '',
+			Low: f.Low ?? '',
+			HighSign: f.HighSign ?? '',
+			High: f.High ?? '',
+			Display: f.Display ?? '',
+			Flag: f.Flag ?? '',
+			Interpretation: f.Interpretation ?? '',
+			Notes: f.Notes ?? ''
+		};
+	}
 
-            if (existingStart == null || existingEnd == null) return false;
+	function resetForm() {
+		props.refNumState.reset?.();
+		joinFields = {
+			AgeStart: { DD: '', MM: '', YY: '' },
+			AgeEnd: { DD: '', MM: '', YY: '' }
+		};
+		editingId = null;
+	}
 
-            return !(newEnd < existingStart || newStart > existingEnd);
-        });
+	function handleInsert() {
+		// console.log(props.refNumState.form);
+		// const low = Number(props.refNumState.form.Low);
+		// const high = Number(props.refNumState.form.High);
+		const newStart = toDays(props.refNumState.form.AgeStart);
+		const newEnd = toDays(props.refNumState.form.AgeEnd);
+		// const row = { id: ++idCounter, ...snapshotForm() };
+		// tempNumeric = [...tempNumeric, row];
+		// resetForm();
 
-        if (isOverlap) {
-            props.refNumState.errors.AgeEnd =
-                "Age range overlaps with existing data";
-            return;
-        }
+		const isOverlap = tempNumeric.some((row) => {
+			const existingStart = toDays(row.AgeStart);
+			const existingEnd = toDays(row.AgeEnd);
 
-        const row = {
-            id: ++idCounter,
-            ...snapshotForm()
-        };
+			if (existingStart == null || existingEnd == null) return false;
 
-        tempNumeric = [...tempNumeric, row];
+			return !(newEnd < existingStart || newStart > existingEnd);
+		});
 
-        resetForm();
-    }
+		if (isOverlap) {
+			props.refNumState.errors.AgeEnd = 'Age range overlaps with existing data';
+			return;
+		}
 
-    function handleEdit(row) {
-        editingId = row.id;
+		const row = {
+			id: ++idCounter,
+			...snapshotForm()
+		};
 
-        const f = props.refNumState.form;
-        f.SpcType        = row.SpcType;
-        f.Sex            = row.Sex;
-        f.AgeStart       = row.AgeStart;
-        f.AgeEnd         = row.AgeEnd;
-        f.NumRefType     = row.NumRefType;
-        f.RangeType      = row.RangeType;
-        f.LowSign        = row.LowSign;
-        f.Low            = row.Low;
-        f.HighSign       = row.HighSign;
-        f.High           = row.High;
-        f.Display        = row.Display;
-        f.Flag           = row.Flag;
-        f.Interpretation = row.Interpretation;
-        f.Notes          = row.Notes;
+		tempNumeric = [...tempNumeric, row];
 
-        for (const key of ["AgeStart", "AgeEnd"]) {
-            const val = row[key] ?? "";
-            const match = val.match(/(\d+)Y\s*(\d+)M\s*(\d+)D/);
-            joinFields[key] = match
-                ? { YY: match[1], MM: match[2], DD: match[3] }
-                : { DD: "", MM: "", YY: "" };
-        }
-    }
+		resetForm();
+	}
 
-    function handleUpdate() {
-        tempNumeric = tempNumeric.map((row) =>
-            row.id === editingId ? { id: row.id, ...snapshotForm() } : row
-        );
-        resetForm();
-    }
+	function handleEdit(row) {
+		editingId = row.id;
 
-    function handleCancelEdit() {
-        resetForm();
-    }
+		const f = props.refNumState.form;
+		f.SpcType = row.SpcType;
+		f.Sex = row.Sex;
+		f.AgeStart = row.AgeStart;
+		f.AgeEnd = row.AgeEnd;
+		f.NumRefType = row.NumRefType;
+		f.RangeType = row.RangeType;
+		f.LowSign = row.LowSign;
+		f.Low = row.Low;
+		f.HighSign = row.HighSign;
+		f.High = row.High;
+		f.Display = row.Display;
+		f.Flag = row.Flag;
+		f.Interpretation = row.Interpretation;
+		f.Notes = row.Notes;
 
-    function handleRemove(id) {
-        tempNumeric = tempNumeric.filter((row) => row.id !== id);
-        if (editingId === id) resetForm();
-    }
+		for (const key of ['AgeStart', 'AgeEnd']) {
+			const val = row[key] ?? '';
+			const match = val.match(/(\d+)Y\s*(\d+)M\s*(\d+)D/);
+			joinFields[key] = match
+				? { YY: match[1], MM: match[2], DD: match[3] }
+				: { DD: '', MM: '', YY: '' };
+		}
+	}
 
-    function getLabel(fieldKey, value) {
-        const opts = props.refNumState.selectOptions[fieldKey] ?? [];
-        const found = opts.find((o) => o.value == value);
-        return found ? found.label : value;
-    }
+	function handleUpdate() {
+		tempNumeric = tempNumeric.map((row) =>
+			row.id === editingId ? { id: row.id, ...snapshotForm() } : row
+		);
+		resetForm();
+	}
 
-    function getCode(fieldKey, value) {
-        const opts = props.refNumState.selectOptions[fieldKey] ?? [];
-        const found = opts.find((o) => o.value == value);
-        return found ? found.code : value;
-    }
+	function handleCancelEdit() {
+		resetForm();
+	}
 
-    const rangeTypeBadge = (type) => ({ REF: "REF", CRTC: "CRTC" }[type] ?? null);
-    const numRefTypeBadge = (type) => ({ RANGE: "R", THOLD: "T" }[type] ?? null);;
+	function handleRemove(id) {
+		tempNumeric = tempNumeric.filter((row) => row.id !== id);
+		if (editingId === id) resetForm();
+	}
 
-    const rangeDisplay = (row) => {
-        if (row.NumRefType === "RANGE") return `${row.LowValue} - ${row.HighValue}`;
-        if (row.NumRefType === "THOLD") return row.TholdValue;
-        return "-";
-    };
+	function getLabel(fieldKey, value) {
+		const opts = props.refNumState.selectOptions[fieldKey] ?? [];
+		const found = opts.find((o) => o.value == value);
+		return found ? found.label : value;
+	}
 
-    $effect(() => {
-        for (const key of ["AgeStart", "AgeEnd"]) {
-            props.refNumState.form[key] =
-                buildAgeText(joinFields[key]);
-        }
-    });
+	function getCode(fieldKey, value) {
+		const opts = props.refNumState.selectOptions[fieldKey] ?? [];
+		const found = opts.find((o) => o.value == value);
+		return found ? found.code : value;
+	}
 
-    $effect(() => {
-        const allColumns = props.refNumFormFields.flatMap(
-            (section) => section.rows.flatMap(
-                (row) => row.columns ?? []
-            )
-        );
-        
-        untrack(() => {
-            for (const col of allColumns) {
-                if (!col.optionsEndpoint) continue;
-    
-                props.refNumState.fetchOptions?.(
-                    {
-                        key: col.key,
-                        optionsEndpoint: col.optionsEndpoint,
-                        valueKey: col.valueKey,
-                        labelKey: col.labelKey,
-                    },
-                    props.refNumState.form
-                );
-            }
-        })
-    });
+	const rangeTypeBadge = (type) => ({ REF: 'REF', CRTC: 'CRTC' })[type] ?? null;
+	const numRefTypeBadge = (type) => ({ RANGE: 'R', THOLD: 'T' })[type] ?? null;
 
-    $effect(() => {
-        if (!props.refNumState.form.Low || props.refNumState.form.Low === "") {
-            props.refNumState.form.LowSign = "";
-        }
-        
-        if (!props.refNumState.form.High || props.refNumState.form.High === "") {
-            props.refNumState.form.HighSign = "";
-        }
-    });
+	const rangeDisplay = (row) => {
+		if (row.NumRefType === 'RANGE') return `${row.LowValue} - ${row.HighValue}`;
+		if (row.NumRefType === 'THOLD') return row.TholdValue;
+		return '-';
+	};
+
+	$effect(() => {
+		for (const key of ['AgeStart', 'AgeEnd']) {
+			props.refNumState.form[key] = buildAgeText(joinFields[key]);
+		}
+	});
+
+	$effect(() => {
+		const allColumns = props.refNumFormFields.flatMap((section) =>
+			section.rows.flatMap((row) => row.columns ?? [])
+		);
+
+		untrack(() => {
+			for (const col of allColumns) {
+				if (!col.optionsEndpoint) continue;
+
+				props.refNumState.fetchOptions?.(
+					{
+						key: col.key,
+						optionsEndpoint: col.optionsEndpoint,
+						valueKey: col.valueKey,
+						labelKey: col.labelKey
+					},
+					props.refNumState.form
+				);
+			}
+		});
+	});
+
+	$effect(() => {
+		if (!props.refNumState.form.Low || props.refNumState.form.Low === '') {
+			props.refNumState.form.LowSign = '';
+		}
+
+		if (!props.refNumState.form.High || props.refNumState.form.High === '') {
+			props.refNumState.form.HighSign = '';
+		}
+	});
 </script>
 
 <div class="flex flex-col gap-4 w-full">
-    <div>
-        <DictionaryFormRenderer 
-            formState={props.refNumState}
-            formFields={props.refNumFormFields}
-            {disabledSign}
-            bind:joinFields
-        />
-        <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>
+	<div>
+		<DictionaryFormRenderer
+			formState={props.refNumState}
+			formFields={props.refNumFormFields}
+			{disabledSign}
+			bind:joinFields
+		/>
+		<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 />
+	<Separator />
 
-    <div>
-        <Table.Root>
-            <Table.Header>
-                <Table.Row class="hover:bg-transparent">
-                    <Table.Head>Specimen Type</Table.Head>
-                    <Table.Head>Sex</Table.Head>
-                    <Table.Head>Age Range</Table.Head>
-                    <Table.Head>Type</Table.Head>
-                    <Table.Head>Range/Threshold</Table.Head>
-                    <Table.Head>Flag</Table.Head>
-                    <Table.Head>Interpretation</Table.Head>
-                    <Table.Head>Notes</Table.Head>
-                    <Table.Head class="w-[80px]"></Table.Head>
-                </Table.Row>
-            </Table.Header>
-            <Table.Body>
-                {#if tempNumeric.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 tempNumeric as row (row.id)}
-                        <Table.Row 
-                            class="cursor-pointer hover:bg-muted/50"
-                        >
-                            <Table.Cell>{row.SpcType ? getLabel("SpcType", row.SpcType) : "-"}</Table.Cell>
-                            <Table.Cell class="font-medium">{row.Sex ? getLabel("Sex", row.Sex) : "-"}</Table.Cell>
-                            <Table.Cell>{row.AgeStart} &ndash; {row.AgeEnd}</Table.Cell>
-                            <Table.Cell>
-                                {#if rangeTypeBadge(row.RangeType)}
-                                    <Badge>{rangeTypeBadge(row.RangeType)}</Badge>
-                                {:else}
-                                    -
-                                {/if}
-                            </Table.Cell>
-                            <Table.Cell class="font-medium flex justify-between">
-                                <div>
-                                    {row.LowSign ? row.LowSign : ""} {row.Low || "null"} &ndash; 
-                                    {row.HighSign ? row.HighSign : ""} {row.High || "null"}
-                                </div>
-                                <Badge variant="outline" class="border-dashed border-primary border-2">{numRefTypeBadge(row.NumRefType)}</Badge>
-                            </Table.Cell>
-                            <Table.Cell class="font-medium">{row.Flag}</Table.Cell>
-                            <Table.Cell class="font-medium">{row.Interpretation}</Table.Cell>
-                            <Table.Cell class="font-medium">{row.Notes}</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>
\ No newline at end of file
+	<div>
+		<Table.Root>
+			<Table.Header>
+				<Table.Row class="hover:bg-transparent">
+					<Table.Head>Specimen Type</Table.Head>
+					<Table.Head>Sex</Table.Head>
+					<Table.Head>Age Range</Table.Head>
+					<Table.Head>Type</Table.Head>
+					<Table.Head>Range/Threshold</Table.Head>
+					<Table.Head>Flag</Table.Head>
+					<Table.Head>Interpretation</Table.Head>
+					<Table.Head>Notes</Table.Head>
+					<Table.Head class="w-[80px]"></Table.Head>
+				</Table.Row>
+			</Table.Header>
+			<Table.Body>
+				{#if tempNumeric.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 tempNumeric as row (row.id)}
+						<Table.Row class="cursor-pointer hover:bg-muted/50">
+							<Table.Cell>{row.SpcType ? getLabel('SpcType', row.SpcType) : '-'}</Table.Cell>
+							<Table.Cell class="font-medium">{row.Sex ? getLabel('Sex', row.Sex) : '-'}</Table.Cell
+							>
+							<Table.Cell>{row.AgeStart} &ndash; {row.AgeEnd}</Table.Cell>
+							<Table.Cell>
+								{#if rangeTypeBadge(row.RangeType)}
+									<Badge>{rangeTypeBadge(row.RangeType)}</Badge>
+								{:else}
+									-
+								{/if}
+							</Table.Cell>
+							<Table.Cell class="font-medium flex justify-between">
+								<div>
+									{row.LowSign ? row.LowSign : ''}
+									{row.Low || 'null'} &ndash;
+									{row.HighSign ? row.HighSign : ''}
+									{row.High || 'null'}
+								</div>
+								<Badge variant="outline" class="border-dashed border-primary border-2"
+									>{numRefTypeBadge(row.NumRefType)}</Badge
+								>
+							</Table.Cell>
+							<Table.Cell class="font-medium">{row.Flag}</Table.Cell>
+							<Table.Cell class="font-medium">{row.Interpretation}</Table.Cell>
+							<Table.Cell class="font-medium">{row.Notes}</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>
diff --git a/src/lib/components/dictionary/test/page/tabs/ref-txt.svelte b/src/lib/components/dictionary/test/page/tabs/ref-txt.svelte
index 2bd687f..09eb594 100644
--- a/src/lib/components/dictionary/test/page/tabs/ref-txt.svelte
+++ b/src/lib/components/dictionary/test/page/tabs/ref-txt.svelte
@@ -10,9 +10,8 @@
     import { untrack } from "svelte";
     import { toDays } from "$lib/utils/ageUtils";
 
-    let { resetRefTxt = $bindable(), ...props } = $props()
+    let { tempTxt = $bindable([]), resetRefTxt = $bindable(), ...props } = $props()
 
-    let tempTxt = $state([]);
     let editingId = $state(null);
     let idCounter = $state(0);
 
diff --git a/src/lib/components/reusable/form/dictionary-form-renderer.svelte b/src/lib/components/reusable/form/dictionary-form-renderer.svelte
index c628dd8..29fa9bd 100644
--- a/src/lib/components/reusable/form/dictionary-form-renderer.svelte
+++ b/src/lib/components/reusable/form/dictionary-form-renderer.svelte
@@ -15,6 +15,8 @@
 	import MoveRightIcon from '@lucide/svelte/icons/move-right';
 	import BrushCleaningIcon from '@lucide/svelte/icons/brush-cleaning';
 	import DeleteIcon from '@lucide/svelte/icons/delete';
+	import Trash2Icon from '@lucide/svelte/icons/trash-2';
+	import PlusIcon from '@lucide/svelte/icons/plus';
 
 	let {
 		formState,
@@ -27,7 +29,10 @@
 		hiddenFields,
 		handleTestTypeChange,
 		handleResultTypeChange,
-		handleRefTypeChange
+		handleRefTypeChange,
+		members = [],
+		onAddMember,
+		onRemoveMember,
 	} = $props();
 
 	const operators = ['+', '-', '*', '/', '^', '(', ')'];
@@ -610,6 +615,69 @@
 						</div>
 					{/if}
 				</div>
+			{:else if type === "members"}
+				{@const filteredOptions = getFilteredOptions(key)}
+				<div class="flex flex-col gap-2 w-full">
+					{#each members as member, index (member.id)}
+					{@const selectedLabel =
+                formState.selectOptions?.[key]?.find(
+                    (opt) => opt.value === member.value
+                )?.label || 'Choose'}
+						<div class="flex gap-1 w-full">
+							<Button type="button" variant="outline" size="icon" disabled>
+								{index + 1}
+							</Button>
+		
+							<div class="flex-1">
+								<Select.Root 
+									type="single"
+									bind:value={member.value}
+									onOpenChange={(open) => {
+										if (open && optionsEndpoint) {
+											formState.fetchOptions?.(
+												{ key, optionsEndpoint, dependsOn, endpointParamKey, valueKey, labelKey },
+												formState.form
+											);
+										}
+									}}
+								>
+									<Select.Trigger class="w-full">
+										{selectedLabel}
+									</Select.Trigger>
+									<Select.Content>
+										<div class="p-2">
+											<input
+												type="text"
+												placeholder="Search..."
+												class="w-full border rounded px-2 py-1 text-sm"
+												bind:value={searchQuery[key]}
+											/>
+										</div>
+										{#if formState.loadingOptions?.[key]}
+											<Select.Item disabled value="loading">Loading...</Select.Item>
+										{:else}
+											{#if !required}
+												<Select.Item value="">- None -</Select.Item>
+											{/if}
+											{#each filteredOptions as option}
+												<Select.Item value={option.value}>
+													{option.label}
+												</Select.Item>
+											{/each}
+										{/if}
+									</Select.Content>
+								</Select.Root>
+							</div>
+							<Button type="button" variant="outline" size="icon" onclick={() => onRemoveMember(member.id)}>
+								<Trash2Icon class="size-4" />
+							</Button>
+						</div>
+					{/each}
+					<Button variant="outline" onclick={onAddMember}>
+						<PlusIcon class="size-4" />
+						Add Test
+					</Button>
+				</div>
 			{:else}
 				<Input
 					type="text"