diff --git a/frontends/dbal/next.config.ts b/frontends/dbal/next.config.ts
new file mode 100644
index 000000000..095b6a669
--- /dev/null
+++ b/frontends/dbal/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  reactStrictMode: true,
+}
+
+export default nextConfig
diff --git a/frontends/dbal/package.json b/frontends/dbal/package.json
new file mode 100644
index 000000000..2c155c4e0
--- /dev/null
+++ b/frontends/dbal/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "dbal-ui",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "16.1.1",
+    "react": "19.2.3",
+    "react-dom": "19.2.3"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/react": "19.2.7",
+    "@types/react-dom": "19.2.3",
+    "autoprefixer": "10.4.20",
+    "eslint": "9.39.2",
+    "eslint-config-next": "16.1.1",
+    "postcss": "8.4.35",
+    "tailwindcss": "3.4.5",
+    "typescript": "~5.9.3"
+  }
+}
diff --git a/frontends/dbal/postcss.config.cjs b/frontends/dbal/postcss.config.cjs
new file mode 100644
index 000000000..2e7af2b7f
--- /dev/null
+++ b/frontends/dbal/postcss.config.cjs
@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/frontends/dbal/tsconfig.json b/frontends/dbal/tsconfig.json
new file mode 100644
index 000000000..8f89690a8
--- /dev/null
+++ b/frontends/dbal/tsconfig.json
@@ -0,0 +1,9 @@
+{
+  "extends": "next/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}
diff --git a/frontends/nextjs/src/lib/db/users/super-god/transfer-super-god-power.ts b/frontends/nextjs/src/lib/db/users/super-god/transfer-super-god-power.ts
index 48118ec38..824ad6c4b 100644
--- a/frontends/nextjs/src/lib/db/users/super-god/transfer-super-god-power.ts
+++ b/frontends/nextjs/src/lib/db/users/super-god/transfer-super-god-power.ts
@@ -1,9 +1,8 @@
-import { dbalUpdateUser } from '@/lib/dbal/database-dbal/users/dbal-update-user.server'
-
 /**
  * Transfer SuperGod power from one user to another
  */
 export async function transferSuperGodPower(fromUserId: string, toUserId: string): Promise<void> {
+  const { dbalUpdateUser } = await import('@/lib/dbal/database-dbal/users/dbal-update-user.server')
   await dbalUpdateUser(fromUserId, { isInstanceOwner: false, role: 'god' })
   await dbalUpdateUser(toUserId, { isInstanceOwner: true, role: 'supergod' })
 }
diff --git a/frontends/nextjs/src/theme/modes/dark-theme.ts b/frontends/nextjs/src/theme/modes/dark-theme.ts
index e70e0861b..18b113297 100644
--- a/frontends/nextjs/src/theme/modes/dark-theme.ts
+++ b/frontends/nextjs/src/theme/modes/dark-theme.ts
@@ -1,10 +1,10 @@
 'use client'
 
 import { createTheme, alpha, type Shadows } from '@mui/material/styles'
-import { colors } from '../base/colors'
-import { fonts } from '../base/fonts'
-import { layout } from '../base/layout'
-import { typography } from '../base/typography'
+import { colors } from '../colors'
+import { fonts } from '../fonts'
+import { layout } from '../layout'
+import { typography } from '../typography'
 import { getComponentOverrides } from '../components'
 
 const custom = { fonts, borderRadius: layout.borderRadius, contentWidth: layout.contentWidth, sidebar: layout.sidebar, header: layout.header }
diff --git a/frontends/nextjs/src/theme/modes/light-theme.ts b/frontends/nextjs/src/theme/modes/light-theme.ts
index 6cc1d9272..b12d91c1a 100644
--- a/frontends/nextjs/src/theme/modes/light-theme.ts
+++ b/frontends/nextjs/src/theme/modes/light-theme.ts
@@ -1,11 +1,11 @@
 'use client'
 
 import { createTheme, alpha, type Shadows } from '@mui/material/styles'
-import { colors } from './colors'
-import { fonts } from './fonts'
-import { layout } from './layout'
-import { typography } from './typography'
-import { getComponentOverrides } from './components'
+import { colors } from '../colors'
+import { fonts } from '../fonts'
+import { layout } from '../layout'
+import { typography } from '../typography'
+import { getComponentOverrides } from '../components'
 
 const custom = { fonts, borderRadius: layout.borderRadius, contentWidth: layout.contentWidth, sidebar: layout.sidebar, header: layout.header }
 const shadows = (o: number): Shadows => ['none', `0 1px 2px rgba(0,0,0,${o/2})`, `0 1px 3px rgba(0,0,0,${o})`, `0 4px 6px rgba(0,0,0,${o})`, `0 10px 15px rgba(0,0,0,${o})`, `0 20px 25px rgba(0,0,0,${o})`, `0 25px 50px rgba(0,0,0,${o*2.5})`, ...Array(18).fill(`0 25px 50px rgba(0,0,0,${o*2.5})`)] as Shadows