diff --git a/src/components/ServiceConfiguration.vue b/src/components/ServiceConfiguration.vue
index 4ee4d6b..181d3a4 100644
--- a/src/components/ServiceConfiguration.vue
+++ b/src/components/ServiceConfiguration.vue
@@ -24,37 +24,7 @@
           </div>
         </div>
         <div class="p-3">
-          <a-row>
-            <a-col class="p-1" :span="12" v-for="(group,groupIndex) in actions" :key="groupIndex">
-              <fieldset  class="border my-1 p-1">
-                <legend>{{ group.name }}</legend>
-                <table class="w-full">
-                  <tr v-for="action in group.items" :key="action.key">
-                    <td>
-                      <a-button class="m-1 w-full text-left" :loading="action.isExecuting" @click="actionServiceExecute(action)"
-                      >{{ action.name }}</a-button>
-                    </td>
-                    <td>
-                      <div class="inline-block ml-2 relative" v-for="actionParam in action.params" :key="actionParam.key">
-                        <div class="action-param-label">{{ actionParam.name }}</div>
-                        <a-select v-if="'java.lang.Boolean' === actionParam.type" v-model:value="actionParam.value" :dropdownMatchSelectWidth="false">
-                          <a-select-option :value="true">TRUE</a-select-option>
-                          <a-select-option :value="false">FALSE</a-select-option>
-                        </a-select>
-                        <a-input v-else-if="'java.lang.String' === actionParam.type" class="w-24" v-model:value="actionParam.value" :placeholder="actionParam.name"/>
-                        <a-input-number v-else-if="'java.lang.Integer' === actionParam.type" class="w-24" v-model:value="actionParam.value" :placeholder="actionParam.name"/>
-                        <a-select v-else-if="'Enum' === actionParam.type" v-model:value="actionParam.value" :dropdownMatchSelectWidth="false">
-                          <a-select-option v-for="(enumItem,enumIndex) in actionParam.options" :key="enumIndex" :value="enumItem.value">{{ enumItem.name }}</a-select-option>
-                        </a-select>
-                        <service-configuration-action-param-file  v-else-if="'a8k.utils.HardwareParamFile' === actionParam.type" v-model:value="actionParam.value" />
-                        <span v-else>{{ actionParam }}</span>
-                      </div>
-                    </td>
-                  </tr>
-                </table>
-              </fieldset>
-            </a-col>
-          </a-row>
+          <service-configuration-actions v-model:actionLog="actionLog" :service-key="props.serviceKey" />
         </div>
       </a-col>
       <a-col :span="8" class="h-full flex flex-col">
@@ -71,16 +41,14 @@ import { ref, watch } from 'vue';
 import ApiClient from '@/utils/ApiClient';
 import ServiceConfigurationParamValueEdit from './ServiceConfigurationParamValueEdit.vue'
 import ServiceConfigurationActionLog from './ServiceConfigurationActionLog.vue'
-import ServiceConfigurationActionParamFile from './ServiceConfigurationActionParamFile.vue'
 import ServiceConfigurationStatusViewer from './ServiceConfigurationStatusViewer.vue'
+import ServiceConfigurationActions from './ServiceConfigurationActions.vue'
 /** @var {Object} */
 const props = defineProps({
     serviceKey : String,
 });
 /** @var {Array} */
 const params = ref([]);
-/** @var {Array} */
-const actions = ref([]);
 /** @var {Object} */
 const actionLog = ref(null);
 // watch service key
@@ -88,13 +56,11 @@ watch(() => props.serviceKey, handleServiceKeyChange);
 
 // on mounted
 async function handleServiceKeyChange() {
-    actionLog.value = null;
     if ( null === props.serviceKey ) {
         return ;
     }
 
     await actionServiceParamReload();
-    await serviceActionReload();
 }
 
 // service param reload
@@ -139,69 +105,4 @@ async function actionServiceParamReset() {
         await actionServiceParamReload();
     } catch ( e ) {/** nothing to do here */}
 }
-
-// service actions reload
-async function serviceActionReload() {
-    try {
-        actions.value = [];
-        let client = ApiClient.getClient();
-        let list = await client.call('service-config/service-action-list', {serviceKey:props.serviceKey});
-        for ( let item of list ) {
-            let group = actions.value.find(i => i.name === item.group);
-            if ( undefined === group ) {
-                group = {name:item.group, items:[], order:0};
-                actions.value.push(group);
-            }
-            if ( item.groupOrder > group.order ) {
-                group.order = item.groupOrder;
-            }
-            group.items.push(item);
-            group.items.sort((a,b) => a.order - b.order || a.params.length - b.params.length);
-        }
-        actions.value.sort((a,b) => a.order - b.order || b.items.length - a.items.length || a.name.localeCompare(b.name));
-    } catch ( e ) {/** nothing to do here */}
-}
-
-// service action execute
-async function actionServiceExecute(action) {
-    try {
-        let client = ApiClient.getClient();
-        let params = {};
-        params.serviceKey = props.serviceKey;
-        params.action = action.key;
-        params.params = [];
-        params.paramTypes = [];
-        for ( let item of action.params ) {
-            params.params.push(item.value);
-            let type = item.type;
-            if ( 'Enum' === type ) {
-                type = item.typeEnum;
-            }
-            params.paramTypes.push(type);
-        }
-
-        actionLog.value = {};
-        actionLog.value.action = params.action;
-        actionLog.value.params = params.params;
-        actionLog.value.response = null;
-        action.isExecuting = true;
-        actionLog.value.response = await client.call('service-config/service-action-exec',params);
-        action.isExecuting = false;
-    } catch ( e ) {
-        /** nothing to do here */
-    } finally {
-        action.isExecuting = false;
-    }
-}
-</script>
-<style scoped>
-.action-param-label {
-  font-size: 0.6rem;
-  top: -8px;
-  position: absolute;
-  z-index: 9;
-  left: 5px;
-  padding: 0 5px;
-  color: #7b7b7b;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/ServiceConfigurationActions.vue b/src/components/ServiceConfigurationActions.vue
new file mode 100644
index 0000000..e2bba81
--- /dev/null
+++ b/src/components/ServiceConfigurationActions.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="flex flex-row flex-wrap">
+    <div class="p-1 grow" v-for="(group,groupIndex) in actions" :key="groupIndex">
+      <fieldset  class="border my-1 p-1">
+        <legend>{{ group.name }}</legend>
+        <table class="w-full">
+          <tr v-for="action in group.items" :key="action.key" style="white-space: pre;">
+            <td>
+              <a-button class="m-1 w-full text-left" :loading="action.isExecuting" @click="actionServiceExecute(action)"
+              >{{ action.name }}</a-button>
+            </td>
+            <td>
+              <div class="inline-block ml-2 relative" v-for="actionParam in action.params" :key="actionParam.key">
+                <div class="action-param-label">{{ actionParam.name }}</div>
+                <a-select v-if="'java.lang.Boolean' === actionParam.type" v-model:value="actionParam.value" :dropdownMatchSelectWidth="false">
+                  <a-select-option :value="true">TRUE</a-select-option>
+                  <a-select-option :value="false">FALSE</a-select-option>
+                </a-select>
+                <a-input v-else-if="'java.lang.String' === actionParam.type" class="w-24" v-model:value="actionParam.value" :placeholder="actionParam.name"/>
+                <a-input-number v-else-if="'java.lang.Integer' === actionParam.type" class="w-24" v-model:value="actionParam.value" :placeholder="actionParam.name"/>
+                <a-select v-else-if="'Enum' === actionParam.type" v-model:value="actionParam.value" :dropdownMatchSelectWidth="false">
+                  <a-select-option v-for="(enumItem,enumIndex) in actionParam.options" :key="enumIndex" :value="enumItem.value">{{ enumItem.name }}</a-select-option>
+                </a-select>
+                <service-configuration-action-param-file  v-else-if="'a8k.utils.HardwareParamFile' === actionParam.type" v-model:value="actionParam.value" />
+                <span v-else>{{ actionParam }}</span>
+              </div>
+            </td>
+          </tr>
+        </table>
+      </fieldset>
+    </div>
+  </div>
+</template>
+<script setup>
+import { ref, watch } from 'vue';
+import ApiClient from '@/utils/ApiClient';
+import ServiceConfigurationActionParamFile from './ServiceConfigurationActionParamFile.vue'
+const emits = defineEmits(['update:actionLog']);
+/** @var {Object} */
+const props = defineProps({
+    serviceKey : String,
+});
+/** @var {Array} */
+const actions = ref([]);
+/** @var {Object} */
+const actionLog = ref(null);
+// watch service key
+watch(() => props.serviceKey, handleServiceKeyChange);
+// watch log
+watch(actionLog, () => emits('update:actionLog', actionLog.value), {deep:true});
+
+// on mounted
+async function handleServiceKeyChange() {
+    actionLog.value = null;
+    if ( null === props.serviceKey ) {
+        return ;
+    }
+    await serviceActionReload();
+}
+
+// service actions reload
+async function serviceActionReload() {
+    try {
+        actions.value = [];
+        let client = ApiClient.getClient();
+        let list = await client.call('service-config/service-action-list', {serviceKey:props.serviceKey});
+        for ( let item of list ) {
+            let group = actions.value.find(i => i.name === item.group);
+            if ( undefined === group ) {
+                group = {name:item.group, items:[], order:0};
+                actions.value.push(group);
+            }
+            if ( item.groupOrder > group.order ) {
+                group.order = item.groupOrder;
+            }
+            group.items.push(item);
+            group.items.sort((a,b) => a.order - b.order || a.params.length - b.params.length);
+        }
+        actions.value.sort((a,b) => a.order - b.order || b.items.length - a.items.length || a.name.localeCompare(b.name));
+    } catch ( e ) {/** nothing to do here */}
+}
+
+// service action execute
+async function actionServiceExecute(action) {
+    try {
+        let client = ApiClient.getClient();
+        let params = {};
+        params.serviceKey = props.serviceKey;
+        params.action = action.key;
+        params.params = [];
+        params.paramTypes = [];
+        for ( let item of action.params ) {
+            params.params.push(item.value);
+            let type = item.type;
+            if ( 'Enum' === type ) {
+                type = item.typeEnum;
+            }
+            params.paramTypes.push(type);
+        }
+
+        actionLog.value = {};
+        actionLog.value.action = params.action;
+        actionLog.value.params = params.params;
+        actionLog.value.response = null;
+        action.isExecuting = true;
+        actionLog.value.response = await client.call('service-config/service-action-exec',params);
+        action.isExecuting = false;
+    } catch ( e ) {
+        /** nothing to do here */
+    } finally {
+        action.isExecuting = false;
+    }
+}
+</script>
+<style scoped>
+.action-param-label {
+  font-size: 0.6rem;
+  top: -8px;
+  position: absolute;
+  z-index: 9;
+  left: 5px;
+  padding: 0 5px;
+  color: #7b7b7b;
+}
+</style>
\ No newline at end of file