diff --git a/frontend/src/basic/dashboard/Coordinator.vue b/frontend/src/basic/dashboard/Coordinator.vue
index 0f3e9d0d2..22948a752 100644
--- a/frontend/src/basic/dashboard/Coordinator.vue
+++ b/frontend/src/basic/dashboard/Coordinator.vue
@@ -36,12 +36,11 @@
       >
         <slot name="success-footer">
           <slot name="buttons" />
-          <button
+          <BasicButton
             class="btn btn-secondary"
+            text="Close"
             @click="$refs.coordinatorModal.close()"
-          >
-            Close
-          </button>
+          />
         </slot>
       </span>
       <span
@@ -50,20 +49,16 @@
       >
         <slot name="footer">
           <slot name="buttons" />
-          <button
+          <BasicButton
             class="btn btn-secondary"
-            type="button"
+            :text="textCancel"
             @click="$refs.coordinatorModal.close()"
-          >
-            {{ textCancel }}
-          </button>
-          <button
+          />
+          <BasicButton
             class="btn btn-primary me-2"
-            type="button"
+            :text="data.id ? textUpdate : textAdd"
             @click="submit"
-          >
-            {{ data.id ? textUpdate : textAdd }}
-          </button>
+          />
         </slot>
       </span>
     </template>
@@ -73,6 +68,7 @@
 <script>
 import BasicModal from "@/basic/Modal.vue";
 import BasicForm from "@/basic/Form.vue";
+import BasicButton from "@/basic/Button.vue";
 import { sorter } from "@/assets/utils.js";
 
 /**
@@ -95,7 +91,7 @@ import { sorter } from "@/assets/utils.js";
  */
 export default {
   name: "BasicCoordinator",
-  components: { BasicModal, BasicForm },
+  components: { BasicModal, BasicForm, BasicButton },
   props: {
     title: {
       type: String,
diff --git a/frontend/src/basic/dashboard/ListPage.vue b/frontend/src/basic/dashboard/ListPage.vue
new file mode 100644
index 000000000..1d9d49a25
--- /dev/null
+++ b/frontend/src/basic/dashboard/ListPage.vue
@@ -0,0 +1,99 @@
+<template>
+  <Card :title="title">
+    <template
+      v-if="$slots.headerActions"
+      #headerElements
+    >
+      <slot name="headerActions" />
+    </template>
+    <template #body>
+      <BasicTable
+        :columns="columns"
+        :data="data"
+        :options="resolvedTableOptions"
+        :buttons="buttons"
+        :max-table-height="maxTableHeight"
+        @action="$emit('action', $event)"
+      >
+        <template
+          v-if="$slots.tableExtras"
+          #additional-buttons
+        >
+          <slot name="tableExtras" />
+        </template>
+      </BasicTable>
+      <slot name="afterTable" />
+    </template>
+  </Card>
+  <slot name="modals" />
+</template>
+
+<script>
+import Card from "@/basic/dashboard/card/Card.vue";
+import BasicTable from "@/basic/Table.vue";
+import {
+  DEFAULT_DASHBOARD_TABLE_OPTIONS,
+  DASHBOARD_TABLE_HEIGHT,
+} from "@/basic/dashboard/constants.js";
+
+/**
+ * Shared shell for dashboard list pages: card, header actions, and BasicTable.
+ * Pages supply columns, data, row buttons, and modals; table defaults come from constants.
+ *
+ * @param {String} title - Card title
+ * @param {Array} columns - BasicTable column definitions
+ * @param {Array} data - BasicTable row data
+ * @param {Array} buttons - BasicTable row-action buttons
+ * @param {Object} tableOptions - Extra BasicTable options merged onto defaults
+ * @param {String|Number} maxTableHeight - Max table height (defaults to DASHBOARD_TABLE_HEIGHT)
+ *
+ * @author Mohammad Elwan
+ */
+export default {
+  name: "DashboardListPage",
+  components: { Card, BasicTable },
+  props: {
+    title: {
+      type: String,
+      required: true,
+    },
+    columns: {
+      type: Array,
+      required: true,
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+    buttons: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    tableOptions: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    maxTableHeight: {
+      type: [String, Number],
+      required: false,
+      default: DASHBOARD_TABLE_HEIGHT,
+    },
+  },
+  emits: ["action"],
+  computed: {
+    resolvedTableOptions() {
+      return this.tableOptions
+        ? { ...DEFAULT_DASHBOARD_TABLE_OPTIONS, ...this.tableOptions }
+        : { ...DEFAULT_DASHBOARD_TABLE_OPTIONS };
+    },
+  },
+};
+</script>
+
+<style scoped>
+:deep(.card-body) {
+  padding: 1rem;
+}
+</style>
diff --git a/frontend/src/basic/dashboard/actions.js b/frontend/src/basic/dashboard/actions.js
new file mode 100644
index 000000000..471eece39
--- /dev/null
+++ b/frontend/src/basic/dashboard/actions.js
@@ -0,0 +1,243 @@
+/**
+ * Shared icons, button styles, and badge colors for dashboard tables.
+ *
+ * Use dashboardRowAction() for common actions, then put buttons in any order.
+ * For page-only icons, use dashboardRowButton() so colors stay consistent.
+ *
+ * Color rules:
+ * - default actions use outline-secondary
+ * - delete / close / disable use outline-danger
+ * - caution actions (e.g. hide) use outline-warning via dashboardRowButton(..., "warning")
+ *
+ * Prefer one catalog key per meaning so icons stay distinct without hover titles.
+ *
+ * @author Mohammad Elwan
+ */
+
+/**
+ * Shared button option presets for row actions.
+ * @type {Object}
+ */
+export const DASHBOARD_ROW_BUTTON_STYLES = Object.freeze({
+  default: Object.freeze({
+    iconOnly: true,
+    specifiers: Object.freeze({ "btn-outline-secondary": true }),
+  }),
+  danger: Object.freeze({
+    iconOnly: true,
+    specifiers: Object.freeze({ "btn-outline-danger": true }),
+  }),
+  warning: Object.freeze({
+    iconOnly: true,
+    specifiers: Object.freeze({ "btn-outline-warning": true }),
+  }),
+});
+
+/**
+ * Default icon and style for common row actions.
+ * Keys are semantic action names; values hold the Bootstrap icon and style preset.
+ * @type {Object}
+ */
+export const DASHBOARD_ROW_ACTIONS = Object.freeze({
+  edit: Object.freeze({
+    icon: "pencil",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  editContent: Object.freeze({
+    icon: "journal-text",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  open: Object.freeze({
+    icon: "box-arrow-in-right",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  start: Object.freeze({
+    icon: "play-fill",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  resume: Object.freeze({
+    icon: "play",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  inspect: Object.freeze({
+    icon: "search",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  view: Object.freeze({
+    icon: "eye",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  copy: Object.freeze({
+    icon: "clipboard",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  link: Object.freeze({
+    icon: "link-45deg",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  download: Object.freeze({
+    icon: "download",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  export: Object.freeze({
+    icon: "download",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  exportPdf: Object.freeze({
+    icon: "filetype-pdf",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  exportHtml: Object.freeze({
+    icon: "filetype-html",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  exportDelta: Object.freeze({
+    icon: "file-earmark-diff",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  share: Object.freeze({
+    icon: "share",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  publish: Object.freeze({
+    icon: "cloud-arrow-up",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  submissions: Object.freeze({
+    icon: "inbox",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  sessions: Object.freeze({
+    icon: "person-video2",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  rights: Object.freeze({
+    icon: "shield-lock",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  list: Object.freeze({
+    icon: "card-list",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  delete: Object.freeze({
+    icon: "trash",
+    options: DASHBOARD_ROW_BUTTON_STYLES.danger,
+  }),
+  disable: Object.freeze({
+    icon: "toggle-off",
+    options: DASHBOARD_ROW_BUTTON_STYLES.danger,
+  }),
+  enable: Object.freeze({
+    icon: "toggle-on",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  close: Object.freeze({
+    icon: "stop-circle",
+    options: DASHBOARD_ROW_BUTTON_STYLES.danger,
+  }),
+  restart: Object.freeze({
+    icon: "arrow-counterclockwise",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  sync: Object.freeze({
+    icon: "arrow-clockwise",
+    options: DASHBOARD_ROW_BUTTON_STYLES.warning,
+  }),
+  replace: Object.freeze({
+    icon: "arrow-repeat",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  refresh: Object.freeze({
+    icon: "arrow-repeat",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  settings: Object.freeze({
+    icon: "gear",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  hide: Object.freeze({
+    icon: "eye-slash",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+  show: Object.freeze({
+    icon: "eye",
+    options: DASHBOARD_ROW_BUTTON_STYLES.default,
+  }),
+});
+
+/**
+ * Shared badge colors for table columns.
+ * Available keys: yesNo, publicPrivate, disabled.
+ * @type {Object}
+ */
+export const DASHBOARD_BADGES = Object.freeze({
+  yesNo: Object.freeze({ true: "bg-success", false: "bg-secondary" }),
+  publicPrivate: Object.freeze({ true: "bg-success", false: "bg-danger" }),
+  disabled: Object.freeze({ true: "bg-warning text-dark", false: "bg-secondary" }),
+});
+
+/**
+ * Merge catalog or style options with page overrides.
+ *
+ * @param {Object} baseOptions - Default options object
+ * @param {Object} - Page overrides for options
+ * @returns {Object} Merged options including deep-merged specifiers
+ */
+function mergeButtonOptions(baseOptions, overrideOptions = {}) {
+  const baseSpecifiers = baseOptions.specifiers || {};
+  const overrideSpecifiers = overrideOptions.specifiers || {};
+  return {
+    ...baseOptions,
+    ...overrideOptions,
+    specifiers: {
+      ...baseSpecifiers,
+      ...overrideSpecifiers,
+    },
+  };
+}
+
+/**
+ * Build one row-action button for BasicTable from a known action name.
+ * Pass page fields like title, action, filter, and stats in overrides.
+ *
+ * @param {string} kind - One of the DASHBOARD_ROW_ACTIONS keys
+ * @param {Object} Extra fields for this button (title, action, filter, stats, ...)
+ * @returns {Object} Button config for BasicTable
+ * @throws {Error} If kind is not a known row action
+ */
+export function dashboardRowAction(kind, overrides = {}) {
+  const base = DASHBOARD_ROW_ACTIONS[kind];
+  if (!base) {
+    throw new Error(`Unknown dashboard row action: ${kind}`);
+  }
+
+  return {
+    ...base,
+    ...overrides,
+    icon: overrides.icon !== undefined ? overrides.icon : base.icon,
+    options: mergeButtonOptions(base.options, overrides.options || {}),
+  };
+}
+
+/**
+ * Build one row button with a custom icon but a shared color style.
+ * Use this for page-only actions that are not in DASHBOARD_ROW_ACTIONS.
+ *
+ * @param {string} icon - Bootstrap icon name
+ * @param {Object} Extra fields for this button (title, action, filter, stats, ...)
+ * @param {string} One of: default, danger, warning
+ * @returns {Object} Button config for BasicTable
+ * @throws {Error} If style is unknown
+ */
+export function dashboardRowButton(icon, overrides = {}, style = "default") {
+  const baseOptions = DASHBOARD_ROW_BUTTON_STYLES[style];
+  if (!baseOptions) {
+    throw new Error(`Unknown dashboard row button style: ${style}`);
+  }
+
+  return {
+    icon,
+    ...overrides,
+    options: mergeButtonOptions(baseOptions, overrides.options || {}),
+  };
+}
diff --git a/frontend/src/basic/dashboard/constants.js b/frontend/src/basic/dashboard/constants.js
new file mode 100644
index 000000000..030aad57c
--- /dev/null
+++ b/frontend/src/basic/dashboard/constants.js
@@ -0,0 +1,41 @@
+/**
+ * Shared table settings for dashboard list pages.
+ * Copy or spread these values when using them in a page.
+ *
+ * @author Mohammad Elwan
+ */
+
+/**
+ * Default options for dashboard BasicTable instances.
+ * @type {Object}
+ */
+export const DEFAULT_DASHBOARD_TABLE_OPTIONS = Object.freeze({
+  striped: true,
+  hover: true,
+  bordered: false,
+  borderless: false,
+  small: false,
+  pagination: 10,
+});
+
+/**
+ * Same as the default options, but with search turned on.
+ *
+ * @param {Object} - Options to start from
+ * @returns {Object} A new options object with search: true
+ */
+export function withSearch(options = DEFAULT_DASHBOARD_TABLE_OPTIONS) {
+  return { ...options, search: true };
+}
+
+/**
+ * Max height for tables on full dashboard pages.
+ * @type {string}
+ */
+export const DASHBOARD_TABLE_HEIGHT = "65vh";
+
+/**
+ * Max height for tables inside dashboard modals.
+ * @type {number}
+ */
+export const DASHBOARD_MODAL_TABLE_HEIGHT = 400;
diff --git a/frontend/src/basic/dashboard/deleteHelper.js b/frontend/src/basic/dashboard/deleteHelper.js
new file mode 100644
index 000000000..0c3f52f0f
--- /dev/null
+++ b/frontend/src/basic/dashboard/deleteHelper.js
@@ -0,0 +1,74 @@
+/**
+ * Helper to confirm and soft-delete a dashboard table row.
+ *
+ * Shows ConfirmModal, then marks the row deleted with appDataUpdate.
+ * Uses an arrow callback so `this` stays correct in the page.
+ *
+ * @author Mohammad Elwan
+ */
+
+/**
+ * Ask for confirmation, then soft-delete the row if the user confirms.
+ *
+ * @param {Object} deps - Values from the page component
+ * @param {Object} deps.confirmRef - ConfirmModal ref (e.g. this.$refs.deleteConf)
+ * @param {Object} deps.socket - this.$socket
+ * @param {Object} deps.eventBus - this.eventBus (for error toasts)
+ * @param {Object} options
+ * @param {string} options.table - Table name (e.g. "project")
+ * @param {number} options.id - Row id to delete
+ * @param {string} options.title - Dialog title (e.g. "Delete Project")
+ * @param {string} options.message - Dialog message
+ * @param {string|null} Optional warning under the message
+ * @param {string} Toast title if delete fails
+ * @param {Function} Called after a successful delete
+ * @param {Function} Called after a failed delete
+ * @returns {void}
+ */
+export function confirmSoftDelete(deps, options) {
+  const { confirmRef, socket, eventBus } = deps;
+  const {
+    table,
+    id,
+    title,
+    message,
+    warning = null,
+    failTitle = "Delete failed",
+    onSuccess,
+    onFailure,
+  } = options;
+
+  confirmRef.open(title, message, warning, (confirmed) => {
+    if (!confirmed) {
+      return;
+    }
+
+    socket.emit(
+      "appDataUpdate",
+      {
+        table,
+        data: {
+          id,
+          deleted: true,
+        },
+      },
+      (result) => {
+        if (!result.success) {
+          eventBus.emit("toast", {
+            title: failTitle,
+            message: result.message,
+            variant: "danger",
+          });
+          if (typeof onFailure === "function") {
+            onFailure(result);
+          }
+          return;
+        }
+
+        if (typeof onSuccess === "function") {
+          onSuccess(result);
+        }
+      }
+    );
+  });
+}
diff --git a/frontend/src/basic/modal/ConfirmModal.vue b/frontend/src/basic/modal/ConfirmModal.vue
index 26cffb1f8..46f1bda59 100644
--- a/frontend/src/basic/modal/ConfirmModal.vue
+++ b/frontend/src/basic/modal/ConfirmModal.vue
@@ -17,26 +17,23 @@
       </div>
     </template>
     <template #footer>
-      <button
+      <BasicButton
         class="btn btn-secondary"
-        type="button"
+        text="Abort"
         @click="abort()"
-      >
-        Abort
-      </button>
-      <button
+      />
+      <BasicButton
         class="btn btn-primary"
-        type="button"
+        text="Confirm"
         @click="confirm()"
-      >
-        Confirm
-      </button>
+      />
     </template>
   </Modal>
 </template>
 
 <script>
 import Modal from "../Modal.vue";
+import BasicButton from "@/basic/Button.vue";
 
 /**
  * Modal for confirming a critical action
@@ -56,7 +53,7 @@ import Modal from "../Modal.vue";
  */
 export default {
   name: "ConfirmModal",
-  components: {Modal},
+  components: {Modal, BasicButton},
   emits: ['response'],
   data() {
     return {
diff --git a/frontend/src/components/dashboard/Assignments.vue b/frontend/src/components/dashboard/Assignments.vue
index 854e26222..532a8e737 100644
--- a/frontend/src/components/dashboard/Assignments.vue
+++ b/frontend/src/components/dashboard/Assignments.vue
@@ -1,8 +1,13 @@
 <template>
-  <Card
+  <DashboardListPage
     title="Assignments"
+    :columns="tableColumns"
+    :data="assignmentTable"
+    :buttons="tableButtons"
+    :table-options="tableOptions"
+    @action="action"
   >
-    <template #headerElements>
+    <template #headerActions>
       <div class="btn-group gap-2">
         <BasicButton
           class="btn-primary btn-sm"
@@ -13,17 +18,7 @@
         />
       </div>
     </template>
-
-    <template #body>
-      <BasicTable
-        :columns="tableColumns"
-        :data="assignmentTable"
-        :options="tableOptions"
-        :buttons="tableButtons"
-        @action="action"
-      />
-    </template>
-  </Card>
+  </DashboardListPage>
   <AssignmentModal ref="assignmentModal" />
   <AssignmentSubmissionsModal ref="assignmentSubmissionsModal" />
   <ImportModal ref="importModal" />
@@ -31,20 +26,21 @@
 </template>
 
 <script>
-import Card from "@/basic/dashboard/card/Card.vue";
-import BasicTable from "@/basic/Table.vue";
 import BasicButton from "@/basic/Button.vue";
 import AssignmentModal from "@/components/dashboard/assignments/AssignmentModal.vue";
 import AssignmentSubmissionsModal from "@/components/dashboard/assignments/AssignmentSubmissionsModal.vue";
 import ImportModal from "@/components/dashboard/submission/ImportModal.vue";
 import ConfirmModal from "@/basic/modal/ConfirmModal.vue";
+import DashboardListPage from "@/basic/dashboard/ListPage.vue";
+import { withSearch } from "@/basic/dashboard/constants.js";
+import { DASHBOARD_BADGES, dashboardRowAction, dashboardRowButton } from "@/basic/dashboard/actions.js";
+import { confirmSoftDelete } from "@/basic/dashboard/deleteHelper.js";
 
 export default {
   name: "DashboardAssignments",
   subscribeTable: ["assignment", "assignment_share", "user_role", "user"],
   components: {
-    Card,
-    BasicTable,
+    DashboardListPage,
     BasicButton,
     AssignmentModal,
     AssignmentSubmissionsModal,
@@ -53,15 +49,7 @@ export default {
   },
   data() {
     return {
-      tableOptions: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        pagination: 10,
-        search: true,
-      },
+      tableOptions: withSearch(),
       tableColumns: [
         { name: "ID", key: "id" },
         { name: "Name", key: "name" },
@@ -93,10 +81,7 @@ export default {
               true: "Yes",
               false: "No",
             },
-            classMapping: {
-              true: "bg-success",
-              false: "bg-secondary",
-            },
+            classMapping: { ...DASHBOARD_BADGES.disabled },
           },
         },
         {
@@ -114,13 +99,10 @@ export default {
         },
       ],
       tableButtons: [
-        {
-          icon: "pencil",
+        dashboardRowAction("edit", {
           filter: [{ key: "canEditAssignment", value: true }],
           options: {
-            iconOnly: true,
             specifiers: {
-              "btn-outline-secondary": true,
               "btn-sm": true,
             },
           },
@@ -129,14 +111,11 @@ export default {
           stats: {
             assignmentId: "id",
           },
-        },
-        {
-          icon: "trash",
+        }),
+        dashboardRowAction("delete", {
           filter: [{ key: "canEditAssignment", value: true }],
           options: {
-            iconOnly: true,
             specifiers: {
-              "btn-outline-danger": true,
               "btn-sm": true,
             },
           },
@@ -145,13 +124,10 @@ export default {
           stats: {
             assignmentId: "id",
           },
-        },
-        {
-          icon: "card-list",
+        }),
+        dashboardRowAction("submissions", {
           options: {
-            iconOnly: true,
             specifiers: {
-              "btn-outline-secondary": true,
               "btn-sm": true,
             },
           },
@@ -160,29 +136,44 @@ export default {
           stats: {
             assignmentId: "id",
           },
-        },
-        {
-          icon: "x-octagon",
-          filter: [{ key: "canEditAssignment", value: true }],
+        }),
+        dashboardRowAction("enable", {
+          filter: [
+            { key: "canEditAssignment", value: true },
+            { key: "disable", value: false },
+          ],
+          filterMode: "and",
           options: {
-            iconOnly: true,
             specifiers: {
-              "btn-outline-danger": true,
               "btn-sm": true,
             },
           },
-          title: "Toggle Disable",
+          title: "Disable assignment",
           action: "toggleDisable",
           stats: {
             assignmentId: "id",
           },
-        },
-        {
-          icon: "copy",
+        }),
+        dashboardRowAction("disable", {
+          filter: [
+            { key: "canEditAssignment", value: true },
+            { key: "disable", value: true },
+          ],
+          filterMode: "and",
+          options: {
+            specifiers: {
+              "btn-sm": true,
+            },
+          },
+          title: "Enable assignment",
+          action: "toggleDisable",
+          stats: {
+            assignmentId: "id",
+          },
+        }),
+        dashboardRowAction("copy", {
           options: {
-            iconOnly: true,
             specifiers: {
-              "btn-outline-secondary": true,
               "btn-sm": true,
             },
           },
@@ -191,14 +182,11 @@ export default {
           stats: {
             assignmentId: "id",
           },
-        },
-        {
-          icon: "box-arrow-in-down",
+        }),
+        dashboardRowButton("box-arrow-in-down", {
           filter: [{ key: "canEditAssignment", value: true }],
           options: {
-            iconOnly: true,
             specifiers: {
-              "btn-outline-secondary": true,
               "btn-sm": true,
             },
           },
@@ -207,16 +195,13 @@ export default {
           stats: {
             assignmentId: "id",
           },
-        },
-        {
-          icon: "x-circle",
+        }),
+        dashboardRowAction("close", {
           filter: [
             { key: "canCloseAssignment", value: true },
           ],
           options: {
-            iconOnly: true,
             specifiers: {
-              "btn-outline-warning": true,
               "btn-sm": true,
             },
           },
@@ -225,7 +210,7 @@ export default {
           stats: {
             assignmentId: "id",
           },
-        },
+        }),
       ],
     };
   },
@@ -431,38 +416,26 @@ export default {
         });
         return;
       }
-      this.$refs.deleteConf.open(
-        "Delete Assignment",
-        "Are you sure you want to delete this assignment?",
-        "",
-        (confirmed) => {
-          if (!confirmed) return;
-
-          this.$socket.emit(
-            "appDataUpdate",
-            {
-              table: "assignment",
-              data: {
-                id: params.id,
-                deleted: true,
-              },
-            },
-            (result) => {
-              if (result.success) {
-                this.eventBus.emit("toast", {
-                  title: "Assignment deleted",
-                  message: "The assignment has been deleted",
-                  variant: "success",
-                });
-              } else {
-                this.eventBus.emit("toast", {
-                  title: "Assignment delete failed",
-                  message: result.message,
-                  variant: "danger",
-                });
-              }
-            }
-          );
+      confirmSoftDelete(
+        {
+          confirmRef: this.$refs.deleteConf,
+          socket: this.$socket,
+          eventBus: this.eventBus,
+        },
+        {
+          table: "assignment",
+          id: params.id,
+          title: "Delete Assignment",
+          message: "Are you sure you want to delete this assignment?",
+          warning: "",
+          failTitle: "Assignment delete failed",
+          onSuccess: () => {
+            this.eventBus.emit("toast", {
+              title: "Assignment deleted",
+              message: "The assignment has been deleted",
+              variant: "success",
+            });
+          },
         }
       );
     },
diff --git a/frontend/src/components/dashboard/Configurations.vue b/frontend/src/components/dashboard/Configurations.vue
index b2863891f..7cf113b24 100644
--- a/frontend/src/components/dashboard/Configurations.vue
+++ b/frontend/src/components/dashboard/Configurations.vue
@@ -1,6 +1,13 @@
 <template>
-  <Card title="Configuration Files">
-    <template #headerElements>
+  <DashboardListPage
+      title="Configuration Files"
+      :columns="columns"
+      :data="configurationsTable"
+      :buttons="buttons"
+      :table-options="options"
+      @action="action"
+  >
+    <template #headerActions>
       <div class="btn-group gap-2">
         <BasicButton
             class="btn btn-secondary btn-sm"
@@ -22,17 +29,7 @@
         />
       </div>
     </template>
-    <template #body>
-      <BasicTable
-          :columns="columns"
-          :data="configurationsTable"
-          :options="options"
-          :buttons="buttons"
-          :max-table-height="'65vh'"
-          @action="action"
-      />
-    </template>
-  </Card>
+  </DashboardListPage>
 
   <!-- Upload Modal for JSON configuration files -->
   <ImportFormatModal ref="importFormatModal" title="Import Configuration" />
@@ -83,14 +80,16 @@
 </template>
 
 <script>
-import Card from "@/basic/dashboard/card/Card.vue";
-import BasicTable from "@/basic/Table.vue";
 import BasicButton from "@/basic/Button.vue";
 import ExportFormatModal from "@/basic/modal/ExportFormatModal.vue";
 import ImportFormatModal from "@/basic/modal/ImportFormatModal.vue";
 import ConfirmModal from "@/basic/modal/ConfirmModal.vue";
 import Modal from "@/basic/Modal.vue";
+import DashboardListPage from "@/basic/dashboard/ListPage.vue";
+import { withSearch } from "@/basic/dashboard/constants.js";
 import {Editor} from "@/components/editor/editorStore.js";
+import { dashboardRowAction } from "@/basic/dashboard/actions.js";
+import { confirmSoftDelete } from "@/basic/dashboard/deleteHelper.js";
 
 /**
  * Configuration Files Dashboard Component
@@ -102,8 +101,7 @@ export default {
   name: "ConfigurationsManagement",
   subscribeTable: ["configuration"],
   components: {
-    Card,
-    BasicTable,
+    DashboardListPage,
     BasicButton,
     ExportFormatModal,
     ImportFormatModal,
@@ -117,15 +115,7 @@ export default {
       editableConfigContent: null,
       quillEditor: null,
       saving: false,
-      options: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        pagination: 10,
-        search: true,
-      },
+      options: withSearch(),
       columns: [
         {name: "Name", key: "name", sortable: true},
         {name: "Created", key: "createdAt", sortable: true, type: "datetime"},
@@ -133,42 +123,22 @@ export default {
         {name: "Type", key: "typeName", sortable: true},
       ],
       buttons: [
-        {
-          icon: "eye",
-          options: {
-            iconOnly: true,
-            specifiers: {"btn-outline-secondary": true},
-          },
+        dashboardRowAction("view", {
           title: "View configuration",
           action: "view",
-        },
-        {
-          icon: "pencil-square",
-          options: {
-            iconOnly: true,
-            specifiers: {"btn-outline-primary": true},
-          },
+        }),
+        dashboardRowAction("edit", {
           title: "Edit configuration",
           action: "edit",
-        },
-        {
-          icon: "download",
-          options: {
-            iconOnly: true,
-            specifiers: {"btn-outline-secondary": true},
-          },
+        }),
+        dashboardRowAction("download", {
           title: "Export configuration",
           action: "export",
-        },
-        {
-          icon: "trash",
-          options: {
-            iconOnly: true,
-            specifiers: {"btn-outline-danger": true},
-          },
+        }),
+        dashboardRowAction("delete", {
           title: "Delete configuration",
           action: "delete",
-        },
+        }),
       ],
     };
   },
@@ -333,33 +303,20 @@ export default {
     },
 
     deleteConfiguration(config) {
-      this.$refs.deleteModal.open(
-          "Delete Configuration",
-          `Are you sure you want to delete "${config.name}"?`,
-          null,
-          (confirmed) => {
-            if (confirmed) {
-              this.$socket.emit(
-                  "appDataUpdate",
-                  {
-                    table: "configuration",
-                    data: {
-                      id: config.id,
-                      deleted: true,
-                    },
-                  },
-                  (result) => {
-                    if (!result.success) {
-                      this.eventBus.emit("toast", {
-                        title: "Configuration delete failed",
-                        message: result.message,
-                        variant: "danger",
-                      });
-                    }
-                  }
-              );
-            }
-          });
+      confirmSoftDelete(
+        {
+          confirmRef: this.$refs.deleteModal,
+          socket: this.$socket,
+          eventBus: this.eventBus,
+        },
+        {
+          table: "configuration",
+          id: config.id,
+          title: "Delete Configuration",
+          message: `Are you sure you want to delete "${config.name}"?`,
+          failTitle: "Configuration delete failed",
+        }
+      );
     },
 
     cleanupQuillEditor() {
diff --git a/frontend/src/components/dashboard/Documents.vue b/frontend/src/components/dashboard/Documents.vue
index 2e6448656..d1f38b63d 100644
--- a/frontend/src/components/dashboard/Documents.vue
+++ b/frontend/src/components/dashboard/Documents.vue
@@ -1,6 +1,13 @@
 <template>
-  <Card title="Documents">
-    <template #headerElements>
+  <DashboardListPage
+    title="Documents"
+    :columns="columns"
+    :data="docs"
+    :buttons="buttons"
+    :table-options="options"
+    @action="action"
+  >
+    <template #headerActions>
       <div class="btn-group gap-2">
       <BasicButton
           class="btn-primary btn-sm"
@@ -19,18 +26,10 @@
       />
       </div>
     </template>
-    <template #body>
-      <BasicTable
-          :columns="columns"
-          :data="docs"
-          :options="options"
-          :buttons="buttons"
-          :max-table-height="'65vh'"
-          @action="action"
-      />
+    <template #afterTable>
       <EditorDownload ref="editorDownload"/>
     </template>
-  </Card>
+  </DashboardListPage>
   <PublishModal ref="publishModal"/>
   <StudyModal ref="studyCoordinator"/>
   <ConfirmModal ref="deleteConf"/>
@@ -42,8 +41,6 @@
 
 <script>
 import PublishModal from "./documents/PublishModal.vue";
-import Card from "@/basic/dashboard/card/Card.vue";
-import BasicTable from "@/basic/Table.vue";
 import StudyModal from "./coordinator/Study.vue";
 import ConfirmModal from "@/basic/modal/ConfirmModal.vue";
 import BasicButton from "@/basic/Button.vue";
@@ -52,6 +49,10 @@ import CreateModal from "./documents/CreateModal.vue";
 import EditModal from "./documents/EditModal.vue";
 import EditorDownload from "@/components/editor/editor/EditorDownload.vue";
 import DownloadPDFModal from "./documents/DownloadPDFModal.vue";
+import DashboardListPage from "@/basic/dashboard/ListPage.vue";
+import { DEFAULT_DASHBOARD_TABLE_OPTIONS } from "@/basic/dashboard/constants.js";
+import { dashboardRowAction, dashboardRowButton } from "@/basic/dashboard/actions.js";
+import { confirmSoftDelete } from "@/basic/dashboard/deleteHelper.js";
 
 /**
  * Document list component
@@ -68,8 +69,7 @@ export default {
   components: {
     StudyModal,
     UploadModal,
-    Card,
-    BasicTable,
+    DashboardListPage,
     BasicButton,
     PublishModal,
     ConfirmModal,
@@ -80,14 +80,7 @@ export default {
   },
   data() {
     return {
-      options: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        pagination: 10,
-      },
+      options: {...DEFAULT_DASHBOARD_TABLE_OPTIONS},
       columns: [
         {name: "ID", key: "id"},
         {
@@ -120,28 +113,16 @@ export default {
     },
     buttons() {
       const buttons = [
-        {
-          icon: "box-arrow-in-right",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
+        dashboardRowAction("open", {
           title: "Access document...",
           action: "accessDoc",
           stats:{
             documentId: "id",
           }
-        },
-        {
-          icon: "trash",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
+        }),
+        dashboardRowAction("delete", {
+          title: "Delete document...",
+          action: "deleteDoc",
           filter: [
             {
               key: "uploadedByUserId",
@@ -152,20 +133,13 @@ export default {
               value: null
             }
           ],
-          title: "Delete document...",
-          action: "deleteDoc",
           stats:{
             documentId: "id",
           }
-        },
-        {
-          icon: "cloud-arrow-up",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
+        }),
+        dashboardRowAction("publish", {
+          title: "Publish document...",
+          action: "publicDoc",
           filter: [
             {
               key: "uploadedByUserId",
@@ -176,20 +150,13 @@ export default {
               value: null
             }
           ],
-          title: "Publish document...",
-          action: "publicDoc",
           stats:{
             documentId: "id",
           }
-        },
-        {
-          icon: "pencil",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
+        }),
+        dashboardRowAction("edit", {
+          title: "Rename document...",
+          action: "renameDoc",
           filter: [
             {
               key: "uploadedByUserId",
@@ -200,96 +167,66 @@ export default {
               value: null
             }
           ],
-          title: "Rename document...",
-          action: "renameDoc",
           stats:{
             documentId: "id",
           }
-        },
+        }),
       ];
       if (this.studiesEnabled) {
-        buttons.push({
-          icon: "person-workspace",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
+        buttons.push(dashboardRowButton("person-workspace", {
+          title: "Open study coordinator...",
+          action: "openStudyCoordinator",
           filter: [
             {
               key: "type",
               value: 0,
             },
           ],
-          title: "Open study coordinator...",
-          action: "openStudyCoordinator",
           stats: {
             documentId: "id",
           }
-        });
+        }));
       }
       if (this.showDeltaDownloadButton) {
-        buttons.push({
-          icon: "download",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
+        buttons.push(dashboardRowAction("exportDelta", {
+          title: "Export delta to a local file",
+          action: "exportDeltaDoc",
           filter: [
             {
               key: "type",
               value: 1,
             }],
-          title: "Export delta to a local file",
-          action: "exportDeltaDoc",
           stats: {
             documentId: "id",
           } 
-        });
+        }));
       }
       if (this.showHTMLDownloadButton) {
-        buttons.push({
-          icon: "download",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
+        buttons.push(dashboardRowAction("exportHtml", {
+          title: "Export HTML to a local file",
+          action: "exportHTMLDoc",
           filter: [
             {
               key: "type",
               value: 1,
             }],
-          title: "Export HTML to a local file",
-          action: "exportHTMLDoc",
           stats: {
             documentId: "id",
           }
-        });
+        }));
       }
       if (this.showPDFDownloadButton) {
-        buttons.push({
-          icon: "download",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
+        buttons.push(dashboardRowAction("exportPdf", {
+          title: "Download PDF with annotations",
+          action: "exportWithAnnotations",
           filter: [
             {
             key: "type",
             value: 0,
           }
         ],
-        title: "Download PDF with annotations",
-        action: "exportWithAnnotations",
-      });
-    }
+        }));
+      }
       return buttons;
     },
     docs() {
@@ -368,29 +305,20 @@ export default {
         warning = "";
       }
 
-      this.$refs.deleteConf.open(
-          "Delete Document",
-          "Are you sure you want to delete the document?",
+      confirmSoftDelete(
+        {
+          confirmRef: this.$refs.deleteConf,
+          socket: this.$socket,
+          eventBus: this.eventBus,
+        },
+        {
+          table: "document",
+          id: row.id,
+          title: "Delete Document",
+          message: "Are you sure you want to delete the document?",
           warning,
-          function (val) {
-            if (val) {
-              this.$socket.emit("appDataUpdate", {
-                table: "document",
-                data: {
-                  id: row.id,
-                  deleted: true
-                }
-              }, (result) => {
-                if (!result.success) {
-                  this.eventBus.emit('toast', {
-                    title: "Document delete failed",
-                    message: result.message,
-                    variant: "danger"
-                  });
-                }
-              });
-            }
-          }
+          failTitle: "Document delete failed",
+        }
       );
     },
     renameDoc(row) {
diff --git a/frontend/src/components/dashboard/NlpSkills.vue b/frontend/src/components/dashboard/NlpSkills.vue
index f0ab9b617..c5b3c5df4 100644
--- a/frontend/src/components/dashboard/NlpSkills.vue
+++ b/frontend/src/components/dashboard/NlpSkills.vue
@@ -1,6 +1,13 @@
 <template>
-  <Card title="Skills">
-    <template #headerElements>
+  <DashboardListPage
+      title="Skills"
+      :columns="columns"
+      :data="data"
+      :buttons="buttons"
+      :table-options="options"
+      @action="action"
+  >
+    <template #headerActions>
       <span v-if="!waitForStatus" class="badge" :class="onlineStatus? 'bg-success' : 'bg-danger'">
         {{ onlineStatus ? "ONLINE" : "OFFLINE" }}
       </span>
@@ -17,26 +24,17 @@
         />
       </div>
     </template>
-    <template #body>
-      <BasicTable
-          :columns="columns"
-          :data="data"
-          :options="options"
-          :buttons="buttons"
-          :max-table-height="'65vh'"
-          @action="action"
-      />
-    </template>
-  </Card>
+  </DashboardListPage>
   <NlpSkillModal ref="nlpSkillModal"/>
 </template>
 
 <script>
 import NlpSkillModal from "./nlp_skills/NlpSkillModal.vue";
-import BasicTable from "@/basic/Table.vue";
-import Card from "@/basic/dashboard/card/Card.vue";
 import BasicButton from "@/basic/Button.vue";
+import DashboardListPage from "@/basic/dashboard/ListPage.vue";
+import { DEFAULT_DASHBOARD_TABLE_OPTIONS } from "@/basic/dashboard/constants.js";
 import {cloneDeep} from "lodash";
+import { dashboardRowAction } from "@/basic/dashboard/actions.js";
 
 /**
  * Shows the list of available nlp skills to admins
@@ -48,7 +46,7 @@ import {cloneDeep} from "lodash";
  */
 export default {
   name: "NlpSkills",
-  components: {BasicTable, Card, BasicButton, NlpSkillModal},
+  components: {DashboardListPage, BasicButton, NlpSkillModal},
   props: {
     'admin': {
       type: Boolean,
@@ -58,14 +56,7 @@ export default {
   },
   data() {
     return {
-      options: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        pagination: 10,
-      },
+      options: {...DEFAULT_DASHBOARD_TABLE_OPTIONS},
       columns: [
         {name: "Name", key: "name"},
         {name: "# Nodes", key: "nodes"},
@@ -92,18 +83,10 @@ export default {
   computed: {
     buttons() {
       return [
-        {
-          icon: "gear",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-secondary": true,
-            }
-          },
+        dashboardRowAction("settings", {
           title: "Configure",
           action: "configure",
-          // todo which stats params to pass
-        }
+        }),
       ];
     },
     data() {
diff --git a/frontend/src/components/dashboard/Projects.vue b/frontend/src/components/dashboard/Projects.vue
index b53d3e8ff..f7d2f1a20 100644
--- a/frontend/src/components/dashboard/Projects.vue
+++ b/frontend/src/components/dashboard/Projects.vue
@@ -1,6 +1,13 @@
 <template>
-  <Card title="Projects">
-    <template #headerElements>
+  <DashboardListPage
+    title="Projects"
+    :columns="columns"
+    :data="projects"
+    :buttons="buttons"
+    :table-options="options"
+    @action="action"
+  >
+    <template #headerActions>
       <div class="btn-group gap-2">
       <BasicButton
         class="btn-primary btn-sm"
@@ -19,17 +26,7 @@
       />
       </div>
     </template>
-    <template #body>
-      <BasicTable
-        :columns="columns"
-        :data="projects"
-        :options="options"
-        :buttons="buttons"
-        :max-table-height="'65vh'"
-        @action="action"
-      />
-    </template>
-  </Card>
+  </DashboardListPage>
   <ProjectModal ref="projectModal"/>
   <ExportModal ref="exportModal"/>
   <ConfirmModal ref="deleteConf"/>
@@ -38,13 +35,15 @@
 </template>
 
 <script>
-import Card from "@/basic/dashboard/card/Card.vue";
-import BasicTable from "@/basic/Table.vue";
 import BasicButton from "@/basic/Button.vue";
 import ProjectModal from "./coordinator/Project.vue";
 import ExportModal from "./projects/ExportModal.vue";
 import ConfirmModal from "@/basic/modal/ConfirmModal.vue";
 import AssignProjectModal from "./projects/AssignProjectModal.vue";
+import DashboardListPage from "@/basic/dashboard/ListPage.vue";
+import { DEFAULT_DASHBOARD_TABLE_OPTIONS } from "@/basic/dashboard/constants.js";
+import { dashboardRowAction } from "@/basic/dashboard/actions.js";
+import { confirmSoftDelete } from "@/basic/dashboard/deleteHelper.js";
 
 /**
  * Project list component
@@ -58,8 +57,7 @@ export default {
   subscribeTable: ["project"],
   components: {
     ExportModal,
-    Card,
-    BasicTable,
+    DashboardListPage,
     BasicButton,
     ProjectModal,
     ConfirmModal,
@@ -67,14 +65,7 @@ export default {
   },
   data() {
     return {
-      options: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        pagination: 10,
-      },
+      options: {...DEFAULT_DASHBOARD_TABLE_OPTIONS},
       columns: [
         {name: "", key: "select", type: "icon-selector"},
         {name: "Project name", key: "name"},
@@ -93,86 +84,51 @@ export default {
     },
     buttons() {
       const buttons = [
-        {
-          icon: "clipboard",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            }
-          },
+        dashboardRowAction("copy", {
           title: "Copy project",
           action: "copy",
           stats: {
             projectId: "id",
           }
-        },
-        {
-          icon: "pencil",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-dark": true,
-            }
-          },
+        }),
+        dashboardRowAction("edit", {
+          title: "Edit project",
+          action: "edit",
           filter: [
             {key: "userId", value: this.userId},
           ],
-          title: "Edit project",
-          action: "edit",
           stats: {
             projectId: "id",
           }
-        },
-        {
-          icon: "trash",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-dark": true,
-            }
-          },
+        }),
+        dashboardRowAction("delete", {
+          title: "Delete project",
+          action: "delete",
           filter: [
             {key: "userId", value: this.userId},
           ],
-          title: "Delete project",
-          action: "delete",
           stats: {
             projectId: "id",
           }
-        },
-        {
-          icon: "share",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-dark": true,
-            }
-          },
+        }),
+        dashboardRowAction("share", {
+          title: "Share project",
+          action: "publish",
           filter: [
             {key: "public", value: false},
             {key: "userId", value: this.userId},
           ],
-          title: "Share project",
-          action: "publish",
           stats: {
             projectId: "id",
           }
-        },
-        {
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-dark": true,
-            }
-          },
+        }),
+        dashboardRowAction("download", {
           title: "Export data",
-          icon: "download",
           action: "export",
           stats: {
             projectId: "id",
           }
-        }
+        }),
       ];
       return buttons;
     },
@@ -242,28 +198,19 @@ export default {
         warning += `There ${documents.length !== 1 ? "are" : "is"} currently ${documents.length} ${documents.length !== 1 ? "documents" : "document"} linked to this project. Deleting the project will also delete the ${documents.length !== 1 ? "documents" : "document"}.\n`;
       }
 
-      this.$refs.deleteConf.open(
-        "Delete Project",
-        "Are you sure you want to delete this project?",
-        warning,
-        (val) => {
-          if (val) {
-            this.$socket.emit("appDataUpdate", {
-              table: "project",
-              data: {
-                id: params.id,
-                deleted: true
-              }
-            }, (result) => {
-              if (!result.success) {
-                this.eventBus.emit('toast', {
-                  title: "Project delete failed",
-                  message: result.message,
-                  variant: "danger"
-                });
-              }
-            });
-          }
+      confirmSoftDelete(
+        {
+          confirmRef: this.$refs.deleteConf,
+          socket: this.$socket,
+          eventBus: this.eventBus,
+        },
+        {
+          table: "project",
+          id: params.id,
+          title: "Delete Project",
+          message: "Are you sure you want to delete this project?",
+          warning,
+          failTitle: "Project delete failed",
         }
       );
       this.$socket.emit("appSettingSet", { key: "projects.default", value: 1 });
diff --git a/frontend/src/components/dashboard/Study.vue b/frontend/src/components/dashboard/Study.vue
index 99eaf8186..8d9f93b79 100644
--- a/frontend/src/components/dashboard/Study.vue
+++ b/frontend/src/components/dashboard/Study.vue
@@ -87,6 +87,9 @@ import ManageStudiesModal from "@/components/dashboard/study/ManageStudiesModal.
 import StudyCloseModal from "@/components/dashboard/study/StudyCloseModal.vue";
 import SavedTemplatesModal from "./study/SavedTemplatesModal.vue";
 import PublishAssessmentModal from "./submission/PublishAssessmentModal.vue";
+import { dashboardRowAction, dashboardRowButton } from "@/basic/dashboard/actions.js";
+import { confirmSoftDelete } from "@/basic/dashboard/deleteHelper.js";
+import { withSearch } from "@/basic/dashboard/constants.js";
 
 /**
  * Dashboard component for handling studies
@@ -137,15 +140,7 @@ export default {
         information: false,
         savedTemplates: false,
       },
-      options: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        pagination: 10,
-        search: true
-      },
+      options: withSearch(),
     }
   },
   computed: {
@@ -165,14 +160,7 @@ export default {
     },
     buttons() {
       const buttons = [
-        {
-          icon: "pencil-square",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            }
-          },
+        dashboardRowAction("edit", {
           title: "Edit study",
           filter: [
             {key: "showEditButton", value: true},
@@ -180,16 +168,9 @@ export default {
           action: "editStudy",
           stats: {
             studyId: "id"
-          }
-        },
-        {
-          icon: "trash",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            }
           },
+        }),
+        dashboardRowAction("delete", {
           filter: [
             {key: "showDeleteButton", value: true},
           ],
@@ -197,30 +178,16 @@ export default {
           action: "deleteStudy",
           stats: {
             studyId: "id"
-          }
-        },
-        {
-          icon: "box-arrow-in-right",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            }
           },
+        }),
+        dashboardRowAction("open", {
           title: "Open study",
           action: "openStudy",
           stats: {
             studyId: "id"
-          }
-        },
-        {
-          icon: "arrow-repeat",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            }
           },
+        }),
+        dashboardRowAction("restart", {
           title: "Restart study",
           filter: [
             {key: "showRestartButton", value: true},
@@ -229,43 +196,22 @@ export default {
           stats: {
             studyId: "id"
           },
-        },
-        {
-          icon: "link-45deg",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            }
-          },
+        }),
+        dashboardRowAction("link", {
           title: "Copy link to study",
           action: "copyStudyLink",
           stats: {
             studyId: "id"
-          }
-        },
-        {
-          icon: "card-list",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            }
           },
+        }),
+        dashboardRowAction("sessions", {
           title: "Inspect sessions",
           action: "inspectStudySessions",
           stats: {
             studyId: "id"
           },
-        },
-        {
-          icon: "x-octagon",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            }
-          },
+        }),
+        dashboardRowAction("close", {
           filter: [
             {key: "showCloseButton", value: true},
           ],
@@ -273,16 +219,9 @@ export default {
           action: "closeStudy",
           stats: {
             studyId: "id"
-          }
-        },
-        {
-          icon: "save",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            }
           },
+        }),
+        dashboardRowButton("save", {
           filter: [
             {key: "showTemplateButton", value: true},
           ],
@@ -290,25 +229,17 @@ export default {
           action: "saveAsTemplate",
           stats: {
             studyId: "id"
-          }
-        }
-
+          },
+        }),
       ];
       if (this.showInformationButton) {
-        buttons.push({
-          icon: "arrows-angle-expand",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
+        buttons.push(dashboardRowButton("arrows-angle-expand", {
           title: "Show information",
           action: "showInformation",
           stats: {
             studyId: "id"
-          }
-        });
+          },
+        }));
       }
       return buttons;
     },
@@ -612,36 +543,31 @@ export default {
         warning = "";
       }
 
-      this.openDeleteConfModal(
-          "Delete Study",
-          "Are you sure you want to delete the study?",
-          warning,
-          function (val) {
-            if (val) {
-              this.$socket.emit("appDataUpdate", {
-                table: "study",
-                data: {
-                  id: row.id,
-                  deleted: true
-                }
-              }, (result) => {
-                if (result.success) {
-                  this.eventBus.emit('toast', {
-                    title: "Study deleted",
-                    message: "The study has been deleted",
-                    variant: "success"
-                  });
-                } else {
-                  this.eventBus.emit('toast', {
-                    title: "Study delete failed",
-                    message: result.message,
-                    variant: "danger"
-                  });
-                }
+      this.modals.deleteConf = true;
+      this.$nextTick(() => {
+        confirmSoftDelete(
+          {
+            confirmRef: this.$refs.deleteConf,
+            socket: this.$socket,
+            eventBus: this.eventBus,
+          },
+          {
+            table: "study",
+            id: row.id,
+            title: "Delete Study",
+            message: "Are you sure you want to delete the study?",
+            warning,
+            failTitle: "Study delete failed",
+            onSuccess: () => {
+              this.eventBus.emit('toast', {
+                title: "Study deleted",
+                message: "The study has been deleted",
+                variant: "success"
               });
-            }
+            },
           }
-      );
+        );
+      });
     },
 
   }
diff --git a/frontend/src/components/dashboard/Tags.vue b/frontend/src/components/dashboard/Tags.vue
index f00ad5dce..70cd2941e 100644
--- a/frontend/src/components/dashboard/Tags.vue
+++ b/frontend/src/components/dashboard/Tags.vue
@@ -1,6 +1,13 @@
 <template>
-  <BasicCard title="Tag Sets">
-    <template #headerElements>
+  <DashboardListPage
+    title="Tag Sets"
+    :columns="columns"
+    :data="tagSets"
+    :buttons="buttons"
+    :table-options="options"
+    @action="action"
+  >
+    <template #headerActions>
       <div class="btn-group gap-2">
         <BasicButton
           class="btn-secondary btn-sm"
@@ -24,17 +31,7 @@
         />
       </div>
     </template>
-    <template #body>
-      <BasicTable
-        :columns="columns"
-        :data="tagSets"
-        :options="options"
-        :buttons="buttons"
-        :max-table-height="'65vh'"
-        @action="action"
-      />
-    </template>
-  </BasicCard>
+  </DashboardListPage>
   <TagSetModal
     ref="tagSetModal"
   />
@@ -51,8 +48,6 @@
  *
  * @author Dennis Zyska
  */
-import BasicTable from "@/basic/Table.vue";
-import BasicCard from "@/basic/dashboard/card/Card.vue";
 import BasicButton from "@/basic/Button.vue";
 import TagSetModal from "./coordinator/TagSet.vue";
 import ExportFormatModal from "@/basic/modal/ExportFormatModal.vue";
@@ -60,11 +55,15 @@ import ImportFormatModal from "@/basic/modal/ImportFormatModal.vue";
 
 import {mapGetters} from "vuex";
 import ConfirmModal from "@/basic/modal/ConfirmModal.vue";
+import DashboardListPage from "@/basic/dashboard/ListPage.vue";
+import {dashboardRowAction} from "@/basic/dashboard/actions.js";
+import {DEFAULT_DASHBOARD_TABLE_OPTIONS} from "@/basic/dashboard/constants.js";
+import {confirmSoftDelete} from "@/basic/dashboard/deleteHelper.js";
 
 export default {
   name: "DashboardTags",
   subscribeTable: ["tag_set", "tag"],
-  components: {ConfirmModal, BasicTable, BasicCard, BasicButton, TagSetModal, ExportFormatModal, ImportFormatModal},
+  components: {ConfirmModal, DashboardListPage, BasicButton, TagSetModal, ExportFormatModal, ImportFormatModal},
   props: {
     'admin': {
       type: Boolean,
@@ -74,14 +73,7 @@ export default {
   },
   data() {
     return {
-      options: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        pagination: 10,
-      },
+      options: {...DEFAULT_DASHBOARD_TABLE_OPTIONS},
       columns: [
         {name: "", key: "select", type: "icon-selector"},
         {name: "Name", key: "name"},
@@ -99,29 +91,15 @@ export default {
       isAdmin: 'auth/isAdmin',
     }),
     buttons() {
-      const buttons = [
-        {
-          icon: "clipboard",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            }
-          },
+      return [
+        dashboardRowAction("copy", {
           title: "Copy tag set",
           action: "copyTagSet",
           stats: {
             tagSetId: "id",
           }
-        },
-        {
-          icon: "pencil",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-dark": true,
-            }
-          },
+        }),
+        dashboardRowAction("edit", {
           filter: [
             {key: "userId", value: this.userId},
           ],
@@ -130,15 +108,8 @@ export default {
           stats: {
             tagSetId: "id",
           }
-        },
-        {
-          icon: "trash",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-dark": true,
-            }
-          },
+        }),
+        dashboardRowAction("delete", {
           filter: [
             {key: "userId", value: this.userId},
           ],
@@ -147,15 +118,8 @@ export default {
           stats: {
             tagSetId: "id",
           }
-        },
-        {
-          icon: "share",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-dark": true,
-            }
-          },
+        }),
+        dashboardRowAction("share", {
           filter: [
             {key: "public", value: false},
             {key: "userId", value: this.userId},
@@ -165,20 +129,12 @@ export default {
           stats: {
             tagSetId: "id",
           }
-        },
-        {
-          icon: "download",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            }
-          },
+        }),
+        dashboardRowAction("download", {
           title: "Export tag set",
           action: "exportTagSet",
-        }
+        }),
       ];
-      return buttons;
     },
     tagSets() {
       return this.$store.getters["table/tag_set/getAll"]
@@ -241,34 +197,25 @@ export default {
       }
     },
     deleteTagSet(row) {
-      this.$refs.confirm.open(
-        "Delete Tagset",
-        "Do you really want to delete the Tagset?",
-        "",
-        function (val) {
-          if (val) {
-            this.$socket.emit("appDataUpdate", {
-              table: "tag_set",
-              data: {
-                id: row.id,
-                deleted: true
-              }
-            }, (result) => {
-              if (result.success) {
-                this.eventBus.emit('toast', {
-                  title: "TagSet deleted",
-                  message: "The TagSet was successfully deleted",
-                  variant: "success"
-                });
-              } else {
-                this.eventBus.emit('toast', {
-                  title: "TagSet delete failed",
-                  message: result.message,
-                  variant: "danger"
-                });
-              }
+      confirmSoftDelete(
+        {
+          confirmRef: this.$refs.confirm,
+          socket: this.$socket,
+          eventBus: this.eventBus,
+        },
+        {
+          table: "tag_set",
+          id: row.id,
+          title: "Delete Tagset",
+          message: "Do you really want to delete the Tagset?",
+          failTitle: "TagSet delete failed",
+          onSuccess: () => {
+            this.eventBus.emit('toast', {
+              title: "TagSet deleted",
+              message: "The TagSet was successfully deleted",
+              variant: "success"
             });
-          }
+          },
         }
       );
     },
@@ -280,7 +227,7 @@ export default {
         "      and create a new one.\n" +
         "      If published the tagset will be available for all users.",
         "",
-        function (val) {
+        (val) => {
           if (val) {
             this.$socket.emit("appDataUpdate", {
               table: "tag_set",
diff --git a/frontend/src/components/dashboard/Templates.vue b/frontend/src/components/dashboard/Templates.vue
index c1103a5a1..b6a466cdc 100644
--- a/frontend/src/components/dashboard/Templates.vue
+++ b/frontend/src/components/dashboard/Templates.vue
@@ -1,6 +1,13 @@
 <template>
-    <Card title="Templates">
-      <template #headerElements>
+    <DashboardListPage
+      title="Templates"
+      :columns="columns"
+      :data="templates"
+      :buttons="buttons"
+      :table-options="options"
+      @action="action"
+    >
+      <template #headerActions>
         <BasicButton
           class="btn-outline-secondary btn-sm me-2"
           title="Browse public templates"
@@ -30,16 +37,7 @@
           @click="$refs.templateModal.open(0)"
         />
       </template>
-      <template #body>
-        <BasicTable
-          :columns="columns"
-          :data="templates"
-          :options="options"
-          :buttons="buttons"
-          @action="action"
-        />
-      </template>
-    </Card>
+    </DashboardListPage>
     <TemplateModal ref="templateModal" />
     <PublishModal ref="publishModal" />
     <ConfirmModal ref="deleteConf" />
@@ -51,8 +49,6 @@
   </template>
   
   <script>
-  import Card from "@/basic/dashboard/card/Card.vue";
-  import BasicTable from "@/basic/Table.vue";
   import BasicButton from "@/basic/Button.vue";
   import TemplateModal from "./templates/TemplateModal.vue";
   import PublishModal from "./templates/PublishModal.vue";
@@ -62,6 +58,9 @@
   import PublicTemplatesModal from "./templates/PublicTemplatesModal.vue";
   import ExportFormatModal from "@/basic/modal/ExportFormatModal.vue";
   import ImportFormatModal from "@/basic/modal/ImportFormatModal.vue";
+  import DashboardListPage from "@/basic/dashboard/ListPage.vue";
+  import { DEFAULT_DASHBOARD_TABLE_OPTIONS } from "@/basic/dashboard/constants.js";
+  import { dashboardRowAction, dashboardRowButton } from "@/basic/dashboard/actions.js";
   /**
    * Templates dashboard component
    *
@@ -75,8 +74,7 @@
     name: "DashboardTemplates",
     subscribeTable: ["template"],
     components: {
-      Card,
-      BasicTable,
+      DashboardListPage,
       BasicButton,
       TemplateModal,
       PublishModal,
@@ -89,14 +87,7 @@
     },
     data() {
       return {
-        options: {
-          striped: true,
-          hover: true,
-          bordered: false,
-          borderless: false,
-          small: false,
-          pagination: 10,
-        },
+        options: { ...DEFAULT_DASHBOARD_TABLE_OPTIONS },
         columns: [
           { name: "ID", key: "id" },
           { name: "Name", key: "name", sortable: true },
@@ -130,14 +121,7 @@
       buttons() {
         return [
           // Edit metadata - own non-copy templates only
-          {
-            icon: "pencil",
-            options: {
-              iconOnly: true,
-              specifiers: {
-                "btn-outline-secondary": true,
-              },
-            },
+          dashboardRowAction("edit", {
             filter: [
               { key: "userId", value: this.userId },
               { key: "isCopy", value: false },
@@ -145,16 +129,9 @@
             filterMode: "and",
             title: "Edit template",
             action: "edit",
-          },
+          }),
           // Edit content - own non-copy templates only
-          {
-            icon: "box-arrow-in-right",
-            options: {
-              iconOnly: true,
-              specifiers: {
-                "btn-outline-secondary": true,
-              },
-            },
+          dashboardRowAction("editContent", {
             filter: [
               { key: "userId", value: this.userId },
               { key: "isCopy", value: false },
@@ -162,42 +139,21 @@
             filterMode: "and",
             title: "Edit content",
             action: "editContent",
-          },
+          }),
           // Edit content - for copies (detaches first)
-          {
-            icon: "box-arrow-in-right",
-            options: {
-              iconOnly: true,
-              specifiers: {
-                "btn-outline-secondary": true,
-              },
-            },
+          dashboardRowAction("editContent", {
             filter: [{ key: "isCopy", value: true }],
             title: "Edit content",
             action: "editContentCopy",
-          },
+          }),
           // View content (read-only) - for copies
-          {
-            icon: "eye",
-            options: {
-              iconOnly: true,
-              specifiers: {
-                "btn-outline-secondary": true,
-              },
-            },
+          dashboardRowAction("view", {
             filter: [{ key: "isCopy", value: true }],
             title: "View content (read-only)",
             action: "viewContent",
-          },
+          }),
           // Publish - own non-copy non-public templates only
-          {
-            icon: "cloud-arrow-up",
-            options: {
-              iconOnly: true,
-              specifiers: {
-                "btn-outline-secondary": true,
-              },
-            },
+          dashboardRowAction("publish", {
             filter: [
               { key: "public", value: false },
               { key: "userId", value: this.userId },
@@ -206,14 +162,11 @@
             filterMode: "and",
             title: "Publish template",
             action: "togglePublished",
-          },
+          }),
           // Published badge - own non-copy public templates only
-          {
-            icon: "check-circle",
+          dashboardRowButton("check-circle", {
             options: {
-              iconOnly: true,
               specifiers: {
-                "btn-outline-secondary": true,
                 disabled: true,
               },
             },
@@ -225,41 +178,20 @@
             filterMode: "and",
             title: "Published (cannot be unpublished)",
             action: null,
-          },
+          }),
           // Source updated - copies with updates available (opens modal with Update / Make new copy)
-          {
-            icon: "arrow-clockwise",
-            options: {
-              iconOnly: true,
-              specifiers: {
-                "btn-outline-primary": true,
-              },
-            },
+          dashboardRowAction("sync", {
             filter: [{ key: "hasUpdate", value: true }],
             title: "Source updated",
             action: "openUpdateModal",
-          },
+          }),
           // Export
-          {
-            icon: "download",
-            options: {
-              iconOnly: true,
-              specifiers: {
-                "btn-outline-secondary": true,
-              },
-            },
+          dashboardRowAction("download", {
             title: "Export template",
             action: "export",
-          },
+          }),
           // Delete - own templates that can be deleted (including copies)
-          {
-            icon: "trash",
-            options: {
-              iconOnly: true,
-              specifiers: {
-                "btn-outline-secondary": true,
-              },
-            },
+          dashboardRowAction("delete", {
             filter: [
               { key: "userId", value: this.userId },
               { key: "canDelete", value: true }
@@ -267,7 +199,7 @@
             filterMode: "and",
             title: "Delete template",
             action: "delete",
-          },
+          }),
         ];
       },
       userId() {
diff --git a/frontend/src/components/dashboard/Users.vue b/frontend/src/components/dashboard/Users.vue
index 5615c02e0..8ab712851 100644
--- a/frontend/src/components/dashboard/Users.vue
+++ b/frontend/src/components/dashboard/Users.vue
@@ -1,7 +1,14 @@
 <template>
   <div>
-  <Card title="Users">
-    <template #headerElements>
+  <DashboardListPage
+      title="Users"
+      :columns="columns"
+      :data="users"
+      :buttons="buttons"
+      :table-options="options"
+      @action="chooseAction"
+  >
+    <template #headerActions>
       <div class="d-flex align-items-center flex-wrap gap-2">
         <BasicButton
             class="btn btn-secondary btn-sm"
@@ -61,17 +68,7 @@
         />
       </div>
     </template>
-    <template #body>
-      <BasicTable
-          :columns="columns"
-          :data="users"
-          :options="options"
-          :buttons="buttons"
-          :max-table-height="'65vh'"
-          @action="chooseAction"
-      />
-    </template>
-  </Card>
+  </DashboardListPage>
   <DetailsModal
       v-if="modals.details"
       ref="detailsModal"
@@ -110,8 +107,6 @@
 </template>
 
 <script>
-import BasicTable from "@/basic/Table.vue";
-import Card from "@/basic/dashboard/card/Card.vue";
 import BasicButton from "@/basic/Button.vue";
 import DetailsModal from "./users/DetailsModal.vue";
 import RightsModal from "./users/RightsModal.vue";
@@ -124,6 +119,10 @@ import ConfirmModal from "@/basic/modal/ConfirmModal.vue";
 import PasswordModal from "@/basic/modal/PasswordModal.vue";
 import {downloadObjectsAs} from "@/assets/utils";
 import ActiveSessionsModal from "./users/ActiveSessionsModal.vue";
+import DashboardListPage from "@/basic/dashboard/ListPage.vue";
+import { withSearch } from "@/basic/dashboard/constants.js";
+import { dashboardRowAction, dashboardRowButton } from "@/basic/dashboard/actions.js";
+import { confirmSoftDelete } from "@/basic/dashboard/deleteHelper.js";
 
 /**
  * Display user list by users' role
@@ -134,8 +133,7 @@ export default {
   name: "DashboardUsers",
   subscribeTable: ["user"],
   components: {
-    Card,
-    BasicTable,
+    DashboardListPage,
     DetailsModal,
     PasswordModal,
     RightsModal,
@@ -168,19 +166,12 @@ export default {
         confirm: false,
         activeSessions: false,
       },
-      options: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        pagination: 10,
-        search: true,
+      options: withSearch({
         sort: {
           column: "id",
           order: "ASC",
         },
-      },
+      }),
       columns: [
         { name: '', key: 'activeIndicator', filterKey: 'isActive', type: 'icon', sortable: true, sortKey: 'isActive', width: 1, fixed: "left",
           style: { width: '1px', whiteSpace: "nowrap", textAlign: "center" },
@@ -246,77 +237,42 @@ export default {
     },
     buttons() {
       return [
-        {
+        dashboardRowAction("edit", {
           title: "Edit User",
           action: "editUser",
           stats: {
             userId: "id",
           },
-          icon: "pencil",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
-        },
-        {
+        }),
+        dashboardRowAction("rights", {
           title: "View Rights",
           action: "viewRights",
           stats: {
             userId: "id",
           },
-          icon: "card-list",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
-        },
-        {
+        }),
+        dashboardRowButton("person-lock", {
           title: "Reset Password",
           action: "resetPassword",
           stats: {
             userId: "id",
           },
-          icon: "person-lock",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
-        },
-        {
+        }),
+        dashboardRowButton("display", {
           title: "View Sessions",
           action: "viewSessions",
           stats: {
             userId: "id",
           },
-          icon: "display",
           filter: [{ key: "isActive", value: true }],
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
-        },
-        {
+        }),
+        dashboardRowAction("delete", {
           title: "Delete User",
           action: "deleteUser",
           stats: {
             userId: "id",
           },
-          icon: "trash",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
-        },
+        }),
       ];
     },
   },
@@ -402,34 +358,29 @@ export default {
       this.openPasswordModal(user.id);
     },
     deleteUser(user) {
-      this.openConfirmModal("Delete User", "Are you sure you want to delete this user?", null, (val) => {
-        if (val) {
-          this.$socket.emit(
-              "appDataUpdate",
-              {
-                table: "user",
-                data: {
-                  id: user.id,
-                  deleted: true,
-                },
-              },
-              (result) => {
-                if (result.success) {
-                  this.eventBus.emit("toast", {
-                    title: "User deleted",
-                    message: "User has been deleted",
-                    variant: "success",
-                  });
-                } else {
-                  this.eventBus.emit("toast", {
-                    title: "User not deleted",
-                    message: result.message,
-                    variant: "danger",
-                  });
-                }
-              }
-          );
-        }
+      this.modals.confirm = true;
+      this.$nextTick(() => {
+        confirmSoftDelete(
+          {
+            confirmRef: this.$refs.confirmModal,
+            socket: this.$socket,
+            eventBus: this.eventBus,
+          },
+          {
+            table: "user",
+            id: user.id,
+            title: "Delete User",
+            message: "Are you sure you want to delete this user?",
+            failTitle: "User not deleted",
+            onSuccess: () => {
+              this.eventBus.emit("toast", {
+                title: "User deleted",
+                message: "User has been deleted",
+                variant: "success",
+              });
+            },
+          }
+        );
       });
     },
     downloadUsers() {
diff --git a/frontend/src/components/dashboard/Workflows.vue b/frontend/src/components/dashboard/Workflows.vue
index 4a61fa715..0d47e2a5e 100644
--- a/frontend/src/components/dashboard/Workflows.vue
+++ b/frontend/src/components/dashboard/Workflows.vue
@@ -1,6 +1,13 @@
 <template>
-  <Card title="Workflows">
-    <template #headerElements>
+  <DashboardListPage
+    title="Workflows"
+    :columns="columns"
+    :data="workflows"
+    :buttons="buttons"
+    :table-options="options"
+    @action="chooseAction"
+  >
+    <template #headerActions>
       <BasicButton
         class="btn btn-primary btn-sm"
         title="Add Workflow"
@@ -22,16 +29,7 @@
         @click="importWorkflows"
       />
     </template>
-    <template #body>
-        <BasicTable
-          :columns="columns"
-          :data="workflows"
-          :options="options"
-          :buttons="buttons"
-          @action="chooseAction"
-        />      
-    </template>
-  </Card>
+  </DashboardListPage>
 
   <!-- Modals -->
   <WorkflowCreateModal
@@ -56,8 +54,6 @@
 </template>
 
 <script>
-import BasicTable from "@/basic/Table.vue";
-import Card from "@/basic/dashboard/card/Card.vue";
 import BasicButton from "@/basic/Button.vue";
 import ConfirmModal from "@/basic/modal/ConfirmModal.vue";
 
@@ -67,6 +63,10 @@ import WorkflowRenameModal from "./workflows/WorkflowRenameModal.vue";
 import WorkflowEditModal from "./workflows/WorkflowEditModal.vue";
 import ExportFormatModal from "@/basic/modal/ExportFormatModal.vue";
 import ImportFormatModal from "@/basic/modal/ImportFormatModal.vue";
+import DashboardListPage from "@/basic/dashboard/ListPage.vue";
+import { withSearch } from "@/basic/dashboard/constants.js";
+import { dashboardRowAction, dashboardRowButton } from "@/basic/dashboard/actions.js";
+import { confirmSoftDelete } from "@/basic/dashboard/deleteHelper.js";
 
 /**
  * Workflows dashboard component
@@ -79,8 +79,7 @@ export default {
   name: "DashboardWorkflows",
   subscribeTable: ["workflow", "workflow_step"],
   components: {
-    Card,
-    BasicTable,
+    DashboardListPage,
     BasicButton,
     ConfirmModal,
     WorkflowRenameModal,
@@ -93,19 +92,12 @@ export default {
     return {
       selectedWorkflowId: "",
       copiedData: null,
-      options: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        pagination: 10,
-        search: true,
+      options: withSearch({
         sort: {
           column: "name",
           order: "ASC",
         },
-      },
+      }),
       columns: [
         { name: "ID", key: "id", sortable: true },
         { name: "Name", key: "name", sortable: true },
@@ -146,90 +138,60 @@ export default {
     },
     buttons() {
       return [
-        {
-          title: "copy Workflow",
+        dashboardRowAction("copy", {
+          title: "Copy Workflow",
           action: "copyWorkflow",
           stats: { workflowId: "id" },
-          icon: "files",
           filter: [
             {key: "isEditable", value: true},
           ],
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
-        },
-        {
+        }),
+        dashboardRowButton("diagram-3", {
           title: "Edit Workflow",
           action: "editWorkflow",
           stats: { workflowId: "id" },
-          icon: "diagram-3",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-            },
-          },
-        },
-        {
+        }),
+        dashboardRowButton("fonts", {
           title: "Rename Workflow",
           action: "renameWorkflow",
           stats: { workflowId: "id" },
-          icon: "fonts",
           filter: [
             {key: "isEditable", value: true},
           ],
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-info": true,
-            },
-          },
-        },
-        {
+        }),
+        dashboardRowAction("download", {
           title: "Export Workflow",
           action: "exportWorkflow",
           stats: { workflowId: "id" },
-          icon: "download",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-primary": true,
-            },
-          },
-        },
-        {
-          title: "Toggle Hidden",
+        }),
+        dashboardRowAction("hide", {
+          title: "Hide workflow",
           action: "toggleHidden",
           stats: { workflowId: "id" },
-          icon: "eye-slash",
           filter: [
             {key: "isEditable", value: true},
+            {key: "hideInFrontend", value: false},
           ],
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-warning": true,
-            },
-          },
-        },
-        {
+          filterMode: "and",
+        }),
+        dashboardRowAction("show", {
+          title: "Show workflow",
+          action: "toggleHidden",
+          stats: { workflowId: "id" },
+          filter: [
+            {key: "isEditable", value: true},
+            {key: "hideInFrontend", value: true},
+          ],
+          filterMode: "and",
+        }),
+        dashboardRowAction("delete", {
           title: "Delete Workflow",
           action: "deleteWorkflow",
           stats: { workflowId: "id" },
-          icon: "trash",
           filter: [
             {key: "isEditable", value: true},
           ],
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-danger": true,
-            },
-          },
-        },
+        }),
       ];
     },
   },
@@ -309,38 +271,26 @@ export default {
     deleteWorkflow(params) {
       const workflow = this.workflows.find(w => w.id === params.id);
       
-      this.$refs.confirmModal.open(
-        "Delete Workflow",
-        `Are you sure you want to delete the workflow "${workflow.name}"?`,
-        "This action cannot be undone.",
-        (confirmed) => {
-          if (confirmed) {
-            this.$socket.emit(
-              "appDataUpdate",
-              {
-                table: "workflow",
-                data: {
-                  id: params.id,
-                  deleted: true,
-                },
-              },
-              (result) => {
-                if (result.success) {
-                  this.eventBus.emit("toast", {
-                    title: "Workflow Deleted",
-                    message: "Workflow has been deleted",
-                    variant: "success",
-                  });
-                } else {
-                  this.eventBus.emit("toast", {
-                    title: "Delete Failed",
-                    message: result.message,
-                    variant: "danger",
-                  });
-                }
-              }
-            );
-          }
+      confirmSoftDelete(
+        {
+          confirmRef: this.$refs.confirmModal,
+          socket: this.$socket,
+          eventBus: this.eventBus,
+        },
+        {
+          table: "workflow",
+          id: params.id,
+          title: "Delete Workflow",
+          message: `Are you sure you want to delete the workflow "${workflow.name}"?`,
+          warning: "This action cannot be undone.",
+          failTitle: "Delete Failed",
+          onSuccess: () => {
+            this.eventBus.emit("toast", {
+              title: "Workflow Deleted",
+              message: "Workflow has been deleted",
+              variant: "success",
+            });
+          },
         }
       );
     },
diff --git a/frontend/src/components/dashboard/assignments/AssignmentSubmissionsTable.vue b/frontend/src/components/dashboard/assignments/AssignmentSubmissionsTable.vue
index 114f22c2d..755366b57 100644
--- a/frontend/src/components/dashboard/assignments/AssignmentSubmissionsTable.vue
+++ b/frontend/src/components/dashboard/assignments/AssignmentSubmissionsTable.vue
@@ -16,6 +16,8 @@
 import BasicTable from "@/basic/Table.vue";
 import AssignmentUploadModal from "@/components/dashboard/assignments/AssignmentUploadModal.vue";
 import ConfirmModal from "@/basic/modal/ConfirmModal.vue";
+import { dashboardRowAction } from "@/basic/dashboard/actions.js";
+import { withSearch } from "@/basic/dashboard/constants.js";
 import JSZip from "jszip";
 import FileSaver from "file-saver";
 
@@ -47,15 +49,7 @@ export default {
   },
   data() {
     return {
-      tableOptions: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        pagination: 10,
-        search: true,
-      },
+      tableOptions: withSearch(),
       columns: [
         { name: "ID", key: "id" },
         { name: "Submission Name", key: "name" },
@@ -122,75 +116,26 @@ export default {
         });
     },
     tableButtons() {
-      const buttons = [];
-
-      buttons.push(
-        {
-          icon: "download",
-          filter: [
-            {
-              key: "canDownload",
-              value: true,
-            },
-          ],
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-              "btn-sm": true,
-            },
-          },
+      return [
+        dashboardRowAction("download", {
+          filter: [{ key: "canDownload", value: true }],
           title: "Download submission files",
           action: "downloadSubmission",
-          stats: {
-            submissionId: "id",
-          },
-        },
-        {
-          icon: "arrow-repeat",
-          filter: [
-            {
-              key: "canReplaceDelete",
-              value: true,
-            },
-          ],
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-              "btn-sm": true,
-            },
-          },
+          stats: { submissionId: "id" },
+        }),
+        dashboardRowAction("replace", {
+          filter: [{ key: "canReplaceDelete", value: true }],
           title: "Replace submission",
           action: "replaceSubmission",
-          stats: {
-            submissionId: "id",
-          },
-        },
-        {
-          icon: "trash",
-          filter: [
-            {
-              key: "canReplaceDelete",
-              value: true,
-            },
-          ],
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-danger": true,
-              "btn-sm": true,
-            },
-          },
+          stats: { submissionId: "id" },
+        }),
+        dashboardRowAction("delete", {
+          filter: [{ key: "canReplaceDelete", value: true }],
           title: "Delete submission",
           action: "deleteSubmission",
-          stats: {
-            submissionId: "id",
-          },
-        }
-      );
-
-      return buttons;
+          stats: { submissionId: "id" },
+        }),
+      ];
     },
   },
   methods: {
diff --git a/frontend/src/components/dashboard/study/StudySessionTable.vue b/frontend/src/components/dashboard/study/StudySessionTable.vue
index 8c69aa78d..290b1fc19 100644
--- a/frontend/src/components/dashboard/study/StudySessionTable.vue
+++ b/frontend/src/components/dashboard/study/StudySessionTable.vue
@@ -14,6 +14,8 @@
 import BasicTable from "@/basic/Table.vue";
 import ConfirmModal from "@/basic/modal/ConfirmModal.vue";
 import AssignUserModal from "@/components/dashboard/study/AssignUserStudySessionModal.vue";
+import { dashboardRowAction } from "@/basic/dashboard/actions.js";
+import { DEFAULT_DASHBOARD_TABLE_OPTIONS } from "@/basic/dashboard/constants.js";
 
 /**
  * Table of study session with management buttons
@@ -51,14 +53,7 @@ export default {
   data() {
     return {
       showFinished: true,
-      tableOptions: {
-        striped: true,
-        hover: true,
-        bordered: false,
-        borderless: false,
-        small: false,
-        pagination: 10,
-      },
+      tableOptions: { ...DEFAULT_DASHBOARD_TABLE_OPTIONS },
     };
   },
   computed: {
@@ -119,110 +114,84 @@ export default {
       return columns;
     },
     buttons() {
-      const buttons = [
-        {
-          icon: "box-arrow-in-right",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-              "btn-sm": true,
-            },
+      const sm = { specifiers: { "btn-sm": true } };
+      const buttons = [];
+
+      if (this.currentUserOnly) {
+        buttons.push(dashboardRowAction("resume", {
+          options: sm,
+          filter: [{ key: "showResumeButton", value: true }],
+          title: "Resume session",
+          action: "openSession",
+          stats: {
+            studySessionId: "id",
           },
-          filter: this.currentUserOnly ? [{ key: "showResumeButton", value: true }] : [],
-          title: this.currentUserOnly ? "Resume session" : "Open session",
+        }));
+      } else {
+        buttons.push(dashboardRowAction("open", {
+          options: sm,
+          title: "Open session",
           action: "openSession",
-          stats:{
+          stats: {
             studySessionId: "id",
-          }
-        },
-        {
-          icon: "box-arrow-in-right",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-              "btn-sm": true,
-            },
           },
+        }));
+      }
+
+      buttons.push(
+        dashboardRowAction("start", {
+          options: sm,
           filter: [{ key: "showStartButton", value: true }],
           title: "Start session",
           action: "startStudySession",
-          stats:{
+          stats: {
             studySessionId: "id",
-          }
-        },
-        {
-          icon: "box-arrow-in-right",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-              "btn-sm": true,
-            },
           },
+        }),
+        dashboardRowAction("inspect", {
+          options: sm,
           filter: [{ key: "showInspectButton", value: true }],
           title: "Inspect session",
           action: "reviewSession",
-          stats:{
+          stats: {
             studySessionId: "id",
-          } 
-        }
-      ];
-      if (!this.currentUserOnly) {
-        buttons.push({
-          icon: "link-45deg",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-              "btn-sm": true,
-            },
           },
+        }),
+      );
+      if (!this.currentUserOnly) {
+        buttons.push(dashboardRowAction("link", {
+          options: sm,
           title: "Copy session link",
           action: "copyStudySessionLink",
-          stats:{
+          stats: {
             studySessionId: "id",
-          }
-        });
+          },
+        }));
       }
       buttons.push(
-        {
-          icon: "copy",
-          options: {
-            iconOnly: true,
-            specifiers: {
-              "btn-outline-secondary": true,
-              "btn-sm": true,
-            },
-          },
+        dashboardRowAction("copy", {
+          options: sm,
           title: "Copy session",
           action: "copySession",
-          stats:{
+          stats: {
             studySessionId: "id",
-          }     
-        },
-        {
-        icon: "trash",
-        options: {
-          iconOnly: true,
-          specifiers: {
-            "btn-outline-danger": true,
-            "btn-sm": true,
           },
-        },
-        filter: [
-          {
-            key: "showDeleteButton",
-            value: true,
-          },
-        ],
-        title: "Delete session",
-        action: "deleteStudySession",
-        stats:{
+        }),
+        dashboardRowAction("delete", {
+          options: sm,
+          filter: [
+            {
+              key: "showDeleteButton",
+              value: true,
+            },
+          ],
+          title: "Delete session",
+          action: "deleteStudySession",
+          stats: {
             studySessionId: "id",
-          }
-      });
+          },
+        }),
+      );
 
       return buttons;
     },