diff --git a/src/lib/components/composable/use-form-option.svelte.js b/src/lib/components/composable/use-form-option.svelte.js
index c9bd3fe..ab27ff8 100644
--- a/src/lib/components/composable/use-form-option.svelte.js
+++ b/src/lib/components/composable/use-form-option.svelte.js
@@ -18,6 +18,7 @@ const optionsMode = {
         const baseOption = {
           value: item[valueKey],
           label: typeof labelKey === 'function' ? labelKey(item) : item[labelKey],
+          rawItem: item
         };
         
         if (field.key === 'FormulaInput') {
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 53da9d3..d7d3571 100644
--- a/src/lib/components/dictionary/testmap/config/testmap-form-config.js
+++ b/src/lib/components/dictionary/testmap/config/testmap-form-config.js
@@ -55,14 +55,16 @@ export const testMapFormFields = [
                         label: 'Host Type',
                         required: false,
                         type: 'select',
-                        optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/entity_type`
+                        optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/entity_type`,
+                        tabIndex: 1,
                     },
                     {
                         key: 'ClientType',
                         label: 'Client Type',
                         required: false,
                         type: 'select',
-                        optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/entity_type`
+                        optionsEndpoint: `${API.BASE_URL}${API.VALUESET}/entity_type`,
+                        tabIndex: 5,
                     }
                 ]
             },
@@ -74,14 +76,16 @@ export const testMapFormFields = [
                         label: 'Host ID',
                         required: false,
                         type: 'text',
-                        validateOn: ['input']
+                        validateOn: ['input'],
+                        tabIndex: 2,
                     },
                     {
                         key: 'ClientID',
                         label: 'Client ID',
                         required: false,
                         type: 'text',
-                        validateOn: ['input']
+                        validateOn: ['input'],
+                        tabIndex: 6,
                     }
                 ]
             },
@@ -92,13 +96,15 @@ export const testMapFormFields = [
                         key: 'HostTestCode',
                         label: 'Host Test Code',
                         required: false,
-                        type: 'text'
+                        type: 'text',
+                        tabIndex: 3,
                     },
                     {
                         key: 'ClientTestCode',
                         label: 'Client Test Code',
                         required: false,
-                        type: 'text'
+                        type: 'text',
+                        tabIndex: 7,
                     }
                 ]
             },
@@ -109,13 +115,15 @@ export const testMapFormFields = [
                         key: 'HostTestName',
                         label: 'Host Test Name',
                         required: false,
-                        type: 'text'
+                        type: 'text',
+                        tabIndex: 4,
                     },
                     {
                         key: 'ClientTestName',
                         label: 'Client Test Name',
                         required: false,
-                        type: 'text'
+                        type: 'text',
+                        tabIndex: 8,
                     }
                 ]
             },
@@ -130,7 +138,8 @@ export const testMapFormFields = [
                         optionsEndpoint: `${API.BASE_URL}${API.CONTAINER}`,
                         valueKey: 'ConDefID',
                         labelKey: (item) => `${item.ConCode} - ${item.ConName}`,
-                        fullWidth: false
+                        fullWidth: false,
+                        tabIndex: 9,
                     }
                 ]
             }
diff --git a/src/lib/components/dictionary/testmap/page/create-page.svelte b/src/lib/components/dictionary/testmap/page/create-page.svelte
index 42ad6ea..ac35a60 100644
--- a/src/lib/components/dictionary/testmap/page/create-page.svelte
+++ b/src/lib/components/dictionary/testmap/page/create-page.svelte
@@ -164,7 +164,7 @@
                         return { ...col, type: 'text', optionsEndpoint: undefined };
                     }
 
-                    if (col.key === 'HostTestCode' || col.key === 'HostTestName') {
+                    if (col.key === 'HostTestCode') {
 						if (formState.form.HostType === 'SITE' && formState.form.HostID) {
 							return {
 								...col,
@@ -182,7 +182,7 @@
 						};
 					}
 
-					if (col.key === 'ClientTestCode' || col.key === 'ClientTestName') {
+					if (col.key === 'ClientTestCode') {
 						if (formState.form.ClientType === 'SITE' && formState.form.ClientID) {
 							return {
 								...col,
@@ -207,6 +207,12 @@
             }))
         }));
     });
+
+    // $effect(() => {
+    //     if (formState.form.ClientTestCode) {
+    //         formState.form.ClientTestName = 'nyaho';
+    //     }
+    // })
     $inspect(mapFormFieldsTransformed)
 </script>
 
diff --git a/src/lib/components/reusable/form/dictionary-form-renderer.svelte b/src/lib/components/reusable/form/dictionary-form-renderer.svelte
index 6dbf2ec..2b9a10f 100644
--- a/src/lib/components/reusable/form/dictionary-form-renderer.svelte
+++ b/src/lib/components/reusable/form/dictionary-form-renderer.svelte
@@ -127,7 +127,8 @@
 	endpointParamKey,
 	valueKey,
 	labelKey,
-	txtKey
+	txtKey,
+	tabIndex = 0,
 })}
 	<div class="flex w-full flex-col gap-1.5">
 		<div class="flex justify-between items-center w-full">
@@ -155,6 +156,7 @@
 			{#if type === 'text'}
 				<Input
 					type="text"
+					tabindex={tabIndex}
 					bind:value={formState.form[key]}
 					oninput={() => {
 						if (validateOn?.includes('input')) {
@@ -275,6 +277,18 @@
 							formState.selectOptions.ClientTestCode = [];
 							formState.selectOptions.ClientTestName = [];
 						}
+						if (key === 'ClientTestCode') {
+							const selectedItem = formState.selectOptions?.[key]?.find(
+								(opt) => opt.value === val
+							);
+							formState.form.ClientTestName = selectedItem?.rawItem?.TestSiteName ?? '';
+						}
+						if (key === 'HostTestCode') {
+							const selectedItem = formState.selectOptions?.[key]?.find(
+								(opt) => opt.value === val
+							);
+							formState.form.HostTestName = selectedItem?.rawItem?.TestSiteName ?? '';
+						}
 					}}
 					onOpenChange={(open) => {
 						if (open) {
@@ -291,7 +305,7 @@
 						}
 					}}
 				>
-					<Select.Trigger class="w-full truncate">
+					<Select.Trigger class="w-full truncate" tabindex={tabIndex}>
 						{selectedLabel}
 					</Select.Trigger>
 					<Select.Content>