diff --git a/packages/ui/eslint.config.mjs b/packages/ui/eslint.config.mjs
new file mode 100644
index 000000000..98f3d9f5a
--- /dev/null
+++ b/packages/ui/eslint.config.mjs
@@ -0,0 +1,13 @@
+import {config} from "eslint-config-custom/vue"
+
+export default [
+  ...config,
+  {
+    "rules": {
+      "@typescript-eslint/no-explicit-any": "warn",
+      "vue/require-prop-types": "warn",
+      "vue/valid-v-for": "warn",
+      "no-prototype-builtins": "warn"
+    }
+  }
+];
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 801928c11..67becd435 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -30,7 +30,9 @@
     "test:unit": "vitest --ui --coverage",
     "build": "vite build",
     "build:watch": "vite build --watch",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "lint": "eslint src",
+    "lint:fix": "eslint src --fix"
   },
   "dependencies": {
     "@azure/abort-controller": "^2.0.0",
diff --git a/packages/ui/src/components/ForgeActionButton.vue b/packages/ui/src/components/ForgeActionButton.vue
index f9dbfb5cf..a35e2114e 100644
--- a/packages/ui/src/components/ForgeActionButton.vue
+++ b/packages/ui/src/components/ForgeActionButton.vue
@@ -11,8 +11,8 @@ import { ref } from "vue";
 const loading = ref<boolean>(false)
 
 export interface ForgeActionButtonProps extends /* @vue-ignore */ ButtonProps {
-  action: Function,
-  errorAction: Function,
+  action: (...param: any[]) => Promise<void>,
+  errorAction: (...param: any[]) => Promise<void>,
   errorParams?: Array<any>,
   params?: Array<any>
 }
diff --git a/packages/ui/src/components/ForgeAlert.vue b/packages/ui/src/components/ForgeAlert.vue
index 5fbf00e36..3761e6f47 100644
--- a/packages/ui/src/components/ForgeAlert.vue
+++ b/packages/ui/src/components/ForgeAlert.vue
@@ -2,10 +2,10 @@
   <Message v-bind="{...$attrs, ...props}">
     <template #icon>
       <div :class="props.icon ? 'me-2 pe-1' : ''">
-        <Icon data-cy="message-icon" v-if="props.icon" :icon="props.icon" :class="`text-${props.severity}`" :height="35" />
+        <Icon v-if="props.icon" data-cy="message-icon" :icon="props.icon" :class="`text-${props.severity}`" :height="35" />
       </div>
     </template>
-    <slot/>
+    <slot />
     <template #closeicon>
       <Icon icon="bi:x" />
     </template>
@@ -17,7 +17,7 @@ import { Icon } from '@iconify/vue'
 import { MessageProps } from "primevue/message";
 
 const props = withDefaults(
-    defineProps<MessageProps>(), 
+    defineProps<MessageProps>(),
     {
       life: undefined,
       closable: false,
diff --git a/packages/ui/src/components/ForgeAutoComplete.vue b/packages/ui/src/components/ForgeAutoComplete.vue
index 51f850390..4fa2d47d1 100644
--- a/packages/ui/src/components/ForgeAutoComplete.vue
+++ b/packages/ui/src/components/ForgeAutoComplete.vue
@@ -1,6 +1,8 @@
 <template>
-  <AutoComplete v-bind="{ ...$attrs, ...$props }" inputClass="form-control border-0">
-    <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
+  <AutoComplete v-bind="{ ...$attrs, ...$props }" input-class="form-control border-0">
+    <template v-for="(_, name) in $slots" #[name]>
+      <slot :name="name" />
+    </template>
   </AutoComplete>
 </template>
 
diff --git a/packages/ui/src/components/ForgeCheckbox.vue b/packages/ui/src/components/ForgeCheckbox.vue
index a2675e3af..6169c9a99 100644
--- a/packages/ui/src/components/ForgeCheckbox.vue
+++ b/packages/ui/src/components/ForgeCheckbox.vue
@@ -1,33 +1,33 @@
 <template>
   <div class="d-flex flex-column">
     <div
-      class="d-flex"
-      data-cy="checkbox-container"
-      @click="evt => onChange(evt, value)"
-      v-bind="{ ...$attrs }"
+        class="d-flex"
+        data-cy="checkbox-container"
+        v-bind="{ ...$attrs }"
+        @click="evt => onChange(evt, value)"
     >
       <Checkbox
-        v-bind="{ ...props }"
-        binary
-        v-model="value"
-        :input-id="props.name"
-        :input-class="{ 'is-invalid': hasErrors }"
-        :class="(props.disabled || props.readonly) ? '' : 'cursor-pointer'"
+          v-bind="{ ...props }"
+          v-model="value"
+          binary
+          :input-id="props.name"
+          :input-class="{ 'is-invalid': hasErrors }"
+          :class="(props.disabled || props.readonly) ? '' : 'cursor-pointer'"
       />
       <label
-        :for="props.name"
-        @click="evt => onChange(evt, !value)"
-        :class="`${(props.disabled || props.readonly) ? 'opacity-50' : 'cursor-pointer'} ${
+          :for="props.name"
+          :class="`${(props.disabled || props.readonly) ? 'opacity-50' : 'cursor-pointer'} ${
           hasErrors ? 'text-danger-dark' : ''
         }`"
-        class="w-100 my-auto"
+          class="w-100 my-auto"
+          @click="evt => onChange(evt, !value)"
       >
         <slot>{{ props.label }}</slot>
       </label>
     </div>
-    <small data-cy="error" class="text-invalid" v-show="hasErrors">{{
-      errorMessage
-    }}</small>
+    <small v-show="hasErrors" data-cy="error" class="text-invalid">{{
+        errorMessage
+      }}</small>
   </div>
 </template>
 
@@ -50,19 +50,19 @@ const props = withDefaults(defineProps<ForgeCheckProps>(), {
 const value = defineModel<boolean>({ required: true });
 
 const { handleChange, errors, errorMessage } = useField(
-  () => props.name ?? "",
-  undefined,
-  {
-    type: "checkbox",
-    checkedValue: value.value,
-  }
+    () => props.name ?? "",
+    undefined,
+    {
+      type: "checkbox",
+      checkedValue: value.value,
+    }
 );
 
 const onChange = (event: MouseEvent, checkValue: boolean) => {
-  if(props.disabled || props.readonly) {
+  if (props.disabled || props.readonly) {
     event.preventDefault();
   }
-  if(props.name) handleChange(checkValue)
+  if (props.name) handleChange(checkValue)
   else value.value = checkValue
 }
 
diff --git a/packages/ui/src/components/ForgeChip.vue b/packages/ui/src/components/ForgeChip.vue
index b94a12d3b..e4ea0cb94 100644
--- a/packages/ui/src/components/ForgeChip.vue
+++ b/packages/ui/src/components/ForgeChip.vue
@@ -1,6 +1,8 @@
 <template>
   <Chip v-bind="{ ...$attrs, ...$props }" :pt="chipPt">
-    <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
+    <template v-for="(_, name) in $slots" #[name]>
+      <slot :name="name" />
+    </template>
   </Chip>
 </template>
 
@@ -10,7 +12,7 @@ import { Severity } from "../types/forge-types";
 import { computed } from "vue";
 
 export interface ForgeChipProps
-  extends /* vue-ignore */ Omit<ChipProps, "aria-label" | "aria-labelledby"> {
+    extends /* vue-ignore */ Omit<ChipProps, "aria-label" | "aria-labelledby"> {
   chipSeverity?: Severity;
   pill?: boolean;
 }
@@ -28,16 +30,16 @@ const chipPt = computed(() => ({
     },
     {
       "bg-primary-subtle border-primary text-primary":
-        props.chipSeverity === undefined || props.chipSeverity === "primary",
+          props.chipSeverity === undefined || props.chipSeverity === "primary",
       "bg-brand-subtle border-brand text-brand": props.chipSeverity === "brand",
       "bg-secondary-subtle border-secondary text-secondary":
-        props.chipSeverity === "secondary",
+          props.chipSeverity === "secondary",
       "bg-success-subtle border-success text-success":
-        props.chipSeverity === "success",
+          props.chipSeverity === "success",
       "bg-warning-subtle border-warning text-warning":
-        props.chipSeverity === "warning",
+          props.chipSeverity === "warning",
       "bg-danger-subtle border-danger text-danger":
-        props.chipSeverity === "danger",
+          props.chipSeverity === "danger",
       "bg-info-subtle border-info text-info": props.chipSeverity === "info",
       "bg-info-success-alternate border-success-alternate text-success-alternate": props.chipSeverity === "success-alternate"
     },
diff --git a/packages/ui/src/components/ForgeConfirmPopup.vue b/packages/ui/src/components/ForgeConfirmPopup.vue
index 0b1865fb1..b72c08e81 100644
--- a/packages/ui/src/components/ForgeConfirmPopup.vue
+++ b/packages/ui/src/components/ForgeConfirmPopup.vue
@@ -1,6 +1,8 @@
 <template>
   <ConfirmPopup :pt="pt" v-bind="{ ...$attrs, ...$props }">
-    <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
+    <template v-for="(_, name) in $slots" #[name]>
+      <slot :name="name" />
+    </template>
   </ConfirmPopup>
 </template>
 
@@ -16,7 +18,7 @@ const pt = computed<ConfirmPopupPassThroughOptions>(() => ({
     class: ["modal-footer gap-1 p-2"],
   }),
   content: 'pt-2 px-2',
-  pcRejectButton: {root: 'btn btn-outline-primary btn-sm'},
-  pcAcceptButton: {root: 'btn btn-primary btn-sm'}
+  pcRejectButton: { root: 'btn btn-outline-primary btn-sm' },
+  pcAcceptButton: { root: 'btn btn-primary btn-sm' }
 }))
 </script>
\ No newline at end of file
diff --git a/packages/ui/src/components/ForgeDatepicker.vue b/packages/ui/src/components/ForgeDatepicker.vue
index 1cf9ab294..7dc96d393 100644
--- a/packages/ui/src/components/ForgeDatepicker.vue
+++ b/packages/ui/src/components/ForgeDatepicker.vue
@@ -5,15 +5,18 @@
     </span>
 
     <div class="position-relative w-100">
-      <DatePicker v-bind="{...props, ...$attrs}" :pt="pt" v-model="model" @update:model-value="handleChange"
-                @blur="() => handleBlur" :input-class="{'datepicker-invalid': hasErrors}"/>
-      <Icon data-cy="icon" icon="bi:calendar4" v-show="props.showIcon"
-            class="position-absolute end-0 top-50 bottom-50 my-auto me-2 bg-white" 
-            :class="`${ hasErrors ? 'text-danger-dark' : 'text-muted'}`"
+      <DatePicker
+          v-bind="{...props, ...$attrs}" v-model="model" :pt="pt" :input-class="{'datepicker-invalid': hasErrors}"
+          @update:model-value="handleChange" @blur="() => handleBlur" />
+      <Icon
+          v-show="props.showIcon" data-cy="icon" icon="bi:calendar4"
+          class="position-absolute end-0 top-50 bottom-50 my-auto me-2 bg-white"
+          :class="`${ hasErrors ? 'text-danger-dark' : 'text-muted'}`"
       />
-      <Icon data-cy="icon" icon="bi:x" v-show="props.modelValue" @click="clear"
-            class="position-absolute end-0 top-50 bottom-50 my-auto text-muted cursor-pointer bg-white"
-            :class="props.showIcon ? 'datepicker-close-icon' : 'me-2'" />
+      <Icon
+          v-show="props.modelValue" data-cy="icon" icon="bi:x" class="position-absolute end-0 top-50 bottom-50 my-auto text-muted cursor-pointer bg-white"
+          :class="props.showIcon ? 'datepicker-close-icon' : 'me-2'"
+          @click="clear" />
     </div>
 
 
@@ -22,7 +25,7 @@
     </span>
   </div>
 
-  <small data-cy="error" class="text-invalid" v-show="hasErrors">{{ errorMessage }}</small>
+  <small v-show="hasErrors" data-cy="error" class="text-invalid">{{ errorMessage }}</small>
 </template>
 
 <script setup lang="ts">
@@ -68,9 +71,9 @@ const clear = () => {
 const hasErrors = computed(() => errors.value.length > 0)
 
 const pt = computed(() => ({
-  dayCell: ({context} : DatePickerPassThroughMethodOptions) => ({
+  dayCell: ({ context }: DatePickerPassThroughMethodOptions) => ({
     class: [
-      `text-center date-${ props.severity === undefined ? 'primary' : props.severity }`,
+      `text-center date-${props.severity === undefined ? 'primary' : props.severity}`,
       {
         'cursor-pointer': !context.disabled,
         'pe-none': context.disabled,
@@ -90,8 +93,8 @@ const pt = computed(() => ({
       }
     ]
   }),
- 
-  dayLabel: ({ context } : DatePickerPassThroughMethodOptions) => ({
+
+  dayLabel: ({ context }: DatePickerPassThroughMethodOptions) => ({
     class: [
       // Disabled States
       {
diff --git a/packages/ui/src/components/ForgeForm.vue b/packages/ui/src/components/ForgeForm.vue
index 441c9a06d..cafd45172 100644
--- a/packages/ui/src/components/ForgeForm.vue
+++ b/packages/ui/src/components/ForgeForm.vue
@@ -21,7 +21,8 @@
         Triggered when the cancel button is clicked
         @event cancel
         -->
-        <Button v-if="!hideCancel" data-cy="cancel-btn" type="reset" severity="secondary" outlined
+        <Button
+v-if="!hideCancel" data-cy="cancel-btn" type="reset" severity="secondary" outlined
                   @click="$emit('cancel')">{{ cancelText }}
         </Button>
       </slot>
@@ -31,7 +32,7 @@
         </Button>
       </slot>
     </div>
-    <forge-loader data-cy="loading-spinner" v-if="loading"/>
+    <forge-loader v-if="loading" data-cy="loading-spinner"/>
   </form>
 </template>
 
@@ -41,7 +42,7 @@ import ForgeAlert from "./ForgeAlert.vue";
 import ForgeLoader from "./ForgeLoader.vue";
 
 export interface ForgeFormProps {
-  onSubmit: Function,
+  onSubmit: () => Promise<void>,
   title?: string,
   hideTitle?: boolean,
   titleClass?: string,
diff --git a/packages/ui/src/components/ForgeFormField.vue b/packages/ui/src/components/ForgeFormField.vue
index 1b3970d4d..539d3a730 100644
--- a/packages/ui/src/components/ForgeFormField.vue
+++ b/packages/ui/src/components/ForgeFormField.vue
@@ -1,7 +1,8 @@
 <template>
-  <forge-checkbox :id="props.name" v-if="props.type === 'checkbox'" :label="props.fieldLabel" v-bind="$attrs"
-                  :name="props.name" v-model="model" />
-  <div class="d-flex flex-column w-100" v-else>
+  <forge-checkbox
+      v-if="props.type === 'checkbox'" :id="props.name" v-bind="$attrs" v-model="model"
+      :label="props.fieldLabel" :name="props.name" />
+  <div v-else class="d-flex flex-column w-100">
     <div data-cy="input-wrapper" class="d-flex" :class="props.fieldLabelPosition === 'top' ? 'flex-column' : 'flex-row'">
       <label :for="props.name" :class="props.fieldLabelPosition === 'top' ? 'mb-1' : ('me-2 ' + props.labelWidthClass)">
         {{ props.fieldLabel }} <span v-if="required" class="text-danger fw-600">*</span>
@@ -10,36 +11,44 @@
       <!-- Slot for Custom Inputs -->
       <slot v-bind="{ modelValue: model, updateModel: handleChange, hasErrors  }">
         <!-- Default Inputs (if no input is provided) -->
-        <InputNumber :id="props.name" v-if="props.type === 'number'" v-bind="$attrs"
-                     :placeholder="props.placeholder" :input-class="{'is-invalid': hasErrors }" :class="{'is-invalid': hasErrors }"
-                     @input="change"         v-model="model"
+        <InputNumber
+            v-if="props.type === 'number'" :id="props.name" v-bind="$attrs"
+            v-model="model" :placeholder="props.placeholder" :input-class="{'is-invalid': hasErrors }"
+            :class="{'is-invalid': hasErrors }" @input="change"
         />
-        <Textarea :id="props.name" v-else-if="props.type === 'textarea'" v-bind="$attrs"
-                  :placeholder="props.placeholder" :class="{'is-invalid': hasErrors }"
-                  v-model="model"
-                  @input="change" @blur="handleBlur"
+        <Textarea
+            v-else-if="props.type === 'textarea'" :id="props.name" v-bind="$attrs"
+            v-model="model" :placeholder="props.placeholder"
+            :class="{'is-invalid': hasErrors }"
+            @input="change" @blur="handleBlur"
         />
-        <InputMask :id="props.name" v-else-if="props.type === 'mask'" v-bind="$attrs"
-                   :placeholder="props.placeholder" :mask="props.mask" :class="{'is-invalid': hasErrors }"
-                   v-model="model" @complete="change" @blur="handleBlur"
+        <InputMask
+            v-else-if="props.type === 'mask'" :id="props.name" v-bind="$attrs"
+            v-model="model" :placeholder="props.placeholder" :mask="props.mask"
+            :class="{'is-invalid': hasErrors }" @complete="change" @blur="handleBlur"
         />
-        <InputText :id="props.name" v-else-if="props.type === 'text'" v-bind="$attrs"
-                   :placeholder="props.placeholder" :class="{'is-invalid': hasErrors }"
-                   v-model="model"
-                   @input="change" @blur="handleBlur"
+        <InputText
+            v-else-if="props.type === 'text'" :id="props.name" v-bind="$attrs"
+            v-model="model" :placeholder="props.placeholder"
+            :class="{'is-invalid': hasErrors }"
+            @input="change" @blur="handleBlur"
         />
-        <Select v-else-if="props.type === 'select'" v-bind="{...props,...$attrs}" v-model="model"
-                :class="{'is-invalid': hasErrors }" />
-        <MultiSelect v-else-if="props.type === 'multiselect'" v-bind="{...props,...$attrs}" v-model="model"
-                     :class="{'is-invalid': hasErrors }" />
-        <ForgeMultiSelectPreview v-else-if="props.type === 'multiselect-preview'" v-bind="{...props,...$attrs}" v-model="model"
-                                 :class="{'is-invalid': hasErrors }" />
-        <ForgeDatepicker v-else-if="props.type === 'datepicker'" v-bind="{...props,...$attrs}" v-model="model"
-                         :class="{'is-invalid': hasErrors }" />
+        <Select
+            v-else-if="props.type === 'select'" v-bind="{...props,...$attrs}" v-model="model"
+            :class="{'is-invalid': hasErrors }" />
+        <MultiSelect
+            v-else-if="props.type === 'multiselect'" v-bind="{...props,...$attrs}" v-model="model"
+            :class="{'is-invalid': hasErrors }" />
+        <ForgeMultiSelectPreview
+            v-else-if="props.type === 'multiselect-preview'" v-bind="{...props,...$attrs}" v-model="model"
+            :class="{'is-invalid': hasErrors }" />
+        <ForgeDatepicker
+            v-else-if="props.type === 'datepicker'" v-bind="{...props,...$attrs}" v-model="model"
+            :class="{'is-invalid': hasErrors }" />
       </slot>
 
     </div>
-    
+
     <!-- Validation Error Message -->
     <small v-show="hasErrors && props.type !== 'multiselect' && props.type !== 'datepicker'" data-cy="error" class="invalid-feedback">{{ errorMessage }}</small>
   </div>
diff --git a/packages/ui/src/components/ForgeInlineEditor.vue b/packages/ui/src/components/ForgeInlineEditor.vue
index 0f3494f70..545408081 100644
--- a/packages/ui/src/components/ForgeInlineEditor.vue
+++ b/packages/ui/src/components/ForgeInlineEditor.vue
@@ -2,31 +2,31 @@
   <div :id="props.name">
     <div v-if="!readonly">
       <div v-if="editing">
-        <div class="d-flex justify-content-between align-items-center position-relative" v-on-click-outside="editFinished">
+        <div v-on-click-outside="editFinished" class="d-flex justify-content-between align-items-center position-relative">
           <slot name="editor" :class="{ 'is-invalid': hasErrors }" :edit-finished="editFinished" :cancel="cancel" :val="value">
             <InputText
+                ref="input"
                 v-model.trim="value"
                 data-cy="input"
-                ref="input"
                 :class="{ 'is-invalid': hasErrors }"
                 @keydown.enter="editFinished"
                 @keydown.esc="cancel"
             />
           </slot>
-          <Icon icon="bi:x-circle" class="mx-2 cursor-pointer" @click="reset" @keydown.enter="reset" data-cy="clear-icon"/>
+          <Icon icon="bi:x-circle" class="mx-2 cursor-pointer" data-cy="clear-icon" @click="reset" @keydown.enter="reset" />
         </div>
       </div>
-      <div v-else class="d-flex text-muted" @click="beginEdit" @focus="beginEdit" >
+      <div v-else class="d-flex text-muted" @click="beginEdit" @focus="beginEdit">
         <slot>
           <div class="pe-2 cursor-pointer" :class="{ 'text-invalid': hasErrors }" data-cy="value">{{ !value ? 'Click to edit' : value }}</div>
         </slot>
         <Button link class="p-0 m-0">
-          <Icon icon="bi:pencil" :class="hasErrors ? 'text-invalid' : 'text-muted'" data-cy="edit-icon" @keydown.enter="beginEdit"/>
+          <Icon icon="bi:pencil" :class="hasErrors ? 'text-invalid' : 'text-muted'" data-cy="edit-icon" @keydown.enter="beginEdit" />
         </Button>
       </div>
     </div>
     <div v-else>
-      <slot >
+      <slot>
         <span data-cy="readonly-value">{{ value }}</span>
       </slot>
     </div>
@@ -42,14 +42,14 @@ import { vOnClickOutside } from '@vueuse/components'
 
 export interface ForgeInlineEditorProps {
   name?: string,
-  completeAction?: Function,
-  errorAction?: Function,
+  completeAction?: (...params: any[]) => Promise<void>,
+  errorAction?: (...params: any[]) => Promise<void>,
   params?: Array<any>,
   errorParams?: Array<any>,
   readonly?: boolean,
 }
 
-const props = withDefaults(defineProps<ForgeInlineEditorProps>(),{
+const props = withDefaults(defineProps<ForgeInlineEditorProps>(), {
   name: "",
   params: Array,
   readonly: false
@@ -65,7 +65,7 @@ const beginEdit = () => {
 }
 
 const editFinished = async () => {
-  if(hasErrors.value) {
+  if (hasErrors.value) {
     return false;
   }
   modelValue.value = value.value
@@ -73,9 +73,9 @@ const editFinished = async () => {
     try {
       await props.completeAction.apply(this, props.params);
       editing.value = !editing.value;
-    } catch (completeActionError) {
+    } catch {
       if (props.errorAction) {
-        await props.errorAction.apply(this, props.errorParams);
+        await props.errorAction.apply(this, props.errorParams ?? []);
       }
     }
   } else {
diff --git a/packages/ui/src/components/ForgeLink.vue b/packages/ui/src/components/ForgeLink.vue
index b172ddf0d..a46ec2fa0 100644
--- a/packages/ui/src/components/ForgeLink.vue
+++ b/packages/ui/src/components/ForgeLink.vue
@@ -7,7 +7,7 @@
       :class="linkClasses"
   >
     <slot>
-      <Icon id="link-icon" :icon="iconName" class="bi my-auto" :class="iconClasses" v-if="iconName"/>
+      <Icon v-if="iconName" id="link-icon" :icon="iconName" class="bi my-auto" :class="iconClasses" />
       {{ label }}
     </slot>
   </a>
@@ -52,7 +52,7 @@ const {
   url
 } = defineProps<ForgeLinkProps>()
 
-const linkClasses = computed<Object>(() => ({
+const linkClasses = computed<object>(() => ({
   [`link-${severity}`]: severity,
   [`link-underline-${underlineSeverity}`]: underlineSeverity,
   [`link-opacity-${opacity}`]: opacity,
@@ -63,7 +63,7 @@ const linkClasses = computed<Object>(() => ({
   'icon-link icon-link-hover': animateIconOnHover,
 }))
 
-const iconClasses = computed<Object>(() => ({
+const iconClasses = computed<object>(() => ({
   'order-2': positionIconEnd,
   'me-1': !positionIconEnd && !animateIconOnHover,
   'ms-1': positionIconEnd && !animateIconOnHover,
diff --git a/packages/ui/src/components/ForgeLoader.vue b/packages/ui/src/components/ForgeLoader.vue
index e1f3a2df0..0f1e03735 100644
--- a/packages/ui/src/components/ForgeLoader.vue
+++ b/packages/ui/src/components/ForgeLoader.vue
@@ -1,6 +1,6 @@
 <template>
   <div :class="inLine ? '': 'forge-loader'">
-    <progress-spinner animation-duration=".75" :class="`text-${props.severity === undefined ? 'primary': props.severity }`" :pt="pt"/>
+    <progress-spinner animation-duration=".75" :class="`text-${props.severity === undefined ? 'primary': props.severity }`" :pt="pt" />
   </div>
 </template>
 
diff --git a/packages/ui/src/components/ForgeModal.vue b/packages/ui/src/components/ForgeModal.vue
index 4e1951a72..ec622715c 100644
--- a/packages/ui/src/components/ForgeModal.vue
+++ b/packages/ui/src/components/ForgeModal.vue
@@ -1,5 +1,5 @@
 <template>
-  <Dialog v-bind="props" @maximize="maximise" @unmaximize="minimise" :pt="pt">
+  <Dialog v-bind="props" :pt="pt" @maximize="maximise" @unmaximize="minimise">
     <template #closeicon>
       <Icon data-cy="close-icon" icon="bi:x-lg" width="18" height="18" @click="closeModal" />
     </template>
@@ -22,11 +22,12 @@
         <forge-loader data-cy="loader" />
       </slot>
     </template>
-    <template #footer v-if="showFooter">
+    <template v-if="showFooter" #footer>
       <div class="d-flex w-100" data-cy="footer">
-        <Button :label="cancelText" :class="props.cancelClass" outlined @click="closeModal" id="cancel-button" :type="props.cancelButtonType" />
-        <Button :label="submitText" :class="props.submitClass" class="ms-auto" @click="success" id="submit-button"
-                :type="props.submitButtonType" />
+        <Button id="cancel-button" :label="cancelText" :class="props.cancelClass" outlined :type="props.cancelButtonType" @click="closeModal" />
+        <Button
+            id="submit-button" :label="submitText" :class="props.submitClass" class="ms-auto" :type="props.submitButtonType"
+            @click="success" />
       </div>
     </template>
 
@@ -52,7 +53,7 @@ export interface ForgeModalProps extends DialogProps {
   cancelText?: string,
   submitText?: string,
   showFooter?: boolean,
-  onConfirm?: Function | null,
+  onConfirm?: () => Promise<void> | null,
   submitButtonType?: 'button' | 'reset' | 'submit',
   cancelButtonType?: 'button' | 'reset' | 'submit',
   size?: Size | 'xl'
@@ -151,7 +152,7 @@ const pt = computed<DialogPassThroughOptions>(() => ({
   ],
   content: [
     'modal-body overflow-y-auto',
-    { 
+    {
       [`${props.maxHeight}`]: props.maxHeight && !fullscreen.value
     }
   ]
diff --git a/packages/ui/src/components/ForgeMultiSelectPreview.vue b/packages/ui/src/components/ForgeMultiSelectPreview.vue
index b22b7104e..e20ad65d0 100644
--- a/packages/ui/src/components/ForgeMultiSelectPreview.vue
+++ b/packages/ui/src/components/ForgeMultiSelectPreview.vue
@@ -1,8 +1,10 @@
 <template>
   <div :class="orientation === 'column' ? 'row' : ''" data-cy="multiselect-preview">
     <div :class="orientation === 'row' ? 'col-12 mb-1' : 'col'" data-cy="multiselect-container">
-      <MultiSelect v-model="model" v-bind="{...$attrs}" :options="props.options ?? []" optionLabel="label" :placeholder="multiselectPlaceholder" data-cy="multiselect">
-        <slot v-for="(_, name) in $slots" :slot="name" :name="name" />
+      <MultiSelect v-model="model" v-bind="{...$attrs}" :options="props.options ?? []" option-label="label" :placeholder="multiselectPlaceholder" data-cy="multiselect">
+        <template v-for="(_, name) in $slots" #[name]>
+          <slot :name="name" />
+        </template>
       </MultiSelect>
       <!-- @slot If you need to display some content below the multi select such as validation content-->
       <slot name="after-multi-select" />
@@ -11,14 +13,15 @@
       <div :style="{ height: height }" class="overflow-auto">
         <div class="border alternating-item-list">
           <div v-if="title" class="p-2 border-top border-bottom" data-cy="title">{{ title }}</div>
-          <div v-for="item in model" :key="item.id"
-               class="p-2 item d-flex justify-content-between align-items-center">
+          <div
+              v-for="item in model" :key="item.id"
+              class="p-2 item d-flex justify-content-between align-items-center">
             <!-- @slot Use this slot if the default labels is not enough, maybe for a b-link to redirect the user to the item -->
             <slot name="list-item" :item="item">
               <span class="d-inline-block">{{ item.shortLabel ? item.shortLabel : item.label }}</span>
             </slot>
             <Button v-if="canRemoveItemFromPreview" link class="m-0 p-0 d-flex align-items-center" @click="removeSelectedItem(item.id)">
-              <Icon icon="bi:x" class="close-icon" :data-cy="`close-icon-${item.id}`"/>
+              <Icon icon="bi:x" class="close-icon" :data-cy="`close-icon-${item.id}`" />
             </Button>
           </div>
           <div v-if="model == null || model.length == 0" class="p-2 item d-flex justify-content-between align-items-center">{{ props.optionsPreviewEmptyText }}</div>
@@ -30,7 +33,7 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
-import { ForgeMultiSelectOrientation, MultiSelectOption } from "../types/forge-types"; 
+import { ForgeMultiSelectOrientation, MultiSelectOption } from "../types/forge-types";
 
 export interface ForgeMultiSelectPreviewProps {
   title?: string,
@@ -51,9 +54,9 @@ const props = withDefaults(defineProps<ForgeMultiSelectPreviewProps>(), {
   multiselectPlaceholder: "Select"
 })
 
-const model = defineModel<MultiSelectOption<unknown>[]>({ default: []})
+const model = defineModel<MultiSelectOption<unknown>[]>({ default: [] })
 
-const removeSelectedItem = (id : unknown) => {
+const removeSelectedItem = (id: unknown) => {
   model.value = model.value.filter((x) => x.id !== id)
 }
 
diff --git a/packages/ui/src/components/ForgeNavbar.vue b/packages/ui/src/components/ForgeNavbar.vue
index 677ab6575..e5ede9fd1 100644
--- a/packages/ui/src/components/ForgeNavbar.vue
+++ b/packages/ui/src/components/ForgeNavbar.vue
@@ -1,6 +1,6 @@
 <template>
   <Menubar v-bind="{...props, ...$attrs}" :pt="pt" data-cy="navbar">
-    <template #start >
+    <template #start>
       <a :href="logoUrl" class="navbar-brand ms-3" data-cy="logo">
         <slot name="logo">
           Logo
@@ -13,7 +13,7 @@
         <Icon icon="bi:list" :class="props.severity === 'light' ? 'text-black' : 'text-white'" height="24" data-cy="burger-icon" />
       </slot>
     </template>
-    
+
     <template v-for="(_, slot) of $slots as unknown as MenubarSlots" #[slot]="scope">
       <slot :name="slot" v-bind="scope" />
     </template>
@@ -21,49 +21,49 @@
 </template>
 
 <script setup lang="ts">
-  import { Icon } from "@iconify/vue";
-  import Menubar, { MenubarPassThroughOptions, MenubarProps, MenubarSlots } from "primevue/menubar";
-  import { ForgeNavbarPosition, Severity } from "../types/forge-types";
-  import { computed } from "vue";
+import { Icon } from "@iconify/vue";
+import Menubar, { MenubarPassThroughOptions, MenubarProps, MenubarSlots } from "primevue/menubar";
+import { ForgeNavbarPosition, Severity } from "../types/forge-types";
+import { computed } from "vue";
+
+export interface ForgeNavbarProps extends /* vue-ignore */ Omit<MenubarProps, "aria-label" | "aria-labelledby"> {
+  severity?: Severity | 'light' | 'dark',
+  logoUrl?: string,
+  position?: ForgeNavbarPosition
+}
 
-  export interface ForgeNavbarProps extends /* vue-ignore */ Omit<MenubarProps, "aria-label" | "aria-labelledby"> {
-    severity?: Severity | 'light' | 'dark',
-    logoUrl?: string,
-    position?: ForgeNavbarPosition
-  }
+const props = withDefaults(defineProps<ForgeNavbarProps>(), {
+  severity: "light",
+  logoUrl: "#"
+})
 
-  const props = withDefaults(defineProps<ForgeNavbarProps>(), {
-    severity: "light",
-    logoUrl: "#"
+const pt = computed<MenubarPassThroughOptions>(() => ({
+  root: () => ({
+    class: [
+      'navbar container-fluid navbar-expand-lg',
+      {
+        'bg-light': props.severity === 'light',
+        'bg-dark': props.severity === 'dark',
+        'bg-primary': props.severity === 'primary',
+        'bg-brand': props.severity === 'brand',
+        'bg-secondary': props.severity === 'secondary',
+        'bg-success': props.severity === 'success',
+        'bg-success-alternate': props.severity === 'success-alternate',
+        'bg-warning': props.severity === 'warning',
+        'bg-danger': props.severity === 'danger',
+        'bg-info': props.severity === 'info'
+      },
+      {
+        'navbar-light': props.severity === 'light',
+        'navbar-dark': props.severity !== 'light'
+      },
+      {
+        "fixed-top": props.position === "fixed-top",
+        "fixed-bottom": props.position === "fixed-bottom",
+        "sticky-top": props.position === "sticky-top"
+      }
+    ]
   })
-  
-  const pt = computed<MenubarPassThroughOptions>(() => ({
-    root: () => ({
-      class: [
-        'navbar container-fluid navbar-expand-lg',
-        {
-          'bg-light': props.severity === 'light',
-          'bg-dark': props.severity === 'dark',
-          'bg-primary': props.severity === 'primary',
-          'bg-brand': props.severity === 'brand',
-          'bg-secondary': props.severity === 'secondary',
-          'bg-success': props.severity === 'success',
-          'bg-success-alternate': props.severity === 'success-alternate',
-          'bg-warning': props.severity === 'warning',
-          'bg-danger': props.severity === 'danger',
-          'bg-info': props.severity === 'info'
-        },
-        {
-          'navbar-light': props.severity === 'light',
-          'navbar-dark': props.severity !== 'light'
-        },
-        {
-          "fixed-top": props.position === "fixed-top",
-          "fixed-bottom": props.position === "fixed-bottom",
-          "sticky-top": props.position === "sticky-top"
-        }
-      ]
-    })
-  }))
-  
+}))
+
 </script>
\ No newline at end of file
diff --git a/packages/ui/src/components/ForgePageHeader.vue b/packages/ui/src/components/ForgePageHeader.vue
index 12f1a5b43..1d9578fbe 100644
--- a/packages/ui/src/components/ForgePageHeader.vue
+++ b/packages/ui/src/components/ForgePageHeader.vue
@@ -2,7 +2,7 @@
   <div class="d-flex justify-content-between pb-2">
     <h3 data-cy="title" class="my-auto">{{ props.title }}</h3>
     <div data-cy="slot" class="d-flex align-items-center">
-      <slot /> 
+      <slot />
     </div>
   </div>
 </template>
diff --git a/packages/ui/src/components/ForgePanel.vue b/packages/ui/src/components/ForgePanel.vue
index 1dd3f071f..9be65f48a 100644
--- a/packages/ui/src/components/ForgePanel.vue
+++ b/packages/ui/src/components/ForgePanel.vue
@@ -1,8 +1,8 @@
 <template>
   <Panel v-bind="{...$attrs}">
     <template #toggleicon="{collapsed}">
-      <Icon v-if="collapsed" data-cy="message-icon"  icon="bi:chevron-down"  />
-      <Icon v-if="!collapsed" data-cy="message-icon"  icon="bi:chevron-up"  />
+      <Icon v-if="collapsed" data-cy="message-icon" icon="bi:chevron-down" />
+      <Icon v-if="!collapsed" data-cy="message-icon" icon="bi:chevron-up" />
     </template>
     <template v-for="(_, slot) of $slots as unknown as PanelSlots" #[slot]="scope">
       <slot :name="slot" v-bind="scope" />
diff --git a/packages/ui/src/components/ForgeProgressBar.vue b/packages/ui/src/components/ForgeProgressBar.vue
index ca2785954..09328db14 100644
--- a/packages/ui/src/components/ForgeProgressBar.vue
+++ b/packages/ui/src/components/ForgeProgressBar.vue
@@ -1,6 +1,6 @@
 <template>
-  <ProgressBar v-bind="{...$attrs, ...props}" :pt="pt" >
-    <slot/>
+  <ProgressBar v-bind="{...$attrs, ...props}" :pt="pt">
+    <slot />
   </ProgressBar>
 </template>
 
@@ -37,7 +37,7 @@ const severity = computed(() => {
       return 'bg-success-alternate'
     case 'warning':
       return 'bg-warning'
-    case 'danger': 
+    case 'danger':
       return 'bg-danger'
     case 'info':
       return 'bg-info'
diff --git a/packages/ui/src/components/ForgeScratchpad.vue b/packages/ui/src/components/ForgeScratchpad.vue
index f7d57bb4d..7f70ff37c 100644
--- a/packages/ui/src/components/ForgeScratchpad.vue
+++ b/packages/ui/src/components/ForgeScratchpad.vue
@@ -12,10 +12,10 @@
         :line-join="lineJoin"
     />
     <div class="d-flex flex-row mt-1 gap-1">
-      <Button v-if="props.showUndo" @click="undo" outlined data-cy="undo-button">Undo</Button>
-      <Button v-if="props.showRedo" @click="redo" outlined data-cy="redo-button">Redo</Button>
-      <Button v-if="props.showClear" @click="clear" outlined data-cy="clear-button">Clear</Button>
-      <Button v-if="props.showSave" @click="save" class="ms-auto" data-cy="save-button">Save</Button>
+      <Button v-if="props.showUndo" outlined data-cy="undo-button" @click="undo">Undo</Button>
+      <Button v-if="props.showRedo" outlined data-cy="redo-button" @click="redo">Redo</Button>
+      <Button v-if="props.showClear" outlined data-cy="clear-button" @click="clear">Clear</Button>
+      <Button v-if="props.showSave" class="ms-auto" data-cy="save-button" @click="save">Save</Button>
     </div>
   </div>
 </template>
diff --git a/packages/ui/src/components/ForgeSelectButton.vue b/packages/ui/src/components/ForgeSelectButton.vue
index 345a65970..15ad2aca3 100644
--- a/packages/ui/src/components/ForgeSelectButton.vue
+++ b/packages/ui/src/components/ForgeSelectButton.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="btn-group" data-cy="forge-select-button">
-    <ForgeToggleButton v-for="(option, index) in options" :key="index"
-                       :onLabel="option.label" :offLabel="option.label" 
-                       :severity="option.severity"
-                       @change="onOptionSelected(option)" :defaultValue="isSelected(option)" :disabled="option.disabled" :data-cy="`toggle-button-${option.value}`"
-                       :invalid="invalid"
+    <ForgeToggleButton
+        v-for="(option, index) in options" :key="index"
+        :on-label="option.label" :off-label="option.label"
+        :severity="option.severity"
+        :default-value="isSelected(option)" :disabled="option.disabled" :data-cy="`toggle-button-${option.value}`" :invalid="invalid"
+        @change="onOptionSelected(option)"
     />
   </div>
 </template>
@@ -36,19 +37,19 @@ const onOptionSelected = (option: ForgeSelectButtonOption) => {
   if (option.disabled) return;
   if (props.multiple) {
     let selectedValues = model.value?.length ? [...(model.value as string[])] : [];
-    
+
     const isValueSelected = selectedValues.length >= 1 && selectedValues.includes(option.value)
-    
-    if(isValueSelected){
-      if (!props.allowEmpty && selectedValues.length === 1 ) return;
+
+    if (isValueSelected) {
+      if (!props.allowEmpty && selectedValues.length === 1) return;
       selectedValues = selectedValues.length > 1 ? selectedValues.filter((val) => val !== option.value) : [];
     } else {
       selectedValues.push(option.value)
-    }    
+    }
     model.value = selectedValues;
-  
+
   } else {
     model.value = model.value === option.value && props.allowEmpty ? null : option.value;
-  }  
+  }
 }
 </script>
\ No newline at end of file
diff --git a/packages/ui/src/components/ForgeTile.vue b/packages/ui/src/components/ForgeTile.vue
index d2a90df17..f238c3095 100644
--- a/packages/ui/src/components/ForgeTile.vue
+++ b/packages/ui/src/components/ForgeTile.vue
@@ -36,7 +36,7 @@ const props = withDefaults(defineProps<ForgeTileProps>(), {
 })
 
 const buttonClass = computed(() => {
-  return `${props.severity === undefined ? `tile-primary` :`tile-${props.severity}`} ${props.barPosition === 'none' ? '' : `tile-bar-${props.barPosition}`} ${props.selected ? 'selected' : ''}`
+  return `${props.severity === undefined ? `tile-primary` : `tile-${props.severity}`} ${props.barPosition === 'none' ? '' : `tile-bar-${props.barPosition}`} ${props.selected ? 'selected' : ''}`
 })
 
 const tileClass = computed(() => {
diff --git a/packages/ui/src/components/ForgeTreeTable.vue b/packages/ui/src/components/ForgeTreeTable.vue
index 2ab55a980..1b7930983 100644
--- a/packages/ui/src/components/ForgeTreeTable.vue
+++ b/packages/ui/src/components/ForgeTreeTable.vue
@@ -1,45 +1,46 @@
 <template>
-    <div class="position-relative">
-      <span data-cy="above-table-slot" ><slot name="above-table" /></span>
-      <TreeTable class="w-100" :class="`${props.severity ? `forge-table-${props.severity}` : ''}`" v-bind="{...props, ...$attrs }" :pt="treetablePT" :filter-display="props.filters ? 'row' : undefined"
-      :rows="paginator ? perPage : undefined" data-cy="tree-table"
-      @update:filters="emitUpdateFilter" @sort="emitSort" @page="emitPage" @node-expand="(() => setExpanderColumns())" showHeaders :first="firstValueIndex">
-        <template v-for="(_, name) in $slots as unknown as TreeTableSlots" #[name]="slotProps">
-            <slot :name="name" v-bind="slotProps || {}"></slot>
-        </template>
-
-        <template #header>
-          <div :class="props.loading ? 'opacity-50' : ''">
-            <div class="d-flex">
-              <div class="d-flex align-items-end mb-2">
+  <div class="position-relative">
+    <span data-cy="above-table-slot"><slot name="above-table" /></span>
+    <TreeTable
+        class="w-100" :class="`${props.severity ? `forge-table-${props.severity}` : ''}`" v-bind="{...props, ...$attrs }" :pt="treetablePT" :filter-display="props.filters ? 'row' : undefined"
+        :rows="paginator ? perPage : undefined" data-cy="tree-table"
+        show-headers :first="firstValueIndex" @update:filters="emitUpdateFilter" @sort="emitSort" @page="emitPage" @node-expand="(() => setExpanderColumns())">
+      <template v-for="(_, name) in $slots as unknown as TreeTableSlots" #[name]="slotProps">
+        <slot :name="name" v-bind="slotProps || {}"></slot>
+      </template>
+
+      <template #header>
+        <div :class="props.loading ? 'opacity-50' : ''">
+          <div class="d-flex">
+            <div class="d-flex align-items-end mb-2">
                 <span v-if="paginator && !legacyPaginationFooter">
-                  <ForgePaginationHeader :total="total" :page-sizes="pageSizes" v-model:per-page="perPage" @update:perPage="emitPageSize" />
+                  <ForgePaginationHeader v-model:per-page="perPage" :total="total" :page-sizes="pageSizes" @update:per-page="emitPageSize" />
                 </span>
-              </div>
-              <div class="ms-auto">
-                <Button v-if="showClearButton" outlined @click="clearAllFilters" data-cy="clear-all">
-                  <Icon icon="bi:funnel-fill" width="24" height="24" />
-                  Clear
-                </Button>
-                <slot name="column-customiser" />
-              </div>
+            </div>
+            <div class="ms-auto">
+              <Button v-if="showClearButton" outlined data-cy="clear-all" @click="clearAllFilters">
+                <Icon icon="bi:funnel-fill" width="24" height="24" />
+                Clear
+              </Button>
+              <slot name="column-customiser" />
             </div>
           </div>
-        </template> 
-        <slot />
-        <template #paginatorstart v-if="legacyPaginationFooter">
+        </div>
+      </template>
+      <slot />
+      <template v-if="legacyPaginationFooter" #paginatorstart>
           <span class="d-flex" :class="props.loading ? 'opacity-50' : ''" data-cy="legacy-page-size">
             <span class="me-2 my-auto text-nowrap">Page Size:</span>
-            <Select :options="pageSizes" v-model="perPage" class="ms-2" @click="emitPageSize"/>
+            <Select v-model="perPage" :options="pageSizes" class="ms-2" @click="emitPageSize" />
           </span>
-        </template>
-        <template #paginatorend v-if="legacyPaginationFooter" >
+      </template>
+      <template v-if="legacyPaginationFooter" #paginatorend>
           <span data-cy="legacy-total" :class="props.loading ? 'opacity-50' : ''">
           {{ total }} {{ pluralise(total, "result") }} across {{ pageText }}
           </span>
-        </template>
-      </TreeTable>
-    </div>
+      </template>
+    </TreeTable>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -65,21 +66,21 @@ export interface ForgeTreeTableProps extends TreeTableProps {
   value: any[],
   legacyPaginationFooter?: boolean,
   showClearButton?: boolean,
-  clearAll?: Function,
+  clearAll?: () => void,
   emptyMessage?: string
 }
 
 const props = withDefaults(
-  defineProps<ForgeTreeTableProps>(), 
-  {
-    parentExpanderFullRow: false,
-    totalColumns: 1,
-    legacyPaginationFooter: false,
-    paginator: true,
-    alwaysShowPaginator: true,
-    showClearButton: false,
-    stripedRows: false
-  })
+    defineProps<ForgeTreeTableProps>(),
+    {
+      parentExpanderFullRow: false,
+      totalColumns: 1,
+      legacyPaginationFooter: false,
+      paginator: true,
+      alwaysShowPaginator: true,
+      showClearButton: false,
+      stripedRows: false
+    })
 
 
 const emits = defineEmits(['update:filters', 'update:tableContext', 'sort', 'page'])
@@ -103,72 +104,72 @@ const pageText = computed<string>(() => {
   const pages = Math.ceil(total.value / perPage.value)
   return `${pages} ${pluralise(pages, 'page')}`
 })
- 
+
 const treetablePT = computed(() => ({
-  root: 'position-relative',
-  table: (options: TreeTablePassThroughMethodOptions) => {
-    return {
-      class: [
-        'table position-relative',
+      root: 'position-relative',
+      table: (options: TreeTablePassThroughMethodOptions) => {
+        return {
+          class: [
+            'table position-relative',
+            {
+              'table-striped': options.attrs.stripedRows,
+              'table-hover': options.props.rowHover,
+              'table-bordered': options.props.showGridlines,
+              'table-sm': options.props.size === 'small',
+              'table-lg': options.props.size === 'large',
+              'opacity-50': options.props.loading
+            }
+          ]
+        }
+      },
+      loadingIcon: () => {
+        return {
+          class: [
+            'spinner-border border-0',
+            {
+              'text-brand': props.severity === "brand",
+              'text-primary': props.severity === "primary",
+              'text-success': props.severity === "success",
+              'text-success-alternate': props.severity === "success-alternate",
+              'text-warning': props.severity === "warning",
+              'text-danger': props.severity === "danger",
+              'text-info': props.severity === "info"
+            }]
+        }
+      },
+      row: ({ instance }: TreeTablePassThroughMethodOptions) => [
         {
-          'table-striped': options.attrs.stripedRows,
-          'table-hover': options.props.rowHover,
-          'table-bordered': options.props.showGridlines,
-          'table-sm': options.props.size === 'small',
-          'table-lg': options.props.size === 'large',
-          'opacity-50': options.props.loading
+          'parent-node': instance.node.hasOwnProperty("children")
         }
       ]
     }
-  },
-  loadingIcon: () => {
-    return {
-      class: [
-        'spinner-border border-0',
-        {
-          'text-brand': props.severity === "brand",
-          'text-primary': props.severity === "primary",
-          'text-success': props.severity === "success",
-          'text-success-alternate': props.severity === "success-alternate",
-          'text-warning': props.severity === "warning",
-          'text-danger': props.severity === "danger",
-          'text-info': props.severity === "info"
-        }]
-    }
-  },
-  row: ({ instance }: TreeTablePassThroughMethodOptions) => [
-    {
-      'parent-node': instance.node.hasOwnProperty("children")
-    }
-  ]
-}
 ));
 
 watch(() => props.parentExpanderFullRow, (newValue) => {
   if (newValue) {
     setExpanderColumns();
-  } else{
+  } else {
     removeExpanderColumns();
   }
 })
 
 const setExpanderColumns = () => {
-  if(props.parentExpanderFullRow){
+  if (props.parentExpanderFullRow) {
     setTimeout(() => {
-        const rowExpanderCells = Array.from(
-            document.querySelectorAll(".parent-node td.expander-cell")
-        );
-        const rowExpanderOtherCells = Array.from(
-            document.querySelectorAll(".parent-node td")
-        );
+          const rowExpanderCells = Array.from(
+              document.querySelectorAll(".parent-node td.expander-cell")
+          );
+          const rowExpanderOtherCells = Array.from(
+              document.querySelectorAll(".parent-node td")
+          );
 
-        rowExpanderOtherCells.forEach((rowExpanderCell) => {
+          rowExpanderOtherCells.forEach((rowExpanderCell) => {
             rowExpanderCell.classList.add("d-none")
-        });
-        rowExpanderCells.forEach((rowExpanderCell) => {
+          });
+          rowExpanderCells.forEach((rowExpanderCell) => {
             rowExpanderCell.setAttribute("colspan", props.totalColumns.toString());
             rowExpanderCell.classList.remove("d-none")
-            });
+          });
         },
         0
     );
@@ -176,7 +177,7 @@ const setExpanderColumns = () => {
 }
 
 const removeExpanderColumns = () => {
-    setTimeout(() => {
+  setTimeout(() => {
         const rowExpanderCells = Array.from(
             document.querySelectorAll(".parent-node td.expander-cell")
         );
@@ -185,23 +186,23 @@ const removeExpanderColumns = () => {
         );
 
         rowExpanderCells.forEach((rowExpanderCell) => {
-            rowExpanderCell.removeAttribute("colspan");
-            });
+          rowExpanderCell.removeAttribute("colspan");
+        });
 
         rowExpanderOtherCells.forEach((rowExpanderCell) => {
-            rowExpanderCell.classList.remove("d-none")
-            });
-        },
-        0
-    );
+          rowExpanderCell.classList.remove("d-none")
+        });
+      },
+      0
+  );
 }
 
 const clearAllFilters = () => {
-  if(props.clearAll) {
+  if (props.clearAll) {
     props.clearAll()
   } else {
-    for (const key in props.filters){
-      if(typeof props.filters[key] === "string") {
+    for (const key in props.filters) {
+      if (typeof props.filters[key] === "string") {
         props.filters[key] = ""
       } else {
         (props.filters[key] as TreeTableFilterMetaData).value = null
@@ -227,7 +228,7 @@ const emitUpdateFilter = (filters: TreeTableFilterMeta | undefined) => {
   emits('update:filters', filters)
   setExpanderColumns();
 }
-const emitPage = (page : TreeTablePageEvent) => {
+const emitPage = (page: TreeTablePageEvent) => {
   tableContext.value.page = pageNumber.value = page.page
 
   setFirstIndex();
@@ -240,7 +241,7 @@ const emitPageSize = () => {
   tableContext.value.perPage = perPage.value
   pageNumber.value = 0;
 
-  tableContext.value.page = pageNumber.value = Math.floor(firstValueIndex.value/perPage.value)
+  tableContext.value.page = pageNumber.value = Math.floor(firstValueIndex.value / perPage.value)
   setFirstIndex();
   emits("update:tableContext", tableContext.value)
   setExpanderColumns();
@@ -248,9 +249,9 @@ const emitPageSize = () => {
 
 watch(() => props.filters, (newValue) => {
   tableContext.value.filters = newValue
-  
+
   emits("update:tableContext", tableContext.value)
-}, {deep: true})
+}, { deep: true })
 
 
 watch(() => props.value, () => {
@@ -262,8 +263,7 @@ onMounted(() => {
   emits("update:tableContext", tableContext.value);
 })
 
-const setFirstIndex = () => 
-{
+const setFirstIndex = () => {
   firstValueIndex.value = pageNumber.value * perPage.value;
 }
 
diff --git a/packages/ui/src/components/file-uploader/ForgeFileUploader.vue b/packages/ui/src/components/file-uploader/ForgeFileUploader.vue
index c2507449b..6509d570a 100644
--- a/packages/ui/src/components/file-uploader/ForgeFileUploader.vue
+++ b/packages/ui/src/components/file-uploader/ForgeFileUploader.vue
@@ -2,18 +2,18 @@
   <div data-cy="file-uploader">
     <UploadButton v-bind="props" v-model="files" />
     <div v-if="showDragDropArea">
-      <DragDropArea :max-file-input="props.maxFileInput" :max-file-size="props.maxFileSize" :accepted-file-types="props.acceptedFileTypes" v-model="files">
-      <div v-for="({ file }, index) in files">
-        <FileInfo
-            :key="file.name"
-            :class="index === files.length - 1 || files.length == 1 ? '' : 'border-bottom'"
-            v-model:file="files[index].file"
-            v-model:blob-file-name="files[index].blobFileName"
-            v-model:upload-status="files[index].status"
-            v-bind="props"
-            @deleted="deleteFiles"
-        />
-      </div>
+      <DragDropArea v-model="files" :max-file-input="props.maxFileInput" :max-file-size="props.maxFileSize" :accepted-file-types="props.acceptedFileTypes">
+        <div v-for="({ file }, index) in files">
+          <FileInfo
+              :key="file.name"
+              v-model:file="files[index].file"
+              v-model:blob-file-name="files[index].blobFileName"
+              v-model:upload-status="files[index].status"
+              :class="index === files.length - 1 || files.length == 1 ? '' : 'border-bottom'"
+              v-bind="props"
+              @deleted="deleteFiles"
+          />
+        </div>
       </DragDropArea>
       <FileInputInfo :max-file-size="props.maxFileSize" :max-file-input="maxFileInput" />
     </div>
diff --git a/packages/ui/src/components/file-uploader/components/DragDropArea.vue b/packages/ui/src/components/file-uploader/components/DragDropArea.vue
index 7a188baca..a607227e5 100644
--- a/packages/ui/src/components/file-uploader/components/DragDropArea.vue
+++ b/packages/ui/src/components/file-uploader/components/DragDropArea.vue
@@ -6,7 +6,7 @@
       @dragover.prevent="dragInput = true"
       @drop.prevent="dropFiles"
   >
-    <div v-if="files.length === 0" class="py-4 px-3" id="placeholder-message">
+    <div v-if="files.length === 0" id="placeholder-message" class="py-4 px-3">
       <Icon icon="bi:upload" class="me-2" height="20px" width="20px" />
       Drag and drop files here
     </div>
diff --git a/packages/ui/src/components/file-uploader/components/FileInfo.vue b/packages/ui/src/components/file-uploader/components/FileInfo.vue
index d5d9cb7a8..7afec9e06 100644
--- a/packages/ui/src/components/file-uploader/components/FileInfo.vue
+++ b/packages/ui/src/components/file-uploader/components/FileInfo.vue
@@ -1,18 +1,20 @@
 <template>
   <div class="py-4 px-3 d-flex" :data-cy="`file-info-${file.name}`">
     <div>
-      <Image v-if="isImage(file.type)" id="thumbnail-image" image-class="image-file-thumbnail border"
-             :src="getThumbnailUrl(file)" :alt="file.name" width="75px" preview />
+      <Image
+          v-if="isImage(file.type)" id="thumbnail-image" image-class="image-file-thumbnail border"
+          :src="getThumbnailUrl(file)" :alt="file.name" width="75px" preview />
       <Icon v-else id="file-earmark" icon="bi:file-earmark" color="black" width="75px" />
     </div>
     <div class="ms-3 d-flex flex-column">
       <div>
-        <ForgeInlineEditor v-if="editableFileName" id="edit-file-name" v-model="fileName" :rules="customFileNameRules"
-                           :name="file.name" :complete-action="updateFileName" />
+        <ForgeInlineEditor
+            v-if="editableFileName" id="edit-file-name" v-model="fileName" :rules="customFileNameRules"
+            :name="file.name" :complete-action="updateFileName" />
         <span v-else id="file-name">{{ fileName }}</span>
       </div>
-      <span class="text-black-50" id="file-type">File type: {{ file.type.split('/').pop() }}</span>
-      <span class="text-black-50" id="file-size">File size: {{ formatFileSize(file.size) }}</span>
+      <span id="file-type" class="text-black-50">File type: {{ file.type.split('/').pop() }}</span>
+      <span id="file-size" class="text-black-50">File size: {{ formatFileSize(file.size) }}</span>
     </div>
 
     <div class="ms-auto my-auto d-flex align-items-center gap-1">
@@ -23,13 +25,13 @@
           :bytes-uploaded="bytesUploaded"
           :max-file-size="maxFileSize"
       />
-      <Button link @click="uploadBlob" v-if="uploadStatus === 'Not Uploaded' || uploadStatus === 'Failed' || uploadStatus === 'Duplicate' || uploadStatus === 'Aborted'">
+      <Button v-if="uploadStatus === 'Not Uploaded' || uploadStatus === 'Failed' || uploadStatus === 'Duplicate' || uploadStatus === 'Aborted'" link @click="uploadBlob">
         <Icon :icon="uploadStatus === 'Not Uploaded' || uploadStatus === 'Duplicate' ? 'bi:upload' : 'bi:arrow-clockwise'" />
       </Button>
-      <Button link @click="controller.abort()" v-if="uploadStatus === 'Uploading'">
+      <Button v-if="uploadStatus === 'Uploading'" link @click="controller.abort()">
         <Icon :icon="'bi:x-circle-fill'" />
       </Button>
-      <Button link @click="deleteFileFromBlob" v-else id="delete-button">
+      <Button v-else id="delete-button" link @click="deleteFileFromBlob">
         <Icon icon="bi:trash" />
       </Button>
     </div>
@@ -93,9 +95,9 @@ const updateFileName = () => {
 }
 
 const ensureFileNameHasCorrectExtension = () => {
-  let fileNameSections = fileName.value.split('.');
-  let fileExtensionFromMime = mime.getExtension(fileMimeType.value!);
-  let lastWordInFileName = fileName.value.split('.').pop();
+  const fileNameSections = fileName.value.split('.');
+  const fileExtensionFromMime = mime.getExtension(fileMimeType.value!);
+  const lastWordInFileName = fileName.value.split('.').pop();
   // add missing file extension
   if (fileNameSections.length === 1) {
     if (lastWordInFileName && lastWordInFileName.length > 0) {
@@ -157,7 +159,7 @@ const deleteFileFromBlob = async () => {
   emits('deleted', file.value);
 }
 
-onMounted(() => {  
+onMounted(() => {
   if (autoUploadToBlob && uploadStatus.value != 'Uploaded') {
     uploadBlob();
   }
diff --git a/packages/ui/src/components/file-uploader/components/FileInputInfo.vue b/packages/ui/src/components/file-uploader/components/FileInputInfo.vue
index 8619067a3..cce2e708f 100644
--- a/packages/ui/src/components/file-uploader/components/FileInputInfo.vue
+++ b/packages/ui/src/components/file-uploader/components/FileInputInfo.vue
@@ -12,6 +12,6 @@ interface FileInputInfoProps {
   maxFileSize: number,
   maxFileInput: number
 }
- 
+
 defineProps<FileInputInfoProps>()
 </script>
\ No newline at end of file
diff --git a/packages/ui/src/components/file-uploader/components/UploadButton.vue b/packages/ui/src/components/file-uploader/components/UploadButton.vue
index 8d33d4380..704b1e9f0 100644
--- a/packages/ui/src/components/file-uploader/components/UploadButton.vue
+++ b/packages/ui/src/components/file-uploader/components/UploadButton.vue
@@ -11,20 +11,20 @@
           :multiple="maxFileInput > 1"
           @input="(event) => addUploadedFiles([...(event.target as any).files])"
       />
-      <label :class="{ disabled: uploadDisabled }" class="btn btn-primary" id="file-input-button" for="file-input">
+      <label id="file-input-button" :class="{ disabled: uploadDisabled }" class="btn btn-primary" for="file-input">
         <slot name="button-content">
           <Icon icon="bi:upload" class="me-2" height="20px" width="20px" />
           Browse your computer
         </slot>
       </label>
     </div>
-    <Button link class="ms-auto" v-if="showDragDropArea" :key="acceptedFileTypes.length" id="accepted-file-types" @click="toggleAcceptedFileTypesOverlay">Accepted File Types</Button>
+    <Button v-if="showDragDropArea" id="accepted-file-types" :key="acceptedFileTypes.length" link class="ms-auto" @click="toggleAcceptedFileTypesOverlay">Accepted File Types</Button>
     <Popover ref="acceptedFilesOverlay">
-      <div class="text-break accepted-file-types-container" id="accepted-file-types-overlay">
-        {{acceptedFileTypes.map((type) => (type.label ?? type.fileType.split('/').pop())).join(", ")}}
+      <div id="accepted-file-types-overlay" class="text-break accepted-file-types-container">
+        {{ acceptedFileTypes.map((type) => (type.label ?? type.fileType.split('/').pop())).join(", ") }}
       </div>
     </Popover>
-<!--    : {{acceptedFileTypes.map((type) => type.split('/').pop()).join(", ")}}-->
+    <!--    : {{acceptedFileTypes.map((type) => type.split('/').pop()).join(", ")}}-->
   </div>
 </template>
 
@@ -50,7 +50,7 @@ const { acceptedFileTypes, maxFileInput, showDragDropArea } = defineProps<FileUp
 
 const uploadDisabled = computed<boolean>(() => maxFileInput <= files.value.length)
 
-const addUploadedFiles = (filesToUpload : File[]) => {
+const addUploadedFiles = (filesToUpload: File[]) => {
   files.value = addFiles(filesToUpload, files.value, acceptedFileTypes.map(ft => ft.fileType), maxFileInput)
 }
 </script>
\ No newline at end of file
diff --git a/packages/ui/src/components/file-uploader/components/UploadStatus.vue b/packages/ui/src/components/file-uploader/components/UploadStatus.vue
index ae649fa1f..fa128d7fd 100644
--- a/packages/ui/src/components/file-uploader/components/UploadStatus.vue
+++ b/packages/ui/src/components/file-uploader/components/UploadStatus.vue
@@ -1,8 +1,9 @@
 <template>
   <div class="d-flex align-items-center me-2">
     <ForgeLoader v-if="props.uploadStatus === 'Uploading'" />
-    <ForgeAlert id="upload-status-alert" v-if="props.uploadStatus !== 'Uploading' && props.uploadStatus !== 'Not Uploaded' && props.uploadStatus !== 'Uploaded' && props.uploadStatus !== 'Preparing'"
-                :severity="alertSeverity" class="mb-0 w-75 ms-auto">{{ alertMessage }}
+    <ForgeAlert
+        v-if="props.uploadStatus !== 'Uploading' && props.uploadStatus !== 'Not Uploaded' && props.uploadStatus !== 'Uploaded' && props.uploadStatus !== 'Preparing'" id="upload-status-alert"
+        :severity="alertSeverity" class="mb-0 w-75 ms-auto">{{ alertMessage }}
     </ForgeAlert>
   </div>
 </template>
diff --git a/packages/ui/src/components/file-uploader/utilities/utilities.ts b/packages/ui/src/components/file-uploader/utilities/utilities.ts
index 2f9200ef3..85411a8e0 100644
--- a/packages/ui/src/components/file-uploader/utilities/utilities.ts
+++ b/packages/ui/src/components/file-uploader/utilities/utilities.ts
@@ -1,6 +1,6 @@
 import { ForgeFileStatus } from "../../../types/forge-types";
 import { BlockBlobClient } from "@azure/storage-blob";
-import { Mime } from "mime";
+import { Mime } from "mime";
 import standardTypes from "mime/types/standard.js";
 import otherTypes from "mime/types/other.js";
 
@@ -15,14 +15,15 @@ export type FileUploadStatus =
   | "DeleteFileFailed"
   | "InvalidFileType"
   | "InvalidFileSize";
-export function addFiles(filesToUpload: File[], files : ForgeFileStatus[], acceptedFileTypes: string[], maxFileSize: number) {
-  
+
+export function addFiles(filesToUpload: File[], files: ForgeFileStatus[], acceptedFileTypes: string[], maxFileSize: number) {
+
   // Get local version of the currently uploaded files.
   const uploadedFiles = files.flatMap(fileStatus => fileStatus.file)
 
   // Reset all the duplicate warnings.
   files = files.map(file => ({ ...file, status: file.status == 'Duplicate' ? 'Not Uploaded' : file.status }))
-  
+
   // Add any new files to Files array
   filesToUpload.forEach((file) => {
     const fileIndex = uploadedFiles.findIndex(uploadedFile => uploadedFile.name === file.name)
@@ -31,7 +32,7 @@ export function addFiles(filesToUpload: File[], files : ForgeFileStatus[], accep
       if (!acceptedFileTypes.includes(file.type) || !(file.size <= maxFileSize)) {
         status = !acceptedFileTypes.includes(file.type) ? 'InvalidFileType' : 'InvalidFileSize'
       }
-      
+
       files.unshift({
         file: file,
         status: status,
@@ -41,11 +42,11 @@ export function addFiles(filesToUpload: File[], files : ForgeFileStatus[], accep
       files[fileIndex].status = 'Duplicate';
     }
   })
-  
+
   return files
 }
 
-export async function deleteFile(uploadStatus : FileUploadStatus, blobUploadUrl : string) {
+export async function deleteFile(uploadStatus: FileUploadStatus, blobUploadUrl: string) {
   if (uploadStatus === 'Uploaded') {
     if (blobUploadUrl !== null) {
       try {
diff --git a/packages/ui/src/components/table/ForgeColumnCustomiser.vue b/packages/ui/src/components/table/ForgeColumnCustomiser.vue
index 903b353ad..58f5a7de4 100644
--- a/packages/ui/src/components/table/ForgeColumnCustomiser.vue
+++ b/packages/ui/src/components/table/ForgeColumnCustomiser.vue
@@ -1,5 +1,5 @@
 <template>
-  <Button @click="togglePanel" class="ms-2">
+  <Button class="ms-2" @click="togglePanel">
     <div class="d-flex">
       <div class="me-3">
         <Icon icon="bi:layout-three-columns" />
@@ -13,8 +13,9 @@
 
   <Popover ref="columnCustomiserPanel" class="column-customiser" @hide="() =>  panelVisible = false" @show="() => panelVisible = true">
     <div class="d-flex flex-column w-100">
-      <div v-for="(column, index) in columns" class="d-flex cursor-pointer"
-           :class="{
+      <div
+          v-for="(column, index) in columns" class="d-flex cursor-pointer"
+          :class="{
             'border-top': index !== 0,
             'py-1': index !== 0 && columns.length - 1 !== index,
             'pt-1': columns.length - 1 === index,
@@ -31,7 +32,7 @@
 import Button from 'primevue/button';
 import Popover from "primevue/popover";
 import { Icon } from '@iconify/vue'
-import { onMounted, ref } from "vue";
+import { ref } from "vue";
 import { ForgeColumn } from "@/types/forge-types.ts";
 import ForgeCheckbox from "@/components/ForgeCheckbox.vue";
 
diff --git a/packages/ui/src/components/table/ForgeFilterHeader.vue b/packages/ui/src/components/table/ForgeFilterHeader.vue
index b5823268c..c53febd51 100644
--- a/packages/ui/src/components/table/ForgeFilterHeader.vue
+++ b/packages/ui/src/components/table/ForgeFilterHeader.vue
@@ -1,36 +1,41 @@
 <template>
   <div class="d-flex position-relative">
     <InputNumber v-if="dataType === 'numeric'" v-model.trim="modelValue" v-bind="$attrs" />
-    <ForgeDatepicker v-else-if="dataType === 'date'" v-model="modelValue" v-bind="$attrs" :show-icon="false"
-                     :show-on-focus="true" />
-    <Select v-else-if="dataType === 'select'" v-model="modelValue" v-bind="$attrs" :options="dropdownOptions"
-              :option-value="optionValue" :option-label="optionLabel"
+    <ForgeDatepicker
+        v-else-if="dataType === 'date'" v-model="modelValue" v-bind="$attrs" :show-icon="false"
+        :show-on-focus="true" />
+    <Select
+        v-else-if="dataType === 'select'" v-model="modelValue" v-bind="$attrs" :options="dropdownOptions"
+        :option-value="optionValue" :option-label="optionLabel"
     >
       <template #value="{ value, placeholder }">
         <div class="d-flex w-100">
           <span :class="{ 'filter-placeholder': value === null }">{{ label(value, placeholder) }}</span>
-          <Button v-if="showClearButton && modelValue !== null"
-                  @click.prevent="clear" size="small"
-                  class="bg-transparent border-0 ms-auto p-0 pe-1">
+          <Button
+              v-if="showClearButton && modelValue !== null"
+              size="small" class="bg-transparent border-0 ms-auto p-0 pe-1"
+              @click.prevent="clear">
             <Icon icon="bi:x" width="1rem" height="1rem" class="text-black" />
           </Button>
         </div>
       </template>
     </Select>
-    <MultiSelect v-else-if="dataType === 'multiselect'" v-model="modelValue" v-bind="$attrs" :options="dropdownOptions"
-                 :showToggleAll="false" :option-label="optionLabel" :option-value="optionValue" filter >
+    <MultiSelect
+        v-else-if="dataType === 'multiselect'" v-model="modelValue" v-bind="$attrs" :options="dropdownOptions"
+        :show-toggle-all="false" :option-label="optionLabel" :option-value="optionValue" filter>
     </MultiSelect>
     <InputText v-else v-model.trim="modelValue" v-bind="$attrs" />
-    <Button v-if="showClearButton && modelValue !== null && dataType !== 'select' && dataType !== 'multiselect' && dataType !== 'date'"
-            @click.prevent="clear" size="small"
-            class="bg-transparent border-0 ms-auto p-0 pe-1 position-absolute end-0 top-0 bottom-0">
+    <Button
+        v-if="showClearButton && modelValue !== null && dataType !== 'select' && dataType !== 'multiselect' && dataType !== 'date'"
+        size="small" class="bg-transparent border-0 ms-auto p-0 pe-1 position-absolute end-0 top-0 bottom-0"
+        @click.prevent="clear">
       <Icon icon="bi:x" width="1rem" height="1rem" class="text-black bg-white" />
     </Button>
   </div>
 
 </template>
 
-<script setup lang="ts"> 
+<script setup lang="ts">
 import InputText from "primevue/inputtext";
 import Select from "primevue/select";
 import ForgeDatepicker from "@/components/ForgeDatepicker.vue";
@@ -42,7 +47,7 @@ export interface ForgeFilterHeaderProps {
   dataType: ForgeColumnDataType,
   dropdownOptions?: any[],
   showClearButton?: boolean
-  clearFilter?: Function,
+  clearFilter?: () => void,
   optionLabel?: string,
   optionValue?: string
 }
@@ -65,9 +70,9 @@ const label = (values: string[] | string | object, placeholder: string): string
 
   const getLabel = (value: any): string => {
     const option = dropdownOptions?.find(opt =>
-        optionValue ? opt[optionValue as string] === value : Object.keys(opt).every(key => value.hasOwnProperty(key) && opt[key] === value[key])
+        optionValue ? opt[optionValue as string] === value : Object.keys(opt).every(key => Object.prototype.hasOwnProperty.call(value, key) && opt[key] === value[key])
     );
-    
+
     return optionLabel ? option[optionLabel] : option;
   };
 
@@ -79,7 +84,7 @@ const label = (values: string[] | string | object, placeholder: string): string
 };
 
 const clear = () => {
-  if(clearFilter) {
+  if (clearFilter) {
     clearFilter()
   } else {
     modelValue.value = null
diff --git a/packages/ui/src/components/table/ForgePaginationHeader.vue b/packages/ui/src/components/table/ForgePaginationHeader.vue
index 1e9986ccf..cc643b3e0 100644
--- a/packages/ui/src/components/table/ForgePaginationHeader.vue
+++ b/packages/ui/src/components/table/ForgePaginationHeader.vue
@@ -2,8 +2,9 @@
   <div class="d-flex justify-content-start align-items-baseline" data-cy="pagination-header">
     Number of results per page
     <div class="ms-2">
-      <Select :options="props.pageSizes" :model-value="props.perPage" class="page-size"
-                @change="(event : SelectChangeEvent) => update(event)" />
+      <Select
+          :options="props.pageSizes" :model-value="props.perPage" class="page-size"
+          @change="(event : SelectChangeEvent) => update(event)" />
     </div>
     <div v-if="props.total">
       <span class="mx-2">|</span>
@@ -30,7 +31,7 @@ const props = withDefaults(defineProps<ForgePaginationHeaderProps>(), {
   perPage: 10
 })
 
-const update = (event : SelectChangeEvent) => {
+const update = (event: SelectChangeEvent) => {
   emits('update:perPage', event.value)
 }
 
diff --git a/packages/ui/src/components/table/ForgeTable.vue b/packages/ui/src/components/table/ForgeTable.vue
index 14c5009cc..559c14417 100644
--- a/packages/ui/src/components/table/ForgeTable.vue
+++ b/packages/ui/src/components/table/ForgeTable.vue
@@ -1,15 +1,17 @@
 <template>
   <div class="position-relative">
-    <span data-cy="above-table-slot" ><slot name="above-table" /></span>
-    <DataTable class="w-100" :class="`${props.severity ? `forge-table-${props.severity}` : ''}`"
-               v-bind="{...props, ...$attrs }" :pt="pt" :rows="perPage" :total-records="total" :filter-display="props.filters ? 'row' : undefined" ref="forgeTable" data-cy="table"
-               @update:filters="emitUpdateFilter" @sort="emitSort" @page="emitPage" showHeaders>
+    <span data-cy="above-table-slot"><slot name="above-table" /></span>
+    <DataTable
+        v-bind="{...props, ...$attrs }" ref="forgeTable"
+        class="w-100" :class="`${props.severity ? `forge-table-${props.severity}` : ''}`" :pt="pt" :rows="perPage" :total-records="total" :filter-display="props.filters ? 'row' : undefined"
+        data-cy="table"
+        show-headers @update:filters="emitUpdateFilter" @sort="emitSort" @page="emitPage">
       <template v-for="(_, name) in $slots as unknown as DataTableSlots" #[name]="slotProps">
         <slot :name="name" v-bind="slotProps || {}"></slot>
       </template>
       <template #empty>
         <div class="d-flex w-100">
-          <h5 class="mx-auto" data-cy="empty-message">{{ emptyMessage ?? 'No items Found.'}}</h5>
+          <h5 class="mx-auto" data-cy="empty-message">{{ emptyMessage ?? 'No items Found.' }}</h5>
         </div>
       </template>
       <template #header>
@@ -17,15 +19,15 @@
           <div class="d-flex">
             <div class="d-flex align-items-end mb-2">
               <span v-if="paginator && !legacyPaginationFooter">
-                <forge-pagination-header :total="total" :page-sizes="pageSizes" v-model:per-page="perPage"  @update:perPage="emitPageSize" />
+                <forge-pagination-header v-model:per-page="perPage" :total="total" :page-sizes="pageSizes" @update:per-page="emitPageSize" />
               </span>
             </div>
             <div class="ms-auto">
-              <Button v-if="showClearButton" outlined :class="showExporterButton ? 'me-2' : ''" @click="clearAllFilters" data-cy="clear-all">
+              <Button v-if="showClearButton" outlined :class="showExporterButton ? 'me-2' : ''" data-cy="clear-all" @click="clearAllFilters">
                 <Icon icon="bi:funnel-fill" width="24" height="24" />
                 Clear
               </Button>
-              <Button v-if="showExporterButton" outlined @click="exportData" data-cy="exporter">
+              <Button v-if="showExporterButton" outlined data-cy="exporter" @click="exportData">
                 <Icon icon="typcn:export" width="24" height="24" />
                 Export
               </Button>
@@ -35,13 +37,13 @@
         </div>
       </template>
       <slot />
-      <template #paginatorstart v-if="legacyPaginationFooter">
+      <template v-if="legacyPaginationFooter" #paginatorstart>
         <span class="d-flex" :class="props.loading ? 'opacity-50' : ''" data-cy="legacy-page-size">
           <span class="me-2 my-auto text-nowrap">Page Size:</span>
-          <Select :options="pageSizes" v-model="perPage" class="ms-2" @click="emitPageSize"/>
+          <Select v-model="perPage" :options="pageSizes" class="ms-2" @click="emitPageSize" />
         </span>
       </template>
-      <template #paginatorend v-if="legacyPaginationFooter" >
+      <template v-if="legacyPaginationFooter" #paginatorend>
         <span data-cy="legacy-total" :class="props.loading ? 'opacity-50' : ''">
         {{ total }} {{ pluralise(total, "result") }} across {{ pageText }}
         </span>
@@ -63,7 +65,7 @@ import { computed, onMounted, ref, watch } from "vue";
 import Select from "primevue/select";
 import { pluralise } from "@3squared/forge-ui-3/src/components/table/table-helpers";
 import { Icon } from '@iconify/vue'
-import { ForgeTableContext, Severity } from "../../types/forge-types";
+import { ForgeTableContext, Severity } from "@/types/forge-types.ts";
 
 export interface ForgeTableProps extends DataTableProps {
   value: any[],
@@ -72,7 +74,7 @@ export interface ForgeTableProps extends DataTableProps {
   showExporterButton?: boolean,
   stickyHeader?: boolean,
   severity?: Severity,
-  clearAll?: Function,
+  clearAll?: () => void,
   emptyMessage?: string
 }
 
@@ -132,11 +134,11 @@ const pt = computed<DataTablePassThroughOptions>(() => ({
 }))
 
 const clearAllFilters = () => {
-  if(props.clearAll) {
+  if (props.clearAll) {
     props.clearAll()
   } else {
-    for (const key in props.filters){
-      if(typeof props.filters[key] === "string") {
+    for (const key in props.filters) {
+      if (typeof props.filters[key] === "string") {
         props.filters[key] = ""
       } else {
         (props.filters[key] as DataTableFilterMetaData).value = null
@@ -153,7 +155,7 @@ const exportData = () => {
 const emitSort = (sort: DataTableSortEvent) => {
   tableContext.value.sortDirection = sort.sortOrder === 1 ? 'Asc' : sort.sortOrder === -1 ? 'Desc' : 'None'
   tableContext.value.sortField = sort.sortField?.toString() ?? ''
-  
+
   emits("update:tableContext", tableContext.value)
   emits('sort', sort)
 }
@@ -163,7 +165,7 @@ const emitUpdateFilter = (filters: DataTableFilterMeta | undefined) => {
   emits("update:tableContext", tableContext.value)
   emits('update:filters', filters)
 }
-const emitPage = (page : DataTablePageEvent) => {
+const emitPage = (page: DataTablePageEvent) => {
   tableContext.value.page = page.page
 
   emits("update:tableContext", tableContext.value)
@@ -171,15 +173,15 @@ const emitPage = (page : DataTablePageEvent) => {
 }
 const emitPageSize = () => {
   tableContext.value.perPage = perPage.value
-  
+
   emits("update:tableContext", tableContext.value)
 }
 
 watch(() => props.filters, (newValue) => {
   tableContext.value.filters = newValue
-  
+
   emits("update:tableContext", tableContext.value)
-}, {deep: true})
+}, { deep: true })
 
 onMounted(() => emits("update:tableContext", tableContext.value))
 </script>
\ No newline at end of file