diff --git a/src/frontend/src/assets/main.css b/src/frontend/src/assets/main.css
index 5248b4ba5..add0cfab9 100644
--- a/src/frontend/src/assets/main.css
+++ b/src/frontend/src/assets/main.css
@@ -175,4 +175,9 @@ legend {
 .no-link-style a {
   color: inherit !important;
   text-decoration: none !important;
+}
+
+.font-mono {
+  font-family:  monospace,Courier, 'Courier New'; 
+  letter-spacing:.4px;
 }
\ No newline at end of file
diff --git a/src/frontend/src/components/AssignPluginsDropdown.vue b/src/frontend/src/components/AssignPluginsDropdown.vue
index e00fb45d9..14f866fe1 100644
--- a/src/frontend/src/components/AssignPluginsDropdown.vue
+++ b/src/frontend/src/components/AssignPluginsDropdown.vue
@@ -14,44 +14,81 @@
     @add="(added) => addPlugin(added.value)"
     @remove="(removed) => removePlugin(removed.value)"
   >
-    <template v-slot:before>
-      <div class="field-label">Plugins:</div>
-    </template>
+    <!-- Removed to reduce clutter -->
+    <!-- <template v-slot:before>
+      <div class="field-label">Attached Plugins:</div>
+    </template> -->
+
     <template v-slot:selected>
-      <div>
+      <div class="q-pa-xs full-width">
         <div
           v-for="(plugin, i) in selectedPlugins"
           :key="plugin.id"
-          :class="i > 0 ? 'q-mt-xs' : ''"
+          class="q-mt-sm"
+        >
+          <div
+            class="row items-center no-wrap q-pa-none shadow-1"
+            style="
+              border-radius: 4px;
+              border: 1px solid #eeeeee;
+              width: fit-content;
+              max-width: 100%;
+            "
           >
             <q-chip
               removable
-              color="secondary"
-              text-color="white"
-              class="q-ml-xs "
-              @remove="selectedPlugins.splice(i, 1); removePlugin(plugin)"
+              :color="$q.dark.isActive ? pluginStyle.darkColor : pluginStyle.color"
+              :icon="pluginStyle.icon"
+              size="sm"
+              outline
+              square
+              class="text-weight-bold q-py-sm q-ma-none no-border"
+              :class="$q.dark.isActive ? 'bg-grey-10' : 'bg-grey-1'"
+              @remove="
+                selectedPlugins.splice(i, 1);
+                removePlugin(plugin);
+              "
             >
-              {{ plugin.name }}
-              <q-badge
-                v-if="!plugin.latestSnapshot" 
-                color="red" 
-                label="outdated" 
-                rounded
-                class="q-ml-xs"
-              />
+              <span
+                class="font-mono ellipsis q-pr-md"
+                style="font-size: 12px; font-weight: 500"
+              >
+                {{ plugin.name }}
+              </span>
+
+              <q-tooltip>Plugin ID: {{ plugin.id }}</q-tooltip>
             </q-chip>
-            <q-btn
+
+            <div
               v-if="!plugin.latestSnapshot"
-              round 
-              color="red" 
-              icon="sync"
-              size="sm"
-              @click.stop="syncPlugin(plugin.id, i)"
+              class="row items-center no-wrap q-pr-sm"
             >
-              <q-tooltip>
-                Sync to latest version of plugin
-              </q-tooltip>
-            </q-btn>
+              <div
+                style="
+                  height: 14px;
+                  width: 1px;
+                  background-color: #eee;
+                  margin: 0 4px;
+                "
+              ></div>
+
+              <q-icon name="warning" color="orange" size="xs">
+                <q-tooltip>Plugin is out of date</q-tooltip>
+              </q-icon>
+
+              <q-btn
+                flat
+                round
+                size="xs"
+                color="red"
+                icon="sync"
+                class="q-ml-xs"
+                @click.stop="syncPlugin(plugin.id, i)"
+              >
+                <q-tooltip>Sync to latest version</q-tooltip>
+              </q-btn>
+            </div>
+          </div>
         </div>
       </div>
     </template>
@@ -59,58 +96,79 @@
 </template>
 
 <script setup>
-import { ref, watch } from 'vue'
-import * as api from '@/services/dataApi'
+import { ref, watch, computed } from "vue";
+import * as api from "@/services/dataApi";
+import { getConceptStyle } from "@/constants/tableStyles";
+import * as notify from "../notify";
 
-const selectedPlugins = defineModel('selectedPlugins')
-const originalSelectedPluginIds = ref([])
+const pluginStyle = computed(() => getConceptStyle("plugin"));
+const selectedPlugins = defineModel("selectedPlugins");
+const pluginIDsToUpdate = defineModel("pluginIDsToUpdate");
+const pluginIDsToRemove = defineModel("pluginIDsToRemove");
+const originalSelectedPluginIds = ref([]);
+const pluginOptions = ref([]);
+import { useQuasar } from "quasar";
 
-watch(selectedPlugins, (newVal) => {
-  originalSelectedPluginIds.value = newVal.map(p => p.id)
+const $q = useQuasar();
+watch(
+  selectedPlugins,
+  (newVal) => {
+    if (newVal?.length > 0) {
+      originalSelectedPluginIds.value = newVal.map((p) => p.id);
+    }
   },
   { once: true }
-)
+);
 
-const pluginIDsToUpdate = defineModel('pluginIDsToUpdate')
-const pluginIDsToRemove = defineModel('pluginIDsToRemove')
-
-const pluginOptions = ref([])
-
-async function getPlugins(val = '', update) {
+async function getPlugins(val = "", update) {
   update(async () => {
     try {
-      const res = await api.getData('plugins', {
+      const res = await api.getData("plugins", {
         search: val,
-        rowsPerPage: 0, // get all
-        index: 0
-      })
-      pluginOptions.value = res.data.data
-    } catch(err) {
-      notify.error(err.response.data.message)
-    } 
-  })
+        rowsPerPage: 0,
+        index: 0,
+      });
+      pluginOptions.value = res.data.data;
+    } catch (err) {
+      console.warn(err);
+      const msg = err.response?.data?.message || "Failed to load plugins";
+      notify.error(msg);
+    }
+  });
 }
 
 async function syncPlugin(pluginId, index) {
   try {
-    const res = await api.getItem('plugins', pluginId)
-    selectedPlugins.value.splice(index, 1, res.data)
-    pluginIDsToUpdate.value.push(pluginId)
-  } catch(err) {
-    console.warn(err)
+    const res = await api.getItem("plugins", pluginId);
+    selectedPlugins.value.splice(index, 1, res.data);
+    pluginIDsToUpdate.value.push(pluginId);
+  } catch (err) {
+    console.warn(err);
   }
 }
 
 function addPlugin(plugin) {
-  pluginIDsToUpdate.value.push(plugin.id)
-  pluginIDsToRemove.value = pluginIDsToRemove.value.filter((id) => id !== plugin.id)
+  pluginIDsToUpdate.value.push(plugin.id);
+  pluginIDsToRemove.value = pluginIDsToRemove.value.filter(
+    (id) => id !== plugin.id,
+  );
 }
 
 function removePlugin(plugin) {
-  if(originalSelectedPluginIds.value.includes(plugin.id)) {
-    pluginIDsToRemove.value.push(plugin.id)
+  if (originalSelectedPluginIds.value.includes(plugin.id)) {
+    pluginIDsToRemove.value.push(plugin.id);
   }
-  pluginIDsToUpdate.value = pluginIDsToUpdate.value.filter((id) => id !== plugin.id)
+  pluginIDsToUpdate.value = pluginIDsToUpdate.value.filter(
+    (id) => id !== plugin.id,
+  );
 }
+</script>
 
-</script>
\ No newline at end of file
+<style scoped>
+.field-label {
+  font-weight: 500;
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-right: 8px;
+}
+</style>
diff --git a/src/frontend/src/components/JobArtifactsTable.vue b/src/frontend/src/components/JobArtifactsTable.vue
index d9ed2e024..a5bb697bb 100644
--- a/src/frontend/src/components/JobArtifactsTable.vue
+++ b/src/frontend/src/components/JobArtifactsTable.vue
@@ -12,39 +12,28 @@
     :hideCreateBtn="true"
     :loading="isLoading"
   >
-    <template #body-cell-taskName="props">
-      {{ props.row.task.name }}
-    </template>
-    <template #body-cell-taskOutputParams="props">
-      <q-chip
-        v-for="param in props.row.task.outputParams"
-        color="purple"
-        text-color="white"
-        dense
-      >
-        {{ param.name }}: {{ param.parameterType.name }}
-      </q-chip>
-    </template>
     <template #body-cell-download="props">
       <q-btn
         :href="props.row.fileUrl"
         :download="`artifact-${props.row?.id}`"
         color="primary"
-        round
+        round dense flat
         icon="download"
-        size="sm"
+        size="md"
         @click.stop
-      />
+      >
+        <q-tooltip>Download Artifact</q-tooltip>
+      </q-btn>
     </template>
   </TableComponent>
 </template>
 
 <script setup>
-import TableComponent from '@/components/TableComponent.vue'
 import { ref, onMounted } from 'vue'
-import * as api from '@/services/dataApi'
 import { useRouter, useRoute } from 'vue-router'
+import * as api from '@/services/dataApi'
 import * as notify from '../notify'
+import TableComponent from '@/components/table/TableComponent.vue'
 
 const openWindow = window
 const router = useRouter()
@@ -52,14 +41,78 @@ const route = useRoute()
 
 const props = defineProps(['artifactIds'])
 const selected = ref([])
+const artifacts = ref([])
+const isLoading = ref(false)
+
+const columns = [
+  { 
+    name: 'id', 
+    label: 'Artifact ID', 
+    field: 'id', 
+    align: 'left', 
+    styleType: 'icon-badge', 
+    conceptType: 'artifact',
+    includeIcon: true,
+    size: 'md',
+    uppercase: false,
+    formatLabel: 'Artifact #{label}',
+    clickable: true,
+    field: (row) => {
+      if (!row.task) return "-";
+      return {
+        name: row.id,
+        to: `/artifacts/${row.id}` 
+      };
+    },
+  },
+  { 
+    name: 'description', 
+    label: 'Description', 
+    field: 'description', 
+    align: 'left', 
+    styleType: 'long-text',
+    maxWidth: '250px' 
+  },
+  { 
+    name: 'taskName', 
+    label: 'Task Name', 
+    align: 'left',
+    styleType: 'icon-badge',
+    conceptType: 'task',
+    chipType: 'outline',
+    uppercase: false,
+    field: (row) => {
+      if (!row.task) return "-";
+      return {
+        name: row.task.name,
+        to: `/plugins/${row.task.pluginResourceId}/files/${row.task.pluginFileResourceId}` 
+      };
+    },
+  },
+  { 
+    name: 'taskOutputParams', 
+    label: 'Task Output Params', 
+    // Pass the array directly to the component
+    field: row => row.task?.outputParams || [], 
+    align: 'left',
+    styleType: 'parameter-list',
+    parameterType: 'output',
+    style: 'min-width: 250px'
+  },
+  { 
+    name: 'download', 
+    label: 'Download', 
+    align: 'center',
+    headerStyle: 'width: 50px'
+  },
+]
 
 onMounted(() => {
-  getArtifacts()
+  if (props.artifactIds && props.artifactIds.length) {
+    getArtifacts()
+  }
 })
 
-const artifacts = ref([])
-const isLoading = ref(false)
-
 async function getArtifacts() {
   isLoading.value = true
   const minLoadTimePromise = new Promise(resolve => setTimeout(resolve, 300))
@@ -85,11 +138,4 @@ async function getArtifacts() {
 }
 
 
-const columns = [
-  { name: 'id', label: 'ID', field: 'id', align: 'left', sortable: true },
-  { name: 'description', label: 'Description', field: 'description', align: 'left', sortable: true },
-  { name: 'taskName', label: 'Task Name', align: 'left' },
-  { name: 'taskOutputParams', label: 'Task Output Params', align: 'left' },
-  { name: 'download', label: 'Download', align: 'center' },
-]
 </script>
\ No newline at end of file
diff --git a/src/frontend/src/components/JobStatus.vue b/src/frontend/src/components/JobStatus.vue
index 93d0642d8..5ee4d7845 100644
--- a/src/frontend/src/components/JobStatus.vue
+++ b/src/frontend/src/components/JobStatus.vue
@@ -3,9 +3,9 @@
     v-if="statusStyles[status]"
     :label="status"
     :icon-right="statusStyles[status].icon"
-    :color="statusStyles[status].color"
-    :text-color="statusStyles[status].textColor"
-    class="text-capitalize q-my-none"
+    :color="$q.dark.isActive ? statusStyles[status].colorDark : statusStyles[status].color"
+    :text-color="$q.dark.isActive ? statusStyles[status].textColorDark : statusStyles[status].textColor"
+    class="text-capitalize q-my-none q-mx-none"
     :ripple="false"
     :style="statusStyles[status].style"
     style="cursor: default; margin-top: -4px; margin-bottom: -3px;"
@@ -21,22 +21,30 @@ const statusStyles = {
       icon: "sym_o_check_circle",
       color: "green-2",
       textColor: "green-10",
+      colorDark: "green-9",
+      textColorDark: "green-2"
     },
     queued: {
       icon: "sym_o_hourglass",
       color: "yellow-2",
       textColor: "grey-9",
+      colorDark: "yellow-10",
+      textColorDark: "yellow-2",
       style: "min-width: 99px;"
     },
     started: {
       icon: "sym_o_play_circle",
       color: "blue-5",
       textColor: 'white',
+      colorDark: "blue-8",
+      textColorDark: "grey-2"
     },
     failed: {
       icon: "sym_o_error",
       color: "red-2",
       textColor: "grey-9",
+      colorDark: "red-9",
+      textColorDark: "red-2",
       style: "min-width: 99px;"
     }
   }
diff --git a/src/frontend/src/components/KeyValueTable.vue b/src/frontend/src/components/KeyValueTable.vue
index 2e9d11b97..84988f2f1 100644
--- a/src/frontend/src/components/KeyValueTable.vue
+++ b/src/frontend/src/components/KeyValueTable.vue
@@ -1,18 +1,33 @@
 <template>
-  <table 
-    class="text-left"
-    :class="{ 'no-pointer': disabled }"
-  >
-    <tr v-for="(row, index) in rows" :key="index" :class="{ 'disabled': disabled }">
-      <td class="text-bold" :style="{ 'min-width': firstColumnMinWidth }">{{ row.label }}</td>
-      <td :style="secondColumnFullWidth ? { width: '100%' } : {}">
-        <!-- Render as plain text OR use a custom slot -->
-        <slot :name="row.slot" v-bind="row.props">
-          {{ row.value }}
-        </slot>
-      </td>
-    </tr>
-  </table>
+  <q-markup-table flat bordered separator="cell" class="text-left" style="width: fit-content; max-width: 100%;">
+    <tbody>
+      <tr
+        v-for="(row, index) in rows"
+        :key="index"
+        :class="{ disabled: disabled }"
+      >
+        <td
+          class="text-weight-bold"
+          :class="
+            $q.dark.isActive ? 'bg-blue-grey-10 text-grey-4' : 'bg-grey-2 text-grey-9'
+          "
+          :style="{ minWidth: firstColumnMinWidth, width: firstColumnMinWidth }"
+        >
+          {{ row.label }}
+        </td>
+
+        <td
+          :style="
+            secondColumnFullWidth ? { width: '100%' } : { minWidth: '20vw' }
+          "
+        >
+          <slot :name="row.slot" v-bind="row.props">
+            {{ row.value }}
+          </slot>
+        </td>
+      </tr>
+    </tbody>
+  </q-markup-table>
 </template>
 
 <script setup>
@@ -33,10 +48,12 @@ defineProps({
     type: Boolean,
     default: false
   }
-})
+});
+
 </script>
 
 <style scoped>
+
   table {
     border-collapse: collapse;
   }
@@ -49,10 +66,7 @@ defineProps({
     padding: 10px;
   }
 
-  td:nth-child(2) {
-    min-width: 20vw;
-  }
-
+ 
   .body--dark td:first-child {
     background-color: rgb(31, 39, 45);
     color: rgb(146, 164, 179);
@@ -69,4 +83,14 @@ defineProps({
   .disabled {
     pointer-events: none;
   }
+
+.disabled {
+  pointer-events: none;
+  opacity: 0.6;
+}
+
+ td:nth-child(2) {
+    min-width: 20vw;
+  }
+
 </style>
\ No newline at end of file
diff --git a/src/frontend/src/components/PageTitle.vue b/src/frontend/src/components/PageTitle.vue
index bf5712a69..3889fcfab 100644
--- a/src/frontend/src/components/PageTitle.vue
+++ b/src/frontend/src/components/PageTitle.vue
@@ -1,86 +1,214 @@
 <template>
-  <div>
-    <div class="row items-baseline q-mb-sm">
-      <h1 class="q-mb-none">
-        {{ title }}
-      </h1>
-      <q-badge
-        v-if="props.draftLabel"
-        :label="draftLabel"
-        outline
-        color="primary"
-        class="q-ml-md"
-        :class="darkMode ? 'text-white' : ''"
-      />
-    </div>
-    <nav aria-label="Breadcrumb" style="font-size: 1.2em;">
-      <q-breadcrumbs class="text-grey">
-        <template v-slot:separator>
-          <q-icon
-            name="arrow_forward"
+  <div class="row q-mb-lg">
+    <div class="page-title-card q-pa-md" :style="cardStyles">
+      <div v-if="subtitle" class="column q-mb-xs">
+        <div
+          class="row items-center q-gutter-x-xs text-uppercase text-weight-bold resource-link cursor-pointer"
+          :style="{
+            color: hexColor,
+            fontSize: '0.85rem',
+            letterSpacing: '1.5px',
+          }"
+          @click="navigateBack"
+        >
+          <q-icon :name="styles.icon" size="16px" />
+          <span>{{ conceptType || path[0] || "Resource" }}</span>
+          <q-icon name="arrow_outward" size="12px" style="opacity: 0.7" />
+        </div>
+
+        <div class="row items-baseline q-mt-sm">
+          <h1
+            class="text-h4 q-my-none text-weight-medium subtitle-header"
+            :style="subtitleDecoration"
+            :class="darkMode ? 'text-grey-5' : 'text-grey-8'"
+          >
+            {{ subtitle }}
+          </h1>
+
+          <q-badge
+            v-if="props.draftLabel"
+            :label="draftLabel"
+            outline
+            :style="{ color: hexColor, borderColor: hexColor }"
+            class="q-ml-md self-center"
+          />
+        </div>
+      </div>
+
+      <div v-else class="column">
+        <div class="row items-center q-gutter-x-md q-mb-sm">
+          <q-avatar
+            :style="{
+              backgroundColor: hexColor,
+              boxShadow: `0 4px 12px ${hexColor}66`,
+            }"
+            text-color="white"
+            size="52px"
+            font-size="28px"
+          >
+            <q-icon :name="styles.icon" size="lg"  :color="$q.dark.isActive ? 'grey-3' : 'grey-2'" />
+          </q-avatar>
+
+          <div class="row items-center">
+            <h1
+              class="text-h3 q-my-none text-weight-bolder"
+              style="line-height: 1"
+              :class="darkMode ? 'text-white' : 'text-dark'"
+            >
+              {{ title }}
+            </h1>
+
+            <q-badge
+              v-if="props.draftLabel"
+              :label="draftLabel"
+              outline
+              color="primary"
+              class="q-ml-md"
+              :class="darkMode ? 'text-white' : ''"
+            />
+          </div>
+        </div>
+        <div v-if="caption" class="q-mt-xs" :class="darkMode ? 'text-grey-5' : 'text-grey-8'">
+          {{ caption }}
+        </div>
+      </div>
+
+      <nav aria-label="Breadcrumb" class="q-mt-md">
+        <q-breadcrumbs :class="darkMode ? 'text-grey-4' : 'text-grey-9'" style="font-size: 0.95em">
+          <template v-slot:separator>
+            <q-icon name="chevron_right" size="1.4em" color="grey-4" />
+          </template>
+
+          <q-breadcrumbs-el label="Home" icon="home" to="/" />
+
+          <q-breadcrumbs-el
+            :label="path[0] === 'pluginParams' ? 'Plugin Parameters' : path[0]"
+            :to="path[1] ? `/${path[0]}` : ''"
+            :aria-current="`${path.length === 1 ? 'true' : 'false'}`"
+            class="text-capitalize"
+          />
+
+          <q-breadcrumbs-el
+            v-if="route.name === 'pluginFile'"
+            :label="`${objName}`"
+            :to="`/plugins/${route.params.id}`"
           />
-        </template>
-        <q-breadcrumbs-el label="Home" icon="home" to="/" />
-        <q-breadcrumbs-el 
-          :label="path[0] === 'pluginParams' ? 'Plugin Parameters' : path[0]" 
-          :to="path[1] ? `/${path[0]}` : ''" 
-          :aria-current="`${path.length === 1 ? 'true' : 'false'}`"
-          class="text-capitalize"
-        />
-        <q-breadcrumbs-el
-          v-if="route.name === 'pluginFile'"
-          :label="`${objName}`"
-          :to="`/plugins/${route.params.id}`"
-        />
-        <q-breadcrumbs-el
-          v-if="route.name === 'createExperimentJob'"
-          :label="`${objName}`"
-          :to="`/experiments/${route.params.id}`"
-        />
-        <q-breadcrumbs-el
-          v-if="path[1]"
-          :label="title"
-          aria-disabled="true"
-          aria-current="page"
-        />
-      </q-breadcrumbs>
-    </nav>
+
+          <q-breadcrumbs-el
+            v-if="route.name === 'createExperimentJob'"
+            :label="`${objName}`"
+            :to="`/experiments/${route.params.id}`"
+          />
+
+          <q-breadcrumbs-el
+            v-if="path[1]"
+            :label="subtitle || title"
+            aria-disabled="true"
+            aria-current="page"
+            class="text-weight-medium text-primary"
+          />
+        </q-breadcrumbs>
+      </nav>
+    </div>
   </div>
 </template>
 
 <script setup>
-  import { useRoute } from 'vue-router'
-  import { ref, computed, inject } from 'vue'
-  import * as api from '@/services/dataApi'
+import { ref, computed, inject } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import * as api from "@/services/dataApi";
+import { getConceptStyle, getConceptColorHex } from "@/constants/tableStyles";
+import { useQuasar } from "quasar";
 
-  const props = defineProps(['title', 'draftLabel'])
+const $q = useQuasar();
+const props = defineProps({
+  title: String,
+  draftLabel: String,
+  subtitle: String,
+  caption: String,
+  conceptType: String,
+});
 
-  const darkMode = inject('darkMode')
+const darkMode = inject("darkMode");
+const route = useRoute();
+const router = useRouter();
 
-  const route = useRoute()
+const styles = computed(() => {
+  return (
+    getConceptStyle(props.conceptType) || { color: "grey-8", icon: "layers" }
+  );
+});
 
-  const path = computed(() => {
-    return route.path.split('/').slice(1)
-  })
+const hexColor = computed(() => {
+  return getConceptColorHex(props.conceptType, darkMode.value);
+});
 
 
-  const objName = ref('')
+const cardStyles = computed(() => ({
+  borderRadius: "10px",
+  minWidth: "400px",
+  width: "fit-content",
+  backgroundColor: darkMode.value ? "#1d1d1d" : "white",
+  boxShadow: `0 4px 175px -20px ${hexColor.value}80`,
+  backgroundColor: `${hexColor.value}10`,
+}));
 
-  if(route.name === 'pluginFile') {
-    getName('plugins')
-  }
-  if(route.name === 'createExperimentJob') {
-    getName('experiments')
+const subtitleDecoration = computed(() => ({
+  textDecoration: "underline",
+  textDecorationColor: hexColor.value,
+  textDecorationThickness: "3px",
+  textUnderlineOffset: "16px",
+  textDecorationSkipInk: "none",
+}));
+
+// --- Navigation ---
+function navigateBack() {
+  if (path.value[0]) {
+    router.push(`/${path.value[0]}`);
+  } else {
+    router.back();
   }
+}
+
+// --- Path Logic ---
+const path = computed(() => {
+  return route.path.split("/").slice(1);
+});
+
+// --- API Fetch Logic ---
+const objName = ref("");
 
-  async function getName(type) {
-    try {
-      const res = await api.getItem(type, route.params.id)
-      objName.value = res.data.name
-    } catch(err) {
-      console.log(err)
-    } 
+if (route.name === "pluginFile") {
+  getName("plugins");
+}
+if (route.name === "createExperimentJob") {
+  getName("experiments");
+}
+
+async function getName(type) {
+  try {
+    const res = await api.getItem(type, route.params.id);
+    objName.value = res.data.name;
+  } catch (err) {
+    console.log(err);
   }
+}
+</script>
+
+<style scoped>
+.page-title-card {
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
+}
 
+.resource-link {
+  opacity: 0.85;
+  transition: all 0.2s ease-in-out;
+}
 
-</script>
\ No newline at end of file
+.resource-link:hover {
+  opacity: 1;
+  transform: translateX(2px);
+}
+</style>
diff --git a/src/frontend/src/components/ResourcePicker.vue b/src/frontend/src/components/ResourcePicker.vue
new file mode 100644
index 000000000..b2a7471f1
--- /dev/null
+++ b/src/frontend/src/components/ResourcePicker.vue
@@ -0,0 +1,128 @@
+<template>
+  <q-select
+    outlined
+    dense
+    v-bind="$attrs"
+    :model-value="modelValue"
+    @update:model-value="(val) => $emit('update:model-value', val)"
+    use-input
+    use-chips
+    multiple
+    map-options
+    emit-value
+    :label="label"
+  >
+    <template v-slot:selected-item="scope">
+      <q-chip
+        removable
+        @remove="scope.removeAtIndex(scope.index)"
+        :tabindex="scope.tabindex"
+        :square="chipSquare"
+        :style="getChipStyles"
+        :class="getChipClasses"
+      >
+        <q-icon
+          :name="styles.icon"
+          size="xs"
+          :style="{ color: chipOutline ? computedColor : 'white' }"
+          class="q-mr-sm"
+        />
+
+        <span class="q-mr-xs ellipsis" style="letter-spacing: 0.5px">
+          {{ scope.opt[optionLabel] }}
+        </span>
+      </q-chip>
+    </template>
+
+    <template v-slot:option="scope">
+      <q-item v-bind="scope.itemProps">
+        <q-item-section avatar>
+          <q-icon :name="styles.icon" :style="{ color: computedColor }" />
+        </q-item-section>
+        <q-item-section>
+          <q-item-label>{{ scope.opt[optionLabel] }}</q-item-label>
+          <q-item-label caption v-if="scope.opt.description">
+            {{ truncate(scope.opt.description) }} 
+          </q-item-label>
+        </q-item-section>
+      </q-item>
+    </template>
+
+    <template v-for="(_, slot) in $slots" v-slot:[slot]="scope">
+      <slot :name="slot" v-bind="scope || {}" />
+    </template>
+  </q-select>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { getConceptStyle, getConceptColorHex } from "@/constants/tableStyles";
+import { useQuasar } from "quasar";
+
+const props = defineProps({
+  modelValue: [Array, Object, String, Number],
+  type: { type: String, required: true },
+  label: String,
+  optionLabel: { type: String, default: "name" },
+  chipOutline: { type: Boolean, default: false },
+  chipSquare: { type: Boolean, default: false },
+  color: { type: String, default: null },
+});
+
+defineEmits(["update:model-value"]);
+
+const $q = useQuasar();
+const styles = computed(() => getConceptStyle(props.type));
+
+const computedColor = computed(() => {
+  if (props.color) return props.color;
+  const isDark = $q.dark.isActive;
+  return getConceptColorHex(props.type, isDark);
+});
+
+const computedColorOpposite = computed(() => {
+  if (props.color) return props.color;
+  const isLight =  $q.dark.isActive;
+  return getConceptColorHex(props.type, isLight);
+});
+
+// Manage purely dynamic styles (borders, custom background colors)
+const getChipStyles = computed(() => {
+  if (props.chipOutline) {
+    return {
+      border: `1px solid ${computedColor.value}`
+    };
+  } else { 
+    if ($q.dark.isActive){
+      return {
+        backgroundColor: computedColor.value,
+        color: 'black', 
+        border: "none"
+      };
+    }
+    else {
+      return {
+        backgroundColor: computedColorOpposite.value,
+        color: 'white', 
+        border: "none"
+      };
+    }
+  }
+});
+
+// Manage Quasar utility classes (theme-aware backgrounds and text)
+const getChipClasses = computed(() => {
+  if (props.chipOutline) {
+    // Provides a subtle background and guarantees high-contrast text + remove icon
+    return $q.dark.isActive 
+      ? 'bg-grey-10 text-grey-3' 
+      : 'bg-grey-2 text-grey-9';
+  }
+  return ''; // Solid mode classes aren't needed; it relies on getChipStyles
+});
+
+function truncate(str) {
+  if (!str) return "";
+  return str.length > 50 ? str.slice(0, 50) + "..." : str;
+}
+</script>
\ No newline at end of file
diff --git a/src/frontend/src/components/SnapshotList.vue b/src/frontend/src/components/SnapshotList.vue
index d5d02f0b1..4a8395b14 100644
--- a/src/frontend/src/components/SnapshotList.vue
+++ b/src/frontend/src/components/SnapshotList.vue
@@ -8,10 +8,11 @@
     :hideSearch="true"
     rowKey="snapshot"
     :showAll="true"
-    :style="{ 
-      marginTop: '0', 
+    :style="{
+      marginTop: '0',
       maxHeight: props.maxHeight ? props.maxHeight + 'px' : '',
-      height: props.maxHeight ? '' : 'calc(100vh - 50px)'
+      height: props.maxHeight ? '' : 'calc(100vh - 50px)',
+      opacity: '1',
     }"
     :hideOpenBtn="true"
     :hideDeleteBtn="true"
@@ -19,13 +20,13 @@
     <template #body-cell-timestamp="props">
       <div :data-snapshot-id="props.row.snapshot">
         {{
-          new Intl.DateTimeFormat('en-US', { 
-            year: '2-digit', 
-            month: '2-digit', 
-            day: '2-digit', 
-            hour: 'numeric', 
-            minute: 'numeric', 
-            hour12: true 
+          new Intl.DateTimeFormat("en-US", {
+            year: "2-digit",
+            month: "2-digit",
+            day: "2-digit",
+            hour: "numeric",
+            minute: "numeric",
+            hour12: true,
           }).format(new Date(props.row.snapshotCreatedOn))
         }}
         <q-chip
@@ -42,95 +43,107 @@
 </template>
 
 <script setup>
-import { useLoginStore } from '@/stores/LoginStore'
-import { useRoute, useRouter } from 'vue-router'
-import TableComponent from '@/components/TableComponent.vue'
-import { ref, watch, nextTick } from 'vue'
-import * as api from '@/services/dataApi'
+import { useLoginStore } from "@/stores/LoginStore";
+import { useRoute, useRouter } from "vue-router";
+import TableComponent from '@/components/table/TableComponent.vue'
+//import TableComponent from "@/components/TableComponentOld.vue";
+import { ref, watch, nextTick } from "vue";
+import * as api from "@/services/dataApi";
 
-const props = defineProps(['showDialogHistory', 'type', 'id', 'maxHeight'])
+const props = defineProps(["showDialogHistory", "type", "id", "maxHeight"]);
 
-const store = useLoginStore()
-const route = useRoute()
-const router = useRouter()
+const store = useLoginStore();
+const route = useRoute();
+const router = useRouter();
 
-const snapshots = ref([])
-const selected = ref([])
+const snapshots = ref([]);
+const selected = ref([]);
 
 async function getSnapshots() {
   try {
-    const res = await api.getSnapshots(route.meta.type, route.params.id)
-    snapshots.value = res.data.data.reverse()
-    if(res.data.data.length > 0) {
-      if(route.query.snapshotId) {
+    const res = await api.getSnapshots(route.meta.type, route.params.id);
+    snapshots.value = res.data.data.reverse();
+    if (res.data.data.length > 0) {
+      if (route.query.snapshotId) {
         // if snapshotId is provided in url, auto select it
         let index = res.data.data.findIndex(
-          obj => obj.snapshot === Number(route.query.snapshotId)
-        )
-        selected.value = [snapshots.value[index]]
+          (obj) => obj.snapshot === Number(route.query.snapshotId),
+        );
+        selected.value = [snapshots.value[index]];
       } else {
         // else auto select the latest snapshot
-        selected.value = [snapshots.value[0]]
+        selected.value = [snapshots.value[0]];
       }
       // scroll to selected snapshot if needed
-      await nextTick()
+      await nextTick();
       const el = document.querySelector(
-        `[data-snapshot-id="${selected.value[0]?.snapshot}"]`
-      )
-      el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
+        `[data-snapshot-id="${selected.value[0]?.snapshot}"]`,
+      );
+      el?.scrollIntoView({ behavior: "smooth", block: "center" });
     }
-    console.log('snapshots = ', snapshots.value)
-  } catch(err) {
-    console.warn(err)
+    console.log("snapshots = ", snapshots.value);
+  } catch (err) {
+    console.warn(err);
   }
 }
 
 async function getDialogSnapshots() {
   try {
-    const res = await api.getSnapshots(props.type, props.id)
-    snapshots.value = res.data.data.reverse()
-    if(res.data.data.length > 0) {
+    const res = await api.getSnapshots(props.type, props.id);
+    snapshots.value = res.data.data.reverse();
+    if (res.data.data.length > 0) {
       // when viewing history, auto select first (latest) row
-      selected.value = [snapshots.value[0]]
+      selected.value = [snapshots.value[0]];
     }
-    console.log('snapshots = ', snapshots.value)
-  } catch(err) {
-    console.warn(err)
+    console.log("snapshots = ", snapshots.value);
+  } catch (err) {
+    console.warn(err);
   }
 }
 
-watch(() => store.showRightDrawer, (drawerOpen) => {
-  if(drawerOpen) {
-    getSnapshots()
-  } else {
-    store.selectedSnapshot = null
-    history.replaceState({}, null, route.path)
-  }
-})
+watch(
+  () => store.showRightDrawer,
+  (drawerOpen) => {
+    if (drawerOpen) {
+      getSnapshots();
+    } else {
+      store.selectedSnapshot = null;
+      history.replaceState({}, null, route.path);
+    }
+  },
+);
 
-watch(() => props.showDialogHistory, (history) => {
-  if(history) {
-    getDialogSnapshots()
-  } else {
-    store.selectedSnapshot = null
-  }
-})
+watch(
+  () => props.showDialogHistory,
+  (history) => {
+    if (history) {
+      getDialogSnapshots();
+    } else {
+      store.selectedSnapshot = null;
+    }
+  },
+);
 
 watch(selected, (newVal) => {
-  if(newVal.length > 0) {
-    store.selectedSnapshot = newVal[0]
+  if (newVal.length > 0) {
+    store.selectedSnapshot = newVal[0];
     history.replaceState(
       {},
       null,
-      route.path + '?snapshotId=' + encodeURIComponent(selected.value[0].snapshot)
-    )
+      route.path +
+        "?snapshotId=" +
+        encodeURIComponent(selected.value[0].snapshot),
+    );
   }
-})
+});
 
 const columns = [
-  { name: 'timestamp', label: 'Created On', align: 'left', field: 'snapshotCreatedOn', sortable: true, },
-]
-
-
-
-</script>
\ No newline at end of file
+  {
+    name: "timestamp",
+    label: "Created On",
+    align: "left",
+    field: "snapshotCreatedOn",
+    sortable: true,
+  },
+];
+</script>
diff --git a/src/frontend/src/components/TableComponent.vue b/src/frontend/src/components/TableComponent.vue
deleted file mode 100644
index 4d506cc90..000000000
--- a/src/frontend/src/components/TableComponent.vue
+++ /dev/null
@@ -1,451 +0,0 @@
-<template>
-  <q-table
-    ref="tableRef"
-    :rows="props.rows"
-    :columns="finalColumns"
-    :title="title"
-    :filter="filter"
-    :selection="selection"
-    v-model:selected="selected"
-    :row-key="props.rowKey"
-    :class="'q-mt-lg'"
-    flat
-    bordered
-    dense
-    v-model:pagination="pagination"
-    @request="onRequest"
-    :tabindex="props.disableSelect ? '' : '0'"
-    @keydown="keydown"
-    :rows-per-page-options="props.showAll ? [0] : [5,10,15,20,25,50,0]"
-    :hideBottom="props.hideBottom && rows.length > 0"
-  >
-    <template v-slot:header="props">
-      <q-tr :props="props">
-        <q-th v-for="col in props.cols" :key="col.name" :props="props">
-          {{ col.label }}
-        </q-th>
-      </q-tr>
-    </template> 
-    <template v-slot:body="props">
-      <!-- props.row[field] - field needs to be unique ID, pass this in as a prop, or just use id -->
-      <q-tr 
-        :class="`${getSelectedColor(props.selected)} cursor-pointer ${highlightRow(props)} ${disableRow(props)}` " 
-        :props="props"
-        @click="openResource(props, $event); selectResource(props)"
-        @auxclick="onAuxClick(props, $event)"
-      >
-        <q-td v-for="col in props.cols" :key="col.name" :props="props" :style="props.expand ? {'border-bottom': 'none'} : {}">
-          <q-menu
-            v-if="selection !== 'multiple'"
-            context-menu
-            @show="props.selected = true"
-          >
-            <q-list dense>
-              <q-item clickable v-close-popup @click="openResource(props)">
-                <q-item-section>Open</q-item-section>
-              </q-item>
-              <q-item clickable v-close-popup @click="openResource(props, null, true)">
-                <q-item-section>Open In New Tab</q-item-section>
-              </q-item>
-            </q-list>
-          </q-menu>
-          <slot v-bind="props" :name="`body-cell-${col.name}`">
-            <div v-if="typeof(col.value) === 'boolean'" class="text-body1">
-              {{ col.value ? '✅' : 	'❌'}}
-            </div>
-            <div v-else-if="col.name === 'id'">
-              <span class="link">{{ props.row.id }}</span>
-              <q-icon
-                name="open_in_new"
-                size="sm"
-                class="q-ml-sm"
-                @click.stop="openResource(props, $event, true)"
-              >
-                <q-tooltip>
-                  Open In New Tab
-                </q-tooltip>
-              </q-icon>
-            </div>
-            <div v-else-if="col.name === 'name'">
-              {{ truncateString(props.row.name, 20) }}
-              <q-tooltip v-if="props.row.name.length >= 20" max-width="30vw" style="overflow-wrap: break-word">
-                {{ props.row.name }}
-              </q-tooltip>
-            </div>
-            <div v-else-if="col.name === 'description'">
-              {{ truncateString(props.row.description, 40) }}
-              <q-tooltip v-if="props.row.description?.length >= 40" max-width="30vw" style="overflow-wrap: break-word">
-                {{ props.row.description }}
-              </q-tooltip>
-            </div>
-            <div v-else-if="col.name === 'tags'">
-              <q-chip
-                v-for="(tag, i) in props.row.tags"
-                :key="i"
-                color="primary" 
-                text-color="white"
-                clickable
-                @click.stop
-                class="q-my-none"
-              >
-                {{ tag.name.length <= 18 ? tag.name : tag.name.replace(/(.{17})..+/, "$1…") }}
-                <q-tooltip v-if="tag.name.length > 18" max-width="30vw" style="overflow-wrap: break-word">
-                  {{ tag.name }}
-                </q-tooltip>
-              </q-chip>
-              <q-btn
-                round
-                size="xs"
-                icon="add"
-                @click.stop="$emit('editTags', props.row)"
-                color="grey-5"
-                text-color="black"
-                class="q-ml-xs"
-              />
-            </div>
-            <div v-else-if="col.name === 'createdOn' || col.name === 'created_on' || col.name === 'lastModifiedOn'">
-              {{ formatDate(col.value) }}
-            </div>
-            <div v-else-if="!Array.isArray(col.value)">
-              <!-- if value is an array, then render it with a custom slot -->
-              {{ col.value }}
-            </div>
-            <q-btn
-              v-if="col.name === 'delete'"
-              round
-              color="negative"
-              icon="sym_o_delete"
-              size="sm"
-              @click.stop="deleteResource(props)"
-            />
-            <q-btn 
-              v-if="col.name === 'expand'" 
-              size="md" flat dense round  
-              @click.stop="props.expand = !props.expand" 
-              :icon="props.expand ? 'expand_less' : 'expand_more'" 
-            />
-          </slot>
-        </q-td>
-      </q-tr>
-      <q-tr v-show="props.expand" :props="props" :class="`${highlightRow(props)}`">
-        <q-td colspan="100%">
-          <!-- <div class="text-left ">Additional info for {{ props.row.name }}.</div> -->
-          <slot name="expandedSlot" :row="props.row" :rowProps="props" />
-        </q-td>
-      </q-tr>
-    </template>
-
-    <template #top-right>
-      <slot name="jobLogSlot" />
-      <q-btn
-        v-if="!hideCreateBtn" 
-        color="primary" 
-        icon="add" 
-        label="Create" 
-        class="q-mr-lg" 
-        @click="$emit('create')"
-      />
-      <q-input 
-        v-if="!hideSearch" 
-        v-model="filter" 
-        debounce="300" 
-        dense 
-        placeholder="Search" 
-        outlined
-      >
-        <template #append>
-          <q-icon name="search" />
-        </template>
-      </q-input>
-      <caption v-if="props.rightCaption" class="text-caption">
-        {{ props.rightCaption }}
-      </caption>
-    </template>
-    <template #top-left v-if="showToggleDraft">
-      <q-btn-toggle
-        v-model="showDrafts"
-        toggle-color="primary"
-        push
-        style="box-shadow: 0 0 0 0.5px grey"
-        :options="[
-          {label: title, value: false},
-          {label: 'Drafts', value: true},
-        ]"
-        @click="refreshTable"
-      />
-    </template>
-  </q-table>
-</template>
-
-<script setup>
-  import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
-  import { useQuasar } from 'quasar'
-  import * as notify from '../notify'
-
-  const props = defineProps({
-  columns: Array,
-  rows: Array,
-  title: String,
-  showExpand: Boolean,
-  hideCreateBtn: Boolean,
-  showToggleDraft: Boolean,
-  hideSearch: Boolean,
-  disableSelect: Boolean,
-  hideOpenBtn: Boolean,
-  hideDeleteBtn: Boolean,
-  hideBottom: Boolean,
-  rightCaption: String,
-  showAll: Boolean,
-  highlightRow: Boolean,
-  selection: String,
-  disabledRowKeys: {
-    type: Array,
-    default: []
-  },
-  rowKey: {
-    type: String,
-    default: 'id'
-  },
-})
-  const emit = defineEmits([
-    'open', 
-    'delete', 
-    'request', 
-    'expand', 
-    'editTags', 
-    'create'
-  ])
-
-  const selection =  computed(() => {
-    if(props.disableSelect) return 'none'
-    if(props.selection === 'multiple') return 'multiple'
-    return 'single'
-  })
-
-  const finalColumns = computed(() => {
-    let defaultColumns = [ ...props.columns ]
-    // if(!props.hideOpenBtn) {
-    //   defaultColumns.push({ name: 'open', align: 'center', sortable: false, label: 'Open', headerStyle: 'width: 50px' })
-    // }
-    if(!props.hideDeleteBtn) {
-      defaultColumns.push({ name: 'delete', align: 'center', sortable: false, label: 'Delete', headerStyle: 'width: 50px' })
-    }
-    if(props.showExpand) {
-      defaultColumns.push({ name: 'expand', align: 'center', sortable: false, label: 'Expand', headerStyle: 'width: 50px' })
-    }
-    if(showDrafts.value) {
-      defaultColumns = defaultColumns.map(column => ({
-        ...column,
-        sortable: false
-      }))
-    }
-    return defaultColumns
-  })
-
-  const $q = useQuasar()
-
-  const darkMode = computed(() => {
-    if($q.dark.mode === 'auto') {
-      return window.matchMedia('(prefers-color-scheme: dark)').matches
-    }
-    return $q.dark.mode
-  })
-
-  const filter = ref('')
-  const selected = defineModel('selected')
-  //const showDrafts = ref(false)
-  const showDrafts = defineModel('showDrafts')
-
-  function selectResource(tableProps) {
-    if(props.disableSelect || props.selection !== 'multiple') return
-    else tableProps.selected = !tableProps.selected
-  }
-
-  function openResource(tableProps, event = null, openTab = false) {
-    if(props.disableSelect || props.selection === 'multiple') return
-    tableProps.selected = true
-    // ⌘ on macOS or Ctrl on windows should open new tab
-    if(event?.metaKey || event?.ctrlKey) {
-      emit('open', true)
-    } else {
-      emit('open', openTab)
-    }
-  }
-
-  function onAuxClick(tableProps, event) {
-    if (event.button === 1) {   // mouse wheel click only
-      openResource(tableProps, event , true)
-    }
-  }
-
-  function deleteResource(tableProps) {
-    tableProps.selected = true
-    if(props.disableSelect) return
-    emit('delete')
-  }
-
-  watch(showDrafts, (newVal, oldVal) => {
-    if(newVal !== oldVal) selected.value = []
-  })
-
-  function getSelectedColor(selected) {
-    if(darkMode.value && selected) return 'bg-deep-purple-10'
-    else if(selected) return 'bg-blue-grey-1'
-  }
-
-  const pagination = ref({
-    page: 1,
-    rowsPerPage: props.showAll ? 0 : 15,
-    sortBy: '',
-    descending: false,
-  })
-
-  const tableRef = ref()
-  onMounted(() => {
-    // get initial data from server (1st page)
-    tableRef.value.requestServerInteraction()
-  })
-
-  defineExpose({ refreshTable, updateTotalRows })
-  function refreshTable() {
-    tableRef.value.requestServerInteraction()
-  }
-
-  let invalidSearchNotification = notify.wait()
-
-  // watch(() => props.rows, (newVal) => {
-  //   loading.value = false
-  // })
-
-  function onRequest(props) {
-    const searchError = checkSearch(props.filter)
-
-    invalidSearchNotification()
-    if(searchError.length) {
-      invalidSearchNotification = notify.wait(searchError)
-      return
-    }
-    pagination.value = { ...props.pagination }
-    const paginationOptions = props.pagination
-    const { page, rowsPerPage } = props.pagination
-    const index = (page - 1) * rowsPerPage
-    paginationOptions.index = index
-    paginationOptions.search = props.filter
-    emit('request', paginationOptions, showDrafts.value)
-  }
-
-  function checkSearch(string) {
-    const trimmed = string.trimEnd()
-
-    // if search ends with unescaped colon
-    if (
-      trimmed.length > 1 &&
-      trimmed.endsWith(':') &&
-      trimmed[trimmed.length - 2] !== '\\' &&
-      trimmed[trimmed.length - 2] !== ':'
-    ) {
-      return `Enter a value after the trailing colon.`
-    }
-
-    // if search ends with unescaped comma
-    if (
-      trimmed.length > 1 &&
-      trimmed.endsWith(',') &&
-      trimmed[trimmed.length - 2] !== '\\' &&
-      trimmed[trimmed.length - 2] !== ','
-    ) {
-      return `Trailing comma.  Please remove or add new search criteria.`
-    }
-
-    // Count unescaped single and double quotes
-    let singleQuotes = 0
-    let doubleQuotes = 0
-
-    for (let i = 0; i < trimmed.length; i++) {
-      const char = trimmed[i]
-      const prevChar = trimmed[i - 1]
-
-      if (char === "'" && prevChar !== '\\') {
-        singleQuotes++
-      } else if (char === '"' && prevChar !== '\\') {
-        doubleQuotes++
-      }
-    }
-
-    if (singleQuotes % 2 !== 0 || doubleQuotes % 2 !== 0) {
-      return `Unclosed quotation mark. Please close all quotes.`
-    }
-
-    return ''
-  }
-
-  onBeforeUnmount(() => {
-    invalidSearchNotification()
-  })
-
-  function updateTotalRows(totalRows) {
-    pagination.value.rowsNumber = totalRows
-  }
-
-  function formatDate(dateString) {
-    const options = { year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: true }
-    return new Date(dateString).toLocaleString('en-US', options)
-  }
-
-  function keydown(event) {
-  // exit if no rows or selection disabled
-  if(!props.rows || props.rows.length === 0) return
-  if(props.disableSelect) return
-
-  // Get the current index of the selected row
-  const currentIndex = props.rows.findIndex(row => row[props.rowKey] === selected.value[0]?.[props.rowKey])
-  if(event.key === 'ArrowUp') {
-    // Navigate to the previous row (if not at the first row)
-    if(currentIndex > 0) {
-      const prevRow = props.rows[currentIndex - 1]
-      selected.value = [prevRow]
-    }
-  } else if(event.key === 'ArrowDown') {
-    // Navigate to the next row (if not at the last row)
-    if (currentIndex < props.rows.length - 1) {
-      const nextRow = props.rows[currentIndex + 1]
-      selected.value = [nextRow]
-    }
-  } else if(event.key === 'Enter') {
-    emit('open')
-  }
-}
-
-function highlightRow(rowProps) {
-  if(props.disabledRowKeys.includes(rowProps.row[props.rowKey])) return
-  if(!props.highlightRow) return
-  if(!rowProps.expand) return
-  if(darkMode.value) {
-    return 'bg-yellow-8 text-black'
-  } else {
-    return 'bg-yellow-8'
-  }
-}
-
-function disableRow(rowProps) {
-  if(props.disabledRowKeys.includes(rowProps.row[props.rowKey])) {
-    return 'disabled-row'
-  }
-}
-
-function truncateString(str, limit) { 
-  if(!str) return ''
-  if(str?.length < limit) return str 
-  return str?.slice(0, limit > 3 ? limit - 3 : limit) + '...'; 
-}
-
-</script>
-
-<style scoped>
-
-  .disabled-row {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-</style>
\ No newline at end of file
diff --git a/src/frontend/src/components/table/TableComponent.vue b/src/frontend/src/components/table/TableComponent.vue
new file mode 100644
index 000000000..9655e6443
--- /dev/null
+++ b/src/frontend/src/components/table/TableComponent.vue
@@ -0,0 +1,520 @@
+<template>
+  <q-table
+    ref="tableRef"
+    v-bind="$attrs"
+    :rows="props.rows"
+    :columns="finalColumns"
+    :row-key="props.rowKey"
+    v-model:selected="selected"
+    v-model:pagination="pagination"
+    @request="onRequest"
+    :filter="filter"
+    :rows-per-page-options="props.showAll ? [0] : [5, 10, 15, 20, 25, 50, 0]"
+    flat
+    bordered
+    dense
+    class="q-mt-lg"
+    :tabindex="props.disableSelect ? -1 : 0"
+    @keydown="keydown"
+    :selection="selection"
+    :hideBottom="props.hideBottom && rows?.length > 0"
+  >
+    <template v-slot:header="props">
+      <q-tr :props="props">
+        <q-th
+          v-for="col in props.cols"
+          :key="col.name"
+          :class="col.__thClass"
+          @click="col.sortable ? props.sort(col) : null"
+          @auxclick="onAuxClick(props, $event)"
+        >
+          <CellHeader
+            :col="col"
+            :sorted="pagination.sortBy === col.name"
+            :descending="pagination.descending"
+          />
+        </q-th>
+      </q-tr>
+    </template>
+
+    <template v-slot:body="props">
+      <q-tr
+        :class="[
+          getSelectedColor(props.selected),
+          highlightRow(props),
+          disableRow(props),
+          'cursor-pointer',
+        ]"
+        :props="props"
+        @click="
+          openResource(props);
+          selectResource(props);
+        "
+        @auxclick="onAuxClick(props, $event)"
+      >
+          <q-td v-for="col in props.cols" :key="col.name" :props="props" :style="props.expand ? {'border-bottom': 'none'} : {}">
+            <q-menu
+              v-if="!props.disableSelect && selection !== 'multiple'"
+              context-menu
+              @show="props.selected = true"
+            >
+
+
+              <q-list dense>
+                <q-item clickable v-close-popup @click="openResource(props)">
+                  <q-item-section>Open</q-item-section>
+                </q-item>
+                <q-item clickable v-close-popup @click="openResource(props, null, true)">
+                  <q-item-section>Open In New Tab</q-item-section>
+                </q-item>
+              </q-list>
+            </q-menu>
+
+            <slot :name="`body-cell-${col.name}`" v-bind="props">
+            <ResourceName
+              v-if="col.styleType === 'resource-name'"
+              :text="col.value"
+              :concept-type="col.conceptType"
+              :max-length="col.maxLength"
+              :max-width="col.maxWidth"
+              :use-quotes="col.useQuotes"
+              :text-type="col.textType"
+              :includeIcon="col.includeIcon"
+            />
+
+            <IconID
+              v-else-if="col.styleType === 'icon-id'"
+              :type="col.conceptType"
+              :label="col.value?.id || col.value"
+              :row-id="col.value?.id"
+              :include-icon="col.includeIcon"
+            />
+
+            <BadgeIcon
+              v-else-if="col.styleType === 'icon-badge'"
+              :type="col.conceptType"
+              :label="getLabel(col.value)"
+              :row-id="col.value?.id"
+              :size="col.size"
+              :chipType="col.chipType"
+              :uppercase="col.uppercase"
+              :formatLabel="col.formatLabel"
+              :clickable="col.clickable"
+              :showIcon="col.showIcon"
+              :snapshotId="col.value?.snapshotId" 
+              :to="col.value?.to || col.to"
+            />
+
+            <MultiBadgeIcon
+              v-else-if="col.styleType === 'multi-badge'"
+              :items="col.value"
+              :concept-type="col.conceptType"
+              :clickable="col.clickable"
+              :showIcon="col.showIcon"
+            />
+
+            <CellLongText
+              v-else-if="col.styleType === 'long-text'"
+              :text="col.value"
+              :max-length="col.maxLength"
+              :max-width="col.maxWidth"
+              :use-quotes="col.useQuotes"
+              :text-type="col.textType"
+              :text-color="col.textColor"
+            />
+
+            <ParameterList
+              v-else-if="col.styleType === 'parameter-list'"
+              :items="col.value"
+              :type="col.parameterType || 'output'"
+            />
+
+            <TagList
+              v-else-if="col.styleType === 'tag-list'"
+              :tags="col.value"
+              :row="props.row"
+              @add="(row) => emit('editTags', row)"
+            />
+
+            <div
+              v-else-if="col.styleType === 'date'"
+              :class="col.textColor || ($q.dark.isActive ? 'text-grey-4' : 'text-grey-8')"
+              style="font-size: 13px"
+            >
+              {{ formatDate(col.value) }}
+            </div>
+
+            <div v-else-if="typeof col.value === 'boolean'" class="text-body1">
+              {{ col.value ? "✅" : "❌" }}
+            </div>
+
+            <template v-else>
+              {{ col.value }}
+            </template>
+
+            <q-btn
+              v-if="col.name === 'delete'"
+              icon="sym_o_delete"
+              color="negative"
+              flat
+              round
+              size="sm"
+              @click.stop="deleteResource(props)"
+            />
+            <q-btn
+              v-if="col.name === 'expand'"
+              :icon="props.expand ? 'expand_less' : 'expand_more'"
+              flat
+              round
+              size="sm"
+              @click.stop="props.expand = !props.expand"
+            />
+          </slot>
+        </q-td>
+      </q-tr>
+
+      <q-tr v-show="props.expand" :props="props" :class="highlightRow(props)">
+        <q-td colspan="100%">
+          <slot name="expandedSlot" :row="props.row" :rowProps="props" />
+        </q-td>
+      </q-tr>
+    </template>
+
+    <template v-slot:top-right>
+      <slot name="top-right" />
+      <slot name="jobLogSlot" />
+
+      <q-btn
+        v-if="!hideCreateBtn"
+        color="primary"
+        icon="add"
+        label="Create"
+        class="q-mr-lg"
+        @click="$emit('create')"
+      />
+
+      <q-input
+        v-if="!hideSearch"
+        v-model="filter"
+        debounce="300"
+        dense
+        placeholder="Search"
+        outlined
+        :bg-color="$q.dark.isActive ? 'grey-9' : 'white'"
+      >
+        <template #append>
+          <q-icon name="search" />
+        </template>
+      </q-input>
+
+      <caption v-if="props.rightCaption" class="text-caption q-ml-sm">
+        {{
+          props.rightCaption
+        }}
+      </caption>
+    </template>
+
+    <template v-slot:top-left>
+      <div class="row items-center q-gutter-x-md">
+        <div
+          v-if="props.title"
+          class="text-h6 q-mb-lg q-mt-md q-mx-lg"
+          :class="$q.dark.isActive ? 'text-grey-6' : 'text-grey-7'"
+        >
+          {{ props.title }}
+        </div>
+
+        <q-btn-toggle
+          v-if="showToggleDraft"
+          v-model="showDrafts"
+          toggle-color="primary"
+          push
+          style="box-shadow: 0 0 0 0.5px grey"
+          :options="[
+            { label: 'Active', value: false },
+            { label: 'Drafts', value: true },
+          ]"
+          @click="refreshTable"
+        />
+      </div>
+    </template>
+  </q-table>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, onBeforeUnmount, watch } from "vue";
+import { useQuasar } from "quasar";
+import BadgeIcon from "./cells/BadgeIcon.vue";
+import IconID from "./cells/IconID.vue";
+import CellHeader from "./cells/CellHeader.vue";
+import CellLongText from "./cells/CellLongText.vue";
+import TagList from "./cells/TagList.vue";
+import MultiBadgeIcon from "./cells/MultiBadgeIcon.vue";
+import ParameterList from "./cells/ParameterList.vue";
+import ResourceName from "./cells/ResourceName.vue";
+import * as notify from "../../notify";
+
+const props = defineProps({
+  columns: Array,
+  rows: Array,
+  title: String,
+  showExpand: Boolean,
+  hideCreateBtn: Boolean,
+  showToggleDraft: Boolean,
+  hideSearch: Boolean,
+  disableSelect: Boolean,
+  hideOpenBtn: Boolean,
+  hideDeleteBtn: Boolean,
+  hideBottom: Boolean,
+  rightCaption: String,
+  showAll: Boolean,
+  highlightRow: Boolean,
+  selection: String,
+  disabledRowKeys: { type: Array, default: () => [] },
+  rowKey: { type: String, default: "id" },
+});
+
+const emit = defineEmits(["edit", "open", "delete", "request", "create", "editTags", "expand"]); 
+const $q = useQuasar();
+const filter = ref("");
+const selected = defineModel("selected", { default: () => [] });
+const showDrafts = defineModel("showDrafts", { default: false });
+
+const darkMode = computed(() => {
+  if ($q.dark.mode === "auto")
+    return window.matchMedia("(prefers-color-scheme: dark)").matches;
+  return $q.dark.mode;
+});
+
+const selection = computed(() => {
+  if(props.disableSelect) return 'none'
+  if(props.selection === 'multiple') return 'multiple'
+  return 'single'
+})
+
+// Columns Logic
+const finalColumns = computed(() => {
+  let defaultColumns = [...props.columns];
+  if (!props.hideDeleteBtn) {
+    defaultColumns.push({
+      name: "delete",
+      align: "center",
+      sortable: false,
+      label: "Delete",
+      headerStyle: "width: 50px",
+    });
+  }
+  if (props.showExpand) {
+    defaultColumns.push({
+      name: "expand",
+      align: "center",
+      sortable: false,
+      label: "Expand",
+      headerStyle: "width: 50px",
+    });
+  }
+  if (showDrafts.value) {
+    defaultColumns = defaultColumns.map((column) => ({
+      ...column,
+      sortable: false,
+    }));
+  }
+  return defaultColumns;
+});
+
+const pagination = ref({
+  page: 1,
+  rowsPerPage: props.showAll ? 0 : 15,
+  sortBy: "",
+  descending: false,
+  rowsNumber: 0, 
+});
+
+function onAuxClick(tableProps, event) {
+  if (event.button === 1) {   // mouse wheel click only
+    openResource(tableProps, event , true)
+  }
+}
+
+
+function keydown(event) {
+  if (!props.rows || props.rows.length === 0) return;
+  if (props.disableSelect) return;
+
+  const currentIndex = props.rows.findIndex(
+    (row) => row[props.rowKey] === selected.value?.[0]?.[props.rowKey],
+  );
+
+  if (event.key === "ArrowUp") {
+    event.preventDefault(); // Prevent scrolling the page
+    // Navigate to the previous row
+    if (currentIndex > 0) {
+      const prevRow = props.rows[currentIndex - 1];
+      selected.value = [prevRow];
+    }
+  } else if (event.key === "ArrowDown") {
+    event.preventDefault(); 
+    // Navigate to the next row
+    if (currentIndex < props.rows.length - 1) {
+      const nextRow = props.rows[currentIndex + 1];
+      selected.value = [nextRow];
+    }
+  } else if (event.key === "Enter") {
+    // If a row is selected, trigger the edit/open event
+    if (selected.value.length > 0) {
+      emit("open", false);
+      emit("edit", selected.value[0]); 
+    }
+  }
+}
+
+
+const tableRef = ref();
+onMounted(() => {
+  tableRef.value.requestServerInteraction();
+});
+
+defineExpose({ refreshTable, updateTotalRows });
+function refreshTable() {
+  tableRef.value.requestServerInteraction();
+}
+
+// --- SEARCH & REQUEST LOGIC ---
+let invalidSearchNotification = notify.wait();
+
+function onRequest(tableProps) {
+  const searchError = checkSearch(tableProps.filter);
+
+  invalidSearchNotification();
+  if (searchError.length) {
+    invalidSearchNotification = notify.wait(searchError);
+    return;
+  }
+
+  const { page, rowsPerPage, sortBy, descending } = tableProps.pagination;
+
+  pagination.value.page = page;
+  pagination.value.rowsPerPage = rowsPerPage;
+  pagination.value.sortBy = sortBy;
+  pagination.value.descending = descending;
+
+  const paginationOptions = { ...tableProps.pagination };
+  const index = (page - 1) * rowsPerPage;
+  paginationOptions.index = index;
+  paginationOptions.search = tableProps.filter;
+
+  emit("request", paginationOptions, showDrafts.value);
+}
+
+function checkSearch(string) {
+  const trimmed = (string || "").trimEnd();
+  if (
+    trimmed.length > 1 &&
+    trimmed.endsWith(":") &&
+    trimmed[trimmed.length - 2] !== "\\" &&
+    trimmed[trimmed.length - 2] !== ":"
+  )
+    return `Enter a value after the trailing colon.`;
+  if (
+    trimmed.length > 1 &&
+    trimmed.endsWith(",") &&
+    trimmed[trimmed.length - 2] !== "\\" &&
+    trimmed[trimmed.length - 2] !== ","
+  )
+    return "Trailing comma. Please remove or add new search criteria.";
+  let singleQuotes = 0;
+  let doubleQuotes = 0;
+  for (let i = 0; i < trimmed.length; i++) {
+    const char = trimmed[i];
+    const prevChar = trimmed[i - 1];
+    if (char === "'" && prevChar !== "\\") singleQuotes++;
+    else if (char === '"' && prevChar !== "\\") doubleQuotes++;
+  }
+  if (singleQuotes % 2 !== 0 || doubleQuotes % 2 !== 0)
+    return `Unclosed quotation mark.`;
+  return "";
+}
+
+onBeforeUnmount(() => {
+  invalidSearchNotification();
+});
+
+function updateTotalRows(totalRows) {
+  // Ensure we always assign a valid number, never undefined
+  pagination.value.rowsNumber = Number(totalRows) || 0;
+}
+
+//  Helpers
+function getLabel(val) {
+  if (val === null || val === undefined) return "-";
+  return typeof val === "object" ? val.name : val;
+}
+
+function formatDate(dateString) {
+  if (!dateString) return "-";
+  const options = {
+    year: "2-digit",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  };
+  return new Date(dateString).toLocaleString("en-US", options);
+}
+
+function selectResource(tableProps) {
+  if (props.disableSelect || props.selection !== "multiple") return;
+  tableProps.selected = !tableProps.selected;
+}
+
+
+function openResource(tableProps, event = null, openTab = false) {
+    if(props.disableSelect || props.selection === 'multiple') return
+    tableProps.selected = true
+    
+    // ⌘ on macOS or Ctrl on windows should open new tab
+    if(event?.metaKey || event?.ctrlKey) {
+      emit('open', true)
+      emit('edit', tableProps.row) 
+    } else {
+      emit('open', openTab)
+      emit('edit', tableProps.row) 
+    }
+  }
+
+function deleteResource(tableProps) {
+  if (!props.disableSelect) {
+    tableProps.selected = true;
+  }
+  emit("delete", tableProps.row);
+}
+
+watch(showDrafts, (newVal, oldVal) => {
+  if (newVal !== oldVal) selected.value = [];
+});
+
+function getSelectedColor(selected) {
+  if (darkMode.value && selected) return "bg-deep-purple-10";
+  else if (selected) return "bg-blue-grey-1";
+}
+
+function highlightRow(rowProps) {
+  if (props.disabledRowKeys.includes(rowProps.row[props.rowKey])) return;
+  if (!props.highlightRow) return;
+  if (!rowProps.expand) return;
+  return darkMode.value ? "bg-yellow-8 text-black" : "bg-yellow-8";
+}
+
+function disableRow(rowProps) {
+  if (props.disabledRowKeys.includes(rowProps.row[props.rowKey]))
+    return "disabled-row";
+}
+</script>
+
+<style scoped>
+.disabled-row {
+  pointer-events: none;
+  opacity: 0.5;
+}
+</style>
diff --git a/src/frontend/src/components/table/cells/BadgeIcon.vue b/src/frontend/src/components/table/cells/BadgeIcon.vue
new file mode 100644
index 000000000..83b4d02ef
--- /dev/null
+++ b/src/frontend/src/components/table/cells/BadgeIcon.vue
@@ -0,0 +1,157 @@
+<template>
+  <q-chip
+    v-if="styles"
+    :color="$q.dark.isActive ? styles.darkColor : styles.color"
+    :text-color="$q.dark.isActive ? 'black' : 'white'"
+    :size="mini ? 'sm' : size"
+    :outline="chipType === 'outline'"
+    square
+    :clickable="isClickable"
+    @click.stop="openInNewTab" 
+    :class="['text-weight-bold', mini ? 'q-py-xs q-px-xs' : 'q-py-md q-px-sm']"
+  >
+    <q-menu v-if="isClickable" context-menu>
+      <q-list dense>
+        <q-item clickable v-close-popup @click.stop="openInSameTab">
+          <q-item-section>Open</q-item-section>
+        </q-item>
+        <q-item clickable v-close-popup @click.stop="openInNewTab">
+          <q-item-section>Open In New Tab</q-item-section>
+        </q-item>
+      </q-list>
+    </q-menu>
+
+    <q-icon
+      v-if="showIcon && styles.icon"
+      :name="styles.icon"
+      size="xs"
+      :style="mini ? 'font-size:1.5em !important' : ''"
+    />
+
+    <span
+      class="font-mono ellipsis"
+      :class="[{ 'text-uppercase': uppercase }, showIcon ? 'q-ml-xs' : '']"
+      style="font-size: 12px; font-weight: 500; max-width: 200px"
+    >
+      {{ displayValue }}
+    </span>
+
+    <q-tooltip>{{ tooltipText }}</q-tooltip>
+  </q-chip>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+import { getConceptStyle } from "@/constants/tableStyles";
+
+const router = useRouter();
+
+const props = defineProps({
+  type: String,
+  label: [String, Number],
+  rowId: [String, Number],
+  snapshotId: [String, Number], 
+  to: [String, Object],         // Allow custom URL override
+  clickable: {                  // Explicit control if needed
+    type: Boolean,
+    default: undefined,
+  },
+  uppercase: {
+    type: Boolean,
+    default: true,
+  },
+  size: {
+    type: String,
+    default: "sm",
+  },
+  chipType: {
+    type: String,
+    default: "outline",
+    validator: (value) => ["outline", "normal"].includes(value),
+  },
+  formatLabel: {
+    type: String,
+    default: "",
+  },
+  showIcon: {
+    type: Boolean,
+    default: true,
+  },
+  mini: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const styles = computed(() => {
+  return getConceptStyle(props.type) || { color: "grey-7", icon: "help" };
+});
+
+// Determine the target route
+const targetRoute = computed(() => {
+  // If an explicit 'to' override is provided, use it
+  if (props.to) return props.to;
+
+  // Return null if insufficient info
+  if (!props.rowId || !props.type) return null;
+
+  // Construct standard route using styles.value!
+  const baseRoute = styles.value.basePath;
+  
+  if (!baseRoute) return null;
+
+  const path = `/${baseRoute.toLowerCase()}/${props.rowId}`;
+
+  return props.snapshotId
+    ? { path, query: { snapshotId: props.snapshotId } }
+    : { path };
+});
+
+// The chip is clickable if either the prop says so, or it has a valid target route
+const isClickable = computed(() => {
+  if (props.clickable !== undefined) return props.clickable;
+  return !!targetRoute.value;
+});
+
+// Navigate in the same tab
+function openInSameTab() {
+  if (isClickable.value && targetRoute.value) {
+    if (typeof targetRoute.value === 'string' && targetRoute.value.startsWith('http')) {
+      window.location.href = targetRoute.value;
+    } else {
+      router.push(targetRoute.value);
+    }
+  }
+}
+
+// Navigate in a new tab
+function openInNewTab() {
+  if (isClickable.value && targetRoute.value) {
+    if (typeof targetRoute.value === 'string' && targetRoute.value.startsWith('http')) {
+      window.open(targetRoute.value, '_blank');
+    } else {
+      const routeData = router.resolve(targetRoute.value);
+      window.open(routeData.href, '_blank');
+    }
+  }
+}
+
+const displayValue = computed(() => {
+  const labelVal = props.label !== undefined && props.label !== null && props.label !== "" ? props.label : "NA";
+  const typeVal = props.type || "";
+  if (!props.formatLabel) return labelVal !== "NA" ? labelVal : typeVal;
+  return props.formatLabel.replace(/{label}/g, labelVal).replace(/{type}/g, typeVal);
+});
+
+const tooltipText = computed(() => {
+  if (!props.type) return "";
+
+  const prefix = isClickable.value ? `Go to ` : ``;
+  const base = `${props.type}: ${props.label || "N/A"}`;
+  const idSuffix = props.rowId ? ` (ID: ${props.rowId})` : "";
+  const snapSuffix = props.snapshotId ? ` | Snapshot: ${props.snapshotId}` : "";
+
+  return prefix + base + idSuffix + snapSuffix;
+});
+</script>
\ No newline at end of file
diff --git a/src/frontend/src/components/table/cells/CellHeader.vue b/src/frontend/src/components/table/cells/CellHeader.vue
new file mode 100644
index 000000000..f06633c6c
--- /dev/null
+++ b/src/frontend/src/components/table/cells/CellHeader.vue
@@ -0,0 +1,90 @@
+<template>
+  <div
+    class="header-container row items-center no-wrap"
+    :class="[alignClass, { 'is-sortable': col.sortable }]"
+  >
+    <span class="header-label"
+    :class="$q.dark.isActive ? 'header-label--dark' : 'header-label--light'">
+      {{ col.label }}
+    </span>
+
+    <q-icon
+      v-if="col.sortable"
+      :name="iconName"
+      class="sort-icon"
+      :class="iconStatusClass"
+    />
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const props = defineProps({
+  col: Object,
+  sorted: Boolean,
+  descending: Boolean,
+});
+
+const alignClass = computed(() => {
+  const align = props.col.align || "left";
+  if (align === "center") return "justify-center";
+  if (align === "right") return "justify-end";
+  return "justify-start";
+});
+
+const iconName = computed(() => {
+  if (!props.sorted) return "unfold_more";
+  return props.descending ? "arrow_downward" : "arrow_upward";
+});
+
+const iconStatusClass = computed(() => {
+  return props.sorted ? "sort-icon--active" : "sort-icon--neutral";
+});
+</script>
+
+<style scoped>
+.header-container {
+  cursor: default;
+  user-select: none;
+}
+
+.is-sortable {
+  cursor: pointer;
+}
+
+.header-label {
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding-right: 4px;
+}
+
+.header-label--light {
+    color: #546e7a;
+}
+
+.header-label--dark {
+    color: #cbe8f5;
+}
+
+
+.sort-icon {
+  font-size: 16px;
+  transition: opacity 0.2s ease;
+}
+
+.sort-icon--neutral {
+  opacity: 0.2;
+  color: #546e7a;
+}
+
+.sort-icon--active {
+  opacity: 1;
+  color: var(--q-primary);
+  font-weight: bold;
+}
+</style>
diff --git a/src/frontend/src/components/table/cells/CellLongText.vue b/src/frontend/src/components/table/cells/CellLongText.vue
new file mode 100644
index 000000000..23038ca0f
--- /dev/null
+++ b/src/frontend/src/components/table/cells/CellLongText.vue
@@ -0,0 +1,106 @@
+<template>
+  <div
+    :class="[
+      (textColor === 'text-grey-8' && $q.dark.isActive) ? 'text-grey-4' : textColor, 
+      textTypeClass, 
+      'text-wrap-style'
+    ]"
+    :style="{ maxWidth: maxWidth, width: 'fit-content' }"
+  >
+    {{ formattedDisplayValue }}
+
+    <q-tooltip
+      v-if="isTruncated || useQuotes"
+      max-width="400px"
+      style="font-size: 13px"
+    >
+      {{ formattedFullText }}
+    </q-tooltip>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const props = defineProps({
+  text: [String, Number],
+  maxLength: {
+    type: Number,
+    default: 150,
+  },
+  maxWidth: {
+    type: String,
+    default: "250px",
+  },
+  useQuotes: {
+    type: Boolean,
+    default: false,
+  },
+  textType: {
+    type: String,
+    default: "none",
+  },
+  textColor: {
+    type: String,
+    default: "text-grey-8",
+  },
+});
+
+const applyTransformation = (val) => {
+  if (!val || typeof val !== "string") return val;
+  const type = (props.textType || "none").toLowerCase();
+  if (type === "capitalize") return val.charAt(0).toUpperCase() + val.slice(1);
+  if (type === "uppercase") return val.toUpperCase();
+  if (type === "lowercase") return val.toLowerCase();
+  return val;
+};
+
+const wrapInQuotes = (val) => {
+  if (!props.useQuotes || val === "-" || val === "") return val;
+  return `"${val}"`;
+};
+
+const isTruncated = computed(() => {
+  if (!props.text) return false;
+  return props.text.toString().length > props.maxLength;
+});
+
+const formattedDisplayValue = computed(() => {
+  if (props.text === undefined || props.text === null || props.text === "")
+    return "-";
+
+  let str = props.text.toString();
+
+  if (str.length > props.maxLength) {
+    str = str.slice(0, props.maxLength).trim() + "...";
+  }
+
+  str = applyTransformation(str);
+  return wrapInQuotes(str);
+});
+
+const formattedFullText = computed(() => {
+  if (!props.text) return "";
+  return wrapInQuotes(applyTransformation(props.text.toString()));
+});
+
+const textTypeClass = computed(() => {
+  const type = (props.textType || "none").toLowerCase();
+  if (type === "uppercase") return "text-uppercase";
+  if (type === "lowercase") return "text-lowercase";
+  if (type === "capitalize") return "text-capitalize";
+  return "";
+});
+</script>
+
+<style scoped>
+.text-wrap-style {
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.4;
+  display: inline-block;
+  vertical-align: top;
+}
+</style>
diff --git a/src/frontend/src/components/table/cells/IconID.vue b/src/frontend/src/components/table/cells/IconID.vue
new file mode 100644
index 000000000..ad1a1459e
--- /dev/null
+++ b/src/frontend/src/components/table/cells/IconID.vue
@@ -0,0 +1,49 @@
+<template>
+  <q-btn
+    flat
+    dense
+    no-caps
+    size="md"
+    :class="[
+      $q.dark.isActive ? 'bg-grey-9 text-grey-3' : 'bg-grey-2 text-blue-grey-8', 
+      'q-pr-sm q-mr-sm row items-left no-wrap justify-start'
+    ]"
+    style="max-width: 100%; min-width: 70px"
+  >
+    <q-icon
+      v-if="includeIcon"
+      :name="styles.icon"
+      :color="$q.dark.isActive && styles.darkColor ? styles.darkColor : styles.color"
+      class="items-left justify-left q-mr-xs"
+      size="xs"
+    />
+    <span style="font-size: 12px; font-weight: 500"
+      >#<strong>{{ label || type }}</strong>
+    </span>
+    <q-tooltip>Go to {{ type }} {{ label }}</q-tooltip>
+  </q-btn>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useRouter } from "vue-router";
+import { getConceptStyle } from "@/constants/tableStyles";
+import { useQuasar } from "quasar";
+
+const $q = useQuasar();
+const props = defineProps({
+  type: String,
+  label: [String, Number],
+  rowId: [String, Number],
+  includeIcon: { type: Boolean, default: true },
+});
+
+const router = useRouter();
+const styles = computed(() => getConceptStyle(props.type));
+
+// function navigate() {
+//   if (props.rowId && !props.isDeleted) {
+//     router.push(`/${styles.value.basePath}/${props.rowId}`)
+//   }
+// }
+</script>
diff --git a/src/frontend/src/components/table/cells/MultiBadgeIcon.vue b/src/frontend/src/components/table/cells/MultiBadgeIcon.vue
new file mode 100644
index 000000000..d458e5283
--- /dev/null
+++ b/src/frontend/src/components/table/cells/MultiBadgeIcon.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="row items-center q-gutter-xs wrap" style="max-width: 300px">
+    <BadgeIcon
+      v-for="(item, i) in visibleItems"
+      :key="i"
+      :type="conceptType"
+      :label="item.name"
+      :rowId="item.id"
+      :snapshotId="item.snapshotId"
+      :clickable="clickable"
+    />
+
+    <q-chip
+      v-if="hiddenCount > 0"
+      clickable
+      @click.stop
+      class="q-my-none text-weight-bold"
+      :color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+      :text-color="$q.dark.isActive ? 'grey-2' : 'grey-9'"
+      style="font-size: 13px"
+    >
+      +{{ hiddenCount }} more
+
+      <q-menu
+        anchor="bottom middle"
+        self="top middle"
+        class="shadow-5 border-grey-3 q-pa-md"
+        :class="$q.dark.isActive ? 'bg-grey-9 text-grey-3' : 'bg-grey-2 text-grey-9'"
+      >
+        <div class="text-caption text-grey-7 q-mb-xs text-weight-bold" style="text-transform: capitalize;">
+          Additional {{ conceptType }}s:
+        </div>
+        <div class="column q-pa-sm q-gutter-y-xs">
+          <BadgeIcon
+            v-for="(item, i) in hiddenItems"
+            :key="i"
+            :type="conceptType"
+            :label="item.name"
+            :rowId="item.id"
+            :snapshotId="item.snapshotId"
+            :clickable="clickable"
+          />
+        </div>
+      </q-menu>
+    </q-chip>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import BadgeIcon from "./BadgeIcon.vue";
+
+const props = defineProps({
+  items: {
+    type: Array,
+    default: () => [],
+  },
+  clickable: {                  
+    type: Boolean,
+    default: undefined,
+  },
+  conceptType: {
+    type: String,
+    required: true,
+  },
+  limit: {
+    type: Number,
+    default: 3,
+  },
+});
+
+const visibleItems = computed(() => props.items?.slice(0, props.limit) || []);
+const hiddenItems = computed(() => props.items?.slice(props.limit) || []);
+const hiddenCount = computed(() => hiddenItems.value.length);
+</script>
\ No newline at end of file
diff --git a/src/frontend/src/components/table/cells/ParameterList.vue b/src/frontend/src/components/table/cells/ParameterList.vue
new file mode 100644
index 000000000..93d1c70ba
--- /dev/null
+++ b/src/frontend/src/components/table/cells/ParameterList.vue
@@ -0,0 +1,175 @@
+<template>
+  <div class="column q-gutter-y-xs">
+    <template v-for="(param, i) in items.slice(0, 3)" :key="i">
+      <div class="row no-wrap q-gutter-x-sm">
+        <div
+          class="rounded-borders shrink-0"
+          :style="{
+            marginTop: '6px',
+            width: '6px',
+            height: '6px',
+            backgroundColor: styles.textColor,
+          }"
+        ></div>
+
+        <div
+          :class="[
+            layout === 'horizontal'
+              ? 'row items-baseline q-gutter-x-sm'
+              : 'column',
+            'no-wrap',
+          ]"
+        >
+          <div
+            class="text-weight-bold"
+            :style="{
+              color: styles.textColor,
+              borderBottom: `1.5px solid ${styles.textColor}`,
+              lineHeight: '1.3',
+            }"
+          >
+            {{ param.name }}{{ layout === "horizontal" ? " :" : "" }}
+          </div>
+
+          <div class="row items-center text-left">
+            <div
+              class="font-mono text-weight-medium cursor-help q-pr-xs" 
+              :class="$q.dark.isActive ? 'text-grey-4' : 'text-grey-8'"
+              style="font-size: 0.75rem"
+            >
+              {{ param.parameterType?.name || "Unknown" }}
+
+              <q-tooltip class="bg-grey-9" style="font-size: 11px">
+                {{ getTooltip(param) }}
+              </q-tooltip>
+            </div>
+
+            <div
+              v-if="!param.required && type === 'input'"
+              class="text-weight-medium text-grey-5"
+              style="font-size: 0.7rem"
+            >
+              (optional)
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div v-if="items.length > 3" class="row no-wrap q-gutter-x-md">
+      <div
+        class="rounded-borders shrink-0"
+        :style="{ marginTop: '6px', width: '6px', height: '6px', opacity: 1 }"
+      ></div>
+      <q-chip
+        dense
+        clickable
+        :color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+        :text-color="$q.dark.isActive ? 'grey-3' : 'grey-8'"
+        class="text-weight-bold"
+        style="font-size: 10px; height: 20px"
+        @click.stop
+      >
+        +{{ items.length - 3 }} more
+
+        <q-menu
+          anchor="bottom middle"
+          self="top left"
+          :class="[$q.dark.isActive ? 'bg-grey-9 border-grey-8' : 'bg-white border-grey-3', 'shadow-5']"
+        >
+          <div class="column q-pa-sm q-gutter-y-xs">
+            <div 
+              class="text-caption q-mb-xs"
+              :class="$q.dark.isActive ? 'text-grey-4' : 'text-grey-7'"
+            >
+              Additional {{ type === "input" ? "Inputs" : "Outputs" }}
+            </div>
+            <template v-for="(param, i) in items.slice(3)" :key="i">
+              <div class="row items-start no-wrap q-gutter-x-sm q-py-xs">
+                <div
+                    class="font-mono text-weight-medium"
+                    :class="$q.dark.isActive ? 'text-grey-4' : 'text-grey-7'"
+                    :style="{
+                    width: '6px',
+                    height: '6px',
+                    marginTop: '5px',
+                    backgroundColor: styles.hexColor,
+                  }"
+                    style="font-size: 0.75rem"
+                  >
+                    {{ param.parameterType?.name }}
+                  </div>
+          
+
+                <div
+                  :class="
+                    layout === 'horizontal'
+                      ? 'row items-baseline q-gutter-x-sm'
+                      : 'column'
+                  "
+                >
+                  <div
+                    class="text-weight-bold"
+                    :style="{
+                      color: styles.textColor,
+                      borderBottom: `1.5px solid ${styles.hexColor}`,
+                      lineHeight: '1.3',
+                    }"
+                  >
+                    {{ param.name }}{{ layout === "horizontal" ? " :" : "" }}
+                  </div>
+                  <div
+                    class="font-mono text-weight-medium text-grey-7"
+                    style="font-size: 0.75rem"
+                  >
+                    {{ param.parameterType?.name }}
+                  </div>
+                </div>
+              </div>
+            </template>
+          </div>
+        </q-menu>
+      </q-chip>
+    </div>
+
+    <div v-if="items.length === 0" class="text-caption text-grey-4">-</div>
+  </div>
+</template>
+<script setup>
+import { computed } from "vue";
+import { useQuasar, colors } from "quasar";
+
+const $q = useQuasar();
+const { getPaletteColor } = colors;
+
+const props = defineProps({
+  items: { type: Array, default: () => [] },
+  type: { type: String, default: "output" },
+  layout: {
+    type: String,
+    default: "vertical",
+    validator: (v) => ["horizontal", "vertical"].includes(v),
+  },
+});
+
+const styles = computed(() => {
+  const isDark = $q.dark.isActive;
+
+  const colorClass = props.type === "input" 
+    ? (isDark ? "indigo-4" : "indigo-6") 
+    : (isDark ? "purple-4" : "purple-6");
+
+  const textClass = props.type === "input" 
+    ? (isDark ? "blue-grey-3" : "blue-grey-6") 
+    : (isDark ? "deep-purple-3" : "deep-purple-5");
+
+  return {
+    hexColor: getPaletteColor(colorClass),
+    textColor: getPaletteColor(textClass),
+  };
+});
+
+function getTooltip(param) {
+  return param.description || `Type: ${param.parameterType?.name}`;
+}
+</script>
diff --git a/src/frontend/src/components/table/cells/ResourceName.vue b/src/frontend/src/components/table/cells/ResourceName.vue
new file mode 100644
index 000000000..d549ef5d4
--- /dev/null
+++ b/src/frontend/src/components/table/cells/ResourceName.vue
@@ -0,0 +1,184 @@
+<template>
+  <div
+    class="resource-item-container row items-center no-wrap"
+    style="min-width: 150px; height: 100%"
+  >
+    <div
+      v-if="conceptType && !minimal"
+      class="shrink-0 flex flex-center"
+      style="width: 24px"
+    >
+      <q-icon
+        v-if="includeIcon"
+        :name="styles.icon"
+        :color="styles.color"
+        size="xs"
+      />
+      <div
+        v-else
+        :style="{
+          width: '8px',
+          height: '8px',
+          borderRadius: '50%',
+          backgroundColor: styles.hexColor || 'black',
+        }"
+      ></div>
+    </div>
+
+    <div
+      class="resource-name-text text-weight-bold text-wrap-style"
+      :class="[
+        textTypeClass,
+        minimal ? 'q-ml-none' : 'q-ml-xs',
+        { 'no-underline': minimal },
+        $q.dark.isActive ? 'text-grey-4' : 'text-blue-grey-10'
+      ]"
+      :style="{
+        maxWidth: maxWidth,
+        letterSpacing: '.5px',
+        '--hover-color': styles.hexColor || '#000',
+      }"
+    >
+      {{ formattedDisplayValue }}
+
+      <q-tooltip v-if="isTruncated || useQuotes" style="font-size: 13px">
+        {{ formattedFullText }}
+      </q-tooltip>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.resource-item-container {
+  cursor: pointer;
+  width: fit-content;
+}
+
+.resource-name-text {
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.2;
+  position: relative;
+  display: inline-block;
+  transition: color 0.2s ease;
+}
+
+.resource-name-text::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  bottom: -2px;
+  width: 100%;
+  height: 2px;
+  background-color: var(--hover-color);
+  transform: scaleX(0);
+  transition: transform 0.15s ease-out;
+}
+
+.resource-item-container:hover .resource-name-text:not(.no-underline)::after {
+  transform: scaleX(1);
+}
+
+.text-wrap-style {
+  white-space: normal;
+  word-break: break-word;
+  line-height: 1.2;
+}
+</style>
+
+<script setup>
+import { computed } from "vue";
+import { getConceptStyle, getConceptColorHex } from "@/constants/tableStyles";
+import { useQuasar, colors } from "quasar";
+
+const $q = useQuasar();
+const { getPaletteColor } = colors;
+
+const props = defineProps({
+  text: [String, Number],
+  conceptType: {
+    type: String,
+    default: null,
+  },
+  maxLength: {
+    type: Number,
+    default: 35,
+  },
+  maxWidth: {
+    type: String,
+    default: "200px",
+  },
+  useQuotes: {
+    type: Boolean,
+    default: false,
+  },
+  textType: {
+    type: String,
+    default: "none",
+  },
+  includeIcon: {
+    type: Boolean,
+    default: false,
+  },
+  // New Prop
+  minimal: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const styles = computed(() => {
+  if (!props.conceptType) return { icon: "", color: "" };
+  const style = getConceptStyle(props.conceptType);
+  return {
+    ...style,
+    hexColor: getConceptColorHex(props.conceptType, $q.dark.isActive),
+  };
+});
+
+const applyTransformation = (val) => {
+  if (!val || typeof val !== "string") return val;
+  const type = (props.textType || "none").toLowerCase();
+  if (type === "capitalize") return val.charAt(0).toUpperCase() + val.slice(1);
+  if (type === "uppercase") return val.toUpperCase();
+  if (type === "lowercase") return val.toLowerCase();
+  return val;
+};
+
+const wrapInQuotes = (val) => {
+  if (!props.useQuotes || val === "-" || val === "") return val;
+  return `"${val}"`;
+};
+
+const isTruncated = computed(() => {
+  if (!props.text) return false;
+  return props.text.toString().length > props.maxLength;
+});
+
+const formattedDisplayValue = computed(() => {
+  if (props.text === undefined || props.text === null || props.text === "")
+    return "-";
+
+  let str = props.text.toString();
+
+  if (str.length > props.maxLength) {
+    str = str.slice(0, props.maxLength).trim() + "...";
+  }
+
+  str = applyTransformation(str);
+  return wrapInQuotes(str);
+});
+
+const formattedFullText = computed(() => {
+  if (!props.text) return "";
+  return wrapInQuotes(applyTransformation(props.text.toString()));
+});
+
+const textTypeClass = computed(() => {
+  const type = (props.textType || "none").toLowerCase();
+  if (type === "uppercase") return "text-uppercase";
+  if (type === "lowercase") return "text-lowercase";
+  if (type === "capitalize") return "text-capitalize";
+  return "";
+});
+</script>
diff --git a/src/frontend/src/components/table/cells/TagList.vue b/src/frontend/src/components/table/cells/TagList.vue
new file mode 100644
index 000000000..cf796dd1b
--- /dev/null
+++ b/src/frontend/src/components/table/cells/TagList.vue
@@ -0,0 +1,139 @@
+<template>
+  <div
+    class="row items-start no-wrap q-py-xs"
+    style="max-width: 230px"
+    @click.stop
+  >
+    <div class="col row items-center q-gutter-xs wrap">
+      <q-chip
+        v-for="(tag, i) in visibleTags"
+        :key="i"
+        :color="$q.dark.isActive ? 'grey-5' : 'blue-grey-7'"
+        dense
+        outline
+        square
+        size="11px"
+        @click.stop
+        class="q-my-none text-weight-medium"
+        :style="{ borderColor: $q.dark.isActive ? '#555' : '#cfd8dc', height: '20px' }"
+      >
+        #
+        <span
+          style="
+            max-width: 85px;
+            font-weight: 550;
+            letter-spacing: 0.6px;
+            padding-left: 2px;
+          "
+          class="ellipsis"
+        >
+          {{ tag.name }}
+        </span>
+        <q-tooltip v-if="tag.name.length > 8">{{ tag.name }}</q-tooltip>
+      </q-chip>
+
+      <q-chip
+        v-if="hiddenCount > 0"
+        :color="$q.dark.isActive ? 'grey-9' : 'grey-2'"
+        :text-color="$q.dark.isActive ? 'grey-3' : 'blue-grey-9'"
+        dense
+        clickable
+        square
+        class="q-my-none text-weight-bold q-px-sm"
+        style="font-size: 10px; height: 20px"
+      >
+        +{{ hiddenCount }} more...
+
+        <q-menu
+          anchor="bottom left"
+          self="top left"
+          :class="[$q.dark.isActive ? 'bg-grey-9 border-grey-8' : 'bg-white border-grey-3', 'shadow-5']"
+        >
+          <div class="column q-pa-sm" style="min-width: 200px">
+            <div
+              class="text-caption text-weight-bold q-mb-xs q-px-xs"
+              :class="$q.dark.isActive ? 'text-grey-4' : 'text-blue-grey-7'"
+            >
+              ADDITIONAL TAGS
+            </div>
+            <q-separator class="q-mb-sm" />
+            <div class="row q-gutter-xs wrap">
+              <q-chip
+                v-for="(tag, i) in hiddenTags"
+                :key="i"
+                :class="$q.dark.isActive ? 'text-grey-5' : 'text-blue-grey-7'"
+                dense
+                outline
+                square
+                size="10px"
+                :ripple="false"
+                style="cursor: default !important;"
+              >
+                #
+                <span
+                  style="
+                    font-weight: 550;
+                    letter-spacing: 0.6px;
+                    padding-left: 2px;
+                  "
+                  class="ellipsis"
+                >
+                  {{ tag.name }}</span
+                >
+              </q-chip>
+            </div>
+          </div>
+        </q-menu>
+      </q-chip>
+    </div>
+
+    <div class="q-pl-sm column">
+      <q-btn
+        round
+        size="sm"
+        icon="add"
+        color="grey-4"
+        text-color="blue-grey-9"
+        unelevated
+        @click.stop="$emit('add', row)"
+      >
+        <q-tooltip>Edit Tags</q-tooltip>
+      </q-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useQuasar } from "quasar";
+import { LineCounter } from "yaml";
+
+const $q = useQuasar();
+
+const props = defineProps({
+  tags: {
+    type: Array,
+    default: () => [],
+  },
+  row: {
+    type: Object,
+    required: true,
+  },
+  limit: {
+    type: Number,
+    default: 4,
+  },
+});
+
+const emit = defineEmits(["add"]);
+
+const visibleTags = computed(() => props.tags?.slice(0, props.limit) || []);
+const hiddenTags = computed(() => props.tags?.slice(props.limit) || []);
+const hiddenCount = computed(() => hiddenTags.value.length);
+</script>
+
+<style scoped>
+.wrap {
+  row-gap: 4px;
+}
+</style>
diff --git a/src/frontend/src/constants/tableStyles.js b/src/frontend/src/constants/tableStyles.js
new file mode 100644
index 000000000..585c42bf6
--- /dev/null
+++ b/src/frontend/src/constants/tableStyles.js
@@ -0,0 +1,109 @@
+import { colors } from 'quasar'
+
+// We define a Quasar class for Light mode, and a lighter variant for Dark mode
+export const CONCEPT_STYLES = {
+  entrypoint: { 
+    icon: 'account_tree', 
+    color: 'orange-13',
+    darkColor: 'orange-5', 
+    basePath: 'entrypoints' 
+  },
+  experiment: { 
+    icon: 'science', 
+    color: 'primary', 
+    darkColor: 'blue-4', // Assuming primary is blue-ish
+    basePath: 'experiments' 
+  },
+  queue: { 
+    icon: 'queue', 
+    color: 'blue-grey-6', 
+    darkColor: 'blue-grey-3', 
+    basePath: 'queues' 
+  },
+  plugin: { 
+    icon: 'extension', 
+    color: 'teal-7', 
+    darkColor: 'teal-2', 
+    basePath: 'plugins' 
+  },
+  file: {
+    icon: 'file_copy',
+    color: 'green-9',
+    darkColor: 'green-4',
+    basePath: 'plugins'
+  },
+  job: { 
+    icon: 'outbound', 
+    color: 'indigo-6', 
+    darkColor: 'indigo-3',
+    basePath: 'jobs' 
+  },  
+  group: { 
+    icon: 'person', 
+    color: 'grey-8', 
+    darkColor: 'grey-5', 
+    basePath: 'groups' 
+  },
+  artifact: { 
+    icon: 'sim_card_download', 
+    color: 'brown-6', 
+    darkColor: 'brown-3', 
+    basePath: 'artifacts' 
+  },
+  task: {
+    icon: 'functions', 
+    color: 'black', 
+    darkColor: 'grey-4', 
+    basePath: 'plugin',
+  },
+  tag: {
+    icon: 'tag', 
+    color: 'grey-9', 
+    darkColor: 'grey-5',
+    basePath: 'tags',
+  },
+  parameterType: {
+    icon: 'shape_line',
+    color: 'red-10', // slightly darker for text/lines
+    darkColor: 'red-4',
+    basePath: 'pluginParams'
+  },
+  default: { 
+    icon: 'help_outline', 
+    color: 'grey-7', 
+    darkColor: 'grey-5',
+    basePath: '' 
+  }
+}
+
+/**
+ * Returns the style object.
+ * NOTE: The 'color' property returned here is still the CLASS NAME string.
+ */
+export function getConceptStyle(type) {
+  return CONCEPT_STYLES[type] || CONCEPT_STYLES.default
+}
+
+/**
+ * Returns the HEX CODE for use in :style bindings.
+ * Automatically handles Dark Mode toggle.
+ */
+export function getConceptColorHex(type, isDarkMode = false) {
+  const style = getConceptStyle(type)
+  
+  // 1. Pick the correct Quasar class name based on mode
+  const colorClass = isDarkMode && style.darkColor ? style.darkColor : style.color
+  
+  // 2. Handle Edge Case: "black" or "white" are standard CSS, not Palette names
+  if (['black', 'white', 'transparent'].includes(colorClass)) {
+    return colorClass
+  }
+  
+  // 3. Convert Quasar class (e.g. 'orange-8') to Hex (e.g. '#ef6c00')
+  try {
+    return colors.getPaletteColor(colorClass)
+  } catch (e) {
+    // Fallback if Quasar can't parse it
+    return '#808080' 
+  }
+}
\ No newline at end of file
diff --git a/src/frontend/src/dialogs/ArtifactParamDialog.vue b/src/frontend/src/dialogs/ArtifactParamDialog.vue
index e3dc517cf..74eb689dd 100644
--- a/src/frontend/src/dialogs/ArtifactParamDialog.vue
+++ b/src/frontend/src/dialogs/ArtifactParamDialog.vue
@@ -2,7 +2,7 @@
   <q-dialog v-model="showDialog" :persistent="true">
     <q-card>
       <q-card-section class="bg-primary text-white text-h6">
-        <div class="text-h6">Create Artifact Parameter</div>
+        <div class="text-h6">{{ editParam ? 'Edit' : 'Create' }} Artifact Parameter</div>
       </q-card-section>
       <q-card-section>
         <q-form ref="artifactParamForm" greedy @submit.prevent="addArtifactParam" id="artifactForm">
@@ -102,6 +102,13 @@ const showDialog = defineModel()
 
 const emit = defineEmits(['submit'])
 
+const props = defineProps({
+  editParam: {
+    type: Object,
+    default: null
+  }
+})
+
 const outputParams = ref([])
 const outputParam = ref({
   name: '',
@@ -120,20 +127,22 @@ function requiredRule(val) {
 }
 
 watch(showDialog, (newVal) => {
-  getPluginParameterTypes()
-  if(!newVal) {
-    artifactParam.value = {
-      name: '',
-      outputParams: []
-    }
-    outputParam.value = {
-      name: '',
-      parameterType: ''
+  if (newVal) {
+    getPluginParameterTypes()
+    
+    if (props.editParam) {
+      artifactParam.value.name = props.editParam.name
+      // Deep copy to prevent modifying the parent state directly before confirming
+      outputParams.value = JSON.parse(JSON.stringify(props.editParam.outputParams))
+    } else {
+      artifactParam.value = { name: '', outputParams: [] }
+      outputParams.value = []
     }
+    outputParam.value = { name: '', parameterType: '' }
+  } else {
     resetForm()
   }
 })
-
 async function getPluginParameterTypes() {
   try {
     const res = await api.getData('pluginParameterTypes', { rowsPerPage: 0 })
@@ -173,8 +182,8 @@ function addArtifactParam() {
 }
 
 function resetForm() {
-  artifactParam.value ={}
-  artifactParamForm.value.reset()
+  artifactParam.value = {}
+  artifactParamForm.value?.reset()
   outputParam.value = {}
   outputParams.value = []
   outputParamForm.value?.reset()
diff --git a/src/frontend/src/dialogs/ImportPluginTasksDialog.vue b/src/frontend/src/dialogs/ImportPluginTasksDialog.vue
index 2a76fe317..5f849e1ce 100644
--- a/src/frontend/src/dialogs/ImportPluginTasksDialog.vue
+++ b/src/frontend/src/dialogs/ImportPluginTasksDialog.vue
@@ -166,7 +166,7 @@
 <script setup>
 import { ref, watch, computed } from 'vue'
 import * as api from '@/services/dataApi'
-import TableComponent from '@/components/TableComponent.vue'
+import TableComponent from '@/components/table/TableComponent.vue'
 import * as notify from '../notify'
 
 const props = defineProps(['pythonCode', 'pluginParameterTypes', 'existingTasks'])
diff --git a/src/frontend/src/router/index.ts b/src/frontend/src/router/index.ts
index dc5e8e29c..46ca5d8c8 100644
--- a/src/frontend/src/router/index.ts
+++ b/src/frontend/src/router/index.ts
@@ -124,6 +124,11 @@ const router = createRouter({
       path: '/groups/admin',
       component: () => import('../views/GroupsAdminView.vue')
     },
+    // Temporary redirect for badge icons passing hardcoded group IDs
+    {
+      path: '/groups/:id',
+      redirect: '/groups'
+    },
     {
       path: '/tags',
       component: () => import('../views/TagsView.vue'),
diff --git a/src/frontend/src/views/ArtifactsView.vue b/src/frontend/src/views/ArtifactsView.vue
index a40113a09..41488c2c5 100644
--- a/src/frontend/src/views/ArtifactsView.vue
+++ b/src/frontend/src/views/ArtifactsView.vue
@@ -1,41 +1,45 @@
 <template>
-  <PageTitle title="Artifacts" />
+  <PageTitle
+    title="Artifacts"
+    caption="Objects saved from Jobs"
+    conceptType="artifact"
+  />
+
   <TableComponent
+    ref="tableRef"
     :rows="artifacts"
-    :columns="columns"
+    :columns="computedColumns"
     title="Artifacts"
     v-model:selected="selected"
     @open="openTab => (openTab
       ? openWindow.open(`/artifacts/${selected[0].id}`, '_blank')
       : router.push(`/artifacts/${selected[0].id}`)
     )"
-    @delete="showDeleteDialog = true"
     @request="getArtifacts"
-    ref="tableRef"
+    :loading="isLoading"
     :hideCreateBtn="true"
     :hideDeleteBtn="true"
-    :loading="isLoading"
+    @delete="
+      (row) => {
+        selected = [row];
+        showDeleteDialog = true;
+      }
+    "
+    @editTags="
+      (row) => {
+        editObjTags = row;
+        showTagsDialog = true;
+      }
+    "
   >
-    <template #body-cell-job="props">
-      <q-btn
-        color="primary"
-        :to="`/jobs/${props.row.job}`"
-        :label="`View Job ${props.row.job}`"
-      />
-    </template>
-    <template #body-cell-taskName="props">
-      {{ props.row.task.name }}
-    </template>
     <template #body-cell-taskOutputParams="props">
-      <q-chip
-        v-for="param in props.row.task.outputParams"
-        color="purple"
-        text-color="white"
-        dense
-      >
-        {{ param.name }}: {{ param.parameterType.name }}
-      </q-chip>
+      <ParameterList
+        :items="props.row.task?.outputParams || []"
+        type="output"
+        layout="horizontal"
+      />
     </template>
+
     <template #body-cell-download="props">
       <q-btn
         color="primary"
@@ -44,168 +48,216 @@
         size="sm"
         @click.stop="downloadFile(props.row.fileUrl, `artifact-${props.row?.id}`, props.row.id)"
         :loading="downloadingId === props.row.id"
-      />
+      >
+        <q-tooltip>Download Artifact</q-tooltip>
+      </q-btn>
     </template>
   </TableComponent>
 
-  <ArtifactsDialog 
+  <ArtifactsDialog
     v-model="showAddEditDialog"
     @addArtifact="addArtifact"
     @updateArtifact="updateArtifact"
     :editArtifact="selected.length && editing ? selected[0] : ''"
   />
-  <DeleteDialog 
+
+  <DeleteDialog
     v-model="showDeleteDialog"
     @submit="deleteModel"
-    type="Model"
-    :name="selected.length ? selected[0].description : ''"
+    type="Artifact"
+    :name="selected[0]?.description || ''"
   />
-  <AssignTagsDialog 
+
+  <AssignTagsDialog
     v-model="showTagsDialog"
     :editObj="editObjTags"
+    type="artifacts"
     @submitTags="submitTags"
   />
 </template>
 
 <script setup>
-import TableComponent from '@/components/TableComponent.vue'
-import ArtifactsDialog from '@/dialogs/ArtifactsDialog.vue'
-import DeleteDialog from '@/dialogs/DeleteDialog.vue'
-import { ref, watch } from 'vue'
-import * as api from '@/services/dataApi'
-import * as notify from '../notify'
-import PageTitle from '@/components/PageTitle.vue'
-import AssignTagsDialog from '@/dialogs/AssignTagsDialog.vue'
-import { useRouter } from 'vue-router'
+import { ref, computed, watch } from "vue";
+import { useRouter } from "vue-router";
+import TableComponent from "@/components/table/TableComponent.vue";
+import ParameterList from "@/components/table/cells/ParameterList.vue";
+import PageTitle from "@/components/PageTitle.vue";
+import ArtifactsDialog from "@/dialogs/ArtifactsDialog.vue";
+import DeleteDialog from "@/dialogs/DeleteDialog.vue";
+import AssignTagsDialog from "@/dialogs/AssignTagsDialog.vue";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
 
 const openWindow = window
-const router = useRouter()
+const router = useRouter();
+const tableRef = ref(null);
 
-const selected = ref([])
-const editing = ref(false)
+const artifacts = ref([]);
+const isLoading = ref(false);
+const selected = ref([]);
+const editing = ref(false);
 
-const showAddEditDialog = ref(false)
-const showDeleteDialog = ref(false)
-const showTagsDialog = ref(false)
+const showAddEditDialog = ref(false);
+const showDeleteDialog = ref(false);
+const showTagsDialog = ref(false);
+const editObjTags = ref({});
 
 watch(showAddEditDialog, (newVal) => {
-  if(!newVal) editing.value = false
-})
+  if (!newVal) editing.value = false;
+});
 
-const artifacts = ref([])
+// Column Definitions
+const computedColumns = computed(() => [
+  {
+    name: "id",
+    label: "Artifact ID",
+    field: "id",
+    align: "left",
+    styleType: "icon-badge",
+    conceptType: "artifact",
+    showIcon: true,
+    size: "md",
+    uppercase: false,
+    formatLabel: "Artifact #{label}",
+  },
+  {
+    name: "description",
+    label: "Description",
+    field: "description",
+    align: "left",
+    styleType: "long-text",
+    maxWidth: "250px",
+    maxLength: 80,
+    useQuotes: true,
+    sortable: true,
+  },
+  {
+    name: "job",
+    label: "Job",
+    field: (row) => ({ id: row.job, name: row.job }),
+    align: "left",
+    styleType: "icon-badge", 
+    conceptType: "job",
+    size: "md",
+    sortable: true,
+    clickable: true, 
+  },
+  {
+    name: "taskName",
+    label: "Task Name",
+    align: "left",
+    styleType: "icon-badge",
+    conceptType: "task",
+    uppercase: false,
+    chipType: "outline",
+    field: (row) => {
+      if (!row.task) return "-";
+      return {
+        name: row.task.name,
+        to: `/plugins/${row.task.pluginResourceId}/files/${row.task.pluginFileResourceId}` 
+      };
+    },
+  },
+  {
+    name: "taskOutputParams",
+    label: "Output Params",
+    field: "taskOutputParams",
+    align: "left",
+    style: "min-width: 200px; width: 300px; white-space: normal;",
+  },
+  {
+    name: "download",
+    label: "Download",
+    align: "center",
+    style: "width: 50px",
+  },
+]);
 
-const isLoading = ref(false)
+const downloadingId = ref(null);
+
+async function downloadFile(url, filename, id) {
+  downloadingId.value = id;
+  try {
+    await api.downloadFile(url, filename);
+    notify.success(`Successfully downloaded file: ${filename}`);
+  } catch (err) {
+    console.warn(err);
+    notify.error(`Error downloading file ${filename}`);
+  } finally {
+    downloadingId.value = null;
+  }
+}
 
 async function getArtifacts(pagination) {
-  isLoading.value = true
-  const minLoadTimePromise = new Promise(resolve => setTimeout(resolve, 300)); 
-  if(!pagination.sortBy) {
-    pagination.sortBy = 'job'
-    pagination.descending = true
+  isLoading.value = true;
+  const minLoadTimePromise = new Promise((resolve) => setTimeout(resolve, 300));
+
+  if (!pagination.sortBy) {
+    pagination.sortBy = "job";
+    pagination.descending = true;
   }
+
   try {
     const [res] = await Promise.all([
-      api.getData('artifacts', pagination),
-      minLoadTimePromise
+      api.getData("artifacts", pagination),
+      minLoadTimePromise,
     ]);
-    
-    artifacts.value = res.data.data
-    tableRef.value.updateTotalRows(res.data.totalNumResults)
-  } catch(err) {
-    console.log('err = ', err);
-    notify.error(err.response.data.message);
+
+    artifacts.value = res.data.data;
+    tableRef.value.updateTotalRows(res.data.totalNumResults);
+  } catch (err) {
+    console.error(err);
+    notify.error(err.response?.data?.message || "Failed to fetch artifacts");
   } finally {
     isLoading.value = false;
   }
 }
 
-const columns = [
-  { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: false, },
-  { name: 'description', label: 'Description', field: 'description', align: 'left', sortable: true },
-  { name: 'job', label: 'Job', align: 'left' },
-  { name: 'taskName', label: 'Task Name', align: 'left' },
-  { name: 'taskOutputParams', label: 'Task Output Params', align: 'left' },
-  { name: 'download', label: 'Download', align: 'center' },
-]
-
 async function addArtifact(name, group, description) {
   try {
-    const res = await api.addItem('models', {
-      name,
-      description,
-      group
-    })
-    showAddEditDialog.value = false
-    notify.success(`Successfully created '${res.data.name}'`)
-    tableRef.value.refreshTable()
-  } catch(err) {
-    notify.error(err.response.data.message)
-  } 
-}
-
-async function deleteModel() {
-  try {
-    await api.deleteItem('models', selected.value[0].id)
-    notify.success(`Successfully deleted '${selected.value[0].description}'`)
-    showDeleteDialog.value = false
-    selected.value = []
-    tableRef.value.refreshTable()
-  } catch(err) {
-    notify.error(err.response.data.message);
+    const res = await api.addItem("models", { name, description, group });
+    showAddEditDialog.value = false;
+    notify.success(`Successfully created '${res.data.name}'`);
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message);
   }
 }
 
-const fileColumns = [
-  { name: 'versionNumber', label: 'versionNumber', align: 'left', field: 'versionNumber', sortable: true, },
-  { name: 'url', label: 'URL', align: 'left', field: 'url', sortable: true, },
-]
-
-const tableRef = ref(null)
-
 async function updateArtifact(id, description) {
   try {
-    await api.updateItem('artifacts', id, { description })
-    notify.success(`Successfully updated artifact`)
-    showAddEditDialog.value = false
-    selected.value = []
-    tableRef.value.refreshTable()
-  } catch(err) {
-    notify.error(err.response.data.message)
+    await api.updateItem("artifacts", id, { description });
+    notify.success(`Successfully updated artifact`);
+    showAddEditDialog.value = false;
+    selected.value = [];
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message);
   }
 }
 
-const editObjTags = ref({})
-
-function handleTags(obj) {
-  editObjTags.value = obj
-  showTagsDialog.value = true
-}
-
-async function submitTags(selectedTagIDs) {
-  showTagsDialog.value = false
+async function deleteModel() {
   try {
-    await api.updateTags('artifacts', editObjTags.value.id, selectedTagIDs)
-    notify.success(`Successfully updated Tags for '${editObjTags.value.name}'`)
-    tableRef.value.refreshTable()
-  } catch(err) {
-    console.log('err = ', err)
-    notify.error(err.response.data.message);
+    const id = selected.value[0].id;
+    await api.deleteItem("models", id);
+    notify.success(`Successfully deleted artifact`);
+    showDeleteDialog.value = false;
+    selected.value = [];
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message);
   }
 }
 
-const downloadingId = ref(null)
-
-async function downloadFile(url, filename, id) {
-  downloadingId.value = id
+async function submitTags(selectedTagIDs) {
+  showTagsDialog.value = false;
   try {
-    await api.downloadFile(url, filename);
-    notify.success(`Successfully downloaded file: ${filename}`);
+    await api.updateTags("artifacts", editObjTags.value.id, selectedTagIDs);
+    notify.success(`Successfully updated Tags`);
+    tableRef.value.refreshTable();
   } catch (err) {
-    console.warn(err);
-    notify.error(`Error downloading file ${filename}`);
-  } finally {
-    downloadingId.value = null
+    console.error(err);
+    notify.error(err.response?.data?.message);
   }
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/frontend/src/views/CreateEntryPoint.vue b/src/frontend/src/views/CreateEntryPoint.vue
index 993ec25fc..e805811c0 100644
--- a/src/frontend/src/views/CreateEntryPoint.vue
+++ b/src/frontend/src/views/CreateEntryPoint.vue
@@ -2,7 +2,8 @@
   <div class="row items-center justify-between">
     <div class="row items-center">
       <PageTitle 
-        :title="route.params.id === 'new' ? 'Create Entrypoint' : copyAtEditStart?.name"
+        :subtitle="pageSubtitle"
+        conceptType="entrypoint" 
       />
       <q-chip
         v-if="route.params.id !== 'new'"
@@ -31,90 +32,78 @@
       />
     </div>
   </div>
+
   <fieldset class="q-px-lg q-mt-lg" :class="history ? `disabled` : ``">
     <legend>Basic Info</legend>
-    <q-form ref="basicInfoForm" greedy :style="{ 'pointer-events': history ? 'none' : '' }">
+    <q-form ref="basicInfoForm" greedy :style="{ 'pointer-events': history ? 'auto' : '' }">
       <div class="row">
         <div :class="`${isMobile ? 'col-12' : 'col-6'} q-mr-xl`">
+          
           <q-input 
             outlined 
             dense 
             v-model.trim="entryPoint.name"
             :rules="[requiredRule]"
-            class="q-mb-sm q-mt-md"
+            class="q-mb-md q-mt-md"
             aria-required="true"
             :disable="history"
+            input-class="text-h6 text-weight-bold"
           >
             <template v-slot:before>
-              <label :class="`field-label`">Name:</label>
+              <label class="field-label" style="width: 60px">Name:</label>
             </template>
           </q-input>
-          <q-select
-            outlined 
-            v-model="entryPoint.group" 
+
+          <ResourcePicker
+            v-model="entryPoint.group"
+            type="group"
             :options="store.groups"
-            option-label="name"
             option-value="id"
-            emit-value
-            map-options
-            dense
-            :rules="[requiredRule]"
-            aria-required="true"
+            @filter="getGroups"
             :disable="history"
-            class="q-mb-sm"
+            input-debounce="300"
+            class="q-mb-md"
           >
             <template v-slot:before>
-              <div class="field-label">Group:</div>
-            </template>  
-          </q-select>
-          <q-select
+              <label class="field-label" style="width: 60px">Group:</label>
+            </template>
+          </ResourcePicker>
+
+          <ResourcePicker
             v-if="!history"
-            outlined
-            dense
             v-model="entryPoint.queues"
-            use-input
-            use-chips
-            multiple
-            map-options
-            option-label="name"
-            option-value="id"
-            input-debounce="100"
+            type="queue"
             :options="queues"
+            option-value="id"
             @filter="getQueues"
-            class="q-mb-md"
             :disable="history"
+            input-debounce="300"
+            class="q-mb-md"
+            chip-outline
           >
             <template v-slot:before>
-              <div class="field-label">Queues:</div>
-            </template>  
-            <template v-slot:selected-item="scope">
-              <q-chip
-                :label="scope.opt.name"
-                removable
-                dense
-                @remove="scope.removeAtIndex(scope.index)"
-                :tabindex="scope.tabindex"
-                color="primary"
-                text-color="white"
-              />
+               <label class="field-label" style="width: 60px">Queues:</label>
             </template>
-          </q-select>
+          </ResourcePicker>
+
           <div v-else class="row items-center q-mb-md">
-            <label class="field-label">Queues:</label>
+            <label class="field-label" style="width: 60px">Queues:</label>
             <div 
               class="col" 
-              style="border: 1px solid lightgray; border-radius: 4px; padding: 5px 8px; margin-left: 6px;"
+              style="border: 1px solid lightgray; border-radius: 4px; padding: 5px 8px; margin-left: 10px;"
             >
               <q-icon
                 name="sym_o_info"
-                size="2em"
+                size="1.5em"
                 color="grey"
                 class="q-mr-sm"
               />
-              Queues are not yet available in Entrypoint snapshots
+              <span class="text-grey-7">Queues not available in snapshots</span>
             </div>
           </div>
+
         </div>
+
         <div class="col">
           <q-input 
             outlined 
@@ -123,10 +112,11 @@
             type="textarea"
             :disable="history"
             class="q-mt-md"
-            input-style="height: 173px"
+            input-style="height: 173px; line-height: 1.5;"
+            input-class="text-body1 text-grey-8"
           >
             <template v-slot:before>
-              <label :class="`field-label`">Description:</label>
+              <label class="field-label">Description:</label>
             </template>
           </q-input>
         </div>
@@ -152,6 +142,12 @@
           @create="selectedParam = null; showEntrypointParamDialog = true;"
           style="margin-top: 0;"
         >
+                  <template #body-cell-name="props">
+            <div style="font-size: 15px;">
+              {{ props.row.name }}
+            </div>
+          </template>
+
           <template #body-cell-defaultValue="props">
             <q-chip
               v-if="props.row.defaultValue === null"
@@ -192,6 +188,7 @@
           </template>
         </TableComponent>
       </div>
+
       <div class="col">
         <TableComponent
           :rows="entryPoint.artifactParameters"
@@ -206,43 +203,58 @@
           :showAll="true"
           rightCaption="*Click parameter to edit, or X to delete"
           style="margin-top: 0;"
-          @create="showArtifactParamDialog = true"
+          @create="selectedArtifactParam = null; showArtifactParamDialog = true"
         >
           <template #body-cell-name="props">
-            <div style="font-size: 18px;">
+            <div style="font-size: 15px;">
               {{ props.row.name }}
-              <q-btn icon="edit" round size="sm" color="primary" flat />
             </div>
-            <q-popup-edit v-model="props.row.name" v-slot="scope">
-              <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
-            </q-popup-edit>
           </template>
+          
+          <template #body-cell-actions="props">
+            <q-btn 
+              icon="edit"
+              round size="sm"
+              color="primary"
+              flat
+              class="q-mr-sm"
+              @click="
+                selectedArtifactParam = props.row;
+                selectedArtifactParamIndex = props.rowIndex;
+                showArtifactParamDialog = true;
+              "
+            />
+            <q-btn 
+              icon="sym_o_delete"
+              round size="sm"
+              color="negative"
+              flat
+              @click="selectedArtifactParamProps = props; showDeleteDialogArtifactParam = true"
+            />
+          </template>
+          
           <template #body-cell-outputParams="props">
-            <div v-for="(param, i) in props.row.outputParams" :key="i">
-              <q-chip
-                color="purple"
-                text-color="white"
-                dense
-                clickable
-                removable
-                @click="handleSelectedParam('edit', props, i, 'outputParams', 'artifacts'); showEditArtifactParamDialog = true; console.log('param = ', param)"
-                @remove="entryPoint.artifactParameters[props.rowIndex].outputParams.splice(i, 1)"
-                :label="`${param.name}: ${param.parameterType.name}`"
-              />
-              <div v-if="!param.parameterType" class="text-white q-mr-sm q-my-xs bg-red q-pa-xs rounded-borders">
-                Resolve missing type above
+            <div class='row q-gutter-x-md justify-between'>
+             <ParameterList 
+                :items="props.row.outputParams" 
+                type="output" 
+                @click="(param, i) => { handleSelectedParam('edit', props, i, 'outputParams', 'artifacts'); showEditArtifactParamDialog = true; }"
+             />
+              <div>
+                <q-btn
+                  round
+                  size="xs"
+                  icon="add"
+                  color="grey-5"
+                  text-color="black"
+                  class="q-mr-xs q-my-xs"
+                  @click="handleSelectedParam('create', props, 0, 'outputParams', 'artifacts'); showEditArtifactParamDialog = true"
+                />
+                <q-tooltip> Add Output Parameters </q-tooltip> 
               </div>
             </div>
-            <q-btn
-              round
-              size="xs"
-              icon="add"
-              color="grey-5"
-              text-color="black"
-              class="q-mr-xs q-my-xs"
-              @click="handleSelectedParam('create', props, i, 'outputParams', 'artifacts'); showEditArtifactParamDialog = true"
-            />
           </template>
+
           <template #body-cell-delete="props">
             <q-btn 
               icon="sym_o_delete"
@@ -260,7 +272,7 @@
   <fieldset class="q-px-lg q-mt-lg q-pt-lg" :class="history ? `disabled` : ``">
     <legend>Task Graph Info</legend>
     <div class="row" :style="{ 'pointer-events': history ? 'none' : '' }">
-      <div :class="`${isMobile ? 'col-12 q-mb-xl' : 'col-6'} q-mr-xl`">
+      <div :class="`${isMobile ? 'col-12 q-mb-xl' : 'col-6'} q-mr-lg`">
         <h2>Task Graph</h2>
         <p class="text-caption q-mb-none text-grey-8 q-pl-xs">
           Use "Add to Task Graph" button in Plugin Tasks table to insert YAML, and 
@@ -285,55 +297,45 @@
       
       <div class="col">
         <h2>Task Plugins</h2>
+        <div class="q-ma-none text-grey-8" >Attached Plugins:</div>
         <AssignPluginsDropdown
           v-model:selectedPlugins="entryPoint.plugins"
           v-model:pluginIDsToUpdate="pluginIDsToUpdate"
           v-model:pluginIDsToRemove="pluginIDsToRemove"
-          class="q-mt-lg"
+          class="q-mt-sm"
         />
+         <div class="q-mt-md text-grey-8" >Function Tasks:</div>
         <TableComponent
           :rows="tasks"
           :columns="taskColumns"
-          title="Function Tasks"
           :hideToggleDraft="true"
           :hideSearch="true"
           :disableSelect="true"
           :hideOpenBtn="true"
           :hideDeleteBtn="true"
           :hideCreateBtn=true
+          style = "margin-top:10px !important"
         >
+          <template #body-cell-pluginName="props">
+            <BadgeIcon :label="props.row.pluginName" type="plugin" :show-icon="true" size="sm" :mini="true" :uppercase="false" />
+          </template>
+
+          <template #body-cell-taskName="props">
+            <ResourceName :text="props.row.name" concept-type="task" :minimal="true" />
+          </template>
+
           <template #body-cell-inputParams="props">
-            <div v-for="(param, i) in props.row.inputParams" :key="i">
-              <q-chip
-                color="indigo"
-                text-color="white"
-                dense
-                clickable
-                class="q-mr-none"
-              >
-                {{ `${param.name}` }}
-                <span v-if="param.required" class="text-red">*</span>
-                : {{ param.parameterType.name }}
-              </q-chip>
-            </div>
+            <ParameterList :items="props.row.inputParams" type="input" />
           </template>
+
           <template #body-cell-outputParams="props">
-            <div v-for="(param, i) in props.row.outputParams" :key="i">
-              <q-chip
-                color="purple"
-                text-color="white"
-                dense
-                clickable
-                class="q-mr-none"
-              >
-                {{ `${param.name}` }}
-                <span v-if="param.required" class="text-red">*</span>
-                : {{ param.parameterType.name }}
-              </q-chip>
-            </div>
+            <ParameterList :items="props.row.outputParams" type="output" />
           </template>
+
           <template #body-cell-add="props">
-            <q-btn icon="add" round size="xs" color="grey-5" text-color="black" @click="addToTaskGraph(props.row)" />
+            <q-btn icon="add" round size="xs" color="grey-5" text-color="black" @click="addToTaskGraph(props.row)">
+               <q-tooltip>Add to Task Graph YAML</q-tooltip>
+            </q-btn>
           </template>
         </TableComponent>
       </div>
@@ -362,40 +364,41 @@
       
       <div class="col">
         <h2>Artifact Task Plugins</h2>
+        <div class="q-ma-none text-grey-8" >Attached Plugins:</div>
         <AssignPluginsDropdown
           v-model:selectedPlugins="entryPoint.artifactPlugins"
           v-model:pluginIDsToUpdate="artifactPluginIDsToUpdate"
           v-model:pluginIDsToRemove="artifactPluginIDsToRemove"
           class="q-mt-lg"
         />
+         <div class="q-mt-md text-grey-8" >Artifact Tasks:</div>
         <TableComponent
           :rows="artifactTasks"
           :columns="artifactTaskColumns"
-          title="Artifact Tasks"
           :hideToggleDraft="true"
           :hideSearch="true"
           :disableSelect="true"
           :hideOpenBtn="true"
           :hideDeleteBtn="true"
           :hideCreateBtn=true
+          style="margin-top:10px !important"
         >
+          <template #body-cell-pluginName="props">
+            <BadgeIcon :label="props.row.pluginName" type="plugin" :show-icon="true" :mini="true"  :uppercase="false" size="sm" />
+          </template>
+
+          <template #body-cell-taskName="props">
+            <ResourceName :text="props.row.name" concept-type="task" :minimal="true" />
+          </template>
+
           <template #body-cell-outputParams="props">
-            <div v-for="(param, i) in props.row.outputParams" :key="i">
-              <q-chip
-                color="purple"
-                text-color="white"
-                dense
-                clickable
-                class="q-mr-none"
-              >
-                {{ `${param.name}` }}
-                <span v-if="param.required" class="text-red">*</span>
-                : {{ param.parameterType.name }}
-              </q-chip>
-            </div>
+            <ParameterList :items="props.row.outputParams" type="output" />
           </template>
+
           <template #body-cell-add="props">
-            <q-btn icon="add" round size="xs" color="grey-5" text-color="black" @click="addToArtifactGraph(props.row)" />
+            <q-btn icon="add" round size="xs" color="grey-5" text-color="black" @click="addToArtifactGraph(props.row)">
+               <q-tooltip>Add to Artifact Graph YAML</q-tooltip>
+            </q-btn>
           </template>
         </TableComponent>
       </div>
@@ -449,7 +452,8 @@
   />
   <ArtifactParamDialog
     v-model="showArtifactParamDialog"
-    @submit="addArtifactParam"
+    :editParam="selectedArtifactParam"
+    @submit="handleArtifactParamSubmit"
   />
   <LeaveFormDialog 
     v-model="showLeaveDialog"
@@ -497,13 +501,19 @@
   import * as api from '@/services/dataApi'
   import * as notify from '../notify'
   import PageTitle from '@/components/PageTitle.vue'
-  import TableComponent from '@/components/TableComponent.vue'
+  import TableComponent from '@/components/table/TableComponent.vue'
   import LeaveFormDialog from '@/dialogs/LeaveFormDialog.vue'
   import ReturnToFormDialog from '@/dialogs/ReturnToFormDialog.vue'
   import InfoPopupDialog from '@/dialogs/InfoPopupDialog.vue'
   import ArtifactParamDialog from '@/dialogs/ArtifactParamDialog.vue'
   import EditPluginTaskParamDialog from '@/dialogs/EditPluginTaskParamDialog.vue'
   import AssignPluginsDropdown from '@/components/AssignPluginsDropdown.vue'
+  import ResourcePicker from "@/components/ResourcePicker.vue";
+  
+
+  import ResourceName from '@/components/table/cells/ResourceName.vue'
+  import BadgeIcon from '@/components/table/cells/BadgeIcon.vue'
+  import ParameterList from '@/components/table/cells/ParameterList.vue'
 
   const route = useRoute()
   
@@ -514,6 +524,20 @@
   const isMobile = inject('isMobile')
   const darkMode = inject('darkMode')
 
+  const selectedArtifactParam = ref(null)
+  const selectedArtifactParamIndex = ref(-1)
+
+  function handleArtifactParamSubmit(param) {
+    if (selectedArtifactParam.value) {
+      // Update existing parameter
+      entryPoint.value.artifactParameters[selectedArtifactParamIndex.value] = { ...param }
+    } else {
+      // Create new parameter
+      entryPoint.value.artifactParameters.push({ ...param })
+    }
+    showArtifactParamDialog.value = false
+  }
+
   const history = computed(() => {
     return store.showRightDrawer
   })
@@ -535,6 +559,7 @@
     artifactPlugins: [],
   })
 
+
   const ORIGINAL_COPY = {
     name: '',
     group: store.loggedInGroup.id,
@@ -548,6 +573,20 @@
     artifactPlugins: [],
   }
 
+  const pageSubtitle = computed(() => {
+    if (route.params.id === 'new') {
+      return 'Create Entrypoint'
+    }
+    
+    // 2. Handling History / Snapshots
+    if (history.value && store.selectedSnapshot) {
+      return `${entryPoint.value.name || 'Loading...'} (Snapshot ${store.selectedSnapshot.snapshot})`
+    }
+    
+    // 3. Standard view 
+    return copyAtEditStart.value?.name || entryPoint.value.name || 'Loading...'
+  })
+
   const valuesChangedFromOriginal = computed(() => {
     for (const key in ORIGINAL_COPY) {
       if(JSON.stringify(ORIGINAL_COPY[key]) !== JSON.stringify(entryPoint.value[key])) {
@@ -682,23 +721,23 @@
 
   const artifactColumns = [
     { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true, },
-    { name: 'outputParams', label: 'Output Parameters', align: 'right', field: 'outputParams', sortable: false, classes: 'vertical-top' },
-    { name: 'delete', label: 'Delete', align: 'center', },
+    { name: 'outputParams', label: 'Output Parameters', align: 'left', field: 'outputParams', sortable: false, classes: 'vertical-top' },
+    { name: 'actions', label: 'Actions', align: 'center', },
   ]
 
   const taskColumns = [
     { name: 'pluginName', label: 'Plugin', align: 'left', field: 'pluginName', sortable: true, },
     { name: 'taskName', label: 'Task', align: 'left', field: 'name', sortable: true, },
-    { name: 'inputParams', label: 'Input Parameters', align: 'right', field: 'inputParams', sortable: false, classes: 'vertical-top' },
-    { name: 'outputParams', label: 'Output Parameters', align: 'right', field: 'outputParams', sortable: false, classes: 'vertical-top' },
-    { name: 'add', label: 'Add to Task Graph', align: 'center', sortable: false, },
+    { name: 'inputParams', label: 'Input Params', align: 'left', field: 'inputParams', sortable: false, classes: 'vertical-top' },
+    { name: 'outputParams', label: 'Output Params', align: 'left', field: 'outputParams', sortable: false, classes: 'vertical-top' },
+    { name: 'add', label: 'Add to Graph', align: 'center', sortable: false, },
   ]
 
   const artifactTaskColumns = [
     { name: 'pluginName', label: 'Plugin', align: 'left', field: 'pluginName', sortable: true, },
     { name: 'taskName', label: 'Task', align: 'left', field: 'name', sortable: true, },
-    { name: 'outputParams', label: 'Output Parameters', align: 'right', field: 'outputParams', sortable: false, classes: 'vertical-top' },
-    { name: 'add', label: 'Add to Artifact Output Graph', align: 'center', sortable: false, },
+    { name: 'outputParams', label: 'Output Params', align: 'left', field: 'outputParams', sortable: false, classes: 'vertical-top' },
+    { name: 'add', label: 'Add to Graph', align: 'center', sortable: false, },
   ]
 
   const showReturnDialog = ref(false)
@@ -785,10 +824,11 @@
         delete submitObject[key]
       }
     }
-    // turn objects into ids
-    submitObject.queues = submitObject.queues.map(q => q.id)
-    submitObject.plugins = submitObject.plugins.map(p => p.id)
-    submitObject.artifactPlugins = submitObject.artifactPlugins.map(p => p.id)
+    
+
+    submitObject.queues = submitObject.queues.map(q => (q && typeof q === 'object') ? q.id : q)
+    submitObject.plugins = submitObject.plugins.map(p => (p && typeof p === 'object') ? p.id : p)
+    submitObject.artifactPlugins = submitObject.artifactPlugins.map(p => (p && typeof p === 'object') ? p.id : p)
 
     submitObject.artifactParameters = submitObject.artifactParameters.map((param) => ({
       ...param,
@@ -890,7 +930,7 @@
       try {
         const res = await api.getData('plugins', {
           search: val,
-          rowsPerPage: 0, // get all
+          rowsPerPage: 0, 
           index: 0
         })
         plugins.value = res.data.data
@@ -1061,4 +1101,4 @@
     entryPoint.value.artifactParameters[selectedTaskProps.value.rowIndex][selectedTaskProps.value.inputOrOutputParams].push(newParam)
   }
 
-</script>
+</script>
\ No newline at end of file
diff --git a/src/frontend/src/views/CreateExperiment.vue b/src/frontend/src/views/CreateExperiment.vue
index 84f0a678e..21c659e0c 100644
--- a/src/frontend/src/views/CreateExperiment.vue
+++ b/src/frontend/src/views/CreateExperiment.vue
@@ -1,5 +1,8 @@
 <template>
-  <PageTitle :title="title" />
+      <PageTitle 
+        subtitle="Create Experiment"
+        conceptType="experiment" 
+      />
   <div :class="`row q-my-lg`">
     <div :class="`${isMobile ? 'col-12' : 'col-5'} q-mr-xl`">
       <fieldset>
@@ -52,35 +55,21 @@
     <fieldset :class="`${isMobile ? 'col-12 q-mt-lg' : 'col'}`">
       <legend>Entrypoint</legend>
       <div class="q-ma-lg">
-        <q-select
-          outlined
+        <ResourcePicker
           v-model="experiment.entrypoints"
-          use-input
-          use-chips
-          multiple
-          map-options
-          option-label="name"
-          option-value="id"
-          input-debounce="300"
+          type="entrypoint"
           :options="entrypoints"
+          option-value="id"
           @filter="getEntrypoints"
+          input-debounce="300"
           class="q-mb-md"
+          chip-outline
+          chip-square 
         >
           <template v-slot:before>
             <div class="field-label">Entrypoints:</div>
           </template>
-          <template v-slot:selected>
-            <q-chip
-              v-for="(entrypoint, i) in experiment.entrypoints"
-              :key="entrypoint.id"
-              color="secondary"
-              :label="entrypoint.name"
-              class="text-white"
-              removable
-              @remove="experiment.entrypoints.splice(i, 1)"
-            />
-          </template>  
-        </q-select>
+        </ResourcePicker>
 
         <q-btn
           color="primary"
@@ -127,6 +116,7 @@
   import * as notify from '../notify'
   import PageTitle from '@/components/PageTitle.vue'
   import ReturnToFormDialog from '@/dialogs/ReturnToFormDialog.vue'
+  import ResourcePicker from '@/components/ResourcePicker.vue'
 
   const route = useRoute()
   
diff --git a/src/frontend/src/views/CreateJob.vue b/src/frontend/src/views/CreateJob.vue
index 3cdf93ccd..dea1cd9ea 100644
--- a/src/frontend/src/views/CreateJob.vue
+++ b/src/frontend/src/views/CreateJob.vue
@@ -1,6 +1,7 @@
 <template>
   <PageTitle 
-    title="Create Job"
+    subtitle="Create Job" 
+    conceptType="job" 
   />
   <div :class="`row q-my-lg`">
     <div :class="`${isMobile ? 'col-12' : 'col-5'} q-mr-xl`">
@@ -182,14 +183,15 @@
         title="Entrypoint Parameters"
         :columns="columns"
         :rows="parameters"
+        row-key="name" 
         :hideCreateBtn="true"
         :hideDeleteBtn="true"
         :disableSelect="true"
         :hideSearch="true"
       >
-        <template #body-cell-value="props">
-          <div style="font-size: 18px;">
-            <span v-if="props.row.value === null">
+        <template #body-cell-value="{ row }">
+          <div style="font-size: 18px; cursor: pointer;">
+            <span v-if="row.value === null">
               <q-chip
                 label="Needs Parameter Value"
                 color="negative"
@@ -198,17 +200,17 @@
               />
             </span>
             <span v-else>
-              {{ props.row.value }}
+              {{ row.value }}
             </span>
             <q-btn icon="edit" round size="sm" color="primary" flat />
           </div>
           <q-popup-edit 
-            v-model="props.row.value"
+            v-model="row.value"
             v-slot="scope"
             buttons
           >
             <div class="text-h6">
-              {{ props.row.name }}
+              {{ row.name }}
               <q-chip
                 v-if="scope.value === null"
                 label="Needs Parameter Value"
@@ -236,15 +238,6 @@
                 <label :class="`field-label`" style="width: 125px;">Parameter Value:</label>
               </template>
             </q-input>
-            <!-- Set Parameter to Empty String:
-            <q-checkbox
-              :model-value="scope.value === ''"
-              @update:model-value="val => {
-                if(val) {
-                  scope.value = ''
-                }
-              }"
-            /> -->
             <q-btn
               label="Set Parameter to Empty String"
               color="primary"
@@ -256,12 +249,13 @@
               label="Revert to Default Value"
               color="primary"
               class="q-mt-sm"
-              @click="scope.value = props.row.originalValue"
-              :disable="scope.value === props.row.originalValue"
+              @click="scope.value = row.originalValue"
+              :disable="scope.value === row.originalValue"
             />
           </q-popup-edit>
         </template>
       </TableComponent>
+
       <q-btn
         v-if="!updateEntrypoint && job.entrypoint?.id === oldEntrypoint?.id && 
         oldEntrypoint?.snapshot !== latestEntrypoint?.snapshot"
@@ -271,7 +265,7 @@
         icon="sync"
         size="sm"
         @click.stop="syncJobParams()"
-        class="q-mr-md"
+        class="q-mr-md q-my-sm"
       >
         <q-tooltip>
           Sync to latest version of entrypoint parameters and values.
@@ -286,44 +280,44 @@
         icon="sync"
         size="sm"
         @click.stop="revertJobParams()"
-        class="q-mr-md"
+        class="q-mr-md q-my-sm"
       >
         <q-tooltip>
           Revert to original job's entrypoint parameters and values.
         </q-tooltip>
       </q-btn>
+
       <TableComponent
         title="Artifact Parameters"
         :columns="artifactParamColumns"
         :rows="artifactParameters"
+        row-key="name"
         :hideCreateBtn="true"
         :hideDeleteBtn="true"
         :disableSelect="true"
         :hideSearch="true"
       >
-        <template #body-cell-output="props">
-          <div v-for="param in props.row.outputParams">
-            <q-chip 
-              :label="`${param.name}: ${param.parameterType.name}`"
-              color="secondary"
-              text-color="white"
-              dense
-            />
-          </div>
-        </template>
-        <template #body-cell-artifact="props">
-          <div class="row">
+        <template #body-cell-artifact="{ row }">
+          <div class="row items-center no-wrap">
             <q-select
               label="Artifact"
-              v-model="props.row.selectedArtifact"
+              v-model="row.selectedArtifact"
               dense
               outlined
-              :options="getMatchingArtifacts(props.row.outputParams)"
+              :options="getMatchingArtifacts(row.outputParams)"
               option-label="description"
               clearable
-              @update:model-value="onSelectArtifact(props.row)"
+              @update:model-value="onSelectArtifact(row)"
               class="col"
             >
+              <template v-slot:no-option>
+                <q-item>
+                  <q-item-section class="text-grey">
+                    No saved artifacts match type: 
+                    {{ row.outputParams.map(p => p.parameterType.name).join(', ') }}
+                  </q-item-section>
+                </q-item>
+              </template>
               <template v-slot:option="scope">
                 <q-item v-bind="scope.itemProps">
                   <q-item-section>
@@ -334,12 +328,13 @@
               </template>
             </q-select>
             <q-checkbox
-              v-model="props.row.showSnapshotDropdown"
+              v-model="row.showSnapshotDropdown"
               checked-icon="history"
               unchecked-icon="sym_o_history"
               size="lg"
+              class="q-ml-sm"
               @update:model-value="(value) => {
-                if(!value) onSelectArtifact(props.row)
+                if(!value) onSelectArtifact(row)
               }"
             >
               <q-tooltip>
@@ -348,16 +343,17 @@
             </q-checkbox>
           </div>
           <q-select
-            v-if="props.row.showSnapshotDropdown"
+            v-if="row.showSnapshotDropdown"
             label="Artifact Snapshot"
-            v-model="props.row.selectedArtifactSnapshot"
+            v-model="row.selectedArtifactSnapshot"
             dense
             outlined
-            :options="props.row.artifactSnapshotOptions"
+            class="q-mt-sm"
+            :options="row.artifactSnapshotOptions"
             option-label="description"
             clearable
-            @clear="props.row.showSnapshotDropdown = false; onSelectArtifact(props.row)"
-            :disable="!props.row.selectedArtifact"
+            @clear="row.showSnapshotDropdown = false; onSelectArtifact(row)"
+            :disable="!row.selectedArtifact"
           >
             <template #before>
               <q-icon name="subdirectory_arrow_right" />
@@ -437,7 +433,7 @@
   import ReturnToFormDialog from '@/dialogs/ReturnToFormDialog.vue'
   import { useLoginStore } from '@/stores/LoginStore'
   import AppendResource from '@/dialogs/AppendResource.vue'
-  import TableComponent from '@/components/TableComponent.vue'
+  import TableComponent from '@/components/table/TableComponent.vue'
 
   const store = useLoginStore()
 
@@ -567,16 +563,15 @@
   const basicInfoForm = ref(null)
 
   const columns = [
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true, },
-    { name: 'value', label: 'Value', align: 'left', field: 'value', sortable: true, },
-    { name: 'parameterType', label: 'Type', align: 'left', field: 'type', sortable: true, },
-    // { name: 'actions', label: 'Actions', align: 'center',  },
+    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true, styleType: 'resource-name' },
+    { name: 'value', label: 'Value', align: 'left', field: 'value', sortable: true },
+    { name: 'parameterType', label: 'Type', align: 'left', field: 'type', sortable: true },
   ]
 
   const artifactParamColumns = [
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true, },
-    { name: 'output', label: 'Output', align: 'left', field: 'outputParams', sortable: true, },
-    { name: 'artifact', label: 'Artifact', align: 'left', sortable: false, },
+    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true, styleType: 'resource-name' },
+    { name: 'output', label: 'Output', align: 'left', field: 'outputParams', sortable: true, styleType: 'parameter-list' },
+    { name: 'artifact', label: 'Artifact', align: 'left', sortable: false },
   ]
 
   const experimentError = ref(false)
@@ -585,7 +580,6 @@
 
   function submit() {
     basicInfoForm.value.validate().then(success => {
-      // quasar doesn't validate disabled fields, need to manually do it below
       if(!job.experiment && experiments.value.length === 0 && !Object.hasOwn(route.params, 'id')) {
         experimentError.value = true
       }
diff --git a/src/frontend/src/views/CreatePluginFile.vue b/src/frontend/src/views/CreatePluginFile.vue
index a39f2aeaa..7255d40d8 100644
--- a/src/frontend/src/views/CreatePluginFile.vue
+++ b/src/frontend/src/views/CreatePluginFile.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="row items-center justify-between">
-    <PageTitle :title="title" />
-    <q-btn 
+    <PageTitle :subtitle="title" conceptType="file" />
+    <q-btn
       v-if="route.params.fileId !== 'new'"
       color="negative"
-      icon="sym_o_delete" 
-      label="Delete Plugin File" 
+      icon="sym_o_delete"
+      label="Delete Plugin File"
       @click="showDeleteFileDialog = true"
     />
   </div>
@@ -14,9 +14,9 @@
       <legend>Basic Info</legend>
       <div class="q-px-lg column full-height">
         <q-form @submit.prevent="submit" ref="basicInfoForm" greedy>
-          <q-input 
-            outlined 
-            dense 
+          <q-input
+            outlined
+            dense
             v-model.trim="pluginFile.filename"
             :rules="[requiredRule, pythonFilenameRule]"
             class="q-mb-sm q-mt-md"
@@ -27,11 +27,11 @@
             </template>
           </q-input>
 
-          <q-input 
-            outlined 
-            dense 
+          <q-input
+            outlined
+            dense
             v-model.trim="pluginFile.description"
-            class="q-mb-lg "
+            class="q-mb-lg"
             type="textarea"
             autogrow
           >
@@ -62,24 +62,25 @@
           <q-btn
             label="Import Function Tasks"
             color="primary"
-            @click="showImportTasksDialog = true;"
+            @click="showImportTasksDialog = true"
           />
         </div>
 
-        <CodeEditor 
+        <CodeEditor
           v-model="pluginFile.contents"
           language="python"
           :placeholder="'#Enter plugin file code here...'"
-          style="margin-bottom: 15px;"
+          style="margin-bottom: 15px"
           :showError="contentsError"
         />
       </div>
     </fieldset>
     <fieldset :class="`${isMobile ? 'col-12' : 'col q-ml-md'}`">
       <legend>Plugin Tasks</legend>
+
       <TableComponent
         :rows="pluginFile.tasks.functions"
-        :columns="functionTaskColumns"
+        :columns="computedFunctionTaskColumns"
         title="Plugin Function Tasks"
         :hideToggleDraft="true"
         :hideSearch="true"
@@ -87,100 +88,228 @@
         :hideOpenBtn="true"
         :hideDeleteBtn="true"
         rightCaption="*Click parameter to edit, or X to delete"
-        @create="showTaskDialog=true; taskType='functions'"
+        @create="
+          showTaskDialog = true;
+          taskType = 'functions';
+        "
       >
         <template #body-cell-name="props">
-        <div style="font-size: 18px;">
-          {{ props.row.name }}
-          <q-btn icon="edit" round size="sm" color="primary" flat />
-        </div>
-          <q-popup-edit v-model="props.row.name" v-slot="scope">
-            <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
-          </q-popup-edit>
+          <div class="row items-center cursor-pointer group">
+            <span class="text-indigo-10 text-weight-bold text-subtitle2">
+              {{ props.row.name }}
+            </span>
+            <q-icon
+              name="edit"
+              size="xs"
+              color="primary"
+              class="q-ml-sm invisible group-hover:visible"
+            />
+
+            <q-popup-edit v-model="props.row.name" v-slot="scope">
+              <q-input
+                v-model="scope.value"
+                dense
+                autofocus
+                counter
+                @keyup.enter="scope.set"
+              />
+            </q-popup-edit>
+          </div>
         </template>
+
         <template #body-cell-inputParams="props">
-          <div v-for="(param, i) in props.row.inputParams" :key="i">
-            <q-chip
-              color="indigo"
-              text-color="white"
-              dense
-              clickable
-              removable
-              @remove="pluginFile.tasks.functions[props.rowIndex].inputParams.splice(i, 1)"
-              @click="handleSelectedParam('edit', props, i, 'inputParams', 'functions'); showEditParamDialog = true"
-            >
-              {{ `${param.name}` }}
-              <span v-if="param.required" class="text-red">*</span>
-              {{ `: ${pluginParameterTypes.filter((type) => type.id === param.parameterType.id)[0]?.name}` }}
-            </q-chip>
-            <div>
-              <q-chip 
-                v-if="!pluginParameterTypes.filter((type) => type.id === param.parameterType.id)[0]?.name"
-                color="red"
+          <div class="row justify-end q-gutter-xs">
+            <template v-for="(param, i) in props.row.inputParams" :key="i">
+              <q-chip
+                color="indigo"
                 text-color="white"
+                size="sm"
+                outline
                 square
+                clickable
+                removable
+                @remove="
+                  pluginFile.tasks.functions[props.rowIndex].inputParams.splice(
+                    i,
+                    1,
+                  )
+                "
+                @click="
+                  handleSelectedParam(
+                    'edit',
+                    props,
+                    i,
+                    'inputParams',
+                    'functions',
+                  );
+                  showEditParamDialog = true;
+                "
               >
-                Resolve missing type above
+                <span class="text-weight-bold">{{ param.name }}</span>
+                <span v-if="param.required" class="text-red q-ml-xs">*</span>
+                <span class="q-ml-xs text-grey-6" style="font-size: 10px">
+                  :
+                  {{
+                    pluginParameterTypes.find(
+                      (t) => t.id === param.parameterType.id,
+                    )?.name || "?"
+                  }}
+                </span>
               </q-chip>
-            </div>
+
+              <q-chip
+                v-if="
+                  !pluginParameterTypes.find(
+                    (t) => t.id === param.parameterType.id,
+                  )?.name
+                "
+                color="negative"
+                text-color="white"
+                size="sm"
+                class=""
+                square
+                dense
+              >
+                <q-icon name="warning"
+                @click="
+                  handleSelectedParam(
+                    'edit',
+                    props,
+                    i,
+                    'inputParams',
+                    'functions',
+                  );
+                  showEditParamDialog = true;
+                "></q-icon>
+                <q-tooltip>Please resolve missing type for parameter '{{ param.name }}'</q-tooltip>
+              </q-chip>
+            </template>
+
+            <q-btn
+              round
+              size="xs"
+              icon="add"
+              color="indigo-1"
+              text-color="indigo"
+              unelevated
+              @click="
+                handleSelectedParam(
+                  'create',
+                  props,
+                  i,
+                  'inputParams',
+                  'functions',
+                );
+                showEditParamDialog = true;
+              "
+            />
           </div>
-          <q-btn
-            round
-            size="xs"
-            icon="add"
-            color="grey-5"
-            text-color="black"
-            class="q-mr-xs q-my-xs"
-            @click="handleSelectedParam('create', props, i, 'inputParams', 'functions'); showEditParamDialog = true"
-          />
         </template>
+
         <template #body-cell-outputParams="props">
-          <div v-for="(param, i) in props.row.outputParams" :key="i">
-            <q-chip
-              color="purple"
-              text-color="white"
-              dense
-              clickable
-              removable
-              @click="handleSelectedParam('edit', props, i, 'outputParams', 'functions'); showEditParamDialog = true"
-              @remove="pluginFile.tasks.functions[props.rowIndex].outputParams.splice(i, 1)"
-              :label="`${param.name}: ${param.parameterType.name}`"
-            />
-            <div>
-              <q-chip 
-                v-if="!pluginParameterTypes.filter((type) => type.id === param.parameterType.id)[0]?.name"
-                color="red"
+          <div class="row justify-end q-gutter-xs">
+            <template v-for="(param, i) in props.row.outputParams" :key="i">
+              <q-chip
+                color="purple"
+                text-color="white"
+                size="sm"
+                outline
+                square
+                clickable
+                removable
+                @click="
+                  handleSelectedParam(
+                    'edit',
+                    props,
+                    i,
+                    'outputParams',
+                    'functions',
+                  );
+                  showEditParamDialog = true;
+                "
+                @remove="
+                  pluginFile.tasks.functions[
+                    props.rowIndex
+                  ].outputParams.splice(i, 1)
+                "
+              >
+                <span class="text-weight-bold">{{ param.name }}</span>
+                <span class="q-ml-xs text-grey-6" style="font-size: 10px">
+                  : {{
+                    pluginParameterTypes.find(
+                      (t) => t.id === param.parameterType.id,
+                    )?.name || "?"
+                  }}
+                </span>
+              </q-chip>
+              
+              <q-chip
+                v-if="
+                  !pluginParameterTypes.find(
+                    (t) => t.id === param.parameterType.id,
+                  )?.name
+                "
+                color="negative"
                 text-color="white"
+                size="sm"
                 square
+                dense
               >
-                Resolve missing type above
+                <q-icon name="warning"
+                @click="
+                  handleSelectedParam(
+                    'edit',
+                    props,
+                    i,
+                    'outputParams',
+                    'functions',
+                  );
+                  showEditParamDialog = true;
+                "></q-icon>
+                <q-tooltip>Please resolve missing type for parameter '{{ param.name }}'</q-tooltip>
               </q-chip>
-            </div>
+            </template>
+            
+            <q-btn
+              round
+              size="xs"
+              icon="add"
+              color="purple-1"
+              text-color="purple"
+              unelevated
+              @click="
+                handleSelectedParam(
+                  'create',
+                  props,
+                  i,
+                  'outputParams',
+                  'functions',
+                );
+                showEditParamDialog = true;
+              "
+            />
           </div>
-          <q-btn
-            round
-            size="xs"
-            icon="add"
-            color="grey-5"
-            text-color="black"
-            class="q-mr-xs q-my-xs"
-            @click="handleSelectedParam('create', props, i, 'outputParams', 'functions'); showEditParamDialog = true"
-          />
         </template>
+
         <template #body-cell-actions="props">
           <q-btn
             icon="sym_o_delete"
             round
-            size="md"
+            size="sm"
             color="negative"
             flat
-            @click="selectedTaskProps = props; selectedTaskProps.taskType = 'functions'; showDeleteDialog = true"
+            @click="
+              selectedTaskProps = props;
+              selectedTaskProps.taskType = 'functions';
+              showDeleteDialog = true;
+            "
           />
         </template>
       </TableComponent>
+
       <TableComponent
         :rows="pluginFile.tasks.artifacts"
-        :columns="artifactTaskColumns"
+        :columns="computedArtifactTaskColumns"
         title="Plugin Artifact Tasks"
         :hideToggleDraft="true"
         :hideSearch="true"
@@ -188,50 +317,132 @@
         :hideOpenBtn="true"
         :hideDeleteBtn="true"
         rightCaption="*Click parameter to edit, or X to delete"
-        @create="showTaskDialog=true; taskType='artifacts'"
+        class="q-mt-md"
+        @create="
+          showTaskDialog = true;
+          taskType = 'artifacts';
+        "
       >
         <template #body-cell-name="props">
-        <div style="font-size: 18px;">
-          {{ props.row.name }}
-          <q-btn icon="edit" round size="sm" color="primary" flat />
-        </div>
-          <q-popup-edit v-model="props.row.name" v-slot="scope">
-            <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" />
-          </q-popup-edit>
+          <div class="row items-center cursor-pointer group">
+            <span class="text-indigo-10 text-weight-bold text-subtitle2">
+              {{ props.row.name }}
+            </span>
+            <q-icon
+              name="edit"
+              size="xs"
+              color="primary"
+              class="q-ml-sm invisible group-hover:visible"
+            />
+            <q-popup-edit v-model="props.row.name" v-slot="scope">
+              <q-input
+                v-model="scope.value"
+                dense
+                autofocus
+                counter
+                @keyup.enter="scope.set"
+              />
+            </q-popup-edit>
+          </div>
         </template>
+
         <template #body-cell-outputParams="props">
-          <div v-for="(param, i) in props.row.outputParams" :key="i">
-            <q-chip
-              color="purple"
-              text-color="white"
-              dense
-              clickable
-              removable
-              @click="handleSelectedParam('edit', props, i, 'outputParams', 'artifacts'); showEditParamDialog = true; console.log('param = ', param)"
-              @remove="pluginFile.tasks.artifacts[props.rowIndex].outputParams.splice(i, 1)"
-              :label="`${param.name}: ${param.parameterType.name}`"
+          <div class="row justify-end q-gutter-xs">
+            <template v-for="(param, i) in props.row.outputParams" :key="i">
+              <q-chip
+                color="purple"
+                text-color="white"
+                size="sm"
+                outline
+                square
+                clickable
+                removable
+                @click="
+                  handleSelectedParam(
+                    'edit',
+                    props,
+                    i,
+                    'outputParams',
+                    'artifacts',
+                  );
+                  showEditParamDialog = true;
+                "
+                @remove="
+                  pluginFile.tasks.artifacts[
+                    props.rowIndex
+                  ].outputParams.splice(i, 1)
+                "
+              >
+                <span class="text-weight-bold">{{ param.name }}</span>
+                <span class="q-ml-xs text-grey-6" style="font-size: 10px">
+                  : {{
+                    pluginParameterTypes.find(
+                      (t) => t.id === param.parameterType.id,
+                    )?.name || "?"
+                  }}
+                </span>
+              </q-chip>
+
+              <q-chip
+                v-if="
+                  !pluginParameterTypes.find(
+                    (t) => t.id === param.parameterType.id,
+                  )?.name
+                "
+                color="negative"
+                text-color="white"
+                size="sm"
+                square
+                dense
+              >
+                <q-icon name="warning"
+                @click="
+                  handleSelectedParam(
+                    'edit',
+                    props,
+                    i,
+                    'outputParams',
+                    'artifacts',
+                  );
+                  showEditParamDialog = true;
+                "></q-icon>
+                <q-tooltip>Please resolve missing type for parameter '{{ param.name }}'</q-tooltip>
+              </q-chip>
+            </template>
+            
+            <q-btn
+              round
+              size="xs"
+              icon="add"
+              color="purple-1"
+              text-color="purple"
+              unelevated
+              @click="
+                handleSelectedParam(
+                  'create',
+                  props,
+                  i,
+                  'outputParams',
+                  'artifacts',
+                );
+                showEditParamDialog = true;
+              "
             />
-            <div v-if="!param.parameterType" class="text-white q-mr-sm q-my-xs bg-red q-pa-xs rounded-borders">
-              Resolve missing type above
-            </div>
           </div>
-          <q-btn
-            round
-            size="xs"
-            icon="add"
-            color="grey-5"
-            text-color="black"
-            class="q-mr-xs q-my-xs"
-            @click="handleSelectedParam('create', props, i, 'outputParams', 'artifacts'); showEditParamDialog = true"
-          />
         </template>
+
         <template #body-cell-actions="props">
-          <q-btn 
+          <q-btn
             icon="sym_o_delete"
-            round size="md"
+            round
+            size="sm"
             color="negative"
             flat
-            @click="selectedTaskProps = props; selectedTaskProps.taskType = 'artifacts'; showDeleteDialog = true"
+            @click="
+              selectedTaskProps = props;
+              selectedTaskProps.taskType = 'artifacts';
+              showDeleteDialog = true;
+            "
           />
         </template>
       </TableComponent>
@@ -239,14 +450,14 @@
       <q-expansion-item
         :label="`${showParamTypes ? 'Hide' : 'Show'} Plugin Parameter Types`"
         v-model="showParamTypes"
-        header-class="text-bold shadow-2"
+        header-class="text-bold shadow-2 bg-grey-2"
         class="q-mb-md q-mt-lg"
         ref="expansionItem"
         @after-show="scroll"
       >
         <TableComponent
           :rows="pluginParameterTypes"
-          :columns="columns"
+          :columns="computedParamTypeColumns"
           title="Plugin Parameter Types"
           @request="getPluginParameterTypes"
           :hideToggleDraft="true"
@@ -259,10 +470,18 @@
         >
           <template #body-cell-view="props">
             <q-btn
-              label="View"
+              flat
+              dense
+              round
+              icon="data_object"
               color="primary"
-              @click.stop="structure = JSON.stringify(props.row.structure, null, 2); displayStructure = true;"
-            />
+              @click.stop="
+                structure = JSON.stringify(props.row.structure, null, 2);
+                displayStructure = true;
+              "
+            >
+              <q-tooltip>View Structure</q-tooltip>
+            </q-btn>
           </template>
         </TableComponent>
       </q-expansion-item>
@@ -272,14 +491,14 @@
   <div :class="`${isMobile ? '' : ''} float-right q-mb-lg`">
     <q-btn
       outline
-      color="primary" 
+      color="primary"
       label="Cancel"
       class="q-mr-lg cancel-btn"
       @click="confirmLeave = true; store.initialPage ? router.push(`/plugins/${route.params.id}`) : router.back()"
     />
-    <q-btn  
-      @click="submit()" 
-      color="primary" 
+    <q-btn
+      @click="submit()"
+      color="primary"
       label="Submit File"
       type="submit"
       :disable="!enableSubmit"
@@ -290,33 +509,31 @@
     </q-btn>
   </div>
 
-  <InfoPopupDialog
-    v-model="displayStructure"
-  >
+  <InfoPopupDialog v-model="displayStructure">
     <template #title>
-      <label id="modalTitle">
-        Plugin Param Structure
-      </label>
+      <label id="modalTitle"> Plugin Param Structure </label>
     </template>
-    <CodeEditor 
-      v-model="structure"
-      style="height: auto;"
-      :readOnly="true"
-    />
+    <CodeEditor v-model="structure" style="height: auto" :readOnly="true" />
   </InfoPopupDialog>
-  <DeleteDialog 
+  <DeleteDialog
     v-model="showDeleteFileDialog"
     @submit="deleteFile()"
     type="Plugin File"
     :name="pluginFile.filename"
   />
-  <DeleteDialog 
+  <DeleteDialog
     v-model="showDeleteDialog"
-    @submit="pluginFile.tasks[selectedTaskProps.taskType].splice(selectedTaskProps.rowIndex, 1); showDeleteDialog = false"
+    @submit="
+      pluginFile.tasks[selectedTaskProps.taskType].splice(
+        selectedTaskProps.rowIndex,
+        1,
+      );
+      showDeleteDialog = false;
+    "
     type="Plugin Task"
     :name="selectedTaskProps?.row?.name"
   />
-  <EditPluginTaskParamDialog 
+  <EditPluginTaskParamDialog
     v-model="showEditParamDialog"
     :editParam="selectedParam"
     :pluginParameterTypes="pluginParameterTypes"
@@ -324,15 +541,12 @@
     @updateParam="updateParam"
     @addParam="addParam"
   />
-  <LeaveFormDialog 
+  <LeaveFormDialog
     v-model="showLeaveDialog"
     type="plugin file"
     @leaveForm="leaveForm"
   />
-  <ReturnToFormDialog
-    v-model="showReturnDialog"
-    @cancel="clearForm"
-  />
+  <ReturnToFormDialog v-model="showReturnDialog" @cancel="clearForm" />
   <ImportPluginTasksDialog
     v-model="showImportTasksDialog"
     :pythonCode="pluginFile.contents"
@@ -351,353 +565,466 @@
 </template>
 
 <script setup>
-  import { ref, inject, watch, onMounted, computed } from 'vue'
-  import { useRoute, useRouter, onBeforeRouteLeave } from 'vue-router'
-  import CodeEditor from '@/components/CodeEditor.vue'
-  import * as api from '@/services/dataApi'
-  import * as notify from '../notify'
-  import TableComponent from '@/components/TableComponent.vue'
-  import InfoPopupDialog from '@/dialogs/InfoPopupDialog.vue'
-  import PageTitle from '@/components/PageTitle.vue'
-  import DeleteDialog from '@/dialogs/DeleteDialog.vue'
-  import EditPluginTaskParamDialog from '@/dialogs/EditPluginTaskParamDialog.vue'
-  import LeaveFormDialog from '@/dialogs/LeaveFormDialog.vue'
-  import ReturnToFormDialog from '@/dialogs/ReturnToFormDialog.vue'
-  import { useLoginStore } from '@/stores/LoginStore'
-  import ImportPluginTasksDialog from '@/dialogs/ImportPluginTasksDialog.vue'
-  import PluginTaskDialog from '@/dialogs/PluginTaskDialog.vue'
-
-  const store = useLoginStore()
-  
-  const route = useRoute()
-  const router = useRouter()
-
-  const isMobile = inject('isMobile')
-
-  const pluginFile = ref({
-    filename: '',
-    description: '',
-    contents: '',
-    tasks: {
-      functions: [],
-      artifacts: [],
-    }
-  })
-  const ORIGINAL_COPY = {
-    filename: '',
-    description: '',
-    contents: '',
-    tasks: {
-      functions: [],
-      artifacts: [],
+import { ref, inject, watch, onMounted, computed } from "vue";
+import { useRoute, useRouter, onBeforeRouteLeave } from "vue-router";
+import CodeEditor from "@/components/CodeEditor.vue";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
+import TableComponent from "@/components/table/TableComponent.vue";
+import InfoPopupDialog from "@/dialogs/InfoPopupDialog.vue";
+import PageTitle from "@/components/PageTitle.vue";
+import DeleteDialog from "@/dialogs/DeleteDialog.vue";
+import EditPluginTaskParamDialog from "@/dialogs/EditPluginTaskParamDialog.vue";
+import LeaveFormDialog from "@/dialogs/LeaveFormDialog.vue";
+import ReturnToFormDialog from "@/dialogs/ReturnToFormDialog.vue";
+import { useLoginStore } from "@/stores/LoginStore";
+import ImportPluginTasksDialog from "@/dialogs/ImportPluginTasksDialog.vue";
+import PluginTaskDialog from "@/dialogs/PluginTaskDialog.vue";
+
+const store = useLoginStore();
+
+const route = useRoute();
+const router = useRouter();
+
+const isMobile = inject("isMobile");
+
+const pluginFile = ref({
+  filename: "",
+  description: "",
+  contents: "",
+  tasks: {
+    functions: [],
+    artifacts: [],
+  },
+});
+const ORIGINAL_COPY = {
+  filename: "",
+  description: "",
+  contents: "",
+  tasks: {
+    functions: [],
+    artifacts: [],
+  },
+};
+
+const valuesChangedFromOriginal = computed(() => {
+  for (const key in ORIGINAL_COPY) {
+    if (
+      JSON.stringify(ORIGINAL_COPY[key]) !==
+      JSON.stringify(pluginFile.value[key])
+    ) {
+      return true;
     }
   }
+  return false;
+});
 
-  const valuesChangedFromOriginal = computed(() => {
-    for (const key in ORIGINAL_COPY) {
-      if(JSON.stringify(ORIGINAL_COPY[key]) !== JSON.stringify(pluginFile.value[key])) {
-        return true
-      }
+const copyAtEditStart = ref();
+
+const valuesChangedFromEditStart = computed(() => {
+  for (const key in copyAtEditStart.value) {
+    if (
+      JSON.stringify(copyAtEditStart.value[key]) !==
+      JSON.stringify(pluginFile.value[key])
+    ) {
+      return true;
     }
-    return false
-  })
+  }
+  return false;
+});
 
-  const copyAtEditStart = ref()
+const enableSubmit = computed(() => {
+  if (route.params.fileId === "new" && valuesChangedFromOriginal.value) {
+    return true;
+  } else if (
+    route.params.fileId !== "new" &&
+    valuesChangedFromEditStart.value
+  ) {
+    return true;
+  } else {
+    return false;
+  }
+});
 
-  const valuesChangedFromEditStart = computed(() => {
-    for (const key in copyAtEditStart.value) {
-      if(JSON.stringify(copyAtEditStart.value[key]) !== JSON.stringify(pluginFile.value[key])) {
-        return true
-      }
-    }
-    return false
-  })
-
-  const enableSubmit = computed(() => {
-    if(route.params.fileId === 'new' && valuesChangedFromOriginal.value) {
-      return true
-    } else if(route.params.fileId !== 'new' && valuesChangedFromEditStart.value) {
-      return true
-    } else {
-      return false
-    }
-  })
+const uploadedFile = ref(null);
 
-  const uploadedFile = ref(null)
+const selectedTaskProps = ref();
+const showDeleteFileDialog = ref(false);
+const showDeleteDialog = ref(false);
+const showEditParamDialog = ref(false);
 
-  const selectedTaskProps = ref()
-  const showDeleteFileDialog = ref(false)
-  const showDeleteDialog = ref(false)
-  const showEditParamDialog = ref(false)
+const expansionItem = ref(null);
+const showParamTypes = ref(false);
 
-  const expansionItem = ref(null)
-  const showParamTypes = ref(false)
+function scroll() {
+  expansionItem.value.$el.scrollIntoView({
+    behavior: "smooth",
+    block: "start",
+  });
+}
 
-  function scroll() {
-    expansionItem.value.$el.scrollIntoView({ behavior: 'smooth', block: 'start' })
-  }
+const title = ref("");
 
-  const title = ref('')
-
-  onMounted(async () => {
-    if(route.params.fileId === 'new') {
-      title.value = 'Create File'
-      if(store.savedForms.files[route.params.id]) {
-        pluginFile.value = JSON.parse(JSON.stringify(store.savedForms.files[route.params.id]))
-        copyAtEditStart.value = JSON.parse(JSON.stringify(store.savedForms.files[route.params.id]))
-        showReturnDialog.value = true
-      }
-      copyAtEditStart.value = JSON.parse(JSON.stringify(pluginFile.value))
-      return
+onMounted(async () => {
+  if (route.params.fileId === "new") {
+    title.value = "Create File";
+    if (store.savedForms.files[route.params.id]) {
+      pluginFile.value = JSON.parse(
+        JSON.stringify(store.savedForms.files[route.params.id]),
+      );
+      copyAtEditStart.value = JSON.parse(
+        JSON.stringify(store.savedForms.files[route.params.id]),
+      );
+      showReturnDialog.value = true;
     }
-    try {
-      const res = await api.getFile(route.params.id, route.params.fileId)
-      console.log('getFile = ', res)
-      pluginFile.value = {
-        filename: res.data.filename,
-        contents: res.data.contents,
-        tasks: res.data.tasks,
-        description: res.data.description
-      }
-      title.value = `Edit ${res.data.filename}`
-      copyAtEditStart.value = JSON.parse(JSON.stringify(pluginFile.value))
-    } catch(err) {
-      notify.error(err.response.data.message)
-    } 
-  })
-
-  function requiredRule(val) {
-    return (!!val) || "This field is required"
+    copyAtEditStart.value = JSON.parse(JSON.stringify(pluginFile.value));
+    return;
   }
-
-  function pythonFilenameRule(val) {
-    const regex = /^[a-zA-Z_][a-zA-Z0-9_]*\.py$/
-    if (!regex.test(val)) {
-      return "Invalid Python filename"
-    }
-    if (val === '_.py') {
-      return "_.py is not a valid Python filename"
-    }
-    return true
+  try {
+    const res = await api.getFile(route.params.id, route.params.fileId);
+    console.log("getFile = ", res);
+    pluginFile.value = {
+      filename: res.data.filename,
+      contents: res.data.contents,
+      tasks: res.data.tasks,
+      description: res.data.description,
+    };
+    title.value = `Edit ${res.data.filename}`;
+    copyAtEditStart.value = JSON.parse(JSON.stringify(pluginFile.value));
+  } catch (err) {
+    notify.error(err.response.data.message);
   }
+});
 
-  const contentsError = ref('')
+function requiredRule(val) {
+  return !!val || "This field is required";
+}
 
-  watch(() => pluginFile.value.contents, (newVal) => {
-    if(clearFormExecuted.value) {
-      clearFormExecuted.value = false
-    } else {
-      contentsError.value = newVal.length > 0 ? '' : 'This field is required'
-    }
-  })
-
-  async function submit() {
-    basicInfoForm.value.validate().then(success => {
-      contentsError.value = pluginFile.value.contents?.length > 0 ? '' : 'This field is required'
-      const missingTypes = pluginFile.value.tasks.functions.some(task => [...task.inputParams, ...task.outputParams].some(param => !param.parameterType.id))
-      if(missingTypes) {
-        notify.error('Please resolve the missing types in the plugin task parameters')
-      }
-      if (success && contentsError.value === '' && !missingTypes) {
-        addOrModifyFile()
-      }
-      else {
-        // error
-      }
-    })
+function pythonFilenameRule(val) {
+  const regex = /^[a-zA-Z_][a-zA-Z0-9_]*\.py$/;
+  if (!regex.test(val)) {
+    return "Invalid Python filename";
   }
-
-  async function addOrModifyFile() {
-    try {
-      let res
-      const submitFile = JSON.parse(JSON.stringify(pluginFile.value))
-      submitFile.tasks.functions.forEach((fTask) => {
-        delete fTask.id
-        fTask.inputParams.forEach((param) => {
-          param.parameterType = param.parameterType.id
-        })
-        fTask.outputParams.forEach((param) => {
-          param.parameterType = param.parameterType.id
-        })
-      })
-      submitFile.tasks.artifacts.forEach((artifact) => {
-        delete artifact.id
-        delete artifact.inputParams
-        artifact.outputParams.forEach((outputParam) => {
-          outputParam.parameterType = outputParam.parameterType.id
-        })
-      })
-      console.log('submitting file = ', submitFile)
-      if(route.params.fileId === 'new') {
-        res = await api.addFile(route.params.id, submitFile)
-      } else {
-        res = await api.updateFile(route.params.id, route.params.fileId, submitFile)
-      }
-      store.savedForms.files[route.params.id] = null
-      notify.success(`Successfully ${route.params.fileId === 'new' ? 'created' : 'updated'} '${res.data.filename}'`)
-      confirmLeave.value = true
-      router.push(`/plugins/${route.params.id}`)
-    } catch(err) {
-      notify.error(err.response.data.message)
-    } 
+  if (val === "_.py") {
+    return "_.py is not a valid Python filename";
   }
+  return true;
+}
 
+const contentsError = ref("");
 
+watch(
+  () => pluginFile.value.contents,
+  (newVal) => {
+    if (clearFormExecuted.value) {
+      clearFormExecuted.value = false;
+    } else {
+      contentsError.value = newVal.length > 0 ? "" : "This field is required";
+    }
+  },
+);
 
-  function processFile() {
-    const file = uploadedFile.value
-    if (!file) {
-      pluginFile.value.contents = ''
-      return
+async function submit() {
+  basicInfoForm.value.validate().then((success) => {
+    contentsError.value =
+      pluginFile.value.contents?.length > 0 ? "" : "This field is required";
+    const missingTypes = pluginFile.value.tasks.functions.some((task) =>
+      [...task.inputParams, ...task.outputParams].some(
+        (param) => !param.parameterType.id,
+      ),
+    );
+    if (missingTypes) {
+      notify.error(
+        "Please resolve the missing types in the plugin task parameters",
+      );
     }
-    const reader = new FileReader()
-    reader.onload = (e) => {
-      pluginFile.value.contents = e.target.result;
+    if (success && contentsError.value === "" && !missingTypes) {
+      addOrModifyFile();
+    } else {
+      // error
     }
-    reader.onerror = (e) => {
-      console.log('error = ', e)
+  });
+}
+
+async function addOrModifyFile() {
+  try {
+    let res;
+    const submitFile = JSON.parse(JSON.stringify(pluginFile.value));
+    submitFile.tasks.functions.forEach((fTask) => {
+      delete fTask.id;
+      fTask.inputParams.forEach((param) => {
+        param.parameterType = param.parameterType.id;
+      });
+      fTask.outputParams.forEach((param) => {
+        param.parameterType = param.parameterType.id;
+      });
+    });
+    submitFile.tasks.artifacts.forEach((artifact) => {
+      delete artifact.id;
+      delete artifact.inputParams;
+      artifact.outputParams.forEach((outputParam) => {
+        outputParam.parameterType = outputParam.parameterType.id;
+      });
+    });
+    console.log("submitting file = ", submitFile);
+    if (route.params.fileId === "new") {
+      res = await api.addFile(route.params.id, submitFile);
+    } else {
+      res = await api.updateFile(
+        route.params.id,
+        route.params.fileId,
+        submitFile,
+      );
     }
-    reader.readAsText(file); // Reads the file as text
+    store.savedForms.files[route.params.id] = null;
+    notify.success(
+      `Successfully ${route.params.fileId === "new" ? "created" : "updated"} '${res.data.filename}'`,
+    );
+    confirmLeave.value = true;
+    router.push(`/plugins/${route.params.id}`);
+  } catch (err) {
+    notify.error(err.response.data.message);
   }
+}
 
-  const tableRef = ref(null)
-  const pluginParameterTypes = ref([])
-  const displayStructure = ref(false)
-  const structure = ref('')
-
-  const columns = [
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true, },
-    { name: 'description', label: 'Description', field: 'description',align: 'left', sortable: true },
-    { name: 'view', label: 'Structure', align: 'left', sortable: false },
-  ]
-
-  const basicInfoForm = ref(null)
-
-  const functionTaskColumns = [
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: false, classes: 'vertical-top', },
-    { name: 'inputParams', label: 'Input Parameters', field: 'inputParams', align: 'right', sortable: false, classes: 'vertical-top', },
-    { name: 'outputParams', label: 'Output Parameters', field: 'outputParams', align: 'right', sortable: false, classes: 'vertical-top', },
-    { name: 'actions', label: 'Actions', align: 'center', },
-  ]
-
-    const artifactTaskColumns = [
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: false, classes: 'vertical-top', },
-    { name: 'outputParams', label: 'Output Parameters', field: 'outputParams', align: 'right', sortable: false, classes: 'vertical-top', },
-    { name: 'actions', label: 'Actions', align: 'center', },
-  ]
-
-  async function getPluginParameterTypes(pagination) {
-    pagination.rowsPerPage = 0 // get all
-    try {
-      const res = await api.getData('pluginParameterTypes', pagination)
-      pluginParameterTypes.value = res.data.data
-      tableRef.value.updateTotalRows(res.data.totalNumResults)
-    } catch(err) {
-      notify.error(err.response.data.message)
-    } 
+function processFile() {
+  const file = uploadedFile.value;
+  if (!file) {
+    pluginFile.value.contents = "";
+    return;
   }
+  const reader = new FileReader();
+  reader.onload = (e) => {
+    pluginFile.value.contents = e.target.result;
+  };
+  reader.onerror = (e) => {
+    console.log("error = ", e);
+  };
+  reader.readAsText(file); // Reads the file as text
+}
 
-  function addInferedTasks(tasks) {
-    console.log('tasks = ', tasks)
-    tasks.forEach((newTask) => {
-      const index = pluginFile.value.tasks.functions.findIndex(existingTask => existingTask.name === newTask.name)
-      if (index !== -1) {
-        // Replace existing task
-        pluginFile.value.tasks.functions.splice(index, 1, newTask)
-      } else {
-        // Add new task
-        pluginFile.value.tasks.functions.push(newTask)
-      }
-    })
-    notify.success(`Successfully imported ${tasks.length} ${tasks.length === 1 ? 'task' : 'tasks'}`)
-  }
+const tableRef = ref(null);
+const pluginParameterTypes = ref([]);
+const displayStructure = ref(false);
+const structure = ref("");
 
-  const selectedParam = ref()
+const basicInfoForm = ref(null);
 
-  function handleSelectedParam(action, paramProps, paramIndex, inputOrOutputParams, functionsOrArtifacts) {
-    selectedTaskProps.value = paramProps
-    selectedTaskProps.value.paramIndex = paramIndex
-    selectedTaskProps.value.inputOrOutputParams = inputOrOutputParams
-    selectedTaskProps.value.functionsOrArtifacts = functionsOrArtifacts
-    if(action === 'create') {
-      selectedParam.value = ''
-      return
-    }
-    selectedParam.value = selectedTaskProps.value.row[selectedTaskProps.value.inputOrOutputParams][selectedTaskProps.value.paramIndex]
-  }
+const computedParamTypeColumns = computed(() => [
+  {
+    name: "name",
+    label: "Name",
+    align: "left",
+    field: "name",
+    styleType: "resource-name",
+    conceptType: "parameter-type",
+    textType: "capitalize",
+  },
+  {
+    name: "description",
+    label: "Description",
+    field: "description",
+    align: "left",
+    styleType: "long-text",
+    maxWidth: "350px",
+  },
+  {
+    name: "view",
+    label: "Structure",
+    align: "center",
+    headerStyle: "width: 100px",
+  },
+]);
 
-  function updateParam(updatedParam) {
-    pluginFile.value.tasks[selectedTaskProps.value.functionsOrArtifacts][selectedTaskProps.value.rowIndex][selectedTaskProps.value.inputOrOutputParams][selectedTaskProps.value.paramIndex] = updatedParam
-  }
 
-  function addParam(newParam) {
-    pluginFile.value.tasks[selectedTaskProps.value.functionsOrArtifacts][selectedTaskProps.value.rowIndex][selectedTaskProps.value.inputOrOutputParams].push(newParam)
+const computedFunctionTaskColumns = computed(() => [
+  {
+    name: "name",
+    label: "Name",
+    align: "left",
+    field: "name",
+    classes: "vertical-top",
+    style: "width: 200px",
+  },
+  {
+    name: "inputParams",
+    label: "Input Parameters",
+    field: "inputParams",
+    align: "right",
+    classes: "vertical-top",
+    style: "white-space: normal; min-width: 250px",
+  },
+  {
+    name: "outputParams",
+    label: "Output Parameters",
+    field: "outputParams",
+    align: "right",
+    classes: "vertical-top",
+    style: "white-space: normal; min-width: 250px",
+  },
+  {
+    name: "actions",
+    label: "Actions",
+    align: "center",
+    style: "width: 50px",
+  },
+]);
+
+
+const computedArtifactTaskColumns = computed(() => [
+  {
+    name: "name",
+    label: "Name",
+    align: "left",
+    field: "name",
+    classes: "vertical-top",
+    style: "width: 200px",
+  },
+  {
+    name: "outputParams",
+    label: "Output Parameters",
+    field: "outputParams",
+    align: "right",
+    classes: "vertical-top",
+    style: "white-space: normal; min-width: 250px",
+  },
+  {
+    name: "actions",
+    label: "Actions",
+    align: "center",
+    style: "width: 50px",
+  },
+]);
+
+async function getPluginParameterTypes(pagination) {
+  pagination.rowsPerPage = 0; 
+  try {
+    const res = await api.getData("pluginParameterTypes", pagination);
+    pluginParameterTypes.value = res.data.data;
+    tableRef.value.updateTotalRows(res.data.totalNumResults);
+  } catch (err) {
+    notify.error(err.response.data.message);
   }
+}
 
-  onBeforeRouteLeave((to, from, next) => {
-    toPath.value = to.path
-    if(confirmLeave.value || !valuesChangedFromEditStart.value) {
-      next(true)
-    } else if(route.params.fileId === 'new') {
-      leaveForm()
+function addInferedTasks(tasks) {
+  console.log("tasks = ", tasks);
+  tasks.forEach((newTask) => {
+    const index = pluginFile.value.tasks.functions.findIndex(
+      (existingTask) => existingTask.name === newTask.name,
+    );
+    if (index !== -1) {
+      pluginFile.value.tasks.functions.splice(index, 1, newTask);
     } else {
-      showLeaveDialog.value = true
+      pluginFile.value.tasks.functions.push(newTask);
     }
-  })
-
-  const showLeaveDialog = ref(false)
-  const showReturnDialog = ref(false)
-  const confirmLeave = ref(false)
-  const toPath = ref()
-
-  const isEmptyValues = computed(() => {
-    return Object.values(pluginFile.value).every((value) => 
-      (typeof value === 'string' && value === '') || 
-      (Array.isArray(value) && value.length === 0)
-    )
-  })
-
-  function leaveForm() {
-    if(route.params.fileId === 'new' && valuesChangedFromOriginal.value) {
-      console.log('saving form...')
-      store.savedForms.files[route.params.id] = pluginFile.value
-    } else {
-      store.savedForms.files[route.params.id] = null
-    }
-    confirmLeave.value = true
-    router.push(toPath.value)
+  });
+  notify.success(
+    `Successfully imported ${tasks.length} ${tasks.length === 1 ? "task" : "tasks"}`,
+  );
+}
+
+const selectedParam = ref();
+
+function handleSelectedParam(
+  action,
+  paramProps,
+  paramIndex,
+  inputOrOutputParams,
+  functionsOrArtifacts,
+) {
+  selectedTaskProps.value = paramProps;
+  selectedTaskProps.value.paramIndex = paramIndex;
+  selectedTaskProps.value.inputOrOutputParams = inputOrOutputParams;
+  selectedTaskProps.value.functionsOrArtifacts = functionsOrArtifacts;
+  if (action === "create") {
+    selectedParam.value = "";
+    return;
   }
+  selectedParam.value =
+    selectedTaskProps.value.row[selectedTaskProps.value.inputOrOutputParams][
+      selectedTaskProps.value.paramIndex
+    ];
+}
 
-  const clearFormExecuted = ref(false)
+function updateParam(updatedParam) {
+  pluginFile.value.tasks[selectedTaskProps.value.functionsOrArtifacts][
+    selectedTaskProps.value.rowIndex
+  ][selectedTaskProps.value.inputOrOutputParams][
+    selectedTaskProps.value.paramIndex
+  ] = updatedParam;
+}
 
-  function clearForm() {
-    pluginFile.value = {
-      filename: '',
-      description: '',
-      contents: '',
-      tasks: {
-        functions: [],
-        artifacts: [],
-      }
-    }
-    basicInfoForm.value.reset()
-    clearFormExecuted.value = true
-    store.savedForms.files[route.params.id] = null
+function addParam(newParam) {
+  pluginFile.value.tasks[selectedTaskProps.value.functionsOrArtifacts][
+    selectedTaskProps.value.rowIndex
+  ][selectedTaskProps.value.inputOrOutputParams].push(newParam);
+}
+
+onBeforeRouteLeave((to, from, next) => {
+  toPath.value = to.path;
+  if (confirmLeave.value || !valuesChangedFromEditStart.value) {
+    next(true);
+  } else if (route.params.fileId === "new") {
+    leaveForm();
+  } else {
+    showLeaveDialog.value = true;
   }
+});
 
-  async function deleteFile() {
-    try {
-      await api.deleteFile(route.params.id, route.params.fileId)
-      showDeleteFileDialog.value = false
-      notify.success(`Successfully deleted '${pluginFile.value.filename}'`)
-      router.push(`/plugins/${route.params.id}/files`)
-    } catch(err) {
-      notify.error(err.response.data.message);
-    }
+const showLeaveDialog = ref(false);
+const showReturnDialog = ref(false);
+const confirmLeave = ref(false);
+const toPath = ref();
+
+const isEmptyValues = computed(() => {
+  return Object.values(pluginFile.value).every(
+    (value) =>
+      (typeof value === "string" && value === "") ||
+      (Array.isArray(value) && value.length === 0),
+  );
+});
+
+function leaveForm() {
+  if (route.params.fileId === "new" && valuesChangedFromOriginal.value) {
+    console.log("saving form...");
+    store.savedForms.files[route.params.id] = pluginFile.value;
+  } else {
+    store.savedForms.files[route.params.id] = null;
   }
+  confirmLeave.value = true;
+  router.push(toPath.value);
+}
+
+const clearFormExecuted = ref(false);
 
-  const showImportTasksDialog = ref(false)
-  const showTaskDialog = ref(false)
-  const taskType = ref('functions')
+function clearForm() {
+  pluginFile.value = {
+    filename: "",
+    description: "",
+    contents: "",
+    tasks: {
+      functions: [],
+      artifacts: [],
+    },
+  };
+  basicInfoForm.value.reset();
+  clearFormExecuted.value = true;
+  store.savedForms.files[route.params.id] = null;
+}
+
+async function deleteFile() {
+  try {
+    await api.deleteFile(route.params.id, route.params.fileId);
+    showDeleteFileDialog.value = false;
+    notify.success(`Successfully deleted '${pluginFile.value.filename}'`);
+    router.push(`/plugins/${route.params.id}/files`);
+  } catch (err) {
+    notify.error(err.response.data.message);
+  }
+}
 
-</script>
\ No newline at end of file
+const showImportTasksDialog = ref(false);
+const showTaskDialog = ref(false);
+const taskType = ref("functions");
+</script>
diff --git a/src/frontend/src/views/CreatePluginView.vue b/src/frontend/src/views/CreatePluginView.vue
index cd519ccd2..4a6b49368 100644
--- a/src/frontend/src/views/CreatePluginView.vue
+++ b/src/frontend/src/views/CreatePluginView.vue
@@ -1,5 +1,7 @@
 <template>
-  <PageTitle title="Create Plugin" />
+  <PageTitle title="Create Plugin" 
+  conceptType="plugin"
+  />
   <div :style="{ width: isMobile ? '100%' : isMedium ? '60%' : '50%' }">
     <fieldset class="q-mt-lg">
       <legend>Basic Info</legend>
@@ -55,16 +57,17 @@
         class="q-mr-lg cancel-btn"
         @click="confirmLeave = true; router.back()"
       />
-      <q-btn  
-        @click="submit()" 
-        color="primary"
-        label="Submit"
-        :disable="!valuesChangedFromOriginal"
-      >
+      <div class="inline-block">
+        <q-btn  
+          @click="submit()" 
+          color="primary"
+          label="Submit"
+          :disable="!valuesChangedFromOriginal"
+        />
         <q-tooltip v-if="!valuesChangedFromOriginal">
           No changes detected — nothing to save
         </q-tooltip>
-      </q-btn>
+      </div>
     </div>
   </div>
 
diff --git a/src/frontend/src/views/EditArtifactView.vue b/src/frontend/src/views/EditArtifactView.vue
index 57aeafa33..889967c46 100644
--- a/src/frontend/src/views/EditArtifactView.vue
+++ b/src/frontend/src/views/EditArtifactView.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="row items-center">
-    <PageTitle :title="`Artifact ${route.params.id}`" />
+    <PageTitle
+      :subtitle="`Artifact ${route.params.id}`"
+      conceptType="artifact"
+    />
     <q-chip
       v-if="route.params.id !== 'new'"
       class="q-ml-lg"
@@ -13,271 +16,200 @@
       <q-toggle v-model="store.showRightDrawer" left-label color="orange" />
     </q-chip>
   </div>
-  <div class="row q-gutter-xl">
+
+
+  <div class="row q-gutter-xl q-mt-md">
     <div :class="`${isLarge ? 'col-12' : 'col-4'}`">
-      <h2 class="q-mt-lg">Details</h2>
-      <div class="inline-block">
-        <KeyValueTable
-          :rows="rows"
-          :disabled="showHistory"
-          firstColumnMinWidth="205px"
-          :secondColumnFullWidth="isLarge || !artifact.isDir ? false : true"
-        >
-          <template #description="{}">
-            {{ artifact.description }}
-            <q-btn icon="edit" round size="sm" color="primary" flat />
+      <h2 class="q-mt-none text-h6">Details</h2>
+
+      <KeyValueTable 
+        :rows="rows" 
+        :disabled="showHistory"
+        firstColumnMinWidth="205px"
+        :secondColumnFullWidth="isLarge || !artifact.isDir ? false : true"
+      >
+        <template #id>
+          <ResourceName conceptType="artifact" :text="'ID: #' + artifact.id" includeIcon="true" />
+        </template>
+
+        <template #description>
+          <div class="row items-center justify-start">
+            <CellLongText :text="artifact.description" max-width="800px" class="col-auto" />
+            <q-btn icon="edit" round size="sm" color="primary" flat class="q-ml-sm">
+              <q-tooltip>Edit Description</q-tooltip>
+            </q-btn>
             <q-popup-edit v-model="artifact.description" auto-save v-slot="scope">
-              <q-input
-                v-model="scope.value"
-                dense
-                autofocus
-                counter
-                @keyup.enter="scope.set"
-              />
+              <q-input v-model="scope.value" dense autofocus counter @keyup.enter="scope.set" label="Description" />
             </q-popup-edit>
-          </template>
-          <template #fileUrl="{ fileUrl }">
-            <q-btn
-              @click="
-                downloadFile(
-                  artifact.fileUrl,
-                  artifact.artifactUri.split('/').pop(),
-                  'artifact'
-                )
-              "
-              label="Download Artifact"
-              color="primary"
-              icon="download"
-              :loading="isDownloadingArtifact"
-            />
-          </template>
-          <template #fileSize>
-            {{ prettyBytes(artifact.fileSize) }}
-          </template>
-          <template #job>
-            <RouterLink :to="`/jobs/${artifact?.job}`">
-              {{ artifact?.job }}
-            </RouterLink>
-          </template>
-          <template #plugin="{ plugin = {} }">
-            <div class="row items-end">
-              <div
-                v-if="Object.keys(plugin).length === 0 && !isLoading"
-                class="text-red"
-              >
-                <q-icon name="sym_o_warning" size="2.5em" />
-                The attached plugin has been deleted.
-              </div>
-              <q-select
-                label="Plugin"
-                v-model="artifact.plugin"
-                @filter="getPlugins"
-                :options="plugins"
-                option-label="name"
-                input-debounce="100"
-                dense
-                outlined
-                use-input
-                class="q-mt-sm q-ml-md col"
-              >
-                <template v-slot:option="scope">
-                  <q-item v-bind="scope.itemProps">
-                    <q-item-section>
-                      <q-item-label>{{ scope.opt.name }}</q-item-label>
-                      <q-item-label caption
-                        >Number of Files:
-                        {{ scope.opt.files.length }}</q-item-label
-                      >
-                      <q-item-label caption
-                        >Number of artifact tasks:
-                        {{ countTasks(scope.opt) }}</q-item-label
-                      >
-                    </q-item-section>
-                  </q-item>
-                </template>
-                <template v-slot:selected-item="scope">
-                  <q-item-label class="q-my-sm">
-                    <q-chip
-                      :label="plugin.name"
-                      color="secondary"
-                      text-color="white"
-                      v-if="Object.keys(plugin).length > 0"
-                    >
-                      <q-badge
-                        v-if="!plugin.latestSnapshot"
-                        color="red"
-                        label="outdated"
-                        rounded
-                        class="q-ml-xs"
-                      />
-                    </q-chip>
-                    <q-btn
-                      v-if="
-                        !plugin.latestSnapshot && Object.keys(plugin).length > 0
-                      "
-                      round
-                      color="red"
-                      icon="sync"
-                      size="sm"
-                      @click.stop="syncPlugin(plugin.id)"
-                    >
-                      <q-tooltip> Sync to latest version of plugin </q-tooltip>
-                    </q-btn>
-                  </q-item-label>
-                </template>
-              </q-select>
+          </div>
+        </template>
+
+        <template #fileUrl="{ fileUrl }">
+          <q-btn
+            @click="downloadFile(artifact.fileUrl, artifact.artifactUri.split('/').pop(), 'artifact')"
+            label="Download Artifact"
+            color="primary"
+            icon="download"
+            size="sm"
+            class="q-my-sm q-py-sm"
+            :loading="isDownloadingArtifact"
+          />
+        </template>
+
+        <template #fileSize>
+          {{ prettyBytes(artifact.fileSize) }}
+        </template>
+
+        <template #job>
+          <RouterLink :to="`/jobs/${artifact?.job}`" style="text-decoration: none">
+            <BadgeIcon type="job" :label="artifact.job" :showIcon="true", :clickable="true" />
+          </RouterLink>
+        </template>
+
+        <template #plugin="{ plugin = {} }">
+          <div class="column">
+            <div v-if="Object.keys(plugin).length === 0 && !isLoading" class="text-red q-mb-xs">
+              <q-icon name="sym_o_warning" size="1.5em" class="q-mr-xs" />
+              The attached plugin has been deleted.
             </div>
+
             <q-select
-              dense
-              v-model="selectedArtifactTask"
-              :options="artifactTaskOptions"
+              label="Attached Plugin"
+              v-model="artifact.plugin"
+              @filter="getPlugins"
+              :options="plugins"
               option-label="name"
+              input-debounce="100"
               outlined
-              label="Artifact Task"
-              class="q-mt-sm q-ml-md"
-              :disable="artifactTaskOptions.length === 0"
+              use-input
+              class="col"
+              style="max-width: 400px"
             >
-              <template #before>
-                <q-icon name="subdirectory_arrow_right" color="black" />
-              </template>
               <template v-slot:option="scope">
                 <q-item v-bind="scope.itemProps">
+                  <q-item-section avatar>
+                    <q-icon :name="getConceptStyle('plugin').icon" :color="getConceptStyle('plugin').color" />
+                  </q-item-section>
                   <q-item-section>
                     <q-item-label>{{ scope.opt.name }}</q-item-label>
-                    <q-item-label caption>
-                      Output Parameters:
-                      <q-chip
-                        v-for="param in scope.opt.outputParams"
-                        color="purple"
-                        text-color="white"
-                        dense
-                      >
-                        {{ param.name }}: {{ param.parameterType.name }}
-                      </q-chip>
-                    </q-item-label>
+                    <q-item-label caption>Files: {{ scope.opt.files.length }} | Tasks: {{ countTasks(scope.opt) }}</q-item-label>
                   </q-item-section>
                 </q-item>
               </template>
+
               <template v-slot:selected-item="scope">
-                <q-item
-                  v-bind="scope.itemProps"
-                  class="q-pl-none"
-                  v-if="artifactTaskOptions.length !== 0"
-                >
-                  <q-item-section>
-                    <q-item-label>{{ scope.opt.name }}</q-item-label>
-                    <q-item-label caption>
-                      <br />
-                      Output Parameters: <br />
-                      <q-chip
-                        v-for="outputParam in scope.opt.outputParams"
-                        :key="outputParam.name"
-                        :label="`${outputParam.name}: ${outputParam.parameterType.name}`"
-                        color="purple"
-                        text-color="white"
-                      />
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
+                <div class="q-py-xs">
+                  <div class="row items-center q-px-sm no-wrap shadow-1" 
+                  style="border-radius: 4px; border: 1px solid #eeeeee; width: fit-content;"
+                  :class="$q.dark.isActive ? 'bg-grey-10' : 'bg-grey-1'" >
+                    <q-icon :name="getConceptStyle('plugin').icon" 
+                      :color="$q.dark.isActive ? getConceptStyle('plugin').darkColor : getConceptStyle('plugin').color"  
+                      size="xs" />
+                    <q-chip 
+                     :color="$q.dark.isActive ? getConceptStyle('plugin').darkColor : getConceptStyle('plugin').color"
+                      size="sm" outline square clickable class="text-weight-bold no-border q-mx-none">
+                      <span class="font-mono ellipsis" style="font-size: 14px; font-weight: 500 "
+                       :color="$q.dark.isActive ? getConceptStyle('plugin').darkColor : getConceptStyle('plugin').color"
+                      >
+                        {{ scope.opt.name }}
+                      </span>
+                      <template v-if="!scope.opt.latestSnapshot">
+                        <div style="height: 12px; width: 1px; margin: 0 6px;"></div>
+                        <q-badge rounded color="warning" class="q-mr-xs" style="padding: 2px">
+                          <q-icon name="warning" color="white" size="10px" />
+                        </q-badge>
+                        <q-btn flat round dense size="xs" color="red" icon="sync" @click.stop="syncPlugin(scope.opt.id)">
+                          <q-tooltip>Sync to latest</q-tooltip>
+                        </q-btn>
+                      </template>
+                    </q-chip>
+                  </div>
+                </div>
               </template>
             </q-select>
-            <div
-              v-if="artifactTaskOptions.length === 0 && !isLoading"
-              class="text-caption text-negative"
-            >
-              The selected plugin has no files with artifact tasks. Please select
-              another plugin.
-            </div>
-          </template>
-        </KeyValueTable>
-        <div :class="`q-mt-lg float-right`">
-          <q-btn
-            outline
-            color="primary"
-            label="Cancel"
-            class="q-mr-lg cancel-btn"
-            @click="store.initialPage ? router.push('/artifacts') : router.back()"
-          />
-          <q-btn
-            @click="submit()"
-            color="primary"
-            label="Save Artifact"
-            type="submit"
-            :disable="store.showRightDrawer"
-          />
-        </div>
-      </div>
-    </div>
-    <div :class="isLarge ? 'col-6' : 'col-3'" class="column" v-if="artifact.isDir">
-      <h2 class="q-mt-lg">Directory</h2>
-      <q-card
-        flat
-        class="col q-py-sm"
-        style="border: 1px solid #cecece; "
-      >
-        <q-card-section class="row justify-between q-pt-sm">
-          <q-btn
-            @click="downloadFile(selectedNode?.fileUrl, selectedNode?.label)"
-            label="Download File"
-            color="primary"
-            icon="download"
-            :disable="!selectedNode || selectedNode.isDir"
-            :loading="isDownloadingFile"
-          />
-          <q-input
-            v-model="filter"
-            debounce="300"
+          </div>
+          
+          <q-select
             dense
-            placeholder="Search"
             outlined
-            clearable
-            @clear="selectedNode = null"
+            v-model="selectedArtifactTask"
+            :options="artifactTaskOptions"
+            option-label="name"
+            label="Artifact Task"
+            class="q-mt-sm"
+            style="width: fit-content"
+            :disable="artifactTaskOptions.length === 0"
           >
-            <template #append>
-              <q-icon name="search" />
+            <template #before>
+              <q-icon name="subdirectory_arrow_right" color="grey-7" />
             </template>
+            <template v-slot:option="scope">
+              <q-item v-bind="scope.itemProps">
+                <q-item-section>
+                  <q-item-label class="text-weight-bold">{{ scope.opt.name }}</q-item-label>
+                  <q-item-label caption v-if="scope.opt.outputParams?.length">
+                    <div class="row wrap q-mt-xs text-caption">
+                      <span class="text-weight-medium q-mr-xs"
+                      :class="$q.dark.isActive ? 'text-grey-2' : 'text-grey-9'">Outputs:</span>
+                      <div v-for="(param, i) in scope.opt.outputParams" :key="param.name" class="row items-baseline no-wrap q-gutter-x-xs">
+                        <span :class="$q.dark.isActive ? 'text-grey-2' : 'text-grey-9'" style="border-bottom: 2px solid #ab47bc; line-height: 1.1">{{ param.name }}</span>
+                        <span :class="$q.dark.isActive ? 'text-grey-2' : 'text-grey-9'">:</span>
+                        <span :class="$q.dark.isActive ? 'text-grey-4' : 'text-grey-7'" class="font-mono" style="font-size: 0.9em">{{ param.parameterType.name }}</span>
+                        <span v-if="i < scope.opt.outputParams.length - 1" class="text-grey-5 q-mr-xs">,</span>
+                      </div>
+                    </div>
+                  </q-item-label>
+                </q-item-section>
+              </q-item>
+            </template>
+            <template v-slot:selected-item="scope">
+              <div v-if="scope.opt" class="column q-py-xs q-mt-xs">
+                <BadgeIcon :label="scope.opt.name" :uppercase="false" type="task" :includeIcon="true" class="q-mb-sm q-pr-lg" style="width: fit-content" />
+                <div class="row wrap items-center text-caption q-gutter-sm" style="line-height: 1.4">
+                  <span :class="$q.dark.isActive ? 'text-grey-4' : 'text-grey-7'" class="text-weight-bold">Outputs:</span>
+                  <template v-if="scope.opt.outputParams && scope.opt.outputParams.length > 0">
+                    <div v-for="(p, i) in scope.opt.outputParams" :key="p.name" class="row items-baseline q-gutter-x-xs q-mr-sm">
+                      <span :class="$q.dark.isActive ? 'text-grey-5' : 'text-grey-7'" style="border-bottom: 2px solid #ab47bc; line-height: 1.2">{{ p.name }}</span>
+                      <span :class="$q.dark.isActive ? 'text-grey-6' : 'text-grey-6'" class=" font-mono" style="font-size: 0.9em">({{ p.parameterType.name }})</span>
+                    </div>
+                  </template>
+                  <span v-else class="text-grey-5 text-italic">None</span>
+                </div>
+              </div>
+            </template>
+          </q-select>
+
+          <div v-if="artifactTaskOptions.length === 0 && !isLoading" class="text-caption text-negative q-mt-xs q-ml-lg">
+            The selected plugin has no files with artifact tasks. Please select another plugin.
+          </div>
+        </template>
+      </KeyValueTable>
+      
+      <div class="row justify-start q-my-lg q-gutter-x-md">
+        <q-btn outline color="primary" label="Cancel" @click="store.initialPage ? router.push('/artifacts') : router.back()" />
+        <q-btn @click="submit()" color="primary" label="Save Artifact" :disable="store.showRightDrawer" />
+      </div>
+    </div>
+
+    <div :class="isLarge ? 'col-6' : 'col-3'" class="column" v-if="artifact.isDir">
+      <h2 class="q-mt-none text-h6">Directory</h2>
+      <q-card flat class="col q-py-sm" style="border: 1px solid #cecece;">
+        <q-card-section class="row justify-between q-pt-sm">
+          <q-btn @click="downloadFile(selectedNode?.fileUrl, selectedNode?.label)" label="Download File" color="primary" icon="download" :disable="!selectedNode || selectedNode.isDir" :loading="isDownloadingFile" />
+          <q-input v-model="filter" debounce="300" dense placeholder="Search" outlined clearable @clear="selectedNode = null">
+            <template #append><q-icon name="search" /></template>
           </q-input>
         </q-card-section>
         <q-separator />
-        <q-card-section
-          style="max-height: 65vh; overflow-y: auto"
-          class="q-pl-md q-pt-sm"
-        >
-          <q-tree
-            :nodes="nodes"
-            node-key="relativePath"
-            v-model:expanded="expandedKeys"
-            selected-color="primary"
-            dense
-            :filter="filter"
-            :filter-method="myFilterMethod"
-          >
+        <q-card-section style="max-height: 65vh; overflow-y: auto" class="q-pl-md q-pt-sm">
+          <q-tree :nodes="nodes" node-key="relativePath" v-model:expanded="expandedKeys" selected-color="primary" dense :filter="filter" :filter-method="myFilterMethod">
             <template v-slot:default-header="prop">
-              <q-item
-                clickable
-                style="width: 100%"
-                dense
-                class="q-pa-none"
-                @click="handleSelect(prop.node)"
-                :active="selectedNode === prop.node"
-                :active-class="`${
-                  $q.dark.isActive
-                    ? 'bg-deep-purple-10 text-white'
-                    : 'bg-grey-4 text-black'
-                }`"
-              >
-                <q-item-section avatar>
-                  <q-icon :name="prop.node.icon" />
-                </q-item-section>
+              <q-item clickable style="width: 100%" dense class="q-pa-none" @click="handleSelect(prop.node)" :active="selectedNode === prop.node" :active-class="`${$q.dark.isActive ? 'bg-deep-purple-10 text-white' : 'bg-grey-4 text-black'}`">
+                <q-item-section avatar><q-icon :name="prop.node.icon" /></q-item-section>
                 <q-item-section>
                   <q-item-label>
                     {{ prop.node.label }}
-                    <span
-                      v-if="prop.node.isFile"
-                      class="text-caption float-right q-pr-sm"
-                    >
-                      {{ prettyBytes(prop.node.fileSize) }}
-                    </span>
+                    <span v-if="prop.node.isFile" class="text-caption float-right q-pr-sm">{{ prettyBytes(prop.node.fileSize) }}</span>
                   </q-item-label>
                 </q-item-section>
               </q-item>
@@ -286,98 +218,142 @@
         </q-card-section>
       </q-card>
     </div>
-    <div class="col column">
-      <h2 class="q-mt-lg">File Preview</h2>
-      <q-card
-        class="col"
-        flat
-        style="border: 1px solid #cecece;"
-      >
-        <q-card-section style="height: 72px;" class="row items-center justify-between">
-          <div v-if="!selectedNode || selectedNode.isDir" class="text-grey">
-            Select a file to preview
+
+    <div class="col column" style="max-width: 100%;">
+      <h2 class="q-mt-none text-h6">File Preview</h2>
+      <q-card class="col column shadow-1" style="border: 1px solid #cecece; border-radius: 6px;">
+        
+        <q-card-section 
+          class=" row items-center justify-between q-py-sm" 
+          :class="$q.dark.isActive ? 'bg-grey-10' : 'bg-grey-2'"
+          style="border-bottom: 1px solid #cecece; min-height: 60px;"
+        >
+          <div v-if="!selectedNode || selectedNode.isDir" class="text-italic flex items-center q-gutter-x-sm"
+           :class="$q.dark.isActive ? 'bg-grey-2' : 'bg-grey-9'">
+            <q-icon name="sym_o_visibility_off" size="sm" />
+            <span>No preview selected</span>
           </div>
-          <div v-else class="row items-center text-subtitle2">
-            {{ selectedNode.label }}
+          
+          <div v-else class="row items-center q-gutter-x-sm">
+            <q-icon name="sym_o_description" size="sm"  
+             :color="$q.dark.isActive ? 'lightblue' : 'primary'"/>
+            <span class="text-weight-bold" style="font-size: 1.1rem; letter-spacing: 0.5px;"
+             :class="$q.dark.isActive ? 'text-grey-2' : 'text-grey-9'">
+              {{ selectedNode.label }}
+            </span>
+            <q-chip 
+              v-if="preview.ext"  
+              size="sm" 
+              color="blue-grey-2" 
+              text-color="blue-grey-9" 
+              class="text-weight-bold text-uppercase q-ml-sm"
+            >
+              {{ preview.ext }}
+            </q-chip>
           </div>
-          <q-toggle
-            v-if="preview.kind === 'image'"
-            label="Full Width"
-            v-model="imageFullWidth"
+          
+          <q-toggle 
+            v-if="preview.kind === 'image'" 
+            color="primary" 
+            label="Full Width" 
+            v-model="imageFullWidth" 
+            left-label 
+            dense 
           />
         </q-card-section>
-        <q-separator />
-        <q-card-section 
-          v-if="selectedNode && !selectedNode.isDir"
-          style="max-height: 65vh; overflow-y: auto"
-        >
-          <div v-if="preview.loading" class="q-pa-md">
-            <q-spinner /> Loading preview...
+
+        <q-card-section class="q-pa-none col flex column"
+        :class="$q.dark.isActive ? 'bg-grey-10' : 'bg-grey-2'"
+        style="max-height: 65vh; overflow-y: auto;">
+          
+          <div v-if="!selectedNode || selectedNode.isDir" class="flex flex-center column q-pa-xl text-grey-5 col">
+            <q-icon name="sym_o_file_present" size="4rem" class="q-mb-md" style="opacity: 0.5" />
+            <div class="text-h6 text-weight-regular">Select a file to preview</div>
           </div>
 
-          <div v-else-if="preview.error" class="text-negative q-pa-md">
-            {{ preview.error }}
+          <div v-else-if="preview.loading" class="flex flex-center column q-pa-xl text-primary col">
+            <q-spinner size="3rem" class="q-mb-md" />
+            <div class="text-subtitle1">Loading file preview...</div>
           </div>
 
-          <div v-else-if="preview.ext === 'json' || preview.ext === 'yaml'">
-            <CodeEditor 
-              v-model="preview.text"
-              language="yaml"
-              :readOnly="true"
-            />
+          <div v-else-if="preview.error" class="flex flex-center column q-pa-xl text-negative col">
+            <q-icon name="error_outline" size="3rem" class="q-mb-md" />
+            <div class="text-subtitle1 text-center">{{ preview.error }}</div>
           </div>
 
-          <!-- JSON/text preview -->
-          <pre v-else-if="preview.kind === 'text'">{{ preview.text }}</pre>
+          <div v-else class="q-pa-md col">
+            
+            <div v-if="preview.ext === 'json' || preview.ext === 'yaml'" class="shadow-1 rounded-borders overflow-hidden" style="border: 1px solid #e0e0e0;">
+              <CodeEditor v-model="preview.text" language="yaml" :readOnly="true" />
+            </div>
 
-          <!-- Image preview -->
-          <img
-            v-else-if="preview.kind === 'image'"
-            :src="preview.objectUrl"
-            style="max-width: 100%; height: auto;"
-            :style="{ width: imageFullWidth ? '100%' : `auto` }"
-          />
+            <pre 
+              v-else-if="preview.kind === 'text'" 
+              class="q-pa-md rounded-borders text-body2 font-mono "
+              :class="$q.dark.isActive ? 'bg-grey-9 text-blue-grey-1' : 'bg-grey-3 text-blue-grey-9'" 
+              style="white-space: pre-wrap; word-break: break-word; border: 1px solid #e0e0e0; margin: 0;"
+            >{{ preview.text }}</pre>
+
+            <div v-else-if="preview.kind === 'image'" class="flex flex-center bg-grey-2 rounded-borders q-pa-sm" style="border: 1px solid #e0e0e0;">
+              <img 
+                :src="preview.objectUrl" 
+                class="rounded-borders shadow-1" 
+                style="max-width: 100%; height: auto; transition: width 0.3s ease;" 
+                :style="{ width: imageFullWidth ? '100%' : 'auto' }" 
+              />
+            </div>
 
-          <!-- PDF preview -->
-          <iframe
-            v-else-if="preview.kind === 'pdf'"
-            :src="preview.objectUrl"
-            style="width: 100%; height: 100%; border: 0"
-          />
+            <iframe 
+              v-else-if="preview.kind === 'pdf'" 
+              :src="preview.objectUrl" 
+              class="rounded-borders"
+              style="width: 100%; height: 60vh; border: 1px solid #e0e0e0;" 
+            />
 
-          <div v-else class="text-caption text-grey">
-            No preview available for this file type. Use Download.
+            <div v-else class="flex flex-center column q-pa-xl text-grey-6 col">
+              <q-icon name="sym_o_visibility_off" size="3rem" class="q-mb-md" />
+              <div class="text-subtitle1">No preview available for this file type.</div>
+              <div class="text-caption">Use the Download Artifact button above to view Artifact.</div>
+            </div>
           </div>
+          
         </q-card-section>
       </q-card>
     </div>
   </div>
 </template>
 
+
+
 <script setup>
-import PageTitle from "@/components/PageTitle.vue";
-import { useRoute, useRouter } from "vue-router";
+
 import { onMounted, computed, ref, inject, watch } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useLoginStore } from "@/stores/LoginStore.ts";
 import * as api from "@/services/dataApi";
-import KeyValueTable from "@/components/KeyValueTable.vue";
 import * as notify from "../notify";
-import { useLoginStore } from "@/stores/LoginStore.ts";
-import { useQuasar } from "quasar";
+import {useQuasar} from "quasar";
+
+// Components
+import PageTitle from "@/components/PageTitle.vue";
+import KeyValueTable from "@/components/KeyValueTable.vue";
+import ResourceName from "@/components/table/cells/ResourceName.vue";
+import ParameterList from "@/components/table/cells/ParameterList.vue";
+import BadgeIcon from "@/components/table/cells/BadgeIcon.vue"; 
+import CellLongText from "@/components/table/cells/CellLongText.vue"; 
+import { getConceptStyle } from "@/constants/tableStyles";
 import CodeEditor from '@/components/CodeEditor.vue'
 
+const store = useLoginStore();
+
 const $q = useQuasar();
 
 const isMedium = inject("isMedium");
 const isLarge = inject("isLarge");
 const isMobile = inject("isMobile");
-
-const store = useLoginStore();
-
+const darkMode = inject("darkMode");
 const route = useRoute();
 const router = useRouter();
-
-const darkMode = inject("darkMode");
-
 const isLoading = ref(true);
 
 const showHistory = computed(() => {
@@ -404,7 +380,17 @@ const artifact = ref({
   task: {
     outputParams: [],
   },
-});
+
+  id: '',
+  createdOn: '',
+  lastModifiedOn: '',
+  snapshotCreatedOn: '',
+  fileUrl: '',
+  fileSize: 0,
+  job: "",
+  isDir: false,
+  plugin: {},
+})
 
 async function getArtifact() {
   try {
@@ -429,9 +415,8 @@ async function getPluginSnapshot() {
     ORIGINAL_PLUGIN_SNAPSHOT = JSON.parse(
       JSON.stringify(artifact.value.plugin)
     );
-    // load task dropdown
     const pluginFile = artifact.value.plugin.files.find(
-      (file) => file.id === artifact.value.task.pluginFileResourceId
+      (file) => file.id === artifact.value.task.pluginFileResourceId,
     );
     pluginFile.tasks.artifacts.forEach((task) => {
       artifactTaskOptions.value.push(task);
@@ -450,23 +435,35 @@ const selectedArtifactTask = ref();
 const plugins = ref([]);
 
 async function getPlugins(val = "", update) {
-  update(async () => {
-    try {
-      let res = await api.getData("plugins", {
-        search: val,
-        rowsPerPage: 0, // get all
-        index: 0,
-      });
-      const originalPluginIndex = res.data.data.findIndex(
-        (plugin) => plugin.id === ORIGINAL_PLUGIN_SNAPSHOT.id
-      );
-      // replace latest plugin snapshot with original plugin snapshot from artifact
-      res.data.data[originalPluginIndex] = ORIGINAL_PLUGIN_SNAPSHOT;
-      plugins.value = res.data.data;
-    } catch (err) {
-      notify.error(err.response.data.message);
-    }
-  });
+  try {
+
+    let res = await api.getData("plugins", {
+      search: val,
+      rowsPerPage: 0, // get all
+      index: 0,
+    });
+
+    update(() => {
+      if (res?.data?.data) {
+        if (ORIGINAL_PLUGIN_SNAPSHOT) {
+          const originalPluginIndex = res.data.data.findIndex(
+            (plugin) => plugin.id === ORIGINAL_PLUGIN_SNAPSHOT.id
+          );
+          
+          // Prevent mutating index -1
+          if (originalPluginIndex !== -1) {
+            res.data.data[originalPluginIndex] = ORIGINAL_PLUGIN_SNAPSHOT;
+          }
+        }
+        plugins.value = res.data.data;
+      }
+    });
+  } catch (err) {
+    update(() => {
+      plugins.value = [];
+    });
+    notify.error(err.response?.data?.message || err.message);
+  }
 }
 
 watch(
@@ -543,7 +540,10 @@ async function syncPlugin(pluginID) {
 }
 
 const rows = computed(() => [
-  { label: "ID", value: artifact.value?.id },
+  { 
+    label: "Artifact ID", 
+    slot: "id" 
+  },
   {
     label: "Description",
     slot: "description",
@@ -561,19 +561,19 @@ const rows = computed(() => [
     label: "Snapshot Timestamp",
     value: formatDate(artifact.value?.snapshotCreatedOn),
   },
-  {
-    label: "Download",
-    slot: "fileUrl",
-    props: { fileUrl: artifact.value?.fileUrl },
-  },
   { label: "fileSize", slot: "fileSize" },
   { label: "Job ID", slot: "job" },
   { label: "isDir", value: artifact.value?.isDir },
   {
-    label: "Plugin",
+    label: "Plugin for Download",
     slot: "plugin",
     props: { plugin: artifact.value?.plugin },
   },
+  {
+    label: "Download",
+    slot: "fileUrl",
+    props: { fileUrl: artifact.value?.fileUrl },
+  },
 ]);
 
 function formatDate(dateString) {
@@ -596,6 +596,7 @@ async function submit() {
       taskId: selectedArtifactTask.value.id,
     });
     notify.success(`Successfully updated artifact '${route.params.id}'`);
+    router.push(`/artifacts`);
   } catch (err) {
     notify.error(err.response.data.message);
   }
@@ -684,12 +685,11 @@ function getExpandKeysForFilter(nodes, filter) {
     for (const node of items || []) {
       const nextAncestors = [...ancestorKeys];
 
-      // Only directories should be expanded (usually what you want)
+      // Only directories should be expanded 
       if (node.isDir && node.relativePath) {
         nextAncestors.push(node.relativePath);
       }
 
-      // If THIS node matches, expand its ancestors (not its children)
       if (matches(node)) {
         for (const k of ancestorKeys) keys.add(k);
       }
@@ -734,7 +734,7 @@ function processFiles() {
   const rootChildren = nodes.value[0].children;
 
   files.value.forEach((file) => {
-    const parts = file.relativePath.split("/"); // e.g. ["4958", "0000.shard", "file.snapshot"]
+    const parts = file.relativePath.split("/"); 
 
     let currentChildren = rootChildren;
     let currentPath = ""; // will build up like "4958", then "4958/0000.shard", etc.
@@ -790,7 +790,7 @@ function processFiles() {
 
 function handleSelect(node) {
   if (selectedNode.value?.relativePath === node.relativePath) {
-    selectedNode.value = "";
+    selectedNode.value = null;
   } else {
     selectedNode.value = node;
   }
@@ -882,7 +882,6 @@ async function loadPreview(node) {
 
     const isPdf = ext === "pdf";
 
-    // If you need auth headers, replace fetch() with an api call (axios) and responseType accordingly.
     if (isText) {
       const res = await fetch(node.fileUrl, { credentials: "include" });
       if (!res.ok)
diff --git a/src/frontend/src/views/EditExperiment.vue b/src/frontend/src/views/EditExperiment.vue
index 8928835d0..c1217ac6f 100644
--- a/src/frontend/src/views/EditExperiment.vue
+++ b/src/frontend/src/views/EditExperiment.vue
@@ -1,7 +1,10 @@
 <template>
   <div class="row items-center justify-between">
     <div class="row items-center">
-      <PageTitle :title="ORIGINAL_EXPERIMENT?.name" />
+      <PageTitle
+        :subtitle="pageSubtitle"
+        conceptType="experiment"
+      />
       <q-chip
         v-if="route.params.id !== 'new'"
         class="q-ml-lg"
@@ -11,18 +14,14 @@
         @click="store.showRightDrawer = !store.showRightDrawer"
         clickable
       >
-        <q-toggle
-          v-model="store.showRightDrawer"
-          left-label
-          color="orange"
-        />
+        <q-toggle v-model="store.showRightDrawer" left-label color="orange" />
       </q-chip>
     </div>
-    <q-btn 
+    <q-btn
       v-if="route.params.id !== 'new'"
-      :color="history ? 'red-3' : 'negative'" 
-      icon="sym_o_delete" 
-      label="Delete Experiment" 
+      :color="history ? 'red-3' : 'negative'"
+      icon="sym_o_delete"
+      label="Delete Experiment"
       @click="showDeleteDialog = true"
       :disable="history"
     />
@@ -31,44 +30,52 @@
   <q-expansion-item
     v-model="showMetadata"
     class="shadow-1 overflow-hidden q-mt-lg"
-    style="border-radius: 10px; width: 40%"
+    style="border-radius: 10px; min-width:400px; width: 60%; max-width: 700px"
     header-style="font-size: 22px"
     header-class="bg-primary text-white"
     expand-icon-class="text-white"
   >
     <template #header>
       <q-item-section avatar>
-        <q-icon name="sym_o_science" color="white" size="md" />
+        <q-icon :name="styles.icon"  color="white" size="md" /> 
       </q-item-section>
       <q-item-section>
         <q-item-label>
-          {{ showMetadata ? 'Hide' : 'Show' }} "{{ ORIGINAL_EXPERIMENT.name }}" Metadata
+          {{ showMetadata ? "Hide" : "Show" }} "{{ ORIGINAL_EXPERIMENT.name }}"
+          Metadata
         </q-item-label>
-        <q-item-label caption class="text-white" v-if="ORIGINAL_EXPERIMENT.description">
+        <q-item-label
+          caption
+          class="text-white"
+          v-if="ORIGINAL_EXPERIMENT.description"
+        >
           {{ truncateString(ORIGINAL_EXPERIMENT.description, 100) }}
         </q-item-label>
       </q-item-section>
     </template>
-    <q-card 
-      class="q-pa-md"
-      :class="history ? 'disabled' : ''"
+
+
+  <q-card class="q-pa-md" :class="history ? 'disabled' : ''">
+    <KeyValueTable
+      :rows="metadataRows"
+      :style="{ pointerEvents: history ? 'auto' : 'auto' }"
+      :secondColumnFullWidth="true"
     >
-      <KeyValueTable 
-        :rows="metadataRows"
-        :style="{ pointerEvents: history ? 'none' : 'auto', }"
-        :secondColumnFullWidth="true"
-      >
-        <template #name="{ }">
-          {{ experiment?.name }}
-          <q-btn icon="edit" round size="sm" color="primary" flat />
+      <template #name="{}">
+        <div class="row items-center cursor-pointer">
+          <div class="text-h6 text-weight-bold text-primary">
+            {{ experiment?.name }}
+          </div>
+          <q-btn icon="edit" round size="sm" color="primary" flat class="q-ml-sm" />
+          
           <q-popup-edit
-            v-model="experiment.name" 
-            auto-save 
+            v-model="experiment.name"
+            auto-save
             v-slot="scope"
             :validate="requiredRule"
           >
-            <q-input 
-              v-model.trim="scope.value"
+            <q-input
+              v-model="scope.value"
               dense
               autofocus
               counter
@@ -78,70 +85,65 @@
               @update:model-value="checkName"
             />
           </q-popup-edit>
-        </template>
-        <template #group="{ }">
-          <q-select
-            outlined 
-            v-model="experiment.group" 
-            :options="store.groups"
-            option-label="name"
-            option-value="id"
-            emit-value
-            map-options
-            dense
-            :rules="[requiredRule]"
-            aria-required="true"
-            :disable="history"
-            hide-bottom-space
-          />
-        </template>
-        <template #description="{ }">
-          <div class="row items-center no-wrap">
-            <div style="white-space: pre-line; overflow-wrap: break-word; ">
-              {{ experiment?.description }}
-            </div>
-            <q-btn icon="edit" round size="sm" color="primary" flat class="q-ml-xs" />
+        </div>
+      </template>
+
+      <template #group="{}">
+        <ResourcePicker
+
+          v-model="experiment.group"
+          type="group"
+          :options="store.groups"
+          option-value="id"
+          @filter="getGroups"
+          :disable="history"
+          input-debounce="300"
+        />
+      </template>
+
+      <template #description="{}">
+        <div class="row items-center no-wrap cursor-pointer">
+          <div
+            class="text-body1 text-grey-8"
+            style="white-space: pre-line; overflow-wrap: break-word; line-height: 1.5;"
+            :class="{ 'text-grey-5': darkMode }"
+          >
+            {{ experiment?.description || "No description provided." }}
           </div>
-          <q-popup-edit v-model.trim="experiment.description" auto-save v-slot="scope" buttons>
+          <q-btn icon="edit" round size="sm" color="grey" flat class="q-ml-xs" />
+
+          <q-popup-edit 
+            v-model="experiment.description" 
+            auto-save 
+            v-slot="scope" 
+            buttons
+          >
             <q-input
               v-model="scope.value"
+              type="textarea"
               dense
               autofocus
               counter
-              type="textarea"
               @keyup.enter.stop
             />
           </q-popup-edit>
+        </div>
+      </template>
+
+      <template #entrypoints="{}">
+        <ResourcePicker
+          v-if="!history"
+          v-model="experiment.entrypoints"
+          type="entrypoint"
+          chip-square chip-outline
+          :options="entrypoints"
+          option-value="id"
+          @filter="getEntrypoints"
+          :disable="history"
+          input-debounce="300"
+        />
         </template>
-        <template #entrypoints="{ }">
-          <q-select
-            v-if="!history"
-            outlined
-            v-model="experiment.entrypoints"
-            use-input
-            use-chips
-            multiple
-            map-options
-            option-label="name"
-            option-value="id"
-            input-debounce="300"
-            :options="entrypoints"
-            @filter="getEntrypoints"
-            :disable="history"
-              
-          >
-            <template v-slot:selected>
-              <q-chip
-                v-for="(entrypoint, i) in experiment.entrypoints"
-                :key="entrypoint.id"
-                color="secondary"
-                :label="entrypoint.name"
-                class="text-white"
-                removable
-                @remove="experiment.entrypoints.splice(i, 1)"
-              />
-            </template>  
-          </q-select>
+
           <div class="row items-center" v-if="history">
             <q-icon
               name="sym_o_info"
@@ -149,27 +151,28 @@
               color="grey"
               class="q-mr-sm"
             />
-            <div style="flex: 1; white-space: normal; word-break: break-word;">
+            <div style="flex: 1; white-space: normal; word-break: break-word">
               Entrypoints are not yet available in Experiment snapshots
             </div>
           </div>
-        </template>
+
       </KeyValueTable>
-      <div class="float-right q-my-sm" >
+      <div class="float-right q-my-sm">
         <q-btn
-          outline  
-          color="primary" 
+          outline
+          color="primary"
           label="Revert"
           class="q-mr-lg cancel-btn"
           @click="revertValues"
           :disable="!valuesChanged"
         />
+
         <q-btn
           label="Save"
           color="primary"
           @click="updateExperiment"
           :disable="!valuesChanged"
-          style="min-width: 100px;"
+          style="min-width: 100px"
         >
           <q-tooltip v-if="!valuesChanged">
             No changes detected — nothing to save
@@ -179,7 +182,7 @@
     </q-card>
   </q-expansion-item>
 
-  <JobsView /> 
+  <JobsView embedded />
 
   <DeleteDialog
     v-model="showDeleteDialog"
@@ -190,170 +193,201 @@
 </template>
 
 <script setup>
-import { ref, inject, computed, watch, onMounted } from 'vue'
-import { useLoginStore } from '@/stores/LoginStore.ts'
-import { useRouter, useRoute } from 'vue-router'
-import * as api from '@/services/dataApi'
-import * as notify from '../notify'
-import PageTitle from '@/components/PageTitle.vue'
-import DeleteDialog from '@/dialogs/DeleteDialog.vue'
-import KeyValueTable from '@/components/KeyValueTable.vue'
-import JobsView from './JobsView.vue'
+import { ref, inject, computed, watch, onMounted } from "vue";
+import { useLoginStore } from "@/stores/LoginStore.ts";
+import { useRouter, useRoute } from "vue-router";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
+import PageTitle from "@/components/PageTitle.vue";
+import DeleteDialog from "@/dialogs/DeleteDialog.vue";
+import KeyValueTable from "@/components/KeyValueTable.vue";
+import JobsView from "./JobsView.vue";
+import ResourcePicker from "@/components/ResourcePicker.vue";
+import { getConceptStyle } from "@/constants/tableStyles";
+
+const route = useRoute();
 
-const route = useRoute()
+const router = useRouter();
 
-const router = useRouter()
+const store = useLoginStore();
+const isMobile = inject("isMobile");
+const isMedium = inject("isMedium");
+const darkMode = inject("darkMode");
 
-const store = useLoginStore()
-const isMobile = inject('isMobile')
-const isMedium = inject('isMedium')
-const darkMode = inject('darkMode')
+const styles = computed(() => {
+  return getConceptStyle('experiment') || { color: "grey-7", icon: "help" };
+});
 
 const experiment = ref({
-  name: '',
+  name: "",
   group: store.loggedInGroup.id,
-  description: '',
+  description: "",
   entrypoints: [],
-})
+});
 const ORIGINAL_EXPERIMENT = ref({
-  name: '',
+  name: "",
   group: store.loggedInGroup.id,
-  description: '',
+  description: "",
   entrypoints: [],
-})
+});
 
 const history = computed(() => {
-  return store.showRightDrawer
+  return store.showRightDrawer;
+});
+
+const pageSubtitle = computed(() => {
+  if (route.params.id === 'new') {
+    return 'Create Experiment'
+  }
+  if (store.showRightDrawer && store.selectedSnapshot) {
+    return `${experiment.value?.name || 'Loading...'} (Snapshot ${store.selectedSnapshot.snapshot})`
+  }
+  if (route.query.snapshotId && store.showRightDrawer) {
+    return `${experiment.value?.name || 'Loading...'} (Snapshot ${route.query.snapshotId})`
+  }
+  return ORIGINAL_EXPERIMENT.value?.name || experiment.value?.name || 'Loading...'
 })
 
 onMounted(() => {
-  getExperiment()
-})
+  if (route.query.snapshotId && !store.showRightDrawer) {
+    store.showRightDrawer = true
+  }
+  
+  getExperiment();
+});
 
 async function getExperiment() {
   try {
-    const res = await api.getItem('experiments', route.params.id)
-    experiment.value = res.data
-    ORIGINAL_EXPERIMENT.value = JSON.parse(JSON.stringify(experiment.value))
+    const res = await api.getItem("experiments", route.params.id);
+    experiment.value = res.data;
+    ORIGINAL_EXPERIMENT.value = JSON.parse(JSON.stringify(experiment.value));
     // copyAtEditStart.value = JSON.parse(JSON.stringify({
     //   name: res.data.name,
     //   group: res.data.group,
     //   description: res.data.description,
     //   entrypoints: res.data.entrypoints,
     // }))
-  } catch(err) {
-    console.log('err = ', err)
-    notify.error(err.response.data.message)
-  } 
+  } catch (err) {
+    console.log("err = ", err);
+    notify.error(err.response.data.message);
+  }
 }
 
 const metadataRows = computed(() => [
-  { label: 'Name', slot: 'name' },
-  { label: 'Group', slot: 'group' },
-  { label: 'Description', slot: 'description' },
-  { label: 'Entrypoints', slot: 'entrypoints' },
-])
+  { label: "Name", slot: "name" },
+  { label: "Group", slot: "group" },
+  { label: "Description", slot: "description" },
+  { label: "Entrypoints", slot: "entrypoints" },
+]);
 
-const invalidName = ref(false)
-const nameError = ref('')
+const invalidName = ref(false);
+const nameError = ref("");
 
 function requiredRule(val) {
-  if(!val || val.length === 0) {
-    invalidName.value = true
-    nameError.value = 'Name is required'
-    return false
+  if (!val || val.length === 0) {
+    invalidName.value = true;
+    nameError.value = "Name is required";
+    return false;
   }
-  invalidName.value = false
-  nameError.value = ''
-  return true
+  invalidName.value = false;
+  nameError.value = "";
+  return true;
 }
 
 function checkName(val) {
-  if(val.length === 0) {
-    invalidName.value = true
-    nameError.value = 'Name is required'
+  if (val.length === 0) {
+    invalidName.value = true;
+    nameError.value = "Name is required";
   } else {
-    invalidName.value = false
-    nameError.value = ''
+    invalidName.value = false;
+    nameError.value = "";
   }
 }
 
-const entrypoints = ref([])
+const entrypoints = ref([]);
 
-async function getEntrypoints(val = '', update) {
+async function getEntrypoints(val = "", update) {
   update(async () => {
     try {
-      const res = await api.getData('entrypoints', {
+      const res = await api.getData("entrypoints", {
         search: val,
         rowsPerPage: 0, // get all
-        index: 0
-      })
-      entrypoints.value = res.data.data
-    } catch(err) {
-      notify.error(err.response.data.message)
-    } 
-  })
+        index: 0,
+      });
+      entrypoints.value = res.data.data;
+    } catch (err) {
+      notify.error(err.response.data.message);
+    }
+  });
 }
 
 const valuesChanged = computed(() => {
-  return JSON.stringify(ORIGINAL_EXPERIMENT.value) !== JSON.stringify(experiment.value)
-})
+  return (
+    JSON.stringify(ORIGINAL_EXPERIMENT.value) !==
+    JSON.stringify(experiment.value)
+  );
+});
 
 function revertValues() {
-  experiment.value = JSON.parse(JSON.stringify(ORIGINAL_EXPERIMENT.value))
+  experiment.value = JSON.parse(JSON.stringify(ORIGINAL_EXPERIMENT.value));
 }
 
 async function updateExperiment() {
   experiment.value.entrypoints.forEach((entrypoint, index, array) => {
-    if(typeof entrypoint === 'object') {
-      array[index] = entrypoint.id
+    if (typeof entrypoint === "object") {
+      array[index] = entrypoint.id;
     }
-  })
+  });
   try {
-    const res = await api.updateItem('experiments', route.params.id, {
+    const res = await api.updateItem("experiments", route.params.id, {
       name: experiment.value.name,
       description: experiment.value.description,
-      entrypoints: experiment.value.entrypoints
-    })
-    getExperiment()
-    notify.success(`Successfully updated '${res.data.name}'`)
-  } catch(err) {
-    notify.error(err.response.data.message)
-  }  
+      entrypoints: experiment.value.entrypoints,
+    });
+    getExperiment();
+    notify.success(`Successfully updated '${res.data.name}'`);
+  } catch (err) {
+    notify.error(err.response.data.message);
+  }
 }
 
-watch(() => history.value, (newVal) => {
-  if(newVal) {
-    showMetadata.value = true
-  }
-})
+watch(
+  () => history.value,
+  (newVal) => {
+    if (newVal) {
+      showMetadata.value = true;
+    }
+  },
+);
 
-watch(() => store.selectedSnapshot, (newVal) => {
-  if(newVal) {
-    experiment.value = newVal
-  } else {
-    getExperiment()
-  }
-})
+watch(
+  () => store.selectedSnapshot,
+  (newVal) => {
+    if (newVal) {
+      experiment.value = newVal;
+    } else {
+      getExperiment();
+    }
+  },
+);
 
-const showDeleteDialog = ref(false)
+const showDeleteDialog = ref(false);
 
 async function deleteExperiment() {
   try {
-    await api.deleteItem('experiments', experiment.value.id)
-    notify.success(`Successfully deleted '${experiment.value.name}'`)
-    router.push(`/experiments`)
-  } catch(err) {
+    await api.deleteItem("experiments", experiment.value.id);
+    notify.success(`Successfully deleted '${experiment.value.name}'`);
+    router.push(`/experiments`);
+  } catch (err) {
     notify.error(err.response.data.message);
   }
 }
 
-const showMetadata = ref(false)
+const showMetadata = ref(false);
 
-function truncateString(str, limit) { 
-  if(!str) return ''
-  if(str?.length < limit) return str 
-  return str?.slice(0, limit > 3 ? limit - 3 : limit) + '...'; 
+function truncateString(str, limit) {
+  if (!str) return "";
+  if (str?.length < limit) return str;
+  return str?.slice(0, limit > 3 ? limit - 3 : limit) + "...";
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/frontend/src/views/EditPluginView.vue b/src/frontend/src/views/EditPluginView.vue
index 2d7c7692c..88b0aac93 100644
--- a/src/frontend/src/views/EditPluginView.vue
+++ b/src/frontend/src/views/EditPluginView.vue
@@ -1,22 +1,21 @@
 <template>
   <div class="row items-center justify-between">
-    <PageTitle :title="ORIGINAL_PLUGIN?.name"/>
-    <q-btn 
+    <PageTitle :subtitle="ORIGINAL_PLUGIN?.name" conceptType="plugin" />
+    <q-btn
       color="negative"
-      icon="sym_o_delete" 
-      label="Delete Plugin" 
+      icon="sym_o_delete"
+      label="Delete Plugin"
       @click="showDeletePluginDialog = true"
     />
   </div>
 
-    <q-expansion-item
+  <q-expansion-item
     v-model="showMetadata"
     class="shadow-1 overflow-hidden q-mt-lg"
-    style="border-radius: 10px; width: 40%"
+    style="border-radius: 10px; min-width:400px; width: 60%; max-width: 700px"
     header-style="font-size: 22px"
     header-class="bg-primary text-white"
     expand-icon-class="text-white"
-    :label="`${showMetadata ? 'Hide' : 'Edit'} Plugin Metadata`"
   >
     <template #header>
       <q-item-section avatar>
@@ -24,106 +23,119 @@
       </q-item-section>
       <q-item-section>
         <q-item-label>
-          {{ showMetadata ? 'Hide' : 'Show' }} "{{ ORIGINAL_PLUGIN.name }}" Metadata
+          {{ showMetadata ? "Hide" : "Show" }} "{{ ORIGINAL_PLUGIN.name }}"
+          Metadata
         </q-item-label>
-        <q-item-label caption class="text-white" v-if="ORIGINAL_PLUGIN.description" >
+        <q-item-label
+          caption
+          class="text-white"
+          v-if="ORIGINAL_PLUGIN.description"
+        >
           {{ truncateString(ORIGINAL_PLUGIN.description, 100) }}
         </q-item-label>
       </q-item-section>
     </template>
+
     <q-card class="q-pa-md">
       <KeyValueTable :rows="pluginRows" :secondColumnFullWidth="true">
-        <template #name="{ }">
-          {{ name }}
-          <q-btn icon="edit" round size="sm" color="primary" flat />
-          <q-popup-edit
-            v-model="name" 
-            auto-save 
-            v-slot="scope"
-            :validate="requiredRule"
-          >
-            <q-input 
-              v-model.trim="scope.value"
-              dense
-              autofocus
-              counter
-              @keyup.enter="scope.set"
-              :error="invalidName"
-              :error-message="nameError"
-              @update:model-value="checkName"
-            />
-          </q-popup-edit>
+        <template #name>
+          <div class="row items-center cursor-pointer">
+            {{ name }}
+            <q-icon name="edit" size="xs" color="primary" class="q-ml-sm" />
+            <q-popup-edit
+              v-model.trim="description"
+              auto-save
+              v-slot="scope"
+              buttons
+            >
+              <q-input
+                v-model="scope.value"
+                dense
+                autofocus
+                counter
+                type="textarea"
+                @keyup.enter.stop
+              />
+            </q-popup-edit>
+          </div>
         </template>
-        <template #description="{ }">
-          <div class="row items-center no-wrap">
-            <div style="white-space: pre-line; overflow-wrap: break-word; ">
-              {{ description }}
+
+        <template #description>
+          <div class="row items-center no-wrap cursor-pointer">
+            <div style="white-space: pre-line; overflow-wrap: break-word">
+              {{ description || "No description provided" }}
             </div>
-            <q-btn icon="edit" round size="sm" color="primary" flat class="q-ml-xs" />
+            <q-icon name="edit" size="xs" color="primary" class="q-ml-sm" />
+            <q-popup-edit
+              v-model.trim="description"
+              auto-save
+              v-slot="scope"
+              buttons
+            >
+              <q-input
+                v-model="scope.value"
+                dense
+                autofocus
+                counter
+                type="textarea"
+              />
+            </q-popup-edit>
           </div>
-          <q-popup-edit v-model.trim="description" auto-save v-slot="scope" buttons>
-            <q-input
-              v-model="scope.value"
-              dense
-              autofocus
-              counter
-              type="textarea"
-              @keyup.enter.stop
-            />
-          </q-popup-edit>
         </template>
       </KeyValueTable>
-      <div class="float-right q-my-sm">
+
+      <div class="row justify-end q-mt-md q-gutter-x-md">
         <q-btn
-          outline  
-          color="primary" 
+          outline
+          color="primary"
           label="Revert"
-          class="q-mr-lg cancel-btn"
           @click="revertValues"
           :disable="!valuesChanged"
         />
         <q-btn
-          label="Save"
           color="primary"
+          label="Save"
           @click="updatePlugin"
           :disable="!valuesChanged"
         >
-          <q-tooltip v-if="!valuesChanged">
-            No changes detected — nothing to save
-          </q-tooltip>
+          <q-tooltip v-if="!valuesChanged">No changes detected</q-tooltip>
         </q-btn>
       </div>
     </q-card>
   </q-expansion-item>
 
-  <TableComponent 
+  <TableComponent
+    ref="tableRef"
+    title="Plugin Files"
     :rows="files"
     :columns="fileColumns"
-    title="Plugin Files"
     v-model:selected="selected"
     @open="openTab => (openTab
       ? openWindow.open(`/plugins/${route.params.id}/files/${selected[0].id}`, '_blank')
       : router.push(`/plugins/${route.params.id}/files/${selected[0].id}`)
     )"
-    @delete="showDeleteDialog = true"
+    :loading="isLoading"
     @request="getFiles"
-    ref="tableRef"
-    @editTags="(row) => { editObjTags = row; showTagsDialog = true }"
     @create="router.push(`/plugins/${route.params.id}/files/new`)"
-  >
-    <template #body-cell-functionTasks="props">
-      {{ props.row.tasks.functions.length }}
-    </template>
-    <template #body-cell-artifactTasks="props">
-      {{ props.row.tasks.artifacts.length }}
-    </template>
-  </TableComponent>
+    @delete="
+      (row) => {
+        selected = [row];
+        showDeleteDialog = true;
+      }
+    "
+    @editTags="
+      (row) => {
+        editObjTags = row;
+        showTagsDialog = true;
+      }
+    "
+  />
 
-  <DeleteDialog 
+  <DeleteDialog
     v-model="showDeleteDialog"
     @submit="deleteFile"
     type="Plugin File"
-    :name="selected.length ? selected[0].filename : ''"
+    :name="selected[0]?.filename || ''"
   />
   <DeleteDialog
     v-model="showDeletePluginDialog"
@@ -131,8 +143,7 @@
     type="Plugin"
     :name="name"
   />
-
-  <AssignTagsDialog 
+  <AssignTagsDialog
     v-model="showTagsDialog"
     :editObj="editObjTags"
     type="files"
@@ -141,160 +152,191 @@
 </template>
 
 <script setup>
-import * as api from '@/services/dataApi'
-import * as notify from '../notify'
-import { useRoute, useRouter } from 'vue-router'
+import { ref, computed, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
+
+// Components
 import PageTitle from '@/components/PageTitle.vue'
-import { ref, computed, onMounted } from 'vue'
 import KeyValueTable from '@/components/KeyValueTable.vue'
-import TableComponent from '@/components/TableComponent.vue'
+import TableComponent from '@/components/table/TableComponent.vue'
 import DeleteDialog from '@/dialogs/DeleteDialog.vue'
 import AssignTagsDialog from '@/dialogs/AssignTagsDialog.vue'
 
 const openWindow = window
-const route = useRoute()
-const router = useRouter()
+const route = useRoute();
+const router = useRouter();
+const tableRef = ref(null);
 
-const plugin = ref()
+// Plugin State
+const name = ref("");
+const description = ref("");
+const ORIGINAL_PLUGIN = ref({ name: "", description: "" });
+const showMetadata = ref(false);
 
-const name = ref('')
-const description = ref('')
+// Files Table State
+const files = ref([]);
+const isLoading = ref(false);
+const selected = ref([]);
+const showDeleteDialog = ref(false);
+const showDeletePluginDialog = ref(false);
+const showTagsDialog = ref(false);
+const editObjTags = ref({});
 
-onMounted(() => {
-  getPlugin()
-})
+const fileColumns = computed(() => [
+  {
+    name: "id",
+    label: "File ID",
+    field: "id",
+    align: "left",
+    styleType: "icon-id",
+    conceptType: "file",
+    includeIcon: true,
+  },
+  {
+    name: "filename",
+    label: "Filename",
+    field: "filename",
+    align: "left",
+    styleType: "resource-name",
+    conceptType: "file",
+    maxWidth: "250px",
+    sortable: true,
+  },
+  {
+    name: "description",
+    label: "Description",
+    field: "description",
+    align: "left",
+    styleType: "long-text",
+    maxWidth: "300px",
+    maxLength: 80,
+    sortable: true,
+  },
+  {
+    name: "functionTasks",
+    label: "Function Tasks",
+    field: (row) => row.tasks?.functions?.length || 0,
+    align: "left",
+    styleType: "icon-badge",
+    conceptType: "task",
+    formatLabel: "{label} Tasks",
+  },
+  {
+    name: "artifactTasks",
+    label: "Artifact Tasks",
+    field: (row) => row.tasks?.artifacts?.length || 0,
+    align: "left",
+    styleType: "icon-badge",
+    conceptType: "task",
+    formatLabel: "{label} Tasks",
+  },
+  {
+    name: "tags",
+    label: "Tags",
+    field: "tags",
+    align: "left",
+    styleType: "tag-list",
+  },
+]);
 
-const ORIGINAL_PLUGIN = ref({
-  name: '',
-  description: ''
-})
+onMounted(() => {
+  getPlugin();
+});
 
 async function getPlugin() {
   try {
-    const res = await api.getItem('plugins', route.params.id)
-    plugin.value = res.data
-    name.value = res.data.name
-    description.value = res.data.description
-    ORIGINAL_PLUGIN.value = JSON.parse(JSON.stringify(plugin.value))
-  } catch(err) {
-    console.warn(err)
+    const res = await api.getItem("plugins", route.params.id);
+    name.value = res.data.name;
+    description.value = res.data.description;
+    ORIGINAL_PLUGIN.value = JSON.parse(JSON.stringify(res.data));
+  } catch (err) {
+    notify.error("Failed to load plugin details");
   }
 }
 
-const pluginRows = computed(() => [
-  { label: 'Name', slot: 'name' },
-  { label: 'Description', slot: 'description' },
-])
+async function getFiles(pagination) {
+  isLoading.value = true;
+  try {
+    const res = await api.getFiles(route.params.id, pagination);
+    files.value = res.data.data;
+    tableRef.value.updateTotalRows(res.data.totalNumResults);
+  } catch (err) {
+    notify.error("Failed to load plugin files");
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+// Logic helpers
+const valuesChanged = computed(() => {
+  return (
+    name.value !== ORIGINAL_PLUGIN.value?.name ||
+    description.value !== ORIGINAL_PLUGIN.value?.description
+  );
+});
+
+const pluginRows = [
+  { label: "Name", slot: "name" },
+  { label: "Description", slot: "description" },
+];
 
-const invalidName = ref(false)
-const nameError = ref('')
+const invalidName = ref(false);
+const nameError = ref("");
 
 function requiredRule(val) {
-  if(!val || val.length === 0) {
-    invalidName.value = true
-    nameError.value = 'Name is required'
-    return false
-  }
-  invalidName.value = false
-  nameError.value = ''
-  return true
+  invalidName.value = !val || val.length === 0;
+  nameError.value = invalidName.value ? "Name is required" : "";
+  return !invalidName.value;
 }
 
 function checkName(val) {
-  if(val.length === 0) {
-    invalidName.value = true
-    nameError.value = 'Name is required'
-  } else {
-    invalidName.value = false
-    nameError.value = ''
-  }
+  requiredRule(val);
 }
 
 function revertValues() {
-  name.value = JSON.parse(JSON.stringify(ORIGINAL_PLUGIN.value.name))
-  description.value = JSON.parse(JSON.stringify(ORIGINAL_PLUGIN.value.description))
+  name.value = ORIGINAL_PLUGIN.value.name;
+  description.value = ORIGINAL_PLUGIN.value.description;
 }
 
 async function updatePlugin() {
   try {
-    const res = await api.updateItem('plugins', route.params.id, {
+    const res = await api.updateItem("plugins", route.params.id, {
       name: name.value,
       description: description.value,
-    })
-    getPlugin()
-    notify.success(`Successfully updated '${res.data.name}'`)
-  } catch(err) {
-    notify.error(err.response.data.message)
-  }  
-}
-
-const valuesChanged = computed(() => {
-  if(name.value !== ORIGINAL_PLUGIN.value?.name || description.value !== ORIGINAL_PLUGIN.value?.description) {
-    return true
+    });
+    getPlugin();
+    notify.success(`Successfully updated '${res.data.name}'`);
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Update failed");
   }
-  return false
-})
-
-/*
-  Plugin Files Table 
-*/
-const files = ref([])
-const selected = ref([])
-const showDeleteDialog = ref(false)
-const showTagsDialog = ref(false)
-const editObjTags = ref({})
-const tableRef = ref(null)
-
-const fileColumns = [
-  { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: false, },
-  { name: 'filename', label: 'Filename', align: 'left', field: 'filename', sortable: true, },
-  { name: 'description', label: 'Description', field: 'description', align: 'left', sortable: true },
-  { name: 'functionTasks', label: 'Function Tasks', align: 'left', sortable: false, },
-  { name: 'artifactTasks', label: 'Artifact Tasks', align: 'left', sortable: false, },
-  { name: 'tags', label: 'Tags', align: 'left', field: 'tags', sortable: false },
-]
-
-async function getFiles(pagination) {
-  try {
-    const res = await api.getFiles(route.params.id, pagination)
-    console.log('getFiles = ', res)
-    files.value = res.data.data
-    tableRef.value.updateTotalRows(res.data.totalNumResults)
-  } catch(err) {
-    notify.error(err.response.data.message)
-  } 
 }
 
 async function deleteFile() {
   try {
-    await api.deleteFile(route.params.id, selected.value[0].id)
-    notify.success(`Successfully deleted '${selected.value[0].filename}'`)
-    showDeleteDialog.value = false
-    selected.value = []
-    tableRef.value.refreshTable()
-  } catch(err) {
-    notify.error(err.response.data.message);
+    await api.deleteFile(route.params.id, selected.value[0].id);
+    notify.success(`Successfully deleted '${selected.value[0].filename}'`);
+    showDeleteDialog.value = false;
+    selected.value = [];
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Delete failed");
   }
 }
 
-const showDeletePluginDialog = ref(false)
-
 async function deletePlugin() {
   try {
-    await api.deleteItem('plugins', route.params.id)
-    notify.success(`Successfully deleted '${name}'`)
-    router.push(`/plugins`)
-  } catch(err) {
-    notify.error(err.response.data.message);
+    await api.deleteItem("plugins", route.params.id);
+    notify.success(`Successfully deleted '${name.value}'`);
+    router.push(`/plugins`);
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Delete failed");
   }
 }
 
-const showMetadata = ref(false)
-
-function truncateString(str, limit) { 
-  if(!str) return ''
-  if(str?.length < limit) return str 
-  return str?.slice(0, limit > 3 ? limit - 3 : limit) + '...'; 
+function truncateString(str, limit) {
+  if (!str) return "";
+  return str.length > limit ? str.slice(0, limit - 3) + "..." : str;
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/frontend/src/views/EntryPointsView.vue b/src/frontend/src/views/EntryPointsView.vue
index 9805a50ce..8e63d5e1d 100644
--- a/src/frontend/src/views/EntryPointsView.vue
+++ b/src/frontend/src/views/EntryPointsView.vue
@@ -1,237 +1,368 @@
 <template>
-  <PageTitle 
+  <PageTitle
     title="Entrypoints"
+    caption="Reusable workflows composed of Tasks"
+    conceptType="entrypoint"
   />
-  <TableComponent 
+
+  <TableComponent
+    ref="tableRef"
     :rows="entrypoints"
-    :columns="columns"
-    title="Entrypoints"
+    :columns="computedColumns"
     v-model:selected="selected"
+    title="Entrypoints"
     @open="openTab => (openTab
       ? openWindow.open(`/entrypoints/${selected[0].id}`, '_blank')
       : router.push(`/entrypoints/${selected[0].id}`)
     )"
-    @delete="showDeleteDialog = true"
     @request="getEntrypoints"
-    ref="tableRef"
     @editTags="(row) => { editObjTags = row; showTagsDialog = true }"
     @create="router.push('/entrypoints/new')"
     :loading="isLoading"
+    @edit="(row) => router.push(`/entrypoints/${row.id}`)"
+    @delete="
+      (row) => {
+        selected = [row];
+        showDeleteDialog = true;
+      }
+    "
   >
-    <template #body-cell-group="props">
-      <div>{{ props.row.group.name }}</div>
-    </template>
     <template #body-cell-taskGraph="props">
       <q-btn
-        v-if="props.row.taskGraph.length"
-        label="View YAML"
-        color="primary"
-        @click.stop="displayYaml = props.row.taskGraph; showTaskGraphDialog = true;"
+        v-if="props.row.taskGraph && props.row.taskGraph.length"
+        outline
+        dense
+        no-caps
+        :color="darkMode ? 'text-grey-5' : 'text-grey-8'"
+        label="YAML"
+        icon="code"
+        size="xs"
+        class="q-px-sm q-py-xs"
+        style="font-size: 12px; font-weight: bold"
+        @click.stop="
+          displayYaml = props.row.taskGraph;
+          showTaskGraphDialog = true;
+        "
       />
-      <span v-else class="text-negative">
-        EMPTY
-      </span>
-    </template>
-    <template #body-cell-plugins="props">
-      <span
-        v-for="(plugin, i) in props.row.plugins"
-        :key="i"
+      <span v-else class="text-grey-5 text-caption">Empty</span>
+      <q-tooltip
+        >View '{{ props.row.name || "Entrypoint" }}' Task Graph YAML</q-tooltip
       >
-        <q-chip
-          color="secondary" 
-          text-color="white"
-          clickable
-          @click.stop="editEntrypoint = props.row; pluginType = 'plugins'; showAssignPluginsDialog = true"
-        >
-          {{ plugin.name }}
-          <q-badge
-            v-if="!plugin.latestSnapshot" 
-            color="red" 
-            label="outdated" 
-            rounded
-            class="q-ml-xs"
-          />
-        </q-chip>
-        <q-btn
-          v-if="!plugin.latestSnapshot"
-          round 
-          color="red" 
-          icon="sync"
-          size="sm"
-          @click.stop="syncPlugin(props.row.id, plugin.id, plugin.name, 'plugins')"
-        >
-          <q-tooltip>
-            Sync to latest version of plugin
-          </q-tooltip>
-        </q-btn>
-      </span>
-      <q-btn
-        round
-        size="sm"
-        icon="add"
-        @click.stop="editEntrypoint = props.row; pluginType = 'plugins'; showAssignPluginsDialog = true"
-        class="q-ml-sm"
-      />
     </template>
-      <template #body-cell-artifactPlugins="props">
-      <span
-        v-for="(plugin, i) in props.row.artifactPlugins"
-        :key="i"
-      >
-        <q-chip
-          color="secondary" 
-          text-color="white"
-          clickable
-          @click.stop="editEntrypoint = props.row; pluginType = 'artifactPlugins'; showAssignPluginsDialog = true"
-        >
-          {{ plugin.name }}
-          <q-badge
-            v-if="!plugin.latestSnapshot" 
-            color="red" 
-            label="outdated" 
-            rounded
-            class="q-ml-xs"
-          />
-        </q-chip>
-        <q-btn
-          v-if="!plugin.latestSnapshot"
-          round 
-          color="red" 
-          icon="sync"
-          size="sm"
-          @click.stop="syncPlugin(props.row.id, plugin.id, plugin.name, 'artifactPlugins')"
+
+    <template
+      v-for="colName in ['plugins', 'artifactPlugins']"
+      :key="colName"
+      #[`body-cell-${colName}`]="props"
+    >
+      <div class="q-py-xs" style="min-width: 200px">
+        <div
+          class="plugin-container column q-pa-xs q-gutter-y-xs cursor-pointer"
+          @click.stop="openPluginDialog(props.row, colName)"
+          :class="$q.dark.isActive ? 'bg-black' : 'bg-grey-2'"
         >
-          <q-tooltip>
-            Sync to latest version of plugin
-          </q-tooltip>
-        </q-btn>
-      </span>
-      <q-btn
-        round
-        size="sm"
-        icon="add"
-        @click.stop="editEntrypoint = props.row; pluginType = 'artifactPlugins'; showAssignPluginsDialog = true"
-        class="q-ml-sm"
+          <div class="absolute-top-right q-ma-xs plugin-edit-btn" style="z-index: 10">
+            <q-btn
+              round dense flat size="xs" icon="edit" class="shadow-1"
+              :class="$q.dark.isActive ? 'bg-grey-10' : 'bg-grey-2'"
+              :color="$q.dark.isActive ? 'bg-grey-1' : 'bg-grey-9'"
+            />
+            <q-tooltip>Manage Attached Plugins</q-tooltip>
+          </div>
+
+          <template v-if="props.row[colName] && props.row[colName].length > 0">
+            <template v-for="(plugin, i) in props.row[colName].slice(0, 3)" :key="i">
+              <div
+                class="row items-center no-wrap  bg-white  q-pa-none shadow-1"
+                style="border-radius: 4px; border: 1px solid #eeeeee; width: fit-content; max-width: 220px;"
+              >
+                <q-chip
+                  :color="$q.dark.isActive ? getConceptStyle('plugin').darkColor : getConceptStyle('plugin').color"
+                  size="sm" outline square clickable
+                  class="text-weight-bold q-py-sm q-pr-sm q-ma-none no-border full-width"
+                  :class="$q.dark.isActive ? 'bg-grey-10' : 'bg-grey-2'"
+                  @click.stop="openPluginDialog(props.row, colName)"
+                >
+                  <span class="font-mono ellipsis" 
+                  style="font-size: 11px; font-weight: 500; max-width: 140px">
+                    {{ plugin.name }}
+                    <q-tooltip>Plugin ID: {{ plugin.id }}</q-tooltip>
+                  </span>
+                  
+                  <template v-if="!plugin.latestSnapshot">
+                    <div style="height: 12px; width: 1px; background-color: #ddd; margin: 0 6px;"></div>
+                    <q-badge rounded color="warning" class="q-mr-xs" style="padding: 2px">
+                      <q-icon name="warning" color="white" size="13px" />
+                      <q-tooltip anchor="center right">Plugin out of date</q-tooltip>
+                    </q-badge>
+                    <q-btn
+                      flat round dense size="10px" color="red" icon="sync" 
+                      @click.stop="syncPlugin(props.row.id, plugin.id, plugin.name, colName)"
+                    >
+                      <q-tooltip anchor="center right">Sync to latest</q-tooltip>
+                    </q-btn>
+                  </template>
+                </q-chip>
+              </div>
+            </template>
+
+            <div v-if="props.row[colName].length > 3">
+              <q-chip
+                dense clickable  class="text-weight-bold"
+                style="font-size: 11px; border: 1px solid lightgrey" @click.stop
+                :class="$q.dark.isActive ? 'text-grey-1 bg-grey-9' : 'text-grey-9 bg-grey-3'"
+              >
+                +{{ props.row[colName].length - 3 }} more
+                <q-menu anchor="bottom middle" self="top middle" class="bg-white shadow-5 border-grey-3">
+                  <div class="column q-pa-sm q-gutter-y-xs" style="min-width: 200px">
+                    <div class="text-caption text-grey-7 q-mb-xs text-weight-bold">
+                      Additional {{ colName === 'plugins' ? 'Plugins' : 'Artifact Plugins' }}
+                    </div>
+                    <template v-for="(plugin, i) in props.row[colName].slice(3)" :key="i">
+                      <div class="row items-center justify-between no-wrap bg-grey-1 q-pa-xs border-radius-inherit">
+                        <q-chip
+                          :color="getConceptStyle('plugin').color" text-color="white"
+                          :icon="getConceptStyle('plugin').icon" size="sm" outline square clickable
+                          class="text-weight-bold q-my-none"
+                          @click.stop="openPluginDialog(props.row, colName)"
+                        >
+                          {{ plugin.name }}
+                          <q-tooltip>ID: {{ plugin.id }}</q-tooltip>
+                        </q-chip>
+                        <q-btn
+                          v-if="!plugin.latestSnapshot" flat round size="xs" color="red" icon="sync"
+                          @click.stop="syncPlugin(props.row.id, plugin.id, plugin.name, colName)"
+                        />
+                      </div>
+                    </template>
+                  </div>
+                </q-menu>
+              </q-chip>
+            </div>
+          </template>
+          <div v-else class="text-caption text-center q-pa-xs" :class="$q.dark.isActive ? 'text-grey-3' : 'text-grey-9'">
+            No {{ colName === 'plugins' ? 'plugins' : 'artifact plugins' }}
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <!-- Dropped this because there were too many columns - feel free to add back in  -->
+    <template #body-cell-group="props">
+      <ResourceName
+        :text="props.row.group?.name"
+        conceptType="group"
+        :showIcon="true"
       />
     </template>
+    
   </TableComponent>
 
-  <InfoPopupDialog
-    v-model="showTaskGraphDialog"
-  >
-    <template #title>
-      <label id="modalTitle">
-        Task Graph YAML
-      </label>
-    </template>
-    <CodeEditor v-model="displayYaml" style="height: auto;" :readOnly="true" />
+  <InfoPopupDialog v-model="showTaskGraphDialog">
+    <template #title>Task Graph YAML</template>
+    <CodeEditor v-model="displayYaml" style="height: auto" :readOnly="true" />
   </InfoPopupDialog>
-  <DeleteDialog 
+
+  <DeleteDialog
     v-model="showDeleteDialog"
     @submit="deleteEntryPoint"
     type="Entry Point"
-    :name="selected.length ? selected[0].name : ''"
+    :name="selected[0]?.name || ''"
   />
-  <AssignTagsDialog 
+
+  <AssignTagsDialog
     v-model="showTagsDialog"
     :editObj="editObjTags"
     type="entrypoints"
     @refreshTable="tableRef.refreshTable()"
   />
-  <AssignPluginsDialog 
+
+  <AssignPluginsDialog
     v-model="showAssignPluginsDialog"
     :pluginType="pluginType"
     :editObj="editEntrypoint"
     @refreshTable="tableRef.refreshTable()"
   />
 </template>
+<style scoped>
+.plugin-container {
+  position: relative;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  background-color: #fafafa;
+  transition: all 0.2s ease;
+  min-height: 40px;
+  height: 100%;
+}
+
+.plugin-container:hover {
+  background-color: #f5f5f5;
+  border-color: #bdbdbd;
+}
+
+/* Hide edit button by default */
+.plugin-edit-btn {
+  opacity: 0.4;
+  transition: opacity 0.2s ease;
+}
+
+/* Show edit button when container is hovered */
+.plugin-container:hover .plugin-edit-btn {
+  opacity: 1;
+}
+</style>
 
 <script setup>
-  import TableComponent from '@/components/TableComponent.vue'
-  import { ref } from 'vue'
-  import { useRouter } from 'vue-router'
-  import CodeEditor from '@/components/CodeEditor.vue'
-  import InfoPopupDialog from '@/dialogs/InfoPopupDialog.vue'
-  import * as api from '@/services/dataApi'
-  import * as notify from '../notify'
-  import DeleteDialog from '@/dialogs/DeleteDialog.vue'
-  import PageTitle from '@/components/PageTitle.vue'
-  import AssignTagsDialog from '@/dialogs/AssignTagsDialog.vue'
-  import AssignPluginsDialog from '@/dialogs/AssignPluginsDialog.vue'
-
-  const openWindow = window
-  const router = useRouter()
-
-  const columns = [
-    { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: false, },
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true, },
-    { name: 'description', label: 'Description', align: 'left', field: 'description', sortable: true, },
-    { name: 'taskGraph', label: 'Task Graph', align: 'left', field: 'taskGraph',sortable: false, },
-    { name: 'tags', label: 'Tags', align: 'left', field: 'tags', sortable: false },
-    { name: 'plugins', label: 'Plugins', align: 'left', field: 'plugins', sortable: false },
-    { name: 'artifactPlugins', label: 'Artifact Plugins', align: 'left', field: 'artifactPlugins', sortable: false },
-  ]
-
-  const selected = ref([])
-
-  const showTaskGraphDialog = ref(false)
-  const displayYaml = ref('')
-
-  const tableRef = ref(null)
-  
-  const isLoading = ref(false)
-
-  const entrypoints = ref([])
-
-  const showDeleteDialog = ref(false)
-  const showAssignPluginsDialog = ref(false)
-  const editEntrypoint = ref('')
-  const pluginType = ref('')
-
-  async function getEntrypoints(pagination, showDrafts) {
-    isLoading.value = true
-      
-    const minLoadTimePromise = new Promise(resolve => setTimeout(resolve, 300)); 
-
-    try {
-      const [res] = await Promise.all([
-        api.getData('entrypoints', pagination, showDrafts),
-        minLoadTimePromise
-      ]);
-        
-      entrypoints.value = res.data.data;
-      tableRef.value.updateTotalRows(res.data.totalNumResults);
-    } catch(err) {
-      console.log('err = ', err);
-      notify.error(err.response.data.message);
-    } finally {
-      isLoading.value = false;
-    }
-  }
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
+import TableComponent from "@/components/table/TableComponent.vue";
+import CodeEditor from "@/components/CodeEditor.vue";
+import InfoPopupDialog from "@/dialogs/InfoPopupDialog.vue";
+import DeleteDialog from "@/dialogs/DeleteDialog.vue";
+import PageTitle from "@/components/PageTitle.vue";
+import AssignTagsDialog from "@/dialogs/AssignTagsDialog.vue";
+import AssignPluginsDialog from "@/dialogs/AssignPluginsDialog.vue";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
+import { getConceptStyle } from "@/constants/tableStyles";
 
-  async function deleteEntryPoint() {
-    try {
-      await api.deleteItem('entrypoints', selected.value[0].id)
-      notify.success(`Successfully deleted '${selected.value[0].name}'`)
-      showDeleteDialog.value = false
-      selected.value = []
-      tableRef.value.refreshTable()
-    } catch(err) {
-      notify.error(err.response.data.message);
-    }
+const openWindow = window
+const router = useRouter();
+const tableRef = ref(null);
+
+// State
+const entrypoints = ref([]);
+const isLoading = ref(false);
+const selected = ref([]);
+const showDeleteDialog = ref(false);
+const showAssignPluginsDialog = ref(false);
+const showTaskGraphDialog = ref(false);
+const showTagsDialog = ref(false);
+
+const editEntrypoint = ref({});
+const editObjTags = ref({});
+const pluginType = ref("");
+const displayYaml = ref("");
+
+// Column Definitions
+const computedColumns = computed(() => [
+  {
+    name: "id",
+    label: "Entrypoint ID",
+    field: "id",
+    align: "left",
+    styleType: "icon-id",
+    conceptType: "entrypoint",
+    includeIcon: true,
+  },
+  {
+    name: "name",
+    label: "Name",
+    field: "name",
+    align: "left",
+    styleType: "resource-name",
+    conceptType: "entrypoint",
+    maxWidth: "180px",
+    sortable: true,
+  },
+  {
+    name: "description",
+    label: "Description",
+    field: "description",
+    align: "left",
+    styleType: "long-text",
+    maxWidth: "150px",
+    maxLength: 60,
+    useQuotes: false,
+    style: "max-width: 300px;",
+    sortable: true,
+  },
+  {
+    name: "taskGraph",
+    label: "Task Graph",
+    field: "taskGraph",
+    align: "left",
+  },
+  {
+    name: "plugins",
+    label: "Plugins",
+    field: "plugins",
+    align: "left",
+  },
+  {
+    name: "artifactPlugins",
+    label: "Artifact Plugins",
+    field: "artifactPlugins",
+    align: "left",
+  },
+  // Hide Group - too many values with it in there
+  // {
+  //   name: 'group',
+  //   label: 'Group',
+  //   field: 'group',
+  //   align: 'left',
+  //   styleType: 'icon-badge',
+  //   conceptType: 'group',
+  //   showIcon: false
+  // },
+
+  {
+    name: "tags",
+    label: "Tags",
+    field: "tags",
+    align: "left",
+    styleType: "tag-list",
+  },
+]);
+
+// Actions
+
+function openPluginDialog(row, type) {
+  editEntrypoint.value = row;
+  pluginType.value = type;
+  showAssignPluginsDialog.value = true;
+}
+
+async function getEntrypoints(pagination, showDrafts) {
+  isLoading.value = true;
+  const minLoadTimePromise = new Promise((resolve) => setTimeout(resolve, 300));
+
+  try {
+    const [res] = await Promise.all([
+      api.getData("entrypoints", pagination, showDrafts),
+      minLoadTimePromise,
+    ]);
+
+    entrypoints.value = res.data.data;
+    tableRef.value.updateTotalRows(res.data.totalNumResults);
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Failed to fetch entrypoints");
+  } finally {
+    isLoading.value = false;
   }
+}
 
-  const editObjTags = ref({})
-  const showTagsDialog = ref(false)
-
-  async function syncPlugin(entrypointId, pluginId, pluginName, pluginType) {
-    try {
-      await api.addPluginsToEntrypoint(entrypointId, [pluginId], pluginType)
-      tableRef.value.refreshTable()
-      notify.success(`Successfully updated plugin '${pluginName}' to latest version`)
-    } catch(err) {
-      console.warn(err)
-    }
+async function deleteEntryPoint() {
+  try {
+    const id = selected.value[0].id;
+    await api.deleteItem("entrypoints", id);
+    notify.success(`Successfully deleted '${selected.value[0].name}'`);
+    showDeleteDialog.value = false;
+    selected.value = [];
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message);
   }
+}
 
+async function syncPlugin(entrypointId, pluginId, pluginName, pType) {
+  try {
+    await api.addPluginsToEntrypoint(entrypointId, [pluginId], pType);
+    tableRef.value.refreshTable();
+    notify.success(`Updated '${pluginName}' to latest version`);
+  } catch (err) {
+    console.warn(err);
+    notify.error("Failed to sync plugin");
+  }
+}
 </script>
diff --git a/src/frontend/src/views/ExperimentsView.vue b/src/frontend/src/views/ExperimentsView.vue
index 8140bd071..cba211425 100644
--- a/src/frontend/src/views/ExperimentsView.vue
+++ b/src/frontend/src/views/ExperimentsView.vue
@@ -1,40 +1,44 @@
 <template>
-  <PageTitle title="Experiments" />
-  <TableComponent 
-    :rows="experiments"
-    :columns="columns"
+  <PageTitle
     title="Experiments"
+    caption="Containers for Job runs"
+    conceptType="experiment"
+  />
+
+  <TableComponent
+    ref="tableRef"
+    :rows="experiments"
+    :columns="computedColumns"
     v-model:selected="selected"
     @open="openTab => (openTab
       ? openWindow.open(`/experiments/${selected[0].id}`, '_blank')
       : router.push(`/experiments/${selected[0].id}`)
     )"
-    @delete="showDeleteDialog = true"
     @request="getExperiments"
-    ref="tableRef"
-    @editTags="(row) => { editObjTags = row; showTagsDialog = true }"
     @create="router.push('/experiments/new')"
     :loading="isLoading"
-  >
-    <template #body-cell-entrypoints="props">
-      <q-chip
-        v-for="(entrypoint, i) in props.row.entrypoints"
-        :key="i"
-        color="secondary" 
-        text-color="white"
-      >
-        {{ entrypoint.name }}
-      </q-chip>
-    </template>
-  </TableComponent>
+    @delete="
+      (row) => {
+        selected = [row];
+        showDeleteDialog = true;
+      }
+    "
+    @editTags="
+      (row) => {
+        editObjTags = row;
+        showTagsDialog = true;
+      }
+    "
+  />
 
-  <DeleteDialog 
+  <DeleteDialog
     v-model="showDeleteDialog"
     @submit="deleteExperiment"
     type="Experiment"
-    :name="selected.length ? selected[0].name : ''"
+    :name="selected[0]?.name || ''"
   />
-  <AssignTagsDialog 
+
+  <AssignTagsDialog
     v-model="showTagsDialog"
     :editObj="editObjTags"
     type="experiments"
@@ -43,68 +47,111 @@
 </template>
 
 <script setup>
-  import TableComponent from '@/components/TableComponent.vue'
-  import { ref } from 'vue'
-  import { useRouter } from 'vue-router'
-  import * as api from '@/services/dataApi'
-  import * as notify from '../notify'
-  import DeleteDialog from '@/dialogs/DeleteDialog.vue'
-  import PageTitle from '@/components/PageTitle.vue'
-  import AssignTagsDialog from '@/dialogs/AssignTagsDialog.vue'
-  
-  const router = useRouter()
-  const openWindow = window
-
-  const showDeleteDialog = ref(false)
-  const showTagsDialog = ref(false)
-  const editObjTags = ref({})
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
+import TableComponent from "@/components/table/TableComponent.vue";
+import PageTitle from "@/components/PageTitle.vue";
+import DeleteDialog from "@/dialogs/DeleteDialog.vue";
+import AssignTagsDialog from "@/dialogs/AssignTagsDialog.vue";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
 
-  const experiments = ref([])
+const router = useRouter();
+const tableRef = ref(null);
+const openWindow = window
 
-  const isLoading = ref(false)
+// State
+const experiments = ref([]);
+const isLoading = ref(false);
+const selected = ref([]);
+const showDeleteDialog = ref(false);
+const showTagsDialog = ref(false);
+const editObjTags = ref({});
 
-  const columns = [
-    { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: false, },
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true, },
-    { name: 'description', label: 'Description', align: 'left', field: 'description', sortable: true },
-    { name: 'entrypoints', label: 'Entry Points', align: 'left', field: 'entrypoints', sortable: false },
-    { name: 'tags', label: 'Tags', align: 'left', sortable: false },
-  ]
+// Column Definitions
+const computedColumns =  [
+  {
+    name: "id",
+    label: "Experiment ID",
+    field: "id",
+    align: "left",
+    styleType: "icon-id",
+    conceptType: "experiment",
+    includeIcon: true,
+  },
+  {
+    name: "name",
+    label: "Experiment Name",
+    field: "name",
+    align: "left",
+    styleType: "resource-name",
+    conceptType: "experiment",
+    maxWidth: "250px",
+    includeIcon: false,
+    sortable: true,
+  },
 
-  const selected = ref([])
-  async function getExperiments(pagination) {
-    isLoading.value = true
-    const minLoadTimePromise = new Promise(resolve => setTimeout(resolve, 300)); 
+  {
+    name: "description",
+    label: "Description",
+    field: "description",
+    align: "left",
+    styleType: "long-text",
+    maxWidth: "300px",
+    maxLength: 100,
+    useQuotes: true,
+    sortable: true,
+  },
+  {
+    name: "entrypoints",
+    label: "EntryPoints",
+    field: "entrypoints",
+    align: "left",
+    styleType: "multi-badge",
+    conceptType: "entrypoint",
+    clickable: true,
+  },
+  {
+    name: "tags",
+    label: "Tags",
+    field: "tags",
+    align: "left",
+    styleType: "tag-list",
+  },
+];
 
-    try {
-        const [res] = await Promise.all([
-            api.getData('experiments', pagination, false),
-            minLoadTimePromise
-        ]);
-        
-        experiments.value = res.data.data;
-        tableRef.value.updateTotalRows(res.data.totalNumResults);
-    } catch(err) {
-        console.log('err = ', err);
-        notify.error(err.response.data.message);
-    } finally {
-        isLoading.value = false;
-    }
-}
+// API Functions
+async function getExperiments(pagination) {
+  isLoading.value = true;
+  try {
+    const minLoadTimePromise = new Promise((resolve) =>
+      setTimeout(resolve, 300),
+    );
 
-  const tableRef = ref(null)
+    const [res] = await Promise.all([
+      api.getData("experiments", pagination, false),
+      minLoadTimePromise,
+    ]);
 
-  async function deleteExperiment() {
-    try {
-      await api.deleteItem('experiments', selected.value[0].id)
-      notify.success(`Successfully deleted '${selected.value[0].name}'`)
-      showDeleteDialog.value = false
-      selected.value = []
-      tableRef.value.refreshTable()
-    } catch(err) {
-      notify.error(err.response.data.message);
-    }
+    experiments.value = res.data.data;
+    tableRef.value.updateTotalRows(res.data.totalNumResults);
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Failed to fetch experiments");
+  } finally {
+    isLoading.value = false;
   }
+}
 
-
+async function deleteExperiment() {
+  try {
+    const id = selected.value[0].id;
+    await api.deleteItem("experiments", id);
+    notify.success(`Successfully deleted '${selected.value[0].name}'`);
+    showDeleteDialog.value = false;
+    selected.value = [];
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message);
+  }
+}
 </script>
diff --git a/src/frontend/src/views/GroupsAdminView.vue b/src/frontend/src/views/GroupsAdminView.vue
index a7710a264..112f5df86 100644
--- a/src/frontend/src/views/GroupsAdminView.vue
+++ b/src/frontend/src/views/GroupsAdminView.vue
@@ -1,149 +1,261 @@
 <template>
-  <PageTitle title="Groups Admin" />
+  <PageTitle subtitle="Groups Admin" conceptType="group" />
   <div :class="`row q-mt-lg ${isMobile ? '' : 'q-mx-xl'} q-mb-lg `">
     <div :class="`${isMobile ? 'col-12' : 'col-5'} q-mr-xl`">
       <fieldset class="q-pa-lg">
         <legend>Basic Info</legend>
-        <div class="row items-center">
-          <div class="col-9">
-            <q-input 
-              outlined 
-              dense 
-              v-model.trim="name"
-              :rules="[requiredRule]"
-              class="q-mb-sm"
-              aria-required="true"
-            >
-              <template v-slot:before>
-                <label :class="`field-label`">Group Name:</label>
-              </template>
-            </q-input>
-          </div>
-          <div class="col">
-            <q-btn 
-              label="Save Name"
-              color="primary"
-              class="float-right q-mb-lg"
-            />
-          </div>
+        <div class="row items-center q-gutter-x-md">
+          <q-input
+            outlined
+            dense
+            v-model.trim="name"
+            :rules="[requiredRule]"
+            class="col-grow"
+            bg-color="white"
+          >
+            <template v-slot:before>
+              <label class="field-label text-weight-medium">Group Name:</label>
+            </template>
+          </q-input>
+          <q-btn label="Save" color="primary" class="q-mb-md" />
         </div>
       </fieldset>
 
-      <fieldset class="q-mt-xl q-pa-lg">
-        <legend>Owner Only Options</legend>
-        <q-list bordered>
+      <fieldset class="q-mt-lg q-pa-lg">
+        <legend class="text-negative">Owner Options</legend>
+        <q-list separator>
           <q-item>
             <q-item-section>
               <q-item-label class="text-bold">Delete Group</q-item-label>
-              <q-item-label caption >Once you delete a group it CAN NOT be undone.</q-item-label>
+              <q-item-label caption class="text-red">
+                Action is permanent and cannot be undone.
+              </q-item-label>
             </q-item-section>
-
             <q-item-section side>
-              <q-btn 
-                label="Delete Group"
+              <q-btn
+                label="Delete"
                 color="negative"
+                outline
+                icon="delete_forever"
               />
             </q-item-section>
           </q-item>
         </q-list>
       </fieldset>
 
-      <fieldset class="q-mt-xl q-pa-lg">
+      <fieldset class="q-mt-lg q-pa-lg">
         <legend>Add User</legend>
-        <div class="row items-center">
-          <div class="col-9">
-            <q-input 
-              outlined 
-              dense 
-              v-model.trim="name"
-              :rules="[requiredRule]"
-              class="q-mb-sm "
-              aria-required="true"
-            >
-              <template v-slot:before>
-                <label :class="`field-label`">Search User:</label>
-              </template>
-              <template v-slot:append>
-                <q-icon name="search" />
-              </template>
-            </q-input>
-          </div>
-          <div class="col">
-            <q-btn 
-              label="Search"
-              color="primary"
-              class="float-right q-mb-lg"
-            />
-          </div>
+        <div class="row items-center q-gutter-x-md q-mb-md">
+          <q-input
+            outlined
+            dense
+            v-model.trim="searchQuery"
+            placeholder="Search by name..."
+            class="col-grow"
+            bg-color="white"
+            @keyup.enter="performSearch"
+          >
+            <template v-slot:append>
+              <q-icon
+                name="search"
+                class="cursor-pointer"
+                @click="performSearch"
+              />
+            </template>
+          </q-input>
+          <q-btn label="Search" color="primary" @click="performSearch" />
         </div>
-        <q-card flat bordered class="my-card">
-          <q-card-section>
-            <div class="">Search Results</div>
-          </q-card-section>
 
-          <q-card-section class="q-pt-none overflow-auto">
-            <q-list dense style="max-height: 10vh;">
-              <q-item v-for="(user, i) in searchResults" :key="i" style="border: 1px solid lightgray;">
+        <q-card flat bordered v-if="searchResults.length > 0">
+          <q-card-section class="bg-grey-2 q-py-xs text-caption text-bold">
+            Results
+          </q-card-section>
+          <q-scroll-area style="height: 150px">
+            <q-list separator dense>
+              <q-item
+                v-for="(user, i) in searchResults"
+                :key="i"
+                clickable
+                v-ripple
+              >
+                <q-item-section avatar>
+                  <q-avatar size="sm" color="primary" text-color="white">{{
+                    user.charAt(0)
+                  }}</q-avatar>
+                </q-item-section>
                 <q-item-section>
-                  <q-item-label class="text-bold">{{ user }}</q-item-label>
+                  <q-item-label class="text-weight-medium">{{
+                    user
+                  }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
                   <q-btn
                     round
-                    icon="add"
+                    flat
+                    icon="person_add"
                     color="secondary"
-                    size="xs"
-                  />
+                    size="sm"
+                  >
+                    <q-tooltip>Add to Group</q-tooltip>
+                  </q-btn>
                 </q-item-section>
               </q-item>
             </q-list>
-          </q-card-section>
-
+          </q-scroll-area>
         </q-card>
-
       </fieldset>
-
     </div>
-    <fieldset :class="`${isMobile ? 'col-12 q-mt-lg' : 'col'} overflow-auto`" >
+
+    <fieldset
+      :class="`${isMobile ? 'col-12 q-mt-lg' : 'col'}`"
+      style="display: flex; flex-direction: column"
+    >
       <legend>Group Members</legend>
-      <BasicTable
-        :columns="columns"
+
+      <TableComponent
         :rows="store.users"
-        :hideEditRow="true"
-        @edit="(param, i) => {selectedParam = param; selectedParamIndex = i; showEditParamDialog = true}"
-        @delete="(param) => {selectedParam = param; showDeleteDialog = true}"
-        style="max-height: 500px;"
-        class="q-mt-xl"
-      />
+        :columns="memberColumns"
+        :hideToggleDraft="true"
+        :hideCreateBtn="true"
+        :hideSearch="true"
+        :disableSelect="true"
+        :hideOpenBtn="true"
+        :hideDeleteBtn="true"
+        class="full-height"
+      >
+        <template #body-cell-actions="props">
+          <div class="row justify-center q-gutter-x-sm">
+            <q-btn
+              icon="edit"
+              round
+              flat
+              size="sm"
+              color="primary"
+              @click="
+                selectedMember = props.row;
+                showEditParamDialog = true;
+              "
+            >
+              <q-tooltip>Edit Permissions</q-tooltip>
+            </q-btn>
+            <q-btn
+              icon="person_remove"
+              round
+              flat
+              size="sm"
+              color="negative"
+              @click="
+                selectedMember = props.row;
+                showDeleteDialog = true;
+              "
+            >
+              <q-tooltip>Remove User</q-tooltip>
+            </q-btn>
+          </div>
+        </template>
+      </TableComponent>
     </fieldset>
   </div>
 </template>
 
 <script setup>
-  import { ref, inject } from 'vue'
-  import BasicTable from '@/components/BasicTable.vue'
-  import { useLoginStore } from '@/stores/LoginStore'
-  import PageTitle from '@/components/PageTitle.vue'
-
-  const isMobile = inject('isMobile')
+import { ref, inject, computed } from "vue";
+import { useLoginStore } from "@/stores/LoginStore";
+import PageTitle from "@/components/PageTitle.vue";
+import TableComponent from "@/components/table/TableComponent.vue";
 
-  const store = useLoginStore()
+const isMobile = inject("isMobile");
+const store = useLoginStore();
 
-  const name = ref('')
+const name = ref("");
+const searchQuery = ref("");
+const searchResults = ref([]);
 
-  const requiredRule = (val) => (val && val.length > 0) || "This field is required"
+// Validation
+const requiredRule = (val) =>
+  (val && val.length > 0) || "This field is required";
 
-  const columns = [
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
-    { name: 'read', label: 'Read', align: 'left', field: 'read', sortable: true },
-    { name: 'write', label: 'Write', align: 'left', field: 'write', sortable: true },
-    { name: 'shareRead', label: 'Share Read', align: 'left', field: 'shareRead', sortable: true, style: 'width: 100px' },
-    { name: 'shareWrite', label: 'Share Write', align: 'left', field: 'shareWrite', sortable: true, style: 'width: 100px' },
-    { name: 'admin', label: 'Admin', align: 'left', field: 'admin', sortable: true },
-    { name: 'owner', label: 'Owner', align: 'left', field: 'owner', sortable: true },
-    { name: 'actions', label: 'Actions', align: 'center',  },
-  ]
+// Table Configuration
+const memberColumns = computed(() => [
+  {
+    name: "name",
+    label: "User Name",
+    align: "left",
+    field: "name",
+    sortable: true,
+    styleType: "resource-name", 
+    includeIcon: false, 
+    conceptType: "user", 
+  },
+  {
+    name: "read",
+    label: "Read",
+    field: "read",
+    align: "center",
+    sortable: true,
+  },
+  {
+    name: "write",
+    label: "Write",
+    field: "write",
+    align: "center",
+    sortable: true,
+  },
+  {
+    name: "shareRead",
+    label: "Share Read",
+    field: "shareRead",
+    align: "center",
+    sortable: true,
+    style: "width: 100px",
+  },
+  {
+    name: "shareWrite",
+    label: "Share Write",
+    field: "shareWrite",
+    align: "center",
+    sortable: true,
+    style: "width: 100px",
+  },
+  {
+    name: "admin",
+    label: "Admin",
+    field: "admin",
+    align: "center",
+    sortable: true,
+  },
+  {
+    name: "owner",
+    label: "Owner",
+    field: "owner",
+    align: "center",
+    sortable: true,
+  },
+  {
+    name: "actions",
+    label: "Actions",
+    align: "center",
+    style: "width: 100px",
+  },
+]);
 
-  const searchResults = ref(['Henry', 'Bob', 'Joe', 'Larry', 'John', 'Dan'])
+function performSearch() {
+  if (!searchQuery.value) {
+    searchResults.value = [];
+    return;
+  }
+  searchResults.value = ["Henry", "Bob", "Joe", "Larry", "John", "Dan"].filter(
+    (u) => u.toLowerCase().includes(searchQuery.value.toLowerCase()),
+  );
+}
+const selectedMember = ref(null);
+const showDeleteDialog = ref(false);
+const showEditParamDialog = ref(false);
+</script>
 
-</script>
\ No newline at end of file
+<style scoped>
+.field-label {
+  font-size: 14px;
+  color: #546e7a; 
+}
+</style>
diff --git a/src/frontend/src/views/GroupsView.vue b/src/frontend/src/views/GroupsView.vue
index 73e5882ed..051732370 100644
--- a/src/frontend/src/views/GroupsView.vue
+++ b/src/frontend/src/views/GroupsView.vue
@@ -1,77 +1,157 @@
 <template>
-  <PageTitle title="Groups" />
-  <TableComponent 
+  <PageTitle title="Groups" conceptType="group" />
+
+  <TableComponent
+    ref="tableRef"
     :rows="userGroups"
-    :columns="columns"
     title="Groups"
-    @delete="showDeleteDialog = true"
-    @edit="router.push('/groups/admin')"
+    :columns="computedColumns"
     v-model:selected="selected"
-    @request="getUserGroups"
-    ref="tableRef"
+    :loading="isLoading"
     :hideCreateBtn="true"
-  >
-    <template #body-cell="props">
-      <q-td :props="props">
-        <q-badge color="blue" :label="props.value" />
-      </q-td>
-    </template>
-  </TableComponent>
+    @request="getUserGroups"
+    @open="router.push('/groups/admin')"
+    @delete="showDeleteDialog = true"
+  />
+
+  <DeleteDialog
+    v-model="showDeleteDialog"
+    @submit="deleteGroup"
+    type="Group"
+    :name="selected[0]?.name || ''"
+  />
 </template>
 
 <script setup>
-  import * as api from '@/services/dataApi'
-  import { ref, computed } from 'vue'
-  import * as notify from '../notify';
-  import TableComponent from '@/components/TableComponent.vue'
-  import { useLoginStore } from '@/stores/LoginStore'
-  import { useRouter } from 'vue-router'
-  import PageTitle from '@/components/PageTitle.vue'
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
+import { useLoginStore } from "@/stores/LoginStore";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
 
-  const router = useRouter()
+import TableComponent from "@/components/table/TableComponent.vue";
+import PageTitle from "@/components/PageTitle.vue";
+import DeleteDialog from "@/dialogs/DeleteDialog.vue";
 
-  const store = useLoginStore()
+const router = useRouter();
+const store = useLoginStore();
+const tableRef = ref(null);
 
-  const tableRef = ref(null)
+const userGroups = ref([]);
+const selected = ref([]);
+const isLoading = ref(false);
+const showDeleteDialog = ref(false);
 
-  const columns = [
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
-    { name: 'read', label: 'Read', align: 'left', field: 'read', sortable: true },
-    { name: 'write', label: 'Write', align: 'left', field: 'write', sortable: true },
-    { name: 'shareRead', label: 'Share Read', align: 'left', field: 'shareRead', sortable: true, style: 'width: 200px' },
-    { name: 'shareWrite', label: 'Share Write', align: 'left', field: 'shareWrite', sortable: true, style: 'width: 200px' },
-    { name: 'admin', label: 'Admin', align: 'left', field: 'admin', sortable: true },
-    { name: 'owner', label: 'Owner', align: 'left', field: 'owner', sortable: true },
-  ]
+// Columns
+const computedColumns = [
+  {
+    name: "name",
+    label: "Name",
+    field: "name",
+    align: "left",
+    sortable: true,
+    styleType: "resource-name",
+    conceptType: "group", 
+    includeIcon: true,
+  },
+  {
+    name: "read",
+    label: "Read",
+    field: "read",
+    align: "center",
+    sortable: true,
+  },
+  {
+    name: "write",
+    label: "Write",
+    field: "write",
+    align: "center",
+    sortable: true,
+  },
+  {
+    name: "shareRead",
+    label: "Share Read",
+    field: "shareRead",
+    align: "center",
+    sortable: true,
+    style: "width: 150px",
+  },
+  {
+    name: "shareWrite",
+    label: "Share Write",
+    field: "shareWrite",
+    align: "center",
+    sortable: true,
+    style: "width: 150px",
+  },
+  {
+    name: "admin",
+    label: "Admin",
+    field: "admin",
+    align: "center",
+    sortable: true,
+  },
+  {
+    name: "owner",
+    label: "Owner",
+    field: "owner",
+    align: "center",
+    sortable: true,
+  },
+];
 
-  const userGroupsIds = computed(() => {
-    if(store.loggedInUser) {
-      return store.loggedInUser.groups.map((group) => group.id)
-    }
-    return []
-  })
+const userGroupsIds = computed(() => {
+  if (store.loggedInUser && store.loggedInUser.groups) {
+    return store.loggedInUser.groups.map((group) => group.id);
+  }
+  return [];
+});
+
+async function getUserGroups(pagination) {
+  if (userGroupsIds.value.length === 0) {
+    return;
+  }
 
-  const userGroups = ref([])
+  isLoading.value = true;
+  // Reset array to avoid duplicates on refresh
+  userGroups.value = [];
 
-  async function getUserGroups(pagination) {
-    if(userGroupsIds.value.length === 0) {
-      notify.error('Please login to view user groups.')
-      return
+  try {
+    const res = await api.getData("groups", pagination);
+    const groups = res.data.data;
+
+    groups.forEach((group) => {
+      group.members.forEach((member) => {
+        if (member.user.id === store.loggedInUser.id) {
+          userGroups.value.push({
+            id: group.id, 
+            name: member.group.name,
+            ...member.permissions,
+          });
+        }
+      });
+    });
+
+    if (tableRef.value) {
+      tableRef.value.updateTotalRows(userGroups.value.length);
     }
-    const res = await api.getData('groups', pagination)
-      const groups = res.data.data
-      groups.forEach((group) => {
-        group.members.forEach((member) => {
-          if(member.user.id === store.loggedInUser.id) {
-            userGroups.value.push({
-              name: member.group.name,
-              ...member.permissions
-            })
-          }
-        })
-      })
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Failed to fetch groups");
+  } finally {
+    isLoading.value = false;
   }
+}
 
-  const selected = ref([])
-
+async function deleteGroup() {
+  try {
+    const id = selected.value[0].id;
+    await api.deleteItem("groups", id);
+    notify.success(`Successfully deleted '${selected.value[0].name}'`);
+    showDeleteDialog.value = false;
+    selected.value = [];
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Delete failed");
+  }
+}
 </script>
diff --git a/src/frontend/src/views/JobDashboardView.vue b/src/frontend/src/views/JobDashboardView.vue
index b766d8776..052bac191 100644
--- a/src/frontend/src/views/JobDashboardView.vue
+++ b/src/frontend/src/views/JobDashboardView.vue
@@ -1,117 +1,166 @@
 <template>
-  <div class="column" style="min-height: calc(100vh - 100px);">
+  <div class="column" style="min-height: calc(100vh - 100px)">
     <div class="row items-center justify-between">
-      <PageTitle :title="`Job ${$route.params.id} Dashboard`" />
-      <q-btn 
-        color="negative" 
-        icon="sym_o_delete" 
-        label="Delete Job" 
+      <PageTitle
+        title="Jobs"
+        :subtitle="`Job ${$route.params.id} Dashboard`"
+        conceptType="job"
+      />
+      <q-btn
+        color="negative"
+        icon="sym_o_delete"
+        label="Delete Job"
+        outline
         @click="showDeleteDialog = true"
       />
     </div>
+
     <div class="q-my-lg">
       <q-tabs
-          v-model="tab"
-          indicator-color="primary"
-          dense
-          no-caps
-          align="left"
-        >
-          <q-tab name="overview" label="Overview" />
-          <q-tab name="logs" :label="`Logs ${logTotalNumber ? `(${logTotalNumber})` : ''}`" />
-          <q-tab name="metrics" :label="`Metrics ${metrics.length ? `(${metrics.length})` : ''}`" />
-          <q-tab name="artifacts" :label="`Output Artifacts ${job?.artifacts.length ? `(${job?.artifacts.length})` : ''}`" />
-        </q-tabs>
-        <q-separator />
+        v-model="tab"
+        indicator-color="primary"
+        dense
+        no-caps
+        align="left"
+        class="text-grey-8"
+        active-color="primary"
+      >
+        <q-tab name="overview" label="Overview" />
+        <q-tab
+          name="logs"
+          :label="`Logs ${logTotalNumber ? `(${logTotalNumber})` : ''}`"
+        />
+        <q-tab
+          name="metrics"
+          :label="`Metrics ${metrics.length ? `(${metrics.length})` : ''}`"
+        />
+        <q-tab
+          name="artifacts"
+          :label="`Output Artifacts ${job?.artifacts.length ? `(${job?.artifacts.length})` : ''}`"
+        />
+      </q-tabs>
+      <q-separator />
     </div>
-    <div 
-      v-if="tab === 'overview'"
-      class="row q-gutter-lg"
-    >
-      <div class="col" :class="`${isMedium ? 'col-12' : 'col'}`">
-        <h2>Details</h2>
+
+    <div v-if="tab === 'overview'" class="row q-col-gutter-lg">
+      <div class="col-12 col-md-6">
+        <h2 class="text-h6 q-mt-none">Details</h2>
+
         <KeyValueTable :rows="overviewRows">
-          <template #tags="{ tags = [] }">
-            <div style="margin-top: -5px; margin-bottom: -5px;">
-              <q-chip
-                v-for="(tag, i) in tags"
-                :key="i"
-                color="primary" 
-                text-color="white"
-                class="q-my-none"
-              >
-                {{ tag.name.length <= 18 ? tag.name : tag.name.replace(/(.{17})..+/, "$1…") }}
-                <q-tooltip v-if="tag.name.length > 18" max-width="30vw" style="overflow-wrap: break-word">
-                  {{ tag.name }}
-                </q-tooltip>
-              </q-chip>
-              <q-btn
-                round
-                size="xs"
-                icon="add"
-                @click="showTagsDialog = true"
-                color="grey-5"
-                text-color="black"
-                class="q-ml-xs"
-              />
-            </div>
+          <template #id>
+            <ResourceName
+              :text="'Job: #' + job?.id"
+              conceptType="job"
+              :includeIcon="true"
+            />
+          </template>
+
+          <template #description>
+            <CellLongText :text="job?.description" :maxLength="100" />
+          </template>
+
+          <template #status>
+            <JobStatus :status="job?.status" />
           </template>
-          <template #experiment="{ name = '', id, snapshotId }">
-            <RouterLink :to="`/experiments/${id}?snapshotId=${snapshotId}`">
-              {{ name.length < 18 ? name : name.replace(/(.{18})..+/, "$1…") }}
-              <q-tooltip v-if="name.length > 18" max-width="30vw" style="overflow-wrap: break-word">
-                {{ name }}
-              </q-tooltip>
-            </RouterLink>
+
+          <template #experiment>
+            <BadgeIcon
+              v-if="job?.experiment"
+              type="experiment"
+              :label="job.experiment.name"
+              :rowId="job.experiment.id"
+              :snapshotId="job.experiment.snapshotId"
+            />
+            <span v-else>-</span>
+          </template>
+
+          <template #entrypoint>
+            <BadgeIcon
+              v-if="job?.entrypoint"
+              type="entrypoint"
+              :label="job.entrypoint.name"
+              :rowId="job.entrypoint.id"
+              :snapshotId="job.entrypoint.snapshotId"
+            />
+            <span v-else>-</span>
           </template>
-          <template #entrypoint="{ name = '', id, snapshotId }">
-            <RouterLink :to="`/entrypoints/${id}?snapshotId=${snapshotId}`">
-              {{ name.length < 18 ? name : name.replace(/(.{18})..+/, "$1…") }}
-              <q-tooltip v-if="name.length > 18" max-width="30vw" style="overflow-wrap: break-word">
-                {{ name }}
-              </q-tooltip>
-            </RouterLink>
+
+          <template #queue>
+            <BadgeIcon
+              v-if="job?.queue"
+              type="queue"
+              :label="job.queue.name"
+              :rowId="job.queue.id"
+            />
+            <span v-else>-</span>
           </template>
-          <template #status="{ status = '' }">
-            <JobStatus
-              :status="status"
+
+          <template #tags>
+            <TagList
+              :tags="job?.tags"
+              :row="job"
+              @add="showTagsDialog = true"
             />
           </template>
         </KeyValueTable>
+
         <q-btn
-          color="light-blue" 
-          icon="update" 
-          label="Re-Run Job" 
-          class="q-mt-lg" 
+          color="primary"
+          icon="replay"
+          label="Re-Run Job"
+          class="q-mt-lg"
           @click="reRunJob()"
         />
       </div>
-      <div class="col">
-        <h2>Entrypoint Parameters</h2>
-        <TableComponent
-          :columns="parametersColumns"
-          :rows="paramRows"
-          @request="getJob"
-          v-model:selected="selectedParam"
-          rowKey="parameter"
-          :hideCreateBtn="true"
-          :hideDeleteBtn="true"
-          style="margin-top: 0px;"
-        />
-      </div>
-      <div class="col">
-        <h2>Artifact Parameters</h2>
-        <TableComponent
-          :columns="artifactsUsedColumns"
-          v-model:selected="selectedUsedArtifact"
-          :rows="artifactsUsed"
-          :hideCreateBtn="true"
-          :hideDeleteBtn="true"
-          style="margin-top: 0px;"
-          @edit="router.push(`/artifacts/${selectedUsedArtifact[0].id}?snapshotId=${selectedUsedArtifact[0].snapshotId}`)"
-        />
+
+      <div class="col-12 col-md-6 column q-gutter-y-lg">
+        <div>
+          <h2 class="text-h6 q-mt-none">Entrypoint Parameters</h2>
+          <TableComponent
+            :columns="parametersColumns"
+            :rows="paramRows"
+            rowKey="parameter"
+            :hideCreateBtn="true"
+            :hideDeleteBtn="true"
+            :hideSearch="true"
+            :hideBottom="true"
+            class="q-mt-none"
+          />
+        </div>
+
+        <div>
+          <h2 class="text-h6 q-mt-none">Artifact Parameters</h2>
+          <TableComponent
+            :columns="artifactsUsedColumns"
+            :rows="artifactsUsed"
+            rowKey="id"
+            :hideCreateBtn="true"
+            :hideDeleteBtn="true"
+            :hideSearch="true"
+            :hideBottom="true"
+            class="q-mt-none"
+            v-model:selected="selectedUsedArtifact"
+            @open="(openTab) => {
+              if (selectedUsedArtifact.length) {
+                const row = selectedUsedArtifact[0];
+                const routePath = `/artifacts/${row.id}?snapshotId=${row.snapshotId}`;
+                openTab ? window.open(routePath, '_blank') : router.push(routePath);
+              }
+            }"
+          >
+            <template #body-cell-id="props">
+              <BadgeIcon
+                type="artifact"
+                :label="props.row.id"
+                :rowId="props.row.id"
+                :snapshotId="props.row.snapshotId"
+              />
+            </template>
+          </TableComponent>
+        </div>
       </div>
     </div>
+
     <div v-if="tab === 'logs'">
       <TableComponent
         title="Job Logs"
@@ -121,8 +170,6 @@
         :hideDeleteBtn="true"
         :disableSelect="true"
         :hideCreateBtn="true"
-        style="margin-top: 0;"
-        class="q-mb-lg"
         ref="tableRef"
         :loading="isLoading"
       >
@@ -135,92 +182,75 @@
             class="code-cell"
           />
         </template>
+
         <template #jobLogSlot>
-          <q-select
-            v-if="job.status !== 'finished' && job.status !== 'failed'"
-            v-model="selectedFrequency"
-            label="Refresh Frequency"
-            :options="refreshOptions"
-            option-value="value"
-            option-label="label"
-            emit-value
-            map-options
-            dense
-            outlined
-            style="width: 175px"
-            class="q-mr-lg"
-          />
-          <q-select
-            label="Filter Severity"
-            v-model="selectedSeverity"
-            :options="['DEBUG', 'INFO','WARNING', 'ERROR', 'CRITICAL']"
-            multiple
-            outlined
-            dense
-            use-chips 
-            class="q-mr-lg"
-            style="width: 485px;" 
-          >
-            <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
-              <q-item v-bind="itemProps">
-                <q-item-section>
-                  <q-item-label>
-                    {{ opt }}
-                  </q-item-label>
-                </q-item-section>
-                <q-item-section side>
-                  <q-checkbox
-                    v-model="selectedSeverity"
-                    :val="opt"
-                  />
-                </q-item-section>
-              </q-item>
-            </template>
-          </q-select>
+          <div class="row items-center q-gutter-x-md">
+            <q-select
+              v-if="job?.status !== 'finished' && job?.status !== 'failed'"
+              v-model="selectedFrequency"
+              label="Refresh"
+              :options="refreshOptions"
+              emit-value
+              map-options
+              dense
+              outlined
+              style="width: 140px"
+            />
+
+            <q-select
+              label="Severity"
+              v-model="selectedSeverity"
+              :options="['DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL']"
+              multiple
+              outlined
+              dense
+              use-chips
+              style="min-width: 250px; max-width: 400px"
+            />
+          </div>
         </template>
       </TableComponent>
     </div>
-    <div v-if="tab === 'metrics'" class="row q-col-gutter-x-lg q-col-gutter-y-lg">
+
+    <div v-if="tab === 'metrics'" class="row q-col-gutter-lg">
       <div class="col-12">
-        <!-- @request="getJobMetrics" is not needed because getJobMetrics is run by loadAllMetricHistories -->
         <TableComponent
-          title="Job Metrics Latest Values"
+          title="Job Metrics (Latest)"
           :columns="metricColumns"
           :rows="metrics"
-          v-model:selected="selectedMetric"
           rowKey="name"
           :hideCreateBtn="true"
           :hideDeleteBtn="true"
-          style="margin-top: 0px;"
-          class="q-mb-lg"
           v-model:filter="filter"
         />
-        <div class="row items-center">
-          <q-input 
-            v-model="filter" 
-            debounce="300" 
-            dense 
-            placeholder="Search metric charts" 
+
+        <div class="row items-center q-mt-md justify-between">
+          <q-input
+            v-model="filter"
+            debounce="300"
+            dense
             outlined
+            placeholder="Search metric charts..."
             class="col-grow"
             clearable
+            style="max-width: 400px"
           >
-            <template #prepend>
-              <q-icon name="search" />
-            </template>
+            <template #prepend><q-icon name="search" /></template>
           </q-input>
+
           <q-btn
-            label="Refresh"
+            label="Refresh Charts"
             color="primary"
             icon="refresh"
-            class="q-ml-lg"
+            outline
             @click="loadAllMetricHistories"
           />
         </div>
       </div>
+
       <div
-        :class="graphClass" 
-        v-for="(metric, i) in filteredMetrics"
+        :class="graphClass"
+        v-for="metric in filteredMetrics"
         :key="metric.name"
       >
         <PlotlyGraph
@@ -229,30 +259,31 @@
           :graphClass="graphClass"
         />
       </div>
+
       <div
-        v-if="filteredMetrics.length === 0" 
-        class="row items-center q-mt-lg" 
+        v-if="filteredMetrics.length === 0"
+        class="col-12 row justify-center q-mt-xl text-grey"
       >
-        <q-icon
-          name="sym_o_info"
-          size="2.5em"
-          color="grey-7"
-          class="q-mr-sm"
-        />
-        <div style="opacity: 0.7">No metrics found</div>
+        <div class="column items-center">
+          <q-icon name="bar_chart" size="4em" color="grey-4" />
+          <div class="text-h6 text-grey-5 q-mt-sm">No metrics available</div>
+        </div>
       </div>
     </div>
+
     <div v-if="tab === 'artifacts'">
-      <JobArtifactsTable 
-        :artifactIds="job.artifacts.map((artifact) => artifact.id)"
+      <JobArtifactsTable
+        v-if="job?.artifacts"
+        :artifactIds="job.artifacts.map((a) => a.id)"
         style="margin-top: 0px"
       />
     </div>
 
     <q-space />
-    <div class="row justify-end">
+
+    <div class="row justify-end q-mt-lg">
       <q-btn
-        outline  
+        outline
         label="Return to Jobs"
         @click="store.initialPage ? router.push('/jobs') : router.back()"
         class="cancel-btn q-mt-lg"
@@ -261,7 +292,7 @@
     </div>
   </div>
 
-  <AssignTagsDialog 
+  <AssignTagsDialog
     v-model="showTagsDialog"
     :editObj="job"
     type="jobs"
@@ -276,297 +307,380 @@
 </template>
 
 <script setup>
-import { ref, computed, inject, watch, nextTick, onMounted } from 'vue'
-import PageTitle from '@/components/PageTitle.vue'
-import * as api from '@/services/dataApi'
-import { useRoute, useRouter } from 'vue-router'
-import KeyValueTable from '@/components/KeyValueTable.vue'
-import AssignTagsDialog from '@/dialogs/AssignTagsDialog.vue'
-import JobStatus from '@/components/JobStatus.vue'
-import TableComponent from '@/components/TableComponent.vue'
-import DeleteDialog from '@/dialogs/DeleteDialog.vue'
-import * as notify from '../notify'
-import PlotlyGraph from '@/components/PlotlyGraph.vue'
-import CodeEditor from '@/components/CodeEditor.vue'
-import JobArtifactsTable from '@/components/JobArtifactsTable.vue'
+import { ref, computed, inject, watch, nextTick, onMounted } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
+
+// Components
+import PageTitle from "@/components/PageTitle.vue";
+import KeyValueTable from "@/components/KeyValueTable.vue";
+import TableComponent from "@/components/table/TableComponent.vue";
+import JobStatus from "@/components/JobStatus.vue";
+import CodeEditor from "@/components/CodeEditor.vue";
+import PlotlyGraph from "@/components/PlotlyGraph.vue";
+import JobArtifactsTable from "@/components/JobArtifactsTable.vue";
 import { useLoginStore } from '@/stores/LoginStore.ts'
 
 const store = useLoginStore()
+import DeleteDialog from "@/dialogs/DeleteDialog.vue";
+import AssignTagsDialog from "@/dialogs/AssignTagsDialog.vue";
+
+// Table Cell Subcomponents
+import ResourceName from "@/components/table/cells/ResourceName.vue";
+import BadgeIcon from "@/components/table/cells/BadgeIcon.vue";
+import CellLongText from "@/components/table/cells/CellLongText.vue";
+import TagList from "@/components/table/cells/TagList.vue";
+import ParameterList from "@/components/table/cells/ParameterList.vue";
+
+const route = useRoute();
+const router = useRouter();
+const isMedium = inject("isMedium");
+const isMobile = inject("isMobile");
+
+const tab = ref("overview");
+const job = ref(null); 
+const showTagsDialog = ref(false);
+const showDeleteDialog = ref(false);
+const isLoading = ref(false);
+const metrics = ref([]);
+const metricsData = ref([]);
+const jobLogs = ref([]);
+const logTotalNumber = ref(0);
+const tableRef = ref(null);
+const filter = ref("");
+const selectedUsedArtifact = ref([]);
+
+// Columns 
+const parametersColumns = [
+  {
+    name: "parameter",
+    label: "Parameter",
+    align: "left",
+    field: "parameter",
+    sortable: true,
+  },
+  {
+    name: "value",
+    label: "Value",
+    align: "left",
+    field: "value",
+    sortable: false,
+  },
+];
 
-const route = useRoute()
-const router = useRouter()
+const artifactsUsedColumns = [
+  {
+    name: "id",
+    label: "Artifact ID",
+    align: "left",
+    field: "id",
+    styleType: "icon-badge",
+    conceptType: "artifact",
+    showIcon: true,
+    sortable: true,
+  },
+  {
+    name: "snapshotId",
+    label: "Snapshot ID",
+    align: "left",
+    field: "snapshotId",
+    sortable: false,
+  },
+  {
+    name: "artifactParamName",
+    label: "Parameter Name",
+    align: "left",
+    field: "artifactParamName",
+    sortable: true,
+  },
+];
 
-const tab = ref('overview')
-const isMedium = inject('isMedium')
-const isMobile = inject('isMobile')
+const metricColumns = [
+  {
+    name: "metric",
+    label: "Metric",
+    align: "left",
+    field: "name",
+    sortable: true,
+  },
+  {
+    name: "value",
+    label: "Value",
+    align: "left",
+    field: "value",
+    sortable: false,
+  },
+];
 
-const job = ref()
-const showTagsDialog = ref(false)
-const showDeleteDialog = ref(false)
-const selectedParam = ref([])
-const selectedUsedArtifact = ref([])
-const selectedMetric = ref([])
-const metrics = ref([])
+const logColumns = [
+  {
+    name: "severity",
+    label: "Severity",
+    align: "left",
+    field: "severity",
+    sortable: true,
+    classes: "vertical-top",
+    style: "width: 100px",
+  },
+  {
+    name: "logger_name",
+    label: "Logger Name",
+    align: "left",
+    field: "loggerName",
+    sortable: true,
+    classes: "vertical-top",
+    style: "width: 150px",
+  },
+  {
+    name: "created_on",
+    label: "Time",
+    align: "left",
+    field: "createdOn",
+    styleType: "date",
+    sortable: true,
+    classes: "vertical-top",
+    style: "width: 180px",
+  },
+  {
+    name: "message",
+    label: "Message",
+    align: "left",
+    field: "message",
+    sortable: false,
+  },
+];
 
-async function getJob() {
-  try {
-    const res = await api.getItem('jobs', route.params.id)
-    job.value = res.data
-  } catch(err) {
-    console.log(err)
-  }
-}
+// --- Computed Rows for Overview ---
+const overviewRows = computed(() => [
+  { label: "Job ID", slot: "id" },
+  { label: "Description", slot: "description" },
+  { label: "Status", slot: "status" },
+  { label: "Created On", value: formatDate(job.value?.createdOn) },
+  { label: "Created By", value: job.value?.user?.username || "System" },
+  { label: "Experiment", slot: "experiment" },
+  { label: "Entrypoint", slot: "entrypoint" },
+  { label: "Queue", slot: "queue" },
+  {
+    label: "Timeout",
+    value: job.value?.timeout ? `${job.value.timeout}s` : "-",
+  },
+  { label: "Tags", slot: "tags" },
+]);
 
-onMounted(() => {
-  // to get tab counts
-  getLogNumber()
-  getJobMetrics()
-})
+const paramRows = computed(() => {
+  if (!job.value?.values) return [];
+  return Object.entries(job.value?.values).map(([key, value]) => ({
+    parameter: key,
+    value: value,
+  }));
+});
 
-const metricNames = computed(() => {
-  return metrics.value.map(metric => metric.name)
-})
+const artifactsUsed = computed(() => {
+  return Object.entries(job.value?.artifactValues ?? {}).map(
+    ([key, value]) => ({
+      artifactParamName: key,
+      id: value.id,
+      snapshotId: value.snapshotId,
+    }),
+  );
+});
 
-watch(tab, async (newVal) => {
-  if(newVal === 'metrics') {
-    await loadAllMetricHistories()
-  }
-})
+const filteredMetrics = computed(() => {
+  if (!filter.value) return metricsData.value;
+  return metricsData.value.filter((metric) =>
+    metric.name.toLowerCase().includes(filter.value.toLowerCase()),
+  );
+});
 
-async function loadAllMetricHistories() {
-  metricsData.value = []
-  await getJobMetrics()
-  const promises = metricNames.value.map(name =>
-    getJobMetricHistory(route.params.id, name)
-  )
-  const results = await Promise.all(promises)
-  metricsData.value = results
-}
+const graphClass = computed(() => {
+  if (filteredMetrics.value.length <= 1 || isMobile.value) return "col-12";
+  else if (filteredMetrics.value.length === 2 || isMedium.value) return "col-6";
+  return "col-4";
+});
+
+// --- Data Fetching ---
+onMounted(async () => {
+  await getJob();
+  getLogNumber();
+  getJobMetrics();
+});
 
-const jobLogs = ref([])
-const selectedSeverity = ref(['DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL'])
-watch(selectedSeverity, () => {
-  if(selectedSeverity.value.length === 0) {
-    selectedSeverity.value = ['DEBUG', 'INFO', 'WARNING', 'ERROR', 'CRITICAL']
+async function getJob() {
+  try {
+    const res = await api.getItem("jobs", route.params.id);
+    job.value = res.data;
+  } catch (err) {
+    console.error(err);
   }
-  tableRef.value.refreshTable()
-})
-
-const tableRef = ref(null)
-const isLoading = ref(false)
+}
 
 async function getLogs(pagination) {
-  isLoading.value = true
-  const minLoadTimePromise = new Promise(resolve => setTimeout(resolve, 300)); 
+  isLoading.value = true;
+  if (!tableRef.value) return;
 
   try {
+    const minLoadTimePromise = new Promise((resolve) =>
+      setTimeout(resolve, 300),
+    );
     const [res] = await Promise.all([
       api.getJobLogs(job.value.id, pagination, selectedSeverity.value),
-      minLoadTimePromise
-    ])
-
-    jobLogs.value = res.data.data
-    logTotalNumber.value = res.data.totalNumResults
-    tableRef.value.updateTotalRows(res.data.totalNumResults)
-  } catch(err) {
-    console.log('err = ', err)
-    notify.error(err.response.data.message);
+      minLoadTimePromise,
+    ]);
+
+    jobLogs.value = res.data.data;
+    logTotalNumber.value = res.data.totalNumResults;
+    tableRef.value.updateTotalRows(res.data.totalNumResults);
+  } catch (err) {
+    console.warn(err);
+    notify.error("Failed to fetch logs");
   } finally {
     isLoading.value = false;
   }
 }
 
-const logTotalNumber = ref()
-
 async function getLogNumber() {
   try {
     const res = await api.getJobLogs(route.params.id, {
       index: 0,
       pageLength: 1,
-      search: ''
-    })
-    logTotalNumber.value = res.data.totalNumResults
-  } catch(err) {
-    console.warn(err)
-  }
-}
-
-const selectedFrequency = ref(5)
-const refreshOptions = [
-  {label: '5 Seconds', value: 5},
-  {label: '10 Seconds', value: 10},
-  {label: '15 Seconds', value: 15},
-  {label: '30 Seconds', value: 30}
-]
-
-let logsIntervalId = null
-
-function clearLogsInterval() {
-  if (logsIntervalId) {
-    clearInterval(logsIntervalId)
-    logsIntervalId = null
+      search: "",
+    });
+    logTotalNumber.value = res.data.totalNumResults;
+  } catch (err) {
+    console.warn(err);
   }
 }
 
-async function setupLogsPolling() {
-  clearLogsInterval()
-
-  if (tab.value !== 'logs') return
-
-  await getJob() // get job status
-  if(job.value.status === 'finished' || job.value.status === 'failed') return
-
-  // Ensure the table is rendered so tableRef is non-null
-  await nextTick()
-
-  // Guard if the ref/method isn't ready yet
-  if (!tableRef.value?.refreshTable) return
-
-  // Then start interval
-  logsIntervalId = setInterval(async() => {
-    await getJob() // get job status
-    if(job.value.status === 'finished' || job.value.status === 'failed') {
-      clearLogsInterval()
-      return
-    }
-    tableRef.value?.refreshTable()
-  }, selectedFrequency.value * 1000)
-}
-
-// React to BOTH tab changes and frequency changes
-watch([tab, selectedFrequency], setupLogsPolling, { immediate: true })
-
 async function getJobMetrics() {
   try {
-    const res = await api.getJobMetrics(route.params.id)
-    metrics.value = res.data
-  } catch(err) {
-    console.log(err)
+    const res = await api.getJobMetrics(route.params.id);
+    metrics.value = res.data;
+  } catch (err) {
+    console.warn(err);
   }
 }
 
-const metricsData = ref([])
+async function loadAllMetricHistories() {
+  metricsData.value = [];
+  await getJobMetrics();
+  const metricNames = metrics.value.map((metric) => metric.name);
+  const promises = metricNames.map((name) =>
+    getJobMetricHistory(route.params.id, name),
+  );
+  const results = await Promise.all(promises);
+  metricsData.value = results;
+}
 
 async function getJobMetricHistory(id, name) {
-  const res = await api.getJobMetricHistory(id, name)
-  
+  const res = await api.getJobMetricHistory(id, name);
   return {
     name,
-    type: 'scatter',
+    type: "scatter",
     data: [
       {
-        x: res.data.data.map(obj => obj.step),
-        y: res.data.data.map(obj => obj.value)
-      }
-    ]
-  }
+        x: res.data.data.map((obj) => obj.step),
+        y: res.data.data.map((obj) => obj.value),
+      },
+    ],
+  };
 }
 
-const filter = ref('')
-
-const filteredMetrics = computed(() => {
-  if (!filter.value) return metricsData.value
-  return metricsData.value.filter(metric =>
-    metric.name.toLowerCase().includes(filter.value.toLowerCase())
-  )
-})
-
-const graphClass = computed(() => {
-  if(filteredMetrics.value.length <= 1 || isMobile.value) return 'col-12'
-  else if(filteredMetrics.value.length === 2 || isMedium.value) return 'col-6'
-  return 'col-4'
-})
+// --- Log Polling Logic ---
+const selectedSeverity = ref(["DEBUG", "INFO", "WARNING", "ERROR", "CRITICAL"]);
+const selectedFrequency = ref(5);
+const refreshOptions = [
+  { label: "5s", value: 5 },
+  { label: "10s", value: 10 },
+  { label: "15s", value: 15 },
+  { label: "30s", value: 30 },
+];
+let logsIntervalId = null;
 
-function formatDate(dateString) {
-  const options = { year: '2-digit', month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', hour12: true }
-  return new Date(dateString).toLocaleString('en-US', options)
+function clearLogsInterval() {
+  if (logsIntervalId) {
+    clearInterval(logsIntervalId);
+    logsIntervalId = null;
+  }
 }
 
-const overviewRows = computed(() => [
-  { label: 'ID', value: job.value?.id },
-  { label: 'Description', value: job.value?.description },
-  { label: 'Status', slot: 'status', props: { status: job.value?.status} },
-  { label: 'Created On', value: formatDate(job.value?.createdOn) },
-  { label: 'Created by', value: job.value?.user.username },
-  { label: 'Experiment', slot: 'experiment', 
-    props: { name: job.value?.experiment.name, id: job.value?.experiment.id, snapshotId: job.value?.experiment.snapshotId }
-  },
-  { label: 'Entrypoint', slot: 'entrypoint',
-    props: { name: job.value?.entrypoint.name, id: job.value?.entrypoint.id, snapshotId: job.value?.entrypoint.snapshotId }
-  },
-  { label: 'Queue', value: job.value?.queue.name },
-  { label: 'Timeout', value: job.value?.timeout },
-  { label: 'Tags', slot: 'tags', props: { tags: job.value?.tags }  },
-])
+async function setupLogsPolling() {
+  clearLogsInterval();
+  if (tab.value !== "logs") return;
 
-const parametersColumns = [
-  { name: 'parameter', label: 'Parameter', align: 'left', field: 'parameter', sortable: true, },
-  { name: 'value', label: 'Value', align: 'left', field: 'value', sortable: false, },
-]
+  if (!job.value) await getJob();
+  if (job.value?.status === "finished" || job.value?.status === "failed")
+    return;
 
-const artifactsUsedColumns = [
-  { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: true, },
-  { name: 'snapshotId', label: 'Snapshot Id', align: 'left', field: 'snapshotId', sortable: false, },
-  { name: 'artifactParamName', label: 'Parameter Name', align: 'left', field: 'artifactParamName', sortable: true, },
-]
+  await nextTick();
+  if (!tableRef.value?.refreshTable) return;
 
-const metricColumns = [
-  { name: 'metric', label: 'Metric', align: 'left', field: 'name', sortable: true, },
-  { name: 'value', label: 'Value', align: 'left', field: 'value', sortable: false, },
-]
+  logsIntervalId = setInterval(async () => {
+    await getJob();
+    if (job.value.status === "finished" || job.value.status === "failed") {
+      clearLogsInterval();
+      return;
+    }
+    tableRef.value?.refreshTable();
+  }, selectedFrequency.value * 1000);
+}
 
-const logColumns = [
-  { name: 'severity', label: 'Severity', align: 'left', field: 'severity', sortable: true, classes: 'vertical-top' },
-  { name: 'logger_name', label: 'Logger Name', align: 'left', field: 'loggerName', sortable: true, classes: 'vertical-top', },
-  { name: 'created_on', label: 'Received On', align: 'left', field: 'createdOn', sortable: true, classes: 'vertical-top', },
-  { name: 'message', label: 'Message', align: 'left', field: 'message', sortable: false, },
-]
+// Watchers
+watch([tab, selectedFrequency], setupLogsPolling, { immediate: true });
+watch(selectedSeverity, () => {
+  if (selectedSeverity.value.length === 0)
+    selectedSeverity.value = ["DEBUG", "INFO", "WARNING", "ERROR", "CRITICAL"];
+  tableRef.value?.refreshTable();
+});
+watch(
+  () => tab.value,
+  async (newVal) => {
+    if (newVal === "metrics") await loadAllMetricHistories();
+  },
+);
 
-const paramRows = computed(() => {
-  if(!job.value?.values) return []
-  return Object.entries(job.value?.values).map(([key, value]) => ({
-    parameter: key,
-    value: value,
-  }))
-})
+// --- Actions ---
+function reRunJob() {
+  router.push({
+    path: "/jobs/new",
+    state: { oldJobId: route.params.id, jobSnapshotId: job.value.snapshot },
+  });
+}
 
 async function deleteJob() {
   try {
-    await api.deleteItem('jobs', route.params.id)
-    notify.success(`Successfully deleted job ID: ${route.params.id}`)
-    showDeleteDialog.value = false
-    router.back()
-  } catch(err) {
-    notify.error(err.response.data.message);
+    await api.deleteItem("jobs", route.params.id);
+    notify.success(`Deleted job ${route.params.id}`);
+    showDeleteDialog.value = false;
+    router.back();
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Delete failed");
   }
 }
 
-function reRunJob() {
-  router.push({
-    path: '/jobs/new',
-    state: { oldJobId: route.params.id, jobSnapshotId: job.value.snapshot } 
-  })
+function formatDate(dateString) {
+  if (!dateString) return "-";
+  const options = {
+    year: "2-digit",
+    month: "2-digit",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  };
+  return new Date(dateString).toLocaleString("en-US", options);
 }
-
-const artifactsUsed = computed(() => {
-  return Object.entries(job.value?.artifactValues ?? {}).map(([key, value]) => ({
-    artifactParamName: key,
-    id: value.id,
-    snapshotId: value.snapshotId,
-  }))
-})
-
 </script>
 
 <style scoped>
-  :deep(.q-table .code-cell .cm-editor),
-  :deep(.q-table .code-cell .cm-content),
-  :deep(.q-table .code-cell .cm-scroller),
-  :deep(.q-table .code-cell .cm-line) {
-    cursor: text !important;
-  }
+:deep(.q-table .code-cell .cm-editor),
+:deep(.q-table .code-cell .cm-content),
+:deep(.q-table .code-cell .cm-scroller),
+:deep(.q-table .code-cell .cm-line) {
+  cursor: text !important;
+}
 
-  :deep(.q-table .code-cell .cm-gutters) {
-    cursor: default !important;
-  }
-</style>
+:deep(.q-table .code-cell .cm-gutters) {
+  cursor: default !important;
+}
+</style>
\ No newline at end of file
diff --git a/src/frontend/src/views/JobsView.vue b/src/frontend/src/views/JobsView.vue
index a6e4ba8a4..f4053bff0 100644
--- a/src/frontend/src/views/JobsView.vue
+++ b/src/frontend/src/views/JobsView.vue
@@ -1,184 +1,225 @@
 <template>
   <PageTitle
-    v-if="route.name !== 'experimentJobs'"
-    :title="title" 
+    v-if="!embedded"
+    :title="title"
+    conceptType="job"
+    caption="Runs of Entrypoints"
   />
-  <TableComponent 
+  <div v-else class="q-mt-lg"></div>
+
+  <TableComponent
+    ref="tableRef"
     :rows="jobs"
-    :columns="columns"
-    title="Jobs"
+    :columns="computedColumns"
+    :title="embedded ? 'Experiment Jobs' : ''"
     v-model:selected="selected"
-    @request="getJobs"
-    @delete="showDeleteDialog = true"
-    ref="tableRef"
-    @editTags="(row) => { editObjTags = row; showTagsDialog = true }"
-    @create="pushToJobRoute"
     :hideOpenBtn="true"
     @open="openTab => (openTab
       ? openWindow.open(`/jobs/${selected[0].id}`, '_blank')
       : router.push(`/jobs/${selected[0].id}`)
     )"
     :loading="isLoading"
+    @request="getJobs"
+    @create="pushToJobRoute"
+    @delete="
+      (row) => {
+        selected = [row];
+        showDeleteDialog = true;
+      }
+    "
+    @edit="(row) => router.push(`/jobs/${row.id}`)"
+    @editTags="
+      (row) => {
+        editObjTags = row;
+        showTagsDialog = true;
+      }
+    "
   >
-    <template #body-cell-experiment="props">
-      {{ props.row.experiment.name }}
-    </template>
-    <template #body-cell-entrypoint="props">
-      {{ props.row.entrypoint.name }}
-    </template>
-    <template #body-cell-queue="props">
-      {{ props.row.queue.name }}
-    </template>
     <template #body-cell-status="props">
       <JobStatus :status="props.row.status" />
     </template>
   </TableComponent>
 
-  <DeleteDialog 
+  <DeleteDialog
     v-model="showDeleteDialog"
     @submit="deleteJob"
     type="Job"
     :name="selected[0]?.description || `Job ID: ${selected[0]?.id}`"
   />
-
-  <ArtifactsDialog 
-    v-model="showArtifactsDialog"
-    :editArtifact="''"
-    :expId="route.params.id"
-    :jobId="jobId"
-  />
-
-  <AssignTagsDialog 
+  <AssignTagsDialog
     v-model="showTagsDialog"
     :editObj="editObjTags"
     type="jobs"
     @refreshTable="tableRef.refreshTable()"
   />
-
 </template>
 
 <script setup>
-  import TableComponent from '@/components/TableComponent.vue'
-  import { ref } from 'vue'
-  import { useRoute, useRouter } from 'vue-router'
-  import PageTitle from '@/components/PageTitle.vue'
-  import * as api from '@/services/dataApi'
-  import * as notify from '../notify'
-  import DeleteDialog from '@/dialogs/DeleteDialog.vue'
-  import ArtifactsDialog from '@/dialogs/ArtifactsDialog.vue'
-  import AssignTagsDialog from '@/dialogs/AssignTagsDialog.vue'
-  import JobStatus from '@/components/JobStatus.vue'
-
-  const openWindow = window
-  const route = useRoute()
-  const router = useRouter()
-
-  const columns = [
-    { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: true, },
-    { name: 'entrypoint', label: 'Entrypoint', align: 'left', field: 'entrypoint', sortable: true, },
-    { name: 'queue', label: 'Queue', align: 'left', field: 'queue', sortable: true, },
-    { name: 'description', label: 'Description', align: 'left', field: 'description', sortable: true, style: 'width: 275px',},
-    { name: 'status', label: 'Status', align: 'left', field: 'status', sortable: true },
-    { name: 'tags', label: 'Tags', align: 'left', field: 'tags', sortable: false, },
-  ]
-
-  if(route.name === 'allJobs') {
-    columns.splice(2, 0, 
-      { name: 'experiment', label: 'Experiment', align: 'left', field: 'experiment', sortable: true, }
-    )
+import { ref, computed } from "vue"; 
+import { useRoute, useRouter } from "vue-router";
+import TableComponent from "@/components/table/TableComponent.vue";
+import PageTitle from "@/components/PageTitle.vue";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
+import DeleteDialog from "@/dialogs/DeleteDialog.vue";
+import AssignTagsDialog from "@/dialogs/AssignTagsDialog.vue";
+import JobStatus from "@/components/JobStatus.vue";
+import BadgeIcon from "@/components/table/cells/BadgeIcon.vue";
+
+const openWindow = window
+const route = useRoute();
+const router = useRouter();
+
+const title = ref("Jobs");
+const jobs = ref([]);
+const isLoading = ref(false);
+const selected = ref([]); 
+const showDeleteDialog = ref(false);
+const showTagsDialog = ref(false);
+const editObjTags = ref({});
+const tableRef = ref(null);
+
+if (route.name === "experimentJobs") {
+  getExperiment();
+}
+
+async function getExperiment() {
+  try {
+    const res = await api.getItem("experiments", route.params.id);
+    title.value = `${res.data.name} Jobs`;
+  } catch (err) {
+    console.error("Failed to fetch experiment info", err);
   }
-
-  const artifactColumns = [
-    { name: 'id', label: 'id', align: 'left', field: 'id', sortable: true, },
-  ]
-
-  const selected = ref([])
-
-  const title = ref('')
-
-  if(route.name === 'experimentJobs') {
-    getExperiment()
-  } else if(route.name === 'allJobs') {
-    title.value = 'Jobs'
+}
+
+const props = defineProps({
+  embedded: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const computedColumns = computed(() => {
+  const baseCols = [
+    {
+      name: "id",
+      label: "Job ID",
+      field: "id",
+      align: "left",
+      styleType: "icon-badge",
+      conceptType: "job",
+      showIcon: true,
+      size: "md",
+      uppercase: false,
+      formatLabel: "Job #{label}",
+      sortable: true,
+    },
+    {
+      name: "description",
+      label: "Description",
+      field: "description",
+      align: "left",
+      styleType: "long-text",
+      maxLength: 150,
+      maxWidth: "300px",
+      useQuotes: true,
+      textType: "capitalize",
+      sortable: true,
+    },
+    {
+      name: "entrypoint",
+      label: "Entrypoint",
+      field: "entrypoint",
+      styleType: "icon-badge",
+      conceptType: "entrypoint",
+      align: "left",
+      sortable: true,
+      clickable: true, 
+    },
+    {
+      name: "queue",
+      label: "Queue",
+      field: "queue",
+      styleType: "icon-badge",
+      conceptType: "queue",
+      align: "left",
+      sortable: true,
+      clickable: true,
+    },
+    {
+      name: "status",
+      label: "Status",
+      field: "status",
+      align: "left",
+      sortable: true,
+    },
+    {
+      name: "tags",
+      label: "Tags",
+      field: "tags",
+      styleType: "tag-list",
+      align: "left",
+    },
+  ];
+
+  if (route.name === "allJobs") {
+    baseCols.splice(3, 0, {
+      name: "experiment",
+      label: "Experiment",
+      field: "experiment",
+      styleType: "icon-badge",
+      conceptType: "experiment",
+      align: "left",
+      sortable: true,
+      clickable: true,
+    });
   }
+  return baseCols;
+});
 
-  async function getExperiment() {
-    try {
-      const res = await api.getItem('experiments', route.params.id)
-      title.value = `${res.data.name} Jobs`
-    } catch(err) {
-      console.log('err = ', err)
-    } 
-  }
-
-  const jobs = ref([])
-
-  const isLoading = ref(false)
-
-  const tableRef = ref(null)
-
+// API functions
 async function getJobs(pagination, showDrafts) {
-    isLoading.value = true
-    const minLoadTimePromise = new Promise(resolve => setTimeout(resolve, 300));
-
-    // default sort by id descending
-    if(!pagination.sortBy) {
-      pagination.sortBy = 'id'
-      pagination.descending = true
-    }
-    try {
-      let res
-      if(route.name === 'experimentJobs') {
-        [res] = await Promise.all([
-          api.getJobs(route.params.id, pagination, showDrafts),
-          minLoadTimePromise
-        ]);
-      } else if(route.name === 'allJobs') {
-        [res] = await Promise.all([
-          api.getData('jobs', pagination, false),
-          minLoadTimePromise
-        ]);
-      } else {
-        await minLoadTimePromise;
-        return;
-      }
-      console.log('jobs res = ', res)
-      jobs.value = res.data.data
-      tableRef.value.updateTotalRows(res.data.totalNumResults)
-    } catch(err) {
-      console.log('err = ', err)
-      notify.error(err.response.data.message)
-    } finally {
-      isLoading.value = false;
-    }
+  isLoading.value = true;
+  
+  if (!pagination.sortBy) {
+    pagination.sortBy = 'id';
+    pagination.descending = true;
   }
 
-  const showDeleteDialog = ref(false)
-  const showArtifactsDialog = ref(false)
-  const showTagsDialog = ref(false)
-  const editObjTags = ref({})
-
-  const jobId = ref('')
-
-  async function deleteJob() {
-    try {
-      const jobId = JSON.parse(JSON.stringify(selected.value[0].id))
-      await api.deleteItem('jobs', selected.value[0].id)
-      notify.success(`Successfully deleted job ${jobId}`)
-      showDeleteDialog.value = false
-      selected.value = []
-      tableRef.value.refreshTable()
-    } catch(err) {
-      notify.error(err.response.data.message);
+  try {
+    let res;
+    if (route.name === "experimentJobs") {
+      res = await api.getJobs(route.params.id, pagination, showDrafts);
+    } else {
+      res = await api.getData("jobs", pagination, false);
     }
+    jobs.value = res.data.data;
+    tableRef.value.updateTotalRows(res.data.totalNumResults);
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Failed to fetch jobs");
+  } finally {
+    isLoading.value = false;
   }
-
-  function pushToJobRoute() {
-    if(route.name === 'experimentJobs') {
-      router.push(`/experiments/${route.params.id}/jobs/new`)
-    } else if(route.name === 'allJobs') {
-      router.push('/jobs/new')
-    }
+}
+
+async function deleteJob() {
+  try {
+    const id = selected.value[0].id;
+    await api.deleteItem("jobs", id);
+    notify.success(`Deleted job ${id}`);
+    showDeleteDialog.value = false;
+    selected.value = [];
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message);
   }
-
+}
+
+function pushToJobRoute() {
+  const path =
+    route.name === "experimentJobs"
+      ? `/experiments/${route.params.id}/jobs/new`
+      : "/jobs/new";
+  router.push(path);
+}
 </script>
\ No newline at end of file
diff --git a/src/frontend/src/views/ModelsView.vue b/src/frontend/src/views/ModelsView.vue
index 82708b818..5414dc707 100644
--- a/src/frontend/src/views/ModelsView.vue
+++ b/src/frontend/src/views/ModelsView.vue
@@ -3,7 +3,6 @@
   <TableComponent
     :rows="models"
     :columns="columns"
-    title="Models"
     v-model:selected="selected"
     @edit="editing = true; showAddEditDialog = true"
     @delete="showDeleteDialog = true"
diff --git a/src/frontend/src/views/PluginParamForm.vue b/src/frontend/src/views/PluginParamForm.vue
index 1261ff6fc..7a5f0ec6e 100644
--- a/src/frontend/src/views/PluginParamForm.vue
+++ b/src/frontend/src/views/PluginParamForm.vue
@@ -1,6 +1,9 @@
 <template>
   <div class="row items-center justify-between">
-      <PageTitle :title="route.params.id === 'new' ? 'Create Plugin Parameter' : copyAtEditStart?.name" />
+      <PageTitle 
+        :subtitle="route.params.id === 'new' ? 'Create Plugin Parameter' : copyAtEditStart?.name"
+        conceptType="parameterType" 
+      />
       <q-btn 
         v-if="route.params.id !== 'new'"
         color="negative"
@@ -277,6 +280,8 @@ const basicInfoForm = ref()
 
 async function submit() {
   basicInfoForm.value.validate().then(success => {
+    if (!success) return; 
+    
     if(jsonError.value) return
     if(route.params.id === 'new') {
       createPluginParamType()
diff --git a/src/frontend/src/views/PluginParamsView.vue b/src/frontend/src/views/PluginParamsView.vue
index 0cc52e2f6..4f09541ca 100644
--- a/src/frontend/src/views/PluginParamsView.vue
+++ b/src/frontend/src/views/PluginParamsView.vue
@@ -1,34 +1,40 @@
 <template>
-  <PageTitle title="Plugin Parameters" />
+  <PageTitle
+    title="Plugin Parameter Types"
+    caption="Used for type validation in Entrypoints and Artifacts"
+    conceptType="parameterType"
+  />
+
   <TableComponent
+    ref="tableRef"
     :rows="pluginParameterTypes"
-    :columns="columns"
-    title="Plugin Parameter Types"
+    :columns="computedColumns"
     v-model:selected="selected"
     @open="openTab => (openTab
       ? openWindow.open(`/pluginParams/${selected[0].id}`, '_blank')
       : router.push(`/pluginParams/${selected[0].id}`)
     )"
-    @delete="showDeleteDialog = true"
     @request="getPluginParameterTypes"
-    ref="tableRef"
-    :hideToggleDraft="true"
     @editTags="(row) => { editObjTags = row; showTagsDialog = true }"
     @create="router.push('/pluginParams/new')"
     :loading="isLoading"
-  >
-    <template #body-cell-group="props">
-      <div>{{ props.row.group.name }}</div>
-    </template>
-  </TableComponent>
+    :hideToggleDraft="true"
+    @delete="
+      (row) => {
+        selected = [row];
+        showDeleteDialog = true;
+      }
+    "
+  />
 
-  <DeleteDialog 
+  <DeleteDialog
     v-model="showDeleteDialog"
-    @submit="deletePlugin"
+    @submit="deletePluginParamType"
     type="Plugin Parameter Type"
-    :name="selected.length ? selected[0].name : ''"
+    :name="selected[0]?.name || ''"
   />
-  <AssignTagsDialog 
+
+  <AssignTagsDialog
     v-model="showTagsDialog"
     :editObj="editObjTags"
     type="pluginParameterTypes"
@@ -37,75 +43,125 @@
 </template>
 
 <script setup>
-  import TableComponent from '@/components/TableComponent.vue'
-  import DeleteDialog from '@/dialogs/DeleteDialog.vue'
-  import { ref, watch } from 'vue'
-  import * as api from '@/services/dataApi'
-  import * as notify from '../notify'
-  import PageTitle from '@/components/PageTitle.vue'
-  import AssignTagsDialog from '@/dialogs/AssignTagsDialog.vue'
-  import { useRouter } from 'vue-router'
-
-  const openWindow = window
-  const router = useRouter()
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
+import TableComponent from "@/components/table/TableComponent.vue";
+import PageTitle from "@/components/PageTitle.vue";
+import DeleteDialog from "@/dialogs/DeleteDialog.vue";
+import AssignTagsDialog from "@/dialogs/AssignTagsDialog.vue";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
 
-  const selected = ref([])
-  const showAddDialog = ref(false)
-  const showDeleteDialog = ref(false)
-  const showTagsDialog = ref(false)
-  const editObjTags = ref({})
+const router = useRouter();
+const tableRef = ref(null);
+const openWindow = window;
 
-  const pluginParameterTypes = ref([])
+// State
+const pluginParameterTypes = ref([]);
+const isLoading = ref(false);
+const selected = ref([]);
+const showDeleteDialog = ref(false);
+const showTagsDialog = ref(false);
+const editObjTags = ref({});
 
-  const isLoading = ref(false)
+// Columns
+const computedColumns = [
+  {
+    name: "id",
+    label: "ID",
+    field: "id",
+    align: "left",
+    styleType: "icon-id",
+    conceptType: "parameterType",
+    includeIcon: true,
+  },
+  {
+    name: "name",
+    label: "Name",
+    field: "name",
+    align: "left",
+    styleType: "resource-name",
+    conceptType: "parameterType",
+    maxWidth: "200px",
+    sortable: true,
+  },
+  {
+    name: "description",
+    label: "Description",
+    field: "description",
+    align: "left",
+    styleType: "long-text",
+    maxWidth: "300px",
+    maxLength: 100,
+    sortable: true,
+  },
+  {
+    name: "createdOn",
+    label: "Created On",
+    field: "createdOn",
+    align: "left",
+    styleType: "date",
+    textColor: "text-grey-10",
+    sortable: true,
+  },
+  {
+    name: "lastModifiedOn",
+    label: "Last Modified",
+    field: "lastModifiedOn",
+    align: "left",
+    styleType: "date",
+    textColor: "text-grey-10",
+  },
+  {
+    name: "group",
+    label: "Group",
+    field: "group",
+    align: "left",
+    styleType: "icon-badge",
+    conceptType: "group",
+  },
+  {
+    name: "tags",
+    label: "Tags",
+    field: "tags",
+    align: "left",
+    styleType: "tag-list",
+  },
 
-  const editing = ref(false)
+];
 
-  watch(showAddDialog, (newVal) => {
-  if(!newVal) editing.value = false
-  })
+// Actions
+async function getPluginParameterTypes(pagination) {
+  isLoading.value = true;
+  try {
+    const minLoadTimePromise = new Promise((resolve) =>
+      setTimeout(resolve, 300),
+    );
 
-  async function getPluginParameterTypes(pagination) {
-    isLoading.value = true
-    const minLoadTimePromise = new Promise(resolve => setTimeout(resolve, 300)); 
+    const [res] = await Promise.all([
+      api.getData("pluginParameterTypes", pagination),
+      minLoadTimePromise,
+    ]);
 
-    try {
-      const [res] = await Promise.all([
-        api.getData('pluginParameterTypes', pagination),
-        minLoadTimePromise
-      ]);
-        
-      pluginParameterTypes.value = res.data.data;
-      tableRef.value.updateTotalRows(res.data.totalNumResults);
-    } catch(err) {
-      console.log('err = ', err);
-      notify.error(err.response.data.message);
-    } finally {
-      isLoading.value = false;
-    }
+    pluginParameterTypes.value = res.data.data;
+    tableRef.value.updateTotalRows(res.data.totalNumResults);
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Failed to fetch parameters");
+  } finally {
+    isLoading.value = false;
   }
+}
 
-  const columns = [
-    { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: false },
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true, },
-    { name: 'description', label: 'Description', field: 'description', align: 'left', sortable: true },
-    { name: 'createdOn', label: 'Created On', align: 'left', field: 'createdOn', sortable: true },
-    { name: 'lastModifiedOn', label: 'Last Modified', align: 'left', field: 'lastModifiedOn', sortable: true },
-    { name: 'tags', label: 'Tags', align: 'left', sortable: false },
-  ]
-
-  async function deletePlugin() {
-    try {
-      await api.deleteItem('pluginParameterTypes', selected.value[0].id)
-      notify.success(`Successfully deleted '${selected.value[0].name}'`)
-      showDeleteDialog.value = false
-      selected.value = []
-      tableRef.value.refreshTable()
-    } catch(err) {
-      notify.error(err.response.data.message);
-    }
+async function deletePluginParamType() {
+  try {
+    const id = selected.value[0].id;
+    await api.deleteItem("pluginParameterTypes", id);
+    notify.success(`Successfully deleted '${selected.value[0].name}'`);
+    showDeleteDialog.value = false;
+    selected.value = [];
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Delete failed");
   }
-
-  const tableRef = ref(null)
-
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/src/frontend/src/views/PluginsView.vue b/src/frontend/src/views/PluginsView.vue
index 2b87d7d13..c25c32acb 100644
--- a/src/frontend/src/views/PluginsView.vue
+++ b/src/frontend/src/views/PluginsView.vue
@@ -1,38 +1,45 @@
 <template>
-  <PageTitle title="Plugins" />
+  <PageTitle
+    title="Plugins"
+    caption="Containers for Tasks and Files"
+    conceptType="plugin"
+  />
 
   <TableComponent
+    ref="tableRef"
     :rows="plugins"
-    :columns="columns"
+    :columns="computedColumns"
     title="Plugins"
-    v-model:selected="selected"  
+    v-model:selected="selected"
+    :loading="isLoading"
+    @request="getPlugins"
+    @create="router.push('/plugins/new')"
     @open="openTab => (openTab
       ? openWindow.open(`/plugins/${selected[0].id}`, '_blank')
       : router.push(`/plugins/${selected[0].id}`)
     )"
-    @delete="showDeleteDialog = true"
-    @request="getPlugins"
-    ref="tableRef"
-    @editTags="(row) => { editObjTags = row; showTagsDialog = true }"
-    @create="router.push('/plugins/new')"
-    :loading="isLoading"
-  >
-
-    <template #body-cell-group="props">
-      <div>{{ props.row.group.name }}</div>
-    </template>
-    <template #body-cell-files="props">
-      {{ props.row.files?.length }}
-    </template>
-  </TableComponent>
+    @delete="
+      (row) => {
+        selected = [row];
+        showDeleteDialog = true;
+      }
+    "
+    @editTags="
+      (row) => {
+        editObjTags = row;
+        showTagsDialog = true;
+      }
+    "
+  />
 
-  <DeleteDialog 
+  <DeleteDialog
     v-model="showDeleteDialog"
     @submit="deletePlugin"
     type="Plugin"
-    :name="selected.length ? selected[0].name : ''"
+    :name="selected[0]?.name || ''"
   />
-  <AssignTagsDialog 
+
+  <AssignTagsDialog
     v-model="showTagsDialog"
     :editObj="editObjTags"
     type="plugins"
@@ -41,69 +48,118 @@
 </template>
 
 <script setup>
-  import TableComponent from '@/components/TableComponent.vue'
-  import DeleteDialog from '@/dialogs/DeleteDialog.vue'
-  import { ref } from 'vue'
-  import { useRouter } from 'vue-router'
-  import * as api from '@/services/dataApi'
-  import * as notify from '../notify'
-  import PageTitle from '@/components/PageTitle.vue'
-  import AssignTagsDialog from '@/dialogs/AssignTagsDialog.vue'
-
-  const openWindow = window
-
-  const router = useRouter()
-
-  const selected = ref([])
-
-  const showDeleteDialog = ref(false)
-  const showTagsDialog = ref(false)
-  const editObjTags = ref({})
-
-  const plugins = ref([])
 
-  const isLoading = ref(false)
-
-  async function getPlugins(pagination) {
-    isLoading.value = true
-    const minLoadTimePromise = new Promise(resolve => setTimeout(resolve, 300)); 
-
-    try {
-      const [res] = await Promise.all([
-        api.getData('plugins', pagination),
-        minLoadTimePromise
-      ]);
-      
-      plugins.value = res.data.data;
-      tableRef.value.updateTotalRows(res.data.totalNumResults);
-    } catch(err) {
-      console.log('err = ', err);
-      notify.error(err.response.data.message);
-    } finally {
-      isLoading.value = false;
-    }
+const openWindow = window
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
+import TableComponent from "@/components/table/TableComponent.vue";
+import PageTitle from "@/components/PageTitle.vue";
+import DeleteDialog from "@/dialogs/DeleteDialog.vue";
+import AssignTagsDialog from "@/dialogs/AssignTagsDialog.vue";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
+
+const router = useRouter();
+const tableRef = ref(null);
+
+// State
+const plugins = ref([]);
+const isLoading = ref(false);
+const selected = ref([]);
+const showDeleteDialog = ref(false);
+const showTagsDialog = ref(false);
+const editObjTags = ref({});
+
+// Columns
+const computedColumns = [
+  {
+    name: "id",
+    label: "ID",
+    field: "id",
+    align: "left",
+    styleType: "icon-id",
+    conceptType: "plugin",
+    includeIcon: true,
+  },
+  {
+    name: "name",
+    label: "Plugin Name",
+    field: "name",
+    align: "left",
+    styleType: "resource-name",
+    conceptType: "plugin",
+    maxWidth: "250px",
+    sortable: true,
+  },
+  {
+    name: "description",
+    label: "Description",
+    field: "description",
+    align: "left",
+    styleType: "long-text",
+    maxWidth: "300px",
+    maxLength: 100,
+    useQuotes: true,
+    sortable: true,
+  },
+  {
+    name: "files",
+    label: "Files",
+    field: (row) => row.files?.length || 0,
+    align: "left",
+    styleType: "icon-badge",
+    conceptType: "file",
+    formatLabel: "{label} Files",
+  },
+  {
+    name: "group",
+    label: "Group",
+    field: "group",
+    align: "left",
+    styleType: "icon-badge",
+    conceptType: "group",
+  },
+  {
+    name: "tags",
+    label: "Tags",
+    field: "tags",
+    align: "left",
+    styleType: "tag-list",
+  },
+];
+
+// API Functions
+async function getPlugins(pagination) {
+  isLoading.value = true;
+  try {
+    const minLoadTimePromise = new Promise((resolve) =>
+      setTimeout(resolve, 300),
+    );
+
+    const [res] = await Promise.all([
+      api.getData("plugins", pagination),
+      minLoadTimePromise,
+    ]);
+
+    plugins.value = res.data.data;
+    tableRef.value.updateTotalRows(res.data.totalNumResults);
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Failed to fetch plugins");
+  } finally {
+    isLoading.value = false;
   }
-
-  const columns = [
-    { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: false, },
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
-    { name: 'description', label: 'Description', field: 'description',align: 'left', sortable: true },
-    { name: 'files', label: 'Number of Files', align: 'left', field: 'files', sortable: false },
-    { name: 'tags', label: 'Tags', align: 'left', sortable: false },
-  ]
-
-  async function deletePlugin() {
-    try {
-      await api.deleteItem('plugins', selected.value[0].id)
-      notify.success(`Successfully deleted '${selected.value[0].name}'`)
-      showDeleteDialog.value = false
-      selected.value = []
-      tableRef.value.refreshTable()
-    } catch(err) {
-      notify.error(err.response.data.message);
-    }
+}
+
+async function deletePlugin() {
+  try {
+    const id = selected.value[0].id;
+    await api.deleteItem("plugins", id);
+    notify.success(`Successfully deleted '${selected.value[0].name}'`);
+    showDeleteDialog.value = false;
+    selected.value = [];
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Failed to delete plugin");
   }
-
-  const tableRef = ref(null)
-
-</script>
\ No newline at end of file
+}
+</script>
diff --git a/src/frontend/src/views/QueuesFormDraftView.vue b/src/frontend/src/views/QueuesFormDraftView.vue
index 6b66f246d..9db872aed 100644
--- a/src/frontend/src/views/QueuesFormDraftView.vue
+++ b/src/frontend/src/views/QueuesFormDraftView.vue
@@ -2,7 +2,7 @@
   <div class="row items-center justify-between">
     <div class="row items-center">
       <PageTitle 
-        :title="title"
+        :title="title" 
         :draftLabel="resourceDraft ? 'Resource Draft' : 'Draft'"
       />
     </div>
diff --git a/src/frontend/src/views/QueuesFormView.vue b/src/frontend/src/views/QueuesFormView.vue
index 4d8c72be1..08193806a 100644
--- a/src/frontend/src/views/QueuesFormView.vue
+++ b/src/frontend/src/views/QueuesFormView.vue
@@ -1,9 +1,12 @@
 <template>
   <div class="row items-center justify-between">
     <div class="row items-center">
-      <PageTitle :title="route.params.id === 'new' ? 'Create Queue' : copyAtEditStart?.name" />
-        <q-chip
-          v-if="route.params.id !== 'new'"
+      <PageTitle 
+        :subtitle="pageSubtitle" 
+        conceptType="queue" 
+      />
+      <q-chip
+        v-if="route.params.id !== 'new'"
           class="q-ml-md"
           :color="`${darkMode ? 'grey-9' : ''}`"
           label="View History"
@@ -148,6 +151,22 @@ const ORIGINAL_COPY = {
   description: ''
 }
 
+const pageSubtitle = computed(() => {
+  if (route.params.id === 'new') {
+    return 'Create Queue'
+  }
+  
+  if (store.showRightDrawer && store.selectedSnapshot) {
+    return `${queue.value?.name || 'Loading...'} (Snapshot ${store.selectedSnapshot.snapshot})`
+  }
+  
+  if (route.query.snapshotId) {
+    return `${queue.value?.name || 'Loading...'} (Snapshot ${route.query.snapshotId})`
+  }
+  
+  return copyAtEditStart.value?.name || queue.value?.name || 'Loading...'
+})
+
 const copyAtEditStart = ref()
 
 const valuesChangedFromEditStart = computed(() => {
diff --git a/src/frontend/src/views/QueuesView.vue b/src/frontend/src/views/QueuesView.vue
index 2a717f938..a4a50b11a 100644
--- a/src/frontend/src/views/QueuesView.vue
+++ b/src/frontend/src/views/QueuesView.vue
@@ -1,19 +1,33 @@
 <template>
-  <PageTitle title="Queues" />
-  <TableComponent 
+  <PageTitle 
+    title="Queues" 
+    conceptType="queue" 
+  />
+
+  <TableComponent
+    ref="tableRef"
     :rows="queues"
-    :columns="showDrafts ? draftColumns : columns"
-    title="Queues"
-    @delete="showDeleteDialog = true"
-    @open="openQueue($event)"
+    :columns="showDrafts ? computedDraftColumns : computedColumns"
     v-model:selected="selected"
     v-model:showDrafts="showDrafts"
-    @request="getQueues"
-    ref="tableRef"
     :showToggleDraft="true"
-    @editTags="(row) => { editObjTags = row; showTagsDialog = true }"
-    @create="router.push('/queues/new')"
     :loading="isLoading"
+    @request="getQueues"
+    @create="router.push('/queues/new')"
+    @edit="(row) => openQueue(false, row)"
+    @open="(openTab) => openQueue(openTab)"
+    @delete="
+      (row) => {
+        selected = [row];
+        showDeleteDialog = true;
+      }
+    "
+    @editTags="
+      (row) => {
+        editObjTags = row;
+        showTagsDialog = true;
+      }
+    "
   >
     <template #body-cell-hasDraft="props">
       <q-btn
@@ -26,13 +40,14 @@
     </template>
   </TableComponent>
 
-  <DeleteDialog 
+  <DeleteDialog
     v-model="showDeleteDialog"
     @submit="deleteQueue"
     type="Queue"
-    :name="selected.length ? selected[0].name : ''"
+    :name="selected[0]?.name || ''"
   />
-  <AssignTagsDialog 
+
+  <AssignTagsDialog
     v-model="showTagsDialog"
     :editObj="editObjTags"
     type="queues"
@@ -41,92 +56,191 @@
 </template>
 
 <script setup>
-  import * as api from '@/services/dataApi'
-  import { ref } from 'vue'
-  import * as notify from '../notify'
-  import TableComponent from '@/components/TableComponent.vue'
-  import DeleteDialog from '@/dialogs/DeleteDialog.vue'
-  import AssignTagsDialog from '@/dialogs/AssignTagsDialog.vue'
-  import PageTitle from '@/components/PageTitle.vue'
-  import { useRouter } from 'vue-router'
-
-  const router = useRouter()
-
-  const showDeleteDialog = ref(false)
-  const showTagsDialog = ref(false)
-
-  const queues = ref([])
-
-  const isLoading = ref(false)
-
-  const tableRef = ref(null)
-
-  const columns = [
-    { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: false },
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
-    { name: 'description', label: 'Description', align: 'left', field: 'description', sortable: true },
-    { name: 'hasDraft', label: 'hasDraft', align: 'left', field: 'hasDraft', sortable: false },
-    { name: 'createdOn', label: 'Created On', align: 'left', field: 'createdOn', sortable: true },
-    { name: 'lastModifiedOn', label: 'Last Modified', align: 'left', field: 'lastModifiedOn', sortable: true },
-    { name: 'tags', label: 'Tags', align: 'left', field: 'tags', sortable: false },
-  ]
-
-  const draftColumns = [
-    { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: false },
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
-    { name: 'description', label: 'Description', align: 'left', field: 'description', sortable: true },
-    { name: 'createdOn', label: 'Created On', align: 'left', field: 'createdOn', sortable: true },
-    { name: 'lastModifiedOn', label: 'Last Modified', align: 'left', field: 'lastModifiedOn', sortable: true },
-  ]
-
-  const selected = ref([])
-  const showDrafts = ref(false)
-
-  async function getQueues(pagination, showDrafts) {
-    isLoading.value = true
-    const minLoadTimePromise = new Promise(resolve => setTimeout(resolve, 300)); 
-
-    try {
-      const [res] = await Promise.all([
-        api.getData('queues', pagination, showDrafts),
-        minLoadTimePromise
-      ]);
-        
-      queues.value = res.data.data;
-      tableRef.value.updateTotalRows(res.data.totalNumResults);
-    } catch(err) {
-      console.log('err = ', err);
-      notify.error(err.response.data.message);
-    } finally {
-      isLoading.value = false;
-    }
-  }
 
-  async function deleteQueue() {
-    try {
-      if(Object.hasOwn(selected.value[0], 'hasDraft')) {
-        await api.deleteItem('queues', selected.value[0].id)
-      } else {
-        await api.deleteDraft('queues', selected.value[0].id)
-      }
-      notify.success(`Successfully deleted Queue '${selected.value[0].name}'`)
-      showDeleteDialog.value = false
-      selected.value = []
-      tableRef.value.refreshTable()
-    } catch(err) {
-      notify.error(err.response.data.message);
+import { ref, computed } from "vue";
+import { useRouter } from "vue-router";
+import TableComponent from "@/components/table/TableComponent.vue";
+import PageTitle from "@/components/PageTitle.vue";
+import DeleteDialog from "@/dialogs/DeleteDialog.vue";
+import AssignTagsDialog from "@/dialogs/AssignTagsDialog.vue";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
+
+const router = useRouter();
+const tableRef = ref(null);
+const openWindow = window;
+
+const queues = ref([]);
+const isLoading = ref(false);
+const selected = ref([]);
+const showDrafts = ref(false);
+const showDeleteDialog = ref(false);
+const showTagsDialog = ref(false);
+const editObjTags = ref({});
+
+const computedColumns =  [
+  {
+    name: "id",
+    label: "ID",
+    field: "id",
+    align: "left",
+    styleType: "icon-id",
+    conceptType: "queue",
+    includeIcon: true,
+    sortable: false,
+  },
+  {
+    name: "name",
+    label: "Name",
+    field: "name",
+    align: "left",
+    styleType: "resource-name",
+    conceptType: "queue",
+    textType: "none",
+    sortable: true,
+  },
+  {
+    name: "description",
+    label: "Description",
+    field: "description",
+    align: "left",
+    styleType: "long-text",
+    maxWidth: "300px",
+    maxLength: 100,
+    useQuotes: false,
+    sortable: true,
+  },
+  {
+    name: "hasDraft",
+    label: "Has Draft",
+    field: "hasDraft",
+    align: "left",
+    sortable: false,
+  },
+  {
+    name: "createdOn",
+    label: "Created On",
+    field: "createdOn",
+    align: "left",
+    styleType: "date",
+    textColor: "text-grey-10",
+    sortable: true,
+  },
+  {
+    name: "lastModifiedOn",
+    label: "Last Modified",
+    field: "lastModifiedOn",
+    align: "left",
+    styleType: "date",
+    textColor: "text-grey-10",
+    sortable: false,
+  },
+  {
+    name: "tags",
+    label: "Tags",
+    field: "tags",
+    align: "left",
+    styleType: "tag-list",
+    sortable: false,
+  },
+];
+
+const computedDraftColumns = [
+  {
+    name: "id",
+    label: "ID",
+    field: "id",
+    align: "left",
+    styleType: "icon-id",
+    conceptType: "queue",
+    includeIcon: true,
+    sortable: false,
+  },
+  {
+    name: "name",
+    label: "Name",
+    field: "name",
+    align: "left",
+    styleType: "resource-name",
+    conceptType: "queue",
+    sortable: true,
+  },
+  {
+    name: "description",
+    label: "Description",
+    field: "description",
+    align: "left",
+    styleType: "long-text",
+    maxWidth: "300px",
+    maxLength: 100,
+    useQuotes: false,
+    sortable: true,
+  },
+  {
+    name: "createdOn",
+    label: "Created On",
+    field: "createdOn",
+    align: "left",
+    sortable: true,
+    styleType: "date",
+  },
+  {
+    name: "lastModifiedOn",
+    label: "Last Modified",
+    field: "lastModifiedOn",
+    align: "left",
+    sortable: true,
+    styleType: "date",
+  },
+];
+
+async function getQueues(pagination, showDraftsVal) {
+  isLoading.value = true;
+  const minLoadTimePromise = new Promise((resolve) => setTimeout(resolve, 300));
+
+  try {
+    const [res] = await Promise.all([
+      api.getData("queues", pagination, showDraftsVal),
+      minLoadTimePromise,
+    ]);
+
+    queues.value = res.data.data;
+    tableRef.value.updateTotalRows(res.data.totalNumResults);
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Failed to fetch queues");
+  } finally {
+    isLoading.value = false;
+  }
+}
+
+async function deleteQueue() {
+  try {
+    const id = selected.value[0].id;
+    
+    if (Object.hasOwn(selected.value[0], "hasDraft")) {
+      await api.deleteItem("queues", id);
+    } else {
+      await api.deleteDraft("queues", id);
     }
+    
+    notify.success(`Successfully deleted '${selected.value[0].name}'`);
+    showDeleteDialog.value = false;
+    selected.value = [];
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Failed to delete queue");
   }
+}
 
-  const editObjTags = ref({})
+function openQueue(openTab, row) {
+  const target = row || selected.value[0];
+  if (!target) return;
 
-  function openQueue(openTab) {
-    const url = selected.value[0].payload
-      ? `/queues/${selected.value[0].id}/draft`
-      : `/queues/${selected.value[0].id}`
-
-    if(openTab) window.open(url, '_blank', 'noopener,noreferrer')
-    else router.push(url)
-  }
+  const url = target.payload
+    ? `/queues/${target.id}/draft`
+    : `/queues/${target.id}`;
 
-</script>
+  if (openTab) openWindow.open(url, "_blank", "noopener,noreferrer");
+  else router.push(url);
+}
+</script>
\ No newline at end of file
diff --git a/src/frontend/src/views/TagsView.vue b/src/frontend/src/views/TagsView.vue
index 10779d97a..915d8dfa7 100644
--- a/src/frontend/src/views/TagsView.vue
+++ b/src/frontend/src/views/TagsView.vue
@@ -1,129 +1,165 @@
 <template>
-  <PageTitle title="Tags" />
-  <TableComponent 
+  <PageTitle title="Tags" conceptType="tag" />
+
+  <TableComponent
+    ref="tableRef"
     :rows="tags"
-    :columns="columns"
+    :columns="computedColumns"
     title="Tags"
-    @delete="showDeleteDialog = true"
-    @edit="editing = true; showAddDialog = true"
     v-model:selected="selected"
+    :loading="isLoading"
+    :hideToggleDraft="true"
     @request="getTags"
-    ref="tableRef"
     @create="showAddDialog = true"
-    :loading="isLoading"
-  >
-    <template #body-cell-name="props">
-      <q-chip color="primary" text-color="white">
-        {{ props.row.name }}
-      </q-chip>
-    </template>
-  </TableComponent>
+    @edit="(row) => {
+      selected = [row];
+      editing = true;
+      showAddDialog = true;
+    }"
+    @delete="
+      (row) => {
+        selected = [row];
+        showDeleteDialog = true;
+      }
+    "
+  />
 
-  <AddTagsDialog 
+  <AddTagsDialog
     v-model="showAddDialog"
     @addTag="addTag"
     @updateTag="updateTag"
     :editTag="selected.length && editing ? selected[0] : ''"
   />
-  <DeleteDialog 
+
+  <DeleteDialog
     v-model="showDeleteDialog"
     @submit="deleteTag"
     type="Tag"
-    :name="selected.length ? selected[0].name : ''"
+    :name="selected[0]?.name || ''"
   />
 </template>
 
 <script setup>
-  import * as api from '@/services/dataApi'
-  import { ref, watch } from 'vue'
-  import * as notify from '../notify'
-  import TableComponent from '@/components/TableComponent.vue'
-  import AddTagsDialog from '@/dialogs/AddTagsDialog.vue'
-  import DeleteDialog from '@/dialogs/DeleteDialog.vue'
-  import PageTitle from '@/components/PageTitle.vue'
-  import { useLoginStore } from '@/stores/LoginStore'
-
-  const store = useLoginStore()
-
-  const showAddDialog = ref(false)
-  const showDeleteDialog = ref(false)
-
-  const tags = ref([])
-
-  const isLoading = ref(false)
-
-  const tableRef = ref(null)
-
-  const columns = [
-    { name: 'id', label: 'ID', align: 'left', field: 'id', sortable: false },
-    { name: 'name', label: 'Name', align: 'left', field: 'name', sortable: true },
-    { name: 'createdOn', label: 'Created On', align: 'left', field: 'createdOn', sortable: true },
-    { name: 'lastModifiedOn', label: 'Last Modified', align: 'left', field: 'lastModifiedOn', sortable: true },
-  ]
-
-  async function getTags(pagination) {
-    isLoading.value = true
-    const minLoadTimePromise = new Promise(resolve => setTimeout(resolve, 300)); 
-
-    try {
-      const [res] = await Promise.all([
-        api.getData('tags', pagination),
-        minLoadTimePromise
-      ]);
-      
-      tags.value = res.data.data;
-      tableRef.value.updateTotalRows(res.data.totalNumResults);
-    } catch(err) {
-      console.log('err = ', err);
-      notify.error(err.response.data.message);
-    } finally {
-      isLoading.value = false;
-    }
+import { ref, computed, watch } from "vue";
+import * as api from "@/services/dataApi";
+import * as notify from "../notify";
+
+// Components
+import TableComponent from "@/components/table/TableComponent.vue";
+import PageTitle from "@/components/PageTitle.vue";
+import AddTagsDialog from "@/dialogs/AddTagsDialog.vue";
+import DeleteDialog from "@/dialogs/DeleteDialog.vue";
+
+const tableRef = ref(null);
+const tags = ref([]);
+const isLoading = ref(false);
+const selected = ref([]);
+const editing = ref(false);
+const showAddDialog = ref(false);
+const showDeleteDialog = ref(false);
+
+watch(showAddDialog, (newVal) => {
+  if (!newVal) editing.value = false;
+});
+
+// Columns
+const computedColumns = computed(() => [
+  {
+      name: "id",
+      label: "Tag ID",
+      field: "id",
+      align: "left",
+      styleType: "icon-badge",
+      conceptType: "tag",
+      showIcon: false,
+      size: "md",
+      uppercase: false,
+      formatLabel: "Tag: #{label}",
+      sortable: true,
+    },
+  {
+    name: "name",
+    label: "Tag Name",
+    field: "name",
+    align: "left",
+    styleType: "resource-name",
+    conceptType: "tag",
+    sortable: true,
+  },
+  {
+    name: "createdOn",
+    label: "Created On",
+    field: "createdOn",
+    align: "left",
+    styleType: "date",
+    textColor: "text-grey-10",
+    sortable: true,
+  },
+  {
+    name: "lastModifiedOn",
+    label: "Last Modified",
+    field: "lastModifiedOn",
+    align: "left",
+    styleType: "date",
+    textColor: "text-grey-10",
+    sortable: true,
+  },
+]);
+
+// API Actions
+async function getTags(pagination) {
+  isLoading.value = true;
+  try {
+    const minLoadTimePromise = new Promise((resolve) =>
+      setTimeout(resolve, 300),
+    );
+    const [res] = await Promise.all([
+      api.getData("tags", pagination),
+      minLoadTimePromise,
+    ]);
+
+    tags.value = res.data.data;
+    tableRef.value.updateTotalRows(res.data.totalNumResults);
+  } catch (err) {
+    notify.error(err.response?.data?.message || "Failed to fetch tags");
+  } finally {
+    isLoading.value = false;
   }
-
-  async function addTag(name, group) {
-    try {
-      await api.addItem('tags', {
-        name,
-        group
-      })
-      notify.success(`Successfully created tag '${name}'`)
-      showAddDialog.value = false
-      tableRef.value.refreshTable()
-    } catch(err) {
-      notify.error(err.response.data.message)
-    }
+}
+
+async function addTag(name, group) {
+  try {
+    await api.addItem("tags", { name, group });
+    notify.success(`Successfully created tag '${name}'`);
+    showAddDialog.value = false;
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message);
   }
-
-  async function updateTag(name, id) {
-    try {
-      await api.updateItem('tags', id, { name })
-      notify.success(`Successfully edited Tag '${name}'`)
-      showAddDialog.value = false
-      selected.value = []
-      tableRef.value.refreshTable()
-    } catch(err) {
-      notify.error(err.response.data.message)
-    }
+}
+
+async function updateTag(name, id) {
+  try {
+    await api.updateItem("tags", id, { name });
+    notify.success(`Successfully edited Tag '${name}'`);
+    showAddDialog.value = false;
+    selected.value = [];
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message);
   }
-
-  const selected = ref([])
-  const editing = ref(false)
-
-  watch(showAddDialog, (newVal) => {
-    if(!newVal) editing.value = false
-  })
-
-  async function deleteTag() {
-    try {
-      await api.deleteItem('tags', selected.value[0].id)
-      notify.success(`Successfully deleted Tag '${selected.value[0].name}'`)
-      showDeleteDialog.value = false
-      selected.value = []
-      tableRef.value.refreshTable()
-    } catch(err) {
-      notify.error(err.response.data.message);
-    }
+}
+
+async function deleteTag() {
+  try {
+    const id = selected.value[0].id;
+    await api.deleteItem("tags", id);
+    notify.success(`Successfully deleted Tag '${selected.value[0].name}'`);
+    showDeleteDialog.value = false;
+    selected.value = [];
+    tableRef.value.refreshTable();
+  } catch (err) {
+    notify.error(err.response?.data?.message);
   }
-
+}
 </script>