From 43fbfc59b3c8bca078d035c1fe5efa17c0a3762c Mon Sep 17 00:00:00 2001
From: Lukas Lieb <lukas.lieb@axonivy.com>
Date: Fri, 20 Mar 2026 15:11:20 +0100
Subject: [PATCH] Tailwind

---
 .vscode/extensions.json                       |   1 +
 .vscode/settings.json                         |   4 +
 database-editor.code-workspace                |  12 +-
 eslint.config.mjs                             |   1 +
 integrations/standalone/package.json          |   2 +
 integrations/standalone/src/index.css         |  18 +-
 integrations/standalone/src/index.tsx         |   2 +-
 integrations/standalone/vite.config.ts        |   3 +-
 package.json                                  |   1 +
 packages/database-editor/eslint.config.mjs    |  10 +
 packages/database-editor/package.json         |   2 +
 .../database-editor/src/DatabaseEditor.css    |   7 -
 .../database-editor/src/DatabaseEditor.tsx    |  24 ++-
 .../components/ImportWizard/ImportWizard.css  |   9 -
 .../components/ImportWizard/ImportWizard.tsx  |   3 +-
 .../components/ImportWizard/WizardContent.css |  19 --
 .../components/ImportWizard/WizardContent.tsx |  13 +-
 .../components/AttributeSelection.css         |  13 --
 .../components/AttributeSelection.tsx         |  13 +-
 .../ImportWizard/components/SelectionList.css |  38 ----
 .../ImportWizard/components/SelectionList.tsx |  19 +-
 .../components/SelectionListButton.css        |  13 --
 .../components/SelectionListButton.tsx        |   7 +-
 .../ImportWizard/components/Timeline.css      |  52 -----
 .../ImportWizard/components/Timeline.tsx      |  39 ++--
 .../ImportWizard/pages/CreationPage.css       |  14 --
 .../ImportWizard/pages/CreationPage.tsx       |  25 ++-
 .../ImportWizard/pages/CreationResult.css     |  20 --
 .../ImportWizard/pages/CreationResult.tsx     |  23 +--
 .../ImportWizard/pages/DataSourcePage.css     |   3 -
 .../ImportWizard/pages/DataSourcePage.tsx     |   7 +-
 .../ImportWizard/pages/TableSelectionPage.tsx |   2 +-
 .../editor/detail/DatabaseDetail.css          |   4 -
 .../editor/detail/DatabaseDetail.tsx          |  19 +-
 .../master/AddDatabaseConnectionDialog.tsx    |   2 +-
 .../master/ConnectionStateIndicator.css       |  44 ----
 .../master/ConnectionStateIndicator.tsx       |  37 ++--
 .../editor/master/DatabaseMasterContent.css   |   9 -
 .../editor/master/DatabaseMasterContent.tsx   |   5 +-
 .../editor/master/DatabaseMasterToolbar.tsx   |   2 +-
 .../editor/master/MasterControl.tsx           |  28 +--
 packages/database-editor/src/index.css        |   2 +
 packages/database-editor/src/index.ts         |   1 +
 .../src/translation/database-editor/de.json   |   2 +-
 .../src/translation/database-editor/en.json   |   2 +-
 packages/database-editor/vite.config.ts       |   3 +-
 .../mock/databaseEditor/detailView.spec.ts    |   8 +-
 .../mock/databaseEditor/editor.spec.ts        |   8 +-
 .../mock/databaseEditor/master.spec.ts        |  28 +--
 .../mock/importWizard/creationPage.spec.ts    |   2 +-
 .../mock/importWizard/resultPage.spec.ts      |   2 +-
 .../importWizard/tableSelectionPage.spec.ts   |  12 +-
 .../tests/pageobjects/DatabaseEditor.ts       |   6 +-
 .../tests/pageobjects/detail/DetailPanel.ts   |   8 +-
 .../pageobjects/main/AddDatabaseConnection.ts |   2 +-
 playwright/tests/pageobjects/main/Control.ts  |   2 +-
 .../tests/pageobjects/main/MainPanel.ts       |   4 +-
 playwright/tests/pageobjects/main/Toolbar.ts  |   2 +-
 .../main/import-wizard/CreationPage.ts        |   8 +-
 .../main/import-wizard/DataSourcePage.ts      |   2 +-
 .../main/import-wizard/ResultPage.ts          |   6 +-
 .../pageobjects/main/import-wizard/Table.ts   |   8 +-
 .../main/import-wizard/TableSelectionPage.ts  |  10 +-
 .../main/import-wizard/Timeline.ts            |   6 +-
 pnpm-lock.yaml                                | 193 +++++++++++++++++-
 65 files changed, 429 insertions(+), 467 deletions(-)
 create mode 100644 packages/database-editor/eslint.config.mjs
 delete mode 100644 packages/database-editor/src/DatabaseEditor.css
 delete mode 100644 packages/database-editor/src/components/ImportWizard/ImportWizard.css
 delete mode 100644 packages/database-editor/src/components/ImportWizard/WizardContent.css
 delete mode 100644 packages/database-editor/src/components/ImportWizard/components/AttributeSelection.css
 delete mode 100644 packages/database-editor/src/components/ImportWizard/components/SelectionList.css
 delete mode 100644 packages/database-editor/src/components/ImportWizard/components/SelectionListButton.css
 delete mode 100644 packages/database-editor/src/components/ImportWizard/components/Timeline.css
 delete mode 100644 packages/database-editor/src/components/ImportWizard/pages/CreationPage.css
 delete mode 100644 packages/database-editor/src/components/ImportWizard/pages/CreationResult.css
 delete mode 100644 packages/database-editor/src/components/ImportWizard/pages/DataSourcePage.css
 delete mode 100644 packages/database-editor/src/components/editor/detail/DatabaseDetail.css
 delete mode 100644 packages/database-editor/src/components/editor/master/ConnectionStateIndicator.css
 delete mode 100644 packages/database-editor/src/components/editor/master/DatabaseMasterContent.css
 create mode 100644 packages/database-editor/src/index.css

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 460ab746..e5330f4a 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -2,6 +2,7 @@
   "recommendations": [
     "esbenp.prettier-vscode",
     "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
     "vitest.explorer",
     "ms-playwright.playwright"
   ],
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3383acf3..e0856021 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -11,6 +11,10 @@
   },
   "task.autoDetect": "off",
   "typescript.tsdk": "node_modules/typescript/lib",
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+  "tailwindCSS.classFunctions": ["clsx", "cn", "cva"],
   "[css]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
diff --git a/database-editor.code-workspace b/database-editor.code-workspace
index 84eb91d0..a2a6ea92 100644
--- a/database-editor.code-workspace
+++ b/database-editor.code-workspace
@@ -1,6 +1,12 @@
 {
   "extensions": {
-    "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint", "vitest.explorer", "ms-playwright.playwright"]
+    "recommendations": [
+      "esbenp.prettier-vscode",
+      "dbaeumer.vscode-eslint",
+      "bradlc.vscode-tailwindcss",
+      "vitest.explorer",
+      "ms-playwright.playwright"
+    ]
   },
   "folders": [
     {
@@ -37,6 +43,10 @@
       "**/node_modules": true,
       "**/lib": true
     },
+    "files.associations": {
+      "*.css": "tailwindcss"
+    },
+    "tailwindCSS.classFunctions": ["clsx", "cn", "cva"],
     "[css]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 5969e7a8..e9ada01b 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -5,6 +5,7 @@ export default defineConfig([
   globalIgnores(['packages/protocol/src/editor.ts']),
   ...config.base,
   ...config.i18n,
+  ...config.tailwind('packages/database-editor/src/index.css'),
   // TypeScript configs
   {
     name: 'typescript-eslint',
diff --git a/integrations/standalone/package.json b/integrations/standalone/package.json
index 1fe490bb..7d606e6e 100644
--- a/integrations/standalone/package.json
+++ b/integrations/standalone/package.json
@@ -17,9 +17,11 @@
     "react-i18next": "^16.0.0"
   },
   "devDependencies": {
+    "@tailwindcss/vite": "^4.2.2",
     "@types/react": "^19.0.7",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^6.0.0",
+    "tailwindcss": "^4.2.2",
     "vite": "^8.0.0"
   },
   "scripts": {
diff --git a/integrations/standalone/src/index.css b/integrations/standalone/src/index.css
index ea50eb70..d7a0305b 100644
--- a/integrations/standalone/src/index.css
+++ b/integrations/standalone/src/index.css
@@ -1,6 +1,8 @@
-@layer icons;
+@import 'tailwindcss';
+@source '../node_modules/@axonivy/database-editor/src';
+@import '@axonivy/ui-components/src/styles/themes.css';
 
-@import '@axonivy/ui-icons/src-gen/ivy-icons.css' layer(icons);
+@import '@axonivy/ui-icons/src-gen/ivy-icons.css' layer(base);
 @import '@axonivy/ui-components/lib/components.css';
 
 html,
@@ -9,15 +11,3 @@ body,
   height: 100%;
   overflow: hidden;
 }
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-    'Helvetica Neue', sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
-}
diff --git a/integrations/standalone/src/index.tsx b/integrations/standalone/src/index.tsx
index b7bf7426..b3d52ce6 100644
--- a/integrations/standalone/src/index.tsx
+++ b/integrations/standalone/src/index.tsx
@@ -25,7 +25,7 @@ export async function start(): Promise<void> {
   root.render(
     <React.StrictMode>
       <ThemeProvider defaultTheme={theme}>
-        <Flex style={{ height: '100%' }} justifyContent='center' alignItems='center'>
+        <Flex className='h-full' justifyContent='center' alignItems='center'>
           <Spinner size='large' />
         </Flex>
         <Toaster closeButton={true} position='bottom-left' />
diff --git a/integrations/standalone/vite.config.ts b/integrations/standalone/vite.config.ts
index dc037b8f..8d28f0db 100644
--- a/integrations/standalone/vite.config.ts
+++ b/integrations/standalone/vite.config.ts
@@ -1,9 +1,10 @@
+import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-  plugins: [react()],
+  plugins: [tailwindcss(), react()],
   build: {
     outDir: 'build',
     chunkSizeWarningLimit: 5000,
diff --git a/package.json b/package.json
index c5edbaf1..6742fa1d 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@types/node": "^24.0.0",
     "prettier": "^3.6.2",
     "rimraf": "^6.0.1",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.8.3"
   },
   "prettier": "@axonivy/prettier-config"
diff --git a/packages/database-editor/eslint.config.mjs b/packages/database-editor/eslint.config.mjs
new file mode 100644
index 00000000..18d59e5d
--- /dev/null
+++ b/packages/database-editor/eslint.config.mjs
@@ -0,0 +1,10 @@
+import config from '@axonivy/eslint-config';
+import root from '../../eslint.config.mjs';
+
+export default config.defineConfig(...root, {
+  settings: {
+    'better-tailwindcss': {
+      entryPoint: 'src/index.css'
+    }
+  }
+});
diff --git a/packages/database-editor/package.json b/packages/database-editor/package.json
index 26355660..01aa17c4 100644
--- a/packages/database-editor/package.json
+++ b/packages/database-editor/package.json
@@ -35,6 +35,7 @@
     "@axonivy/jsonrpc": "~14.0.0-next.1079.485110d",
     "@axonivy/ui-components": "~14.0.0-next.1079.485110d",
     "@axonivy/ui-icons": "~14.0.0-next.1079.485110d",
+    "@tailwindcss/vite": "^4.2.2",
     "@tanstack/react-table": "^8.21.3",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.2.0",
@@ -45,6 +46,7 @@
     "jsdom": "^28.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "tailwindcss": "^4.2.2",
     "typescript": "^5.8.3",
     "vite": "^8.0.0",
     "vite-plugin-dts": "^4.5.0",
diff --git a/packages/database-editor/src/DatabaseEditor.css b/packages/database-editor/src/DatabaseEditor.css
deleted file mode 100644
index fb956cf0..00000000
--- a/packages/database-editor/src/DatabaseEditor.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.database-editor-main-panel {
-  background-color: var(--N75);
-}
-
-.database-editor-panel-content {
-  height: 100%;
-}
diff --git a/packages/database-editor/src/DatabaseEditor.tsx b/packages/database-editor/src/DatabaseEditor.tsx
index 654122f9..2bd98743 100644
--- a/packages/database-editor/src/DatabaseEditor.tsx
+++ b/packages/database-editor/src/DatabaseEditor.tsx
@@ -19,10 +19,9 @@ import {
 } from '@axonivy/ui-components';
 import { IvyIcons } from '@axonivy/ui-icons';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AppProvider } from './AppContext';
-import './DatabaseEditor.css';
 import { DatabaseDetail } from './components/editor/detail/DatabaseDetail';
 import { DatabaseMasterContent } from './components/editor/master/DatabaseMasterContent';
 import { DatabaseMasterToolbar } from './components/editor/master/DatabaseMasterToolbar';
@@ -150,10 +149,21 @@ export const DatabaseEditor = (props: EditorProps) => {
   const openUrl = useAction('openUrl');
   useHotkeys(hotkeys.openHelp.hotkey, () => openUrl(data?.helpUrl), { scopes: ['global'] });
   useHotkeys(hotkeys.testConnection.hotkey, () => connectionTestFunction.mutate(), { scopes: ['global'] });
+  const detailRef = useRef<HTMLDivElement>(null);
+  useHotkeys(
+    hotkeys.focusInscription.hotkey,
+    () => {
+      setDetail(true);
+      detailRef.current?.focus();
+    },
+    {
+      scopes: ['global']
+    }
+  );
 
   if (isPending) {
     return (
-      <Flex alignItems='center' justifyContent='center' style={{ width: '100%', height: '100%' }}>
+      <Flex alignItems='center' justifyContent='center' className='size-full'>
         <Spinner />
       </Flex>
     );
@@ -180,8 +190,8 @@ export const DatabaseEditor = (props: EditorProps) => {
       }}
     >
       <ResizableGroup orientation='horizontal' defaultLayout={defaultLayout} onLayoutChanged={onLayoutChanged}>
-        <ResizablePanel id='main' defaultSize='75%' minSize='50%' className='database-editor-main-panel'>
-          <Flex direction='column' className='database-editor-panel-content'>
+        <ResizablePanel id='database-editor-main' defaultSize='75%' minSize='50%' className='bg-n75'>
+          <Flex direction='column' className='h-full'>
             <DatabaseMasterToolbar detail={detail} setDetail={setDetail} />
             <DatabaseMasterContent detail={detail} setDetail={setDetail} />
           </Flex>
@@ -189,8 +199,8 @@ export const DatabaseEditor = (props: EditorProps) => {
         {detail && (
           <>
             <ResizableHandle />
-            <ResizablePanel id='properties' defaultSize='25%' minSize='10%' className='database-editor-detail-panel'>
-              <DatabaseDetail />
+            <ResizablePanel id='database-editor-detail' defaultSize='25%' minSize='10%'>
+              <DatabaseDetail ref={detailRef} />
             </ResizablePanel>
           </>
         )}
diff --git a/packages/database-editor/src/components/ImportWizard/ImportWizard.css b/packages/database-editor/src/components/ImportWizard/ImportWizard.css
deleted file mode 100644
index 54d6aacd..00000000
--- a/packages/database-editor/src/components/ImportWizard/ImportWizard.css
+++ /dev/null
@@ -1,9 +0,0 @@
-div.database-editor-import-dialog {
-  max-width: unset;
-  max-height: unset;
-  width: clamp(300px, 1200px, calc(100% - 200px));
-}
-
-.databse-editor-import-title {
-  visibility: collapse;
-}
diff --git a/packages/database-editor/src/components/ImportWizard/ImportWizard.tsx b/packages/database-editor/src/components/ImportWizard/ImportWizard.tsx
index 6e387e24..9ea63732 100644
--- a/packages/database-editor/src/components/ImportWizard/ImportWizard.tsx
+++ b/packages/database-editor/src/components/ImportWizard/ImportWizard.tsx
@@ -15,7 +15,6 @@ import { useState, type ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ContextProvider } from '../../util/ContextProvider';
 import { useKnownHotkeys } from '../../util/hotkeys';
-import './ImportWizard.css';
 import { WizardContent } from './WizardContent';
 
 const DIALOG_HOTKEY_IDS = ['importWizardDialog'];
@@ -52,7 +51,7 @@ export const ImportWizard = ({
             <TooltipContent>{hotkeys.generate.label}</TooltipContent>
           </Tooltip>
         </TooltipProvider>
-        <DialogContent className='database-editor-import-dialog'>
+        <DialogContent className='h-auto! max-h-none! w-[clamp(300px,1200px,calc(100%-200px))]! max-w-none!'>
           <DialogTitle>{t('import.generate')}</DialogTitle>
           <WizardContent projects={context.projects} closeDialog={() => onOpenChange(false)} callback={callback} />
         </DialogContent>
diff --git a/packages/database-editor/src/components/ImportWizard/WizardContent.css b/packages/database-editor/src/components/ImportWizard/WizardContent.css
deleted file mode 100644
index 8e8b9183..00000000
--- a/packages/database-editor/src/components/ImportWizard/WizardContent.css
+++ /dev/null
@@ -1,19 +0,0 @@
-.database-editor-import-content {
-  box-sizing: border-box;
-  align-self: center;
-  width: 100%;
-  height: 80vh;
-  padding: 20px 50px 10px 50px;
-}
-
-.import-wizard-page {
-  height: 100%;
-  overflow: auto;
-}
-.import-wizard-proceed-buttons {
-  width: 100%;
-}
-
-button.import-wizard-close-hidden {
-  display: none;
-}
diff --git a/packages/database-editor/src/components/ImportWizard/WizardContent.tsx b/packages/database-editor/src/components/ImportWizard/WizardContent.tsx
index 921b0cd3..3485c5e2 100644
--- a/packages/database-editor/src/components/ImportWizard/WizardContent.tsx
+++ b/packages/database-editor/src/components/ImportWizard/WizardContent.tsx
@@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next';
 import { ProceedButton } from './components/ProceedButton';
 import { Timeline } from './components/Timeline';
 import { usePages } from './pages/usePages';
-import './WizardContent.css';
 
 export type ImportPage = {
   page: ReactNode;
@@ -29,22 +28,16 @@ export const WizardContent = ({ projects, closeDialog, callback }: WizardContent
     <Flex
       direction='column'
       gap={4}
-      style={{ overflow: 'auto' }}
       justifyContent='space-between'
-      className={`database-${pages[activePage]?.identifier} database-editor-import-content`}
+      className='box-border h-[80vh] w-full self-center overflow-auto px-12.5 pt-5 pb-2.5'
     >
       <Timeline pages={pages} active={activePage} setActive={jumpToPage} />
       {pages[activePage]?.page}
       <Flex direction='row' justifyContent='space-between'>
-        <Button
-          variant='outline'
-          onClick={closeDialog}
-          size='large'
-          className={cn(activePage >= pages.length - 1 && 'import-wizard-close-hidden')}
-        >
+        <Button variant='outline' onClick={closeDialog} size='large' className={cn(activePage >= pages.length - 1 && 'hidden')}>
           {t('import.cancel')}
         </Button>
-        <Flex direction='row' gap={2} justifyContent='flex-end' className='import-wizard-proceed-buttons'>
+        <Flex direction='row' gap={2} justifyContent='flex-end' className='w-full'>
           <Button
             disabled={activePage <= 0}
             icon={IvyIcons.Chevron}
diff --git a/packages/database-editor/src/components/ImportWizard/components/AttributeSelection.css b/packages/database-editor/src/components/ImportWizard/components/AttributeSelection.css
deleted file mode 100644
index 05341af1..00000000
--- a/packages/database-editor/src/components/ImportWizard/components/AttributeSelection.css
+++ /dev/null
@@ -1,13 +0,0 @@
-table.attribute-selection-table {
-  width: clamp(200px, 100%, 300px);
-  max-width: 300px;
-}
-
-.attribute-selection-content {
-  max-height: 500px;
-  overflow: scroll;
-}
-
-.attribute-selection-table .table-header {
-  font-weight: 600;
-}
diff --git a/packages/database-editor/src/components/ImportWizard/components/AttributeSelection.tsx b/packages/database-editor/src/components/ImportWizard/components/AttributeSelection.tsx
index e97b4292..dbef60bd 100644
--- a/packages/database-editor/src/components/ImportWizard/components/AttributeSelection.tsx
+++ b/packages/database-editor/src/components/ImportWizard/components/AttributeSelection.tsx
@@ -14,7 +14,6 @@ import {
 } from '@axonivy/ui-components';
 import { IvyIcons } from '@axonivy/ui-icons';
 import { useTranslation } from 'react-i18next';
-import './AttributeSelection.css';
 
 export const AttributeSelection = ({
   table,
@@ -36,15 +35,15 @@ export const AttributeSelection = ({
   return (
     <Popover modal>
       <PopoverTrigger asChild>
-        <Button className='attribute-selection-trigger' icon={IvyIcons.Settings} />
+        <Button aria-label={t('import.attributes')} icon={IvyIcons.Settings} />
       </PopoverTrigger>
-      <PopoverContent className='attribute-selection-content' align='start'>
-        <Table className='attribute-selection-table'>
+      <PopoverContent className='max-h-125 overflow-scroll' align='start'>
+        <Table className='w-[clamp(200px,100%,300px)] max-w-75'>
           <TableHeader>
             <TableRow>
-              <TableHead className='table-header'>{t('import.column')}</TableHead>
-              <TableHead className='table-header'>{t('import.type')}</TableHead>
-              <TableHead className='table-header'>{t('import.generate')}</TableHead>
+              <TableHead className='font-semibold'>{t('import.column')}</TableHead>
+              <TableHead className='font-semibold'>{t('import.type')}</TableHead>
+              <TableHead className='font-semibold'>{t('import.generate')}</TableHead>
             </TableRow>
           </TableHeader>
           <TableBody>
diff --git a/packages/database-editor/src/components/ImportWizard/components/SelectionList.css b/packages/database-editor/src/components/ImportWizard/components/SelectionList.css
deleted file mode 100644
index 31d0976f..00000000
--- a/packages/database-editor/src/components/ImportWizard/components/SelectionList.css
+++ /dev/null
@@ -1,38 +0,0 @@
-.selection-list-container {
-  overflow: scroll;
-  background-color: var(--N75);
-  border-radius: var(--border-r1);
-  border: var(--basic-border);
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-  padding: 1em;
-}
-
-.selection-list-content {
-  height: 100%;
-  overflow: auto;
-}
-
-.selection-list {
-  width: 100%;
-}
-
-button.selection-list-button-all {
-  font-size: 12px;
-}
-
-button.selection-list-add-all {
-  color: var(--P300);
-}
-
-button.selection-list-remove-all {
-  color: var(--error-color);
-}
-
-.selection-list-placeholder {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-}
diff --git a/packages/database-editor/src/components/ImportWizard/components/SelectionList.tsx b/packages/database-editor/src/components/ImportWizard/components/SelectionList.tsx
index c3cca37a..8c1fbdf7 100644
--- a/packages/database-editor/src/components/ImportWizard/components/SelectionList.tsx
+++ b/packages/database-editor/src/components/ImportWizard/components/SelectionList.tsx
@@ -2,7 +2,6 @@ import { BasicField, Button, Flex } from '@axonivy/ui-components';
 import { IvyIcons } from '@axonivy/ui-icons';
 import type { Dispatch, ReactNode, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import './SelectionList.css';
 import { SelectionListButton } from './SelectionListButton';
 
 export type SelectionListProps = {
@@ -27,19 +26,19 @@ export const SelectionList = ({
   const { t } = useTranslation();
 
   const btnSelectAll = (
-    <Button icon={IvyIcons.Check} onClick={() => setSelection(list ?? [])} className='selection-list-button-all selection-list-add-all'>
+    <Button icon={IvyIcons.Check} onClick={() => setSelection(list ?? [])} className='text-[12px] text-p300'>
       <span>{t('import.selectAll')}</span>
     </Button>
   );
 
   const btnDeselectAll = (
-    <Button icon={IvyIcons.Close} onClick={() => setSelection([])} className='selection-list-button-all selection-list-remove-all'>
+    <Button icon={IvyIcons.Close} onClick={() => setSelection([])} className='text-[12px] text-error'>
       {t('import.deselectAll')}
     </Button>
   );
 
   return (
-    <Flex direction='row' gap={4} className='selection-list-content'>
+    <Flex direction='row' gap={4} className='h-full overflow-auto'>
       <SelectionListField
         items={list.filter(item => !selection.includes(item))}
         onClick={value => setSelection(current => [...current, value].sort((v1, v2) => v1.localeCompare(v2)))}
@@ -71,14 +70,20 @@ type SelectionListFieldProps = {
 
 export const SelectionListField = ({ selectionTitle, control, items, filter, onClick, placeholder, icon }: SelectionListFieldProps) => {
   return (
-    <BasicField label={selectionTitle} control={control} className='selection-list'>
-      <Flex className='selection-list-container' direction='column' gap={1}>
+    <BasicField label={selectionTitle} control={control} className='w-full'>
+      <Flex
+        className='box-border size-full overflow-auto rounded-sm border border-n200 bg-n75 p-4'
+        direction='column'
+        gap={1}
+        role='list'
+        aria-label={selectionTitle}
+      >
         {items.length > 0 ? (
           items
             .filter(t => t.toLocaleLowerCase().includes(filter ? filter.toLocaleLowerCase() : ''))
             .map(item => <SelectionListButton key={item} value={item} icon={icon} onClick={onClick} />)
         ) : (
-          <div className='selection-list-placeholder'>
+          <div className='flex h-full items-center justify-center'>
             <span>{placeholder}</span>
           </div>
         )}
diff --git a/packages/database-editor/src/components/ImportWizard/components/SelectionListButton.css b/packages/database-editor/src/components/ImportWizard/components/SelectionListButton.css
deleted file mode 100644
index 3bb307c9..00000000
--- a/packages/database-editor/src/components/ImportWizard/components/SelectionListButton.css
+++ /dev/null
@@ -1,13 +0,0 @@
-button.selection-list-button {
-  background-color: var(--N25);
-  border: var(--basic-border);
-}
-
-.selection-list-button-text {
-  width: 100%;
-  text-align: start;
-}
-
-.selection-list-button i {
-  align-content: center;
-}
diff --git a/packages/database-editor/src/components/ImportWizard/components/SelectionListButton.tsx b/packages/database-editor/src/components/ImportWizard/components/SelectionListButton.tsx
index 56d7341d..27f2fbb5 100644
--- a/packages/database-editor/src/components/ImportWizard/components/SelectionListButton.tsx
+++ b/packages/database-editor/src/components/ImportWizard/components/SelectionListButton.tsx
@@ -1,12 +1,11 @@
 import { Button, IvyIcon } from '@axonivy/ui-components';
 import { IvyIcons } from '@axonivy/ui-icons';
-import './SelectionListButton.css';
 
 export const SelectionListButton = ({ value, onClick, icon }: { value: string; onClick: (table: string) => void; icon?: IvyIcons }) => {
   return (
-    <Button className='selection-list-button' onClick={() => onClick(value)}>
-      <span className='selection-list-button-text'>{value}</span>
-      {icon && <IvyIcon icon={icon} />}
+    <Button className='border border-n200 bg-n25' onClick={() => onClick(value)}>
+      <span className='w-full text-left'>{value}</span>
+      {icon && <IvyIcon icon={icon} className='content-center' />}
     </Button>
   );
 };
diff --git a/packages/database-editor/src/components/ImportWizard/components/Timeline.css b/packages/database-editor/src/components/ImportWizard/components/Timeline.css
deleted file mode 100644
index a182b29a..00000000
--- a/packages/database-editor/src/components/ImportWizard/components/Timeline.css
+++ /dev/null
@@ -1,52 +0,0 @@
-.timeline {
-  --circle-width: 15px;
-  align-items: end;
-}
-
-.timeline-connector {
-  height: 2px;
-  background-color: var(--N400);
-  border: 0;
-  margin: 0;
-  flex: 1 1 auto;
-  transform: translateY(calc(var(--circle-width) / 2 * -1));
-}
-
-.timeline-connector.active {
-  background-color: var(--P300);
-}
-
-.timeline-item {
-  width: var(--circle-width);
-  gap: 1rem;
-  cursor: pointer;
-}
-
-.timeline-title {
-  color: var(--N700);
-  font-weight: 600;
-  white-space: nowrap;
-}
-
-.active .timeline-title {
-  color: var(--P300);
-}
-
-.timeline-circle {
-  height: var(--circle-width);
-  width: var(--circle-width);
-  background-color: var(--background);
-  border-radius: 50%;
-  border: 2px solid var(--N400);
-  z-index: 1;
-}
-
-.active .timeline-circle {
-  background-color: var(--P300);
-  border-color: var(--P300);
-}
-
-.passed .timeline-circle {
-  background-color: var(--background);
-  border-color: var(--P300);
-}
diff --git a/packages/database-editor/src/components/ImportWizard/components/Timeline.tsx b/packages/database-editor/src/components/ImportWizard/components/Timeline.tsx
index aa697402..5d941052 100644
--- a/packages/database-editor/src/components/ImportWizard/components/Timeline.tsx
+++ b/packages/database-editor/src/components/ImportWizard/components/Timeline.tsx
@@ -1,18 +1,23 @@
 import { cn, Flex, Label } from '@axonivy/ui-components';
 import { Fragment } from 'react';
 import type { ImportPage } from '../WizardContent';
-import './Timeline.css';
 
 export const Timeline = ({ pages, active, setActive }: { pages: Array<ImportPage>; active: number; setActive: (i: number) => void }) => {
   return (
-    <Flex className='timeline' direction='row' justifyContent='center'>
+    <ol className='flex list-none items-end justify-center p-0'>
       {pages.map((page, i) => (
         <Fragment key={i}>
-          <TimelineItem title={page.title} active={i === active} passed={i < active} index={i} setActive={setActive} />
-          {i < pages.length - 1 && <Connector active={i < active} />}
+          <li className='list-none'>
+            <TimelineItem title={page.title} active={i === active} passed={i < active} index={i} setActive={setActive} />
+          </li>
+          {i < pages.length - 1 && (
+            <li aria-hidden='true' className='flex-1'>
+              <Connector active={i < active} />
+            </li>
+          )}
         </Fragment>
       ))}
-    </Flex>
+    </ol>
   );
 };
 
@@ -30,20 +35,28 @@ const TimelineItem = ({
   setActive: (i: number) => void;
 }) => {
   return (
-    <Flex
-      className={cn('timeline-item', active && 'active', passed && 'passed')}
-      alignItems='center'
-      direction='column'
+    <button
+      type='button'
+      className='cursor-pointer border-0 bg-transparent p-0'
+      aria-current={active ? 'step' : undefined}
       onClick={() => {
         setActive(index);
       }}
     >
-      <Label className='timeline-title'>{title}</Label>
-      <div className='timeline-circle'></div>
-    </Flex>
+      <Flex alignItems='center' direction='column' className='w-3.75 cursor-pointer gap-4 border-0 bg-transparent p-0'>
+        <Label className={cn('font-semibold whitespace-nowrap text-n700', active && 'text-p300')}>{title}</Label>
+        <div
+          className={cn(
+            'z-1 size-3.75 rounded-full border-2 border-n400 bg-background',
+            active && 'border-p300 bg-p300',
+            passed && 'border-p300'
+          )}
+        ></div>
+      </Flex>
+    </button>
   );
 };
 
 const Connector = ({ active }: { active: boolean }) => {
-  return <hr className={cn('timeline-connector', active && 'active')}></hr>;
+  return <hr className={cn('m-0 h-0.5 flex-1 -translate-y-1.5 border-0 bg-n400', active && 'bg-p300')}></hr>;
 };
diff --git a/packages/database-editor/src/components/ImportWizard/pages/CreationPage.css b/packages/database-editor/src/components/ImportWizard/pages/CreationPage.css
deleted file mode 100644
index 24928774..00000000
--- a/packages/database-editor/src/components/ImportWizard/pages/CreationPage.css
+++ /dev/null
@@ -1,14 +0,0 @@
-.table-creation {
-  .table-header {
-    font-weight: 600;
-    width: 100px;
-    &.table-name {
-      width: 200px;
-    }
-  }
-  td {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-}
diff --git a/packages/database-editor/src/components/ImportWizard/pages/CreationPage.tsx b/packages/database-editor/src/components/ImportWizard/pages/CreationPage.tsx
index 89f1a8af..0e01d615 100644
--- a/packages/database-editor/src/components/ImportWizard/pages/CreationPage.tsx
+++ b/packages/database-editor/src/components/ImportWizard/pages/CreationPage.tsx
@@ -16,7 +16,6 @@ import { useTranslation } from 'react-i18next';
 import { useMeta } from '../../../protocol/use-meta';
 import { useContextProvider } from '../../../util/ContextProvider';
 import { AttributeSelection } from '../components/AttributeSelection';
-import './CreationPage.css';
 import { useNamespaceValidation } from './useNamespaceValidation';
 
 export type CreationParameter = {
@@ -89,43 +88,43 @@ export const CreationPage = ({ tableNames, databaseName, updateSelection, parame
   const namespaceMessage = useNamespaceValidation(namespace);
 
   return (
-    <Flex direction='column' className='import-wizard-page' gap={4}>
+    <Flex direction='column' className='h-full overflow-auto' gap={4} role='region' aria-label={t('import.options')}>
       <BasicField message={namespaceMessage} label={`${t('import.namespace')}*`}>
         <BasicInput required value={namespace} onChange={event => updateNamespace(event.target.value)} />
       </BasicField>
-      <Table className='table-creation'>
+      <Table>
         <TableHeader>
           <TableRow>
-            <TableHead className='table-header table-name'>{t('import.table')}</TableHead>
-            <TableHead className='table-header'>{t('import.entityClass')}</TableHead>
-            <TableHead className='table-header'>{t('import.formDialog')}</TableHead>
-            <TableHead className='table-header'>{t('import.process')}</TableHead>
-            <TableHead className='table-header'>{t('import.attributes')}</TableHead>
+            <TableHead className='w-50 font-semibold'>{t('import.table')}</TableHead>
+            <TableHead className='w-25 font-semibold'>{t('import.entityClass')}</TableHead>
+            <TableHead className='w-25 font-semibold'>{t('import.formDialog')}</TableHead>
+            <TableHead className='w-25 font-semibold'>{t('import.process')}</TableHead>
+            <TableHead className='w-25 font-semibold'>{t('import.attributes')}</TableHead>
           </TableRow>
         </TableHeader>
         <TableBody>
           {metaQuery.data?.tables.map(table => (
             <TableRow key={table.name}>
-              <TableCell>{table.name}</TableCell>
-              <TableCell>
+              <TableCell className='max-w-0 truncate'>{table.name}</TableCell>
+              <TableCell className='max-w-0 truncate'>
                 <Checkbox
                   checked={checkState(table.name, 'EntityClass')}
                   onCheckedChange={value => manageState(table, 'EntityClass', value as boolean)}
                 ></Checkbox>
               </TableCell>
-              <TableCell>
+              <TableCell className='max-w-0 truncate'>
                 <Checkbox
                   checked={checkState(table.name, 'FormDialog')}
                   onCheckedChange={value => manageState(table, 'FormDialog', value as boolean)}
                 ></Checkbox>
               </TableCell>
-              <TableCell>
+              <TableCell className='max-w-0 truncate'>
                 <Checkbox
                   checked={checkState(table.name, 'Process')}
                   onCheckedChange={value => manageState(table, 'Process', value as boolean)}
                 ></Checkbox>
               </TableCell>
-              <TableCell>
+              <TableCell className='max-w-0 truncate'>
                 <AttributeSelection updateSelection={updateSelection} creationTables={parameters} table={table} />
               </TableCell>
             </TableRow>
diff --git a/packages/database-editor/src/components/ImportWizard/pages/CreationResult.css b/packages/database-editor/src/components/ImportWizard/pages/CreationResult.css
deleted file mode 100644
index 6a5c2f54..00000000
--- a/packages/database-editor/src/components/ImportWizard/pages/CreationResult.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.table-errors {
-  .table-header {
-    font-weight: 600;
-    width: 100px;
-  }
-
-  td {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-  }
-
-  .table-header.table-message {
-    width: 200px;
-  }
-}
-
-.result-title {
-  margin: 0;
-}
diff --git a/packages/database-editor/src/components/ImportWizard/pages/CreationResult.tsx b/packages/database-editor/src/components/ImportWizard/pages/CreationResult.tsx
index 7a1f94c7..a60142a0 100644
--- a/packages/database-editor/src/components/ImportWizard/pages/CreationResult.tsx
+++ b/packages/database-editor/src/components/ImportWizard/pages/CreationResult.tsx
@@ -15,7 +15,6 @@ import {
   TooltipTrigger
 } from '@axonivy/ui-components';
 import { useTranslation } from 'react-i18next';
-import './CreationResult.css';
 
 export type CreationResultProps = {
   errors: Array<CreationError>;
@@ -25,12 +24,12 @@ export const CreationResult = ({ errors }: CreationResultProps) => {
   const { t } = useTranslation();
   return errors.length > 0 ? (
     <>
-      <h3 className='result-title'>{t('import.errorsDuringCreation')}</h3>
+      <h3 className='m-0'>{t('import.errorsDuringCreation')}</h3>
       <ErrorTable errors={errors} />
     </>
   ) : (
-    <Flex justifyContent='center' alignItems='center'>
-      <h3 className='result-title'>{t('import.creationSuccess')}</h3>
+    <Flex justifyContent='center' alignItems='center' role='region' aria-label={t('import.result')}>
+      <h3 className='m-0'>{t('import.creationSuccess')}</h3>
     </Flex>
   );
 };
@@ -46,26 +45,26 @@ const ErrorTable = ({ errors }: { errors: Array<CreationError> }) => {
   };
 
   return (
-    <Flex direction='column' gap={4} className='import-wizard-page'>
-      <Table className='table-errors'>
+    <Flex direction='column' gap={4} className='h-full overflow-auto' role='region' aria-label={t('import.result')}>
+      <Table>
         <TableHeader>
           <TableRow>
-            <TableHead className='table-header'>{t('import.table')}</TableHead>
-            <TableHead className='table-header'>{t('import.creationType')}</TableHead>
-            <TableHead className='table-header  table-message'>{t('import.errorMessage')}</TableHead>
+            <TableHead className='w-25 font-semibold'>{t('import.table')}</TableHead>
+            <TableHead className='w-25 font-semibold'>{t('import.creationType')}</TableHead>
+            <TableHead className='w-50 font-semibold'>{t('import.errorMessage')}</TableHead>
           </TableRow>
         </TableHeader>
         <TooltipProvider>
           <TableBody>
             {errors.map(error => (
               <TableRow key={error.name}>
-                <TableCell>{error.name.substring(error.name.lastIndexOf('.') + 1)}</TableCell>
-                <TableCell>
+                <TableCell className='max-w-0 truncate'>{error.name.substring(error.name.lastIndexOf('.') + 1)}</TableCell>
+                <TableCell className='max-w-0 truncate'>
                   <Label>{ImportOptionsLookup[Number(error.type) as keyof typeof ImportOptionsLookup]}</Label>
                 </TableCell>
                 <Tooltip>
                   <TooltipTrigger asChild>
-                    <TableCell>
+                    <TableCell className='max-w-0 truncate'>
                       <Message variant='error'>{generateErrorMessage(error)}</Message>
                     </TableCell>
                   </TooltipTrigger>
diff --git a/packages/database-editor/src/components/ImportWizard/pages/DataSourcePage.css b/packages/database-editor/src/components/ImportWizard/pages/DataSourcePage.css
deleted file mode 100644
index 00d35299..00000000
--- a/packages/database-editor/src/components/ImportWizard/pages/DataSourcePage.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.source-selection-field {
-  width: 100%;
-}
diff --git a/packages/database-editor/src/components/ImportWizard/pages/DataSourcePage.tsx b/packages/database-editor/src/components/ImportWizard/pages/DataSourcePage.tsx
index 51df1211..2c99e292 100644
--- a/packages/database-editor/src/components/ImportWizard/pages/DataSourcePage.tsx
+++ b/packages/database-editor/src/components/ImportWizard/pages/DataSourcePage.tsx
@@ -5,7 +5,6 @@ import { useMeta } from '../../../protocol/use-meta';
 import { useContextProvider } from '../../../util/ContextProvider';
 import { DatabaseSelection } from '../components/DatabaseSelection';
 import { ProjectSelection } from '../components/ProjectSelection';
-import './DataSourcePage.css';
 
 export type DataSourcePageProps = {
   selection?: string;
@@ -28,13 +27,13 @@ export const DataSourcePage = ({ selection, updateSelection, projects, pmvUpdate
   );
 
   return (
-    <Flex direction='column' gap={4} className='import-wizard-page'>
+    <Flex direction='column' gap={4} className='h-full overflow-auto' role='region' aria-label={t('import.source')}>
       {projects && (
-        <BasicField label={t('import.project')} className='source-selection-field'>
+        <BasicField label={t('import.project')} className='w-full'>
           <ProjectSelection projects={projects} updateSelection={value => updatePmv(value, pmvUpdateCallback)} />
         </BasicField>
       )}
-      <BasicField label={t('import.database')} className='source-selection-field' control={requiredProjectToggle}>
+      <BasicField label={t('import.database')} className='w-full' control={requiredProjectToggle}>
         <DatabaseSelection
           databases={databaseQuery.data?.databaseNames ?? {}}
           selection={selection}
diff --git a/packages/database-editor/src/components/ImportWizard/pages/TableSelectionPage.tsx b/packages/database-editor/src/components/ImportWizard/pages/TableSelectionPage.tsx
index 10085ed4..363e3738 100644
--- a/packages/database-editor/src/components/ImportWizard/pages/TableSelectionPage.tsx
+++ b/packages/database-editor/src/components/ImportWizard/pages/TableSelectionPage.tsx
@@ -28,7 +28,7 @@ export const SelectTablesPage = ({ selectedDatabase, setSelectedTables, selected
   const metaQuery = useMeta('meta/databaseTableNames', tableContext);
 
   return (
-    <Flex direction='column' className='import-wizard-page' gap={4}>
+    <Flex direction='column' className='h-full overflow-auto' gap={4} role='region' aria-label={t('import.selectTable')}>
       <BasicField label={t('import.filter')}>
         <BasicInput value={filter} onChange={e => setFilter(e.target.value)} />
       </BasicField>
diff --git a/packages/database-editor/src/components/editor/detail/DatabaseDetail.css b/packages/database-editor/src/components/editor/detail/DatabaseDetail.css
deleted file mode 100644
index ed96f548..00000000
--- a/packages/database-editor/src/components/editor/detail/DatabaseDetail.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.database-editor-detail-content {
-  padding: var(--size-3);
-  overflow: auto;
-}
diff --git a/packages/database-editor/src/components/editor/detail/DatabaseDetail.tsx b/packages/database-editor/src/components/editor/detail/DatabaseDetail.tsx
index a6ca91fe..fcd45360 100644
--- a/packages/database-editor/src/components/editor/detail/DatabaseDetail.tsx
+++ b/packages/database-editor/src/components/editor/detail/DatabaseDetail.tsx
@@ -8,30 +8,23 @@ import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
-  TooltipTrigger,
-  useHotkeys
+  TooltipTrigger
 } from '@axonivy/ui-components';
 import { IvyIcons } from '@axonivy/ui-icons';
-import { useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../../../AppContext';
 import { useMeta } from '../../../protocol/use-meta';
 import { useAction } from '../../../protocol/useAction';
 import { useKnownHotkeys } from '../../../util/hotkeys';
 import { AdditionalCollapsible } from './AdditionalPropertyCollapsible';
-import './DatabaseDetail.css';
 import { DetailProvider } from './DetailContext';
 import { GeneralCollapsible } from './GeneralCollapsible';
 import { PropertyCollapsible } from './PropertyCollapsible';
 
-export const DatabaseDetail = () => {
+export const DatabaseDetail = ({ ref }: { ref: React.Ref<HTMLDivElement> }) => {
   const { t } = useTranslation();
   const { databaseConfigs, selectedDatabase, helpUrl } = useAppContext();
 
-  const hotkeys = useKnownHotkeys();
-  const firstElement = useRef<HTMLDivElement>(null);
-  useHotkeys(hotkeys.focusInscription.hotkey, () => firstElement.current?.focus(), { scopes: ['global'] });
-
   const databaseConfig = selectedDatabase !== undefined ? databaseConfigs[selectedDatabase] : undefined;
   let title = t('database.connectionProperties');
   if (databaseConfig) {
@@ -42,8 +35,8 @@ export const DatabaseDetail = () => {
   const { openHelp: helpText } = useKnownHotkeys();
 
   return (
-    <Flex direction='column' className='database-editor-panel-content'>
-      <SidebarHeader title={title} icon={IvyIcons.PenEdit} className='database-editor-detail-toolbar' tabIndex={-1} ref={firstElement}>
+    <Flex direction='column' className='h-full'>
+      <SidebarHeader title={title} icon={IvyIcons.PenEdit} tabIndex={-1} ref={ref}>
         <TooltipProvider>
           <Tooltip>
             <TooltipTrigger asChild>
@@ -70,7 +63,7 @@ const DatabaseDetailContent = ({ databaseConfig }: { databaseConfig?: DatabaseCo
   if (isPending) {
     return (
       <Flex alignItems='center' justifyContent='center' style={{ width: '100%', height: '100%' }}>
-        <Spinner className='database-editor-detail-spinner' />
+        <Spinner />
       </Flex>
     );
   }
@@ -101,7 +94,7 @@ const DatabaseDetailContent = ({ databaseConfig }: { databaseConfig?: DatabaseCo
 
   return (
     <DetailProvider value={{ databaseConfig, updateDatabaseConfig, drivers, selectedDriver }}>
-      <Flex direction='column' gap={3} className='database-editor-detail-content' key={databaseConfig.name}>
+      <Flex direction='column' gap={3} className='min-h-0 overflow-auto p-3' key={databaseConfig.name}>
         <GeneralCollapsible />
         <PropertyCollapsible />
         <AdditionalCollapsible />
diff --git a/packages/database-editor/src/components/editor/master/AddDatabaseConnectionDialog.tsx b/packages/database-editor/src/components/editor/master/AddDatabaseConnectionDialog.tsx
index bf21811c..bc4b24bb 100644
--- a/packages/database-editor/src/components/editor/master/AddDatabaseConnectionDialog.tsx
+++ b/packages/database-editor/src/components/editor/master/AddDatabaseConnectionDialog.tsx
@@ -110,7 +110,7 @@ const AddDatabaseConnectionContent = ({ table, closeDialog }: AddDatabaseConnect
           <Tooltip>
             <TooltipTrigger asChild>
               <Button variant='primary' icon={IvyIcons.Plus} disabled={!allInputsValid} onClick={addDatabaseConnection}>
-                {t('dialog.addDatabaseConnection.createDatabaseConnection')}
+                {t('dialog.addDatabaseConnection.create')}
               </Button>
             </TooltipTrigger>
             <TooltipContent>
diff --git a/packages/database-editor/src/components/editor/master/ConnectionStateIndicator.css b/packages/database-editor/src/components/editor/master/ConnectionStateIndicator.css
deleted file mode 100644
index 5044edb5..00000000
--- a/packages/database-editor/src/components/editor/master/ConnectionStateIndicator.css
+++ /dev/null
@@ -1,44 +0,0 @@
-.database-editor-connection-state-indicator-background {
-  background-color: var(--N25);
-  clip-path: inset(0 0 0 0 round var(--border-r2));
-}
-
-.database-editor-connection-state-indicator {
-  width: 17px;
-  height: 17px;
-  border: 0.5px solid var(--N200);
-  border-radius: var(--border-r2);
-  text-align: center;
-  align-content: center;
-  color: var(--body);
-  cursor: default;
-}
-
-.database-editor-connection-state-indicator {
-  border-color: #e5151c66;
-  background-color: #e5151c1a;
-  color: #e5151c;
-}
-
-.database-editor-connection-state-indicator.working {
-  border-color: #10b98166;
-  background-color: #10b9811a;
-  color: #10b981;
-}
-
-.database-editor-connection-state-indicator.unknown {
-  border-color: #92929266;
-  background-color: #9292921a;
-  color: #929292;
-}
-
-.database-editor-state-title {
-  font-weight: bold;
-}
-
-.database-editor-state-separator {
-  width: 100%;
-  background-color: var(--N200);
-  border: none;
-  height: 1px;
-}
diff --git a/packages/database-editor/src/components/editor/master/ConnectionStateIndicator.tsx b/packages/database-editor/src/components/editor/master/ConnectionStateIndicator.tsx
index 9ae70162..ef11d768 100644
--- a/packages/database-editor/src/components/editor/master/ConnectionStateIndicator.tsx
+++ b/packages/database-editor/src/components/editor/master/ConnectionStateIndicator.tsx
@@ -1,14 +1,13 @@
-import type { ConnectionTestData, MapStringString } from '@axonivy/database-editor-protocol';
-import { cn, Flex, IvyIcon, Spinner, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@axonivy/ui-components';
+import type { ConnectionTestData } from '@axonivy/database-editor-protocol';
+import { Badge, Flex, IvyIcon, Separator, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@axonivy/ui-components';
 import { IvyIcons } from '@axonivy/ui-icons';
-import { useMemo } from 'react';
+import { useMemo, type ComponentProps } from 'react';
 import { useTranslation } from 'react-i18next';
-import './ConnectionStateIndicator.css';
 
 export const ConnectionStateIndicator = ({ state, exception, advise }: ConnectionTestData) => {
   const { t } = useTranslation();
 
-  const stateTranslation: MapStringString = useMemo(
+  const stateTranslation = useMemo<Record<string, string>>(
     () => ({
       CONNECTED: t('database.state.connected'),
       CONNECTION_FAILED: t('database.state.failed'),
@@ -23,42 +22,40 @@ export const ConnectionStateIndicator = ({ state, exception, advise }: Connectio
 
   if (state === 'PENDING') {
     return (
-      <div className='database-editor-connection-state-indicator-background'>
-        <div className={cn('database-editor-connection-state-indicator', 'unknown')}>
-          <Spinner size='small' />
-        </div>
-      </div>
+      <Badge size='s' variant='secondary' className='size-5'>
+        <IvyIcon icon={IvyIcons.Spinner} spin />
+      </Badge>
     );
   }
 
-  const variant = state === 'CONNECTED' ? 'working' : state === 'UNKNOWN' ? 'unknown' : 'error';
+  const variant: ComponentProps<typeof Badge>['variant'] = state === 'CONNECTED' ? 'green' : state === 'UNKNOWN' ? 'secondary' : 'red';
   const trimmedException = exception?.trim();
   const indicator =
-    variant === 'working' ? <IvyIcon icon={IvyIcons.Check} /> : variant === 'unknown' ? '?' : <IvyIcon icon={IvyIcons.Plus} rotate={45} />;
+    variant === 'green' ? <IvyIcon icon={IvyIcons.Check} /> : variant === 'secondary' ? '?' : <IvyIcon icon={IvyIcons.Close} />;
 
   return (
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <div className='database-editor-connection-state-indicator-background'>
-            <div className={cn('database-editor-connection-state-indicator', variant)}>{indicator}</div>
-          </div>
+          <Badge size='s' variant={variant} className='size-5'>
+            {indicator}
+          </Badge>
         </TooltipTrigger>
-        <TooltipContent className='database-editor-connection-tooltip-content'>
-          {variant === 'error' ? (
+        <TooltipContent>
+          {variant === 'red' ? (
             <Flex direction='column'>
-              <span className='database-editor-state-title'>{stateTranslation[state]}</span>
+              <span className='font-bold'>{stateTranslation[state]}</span>
               {trimmedException && <span style={{ whiteSpace: 'pre-line' }}>{trimmedException}</span>}
               {advise && (
                 <>
-                  <hr className='database-editor-state-separator' />
+                  <Separator orientation='horizontal' className='m-0!' />
                   <span>{t('database.connection.advice')}</span>
                   <span>{advise}</span>
                 </>
               )}
             </Flex>
           ) : (
-            <span className='database-editor-state-title'>{stateTranslation[state]}</span>
+            <span className='font-bold'>{stateTranslation[state]}</span>
           )}
         </TooltipContent>
       </Tooltip>
diff --git a/packages/database-editor/src/components/editor/master/DatabaseMasterContent.css b/packages/database-editor/src/components/editor/master/DatabaseMasterContent.css
deleted file mode 100644
index 27f1585a..00000000
--- a/packages/database-editor/src/components/editor/master/DatabaseMasterContent.css
+++ /dev/null
@@ -1,9 +0,0 @@
-.database-editor-master-content {
-  padding: var(--size-3);
-  overflow: auto;
-  height: 100%;
-}
-
-.database-editor-table-field {
-  overflow: auto;
-}
diff --git a/packages/database-editor/src/components/editor/master/DatabaseMasterContent.tsx b/packages/database-editor/src/components/editor/master/DatabaseMasterContent.tsx
index b2d99c4c..b7a4d91e 100644
--- a/packages/database-editor/src/components/editor/master/DatabaseMasterContent.tsx
+++ b/packages/database-editor/src/components/editor/master/DatabaseMasterContent.tsx
@@ -21,7 +21,6 @@ import { useTranslation } from 'react-i18next';
 import { useAppContext } from '../../../AppContext';
 import { useKnownHotkeys } from '../../../util/hotkeys';
 import { ConnectionStateIndicator } from './ConnectionStateIndicator';
-import './DatabaseMasterContent.css';
 import { EmptyMasterControl, MasterControl } from './MasterControl';
 
 export const DatabaseMasterContent = ({ detail, setDetail }: { detail: boolean; setDetail: (state: boolean) => void }) => {
@@ -117,12 +116,12 @@ export const DatabaseMasterContent = ({ detail, setDetail }: { detail: boolean;
   }
 
   return (
-    <Flex direction='column' onClick={() => table.resetRowSelection()} className='database-editor-master-content' ref={ref}>
+    <Flex direction='column' onClick={() => table.resetRowSelection()} className='h-full overflow-auto' ref={ref}>
       <BasicField
         label={t('database.allConnections')}
         control={!readonly && <MasterControl table={table} deleteDatabaseConnection={deleteDatabaseConnection} />}
         onClick={event => event.stopPropagation()}
-        className='database-editor-table-field'
+        className='m-3 min-h-0'
         tabIndex={-1}
         ref={firstElement}
       >
diff --git a/packages/database-editor/src/components/editor/master/DatabaseMasterToolbar.tsx b/packages/database-editor/src/components/editor/master/DatabaseMasterToolbar.tsx
index 68a32942..7cfb0410 100644
--- a/packages/database-editor/src/components/editor/master/DatabaseMasterToolbar.tsx
+++ b/packages/database-editor/src/components/editor/master/DatabaseMasterToolbar.tsx
@@ -30,7 +30,7 @@ export const DatabaseMasterToolbar = ({ detail, setDetail }: { detail: boolean;
   useHotkeys(hotkeys.focusToolbar.hotkey, () => firstElement.current?.focus(), { scopes: ['global'] });
 
   return (
-    <Toolbar className='database-editor-toolbar' tabIndex={-1} ref={firstElement}>
+    <Toolbar tabIndex={-1} ref={firstElement}>
       <ToolbarTitle>{t('database.databaseEditor', { projectName: context.pmv })}</ToolbarTitle>
       <Flex gap={1}>
         {!readonly && <EditButtons />}
diff --git a/packages/database-editor/src/components/editor/master/MasterControl.tsx b/packages/database-editor/src/components/editor/master/MasterControl.tsx
index 7118a31b..2ce072bb 100644
--- a/packages/database-editor/src/components/editor/master/MasterControl.tsx
+++ b/packages/database-editor/src/components/editor/master/MasterControl.tsx
@@ -18,7 +18,20 @@ export const MasterControl = ({ table, deleteDatabaseConnection }: MasterControl
   const { context, projects, testConnection } = useAppContext();
 
   return (
-    <Flex direction='row' gap={2} className='database-editor-main-control'>
+    <Flex direction='row' gap={2}>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button icon={IvyIcons.DatabaseLink} onClick={testConnection} aria-label={hotkeys.testConnection.label} />
+          </TooltipTrigger>
+          <TooltipContent>{hotkeys.testConnection.label}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+      <Separator decorative orientation='vertical' style={{ height: '20px', margin: 0 }} />
+      <ImportWizard context={{ app: context.app, file: context.file, projects: projects }}>
+        <Button aria-label={hotkeys.generate.label} icon={IvyIcons.SettingsCog} />
+      </ImportWizard>
+      <Separator decorative orientation='vertical' style={{ height: '20px', margin: 0 }} />
       <AddDatabaseConnectionDialog table={table}>
         <Button icon={IvyIcons.Plus} aria-label={hotkeys.addDatabaseConnection.label} />
       </AddDatabaseConnectionDialog>
@@ -36,19 +49,6 @@ export const MasterControl = ({ table, deleteDatabaseConnection }: MasterControl
           <TooltipContent>{hotkeys.deleteDatabaseConnection.label}</TooltipContent>
         </Tooltip>
       </TooltipProvider>
-      <Separator decorative orientation='vertical' style={{ height: '20px', margin: 0 }} />
-      <TooltipProvider>
-        <Tooltip>
-          <TooltipTrigger asChild>
-            <Button icon={IvyIcons.DatabaseLink} onClick={testConnection} aria-label={hotkeys.testConnection.label} />
-          </TooltipTrigger>
-          <TooltipContent>{hotkeys.testConnection.label}</TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
-      <Separator decorative orientation='vertical' style={{ height: '20px', margin: 0 }} />
-      <ImportWizard context={{ app: context.app, file: context.file, projects: projects }}>
-        <Button aria-label={hotkeys.generate.label} icon={IvyIcons.SettingsCog} />
-      </ImportWizard>
     </Flex>
   );
 };
diff --git a/packages/database-editor/src/index.css b/packages/database-editor/src/index.css
new file mode 100644
index 00000000..9e7035ae
--- /dev/null
+++ b/packages/database-editor/src/index.css
@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import '@axonivy/ui-components/src/styles/themes.css';
diff --git a/packages/database-editor/src/index.ts b/packages/database-editor/src/index.ts
index 85463e22..737849ff 100644
--- a/packages/database-editor/src/index.ts
+++ b/packages/database-editor/src/index.ts
@@ -6,3 +6,4 @@ export * from './query/query-client';
 export * from './query/QueryProvider';
 export { default as deTranslation } from './translation/database-editor/de.json';
 export { default as enTranslation } from './translation/database-editor/en.json';
+import './index.css';
diff --git a/packages/database-editor/src/translation/database-editor/de.json b/packages/database-editor/src/translation/database-editor/de.json
index d8c02743..62f7ab53 100644
--- a/packages/database-editor/src/translation/database-editor/de.json
+++ b/packages/database-editor/src/translation/database-editor/de.json
@@ -77,7 +77,7 @@
   },
   "dialog": {
     "addDatabaseConnection": {
-      "createDatabaseConnection": "Datenbank-Verbindung erstellen",
+      "create": "Erstellen",
       "createDatabaseConnectionTooltip": "Halte {{modifier}} gedrückt, um eine weitere Datenbank-Verbindung zu erstellen.",
       "description": "Wähle den Namen der Datenbank-Verbindung, die du hinzufügen möchtest.",
       "emptyNameError": "Name darf nicht leer sein.",
diff --git a/packages/database-editor/src/translation/database-editor/en.json b/packages/database-editor/src/translation/database-editor/en.json
index c0a8fef2..fe49d6a1 100644
--- a/packages/database-editor/src/translation/database-editor/en.json
+++ b/packages/database-editor/src/translation/database-editor/en.json
@@ -77,7 +77,7 @@
   },
   "dialog": {
     "addDatabaseConnection": {
-      "createDatabaseConnection": "Create Database Connection",
+      "create": "Create",
       "createDatabaseConnectionTooltip": "Hold {{modifier}} to add an additional Database Connection.",
       "description": "Choose the name of the Database Connection you want to add.",
       "emptyNameError": "Name cannot be empty.",
diff --git a/packages/database-editor/vite.config.ts b/packages/database-editor/vite.config.ts
index 9acdf19d..295a09f9 100644
--- a/packages/database-editor/vite.config.ts
+++ b/packages/database-editor/vite.config.ts
@@ -1,10 +1,11 @@
+import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { resolve } from 'path';
 import dts from 'vite-plugin-dts';
 import { defineConfig } from 'vitest/config';
 
 export default defineConfig({
-  plugins: [react(), dts({ tsconfigPath: './tsconfig.production.json' })],
+  plugins: [tailwindcss(), react(), dts({ tsconfigPath: './tsconfig.production.json' })],
   build: {
     outDir: 'lib',
     sourcemap: true,
diff --git a/playwright/tests/integration/mock/databaseEditor/detailView.spec.ts b/playwright/tests/integration/mock/databaseEditor/detailView.spec.ts
index d3f17f33..1d2ba125 100644
--- a/playwright/tests/integration/mock/databaseEditor/detailView.spec.ts
+++ b/playwright/tests/integration/mock/databaseEditor/detailView.spec.ts
@@ -73,9 +73,9 @@ test('switch driver', async () => {
 });
 
 test('title', async () => {
-  await expect(editor.detail.toolbar).toHaveText('Connection Properties');
+  await expect(editor.detail.header).toHaveText('Connection Properties');
   await editor.main.table.row(1).locator.click();
-  await expect(editor.detail.toolbar).toHaveText('Connection Properties - database1');
+  await expect(editor.detail.header).toHaveText('Connection Properties - database1');
 });
 
 test('empty', async () => {
@@ -95,7 +95,7 @@ test('do not leak values into details of another connection', async () => {
 
 test.describe('help', () => {
   test('button', async ({ page }) => {
-    const helpButton = editor.detail.toolbar.getByLabel('Open Help (F1)');
+    const helpButton = editor.detail.header.getByLabel('Open Help (F1)');
     await expect(helpButton).toBeVisible();
     await helpButton.hover();
     const tooltip = page.locator('.ui-tooltip-content').getByText('Open Help (F1)');
@@ -116,7 +116,7 @@ test.describe('driver query', () => {
   test('isPending', async () => {
     editor = await DatabaseEditor.openMock(editor.page, { metaJdbcDriversState: 'isPending' });
     await editor.main.table.row(0).locator.click();
-    await expect(editor.detail.locator.locator('.database-editor-detail-spinner')).toBeVisible();
+    await expect(editor.detail.locator.locator('.ui-spinner')).toBeVisible();
   });
 
   test('isError', async () => {
diff --git a/playwright/tests/integration/mock/databaseEditor/editor.spec.ts b/playwright/tests/integration/mock/databaseEditor/editor.spec.ts
index 66e2e08f..5c1c20d3 100644
--- a/playwright/tests/integration/mock/databaseEditor/editor.spec.ts
+++ b/playwright/tests/integration/mock/databaseEditor/editor.spec.ts
@@ -8,9 +8,9 @@ test.beforeEach(async ({ page }) => {
 });
 
 test('readonly', async () => {
-  await expect(editor.main.control.locator).toBeVisible();
+  await expect(editor.main.control.add.trigger).toBeVisible();
   editor = await DatabaseEditor.openMock(editor.page, { readonly: true });
-  await expect(editor.main.control.locator).toBeHidden();
+  await expect(editor.main.control.add.trigger).toBeHidden();
 });
 
 test('focus jumps', async () => {
@@ -18,9 +18,9 @@ test('focus jumps', async () => {
   await editor.page.keyboard.press('1');
   await expect(editor.main.toolbar.locator).toBeFocused();
   await editor.page.keyboard.press('2');
-  await expect(editor.main.locator.locator('.database-editor-table-field')).toBeFocused();
+  await expect(editor.main.locator.locator('.ui-fieldset').first()).toBeFocused();
   await editor.page.keyboard.press('3');
-  await expect(editor.detail.toolbar).toBeFocused();
+  await expect(editor.detail.header).toBeFocused();
 });
 
 test('undo / redo', async ({ page, browserName }) => {
diff --git a/playwright/tests/integration/mock/databaseEditor/master.spec.ts b/playwright/tests/integration/mock/databaseEditor/master.spec.ts
index 2ba4fe22..2554563a 100644
--- a/playwright/tests/integration/mock/databaseEditor/master.spec.ts
+++ b/playwright/tests/integration/mock/databaseEditor/master.spec.ts
@@ -99,7 +99,7 @@ test.describe('add', () => {
     const row = editor.main.table.row(4);
     await expect(row.cell(0).locator).toHaveText('NewDatabaseConnection');
     await row.expectToBeSelected();
-    await expect(editor.detail.toolbar).toHaveText('Connection Properties - NewDatabaseConnection');
+    await expect(editor.detail.header).toHaveText('Connection Properties - NewDatabaseConnection');
     await expect(editor.detail.general.database.locator).toHaveText('MySQL');
     await expect(editor.detail.general.driver.locator).toHaveText('MySQL');
     await expect(editor.detail.general.maxConnections).toHaveValue('5');
@@ -152,7 +152,7 @@ test.describe('delete', () => {
     await expect(row.cell(0).locator).toHaveText('database1');
 
     await row.expectToBeSelected();
-    await expect(editor.detail.toolbar).toHaveText('Connection Properties - database1');
+    await expect(editor.detail.header).toHaveText('Connection Properties - database1');
   });
 
   test('keyboard', async () => {
@@ -169,33 +169,33 @@ test.describe('connection tester', () => {
   test('single connection - working', async ({ page }) => {
     const testButton = editor.main.control.testConnection;
     const row = editor.main.table.row(2);
-    const indicator = row.locator.locator('.database-editor-connection-state-indicator');
+    const indicator = row.locator.locator('.ui-badge');
     await expect(indicator).toBeVisible();
-    await expect(indicator).toHaveClass('database-editor-connection-state-indicator unknown');
+    await expect(indicator).toHaveClass(/bg-n100/);
 
     await row.locator.click();
     await testButton.click();
     const toast = page.locator('ol.ui-toaster > li');
     await expect(toast).toBeVisible();
     await expect(toast).toContainText('Tested "database2"');
-    await expect(indicator).toHaveClass('database-editor-connection-state-indicator working');
+    await expect(indicator).toHaveClass(/bg-green-300/);
 
     await editor.detail.properties.host.fill('test');
-    await expect(indicator).toHaveClass('database-editor-connection-state-indicator unknown');
+    await expect(indicator).toHaveClass(/bg-n100/);
   });
 
   test('connection - invalid', async ({ page }) => {
     const testButton = editor.main.control.testConnection;
     const row = editor.main.table.row(0);
-    const indicator = row.locator.locator('.database-editor-connection-state-indicator');
+    const indicator = row.locator.locator('.ui-badge');
     await expect(indicator).toBeVisible();
-    await expect(indicator).toHaveClass('database-editor-connection-state-indicator unknown');
+    await expect(indicator).toHaveClass(/bg-n100/);
 
     await testButton.click();
-    await expect(indicator).toHaveClass('database-editor-connection-state-indicator error');
+    await expect(indicator).toHaveClass(/bg-red-300/);
 
     await indicator.hover();
-    const tooltip = page.locator('.database-editor-connection-tooltip-content');
+    const tooltip = page.locator('.ui-tooltip-content');
     await expect(tooltip).toBeVisible();
     await expect(tooltip).toContainText('Incorrect host or port');
     await expect(tooltip).toContainText('mock-exception');
@@ -204,19 +204,19 @@ test.describe('connection tester', () => {
   });
 
   test('all connections', async ({ page }) => {
-    const indicators = editor.main.table.locator.locator('.database-editor-connection-state-indicator');
+    const indicators = editor.main.table.locator.locator('.ui-badge');
     await expect(indicators).toHaveCount(4);
-    await expect(indicators).toHaveClass([/unknown/, /unknown/, /unknown/, /unknown/]);
+    await expect(indicators).toHaveClass([/bg-n100/, /bg-n100/, /bg-n100/, /bg-n100/]);
 
     await editor.main.control.testConnection.click();
     const toast = page.locator('ol.ui-toaster > li');
     await expect(toast).toBeVisible();
     await expect(toast).toContainText('Tested all connections');
-    await expect(indicators).toHaveClass([/error/, /error/, /working/, /working/]);
+    await expect(indicators).toHaveClass([/bg-red-300/, /bg-red-300/, /bg-green-300/, /bg-green-300/]);
 
     const row = editor.main.table.row(0);
     await row.locator.click();
     await editor.detail.properties.host.fill('test');
-    await expect(indicators).toHaveClass([/unknown/, /error/, /working/, /working/]);
+    await expect(indicators).toHaveClass([/bg-n100/, /bg-red-300/, /bg-green-300/, /bg-green-300/]);
   });
 });
diff --git a/playwright/tests/integration/mock/importWizard/creationPage.spec.ts b/playwright/tests/integration/mock/importWizard/creationPage.spec.ts
index cae1542b..0e616cd4 100644
--- a/playwright/tests/integration/mock/importWizard/creationPage.spec.ts
+++ b/playwright/tests/integration/mock/importWizard/creationPage.spec.ts
@@ -14,7 +14,7 @@ test.beforeEach(async ({ page }) => {
   await importDialog.dataSourcePage.projectSelection.choose('project1-name');
   await importDialog.dataSourcePage.databaseSelect.choose('MockDatabase-001');
   await importDialog.next.click();
-  await importDialog.tableSelectionPage.tableList.locator('.selection-list-button').first().click();
+  await importDialog.tableSelectionPage.availableTables.getByRole('button').first().click();
   await importDialog.next.click();
   creationPage = importDialog.creationPage;
 });
diff --git a/playwright/tests/integration/mock/importWizard/resultPage.spec.ts b/playwright/tests/integration/mock/importWizard/resultPage.spec.ts
index 59538aff..419d4006 100644
--- a/playwright/tests/integration/mock/importWizard/resultPage.spec.ts
+++ b/playwright/tests/integration/mock/importWizard/resultPage.spec.ts
@@ -14,7 +14,7 @@ test.beforeEach(async ({ page }) => {
   await importDialog.dataSourcePage.projectSelection.choose('project1-name');
   await importDialog.dataSourcePage.databaseSelect.choose('MockDatabase-001');
   await importDialog.next.click();
-  await importDialog.tableSelectionPage.tableList.locator('.selection-list-button').first().click();
+  await importDialog.tableSelectionPage.availableTables.getByRole('button').first().click();
   await importDialog.next.click();
   await importDialog.creationPage.table.locator.getByRole('checkbox').first().click();
   resultPage = importDialog.resultPage;
diff --git a/playwright/tests/integration/mock/importWizard/tableSelectionPage.spec.ts b/playwright/tests/integration/mock/importWizard/tableSelectionPage.spec.ts
index 16cef1f7..f5eab652 100644
--- a/playwright/tests/integration/mock/importWizard/tableSelectionPage.spec.ts
+++ b/playwright/tests/integration/mock/importWizard/tableSelectionPage.spec.ts
@@ -25,12 +25,12 @@ test('visible', async () => {
 });
 
 test('table selection', async () => {
-  const availableTables = tableSelectionPage.tableList.nth(0);
-  const tables = availableTables.locator('.selection-list-button');
+  const availableTables = tableSelectionPage.availableTables;
+  const tables = availableTables.getByRole('button');
   await expect(tables).toHaveCount(3);
 
-  const selectedTables = tableSelectionPage.tableList.nth(1);
-  const activeTables = selectedTables.locator('.selection-list-button');
+  const selectedTables = tableSelectionPage.selectedTables;
+  const activeTables = selectedTables.getByRole('button');
   await expect(activeTables).toHaveCount(0);
 
   await tables.first().click();
@@ -44,8 +44,8 @@ test('table selection', async () => {
 });
 
 test('proceed requirement', async () => {
-  const availableTables = tableSelectionPage.tableList.nth(0);
-  const tables = availableTables.locator('.selection-list-button');
+  const availableTables = tableSelectionPage.availableTables;
+  const tables = availableTables.getByRole('button');
   await expect(tables).toHaveCount(3);
   await tables.first().click();
   await expect(importDialog.next).toBeEnabled();
diff --git a/playwright/tests/pageobjects/DatabaseEditor.ts b/playwright/tests/pageobjects/DatabaseEditor.ts
index a66f42f2..8cd2a980 100644
--- a/playwright/tests/pageobjects/DatabaseEditor.ts
+++ b/playwright/tests/pageobjects/DatabaseEditor.ts
@@ -1,4 +1,4 @@
-import { expect, type Locator, type Page } from '@playwright/test';
+import { expect, type Page } from '@playwright/test';
 import { randomUUID } from 'crypto';
 import { DetailPanel } from './detail/DetailPanel';
 import { MainPanel } from './main/MainPanel';
@@ -13,16 +13,14 @@ const tmpDir = '/tmp';
 
 export class DatabaseEditor {
   readonly page: Page;
-  readonly locator: Locator;
   readonly main: MainPanel;
   readonly detail: DetailPanel;
   private readonly pmv?: string;
 
   constructor(page: Page, pmv?: string) {
     this.page = page;
-    this.locator = page.locator(':root');
     this.main = new MainPanel(page);
-    this.detail = new DetailPanel(page, this.locator);
+    this.detail = new DetailPanel(page);
     this.pmv = pmv;
   }
 
diff --git a/playwright/tests/pageobjects/detail/DetailPanel.ts b/playwright/tests/pageobjects/detail/DetailPanel.ts
index 958ecdeb..44fe59d7 100644
--- a/playwright/tests/pageobjects/detail/DetailPanel.ts
+++ b/playwright/tests/pageobjects/detail/DetailPanel.ts
@@ -5,15 +5,15 @@ import { PropertiesCollapsible } from './PropertiesCollapsible';
 
 export class DetailPanel {
   readonly locator: Locator;
-  readonly toolbar: Locator;
+  readonly header: Locator;
   readonly panelMessage: Locator;
   readonly general: GeneralCollapsible;
   readonly properties: PropertiesCollapsible;
   readonly additionalProperties: AdditionalPropertiesCollapsible;
 
-  constructor(page: Page, parent: Locator) {
-    this.locator = parent.locator('.database-editor-detail-panel');
-    this.toolbar = this.locator.locator('.database-editor-detail-toolbar');
+  constructor(page: Page) {
+    this.locator = page.locator('#database-editor-detail');
+    this.header = this.locator.locator('.ui-sidebar-header');
     this.panelMessage = this.locator.locator('.ui-panel-message');
     this.general = new GeneralCollapsible(page, this.locator);
     this.properties = new PropertiesCollapsible(this.locator);
diff --git a/playwright/tests/pageobjects/main/AddDatabaseConnection.ts b/playwright/tests/pageobjects/main/AddDatabaseConnection.ts
index adc01412..bfe1e72d 100644
--- a/playwright/tests/pageobjects/main/AddDatabaseConnection.ts
+++ b/playwright/tests/pageobjects/main/AddDatabaseConnection.ts
@@ -13,6 +13,6 @@ export class AddDatabaseConnection {
     this.trigger = parent.getByRole('button', { name: 'Add Database Connection' });
     this.name = new Textbox(this.locator, { name: 'Name' });
     this.cancel = this.locator.getByRole('button', { name: 'Cancel' });
-    this.create = this.locator.getByRole('button', { name: 'Create Database Connection' });
+    this.create = this.locator.getByRole('button', { name: 'Create' });
   }
 }
diff --git a/playwright/tests/pageobjects/main/Control.ts b/playwright/tests/pageobjects/main/Control.ts
index 47b3f06c..e3aa1fbe 100644
--- a/playwright/tests/pageobjects/main/Control.ts
+++ b/playwright/tests/pageobjects/main/Control.ts
@@ -10,7 +10,7 @@ export class Control {
   readonly importDialog: ImportDialog;
 
   constructor(page: Page, parent: Locator) {
-    this.locator = parent.locator('.database-editor-main-control');
+    this.locator = parent;
     this.add = new AddDatabaseConnection(page, this.locator);
     this.delete = this.locator.getByRole('button', { name: 'Delete Database Connection' });
     this.importDialog = new ImportDialog(page, this.locator);
diff --git a/playwright/tests/pageobjects/main/MainPanel.ts b/playwright/tests/pageobjects/main/MainPanel.ts
index ac1d9536..1597b86b 100644
--- a/playwright/tests/pageobjects/main/MainPanel.ts
+++ b/playwright/tests/pageobjects/main/MainPanel.ts
@@ -10,9 +10,9 @@ export class MainPanel {
   readonly table: Table;
 
   constructor(page: Page) {
-    this.locator = page.locator('.database-editor-main-panel');
+    this.locator = page.locator('#database-editor-main');
     this.toolbar = new Toolbar(page, this.locator);
     this.control = new Control(page, this.locator);
-    this.table = new Table(this.locator.locator('.database-editor-table-field'));
+    this.table = new Table(this.locator.locator('.ui-table-root'));
   }
 }
diff --git a/playwright/tests/pageobjects/main/Toolbar.ts b/playwright/tests/pageobjects/main/Toolbar.ts
index 62b2bf31..6dc708dd 100644
--- a/playwright/tests/pageobjects/main/Toolbar.ts
+++ b/playwright/tests/pageobjects/main/Toolbar.ts
@@ -9,7 +9,7 @@ export class Toolbar {
 
   constructor(page: Page, parent: Locator) {
     this.page = page;
-    this.locator = parent.locator('.database-editor-toolbar');
+    this.locator = parent.locator('.ui-toolbar');
     this.undo = this.locator.getByRole('button', { name: 'Undo' });
     this.redo = this.locator.getByRole('button', { name: 'Redo' });
     this.detailButton = this.locator.locator('button:has(i.ivy-layout-sidebar-right-collapse)');
diff --git a/playwright/tests/pageobjects/main/import-wizard/CreationPage.ts b/playwright/tests/pageobjects/main/import-wizard/CreationPage.ts
index 1f82ba48..e15f936a 100644
--- a/playwright/tests/pageobjects/main/import-wizard/CreationPage.ts
+++ b/playwright/tests/pageobjects/main/import-wizard/CreationPage.ts
@@ -9,10 +9,10 @@ export class CreationPage {
   readonly attributeTable: Table;
 
   constructor(page: Page, parent: Locator) {
-    this.locator = parent.locator('.database-creation');
-    this.table = new Table(page, '.table-creation');
+    this.locator = parent.getByRole('region', { name: 'Options' });
+    this.table = new Table(this.locator);
     this.namespace = parent.getByLabel('Namespace*');
-    this.attributeButton = this.locator.locator('.attribute-selection-trigger');
-    this.attributeTable = new Table(page, '.attribute-selection-table');
+    this.attributeButton = this.locator.getByRole('button', { name: 'Attributes' });
+    this.attributeTable = new Table(page.locator('.ui-popover-content'));
   }
 }
diff --git a/playwright/tests/pageobjects/main/import-wizard/DataSourcePage.ts b/playwright/tests/pageobjects/main/import-wizard/DataSourcePage.ts
index de9ae639..323e5bd0 100644
--- a/playwright/tests/pageobjects/main/import-wizard/DataSourcePage.ts
+++ b/playwright/tests/pageobjects/main/import-wizard/DataSourcePage.ts
@@ -9,7 +9,7 @@ export class DataSourcePage {
   readonly requiredProjects: Locator;
 
   constructor(page: Page, parent: Locator) {
-    this.locator = parent.locator('.database-data-source');
+    this.locator = parent.getByRole('region', { name: 'Data Source' });
     this.typeSelection = this.locator.locator('.source-group');
     this.projectSelection = new Select(page, this.locator, { nth: 0 });
     this.databaseSelect = new Select(page, this.locator, { nth: 1 });
diff --git a/playwright/tests/pageobjects/main/import-wizard/ResultPage.ts b/playwright/tests/pageobjects/main/import-wizard/ResultPage.ts
index 73bd6ddf..ba4020e4 100644
--- a/playwright/tests/pageobjects/main/import-wizard/ResultPage.ts
+++ b/playwright/tests/pageobjects/main/import-wizard/ResultPage.ts
@@ -7,8 +7,8 @@ export class ResultPage {
   readonly table: Table;
 
   constructor(page: Page, parent: Locator) {
-    this.locator = parent.locator('.database-creation-result');
-    this.table = new Table(page, '.table-errors');
-    this.header = parent.locator('h3');
+    this.locator = parent.getByRole('region', { name: 'Result' });
+    this.table = new Table(this.locator);
+    this.header = this.locator.getByRole('heading', { level: 3 });
   }
 }
diff --git a/playwright/tests/pageobjects/main/import-wizard/Table.ts b/playwright/tests/pageobjects/main/import-wizard/Table.ts
index 8ab3c6b7..bef26775 100644
--- a/playwright/tests/pageobjects/main/import-wizard/Table.ts
+++ b/playwright/tests/pageobjects/main/import-wizard/Table.ts
@@ -1,14 +1,12 @@
-import { expect, type Locator, type Page } from '@playwright/test';
+import { expect, type Locator } from '@playwright/test';
 
 export class Table {
-  readonly page: Page;
   readonly locator: Locator;
   readonly headers: Locator;
   readonly rows: Locator;
 
-  constructor(page: Page, locator: string) {
-    this.page = page;
-    this.locator = this.page.locator(locator);
+  constructor(parent: Locator) {
+    this.locator = parent.locator('.ui-table-root');
     this.headers = this.locator.locator('.ui-table-head');
     this.rows = this.locator.locator('.ui-table-row');
   }
diff --git a/playwright/tests/pageobjects/main/import-wizard/TableSelectionPage.ts b/playwright/tests/pageobjects/main/import-wizard/TableSelectionPage.ts
index 471572e6..98b2516c 100644
--- a/playwright/tests/pageobjects/main/import-wizard/TableSelectionPage.ts
+++ b/playwright/tests/pageobjects/main/import-wizard/TableSelectionPage.ts
@@ -3,9 +3,13 @@ import type { Locator, Page } from '@playwright/test';
 export class TableSelectionPage {
   readonly locator: Locator;
   readonly tableList: Locator;
+  readonly availableTables: Locator;
+  readonly selectedTables: Locator;
 
-  constructor(page: Page, parent: Locator) {
-    this.locator = parent.locator('.database-table-selection');
-    this.tableList = parent.locator('.selection-list-container');
+  constructor(_page: Page, parent: Locator) {
+    this.locator = parent.getByRole('region', { name: 'Tables' });
+    this.tableList = this.locator.getByRole('list');
+    this.availableTables = this.locator.getByRole('list', { name: 'Choose the tables you want to select' });
+    this.selectedTables = this.locator.getByRole('list', { name: 'Your selection' });
   }
 }
diff --git a/playwright/tests/pageobjects/main/import-wizard/Timeline.ts b/playwright/tests/pageobjects/main/import-wizard/Timeline.ts
index 735773fe..45038e33 100644
--- a/playwright/tests/pageobjects/main/import-wizard/Timeline.ts
+++ b/playwright/tests/pageobjects/main/import-wizard/Timeline.ts
@@ -5,8 +5,8 @@ export class Timeline {
   readonly items: Locator;
 
   constructor(parent: Locator) {
-    this.locator = parent.locator('.timeline');
-    this.items = this.locator.locator('.timeline-item');
+    this.locator = parent.getByRole('list');
+    this.items = this.locator.getByRole('button');
   }
 
   expectItemsCount = async (n: number) => {
@@ -20,6 +20,6 @@ export class Timeline {
 
   expectItemToBeActive = async (name: string) => {
     const item = this.items.filter({ hasText: name }).first();
-    await expect(item).toHaveClass(/active/);
+    await expect(item).toHaveAttribute('aria-current', 'step');
   };
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d9aba82c..947f5adb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -10,7 +10,7 @@ importers:
     devDependencies:
       '@axonivy/eslint-config':
         specifier: ~14.0.0-next.1079.485110d
-        version: 14.0.0-next.1079.485110d(jiti@2.6.1)(tailwindcss@4.2.1)(typescript@5.9.3)
+        version: 14.0.0-next.1079.485110d(jiti@2.6.1)(tailwindcss@4.2.2)(typescript@5.9.3)
       '@axonivy/prettier-config':
         specifier: ~14.0.0-next.1079.485110d
         version: 14.0.0-next.1079.485110d
@@ -35,6 +35,9 @@ importers:
       rimraf:
         specifier: ^6.0.1
         version: 6.1.3
+      tailwindcss:
+        specifier: ^4.2.2
+        version: 4.2.2
       typescript:
         specifier: ^5.8.3
         version: 5.9.3
@@ -78,6 +81,9 @@ importers:
         specifier: ^16.0.0
         version: 16.5.8(i18next@25.8.18(typescript@5.9.3))(react-dom@19.2.4(react@19.2.4))(react@19.2.4)(typescript@5.9.3)
     devDependencies:
+      '@tailwindcss/vite':
+        specifier: ^4.2.2
+        version: 4.2.2(vite@8.0.0(@types/node@24.12.0)(esbuild@0.27.4)(jiti@2.6.1)(yaml@2.8.2))
       '@types/react':
         specifier: ^19.0.7
         version: 19.2.14
@@ -87,6 +93,9 @@ importers:
       '@vitejs/plugin-react':
         specifier: ^6.0.0
         version: 6.0.1(vite@8.0.0(@types/node@24.12.0)(esbuild@0.27.4)(jiti@2.6.1)(yaml@2.8.2))
+      tailwindcss:
+        specifier: ^4.2.2
+        version: 4.2.2
       vite:
         specifier: ^8.0.0
         version: 8.0.0(@types/node@24.12.0)(esbuild@0.27.4)(jiti@2.6.1)(yaml@2.8.2)
@@ -124,6 +133,9 @@ importers:
       '@axonivy/ui-icons':
         specifier: ~14.0.0-next.1079.485110d
         version: 14.0.0-next.1079.485110d
+      '@tailwindcss/vite':
+        specifier: ^4.2.2
+        version: 4.2.2(vite@8.0.0(@types/node@24.12.0)(esbuild@0.27.4)(jiti@2.6.1)(yaml@2.8.2))
       '@tanstack/react-table':
         specifier: ^8.21.3
         version: 8.21.3(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
@@ -154,6 +166,9 @@ importers:
       react-dom:
         specifier: ^19.0.0
         version: 19.2.4(react@19.2.4)
+      tailwindcss:
+        specifier: ^4.2.2
+        version: 4.2.2
       typescript:
         specifier: ^5.8.3
         version: 5.9.3
@@ -2028,6 +2043,100 @@ packages:
   '@swc/types@0.1.25':
     resolution: {integrity: sha512-iAoY/qRhNH8a/hBvm3zKj9qQ4oc2+3w1unPJa2XvTK3XjeLXtzcCingVPw/9e5mn1+0yPqxcBGp9Jf0pkfMb1g==}
 
+  '@tailwindcss/node@4.2.2':
+    resolution: {integrity: sha512-pXS+wJ2gZpVXqFaUEjojq7jzMpTGf8rU6ipJz5ovJV6PUGmlJ+jvIwGrzdHdQ80Sg+wmQxUFuoW1UAAwHNEdFA==}
+
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    resolution: {integrity: sha512-dXGR1n+P3B6748jZO/SvHZq7qBOqqzQ+yFrXpoOWWALWndF9MoSKAT3Q0fYgAzYzGhxNYOoysRvYlpixRBBoDg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [android]
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    resolution: {integrity: sha512-iq9Qjr6knfMpZHj55/37ouZeykwbDqF21gPFtfnhCCKGDcPI/21FKC9XdMO/XyBM7qKORx6UIhGgg6jLl7BZlg==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    resolution: {integrity: sha512-BlR+2c3nzc8f2G639LpL89YY4bdcIdUmiOOkv2GQv4/4M0vJlpXEa0JXNHhCHU7VWOKWT/CjqHdTP8aUuDJkuw==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [darwin]
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    resolution: {integrity: sha512-YUqUgrGMSu2CDO82hzlQ5qSb5xmx3RUrke/QgnoEx7KvmRJHQuZHZmZTLSuuHwFf0DJPybFMXMYf+WJdxHy/nQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [freebsd]
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    resolution: {integrity: sha512-FPdhvsW6g06T9BWT0qTwiVZYE2WIFo2dY5aCSpjG/S/u1tby+wXoslXS0kl3/KXnULlLr1E3NPRRw0g7t2kgaQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm]
+    os: [linux]
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    resolution: {integrity: sha512-4og1V+ftEPXGttOO7eCmW7VICmzzJWgMx+QXAJRAhjrSjumCwWqMfkDrNu1LXEQzNAwz28NCUpucgQPrR4S2yw==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    resolution: {integrity: sha512-oCfG/mS+/+XRlwNjnsNLVwnMWYH7tn/kYPsNPh+JSOMlnt93mYNCKHYzylRhI51X+TbR+ufNhhKKzm6QkqX8ag==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    resolution: {integrity: sha512-rTAGAkDgqbXHNp/xW0iugLVmX62wOp2PoE39BTCGKjv3Iocf6AFbRP/wZT/kuCxC9QBh9Pu8XPkv/zCZB2mcMg==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [glibc]
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    resolution: {integrity: sha512-XW3t3qwbIwiSyRCggeO2zxe3KWaEbM0/kW9e8+0XpBgyKU4ATYzcVSMKteZJ1iukJ3HgHBjbg9P5YPRCVUxlnQ==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [linux]
+    libc: [musl]
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    resolution: {integrity: sha512-eKSztKsmEsn1O5lJ4ZAfyn41NfG7vzCg496YiGtMDV86jz1q/irhms5O0VrY6ZwTUkFy/EKG3RfWgxSI3VbZ8Q==}
+    engines: {node: '>=14.0.0'}
+    cpu: [wasm32]
+    bundledDependencies:
+      - '@napi-rs/wasm-runtime'
+      - '@emnapi/core'
+      - '@emnapi/runtime'
+      - '@tybys/wasm-util'
+      - '@emnapi/wasi-threads'
+      - tslib
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    resolution: {integrity: sha512-qPmaQM4iKu5mxpsrWZMOZRgZv1tOZpUm+zdhhQP0VhJfyGGO3aUKdbh3gDZc/dPLQwW4eSqWGrrcWNBZWUWaXQ==}
+    engines: {node: '>= 20'}
+    cpu: [arm64]
+    os: [win32]
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    resolution: {integrity: sha512-1T/37VvI7WyH66b+vqHj/cLwnCxt7Qt3WFu5Q8hk65aOvlwAhs7rAp1VkulBJw/N4tMirXjVnylTR72uI0HGcA==}
+    engines: {node: '>= 20'}
+    cpu: [x64]
+    os: [win32]
+
+  '@tailwindcss/oxide@4.2.2':
+    resolution: {integrity: sha512-qEUA07+E5kehxYp9BVMpq9E8vnJuBHfJEC0vPC5e7iL/hw7HR61aDKoVoKzrG+QKp56vhNZe4qwkRmMC0zDLvg==}
+    engines: {node: '>= 20'}
+
+  '@tailwindcss/vite@4.2.2':
+    resolution: {integrity: sha512-mEiF5HO1QqCLXoNEfXVA1Tzo+cYsrqV7w9Juj2wdUFyW07JRenqMG225MvPwr3ZD9N1bFQj46X7r33iHxLUW0w==}
+    peerDependencies:
+      vite: ^5.2.0 || ^6 || ^7 || ^8
+
   '@tanstack/eslint-plugin-query@5.95.0':
     resolution: {integrity: sha512-XvEfgHyZoeGYGt0uOFwEbgkNMrRxoPt8Gy44cu3OwYFw6CU8uPAaUUiDJCqeyvYNNkuhnR4gWRn6vu5fcFSTUQ==}
     peerDependencies:
@@ -4478,8 +4587,8 @@ packages:
   tailwind-merge@3.5.0:
     resolution: {integrity: sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A==}
 
-  tailwindcss@4.2.1:
-    resolution: {integrity: sha512-/tBrSQ36vCleJkAOsy9kbNTgaxvGbyOamC30PRePTQe/o1MFwEKHQk4Cn7BNGaPtjp+PuUrByJehM1hgxfq4sw==}
+  tailwindcss@4.2.2:
+    resolution: {integrity: sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q==}
 
   tapable@2.3.0:
     resolution: {integrity: sha512-g9ljZiwki/LfxmQADO3dEY1CbpmXT5Hm2fJ+QaGKwSXUylMybePR7/67YW7jOrrvjEgL1Fmz5kzyAjWVWLlucg==}
@@ -4971,7 +5080,7 @@ snapshots:
 
   '@asamuzakjp/nwsapi@2.3.9': {}
 
-  '@axonivy/eslint-config@14.0.0-next.1079.485110d(jiti@2.6.1)(tailwindcss@4.2.1)(typescript@5.9.3)':
+  '@axonivy/eslint-config@14.0.0-next.1079.485110d(jiti@2.6.1)(tailwindcss@4.2.2)(typescript@5.9.3)':
     dependencies:
       '@eslint/js': 9.39.4
       '@tanstack/eslint-plugin-query': 5.95.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
@@ -4979,7 +5088,7 @@ snapshots:
       '@typescript-eslint/parser': 8.57.1(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
       eslint: 9.39.4(jiti@2.6.1)
       eslint-formatter-checkstyle: 9.0.1
-      eslint-plugin-better-tailwindcss: 4.3.2(eslint@9.39.4(jiti@2.6.1))(tailwindcss@4.2.1)(typescript@5.9.3)
+      eslint-plugin-better-tailwindcss: 4.3.2(eslint@9.39.4(jiti@2.6.1))(tailwindcss@4.2.2)(typescript@5.9.3)
       eslint-plugin-i18next: 6.1.3
       eslint-plugin-playwright: 2.10.1(eslint@9.39.4(jiti@2.6.1))
       eslint-plugin-react: 7.37.5(eslint@9.39.4(jiti@2.6.1))
@@ -6918,6 +7027,74 @@ snapshots:
     dependencies:
       '@swc/counter': 0.1.3
 
+  '@tailwindcss/node@4.2.2':
+    dependencies:
+      '@jridgewell/remapping': 2.3.5
+      enhanced-resolve: 5.20.0
+      jiti: 2.6.1
+      lightningcss: 1.32.0
+      magic-string: 0.30.21
+      source-map-js: 1.2.1
+      tailwindcss: 4.2.2
+
+  '@tailwindcss/oxide-android-arm64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-arm64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-darwin-x64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-freebsd-x64@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm-gnueabihf@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-gnu@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-arm64-musl@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-gnu@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-linux-x64-musl@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-wasm32-wasi@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-arm64-msvc@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide-win32-x64-msvc@4.2.2':
+    optional: true
+
+  '@tailwindcss/oxide@4.2.2':
+    optionalDependencies:
+      '@tailwindcss/oxide-android-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-arm64': 4.2.2
+      '@tailwindcss/oxide-darwin-x64': 4.2.2
+      '@tailwindcss/oxide-freebsd-x64': 4.2.2
+      '@tailwindcss/oxide-linux-arm-gnueabihf': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-arm64-musl': 4.2.2
+      '@tailwindcss/oxide-linux-x64-gnu': 4.2.2
+      '@tailwindcss/oxide-linux-x64-musl': 4.2.2
+      '@tailwindcss/oxide-wasm32-wasi': 4.2.2
+      '@tailwindcss/oxide-win32-arm64-msvc': 4.2.2
+      '@tailwindcss/oxide-win32-x64-msvc': 4.2.2
+
+  '@tailwindcss/vite@4.2.2(vite@8.0.0(@types/node@24.12.0)(esbuild@0.27.4)(jiti@2.6.1)(yaml@2.8.2))':
+    dependencies:
+      '@tailwindcss/node': 4.2.2
+      '@tailwindcss/oxide': 4.2.2
+      tailwindcss: 4.2.2
+      vite: 8.0.0(@types/node@24.12.0)(esbuild@0.27.4)(jiti@2.6.1)(yaml@2.8.2)
+
   '@tanstack/eslint-plugin-query@5.95.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/utils': 8.57.0(eslint@9.39.4(jiti@2.6.1))(typescript@5.9.3)
@@ -7890,7 +8067,7 @@ snapshots:
 
   eslint-formatter-checkstyle@9.0.1: {}
 
-  eslint-plugin-better-tailwindcss@4.3.2(eslint@9.39.4(jiti@2.6.1))(tailwindcss@4.2.1)(typescript@5.9.3):
+  eslint-plugin-better-tailwindcss@4.3.2(eslint@9.39.4(jiti@2.6.1))(tailwindcss@4.2.2)(typescript@5.9.3):
     dependencies:
       '@eslint/css-tree': 3.6.9
       '@valibot/to-json-schema': 1.5.0(valibot@1.2.0(typescript@5.9.3))
@@ -7898,7 +8075,7 @@ snapshots:
       jiti: 2.6.1
       synckit: 0.11.12
       tailwind-csstree: 0.1.4
-      tailwindcss: 4.2.1
+      tailwindcss: 4.2.2
       tsconfig-paths-webpack-plugin: 4.2.0
       valibot: 1.2.0(typescript@5.9.3)
     optionalDependencies:
@@ -9682,7 +9859,7 @@ snapshots:
 
   tailwind-merge@3.5.0: {}
 
-  tailwindcss@4.2.1: {}
+  tailwindcss@4.2.2: {}
 
   tapable@2.3.0: {}