diff --git a/webclient-vue/src/components/script/ScriptTable.vue b/webclient-vue/src/components/script/ScriptTable.vue
new file mode 100644
index 0000000..7603fac
--- /dev/null
+++ b/webclient-vue/src/components/script/ScriptTable.vue
@@ -0,0 +1,156 @@
+<template>
+  <GnTable
+    :columns="columns"
+    :rows="scripts"
+    :caption="caption"
+  >
+    <template #cell-alias="{ row }">
+      <router-link
+        :to="{ name: 'script-detail', params: { type: row.type || scriptType, id: row.alias } }"
+        class="script-link"
+      >
+        {{ row.alias }}
+      </router-link>
+    </template>
+
+    <template #cell-scope="{ row }">
+      <router-link
+        v-if="row.scope"
+        :to="{ name: 'script-detail', params: { type: 'scopes', id: row.scope } }"
+        class="scope-link"
+      >
+        <span class="scope-label">Scope</span>
+        <span class="scope-name">{{ row.scope }}</span>
+        <i class="ph ph-arrow-right"></i>
+      </router-link>
+      <span v-else class="muted">—</span>
+    </template>
+
+    <template #cell-area="{ row }">
+      <GnBadge v-if="row.area_id" variant="primary">{{ areaNameFor(row) }}</GnBadge>
+      <span v-else class="muted">—</span>
+    </template>
+
+    <template #cell-state="{ row }">
+      <GnBadge :variant="row.state === 'enabled' ? 'success' : 'secondary'">{{ row.state }}</GnBadge>
+    </template>
+
+    <template v-if="showActions" #cell-actions="{ row }">
+      <GnButton
+        v-if="row.state === 'enabled'"
+        variant="secondary"
+        icon="ph-pause"
+        @click="toggle(row.alias, false, row)"
+      >
+        Disable
+      </GnButton>
+      <GnButton
+        v-else
+        variant="primary"
+        icon="ph-play"
+        @click="toggle(row.alias, true, row)"
+      >
+        Enable
+      </GnButton>
+    </template>
+  </GnTable>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useScriptsStore } from "../../stores/scripts";
+import { useAreasStore } from "../../stores/areas";
+import { GnTable, GnBadge, GnButton } from "gnexus-ui-kit/vue";
+
+const props = defineProps({
+  scripts: { type: Array, required: true },
+  scriptType: { type: String, default: "regular" },
+  showArea: { type: Boolean, default: false },
+  showScope: { type: Boolean, default: true },
+  showFilename: { type: Boolean, default: true },
+  showActions: { type: Boolean, default: true },
+  caption: { type: String, default: "Scripts" },
+});
+
+const scriptsStore = useScriptsStore();
+const areasStore = useAreasStore();
+
+const areaById = computed(() => {
+  const map = {};
+  for (const a of areasStore.areas) {
+    map[a.id] = a;
+  }
+  return map;
+});
+
+function areaNameFor(row) {
+  if (!row.area_id) return null;
+  return areaById.value[row.area_id]?.display_name || `Area ${row.area_id}`;
+}
+
+const columns = computed(() => {
+  const cols = [
+    { key: "alias", label: "Alias" },
+    { key: "name", label: "Name" },
+  ];
+  if (props.showScope) {
+    cols.push({ key: "scope", label: "Scope" });
+  }
+  if (props.showArea) {
+    cols.push({ key: "area", label: "Area" });
+  }
+  cols.push({ key: "state", label: "State" });
+  if (props.showFilename) {
+    cols.push({ key: "filename", label: "File" });
+  }
+  if (props.showActions) {
+    cols.push({ key: "actions", label: "Actions" });
+  }
+  return cols;
+});
+
+function toggle(alias, enabled, row) {
+  const type = row.type || props.scriptType;
+  if (type === "action") {
+    scriptsStore.setActionState(alias, enabled);
+  } else if (type === "regular") {
+    scriptsStore.setRegularState(alias, enabled);
+  }
+}
+</script>
+
+<style scoped>
+.script-link {
+  color: var(--color-primary);
+  text-decoration: none;
+}
+
+.scope-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  border: 1px solid var(--color-primary);
+  color: var(--color-primary);
+  text-decoration: none;
+  font-size: 13px;
+  cursor: pointer;
+  transition: background 0.15s, color 0.15s;
+}
+
+.scope-link:hover {
+  background: var(--color-primary);
+  color: var(--color-bg);
+}
+
+.scope-label {
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: 700;
+  opacity: 0.8;
+}
+
+.muted {
+  color: var(--color-muted);
+}
+</style>
diff --git a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
index 2699b9d..ea28edf 100644
--- a/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
+++ b/webclient-vue/src/features/areas/pages/AreaDetailPage.vue
@@ -78,11 +78,15 @@
           title="No scripts"
           message="No scripts assigned to this area."
         />
-        <GnTable v-else :rows="areasStore.currentAreaScripts" :columns="scriptColumns">
-          <template #cell-actions="{ row }">
-            <router-link :to="{ name: 'scripts-actions' }" class="area-link">View script</router-link>
-          </template>
-        </GnTable>
+        <ScriptTable
+          v-else
+          :scripts="areasStore.currentAreaScripts"
+          scriptType="regular"
+          :showArea="false"
+          :showActions="false"
+          :showFilename="false"
+          caption="Area scripts"
+        />
       </div>
     </div>
 
@@ -158,7 +162,6 @@
   GnModal,
   GnInput,
   GnAlert,
-  GnTable,
   GnSelect,
   GnConfirmDialog,
 } from "gnexus-ui-kit/vue";
@@ -168,6 +171,7 @@
 import AreaBadgeLink from "../../../components/area/AreaBadgeLink.vue";
 import AreaAssignSection from "../../../components/area/AreaAssignSection.vue";
 import DeviceTable from "../../../components/device/DeviceTable.vue";
+import ScriptTable from "../../../components/script/ScriptTable.vue";
 
 const route = useRoute();
 const router = useRouter();
@@ -223,12 +227,6 @@
 const showRemoveDialog = ref(false);
 const removeDialogMessage = ref("");
 
-const scriptColumns = [
-  { key: "alias", label: "Alias" },
-  { key: "name", label: "Name" },
-  { key: "state", label: "State" },
-];
-
 function openRename() {
   if (!area.value) return;
   renameForm.areaId = area.value.id;
diff --git a/webclient-vue/src/features/scripts/pages/ScriptsRegularPage.vue b/webclient-vue/src/features/scripts/pages/ScriptsRegularPage.vue
index fda4439..000d507 100644
--- a/webclient-vue/src/features/scripts/pages/ScriptsRegularPage.vue
+++ b/webclient-vue/src/features/scripts/pages/ScriptsRegularPage.vue
@@ -22,111 +22,33 @@
     />
 
     <div v-else class="devices-panel">
-      <GnTable
-        :columns="tableColumns"
-        :rows="scriptsStore.regular"
+      <ScriptTable
+        :scripts="scriptsStore.regular"
+        scriptType="regular"
+        :showArea="true"
+        :showScope="true"
+        :showFilename="true"
+        :showActions="true"
         caption="Regular scripts"
-      >
-        <template #cell-alias="{ row }">
-          <router-link
-            :to="{ name: 'script-detail', params: { type: 'regular', id: row.alias } }"
-            class="script-link"
-          >
-            {{ row.alias }}
-          </router-link>
-        </template>
-
-        <template #cell-scope="{ row }">
-          <router-link
-            v-if="row.scope"
-            :to="{ name: 'script-detail', params: { type: 'scopes', id: row.scope } }"
-            class="scope-link"
-          >
-            <span class="scope-label">Scope</span>
-            <span class="scope-name">{{ row.scope }}</span>
-            <i class="ph ph-arrow-right"></i>
-          </router-link>
-          <span v-else class="muted">—</span>
-        </template>
-
-        <template #cell-area="{ row }">
-          <GnBadge v-if="row.area_id" variant="primary">{{ areaNameFor(row) }}</GnBadge>
-          <span v-else class="muted">—</span>
-        </template>
-
-        <template #cell-state="{ row }">
-          <GnBadge :variant="row.state === 'enabled' ? 'success' : 'secondary'"
-          >{{ row.state }}</GnBadge>
-        </template>
-
-        <template #cell-actions="{ row }">
-          <GnButton
-            v-if="row.state === 'enabled'"
-            variant="secondary"
-            icon="ph-pause"
-            @click="toggle(row.alias, false)"
-          >
-            Disable
-          </GnButton>
-          <GnButton
-            v-else
-            variant="primary"
-            icon="ph-play"
-            @click="toggle(row.alias, true)"
-          >
-            Enable
-          </GnButton>
-        </template>
-      </GnTable>
+      />
     </div>
   </section>
 </template>
 
 <script setup>
-import { onMounted, computed } from "vue";
-import { useRouter } from "vue-router";
+import { onMounted } from "vue";
 import { useScriptsStore } from "../../../stores/scripts";
 import { useAreasStore } from "../../../stores/areas";
-import { GnPageHeader, GnBadge, GnTable, GnButton } from "gnexus-ui-kit/vue";
+import { GnPageHeader, GnBadge } from "gnexus-ui-kit/vue";
 import AppEmptyState from "../../../components/feedback/AppEmptyState.vue";
 import AppErrorState from "../../../components/feedback/AppErrorState.vue";
 import AppLoadingState from "../../../components/feedback/AppLoadingState.vue";
+import ScriptTable from "../../../components/script/ScriptTable.vue";
 
 const router = useRouter();
 const scriptsStore = useScriptsStore();
 const areasStore = useAreasStore();
 
-const areaById = computed(() => {
-  const map = {};
-  for (const a of areasStore.areas) {
-    map[a.id] = a;
-  }
-  return map;
-});
-
-function areaNameFor(row) {
-  if (!row.area_id) return null;
-  return areaById.value[row.area_id]?.display_name || `Area ${row.area_id}`;
-}
-
-const tableColumns = [
-  { key: "alias", label: "Alias" },
-  { key: "name", label: "Name" },
-  { key: "scope", label: "Scope" },
-  { key: "area", label: "Area" },
-  { key: "state", label: "State" },
-  { key: "filename", label: "File" },
-  { key: "actions", label: "Actions" },
-];
-
-function goToDetail(alias) {
-  router.push({ name: "script-detail", params: { type: "regular", id: alias } });
-}
-
-function toggle(alias, enabled) {
-  scriptsStore.setRegularState(alias, enabled);
-}
-
 onMounted(() => {
   scriptsStore.loadRegular();
   if (areasStore.areas.length === 0) {
@@ -136,37 +58,4 @@
 </script>
 
 <style scoped>
-.script-link {
-  color: var(--color-primary);
-  text-decoration: none;
-}
-
-.scope-link {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 10px;
-  border: 1px solid var(--color-primary);
-  color: var(--color-primary);
-  text-decoration: none;
-  font-size: 13px;
-  cursor: pointer;
-  transition: background 0.15s, color 0.15s;
-}
-
-.scope-link:hover {
-  background: var(--color-primary);
-  color: var(--color-bg);
-}
-
-.scope-label {
-  text-transform: uppercase;
-  font-size: 11px;
-  font-weight: 700;
-  opacity: 0.8;
-}
-
-.muted {
-  color: var(--color-muted);
-}
 </style>
diff --git a/webclient-vue/src/test/mocks/handlers.js b/webclient-vue/src/test/mocks/handlers.js
index 241ec8f..e5c5eaf 100644
--- a/webclient-vue/src/test/mocks/handlers.js
+++ b/webclient-vue/src/test/mocks/handlers.js
@@ -209,9 +209,10 @@
         status: true,
         data: {
           scripts: [
-            { alias: "kitchen_light", name: "Kitchen Light", state: "enabled" },
+            { alias: "kitchen_light", name: "Kitchen Light", state: "enabled", type: "action", area_id: 1, scope: "KitchenScope" },
+            { alias: "auto_off", name: "Auto Off", state: "enabled", type: "regular", area_id: 1, scope: "KitchenScope", filename: "auto_off.php" },
           ],
-          total: 1,
+          total: 2,
         },
       });
     }