diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
old mode 100644
new mode 100755
index f98ed5503..f440b5c58
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -150,7 +150,6 @@ test-api:
     - chmod 777 api/test-reports
     - docker run -e DATABASE_HOST=${POSTGRES_PORT_5432_TCP_ADDR} -e DATABASE_NAME=${POSTGRES_DB} -e DATABASE_USER=${POSTGRES_USER} -e DATABASE_PASSWORD=${POSTGRES_PASSWORD} -e ENABLED_PLUGINS='*' --mount=type=bind,source=$PWD/api/test-reports,target=/app/api/test-reports $CI_REGISTRY_IMAGE/api-test:$CI_COMMIT_SHORT_SHA pytest -n auto --junitxml=test-reports/junit.xml --cov=reportcreator_api --cov-report=term --cov-report=xml:test-reports/coverage.xml
 
-
 test-frontend:
   stage: test
   needs: [build-test-frontend]
@@ -165,6 +164,45 @@ test-frontend:
     - mkdir packages/frontend/test-reports
     - docker run --mount=type=bind,source=$PWD/packages/frontend/test-reports,target=/app/packages/frontend/test-reports $CI_REGISTRY_IMAGE/frontend-test:$CI_COMMIT_SHORT_SHA npm run test
 
+integration-test-frontend:
+  stage: test
+  image: docker:27.3.1
+  extends: .depends_docker
+  artifacts:
+    when: always
+    paths:
+      - packages2/frontend/test-reports
+    reports:
+      junit: packages2/frontend/test-reports/junit.xml
+  services:
+    - docker:27.3.1-dind
+  variables:
+    FF_NETWORK_PER_BUILD: "true"
+    DOCKER_HOST: tcp://docker:2375
+    DOCKER_TLS_CERTDIR: ""
+    POSTGRES_DB: postgres
+    POSTGRES_USER: postgres
+    POSTGRES_PASSWORD: postgres
+    DATABASE_HOST: postgres
+    POSTGRES_HOST_AUTH_METHOD: trust
+    SYSREPTOR_INTEGRATION_USER: reptor
+  script:
+  # Setup
+    - docker network create mynet
+    - docker pull postgres:15 -q
+    - docker pull mcr.microsoft.com/playwright:v1.49.0-noble -q
+    - docker pull $CI_REGISTRY_IMAGE/api-test:$CI_COMMIT_SHORT_SHA -q
+    - docker pull $CI_REGISTRY_IMAGE/frontend-test:$CI_COMMIT_SHORT_SHA -q
+    - docker cp $(docker create --name temp $CI_REGISTRY_IMAGE/frontend-test:$CI_COMMIT_SHORT_SHA):/app/packages/ packages2 && docker rm temp
+  # Run API + DB
+    - docker run --name postgres --rm --network=mynet --detach -e POSTGRES_DB=$POSTGRES_DB -e POSTGRES_USER=$POSTGRES_USER -e POSTGRES_PASSWORD=$POSTGRES_PASSWORD postgres:15
+    - docker run --name=api --rm --network=mynet --detach -e ENABLED_PLUGINS=* -e LICENSE=$SYSREPTOR_INTEGRATION_LICENSE -e SYSREPTOR_INTEGRATION_USER=$SYSREPTOR_INTEGRATION_USER -e DATABASE_HOST=postgres -e DATABASE_NAME=${POSTGRES_DB} -e DATABASE_USER=${POSTGRES_USER} -e DATABASE_PASSWORD=${POSTGRES_PASSWORD} -e DJANGO_SUPERUSER_PASSWORD=$SYSREPTOR_INTEGRATION_PASSWORD $CI_REGISTRY_IMAGE/api-test:$CI_COMMIT_SHORT_SHA
+  # Let the api migrations run...
+    - sleep 15
+  # Add Superuser
+    - docker exec api python3 manage.py createsuperuser --noinput --username=$SYSREPTOR_INTEGRATION_USER
+  # Run E2E Tests
+    - docker run --name=playwright --rm --network=mynet --mount=type=bind,source=$PWD/packages2/,target=/app/packages/ -w /app/packages/frontend/ -e FRONTEND_ADMIN_PASSWORD=$SYSREPTOR_INTEGRATION_PASSWORD -e FRONTEND_ADMIN_USER=$SYSREPTOR_INTEGRATION_USER -e LICENSE=$SYSREPTOR_INTEGRATION_LICENSE mcr.microsoft.com/playwright:v1.49.0-noble bash -c 'npx playwright test'
 build-release:
   stage: build-release
   extends: .depends_docker
@@ -193,7 +231,6 @@ build-release:
         docker buildx build --provenance false $BASE_IMAGE_BUILD_ARG --build-arg BUILDKIT_INLINE_CACHE=1 --build-arg VERSION="$VERSION_NUMBER" --cache-from $CI_REGISTRY_IMAGE/api-test:$CI_COMMIT_SHORT_SHA --cache-from $CI_REGISTRY_IMAGE/frontend-test:$CI_COMMIT_SHORT_SHA --target=api --platform linux/amd64,linux/arm64 --push --tag $CI_REGISTRY_IMAGE:$CI_COMMIT_TAG .
       fi
 
-
 release-gitlab-release:
   stage: release
   needs: [build-release]
@@ -205,7 +242,6 @@ release-gitlab-release:
   release:
     tag_name: "$CI_COMMIT_TAG"
     description: "$CI_COMMIT_TAG"
-    
 
 release-prod:
   stage: release
diff --git a/Dockerfile b/Dockerfile
old mode 100644
new mode 100755
index 3895d8331..57e310db5
--- a/Dockerfile
+++ b/Dockerfile
@@ -2,10 +2,10 @@
 ARG TESTED_API_IMAGE=undefined_test_image_used_in_ci
 ARG PROD_API_IMAGE=undefined_prod_image_used_in_ci
 
-
-
 FROM --platform=$BUILDPLATFORM node:20-alpine3.19 AS frontend-dev
 ENV NODE_OPTIONS="--max-old-space-size=4096"
+# Install curl
+RUN apk add --no-cache curl
 WORKDIR /app/packages/
 
 
@@ -167,6 +167,7 @@ ENV VERSION=dev \
 
 # Start server
 EXPOSE 8000
+COPY --chown=1000:1000 api/start.sh /app/api/
 CMD ["/bin/bash", "/app/api/start.sh"]
 
 
@@ -188,7 +189,6 @@ RUN mkdir -p /app/api/sysreptor_plugins/ && chmod 777 /app/api/sysreptor_plugins
 # Copy generated template rendering script
 COPY --from=rendering --chown=user:user /app/packages/rendering/dist /app/packages/rendering/dist/
 
-
 FROM --platform=$BUILDPLATFORM api-test AS api-statics
 # Generate static frontend files
 # Post-process django files (for admin, API browser) and post-process them (e.g. add unique file hash)
@@ -226,7 +226,5 @@ RUN dpkg-query -W -f='${binary:Package}=${Version}\n' > /src/post_installed.txt
     && bash /app/api/download_sources.sh
 USER 1000
 
-
-
 # Default stage
 FROM api
diff --git a/dev/docker-compose.yml b/dev/docker-compose.yml
old mode 100644
new mode 100755
index 68447bb12..03a535989
--- a/dev/docker-compose.yml
+++ b/dev/docker-compose.yml
@@ -26,6 +26,27 @@ services:
       REDIS_PASSWORD: reportcreator
     expose:
       - 6379
+  integration-tests:
+    profiles: [test]
+    image: mcr.microsoft.com/playwright:v1.49.0-noble
+    working_dir: /app/packages/frontend/
+    environment:
+      DEBUG: pw:browser
+      # DISPLAY: :0 # for running with --ui in WSL 2 with XServer
+      FRONTEND_ADMIN_USER: "reptor"
+    env_file: ../deploy/app.env
+    volumes:
+      - type: bind
+        source: ../packages/
+        target: /app/packages/
+      - /var/run/docker.sock:/var/run/docker.sock
+      - /tmp/.X11-unix:/tmp/.X11-unix
+    command: npx playwright test # --ui
+    # depends_on:
+    #   frontend:
+    #     condition: service_healthy
+    #   api:
+    #     condition: service_healthy
   # rabbitmq:
   #   image: rabbitmq:3
   #   hostname: rabbitmq
@@ -172,6 +193,12 @@ services:
       # CELERY_BROKER_URL: amqp://reportcreator:reportcreator@rabbitmq:5672/
       # CELERY_RESULT_BACKEND: reportcreator_api.tasks.rendering.celery_worker:CustomRPCBackend://reportcreator:reportcreator@rabbitmq:5672/
     env_file: ../deploy/app.env
+    # healthcheck:
+    #   test: ["CMD", "curl", "-f", "-so", "/dev/null", "http://localhost:8000/api/public/utils/healthcheck/"]
+    #   interval: 30s
+    #   timeout: 30s
+    #   retries: 5
+    #   start_period: 10s
     depends_on:
       db:
         condition: service_healthy
@@ -189,6 +216,12 @@ services:
       context: ..
       target: frontend-dev
     command: npm run --workspace=frontend dev
+    # healthcheck: 
+    #   test: ["CMD", "sh", "-c", "curl -s http://localhost:3000/ | grep __nuxt && exit 0 || exit 1"]
+    #   interval: 30s
+    #   timeout: 30s
+    #   retries: 5
+    #   start_period: 10s
     volumes:
       - type: bind
         source: ../packages/
diff --git a/packages/frontend/.gitignore b/packages/frontend/.gitignore
index 1239662e0..f28f856d2 100644
--- a/packages/frontend/.gitignore
+++ b/packages/frontend/.gitignore
@@ -36,3 +36,12 @@ coverage
 
 # Unit test output
 test-reports
+test-results
+
+test/e2e/state.json
+test/e2e/demodata/
+
+
+!src/public/static/pdfviewer/dist/
+src/public/static/pdfviewer/dist/**/*
+!src/public/static/pdfviewer/dist/.gitkeep
diff --git a/packages/frontend/package.json b/packages/frontend/package.json
old mode 100644
new mode 100755
index 4ec0897ef..501e56c1a
--- a/packages/frontend/package.json
+++ b/packages/frontend/package.json
@@ -14,12 +14,10 @@
   "dependencies": {
     "@sysreptor/nuxt-base-layer": "../nuxt-base-layer",
     "@sysreptor/markdown": "../markdown",
-    
     "nuxt": "~3.14",
     "vuetify": "~3.7",
     "pinia": "^2.2.4",
     "sass-embedded": "^1.79.5",
-
     "@vueuse/nuxt": "^12.0.0",
     "monaco-editor": "^0.52.0",
     "vuedraggable": "^4.1.0",
@@ -27,7 +25,6 @@
     "@iconify/icons-fluent-emoji": "^1.2.10",
     "@github/webauthn-json": "^2.1.1",
     "@elastic/apm-rum-vue": "^2.1.5",
-
     "date-fns": "^4.1.0",
     "lodash-es": "^4.17.21",
     "dompurify": "^3.1.6"
@@ -44,4 +41,4 @@
   "overrides": {
     "vue": "latest"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/frontend/playwright.config.ts b/packages/frontend/playwright.config.ts
new file mode 100755
index 000000000..1da3b9dea
--- /dev/null
+++ b/packages/frontend/playwright.config.ts
@@ -0,0 +1,33 @@
+import { defineConfig } from '@playwright/test';
+
+export default defineConfig({
+  globalSetup: './test/e2e/global-setup',
+  reporter: [
+    ['junit', {  outputFile: 'test-reports/junit.xml' }]
+  ],
+  outputDir: './test-reports',
+  testDir: './test/e2e',
+  // fullyParallel: true,
+
+  // Fail the build on CI if you accidentally left test.only in the source code.
+  forbidOnly: !!process.env.CI,
+
+  // Retry on CI only.
+  retries: process.env.CI ? 2 : 0,
+
+  // Opt out of parallel tests on CI.
+  workers: 1,
+
+  use: {
+    baseURL: 'http://localhost:3000',
+    // Collect trace when retrying the failed test.
+    trace: 'on-first-retry',
+    storageState: './test/e2e/state.json',
+  },
+  webServer: {
+    command: 'echo "starting webserver" && npm run dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: true,
+    stdout: "pipe",
+  },
+});
\ No newline at end of file
diff --git a/packages/frontend/src/components/CreateFindingDialog.vue b/packages/frontend/src/components/CreateFindingDialog.vue
index 3a0fd6718..ab306b858 100644
--- a/packages/frontend/src/components/CreateFindingDialog.vue
+++ b/packages/frontend/src/components/CreateFindingDialog.vue
@@ -1,10 +1,11 @@
 <template>
-  <s-dialog v-model="dialogVisible" width="60%" max-width="60%">
+  <s-dialog v-model="dialogVisible" width="60%" max-width="60%" data-testid="create-finding-dialog">
     <template #activator>
       <btn-confirm
         :action="() => dialogVisible = true"
         :confirm="false"
         :disabled="project.readonly"
+        data-testid="create-finding-button"
         button-text="Add"
         button-icon="mdi-plus"
         tooltip-text="Add Finding (Ctrl+J)"
@@ -49,10 +50,10 @@
               </template>
 
               <template #no-data v-if="templates.data.value.length === 0 && templates.hasNextPage.value">
-                <page-loader :items="templates" />
+                <page-loader :items="templates" data-testid="page-loader" />
               </template>
               <template #append-item v-if="templates.data.value.length > 0">
-                <page-loader :items="templates" />
+                <page-loader :items="templates" data-testid="page-loader" />
               </template>
             </s-combobox>
           </v-col>
diff --git a/packages/frontend/src/components/Design/CreateDesignDialog.vue b/packages/frontend/src/components/Design/CreateDesignDialog.vue
index 814088ad5..62369ad58 100644
--- a/packages/frontend/src/components/Design/CreateDesignDialog.vue
+++ b/packages/frontend/src/components/Design/CreateDesignDialog.vue
@@ -14,6 +14,7 @@
         <s-project-type-selection
           v-model="currentDesign"
           label="Copy Existing Design (optional)"
+          data-testid="copy-existing-design"
           return-object
           :required="false"
           autofocus
@@ -36,6 +37,7 @@
           v-else
           @click="createEmptyDesign"
           :loading="actionInProgress"
+          data-testid="submit-design"
           text="Create Empty Design"
         />
       </v-card-actions>
diff --git a/packages/frontend/src/components/Design/InputFieldDefinition.vue b/packages/frontend/src/components/Design/InputFieldDefinition.vue
index 4f28c04f2..46cc248d3 100644
--- a/packages/frontend/src/components/Design/InputFieldDefinition.vue
+++ b/packages/frontend/src/components/Design/InputFieldDefinition.vue
@@ -248,6 +248,7 @@
         v-model:markdown-editor-mode="localSettings.designMarkdownEditorMode"
         :readonly="props.readonly"
         :disable-validation="true"
+        data-testid='default-value'
       />
 
       <!-- List Item -->
diff --git a/packages/frontend/src/components/History/Timeline.vue b/packages/frontend/src/components/History/Timeline.vue
index ef8410173..bb529db42 100644
--- a/packages/frontend/src/components/History/Timeline.vue
+++ b/packages/frontend/src/components/History/Timeline.vue
@@ -40,12 +40,13 @@
           v-if="props.currentUrl"
           :value="{history_type: '~', history_change_reason: 'Current Version'} as unknown as HistoryTimelineRecord"
           :to="currentUrl"
+
         >
           <template #info><span /></template>
         </history-timeline-item>
         <template v-for="item, idx in historyRecords.data.value" :key="idx">
           <slot v-if="!(idx === 0 && item.history_type === '~' && !item.history_change_reason)" name="item" :item="item">
-            <history-timeline-item :value="item" />
+    <history-timeline-item :value="item" />
           </slot>
         </template>
       </v-timeline>
diff --git a/packages/frontend/src/components/History/TimelineItem.vue b/packages/frontend/src/components/History/TimelineItem.vue
index 0fb9e7741..2782f6449 100644
--- a/packages/frontend/src/components/History/TimelineItem.vue
+++ b/packages/frontend/src/components/History/TimelineItem.vue
@@ -6,6 +6,7 @@
     :class="{'timeline-item-link': !!to, 'nuxt-link-active': isExactActive}"
     @click="to ? navigate() : undefined"
     @auxclick="to ? openInNewTab($event) : undefined"
+    :data-testid="`timeline-item-${props.value.history_title}`"
   >
     <slot name="info">
       <chip-date :value="props.value.history_date" />
@@ -14,10 +15,10 @@
       <br>
     </slot>
 
-    <slot name="title">
-      <span v-if="props.value.history_change_reason">{{ props.value.history_change_reason }}</span>
-      <span v-else-if="props.value.history_type === '+'">Created</span>
-      <span v-else-if="props.value.history_type === '-'">Deleted</span>
+    <slot name="title" >
+      <span v-if="props.value.history_change_reason" :data-testid="`timeline-item-${props.value.history_title}`">{{ props.value.history_change_reason }}</span>
+      <span v-else-if="props.value.history_type === '+'" :data-testid="`timeline-item-${props.value.history_title}`">Created</span>
+      <span v-else-if="props.value.history_type === '-'" :data-testid="`timeline-item-${props.value.history_title}`">Deleted</span>
     </slot>
   </v-timeline-item>
 </template>
diff --git a/packages/frontend/src/components/LoginForm.vue b/packages/frontend/src/components/LoginForm.vue
index 8211d77da..f6ce9f543 100644
--- a/packages/frontend/src/components/LoginForm.vue
+++ b/packages/frontend/src/components/LoginForm.vue
@@ -45,6 +45,7 @@
           <slot name="actions"></slot>
           <s-btn-primary
             type="submit"
+            data-testid="login-submit"
             text="Login"
           />
         </v-card-actions>
@@ -157,9 +158,9 @@
 </template>
 
 <script setup lang="ts">
+import { LoginResponseStatus, mfaMethodChoices, MfaMethodType } from '#imports';
 import { get as navigatorCredentialsGet, parseRequestOptionsFromJSON } from "@github/webauthn-json/browser-ponyfill";
 import type { VOtpInput } from "vuetify/components";
-import { LoginResponseStatus, mfaMethodChoices, MfaMethodType } from '#imports';
 
 const props = defineProps({
   username: {
diff --git a/packages/frontend/src/components/Markdown/Toolbar.vue b/packages/frontend/src/components/Markdown/Toolbar.vue
index 4155f78e9..bc24e7de0 100644
--- a/packages/frontend/src/components/Markdown/Toolbar.vue
+++ b/packages/frontend/src/components/Markdown/Toolbar.vue
@@ -72,7 +72,7 @@
       size="small"
       density="comfortable"
     >
-      <v-icon icon="mdi-dots-vertical" />
+      <v-icon icon="mdi-dots-vertical"/>
       <v-tooltip activator="parent" location="top" text="More actions" />
 
       <v-menu activator="parent">
@@ -95,30 +95,30 @@
 </template>
 
 <script setup lang="ts">
+import { MarkdownEditorMode, type ReferenceItem } from '#imports';
+import { levelNumberFromLevelName } from '@base/utils/cvss';
 import {
-  type EditorView,
   type EditorState,
+  type EditorView,
   insertCodeBlock,
   insertTable,
   insertText,
+  isTaskListInSelection,
+  isTypeInSelection,
   redo,
   redoDepth,
   toggleEmphasis,
+  toggleFootnote,
   toggleLink,
   toggleListOrdered,
   toggleListUnordered,
-  toggleTaskList,
   toggleStrikethrough,
   toggleStrong,
-  toggleFootnote,
+  toggleTaskList,
   undo,
   undoDepth,
-  isTypeInSelection,
-  isTaskListInSelection,
 } from '@sysreptor/markdown/editor';
 import type { VToolbar } from 'vuetify/lib/components/index.mjs';
-import { levelNumberFromLevelName } from '@base/utils/cvss';
-import { MarkdownEditorMode, type ReferenceItem } from '#imports';
 
 const props = defineProps<{
   editorView?: EditorView|null;
diff --git a/packages/frontend/src/components/Notes/Menu.vue b/packages/frontend/src/components/Notes/Menu.vue
index cfcf1b800..7d0ecd95e 100644
--- a/packages/frontend/src/components/Notes/Menu.vue
+++ b/packages/frontend/src/components/Notes/Menu.vue
@@ -90,6 +90,7 @@
             :action="props.createNote!"
             :disabled="!canCreate"
             :confirm="false"
+            data-testid="create-note"
             button-text="Add"
             button-icon="mdi-plus"
             tooltip-text="Add Note (Ctrl+J)"
diff --git a/packages/frontend/src/components/Notes/SortableList.vue b/packages/frontend/src/components/Notes/SortableList.vue
index 247caa191..69cbb0243 100644
--- a/packages/frontend/src/components/Notes/SortableList.vue
+++ b/packages/frontend/src/components/Notes/SortableList.vue
@@ -72,8 +72,8 @@
 </template>
 
 <script setup lang="ts">
-import Draggable from "vuedraggable";
 import { collabSubpath } from '#imports';
+import Draggable from "vuedraggable";
 
 const router = useRouter();
 const auth = useAuth();
diff --git a/packages/frontend/src/components/Template/Editor.vue b/packages/frontend/src/components/Template/Editor.vue
index 17927534a..83620a90c 100644
--- a/packages/frontend/src/components/Template/Editor.vue
+++ b/packages/frontend/src/components/Template/Editor.vue
@@ -55,6 +55,7 @@
           <dynamic-input-field
             :readonly="props.readonly"
             v-bind="fieldAttrs(translation, fieldDefinitionTitle)"
+            :data-testid="`title-${translation.language}`"
           />
 
           <s-status-selection
@@ -64,6 +65,7 @@
             variant="outlined"
             density="default"
             class="mt-4"
+            data-testid="template-status"
           />
           <s-tags
             :model-value="template.tags"
@@ -122,9 +124,9 @@
 </template>
 
 <script setup lang="ts">
-import { cloneDeep } from "lodash-es";
-import { uuidv4 } from "@base/utils/helpers";
 import type { MarkdownEditorMode } from "#imports";
+import { uuidv4 } from "@base/utils/helpers";
+import { cloneDeep } from "lodash-es";
 
 const props = withDefaults(defineProps<{
   modelValue: FindingTemplate;
diff --git a/packages/frontend/src/components/Template/SelectItem.vue b/packages/frontend/src/components/Template/SelectItem.vue
index 1b0d5df3c..12a29fc8f 100644
--- a/packages/frontend/src/components/Template/SelectItem.vue
+++ b/packages/frontend/src/components/Template/SelectItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-list-item-title class="w-100 d-flex">
+  <v-list-item-title class="w-100 d-flex" :data-testid="'select-item-' + translation.data.title">
     <chip-cvss :risk-score="translation.risk_score" :risk-level="translation.risk_level" />
     <div class="pt-2 pb-2 flex-grow-1 wrap-content">
       {{ translation.data.title }}
diff --git a/packages/frontend/src/components/UserInfoForm.vue b/packages/frontend/src/components/UserInfoForm.vue
index 79309a93f..5a59533c0 100644
--- a/packages/frontend/src/components/UserInfoForm.vue
+++ b/packages/frontend/src/components/UserInfoForm.vue
@@ -114,6 +114,7 @@
         <s-checkbox
           :model-value="user.is_template_editor" @update:model-value="updateField('is_template_editor', $event)"
           label="Template Editor"
+          data-testid="template-editor-checkbox"
           hint="Template Editors are allowed to create and edit finding templates."
           :error-messages="errors?.is_template_editor || []"
           :disabled="!canEditGeneralPermissions"
@@ -122,6 +123,7 @@
         <s-checkbox
           :model-value="user.is_designer" @update:model-value="updateField('is_designer', $event)"
           label="Designer"
+          data-testid="designer-checkbox"
           hint="Designers can create and edit report designs. Users without this permission can create and edit private designs."
           :error-messages="errors?.is_designer || []"
           :disabled="!canEditGeneralPermissions"
@@ -130,6 +132,7 @@
         <s-checkbox
           :model-value="user.is_user_manager" @update:model-value="updateField('is_user_manager', $event)"
           label="User Manager"
+          data-testid="user-manager-checkbox"
           hint="User Managers can create and update other users, assign permissions and reset passwords (except superusers)."
           :error-messages="errors?.is_user_manager || []"
           :disabled="!canEditGeneralPermissions"
@@ -146,6 +149,7 @@
         <s-checkbox
           :model-value="user.is_global_archiver" @update:model-value="updateField('is_global_archiver', $event)"
           label="Global Archiver"
+          data-testid="global-archiver-checkbox"
           hint="Global Archivers will be added to archives when archiving projects (besides project members) and are able to restore these projects. They need to have archiving public keys configured for this permission take effect."
           :error-messages="errors?.is_global_archiver || []"
           :disabled="!canEditGeneralPermissions || !apiSettings.settings!.features.archiving"
@@ -154,6 +158,7 @@
         <s-checkbox
           :model-value="user.is_project_admin" @update:model-value="updateField('is_project_admin', $event)"
           label="Project Admin"
+          data-testid="project-admin-checkbox"
           hint="Project Admins can access and manage all projects, regardless if they are members of the project or not."
           :error-messages="errors?.is_project_admin || []"
           :disabled="!canEditGeneralPermissions"
diff --git a/packages/frontend/src/components/UserInfoMenuItem.vue b/packages/frontend/src/components/UserInfoMenuItem.vue
index 354dec86b..07bc95925 100644
--- a/packages/frontend/src/components/UserInfoMenuItem.vue
+++ b/packages/frontend/src/components/UserInfoMenuItem.vue
@@ -2,7 +2,7 @@
   <s-btn-icon>
     <v-icon icon="mdi-account" />
 
-    <v-menu activator="parent" location="bottom">
+    <v-menu activator="parent" location="bottom" data-testid="profile-menu-modal">
       <v-list>
         <v-list-item
           v-if="auth.user.value"
@@ -20,6 +20,8 @@
           to="/users/self/"
           prepend-icon="mdi-account"
           title="Profile"
+          data-testid="profile-button"
+
         />
         <template v-if="auth.loggedIn.value && apiSettings.isProfessionalLicense">
           <v-list-item
diff --git a/packages/frontend/src/layouts/default.vue b/packages/frontend/src/layouts/default.vue
index 9f2a07cc1..eb32a6ae2 100644
--- a/packages/frontend/src/layouts/default.vue
+++ b/packages/frontend/src/layouts/default.vue
@@ -34,7 +34,9 @@
         <v-icon icon="mdi-help-circle" />
         <s-tooltip activator="parent" location="bottom" text="Documentation" />
       </s-btn-icon>
-      <user-info-menu-item />
+      <user-info-menu-item 
+      data-testid="profile-button"
+      />
     </v-app-bar>
 
     <v-navigation-drawer v-if="auth.loggedIn.value" v-bind="naviagtionDrawerProps" color="drawer" class="menu-drawer">
@@ -43,10 +45,10 @@
         <span class="license-text">{{ licenseText }}</span>
       </div>
       <v-list class="pt-0 menu-drawer-body">
-        <v-list-item to="/projects/" title="Projects" prepend-icon="mdi-file-document" :active="route.path.startsWith('/projects')" />
-        <v-list-item to="/templates/" title="Templates" prepend-icon="mdi-view-compact" :active="route.path.startsWith('/templates')" />
-        <v-list-item to="/designs/" title="Designs" prepend-icon="mdi-pencil-ruler" :active="route.path.startsWith('/designs')" />
-        <v-list-item to="/notes/personal/" title="Notes" prepend-icon="mdi-notebook" :active="route.path.startsWith('/notes')" />
+        <v-list-item to="/projects/" title="Projects" prepend-icon="mdi-file-document" :active="route.path.startsWith('/projects')" data-testid="projects-tab"/>
+        <v-list-item to="/templates/" title="Templates" prepend-icon="mdi-view-compact" :active="route.path.startsWith('/templates')" data-testid="templates-tab" />
+        <v-list-item to="/designs/" title="Designs" prepend-icon="mdi-pencil-ruler" :active="route.path.startsWith('/designs')" data-testid="design-tab"/>
+        <v-list-item to="/notes/personal/" title="Notes" prepend-icon="mdi-notebook" :active="route.path.startsWith('/notes')" data-testid="notes-tab" />
         
         <template v-if="pluginMenuEntries.length > 0">
           <v-list-subheader title="Plugins" class="mt-4 pa-0" />
@@ -78,6 +80,7 @@
                   :to="{path: '/users/self/admin/enable/', query: { next: route.fullPath }}"
                   :disabled="!auth.user.value!.is_superuser" 
                   density="comfortable" 
+                  data-testid="enable-superuser"
                 >
                   <v-icon size="small" icon="mdi-account-arrow-up" />
                   <s-tooltip activator="parent" text="Enable Superuser Permissions" />
@@ -89,6 +92,7 @@
           <v-list-item 
             to="/users/" 
             title="Users" 
+            data-testid="users-tab"
             prepend-icon="mdi-account-multiple" 
             :active="route.path.startsWith('/users') && !route.path.startsWith('/users/self')"
             :disabled="!auth.permissions.value.user_manager" 
diff --git a/packages/frontend/src/pages/designs/[projectTypeId]/index.vue b/packages/frontend/src/pages/designs/[projectTypeId]/index.vue
index d26122920..735892382 100644
--- a/packages/frontend/src/pages/designs/[projectTypeId]/index.vue
+++ b/packages/frontend/src/pages/designs/[projectTypeId]/index.vue
@@ -55,8 +55,8 @@
 </template>
 
 <script setup lang="ts">
-import type { VForm } from 'vuetify/components';
 import { ProjectTypeStatusItems, useProjectTypeLockEditOptions } from "#imports";
+import type { VForm } from 'vuetify/components';
 
 const auth = useAuth();
 const projectTypeStore = useProjectTypeStore();
diff --git a/packages/frontend/src/pages/designs/index.vue b/packages/frontend/src/pages/designs/index.vue
index 102606b47..1ce0e9062 100644
--- a/packages/frontend/src/pages/designs/index.vue
+++ b/packages/frontend/src/pages/designs/index.vue
@@ -11,8 +11,8 @@
     >
       <template #title>Designs</template>
       <template #actions>
-        <design-create-design-dialog :project-type-scope="ProjectTypeScope.GLOBAL" />
-        <design-import-design-dialog ref="importBtnRef" :project-type-scope="ProjectTypeScope.GLOBAL" />
+        <design-create-design-dialog :project-type-scope="ProjectTypeScope.GLOBAL" data-testid="add-design-button"/>
+        <design-import-design-dialog ref="importBtnRef" :project-type-scope="ProjectTypeScope.GLOBAL" data-testid="import-design" />
       </template>
       <template #tabs v-if="apiSettings.settings!.features.private_designs">
         <v-tab :to="{ path: '/designs/', query: route.query }" exact prepend-icon="mdi-earth" text="Global" />
diff --git a/packages/frontend/src/pages/designs/private.vue b/packages/frontend/src/pages/designs/private.vue
index d4a3733ac..968cc80bb 100644
--- a/packages/frontend/src/pages/designs/private.vue
+++ b/packages/frontend/src/pages/designs/private.vue
@@ -11,7 +11,7 @@
     >
       <template #title>Designs</template>
       <template #actions>
-        <design-create-design-dialog :project-type-scope="ProjectTypeScope.PRIVATE" />
+        <design-create-design-dialog :project-type-scope="ProjectTypeScope.PRIVATE"/>
         <design-import-design-dialog ref="importBtnRef" :project-type-scope="ProjectTypeScope.PRIVATE" />
       </template>
       <template #tabs v-if="apiSettings.settings!.features.private_designs">
diff --git a/packages/frontend/src/pages/login/local.vue b/packages/frontend/src/pages/login/local.vue
index 2b3ef69a7..a67635b42 100644
--- a/packages/frontend/src/pages/login/local.vue
+++ b/packages/frontend/src/pages/login/local.vue
@@ -36,6 +36,7 @@
             <v-card-actions>
               <v-spacer />
               <s-btn-other
+                data-testid="mfa-setup-skip"
                 text="Skip"
                 @click="auth.redirect()"
               />
diff --git a/packages/frontend/src/pages/projects/[projectId].vue b/packages/frontend/src/pages/projects/[projectId].vue
index fb60f2735..89796f1bf 100644
--- a/packages/frontend/src/pages/projects/[projectId].vue
+++ b/packages/frontend/src/pages/projects/[projectId].vue
@@ -2,22 +2,22 @@
   <full-height-page>
     <s-sub-drawer>
       <template #default="{ isExpanded }" v-if="project">
-        <v-list-item :to="`/projects/${project.id}/`" exact prepend-icon="mdi-cogs" title="Settings">
+        <v-list-item :to="`/projects/${project.id}/`" exact prepend-icon="mdi-cogs" title="Settings" data-testid="project-settings-tab">
           <s-tooltip v-if="!isExpanded" activator="parent" text="Project Settings" />
         </v-list-item>
-        <v-list-item :to="`/projects/${project.id}/notes/`" prepend-icon="mdi-notebook" title="Notes">
+        <v-list-item :to="`/projects/${project.id}/notes/`" prepend-icon="mdi-notebook" title="Notes" data-testid="project-notes-tab">
           <s-tooltip v-if="!isExpanded" activator="parent" text="Notes" />
         </v-list-item>
-        <v-list-item :to="`/projects/${project.id}/reporting/`" prepend-icon="mdi-text" title="Reporting">
+        <v-list-item :to="`/projects/${project.id}/reporting/`" prepend-icon="mdi-text" title="Reporting" data-testid="project-reporting-tab">
           <s-tooltip v-if="!isExpanded" activator="parent" text="Reporting" />
         </v-list-item>
-        <v-list-item :to="`/projects/${project.id}/designer/`" v-if="projectType?.source === 'customized'" prepend-icon="mdi-pencil-ruler" title="Designer">
+        <v-list-item :to="`/projects/${project.id}/designer/`" v-if="projectType?.source === 'customized'" prepend-icon="mdi-pencil-ruler" title="Designer" data-testid="project-designer-tab">
           <s-tooltip v-if="!isExpanded" activator="parent" text="Designer" />
         </v-list-item>
-        <v-list-item :to="`/projects/${project.id}/publish/`" prepend-icon="mdi-earth" title="Publish">
+        <v-list-item :to="`/projects/${project.id}/publish/`" prepend-icon="mdi-earth" title="Publish" data-testid="project-publish-tab">
           <s-tooltip v-if="!isExpanded" activator="parent" text="Publish" />
         </v-list-item>
-        <v-list-item :to="`/projects/${project.id}/history/`" prepend-icon="mdi-history" title="History">
+        <v-list-item :to="`/projects/${project.id}/history/`" prepend-icon="mdi-history" title="History" data-testid="project-history-tab">
           <s-tooltip v-if="!isExpanded" activator="parent" text="History" />
         </v-list-item>
         
diff --git a/packages/frontend/src/pages/projects/[projectId]/notes/[noteId]/index.vue b/packages/frontend/src/pages/projects/[projectId]/notes/[noteId]/index.vue
index dc90add6e..bfd0c0fac 100644
--- a/packages/frontend/src/pages/projects/[projectId]/notes/[noteId]/index.vue
+++ b/packages/frontend/src/pages/projects/[projectId]/notes/[noteId]/index.vue
@@ -28,6 +28,7 @@
               @collab="notesCollab.onCollabEvent"
               :readonly="readonly"
               :spellcheck-supported="true"
+              data-testid="note-title"
               v-bind="inputFieldAttrs"
               class="note-title"
             />
@@ -88,6 +89,7 @@
         :collab="collabSubpath(notesCollab.collabProps.value, 'text')"
         @collab="notesCollab.onCollabEvent"
         :readonly="readonly"
+        data-testid="note-text"
         v-bind="inputFieldAttrs"
       />
     </template>
@@ -95,8 +97,8 @@
 </template>
 
 <script setup lang="ts">
-import { urlJoin } from "@base/utils/helpers";
 import { collabSubpath } from '#imports';
+import { urlJoin } from "@base/utils/helpers";
 
 const route = useRoute();
 const localSettings = useLocalSettings();
diff --git a/packages/frontend/src/pages/projects/[projectId]/reporting.vue b/packages/frontend/src/pages/projects/[projectId]/reporting.vue
index 71e3da799..dd870eb84 100644
--- a/packages/frontend/src/pages/projects/[projectId]/reporting.vue
+++ b/packages/frontend/src/pages/projects/[projectId]/reporting.vue
@@ -72,6 +72,7 @@
                 :ripple="false"
                 density="compact"
                 :class="'finding-level-' + riskLevel(finding)"
+                :data-testid="'finding-' + finding.title"
               >
                 <template #prepend>
                   <div v-if="sortFindingsManual" class="draggable-handle mr-2">
@@ -116,8 +117,8 @@
 </template>
 
 <script setup lang="ts">
-import Draggable from "vuedraggable";
 import { collabSubpath, ReviewStatus } from '#imports';
+import Draggable from "vuedraggable";
 
 const route = useRoute();
 const router = useRouter();
diff --git a/packages/frontend/src/pages/projects/[projectId]/reporting/findings/[findingId]/index.vue b/packages/frontend/src/pages/projects/[projectId]/reporting/findings/[findingId]/index.vue
index 4fe9e827e..f35761b0b 100644
--- a/packages/frontend/src/pages/projects/[projectId]/reporting/findings/[findingId]/index.vue
+++ b/packages/frontend/src/pages/projects/[projectId]/reporting/findings/[findingId]/index.vue
@@ -73,6 +73,7 @@
         :id="fieldDefinition.id"
         :definition="fieldDefinition"
         v-bind="inputFieldAttrs"
+        :data-testid="fieldDefinition.id"
       />
     </v-container>
   </div>
diff --git a/packages/frontend/src/pages/projects/new.vue b/packages/frontend/src/pages/projects/new.vue
index 4386dce79..385ba2aa2 100644
--- a/packages/frontend/src/pages/projects/new.vue
+++ b/packages/frontend/src/pages/projects/new.vue
@@ -5,6 +5,7 @@
         <template #title>Create new Project</template>
         <template #default>
           <s-btn-primary 
+            data-testid="submit-project"
             type="submit"
             text="Create"
             prepend-icon="mdi-content-save"
@@ -23,6 +24,7 @@
         v-model="projectForm.project_type" 
         :error-messages="serverErrors?.project_type || []"
         class="mt-4" 
+        data-testid="project-type"
       />
       <s-member-selection 
         v-model="projectForm.members" 
diff --git a/packages/frontend/src/pages/templates/index.vue b/packages/frontend/src/pages/templates/index.vue
index ed9daf5b7..59378a399 100644
--- a/packages/frontend/src/pages/templates/index.vue
+++ b/packages/frontend/src/pages/templates/index.vue
@@ -50,6 +50,7 @@
         />
         <btn-import 
           ref="importBtnRef"
+          data-testid="import-templates"
           :import="performImport"
           :disabled="!auth.permissions.value.template_editor"
         />
diff --git a/packages/frontend/src/pages/users/index.vue b/packages/frontend/src/pages/users/index.vue
index 9864d2ac2..98cbdfe78 100644
--- a/packages/frontend/src/pages/users/index.vue
+++ b/packages/frontend/src/pages/users/index.vue
@@ -19,7 +19,7 @@
       <v-list-item :to="`/users/${user.id}/`">
         <v-row>
           <v-col md="3">
-            <v-list-item-title>
+            <v-list-item-title :data-testid="'test-'+user.username">
               {{ user.username }}
               <template v-if="user.name">
                 ({{ user.name }})
diff --git a/packages/frontend/test/e2e/global-setup.ts b/packages/frontend/test/e2e/global-setup.ts
new file mode 100644
index 000000000..98b3bb861
--- /dev/null
+++ b/packages/frontend/test/e2e/global-setup.ts
@@ -0,0 +1,22 @@
+import { chromium, type FullConfig } from '@playwright/test';
+import { downloadDemoData, importDemoData } from './util/import_demodata';
+import { integrationLogin, integrationSuperuser, selfPromotion } from './util/integration_flows';
+
+async function globalSetup(config: FullConfig) {
+  const projectConfig = config.projects[0]?.use;
+  if (!projectConfig) {
+    throw new Error('Project configuration is undefined');
+  }
+  const { storageState, baseURL } = projectConfig;
+  const browser = await chromium.launch();
+  const page = await browser.newPage();
+  await integrationLogin(page, baseURL);
+  await integrationSuperuser(page);
+  await selfPromotion(page, baseURL);
+  await downloadDemoData(page);
+  await importDemoData(page);
+  // Let the demo data import...
+  await page.context().storageState({ path: storageState as string });
+}
+
+export default globalSetup;
\ No newline at end of file
diff --git a/packages/frontend/test/e2e/global-teardown.ts b/packages/frontend/test/e2e/global-teardown.ts
new file mode 100644
index 000000000..ea1d2555c
--- /dev/null
+++ b/packages/frontend/test/e2e/global-teardown.ts
@@ -0,0 +1,6 @@
+import { type FullConfig } from '@playwright/test';
+
+async function globalTeardown(config: FullConfig) {
+}
+
+export default globalTeardown;
\ No newline at end of file
diff --git a/packages/frontend/test/e2e/integration/designs.test.spec.ts b/packages/frontend/test/e2e/integration/designs.test.spec.ts
new file mode 100644
index 000000000..599e272e6
--- /dev/null
+++ b/packages/frontend/test/e2e/integration/designs.test.spec.ts
@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test';
+import { DemoDataState, DemoDataType } from '../util/demo_data';
+
+const designName = 'My Test Design';
+test('A User can create an Design with a Name', async ({ page }) => {
+  await page.goto('/designs');
+
+  // Navigate to Design Tab 
+  await expect(page).toHaveTitle("Designs | SysReptor");
+
+  // Create New Design Modal
+  await page.getByTestId('create-button').click();
+  await page.getByTestId('copy-existing-design').getByRole('textbox').fill(designName);
+  await page.locator('circle').nth(1).waitFor({state: 'hidden'});
+  await page.keyboard.press('Escape');
+  await page.getByTestId('submit-design').waitFor();
+  await page.getByTestId('submit-design').click();
+
+  // Enter Design Name
+  await page.getByLabel('Name').waitFor();
+  // Save Design Id
+  const url = page.url();
+  const designId = url.split('/').pop();
+  const testState = new DemoDataState();
+  testState.addId(DemoDataType.Design, designId);
+  await page.getByLabel('Name').fill(designName);
+
+  // Save Design
+  await page.getByTestId('save-toolbar').click();
+
+  // Open PDF Designer
+  await page.getByText('Report Fields').click();
+  await page.getByText('Executive Summary').click();
+  await page.getByText('**TODO: write executive').fill('This is a test executive summary');
+  await page.getByTestId('save-toolbar').click();
+  await page.getByText('Everything saved').waitFor();
+  await page.getByText('Finding Fields').click();
+  await page.getByText('Finding Ordering').waitFor();
+  await page.getByText('title').first().click();
+  await page.getByTestId('default-value').getByRole('textbox').clear()
+  await page.getByTestId('default-value').getByRole('textbox').fill('My Test Finding Title');
+  await page.getByTestId('save-toolbar').click();
+  await page.getByText('Everything saved').waitFor();
+});
+
+test('Design Settings are reflected in a Project', async ({ page }) => {
+  const testState = new DemoDataState();
+  await page.goto('/projects');
+  await page.waitForSelector('text=Projects');
+  await page.getByTestId('create-button').click();
+  await page.getByLabel('Name').fill('My Design Test Project');
+  await page.getByTestId('project-type').getByRole('textbox').fill(designName);
+  await page.getByTestId('page-loader').waitFor({ state: 'hidden' });
+  await page.getByText('No data found').waitFor({ state: 'hidden' });
+  const designId = testState.designs.at(testState.designs.length - 1);
+  await page.getByTestId(`design-${designId}`).click();
+  await page.getByTestId('submit-project').click();
+  await page.getByRole('link', { name: 'Executive Summary' }).click();
+  await page.getByLabel('Assignee', { exact: true }).waitFor();
+  expect(await page.getByRole('textbox').getByText('This is a test executive summary').isVisible()).toBeTruthy();
+  await page.getByTestId('create-finding-button').click();
+  await page.getByRole('button', { name: 'Create Empty Finding' }).click();
+  await page.getByTestId('create-finding-dialog').waitFor({ state: 'hidden' });
+  await page.getByTestId('title').getByRole('textbox').waitFor();
+  expect(await page.getByTestId('title').getByRole('textbox').getByText('My Test Finding Title').isVisible()).toBeTruthy();
+});
\ No newline at end of file
diff --git a/packages/frontend/test/e2e/integration/findings.test.spec.ts b/packages/frontend/test/e2e/integration/findings.test.spec.ts
new file mode 100644
index 000000000..9f36e8899
--- /dev/null
+++ b/packages/frontend/test/e2e/integration/findings.test.spec.ts
@@ -0,0 +1,123 @@
+import { expect, test } from '@playwright/test';
+import { DemoDataState } from '../util/demo_data';
+
+test('A User can Create a Finding an Export an Report', async ({ page }) => {
+  const projectId = new DemoDataState().projects[0];
+  await page.goto(`/projects/${projectId}`);
+  await page.getByText('Reporting').click();
+  await page.getByTestId('create-finding-button').click();
+  await page.getByLabel('Template (optional)').locator('nth=0').fill('SQL Injection');
+  await page.getByText('SQL Injection (SQLi)').locator('nth=0').waitFor()
+  await page.getByText('SQL Injection (SQLi)').locator('nth=0').click();
+  await page.getByText('Create From Template').click();
+  await page.getByRole('textbox').getByText('SQL Injection (SQLi)').waitFor();
+  await page.getByRole('textbox').getByText('SQL Injection (SQLi)').fill('My SQL Injection');
+  await page.getByText('Publish').click();
+  await page.waitForSelector('text=Download');
+  expect(await page.getByText('Download').isVisible()).toBeTruthy();
+});
+
+test('A User can edit a CVSS Score', async ({ page }) => {
+  const projectId = new DemoDataState().projects[0];
+  await page.goto(`/projects/${projectId}`);
+  await page.getByText('Project Settings').waitFor();
+  await page.getByTestId('project-reporting-tab').click();
+  await page.getByRole('link', { name: 'Ajla' }).waitFor();
+  await page.getByRole('link', { name: 'Ajla' }).click();
+  await page.getByLabel('CVSS').waitFor();
+  await page.getByRole('button', { name: 'CVSS Editor' }).click();
+  await page.waitForSelector('text=CVSS:3.1 Editor');
+  await page.getByTestId('cvss-metric-AV-N').click();
+  await page.getByTestId('cvss-metric-AC-H').click();
+  await page.getByTestId('cvss-metric-PR-L').click();
+  await page.getByTestId('cvss-metric-UI-R').click();
+  await page.getByTestId('cvss-metric-S-U').click();
+  await page.getByTestId('cvss-metric-C-L').click();
+  await page.getByTestId('cvss-metric-I-L').click();
+  await page.getByTestId('cvss-metric-A-L').click();
+
+  await page.getByTestId('cvss-metric-E-P').click();
+  await page.getByTestId('cvss-metric-RL-O').click();
+  await page.getByTestId('cvss-metric-RC-C').click();
+
+  expect(await page.getByRole('dialog').getByText('4.2').isVisible()).toBeTruthy();
+  await page.getByTestId('cvss-apply').click();
+  await page.getByRole('dialog').waitFor({ state: 'hidden' });
+
+  expect(await page.getByLabel('CVSS').textContent(), 'CVSS:3.1/AV:N/AC:H/PR:L/UI:R/S:U/C:L/I:L/A:L/E:P/RL:O/RC:C');
+
+  await page.getByTestId('project-settings-tab').click();
+  await page.getByLabel('Name').waitFor();
+
+});
+
+test('Version History correctly displays the changes CVSS changes', async ({ page }) => {
+  const projectId = new DemoDataState().projects[0];
+  await page.goto(`/projects/${projectId}`);
+  await page.getByText('Project Settings').waitFor();
+  await page.getByTestId('project-reporting-tab').click();
+  await page.getByRole('link', { name: 'Ajla' }).waitFor();
+  await page.getByRole('link', { name: 'Ajla' }).click();
+  await page.getByLabel('CVSS').waitFor();
+  await page.getByTestId('history-button').click();
+  await page.locator('circle').nth(1).waitFor({ state: 'hidden'})
+  await page.getByText('reptorImported').click();
+  await page.getByRole('link', { name: 'Close Version History' }).waitFor();
+  expect(await page.locator('#cvss').getByText('4.2').isVisible()).toBeTruthy();
+  expect(await page.getByText('10.0').isVisible()).toBeTruthy();
+});
+
+test('A User can assign a Finding to a User and change status', async ({ page }) => {
+  const projectId = new DemoDataState().projects[0];
+  await page.goto(`/projects/${projectId}`);
+  await page.getByText('Project Settings').waitFor();
+  await page.getByTestId('project-reporting-tab').click();
+  await page.getByRole('link', { name: 'Ajla' }).waitFor();
+  await page.getByRole('link', { name: 'Ajla' }).click();
+  await page.getByLabel('CVSS').waitFor();
+
+  // Happens when test are run out of order
+  if(await page.getByLabel('Clear Assignee').isVisible()) {
+    await page.getByLabel('Clear Assignee').click();
+  }
+  await page.getByLabel('Assignee', { exact: true }).click();
+  await page.getByText('reptor (User User)', { exact: true }).click();
+  await page.getByTestId('status-select').click();
+  await page.getByTestId('status-in-progress').waitFor();
+  await page.getByTestId('status-in-progress').click();
+  await page.keyboard.press('Escape');
+  await page.getByTestId('status-in-progress').waitFor({ state: 'hidden' });
+  expect(await page.locator('div').filter({ hasText: /^reptor \(User User\)$/ }).first().isVisible()).toBeTruthy();
+  expect(await page.getByTestId('status-select').getByText('In progress').isVisible()).toBeTruthy();
+});
+
+test('A User create a Template from a Finding', async ({ page }) => {
+  const projectId = new DemoDataState().projects[0];
+  await page.goto(`/projects/${projectId}`);
+  await page.getByText('Project Settings').waitFor();
+  await page.getByTestId('project-reporting-tab').click();
+  await page.getByRole('link', { name: 'DC', exact: true }).click();
+  await page.getByLabel('CVSS').waitFor();
+  await page.getByTestId('options-dots').click();
+  await page.getByText('Save as Template').click();
+  await page.getByTestId('title-en-US').getByRole('textbox').waitFor();
+  await page.getByTestId('title-en-US').getByRole('textbox').fill('My Template');
+  await page.getByTestId('template-status').click();
+  await page.getByTestId('status-finished').click();
+  await page.keyboard.press('Escape');
+  await page.getByRole('main').locator('button').nth(2).click();
+  await page.getByRole('button', { name: 'Save' }).click();
+
+  // Check if the template is saved and can be used
+  await page.goto(`/projects/${projectId}`);
+  await page.getByText('Project Settings').waitFor();
+  await page.getByTestId('project-reporting-tab').click();
+  await page.getByTestId('create-finding-button').click();
+  await page.getByLabel('Template (optional)').locator('nth=0').fill('My Template');
+  await page.getByTestId('page-loader').waitFor({ state: 'hidden' });
+  await page.getByTestId('select-item-My Template').first().click();
+  await page.getByRole('button', { name: 'Create from Template' }).click();
+  await page.getByRole('button', { name: 'Create from Template' }).waitFor({ state: 'hidden' });
+  await page.getByTestId('create-finding-dialog').waitFor({ state: 'hidden' });
+  expect(await page.getByRole('link', { name: 'My Template @reptor' }).first().isVisible()).toBeTruthy();
+});
diff --git a/packages/frontend/test/e2e/integration/notes.test.spec.ts b/packages/frontend/test/e2e/integration/notes.test.spec.ts
new file mode 100644
index 000000000..2033df507
--- /dev/null
+++ b/packages/frontend/test/e2e/integration/notes.test.spec.ts
@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test';
+import { DemoDataState } from '../util/demo_data';
+const noteTitle = 'My First Note';
+const noteText = 'This is my first note';
+
+test('A User can create, write and delete a Note', async ({ page }) => {
+  const projectId = new DemoDataState().projects[0];
+  await page.goto(`/projects/${projectId}`);
+
+  // Open Notes Tab
+  await page.getByTestId('project-notes-tab').click();
+
+  // Create a Note
+  await page.getByTestId('create-note').click();
+
+  await page.getByTestId('note-title').getByRole('textbox').fill(noteTitle);
+
+  await page.getByTestId('note-text').getByRole('textbox').fill(noteText);
+
+  await page.getByTestId('note-title').getByText(noteTitle).waitFor();
+  
+  await page.getByTestId('note-text').getByRole('textbox').getByText(noteText).waitFor();
+
+  expect(await page.getByTestId('note-title').getByText(noteTitle).isVisible()).toBeTruthy();
+  expect(await page.getByTestId('note-text').getByRole('textbox').getByText(noteText).isVisible()).toBeTruthy();
+
+  await page.getByTestId('options-dots').click();
+  await page.getByText('Delete').click();
+  await page.getByRole('button', { name: 'Delete' }).click();
+  await page.getByTestId('confirm-button').waitFor({ state: 'hidden' });
+  expect(await page.getByTestId('note-title').getByText(noteTitle).isVisible()).toBeFalsy();
+  expect(await page.getByTestId('note-text').getByRole('textbox').getByText(noteText).isVisible()).toBeFalsy();
+  expect(await page.getByText(noteTitle).isVisible()).toBeFalsy();
+});
+
+
+
+// test('ffasf', async ({ page }) => {
+//   await page.goto('/projects');
+//   await page.getByTestId('profile-button').click();
+//   await page.getByTestId('profile-menu-modal').waitFor({ state: 'visible' });
+//   await page.getByTestId('enable-superuser').click();
+//   await page.getByLabel('Password').fill(IntegrationAdmin.password);
+//   await page.getByTestId('login-submit').click();
+// });
\ No newline at end of file
diff --git a/packages/frontend/test/e2e/integration/plugins.test.spec.ts b/packages/frontend/test/e2e/integration/plugins.test.spec.ts
new file mode 100644
index 000000000..284bc32cf
--- /dev/null
+++ b/packages/frontend/test/e2e/integration/plugins.test.spec.ts
@@ -0,0 +1,18 @@
+// I guess for now this can be used to test plugins in the future.
+// import { expect, test } from '@playwright/test';
+
+// test('A User can use CyberChef', async ({ page }) => {
+//   await page.goto(`/`);
+
+//   await page.getByRole('heading', { name: 'Projects' }).waitFor();
+//   await page.getByRole('link', { name: 'CyberChef' }).click();
+//   await page.locator('iframe').contentFrame().locator('#preloader').waitFor({state: 'hidden'});
+//   const buffer1 = await page.screenshot();
+//   console.log(buffer1.toString('base64'));
+//   await page.locator('iframe').contentFrame().locator('#input-text').getByRole('textbox').waitFor({ state: 'visible' });
+//   await page.locator('iframe').contentFrame().locator('#input-text').getByRole('textbox').fill('SGVsbG8gV29ybGQ=');
+//   await page.locator('iframe').contentFrame().locator('#preloader').waitFor({state: 'hidden'});
+//   await page.locator('iframe').contentFrame().locator('#magic').click();
+//   await page.locator('iframe').contentFrame().locator('#preloader').waitFor({state: 'hidden'});
+//   expect(await page.locator('iframe').contentFrame().locator('#output-text').getByRole('textbox').textContent()).toBe('Hello World');
+// });
diff --git a/packages/frontend/test/e2e/integration/projects.spec.ts b/packages/frontend/test/e2e/integration/projects.spec.ts
new file mode 100644
index 000000000..3518a2579
--- /dev/null
+++ b/packages/frontend/test/e2e/integration/projects.spec.ts
@@ -0,0 +1,44 @@
+import { expect, test } from '@playwright/test';
+import { DemoDataState } from '../util/demo_data';
+const projectName = 'My Test Project';
+test('A User can create an Project with a Name', async ({ page }) => {
+  await page.goto('/projects');
+  await page.waitForSelector('text=Projects');
+
+  expect(await page.title()).toBe('Projects | SysReptor');
+  // Create New Design Modal
+  await page.getByTestId('create-button').click();
+  // Create New Design Modal
+  await page.getByLabel('Name').fill(projectName);
+  const designId = new DemoDataState().designs[0];
+
+  await page.getByTestId('project-type').getByRole('textbox').fill('Demo Matrix');
+  await page.getByTestId('page-loader').waitFor({ state: 'hidden' });
+  await page.getByText('No data found').waitFor({ state: 'hidden' });
+  await page.getByTestId('design-' + designId).locator('nth=0').click();
+  await page.getByTestId('submit-project').click();
+
+  // Verify Project Name
+  await expect(page.getByText(projectName)).toBeVisible();
+
+  await page.getByTestId('project-settings-tab').click();
+  await page.getByLabel('Name').waitFor();
+  await page.getByLabel('Name').fill('Updated Project Name');
+  await page.getByLabel('Tags').fill('Updated Tags');
+  await page.keyboard.press('Enter');
+  await page.getByRole('button', { name: 'Badge' }).click();
+  await page.getByText('Everything Saved').waitFor();
+});
+
+test('A User can delete a Project', async ({ page }) => {
+  await page.goto('/projects');
+  await page.waitForSelector('text=Projects');
+  await page.getByRole('link', { name: 'Updated Project Name' }).click();
+  await page.getByTestId('project-settings-tab').click();
+  await page.getByTestId('options-dots').click();
+  await page.getByText('Delete').click();
+  await page.getByTestId('confirm-input').getByRole('textbox').fill('Updated Project Name');
+  await page.getByRole('button', { name: 'Delete' }).click();
+  await page.waitForSelector('text=Projects');
+  
+});
\ No newline at end of file
diff --git a/packages/frontend/test/e2e/integration/users.test.spec.ts b/packages/frontend/test/e2e/integration/users.test.spec.ts
new file mode 100644
index 000000000..78806ae9a
--- /dev/null
+++ b/packages/frontend/test/e2e/integration/users.test.spec.ts
@@ -0,0 +1,61 @@
+import { chromium, expect, test } from '@playwright/test';
+import fs from 'fs';
+const userUsername = 'MyUser';
+const userPassword = 'Test123!@';
+const userNewPassword = 'Test123!@456789'
+const userFirstName = 'John';
+const userLastName = 'Doe';
+
+
+test('A Admin User can create a new User', async ({ page }) => {
+  await page.goto('/users/');
+
+  // Create a User
+  await page.getByTestId('create-button').click();
+  await page.getByLabel('Username').fill(userUsername);
+  await page.getByLabel('Password', { exact: true }).fill(userPassword);
+  await page.getByLabel('Password (confirm)').fill(userPassword);
+  await page.getByLabel('First Name').fill(userFirstName);
+  await page.getByLabel('Last Name').fill(userLastName);
+  await page.getByRole('button', { name: 'Create' }).click();
+
+  // Check if user was created
+  await page.goto('/users/');
+  await page.getByRole('link', { name: userUsername }).waitFor();
+  expect(await page.isVisible(`text=${userUsername}`)).toBeTruthy();
+});
+
+test('A created User can login', async ({ page }) => {
+  const browser = await chromium.launch();
+  // create temporary storage state (so we can login as the user and not loose the admin session)
+  fs.writeFileSync('../state2.json', "{}");
+  const context1 = await browser.newContext({
+    storageState: '../state2.json'
+  });
+  const page1 = await context1.newPage();
+  await page1.goto('/login/local');
+  await page1.getByLabel('Username').fill(userUsername);
+  await page1.getByLabel('Password').fill(userPassword);
+  await page1.getByRole('button', { name: 'Login' }).click();
+  await page1.getByLabel('New Password', { exact: true }).fill(userNewPassword);
+  await page1.getByLabel('New Password (confirm)').fill(userNewPassword);
+  await page1.getByRole('button', { name: 'Change Password' }).click();
+  await page1.getByTestId('mfa-setup-skip').click();
+  await page1.getByRole('heading', { name: 'Projects' }).waitFor();
+  await browser.close();
+  // delete storage state
+  fs.unlinkSync('../state2.json');
+});
+
+test('A Admin User can delete a User', async ({ page }) => {
+  await page.goto('/users/');
+  // Delete User
+  await page.getByRole('link', { name: userUsername }).click();
+  await page.getByTestId('options-dots').click();
+  await page.getByText('Delete').click();
+  // Confirm Delete
+  await page.getByTestId('confirm-input').getByRole('textbox').fill(userUsername);
+  await page.getByTestId('confirm-button').click();
+  await page.getByText('User deleted').waitFor();
+});
+
diff --git a/packages/frontend/test/e2e/templates.test.spec.ts b/packages/frontend/test/e2e/templates.test.spec.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/frontend/test/e2e/util/admin.ts b/packages/frontend/test/e2e/util/admin.ts
new file mode 100644
index 000000000..493bff37e
--- /dev/null
+++ b/packages/frontend/test/e2e/util/admin.ts
@@ -0,0 +1,4 @@
+export class IntegrationAdmin {
+  static username: string = process.env.FRONTEND_ADMIN_USER || 'admin';
+  static password: string = process.env.FRONTEND_ADMIN_PASSWORD || 'admin';
+}
\ No newline at end of file
diff --git a/packages/frontend/test/e2e/util/demo_data.ts b/packages/frontend/test/e2e/util/demo_data.ts
new file mode 100644
index 000000000..e18a48f4a
--- /dev/null
+++ b/packages/frontend/test/e2e/util/demo_data.ts
@@ -0,0 +1,40 @@
+import fs from 'fs';
+
+export enum DemoDataType {
+  Project = 'project',
+  Design = 'design',
+  Template = 'template',
+}
+export class DemoDataState {
+  projects: string[];
+  designs: string[];
+  templates: string[];
+
+  // Add an Id to the correct array
+  // and save json file
+  addId(type: DemoDataType, id: string | undefined) {
+    if (!id) {
+      return;
+    }
+    switch (type) {
+      case DemoDataType.Project:
+        this.projects.push(id);
+        break;
+      case DemoDataType.Design:
+        this.designs.push(id);
+        break;
+      case DemoDataType.Template:
+        this.templates.push(id);
+        break;
+    };
+    fs.writeFileSync('/app/packages/frontend/test/e2e/demodata/projects.json', JSON.stringify(this.projects), 'utf8');
+    fs.writeFileSync('/app/packages/frontend/test/e2e/demodata/designs.json', JSON.stringify(this.designs), 'utf8');
+    fs.writeFileSync('/app/packages/frontend/test/e2e/demodata/templates.json', JSON.stringify(this.templates), 'utf8');
+  }
+
+  constructor() {
+    this.projects = JSON.parse(fs.readFileSync('/app/packages/frontend/test/e2e/demodata/projects.json', 'utf8'));
+    this.designs = JSON.parse(fs.readFileSync('/app/packages/frontend/test/e2e/demodata/designs.json', 'utf8'));
+    this.templates = JSON.parse(fs.readFileSync('/app/packages/frontend/test/e2e/demodata/templates.json', 'utf8'));
+  }
+}
diff --git a/packages/frontend/test/e2e/util/import_demodata.ts b/packages/frontend/test/e2e/util/import_demodata.ts
new file mode 100644
index 000000000..c9eb1e63b
--- /dev/null
+++ b/packages/frontend/test/e2e/util/import_demodata.ts
@@ -0,0 +1,143 @@
+import type { Page } from '@playwright/test';
+import FormData from 'form-data';
+import fs from 'fs';
+import fetch from 'node-fetch';
+
+const importFile = async (url: string, filePath: string, headers: any) => {
+  const file = fs.readFileSync(filePath);
+  const body = new FormData();
+  body.append('file', file, {
+    filename: filePath.split('/').pop(),
+    contentType: 'application/gzip'
+  });
+  console.log(filePath);
+  if(filePath.match(/designs/)) {
+    body.append('scope', 'global');
+  }
+
+
+  const formHeaders = body.getHeaders();
+  const combinedHeaders = { ...headers, ...formHeaders };
+
+  const response = await fetch(url, {
+    method: 'POST',
+    headers: combinedHeaders,
+    body: body
+  });
+
+  if (!response.ok) {
+    const errorText = await response.text();
+    throw new Error(`Failed to import file: ${response.status} ${response.statusText}\n${errorText}`);
+  }
+
+  const contentType = response.headers.get('content-type');
+  if (contentType && contentType.includes('application/json')) {
+    return response.json();
+  } else {
+    const errorText = await response.text();
+    throw new Error(`Unexpected response content type: ${contentType}\n${errorText}`);
+  }
+};
+
+export const downloadDemoData = async (page: Page) => {
+  const urls = [
+    'https://docs.sysreptor.com/assets/demo-projects.tar.gz',
+    'https://docs.sysreptor.com/assets/demo-designs.tar.gz',
+    'https://docs.sysreptor.com/assets/demo-templates.tar.gz'
+  ];
+
+  const filePaths: string[] = [
+    './test/e2e/demodata/demo-projects.tar.gz',
+    './test/e2e/demodata/demo-designs.tar.gz',
+    './test/e2e/demodata/demo-templates.tar.gz'
+  ];
+
+  try {
+    for (let i = 0; i < urls.length; i++) {
+      const filePath = filePaths[i];
+      const url = urls[i];
+
+      if (url === undefined || filePath === undefined) {
+        throw new Error(`URL or file path is not defined for ${url}`);
+      }
+
+      if (fs.existsSync(filePath)) {
+        console.log(`File ${filePath} already exists, skipping download`);
+        continue;
+      }
+
+      console.log(`Downloading ${url}...`);
+      const response = await fetch(url);
+      if (!response.ok) {
+        throw new Error(`Failed to download ${url}: ${response.statusText}`);
+      }
+
+      // Chekc if directory exists
+      const dir = './test/e2e/demodata/';
+      if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, {
+          recursive: true
+        });
+      }
+
+
+      const fileStream = fs.createWriteStream(filePath);
+      response.body?.pipe(fileStream);
+
+      await new Promise((resolve, reject) => {
+        fileStream.on('finish', resolve);
+        fileStream.on('error', reject);
+      });
+
+      console.log(`Downloaded ${filePath}`);
+    }
+  } catch (error) {
+    console.error('Error downloading files:', error);
+  }
+};
+
+// Makes requests to import demo data and saves the IDs of the imported items to files
+export const importDemoData = async (page: Page) => {
+  const state = await page.context().storageState();
+  const headers = {
+    'Cookie': `csrftoken=${state.cookies.find(e => e.name == 'csrftoken')?.value}; sessionid=${state.cookies.find(e => e.name == 'sessionid')?.value}`
+  };
+
+  const urls = [
+    'http://localhost:3000/api/v1/pentestprojects/import/',
+    'http://localhost:3000/api/v1/findingtemplates/import/',
+    'http://localhost:3000/api/v1/projecttypes/import/'
+  ];
+
+  const filePaths: string[] = [
+    './test/e2e/demodata/demo-projects.tar.gz',
+    './test/e2e/demodata/demo-templates.tar.gz',
+    './test/e2e/demodata/demo-designs.tar.gz'
+  ];
+
+  const outputFiles = [
+    './test/e2e/demodata/projects.json',
+    './test/e2e/demodata/templates.json',
+    './test/e2e/demodata/designs.json'
+  ];
+
+  try {
+    const results = await Promise.all(urls.map((url, index) => importFile(url, filePaths[index]!, headers)));
+
+    results.forEach((result: any, index) => {
+      const ids = result.map((item: { id: string }) => item.id);
+      console.log(`Imported ${ids.length} items from ${filePaths[index]}`);
+      fs.writeFileSync(outputFiles[index]!, JSON.stringify(ids, null, 2));
+    });
+
+    // Delete the downloaded files
+    filePaths.forEach((filePath) => {
+      if (fs.existsSync(filePath)) {
+        fs.unlinkSync(filePath);
+        console.log(`Deleted ${filePath}`);
+      }
+    });
+  } catch (error) {
+    console.error('Error importing files:', error);
+  }
+};
\ No newline at end of file
diff --git a/packages/frontend/test/e2e/util/integration_flows.ts b/packages/frontend/test/e2e/util/integration_flows.ts
new file mode 100644
index 000000000..729437352
--- /dev/null
+++ b/packages/frontend/test/e2e/util/integration_flows.ts
@@ -0,0 +1,34 @@
+import { expect, type Page } from '@playwright/test';
+import { IntegrationAdmin } from "./admin";
+
+export const integrationLogin = async (page: Page, baseURL: string|undefined) => {
+  await page.goto(baseURL + '/login/local/');
+  await expect(page).toHaveTitle("Login | SysReptor");
+  await page.getByLabel('Username').fill(IntegrationAdmin.username);
+  await page.getByLabel('Password').fill(IntegrationAdmin.password);
+  await page.getByTestId('login-submit').click();
+  await page.getByTestId('mfa-setup-skip').click();
+  await expect(page).toHaveTitle("Projects | SysReptor");
+}
+
+export const integrationSuperuser = async (page: Page) => {
+  await page.getByTestId('profile-button').click();
+  await page.getByTestId('profile-menu-modal').waitFor({ state: 'visible' });
+  await page.getByTestId('enable-superuser').click();
+  await page.getByLabel('Password').fill(IntegrationAdmin.password);
+  await page.getByTestId('login-submit').click();
+}
+
+// Goes to User Settings and gives user all permissions
+export const selfPromotion = async (page: Page, baseURL: string|undefined) => {
+  await page.getByTestId('users-tab').click();
+  await page.getByTestId('test-reptor').click();
+  await page.getByLabel('First Name').fill('User');
+  await page.getByLabel('Last Name').fill('User');
+  await page.getByTestId('template-editor-checkbox').getByRole('checkbox').check();
+  await page.getByTestId('designer-checkbox').getByRole('checkbox').check();
+  await page.getByTestId('user-manager-checkbox').getByRole('checkbox').check();
+  await page.getByTestId('global-archiver-checkbox').getByRole('checkbox').check();
+  await page.getByTestId('project-admin-checkbox').getByRole('checkbox').check();
+  await page.getByTestId('save-toolbar').click();
+};
\ No newline at end of file
diff --git a/packages/frontend/vitest.config.ts b/packages/frontend/vitest.config.ts
index 246e8f0fe..fb0f03e87 100644
--- a/packages/frontend/vitest.config.ts
+++ b/packages/frontend/vitest.config.ts
@@ -1,10 +1,10 @@
-import { defineVitestConfig } from '@nuxt/test-utils/config'
-
+import { defineVitestConfig } from '@nuxt/test-utils/config';
 export default defineVitestConfig({
   test: {
     environment: 'happy-dom',
     dir: 'test',
+    exclude: ['**/*.spec.ts'],
     reporters: ['default', 'junit'],
-    outputFile: '../test-reports/junit.xml'
-  }
+    outputFile: '../test-reports/junit.xml',
+  },
 });
diff --git a/packages/nuxt-base-layer/src/components/Btn/Confirm.vue b/packages/nuxt-base-layer/src/components/Btn/Confirm.vue
index 5a8830030..aa94f85cc 100644
--- a/packages/nuxt-base-layer/src/components/Btn/Confirm.vue
+++ b/packages/nuxt-base-layer/src/components/Btn/Confirm.vue
@@ -63,6 +63,7 @@
             density="compact"
             spellcheck="false"
             class="mt-2"
+            data-testid="confirm-input"
           />
         </template>
       </v-card-text>
@@ -80,6 +81,7 @@
           @click="performAction"
           :prepend-icon="props.buttonIcon"
           :text="props.buttonText"
+          data-testid="confirm-button"
         />
       </v-card-actions>
     </template>
diff --git a/packages/nuxt-base-layer/src/components/Btn/Create.vue b/packages/nuxt-base-layer/src/components/Btn/Create.vue
index b6d7034b2..af4cc2e0c 100644
--- a/packages/nuxt-base-layer/src/components/Btn/Create.vue
+++ b/packages/nuxt-base-layer/src/components/Btn/Create.vue
@@ -2,6 +2,7 @@
   <s-btn-icon
     color="secondary"
     variant="flat"
+    data-testid="create-button"
   >
     <v-icon icon="mdi-plus" />
     <s-tooltip activator="parent" location="bottom" text="Create new" />
diff --git a/packages/nuxt-base-layer/src/components/Btn/History.vue b/packages/nuxt-base-layer/src/components/Btn/History.vue
index 35c46612c..d912353b1 100644
--- a/packages/nuxt-base-layer/src/components/Btn/History.vue
+++ b/packages/nuxt-base-layer/src/components/Btn/History.vue
@@ -1,6 +1,7 @@
 <template>
   <s-btn-icon
     @click="emit('update:modelValue', !props.modelValue)"
+    data-testid="history-button"
   >
     <v-icon icon="mdi-history" />
 
diff --git a/packages/nuxt-base-layer/src/components/Btn/Import.vue b/packages/nuxt-base-layer/src/components/Btn/Import.vue
index 986709f5d..21d238632 100644
--- a/packages/nuxt-base-layer/src/components/Btn/Import.vue
+++ b/packages/nuxt-base-layer/src/components/Btn/Import.vue
@@ -11,6 +11,7 @@
     <input
       ref="fileInput"
       type="file"
+      data-testid="import-input"
       accept=".tar.gz,application/gzip"
       @change="performImport(($event.target as HTMLInputElement)?.files)"
       class="d-none"
diff --git a/packages/nuxt-base-layer/src/components/DesignListItem.vue b/packages/nuxt-base-layer/src/components/DesignListItem.vue
index 4226d56e6..f1ddf3b96 100644
--- a/packages/nuxt-base-layer/src/components/DesignListItem.vue
+++ b/packages/nuxt-base-layer/src/components/DesignListItem.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-list-item :to="`/designs/${item.id}/pdfdesigner/`" :title="title" lines="two">
+  <v-list-item :to="`/designs/${item.id}/pdfdesigner/`" :title="title" lines="two" :data-testid="`design-${item.id}`">
     <v-list-item-subtitle>
       <chip-review-status v-if="item.status" :value="item.status" />
       <chip-language v-if="item.language" :value="item.language" />
@@ -9,6 +9,10 @@
 </template>
 
 <script setup lang="ts">
+import { computed } from 'vue';
+import { formatProjectTypeTitle } from '~/composables/projecttype';
+import type { ProjectType } from '~/utils/types';
+
 const props = defineProps<{
   item: ProjectType;
   formatTitle?: boolean;
diff --git a/packages/nuxt-base-layer/src/components/EditToolbar.vue b/packages/nuxt-base-layer/src/components/EditToolbar.vue
index 69e301add..979427cd9 100644
--- a/packages/nuxt-base-layer/src/components/EditToolbar.vue
+++ b/packages/nuxt-base-layer/src/components/EditToolbar.vue
@@ -12,7 +12,7 @@
         @click="performSave"
       >
         <v-badge v-if="props.data !== undefined" dot :color="hasChanges? 'error' : 'success'">
-          <v-icon icon="mdi-content-save" />
+          <v-icon icon="mdi-content-save" data-testid="save-toolbar" />
         </v-badge>
         <v-icon v-else icon="mdi-content-save" />
         <template #loader>
@@ -27,12 +27,13 @@
         <s-tooltip
           activator="parent"
           location="bottom"
+          data-testid="save-tooltip"
           :text="hasChanges ? 'Save with Ctrl+S' : 'Everything saved'"
         />
       </s-btn-icon>
 
       <s-btn-icon v-if="(showSave && props.canAutoSave) || showDelete || slots['context-menu']">
-        <v-icon icon="mdi-dots-vertical" />
+        <v-icon icon="mdi-dots-vertical" data-testid="options-dots" />
 
         <v-menu activator="parent" :close-on-content-click="false" location="bottom left" class="context-menu">
           <v-list>
@@ -92,10 +93,10 @@
 </template>
 
 <script setup lang="ts" generic="T extends { id: string, lock_info?: LockInfo|null }">
-import { debounce, cloneDeep, isEqual } from 'lodash-es';
-import type { VForm } from "vuetify/lib/components/index.mjs";
-import type { NavigationGuardNext, RouteLocationNormalized } from "vue-router";
 import { type LockInfo, EditMode } from '#imports';
+import { cloneDeep, debounce, isEqual } from 'lodash-es';
+import type { NavigationGuardNext, RouteLocationNormalized } from "vue-router";
+import type { VForm } from "vuetify/lib/components/index.mjs";
 
 const props = withDefaults(defineProps<{
   data?: T|null,
diff --git a/packages/nuxt-base-layer/src/components/PageLoader.vue b/packages/nuxt-base-layer/src/components/PageLoader.vue
index 8e9ca6a14..e5154a32e 100644
--- a/packages/nuxt-base-layer/src/components/PageLoader.vue
+++ b/packages/nuxt-base-layer/src/components/PageLoader.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="props.items.hasNextPage.value" class="text-center">
+  <div v-if="props.items.hasNextPage.value" class="text-center" data-testid="page-loader">
     <div v-if="!props.items.pending.value && !props.items.hasError.value" v-intersect="onIntersect" />
 
     <div v-if="props.items.hasError.value">
diff --git a/packages/nuxt-base-layer/src/components/S/CvssField.vue b/packages/nuxt-base-layer/src/components/S/CvssField.vue
index 0d853671b..94eb6de8f 100644
--- a/packages/nuxt-base-layer/src/components/S/CvssField.vue
+++ b/packages/nuxt-base-layer/src/components/S/CvssField.vue
@@ -15,7 +15,7 @@
     </div>
 
     <div class="flex-grow-0">
-      <div class="cvss-score ml-2" :class="'level-' + scoreInfo.levelNumber">
+      <div class="cvss-score ml-2" :class="'level-' + scoreInfo.levelNumber" data-testid="cvss-score">
         <div class="cvss-score-header">{{ scoreInfo.scoreFormatted }}</div>
         <div class="cvss-score-label">{{ scoreInfo.levelName }}</div>
       </div>
@@ -62,6 +62,7 @@
         <s-btn-icon
           @click="applyDialog"
           :disabled="props.disabled || props.readonly"
+          data-testid="cvss-apply"
         >
           <v-icon size="x-large">mdi-check-bold</v-icon>
           <s-tooltip activator="parent" :disabled="props.disabled || props.readonly" text="Apply" />
@@ -123,10 +124,10 @@
 </template>
 
 <script setup lang="ts">
-import { isValidVector, scoreFromVector, levelNumberFromScore, levelNameFromScore, parseVector, stringifyVector } from "@base/utils/cvss";
+import { isValidVector, levelNameFromScore, levelNumberFromScore, parseVector, scoreFromVector, stringifyVector } from "@base/utils/cvss";
+import { CvssVersion } from "@base/utils/cvss/base";
 import { CVSS31_DEFINITION } from "@base/utils/cvss/cvss3";
 import { CVSS40_DEFINITION } from "@base/utils/cvss/cvss4";
-import { CvssVersion } from "@base/utils/cvss/base";
 
 const props = defineProps<{
   modelValue: string|null;
diff --git a/packages/nuxt-base-layer/src/components/S/CvssMetricInput.vue b/packages/nuxt-base-layer/src/components/S/CvssMetricInput.vue
index 9da9df7b6..0a3bad281 100644
--- a/packages/nuxt-base-layer/src/components/S/CvssMetricInput.vue
+++ b/packages/nuxt-base-layer/src/components/S/CvssMetricInput.vue
@@ -17,7 +17,8 @@
         <v-btn 
           v-for="c in metric.choices" 
           :key="metric.id + '_' + c.id" 
-          :value="c.id" 
+          :value="c.id"
+          :data-testid="`cvss-metric-${metric.id}-${c.id}`" 
           size="small" 
           class="metric-btn"
         >
diff --git a/packages/nuxt-base-layer/src/components/S/ProjectTypeSelection.vue b/packages/nuxt-base-layer/src/components/S/ProjectTypeSelection.vue
index f7135b545..2172486bc 100644
--- a/packages/nuxt-base-layer/src/components/S/ProjectTypeSelection.vue
+++ b/packages/nuxt-base-layer/src/components/S/ProjectTypeSelection.vue
@@ -38,8 +38,8 @@
 </template>
 
 <script setup lang="ts">
-import { isObject } from "lodash-es";
 import { formatProjectTypeTitle } from '#imports';
+import { isObject } from "lodash-es";
 
 const props = withDefaults(defineProps<{
   modelValue: ProjectType|string|null,
diff --git a/packages/nuxt-base-layer/src/components/S/StatusSelection.vue b/packages/nuxt-base-layer/src/components/S/StatusSelection.vue
index aa0601092..d8bd2b810 100644
--- a/packages/nuxt-base-layer/src/components/S/StatusSelection.vue
+++ b/packages/nuxt-base-layer/src/components/S/StatusSelection.vue
@@ -7,23 +7,24 @@
     hide-details="auto"
     :variant="props.variant"
     :density="props.density"
+    data-testid="status-select"
   >
     <template #item="{item: { raw: statusInfo }, props: itemProps}">
-      <v-list-item v-bind="itemProps">
+      <v-list-item v-bind="itemProps" :data-testid="'status-' + statusInfo.value">
         <template #prepend>
           <v-icon :class="'status-' + statusInfo.value" :icon="statusInfo.icon" />
         </template>
       </v-list-item>
     </template>
     <template #selection="{item: { raw: statusInfo }}">
-      <v-icon start :class="'status-' + statusInfo.value" :icon="statusInfo.icon" /> {{ statusInfo.title }}
+      <v-icon start :class="'status-' + statusInfo.value" :icon="statusInfo.icon" :data-testid="'status-' +  statusInfo" /> {{ statusInfo.title }}
     </template>
   </v-select>
 </template>
 
 <script setup lang="ts">
+import type { ProjectTypeStatus, ReviewStatus } from "#imports";
 import { VSelect } from "vuetify/lib/components/index.mjs";
-import type { ReviewStatus, ProjectTypeStatus } from "#imports";
 
 const props = withDefaults(defineProps<{
   modelValue?: ReviewStatus|ProjectTypeStatus|null;
diff --git a/packages/package-lock.json b/packages/package-lock.json
index 811af5805..29aabf306 100644
--- a/packages/package-lock.json
+++ b/packages/package-lock.json
@@ -8,7 +8,9 @@
         "*"
       ],
       "devDependencies": {
+        "form-data": "^4.0.1",
         "license-checker-rseidelsohn": "^4.4.2",
+        "node-fetch": "^3.3.2",
         "typescript": "~5.6.3"
       }
     },
@@ -1932,6 +1934,26 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/@mapbox/node-pre-gyp/node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mapbox/node-pre-gyp/node_modules/nopt": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-8.0.0.tgz",
@@ -2904,6 +2926,24 @@
         "url": "https://opencollective.com/unts"
       }
     },
+    "node_modules/@playwright/test": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.49.0.tgz",
+      "integrity": "sha512-DMulbwQURa8rNIQrf94+jPJQ4FmOVdpE5ZppRNvWVjvhC+6sOeo28r8MgIpQRYouXRtt/FCCXU7zn20jnHR4Qw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "playwright": "1.49.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/@polka/url": {
       "version": "1.0.0-next.28",
       "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.28.tgz",
@@ -2973,6 +3013,26 @@
         "node": ">=10"
       }
     },
+    "node_modules/@redocly/openapi-core/node_modules/node-fetch": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
+      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "license": "MIT",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@rollup/plugin-alias": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-alias/-/plugin-alias-5.1.1.tgz",
@@ -5441,6 +5501,13 @@
       "integrity": "sha512-tLRNUXati5MFePdAk8dw7Qt7DpxPB60ofAgn8WRhW6a2rcimZnYBP9oxHiv0OHy+Wz7kPMG+t4LGdt31+4EmGg==",
       "license": "MIT"
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.20",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.20.tgz",
@@ -6400,6 +6467,19 @@
       "integrity": "sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==",
       "license": "MIT"
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/comma-separated-tokens": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
@@ -7390,6 +7470,16 @@
         "lodash-es": "^4.17.21"
       }
     },
+    "node_modules/data-uri-to-buffer": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/data-uri-to-buffer/-/data-uri-to-buffer-4.0.1.tgz",
+      "integrity": "sha512-0R9ikRb668HB7QDxT1vkpuUBtqc53YyAwMwGeUFKRojY/NWKvdZ+9UYtRfGmhqNbRkTSVpMbmyhXipFFv2cb/A==",
+      "devOptional": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/date-fns": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
@@ -7572,6 +7662,16 @@
         "robust-predicates": "^3.0.2"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -8752,6 +8852,30 @@
         }
       }
     },
+    "node_modules/fetch-blob": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/fetch-blob/-/fetch-blob-3.2.0.tgz",
+      "integrity": "sha512-7yAQpD2UMJzLi1Dqv7qFYnPbaPx7ZfFK6PiIxQ4PfkGPyNyl2Ugx+a/umUonmKqjhM4DnfbMvdX6otXq83soQQ==",
+      "devOptional": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "node-domexception": "^1.0.0",
+        "web-streams-polyfill": "^3.0.3"
+      },
+      "engines": {
+        "node": "^12.20 || >= 14.13"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
@@ -8862,6 +8986,34 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz",
+      "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/formdata-polyfill": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/formdata-polyfill/-/formdata-polyfill-4.0.10.tgz",
+      "integrity": "sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==",
+      "devOptional": true,
+      "license": "MIT",
+      "dependencies": {
+        "fetch-blob": "^3.1.2"
+      },
+      "engines": {
+        "node": ">=12.20.0"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -12627,24 +12779,43 @@
       "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
       "license": "MIT"
     },
+    "node_modules/node-domexception": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/node-domexception/-/node-domexception-1.0.0.tgz",
+      "integrity": "sha512-/jKZoMpw0F8GRwl4/eLROPA3cfcXtLApP0QzLmUT/HuPCZWyB7IY9ZrMeKw2O/nFIqPQB3PVM9aYm0F312AXDQ==",
+      "devOptional": true,
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/jimmywarting"
+        },
+        {
+          "type": "github",
+          "url": "https://paypal.me/jimmywarting"
+        }
+      ],
+      "license": "MIT",
+      "engines": {
+        "node": ">=10.5.0"
+      }
+    },
     "node_modules/node-fetch": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
-      "integrity": "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==",
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-3.3.2.tgz",
+      "integrity": "sha512-dRB78srN/l6gqWulah9SrxeYnxeddIG30+GOqK/9OlLVyLg3HPnr6SqOWTWOXKRwC2eGYCkZ59NNuSgvSrpgOA==",
+      "devOptional": true,
       "license": "MIT",
       "dependencies": {
-        "whatwg-url": "^5.0.0"
+        "data-uri-to-buffer": "^4.0.0",
+        "fetch-blob": "^3.1.4",
+        "formdata-polyfill": "^4.0.10"
       },
       "engines": {
-        "node": "4.x || >=6.0.0"
-      },
-      "peerDependencies": {
-        "encoding": "^0.1.0"
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       },
-      "peerDependenciesMeta": {
-        "encoding": {
-          "optional": true
-        }
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/node-fetch"
       }
     },
     "node_modules/node-fetch-native": {
@@ -13603,6 +13774,58 @@
         "pathe": "^1.1.2"
       }
     },
+    "node_modules/playwright": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.49.0.tgz",
+      "integrity": "sha512-eKpmys0UFDnfNb3vfsf8Vx2LEOtflgRebl0Im2eQQnYMA4Aqd+Zw8bEOB+7ZKvN76901mRnqdsiOGKxzVTbi7A==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
+      "dependencies": {
+        "playwright-core": "1.49.0"
+      },
+      "bin": {
+        "playwright": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "optionalDependencies": {
+        "fsevents": "2.3.2"
+      }
+    },
+    "node_modules/playwright-core": {
+      "version": "1.49.0",
+      "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.49.0.tgz",
+      "integrity": "sha512-R+3KKTQF3npy5GTiKH/T+kdhoJfJojjHESR1YEWhYuEKRVfVaxH3+4+GvXE5xyCngCxhxnykk0Vlah9v8fs3jA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "playwright-core": "cli.js"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/playwright/node_modules/fsevents": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
+      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
+      "dev": true,
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "peer": true,
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
     "node_modules/pluralize": {
       "version": "8.0.0",
       "resolved": "https://registry.npmjs.org/pluralize/-/pluralize-8.0.0.tgz",
diff --git a/packages/package.json b/packages/package.json
index 8ee15466d..05e8eab29 100644
--- a/packages/package.json
+++ b/packages/package.json
@@ -1,10 +1,14 @@
 {
-  "workspaces": ["*"],
+  "workspaces": [
+    "*"
+  ],
   "scripts": {
     "generate-notice": "license-checker-rseidelsohn --excludePrivatePackages --excludePackages='stackframe@0.3.1' --onlyAllow='MIT;MIT*;Apache-2.0;MIT OR Apache-2.0;0BSD;BSD-2-Clause;BSD-3-Clause;ISC;CC0-1.0;CC-BY-3.0;CC-BY-4.0;CC-BY-ND-4.0;Unlicense;MPL-2.0;BlueOak-1.0.0;Python-2.0;EPL-2.0;(BSD-3-Clause OR GPL-2.0);(MIT AND CC-BY-3.0);(MIT OR CC0-1.0)' --plainVertical > NOTICE",
     "dependencies": "npm run generate-notice"
   },
   "devDependencies": {
+    "form-data": "^4.0.1",
+    "node-fetch": "^3.3.2",
     "license-checker-rseidelsohn": "^4.4.2",
     "typescript": "~5.6.3"
   }
diff --git a/plugins/demoplugin/frontend/package.json b/plugins/demoplugin/frontend/package.json
index 6614f5964..25f576cdc 100644
--- a/plugins/demoplugin/frontend/package.json
+++ b/plugins/demoplugin/frontend/package.json
@@ -9,7 +9,6 @@
   "dependencies": {
     "@sysreptor/plugin-base-layer": "../../../packages/plugin-base-layer",
     "@sysreptor/nuxt-base-layer": "../../../packages/nuxt-base-layer",
-
     "nuxt": "*",
     "vuetify": "*",
     "pinia": "*"
@@ -17,4 +16,4 @@
   "overrides": {
     "vue": "latest"
   }
-}
+}
\ No newline at end of file