diff --git a/cypress.config.ts b/cypress.config.ts
index 77ab2db8b..93c311af1 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -11,12 +11,13 @@ export default defineConfig({
   },
   projectId: '181c7x',
   e2e: {
-    // We've imported your old cypress plugins here.
-    // You may want to clean this up later by importing these.
-    setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.ts')(on, config)
-    },
     baseUrl: 'http://localhost:4173',
     specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
+  },
+	component: {
+    devServer: {
+      framework: 'vue',
+      bundler: 'vite',
+    },
   },
 })
diff --git a/cypress/plugins/index.ts b/cypress/plugins/index.ts
deleted file mode 100644
index e158cbbd8..000000000
--- a/cypress/plugins/index.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-import path from 'path'
-import { startDevServer } from '@cypress/vite-dev-server'
-
-/**
- * @type {Cypress.PluginConfig}
- */
-export default (on, config) => {
-	// `on` is used to hook into various events Cypress emits
-	// `config` is the resolved Cypress config
-  on('dev-server:start', (options) => {
-    return startDevServer({
-      options,
-      viteConfig: {
-        configFile: path.resolve(__dirname, '..', '..', 'vite.config.ts'),
-      },
-    })
-  })
-}
diff --git a/cypress/plugins/tsconfig.json b/cypress/plugins/tsconfig.json
deleted file mode 100644
index a164a2264..000000000
--- a/cypress/plugins/tsconfig.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["./**/*"],
-  "compilerOptions": {
-    "module": "CommonJS",
-    "preserveValueImports": false,
-    "types": ["node", "cypress/types/cypress"]
-  }
-}
\ No newline at end of file
diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts
index 4bc18b684..aa0c8be97 100644
--- a/cypress/support/commands.ts
+++ b/cypress/support/commands.ts
@@ -1,3 +1,41 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }
+
 /**
  * Recursively gets an element, returning only after it's determined to be attached to the DOM for good.
  *
diff --git a/cypress/support/component.index.html b/cypress/support/component.index.html
new file mode 100644
index 000000000..ac6e79fd8
--- /dev/null
+++ b/cypress/support/component.index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>
\ No newline at end of file
diff --git a/cypress/support/component.ts b/cypress/support/component.ts
new file mode 100644
index 000000000..c0b98aa83
--- /dev/null
+++ b/cypress/support/component.ts
@@ -0,0 +1,29 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/vue'
+// Ensure global styles are loaded
+import '../../src/styles/global.scss';
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(MyComponent)
\ No newline at end of file
diff --git a/src/types/cypress.d.ts b/src/types/cypress.d.ts
new file mode 100644
index 000000000..911324a7d
--- /dev/null
+++ b/src/types/cypress.d.ts
@@ -0,0 +1,12 @@
+import { mount } from 'cypress/vue'
+
+type MountParams = Parameters<typeof mount>;
+type OptionsParam = MountParams[1];
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount;
+    }
+  }
+}
\ No newline at end of file