diff --git a/dbal/development/src/adapters/acl-adapter.ts b/dbal/development/src/adapters/acl-adapter.ts
index a5bfa02e5..9fbcd7d83 100644
--- a/dbal/development/src/adapters/acl-adapter.ts
+++ b/dbal/development/src/adapters/acl-adapter.ts
@@ -1,3 +1,3 @@
-export { ACLAdapter } from './acl-adapter/index'
-export type { User, ACLRule } from './acl/types'
+export { ACLAdapter } from './acl-adapter'
+export type { ACLAdapterOptions, ACLContext, ACLRule, User } from './acl-adapter/types'
 export { defaultACLRules } from './acl/default-rules'
diff --git a/dbal/development/src/adapters/acl-adapter/acl-adapter.ts b/dbal/development/src/adapters/acl-adapter/acl-adapter.ts
new file mode 100644
index 000000000..9d2492451
--- /dev/null
+++ b/dbal/development/src/adapters/acl-adapter/acl-adapter.ts
@@ -0,0 +1,86 @@
+import type { AdapterCapabilities, DBALAdapter } from '../adapter'
+import type { ListOptions, ListResult } from '../../core/foundation/types'
+import { createContext } from './context'
+import { createReadStrategy } from './read-strategy'
+import { createWriteStrategy } from './write-strategy'
+import type { ACLAdapterOptions, ACLContext, ACLRule, User } from './types'
+
+export class ACLAdapter implements DBALAdapter {
+  private readonly context: ACLContext
+  private readonly readStrategy: ReturnType<typeof createReadStrategy>
+  private readonly writeStrategy: ReturnType<typeof createWriteStrategy>
+
+  constructor(baseAdapter: DBALAdapter, user: User, options?: ACLAdapterOptions) {
+    this.context = createContext(baseAdapter, user, options)
+    this.readStrategy = createReadStrategy(this.context)
+    this.writeStrategy = createWriteStrategy(this.context)
+  }
+
+  async create(entity: string, data: Record<string, unknown>): Promise<unknown> {
+    return this.writeStrategy.create(entity, data)
+  }
+
+  async read(entity: string, id: string): Promise<unknown | null> {
+    return this.readStrategy.read(entity, id)
+  }
+
+  async update(entity: string, id: string, data: Record<string, unknown>): Promise<unknown> {
+    return this.writeStrategy.update(entity, id, data)
+  }
+
+  async delete(entity: string, id: string): Promise<boolean> {
+    return this.writeStrategy.delete(entity, id)
+  }
+
+  async list(entity: string, options?: ListOptions): Promise<ListResult<unknown>> {
+    return this.readStrategy.list(entity, options)
+  }
+
+  async findFirst(entity: string, filter?: Record<string, unknown>): Promise<unknown | null> {
+    return this.readStrategy.findFirst(entity, filter)
+  }
+
+  async findByField(entity: string, field: string, value: unknown): Promise<unknown | null> {
+    return this.readStrategy.findByField(entity, field, value)
+  }
+
+  async upsert(
+    entity: string,
+    filter: Record<string, unknown>,
+    createData: Record<string, unknown>,
+    updateData: Record<string, unknown>,
+  ): Promise<unknown> {
+    return this.writeStrategy.upsert(entity, filter, createData, updateData)
+  }
+
+  async updateByField(entity: string, field: string, value: unknown, data: Record<string, unknown>): Promise<unknown> {
+    return this.writeStrategy.updateByField(entity, field, value, data)
+  }
+
+  async deleteByField(entity: string, field: string, value: unknown): Promise<boolean> {
+    return this.writeStrategy.deleteByField(entity, field, value)
+  }
+
+  async createMany(entity: string, data: Record<string, unknown>[]): Promise<number> {
+    return this.writeStrategy.createMany(entity, data)
+  }
+
+  async updateMany(entity: string, filter: Record<string, unknown>, data: Record<string, unknown>): Promise<number> {
+    return this.writeStrategy.updateMany(entity, filter, data)
+  }
+
+  async deleteMany(entity: string, filter?: Record<string, unknown>): Promise<number> {
+    return this.writeStrategy.deleteMany(entity, filter)
+  }
+
+  async getCapabilities(): Promise<AdapterCapabilities> {
+    return this.context.baseAdapter.getCapabilities()
+  }
+
+  async close(): Promise<void> {
+    await this.context.baseAdapter.close()
+  }
+}
+
+export type { ACLAdapterOptions, ACLContext, ACLRule, User }
+export { defaultACLRules } from '../acl/default-rules'
diff --git a/dbal/development/src/adapters/acl-adapter/context.ts b/dbal/development/src/adapters/acl-adapter/context.ts
index 9262dd64d..8213926b9 100644
--- a/dbal/development/src/adapters/acl-adapter/context.ts
+++ b/dbal/development/src/adapters/acl-adapter/context.ts
@@ -1,20 +1,12 @@
 import type { DBALAdapter } from '../adapter'
-import type { User, ACLRule } from '../acl/types'
+import type { ACLAdapterOptions, ACLContext, ACLRule, User } from './types'
 import { logAudit } from '../acl/audit-logger'
 import { defaultACLRules } from '../acl/default-rules'
 
-export interface ACLContext {
-  baseAdapter: DBALAdapter
-  user: User
-  rules: ACLRule[]
-  auditLog: boolean
-  logger: (entity: string, operation: string, success: boolean, message?: string) => void
-}
-
 export const createContext = (
   baseAdapter: DBALAdapter,
   user: User,
-  options?: { rules?: ACLRule[]; auditLog?: boolean },
+  options?: ACLAdapterOptions,
 ): ACLContext => {
   const auditLog = options?.auditLog ?? true
   const rules = options?.rules || defaultACLRules
diff --git a/dbal/development/src/adapters/acl-adapter/guards.ts b/dbal/development/src/adapters/acl-adapter/guards.ts
index 8da05a011..be5171354 100644
--- a/dbal/development/src/adapters/acl-adapter/guards.ts
+++ b/dbal/development/src/adapters/acl-adapter/guards.ts
@@ -1,7 +1,7 @@
 import { checkPermission } from '../acl/check-permission'
 import { checkRowLevelAccess } from '../acl/check-row-level-access'
 import { resolvePermissionOperation } from '../acl/resolve-permission-operation'
-import type { ACLContext } from './context'
+import type { ACLContext } from './types'
 
 export const enforcePermission = (context: ACLContext, entity: string, operation: string) => {
   checkPermission(entity, operation, context.user, context.rules, context.logger)
diff --git a/dbal/development/src/adapters/acl-adapter/index.ts b/dbal/development/src/adapters/acl-adapter/index.ts
index 354fe2a58..b356927a7 100644
--- a/dbal/development/src/adapters/acl-adapter/index.ts
+++ b/dbal/development/src/adapters/acl-adapter/index.ts
@@ -1,92 +1,3 @@
-import type { AdapterCapabilities, DBALAdapter } from '../adapter'
-import type { ListOptions, ListResult } from '../../core/foundation/types'
-import type { User, ACLRule } from '../acl/types'
-import type { ACLContext } from './context'
-import { createContext } from './context'
-import { createEntity, deleteEntity, listEntities, readEntity, updateEntity } from './crud'
-import {
-  createMany,
-  deleteByField,
-  deleteMany,
-  findByField,
-  findFirst,
-  updateByField,
-  updateMany,
-  upsert,
-} from './bulk'
-
-export class ACLAdapter implements DBALAdapter {
-  private readonly context: ACLContext
-
-  constructor(baseAdapter: DBALAdapter, user: User, options?: { rules?: ACLRule[]; auditLog?: boolean }) {
-    this.context = createContext(baseAdapter, user, options)
-  }
-
-  async create(entity: string, data: Record<string, unknown>): Promise<unknown> {
-    return createEntity(this.context)(entity, data)
-  }
-
-  async read(entity: string, id: string): Promise<unknown | null> {
-    return readEntity(this.context)(entity, id)
-  }
-
-  async update(entity: string, id: string, data: Record<string, unknown>): Promise<unknown> {
-    return updateEntity(this.context)(entity, id, data)
-  }
-
-  async delete(entity: string, id: string): Promise<boolean> {
-    return deleteEntity(this.context)(entity, id)
-  }
-
-  async list(entity: string, options?: ListOptions): Promise<ListResult<unknown>> {
-    return listEntities(this.context)(entity, options)
-  }
-
-  async findFirst(entity: string, filter?: Record<string, unknown>): Promise<unknown | null> {
-    return findFirst(this.context)(entity, filter)
-  }
-
-  async findByField(entity: string, field: string, value: unknown): Promise<unknown | null> {
-    return findByField(this.context)(entity, field, value)
-  }
-
-  async upsert(
-    entity: string,
-    filter: Record<string, unknown>,
-    createData: Record<string, unknown>,
-    updateData: Record<string, unknown>,
-  ): Promise<unknown> {
-    return upsert(this.context)(entity, filter, createData, updateData)
-  }
-
-  async updateByField(entity: string, field: string, value: unknown, data: Record<string, unknown>): Promise<unknown> {
-    return updateByField(this.context)(entity, field, value, data)
-  }
-
-  async deleteByField(entity: string, field: string, value: unknown): Promise<boolean> {
-    return deleteByField(this.context)(entity, field, value)
-  }
-
-  async createMany(entity: string, data: Record<string, unknown>[]): Promise<number> {
-    return createMany(this.context)(entity, data)
-  }
-
-  async updateMany(entity: string, filter: Record<string, unknown>, data: Record<string, unknown>): Promise<number> {
-    return updateMany(this.context)(entity, filter, data)
-  }
-
-  async deleteMany(entity: string, filter?: Record<string, unknown>): Promise<number> {
-    return deleteMany(this.context)(entity, filter)
-  }
-
-  async getCapabilities(): Promise<AdapterCapabilities> {
-    return this.context.baseAdapter.getCapabilities()
-  }
-
-  async close(): Promise<void> {
-    await this.context.baseAdapter.close()
-  }
-}
-
-export type { User, ACLRule } from './acl/types'
-export { defaultACLRules } from './acl/default-rules'
+export { ACLAdapter } from './acl-adapter'
+export type { ACLAdapterOptions, ACLContext, ACLRule, User } from './types'
+export { defaultACLRules } from '../acl/default-rules'
diff --git a/dbal/development/src/adapters/acl-adapter/read-strategy.ts b/dbal/development/src/adapters/acl-adapter/read-strategy.ts
new file mode 100644
index 000000000..da2742e26
--- /dev/null
+++ b/dbal/development/src/adapters/acl-adapter/read-strategy.ts
@@ -0,0 +1,48 @@
+import type { ListOptions, ListResult } from '../../core/foundation/types'
+import { enforceRowAccess, resolveOperation, withAudit } from './guards'
+import type { ACLContext } from './types'
+
+export const createReadStrategy = (context: ACLContext) => {
+  const read = async (entity: string, id: string): Promise<unknown | null> => {
+    return withAudit(context, entity, 'read', async () => {
+      const result = await context.baseAdapter.read(entity, id)
+      if (result) {
+        enforceRowAccess(context, entity, 'read', result as Record<string, unknown>)
+      }
+      return result
+    })
+  }
+
+  const list = async (entity: string, options?: ListOptions): Promise<ListResult<unknown>> => {
+    return withAudit(context, entity, 'list', () => context.baseAdapter.list(entity, options))
+  }
+
+  const findFirst = async (entity: string, filter?: Record<string, unknown>): Promise<unknown | null> => {
+    const operation = resolveOperation('findFirst')
+    return withAudit(context, entity, operation, async () => {
+      const result = await context.baseAdapter.findFirst(entity, filter)
+      if (result) {
+        enforceRowAccess(context, entity, operation, result as Record<string, unknown>)
+      }
+      return result
+    })
+  }
+
+  const findByField = async (entity: string, field: string, value: unknown): Promise<unknown | null> => {
+    const operation = resolveOperation('findByField')
+    return withAudit(context, entity, operation, async () => {
+      const result = await context.baseAdapter.findByField(entity, field, value)
+      if (result) {
+        enforceRowAccess(context, entity, operation, result as Record<string, unknown>)
+      }
+      return result
+    })
+  }
+
+  return {
+    read,
+    list,
+    findFirst,
+    findByField,
+  }
+}
diff --git a/dbal/development/src/adapters/acl-adapter/types.ts b/dbal/development/src/adapters/acl-adapter/types.ts
new file mode 100644
index 000000000..ea4cf1857
--- /dev/null
+++ b/dbal/development/src/adapters/acl-adapter/types.ts
@@ -0,0 +1,27 @@
+import type { DBALAdapter } from '../adapter'
+
+export interface User {
+  id: string
+  username: string
+  role: 'user' | 'admin' | 'god' | 'supergod'
+}
+
+export interface ACLRule {
+  entity: string
+  roles: string[]
+  operations: string[]
+  rowLevelFilter?: (user: User, data: Record<string, unknown>) => boolean
+}
+
+export interface ACLAdapterOptions {
+  rules?: ACLRule[]
+  auditLog?: boolean
+}
+
+export interface ACLContext {
+  baseAdapter: DBALAdapter
+  user: User
+  rules: ACLRule[]
+  auditLog: boolean
+  logger: (entity: string, operation: string, success: boolean, message?: string) => void
+}
diff --git a/dbal/development/src/adapters/acl-adapter/write-strategy.ts b/dbal/development/src/adapters/acl-adapter/write-strategy.ts
new file mode 100644
index 000000000..cf8b6aff5
--- /dev/null
+++ b/dbal/development/src/adapters/acl-adapter/write-strategy.ts
@@ -0,0 +1,83 @@
+import { enforceRowAccess, resolveOperation, withAudit } from './guards'
+import type { ACLContext } from './types'
+
+export const createWriteStrategy = (context: ACLContext) => {
+  const create = async (entity: string, data: Record<string, unknown>): Promise<unknown> => {
+    return withAudit(context, entity, 'create', () => context.baseAdapter.create(entity, data))
+  }
+
+  const update = async (entity: string, id: string, data: Record<string, unknown>): Promise<unknown> => {
+    return withAudit(context, entity, 'update', async () => {
+      const existing = await context.baseAdapter.read(entity, id)
+      if (existing) {
+        enforceRowAccess(context, entity, 'update', existing as Record<string, unknown>)
+      }
+      return context.baseAdapter.update(entity, id, data)
+    })
+  }
+
+  const remove = async (entity: string, id: string): Promise<boolean> => {
+    return withAudit(context, entity, 'delete', async () => {
+      const existing = await context.baseAdapter.read(entity, id)
+      if (existing) {
+        enforceRowAccess(context, entity, 'delete', existing as Record<string, unknown>)
+      }
+      return context.baseAdapter.delete(entity, id)
+    })
+  }
+
+  const upsert = async (
+    entity: string,
+    filter: Record<string, unknown>,
+    createData: Record<string, unknown>,
+    updateData: Record<string, unknown>,
+  ): Promise<unknown> => {
+    return withAudit(context, entity, 'upsert', () => context.baseAdapter.upsert(entity, filter, createData, updateData))
+  }
+
+  const updateByField = async (
+    entity: string,
+    field: string,
+    value: unknown,
+    data: Record<string, unknown>,
+  ): Promise<unknown> => {
+    const operation = resolveOperation('updateByField')
+    return withAudit(context, entity, operation, () => context.baseAdapter.updateByField(entity, field, value, data))
+  }
+
+  const deleteByField = async (entity: string, field: string, value: unknown): Promise<boolean> => {
+    const operation = resolveOperation('deleteByField')
+    return withAudit(context, entity, operation, () => context.baseAdapter.deleteByField(entity, field, value))
+  }
+
+  const createMany = async (entity: string, data: Record<string, unknown>[]): Promise<number> => {
+    const operation = resolveOperation('createMany')
+    return withAudit(context, entity, operation, () => context.baseAdapter.createMany(entity, data))
+  }
+
+  const updateMany = async (
+    entity: string,
+    filter: Record<string, unknown>,
+    data: Record<string, unknown>,
+  ): Promise<number> => {
+    const operation = resolveOperation('updateMany')
+    return withAudit(context, entity, operation, () => context.baseAdapter.updateMany(entity, filter, data))
+  }
+
+  const deleteMany = async (entity: string, filter?: Record<string, unknown>): Promise<number> => {
+    const operation = resolveOperation('deleteMany')
+    return withAudit(context, entity, operation, () => context.baseAdapter.deleteMany(entity, filter))
+  }
+
+  return {
+    create,
+    update,
+    delete: remove,
+    upsert,
+    updateByField,
+    deleteByField,
+    createMany,
+    updateMany,
+    deleteMany,
+  }
+}
diff --git a/dbal/development/src/adapters/acl/audit-logger.ts b/dbal/development/src/adapters/acl/audit-logger.ts
index f67a2736d..864c181e4 100644
--- a/dbal/development/src/adapters/acl/audit-logger.ts
+++ b/dbal/development/src/adapters/acl/audit-logger.ts
@@ -3,7 +3,7 @@
  * @description Audit logging for ACL operations
  */
 
-import type { User } from './types'
+import type { User } from '../acl-adapter/types'
 
 /**
  * Log audit entry for ACL operation
diff --git a/dbal/development/src/adapters/acl/check-permission.ts b/dbal/development/src/adapters/acl/check-permission.ts
index 3f1fd4a1b..b27a7b12d 100644
--- a/dbal/development/src/adapters/acl/check-permission.ts
+++ b/dbal/development/src/adapters/acl/check-permission.ts
@@ -4,7 +4,7 @@
  */
 
 import { DBALError } from '../../core/foundation/errors'
-import type { User, ACLRule } from './types'
+import type { ACLRule, User } from '../acl-adapter/types'
 
 /**
  * Check if user has permission to perform operation on entity
diff --git a/dbal/development/src/adapters/acl/check-row-level-access.ts b/dbal/development/src/adapters/acl/check-row-level-access.ts
index 3b3403205..70ea72fc7 100644
--- a/dbal/development/src/adapters/acl/check-row-level-access.ts
+++ b/dbal/development/src/adapters/acl/check-row-level-access.ts
@@ -4,7 +4,7 @@
  */
 
 import { DBALError } from '../../core/foundation/errors'
-import type { User, ACLRule } from './types'
+import type { ACLRule, User } from '../acl-adapter/types'
 
 /**
  * Check row-level access for specific data
diff --git a/dbal/development/src/adapters/acl/default-rules.ts b/dbal/development/src/adapters/acl/default-rules.ts
index a5ff3f3b0..25a6b803e 100644
--- a/dbal/development/src/adapters/acl/default-rules.ts
+++ b/dbal/development/src/adapters/acl/default-rules.ts
@@ -3,7 +3,7 @@
  * @description Default ACL rules for entities
  */
 
-import type { ACLRule } from './types'
+import type { ACLRule } from '../acl-adapter/types'
 
 export const defaultACLRules: ACLRule[] = [
   {
diff --git a/dbal/development/src/blob/providers/memory-storage/downloads.ts b/dbal/development/src/blob/providers/memory-storage/downloads.ts
index eb82fac6a..6a722029f 100644
--- a/dbal/development/src/blob/providers/memory-storage/downloads.ts
+++ b/dbal/development/src/blob/providers/memory-storage/downloads.ts
@@ -1,17 +1,15 @@
 import { DBALError } from '../../core/foundation/errors'
 import type { DownloadOptions } from '../blob-storage'
 import type { MemoryStore } from './store'
+import { getBlobOrThrow, normalizeKey } from './utils'
 
 export const downloadBuffer = (
   store: MemoryStore,
   key: string,
   options: DownloadOptions = {},
 ): Buffer => {
-  const blob = store.get(key)
-
-  if (!blob) {
-    throw DBALError.notFound(`Blob not found: ${key}`)
-  }
+  const normalizedKey = normalizeKey(key)
+  const blob = getBlobOrThrow(store, normalizedKey)
 
   let data = blob.data
 
diff --git a/dbal/development/src/blob/providers/memory-storage/index.ts b/dbal/development/src/blob/providers/memory-storage/index.ts
index 769285344..b1ed68b18 100644
--- a/dbal/development/src/blob/providers/memory-storage/index.ts
+++ b/dbal/development/src/blob/providers/memory-storage/index.ts
@@ -10,6 +10,7 @@ import { createStore } from './store'
 import { uploadBuffer, uploadFromStream } from './uploads'
 import { downloadBuffer, downloadStream } from './downloads'
 import { copyBlob, deleteBlob, getMetadata, listBlobs, getObjectCount, getTotalSize } from './management'
+import { normalizeKey } from './utils'
 
 export class MemoryStorage implements BlobStorage {
   private store = createStore()
@@ -43,7 +44,7 @@ export class MemoryStorage implements BlobStorage {
   }
 
   async exists(key: string): Promise<boolean> {
-    return this.store.has(key)
+    return this.store.has(normalizeKey(key))
   }
 
   async getMetadata(key: string): Promise<BlobMetadata> {
diff --git a/dbal/development/src/blob/providers/memory-storage/management.ts b/dbal/development/src/blob/providers/memory-storage/management.ts
index 8d2ad4f8e..afff2801e 100644
--- a/dbal/development/src/blob/providers/memory-storage/management.ts
+++ b/dbal/development/src/blob/providers/memory-storage/management.ts
@@ -1,29 +1,29 @@
 import { DBALError } from '../../core/foundation/errors'
 import type { BlobListOptions, BlobListResult, BlobMetadata } from '../blob-storage'
-import { makeBlobMetadata } from './store'
 import type { MemoryStore } from './store'
+import { toBlobMetadata } from './serialization'
+import { cleanupStoreEntry, getBlobOrThrow, normalizeKey } from './utils'
 
 export const deleteBlob = async (store: MemoryStore, key: string): Promise<boolean> => {
-  if (!store.has(key)) {
-    throw DBALError.notFound(`Blob not found: ${key}`)
+  const normalizedKey = normalizeKey(key)
+
+  if (!store.has(normalizedKey)) {
+    throw DBALError.notFound(`Blob not found: ${normalizedKey}`)
   }
 
-  store.delete(key)
+  cleanupStoreEntry(store, normalizedKey)
   return true
 }
 
 export const getMetadata = (store: MemoryStore, key: string): BlobMetadata => {
-  const blob = store.get(key)
+  const normalizedKey = normalizeKey(key)
+  const blob = getBlobOrThrow(store, normalizedKey)
 
-  if (!blob) {
-    throw DBALError.notFound(`Blob not found: ${key}`)
-  }
-
-  return makeBlobMetadata(key, blob)
+  return toBlobMetadata(normalizedKey, blob)
 }
 
 export const listBlobs = (store: MemoryStore, options: BlobListOptions = {}): BlobListResult => {
-  const prefix = options.prefix || ''
+  const prefix = options.prefix ? normalizeKey(options.prefix) : ''
   const maxKeys = options.maxKeys || 1000
 
   const items: BlobMetadata[] = []
@@ -35,7 +35,7 @@ export const listBlobs = (store: MemoryStore, options: BlobListOptions = {}): Bl
         nextToken = key
         break
       }
-      items.push(makeBlobMetadata(key, blob))
+      items.push(toBlobMetadata(key, blob))
     }
   }
 
@@ -47,11 +47,9 @@ export const listBlobs = (store: MemoryStore, options: BlobListOptions = {}): Bl
 }
 
 export const copyBlob = (store: MemoryStore, sourceKey: string, destKey: string): BlobMetadata => {
-  const sourceBlob = store.get(sourceKey)
-
-  if (!sourceBlob) {
-    throw DBALError.notFound(`Source blob not found: ${sourceKey}`)
-  }
+  const normalizedSourceKey = normalizeKey(sourceKey)
+  const normalizedDestKey = normalizeKey(destKey)
+  const sourceBlob = getBlobOrThrow(store, normalizedSourceKey)
 
   const destBlob = {
     ...sourceBlob,
@@ -59,8 +57,8 @@ export const copyBlob = (store: MemoryStore, sourceKey: string, destKey: string)
     lastModified: new Date(),
   }
 
-  store.set(destKey, destBlob)
-  return makeBlobMetadata(destKey, destBlob)
+  store.set(normalizedDestKey, destBlob)
+  return toBlobMetadata(normalizedDestKey, destBlob)
 }
 
 export const getTotalSize = (store: MemoryStore): number => {
diff --git a/dbal/development/src/blob/providers/memory-storage/serialization.ts b/dbal/development/src/blob/providers/memory-storage/serialization.ts
new file mode 100644
index 000000000..9b9bcc52c
--- /dev/null
+++ b/dbal/development/src/blob/providers/memory-storage/serialization.ts
@@ -0,0 +1,43 @@
+import { createHash } from 'crypto'
+import type { UploadOptions, BlobMetadata } from '../blob-storage'
+import type { BlobData } from './store'
+
+export const generateEtag = (data: Buffer): string => `"${createHash('md5').update(data).digest('hex')}"`
+
+export const toBlobData = (data: Buffer, options: UploadOptions = {}): BlobData => ({
+  data,
+  contentType: options.contentType || 'application/octet-stream',
+  etag: generateEtag(data),
+  lastModified: new Date(),
+  metadata: options.metadata || {},
+})
+
+export const toBlobMetadata = (key: string, blob: BlobData): BlobMetadata => ({
+  key,
+  size: blob.data.length,
+  contentType: blob.contentType,
+  etag: blob.etag,
+  lastModified: blob.lastModified,
+  customMetadata: blob.metadata,
+})
+
+export const collectStream = async (
+  stream: ReadableStream | NodeJS.ReadableStream,
+): Promise<Buffer> => {
+  const chunks: Buffer[] = []
+
+  if ('getReader' in stream) {
+    const reader = stream.getReader()
+    while (true) {
+      const { done, value } = await reader.read()
+      if (done) break
+      chunks.push(Buffer.from(value))
+    }
+  } else {
+    for await (const chunk of stream) {
+      chunks.push(Buffer.from(chunk))
+    }
+  }
+
+  return Buffer.concat(chunks)
+}
diff --git a/dbal/development/src/blob/providers/memory-storage/store.ts b/dbal/development/src/blob/providers/memory-storage/store.ts
index d574a84d6..383249c93 100644
--- a/dbal/development/src/blob/providers/memory-storage/store.ts
+++ b/dbal/development/src/blob/providers/memory-storage/store.ts
@@ -1,6 +1,3 @@
-import type { BlobMetadata } from '../blob-storage'
-import { createHash } from 'crypto'
-
 export interface BlobData {
   data: Buffer
   contentType: string
@@ -12,14 +9,3 @@ export interface BlobData {
 export type MemoryStore = Map<string, BlobData>
 
 export const createStore = (): MemoryStore => new Map()
-
-export const generateEtag = (data: Buffer): string => `"${createHash('md5').update(data).digest('hex')}"`
-
-export const makeBlobMetadata = (key: string, blob: BlobData): BlobMetadata => ({
-  key,
-  size: blob.data.length,
-  contentType: blob.contentType,
-  etag: blob.etag,
-  lastModified: blob.lastModified,
-  customMetadata: blob.metadata,
-})
diff --git a/dbal/development/src/blob/providers/memory-storage/uploads.ts b/dbal/development/src/blob/providers/memory-storage/uploads.ts
index f282dc67f..356e37e85 100644
--- a/dbal/development/src/blob/providers/memory-storage/uploads.ts
+++ b/dbal/development/src/blob/providers/memory-storage/uploads.ts
@@ -1,7 +1,8 @@
 import { DBALError } from '../../core/foundation/errors'
 import type { UploadOptions } from '../blob-storage'
-import type { BlobData, MemoryStore } from './store'
-import { generateEtag, makeBlobMetadata } from './store'
+import type { MemoryStore } from './store'
+import { collectStream, toBlobData, toBlobMetadata } from './serialization'
+import { normalizeKey } from './utils'
 
 export const uploadBuffer = (
   store: MemoryStore,
@@ -9,43 +10,17 @@ export const uploadBuffer = (
   data: Buffer | Uint8Array,
   options: UploadOptions = {},
 ) => {
+  const normalizedKey = normalizeKey(key)
   const buffer = Buffer.from(data)
 
-  if (!options.overwrite && store.has(key)) {
-    throw DBALError.conflict(`Blob already exists: ${key}`)
+  if (!options.overwrite && store.has(normalizedKey)) {
+    throw DBALError.conflict(`Blob already exists: ${normalizedKey}`)
   }
 
-  const blob: BlobData = {
-    data: buffer,
-    contentType: options.contentType || 'application/octet-stream',
-    etag: generateEtag(buffer),
-    lastModified: new Date(),
-    metadata: options.metadata || {},
-  }
+  const blob = toBlobData(buffer, options)
 
-  store.set(key, blob)
-  return makeBlobMetadata(key, blob)
-}
-
-export const collectStream = async (
-  stream: ReadableStream | NodeJS.ReadableStream,
-): Promise<Buffer> => {
-  const chunks: Buffer[] = []
-
-  if ('getReader' in stream) {
-    const reader = stream.getReader()
-    while (true) {
-      const { done, value } = await reader.read()
-      if (done) break
-      chunks.push(Buffer.from(value))
-    }
-  } else {
-    for await (const chunk of stream) {
-      chunks.push(Buffer.from(chunk))
-    }
-  }
-
-  return Buffer.concat(chunks)
+  store.set(normalizedKey, blob)
+  return toBlobMetadata(normalizedKey, blob)
 }
 
 export const uploadFromStream = async (
diff --git a/dbal/development/src/blob/providers/memory-storage/utils.ts b/dbal/development/src/blob/providers/memory-storage/utils.ts
new file mode 100644
index 000000000..51e2a8618
--- /dev/null
+++ b/dbal/development/src/blob/providers/memory-storage/utils.ts
@@ -0,0 +1,18 @@
+import { DBALError } from '../../core/foundation/errors'
+import type { BlobData, MemoryStore } from './store'
+
+export const normalizeKey = (key: string): string => key.replace(/^\/+/, '').trim()
+
+export const getBlobOrThrow = (store: MemoryStore, key: string): BlobData => {
+  const blob = store.get(key)
+
+  if (!blob) {
+    throw DBALError.notFound(`Blob not found: ${key}`)
+  }
+
+  return blob
+}
+
+export const cleanupStoreEntry = (store: MemoryStore, key: string): void => {
+  store.delete(key)
+}
diff --git a/dbal/development/src/blob/providers/tenant-aware-storage.ts b/dbal/development/src/blob/providers/tenant-aware-storage.ts
index 33fa59a9d..c8f14cee9 100644
--- a/dbal/development/src/blob/providers/tenant-aware-storage.ts
+++ b/dbal/development/src/blob/providers/tenant-aware-storage.ts
@@ -1 +1,5 @@
 export { TenantAwareBlobStorage } from './tenant-aware-storage/index'
+export type { TenantAwareDeps } from './tenant-aware-storage/context'
+export { scopeKey, unscopeKey } from './tenant-aware-storage/context'
+export { ensurePermission, resolveTenantContext } from './tenant-aware-storage/tenant-context'
+export { auditCopy, auditDeletion, auditUpload } from './tenant-aware-storage/audit-hooks'
diff --git a/dbal/development/src/blob/providers/tenant-aware-storage/audit-hooks.ts b/dbal/development/src/blob/providers/tenant-aware-storage/audit-hooks.ts
new file mode 100644
index 000000000..8aeb80c80
--- /dev/null
+++ b/dbal/development/src/blob/providers/tenant-aware-storage/audit-hooks.ts
@@ -0,0 +1,17 @@
+import type { TenantAwareDeps } from './context'
+
+const recordUsageChange = async (deps: TenantAwareDeps, bytesChange: number, countChange: number): Promise<void> => {
+  await deps.tenantManager.updateBlobUsage(deps.tenantId, bytesChange, countChange)
+}
+
+export const auditUpload = async (deps: TenantAwareDeps, sizeBytes: number): Promise<void> => {
+  await recordUsageChange(deps, sizeBytes, 1)
+}
+
+export const auditDeletion = async (deps: TenantAwareDeps, sizeBytes: number): Promise<void> => {
+  await recordUsageChange(deps, -sizeBytes, -1)
+}
+
+export const auditCopy = async (deps: TenantAwareDeps, sizeBytes: number): Promise<void> => {
+  await recordUsageChange(deps, sizeBytes, 1)
+}
diff --git a/dbal/development/src/blob/providers/tenant-aware-storage/context.ts b/dbal/development/src/blob/providers/tenant-aware-storage/context.ts
index 234816666..067d7ff99 100644
--- a/dbal/development/src/blob/providers/tenant-aware-storage/context.ts
+++ b/dbal/development/src/blob/providers/tenant-aware-storage/context.ts
@@ -1,5 +1,4 @@
-import { DBALError } from '../../core/foundation/errors'
-import type { TenantContext, TenantManager } from '../../core/foundation/tenant-context'
+import type { TenantManager } from '../../core/foundation/tenant-context'
 import type { BlobStorage } from '../blob-storage'
 
 export interface TenantAwareDeps {
@@ -9,10 +8,6 @@ export interface TenantAwareDeps {
   userId: string
 }
 
-export const getContext = async ({ tenantManager, tenantId, userId }: TenantAwareDeps): Promise<TenantContext> => {
-  return tenantManager.getTenantContext(tenantId, userId)
-}
-
 export const scopeKey = (key: string, namespace: string): string => {
   const cleanKey = key.startsWith('/') ? key.substring(1) : key
   return `${namespace}${cleanKey}`
@@ -24,17 +19,3 @@ export const unscopeKey = (scopedKey: string, namespace: string): string => {
   }
   return scopedKey
 }
-
-export const ensurePermission = (context: TenantContext, action: 'read' | 'write' | 'delete'): void => {
-  const accessCheck =
-    action === 'read' ? context.canRead('blob') : action === 'write' ? context.canWrite('blob') : context.canDelete('blob')
-
-  if (!accessCheck) {
-    const verbs: Record<typeof action, string> = {
-      read: 'read',
-      write: 'write',
-      delete: 'delete',
-    }
-    throw DBALError.forbidden(`Permission denied: cannot ${verbs[action]} blobs`)
-  }
-}
diff --git a/dbal/development/src/blob/providers/tenant-aware-storage/mutations.ts b/dbal/development/src/blob/providers/tenant-aware-storage/mutations.ts
index 6ec400af4..b518eb1c0 100644
--- a/dbal/development/src/blob/providers/tenant-aware-storage/mutations.ts
+++ b/dbal/development/src/blob/providers/tenant-aware-storage/mutations.ts
@@ -1,10 +1,12 @@
 import { DBALError } from '../../core/foundation/errors'
 import type { BlobMetadata } from '../blob-storage'
-import { ensurePermission, getContext, scopeKey } from './context'
+import { auditCopy, auditDeletion } from './audit-hooks'
 import type { TenantAwareDeps } from './context'
+import { scopeKey } from './context'
+import { ensurePermission, resolveTenantContext } from './tenant-context'
 
 export const deleteBlob = async (deps: TenantAwareDeps, key: string): Promise<boolean> => {
-  const context = await getContext(deps)
+  const context = await resolveTenantContext(deps)
   ensurePermission(context, 'delete')
 
   const scopedKey = scopeKey(key, context.namespace)
@@ -14,7 +16,7 @@ export const deleteBlob = async (deps: TenantAwareDeps, key: string): Promise<bo
     const deleted = await deps.baseStorage.delete(scopedKey)
 
     if (deleted) {
-      await deps.tenantManager.updateBlobUsage(deps.tenantId, -metadata.size, -1)
+      await auditDeletion(deps, metadata.size)
     }
 
     return deleted
@@ -24,7 +26,7 @@ export const deleteBlob = async (deps: TenantAwareDeps, key: string): Promise<bo
 }
 
 export const exists = async (deps: TenantAwareDeps, key: string): Promise<boolean> => {
-  const context = await getContext(deps)
+  const context = await resolveTenantContext(deps)
   ensurePermission(context, 'read')
 
   const scopedKey = scopeKey(key, context.namespace)
@@ -36,7 +38,7 @@ export const copyBlob = async (
   sourceKey: string,
   destKey: string,
 ): Promise<BlobMetadata> => {
-  const context = await getContext(deps)
+  const context = await resolveTenantContext(deps)
   ensurePermission(context, 'read')
   ensurePermission(context, 'write')
 
@@ -50,7 +52,7 @@ export const copyBlob = async (
   const destScoped = scopeKey(destKey, context.namespace)
   const metadata = await deps.baseStorage.copy(sourceScoped, destScoped)
 
-  await deps.tenantManager.updateBlobUsage(deps.tenantId, sourceMetadata.size, 1)
+  await auditCopy(deps, sourceMetadata.size)
 
   return {
     ...metadata,
@@ -59,7 +61,7 @@ export const copyBlob = async (
 }
 
 export const getStats = async (deps: TenantAwareDeps) => {
-  const context = await getContext(deps)
+  const context = await resolveTenantContext(deps)
   return {
     count: context.quota.currentBlobCount,
     totalSize: context.quota.currentBlobStorageBytes,
diff --git a/dbal/development/src/blob/providers/tenant-aware-storage/reads.ts b/dbal/development/src/blob/providers/tenant-aware-storage/reads.ts
index 5ba718d0d..9fc52a58b 100644
--- a/dbal/development/src/blob/providers/tenant-aware-storage/reads.ts
+++ b/dbal/development/src/blob/providers/tenant-aware-storage/reads.ts
@@ -1,9 +1,10 @@
 import type { DownloadOptions, BlobMetadata, BlobListOptions, BlobListResult } from '../blob-storage'
-import { ensurePermission, getContext, scopeKey, unscopeKey } from './context'
 import type { TenantAwareDeps } from './context'
+import { scopeKey, unscopeKey } from './context'
+import { ensurePermission, resolveTenantContext } from './tenant-context'
 
 export const downloadBuffer = async (deps: TenantAwareDeps, key: string): Promise<Buffer> => {
-  const context = await getContext(deps)
+  const context = await resolveTenantContext(deps)
   ensurePermission(context, 'read')
 
   const scopedKey = scopeKey(key, context.namespace)
@@ -15,7 +16,7 @@ export const downloadStream = async (
   key: string,
   options?: DownloadOptions,
 ): Promise<ReadableStream | NodeJS.ReadableStream> => {
-  const context = await getContext(deps)
+  const context = await resolveTenantContext(deps)
   ensurePermission(context, 'read')
 
   const scopedKey = scopeKey(key, context.namespace)
@@ -26,7 +27,7 @@ export const listBlobs = async (
   deps: TenantAwareDeps,
   options: BlobListOptions = {},
 ): Promise<BlobListResult> => {
-  const context = await getContext(deps)
+  const context = await resolveTenantContext(deps)
   ensurePermission(context, 'read')
 
   const scopedOptions: BlobListOptions = {
@@ -46,7 +47,7 @@ export const listBlobs = async (
 }
 
 export const getMetadata = async (deps: TenantAwareDeps, key: string): Promise<BlobMetadata> => {
-  const context = await getContext(deps)
+  const context = await resolveTenantContext(deps)
   ensurePermission(context, 'read')
 
   const scopedKey = scopeKey(key, context.namespace)
@@ -63,7 +64,7 @@ export const generatePresignedUrl = async (
   key: string,
   expiresIn: number,
 ): Promise<string> => {
-  const context = await getContext(deps)
+  const context = await resolveTenantContext(deps)
   ensurePermission(context, 'read')
 
   const scopedKey = scopeKey(key, context.namespace)
diff --git a/dbal/development/src/blob/providers/tenant-aware-storage/tenant-context.ts b/dbal/development/src/blob/providers/tenant-aware-storage/tenant-context.ts
new file mode 100644
index 000000000..acdd36720
--- /dev/null
+++ b/dbal/development/src/blob/providers/tenant-aware-storage/tenant-context.ts
@@ -0,0 +1,21 @@
+import { DBALError } from '../../core/foundation/errors'
+import type { TenantContext } from '../../core/foundation/tenant-context'
+import type { TenantAwareDeps } from './context'
+
+export const resolveTenantContext = async ({ tenantManager, tenantId, userId }: TenantAwareDeps): Promise<TenantContext> => {
+  return tenantManager.getTenantContext(tenantId, userId)
+}
+
+export const ensurePermission = (context: TenantContext, action: 'read' | 'write' | 'delete'): void => {
+  const accessCheck =
+    action === 'read' ? context.canRead('blob') : action === 'write' ? context.canWrite('blob') : context.canDelete('blob')
+
+  if (!accessCheck) {
+    const verbs: Record<typeof action, string> = {
+      read: 'read',
+      write: 'write',
+      delete: 'delete',
+    }
+    throw DBALError.forbidden(`Permission denied: cannot ${verbs[action]} blobs`)
+  }
+}
diff --git a/dbal/development/src/blob/providers/tenant-aware-storage/uploads.ts b/dbal/development/src/blob/providers/tenant-aware-storage/uploads.ts
index cd787a533..382fc4881 100644
--- a/dbal/development/src/blob/providers/tenant-aware-storage/uploads.ts
+++ b/dbal/development/src/blob/providers/tenant-aware-storage/uploads.ts
@@ -1,7 +1,9 @@
 import { DBALError } from '../../core/foundation/errors'
-import type { UploadOptions, BlobMetadata } from '../blob-storage'
+import { auditUpload } from './audit-hooks'
 import type { TenantAwareDeps } from './context'
-import { ensurePermission, getContext, scopeKey } from './context'
+import { scopeKey } from './context'
+import { ensurePermission, resolveTenantContext } from './tenant-context'
+import type { UploadOptions, BlobMetadata } from '../blob-storage'
 
 export const uploadBuffer = async (
   deps: TenantAwareDeps,
@@ -9,7 +11,7 @@ export const uploadBuffer = async (
   data: Buffer,
   options?: UploadOptions,
 ): Promise<BlobMetadata> => {
-  const context = await getContext(deps)
+  const context = await resolveTenantContext(deps)
   ensurePermission(context, 'write')
 
   if (!context.canUploadBlob(data.length)) {
@@ -18,7 +20,7 @@ export const uploadBuffer = async (
 
   const scopedKey = scopeKey(key, context.namespace)
   const metadata = await deps.baseStorage.upload(scopedKey, data, options)
-  await deps.tenantManager.updateBlobUsage(deps.tenantId, data.length, 1)
+  await auditUpload(deps, data.length)
 
   return {
     ...metadata,
@@ -33,7 +35,7 @@ export const uploadStream = async (
   size: number,
   options?: UploadOptions,
 ): Promise<BlobMetadata> => {
-  const context = await getContext(deps)
+  const context = await resolveTenantContext(deps)
   ensurePermission(context, 'write')
 
   if (!context.canUploadBlob(size)) {
@@ -42,7 +44,7 @@ export const uploadStream = async (
 
   const scopedKey = scopeKey(key, context.namespace)
   const metadata = await deps.baseStorage.uploadStream(scopedKey, stream, size, options)
-  await deps.tenantManager.updateBlobUsage(deps.tenantId, size, 1)
+  await auditUpload(deps, size)
 
   return {
     ...metadata,
diff --git a/dbal/development/src/bridges/websocket-bridge/connection-manager.ts b/dbal/development/src/bridges/websocket-bridge/connection-manager.ts
new file mode 100644
index 000000000..2e39d36a4
--- /dev/null
+++ b/dbal/development/src/bridges/websocket-bridge/connection-manager.ts
@@ -0,0 +1,90 @@
+import { DBALError } from '../../core/foundation/errors'
+import type { RPCMessage } from '../utils/rpc-types'
+import type { BridgeState } from './state'
+import type { MessageRouter } from './message-router'
+
+export interface ConnectionManager {
+  ensureConnection: () => Promise<void>
+  send: (message: RPCMessage) => Promise<void>
+  close: () => Promise<void>
+}
+
+export const createConnectionManager = (
+  state: BridgeState,
+  messageRouter: MessageRouter,
+): ConnectionManager => {
+  let connectionPromise: Promise<void> | null = null
+
+  const resetConnection = () => {
+    connectionPromise = null
+    state.ws = null
+  }
+
+  const rejectPendingRequests = (error: DBALError) => {
+    state.pendingRequests.forEach(({ reject }) => reject(error))
+    state.pendingRequests.clear()
+  }
+
+  const ensureConnection = async (): Promise<void> => {
+    if (state.ws?.readyState === WebSocket.OPEN) {
+      return
+    }
+
+    if (connectionPromise) {
+      return connectionPromise
+    }
+
+    connectionPromise = new Promise((resolve, reject) => {
+      try {
+        const ws = new WebSocket(state.endpoint)
+        state.ws = ws
+
+        ws.onopen = () => resolve()
+        ws.onerror = error => {
+          const connectionError = DBALError.internal(`WebSocket connection failed: ${error}`)
+          rejectPendingRequests(connectionError)
+          resetConnection()
+          reject(connectionError)
+        }
+        ws.onclose = () => {
+          rejectPendingRequests(DBALError.internal('WebSocket connection closed'))
+          resetConnection()
+        }
+        ws.onmessage = event => messageRouter.handle(event.data)
+      } catch (error) {
+        resetConnection()
+        const connectionError =
+          error instanceof DBALError ? error : DBALError.internal('Failed to establish WebSocket connection')
+        reject(connectionError)
+      }
+    })
+
+    return connectionPromise
+  }
+
+  const send = async (message: RPCMessage): Promise<void> => {
+    await ensureConnection()
+
+    if (!state.ws || state.ws.readyState !== WebSocket.OPEN) {
+      throw DBALError.internal('WebSocket connection not open')
+    }
+
+    state.ws.send(JSON.stringify(message))
+  }
+
+  const close = async (): Promise<void> => {
+    rejectPendingRequests(DBALError.internal('WebSocket connection closed'))
+
+    if (state.ws) {
+      state.ws.close()
+    }
+
+    resetConnection()
+  }
+
+  return {
+    ensureConnection,
+    send,
+    close,
+  }
+}
diff --git a/dbal/development/src/bridges/websocket-bridge/connection.ts b/dbal/development/src/bridges/websocket-bridge/connection.ts
deleted file mode 100644
index 9f348f18a..000000000
--- a/dbal/development/src/bridges/websocket-bridge/connection.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { DBALError } from '../../core/foundation/errors'
-import { handleMessage } from './message-handler'
-import type { BridgeState } from './state'
-
-export const connect = async (state: BridgeState): Promise<void> => {
-  if (state.ws?.readyState === WebSocket.OPEN) {
-    return
-  }
-
-  return new Promise((resolve, reject) => {
-    state.ws = new WebSocket(state.endpoint)
-
-    state.ws.onopen = () => resolve()
-    state.ws.onerror = error => reject(DBALError.internal(`WebSocket connection failed: ${error}`))
-    state.ws.onmessage = event => handleMessage(state, event.data)
-    state.ws.onclose = () => {
-      state.ws = null
-    }
-  })
-}
-
-export const closeConnection = async (state: BridgeState): Promise<void> => {
-  if (state.ws) {
-    state.ws.close()
-    state.ws = null
-  }
-  state.pendingRequests.clear()
-}
diff --git a/dbal/development/src/bridges/websocket-bridge/index.ts b/dbal/development/src/bridges/websocket-bridge/index.ts
index f4ecedcdd..b6f27cbad 100644
--- a/dbal/development/src/bridges/websocket-bridge/index.ts
+++ b/dbal/development/src/bridges/websocket-bridge/index.ts
@@ -1,16 +1,20 @@
 import type { DBALAdapter, AdapterCapabilities } from '../../adapters/adapter'
 import type { ListOptions, ListResult } from '../../core/types'
-import { closeConnection } from './connection'
+import { createConnectionManager } from './connection-manager'
+import { createMessageRouter } from './message-router'
 import { createOperations } from './operations'
 import { createBridgeState } from './state'
 
 export class WebSocketBridge implements DBALAdapter {
   private readonly state: ReturnType<typeof createBridgeState>
+  private readonly connectionManager: ReturnType<typeof createConnectionManager>
   private readonly operations: ReturnType<typeof createOperations>
 
   constructor(endpoint: string, auth?: { user: unknown; session: unknown }) {
     this.state = createBridgeState(endpoint, auth)
-    this.operations = createOperations(this.state)
+    const messageRouter = createMessageRouter(this.state)
+    this.connectionManager = createConnectionManager(this.state, messageRouter)
+    this.operations = createOperations(this.state, this.connectionManager)
   }
 
   create(entity: string, data: Record<string, unknown>): Promise<unknown> {
@@ -75,6 +79,6 @@ export class WebSocketBridge implements DBALAdapter {
   }
 
   async close(): Promise<void> {
-    await closeConnection(this.state)
+    await this.connectionManager.close()
   }
 }
diff --git a/dbal/development/src/bridges/websocket-bridge/message-handler.ts b/dbal/development/src/bridges/websocket-bridge/message-handler.ts
deleted file mode 100644
index 78db23362..000000000
--- a/dbal/development/src/bridges/websocket-bridge/message-handler.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import type { RPCResponse } from '../utils/rpc-types'
-import type { BridgeState } from './state'
-import { DBALError } from '../../core/foundation/errors'
-
-export const handleMessage = (state: BridgeState, data: string): void => {
-  try {
-    const response: RPCResponse = JSON.parse(data)
-    const pending = state.pendingRequests.get(response.id)
-
-    if (!pending) {
-      return
-    }
-
-    state.pendingRequests.delete(response.id)
-
-    if (response.error) {
-      const error = new DBALError(response.error.message, response.error.code, response.error.details)
-      pending.reject(error)
-    } else {
-      pending.resolve(response.result)
-    }
-  } catch (error) {
-    console.error('Failed to parse WebSocket message:', error)
-  }
-}
diff --git a/dbal/development/src/bridges/websocket-bridge/message-router.ts b/dbal/development/src/bridges/websocket-bridge/message-router.ts
new file mode 100644
index 000000000..0603f2a2a
--- /dev/null
+++ b/dbal/development/src/bridges/websocket-bridge/message-router.ts
@@ -0,0 +1,68 @@
+import { DBALError } from '../../core/foundation/errors'
+import type { RPCResponse } from '../utils/rpc-types'
+import type { BridgeState } from './state'
+
+export interface MessageRouter {
+  handle: (rawMessage: unknown) => void
+}
+
+const isRecord = (value: unknown): value is Record<string, unknown> =>
+  typeof value === 'object' && value !== null && !Array.isArray(value)
+
+const isRPCError = (value: unknown): value is NonNullable<RPCResponse['error']> =>
+  isRecord(value) &&
+  typeof value.code === 'number' &&
+  typeof value.message === 'string' &&
+  (value.details === undefined || isRecord(value.details))
+
+const isRPCResponse = (value: unknown): value is RPCResponse => {
+  if (!isRecord(value)) {
+    return false
+  }
+
+  const hasId = typeof value.id === 'string'
+  const hasResult = Object.prototype.hasOwnProperty.call(value, 'result')
+  const hasError = isRPCError(value.error) || value.error === undefined
+
+  return hasId && (hasResult || isRPCError(value.error)) && hasError
+}
+
+const parseResponse = (rawMessage: string): RPCResponse => {
+  const parsed = JSON.parse(rawMessage) as unknown
+
+  if (!isRPCResponse(parsed)) {
+    throw new Error('Invalid RPC response shape')
+  }
+
+  return parsed
+}
+
+export const createMessageRouter = (state: BridgeState): MessageRouter => ({
+  handle: (rawMessage: unknown) => {
+    if (typeof rawMessage !== 'string') {
+      console.warn('Ignoring non-string WebSocket message')
+      return
+    }
+
+    try {
+      const response = parseResponse(rawMessage)
+      const pending = state.pendingRequests.get(response.id)
+
+      if (!pending) {
+        console.warn(`No pending request for response ${response.id}`)
+        return
+      }
+
+      state.pendingRequests.delete(response.id)
+
+      if (response.error) {
+        const error = new DBALError(response.error.message, response.error.code, response.error.details)
+        pending.reject(error)
+      } else {
+        pending.resolve(response.result)
+      }
+    } catch (error) {
+      console.error('Failed to process WebSocket message', error)
+    }
+  },
+})
diff --git a/dbal/development/src/bridges/websocket-bridge/operations.ts b/dbal/development/src/bridges/websocket-bridge/operations.ts
index 05c9a866b..8519082fe 100644
--- a/dbal/development/src/bridges/websocket-bridge/operations.ts
+++ b/dbal/development/src/bridges/websocket-bridge/operations.ts
@@ -1,31 +1,36 @@
 import type { AdapterCapabilities } from '../../adapters/adapter'
 import type { ListOptions, ListResult } from '../../core/types'
+import type { ConnectionManager } from './connection-manager'
 import type { BridgeState } from './state'
 import { rpcCall } from './rpc'
 
-export const createOperations = (state: BridgeState) => ({
-  create: (entity: string, data: Record<string, unknown>) => rpcCall(state, 'create', entity, data),
-  read: (entity: string, id: string) => rpcCall(state, 'read', entity, id),
-  update: (entity: string, id: string, data: Record<string, unknown>) => rpcCall(state, 'update', entity, id, data),
-  delete: (entity: string, id: string) => rpcCall(state, 'delete', entity, id) as Promise<boolean>,
-  list: (entity: string, options?: ListOptions) => rpcCall(state, 'list', entity, options) as Promise<ListResult<unknown>>,
-  findFirst: (entity: string, filter?: Record<string, unknown>) => rpcCall(state, 'findFirst', entity, filter),
-  findByField: (entity: string, field: string, value: unknown) => rpcCall(state, 'findByField', entity, field, value),
+export const createOperations = (state: BridgeState, connectionManager: ConnectionManager) => ({
+  create: (entity: string, data: Record<string, unknown>) => rpcCall(state, connectionManager, 'create', entity, data),
+  read: (entity: string, id: string) => rpcCall(state, connectionManager, 'read', entity, id),
+  update: (entity: string, id: string, data: Record<string, unknown>) =>
+    rpcCall(state, connectionManager, 'update', entity, id, data),
+  delete: (entity: string, id: string) => rpcCall(state, connectionManager, 'delete', entity, id) as Promise<boolean>,
+  list: (entity: string, options?: ListOptions) =>
+    rpcCall(state, connectionManager, 'list', entity, options) as Promise<ListResult<unknown>>,
+  findFirst: (entity: string, filter?: Record<string, unknown>) =>
+    rpcCall(state, connectionManager, 'findFirst', entity, filter),
+  findByField: (entity: string, field: string, value: unknown) =>
+    rpcCall(state, connectionManager, 'findByField', entity, field, value),
   upsert: (
     entity: string,
     filter: Record<string, unknown>,
     createData: Record<string, unknown>,
     updateData: Record<string, unknown>,
-  ) => rpcCall(state, 'upsert', entity, filter, createData, updateData),
+  ) => rpcCall(state, connectionManager, 'upsert', entity, filter, createData, updateData),
   updateByField: (entity: string, field: string, value: unknown, data: Record<string, unknown>) =>
-    rpcCall(state, 'updateByField', entity, field, value, data),
+    rpcCall(state, connectionManager, 'updateByField', entity, field, value, data),
   deleteByField: (entity: string, field: string, value: unknown) =>
-    rpcCall(state, 'deleteByField', entity, field, value) as Promise<boolean>,
+    rpcCall(state, connectionManager, 'deleteByField', entity, field, value) as Promise<boolean>,
   deleteMany: (entity: string, filter?: Record<string, unknown>) =>
-    rpcCall(state, 'deleteMany', entity, filter) as Promise<number>,
+    rpcCall(state, connectionManager, 'deleteMany', entity, filter) as Promise<number>,
   createMany: (entity: string, data: Record<string, unknown>[]) =>
-    rpcCall(state, 'createMany', entity, data) as Promise<number>,
+    rpcCall(state, connectionManager, 'createMany', entity, data) as Promise<number>,
   updateMany: (entity: string, filter: Record<string, unknown>, data: Record<string, unknown>) =>
-    rpcCall(state, 'updateMany', entity, filter, data) as Promise<number>,
-  getCapabilities: () => rpcCall(state, 'getCapabilities') as Promise<AdapterCapabilities>,
+    rpcCall(state, connectionManager, 'updateMany', entity, filter, data) as Promise<number>,
+  getCapabilities: () => rpcCall(state, connectionManager, 'getCapabilities') as Promise<AdapterCapabilities>,
 })
diff --git a/dbal/development/src/bridges/websocket-bridge/rpc.ts b/dbal/development/src/bridges/websocket-bridge/rpc.ts
index 2462558b4..3de06a550 100644
--- a/dbal/development/src/bridges/websocket-bridge/rpc.ts
+++ b/dbal/development/src/bridges/websocket-bridge/rpc.ts
@@ -1,25 +1,28 @@
 import { DBALError } from '../../core/foundation/errors'
 import { generateRequestId } from '../utils/generate-request-id'
 import type { RPCMessage } from '../utils/rpc-types'
-import { connect } from './connection'
+import type { ConnectionManager } from './connection-manager'
 import type { BridgeState } from './state'
 
-export const rpcCall = async (state: BridgeState, method: string, ...params: unknown[]): Promise<unknown> => {
-  await connect(state)
-
+export const rpcCall = async (
+  state: BridgeState,
+  connectionManager: ConnectionManager,
+  method: string,
+  ...params: unknown[]
+): Promise<unknown> => {
   const id = generateRequestId()
   const message: RPCMessage = { id, method, params }
 
   return new Promise((resolve, reject) => {
     state.pendingRequests.set(id, { resolve, reject })
 
-    if (state.ws?.readyState === WebSocket.OPEN) {
-      state.ws.send(JSON.stringify(message))
-    } else {
-      state.pendingRequests.delete(id)
-      reject(DBALError.internal('WebSocket connection not open'))
-      return
-    }
+    connectionManager
+      .send(message)
+      .catch(error => {
+        state.pendingRequests.delete(id)
+        reject(error)
+        return
+      })
 
     setTimeout(() => {
       if (state.pendingRequests.has(id)) {
diff --git a/dbal/development/src/core/client.ts b/dbal/development/src/core/client.ts
new file mode 100644
index 000000000..789cabfc1
--- /dev/null
+++ b/dbal/development/src/core/client.ts
@@ -0,0 +1,8 @@
+import type { DBALConfig } from '../runtime/config'
+import { DBALClient } from './client/client'
+export { buildAdapter, buildEntityOperations } from './client/builders'
+export { normalizeClientConfig, validateClientConfig } from './client/mappers'
+
+export const createDBALClient = (config: DBALConfig) => new DBALClient(config)
+
+export { DBALClient }
diff --git a/dbal/development/src/core/client/builders.ts b/dbal/development/src/core/client/builders.ts
new file mode 100644
index 000000000..56fcf095f
--- /dev/null
+++ b/dbal/development/src/core/client/builders.ts
@@ -0,0 +1,24 @@
+import type { DBALAdapter } from '../../adapters/adapter'
+import type { DBALConfig } from '../../runtime/config'
+import { createAdapter } from './adapter-factory'
+import {
+  createComponentOperations,
+  createLuaScriptOperations,
+  createPackageOperations,
+  createPageOperations,
+  createSessionOperations,
+  createUserOperations,
+  createWorkflowOperations
+} from '../entities'
+
+export const buildAdapter = (config: DBALConfig): DBALAdapter => createAdapter(config)
+
+export const buildEntityOperations = (adapter: DBALAdapter) => ({
+  users: createUserOperations(adapter),
+  pages: createPageOperations(adapter),
+  components: createComponentOperations(adapter),
+  workflows: createWorkflowOperations(adapter),
+  luaScripts: createLuaScriptOperations(adapter),
+  packages: createPackageOperations(adapter),
+  sessions: createSessionOperations(adapter)
+})
diff --git a/dbal/development/src/core/client/client.ts b/dbal/development/src/core/client/client.ts
index b57eb6ea9..6c9a98691 100644
--- a/dbal/development/src/core/client/client.ts
+++ b/dbal/development/src/core/client/client.ts
@@ -1,7 +1,7 @@
 /**
  * @file client.ts
  * @description DBAL Client - Main interface for database operations
- * 
+ *
  * Provides CRUD operations for all entities through modular operation handlers.
  * Each entity type has its own dedicated operations module following the
  * single-responsibility pattern.
@@ -9,82 +9,67 @@
 
 import type { DBALConfig } from '../../runtime/config'
 import type { DBALAdapter } from '../../adapters/adapter'
-import { createAdapter } from './adapter-factory'
-import {
-  createUserOperations,
-  createPageOperations,
-  createComponentOperations,
-  createWorkflowOperations,
-  createLuaScriptOperations,
-  createPackageOperations,
-  createSessionOperations,
-} from '../entities'
+import { buildAdapter, buildEntityOperations } from './builders'
+import { normalizeClientConfig, validateClientConfig } from './mappers'
 
 export class DBALClient {
   private adapter: DBALAdapter
   private config: DBALConfig
+  private operations: ReturnType<typeof buildEntityOperations>
 
   constructor(config: DBALConfig) {
-    this.config = config
-    
-    // Validate configuration
-    if (!config.adapter) {
-      throw new Error('Adapter type must be specified')
-    }
-    if (config.mode !== 'production' && !config.database?.url) {
-      throw new Error('Database URL must be specified for non-production mode')
-    }
-    
-    this.adapter = createAdapter(config)
+    this.config = normalizeClientConfig(validateClientConfig(config))
+    this.adapter = buildAdapter(this.config)
+    this.operations = buildEntityOperations(this.adapter)
   }
 
   /**
    * User entity operations
    */
   get users() {
-    return createUserOperations(this.adapter)
+    return this.operations.users
   }
 
   /**
    * Page entity operations
    */
   get pages() {
-    return createPageOperations(this.adapter)
+    return this.operations.pages
   }
 
   /**
    * Component hierarchy entity operations
    */
   get components() {
-    return createComponentOperations(this.adapter)
+    return this.operations.components
   }
 
   /**
    * Workflow entity operations
    */
   get workflows() {
-    return createWorkflowOperations(this.adapter)
+    return this.operations.workflows
   }
 
   /**
    * Lua script entity operations
    */
   get luaScripts() {
-    return createLuaScriptOperations(this.adapter)
+    return this.operations.luaScripts
   }
 
   /**
    * Package entity operations
    */
   get packages() {
-    return createPackageOperations(this.adapter)
+    return this.operations.packages
   }
 
   /**
    * Session entity operations
    */
   get sessions() {
-    return createSessionOperations(this.adapter)
+    return this.operations.sessions
   }
 
   /**
diff --git a/dbal/development/src/core/client/mappers.ts b/dbal/development/src/core/client/mappers.ts
new file mode 100644
index 000000000..b9abc9661
--- /dev/null
+++ b/dbal/development/src/core/client/mappers.ts
@@ -0,0 +1,25 @@
+import type { DBALConfig } from '../../runtime/config'
+import { DBALError } from '../foundation/errors'
+
+export const validateClientConfig = (config: DBALConfig): DBALConfig => {
+  if (!config.adapter) {
+    throw DBALError.validationError('Adapter type must be specified', [])
+  }
+
+  if (config.mode !== 'production' && !config.database?.url) {
+    throw DBALError.validationError('Database URL must be specified for non-production mode', [])
+  }
+
+  return config
+}
+
+export const normalizeClientConfig = (config: DBALConfig): DBALConfig => ({
+  ...config,
+  security: {
+    sandbox: config.security?.sandbox ?? 'strict',
+    enableAuditLog: config.security?.enableAuditLog ?? true
+  },
+  performance: {
+    ...config.performance
+  }
+})
diff --git a/dbal/development/src/core/entities/operations/core/user-operations.ts b/dbal/development/src/core/entities/operations/core/user-operations.ts
index d5e29f59c..5d1da503e 100644
--- a/dbal/development/src/core/entities/operations/core/user-operations.ts
+++ b/dbal/development/src/core/entities/operations/core/user-operations.ts
@@ -1,2 +1,11 @@
 export { createUserOperations } from './user'
 export type { UserOperations } from './user'
+
+export { createUser } from './user/create'
+export { deleteUser } from './user/delete'
+export { updateUser } from './user/update'
+export {
+  assertValidUserCreate,
+  assertValidUserId,
+  assertValidUserUpdate,
+} from './user/validation'
diff --git a/dbal/development/src/core/entities/operations/core/user/create.ts b/dbal/development/src/core/entities/operations/core/user/create.ts
new file mode 100644
index 000000000..4543fe4e2
--- /dev/null
+++ b/dbal/development/src/core/entities/operations/core/user/create.ts
@@ -0,0 +1,20 @@
+import type { DBALAdapter } from '../../../../adapters/adapter'
+import { DBALError } from '../../../../foundation/errors'
+import type { User } from '../../../../foundation/types'
+import { assertValidUserCreate } from './validation'
+
+export const createUser = async (
+  adapter: DBALAdapter,
+  data: Omit<User, 'id' | 'createdAt' | 'updatedAt'>,
+): Promise<User> => {
+  assertValidUserCreate(data)
+
+  try {
+    return adapter.create('User', data) as Promise<User>
+  } catch (error) {
+    if (error instanceof DBALError && error.code === 409) {
+      throw DBALError.conflict('User with username or email already exists')
+    }
+    throw error
+  }
+}
diff --git a/dbal/development/src/core/entities/operations/core/user/delete.ts b/dbal/development/src/core/entities/operations/core/user/delete.ts
new file mode 100644
index 000000000..07484d1a6
--- /dev/null
+++ b/dbal/development/src/core/entities/operations/core/user/delete.ts
@@ -0,0 +1,13 @@
+import type { DBALAdapter } from '../../../../adapters/adapter'
+import { DBALError } from '../../../../foundation/errors'
+import { assertValidUserId } from './validation'
+
+export const deleteUser = async (adapter: DBALAdapter, id: string): Promise<boolean> => {
+  assertValidUserId(id)
+
+  const result = await adapter.delete('User', id)
+  if (!result) {
+    throw DBALError.notFound(`User not found: ${id}`)
+  }
+  return result
+}
diff --git a/dbal/development/src/core/entities/operations/core/user/index.ts b/dbal/development/src/core/entities/operations/core/user/index.ts
index 200efa017..a5f410c72 100644
--- a/dbal/development/src/core/entities/operations/core/user/index.ts
+++ b/dbal/development/src/core/entities/operations/core/user/index.ts
@@ -1,6 +1,8 @@
 import type { DBALAdapter } from '../../../../adapters/adapter'
 import type { User, ListOptions, ListResult } from '../../../../foundation/types'
-import { createUser, deleteUser, updateUser } from './mutations'
+import { createUser } from './create'
+import { deleteUser } from './delete'
+import { updateUser } from './update'
 import { createManyUsers, deleteManyUsers, updateManyUsers } from './batch'
 import { listUsers, readUser } from './reads'
 
diff --git a/dbal/development/src/core/entities/operations/core/user/mutations.ts b/dbal/development/src/core/entities/operations/core/user/mutations.ts
deleted file mode 100644
index 8e80c7be8..000000000
--- a/dbal/development/src/core/entities/operations/core/user/mutations.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { DBALAdapter } from '../../../../adapters/adapter'
-import type { User } from '../../../../foundation/types'
-import { DBALError } from '../../../../foundation/errors'
-import { validateUserCreate, validateUserUpdate, validateId } from '../../../../foundation/validation'
-
-export const createUser = async (
-  adapter: DBALAdapter,
-  data: Omit<User, 'id' | 'createdAt' | 'updatedAt'>,
-): Promise<User> => {
-  const validationErrors = validateUserCreate(data)
-  if (validationErrors.length > 0) {
-    throw DBALError.validationError('Invalid user data', validationErrors.map(error => ({ field: 'user', error })))
-  }
-
-  try {
-    return adapter.create('User', data) as Promise<User>
-  } catch (error) {
-    if (error instanceof DBALError && error.code === 409) {
-      throw DBALError.conflict('User with username or email already exists')
-    }
-    throw error
-  }
-}
-
-export const updateUser = async (adapter: DBALAdapter, id: string, data: Partial<User>): Promise<User> => {
-  const idErrors = validateId(id)
-  if (idErrors.length > 0) {
-    throw DBALError.validationError('Invalid user ID', idErrors.map(error => ({ field: 'id', error })))
-  }
-
-  const validationErrors = validateUserUpdate(data)
-  if (validationErrors.length > 0) {
-    throw DBALError.validationError('Invalid user update data', validationErrors.map(error => ({ field: 'user', error })))
-  }
-
-  try {
-    return adapter.update('User', id, data) as Promise<User>
-  } catch (error) {
-    if (error instanceof DBALError && error.code === 409) {
-      throw DBALError.conflict('Username or email already exists')
-    }
-    throw error
-  }
-}
-
-export const deleteUser = async (adapter: DBALAdapter, id: string): Promise<boolean> => {
-  const validationErrors = validateId(id)
-  if (validationErrors.length > 0) {
-    throw DBALError.validationError('Invalid user ID', validationErrors.map(error => ({ field: 'id', error })))
-  }
-
-  const result = await adapter.delete('User', id)
-  if (!result) {
-    throw DBALError.notFound(`User not found: ${id}`)
-  }
-  return result
-}
diff --git a/dbal/development/src/core/entities/operations/core/user/update.ts b/dbal/development/src/core/entities/operations/core/user/update.ts
new file mode 100644
index 000000000..ca0ae185d
--- /dev/null
+++ b/dbal/development/src/core/entities/operations/core/user/update.ts
@@ -0,0 +1,22 @@
+import type { DBALAdapter } from '../../../../adapters/adapter'
+import { DBALError } from '../../../../foundation/errors'
+import type { User } from '../../../../foundation/types'
+import { assertValidUserId, assertValidUserUpdate } from './validation'
+
+export const updateUser = async (
+  adapter: DBALAdapter,
+  id: string,
+  data: Partial<User>,
+): Promise<User> => {
+  assertValidUserId(id)
+  assertValidUserUpdate(data)
+
+  try {
+    return adapter.update('User', id, data) as Promise<User>
+  } catch (error) {
+    if (error instanceof DBALError && error.code === 409) {
+      throw DBALError.conflict('Username or email already exists')
+    }
+    throw error
+  }
+}
diff --git a/dbal/development/src/core/entities/operations/core/user/validation.ts b/dbal/development/src/core/entities/operations/core/user/validation.ts
new file mode 100644
index 000000000..0b57322d5
--- /dev/null
+++ b/dbal/development/src/core/entities/operations/core/user/validation.ts
@@ -0,0 +1,24 @@
+import { DBALError } from '../../../../foundation/errors'
+import type { User } from '../../../../foundation/types'
+import { validateId, validateUserCreate, validateUserUpdate } from '../../../../foundation/validation'
+
+export const assertValidUserId = (id: string): void => {
+  const validationErrors = validateId(id)
+  if (validationErrors.length > 0) {
+    throw DBALError.validationError('Invalid user ID', validationErrors.map(error => ({ field: 'id', error })))
+  }
+}
+
+export const assertValidUserCreate = (data: Omit<User, 'id' | 'createdAt' | 'updatedAt'>): void => {
+  const validationErrors = validateUserCreate(data)
+  if (validationErrors.length > 0) {
+    throw DBALError.validationError('Invalid user data', validationErrors.map(error => ({ field: 'user', error })))
+  }
+}
+
+export const assertValidUserUpdate = (data: Partial<User>): void => {
+  const validationErrors = validateUserUpdate(data)
+  if (validationErrors.length > 0) {
+    throw DBALError.validationError('Invalid user update data', validationErrors.map(error => ({ field: 'user', error })))
+  }
+}
diff --git a/dbal/development/src/core/entities/operations/system/package-operations.ts b/dbal/development/src/core/entities/operations/system/package-operations.ts
index 1f5d45352..886ac9b16 100644
--- a/dbal/development/src/core/entities/operations/system/package-operations.ts
+++ b/dbal/development/src/core/entities/operations/system/package-operations.ts
@@ -1,2 +1 @@
-export { createPackageOperations } from './package'
-export type { PackageOperations } from './package'
+export * from './package'
diff --git a/dbal/development/src/core/entities/operations/system/package/index.ts b/dbal/development/src/core/entities/operations/system/package/index.ts
index 7dce526f8..b70a4a145 100644
--- a/dbal/development/src/core/entities/operations/system/package/index.ts
+++ b/dbal/development/src/core/entities/operations/system/package/index.ts
@@ -2,9 +2,15 @@ import type { DBALAdapter } from '../../../../adapters/adapter'
 import type { Package, ListOptions, ListResult } from '../../../../foundation/types'
 import { createManyPackages, deleteManyPackages, updateManyPackages } from './batch'
 import { createPackage, deletePackage, updatePackage } from './mutations'
+import { publishPackage } from './publish'
 import { listPackages, readPackage } from './reads'
+import { unpublishPackage } from './unpublish'
+import { validatePackage } from './validate'
 
 export interface PackageOperations {
+  validate: (data: Partial<Package>) => string[]
+  publish: (data: Omit<Package, 'id' | 'createdAt' | 'updatedAt'>) => Promise<Package>
+  unpublish: (id: string) => Promise<boolean>
   create: (data: Omit<Package, 'id' | 'createdAt' | 'updatedAt'>) => Promise<Package>
   read: (id: string) => Promise<Package | null>
   update: (id: string, data: Partial<Package>) => Promise<Package>
@@ -16,6 +22,9 @@ export interface PackageOperations {
 }
 
 export const createPackageOperations = (adapter: DBALAdapter): PackageOperations => ({
+  validate: data => validatePackage(data),
+  publish: data => publishPackage(adapter, data),
+  unpublish: id => unpublishPackage(adapter, id),
   create: data => createPackage(adapter, data),
   read: id => readPackage(adapter, id),
   update: (id, data) => updatePackage(adapter, id, data),
@@ -25,3 +34,7 @@ export const createPackageOperations = (adapter: DBALAdapter): PackageOperations
   updateMany: (filter, data) => updateManyPackages(adapter, filter, data),
   deleteMany: filter => deleteManyPackages(adapter, filter),
 })
+
+export { publishPackage } from './publish'
+export { unpublishPackage } from './unpublish'
+export { validatePackage } from './validate'
diff --git a/dbal/development/src/core/entities/operations/system/package/publish.ts b/dbal/development/src/core/entities/operations/system/package/publish.ts
new file mode 100644
index 000000000..f59f721ae
--- /dev/null
+++ b/dbal/development/src/core/entities/operations/system/package/publish.ts
@@ -0,0 +1,10 @@
+import type { DBALAdapter } from '../../../../adapters/adapter'
+import type { Package } from '../../../../foundation/types'
+import { createPackage } from './mutations'
+
+export const publishPackage = (
+  adapter: DBALAdapter,
+  data: Omit<Package, 'id' | 'createdAt' | 'updatedAt'>,
+): Promise<Package> => {
+  return createPackage(adapter, data)
+}
diff --git a/dbal/development/src/core/entities/operations/system/package/unpublish.ts b/dbal/development/src/core/entities/operations/system/package/unpublish.ts
new file mode 100644
index 000000000..27a5da97f
--- /dev/null
+++ b/dbal/development/src/core/entities/operations/system/package/unpublish.ts
@@ -0,0 +1,6 @@
+import type { DBALAdapter } from '../../../../adapters/adapter'
+import { deletePackage } from './mutations'
+
+export const unpublishPackage = (adapter: DBALAdapter, id: string): Promise<boolean> => {
+  return deletePackage(adapter, id)
+}
diff --git a/dbal/development/src/core/entities/operations/system/package/validate.ts b/dbal/development/src/core/entities/operations/system/package/validate.ts
new file mode 100644
index 000000000..868033e9e
--- /dev/null
+++ b/dbal/development/src/core/entities/operations/system/package/validate.ts
@@ -0,0 +1,6 @@
+import type { Package } from '../../../../foundation/types'
+import { validatePackageCreate } from '../../../../foundation/validation'
+
+export const validatePackage = (data: Partial<Package>): string[] => {
+  return validatePackageCreate(data)
+}
diff --git a/dbal/development/src/core/foundation/types/entities.ts b/dbal/development/src/core/foundation/types/entities.ts
new file mode 100644
index 000000000..dcd20b271
--- /dev/null
+++ b/dbal/development/src/core/foundation/types/entities.ts
@@ -0,0 +1,19 @@
+export type EntityId = string
+
+export interface BaseEntity {
+  id: EntityId
+  createdAt: Date
+  updatedAt: Date
+}
+
+export interface SoftDeletableEntity extends BaseEntity {
+  deletedAt?: Date
+}
+
+export interface TenantScopedEntity extends BaseEntity {
+  tenantId: string
+}
+
+export interface EntityMetadata {
+  metadata?: Record<string, unknown>
+}
diff --git a/dbal/development/src/core/foundation/types/events.ts b/dbal/development/src/core/foundation/types/events.ts
new file mode 100644
index 000000000..5679fb156
--- /dev/null
+++ b/dbal/development/src/core/foundation/types/events.ts
@@ -0,0 +1,13 @@
+import type { OperationContext } from './operations'
+
+export interface DomainEvent<TPayload = Record<string, unknown>> {
+  id: string
+  name: string
+  occurredAt: Date
+  payload: TPayload
+  context?: OperationContext
+}
+
+export interface EventHandler<TPayload = Record<string, unknown>> {
+  (event: DomainEvent<TPayload>): void | Promise<void>
+}
diff --git a/dbal/development/src/core/foundation/types/index.ts b/dbal/development/src/core/foundation/types/index.ts
index 4c2264d64..293944c9a 100644
--- a/dbal/development/src/core/foundation/types/index.ts
+++ b/dbal/development/src/core/foundation/types/index.ts
@@ -4,3 +4,6 @@ export * from './content'
 export * from './automation'
 export * from './packages'
 export * from './shared'
+export * from './entities'
+export * from './operations'
+export * from './events'
diff --git a/dbal/development/src/core/foundation/types/operations.ts b/dbal/development/src/core/foundation/types/operations.ts
new file mode 100644
index 000000000..c411a9ea9
--- /dev/null
+++ b/dbal/development/src/core/foundation/types/operations.ts
@@ -0,0 +1,19 @@
+export interface OperationContext {
+  tenantId?: string
+  userId?: string
+  correlationId?: string
+  traceId?: string
+  metadata?: Record<string, unknown>
+}
+
+export interface OperationOptions {
+  timeoutMs?: number
+  retryCount?: number
+  dryRun?: boolean
+}
+
+export interface OperationAuditTrail {
+  performedAt: Date
+  performedBy?: string
+  context?: OperationContext
+}
diff --git a/dbal/development/src/index.ts b/dbal/development/src/index.ts
index 7acf658e0..e98734f17 100644
--- a/dbal/development/src/index.ts
+++ b/dbal/development/src/index.ts
@@ -1,4 +1,4 @@
-export { DBALClient } from './core/client/client'
+export { DBALClient, createDBALClient } from './core/client'
 export type { DBALConfig } from './runtime/config'
 export type * from './core/foundation/types'
 export { DBALError, DBALErrorCode } from './core/foundation/errors'
diff --git a/dbal/shared/tools/cpp-build-assistant.ts b/dbal/shared/tools/cpp-build-assistant.ts
index fcd23a64b..7becf72bc 100644
--- a/dbal/shared/tools/cpp-build-assistant.ts
+++ b/dbal/shared/tools/cpp-build-assistant.ts
@@ -1,12 +1,15 @@
 import path from 'path'
-import { CppBuildAssistant, runCppBuildAssistant } from './cpp-build-assistant/index'
+import { runCppBuildAssistant } from './cpp-build-assistant/runner'
 
-export { CppBuildAssistant, runCppBuildAssistant }
+export { CppBuildAssistant, createAssistant } from './cpp-build-assistant'
+export { createCppBuildAssistantConfig } from './cpp-build-assistant/config'
+export { runCppBuildAssistant } from './cpp-build-assistant/runner'
 
 if (require.main === module) {
   const args = process.argv.slice(2)
+  const projectRoot = path.join(__dirname, '..')
 
-  runCppBuildAssistant(args, path.join(__dirname, '..'))
+  runCppBuildAssistant(args, projectRoot)
     .then(success => {
       process.exit(success ? 0 : 1)
     })
diff --git a/dbal/shared/tools/cpp-build-assistant/cli.ts b/dbal/shared/tools/cpp-build-assistant/cli.ts
new file mode 100644
index 000000000..c29c525a8
--- /dev/null
+++ b/dbal/shared/tools/cpp-build-assistant/cli.ts
@@ -0,0 +1,125 @@
+import os from 'os'
+import { BuildType } from './config'
+import { COLORS, log } from './logging'
+import { CppBuildAssistant } from './index'
+
+export type CliCommand =
+  | 'check'
+  | 'init'
+  | 'install'
+  | 'configure'
+  | 'build'
+  | 'test'
+  | 'clean'
+  | 'rebuild'
+  | 'full'
+  | 'help'
+
+export interface ParsedCliArgs {
+  command: CliCommand
+  buildType: BuildType
+  jobs: number
+  target?: string
+  options: string[]
+}
+
+const parseBuildType = (options: string[]): BuildType => (options.includes('--debug') ? 'Debug' : 'Release')
+
+const parseJobs = (options: string[]): number => {
+  const jobsArg = options.find(option => option.startsWith('--jobs='))
+  const parsedJobs = jobsArg ? parseInt(jobsArg.split('=')[1]) : Number.NaN
+
+  return Number.isNaN(parsedJobs) ? os.cpus().length : parsedJobs
+}
+
+const parseTarget = (command: CliCommand, options: string[]): string | undefined => {
+  if (command !== 'build') return undefined
+
+  return options.find(option => !option.startsWith('--')) || 'all'
+}
+
+export const parseCliArgs = (args: string[]): ParsedCliArgs => {
+  const command = (args[0] as CliCommand | undefined) || 'help'
+  const options = args.slice(1)
+
+  return {
+    command,
+    buildType: parseBuildType(options),
+    jobs: parseJobs(options),
+    target: parseTarget(command, options),
+    options,
+  }
+}
+
+export const showHelp = (): void => {
+  console.log(`
+${COLORS.bright}C++ Build Assistant${COLORS.reset} - Conan + Ninja Build Helper
+
+${COLORS.cyan}USAGE:${COLORS.reset}
+  npm run cpp:build [command] [options]
+
+${COLORS.cyan}COMMANDS:${COLORS.reset}
+  ${COLORS.green}check${COLORS.reset}              Check if all dependencies are installed
+  ${COLORS.green}init${COLORS.reset}               Initialize project (create conanfile if missing)
+  ${COLORS.green}install${COLORS.reset}            Install Conan dependencies
+  ${COLORS.green}configure${COLORS.reset}          Configure CMake with Ninja generator
+  ${COLORS.green}build${COLORS.reset} [target]     Build the project (default: all)
+  ${COLORS.green}test${COLORS.reset}               Run tests with CTest
+  ${COLORS.green}clean${COLORS.reset}              Remove build artifacts
+  ${COLORS.green}rebuild${COLORS.reset}            Clean and rebuild
+  ${COLORS.green}full${COLORS.reset}               Full workflow: check → install → configure → build
+  ${COLORS.green}help${COLORS.reset}               Show this help message
+
+${COLORS.cyan}OPTIONS:${COLORS.reset}
+  --debug              Use Debug build type
+  --release            Use Release build type (default)
+  --jobs=N             Number of parallel build jobs (default: CPU count)
+
+${COLORS.cyan}EXAMPLES:${COLORS.reset}
+  npm run cpp:build check
+  npm run cpp:build full
+  npm run cpp:build build dbal_daemon
+  npm run cpp:build build -- --debug
+  npm run cpp:build test
+`)
+}
+
+export const runCli = async (args: string[], assistant: CppBuildAssistant): Promise<boolean> => {
+  const parsed = parseCliArgs(args)
+
+  switch (parsed.command) {
+    case 'check':
+      return assistant.checkDependencies()
+    case 'init':
+      return assistant.createConanfile()
+    case 'install':
+      if (!assistant.checkDependencies()) return false
+      return assistant.installConanDeps()
+    case 'configure':
+      if (!assistant.checkDependencies()) return false
+      return assistant.configureCMake(parsed.buildType)
+    case 'build':
+      if (!assistant.checkDependencies()) return false
+      return assistant.build(parsed.target, parsed.jobs)
+    case 'test':
+      return assistant.test()
+    case 'clean':
+      return assistant.clean()
+    case 'rebuild':
+      assistant.clean()
+      if (!assistant.checkDependencies()) return false
+      if (!assistant.configureCMake(parsed.buildType)) return false
+      return assistant.build('all', parsed.jobs)
+    case 'full':
+      log.section('Full Build Workflow')
+      if (!assistant.checkDependencies()) return false
+      if (!assistant.createConanfile()) return false
+      if (!assistant.installConanDeps()) return false
+      if (!assistant.configureCMake(parsed.buildType)) return false
+      return assistant.build('all', parsed.jobs)
+    case 'help':
+    default:
+      showHelp()
+      return true
+  }
+}
diff --git a/dbal/shared/tools/cpp-build-assistant/config.ts b/dbal/shared/tools/cpp-build-assistant/config.ts
new file mode 100644
index 000000000..f160b8cc4
--- /dev/null
+++ b/dbal/shared/tools/cpp-build-assistant/config.ts
@@ -0,0 +1,20 @@
+import path from 'path'
+
+export type BuildType = 'Debug' | 'Release'
+
+export interface CppBuildAssistantConfig {
+  projectRoot: string
+  cppDir: string
+  buildDir: string
+}
+
+export const createCppBuildAssistantConfig = (projectRoot?: string): CppBuildAssistantConfig => {
+  const resolvedProjectRoot = projectRoot || path.join(__dirname, '..')
+  const cppDir = path.join(resolvedProjectRoot, 'cpp')
+
+  return {
+    projectRoot: resolvedProjectRoot,
+    cppDir,
+    buildDir: path.join(cppDir, 'build'),
+  }
+}
diff --git a/dbal/shared/tools/cpp-build-assistant/index.ts b/dbal/shared/tools/cpp-build-assistant/index.ts
index 6810db714..a4f7500b8 100644
--- a/dbal/shared/tools/cpp-build-assistant/index.ts
+++ b/dbal/shared/tools/cpp-build-assistant/index.ts
@@ -1,18 +1,27 @@
 import os from 'os'
 import path from 'path'
+import { CppBuildAssistantConfig, BuildType, createCppBuildAssistantConfig } from './config'
 import { COLORS, log } from './logging'
 import { checkDependencies } from './dependencies'
 import { cleanBuild, configureCMake, ensureConanFile, execCommand, installConanDeps, buildTarget, runTests } from './workflow'
 
 export class CppBuildAssistant {
-  private projectRoot: string
-  private cppDir: string
-  private buildDir: string
+  private config: CppBuildAssistantConfig
 
-  constructor(projectRoot?: string) {
-    this.projectRoot = projectRoot || path.join(__dirname, '..')
-    this.cppDir = path.join(this.projectRoot, 'cpp')
-    this.buildDir = path.join(this.cppDir, 'build')
+  constructor(config?: CppBuildAssistantConfig) {
+    this.config = config || createCppBuildAssistantConfig()
+  }
+
+  get projectRoot(): string {
+    return this.config.projectRoot
+  }
+
+  get cppDir(): string {
+    return this.config.cppDir
+  }
+
+  get buildDir(): string {
+    return this.config.buildDir
   }
 
   checkDependencies(): boolean {
@@ -27,7 +36,7 @@ export class CppBuildAssistant {
     return installConanDeps(this.cppDir, execCommand)
   }
 
-  configureCMake(buildType: 'Debug' | 'Release' = 'Release'): boolean {
+  configureCMake(buildType: BuildType = 'Release'): boolean {
     return configureCMake(this.cppDir, buildType, execCommand)
   }
 
@@ -42,88 +51,11 @@ export class CppBuildAssistant {
   clean(): boolean {
     return cleanBuild(this.buildDir)
   }
-
-  async run(args: string[]): Promise<boolean> {
-    const command = args[0] || 'help'
-    const options = args.slice(1)
-
-    const buildType = options.includes('--debug') ? 'Debug' : 'Release'
-    const jobsArg = options.find(option => option.startsWith('--jobs='))
-    const jobs = jobsArg ? parseInt(jobsArg.split('=')[1]) : os.cpus().length
-
-    switch (command) {
-      case 'check':
-        return this.checkDependencies()
-      case 'init':
-        return this.createConanfile()
-      case 'install':
-        if (!this.checkDependencies()) return false
-        return this.installConanDeps()
-      case 'configure':
-        if (!this.checkDependencies()) return false
-        return this.configureCMake(buildType as 'Debug' | 'Release')
-      case 'build':
-        if (!this.checkDependencies()) return false
-        const target = options.find(option => !option.startsWith('--')) || 'all'
-        return this.build(target, jobs)
-      case 'test':
-        return this.test()
-      case 'clean':
-        return this.clean()
-      case 'rebuild':
-        this.clean()
-        if (!this.checkDependencies()) return false
-        if (!this.configureCMake(buildType as 'Debug' | 'Release')) return false
-        return this.build('all', jobs)
-      case 'full':
-        log.section('Full Build Workflow')
-        if (!this.checkDependencies()) return false
-        if (!this.createConanfile()) return false
-        if (!this.installConanDeps()) return false
-        if (!this.configureCMake(buildType as 'Debug' | 'Release')) return false
-        return this.build('all', jobs)
-      case 'help':
-      default:
-        this.showHelp()
-        return true
-    }
-  }
-
-  private showHelp(): void {
-    console.log(`
-${COLORS.bright}C++ Build Assistant${COLORS.reset} - Conan + Ninja Build Helper
-
-${COLORS.cyan}USAGE:${COLORS.reset}
-  npm run cpp:build [command] [options]
-
-${COLORS.cyan}COMMANDS:${COLORS.reset}
-  ${COLORS.green}check${COLORS.reset}              Check if all dependencies are installed
-  ${COLORS.green}init${COLORS.reset}               Initialize project (create conanfile if missing)
-  ${COLORS.green}install${COLORS.reset}            Install Conan dependencies
-  ${COLORS.green}configure${COLORS.reset}          Configure CMake with Ninja generator
-  ${COLORS.green}build${COLORS.reset} [target]     Build the project (default: all)
-  ${COLORS.green}test${COLORS.reset}               Run tests with CTest
-  ${COLORS.green}clean${COLORS.reset}              Remove build artifacts
-  ${COLORS.green}rebuild${COLORS.reset}            Clean and rebuild
-  ${COLORS.green}full${COLORS.reset}               Full workflow: check → install → configure → build
-  ${COLORS.green}help${COLORS.reset}               Show this help message
-
-${COLORS.cyan}OPTIONS:${COLORS.reset}
-  --debug              Use Debug build type
-  --release            Use Release build type (default)
-  --jobs=N             Number of parallel build jobs (default: CPU count)
-
-${COLORS.cyan}EXAMPLES:${COLORS.reset}
-  npm run cpp:build check
-  npm run cpp:build full
-  npm run cpp:build build dbal_daemon
-  npm run cpp:build build -- --debug
-  npm run cpp:build test
-`)
-  }
 }
 
-export const runCppBuildAssistant = async (args: string[], projectRoot?: string) => {
-  const assistant = new CppBuildAssistant(projectRoot || path.join(__dirname, '..'))
-  return assistant.run(args)
+export const createAssistant = (projectRoot?: string): CppBuildAssistant => {
+  const config = createCppBuildAssistantConfig(projectRoot || path.join(__dirname, '..'))
+  return new CppBuildAssistant(config)
 }
+
+export { BuildType, CppBuildAssistantConfig, COLORS, log }
diff --git a/dbal/shared/tools/cpp-build-assistant/runner.ts b/dbal/shared/tools/cpp-build-assistant/runner.ts
new file mode 100644
index 000000000..5d84827d2
--- /dev/null
+++ b/dbal/shared/tools/cpp-build-assistant/runner.ts
@@ -0,0 +1,10 @@
+import { CppBuildAssistant } from './index'
+import { createCppBuildAssistantConfig } from './config'
+import { runCli } from './cli'
+
+export const runCppBuildAssistant = async (args: string[], projectRoot?: string): Promise<boolean> => {
+  const config = createCppBuildAssistantConfig(projectRoot)
+  const assistant = new CppBuildAssistant(config)
+
+  return runCli(args, assistant)
+}
diff --git a/detection/detectors/class-detector.ts b/detection/detectors/class-detector.ts
new file mode 100644
index 000000000..2fb08b909
--- /dev/null
+++ b/detection/detectors/class-detector.ts
@@ -0,0 +1,64 @@
+import * as ts from 'typescript'
+import { Detector, DetectionFinding, DetectorContext } from '..'
+
+const getLocation = (sourceFile: ts.SourceFile, node: ts.Node) => {
+  const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart())
+
+  return {
+    line: line + 1,
+    column: character + 1
+  }
+}
+
+const getClassName = (
+  node: ts.ClassDeclaration | ts.ClassExpression,
+  sourceFile: ts.SourceFile
+): string => {
+  if (node.name) {
+    return node.name.getText(sourceFile)
+  }
+
+  const parent = node.parent
+
+  if (ts.isVariableDeclaration(parent) && ts.isIdentifier(parent.name)) {
+    return parent.name.text
+  }
+
+  return 'anonymous'
+}
+
+const collectClasses = (context: DetectorContext): DetectionFinding[] => {
+  const sourceFile = ts.createSourceFile(
+    context.filePath,
+    context.source,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX
+  )
+
+  const findings: DetectionFinding[] = []
+
+  const visit = (node: ts.Node) => {
+    if (ts.isClassDeclaration(node) || ts.isClassExpression(node)) {
+      const name = getClassName(node, sourceFile)
+      findings.push({
+        detectorId: 'class-detector',
+        name,
+        message: `Class detected: ${name}`,
+        location: getLocation(sourceFile, node)
+      })
+    }
+
+    ts.forEachChild(node, visit)
+  }
+
+  visit(sourceFile)
+
+  return findings
+}
+
+export const classDetector: Detector = {
+  id: 'class-detector',
+  description: 'Detects class declarations and expressions within a TypeScript/TSX source file.',
+  detect: collectClasses
+}
diff --git a/detection/detectors/function-detector.ts b/detection/detectors/function-detector.ts
new file mode 100644
index 000000000..7bfffafd1
--- /dev/null
+++ b/detection/detectors/function-detector.ts
@@ -0,0 +1,78 @@
+import * as ts from 'typescript'
+import { Detector, DetectionFinding, DetectorContext } from '..'
+
+type FunctionLike =
+  | ts.FunctionDeclaration
+  | ts.FunctionExpression
+  | ts.ArrowFunction
+  | ts.MethodDeclaration
+  | ts.ConstructorDeclaration
+
+const getLocation = (sourceFile: ts.SourceFile, node: ts.Node) => {
+  const { line, character } = sourceFile.getLineAndCharacterOfPosition(node.getStart())
+
+  return {
+    line: line + 1,
+    column: character + 1
+  }
+}
+
+const getFunctionName = (node: FunctionLike, sourceFile: ts.SourceFile): string => {
+  if ('name' in node && node.name) {
+    return node.name.getText(sourceFile)
+  }
+
+  const parent = node.parent
+
+  if (ts.isVariableDeclaration(parent) && ts.isIdentifier(parent.name)) {
+    return parent.name.text
+  }
+
+  if (ts.isPropertyAssignment(parent) && ts.isIdentifier(parent.name)) {
+    return parent.name.text
+  }
+
+  return 'anonymous'
+}
+
+const collectFunctions = (context: DetectorContext): DetectionFinding[] => {
+  const sourceFile = ts.createSourceFile(
+    context.filePath,
+    context.source,
+    ts.ScriptTarget.Latest,
+    true,
+    ts.ScriptKind.TSX
+  )
+
+  const findings: DetectionFinding[] = []
+
+  const visit = (node: ts.Node) => {
+    if (
+      ts.isFunctionDeclaration(node) ||
+      ts.isFunctionExpression(node) ||
+      ts.isArrowFunction(node) ||
+      ts.isMethodDeclaration(node) ||
+      ts.isConstructorDeclaration(node)
+    ) {
+      const name = getFunctionName(node, sourceFile)
+      findings.push({
+        detectorId: 'function-detector',
+        name,
+        message: `Function detected: ${name}`,
+        location: getLocation(sourceFile, node)
+      })
+    }
+
+    ts.forEachChild(node, visit)
+  }
+
+  visit(sourceFile)
+
+  return findings
+}
+
+export const functionDetector: Detector = {
+  id: 'function-detector',
+  description: 'Detects functions and methods within a TypeScript/TSX source file.',
+  detect: collectFunctions
+}
diff --git a/detection/index.ts b/detection/index.ts
new file mode 100644
index 000000000..7f5eb21f4
--- /dev/null
+++ b/detection/index.ts
@@ -0,0 +1,45 @@
+import { classDetector } from './detectors/class-detector'
+import { functionDetector } from './detectors/function-detector'
+
+export type DetectorContext = {
+  filePath: string
+  source: string
+}
+
+export type DetectionFinding = {
+  detectorId: string
+  name: string
+  message: string
+  location?: {
+    line: number
+    column: number
+  }
+}
+
+export interface Detector {
+  id: string
+  description: string
+  detect: (context: DetectorContext) => DetectionFinding[]
+}
+
+export class DetectorRegistry {
+  private readonly detectors: Detector[] = []
+
+  register(detector: Detector): void {
+    this.detectors.push(detector)
+  }
+
+  list(): Detector[] {
+    return [...this.detectors]
+  }
+
+  run(context: DetectorContext): DetectionFinding[] {
+    return this.detectors.flatMap((detector) => detector.detect(context))
+  }
+}
+
+export const registry = new DetectorRegistry()
+
+const builtInDetectors: Detector[] = [functionDetector, classDetector]
+
+builtInDetectors.forEach((detector) => registry.register(detector))
diff --git a/frontends/nextjs/src/app/codegen/CodegenStudioClient.tsx b/frontends/nextjs/src/app/codegen/CodegenStudioClient.tsx
index ee56df809..f67d800a4 100644
--- a/frontends/nextjs/src/app/codegen/CodegenStudioClient.tsx
+++ b/frontends/nextjs/src/app/codegen/CodegenStudioClient.tsx
@@ -1,6 +1,5 @@
 'use client'
 
-import type { CodegenManifest } from '@/lib/codegen/codegen-types'
 import { useMemo, useState, type ChangeEvent } from 'react'
 
 import {
@@ -16,6 +15,10 @@ import {
   Typography,
 } from '@mui/material'
 
+import Header from './components/Header'
+import Sidebar from './components/Sidebar'
+import { useCodegenData, type CodegenRequest } from './hooks/useCodegenData'
+
 const runtimeOptions = [
   { value: 'web', label: 'Next.js web' },
   { value: 'cli', label: 'Command line' },
@@ -24,7 +27,7 @@ const runtimeOptions = [
   { value: 'server', label: 'Server service' },
 ]
 
-const initialFormState = {
+const initialFormState: CodegenRequest = {
   projectName: 'nebula-launch',
   packageId: 'codegen_studio',
   runtime: 'web',
@@ -32,51 +35,11 @@ const initialFormState = {
   brief: 'Modern web interface with CLI companions',
 }
 
-type FormState = (typeof initialFormState)
-
-type FetchStatus = 'idle' | 'loading' | 'success'
-
-const createFilename = (header: string | null, fallback: string) => {
-  const match = header?.match(/filename="?([^"]+)"?/) ?? null
-  return match ? match[1] : fallback
-}
-
-const downloadBlob = (blob: Blob, filename: string) => {
-  const url = URL.createObjectURL(blob)
-  const anchor = document.createElement('a')
-  anchor.href = url
-  anchor.download = filename
-  document.body.appendChild(anchor)
-  anchor.click()
-  anchor.remove()
-  URL.revokeObjectURL(url)
-}
-
-const fetchZip = async (values: FormState) => {
-  const response = await fetch('/api/codegen/studio', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify(values),
-  })
-  if (!response.ok) {
-    throw new Error('Codegen Studio service returned an error')
-  }
-  const blob = await response.blob()
-  const filename = createFilename(response.headers.get('content-disposition'), `${values.projectName}.zip`)
-  downloadBlob(blob, filename)
-  const manifestHeader = response.headers.get('x-codegen-manifest')
-  const manifest = manifestHeader
-    ? (JSON.parse(decodeURIComponent(manifestHeader)) as CodegenManifest)
-    : null
-  return { filename, manifest }
-}
+type FormState = typeof initialFormState
 
 export default function CodegenStudioClient() {
   const [form, setForm] = useState<FormState>(initialFormState)
-  const [status, setStatus] = useState<FetchStatus>('idle')
-  const [message, setMessage] = useState<string | null>(null)
-  const [error, setError] = useState<string | null>(null)
-  const [manifest, setManifest] = useState<CodegenManifest | null>(null)
+  const { status, message, error, manifest, generate } = useCodegenData()
 
   const runtimeDescription = useMemo(() => {
     switch (form.runtime) {
@@ -112,125 +75,62 @@ export default function CodegenStudioClient() {
     setForm((prev) => ({ ...prev, [key]: event.target.value }))
   }
 
-  const handleSubmit = async () => {
-    setStatus('loading')
-    setError(null)
-    setMessage(null)
-    try {
-      const { filename, manifest } = await fetchZip(form)
-      setMessage(`Zip ${filename} created successfully.`)
-      setManifest(manifest)
-      setStatus('success')
-    } catch (err) {
-      setError(err instanceof Error ? err.message : 'Unable to generate the zip')
-      setManifest(null)
-      setStatus('idle')
-    }
-  }
+  const handleSubmit = () => generate(form)
 
   return (
-    <Container maxWidth="md" className="py-16">
-      <Paper elevation={8} className="p-8 space-y-6">
-        <Stack spacing={2}>
-          <Typography variant="h3" component="h1">
-            Codegen Studio Export
-          </Typography>
-          <Typography variant="body1" color="text.secondary">
-            Configure a starter bundle for MetaBuilder packages and download it instantly.
-          </Typography>
-        </Stack>
-
-        <Stack spacing={3}>
-          <TextField
-            label="Project name"
-            value={form.projectName}
-            onChange={handleChange('projectName')}
-            fullWidth
+    <Container maxWidth="lg" className="py-16">
+      <Paper elevation={8} className="p-8">
+        <Stack spacing={5}>
+          <Header
+            title="Codegen Studio Export"
+            subtitle="Configure a starter bundle for MetaBuilder packages and download it instantly."
           />
-          <TextField
-            label="Package id"
-            value={form.packageId}
-            onChange={handleChange('packageId')}
-            fullWidth
-          />
-          <TextField
-            select
-            label="Runtime"
-            value={form.runtime}
-            onChange={handleChange('runtime')}
-            fullWidth
-          >
-            {runtimeOptions.map((option) => (
-              <MenuItem key={option.value} value={option.value}>
-                {option.label}
-              </MenuItem>
-            ))}
-          </TextField>
-          <Typography variant="body2" color="text.secondary">
-            {runtimeDescription}
-          </Typography>
-          <TextField
-            label="Tone"
-            value={form.tone}
-            onChange={handleChange('tone')}
-            fullWidth
-          />
-          <TextField
-            label="Creative brief"
-            value={form.brief}
-            onChange={handleChange('brief')}
-            fullWidth
-            multiline
-            minRows={3}
-          />
-          <Box>
-            <Button
-              variant="contained"
-              color="primary"
-              onClick={handleSubmit}
-              disabled={status === 'loading'}
-              startIcon={status === 'loading' ? <CircularProgress size={16} /> : null}
-            >
-              {status === 'loading' ? 'Generating...' : 'Generate ZIP'}
-            </Button>
-          </Box>
-
-          {message && <Alert severity="success">{message}</Alert>}
-          {error && <Alert severity="error">{error}</Alert>}
-          {manifest && (
-            <Paper
-              elevation={1}
-              sx={{ border: '1px dashed', borderColor: 'divider', p: 2, backgroundColor: 'background.default' }}
-            >
-              <Typography variant="subtitle1" gutterBottom>
-                Manifest preview
+          <Stack direction={{ xs: 'column', md: 'row' }} spacing={5} alignItems="flex-start">
+            <Stack spacing={3} flex={1} width="100%">
+              <TextField
+                label="Project name"
+                value={form.projectName}
+                onChange={handleChange('projectName')}
+                fullWidth
+              />
+              <TextField label="Package id" value={form.packageId} onChange={handleChange('packageId')} fullWidth />
+              <TextField select label="Runtime" value={form.runtime} onChange={handleChange('runtime')} fullWidth>
+                {runtimeOptions.map((option) => (
+                  <MenuItem key={option.value} value={option.value}>
+                    {option.label}
+                  </MenuItem>
+                ))}
+              </TextField>
+              <Typography variant="body2" color="text.secondary">
+                {runtimeDescription}
               </Typography>
-              <Stack spacing={0.5}>
-                <Typography variant="body2" color="text.secondary">
-                  Project: {manifest.projectName}
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  Package: {manifest.packageId}
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  Runtime: {manifest.runtime}
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  Tone: {manifest.tone ?? 'adaptive'}
-                </Typography>
-                <Typography variant="body2" color="text.secondary">
-                  Generated at: {new Date(manifest.generatedAt).toLocaleString()}
-                </Typography>
-              </Stack>
-            </Paper>
-          )}
-          <Stack spacing={0.5}>
-            <Typography variant="subtitle2">Bundle contents</Typography>
-            {previewFiles.map((entry) => (
-              <Typography key={entry} variant="body2" color="text.secondary">
-                • {entry}
-              </Typography>
-            ))}
+              <TextField label="Tone" value={form.tone} onChange={handleChange('tone')} fullWidth />
+              <TextField
+                label="Creative brief"
+                value={form.brief}
+                onChange={handleChange('brief')}
+                fullWidth
+                multiline
+                minRows={3}
+              />
+              <Box>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={handleSubmit}
+                  disabled={status === 'loading'}
+                  startIcon={status === 'loading' ? <CircularProgress size={16} /> : null}
+                >
+                  {status === 'loading' ? 'Generating...' : 'Generate ZIP'}
+                </Button>
+              </Box>
+
+              {message && <Alert severity="success">{message}</Alert>}
+              {error && <Alert severity="error">{error}</Alert>}
+            </Stack>
+            <Box width={{ xs: '100%', md: 320 }} flexShrink={0}>
+              <Sidebar manifest={manifest} previewFiles={previewFiles} />
+            </Box>
           </Stack>
         </Stack>
       </Paper>
diff --git a/frontends/nextjs/src/app/codegen/components/Header.tsx b/frontends/nextjs/src/app/codegen/components/Header.tsx
new file mode 100644
index 000000000..29dcd934f
--- /dev/null
+++ b/frontends/nextjs/src/app/codegen/components/Header.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { Stack, Typography } from '@mui/material'
+
+interface HeaderProps {
+  title: string
+  subtitle: string
+}
+
+export default function Header({ title, subtitle }: HeaderProps) {
+  return (
+    <Stack spacing={2}>
+      <Typography variant="h3" component="h1">
+        {title}
+      </Typography>
+      <Typography variant="body1" color="text.secondary">
+        {subtitle}
+      </Typography>
+    </Stack>
+  )
+}
diff --git a/frontends/nextjs/src/app/codegen/components/Sidebar.tsx b/frontends/nextjs/src/app/codegen/components/Sidebar.tsx
new file mode 100644
index 000000000..27172ca38
--- /dev/null
+++ b/frontends/nextjs/src/app/codegen/components/Sidebar.tsx
@@ -0,0 +1,51 @@
+'use client'
+
+import type { CodegenManifest } from '@/lib/codegen/codegen-types'
+import { Paper, Stack, Typography } from '@mui/material'
+
+interface SidebarProps {
+  manifest: CodegenManifest | null
+  previewFiles: string[]
+}
+
+export default function Sidebar({ manifest, previewFiles }: SidebarProps) {
+  return (
+    <Stack spacing={3}>
+      {manifest && (
+        <Paper
+          elevation={1}
+          sx={{ border: '1px dashed', borderColor: 'divider', p: 2, backgroundColor: 'background.default' }}
+        >
+          <Typography variant="subtitle1" gutterBottom>
+            Manifest preview
+          </Typography>
+          <Stack spacing={0.5}>
+            <Typography variant="body2" color="text.secondary">
+              Project: {manifest.projectName}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              Package: {manifest.packageId}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              Runtime: {manifest.runtime}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              Tone: {manifest.tone ?? 'adaptive'}
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              Generated at: {new Date(manifest.generatedAt).toLocaleString()}
+            </Typography>
+          </Stack>
+        </Paper>
+      )}
+      <Stack spacing={1}>
+        <Typography variant="subtitle2">Bundle contents</Typography>
+        {previewFiles.map((entry) => (
+          <Typography key={entry} variant="body2" color="text.secondary">
+            • {entry}
+          </Typography>
+        ))}
+      </Stack>
+    </Stack>
+  )
+}
diff --git a/frontends/nextjs/src/app/codegen/hooks/useCodegenData.ts b/frontends/nextjs/src/app/codegen/hooks/useCodegenData.ts
new file mode 100644
index 000000000..61d831c7c
--- /dev/null
+++ b/frontends/nextjs/src/app/codegen/hooks/useCodegenData.ts
@@ -0,0 +1,74 @@
+'use client'
+
+import type { CodegenManifest } from '@/lib/codegen/codegen-types'
+import { useCallback, useState } from 'react'
+
+export type CodegenRequest = {
+  projectName: string
+  packageId: string
+  runtime: string
+  tone: string
+  brief: string
+}
+
+export type FetchStatus = 'idle' | 'loading' | 'success'
+
+const createFilename = (header: string | null, fallback: string) => {
+  const match = header?.match(/filename="?([^"]+)"?/) ?? null
+  return match ? match[1] : fallback
+}
+
+const downloadBlob = (blob: Blob, filename: string) => {
+  const url = URL.createObjectURL(blob)
+  const anchor = document.createElement('a')
+  anchor.href = url
+  anchor.download = filename
+  document.body.appendChild(anchor)
+  anchor.click()
+  anchor.remove()
+  URL.revokeObjectURL(url)
+}
+
+const fetchZip = async (values: CodegenRequest) => {
+  const response = await fetch('/api/codegen/studio', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(values),
+  })
+  if (!response.ok) {
+    throw new Error('Codegen Studio service returned an error')
+  }
+  const blob = await response.blob()
+  const filename = createFilename(response.headers.get('content-disposition'), `${values.projectName}.zip`)
+  downloadBlob(blob, filename)
+  const manifestHeader = response.headers.get('x-codegen-manifest')
+  const manifest = manifestHeader
+    ? (JSON.parse(decodeURIComponent(manifestHeader)) as CodegenManifest)
+    : null
+  return { filename, manifest }
+}
+
+export function useCodegenData() {
+  const [status, setStatus] = useState<FetchStatus>('idle')
+  const [message, setMessage] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+  const [manifest, setManifest] = useState<CodegenManifest | null>(null)
+
+  const generate = useCallback(async (values: CodegenRequest) => {
+    setStatus('loading')
+    setError(null)
+    setMessage(null)
+    try {
+      const { filename, manifest: manifestResult } = await fetchZip(values)
+      setMessage(`Zip ${filename} created successfully.`)
+      setManifest(manifestResult)
+      setStatus('success')
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Unable to generate the zip')
+      setManifest(null)
+      setStatus('idle')
+    }
+  }, [])
+
+  return { status, message, error, manifest, generate }
+}
diff --git a/frontends/nextjs/src/components/auth/god-credentials/Form.tsx b/frontends/nextjs/src/components/auth/god-credentials/Form.tsx
new file mode 100644
index 000000000..88700c036
--- /dev/null
+++ b/frontends/nextjs/src/components/auth/god-credentials/Form.tsx
@@ -0,0 +1,83 @@
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui'
+
+export interface GodCredentialsFormProps {
+  duration: number
+  unit: 'minutes' | 'hours'
+  onDurationChange: (value: number) => void
+  onUnitChange: (unit: 'minutes' | 'hours') => void
+  onSave: () => void
+  onResetExpiry: () => void
+  onClearExpiry: () => void
+}
+
+export function GodCredentialsForm({
+  duration,
+  unit,
+  onDurationChange,
+  onUnitChange,
+  onSave,
+  onResetExpiry,
+  onClearExpiry,
+}: GodCredentialsFormProps) {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="duration">Expiry Duration</Label>
+          <div className="flex gap-2">
+            <Input
+              id="duration"
+              type="number"
+              min="1"
+              max={unit === 'hours' ? '24' : '1440'}
+              value={duration}
+              onChange={(e) => onDurationChange(Number(e.target.value))}
+              className="flex-1"
+            />
+            <Select value={unit} onValueChange={(value) => onUnitChange(value as 'minutes' | 'hours')}>
+              <SelectTrigger className="w-32">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="minutes">Minutes</SelectItem>
+                <SelectItem value="hours">Hours</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Set the duration for how long credentials are visible (1 minute to 24 hours)
+          </p>
+        </div>
+
+        <div className="flex gap-2">
+          <Button onClick={onSave} className="flex-1">
+            Save Duration
+          </Button>
+        </div>
+      </div>
+
+      <div className="border-t pt-4 space-y-3">
+        <div className="space-y-2">
+          <Label>Expiry Management</Label>
+          <p className="text-xs text-muted-foreground">
+            Reset or clear the current expiry timer
+          </p>
+        </div>
+
+        <div className="flex gap-2">
+          <Button onClick={onResetExpiry} variant="outline" className="flex-1">
+            Reset Timer
+          </Button>
+          <Button onClick={onClearExpiry} variant="outline" className="flex-1">
+            Clear Expiry
+          </Button>
+        </div>
+
+        <p className="text-xs text-muted-foreground">
+          <strong>Reset Timer:</strong> Restart the countdown using the configured duration<br />
+          <strong>Clear Expiry:</strong> Remove expiry time (credentials will show on next page load)
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/auth/god-credentials/Summary.tsx b/frontends/nextjs/src/components/auth/god-credentials/Summary.tsx
new file mode 100644
index 000000000..84cba9aa9
--- /dev/null
+++ b/frontends/nextjs/src/components/auth/god-credentials/Summary.tsx
@@ -0,0 +1,42 @@
+import { Alert, AlertDescription, Badge } from '@/components/ui'
+import { CheckCircle, WarningCircle } from '@phosphor-icons/react'
+
+export interface GodCredentialsSummaryProps {
+  isActive: boolean
+  expiryTime: number
+  timeRemaining: string
+}
+
+export function GodCredentialsSummary({ isActive, expiryTime, timeRemaining }: GodCredentialsSummaryProps) {
+  if (isActive) {
+    return (
+      <Alert className="bg-gradient-to-br from-purple-500/10 to-orange-500/10 border-purple-500/50">
+        <CheckCircle className="h-5 w-5 text-green-500" />
+        <AlertDescription className="ml-2">
+          <div className="space-y-1">
+            <p className="font-semibold text-sm flex items-center gap-2">
+              God credentials are currently visible
+              <Badge variant="secondary" className="font-mono">Active</Badge>
+            </p>
+            <p className="text-xs text-muted-foreground">
+              Time remaining: <span className="font-mono font-semibold">{timeRemaining}</span>
+            </p>
+          </div>
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  if (!isActive && expiryTime > 0) {
+    return (
+      <Alert>
+        <WarningCircle className="h-5 w-5 text-yellow-500" />
+        <AlertDescription className="ml-2">
+          <p className="text-sm">God credentials have expired or been hidden</p>
+        </AlertDescription>
+      </Alert>
+    )
+  }
+
+  return null
+}
diff --git a/frontends/nextjs/src/components/auth/unified-login/LoginForm.tsx b/frontends/nextjs/src/components/auth/unified-login/LoginForm.tsx
new file mode 100644
index 000000000..9e3a81491
--- /dev/null
+++ b/frontends/nextjs/src/components/auth/unified-login/LoginForm.tsx
@@ -0,0 +1,48 @@
+import { Button, Input, Label, Alert, AlertDescription } from '@/components/ui'
+import { SignIn } from '@phosphor-icons/react'
+
+export interface LoginFormProps {
+  username: string
+  password: string
+  onUsernameChange: (value: string) => void
+  onPasswordChange: (value: string) => void
+  onSubmit: () => void
+}
+
+export function LoginForm({ username, password, onUsernameChange, onPasswordChange, onSubmit }: LoginFormProps) {
+  return (
+    <div className="space-y-4">
+      <div className="space-y-2">
+        <Label htmlFor="login-username">Username</Label>
+        <Input
+          id="login-username"
+          value={username}
+          onChange={(e) => onUsernameChange(e.target.value)}
+          placeholder="Enter username"
+          onKeyDown={(e) => e.key === 'Enter' && onSubmit()}
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="login-password">Password</Label>
+        <Input
+          id="login-password"
+          type="password"
+          value={password}
+          onChange={(e) => onPasswordChange(e.target.value)}
+          placeholder="Enter password"
+          onKeyDown={(e) => e.key === 'Enter' && onSubmit()}
+        />
+      </div>
+      <Button className="w-full" onClick={onSubmit}>
+        <SignIn className="mr-2" size={16} />
+        Sign In
+      </Button>
+      <Alert>
+        <AlertDescription className="text-xs">
+          <p className="font-semibold mb-1">Test Credentials:</p>
+          <p>Check browser console for default user passwords (they are scrambled on first run)</p>
+        </AlertDescription>
+      </Alert>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/auth/unified-login/ProviderList.tsx b/frontends/nextjs/src/components/auth/unified-login/ProviderList.tsx
new file mode 100644
index 000000000..3bfd01527
--- /dev/null
+++ b/frontends/nextjs/src/components/auth/unified-login/ProviderList.tsx
@@ -0,0 +1,50 @@
+import { Button, Separator } from '@/components/ui'
+import { GoogleLogo, GithubLogo, IconProps } from '@phosphor-icons/react'
+
+export interface Provider {
+  name: string
+  description?: string
+  icon?: React.ComponentType<IconProps>
+}
+
+export interface ProviderListProps {
+  providers: Provider[]
+  onSelect?: (provider: Provider) => void
+}
+
+const FALLBACK_PROVIDERS: Provider[] = [
+  { name: 'Google', description: 'Use your Google Workspace account', icon: GoogleLogo },
+  { name: 'GitHub', description: 'Developer SSO via GitHub', icon: GithubLogo },
+]
+
+export function ProviderList({ providers, onSelect }: ProviderListProps) {
+  const entries = providers.length > 0 ? providers : FALLBACK_PROVIDERS
+
+  return (
+    <div className="space-y-3">
+      <Separator />
+      <p className="text-xs text-muted-foreground text-center">Or continue with</p>
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+        {entries.map((provider) => {
+          const Icon = provider.icon
+          return (
+            <Button
+              key={provider.name}
+              variant="outline"
+              className="w-full justify-start gap-3"
+              onClick={() => onSelect?.(provider)}
+            >
+              {Icon ? <Icon size={18} /> : null}
+              <span className="text-sm font-medium">{provider.name}</span>
+              {provider.description ? (
+                <span className="text-xs text-muted-foreground block leading-tight text-left">
+                  {provider.description}
+                </span>
+              ) : null}
+            </Button>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/editors/JsonEditor.tsx b/frontends/nextjs/src/components/editors/JsonEditor.tsx
index 7b6beb59a..f6ebcf593 100644
--- a/frontends/nextjs/src/components/editors/JsonEditor.tsx
+++ b/frontends/nextjs/src/components/editors/JsonEditor.tsx
@@ -1,12 +1,13 @@
-import { useState, useEffect } from 'react'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui'
-import { Button } from '@/components/ui'
-import { Alert, AlertDescription } from '@/components/ui'
-import { FloppyDisk, X, Warning, ShieldCheck } from '@phosphor-icons/react'
+import { useEffect, useState } from 'react'
+import { Alert, AlertDescription, Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui'
+import { Warning } from '@phosphor-icons/react'
 import Editor from '@monaco-editor/react'
+import { toast } from 'sonner'
+
+import { SchemaSection } from './json/SchemaSection'
+import { Toolbar } from './json/Toolbar'
 import { securityScanner, type SecurityScanResult } from '@/lib/security-scanner'
 import { SecurityWarningDialog } from '@/components/organisms/security/SecurityWarningDialog'
-import { toast } from 'sonner'
 
 interface JsonEditorProps {
   open: boolean
@@ -32,10 +33,12 @@ export function JsonEditor({ open, onClose, title, value, onSave, schema }: Json
     }
   }, [open, value])
 
+  const parseJson = () => JSON.parse(jsonText)
+
   const handleSave = () => {
     try {
-      const parsed = JSON.parse(jsonText)
-      
+      const parsed = parseJson()
+
       const scanResult = securityScanner.scanJSON(jsonText)
       setSecurityScanResult(scanResult)
 
@@ -66,8 +69,7 @@ export function JsonEditor({ open, onClose, title, value, onSave, schema }: Json
 
   const handleForceSave = () => {
     try {
-      const parsed = JSON.parse(jsonText)
-      onSave(parsed)
+      onSave(parseJson())
       setError(null)
       setPendingSave(false)
       setShowSecurityDialog(false)
@@ -81,7 +83,7 @@ export function JsonEditor({ open, onClose, title, value, onSave, schema }: Json
     const scanResult = securityScanner.scanJSON(jsonText)
     setSecurityScanResult(scanResult)
     setShowSecurityDialog(true)
-    
+
     if (scanResult.safe) {
       toast.success('No security issues detected')
     } else {
@@ -91,8 +93,7 @@ export function JsonEditor({ open, onClose, title, value, onSave, schema }: Json
 
   const handleFormat = () => {
     try {
-      const parsed = JSON.parse(jsonText)
-      setJsonText(JSON.stringify(parsed, null, 2))
+      setJsonText(JSON.stringify(parseJson(), null, 2))
       setError(null)
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Invalid JSON - cannot format')
@@ -106,7 +107,7 @@ export function JsonEditor({ open, onClose, title, value, onSave, schema }: Json
           <DialogHeader>
             <DialogTitle className="text-2xl">{title}</DialogTitle>
           </DialogHeader>
-          
+
           <div className="space-y-4">
             {error && (
               <Alert variant="destructive">
@@ -115,16 +116,21 @@ export function JsonEditor({ open, onClose, title, value, onSave, schema }: Json
               </Alert>
             )}
 
-            {securityScanResult && securityScanResult.severity !== 'safe' && securityScanResult.severity !== 'low' && !showSecurityDialog && (
-              <Alert className="border-yellow-200 bg-yellow-50">
-                <Warning className="h-5 w-5 text-yellow-600" weight="fill" />
-                <AlertDescription className="text-yellow-800">
-                  {securityScanResult.issues.length} security {securityScanResult.issues.length === 1 ? 'issue' : 'issues'} detected. 
-                  Click Security Scan to review.
-                </AlertDescription>
-              </Alert>
-            )}
-            
+            {securityScanResult &&
+              securityScanResult.severity !== 'safe' &&
+              securityScanResult.severity !== 'low' &&
+              !showSecurityDialog && (
+                <Alert className="border-yellow-200 bg-yellow-50">
+                  <Warning className="h-5 w-5 text-yellow-600" weight="fill" />
+                  <AlertDescription className="text-yellow-800">
+                    {securityScanResult.issues.length} security {securityScanResult.issues.length === 1 ? 'issue' : 'issues'}
+                     detected. Click Security Scan to review.
+                  </AlertDescription>
+                </Alert>
+              )}
+
+            <SchemaSection schema={schema} />
+
             <div className="border rounded-lg overflow-hidden">
               <Editor
                 height="600px"
@@ -157,23 +163,12 @@ export function JsonEditor({ open, onClose, title, value, onSave, schema }: Json
             </div>
           </div>
 
-          <DialogFooter className="gap-2">
-            <Button variant="outline" onClick={handleScan}>
-              <ShieldCheck className="mr-2" />
-              Security Scan
-            </Button>
-            <Button variant="outline" onClick={handleFormat}>
-              Format JSON
-            </Button>
-            <Button variant="outline" onClick={onClose}>
-              <X className="mr-2" />
-              Cancel
-            </Button>
-            <Button onClick={handleSave} className="bg-accent text-accent-foreground hover:bg-accent/90">
-              <FloppyDisk className="mr-2" />
-              Save
-            </Button>
-          </DialogFooter>
+          <Toolbar
+            onScan={handleScan}
+            onFormat={handleFormat}
+            onCancel={onClose}
+            onSave={handleSave}
+          />
         </DialogContent>
       </Dialog>
 
diff --git a/frontends/nextjs/src/components/editors/ThemeEditor.tsx b/frontends/nextjs/src/components/editors/ThemeEditor.tsx
index 03c56b878..9800bdb50 100644
--- a/frontends/nextjs/src/components/editors/ThemeEditor.tsx
+++ b/frontends/nextjs/src/components/editors/ThemeEditor.tsx
@@ -1,79 +1,15 @@
-import { useState, useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { Label } from '@/components/ui'
-import { Input } from '@/components/ui'
 import { Button } from '@/components/ui'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
 import { Switch } from '@/components/ui'
 import { Palette, Sun, Moon, FloppyDisk, ArrowCounterClockwise } from '@phosphor-icons/react'
 import { toast } from 'sonner'
 import { useKV } from '@github/spark/hooks'
-
-interface ThemeColors {
-  background: string
-  foreground: string
-  card: string
-  cardForeground: string
-  primary: string
-  primaryForeground: string
-  secondary: string
-  secondaryForeground: string
-  muted: string
-  mutedForeground: string
-  accent: string
-  accentForeground: string
-  destructive: string
-  destructiveForeground: string
-  border: string
-  input: string
-  ring: string
-}
-
-interface ThemeConfig {
-  light: ThemeColors
-  dark: ThemeColors
-  radius: string
-}
-
-const DEFAULT_LIGHT_THEME: ThemeColors = {
-  background: 'oklch(0.92 0.03 290)',
-  foreground: 'oklch(0.25 0.02 260)',
-  card: 'oklch(1 0 0)',
-  cardForeground: 'oklch(0.25 0.02 260)',
-  primary: 'oklch(0.55 0.18 290)',
-  primaryForeground: 'oklch(0.98 0 0)',
-  secondary: 'oklch(0.35 0.02 260)',
-  secondaryForeground: 'oklch(0.90 0.01 260)',
-  muted: 'oklch(0.95 0.02 290)',
-  mutedForeground: 'oklch(0.50 0.02 260)',
-  accent: 'oklch(0.70 0.17 195)',
-  accentForeground: 'oklch(0.2 0.02 260)',
-  destructive: 'oklch(0.55 0.22 25)',
-  destructiveForeground: 'oklch(0.98 0 0)',
-  border: 'oklch(0.85 0.02 290)',
-  input: 'oklch(0.85 0.02 290)',
-  ring: 'oklch(0.70 0.17 195)',
-}
-
-const DEFAULT_DARK_THEME: ThemeColors = {
-  background: 'oklch(0.145 0 0)',
-  foreground: 'oklch(0.985 0 0)',
-  card: 'oklch(0.205 0 0)',
-  cardForeground: 'oklch(0.985 0 0)',
-  primary: 'oklch(0.922 0 0)',
-  primaryForeground: 'oklch(0.205 0 0)',
-  secondary: 'oklch(0.269 0 0)',
-  secondaryForeground: 'oklch(0.985 0 0)',
-  muted: 'oklch(0.269 0 0)',
-  mutedForeground: 'oklch(0.708 0 0)',
-  accent: 'oklch(0.269 0 0)',
-  accentForeground: 'oklch(0.985 0 0)',
-  destructive: 'oklch(0.704 0.191 22.216)',
-  destructiveForeground: 'oklch(0.98 0 0)',
-  border: 'oklch(1 0 0 / 10%)',
-  input: 'oklch(1 0 0 / 15%)',
-  ring: 'oklch(0.556 0 0)',
-}
+import { PaletteEditor } from './theme/PaletteEditor'
+import { PreviewPane } from './theme/PreviewPane'
+import { DEFAULT_DARK_THEME, DEFAULT_LIGHT_THEME } from './theme/constants'
+import { ThemeColors, ThemeConfig } from './theme/types'
 
 export function ThemeEditor() {
   const [themeConfig, setThemeConfig] = useKV<ThemeConfig>('theme_config', {
@@ -81,7 +17,7 @@ export function ThemeEditor() {
     dark: DEFAULT_DARK_THEME,
     radius: '0.5rem',
   })
-  
+
   const [isDarkMode, setIsDarkMode] = useKV<boolean>('dark_mode_enabled', false)
   const [editingTheme, setEditingTheme] = useState<'light' | 'dark'>('light')
   const [localColors, setLocalColors] = useState<ThemeColors>(DEFAULT_LIGHT_THEME)
@@ -95,30 +31,19 @@ export function ThemeEditor() {
   }, [editingTheme, themeConfig])
 
   useEffect(() => {
-    if (themeConfig) {
-      applyTheme()
-    }
-  }, [themeConfig, isDarkMode])
-
-  const applyTheme = () => {
     if (!themeConfig) return
-    
+
     const root = document.documentElement
     const colors = isDarkMode ? themeConfig.dark : themeConfig.light
-    
+
     Object.entries(colors).forEach(([key, value]) => {
       const cssVarName = key.replace(/([A-Z])/g, '-$1').toLowerCase()
       root.style.setProperty(`--${cssVarName}`, value)
     })
-    
+
     root.style.setProperty('--radius', themeConfig.radius)
-    
-    if (isDarkMode) {
-      root.classList.add('dark')
-    } else {
-      root.classList.remove('dark')
-    }
-  }
+    root.classList.toggle('dark', isDarkMode)
+  }, [isDarkMode, themeConfig])
 
   const handleColorChange = (colorKey: keyof ThemeColors, value: string) => {
     setLocalColors((current) => ({
@@ -130,12 +55,14 @@ export function ThemeEditor() {
   const handleSave = () => {
     setThemeConfig((current) => {
       if (!current) return { light: localColors, dark: DEFAULT_DARK_THEME, radius: localRadius }
+
       return {
         ...current,
         [editingTheme]: localColors,
         radius: localRadius,
       }
     })
+
     toast.success('Theme saved successfully')
   }
 
@@ -151,41 +78,6 @@ export function ThemeEditor() {
     toast.success(checked ? 'Dark mode enabled' : 'Light mode enabled')
   }
 
-  const colorGroups = [
-    {
-      title: 'Base Colors',
-      colors: [
-        { key: 'background' as const, label: 'Background' },
-        { key: 'foreground' as const, label: 'Foreground' },
-        { key: 'card' as const, label: 'Card' },
-        { key: 'cardForeground' as const, label: 'Card Foreground' },
-      ],
-    },
-    {
-      title: 'Action Colors',
-      colors: [
-        { key: 'primary' as const, label: 'Primary' },
-        { key: 'primaryForeground' as const, label: 'Primary Foreground' },
-        { key: 'secondary' as const, label: 'Secondary' },
-        { key: 'secondaryForeground' as const, label: 'Secondary Foreground' },
-        { key: 'accent' as const, label: 'Accent' },
-        { key: 'accentForeground' as const, label: 'Accent Foreground' },
-        { key: 'destructive' as const, label: 'Destructive' },
-        { key: 'destructiveForeground' as const, label: 'Destructive Foreground' },
-      ],
-    },
-    {
-      title: 'Supporting Colors',
-      colors: [
-        { key: 'muted' as const, label: 'Muted' },
-        { key: 'mutedForeground' as const, label: 'Muted Foreground' },
-        { key: 'border' as const, label: 'Border' },
-        { key: 'input' as const, label: 'Input' },
-        { key: 'ring' as const, label: 'Ring' },
-      ],
-    },
-  ]
-
   return (
     <div className="space-y-6">
       <Card>
@@ -196,9 +88,7 @@ export function ThemeEditor() {
                 <Palette size={24} />
                 Theme Editor
               </CardTitle>
-              <CardDescription>
-                Customize the application theme colors and appearance
-              </CardDescription>
+              <CardDescription>Customize the application theme colors and appearance</CardDescription>
             </div>
             <div className="flex items-center gap-3">
               <Sun size={18} className={!isDarkMode ? 'text-amber-500' : 'text-muted-foreground'} />
@@ -207,52 +97,21 @@ export function ThemeEditor() {
             </div>
           </div>
         </CardHeader>
-        <CardContent>
-          <Tabs value={editingTheme} onValueChange={(v) => setEditingTheme(v as 'light' | 'dark')}>
+
+        <CardContent className="space-y-6">
+          <Tabs value={editingTheme} onValueChange={(value) => setEditingTheme(value as 'light' | 'dark')}>
             <TabsList className="grid w-full grid-cols-2">
               <TabsTrigger value="light">Light Theme</TabsTrigger>
               <TabsTrigger value="dark">Dark Theme</TabsTrigger>
             </TabsList>
-            
-            <TabsContent value={editingTheme} className="space-y-6 mt-6">
-              <div className="space-y-4">
-                <div>
-                  <Label htmlFor="radius">Border Radius</Label>
-                  <Input
-                    id="radius"
-                    value={localRadius}
-                    onChange={(e) => setLocalRadius(e.target.value)}
-                    placeholder="e.g., 0.5rem"
-                    className="mt-1.5"
-                  />
-                </div>
-              </div>
 
-              {colorGroups.map((group) => (
-                <div key={group.title} className="space-y-4">
-                  <h3 className="text-sm font-semibold text-foreground">{group.title}</h3>
-                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-                    {group.colors.map(({ key, label }) => (
-                      <div key={key} className="space-y-1.5">
-                        <Label htmlFor={key}>{label}</Label>
-                        <div className="flex gap-2">
-                          <div
-                            className="w-10 h-10 rounded border border-border shrink-0"
-                            style={{ background: localColors[key] }}
-                          />
-                          <Input
-                            id={key}
-                            value={localColors[key]}
-                            onChange={(e) => handleColorChange(key, e.target.value)}
-                            placeholder="oklch(...)"
-                            className="font-mono text-sm"
-                          />
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ))}
+            <TabsContent value={editingTheme} className="space-y-6">
+              <PaletteEditor
+                colors={localColors}
+                radius={localRadius}
+                onColorChange={handleColorChange}
+                onRadiusChange={setLocalRadius}
+              />
 
               <div className="flex items-center gap-3 pt-4 border-t border-border">
                 <Button onClick={handleSave} className="gap-2">
@@ -267,26 +126,7 @@ export function ThemeEditor() {
             </TabsContent>
           </Tabs>
 
-          <div className="mt-6 p-4 border border-border rounded-lg bg-muted/30">
-            <h4 className="text-sm font-semibold mb-3">Theme Preview</h4>
-            <div className="space-y-3">
-              <div className="flex gap-2">
-                <Button size="sm">Primary Button</Button>
-                <Button size="sm" variant="secondary">Secondary</Button>
-                <Button size="sm" variant="outline">Outline</Button>
-                <Button size="sm" variant="destructive">Destructive</Button>
-              </div>
-              <Card>
-                <CardHeader>
-                  <CardTitle>Card Example</CardTitle>
-                  <CardDescription>This is a card description</CardDescription>
-                </CardHeader>
-                <CardContent>
-                  <p className="text-sm text-muted-foreground">Card content with muted text</p>
-                </CardContent>
-              </Card>
-            </div>
-          </div>
+          <PreviewPane />
         </CardContent>
       </Card>
     </div>
diff --git a/frontends/nextjs/src/components/editors/json/SchemaSection.tsx b/frontends/nextjs/src/components/editors/json/SchemaSection.tsx
new file mode 100644
index 000000000..b77ca8486
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/json/SchemaSection.tsx
@@ -0,0 +1,26 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
+
+interface SchemaSectionProps {
+  schema?: unknown
+}
+
+export function SchemaSection({ schema }: SchemaSectionProps) {
+  if (!schema) return null
+
+  const formattedSchema =
+    typeof schema === 'string' ? schema : JSON.stringify(schema, null, 2)
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-col gap-1">
+        <CardTitle>Schema</CardTitle>
+        <CardDescription>Reference for the expected JSON structure</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <pre className="max-h-48 overflow-auto rounded border bg-muted px-3 py-2 text-xs leading-5 whitespace-pre-wrap">
+          {formattedSchema}
+        </pre>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/editors/json/Toolbar.tsx b/frontends/nextjs/src/components/editors/json/Toolbar.tsx
new file mode 100644
index 000000000..a642ce6fc
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/json/Toolbar.tsx
@@ -0,0 +1,31 @@
+import { Button, DialogFooter } from '@/components/ui'
+import { FloppyDisk, ShieldCheck, X } from '@phosphor-icons/react'
+
+interface ToolbarProps {
+  onScan: () => void
+  onFormat: () => void
+  onCancel: () => void
+  onSave: () => void
+}
+
+export function Toolbar({ onScan, onFormat, onCancel, onSave }: ToolbarProps) {
+  return (
+    <DialogFooter className="gap-2">
+      <Button variant="outline" onClick={onScan}>
+        <ShieldCheck className="mr-2" />
+        Security Scan
+      </Button>
+      <Button variant="outline" onClick={onFormat}>
+        Format JSON
+      </Button>
+      <Button variant="outline" onClick={onCancel}>
+        <X className="mr-2" />
+        Cancel
+      </Button>
+      <Button onClick={onSave} className="bg-accent text-accent-foreground hover:bg-accent/90">
+        <FloppyDisk className="mr-2" />
+        Save
+      </Button>
+    </DialogFooter>
+  )
+}
diff --git a/frontends/nextjs/src/components/editors/lua/BlockListView.tsx b/frontends/nextjs/src/components/editors/lua/BlockListView.tsx
new file mode 100644
index 000000000..9176fba4e
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/lua/BlockListView.tsx
@@ -0,0 +1,95 @@
+import type { MouseEvent } from 'react'
+import { Box, Button, Card, CardContent, CardHeader, Stack, TextField, Typography } from '@mui/material'
+import { Add as AddIcon } from '@mui/icons-material'
+import type { LuaScript } from '@/lib/level-types'
+import type { BlockDefinition, BlockSlot, LuaBlock, LuaBlockType } from './types'
+import { BlockList } from './blocks/BlockList'
+import styles from './LuaBlocksEditor.module.scss'
+
+interface BlockListViewProps {
+  activeBlocks: LuaBlock[]
+  blockDefinitionMap: Map<LuaBlockType, BlockDefinition>
+  onRequestAddBlock: (
+    event: MouseEvent<HTMLElement>,
+    target: { parentId: string | null; slot: BlockSlot }
+  ) => void
+  onMoveBlock: (blockId: string, direction: 'up' | 'down') => void
+  onDuplicateBlock: (blockId: string) => void
+  onRemoveBlock: (blockId: string) => void
+  onUpdateField: (blockId: string, fieldName: string, value: string) => void
+  onUpdateScript: (updates: Partial<LuaScript>) => void
+  selectedScript: LuaScript | null
+}
+
+export function BlockListView({
+  activeBlocks,
+  blockDefinitionMap,
+  onRequestAddBlock,
+  onMoveBlock,
+  onDuplicateBlock,
+  onRemoveBlock,
+  onUpdateField,
+  onUpdateScript,
+  selectedScript,
+}: BlockListViewProps) {
+  return (
+    <Card>
+      <CardHeader
+        title="Block workspace"
+        subheader="Stack blocks to generate Lua code"
+        action={
+          <Button
+            variant="contained"
+            startIcon={<AddIcon />}
+            onClick={(event) => onRequestAddBlock(event, { parentId: null, slot: 'root' })}
+            disabled={!selectedScript}
+          >
+            Add block
+          </Button>
+        }
+      />
+      <CardContent>
+        {!selectedScript ? (
+          <Typography variant="body2" color="text.secondary">
+            Select a script to start building blocks.
+          </Typography>
+        ) : (
+          <Stack spacing={3}>
+            <Stack spacing={2} direction={{ xs: 'column', md: 'row' }}>
+              <TextField
+                label="Script name"
+                value={selectedScript.name}
+                onChange={(event) => onUpdateScript({ name: event.target.value })}
+                fullWidth
+              />
+              <TextField
+                label="Description"
+                value={selectedScript.description || ''}
+                onChange={(event) => onUpdateScript({ description: event.target.value })}
+                fullWidth
+              />
+            </Stack>
+            <Box className={styles.workspaceSurface}>
+              {activeBlocks.length > 0 ? (
+                <BlockList
+                  blocks={activeBlocks}
+                  blockDefinitionMap={blockDefinitionMap}
+                  onRequestAddBlock={onRequestAddBlock}
+                  onMoveBlock={onMoveBlock}
+                  onDuplicateBlock={onDuplicateBlock}
+                  onRemoveBlock={onRemoveBlock}
+                  onUpdateField={onUpdateField}
+                />
+              ) : (
+                <Box className={styles.blockEmpty}>Add a block to start building Lua logic.</Box>
+              )}
+            </Box>
+            <Typography variant="caption" color="text.secondary">
+              Blocks are saved in the script as metadata, so you can reload them later.
+            </Typography>
+          </Stack>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/editors/lua/CodePreview.tsx b/frontends/nextjs/src/components/editors/lua/CodePreview.tsx
new file mode 100644
index 000000000..c83746fdb
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/lua/CodePreview.tsx
@@ -0,0 +1,73 @@
+import { Box, Button, Card, CardContent, CardHeader, Stack, Tooltip } from '@mui/material'
+import { ContentCopy, Refresh as RefreshIcon, Save as SaveIcon } from '@mui/icons-material'
+import type { LuaScript } from '@/lib/level-types'
+import styles from './LuaBlocksEditor.module.scss'
+
+interface CodePreviewProps {
+  generatedCode: string
+  onApplyCode: () => void
+  onCopyCode: () => void
+  onReloadFromCode: () => void
+  selectedScript: LuaScript | null
+}
+
+export function CodePreview({
+  generatedCode,
+  onApplyCode,
+  onCopyCode,
+  onReloadFromCode,
+  selectedScript,
+}: CodePreviewProps) {
+  return (
+    <Card>
+      <CardHeader
+        title="Lua preview"
+        subheader="Generated code from your blocks"
+        action={
+          <Stack direction="row" spacing={1}>
+            <Tooltip title="Reload blocks from script">
+              <span>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<RefreshIcon fontSize="small" />}
+                  onClick={onReloadFromCode}
+                  disabled={!selectedScript}
+                >
+                  Reload
+                </Button>
+              </span>
+            </Tooltip>
+            <Tooltip title="Copy code">
+              <span>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<ContentCopy fontSize="small" />}
+                  onClick={onCopyCode}
+                  disabled={!selectedScript}
+                >
+                  Copy
+                </Button>
+              </span>
+            </Tooltip>
+            <Button
+              size="small"
+              variant="contained"
+              startIcon={<SaveIcon fontSize="small" />}
+              onClick={onApplyCode}
+              disabled={!selectedScript}
+            >
+              Apply to script
+            </Button>
+          </Stack>
+        }
+      />
+      <CardContent>
+        <Box className={styles.codePreview}>
+          <pre>{generatedCode}</pre>
+        </Box>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/editors/lua/LuaBlocksEditor.tsx b/frontends/nextjs/src/components/editors/lua/LuaBlocksEditor.tsx
index 212f840ba..58b2534f7 100644
--- a/frontends/nextjs/src/components/editors/lua/LuaBlocksEditor.tsx
+++ b/frontends/nextjs/src/components/editors/lua/LuaBlocksEditor.tsx
@@ -5,27 +5,21 @@ import {
   CardContent,
   CardHeader,
   Divider,
+  IconButton,
   List,
   ListItemButton,
   ListItemText,
   Paper,
   Stack,
-  TextField,
   Tooltip,
   Typography,
 } from '@mui/material'
-import {
-  Add as AddIcon,
-  ContentCopy,
-  Delete as DeleteIcon,
-  Refresh as RefreshIcon,
-  Save as SaveIcon,
-} from '@mui/icons-material'
+import { Add as AddIcon, Delete as DeleteIcon } from '@mui/icons-material'
 import type { LuaScript } from '@/lib/level-types'
-import { BlockList } from './blocks/BlockList'
 import { BlockMenu } from './blocks/BlockMenu'
-import { useBlockDefinitions } from './hooks/useBlockDefinitions'
-import { useLuaBlocksState } from './hooks/useLuaBlocksState'
+import { BlockListView } from './BlockListView'
+import { CodePreview } from './CodePreview'
+import { useLuaBlockEditorState } from './hooks/useLuaBlockEditorState'
 import styles from './LuaBlocksEditor.module.scss'
 
 interface LuaBlocksEditorProps {
@@ -34,18 +28,11 @@ interface LuaBlocksEditorProps {
 }
 
 export function LuaBlocksEditor({ scripts, onScriptsChange }: LuaBlocksEditorProps) {
-  const {
-    blockDefinitions,
-    blockDefinitionMap,
-    blocksByCategory,
-    createBlock,
-    cloneBlock,
-    buildLuaFromBlocks,
-    decodeBlocksMetadata,
-  } = useBlockDefinitions()
-
   const {
     activeBlocks,
+    blockDefinitionMap,
+    blockDefinitions,
+    blocksByCategory,
     generatedCode,
     handleAddBlock,
     handleAddScript,
@@ -64,173 +51,7 @@ export function LuaBlocksEditor({ scripts, onScriptsChange }: LuaBlocksEditorPro
     selectedScript,
     selectedScriptId,
     setSelectedScriptId,
-  } = useLuaBlocksState({
-    scripts,
-    onScriptsChange,
-    buildLuaFromBlocks,
-    createBlock,
-    cloneBlock,
-    decodeBlocksMetadata,
-  })
-
-  const renderBlockLibrary = () => (
-    <Card>
-      <CardHeader title="Block library" subheader="Click a block to add it" />
-      <CardContent>
-        <Stack spacing={2}>
-          {Object.entries(blocksByCategory).map(([category, blocks]) => (
-            <Box key={category}>
-              <Typography variant="subtitle2" sx={{ mb: 1 }}>
-                {category}
-              </Typography>
-              <Stack spacing={1}>
-                {blocks.map((block) => (
-                  <Paper
-                    key={block.type}
-                    className={styles.libraryBlock}
-                    data-category={block.category}
-                    onClick={() => handleAddBlock(block.type, { parentId: null, slot: 'root' })}
-                  >
-                    <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
-                      <Box>
-                        <Typography className={styles.libraryBlockTitle}>{block.label}</Typography>
-                        <Typography className={styles.libraryBlockDesc}>{block.description}</Typography>
-                      </Box>
-                      <Button
-                        size="small"
-                        variant="outlined"
-                        onClick={(event) => {
-                          event.stopPropagation()
-                          handleAddBlock(block.type, { parentId: null, slot: 'root' })
-                        }}
-                      >
-                        Add
-                      </Button>
-                    </Box>
-                  </Paper>
-                ))}
-              </Stack>
-            </Box>
-          ))}
-        </Stack>
-      </CardContent>
-    </Card>
-  )
-
-  const renderWorkspace = () => (
-    <Card>
-      <CardHeader
-        title="Block workspace"
-        subheader="Stack blocks to generate Lua code"
-        action={
-          <Button
-            variant="contained"
-            startIcon={<AddIcon />}
-            onClick={(event) => handleRequestAddBlock(event, { parentId: null, slot: 'root' })}
-            disabled={!selectedScript}
-          >
-            Add block
-          </Button>
-        }
-      />
-      <CardContent>
-        {!selectedScript ? (
-          <Typography variant="body2" color="text.secondary">
-            Select a script to start building blocks.
-          </Typography>
-        ) : (
-          <Stack spacing={3}>
-            <Stack spacing={2} direction={{ xs: 'column', md: 'row' }}>
-              <TextField
-                label="Script name"
-                value={selectedScript.name}
-                onChange={(event) => handleUpdateScript({ name: event.target.value })}
-                fullWidth
-              />
-              <TextField
-                label="Description"
-                value={selectedScript.description || ''}
-                onChange={(event) => handleUpdateScript({ description: event.target.value })}
-                fullWidth
-              />
-            </Stack>
-            <Box className={styles.workspaceSurface}>
-              {activeBlocks.length > 0 ? (
-                <BlockList
-                  blocks={activeBlocks}
-                  blockDefinitionMap={blockDefinitionMap}
-                  onRequestAddBlock={handleRequestAddBlock}
-                  onMoveBlock={handleMoveBlock}
-                  onDuplicateBlock={handleDuplicateBlock}
-                  onRemoveBlock={handleRemoveBlock}
-                  onUpdateField={handleUpdateField}
-                />
-              ) : (
-                <Box className={styles.blockEmpty}>Add a block to start building Lua logic.</Box>
-              )}
-            </Box>
-            <Typography variant="caption" color="text.secondary">
-              Blocks are saved in the script as metadata, so you can reload them later.
-            </Typography>
-          </Stack>
-        )}
-      </CardContent>
-    </Card>
-  )
-
-  const renderScriptList = () => (
-    <Card>
-      <CardHeader
-        title="Lua block scripts"
-        subheader="Create scripts using Scratch-style blocks"
-      />
-      <CardContent>
-        <Stack spacing={2}>
-          <Button variant="contained" startIcon={<AddIcon />} onClick={handleAddScript}>
-            New block script
-          </Button>
-          <Divider />
-          <List disablePadding>
-            {scripts.length === 0 && (
-              <Typography variant="body2" color="text.secondary">
-                No scripts yet. Create a block script to begin.
-              </Typography>
-            )}
-            {scripts.map((script) => (
-              <ListItemButton
-                key={script.id}
-                selected={script.id === selectedScriptId}
-                onClick={() => setSelectedScriptId(script.id)}
-                sx={{
-                  borderRadius: 2,
-                  mb: 1,
-                  alignItems: 'flex-start',
-                }}
-              >
-                <ListItemText
-                  primary={script.name}
-                  secondary={script.description || 'No description'}
-                  primaryTypographyProps={{ fontWeight: 600 }}
-                  secondaryTypographyProps={{ variant: 'caption' }}
-                />
-                <Tooltip title="Delete script">
-                  <IconButton
-                    size="small"
-                    onClick={(event) => {
-                      event.stopPropagation()
-                      handleDeleteScript(script.id)
-                    }}
-                  >
-                    <DeleteIcon fontSize="small" />
-                  </IconButton>
-                </Tooltip>
-              </ListItemButton>
-            ))}
-          </List>
-        </Stack>
-      </CardContent>
-    </Card>
-  )
+  } = useLuaBlockEditorState({ scripts, onScriptsChange })
 
   return (
     <Box className={styles.root}>
@@ -242,55 +63,121 @@ export function LuaBlocksEditor({ scripts, onScriptsChange }: LuaBlocksEditorPro
         }}
       >
         <Stack spacing={3}>
-          {renderScriptList()}
-          {renderBlockLibrary()}
+          <Card>
+            <CardHeader
+              title="Lua block scripts"
+              subheader="Create scripts using Scratch-style blocks"
+            />
+            <CardContent>
+              <Stack spacing={2}>
+                <Button variant="contained" startIcon={<AddIcon />} onClick={handleAddScript}>
+                  New block script
+                </Button>
+                <Divider />
+                <List disablePadding>
+                  {scripts.length === 0 && (
+                    <Typography variant="body2" color="text.secondary">
+                      No scripts yet. Create a block script to begin.
+                    </Typography>
+                  )}
+                  {scripts.map((script) => (
+                    <ListItemButton
+                      key={script.id}
+                      selected={script.id === selectedScriptId}
+                      onClick={() => setSelectedScriptId(script.id)}
+                      sx={{
+                        borderRadius: 2,
+                        mb: 1,
+                        alignItems: 'flex-start',
+                      }}
+                    >
+                      <ListItemText
+                        primary={script.name}
+                        secondary={script.description || 'No description'}
+                        primaryTypographyProps={{ fontWeight: 600 }}
+                        secondaryTypographyProps={{ variant: 'caption' }}
+                      />
+                      <Tooltip title="Delete script">
+                        <IconButton
+                          size="small"
+                          onClick={(event) => {
+                            event.stopPropagation()
+                            handleDeleteScript(script.id)
+                          }}
+                        >
+                          <DeleteIcon fontSize="small" />
+                        </IconButton>
+                      </Tooltip>
+                    </ListItemButton>
+                  ))}
+                </List>
+              </Stack>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader title="Block library" subheader="Click a block to add it" />
+            <CardContent>
+              <Stack spacing={2}>
+                {Object.entries(blocksByCategory).map(([category, blocks]) => (
+                  <Box key={category}>
+                    <Typography variant="subtitle2" sx={{ mb: 1 }}>
+                      {category}
+                    </Typography>
+                    <Stack spacing={1}>
+                      {blocks.map((block) => (
+                        <Paper
+                          key={block.type}
+                          className={styles.libraryBlock}
+                          data-category={block.category}
+                          onClick={() => handleAddBlock(block.type, { parentId: null, slot: 'root' })}
+                        >
+                          <Box sx={{ display: 'flex', justifyContent: 'space-between', gap: 2 }}>
+                            <Box>
+                              <Typography className={styles.libraryBlockTitle}>{block.label}</Typography>
+                              <Typography className={styles.libraryBlockDesc}>{block.description}</Typography>
+                            </Box>
+                            <Button
+                              size="small"
+                              variant="outlined"
+                              onClick={(event) => {
+                                event.stopPropagation()
+                                handleAddBlock(block.type, { parentId: null, slot: 'root' })
+                              }}
+                            >
+                              Add
+                            </Button>
+                          </Box>
+                        </Paper>
+                      ))}
+                    </Stack>
+                  </Box>
+                ))}
+              </Stack>
+            </CardContent>
+          </Card>
         </Stack>
 
         <Stack spacing={3}>
-          {renderWorkspace()}
+          <BlockListView
+            activeBlocks={activeBlocks}
+            blockDefinitionMap={blockDefinitionMap}
+            onRequestAddBlock={handleRequestAddBlock}
+            onMoveBlock={handleMoveBlock}
+            onDuplicateBlock={handleDuplicateBlock}
+            onRemoveBlock={handleRemoveBlock}
+            onUpdateField={handleUpdateField}
+            onUpdateScript={handleUpdateScript}
+            selectedScript={selectedScript}
+          />
 
-          <Card>
-            <CardHeader
-              title="Lua preview"
-              subheader="Generated code from your blocks"
-              action={
-                <Stack direction="row" spacing={1}>
-                  <Tooltip title="Reload blocks from script">
-                    <span>
-                      <IconButton
-                        size="small"
-                        onClick={handleReloadFromCode}
-                        disabled={!selectedScript}
-                      >
-                        <RefreshIcon fontSize="small" />
-                      </IconButton>
-                    </span>
-                  </Tooltip>
-                  <Tooltip title="Copy code">
-                    <span>
-                      <IconButton size="small" onClick={handleCopyCode} disabled={!selectedScript}>
-                        <ContentCopy fontSize="small" />
-                      </IconButton>
-                    </span>
-                  </Tooltip>
-                  <Button
-                    size="small"
-                    variant="contained"
-                    startIcon={<SaveIcon fontSize="small" />}
-                    onClick={handleApplyCode}
-                    disabled={!selectedScript}
-                  >
-                    Apply to script
-                  </Button>
-                </Stack>
-              }
-            />
-            <CardContent>
-              <Box className={styles.codePreview}>
-                <pre>{generatedCode}</pre>
-              </Box>
-            </CardContent>
-          </Card>
+          <CodePreview
+            generatedCode={generatedCode}
+            onApplyCode={handleApplyCode}
+            onCopyCode={handleCopyCode}
+            onReloadFromCode={handleReloadFromCode}
+            selectedScript={selectedScript}
+          />
         </Stack>
       </Box>
 
diff --git a/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary.tsx b/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary.tsx
index 52290dcec..37b32710b 100644
--- a/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary.tsx
+++ b/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary.tsx
@@ -1,34 +1,15 @@
-import { useState } from 'react'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Button } from '@/components/ui'
-import { Badge } from '@/components/ui'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-import { ScrollArea } from '@/components/ui'
-import { Separator } from '@/components/ui'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui'
-import { 
-  MagnifyingGlass, 
-  Copy, 
-  Check, 
-  BookOpen, 
-  Tag,
-  ArrowRight,
-  Code
-} from '@phosphor-icons/react'
+import { useMemo, useState } from 'react'
+import { Tabs } from '@/components/ui'
+import { BookOpen } from '@phosphor-icons/react'
 import { toast } from 'sonner'
-import { 
-  LUA_SNIPPET_CATEGORIES, 
-  getSnippetsByCategory, 
+import {
+  getSnippetsByCategory,
   searchSnippets,
-  type LuaSnippet 
+  type LuaSnippet,
 } from '@/lib/lua-snippets'
+import { SearchBar } from './LuaSnippetLibrary/SearchBar'
+import { SnippetDialog } from './LuaSnippetLibrary/SnippetDialog'
+import { SnippetList } from './LuaSnippetLibrary/SnippetList'
 
 interface LuaSnippetLibraryProps {
   onInsertSnippet?: (code: string) => void
@@ -40,9 +21,11 @@ export function LuaSnippetLibrary({ onInsertSnippet }: LuaSnippetLibraryProps) {
   const [selectedSnippet, setSelectedSnippet] = useState<LuaSnippet | null>(null)
   const [copiedId, setCopiedId] = useState<string | null>(null)
 
-  const displayedSnippets = searchQuery 
-    ? searchSnippets(searchQuery)
-    : getSnippetsByCategory(selectedCategory)
+  const displayedSnippets = useMemo(
+    () =>
+      searchQuery ? searchSnippets(searchQuery) : getSnippetsByCategory(selectedCategory),
+    [searchQuery, selectedCategory]
+  )
 
   const handleCopySnippet = (snippet: LuaSnippet) => {
     navigator.clipboard.writeText(snippet.code)
@@ -72,214 +55,39 @@ export function LuaSnippetLibrary({ onInsertSnippet }: LuaSnippetLibraryProps) {
         </p>
       </div>
 
-      <div className="relative">
-        <MagnifyingGlass size={18} className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" />
-        <Input
-          placeholder="Search snippets by name, description, or tags..."
-          value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
-          className="pl-10"
-        />
-      </div>
-
       <Tabs value={selectedCategory} onValueChange={setSelectedCategory}>
-        <ScrollArea className="w-full whitespace-nowrap">
-          <TabsList className="inline-flex w-auto">
-            {LUA_SNIPPET_CATEGORIES.map((category) => (
-              <TabsTrigger key={category} value={category} className="text-xs">
-                {category}
-              </TabsTrigger>
-            ))}
-          </TabsList>
-        </ScrollArea>
+        <SearchBar
+          searchQuery={searchQuery}
+          onSearchChange={setSearchQuery}
+          selectedCategory={selectedCategory}
+          onCategoryChange={setSelectedCategory}
+        />
 
-        {LUA_SNIPPET_CATEGORIES.map((category) => (
-          <TabsContent key={category} value={category} className="mt-6">
-            <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
-              {displayedSnippets.length === 0 ? (
-                <div className="col-span-full text-center py-12 text-muted-foreground">
-                  <Code size={48} className="mx-auto mb-4 opacity-50" />
-                  <p>No snippets found</p>
-                  {searchQuery && (
-                    <p className="text-sm mt-2">Try a different search term</p>
-                  )}
-                </div>
-              ) : (
-                displayedSnippets.map((snippet) => (
-                  <Card 
-                    key={snippet.id} 
-                    className="hover:border-primary transition-colors cursor-pointer group"
-                    onClick={() => setSelectedSnippet(snippet)}
-                  >
-                    <CardHeader className="pb-3">
-                      <div className="flex items-start justify-between gap-2">
-                        <div className="flex-1 min-w-0">
-                          <CardTitle className="text-base font-semibold mb-1 truncate group-hover:text-primary transition-colors">
-                            {snippet.name}
-                          </CardTitle>
-                          <CardDescription className="text-xs line-clamp-2">
-                            {snippet.description}
-                          </CardDescription>
-                        </div>
-                        <Badge variant="outline" className="text-xs shrink-0">
-                          {snippet.category}
-                        </Badge>
-                      </div>
-                    </CardHeader>
-                    <CardContent className="pt-0">
-                      <div className="flex flex-wrap gap-1.5 mb-3">
-                        {snippet.tags.slice(0, 3).map((tag) => (
-                          <Badge key={tag} variant="secondary" className="text-xs">
-                            <Tag size={12} className="mr-1" />
-                            {tag}
-                          </Badge>
-                        ))}
-                        {snippet.tags.length > 3 && (
-                          <Badge variant="secondary" className="text-xs">
-                            +{snippet.tags.length - 3}
-                          </Badge>
-                        )}
-                      </div>
-                      <div className="flex gap-2">
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          className="flex-1"
-                          onClick={(e) => {
-                            e.stopPropagation()
-                            handleCopySnippet(snippet)
-                          }}
-                        >
-                          {copiedId === snippet.id ? (
-                            <>
-                              <Check size={14} className="mr-1.5" />
-                              Copied
-                            </>
-                          ) : (
-                            <>
-                              <Copy size={14} className="mr-1.5" />
-                              Copy
-                            </>
-                          )}
-                        </Button>
-                        {onInsertSnippet && (
-                          <Button
-                            size="sm"
-                            className="flex-1"
-                            onClick={(e) => {
-                              e.stopPropagation()
-                              handleInsertSnippet(snippet)
-                            }}
-                          >
-                            <ArrowRight size={14} className="mr-1.5" />
-                            Insert
-                          </Button>
-                        )}
-                      </div>
-                    </CardContent>
-                  </Card>
-                ))
-              )}
-            </div>
-          </TabsContent>
-        ))}
+        <SnippetList
+          snippets={displayedSnippets}
+          searchQuery={searchQuery}
+          selectedCategory={selectedCategory}
+          onSelectSnippet={setSelectedSnippet}
+          onCopySnippet={handleCopySnippet}
+          onInsertSnippet={onInsertSnippet ? handleInsertSnippet : undefined}
+          copiedId={copiedId}
+        />
       </Tabs>
 
-      <Dialog open={!!selectedSnippet} onOpenChange={() => setSelectedSnippet(null)}>
-        <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
-          <DialogHeader>
-            <div className="flex items-start justify-between gap-4">
-              <div className="flex-1">
-                <DialogTitle className="text-xl mb-2">{selectedSnippet?.name}</DialogTitle>
-                <DialogDescription>{selectedSnippet?.description}</DialogDescription>
-              </div>
-              <Badge variant="outline">{selectedSnippet?.category}</Badge>
-            </div>
-          </DialogHeader>
-          
-          <div className="flex-1 overflow-auto space-y-4">
-            {selectedSnippet?.tags && selectedSnippet.tags.length > 0 && (
-              <div className="flex flex-wrap gap-2">
-                {selectedSnippet.tags.map((tag) => (
-                  <Badge key={tag} variant="secondary">
-                    <Tag size={12} className="mr-1" />
-                    {tag}
-                  </Badge>
-                ))}
-              </div>
-            )}
-
-            {selectedSnippet?.parameters && selectedSnippet.parameters.length > 0 && (
-              <div>
-                <h4 className="text-sm font-semibold mb-3 flex items-center gap-2">
-                  <Code size={16} />
-                  Parameters
-                </h4>
-                <div className="space-y-2">
-                  {selectedSnippet.parameters.map((param) => (
-                    <div key={param.name} className="bg-muted/50 rounded-lg p-3 border">
-                      <div className="flex items-center gap-2 mb-1">
-                        <code className="text-sm font-mono font-semibold text-primary">
-                          {param.name}
-                        </code>
-                        <Badge variant="outline" className="text-xs">
-                          {param.type}
-                        </Badge>
-                      </div>
-                      <p className="text-xs text-muted-foreground">{param.description}</p>
-                    </div>
-                  ))}
-                </div>
-              </div>
-            )}
-
-            <Separator />
-
-            <div>
-              <h4 className="text-sm font-semibold mb-3">Code</h4>
-              <div className="bg-slate-950 text-slate-50 rounded-lg p-4 overflow-x-auto">
-                <pre className="text-xs font-mono leading-relaxed">
-                  <code>{selectedSnippet?.code}</code>
-                </pre>
-              </div>
-            </div>
-
-            <div className="flex gap-2">
-              <Button
-                className="flex-1"
-                onClick={() => selectedSnippet && handleCopySnippet(selectedSnippet)}
-              >
-                {copiedId === selectedSnippet?.id ? (
-                  <>
-                    <Check size={16} className="mr-2" />
-                    Copied to Clipboard
-                  </>
-                ) : (
-                  <>
-                    <Copy size={16} className="mr-2" />
-                    Copy to Clipboard
-                  </>
-                )}
-              </Button>
-              {onInsertSnippet && (
-                <Button
-                  variant="secondary"
-                  className="flex-1"
-                  onClick={() => {
-                    if (selectedSnippet) {
-                      handleInsertSnippet(selectedSnippet)
-                      setSelectedSnippet(null)
-                    }
-                  }}
-                >
-                  <ArrowRight size={16} className="mr-2" />
-                  Insert into Editor
-                </Button>
-              )}
-            </div>
-          </div>
-        </DialogContent>
-      </Dialog>
+      <SnippetDialog
+        snippet={selectedSnippet}
+        copiedId={copiedId}
+        onCopy={handleCopySnippet}
+        onInsert={
+          onInsertSnippet
+            ? (snippet) => {
+                handleInsertSnippet(snippet)
+                setSelectedSnippet(null)
+              }
+            : undefined
+        }
+        onClose={() => setSelectedSnippet(null)}
+      />
     </div>
   )
 }
diff --git a/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary/SearchBar.tsx b/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary/SearchBar.tsx
new file mode 100644
index 000000000..5be89b841
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary/SearchBar.tsx
@@ -0,0 +1,44 @@
+import { MagnifyingGlass } from '@phosphor-icons/react'
+import { Input, ScrollArea, TabsList, TabsTrigger } from '@/components/ui'
+import { LUA_SNIPPET_CATEGORIES } from '@/lib/lua-snippets'
+
+interface SearchBarProps {
+  searchQuery: string
+  onSearchChange: (value: string) => void
+  selectedCategory: string
+  onCategoryChange: (category: string) => void
+}
+
+export function SearchBar({
+  searchQuery,
+  onSearchChange,
+  selectedCategory,
+  onCategoryChange,
+}: SearchBarProps) {
+  return (
+    <div className="space-y-4">
+      <div className="relative">
+        <MagnifyingGlass
+          size={18}
+          className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+        />
+        <Input
+          placeholder="Search snippets by name, description, or tags..."
+          value={searchQuery}
+          onChange={(e) => onSearchChange(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+
+      <ScrollArea className="w-full whitespace-nowrap">
+        <TabsList className="inline-flex w-auto">
+          {LUA_SNIPPET_CATEGORIES.map((category) => (
+            <TabsTrigger key={category} value={category} className="text-xs">
+              {category}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </ScrollArea>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary/SnippetDialog.tsx b/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary/SnippetDialog.tsx
new file mode 100644
index 000000000..0111ba403
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary/SnippetDialog.tsx
@@ -0,0 +1,116 @@
+import {
+  Badge,
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  Separator,
+} from '@/components/ui'
+import { ArrowRight, Check, Code, Copy, Tag } from '@phosphor-icons/react'
+import { type LuaSnippet } from '@/lib/lua-snippets'
+
+interface SnippetDialogProps {
+  snippet: LuaSnippet | null
+  copiedId: string | null
+  onCopy: (snippet: LuaSnippet) => void
+  onInsert?: (snippet: LuaSnippet) => void
+  onClose: () => void
+}
+
+export function SnippetDialog({
+  snippet,
+  copiedId,
+  onCopy,
+  onInsert,
+  onClose,
+}: SnippetDialogProps) {
+  return (
+    <Dialog open={!!snippet} onOpenChange={(isOpen) => !isOpen && onClose()}>
+      <DialogContent className="max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <div className="flex items-start justify-between gap-4">
+            <div className="flex-1">
+              <DialogTitle className="text-xl mb-2">{snippet?.name}</DialogTitle>
+              <DialogDescription>{snippet?.description}</DialogDescription>
+            </div>
+            <Badge variant="outline">{snippet?.category}</Badge>
+          </div>
+        </DialogHeader>
+
+        <div className="flex-1 overflow-auto space-y-4">
+          {snippet?.tags && snippet.tags.length > 0 && (
+            <div className="flex flex-wrap gap-2">
+              {snippet.tags.map((tag) => (
+                <Badge key={tag} variant="secondary">
+                  <Tag size={12} className="mr-1" />
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          )}
+
+          {snippet?.parameters && snippet.parameters.length > 0 && (
+            <div>
+              <h4 className="text-sm font-semibold mb-3 flex items-center gap-2">
+                <Code size={16} />
+                Parameters
+              </h4>
+              <div className="space-y-2">
+                {snippet.parameters.map((param) => (
+                  <div key={param.name} className="bg-muted/50 rounded-lg p-3 border">
+                    <div className="flex items-center gap-2 mb-1">
+                      <code className="text-sm font-mono font-semibold text-primary">{param.name}</code>
+                      <Badge variant="outline" className="text-xs">
+                        {param.type}
+                      </Badge>
+                    </div>
+                    <p className="text-xs text-muted-foreground">{param.description}</p>
+                  </div>
+                ))}
+              </div>
+            </div>
+          )}
+
+          <Separator />
+
+          <div>
+            <h4 className="text-sm font-semibold mb-3">Code</h4>
+            <div className="bg-slate-950 text-slate-50 rounded-lg p-4 overflow-x-auto">
+              <pre className="text-xs font-mono leading-relaxed">
+                <code>{snippet?.code}</code>
+              </pre>
+            </div>
+          </div>
+
+          <div className="flex gap-2">
+            <Button className="flex-1" onClick={() => snippet && onCopy(snippet)}>
+              {copiedId === snippet?.id ? (
+                <>
+                  <Check size={16} className="mr-2" />
+                  Copied to Clipboard
+                </>
+              ) : (
+                <>
+                  <Copy size={16} className="mr-2" />
+                  Copy to Clipboard
+                </>
+              )}
+            </Button>
+            {onInsert && (
+              <Button
+                variant="secondary"
+                className="flex-1"
+                onClick={() => snippet && onInsert(snippet)}
+              >
+                <ArrowRight size={16} className="mr-2" />
+                Insert into Editor
+              </Button>
+            )}
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary/SnippetList.tsx b/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary/SnippetList.tsx
new file mode 100644
index 000000000..8ddcf047d
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/lua/LuaSnippetLibrary/SnippetList.tsx
@@ -0,0 +1,125 @@
+import {
+  Badge,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  TabsContent,
+} from '@/components/ui'
+import { ArrowRight, Check, Code, Copy, Tag } from '@phosphor-icons/react'
+import { LUA_SNIPPET_CATEGORIES, type LuaSnippet } from '@/lib/lua-snippets'
+
+interface SnippetListProps {
+  snippets: LuaSnippet[]
+  searchQuery: string
+  selectedCategory: string
+  onSelectSnippet: (snippet: LuaSnippet) => void
+  onCopySnippet: (snippet: LuaSnippet) => void
+  onInsertSnippet?: (snippet: LuaSnippet) => void
+  copiedId: string | null
+}
+
+export function SnippetList({
+  snippets,
+  searchQuery,
+  selectedCategory,
+  onSelectSnippet,
+  onCopySnippet,
+  onInsertSnippet,
+  copiedId,
+}: SnippetListProps) {
+  return (
+    <>
+      {LUA_SNIPPET_CATEGORIES.map((category) => (
+        <TabsContent key={category} value={category} className="mt-6">
+          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+            {snippets.length === 0 ? (
+              <div className="col-span-full text-center py-12 text-muted-foreground">
+                <Code size={48} className="mx-auto mb-4 opacity-50" />
+                <p>No snippets found</p>
+                {searchQuery && <p className="text-sm mt-2">Try a different search term</p>}
+              </div>
+            ) : (
+              snippets.map((snippet) => (
+                <Card
+                  key={`${selectedCategory}-${snippet.id}`}
+                  className="hover:border-primary transition-colors cursor-pointer group"
+                  onClick={() => onSelectSnippet(snippet)}
+                >
+                  <CardHeader className="pb-3">
+                    <div className="flex items-start justify-between gap-2">
+                      <div className="flex-1 min-w-0">
+                        <CardTitle className="text-base font-semibold mb-1 truncate group-hover:text-primary transition-colors">
+                          {snippet.name}
+                        </CardTitle>
+                        <CardDescription className="text-xs line-clamp-2">
+                          {snippet.description}
+                        </CardDescription>
+                      </div>
+                      <Badge variant="outline" className="text-xs shrink-0">
+                        {snippet.category}
+                      </Badge>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="pt-0">
+                    <div className="flex flex-wrap gap-1.5 mb-3">
+                      {snippet.tags.slice(0, 3).map((tag) => (
+                        <Badge key={tag} variant="secondary" className="text-xs">
+                          <Tag size={12} className="mr-1" />
+                          {tag}
+                        </Badge>
+                      ))}
+                      {snippet.tags.length > 3 && (
+                        <Badge variant="secondary" className="text-xs">
+                          +{snippet.tags.length - 3}
+                        </Badge>
+                      )}
+                    </div>
+                    <div className="flex gap-2">
+                      <Button
+                        size="sm"
+                        variant="outline"
+                        className="flex-1"
+                        onClick={(e) => {
+                          e.stopPropagation()
+                          onCopySnippet(snippet)
+                        }}
+                      >
+                        {copiedId === snippet.id ? (
+                          <>
+                            <Check size={14} className="mr-1.5" />
+                            Copied
+                          </>
+                        ) : (
+                          <>
+                            <Copy size={14} className="mr-1.5" />
+                            Copy
+                          </>
+                        )}
+                      </Button>
+                      {onInsertSnippet && (
+                        <Button
+                          size="sm"
+                          className="flex-1"
+                          onClick={(e) => {
+                            e.stopPropagation()
+                            onInsertSnippet(snippet)
+                          }}
+                        >
+                          <ArrowRight size={14} className="mr-1.5" />
+                          Insert
+                        </Button>
+                      )}
+                    </div>
+                  </CardContent>
+                </Card>
+              ))
+            )}
+          </div>
+        </TabsContent>
+      ))}
+    </>
+  )
+}
diff --git a/frontends/nextjs/src/components/editors/lua/blocks/grouping.ts b/frontends/nextjs/src/components/editors/lua/blocks/grouping.ts
index 04143e9b2..786b6f586 100644
--- a/frontends/nextjs/src/components/editors/lua/blocks/grouping.ts
+++ b/frontends/nextjs/src/components/editors/lua/blocks/grouping.ts
@@ -1,14 +1,15 @@
 import type { BlockCategory, BlockDefinition } from '../types'
 
-export const groupBlockDefinitionsByCategory = (definitions: BlockDefinition[]) => {
-  const categories: Record<BlockCategory, BlockDefinition[]> = {
-    Basics: [],
-    Logic: [],
-    Loops: [],
-    Data: [],
-    Functions: [],
-  }
+const createCategoryIndex = (): Record<BlockCategory, BlockDefinition[]> => ({
+  Basics: [],
+  Logic: [],
+  Loops: [],
+  Data: [],
+  Functions: [],
+})
 
+export const groupBlockDefinitionsByCategory = (definitions: BlockDefinition[]) => {
+  const categories = createCategoryIndex()
   definitions.forEach((definition) => {
     categories[definition.category].push(definition)
   })
diff --git a/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlockEditorState.ts b/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlockEditorState.ts
new file mode 100644
index 000000000..618b5f491
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlockEditorState.ts
@@ -0,0 +1,26 @@
+import type { LuaScript } from '@/lib/level-types'
+import { useBlockDefinitions } from './useBlockDefinitions'
+import { useLuaBlocksState } from './useLuaBlocksState'
+
+interface UseLuaBlockEditorStateProps {
+  scripts: LuaScript[]
+  onScriptsChange: (scripts: LuaScript[]) => void
+}
+
+export function useLuaBlockEditorState({ scripts, onScriptsChange }: UseLuaBlockEditorStateProps) {
+  const blockDefinitionState = useBlockDefinitions()
+
+  const luaBlockState = useLuaBlocksState({
+    scripts,
+    onScriptsChange,
+    buildLuaFromBlocks: blockDefinitionState.buildLuaFromBlocks,
+    createBlock: blockDefinitionState.createBlock,
+    cloneBlock: blockDefinitionState.cloneBlock,
+    decodeBlocksMetadata: blockDefinitionState.decodeBlocksMetadata,
+  })
+
+  return {
+    ...blockDefinitionState,
+    ...luaBlockState,
+  }
+}
diff --git a/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState.ts b/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState.ts
index 4c671447b..4f844dd02 100644
--- a/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState.ts
+++ b/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState.ts
@@ -1,7 +1,8 @@
-import { useEffect, useMemo, useState, type MouseEvent } from 'react'
-import { toast } from 'sonner'
+import { useEffect, useMemo, useState } from 'react'
 import type { LuaScript } from '@/lib/level-types'
-import type { BlockSlot, LuaBlock, LuaBlockType } from '../types'
+import type { LuaBlock, LuaBlockType } from '../types'
+import { createLuaBlocksActions, type MenuTarget } from './useLuaBlocksState/actions'
+import { selectActiveBlocks, selectSelectedScript } from './useLuaBlocksState/selectors'
 
 interface UseLuaBlocksStateProps {
   scripts: LuaScript[]
@@ -12,108 +13,6 @@ interface UseLuaBlocksStateProps {
   decodeBlocksMetadata: (code: string) => LuaBlock[] | null
 }
 
-interface MenuTarget {
-  parentId: string | null
-  slot: BlockSlot
-}
-
-const addBlockToTree = (
-  blocks: LuaBlock[],
-  parentId: string | null,
-  slot: BlockSlot,
-  newBlock: LuaBlock
-): LuaBlock[] => {
-  if (slot === 'root' || !parentId) {
-    return [...blocks, newBlock]
-  }
-
-  return blocks.map((block) => {
-    if (block.id === parentId) {
-      const current = slot === 'children' ? block.children ?? [] : block.elseChildren ?? []
-      const updated = [...current, newBlock]
-      if (slot === 'children') {
-        return { ...block, children: updated }
-      }
-      return { ...block, elseChildren: updated }
-    }
-
-    const children = block.children ? addBlockToTree(block.children, parentId, slot, newBlock) : block.children
-    const elseChildren = block.elseChildren
-      ? addBlockToTree(block.elseChildren, parentId, slot, newBlock)
-      : block.elseChildren
-
-    if (children !== block.children || elseChildren !== block.elseChildren) {
-      return { ...block, children, elseChildren }
-    }
-
-    return block
-  })
-}
-
-const updateBlockInTree = (
-  blocks: LuaBlock[],
-  blockId: string,
-  updater: (block: LuaBlock) => LuaBlock
-): LuaBlock[] =>
-  blocks.map((block) => {
-    if (block.id === blockId) {
-      return updater(block)
-    }
-
-    const children = block.children ? updateBlockInTree(block.children, blockId, updater) : block.children
-    const elseChildren = block.elseChildren
-      ? updateBlockInTree(block.elseChildren, blockId, updater)
-      : block.elseChildren
-
-    if (children !== block.children || elseChildren !== block.elseChildren) {
-      return { ...block, children, elseChildren }
-    }
-
-    return block
-  })
-
-const removeBlockFromTree = (blocks: LuaBlock[], blockId: string): LuaBlock[] =>
-  blocks
-    .filter((block) => block.id !== blockId)
-    .map((block) => {
-      const children = block.children ? removeBlockFromTree(block.children, blockId) : block.children
-      const elseChildren = block.elseChildren
-        ? removeBlockFromTree(block.elseChildren, blockId)
-        : block.elseChildren
-
-      if (children !== block.children || elseChildren !== block.elseChildren) {
-        return { ...block, children, elseChildren }
-      }
-
-      return block
-    })
-
-const moveBlockInTree = (blocks: LuaBlock[], blockId: string, direction: 'up' | 'down'): LuaBlock[] => {
-  const index = blocks.findIndex((block) => block.id === blockId)
-  if (index !== -1) {
-    const targetIndex = direction === 'up' ? index - 1 : index + 1
-    if (targetIndex < 0 || targetIndex >= blocks.length) return blocks
-
-    const updated = [...blocks]
-    const [moved] = updated.splice(index, 1)
-    updated.splice(targetIndex, 0, moved)
-    return updated
-  }
-
-  return blocks.map((block) => {
-    const children = block.children ? moveBlockInTree(block.children, blockId, direction) : block.children
-    const elseChildren = block.elseChildren
-      ? moveBlockInTree(block.elseChildren, blockId, direction)
-      : block.elseChildren
-
-    if (children !== block.children || elseChildren !== block.elseChildren) {
-      return { ...block, children, elseChildren }
-    }
-
-    return block
-  })
-}
-
 export function useLuaBlocksState({
   scripts,
   onScriptsChange,
@@ -156,178 +55,35 @@ export function useLuaBlocksState({
     }))
   }, [blocksByScript, decodeBlocksMetadata, scripts, selectedScriptId])
 
-  const selectedScript = scripts.find((script) => script.id === selectedScriptId) || null
-  const activeBlocks = selectedScriptId ? blocksByScript[selectedScriptId] || [] : []
+  const selectedScript = selectSelectedScript(scripts, selectedScriptId)
+  const activeBlocks = selectActiveBlocks(blocksByScript, selectedScriptId)
   const generatedCode = useMemo(() => buildLuaFromBlocks(activeBlocks), [activeBlocks, buildLuaFromBlocks])
 
-  const handleAddScript = () => {
-    const starterBlocks = [createBlock('log')]
-    const newScript: LuaScript = {
-      id: `lua_${Date.now()}`,
-      name: 'Block Script',
-      description: 'Built with Lua blocks',
-      code: buildLuaFromBlocks(starterBlocks),
-      parameters: [],
-    }
-
-    onScriptsChange([...scripts, newScript])
-    setBlocksByScript((prev) => ({ ...prev, [newScript.id]: starterBlocks }))
-    setSelectedScriptId(newScript.id)
-    toast.success('Block script created')
-  }
-
-  const handleDeleteScript = (scriptId: string) => {
-    const remaining = scripts.filter((script) => script.id !== scriptId)
-    onScriptsChange(remaining)
-
-    setBlocksByScript((prev) => {
-      const { [scriptId]: _, ...rest } = prev
-      return rest
-    })
-
-    if (selectedScriptId === scriptId) {
-      setSelectedScriptId(remaining.length > 0 ? remaining[0].id : null)
-    }
-
-    toast.success('Script deleted')
-  }
-
-  const handleUpdateScript = (updates: Partial<LuaScript>) => {
-    if (!selectedScript) return
-    onScriptsChange(
-      scripts.map((script) => (script.id === selectedScript.id ? { ...script, ...updates } : script))
-    )
-  }
-
-  const handleApplyCode = () => {
-    if (!selectedScript) return
-    handleUpdateScript({ code: generatedCode })
-    toast.success('Lua code updated from blocks')
-  }
-
-  const handleCopyCode = async () => {
-    try {
-      await navigator.clipboard.writeText(generatedCode)
-      toast.success('Lua code copied to clipboard')
-    } catch (error) {
-      toast.error('Unable to copy code')
-    }
-  }
-
-  const handleReloadFromCode = () => {
-    if (!selectedScript) return
-    const parsed = decodeBlocksMetadata(selectedScript.code)
-    if (!parsed) {
-      toast.warning('No block metadata found in this script')
-      return
-    }
-    setBlocksByScript((prev) => ({ ...prev, [selectedScript.id]: parsed }))
-    toast.success('Blocks loaded from script')
-  }
-
-  const handleRequestAddBlock = (
-    event: MouseEvent<HTMLElement>,
-    target: { parentId: string | null; slot: BlockSlot }
-  ) => {
-    setMenuAnchor(event.currentTarget)
-    setMenuTarget(target)
-  }
-
-  const handleAddBlock = (type: LuaBlockType, target?: { parentId: string | null; slot: BlockSlot }) => {
-    const resolvedTarget = target ?? menuTarget
-    if (!selectedScriptId || !resolvedTarget) return
-
-    const newBlock = createBlock(type)
-    setBlocksByScript((prev) => ({
-      ...prev,
-      [selectedScriptId]: addBlockToTree(
-        prev[selectedScriptId] || [],
-        resolvedTarget.parentId,
-        resolvedTarget.slot,
-        newBlock
-      ),
-    }))
-
-    setMenuAnchor(null)
-    setMenuTarget(null)
-  }
-
-  const handleCloseMenu = () => {
-    setMenuAnchor(null)
-    setMenuTarget(null)
-  }
-
-  const handleUpdateField = (blockId: string, fieldName: string, value: string) => {
-    if (!selectedScriptId) return
-    setBlocksByScript((prev) => ({
-      ...prev,
-      [selectedScriptId]: updateBlockInTree(prev[selectedScriptId] || [], blockId, (block) => ({
-        ...block,
-        fields: {
-          ...block.fields,
-          [fieldName]: value,
-        },
-      })),
-    }))
-  }
-
-  const handleRemoveBlock = (blockId: string) => {
-    if (!selectedScriptId) return
-    setBlocksByScript((prev) => ({
-      ...prev,
-      [selectedScriptId]: removeBlockFromTree(prev[selectedScriptId] || [], blockId),
-    }))
-  }
-
-  const handleDuplicateBlock = (blockId: string) => {
-    if (!selectedScriptId) return
-
-    setBlocksByScript((prev) => {
-      const blocks = prev[selectedScriptId] || []
-      let duplicated: LuaBlock | null = null
-
-      const updated = updateBlockInTree(blocks, blockId, (block) => {
-        duplicated = cloneBlock(block)
-        return block
-      })
-
-      if (!duplicated) return prev
-
-      return {
-        ...prev,
-        [selectedScriptId]: addBlockToTree(updated, null, 'root', duplicated),
-      }
-    })
-  }
-
-  const handleMoveBlock = (blockId: string, direction: 'up' | 'down') => {
-    if (!selectedScriptId) return
-    setBlocksByScript((prev) => ({
-      ...prev,
-      [selectedScriptId]: moveBlockInTree(prev[selectedScriptId] || [], blockId, direction),
-    }))
-  }
+  const actions = createLuaBlocksActions({
+    scripts,
+    selectedScript,
+    selectedScriptId,
+    generatedCode,
+    menuTarget,
+    buildLuaFromBlocks,
+    createBlock,
+    cloneBlock,
+    decodeBlocksMetadata,
+    onScriptsChange,
+    setBlocksByScript,
+    setMenuAnchor,
+    setMenuTarget,
+    setSelectedScriptId,
+  })
 
   return {
     activeBlocks,
     generatedCode,
-    handleAddBlock,
-    handleAddScript,
-    handleApplyCode,
-    handleCloseMenu,
-    handleCopyCode,
-    handleDeleteScript,
-    handleDuplicateBlock,
-    handleMoveBlock,
-    handleReloadFromCode,
-    handleRemoveBlock,
-    handleRequestAddBlock,
-    handleUpdateField,
-    handleUpdateScript,
     menuAnchor,
     menuTarget,
     selectedScript,
     selectedScriptId,
     setSelectedScriptId,
+    ...actions,
   }
 }
diff --git a/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState/actions.ts b/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState/actions.ts
new file mode 100644
index 000000000..f03cce58a
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState/actions.ts
@@ -0,0 +1,208 @@
+import type { Dispatch, MouseEvent, SetStateAction } from 'react'
+import { toast } from 'sonner'
+import type { LuaScript } from '@/lib/level-types'
+import type { BlockSlot, LuaBlock, LuaBlockType } from '../../types'
+import { addBlockToTree, moveBlockInTree, removeBlockFromTree, updateBlockInTree } from './storage'
+
+export interface MenuTarget {
+  parentId: string | null
+  slot: BlockSlot
+}
+
+interface LuaBlocksActionConfig {
+  scripts: LuaScript[]
+  selectedScript: LuaScript | null
+  selectedScriptId: string | null
+  generatedCode: string
+  menuTarget: MenuTarget | null
+  buildLuaFromBlocks: (blocks: LuaBlock[]) => string
+  createBlock: (type: LuaBlockType) => LuaBlock
+  cloneBlock: (block: LuaBlock) => LuaBlock
+  decodeBlocksMetadata: (code: string) => LuaBlock[] | null
+  onScriptsChange: (scripts: LuaScript[]) => void
+  setBlocksByScript: Dispatch<SetStateAction<Record<string, LuaBlock[]>>>
+  setMenuAnchor: Dispatch<SetStateAction<HTMLElement | null>>
+  setMenuTarget: Dispatch<SetStateAction<MenuTarget | null>>
+  setSelectedScriptId: Dispatch<SetStateAction<string | null>>
+}
+
+export const createLuaBlocksActions = ({
+  scripts,
+  selectedScript,
+  selectedScriptId,
+  generatedCode,
+  menuTarget,
+  buildLuaFromBlocks,
+  createBlock,
+  cloneBlock,
+  decodeBlocksMetadata,
+  onScriptsChange,
+  setBlocksByScript,
+  setMenuAnchor,
+  setMenuTarget,
+  setSelectedScriptId,
+}: LuaBlocksActionConfig) => {
+  const handleAddScript = () => {
+    const starterBlocks = [createBlock('log')]
+    const newScript: LuaScript = {
+      id: `lua_${Date.now()}`,
+      name: 'Block Script',
+      description: 'Built with Lua blocks',
+      code: buildLuaFromBlocks(starterBlocks),
+      parameters: [],
+    }
+
+    onScriptsChange([...scripts, newScript])
+    setBlocksByScript((prev) => ({ ...prev, [newScript.id]: starterBlocks }))
+    setSelectedScriptId(newScript.id)
+    toast.success('Block script created')
+  }
+
+  const handleDeleteScript = (scriptId: string) => {
+    const remaining = scripts.filter((script) => script.id !== scriptId)
+    onScriptsChange(remaining)
+
+    setBlocksByScript((prev) => {
+      const { [scriptId]: _, ...rest } = prev
+      return rest
+    })
+
+    if (selectedScriptId === scriptId) {
+      setSelectedScriptId(remaining.length > 0 ? remaining[0].id : null)
+    }
+
+    toast.success('Script deleted')
+  }
+
+  const handleUpdateScript = (updates: Partial<LuaScript>) => {
+    if (!selectedScript) return
+    onScriptsChange(
+      scripts.map((script) => (script.id === selectedScript.id ? { ...script, ...updates } : script))
+    )
+  }
+
+  const handleApplyCode = () => {
+    if (!selectedScript) return
+    handleUpdateScript({ code: generatedCode })
+    toast.success('Lua code updated from blocks')
+  }
+
+  const handleCopyCode = async () => {
+    try {
+      await navigator.clipboard.writeText(generatedCode)
+      toast.success('Lua code copied to clipboard')
+    } catch (error) {
+      toast.error('Unable to copy code')
+    }
+  }
+
+  const handleReloadFromCode = () => {
+    if (!selectedScript) return
+    const parsed = decodeBlocksMetadata(selectedScript.code)
+    if (!parsed) {
+      toast.warning('No block metadata found in this script')
+      return
+    }
+    setBlocksByScript((prev) => ({ ...prev, [selectedScript.id]: parsed }))
+    toast.success('Blocks loaded from script')
+  }
+
+  const handleRequestAddBlock = (
+    event: MouseEvent<HTMLElement>,
+    target: { parentId: string | null; slot: BlockSlot }
+  ) => {
+    setMenuAnchor(event.currentTarget)
+    setMenuTarget(target)
+  }
+
+  const handleAddBlock = (type: LuaBlockType, target?: MenuTarget) => {
+    const resolvedTarget = target ?? menuTarget
+    if (!selectedScriptId || !resolvedTarget) return
+
+    const newBlock = createBlock(type)
+    setBlocksByScript((prev) => ({
+      ...prev,
+      [selectedScriptId]: addBlockToTree(
+        prev[selectedScriptId] || [],
+        resolvedTarget.parentId,
+        resolvedTarget.slot,
+        newBlock
+      ),
+    }))
+
+    setMenuAnchor(null)
+    setMenuTarget(null)
+  }
+
+  const handleCloseMenu = () => {
+    setMenuAnchor(null)
+    setMenuTarget(null)
+  }
+
+  const handleUpdateField = (blockId: string, fieldName: string, value: string) => {
+    if (!selectedScriptId) return
+    setBlocksByScript((prev) => ({
+      ...prev,
+      [selectedScriptId]: updateBlockInTree(prev[selectedScriptId] || [], blockId, (block) => ({
+        ...block,
+        fields: {
+          ...block.fields,
+          [fieldName]: value,
+        },
+      })),
+    }))
+  }
+
+  const handleRemoveBlock = (blockId: string) => {
+    if (!selectedScriptId) return
+    setBlocksByScript((prev) => ({
+      ...prev,
+      [selectedScriptId]: removeBlockFromTree(prev[selectedScriptId] || [], blockId),
+    }))
+  }
+
+  const handleDuplicateBlock = (blockId: string) => {
+    if (!selectedScriptId) return
+
+    setBlocksByScript((prev) => {
+      const blocks = prev[selectedScriptId] || []
+      let duplicated: LuaBlock | null = null
+
+      const updated = updateBlockInTree(blocks, blockId, (block) => {
+        duplicated = cloneBlock(block)
+        return block
+      })
+
+      if (!duplicated) return prev
+
+      return {
+        ...prev,
+        [selectedScriptId]: addBlockToTree(updated, null, 'root', duplicated),
+      }
+    })
+  }
+
+  const handleMoveBlock = (blockId: string, direction: 'up' | 'down') => {
+    if (!selectedScriptId) return
+    setBlocksByScript((prev) => ({
+      ...prev,
+      [selectedScriptId]: moveBlockInTree(prev[selectedScriptId] || [], blockId, direction),
+    }))
+  }
+
+  return {
+    handleAddBlock,
+    handleAddScript,
+    handleApplyCode,
+    handleCloseMenu,
+    handleCopyCode,
+    handleDeleteScript,
+    handleDuplicateBlock,
+    handleMoveBlock,
+    handleReloadFromCode,
+    handleRemoveBlock,
+    handleRequestAddBlock,
+    handleUpdateField,
+    handleUpdateScript,
+  }
+}
diff --git a/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState/selectors.ts b/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState/selectors.ts
new file mode 100644
index 000000000..a669f3f78
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState/selectors.ts
@@ -0,0 +1,12 @@
+import type { LuaScript } from '@/lib/level-types'
+import type { LuaBlock } from '../../types'
+
+export const selectSelectedScript = (
+  scripts: LuaScript[],
+  selectedScriptId: string | null
+): LuaScript | null => scripts.find((script) => script.id === selectedScriptId) || null
+
+export const selectActiveBlocks = (
+  blocksByScript: Record<string, LuaBlock[]>,
+  selectedScriptId: string | null
+): LuaBlock[] => (selectedScriptId ? blocksByScript[selectedScriptId] || [] : [])
diff --git a/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState/storage.ts b/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState/storage.ts
new file mode 100644
index 000000000..c26c7a31b
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/lua/hooks/useLuaBlocksState/storage.ts
@@ -0,0 +1,98 @@
+import type { BlockSlot, LuaBlock } from '../../types'
+
+export const addBlockToTree = (
+  blocks: LuaBlock[],
+  parentId: string | null,
+  slot: BlockSlot,
+  newBlock: LuaBlock
+): LuaBlock[] => {
+  if (slot === 'root' || !parentId) {
+    return [...blocks, newBlock]
+  }
+
+  return blocks.map((block) => {
+    if (block.id === parentId) {
+      const current = slot === 'children' ? block.children ?? [] : block.elseChildren ?? []
+      const updated = [...current, newBlock]
+      if (slot === 'children') {
+        return { ...block, children: updated }
+      }
+      return { ...block, elseChildren: updated }
+    }
+
+    const children = block.children ? addBlockToTree(block.children, parentId, slot, newBlock) : block.children
+    const elseChildren = block.elseChildren
+      ? addBlockToTree(block.elseChildren, parentId, slot, newBlock)
+      : block.elseChildren
+
+    if (children !== block.children || elseChildren !== block.elseChildren) {
+      return { ...block, children, elseChildren }
+    }
+
+    return block
+  })
+}
+
+export const updateBlockInTree = (
+  blocks: LuaBlock[],
+  blockId: string,
+  updater: (block: LuaBlock) => LuaBlock
+): LuaBlock[] =>
+  blocks.map((block) => {
+    if (block.id === blockId) {
+      return updater(block)
+    }
+
+    const children = block.children ? updateBlockInTree(block.children, blockId, updater) : block.children
+    const elseChildren = block.elseChildren
+      ? updateBlockInTree(block.elseChildren, blockId, updater)
+      : block.elseChildren
+
+    if (children !== block.children || elseChildren !== block.elseChildren) {
+      return { ...block, children, elseChildren }
+    }
+
+    return block
+  })
+
+export const removeBlockFromTree = (blocks: LuaBlock[], blockId: string): LuaBlock[] =>
+  blocks
+    .filter((block) => block.id !== blockId)
+    .map((block) => {
+      const children = block.children ? removeBlockFromTree(block.children, blockId) : block.children
+      const elseChildren = block.elseChildren
+        ? removeBlockFromTree(block.elseChildren, blockId)
+        : block.elseChildren
+
+      if (children !== block.children || elseChildren !== block.elseChildren) {
+        return { ...block, children, elseChildren }
+      }
+
+      return block
+    })
+
+export const moveBlockInTree = (blocks: LuaBlock[], blockId: string, direction: 'up' | 'down'): LuaBlock[] => {
+  const index = blocks.findIndex((block) => block.id === blockId)
+  if (index !== -1) {
+    const targetIndex = direction === 'up' ? index - 1 : index + 1
+    if (targetIndex < 0 || targetIndex >= blocks.length) return blocks
+
+    const updated = [...blocks]
+    const [moved] = updated.splice(index, 1)
+    updated.splice(targetIndex, 0, moved)
+    return updated
+  }
+
+  return blocks.map((block) => {
+    const children = block.children ? moveBlockInTree(block.children, blockId, direction) : block.children
+    const elseChildren = block.elseChildren
+      ? moveBlockInTree(block.elseChildren, blockId, direction)
+      : block.elseChildren
+
+    if (children !== block.children || elseChildren !== block.elseChildren) {
+      return { ...block, children, elseChildren }
+    }
+
+    return block
+  })
+}
diff --git a/frontends/nextjs/src/components/editors/schema/SchemaEditorLevel4.tsx b/frontends/nextjs/src/components/editors/schema/SchemaEditorLevel4.tsx
index f6a56a682..7acbee432 100644
--- a/frontends/nextjs/src/components/editors/schema/SchemaEditorLevel4.tsx
+++ b/frontends/nextjs/src/components/editors/schema/SchemaEditorLevel4.tsx
@@ -1,19 +1,9 @@
-import { useState } from 'react'
 import { Button } from '@/components/ui'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Label } from '@/components/ui'
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui'
-import { Switch } from '@/components/ui'
+import { SchemaTabs } from '@/components/schema/level4/Tabs'
+import { useSchemaLevel4 } from '@/components/schema/level4/useSchemaLevel4'
+import type { ModelSchema } from '@/lib/schema-types'
 import { Plus, Trash } from '@phosphor-icons/react'
-import { toast } from 'sonner'
-import type { ModelSchema, FieldSchema, FieldType } from '@/lib/schema-types'
 
 interface SchemaEditorLevel4Props {
   schemas: ModelSchema[]
@@ -21,74 +11,17 @@ interface SchemaEditorLevel4Props {
 }
 
 export function SchemaEditorLevel4({ schemas, onSchemasChange }: SchemaEditorLevel4Props) {
-  const [selectedModel, setSelectedModel] = useState<string | null>(
-    schemas.length > 0 ? schemas[0].name : null
-  )
-
-  const currentModel = schemas.find(s => s.name === selectedModel)
-
-  const handleAddModel = () => {
-    const newModel: ModelSchema = {
-      name: `Model_${Date.now()}`,
-      label: 'New Model',
-      fields: [],
-    }
-    onSchemasChange([...schemas, newModel])
-    setSelectedModel(newModel.name)
-    toast.success('Model created')
-  }
-
-  const handleDeleteModel = (modelName: string) => {
-    onSchemasChange(schemas.filter(s => s.name !== modelName))
-    if (selectedModel === modelName) {
-      setSelectedModel(schemas.length > 1 ? schemas[0].name : null)
-    }
-    toast.success('Model deleted')
-  }
-
-  const handleUpdateModel = (updates: Partial<ModelSchema>) => {
-    if (!currentModel) return
-    
-    onSchemasChange(
-      schemas.map(s => s.name === selectedModel ? { ...s, ...updates } : s)
-    )
-  }
-
-  const handleAddField = () => {
-    if (!currentModel) return
-
-    const newField: FieldSchema = {
-      name: `field_${Date.now()}`,
-      type: 'string',
-      label: 'New Field',
-      required: false,
-      editable: true,
-    }
-
-    handleUpdateModel({
-      fields: [...currentModel.fields, newField],
-    })
-    toast.success('Field added')
-  }
-
-  const handleDeleteField = (fieldName: string) => {
-    if (!currentModel) return
-
-    handleUpdateModel({
-      fields: currentModel.fields.filter(f => f.name !== fieldName),
-    })
-    toast.success('Field deleted')
-  }
-
-  const handleUpdateField = (fieldName: string, updates: Partial<FieldSchema>) => {
-    if (!currentModel) return
-
-    handleUpdateModel({
-      fields: currentModel.fields.map(f =>
-        f.name === fieldName ? { ...f, ...updates } : f
-      ),
-    })
-  }
+  const {
+    currentModel,
+    selectedModel,
+    selectModel,
+    handleAddField,
+    handleAddModel,
+    handleDeleteField,
+    handleDeleteModel,
+    handleUpdateField,
+    handleUpdateModel,
+  } = useSchemaLevel4({ schemas, onSchemasChange })
 
   return (
     <div className="grid md:grid-cols-3 gap-6 h-full">
@@ -117,7 +50,7 @@ export function SchemaEditorLevel4({ schemas, onSchemasChange }: SchemaEditorLev
                       ? 'bg-accent border-accent-foreground'
                       : 'hover:bg-muted border-border'
                   }`}
-                  onClick={() => setSelectedModel(schema.name)}
+                  onClick={() => selectModel(schema.name)}
                 >
                   <div>
                     <div className="font-medium text-sm">{schema.label || schema.name}</div>
@@ -150,179 +83,13 @@ export function SchemaEditorLevel4({ schemas, onSchemasChange }: SchemaEditorLev
             </div>
           </CardContent>
         ) : (
-          <>
-            <CardHeader>
-              <CardTitle>Edit Model: {currentModel.label}</CardTitle>
-              <CardDescription>Configure model properties and fields</CardDescription>
-            </CardHeader>
-            <CardContent className="space-y-6">
-              <div className="grid gap-4 md:grid-cols-2">
-                <div className="space-y-2">
-                  <Label>Model Name (ID)</Label>
-                  <Input
-                    value={currentModel.name}
-                    onChange={(e) => handleUpdateModel({ name: e.target.value })}
-                    placeholder="user_model"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label>Display Label</Label>
-                  <Input
-                    value={currentModel.label || ''}
-                    onChange={(e) => handleUpdateModel({ label: e.target.value })}
-                    placeholder="User"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label>Plural Label</Label>
-                  <Input
-                    value={currentModel.labelPlural || ''}
-                    onChange={(e) => handleUpdateModel({ labelPlural: e.target.value })}
-                    placeholder="Users"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label>Icon Name</Label>
-                  <Input
-                    value={currentModel.icon || ''}
-                    onChange={(e) => handleUpdateModel({ icon: e.target.value })}
-                    placeholder="Users"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <div className="flex items-center justify-between mb-4">
-                  <Label className="text-base">Fields</Label>
-                  <Button size="sm" onClick={handleAddField}>
-                    <Plus className="mr-2" size={16} />
-                    Add Field
-                  </Button>
-                </div>
-
-                <div className="space-y-4">
-                  {currentModel.fields.length === 0 ? (
-                    <p className="text-sm text-muted-foreground text-center py-8 border border-dashed rounded-lg">
-                      No fields yet. Add a field to start.
-                    </p>
-                  ) : (
-                    currentModel.fields.map((field) => (
-                      <Card key={field.name} className="border-2">
-                        <CardContent className="pt-6 space-y-4">
-                          <div className="flex items-start justify-between gap-4">
-                            <div className="grid gap-4 md:grid-cols-2 flex-1">
-                              <div className="space-y-2">
-                                <Label className="text-xs">Field Name</Label>
-                                <Input
-                                  value={field.name}
-                                  onChange={(e) =>
-                                    handleUpdateField(field.name, { name: e.target.value })
-                                  }
-                                  placeholder="email"
-                                />
-                              </div>
-                              <div className="space-y-2">
-                                <Label className="text-xs">Label</Label>
-                                <Input
-                                  value={field.label || ''}
-                                  onChange={(e) =>
-                                    handleUpdateField(field.name, { label: e.target.value })
-                                  }
-                                  placeholder="Email Address"
-                                />
-                              </div>
-                              <div className="space-y-2">
-                                <Label className="text-xs">Type</Label>
-                                <Select
-                                  value={field.type}
-                                  onValueChange={(value) =>
-                                    handleUpdateField(field.name, { type: value as FieldType })
-                                  }
-                                >
-                                  <SelectTrigger>
-                                    <SelectValue />
-                                  </SelectTrigger>
-                                  <SelectContent>
-                                    <SelectItem value="string">String</SelectItem>
-                                    <SelectItem value="text">Text</SelectItem>
-                                    <SelectItem value="number">Number</SelectItem>
-                                    <SelectItem value="boolean">Boolean</SelectItem>
-                                    <SelectItem value="date">Date</SelectItem>
-                                    <SelectItem value="datetime">DateTime</SelectItem>
-                                    <SelectItem value="email">Email</SelectItem>
-                                    <SelectItem value="url">URL</SelectItem>
-                                    <SelectItem value="select">Select</SelectItem>
-                                    <SelectItem value="relation">Relation</SelectItem>
-                                    <SelectItem value="json">JSON</SelectItem>
-                                  </SelectContent>
-                                </Select>
-                              </div>
-                              <div className="space-y-2">
-                                <Label className="text-xs">Default Value</Label>
-                                <Input
-                                  value={field.default || ''}
-                                  onChange={(e) =>
-                                    handleUpdateField(field.name, { default: e.target.value })
-                                  }
-                                  placeholder="Default"
-                                />
-                              </div>
-                            </div>
-                            <Button
-                              variant="ghost"
-                              size="sm"
-                              onClick={() => handleDeleteField(field.name)}
-                            >
-                              <Trash size={16} />
-                            </Button>
-                          </div>
-
-                          <div className="flex gap-6">
-                            <div className="flex items-center gap-2">
-                              <Switch
-                                checked={field.required || false}
-                                onCheckedChange={(checked) =>
-                                  handleUpdateField(field.name, { required: checked })
-                                }
-                              />
-                              <Label className="text-xs">Required</Label>
-                            </div>
-                            <div className="flex items-center gap-2">
-                              <Switch
-                                checked={field.unique || false}
-                                onCheckedChange={(checked) =>
-                                  handleUpdateField(field.name, { unique: checked })
-                                }
-                              />
-                              <Label className="text-xs">Unique</Label>
-                            </div>
-                            <div className="flex items-center gap-2">
-                              <Switch
-                                checked={field.editable !== false}
-                                onCheckedChange={(checked) =>
-                                  handleUpdateField(field.name, { editable: checked })
-                                }
-                              />
-                              <Label className="text-xs">Editable</Label>
-                            </div>
-                            <div className="flex items-center gap-2">
-                              <Switch
-                                checked={field.searchable || false}
-                                onCheckedChange={(checked) =>
-                                  handleUpdateField(field.name, { searchable: checked })
-                                }
-                              />
-                              <Label className="text-xs">Searchable</Label>
-                            </div>
-                          </div>
-                        </CardContent>
-                      </Card>
-                    ))
-                  )}
-                </div>
-              </div>
-            </CardContent>
-          </>
+          <SchemaTabs
+            currentModel={currentModel}
+            onUpdateModel={handleUpdateModel}
+            onAddField={handleAddField}
+            onDeleteField={handleDeleteField}
+            onUpdateField={handleUpdateField}
+          />
         )}
       </Card>
     </div>
diff --git a/frontends/nextjs/src/components/editors/theme/PaletteEditor.tsx b/frontends/nextjs/src/components/editors/theme/PaletteEditor.tsx
new file mode 100644
index 000000000..2950b135b
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/theme/PaletteEditor.tsx
@@ -0,0 +1,86 @@
+import { Input, Label } from '@/components/ui'
+import { ThemeColors } from './types'
+
+const colorGroups = [
+  {
+    title: 'Base Colors',
+    colors: [
+      { key: 'background' as const, label: 'Background' },
+      { key: 'foreground' as const, label: 'Foreground' },
+      { key: 'card' as const, label: 'Card' },
+      { key: 'cardForeground' as const, label: 'Card Foreground' },
+    ],
+  },
+  {
+    title: 'Action Colors',
+    colors: [
+      { key: 'primary' as const, label: 'Primary' },
+      { key: 'primaryForeground' as const, label: 'Primary Foreground' },
+      { key: 'secondary' as const, label: 'Secondary' },
+      { key: 'secondaryForeground' as const, label: 'Secondary Foreground' },
+      { key: 'accent' as const, label: 'Accent' },
+      { key: 'accentForeground' as const, label: 'Accent Foreground' },
+      { key: 'destructive' as const, label: 'Destructive' },
+      { key: 'destructiveForeground' as const, label: 'Destructive Foreground' },
+    ],
+  },
+  {
+    title: 'Supporting Colors',
+    colors: [
+      { key: 'muted' as const, label: 'Muted' },
+      { key: 'mutedForeground' as const, label: 'Muted Foreground' },
+      { key: 'border' as const, label: 'Border' },
+      { key: 'input' as const, label: 'Input' },
+      { key: 'ring' as const, label: 'Ring' },
+    ],
+  },
+]
+
+interface PaletteEditorProps {
+  colors: ThemeColors
+  radius: string
+  onColorChange: (colorKey: keyof ThemeColors, value: string) => void
+  onRadiusChange: (value: string) => void
+}
+
+export function PaletteEditor({ colors, radius, onColorChange, onRadiusChange }: PaletteEditorProps) {
+  return (
+    <div className="space-y-6 mt-6">
+      <div className="space-y-4">
+        <div>
+          <Label htmlFor="radius">Border Radius</Label>
+          <Input
+            id="radius"
+            value={radius}
+            onChange={(e) => onRadiusChange(e.target.value)}
+            placeholder="e.g., 0.5rem"
+            className="mt-1.5"
+          />
+        </div>
+      </div>
+
+      {colorGroups.map((group) => (
+        <div key={group.title} className="space-y-4">
+          <h3 className="text-sm font-semibold text-foreground">{group.title}</h3>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            {group.colors.map(({ key, label }) => (
+              <div key={key} className="space-y-1.5">
+                <Label htmlFor={key}>{label}</Label>
+                <div className="flex gap-2">
+                  <div className="w-10 h-10 rounded border border-border shrink-0" style={{ background: colors[key] }} />
+                  <Input
+                    id={key}
+                    value={colors[key]}
+                    onChange={(e) => onColorChange(key, e.target.value)}
+                    placeholder="oklch(...)"
+                    className="font-mono text-sm"
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/editors/theme/PreviewPane.tsx b/frontends/nextjs/src/components/editors/theme/PreviewPane.tsx
new file mode 100644
index 000000000..795ccf45d
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/theme/PreviewPane.tsx
@@ -0,0 +1,33 @@
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
+import { Button } from '@/components/ui'
+
+export function PreviewPane() {
+  return (
+    <div className="mt-6 p-4 border border-border rounded-lg bg-muted/30">
+      <h4 className="text-sm font-semibold mb-3">Theme Preview</h4>
+      <div className="space-y-3">
+        <div className="flex gap-2">
+          <Button size="sm">Primary Button</Button>
+          <Button size="sm" variant="secondary">
+            Secondary
+          </Button>
+          <Button size="sm" variant="outline">
+            Outline
+          </Button>
+          <Button size="sm" variant="destructive">
+            Destructive
+          </Button>
+        </div>
+        <Card>
+          <CardHeader>
+            <CardTitle>Card Example</CardTitle>
+            <CardDescription>This is a card description</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <p className="text-sm text-muted-foreground">Card content with muted text</p>
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/editors/theme/constants.ts b/frontends/nextjs/src/components/editors/theme/constants.ts
new file mode 100644
index 000000000..7e7b8f8b2
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/theme/constants.ts
@@ -0,0 +1,41 @@
+import { ThemeColors } from './types'
+
+export const DEFAULT_LIGHT_THEME: ThemeColors = {
+  background: 'oklch(0.92 0.03 290)',
+  foreground: 'oklch(0.25 0.02 260)',
+  card: 'oklch(1 0 0)',
+  cardForeground: 'oklch(0.25 0.02 260)',
+  primary: 'oklch(0.55 0.18 290)',
+  primaryForeground: 'oklch(0.98 0 0)',
+  secondary: 'oklch(0.35 0.02 260)',
+  secondaryForeground: 'oklch(0.90 0.01 260)',
+  muted: 'oklch(0.95 0.02 290)',
+  mutedForeground: 'oklch(0.50 0.02 260)',
+  accent: 'oklch(0.70 0.17 195)',
+  accentForeground: 'oklch(0.2 0.02 260)',
+  destructive: 'oklch(0.55 0.22 25)',
+  destructiveForeground: 'oklch(0.98 0 0)',
+  border: 'oklch(0.85 0.02 290)',
+  input: 'oklch(0.85 0.02 290)',
+  ring: 'oklch(0.70 0.17 195)',
+}
+
+export const DEFAULT_DARK_THEME: ThemeColors = {
+  background: 'oklch(0.145 0 0)',
+  foreground: 'oklch(0.985 0 0)',
+  card: 'oklch(0.205 0 0)',
+  cardForeground: 'oklch(0.985 0 0)',
+  primary: 'oklch(0.922 0 0)',
+  primaryForeground: 'oklch(0.205 0 0)',
+  secondary: 'oklch(0.269 0 0)',
+  secondaryForeground: 'oklch(0.985 0 0)',
+  muted: 'oklch(0.269 0 0)',
+  mutedForeground: 'oklch(0.708 0 0)',
+  accent: 'oklch(0.269 0 0)',
+  accentForeground: 'oklch(0.985 0 0)',
+  destructive: 'oklch(0.704 0.191 22.216)',
+  destructiveForeground: 'oklch(0.98 0 0)',
+  border: 'oklch(1 0 0 / 10%)',
+  input: 'oklch(1 0 0 / 15%)',
+  ring: 'oklch(0.556 0 0)',
+}
diff --git a/frontends/nextjs/src/components/editors/theme/types.ts b/frontends/nextjs/src/components/editors/theme/types.ts
new file mode 100644
index 000000000..8440c06d8
--- /dev/null
+++ b/frontends/nextjs/src/components/editors/theme/types.ts
@@ -0,0 +1,25 @@
+export interface ThemeColors {
+  background: string
+  foreground: string
+  card: string
+  cardForeground: string
+  primary: string
+  primaryForeground: string
+  secondary: string
+  secondaryForeground: string
+  muted: string
+  mutedForeground: string
+  accent: string
+  accentForeground: string
+  destructive: string
+  destructiveForeground: string
+  border: string
+  input: string
+  ring: string
+}
+
+export interface ThemeConfig {
+  light: ThemeColors
+  dark: ThemeColors
+  radius: string
+}
diff --git a/frontends/nextjs/src/components/examples/contact-form/FormConfig.ts b/frontends/nextjs/src/components/examples/contact-form/FormConfig.ts
new file mode 100644
index 000000000..6fb66cf33
--- /dev/null
+++ b/frontends/nextjs/src/components/examples/contact-form/FormConfig.ts
@@ -0,0 +1,60 @@
+export type ContactFormFieldType = 'text' | 'email' | 'textarea'
+
+export interface ContactFormField {
+  name: 'name' | 'email' | 'message'
+  label: string
+  placeholder: string
+  type: ContactFormFieldType
+  required?: boolean
+  helperText?: string
+}
+
+export interface ContactFormConfig {
+  title: string
+  description: string
+  submitLabel: string
+  successTitle: string
+  successMessage: string
+  fields: ContactFormField[]
+}
+
+export const contactFormConfig: ContactFormConfig = {
+  title: 'Contact form',
+  description: 'Collect a name, email, and short message with simple validation.',
+  submitLabel: 'Send message',
+  successTitle: 'Message sent',
+  successMessage: 'Thanks for reaching out. We will get back to you shortly.',
+  fields: [
+    {
+      name: 'name',
+      label: 'Name',
+      placeholder: 'Your name',
+      type: 'text',
+      required: true,
+    },
+    {
+      name: 'email',
+      label: 'Email',
+      placeholder: 'you@example.com',
+      type: 'email',
+      required: true,
+      helperText: 'We will only use this to reply to your note.',
+    },
+    {
+      name: 'message',
+      label: 'Message',
+      placeholder: 'How can we help?',
+      type: 'textarea',
+      required: true,
+    },
+  ],
+}
+
+export type ContactFormState = Record<ContactFormField['name'], string>
+
+export function createInitialContactFormState(): ContactFormState {
+  return contactFormConfig.fields.reduce<ContactFormState>((state, field) => {
+    state[field.name] = ''
+    return state
+  }, {} as ContactFormState)
+}
diff --git a/frontends/nextjs/src/components/examples/contact-form/Preview.tsx b/frontends/nextjs/src/components/examples/contact-form/Preview.tsx
new file mode 100644
index 000000000..b097be962
--- /dev/null
+++ b/frontends/nextjs/src/components/examples/contact-form/Preview.tsx
@@ -0,0 +1,145 @@
+import { ChangeEvent, FormEvent, useMemo, useState } from 'react'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+  Textarea,
+} from '@/components/ui'
+
+import {
+  contactFormConfig,
+  ContactFormField,
+  ContactFormState,
+  createInitialContactFormState,
+} from './FormConfig'
+
+type ValidationErrors = Partial<Record<ContactFormField['name'], string>>
+
+function validateContactForm(values: ContactFormState): ValidationErrors {
+  const errors: ValidationErrors = {}
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+
+  contactFormConfig.fields.forEach(field => {
+    const value = values[field.name]?.trim() ?? ''
+
+    if (field.required && !value) {
+      errors[field.name] = `${field.label} is required`
+      return
+    }
+
+    if (field.type === 'email' && value && !emailPattern.test(value)) {
+      errors[field.name] = 'Enter a valid email address'
+    }
+  })
+
+  return errors
+}
+
+export function ContactFormPreview() {
+  const [formValues, setFormValues] = useState<ContactFormState>(
+    createInitialContactFormState()
+  )
+  const [errors, setErrors] = useState<ValidationErrors>({})
+  const [submitted, setSubmitted] = useState(false)
+
+  const hasErrors = useMemo(() => Object.keys(errors).length > 0, [errors])
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+
+    const validationErrors = validateContactForm(formValues)
+
+    if (Object.keys(validationErrors).length > 0) {
+      setErrors(validationErrors)
+      setSubmitted(false)
+      return
+    }
+
+    setErrors({})
+    setSubmitted(true)
+    setFormValues(createInitialContactFormState())
+    setTimeout(() => setSubmitted(false), 3200)
+  }
+
+  const renderField = (field: ContactFormField) => {
+    const commonProps = {
+      id: field.name,
+      name: field.name,
+      value: formValues[field.name],
+      onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        const { value } = event.target
+        setFormValues(current => ({ ...current, [field.name]: value }))
+      },
+      'aria-describedby': errors[field.name] ? `${field.name}-error` : undefined,
+      placeholder: field.placeholder,
+    }
+
+    if (field.type === 'textarea') {
+      return (
+        <Textarea
+          rows={4}
+          {...commonProps}
+        />
+      )
+    }
+
+    return (
+      <Input
+        type={field.type}
+        {...commonProps}
+      />
+    )
+  }
+
+  return (
+    <Card className="max-w-xl">
+      <CardHeader>
+        <CardTitle>{contactFormConfig.title}</CardTitle>
+        <CardDescription>{contactFormConfig.description}</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form className="space-y-4" onSubmit={handleSubmit}>
+          {contactFormConfig.fields.map(field => (
+            <div key={field.name} className="space-y-2">
+              <div className="flex items-center justify-between gap-2">
+                <label className="text-sm font-medium" htmlFor={field.name}>
+                  {field.label}
+                  {field.required && <span className="text-red-600">*</span>}
+                </label>
+                {field.helperText && (
+                  <span className="text-xs text-muted-foreground">{field.helperText}</span>
+                )}
+              </div>
+              {renderField(field)}
+              {errors[field.name] && (
+                <p
+                  id={`${field.name}-error`}
+                  className="text-xs text-red-600"
+                  role="alert"
+                >
+                  {errors[field.name]}
+                </p>
+              )}
+            </div>
+          ))}
+
+          <div className="space-y-2">
+            <Button className="w-full" type="submit">
+              {contactFormConfig.submitLabel}
+            </Button>
+            {submitted && !hasErrors && (
+              <p className="rounded-md bg-emerald-50 px-3 py-2 text-sm text-emerald-700">
+                <strong className="mr-1">{contactFormConfig.successTitle}.</strong>
+                {contactFormConfig.successMessage}
+              </p>
+            )}
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/level1/CredentialsSection.tsx b/frontends/nextjs/src/components/level/level1/CredentialsSection.tsx
new file mode 100644
index 000000000..e26a85feb
--- /dev/null
+++ b/frontends/nextjs/src/components/level/level1/CredentialsSection.tsx
@@ -0,0 +1,113 @@
+"use client"
+
+import { useEffect, useState } from 'react'
+import { getScrambledPassword } from '@/lib/auth'
+import { GodCredentialsBanner } from '../level1/GodCredentialsBanner'
+import { ChallengePanel } from '../sections/ChallengePanel'
+
+export function CredentialsSection() {
+  const [showGodCredentials, setShowGodCredentials] = useState(false)
+  const [showSuperGodCredentials, setShowSuperGodCredentials] = useState(false)
+  const [showPassword, setShowPassword] = useState(false)
+  const [showSuperGodPassword, setShowSuperGodPassword] = useState(false)
+  const [copied, setCopied] = useState(false)
+  const [copiedSuper, setCopiedSuper] = useState(false)
+  const [timeRemaining, setTimeRemaining] = useState('')
+
+  useEffect(() => {
+    let interval: ReturnType<typeof setInterval> | undefined
+
+    const checkCredentials = async () => {
+      try {
+        const { Database } = await import('@/lib/database')
+
+        const shouldShow = await Database.shouldShowGodCredentials()
+        setShowGodCredentials(shouldShow)
+
+        const superGod = await Database.getSuperGod()
+        const firstLoginFlags = await Database.getFirstLoginFlags()
+        setShowSuperGodCredentials(superGod !== null && firstLoginFlags['supergod'] === true)
+
+        if (shouldShow) {
+          const expiry = await Database.getGodCredentialsExpiry()
+          const updateTimer = () => {
+            const now = Date.now()
+            const diff = expiry - now
+
+            if (diff <= 0) {
+              setShowGodCredentials(false)
+              setTimeRemaining('')
+              return
+            }
+
+            const minutes = Math.floor(diff / 60000)
+            const seconds = Math.floor((diff % 60000) / 1000)
+            setTimeRemaining(`${minutes}m ${seconds}s`)
+          }
+
+          updateTimer()
+          interval = setInterval(updateTimer, 1000)
+        }
+      } catch {
+        setShowGodCredentials(false)
+        setShowSuperGodCredentials(false)
+        setTimeRemaining('')
+      }
+    }
+
+    void checkCredentials()
+
+    return () => {
+      if (interval) clearInterval(interval)
+    }
+  }, [])
+
+  const handleCopyPassword = async () => {
+    await navigator.clipboard.writeText(getScrambledPassword('god'))
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  const handleCopySuperGodPassword = async () => {
+    await navigator.clipboard.writeText(getScrambledPassword('supergod'))
+    setCopiedSuper(true)
+    setTimeout(() => setCopiedSuper(false), 2000)
+  }
+
+  if (!showGodCredentials && !showSuperGodCredentials) return null
+
+  return (
+    <ChallengePanel
+      title="Setup Credentials"
+      description="Temporary credentials are available while configuring your environment."
+    >
+      <div className="space-y-4">
+        {showSuperGodCredentials && (
+          <GodCredentialsBanner
+            username="supergod"
+            password={getScrambledPassword('supergod')}
+            showPassword={showSuperGodPassword}
+            onTogglePassword={() => setShowSuperGodPassword(!showSuperGodPassword)}
+            copied={copiedSuper}
+            onCopy={handleCopySuperGodPassword}
+            timeRemaining=""
+            variant="supergod"
+          />
+        )}
+
+        {showGodCredentials && (
+          <GodCredentialsBanner
+            username="god"
+            password={getScrambledPassword('god')}
+            showPassword={showPassword}
+            onTogglePassword={() => setShowPassword(!showPassword)}
+            copied={copied}
+            onCopy={handleCopyPassword}
+            timeRemaining={timeRemaining}
+            variant="god"
+          />
+        )}
+      </div>
+    </ChallengePanel>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/level1/Level1Tabs.tsx b/frontends/nextjs/src/components/level/level1/Level1Tabs.tsx
new file mode 100644
index 000000000..e9b498c85
--- /dev/null
+++ b/frontends/nextjs/src/components/level/level1/Level1Tabs.tsx
@@ -0,0 +1,52 @@
+import { HeroSection } from '../../level1/HeroSection'
+import { FeaturesSection } from '../../level1/FeaturesSection'
+import { ContactSection } from '../../level1/ContactSection'
+import { ServerStatusPanel } from '../../status/ServerStatusPanel'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
+import { GitHubActionsFetcher } from '../../misc/github/GitHubActionsFetcher'
+import { IntroSection } from '../sections/IntroSection'
+
+interface Level1TabsProps {
+  onNavigate: (level: number) => void
+}
+
+export function Level1Tabs({ onNavigate }: Level1TabsProps) {
+  return (
+    <Tabs defaultValue="home" className="w-full">
+      <TabsList className="grid w-full max-w-3xl mx-auto grid-cols-3 mb-8">
+        <TabsTrigger value="home">Home</TabsTrigger>
+        <TabsTrigger value="github-actions">GitHub Actions</TabsTrigger>
+        <TabsTrigger value="status">Server Status</TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="home" className="mt-0 space-y-12">
+        <HeroSection onNavigate={onNavigate} />
+        <FeaturesSection />
+        <IntroSection
+          id="about"
+          title="About MetaBuilder"
+          description="MetaBuilder is a revolutionary platform that lets you build entire application stacks through visual interfaces."
+        >
+          <p className="text-lg text-muted-foreground">
+            Whether you're a designer who wants to create without code, or a developer who wants to work at a higher level of
+            abstraction, MetaBuilder adapts to your needs.
+          </p>
+        </IntroSection>
+        <ContactSection />
+      </TabsContent>
+
+      <TabsContent value="github-actions" className="mt-0">
+        <GitHubActionsFetcher />
+      </TabsContent>
+
+      <TabsContent value="status" className="mt-0">
+        <IntroSection
+          title="Server Status"
+          description="Monitor the DBAL stack, Prisma schema, and the C++ daemon from this interface."
+        >
+          <ServerStatusPanel />
+        </IntroSection>
+      </TabsContent>
+    </Tabs>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/level2/ChatTabContent.tsx b/frontends/nextjs/src/components/level/level2/ChatTabContent.tsx
new file mode 100644
index 000000000..bc382dc6e
--- /dev/null
+++ b/frontends/nextjs/src/components/level/level2/ChatTabContent.tsx
@@ -0,0 +1,18 @@
+import { IRCWebchatDeclarative } from '../../misc/demos/IRCWebchatDeclarative'
+import { ResultsPane } from '../sections/ResultsPane'
+import type { User } from '@/lib/level-types'
+
+interface ChatTabContentProps {
+  user: User
+}
+
+export function ChatTabContent({ user }: ChatTabContentProps) {
+  return (
+    <ResultsPane
+      title="Webchat"
+      description="Collaborate with other builders in real-time via the IRC channel."
+    >
+      <IRCWebchatDeclarative user={user} channelName="general" />
+    </ResultsPane>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/level2/CommentsTabContent.tsx b/frontends/nextjs/src/components/level/level2/CommentsTabContent.tsx
new file mode 100644
index 000000000..5c69338c4
--- /dev/null
+++ b/frontends/nextjs/src/components/level/level2/CommentsTabContent.tsx
@@ -0,0 +1,65 @@
+import { useMemo } from 'react'
+import { Button } from '@/components/ui'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
+import { Textarea } from '@/components/ui'
+import { CommentsList } from '../../level2/CommentsList'
+import { ChallengePanel } from '../sections/ChallengePanel'
+import type { Comment, User } from '@/lib/level-types'
+
+interface CommentsTabContentProps {
+  comments: Comment[]
+  users: User[]
+  currentUserId: string
+  newComment: string
+  onChangeComment: (value: string) => void
+  onPostComment: () => void
+  onDeleteComment: (commentId: string) => void
+}
+
+export function CommentsTabContent({
+  comments,
+  users,
+  currentUserId,
+  newComment,
+  onChangeComment,
+  onPostComment,
+  onDeleteComment,
+}: CommentsTabContentProps) {
+  const userComments = useMemo(() => comments.filter(c => c.userId === currentUserId), [comments, currentUserId])
+
+  return (
+    <ChallengePanel title="Community" description="Share updates and see what others are building.">
+      <Card>
+        <CardHeader>
+          <CardTitle>Post a Comment</CardTitle>
+          <CardDescription>Share your thoughts with the community</CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-4">
+          <Textarea
+            value={newComment}
+            onChange={(e) => onChangeComment(e.target.value)}
+            placeholder="Write your comment here..."
+            rows={4}
+          />
+          <Button onClick={onPostComment}>Post Comment</Button>
+        </CardContent>
+      </Card>
+
+      <CommentsList
+        comments={userComments}
+        currentUserId={currentUserId}
+        users={users}
+        onDelete={onDeleteComment}
+        variant="my"
+      />
+
+      <CommentsList
+        comments={comments}
+        currentUserId={currentUserId}
+        users={users}
+        onDelete={onDeleteComment}
+        variant="all"
+      />
+    </ChallengePanel>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/level2/ProfileTabContent.tsx b/frontends/nextjs/src/components/level/level2/ProfileTabContent.tsx
new file mode 100644
index 000000000..c44824bfd
--- /dev/null
+++ b/frontends/nextjs/src/components/level/level2/ProfileTabContent.tsx
@@ -0,0 +1,37 @@
+import { ProfileCard } from '../../level2/ProfileCard'
+import type { User } from '@/lib/level-types'
+
+interface ProfileTabContentProps {
+  user: User
+  editingProfile: boolean
+  profileForm: { bio: string; email: string }
+  onEdit: () => void
+  onCancel: () => void
+  onSave: () => void
+  onFormChange: (value: { bio: string; email: string }) => void
+  onRequestPasswordReset: () => void
+}
+
+export function ProfileTabContent({
+  user,
+  editingProfile,
+  profileForm,
+  onEdit,
+  onCancel,
+  onSave,
+  onFormChange,
+  onRequestPasswordReset,
+}: ProfileTabContentProps) {
+  return (
+    <ProfileCard
+      user={user}
+      editingProfile={editingProfile}
+      profileForm={profileForm}
+      onEdit={onEdit}
+      onCancel={onCancel}
+      onSave={onSave}
+      onFormChange={onFormChange}
+      onRequestPasswordReset={onRequestPasswordReset}
+    />
+  )
+}
diff --git a/frontends/nextjs/src/components/level/level3/CommentsTable.tsx b/frontends/nextjs/src/components/level/level3/CommentsTable.tsx
new file mode 100644
index 000000000..dcc71804f
--- /dev/null
+++ b/frontends/nextjs/src/components/level/level3/CommentsTable.tsx
@@ -0,0 +1,59 @@
+import { useMemo } from 'react'
+import { Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui'
+import { ChallengePanel } from '../sections/ChallengePanel'
+import { Trash } from '@phosphor-icons/react'
+import type { Comment, User } from '@/lib/level-types'
+
+interface CommentsTableProps {
+  comments: Comment[]
+  users: User[]
+  searchTerm: string
+  onDeleteComment: (commentId: string) => void
+}
+
+export function CommentsTable({ comments, users, searchTerm, onDeleteComment }: CommentsTableProps) {
+  const filteredComments = useMemo(
+    () => comments.filter(c => c.content.toLowerCase().includes(searchTerm.toLowerCase())),
+    [comments, searchTerm]
+  )
+
+  return (
+    <ChallengePanel title="Comments" description="Moderate community feedback">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>User</TableHead>
+            <TableHead>Content</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead className="text-right">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {filteredComments.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={4} className="text-center text-muted-foreground">
+                No comments found
+              </TableCell>
+            </TableRow>
+          ) : (
+            filteredComments.map((c) => {
+              const commentUser = users.find(u => u.id === c.userId)
+              return (
+                <TableRow key={c.id}>
+                  <TableCell className="font-medium">{commentUser?.username || 'Unknown'}</TableCell>
+                  <TableCell className="max-w-md truncate">{c.content}</TableCell>
+                  <TableCell>{new Date(c.createdAt).toLocaleDateString()}</TableCell>
+                  <TableCell className="text-right">
+                    <Button variant="ghost" size="sm" onClick={() => onDeleteComment(c.id)}>
+                      <Trash size={16} />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              )
+            })
+          )}
+        </TableBody>
+      </Table>
+    </ChallengePanel>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/level3/EditUserDialog.tsx b/frontends/nextjs/src/components/level/level3/EditUserDialog.tsx
new file mode 100644
index 000000000..a95168305
--- /dev/null
+++ b/frontends/nextjs/src/components/level/level3/EditUserDialog.tsx
@@ -0,0 +1,50 @@
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui'
+import { Button, Input } from '@/components/ui'
+import type { User } from '@/lib/level-types'
+
+interface EditUserDialogProps {
+  open: boolean
+  user: User | null
+  onClose: (open: boolean) => void
+  onChange: (user: User) => void
+  onSave: () => void
+}
+
+export function EditUserDialog({ open, user, onClose, onChange, onSave }: EditUserDialogProps) {
+  if (!user) return null
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit User</DialogTitle>
+          <DialogDescription>Update user information</DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4 pt-4">
+          <div>
+            <label className="text-sm font-medium mb-2 block">Username</label>
+            <Input value={user.username} onChange={(e) => onChange({ ...user, username: e.target.value })} />
+          </div>
+          <div>
+            <label className="text-sm font-medium mb-2 block">Email</label>
+            <Input
+              type="email"
+              value={user.email}
+              onChange={(e) => onChange({ ...user, email: e.target.value })}
+            />
+          </div>
+          <div>
+            <label className="text-sm font-medium mb-2 block">Bio</label>
+            <Input value={user.bio || ''} onChange={(e) => onChange({ ...user, bio: e.target.value })} />
+          </div>
+          <div className="flex gap-2 justify-end">
+            <Button variant="outline" onClick={() => onClose(false)}>
+              Cancel
+            </Button>
+            <Button onClick={onSave}>Save Changes</Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/level3/Level3Stats.tsx b/frontends/nextjs/src/components/level/level3/Level3Stats.tsx
new file mode 100644
index 000000000..814023ec7
--- /dev/null
+++ b/frontends/nextjs/src/components/level/level3/Level3Stats.tsx
@@ -0,0 +1,35 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
+import { ChatCircle, Users } from '@phosphor-icons/react'
+import type { User, Comment } from '@/lib/level-types'
+
+interface Level3StatsProps {
+  users: User[]
+  comments: Comment[]
+}
+
+export function Level3Stats({ users, comments }: Level3StatsProps) {
+  const adminCount = users.filter(u => u.role === 'admin' || u.role === 'god').length
+
+  const stats = [
+    { label: 'Total Users', value: users.length, icon: Users, helper: 'Registered accounts' },
+    { label: 'Total Comments', value: comments.length, icon: ChatCircle, helper: 'Posted by users' },
+    { label: 'Admins', value: adminCount, icon: Users, helper: 'Admin & god users' },
+  ]
+
+  return (
+    <div className="grid gap-6 md:grid-cols-3">
+      {stats.map((stat) => (
+        <Card key={stat.label}>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">{stat.label}</CardTitle>
+            <stat.icon className="text-muted-foreground" size={20} />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{stat.value}</div>
+            <p className="text-xs text-muted-foreground">{stat.helper}</p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/level3/UserTable.tsx b/frontends/nextjs/src/components/level/level3/UserTable.tsx
new file mode 100644
index 000000000..e16bb3392
--- /dev/null
+++ b/frontends/nextjs/src/components/level/level3/UserTable.tsx
@@ -0,0 +1,105 @@
+import { useMemo } from 'react'
+import { Badge, Button, Input, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui'
+import { ChallengePanel } from '../sections/ChallengePanel'
+import { MagnifyingGlass, PencilSimple, Trash, Users, ChatCircle } from '@phosphor-icons/react'
+import type { User } from '@/lib/level-types'
+
+interface UserTableProps {
+  users: User[]
+  searchTerm: string
+  onSearchChange: (value: string) => void
+  onEditUser: (user: User) => void
+  onDeleteUser: (userId: string) => void
+  currentUserId: string
+  commentCount: number
+  commentLabel: string
+}
+
+export function UserTable({
+  users,
+  searchTerm,
+  onSearchChange,
+  onEditUser,
+  onDeleteUser,
+  currentUserId,
+  commentCount,
+  commentLabel,
+}: UserTableProps) {
+  const filteredUsers = useMemo(
+    () =>
+      users.filter(
+        u => u.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
+          u.email.toLowerCase().includes(searchTerm.toLowerCase())
+      ),
+    [users, searchTerm]
+  )
+
+  return (
+    <ChallengePanel title="Models" description="Browse and manage data models">
+      <div className="flex items-center justify-between gap-4">
+        <div className="relative">
+          <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={16} />
+          <Input
+            placeholder="Search..."
+            value={searchTerm}
+            onChange={(e) => onSearchChange(e.target.value)}
+            className="pl-9 w-64"
+          />
+        </div>
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Users size={16} /> {users.length}
+          <ChatCircle size={16} /> {commentLabel} {commentCount}
+        </div>
+      </div>
+
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Username</TableHead>
+            <TableHead>Email</TableHead>
+            <TableHead>Role</TableHead>
+            <TableHead>Created</TableHead>
+            <TableHead className="text-right">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {filteredUsers.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={5} className="text-center text-muted-foreground">
+                No users found
+              </TableCell>
+            </TableRow>
+          ) : (
+            filteredUsers.map((u) => (
+              <TableRow key={u.id}>
+                <TableCell className="font-medium">{u.username}</TableCell>
+                <TableCell>{u.email}</TableCell>
+                <TableCell>
+                  <Badge variant={u.role === 'god' ? 'default' : u.role === 'admin' ? 'secondary' : 'outline'}>
+                    {u.role}
+                  </Badge>
+                </TableCell>
+                <TableCell>{new Date(u.createdAt).toLocaleDateString()}</TableCell>
+                <TableCell className="text-right">
+                  <div className="flex gap-2 justify-end">
+                    <Button variant="ghost" size="sm" onClick={() => onEditUser(u)}>
+                      <PencilSimple size={16} />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={() => onDeleteUser(u.id)}
+                      disabled={u.id === currentUserId}
+                    >
+                      <Trash size={16} />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </ChallengePanel>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/level5/CreateTenantDialog.tsx b/frontends/nextjs/src/components/level/level5/CreateTenantDialog.tsx
new file mode 100644
index 000000000..51e2116e8
--- /dev/null
+++ b/frontends/nextjs/src/components/level/level5/CreateTenantDialog.tsx
@@ -0,0 +1,45 @@
+import { Button, Input, Label } from '@/components/ui'
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui'
+
+interface CreateTenantDialogProps {
+  open: boolean
+  newTenantName: string
+  onChangeTenantName: (value: string) => void
+  onClose: (open: boolean) => void
+  onCreate: () => void
+}
+
+export function CreateTenantDialog({ open, newTenantName, onChangeTenantName, onClose, onCreate }: CreateTenantDialogProps) {
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="bg-slate-900 border-white/10 text-white">
+        <DialogHeader>
+          <DialogTitle>Create New Tenant</DialogTitle>
+          <DialogDescription className="text-gray-400">
+            Create a new tenant instance with its own homepage configuration
+          </DialogDescription>
+        </DialogHeader>
+        <div className="space-y-4">
+          <div>
+            <Label htmlFor="tenant-name">Tenant Name</Label>
+            <Input
+              id="tenant-name"
+              value={newTenantName}
+              onChange={(e) => onChangeTenantName(e.target.value)}
+              placeholder="Enter tenant name"
+              className="bg-white/5 border-white/10 text-white"
+            />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onClose(false)} className="border-white/20 text-white hover:bg-white/10">
+            Cancel
+          </Button>
+          <Button onClick={onCreate} className="bg-purple-600 hover:bg-purple-700">
+            Create
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/level5/Level5Navigator.tsx b/frontends/nextjs/src/components/level/level5/Level5Navigator.tsx
new file mode 100644
index 000000000..10f63a21c
--- /dev/null
+++ b/frontends/nextjs/src/components/level/level5/Level5Navigator.tsx
@@ -0,0 +1,104 @@
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
+import { Buildings, Users, ArrowsLeftRight, Eye, Camera, Warning } from '@phosphor-icons/react'
+import { ResultsPane } from '../sections/ResultsPane'
+import { TenantsTab } from '../../level5/tabs/TenantsTab'
+import { GodUsersTab } from '../../level5/tabs/GodUsersTab'
+import { PowerTransferTab } from '../../level5/tabs/power-transfer/PowerTransferTab'
+import { PreviewTab } from '../../level5/tabs/PreviewTab'
+import { ErrorLogsTab } from '../../level5/tabs/error-logs/ErrorLogsTab'
+import { ScreenshotAnalyzer } from '../../misc/demos/ScreenshotAnalyzer'
+import type { AppLevel, Tenant, User } from '@/lib/level-types'
+
+interface Level5NavigatorProps {
+  tenants: Tenant[]
+  allUsers: User[]
+  godUsers: User[]
+  transferRefresh: number
+  currentUser: User
+  onCreateTenant: () => void
+  onDeleteTenant: (tenantId: string) => void
+  onAssignHomepage: (tenantId: string, pageId: string) => Promise<void>
+  onInitiateTransfer: (userId: string) => void
+  onPreview: (level: AppLevel) => void
+}
+
+export function Level5Navigator({
+  tenants,
+  allUsers,
+  godUsers,
+  transferRefresh,
+  currentUser,
+  onCreateTenant,
+  onDeleteTenant,
+  onAssignHomepage,
+  onInitiateTransfer,
+  onPreview,
+}: Level5NavigatorProps) {
+  return (
+    <ResultsPane title="Navigation" description="Jump between builder levels and administrative tools.">
+      <Tabs defaultValue="tenants" className="space-y-6">
+        <TabsList className="bg-black/40 border border-white/10">
+          <TabsTrigger value="tenants" className="data-[state=active]:bg-purple-600">
+            <Buildings className="w-4 h-4 mr-2" />
+            Tenants
+          </TabsTrigger>
+          <TabsTrigger value="gods" className="data-[state=active]:bg-purple-600">
+            <Users className="w-4 h-4 mr-2" />
+            God Users
+          </TabsTrigger>
+          <TabsTrigger value="power" className="data-[state=active]:bg-purple-600">
+            <ArrowsLeftRight className="w-4 h-4 mr-2" />
+            Power Transfer
+          </TabsTrigger>
+          <TabsTrigger value="preview" className="data-[state=active]:bg-purple-600">
+            <Eye className="w-4 h-4 mr-2" />
+            Preview Levels
+          </TabsTrigger>
+          <TabsTrigger value="screenshot" className="data-[state=active]:bg-purple-600">
+            <Camera className="w-4 h-4 mr-2" />
+            Screenshot
+          </TabsTrigger>
+          <TabsTrigger value="errorlogs" className="data-[state=active]:bg-purple-600">
+            <Warning className="w-4 h-4 mr-2" />
+            Error Logs
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="tenants" className="space-y-4">
+          <TenantsTab
+            tenants={tenants}
+            allUsers={allUsers}
+            onCreateTenant={onCreateTenant}
+            onDeleteTenant={onDeleteTenant}
+            onAssignHomepage={onAssignHomepage}
+          />
+        </TabsContent>
+
+        <TabsContent value="gods" className="space-y-4">
+          <GodUsersTab godUsers={godUsers} />
+        </TabsContent>
+
+        <TabsContent value="power" className="space-y-4">
+          <PowerTransferTab
+            currentUser={currentUser}
+            allUsers={allUsers}
+            onInitiateTransfer={onInitiateTransfer}
+            refreshSignal={transferRefresh}
+          />
+        </TabsContent>
+
+        <TabsContent value="preview" className="space-y-4">
+          <PreviewTab onPreview={onPreview} />
+        </TabsContent>
+
+        <TabsContent value="screenshot" className="space-y-4">
+          <ScreenshotAnalyzer />
+        </TabsContent>
+
+        <TabsContent value="errorlogs" className="space-y-4">
+          <ErrorLogsTab user={currentUser} />
+        </TabsContent>
+      </Tabs>
+    </ResultsPane>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/level5/TransferConfirmDialog.tsx b/frontends/nextjs/src/components/level/level5/TransferConfirmDialog.tsx
new file mode 100644
index 000000000..114c0e219
--- /dev/null
+++ b/frontends/nextjs/src/components/level/level5/TransferConfirmDialog.tsx
@@ -0,0 +1,51 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui'
+import { Crown } from '@phosphor-icons/react'
+import type { User } from '@/lib/level-types'
+
+interface TransferConfirmDialogProps {
+  open: boolean
+  allUsers: User[]
+  selectedUserId: string
+  onClose: (open: boolean) => void
+  onConfirm: () => void
+}
+
+export function TransferConfirmDialog({ open, allUsers, selectedUserId, onClose, onConfirm }: TransferConfirmDialogProps) {
+  return (
+    <AlertDialog open={open} onOpenChange={onClose}>
+      <AlertDialogContent className="bg-slate-900 border-white/10 text-white">
+        <AlertDialogHeader>
+          <AlertDialogTitle className="flex items-center gap-2 text-amber-300">
+            <Crown className="w-6 h-6" weight="fill" />
+            Confirm Power Transfer
+          </AlertDialogTitle>
+          <AlertDialogDescription className="text-gray-400">
+            Are you absolutely sure? This will transfer your Super God privileges to{' '}
+            <span className="font-semibold text-white">{allUsers.find(u => u.id === selectedUserId)?.username}</span>.
+            You will be downgraded to God level and cannot reverse this action.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel className="border-white/20 text-white hover:bg-white/10">
+            Cancel
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={onConfirm}
+            className="bg-gradient-to-r from-amber-600 to-yellow-600 hover:from-amber-700 hover:to-yellow-700"
+          >
+            Transfer Power
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/levels/Level1.tsx b/frontends/nextjs/src/components/level/levels/Level1.tsx
index 995138101..91648b206 100644
--- a/frontends/nextjs/src/components/level/levels/Level1.tsx
+++ b/frontends/nextjs/src/components/level/levels/Level1.tsx
@@ -1,209 +1,25 @@
 "use client"
 
-/**
- * Level1 Component - Public/Unauthenticated Interface
- * 
- * The Level1 component serves as the main entry point for unauthenticated users.
- * It displays the public-facing interface with features, hero sections, and
- * navigation to login or other public pages.
- * 
- * Key Features:
- * - Navigation bar for public users
- * - Hero section with marketing content
- * - Features overview
- * - Contact form
- * - Credentials display (god/supergod) during setup
- * - Login prompt for authenticated access
- */
-
-import { useState, useEffect } from 'react'
-import { getScrambledPassword } from '@/lib/auth'
+import { useState } from 'react'
 import { NavigationBar } from '../../level1/NavigationBar'
-import { GodCredentialsBanner } from '../../level1/GodCredentialsBanner'
-import { HeroSection } from '../../level1/HeroSection'
-import { FeaturesSection } from '../../level1/FeaturesSection'
-import { ContactSection } from '../../level1/ContactSection'
 import { AppFooter } from '../../shared/AppFooter'
-import { ServerStatusPanel } from '../../status/ServerStatusPanel'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-import { GitHubActionsFetcher } from '../../misc/github/GitHubActionsFetcher'
+import { CredentialsSection } from '../level1/CredentialsSection'
+import { Level1Tabs } from '../level1/Level1Tabs'
 
-// Props for Level1 component
 interface Level1Props {
-  // Callback when user navigates to another level
   onNavigate: (level: number) => void
 }
 
-/**
- * Level1 - Public interface component
- * @param props - Component props
- */
 export function Level1({ onNavigate }: Level1Props) {
-  // Menu visibility state
   const [menuOpen, setMenuOpen] = useState(false)
-  // Show god credentials banner during setup
-  const [showGodCredentials, setShowGodCredentials] = useState(false)
-  // Show supergod credentials banner during setup
-  const [showSuperGodCredentials, setShowSuperGodCredentials] = useState(false)
-  // Password visibility toggle for god credentials
-  const [showPassword, setShowPassword] = useState(false)
-  // Password visibility toggle for supergod credentials
-  const [showSuperGodPassword, setShowSuperGodPassword] = useState(false)
-  // Track clipboard copy state for god credentials
-  const [copied, setCopied] = useState(false)
-  // Track clipboard copy state for supergod credentials
-  const [copiedSuper, setCopiedSuper] = useState(false)
-  // Display remaining time for god credentials expiry
-  const [timeRemaining, setTimeRemaining] = useState('')
-
-  // Initialize component state on mount
-  useEffect(() => {
-    let interval: ReturnType<typeof setInterval> | undefined
-
-    const checkCredentials = async () => {
-      try {
-        const { Database } = await import('@/lib/database')
-
-        // Check if god credentials should be displayed
-        const shouldShow = await Database.shouldShowGodCredentials()
-        setShowGodCredentials(shouldShow)
-
-        // Get supergod account if exists
-        const superGod = await Database.getSuperGod()
-        const firstLoginFlags = await Database.getFirstLoginFlags()
-        setShowSuperGodCredentials(superGod !== null && firstLoginFlags['supergod'] === true)
-
-        // Update timer for god credentials expiry
-        if (shouldShow) {
-          const expiry = await Database.getGodCredentialsExpiry()
-          const updateTimer = () => {
-            const now = Date.now()
-            const diff = expiry - now
-
-            // Hide credentials when expired
-            if (diff <= 0) {
-              setShowGodCredentials(false)
-              setTimeRemaining('')
-              return
-            }
-
-            // Display remaining time in minutes and seconds
-            const minutes = Math.floor(diff / 60000)
-            const seconds = Math.floor((diff % 60000) / 1000)
-            setTimeRemaining(`${minutes}m ${seconds}s`)
-          }
-
-          updateTimer()
-          interval = setInterval(updateTimer, 1000)
-        }
-      } catch {
-        setShowGodCredentials(false)
-        setShowSuperGodCredentials(false)
-        setTimeRemaining('')
-      }
-    }
-
-    void checkCredentials()
-
-    return () => {
-      if (interval) clearInterval(interval)
-    }
-  }, [])
-
-  const handleCopyPassword = async () => {
-    await navigator.clipboard.writeText(getScrambledPassword('god'))
-    setCopied(true)
-    setTimeout(() => setCopied(false), 2000)
-  }
-
-  const handleCopySuperGodPassword = async () => {
-    await navigator.clipboard.writeText(getScrambledPassword('supergod'))
-    setCopiedSuper(true)
-    setTimeout(() => setCopiedSuper(false), 2000)
-  }
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-primary/5 via-background to-accent/5">
       <NavigationBar menuOpen={menuOpen} setMenuOpen={setMenuOpen} onNavigate={onNavigate} />
 
-      {(showGodCredentials || showSuperGodCredentials) && (
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6 space-y-4">
-          {showSuperGodCredentials && (
-            <GodCredentialsBanner
-              username="supergod"
-              password={getScrambledPassword('supergod')}
-              showPassword={showSuperGodPassword}
-              onTogglePassword={() => setShowSuperGodPassword(!showSuperGodPassword)}
-              copied={copiedSuper}
-              onCopy={handleCopySuperGodPassword}
-              timeRemaining=""
-              variant="supergod"
-            />
-          )}
-          
-          {showGodCredentials && (
-            <GodCredentialsBanner
-              username="god"
-              password={getScrambledPassword('god')}
-              showPassword={showPassword}
-              onTogglePassword={() => setShowPassword(!showPassword)}
-              copied={copied}
-              onCopy={handleCopyPassword}
-              timeRemaining={timeRemaining}
-              variant="god"
-            />
-          )}
-        </div>
-      )}
-
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6">
-        <Tabs defaultValue="home" className="w-full">
-        <TabsList className="grid w-full max-w-3xl mx-auto grid-cols-3 mb-8">
-          <TabsTrigger value="home">Home</TabsTrigger>
-          <TabsTrigger value="github-actions">GitHub Actions</TabsTrigger>
-          <TabsTrigger value="status">Server Status</TabsTrigger>
-        </TabsList>
-          
-          <TabsContent value="home" className="mt-0">
-            <HeroSection onNavigate={onNavigate} />
-            <FeaturesSection />
-
-            <section id="about" className="bg-muted/30 py-20 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8">
-              <div className="max-w-4xl mx-auto text-center space-y-6">
-                <h2 className="text-3xl font-bold">About MetaBuilder</h2>
-                <p className="text-lg text-muted-foreground">
-                  MetaBuilder is a revolutionary platform that lets you build entire application stacks 
-                  through visual interfaces. From public websites to complex admin panels, everything 
-                  is generated from declarative configurations, workflows, and embedded scripts.
-                </p>
-                <p className="text-lg text-muted-foreground">
-                  Whether you're a designer who wants to create without code, or a developer who wants 
-                  to work at a higher level of abstraction, MetaBuilder adapts to your needs.
-                </p>
-              </div>
-            </section>
-
-            <ContactSection />
-          </TabsContent>
-          
-          <TabsContent value="github-actions" className="mt-0">
-            <GitHubActionsFetcher />
-          </TabsContent>
-
-          <TabsContent value="status" className="mt-0">
-            <section className="space-y-6">
-              <div className="text-center space-y-1">
-                <p className="text-sm text-muted-foreground">Runtime observability</p>
-                <h2 className="text-3xl font-bold">Server Status</h2>
-                <p className="text-sm text-muted-foreground max-w-2xl mx-auto">
-                  Monitor the DBAL stack, Prisma schema, and the C++ daemon from this interface—so you
-                  can see how the daemon is progressing toward production readiness.
-                </p>
-              </div>
-              <ServerStatusPanel />
-            </section>
-          </TabsContent>
-        </Tabs>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-6 space-y-6">
+        <CredentialsSection />
+        <Level1Tabs onNavigate={onNavigate} />
       </div>
 
       <AppFooter />
diff --git a/frontends/nextjs/src/components/level/levels/Level2.tsx b/frontends/nextjs/src/components/level/levels/Level2.tsx
index 528ea20ec..fbd0502f5 100644
--- a/frontends/nextjs/src/components/level/levels/Level2.tsx
+++ b/frontends/nextjs/src/components/level/levels/Level2.tsx
@@ -1,19 +1,14 @@
 "use client"
 
-import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { Textarea } from '@/components/ui'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
 import { User, ChatCircle } from '@phosphor-icons/react'
-import { toast } from 'sonner'
-import { Database, hashPassword } from '@/lib/database'
-import { generateScrambledPassword, simulateEmailSend } from '@/lib/password-utils'
-import { IRCWebchatDeclarative } from '../../misc/demos/IRCWebchatDeclarative'
-import { ProfileCard } from '../../level2/ProfileCard'
-import { CommentsList } from '../../level2/CommentsList'
 import { AppHeader } from '../../shared/AppHeader'
-import type { User as UserType, Comment } from '@/lib/level-types'
+import type { User as UserType } from '@/lib/level-types'
+import { IntroSection } from '../sections/IntroSection'
+import { ProfileTabContent } from '../level2/ProfileTabContent'
+import { CommentsTabContent } from '../level2/CommentsTabContent'
+import { ChatTabContent } from '../level2/ChatTabContent'
+import { useLevel2State } from './hooks/useLevel2State'
 
 export interface Level2Props {
   user: UserType
@@ -22,87 +17,21 @@ export interface Level2Props {
 }
 
 export function Level2({ user, onLogout, onNavigate }: Level2Props) {
-  const [currentUser, setCurrentUser] = useState<UserType>(user)
-  const [users, setUsers] = useState<UserType[]>([])
-  const [comments, setComments] = useState<Comment[]>([])
-  const [newComment, setNewComment] = useState('')
-  const [editingProfile, setEditingProfile] = useState(false)
-  const [profileForm, setProfileForm] = useState({
-    bio: user.bio || '',
-    email: user.email,
-  })
-
-  useEffect(() => {
-    const loadData = async () => {
-      const loadedUsers = await Database.getUsers({ scope: 'all' })
-      setUsers(loadedUsers)
-      const foundUser = loadedUsers.find(u => u.id === user.id)
-      if (foundUser) {
-        setCurrentUser(foundUser)
-        setProfileForm({
-          bio: foundUser.bio || '',
-          email: foundUser.email,
-        })
-      }
-      const loadedComments = await Database.getComments()
-      setComments(loadedComments)
-    }
-    loadData()
-  }, [user.id])
-
-  const handleProfileSave = async () => {
-    await Database.updateUser(user.id, {
-      bio: profileForm.bio,
-      email: profileForm.email,
-    })
-    setCurrentUser({ ...currentUser, bio: profileForm.bio, email: profileForm.email })
-    setEditingProfile(false)
-    toast.success('Profile updated successfully')
-  }
-
-  const handlePostComment = async () => {
-    if (!newComment.trim()) {
-      toast.error('Comment cannot be empty')
-      return
-    }
-
-    const comment: Comment = {
-      id: `comment_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-      userId: user.id,
-      content: newComment,
-      createdAt: Date.now(),
-    }
-
-    await Database.addComment(comment)
-    setComments((current) => [...current, comment])
-    setNewComment('')
-    toast.success('Comment posted')
-  }
-
-  const handleDeleteComment = async (commentId: string) => {
-    await Database.deleteComment(commentId)
-    setComments((current) => current.filter(c => c.id !== commentId))
-    toast.success('Comment deleted')
-  }
-
-  const handleRequestPasswordReset = async () => {
-    const newPassword = generateScrambledPassword(16)
-    const passwordHash = await hashPassword(newPassword)
-    await Database.setCredential(currentUser.username, passwordHash)
-    
-    const smtpConfig = await Database.getSMTPConfig()
-    await simulateEmailSend(
-      currentUser.email,
-      'Your New MetaBuilder Password',
-      `Your password has been reset at your request.\n\nUsername: ${currentUser.username}\nNew Password: ${newPassword}\n\nPlease login with this password and change it from your profile settings if desired.`,
-      smtpConfig || undefined
-    )
-    
-    toast.success('New password sent to your email! Check console (simulated email)')
-  }
-
-  const userComments = comments.filter(c => c.userId === user.id)
-  const allComments = comments
+  const {
+    comments,
+    currentUser,
+    editingProfile,
+    newComment,
+    profileForm,
+    users,
+    setEditingProfile,
+    setNewComment,
+    setProfileForm,
+    handleDeleteComment,
+    handlePostComment,
+    handleProfileSave,
+    handleRequestPasswordReset,
+  } = useLevel2State(user as User)
 
   return (
     <div className="min-h-screen bg-background">
@@ -114,8 +43,12 @@ export function Level2({ user, onLogout, onNavigate }: Level2Props) {
         variant="user"
       />
 
-      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <h1 className="text-3xl font-bold mb-8">User Dashboard</h1>
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
+        <IntroSection
+          eyebrow="Level 2"
+          title="User Dashboard"
+          description="Manage your profile, collaborate with the community, and explore live chat."
+        />
 
         <Tabs defaultValue="profile" className="space-y-6">
           <TabsList className="grid w-full grid-cols-3 max-w-lg">
@@ -134,7 +67,7 @@ export function Level2({ user, onLogout, onNavigate }: Level2Props) {
           </TabsList>
 
           <TabsContent value="profile" className="space-y-6">
-            <ProfileCard
+            <ProfileTabContent
               user={currentUser}
               editingProfile={editingProfile}
               profileForm={profileForm}
@@ -147,41 +80,19 @@ export function Level2({ user, onLogout, onNavigate }: Level2Props) {
           </TabsContent>
 
           <TabsContent value="comments" className="space-y-6">
-            <Card>
-              <CardHeader>
-                <CardTitle>Post a Comment</CardTitle>
-                <CardDescription>Share your thoughts with the community</CardDescription>
-              </CardHeader>
-              <CardContent className="space-y-4">
-                <Textarea
-                  value={newComment}
-                  onChange={(e) => setNewComment(e.target.value)}
-                  placeholder="Write your comment here..."
-                  rows={4}
-                />
-                <Button onClick={handlePostComment}>Post Comment</Button>
-              </CardContent>
-            </Card>
-
-            <CommentsList
-              comments={userComments}
-              currentUserId={user.id}
+            <CommentsTabContent
+              comments={comments}
               users={users}
-              onDelete={handleDeleteComment}
-              variant="my"
-            />
-
-            <CommentsList
-              comments={allComments}
               currentUserId={user.id}
-              users={users}
-              onDelete={handleDeleteComment}
-              variant="all"
+              newComment={newComment}
+              onChangeComment={setNewComment}
+              onPostComment={handlePostComment}
+              onDeleteComment={handleDeleteComment}
             />
           </TabsContent>
 
           <TabsContent value="chat" className="space-y-6">
-            <IRCWebchatDeclarative user={currentUser} channelName="general" />
+            <ChatTabContent user={currentUser} />
           </TabsContent>
         </Tabs>
       </div>
diff --git a/frontends/nextjs/src/components/level/levels/Level3.tsx b/frontends/nextjs/src/components/level/levels/Level3.tsx
index 18dc32796..27e65984d 100644
--- a/frontends/nextjs/src/components/level/levels/Level3.tsx
+++ b/frontends/nextjs/src/components/level/levels/Level3.tsx
@@ -1,33 +1,19 @@
 "use client"
 
-import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Badge } from '@/components/ui'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui'
+import { useEffect, useState } from 'react'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-import { MagnifyingGlass, Plus, PencilSimple, Trash, Users, ChatCircle } from '@phosphor-icons/react'
+import { Users, ChatCircle } from '@phosphor-icons/react'
 import { toast } from 'sonner'
 import { getUsers, deleteUser, updateUser } from '@/lib/db/users'
 import { getComments, deleteComment } from '@/lib/db/comments'
 import { AppHeader } from '../../shared/AppHeader'
 import type { User as UserType, Comment } from '@/lib/level-types'
 import type { ModelSchema } from '@/lib/schema-types'
+import { IntroSection } from '../sections/IntroSection'
+import { Level3Stats } from '../level3/Level3Stats'
+import { UserTable } from '../level3/UserTable'
+import { CommentsTable } from '../level3/CommentsTable'
+import { EditUserDialog } from '../level3/EditUserDialog'
 
 interface Level3Props {
   user: UserType
@@ -39,8 +25,8 @@ export function Level3({ user, onLogout, onNavigate }: Level3Props) {
   const [users, setUsers] = useState<UserType[]>([])
   const [comments, setComments] = useState<Comment[]>([])
   const [searchTerm, setSearchTerm] = useState('')
-  const [selectedModel, setSelectedModel] = useState<'users' | 'comments'>('users')
-  const [editingItem, setEditingItem] = useState<any>(null)
+  const [selectedModel, setSelectedModel] = useState<ModelSchema>('users' as ModelSchema)
+  const [editingItem, setEditingItem] = useState<UserType | null>(null)
   const [dialogOpen, setDialogOpen] = useState(false)
 
   useEffect(() => {
@@ -53,21 +39,9 @@ export function Level3({ user, onLogout, onNavigate }: Level3Props) {
     loadData()
   }, [])
 
-  const allUsers = users
-  const allComments = comments
-
-  const filteredUsers = allUsers.filter(u =>
-    u.username.toLowerCase().includes(searchTerm.toLowerCase()) ||
-    u.email.toLowerCase().includes(searchTerm.toLowerCase())
-  )
-
-  const filteredComments = allComments.filter(c =>
-    c.content.toLowerCase().includes(searchTerm.toLowerCase())
-  )
-
   const handleDeleteUser = async (userId: string) => {
     if (userId === user.id) {
-      toast.error("You cannot delete your own account")
+      toast.error('You cannot delete your own account')
       return
     }
     await deleteUser(userId)
@@ -88,11 +62,9 @@ export function Level3({ user, onLogout, onNavigate }: Level3Props) {
 
   const handleSaveUser = async () => {
     if (!editingItem) return
-    
+
     await updateUser(editingItem.id, editingItem)
-    setUsers((current) =>
-      current.map(u => u.id === editingItem.id ? editingItem : u)
-    )
+    setUsers((current) => current.map(u => u.id === editingItem.id ? editingItem : u))
     setDialogOpen(false)
     setEditingItem(null)
     toast.success('User updated')
@@ -109,227 +81,58 @@ export function Level3({ user, onLogout, onNavigate }: Level3Props) {
         variant="admin"
       />
 
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold mb-2">Data Management</h1>
-          <p className="text-muted-foreground">Manage all application data and users</p>
-        </div>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
+        <IntroSection
+          eyebrow="Level 3"
+          title="Data Management"
+          description="Manage all application data and users from a single dashboard."
+        />
 
-        <div className="grid gap-6 md:grid-cols-3 mb-8">
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Total Users</CardTitle>
-              <Users className="text-muted-foreground" size={20} />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{allUsers.length}</div>
-              <p className="text-xs text-muted-foreground">Registered accounts</p>
-            </CardContent>
-          </Card>
+        <Level3Stats users={users} comments={comments} />
 
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Total Comments</CardTitle>
-              <ChatCircle className="text-muted-foreground" size={20} />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">{allComments.length}</div>
-              <p className="text-xs text-muted-foreground">Posted by users</p>
-            </CardContent>
-          </Card>
+        <Tabs value={selectedModel} onValueChange={(v) => setSelectedModel(v as ModelSchema)}>
+          <TabsList className="grid w-full grid-cols-2 max-w-md">
+            <TabsTrigger value="users">
+              <Users className="mr-2" size={16} />
+              Users ({users.length})
+            </TabsTrigger>
+            <TabsTrigger value="comments">
+              <ChatCircle className="mr-2" size={16} />
+              Comments ({comments.length})
+            </TabsTrigger>
+          </TabsList>
 
-          <Card>
-            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-              <CardTitle className="text-sm font-medium">Admins</CardTitle>
-              <Users className="text-muted-foreground" size={20} />
-            </CardHeader>
-            <CardContent>
-              <div className="text-2xl font-bold">
-                {allUsers.filter(u => u.role === 'admin' || u.role === 'god').length}
-              </div>
-              <p className="text-xs text-muted-foreground">Admin & god users</p>
-            </CardContent>
-          </Card>
-        </div>
+          <TabsContent value="users" className="mt-6">
+            <UserTable
+              users={users}
+              searchTerm={searchTerm}
+              onSearchChange={setSearchTerm}
+              onEditUser={handleEditUser}
+              onDeleteUser={handleDeleteUser}
+              currentUserId={user.id}
+              commentCount={comments.length}
+              commentLabel="Comments"
+            />
+          </TabsContent>
 
-        <Card>
-          <CardHeader>
-            <div className="flex items-center justify-between gap-4">
-              <div>
-                <CardTitle>Models</CardTitle>
-                <CardDescription>Browse and manage data models</CardDescription>
-              </div>
-              <div className="flex gap-2">
-                <div className="relative">
-                  <MagnifyingGlass className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground" size={16} />
-                  <Input
-                    placeholder="Search..."
-                    value={searchTerm}
-                    onChange={(e) => setSearchTerm(e.target.value)}
-                    className="pl-9 w-64"
-                  />
-                </div>
-              </div>
-            </div>
-          </CardHeader>
-          <CardContent>
-            <Tabs value={selectedModel} onValueChange={(v) => setSelectedModel(v as any)}>
-              <TabsList className="grid w-full grid-cols-2 max-w-md">
-                <TabsTrigger value="users">
-                  <Users className="mr-2" size={16} />
-                  Users ({allUsers.length})
-                </TabsTrigger>
-                <TabsTrigger value="comments">
-                  <ChatCircle className="mr-2" size={16} />
-                  Comments ({allComments.length})
-                </TabsTrigger>
-              </TabsList>
-
-              <TabsContent value="users" className="mt-6">
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>Username</TableHead>
-                      <TableHead>Email</TableHead>
-                      <TableHead>Role</TableHead>
-                      <TableHead>Created</TableHead>
-                      <TableHead className="text-right">Actions</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {filteredUsers.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={5} className="text-center text-muted-foreground">
-                          No users found
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      filteredUsers.map((u) => (
-                        <TableRow key={u.id}>
-                          <TableCell className="font-medium">{u.username}</TableCell>
-                          <TableCell>{u.email}</TableCell>
-                          <TableCell>
-                            <Badge variant={u.role === 'god' ? 'default' : u.role === 'admin' ? 'secondary' : 'outline'}>
-                              {u.role}
-                            </Badge>
-                          </TableCell>
-                          <TableCell>{new Date(u.createdAt).toLocaleDateString()}</TableCell>
-                          <TableCell className="text-right">
-                            <div className="flex gap-2 justify-end">
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => handleEditUser(u)}
-                              >
-                                <PencilSimple size={16} />
-                              </Button>
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => handleDeleteUser(u.id)}
-                                disabled={u.id === user.id}
-                              >
-                                <Trash size={16} />
-                              </Button>
-                            </div>
-                          </TableCell>
-                        </TableRow>
-                      ))
-                    )}
-                  </TableBody>
-                </Table>
-              </TabsContent>
-
-              <TabsContent value="comments" className="mt-6">
-                <Table>
-                  <TableHeader>
-                    <TableRow>
-                      <TableHead>User</TableHead>
-                      <TableHead>Content</TableHead>
-                      <TableHead>Created</TableHead>
-                      <TableHead className="text-right">Actions</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {filteredComments.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={4} className="text-center text-muted-foreground">
-                          No comments found
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      filteredComments.map((c) => {
-                        const commentUser = allUsers.find(u => u.id === c.userId)
-                        return (
-                          <TableRow key={c.id}>
-                            <TableCell className="font-medium">
-                              {commentUser?.username || 'Unknown'}
-                            </TableCell>
-                            <TableCell className="max-w-md truncate">{c.content}</TableCell>
-                            <TableCell>{new Date(c.createdAt).toLocaleDateString()}</TableCell>
-                            <TableCell className="text-right">
-                              <Button
-                                variant="ghost"
-                                size="sm"
-                                onClick={() => handleDeleteComment(c.id)}
-                              >
-                                <Trash size={16} />
-                              </Button>
-                            </TableCell>
-                          </TableRow>
-                        )
-                      })
-                    )}
-                  </TableBody>
-                </Table>
-              </TabsContent>
-            </Tabs>
-          </CardContent>
-        </Card>
+          <TabsContent value="comments" className="mt-6">
+            <CommentsTable
+              comments={comments}
+              users={users}
+              searchTerm={searchTerm}
+              onDeleteComment={handleDeleteComment}
+            />
+          </TabsContent>
+        </Tabs>
       </div>
 
-      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>Edit User</DialogTitle>
-            <DialogDescription>Update user information</DialogDescription>
-          </DialogHeader>
-          {editingItem && (
-            <div className="space-y-4 pt-4">
-              <div>
-                <label className="text-sm font-medium mb-2 block">Username</label>
-                <Input
-                  value={editingItem.username}
-                  onChange={(e) => setEditingItem({ ...editingItem, username: e.target.value })}
-                />
-              </div>
-              <div>
-                <label className="text-sm font-medium mb-2 block">Email</label>
-                <Input
-                  type="email"
-                  value={editingItem.email}
-                  onChange={(e) => setEditingItem({ ...editingItem, email: e.target.value })}
-                />
-              </div>
-              <div>
-                <label className="text-sm font-medium mb-2 block">Bio</label>
-                <Input
-                  value={editingItem.bio || ''}
-                  onChange={(e) => setEditingItem({ ...editingItem, bio: e.target.value })}
-                />
-              </div>
-              <div className="flex gap-2 justify-end">
-                <Button variant="outline" onClick={() => setDialogOpen(false)}>
-                  Cancel
-                </Button>
-                <Button onClick={handleSaveUser}>
-                  Save Changes
-                </Button>
-              </div>
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
+      <EditUserDialog
+        open={dialogOpen}
+        user={editingItem}
+        onClose={setDialogOpen}
+        onChange={(item) => setEditingItem(item)}
+        onSave={handleSaveUser}
+      />
     </div>
   )
 }
diff --git a/frontends/nextjs/src/components/level/levels/Level4.tsx b/frontends/nextjs/src/components/level/levels/Level4.tsx
index be74a350a..582fa70a4 100644
--- a/frontends/nextjs/src/components/level/levels/Level4.tsx
+++ b/frontends/nextjs/src/components/level/levels/Level4.tsx
@@ -6,6 +6,7 @@ import { Level4Summary } from '../../level4/Level4Summary'
 import { NerdModeIDE } from '../../misc/NerdModeIDE'
 import type { User as UserType } from '@/lib/level-types'
 import { useLevel4AppState } from './hooks/useLevel4AppState'
+import { IntroSection } from '../sections/IntroSection'
 
 interface Level4Props {
   user: UserType
@@ -42,19 +43,20 @@ export function Level4({ user, onLogout, onNavigate, onPreview }: Level4Props) {
         onImportConfig={handleImportConfig}
       />
 
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        <div className="mb-8">
-          <h1 className="text-3xl font-bold mb-2">Application Builder</h1>
-          <p className="text-muted-foreground">
-            {nerdMode
-              ? "Design your application declaratively. Define schemas, create workflows, and write Lua scripts."
-              : "Build your application visually. Configure pages, users, and data models with simple forms."
-            }
-          </p>
-        </div>
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-8">
+        <IntroSection
+          eyebrow="Level 4"
+          title="Application Builder"
+          description={
+            nerdMode
+              ? 'Design your application declaratively. Define schemas, create workflows, and write Lua scripts.'
+              : 'Build your application visually. Configure pages, users, and data models with simple forms.'
+          }
+        />
 
         <Level4Tabs
           appConfig={appConfig}
+          user={user}
           nerdMode={nerdMode}
           onSchemasChange={handleSchemasChange}
           onWorkflowsChange={handleWorkflowsChange}
diff --git a/frontends/nextjs/src/components/level/levels/Level5.tsx b/frontends/nextjs/src/components/level/levels/Level5.tsx
index d17a5814d..a233f371f 100644
--- a/frontends/nextjs/src/components/level/levels/Level5.tsx
+++ b/frontends/nextjs/src/components/level/levels/Level5.tsx
@@ -1,43 +1,13 @@
 "use client"
 
-import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Label } from '@/components/ui'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui'
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from '@/components/ui'
-import { Crown, Buildings, Users, ArrowsLeftRight, Eye, Camera, Warning } from '@phosphor-icons/react'
-import { toast } from 'sonner'
 import { Level5Header } from '../../level5/header/Level5Header'
-import { TenantsTab } from '../../level5/tabs/TenantsTab'
-import { GodUsersTab } from '../../level5/tabs/GodUsersTab'
-import { PowerTransferTab } from '../../level5/tabs/power-transfer/PowerTransferTab'
-import { PreviewTab } from '../../level5/tabs/PreviewTab'
-import { ErrorLogsTab } from '../../level5/tabs/error-logs/ErrorLogsTab'
-import { ScreenshotAnalyzer } from '../../misc/demos/ScreenshotAnalyzer'
 import { NerdModeIDE } from '../../misc/NerdModeIDE'
-import type { User, AppLevel, Tenant } from '@/lib/level-types'
-import { Database } from '@/lib/database'
-import { createPowerTransferRequest } from '@/lib/api/power-transfers'
-import { fetchUsers } from '@/lib/api/users/fetch-users'
-import { useKV } from '@github/spark/hooks'
+import type { User, AppLevel } from '@/lib/level-types'
+import { IntroSection } from '../sections/IntroSection'
+import { useLevel5State } from './hooks/useLevel5State'
+import { Level5Navigator } from '../level5/Level5Navigator'
+import { CreateTenantDialog } from '../level5/CreateTenantDialog'
+import { TransferConfirmDialog } from '../level5/TransferConfirmDialog'
 
 export interface Level5Props {
   user: User
@@ -46,113 +16,28 @@ export interface Level5Props {
   onPreview: (level: AppLevel) => void
 }
 
-export function Level5({ user, onLogout, onNavigate, onPreview }: Level5Props) {
-  const [tenants, setTenants] = useState<Tenant[]>([])
-  const [allUsers, setAllUsers] = useState<User[]>([])
-  const [godUsers, setGodUsers] = useState<User[]>([])
-  const [transferRefresh, setTransferRefresh] = useState(0)
-  const [showTransferDialog, setShowTransferDialog] = useState(false)
-  const [showConfirmTransfer, setShowConfirmTransfer] = useState(false)
-  const [selectedUserId, setSelectedUserId] = useState('')
-  const [newTenantName, setNewTenantName] = useState('')
-  const [showCreateTenant, setShowCreateTenant] = useState(false)
-  const [nerdMode, setNerdMode] = useKV<boolean>('level5-nerd-mode', false)
-
-  useEffect(() => {
-    loadData()
-  }, [])
-
-  const loadData = async () => {
-    const [tenantsData, usersData] = await Promise.all([
-      Database.getTenants(),
-      fetchUsers(),
-    ])
-    
-    setTenants(tenantsData)
-    setAllUsers(usersData)
-    setGodUsers(usersData.filter(u => u.role === 'god'))
-  }
-
-  const handleCreateTenant = async () => {
-    if (!newTenantName.trim()) {
-      toast.error('Tenant name is required')
-      return
-    }
-
-    const newTenant: Tenant = {
-      id: `tenant_${Date.now()}`,
-      name: newTenantName,
-      ownerId: user.id,
-      createdAt: Date.now(),
-    }
-
-    await Database.addTenant(newTenant)
-    setTenants(current => [...current, newTenant])
-    setNewTenantName('')
-    setShowCreateTenant(false)
-    toast.success('Tenant created successfully')
-  }
-
-  const handleAssignHomepage = async (tenantId: string, pageId: string) => {
-    await Database.updateTenant(tenantId, {
-      homepageConfig: { pageId },
-    })
-    await loadData()
-    toast.success('Homepage assigned to tenant')
-  }
-
-  const handleInitiateTransfer = (userId: string) => {
-    if (!userId) {
-      toast.error('Please select a user to transfer power to')
-      return
-    }
-    setSelectedUserId(userId)
-    setShowConfirmTransfer(true)
-  }
-
-  const handleConfirmTransfer = async () => {
-    if (!selectedUserId) return
-
-    const targetUser = allUsers.find((u) => u.id === selectedUserId)
-    if (!targetUser) {
-      toast.error('Selected user not found')
-      setShowConfirmTransfer(false)
-      return
-    }
-
-    try {
-      await createPowerTransferRequest({
-        fromUserId: user.id,
-        toUserId: selectedUserId,
-      })
-
-      toast.success(
-        `Power transferred to ${targetUser.username}. You are now a God user and will be logged out shortly.`
-      )
-      setTransferRefresh((prev) => prev + 1)
-      await loadData()
-
-      setTimeout(() => {
-        onLogout()
-      }, 2000)
-    } catch (error) {
-      toast.error('Failed to transfer power: ' + (error as Error).message)
-    } finally {
-      setShowConfirmTransfer(false)
-      setSelectedUserId('')
-    }
-  }
-
-  const handleDeleteTenant = async (tenantId: string) => {
-    await Database.deleteTenant(tenantId)
-    setTenants(current => current.filter(t => t.id !== tenantId))
-    toast.success('Tenant deleted')
-  }
-
-  const handleToggleNerdMode = () => {
-    setNerdMode(!nerdMode)
-    toast.info(nerdMode ? 'Nerd Mode disabled' : 'Nerd Mode enabled')
-  }
+export function Level5({ user, onLogout, onNavigate: _onNavigate, onPreview }: Level5Props) {
+  const {
+    tenants,
+    allUsers,
+    godUsers,
+    transferRefresh,
+    showConfirmTransfer,
+    selectedUserId,
+    newTenantName,
+    showCreateTenant,
+    nerdMode,
+    setNewTenantName,
+    setShowCreateTenant,
+    setShowConfirmTransfer,
+    setSelectedUserId,
+    handleAssignHomepage,
+    handleConfirmTransfer,
+    handleCreateTenant,
+    handleDeleteTenant,
+    handleInitiateTransfer,
+    handleToggleNerdMode,
+  } = useLevel5State({ user, onLogout })
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-purple-950 via-slate-900 to-indigo-950">
@@ -163,130 +48,42 @@ export function Level5({ user, onLogout, onNavigate, onPreview }: Level5Props) {
         onToggleNerdMode={handleToggleNerdMode}
       />
 
-      <main className="max-w-7xl mx-auto px-4 py-8">
-        <Tabs defaultValue="tenants" className="space-y-6">
-          <TabsList className="bg-black/40 border border-white/10">
-            <TabsTrigger value="tenants" className="data-[state=active]:bg-purple-600">
-              <Buildings className="w-4 h-4 mr-2" />
-              Tenants
-            </TabsTrigger>
-            <TabsTrigger value="gods" className="data-[state=active]:bg-purple-600">
-              <Users className="w-4 h-4 mr-2" />
-              God Users
-            </TabsTrigger>
-            <TabsTrigger value="power" className="data-[state=active]:bg-purple-600">
-              <ArrowsLeftRight className="w-4 h-4 mr-2" />
-              Power Transfer
-            </TabsTrigger>
-            <TabsTrigger value="preview" className="data-[state=active]:bg-purple-600">
-              <Eye className="w-4 h-4 mr-2" />
-              Preview Levels
-            </TabsTrigger>
-            <TabsTrigger value="screenshot" className="data-[state=active]:bg-purple-600">
-              <Camera className="w-4 h-4 mr-2" />
-              Screenshot
-            </TabsTrigger>
-            <TabsTrigger value="errorlogs" className="data-[state=active]:bg-purple-600">
-              <Warning className="w-4 h-4 mr-2" />
-              Error Logs
-            </TabsTrigger>
-          </TabsList>
+      <main className="max-w-7xl mx-auto px-4 py-8 space-y-8">
+        <IntroSection
+          eyebrow="Level 5"
+          title="Super God Panel"
+          description="Govern tenants, manage god users, and handle cross-level operations."
+        />
 
-          <TabsContent value="tenants" className="space-y-4">
-            <TenantsTab
-              tenants={tenants}
-              allUsers={allUsers}
-              onCreateTenant={() => setShowCreateTenant(true)}
-              onDeleteTenant={handleDeleteTenant}
-            />
-          </TabsContent>
-
-          <TabsContent value="gods" className="space-y-4">
-            <GodUsersTab godUsers={godUsers} />
-          </TabsContent>
-
-          <TabsContent value="power" className="space-y-4">
-          <PowerTransferTab
-            currentUser={user}
-            allUsers={allUsers}
-            onInitiateTransfer={handleInitiateTransfer}
-            refreshSignal={transferRefresh}
-          />
-          </TabsContent>
-
-          <TabsContent value="preview" className="space-y-4">
-            <PreviewTab onPreview={onPreview} />
-          </TabsContent>
-
-          <TabsContent value="screenshot" className="space-y-4">
-            <ScreenshotAnalyzer />
-          </TabsContent>
-
-          <TabsContent value="errorlogs" className="space-y-4">
-            <ErrorLogsTab user={user} />
-          </TabsContent>
-        </Tabs>
+        <Level5Navigator
+          tenants={tenants}
+          allUsers={allUsers}
+          godUsers={godUsers}
+          transferRefresh={transferRefresh}
+          currentUser={user}
+          onCreateTenant={() => setShowCreateTenant(true)}
+          onDeleteTenant={handleDeleteTenant}
+          onAssignHomepage={handleAssignHomepage}
+          onInitiateTransfer={handleInitiateTransfer}
+          onPreview={onPreview}
+        />
       </main>
 
-      <Dialog open={showCreateTenant} onOpenChange={setShowCreateTenant}>
-        <DialogContent className="bg-slate-900 border-white/10 text-white">
-          <DialogHeader>
-            <DialogTitle>Create New Tenant</DialogTitle>
-            <DialogDescription className="text-gray-400">
-              Create a new tenant instance with its own homepage configuration
-            </DialogDescription>
-          </DialogHeader>
-          <div className="space-y-4">
-            <div>
-              <Label htmlFor="tenant-name">Tenant Name</Label>
-              <Input
-                id="tenant-name"
-                value={newTenantName}
-                onChange={(e) => setNewTenantName(e.target.value)}
-                placeholder="Enter tenant name"
-                className="bg-white/5 border-white/10 text-white"
-              />
-            </div>
-          </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setShowCreateTenant(false)} className="border-white/20 text-white hover:bg-white/10">
-              Cancel
-            </Button>
-            <Button onClick={handleCreateTenant} className="bg-purple-600 hover:bg-purple-700">
-              Create
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <CreateTenantDialog
+        open={showCreateTenant}
+        newTenantName={newTenantName}
+        onChangeTenantName={setNewTenantName}
+        onClose={setShowCreateTenant}
+        onCreate={handleCreateTenant}
+      />
 
-      <AlertDialog open={showConfirmTransfer} onOpenChange={setShowConfirmTransfer}>
-        <AlertDialogContent className="bg-slate-900 border-white/10 text-white">
-          <AlertDialogHeader>
-            <AlertDialogTitle className="flex items-center gap-2 text-amber-300">
-              <Crown className="w-6 h-6" weight="fill" />
-              Confirm Power Transfer
-            </AlertDialogTitle>
-            <AlertDialogDescription className="text-gray-400">
-              Are you absolutely sure? This will transfer your Super God privileges to{' '}
-              <span className="font-semibold text-white">
-                {allUsers.find(u => u.id === selectedUserId)?.username}
-              </span>
-              . You will be downgraded to God level and cannot reverse this action.
-            </AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel className="border-white/20 text-white hover:bg-white/10">
-              Cancel
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={handleConfirmTransfer}
-              className="bg-gradient-to-r from-amber-600 to-yellow-600 hover:from-amber-700 hover:to-yellow-700"
-            >
-              Transfer Power
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
+      <TransferConfirmDialog
+        open={showConfirmTransfer}
+        allUsers={allUsers}
+        selectedUserId={selectedUserId}
+        onClose={setShowConfirmTransfer}
+        onConfirm={handleConfirmTransfer}
+      />
 
       {nerdMode && (
         <div className="fixed bottom-4 right-4 w-[calc(100%-2rem)] max-w-[1400px] h-[600px] z-50 shadow-2xl">
diff --git a/frontends/nextjs/src/components/level/levels/hooks/useLevel2State.ts b/frontends/nextjs/src/components/level/levels/hooks/useLevel2State.ts
new file mode 100644
index 000000000..df2809f6c
--- /dev/null
+++ b/frontends/nextjs/src/components/level/levels/hooks/useLevel2State.ts
@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import { Database, hashPassword } from '@/lib/database'
+import { generateScrambledPassword, simulateEmailSend } from '@/lib/password-utils'
+import type { Comment, User } from '@/lib/level-types'
+
+export function useLevel2State(user: User) {
+  const [currentUser, setCurrentUser] = useState<User>(user)
+  const [users, setUsers] = useState<User[]>([])
+  const [comments, setComments] = useState<Comment[]>([])
+  const [newComment, setNewComment] = useState('')
+  const [editingProfile, setEditingProfile] = useState(false)
+  const [profileForm, setProfileForm] = useState({ bio: user.bio || '', email: user.email })
+
+  useEffect(() => {
+    const loadData = async () => {
+      const loadedUsers = await Database.getUsers({ scope: 'all' })
+      setUsers(loadedUsers)
+      const foundUser = loadedUsers.find(u => u.id === user.id)
+      if (foundUser) {
+        setCurrentUser(foundUser)
+        setProfileForm({ bio: foundUser.bio || '', email: foundUser.email })
+      }
+      const loadedComments = await Database.getComments()
+      setComments(loadedComments)
+    }
+    void loadData()
+  }, [user.id])
+
+  const handleProfileSave = async () => {
+    await Database.updateUser(user.id, { bio: profileForm.bio, email: profileForm.email })
+    setCurrentUser({ ...currentUser, bio: profileForm.bio, email: profileForm.email })
+    setEditingProfile(false)
+    toast.success('Profile updated successfully')
+  }
+
+  const handlePostComment = async () => {
+    if (!newComment.trim()) {
+      toast.error('Comment cannot be empty')
+      return
+    }
+
+    const comment: Comment = {
+      id: `comment_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+      userId: user.id,
+      content: newComment,
+      createdAt: Date.now(),
+    }
+
+    await Database.addComment(comment)
+    setComments((current) => [...current, comment])
+    setNewComment('')
+    toast.success('Comment posted')
+  }
+
+  const handleDeleteComment = async (commentId: string) => {
+    await Database.deleteComment(commentId)
+    setComments((current) => current.filter(c => c.id !== commentId))
+    toast.success('Comment deleted')
+  }
+
+  const handleRequestPasswordReset = async () => {
+    const newPassword = generateScrambledPassword(16)
+    const passwordHash = await hashPassword(newPassword)
+    await Database.setCredential(currentUser.username, passwordHash)
+
+    const smtpConfig = await Database.getSMTPConfig()
+    await simulateEmailSend(
+      currentUser.email,
+      'Your New MetaBuilder Password',
+      `Your password has been reset at your request.\n\nUsername: ${currentUser.username}\nNew Password: ${newPassword}\n\nPlease login with this password and change it from your profile settings if desired.`,
+      smtpConfig || undefined
+    )
+
+    toast.success('New password sent to your email! Check console (simulated email)')
+  }
+
+  return {
+    comments,
+    currentUser,
+    editingProfile,
+    newComment,
+    profileForm,
+    users,
+    setEditingProfile,
+    setNewComment,
+    setProfileForm,
+    handleDeleteComment,
+    handlePostComment,
+    handleProfileSave,
+    handleRequestPasswordReset,
+  }
+}
diff --git a/frontends/nextjs/src/components/level/levels/hooks/useLevel5State.ts b/frontends/nextjs/src/components/level/levels/hooks/useLevel5State.ts
new file mode 100644
index 000000000..cf277b87e
--- /dev/null
+++ b/frontends/nextjs/src/components/level/levels/hooks/useLevel5State.ts
@@ -0,0 +1,133 @@
+import { useEffect, useState } from 'react'
+import { toast } from 'sonner'
+import { useKV } from '@github/spark/hooks'
+import { Database } from '@/lib/database'
+import { createPowerTransferRequest } from '@/lib/api/power-transfers'
+import { fetchUsers } from '@/lib/api/users/fetch-users'
+import type { Tenant, User } from '@/lib/level-types'
+
+interface Level5StateOptions {
+  user: User
+  onLogout: () => void
+}
+
+export function useLevel5State({ user, onLogout }: Level5StateOptions) {
+  const [tenants, setTenants] = useState<Tenant[]>([])
+  const [allUsers, setAllUsers] = useState<User[]>([])
+  const [godUsers, setGodUsers] = useState<User[]>([])
+  const [transferRefresh, setTransferRefresh] = useState(0)
+  const [showConfirmTransfer, setShowConfirmTransfer] = useState(false)
+  const [selectedUserId, setSelectedUserId] = useState('')
+  const [newTenantName, setNewTenantName] = useState('')
+  const [showCreateTenant, setShowCreateTenant] = useState(false)
+  const [nerdMode, setNerdMode] = useKV<boolean>('level5-nerd-mode', false)
+
+  useEffect(() => {
+    void loadData()
+  }, [])
+
+  const loadData = async () => {
+    const [tenantsData, usersData] = await Promise.all([Database.getTenants(), fetchUsers()])
+
+    setTenants(tenantsData)
+    setAllUsers(usersData)
+    setGodUsers(usersData.filter(u => u.role === 'god'))
+  }
+
+  const handleCreateTenant = async () => {
+    if (!newTenantName.trim()) {
+      toast.error('Tenant name is required')
+      return
+    }
+
+    const newTenant: Tenant = {
+      id: `tenant_${Date.now()}`,
+      name: newTenantName,
+      ownerId: user.id,
+      createdAt: Date.now(),
+    }
+
+    await Database.addTenant(newTenant)
+    setTenants(current => [...current, newTenant])
+    setNewTenantName('')
+    setShowCreateTenant(false)
+    toast.success('Tenant created successfully')
+  }
+
+  const handleAssignHomepage = async (tenantId: string, pageId: string) => {
+    await Database.updateTenant(tenantId, { homepageConfig: { pageId } })
+    await loadData()
+    toast.success('Homepage assigned to tenant')
+  }
+
+  const handleInitiateTransfer = (userId: string) => {
+    if (!userId) {
+      toast.error('Please select a user to transfer power to')
+      return
+    }
+    setSelectedUserId(userId)
+    setShowConfirmTransfer(true)
+  }
+
+  const handleConfirmTransfer = async () => {
+    if (!selectedUserId) return
+
+    const targetUser = allUsers.find((u) => u.id === selectedUserId)
+    if (!targetUser) {
+      toast.error('Selected user not found')
+      setShowConfirmTransfer(false)
+      return
+    }
+
+    try {
+      await createPowerTransferRequest({ fromUserId: user.id, toUserId: selectedUserId })
+
+      toast.success(`Power transferred to ${targetUser.username}. You are now a God user and will be logged out shortly.`)
+      setTransferRefresh((prev) => prev + 1)
+      await loadData()
+
+      setTimeout(() => {
+        onLogout()
+      }, 2000)
+    } catch (error) {
+      toast.error('Failed to transfer power: ' + (error as Error).message)
+    } finally {
+      setShowConfirmTransfer(false)
+      setSelectedUserId('')
+    }
+  }
+
+  const handleDeleteTenant = async (tenantId: string) => {
+    await Database.deleteTenant(tenantId)
+    setTenants(current => current.filter(t => t.id !== tenantId))
+    toast.success('Tenant deleted')
+  }
+
+  const handleToggleNerdMode = () => {
+    setNerdMode(!nerdMode)
+    toast.info(nerdMode ? 'Nerd Mode disabled' : 'Nerd Mode enabled')
+  }
+
+  return {
+    tenants,
+    allUsers,
+    godUsers,
+    transferRefresh,
+    showConfirmTransfer,
+    selectedUserId,
+    newTenantName,
+    showCreateTenant,
+    nerdMode,
+    setNewTenantName,
+    setShowCreateTenant,
+    setShowConfirmTransfer,
+    setSelectedUserId,
+    handleAssignHomepage,
+    handleConfirmTransfer,
+    handleCreateTenant,
+    handleDeleteTenant,
+    handleInitiateTransfer,
+    handleToggleNerdMode,
+    loadData,
+  }
+}
diff --git a/frontends/nextjs/src/components/level/panels/ModeratorPanel.tsx b/frontends/nextjs/src/components/level/panels/ModeratorPanel.tsx
index 514ccdb25..f811601a0 100644
--- a/frontends/nextjs/src/components/level/panels/ModeratorPanel.tsx
+++ b/frontends/nextjs/src/components/level/panels/ModeratorPanel.tsx
@@ -1,22 +1,13 @@
 "use client"
 
 import { useEffect, useMemo, useState } from 'react'
-import { Button } from '@/components/ui'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { Badge } from '@/components/ui'
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from '@/components/ui'
-import { Stack, Typography } from '@/components/ui'
 import { toast } from 'sonner'
+import { AppHeader } from '@/components/shared/AppHeader'
 import { Database } from '@/lib/database'
 import type { Comment, User } from '@/lib/level-types'
-import { AppHeader } from '@/components/shared/AppHeader'
+import { ModeratorActions } from './ModeratorPanel/Actions'
+import { ModeratorHeader } from './ModeratorPanel/Header'
+import { ModeratorLogList } from './ModeratorPanel/LogList'
 
 const FLAGGED_TERMS = ['spam', 'error', 'abuse', 'illegal', 'urgent', 'offensive']
 
@@ -70,8 +61,6 @@ export function ModeratorPanel({ user, onLogout, onNavigate }: ModeratorPanelPro
     toast.success('Flag resolved and archived from the queue')
   }
 
-  const highlightLabel = (term: string) => term.charAt(0).toUpperCase() + term.slice(1)
-
   return (
     <div className="min-h-screen bg-background">
       <AppHeader
@@ -85,116 +74,19 @@ export function ModeratorPanel({ user, onLogout, onNavigate }: ModeratorPanelPro
       />
 
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 space-y-6">
-        <div className="space-y-2">
-          <Typography variant="h4">Moderation queue</Typography>
-          <Typography color="text.secondary">
-            Keep the community healthy by resolving flags, reviewing reports, and guiding the tone.
-          </Typography>
-        </div>
-
-        <div className="grid gap-6 md:grid-cols-3">
-          <Card>
-            <CardHeader>
-              <CardTitle>Flagged content</CardTitle>
-              <CardDescription>Automated signal based on keywords</CardDescription>
-            </CardHeader>
-            <CardContent>
-              <Typography variant="h3">{flaggedComments.length}</Typography>
-              <Typography color="text.secondary" className="mt-2">
-                Pending items in the moderation queue
-              </Typography>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Resolved this session</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Typography variant="h3">{resolvedIds.length}</Typography>
-              <Typography color="text.secondary" className="mt-2">
-                Items you flagged as handled
-              </Typography>
-            </CardContent>
-          </Card>
-
-          <Card>
-            <CardHeader>
-              <CardTitle>Community signals</CardTitle>
-            </CardHeader>
-            <CardContent>
-              <Stack direction="row" spacing={1} flexWrap="wrap">
-                {FLAGGED_TERMS.map((term) => (
-                  <Badge key={term}>{highlightLabel(term)}</Badge>
-                ))}
-              </Stack>
-              <Typography color="text.secondary" className="mt-2">
-                Track the keywords that pulled items into the queue
-              </Typography>
-            </CardContent>
-          </Card>
-        </div>
-
-        <Card>
-          <CardHeader>
-            <div className="flex items-center justify-between gap-4">
-              <div>
-                <CardTitle>Flagged comments</CardTitle>
-                <CardDescription>A curated view of the comments that triggered a signal</CardDescription>
-              </div>
-              <Button variant="ghost" size="sm" onClick={() => onNavigate(2)}>
-                Go to user dashboard
-              </Button>
-            </div>
-          </CardHeader>
-          <CardContent>
-            {isLoading ? (
-              <Typography color="text.secondary">Loading flagged comments…</Typography>
-            ) : flaggedComments.length === 0 ? (
-              <Typography color="text.secondary">
-                No flagged comments at the moment. Enjoy the calm.
-              </Typography>
-            ) : (
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead>User</TableHead>
-                    <TableHead>Comment</TableHead>
-                    <TableHead>Matched terms</TableHead>
-                    <TableHead className="text-right">Actions</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {flaggedComments.map((comment) => {
-                    const matches = FLAGGED_TERMS.filter((term) =>
-                      comment.content.toLowerCase().includes(term)
-                    )
-                    return (
-                      <TableRow key={comment.id}>
-                        <TableCell className="font-mono text-sm">{comment.userId}</TableCell>
-                        <TableCell>{comment.content}</TableCell>
-                        <TableCell>
-                          <Stack direction="row" spacing={1} flexWrap="wrap">
-                            {matches.map((match) => (
-                              <Badge key={`${comment.id}-${match}`} variant="outline">
-                                {match}
-                              </Badge>
-                            ))}
-                          </Stack>
-                        </TableCell>
-                        <TableCell className="text-right">
-                          <Button size="sm" variant="ghost" onClick={() => handleResolve(comment.id)}>
-                            Mark safe
-                          </Button>
-                        </TableCell>
-                      </TableRow>
-                    )
-                  })}
-                </TableBody>
-              </Table>
-            )}
-          </CardContent>
-        </Card>
+        <ModeratorHeader />
+        <ModeratorActions
+          flaggedCount={flaggedComments.length}
+          resolvedCount={resolvedIds.length}
+          flaggedTerms={FLAGGED_TERMS}
+        />
+        <ModeratorLogList
+          flaggedComments={flaggedComments}
+          flaggedTerms={FLAGGED_TERMS}
+          isLoading={isLoading}
+          onNavigate={onNavigate}
+          onResolve={handleResolve}
+        />
       </div>
     </div>
   )
diff --git a/frontends/nextjs/src/components/level/panels/ModeratorPanel/Actions.tsx b/frontends/nextjs/src/components/level/panels/ModeratorPanel/Actions.tsx
new file mode 100644
index 000000000..8bfa78c49
--- /dev/null
+++ b/frontends/nextjs/src/components/level/panels/ModeratorPanel/Actions.tsx
@@ -0,0 +1,56 @@
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle, Stack, Typography } from '@/components/ui'
+
+interface ModeratorActionsProps {
+  flaggedCount: number
+  resolvedCount: number
+  flaggedTerms: string[]
+}
+
+export function ModeratorActions({ flaggedCount, resolvedCount, flaggedTerms }: ModeratorActionsProps) {
+  const highlightLabel = (term: string) => term.charAt(0).toUpperCase() + term.slice(1)
+
+  return (
+    <div className="grid gap-6 md:grid-cols-3">
+      <Card>
+        <CardHeader>
+          <CardTitle>Flagged content</CardTitle>
+          <CardDescription>Automated signal based on keywords</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Typography variant="h3">{flaggedCount}</Typography>
+          <Typography color="text.secondary" className="mt-2">
+            Pending items in the moderation queue
+          </Typography>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Resolved this session</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Typography variant="h3">{resolvedCount}</Typography>
+          <Typography color="text.secondary" className="mt-2">
+            Items you flagged as handled
+          </Typography>
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Community signals</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Stack direction="row" spacing={1} flexWrap="wrap">
+            {flaggedTerms.map((term) => (
+              <Badge key={term}>{highlightLabel(term)}</Badge>
+            ))}
+          </Stack>
+          <Typography color="text.secondary" className="mt-2">
+            Track the keywords that pulled items into the queue
+          </Typography>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/panels/ModeratorPanel/Header.tsx b/frontends/nextjs/src/components/level/panels/ModeratorPanel/Header.tsx
new file mode 100644
index 000000000..cb86c4a0a
--- /dev/null
+++ b/frontends/nextjs/src/components/level/panels/ModeratorPanel/Header.tsx
@@ -0,0 +1,12 @@
+import { Typography } from '@/components/ui'
+
+export function ModeratorHeader() {
+  return (
+    <div className="space-y-2">
+      <Typography variant="h4">Moderation queue</Typography>
+      <Typography color="text.secondary">
+        Keep the community healthy by resolving flags, reviewing reports, and guiding the tone.
+      </Typography>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/panels/ModeratorPanel/LogList.tsx b/frontends/nextjs/src/components/level/panels/ModeratorPanel/LogList.tsx
new file mode 100644
index 000000000..b133c6b0b
--- /dev/null
+++ b/frontends/nextjs/src/components/level/panels/ModeratorPanel/LogList.tsx
@@ -0,0 +1,83 @@
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Stack } from '@/components/ui'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, Typography } from '@/components/ui'
+import type { Comment } from '@/lib/level-types'
+
+interface ModeratorLogListProps {
+  flaggedComments: Comment[]
+  flaggedTerms: string[]
+  isLoading: boolean
+  onNavigate: (level: number) => void
+  onResolve: (commentId: string) => void
+}
+
+export function ModeratorLogList({
+  flaggedComments,
+  flaggedTerms,
+  isLoading,
+  onNavigate,
+  onResolve,
+}: ModeratorLogListProps) {
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center justify-between gap-4">
+          <div>
+            <CardTitle>Flagged comments</CardTitle>
+            <CardDescription>A curated view of the comments that triggered a signal</CardDescription>
+          </div>
+          <Button variant="ghost" size="sm" onClick={() => onNavigate(2)}>
+            Go to user dashboard
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {isLoading ? (
+          <Typography color="text.secondary">Loading flagged comments…</Typography>
+        ) : flaggedComments.length === 0 ? (
+          <Typography color="text.secondary">
+            No flagged comments at the moment. Enjoy the calm.
+          </Typography>
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>User</TableHead>
+                <TableHead>Comment</TableHead>
+                <TableHead>Matched terms</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {flaggedComments.map((comment) => {
+                const matches = flaggedTerms.filter((term) =>
+                  comment.content.toLowerCase().includes(term)
+                )
+
+                return (
+                  <TableRow key={comment.id}>
+                    <TableCell className="font-mono text-sm">{comment.userId}</TableCell>
+                    <TableCell>{comment.content}</TableCell>
+                    <TableCell>
+                      <Stack direction="row" spacing={1} flexWrap="wrap">
+                        {matches.map((match) => (
+                          <Badge key={`${comment.id}-${match}`} variant="outline">
+                            {match}
+                          </Badge>
+                        ))}
+                      </Stack>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <Button size="sm" variant="ghost" onClick={() => onResolve(comment.id)}>
+                        Mark safe
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
+            </TableBody>
+          </Table>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/sections/ChallengePanel.tsx b/frontends/nextjs/src/components/level/sections/ChallengePanel.tsx
new file mode 100644
index 000000000..720497e8e
--- /dev/null
+++ b/frontends/nextjs/src/components/level/sections/ChallengePanel.tsx
@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
+
+interface ChallengePanelProps {
+  title: string
+  description?: ReactNode
+  actions?: ReactNode
+  children: ReactNode
+}
+
+export function ChallengePanel({ title, description, actions, children }: ChallengePanelProps) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <CardTitle>{title}</CardTitle>
+          {description && <CardDescription>{description}</CardDescription>}
+        </div>
+        {actions && <div className="flex items-center gap-2">{actions}</div>}
+      </CardHeader>
+      <CardContent className="space-y-4">{children}</CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/sections/IntroSection.tsx b/frontends/nextjs/src/components/level/sections/IntroSection.tsx
new file mode 100644
index 000000000..c91967631
--- /dev/null
+++ b/frontends/nextjs/src/components/level/sections/IntroSection.tsx
@@ -0,0 +1,26 @@
+import type { ReactNode } from 'react'
+
+interface IntroSectionProps {
+  title: string
+  description?: ReactNode
+  eyebrow?: string
+  actions?: ReactNode
+  children?: ReactNode
+  id?: string
+}
+
+export function IntroSection({ title, description, eyebrow, actions, children, id }: IntroSectionProps) {
+  return (
+    <section id={id} className="space-y-6">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
+        <div className="space-y-2">
+          {eyebrow && <p className="text-sm font-medium text-muted-foreground">{eyebrow}</p>}
+          <h1 className="text-3xl font-bold leading-tight tracking-tight">{title}</h1>
+          {description && <p className="text-muted-foreground text-lg max-w-3xl">{description}</p>}
+        </div>
+        {actions && <div className="flex items-center gap-3">{actions}</div>}
+      </div>
+      {children && <div className="space-y-4">{children}</div>}
+    </section>
+  )
+}
diff --git a/frontends/nextjs/src/components/level/sections/ResultsPane.tsx b/frontends/nextjs/src/components/level/sections/ResultsPane.tsx
new file mode 100644
index 000000000..39f13bebc
--- /dev/null
+++ b/frontends/nextjs/src/components/level/sections/ResultsPane.tsx
@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
+
+interface ResultsPaneProps {
+  title: string
+  description?: ReactNode
+  children: ReactNode
+}
+
+export function ResultsPane({ title, description, children }: ResultsPaneProps) {
+  return (
+    <Card className="bg-muted/30">
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+        {description && <CardDescription>{description}</CardDescription>}
+      </CardHeader>
+      <CardContent className="space-y-4">{children}</CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/level4/Level4Tabs.tsx b/frontends/nextjs/src/components/level4/Level4Tabs.tsx
index 69ec06924..bba0cac5d 100644
--- a/frontends/nextjs/src/components/level4/Level4Tabs.tsx
+++ b/frontends/nextjs/src/components/level4/Level4Tabs.tsx
@@ -1,23 +1,7 @@
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-import { Database as DatabaseIcon, Lightning, Code, BookOpen, HardDrives, MapTrifold, Tree, Users, Gear, Palette, ListDashes, Sparkle, Package, SquaresFour, Warning } from '@phosphor-icons/react'
-import { SchemaEditorLevel4 } from '@/components/SchemaEditorLevel4'
-import { WorkflowEditor } from '@/components/WorkflowEditor'
-import { LuaEditor } from '@/components/editors/lua/LuaEditor'
-import { LuaBlocksEditor } from '@/components/editors/lua/LuaBlocksEditor'
-import { LuaSnippetLibrary } from '@/components/editors/lua/LuaSnippetLibrary'
-import { DatabaseManager } from '@/components/managers/database/DatabaseManager'
-import { PageRoutesManager } from '@/components/managers/PageRoutesManager'
-import { ComponentHierarchyEditor } from '@/components/ComponentHierarchyEditor'
-import { UserManagement } from '@/components/UserManagement'
-import { GodCredentialsSettings } from '@/components/GodCredentialsSettings'
-import { CssClassManager } from '@/components/CssClassManager'
-import { DropdownConfigManager } from '@/components/DropdownConfigManager'
-import { QuickGuide } from '@/components/QuickGuide'
-import { PackageManager } from '@/components/PackageManager'
-import { ThemeEditor } from '@/components/ThemeEditor'
-import { SMTPConfigEditor } from '@/components/SMTPConfigEditor'
-import { ErrorLogsTab } from '@/components/level5/tabs/error-logs/ErrorLogsTab'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui'
 import type { AppConfiguration, User } from '@/lib/level-types'
+import { level4TabsConfig } from './tabs/config'
+import { TabContent } from './tabs/TabContent'
 
 interface Level4TabsProps {
   appConfig: AppConfiguration
@@ -36,153 +20,31 @@ export function Level4Tabs({
   onWorkflowsChange,
   onLuaScriptsChange,
 }: Level4TabsProps) {
+  const visibleTabs = level4TabsConfig.filter((tab) => (tab.nerdOnly ? nerdMode : true))
+
   return (
     <Tabs defaultValue="guide" className="space-y-6">
       <TabsList className={nerdMode ? "grid w-full grid-cols-4 lg:grid-cols-14 max-w-full" : "grid w-full grid-cols-3 lg:grid-cols-7 max-w-full"}>
-        <TabsTrigger value="guide">
-          <Sparkle className="mr-2" size={16} />
-          Guide
-        </TabsTrigger>
-        <TabsTrigger value="packages">
-          <Package className="mr-2" size={16} />
-          Packages
-        </TabsTrigger>
-        <TabsTrigger value="pages">
-          <MapTrifold className="mr-2" size={16} />
-          Page Routes
-        </TabsTrigger>
-        <TabsTrigger value="hierarchy">
-          <Tree className="mr-2" size={16} />
-          Components
-        </TabsTrigger>
-        <TabsTrigger value="users">
-          <Users className="mr-2" size={16} />
-          Users
-        </TabsTrigger>
-        <TabsTrigger value="schemas">
-          <DatabaseIcon className="mr-2" size={16} />
-          Schemas
-        </TabsTrigger>
-        {nerdMode && (
-          <>
-            <TabsTrigger value="workflows">
-              <Lightning className="mr-2" size={16} />
-              Workflows
-            </TabsTrigger>
-            <TabsTrigger value="lua">
-              <Code className="mr-2" size={16} />
-              Lua Scripts
-            </TabsTrigger>
-            <TabsTrigger value="blocks">
-              <SquaresFour className="mr-2" size={16} />
-              Lua Blocks
-            </TabsTrigger>
-            <TabsTrigger value="snippets">
-              <BookOpen className="mr-2" size={16} />
-              Snippets
-            </TabsTrigger>
-            <TabsTrigger value="css">
-              <Palette className="mr-2" size={16} />
-              CSS Classes
-            </TabsTrigger>
-            <TabsTrigger value="dropdowns">
-              <ListDashes className="mr-2" size={16} />
-              Dropdowns
-            </TabsTrigger>
-            <TabsTrigger value="database">
-              <HardDrives className="mr-2" size={16} />
-              Database
-            </TabsTrigger>
-          </>
-        )}
-        <TabsTrigger value="settings">
-          <Gear className="mr-2" size={16} />
-          Settings
-        </TabsTrigger>
-        <TabsTrigger value="errorlogs">
-          <Warning className="mr-2" size={16} />
-          Error Logs
-        </TabsTrigger>
+        {visibleTabs.map((tab) => (
+          <TabsTrigger key={tab.value} value={tab.value}>
+            <tab.icon className="mr-2" size={16} />
+            {tab.label}
+          </TabsTrigger>
+        ))}
       </TabsList>
 
-      <TabsContent value="guide" className="space-y-6">
-        <QuickGuide />
-      </TabsContent>
-
-      <TabsContent value="packages" className="space-y-6">
-        <PackageManager />
-      </TabsContent>
-
-      <TabsContent value="pages" className="space-y-6">
-        <PageRoutesManager />
-      </TabsContent>
-
-      <TabsContent value="hierarchy" className="space-y-6">
-        <ComponentHierarchyEditor nerdMode={nerdMode} />
-      </TabsContent>
-
-      <TabsContent value="users" className="space-y-6">
-        <UserManagement />
-      </TabsContent>
-
-      <TabsContent value="schemas" className="space-y-6">
-        <SchemaEditorLevel4
-          schemas={appConfig.schemas}
+      {level4TabsConfig.map((tab) => (
+        <TabContent
+          key={tab.value}
+          tab={tab}
+          appConfig={appConfig}
+          user={user}
+          nerdMode={nerdMode}
           onSchemasChange={onSchemasChange}
+          onWorkflowsChange={onWorkflowsChange}
+          onLuaScriptsChange={onLuaScriptsChange}
         />
-      </TabsContent>
-
-      {nerdMode && (
-        <>
-          <TabsContent value="workflows" className="space-y-6">
-            <WorkflowEditor
-              workflows={appConfig.workflows}
-              onWorkflowsChange={onWorkflowsChange}
-              scripts={appConfig.luaScripts}
-            />
-          </TabsContent>
-
-          <TabsContent value="lua" className="space-y-6">
-            <LuaEditor
-              scripts={appConfig.luaScripts}
-              onScriptsChange={onLuaScriptsChange}
-            />
-          </TabsContent>
-
-          <TabsContent value="blocks" className="space-y-6">
-            <LuaBlocksEditor
-              scripts={appConfig.luaScripts}
-              onScriptsChange={onLuaScriptsChange}
-            />
-          </TabsContent>
-
-          <TabsContent value="snippets" className="space-y-6">
-            <LuaSnippetLibrary />
-          </TabsContent>
-
-          <TabsContent value="css" className="space-y-6">
-            <CssClassManager />
-          </TabsContent>
-
-          <TabsContent value="dropdowns" className="space-y-6">
-            <DropdownConfigManager />
-          </TabsContent>
-
-          <TabsContent value="database" className="space-y-6">
-            <DatabaseManager />
-          </TabsContent>
-        </>
-      )}
-
-      <TabsContent value="settings" className="space-y-6">
-        <GodCredentialsSettings />
-        <ThemeEditor />
-        <SMTPConfigEditor />
-      </TabsContent>
-
-      <TabsContent value="errorlogs" className="space-y-6">
-        <ErrorLogsTab user={user} />
-      </TabsContent>
+      ))}
     </Tabs>
   )
 }
diff --git a/frontends/nextjs/src/components/level4/tabs/TabContent.tsx b/frontends/nextjs/src/components/level4/tabs/TabContent.tsx
new file mode 100644
index 000000000..1ae86b581
--- /dev/null
+++ b/frontends/nextjs/src/components/level4/tabs/TabContent.tsx
@@ -0,0 +1,153 @@
+import { TabsContent } from '@/components/ui'
+import { SchemaEditorLevel4 } from '@/components/SchemaEditorLevel4'
+import { WorkflowEditor } from '@/components/WorkflowEditor'
+import { LuaEditor } from '@/components/editors/lua/LuaEditor'
+import { LuaBlocksEditor } from '@/components/editors/lua/LuaBlocksEditor'
+import { LuaSnippetLibrary } from '@/components/editors/lua/LuaSnippetLibrary'
+import { DatabaseManager } from '@/components/managers/database/DatabaseManager'
+import { PageRoutesManager } from '@/components/managers/PageRoutesManager'
+import { ComponentHierarchyEditor } from '@/components/ComponentHierarchyEditor'
+import { UserManagement } from '@/components/UserManagement'
+import { GodCredentialsSettings } from '@/components/GodCredentialsSettings'
+import { CssClassManager } from '@/components/CssClassManager'
+import { DropdownConfigManager } from '@/components/DropdownConfigManager'
+import { QuickGuide } from '@/components/QuickGuide'
+import { PackageManager } from '@/components/PackageManager'
+import { ThemeEditor } from '@/components/ThemeEditor'
+import { SMTPConfigEditor } from '@/components/SMTPConfigEditor'
+import { ErrorLogsTab } from '@/components/level5/tabs/error-logs/ErrorLogsTab'
+import type { AppConfiguration, User } from '@/lib/level-types'
+
+import type { Level4TabConfig } from './config'
+
+interface Level4TabContentProps {
+  tab: Level4TabConfig
+  appConfig: AppConfiguration
+  user: User
+  nerdMode: boolean
+  onSchemasChange: (schemas: any[]) => Promise<void>
+  onWorkflowsChange: (workflows: any[]) => Promise<void>
+  onLuaScriptsChange: (scripts: any[]) => Promise<void>
+}
+
+export function TabContent({
+  tab,
+  appConfig,
+  user,
+  nerdMode,
+  onSchemasChange,
+  onWorkflowsChange,
+  onLuaScriptsChange,
+}: Level4TabContentProps) {
+  if (tab.nerdOnly && !nerdMode) return null
+
+  switch (tab.value) {
+    case 'guide':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <QuickGuide />
+        </TabsContent>
+      )
+    case 'packages':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <PackageManager />
+        </TabsContent>
+      )
+    case 'pages':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <PageRoutesManager />
+        </TabsContent>
+      )
+    case 'hierarchy':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <ComponentHierarchyEditor nerdMode={nerdMode} />
+        </TabsContent>
+      )
+    case 'users':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <UserManagement />
+        </TabsContent>
+      )
+    case 'schemas':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <SchemaEditorLevel4
+            schemas={appConfig.schemas}
+            onSchemasChange={onSchemasChange}
+          />
+        </TabsContent>
+      )
+    case 'workflows':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <WorkflowEditor
+            workflows={appConfig.workflows}
+            onWorkflowsChange={onWorkflowsChange}
+            scripts={appConfig.luaScripts}
+          />
+        </TabsContent>
+      )
+    case 'lua':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <LuaEditor
+            scripts={appConfig.luaScripts}
+            onScriptsChange={onLuaScriptsChange}
+          />
+        </TabsContent>
+      )
+    case 'blocks':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <LuaBlocksEditor
+            scripts={appConfig.luaScripts}
+            onScriptsChange={onLuaScriptsChange}
+          />
+        </TabsContent>
+      )
+    case 'snippets':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <LuaSnippetLibrary />
+        </TabsContent>
+      )
+    case 'css':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <CssClassManager />
+        </TabsContent>
+      )
+    case 'dropdowns':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <DropdownConfigManager />
+        </TabsContent>
+      )
+    case 'database':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <DatabaseManager />
+        </TabsContent>
+      )
+    case 'settings':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <GodCredentialsSettings />
+          <ThemeEditor />
+          <SMTPConfigEditor />
+        </TabsContent>
+      )
+    case 'errorlogs':
+      return (
+        <TabsContent value={tab.value} className="space-y-6">
+          <ErrorLogsTab user={user} />
+        </TabsContent>
+      )
+    default:
+      return null
+  }
+}
diff --git a/frontends/nextjs/src/components/level4/tabs/config.ts b/frontends/nextjs/src/components/level4/tabs/config.ts
new file mode 100644
index 000000000..1dd2eec26
--- /dev/null
+++ b/frontends/nextjs/src/components/level4/tabs/config.ts
@@ -0,0 +1,59 @@
+import {
+  BookOpen,
+  Code,
+  Database as DatabaseIcon,
+  Gear,
+  HardDrives,
+  Lightning,
+  ListDashes,
+  MapTrifold,
+  Package,
+  Palette,
+  Sparkle,
+  SquaresFour,
+  Tree,
+  Users,
+  Warning,
+} from '@phosphor-icons/react'
+
+export type Level4TabValue =
+  | 'guide'
+  | 'packages'
+  | 'pages'
+  | 'hierarchy'
+  | 'users'
+  | 'schemas'
+  | 'workflows'
+  | 'lua'
+  | 'blocks'
+  | 'snippets'
+  | 'css'
+  | 'dropdowns'
+  | 'database'
+  | 'settings'
+  | 'errorlogs'
+
+export interface Level4TabConfig {
+  value: Level4TabValue
+  label: string
+  icon: typeof DatabaseIcon
+  nerdOnly?: boolean
+}
+
+export const level4TabsConfig: Level4TabConfig[] = [
+  { value: 'guide', label: 'Guide', icon: Sparkle },
+  { value: 'packages', label: 'Packages', icon: Package },
+  { value: 'pages', label: 'Page Routes', icon: MapTrifold },
+  { value: 'hierarchy', label: 'Components', icon: Tree },
+  { value: 'users', label: 'Users', icon: Users },
+  { value: 'schemas', label: 'Schemas', icon: DatabaseIcon },
+  { value: 'workflows', label: 'Workflows', icon: Lightning, nerdOnly: true },
+  { value: 'lua', label: 'Lua Scripts', icon: Code, nerdOnly: true },
+  { value: 'blocks', label: 'Lua Blocks', icon: SquaresFour, nerdOnly: true },
+  { value: 'snippets', label: 'Snippets', icon: BookOpen, nerdOnly: true },
+  { value: 'css', label: 'CSS Classes', icon: Palette, nerdOnly: true },
+  { value: 'dropdowns', label: 'Dropdowns', icon: ListDashes, nerdOnly: true },
+  { value: 'database', label: 'Database', icon: HardDrives, nerdOnly: true },
+  { value: 'settings', label: 'Settings', icon: Gear },
+  { value: 'errorlogs', label: 'Error Logs', icon: Warning },
+]
diff --git a/frontends/nextjs/src/components/level5/tabs/power-transfer/PowerTransferTab.tsx b/frontends/nextjs/src/components/level5/tabs/power-transfer/PowerTransferTab.tsx
index 20a91aba2..3f8157ed6 100644
--- a/frontends/nextjs/src/components/level5/tabs/power-transfer/PowerTransferTab.tsx
+++ b/frontends/nextjs/src/components/level5/tabs/power-transfer/PowerTransferTab.tsx
@@ -1,15 +1,11 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { Button } from '@/components/ui'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { ScrollArea } from '@/components/ui'
-import { Badge } from '@/components/ui'
-import { Separator } from '@/components/ui'
-import { Alert, AlertDescription } from '@/components/ui'
-import { Crown, ArrowsLeftRight } from '@phosphor-icons/react'
+import { ArrowsLeftRight } from '@phosphor-icons/react'
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Separator } from '@/components/ui'
 import type { PowerTransferRequest, User } from '@/lib/level-types'
 import { fetchPowerTransferRequests } from '@/lib/api/power-transfers'
+import { CriticalActionNotice, TransferHistory, UserSelectionList } from './sections'
 
 interface PowerTransferTabProps {
   currentUser: User
@@ -18,12 +14,6 @@ interface PowerTransferTabProps {
   refreshSignal?: number
 }
 
-const STATUS_VARIANTS: Record<PowerTransferRequest['status'], 'default' | 'secondary' | 'destructive'> = {
-  accepted: 'default',
-  pending: 'secondary',
-  rejected: 'destructive',
-}
-
 export function PowerTransferTab({
   currentUser,
   allUsers,
@@ -35,9 +25,7 @@ export function PowerTransferTab({
   const [isLoadingRequests, setIsLoadingRequests] = useState(true)
   const [requestError, setRequestError] = useState<string | null>(null)
 
-  const highlightedUsers = allUsers.filter(
-    (u) => u.id !== currentUser.id && u.role !== 'supergod'
-  )
+  const highlightedUsers = allUsers.filter((u) => u.id !== currentUser.id && u.role !== 'supergod')
 
   useEffect(() => {
     let isActive = true
@@ -69,22 +57,6 @@ export function PowerTransferTab({
     }
   }, [refreshSignal])
 
-  const sortedRequests = [...requests].sort((a, b) => b.createdAt - a.createdAt)
-
-  const formatDate = (timestamp: number) => {
-    return new Date(timestamp).toLocaleString()
-  }
-
-  const formatExpiry = (expiresAt: number) => {
-    const diff = expiresAt - Date.now()
-    if (diff <= 0) {
-      return 'Expired'
-    }
-    const minutes = Math.floor(diff / 60000)
-    const seconds = Math.floor((diff % 60000) / 1000)
-    return `${minutes}m ${seconds}s remaining`
-  }
-
   const getUserLabel = (userId: string) => {
     const user = allUsers.find((u) => u.id === userId)
     return user ? user.username : userId
@@ -100,97 +72,22 @@ export function PowerTransferTab({
       </CardHeader>
 
       <CardContent className="space-y-6">
-        <div className="p-4 bg-amber-500/10 border border-amber-500/30 rounded-lg">
-          <div className="flex gap-3">
-            <Crown className="w-6 h-6 text-amber-400 flex-shrink-0" weight="fill" />
-            <div>
-              <h4 className="font-semibold text-amber-200 mb-1">Critical Action</h4>
-              <p className="text-sm text-amber-300/80">
-                This action cannot be undone. Only one Super God can exist at a time. After transfer,
-                you will have God-level access only.
-              </p>
-            </div>
-          </div>
-        </div>
+        <CriticalActionNotice />
 
         <Separator className="bg-white/10" />
 
-        <div className="space-y-4">
-          <h4 className="font-semibold text-white">Select User to Transfer Power To:</h4>
-          <ScrollArea className="h-[300px]">
-            <div className="space-y-2">
-              {highlightedUsers.map((user) => (
-                <Card
-                  key={user.id}
-                  className={`cursor-pointer transition-all ${
-                    selectedUserId === user.id
-                      ? 'bg-purple-600/30 border-purple-500'
-                      : 'bg-white/5 border-white/10 hover:bg-white/10'
-                  }`}
-                  onClick={() => setSelectedUserId(user.id)}
-                >
-                  <CardContent className="p-4">
-                    <div className="flex items-center justify-between">
-                      <div>
-                        <p className="font-medium text-white">{user.username}</p>
-                        <p className="text-sm text-gray-400">{user.email}</p>
-                      </div>
-                      <Badge variant="outline" className="text-gray-300 border-gray-500/50">
-                        {user.role}
-                      </Badge>
-                    </div>
-                  </CardContent>
-                </Card>
-              ))}
-            </div>
-          </ScrollArea>
-        </div>
+        <UserSelectionList
+          users={highlightedUsers}
+          selectedUserId={selectedUserId}
+          onSelect={setSelectedUserId}
+        />
 
-        <div className="space-y-3">
-          <div className="flex items-center justify-between">
-            <h4 className="font-semibold text-white">Recent transfers</h4>
-            {isLoadingRequests && (
-              <span className="text-xs text-muted-foreground">Refreshing...</span>
-            )}
-          </div>
-
-          {requestError && (
-            <Alert variant="destructive">
-              <AlertDescription>{requestError}</AlertDescription>
-            </Alert>
-          )}
-
-          <ScrollArea className="h-[260px]">
-            <div className="space-y-3 p-2">
-              {sortedRequests.length === 0 && !isLoadingRequests ? (
-                <p className="text-sm text-muted-foreground">No transfer history available.</p>
-              ) : (
-                sortedRequests.map((request) => (
-                  <Card key={request.id} className="bg-white/5 border-white/10">
-                    <CardHeader className="flex items-center justify-between space-y-0">
-                      <div>
-                        <CardTitle className="text-base text-white">
-                          Transfer to {getUserLabel(request.toUserId)}
-                        </CardTitle>
-                        <CardDescription className="text-xs text-muted-foreground">
-                          Requested by {getUserLabel(request.fromUserId)}
-                        </CardDescription>
-                      </div>
-                      <Badge variant={STATUS_VARIANTS[request.status]}>
-                        {request.status.charAt(0).toUpperCase() + request.status.slice(1)}
-                      </Badge>
-                    </CardHeader>
-                    <CardContent className="text-xs text-muted-foreground space-y-1">
-                      <p>Created: {formatDate(request.createdAt)}</p>
-                      <p>Expires: {formatDate(request.expiresAt)}</p>
-                      <p>{formatExpiry(request.expiresAt)}</p>
-                    </CardContent>
-                  </Card>
-                ))
-              )}
-            </div>
-          </ScrollArea>
-        </div>
+        <TransferHistory
+          requests={requests}
+          getUserLabel={getUserLabel}
+          isLoading={isLoadingRequests}
+          requestError={requestError}
+        />
 
         <Button
           onClick={() => onInitiateTransfer(selectedUserId)}
diff --git a/frontends/nextjs/src/components/level5/tabs/power-transfer/sections.tsx b/frontends/nextjs/src/components/level5/tabs/power-transfer/sections.tsx
new file mode 100644
index 000000000..9ca90453b
--- /dev/null
+++ b/frontends/nextjs/src/components/level5/tabs/power-transfer/sections.tsx
@@ -0,0 +1,148 @@
+'use client'
+
+import { Crown } from '@phosphor-icons/react'
+import {
+  Alert,
+  AlertDescription,
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  ScrollArea,
+} from '@/components/ui'
+import type { PowerTransferRequest, User } from '@/lib/level-types'
+
+const STATUS_VARIANTS: Record<PowerTransferRequest['status'], 'default' | 'secondary' | 'destructive'> = {
+  accepted: 'default',
+  pending: 'secondary',
+  rejected: 'destructive',
+}
+
+export const formatDate = (timestamp: number) => new Date(timestamp).toLocaleString()
+
+export const formatExpiry = (expiresAt: number) => {
+  const diff = expiresAt - Date.now()
+  if (diff <= 0) {
+    return 'Expired'
+  }
+  const minutes = Math.floor(diff / 60000)
+  const seconds = Math.floor((diff % 60000) / 1000)
+  return `${minutes}m ${seconds}s remaining`
+}
+
+export function CriticalActionNotice() {
+  return (
+    <div className="p-4 bg-amber-500/10 border border-amber-500/30 rounded-lg">
+      <div className="flex gap-3">
+        <Crown className="w-6 h-6 text-amber-400 flex-shrink-0" weight="fill" />
+        <div>
+          <h4 className="font-semibold text-amber-200 mb-1">Critical Action</h4>
+          <p className="text-sm text-amber-300/80">
+            This action cannot be undone. Only one Super God can exist at a time. After transfer, you
+            will have God-level access only.
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+interface UserSelectionListProps {
+  users: User[]
+  selectedUserId: string
+  onSelect: (userId: string) => void
+}
+
+export function UserSelectionList({ users, selectedUserId, onSelect }: UserSelectionListProps) {
+  return (
+    <div className="space-y-4">
+      <h4 className="font-semibold text-white">Select User to Transfer Power To:</h4>
+      <ScrollArea className="h-[300px]">
+        <div className="space-y-2">
+          {users.map((user) => (
+            <Card
+              key={user.id}
+              className={`cursor-pointer transition-all ${
+                selectedUserId === user.id
+                  ? 'bg-purple-600/30 border-purple-500'
+                  : 'bg-white/5 border-white/10 hover:bg-white/10'
+              }`}
+              onClick={() => onSelect(user.id)}
+            >
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <p className="font-medium text-white">{user.username}</p>
+                    <p className="text-sm text-gray-400">{user.email}</p>
+                  </div>
+                  <Badge variant="outline" className="text-gray-300 border-gray-500/50">
+                    {user.role}
+                  </Badge>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}
+
+interface TransferHistoryProps {
+  requests: PowerTransferRequest[]
+  getUserLabel: (userId: string) => string
+  isLoading: boolean
+  requestError: string | null
+}
+
+export function TransferHistory({ requests, getUserLabel, isLoading, requestError }: TransferHistoryProps) {
+  const sortedRequests = [...requests].sort((a, b) => b.createdAt - a.createdAt)
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center justify-between">
+        <h4 className="font-semibold text-white">Recent transfers</h4>
+        {isLoading && <span className="text-xs text-muted-foreground">Refreshing...</span>}
+      </div>
+
+      {requestError && (
+        <Alert variant="destructive">
+          <AlertDescription>{requestError}</AlertDescription>
+        </Alert>
+      )}
+
+      <ScrollArea className="h-[260px]">
+        <div className="space-y-3 p-2">
+          {sortedRequests.length === 0 && !isLoading ? (
+            <p className="text-sm text-muted-foreground">No transfer history available.</p>
+          ) : (
+            sortedRequests.map((request) => (
+              <Card key={request.id} className="bg-white/5 border-white/10">
+                <CardHeader className="flex items-center justify-between space-y-0">
+                  <div>
+                    <CardTitle className="text-base text-white">
+                      Transfer to {getUserLabel(request.toUserId)}
+                    </CardTitle>
+                    <CardDescription className="text-xs text-muted-foreground">
+                      Requested by {getUserLabel(request.fromUserId)}
+                    </CardDescription>
+                  </div>
+                  <Badge variant={STATUS_VARIANTS[request.status]}>
+                    {request.status.charAt(0).toUpperCase() + request.status.slice(1)}
+                  </Badge>
+                </CardHeader>
+                <CardContent className="text-xs text-muted-foreground space-y-1">
+                  <p>Created: {formatDate(request.createdAt)}</p>
+                  <p>Expires: {formatDate(request.expiresAt)}</p>
+                  <p>{formatExpiry(request.expiresAt)}</p>
+                </CardContent>
+              </Card>
+            ))
+          )}
+        </div>
+      </ScrollArea>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/DropdownConfigManager.tsx b/frontends/nextjs/src/components/managers/DropdownConfigManager.tsx
index 254d0132e..dbd2edc00 100644
--- a/frontends/nextjs/src/components/managers/DropdownConfigManager.tsx
+++ b/frontends/nextjs/src/components/managers/DropdownConfigManager.tsx
@@ -1,26 +1,16 @@
-import { useState, useEffect } from 'react'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui'
-import { Button } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Label } from '@/components/ui'
-import { ScrollArea } from '@/components/ui'
-import { Card } from '@/components/ui'
-import { Badge } from '@/components/ui'
-import { Separator } from '@/components/ui'
+import { useEffect, useState } from 'react'
+import { Button, Card } from '@/components/ui'
 import { Database } from '@/lib/database'
-import { Plus, X, FloppyDisk, Trash, Pencil } from '@phosphor-icons/react'
+import { Plus } from '@phosphor-icons/react'
 import { toast } from 'sonner'
 import type { DropdownConfig } from '@/lib/database'
+import { DropdownConfigForm } from './dropdown/DropdownConfigForm'
+import { PreviewPane } from './dropdown/PreviewPane'
 
 export function DropdownConfigManager() {
   const [dropdowns, setDropdowns] = useState<DropdownConfig[]>([])
   const [isEditing, setIsEditing] = useState(false)
   const [editingDropdown, setEditingDropdown] = useState<DropdownConfig | null>(null)
-  const [dropdownName, setDropdownName] = useState('')
-  const [dropdownLabel, setDropdownLabel] = useState('')
-  const [options, setOptions] = useState<Array<{ value: string; label: string }>>([])
-  const [newOptionValue, setNewOptionValue] = useState('')
-  const [newOptionLabel, setNewOptionLabel] = useState('')
 
   useEffect(() => {
     loadDropdowns()
@@ -31,63 +21,34 @@ export function DropdownConfigManager() {
     setDropdowns(configs)
   }
 
-  const startEdit = (dropdown?: DropdownConfig) => {
-    if (dropdown) {
-      setEditingDropdown(dropdown)
-      setDropdownName(dropdown.name)
-      setDropdownLabel(dropdown.label)
-      setOptions(dropdown.options)
-    } else {
-      setEditingDropdown(null)
-      setDropdownName('')
-      setDropdownLabel('')
-      setOptions([])
-    }
+  const openEditor = (dropdown?: DropdownConfig) => {
+    setEditingDropdown(dropdown ?? null)
     setIsEditing(true)
   }
 
-  const addOption = () => {
-    if (newOptionValue && newOptionLabel) {
-      setOptions(current => [...current, { value: newOptionValue, label: newOptionLabel }])
-      setNewOptionValue('')
-      setNewOptionLabel('')
-    }
-  }
-
-  const removeOption = (index: number) => {
-    setOptions(current => current.filter((_, i) => i !== index))
-  }
-
-  const handleSave = async () => {
-    if (!dropdownName || !dropdownLabel || options.length === 0) {
-      toast.error('Please fill all fields and add at least one option')
-      return
-    }
-
-    const newDropdown: DropdownConfig = {
-      id: editingDropdown?.id || `dropdown_${Date.now()}`,
-      name: dropdownName,
-      label: dropdownLabel,
-      options,
-    }
-
-    if (editingDropdown) {
-      await Database.updateDropdownConfig(newDropdown.id, newDropdown)
+  const handleSave = async (config: DropdownConfig, isEdit: boolean) => {
+    if (isEdit) {
+      await Database.updateDropdownConfig(config.id, config)
       toast.success('Dropdown updated successfully')
     } else {
-      await Database.addDropdownConfig(newDropdown)
+      await Database.addDropdownConfig(config)
       toast.success('Dropdown created successfully')
     }
 
     setIsEditing(false)
-    loadDropdowns()
+    await loadDropdowns()
   }
 
   const handleDelete = async (id: string) => {
-    if (confirm('Are you sure you want to delete this dropdown configuration?')) {
-      await Database.deleteDropdownConfig(id)
-      toast.success('Dropdown deleted')
-      loadDropdowns()
+    await Database.deleteDropdownConfig(id)
+    toast.success('Dropdown deleted')
+    await loadDropdowns()
+  }
+
+  const handleDialogChange = (open: boolean) => {
+    setIsEditing(open)
+    if (!open) {
+      setEditingDropdown(null)
     }
   }
 
@@ -98,7 +59,7 @@ export function DropdownConfigManager() {
           <h2 className="text-2xl font-bold">Dropdown Configurations</h2>
           <p className="text-sm text-muted-foreground">Manage dynamic dropdown options for properties</p>
         </div>
-        <Button onClick={() => startEdit()}>
+        <Button onClick={() => openEditor()}>
           <Plus className="mr-2" />
           Create Dropdown
         </Button>
@@ -106,30 +67,12 @@ export function DropdownConfigManager() {
 
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
         {dropdowns.map(dropdown => (
-          <Card key={dropdown.id} className="p-4 space-y-3">
-            <div className="flex items-start justify-between">
-              <div>
-                <h3 className="font-semibold">{dropdown.label}</h3>
-                <p className="text-xs text-muted-foreground font-mono">{dropdown.name}</p>
-              </div>
-              <div className="flex gap-1">
-                <Button size="sm" variant="ghost" onClick={() => startEdit(dropdown)}>
-                  <Pencil size={16} />
-                </Button>
-                <Button size="sm" variant="ghost" onClick={() => handleDelete(dropdown.id)}>
-                  <Trash size={16} />
-                </Button>
-              </div>
-            </div>
-            <Separator />
-            <div className="flex flex-wrap gap-1">
-              {dropdown.options.map((opt, i) => (
-                <Badge key={i} variant="secondary" className="text-xs">
-                  {opt.label}
-                </Badge>
-              ))}
-            </div>
-          </Card>
+          <PreviewPane
+            key={dropdown.id}
+            dropdown={dropdown}
+            onEdit={openEditor}
+            onDelete={handleDelete}
+          />
         ))}
       </div>
 
@@ -139,88 +82,12 @@ export function DropdownConfigManager() {
         </Card>
       )}
 
-      <Dialog open={isEditing} onOpenChange={setIsEditing}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
-            <DialogTitle>{editingDropdown ? 'Edit' : 'Create'} Dropdown Configuration</DialogTitle>
-          </DialogHeader>
-
-          <div className="space-y-4">
-            <div className="space-y-2">
-              <Label>Dropdown Name (ID)</Label>
-              <Input
-                placeholder="e.g., status_options"
-                value={dropdownName}
-                onChange={(e) => setDropdownName(e.target.value)}
-              />
-              <p className="text-xs text-muted-foreground">Unique identifier for this dropdown</p>
-            </div>
-
-            <div className="space-y-2">
-              <Label>Display Label</Label>
-              <Input
-                placeholder="e.g., Status"
-                value={dropdownLabel}
-                onChange={(e) => setDropdownLabel(e.target.value)}
-              />
-            </div>
-
-            <Separator />
-
-            <div className="space-y-2">
-              <Label>Options</Label>
-              <div className="flex gap-2">
-                <Input
-                  placeholder="Value"
-                  value={newOptionValue}
-                  onChange={(e) => setNewOptionValue(e.target.value)}
-                />
-                <Input
-                  placeholder="Label"
-                  value={newOptionLabel}
-                  onChange={(e) => setNewOptionLabel(e.target.value)}
-                />
-                <Button onClick={addOption} type="button">
-                  <Plus size={16} />
-                </Button>
-              </div>
-            </div>
-
-            {options.length > 0 && (
-              <ScrollArea className="h-[200px] border rounded-lg p-3">
-                <div className="space-y-2">
-                  {options.map((opt, i) => (
-                    <div key={i} className="flex items-center justify-between p-2 border rounded bg-muted/50">
-                      <div className="flex-1">
-                        <span className="font-mono text-sm">{opt.value}</span>
-                        <span className="mx-2 text-muted-foreground">→</span>
-                        <span className="text-sm">{opt.label}</span>
-                      </div>
-                      <Button
-                        size="sm"
-                        variant="ghost"
-                        onClick={() => removeOption(i)}
-                      >
-                        <X size={16} />
-                      </Button>
-                    </div>
-                  ))}
-                </div>
-              </ScrollArea>
-            )}
-          </div>
-
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setIsEditing(false)}>
-              Cancel
-            </Button>
-            <Button onClick={handleSave}>
-              <FloppyDisk className="mr-2" />
-              Save
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+      <DropdownConfigForm
+        open={isEditing}
+        editingDropdown={editingDropdown}
+        onOpenChange={handleDialogChange}
+        onSave={handleSave}
+      />
     </div>
   )
 }
diff --git a/frontends/nextjs/src/components/managers/PageRoutesManager.tsx b/frontends/nextjs/src/components/managers/PageRoutesManager.tsx
index e6ed6411f..e11958f24 100644
--- a/frontends/nextjs/src/components/managers/PageRoutesManager.tsx
+++ b/frontends/nextjs/src/components/managers/PageRoutesManager.tsx
@@ -1,29 +1,39 @@
-import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Label } from '@/components/ui'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui'
-import { Badge } from '@/components/ui'
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui'
-import { Plus, Pencil, Trash, Eye, LockKey } from '@phosphor-icons/react'
+import { useEffect, useState } from 'react'
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui'
+import { Plus } from '@phosphor-icons/react'
 import { Database } from '@/lib/database'
+import type { PageConfig } from '@/lib/level-types'
 import { toast } from 'sonner'
-import type { PageConfig, UserRole, AppLevel } from '@/lib/level-types'
-import { Switch } from '@/components/ui'
+import { RoutesTable } from './page-routes/RoutesTable'
+import { Preview } from './page-routes/Preview'
+import { RouteEditor, RouteFormData } from './page-routes/RouteEditor'
+
+const defaultFormData: RouteFormData = {
+  path: '/',
+  title: '',
+  level: 1,
+  requiresAuth: false,
+  componentTree: [],
+}
 
 export function PageRoutesManager() {
   const [pages, setPages] = useState<PageConfig[]>([])
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const [editingPage, setEditingPage] = useState<PageConfig | null>(null)
-  const [formData, setFormData] = useState<Partial<PageConfig>>({
-    path: '/',
-    title: '',
-    level: 1,
-    requiresAuth: false,
-    componentTree: [],
-  })
+  const [formData, setFormData] = useState<RouteFormData>({ ...defaultFormData })
 
   useEffect(() => {
     loadPages()
@@ -40,13 +50,7 @@ export function PageRoutesManager() {
       setFormData(page)
     } else {
       setEditingPage(null)
-      setFormData({
-        path: '/',
-        title: '',
-        level: 1,
-        requiresAuth: false,
-        componentTree: [],
-      })
+      setFormData({ ...defaultFormData })
     }
     setIsDialogOpen(true)
   }
@@ -54,13 +58,7 @@ export function PageRoutesManager() {
   const handleCloseDialog = () => {
     setIsDialogOpen(false)
     setEditingPage(null)
-    setFormData({
-      path: '/',
-      title: '',
-      level: 1,
-      requiresAuth: false,
-      componentTree: [],
-    })
+    setFormData({ ...defaultFormData })
   }
 
   const handleSavePage = async () => {
@@ -98,18 +96,6 @@ export function PageRoutesManager() {
     }
   }
 
-  const getLevelBadgeColor = (level: AppLevel) => {
-    switch (level) {
-      case 1: return 'bg-blue-500'
-      case 2: return 'bg-green-500'
-      case 3: return 'bg-orange-500'
-      case 4: return 'bg-sky-500'
-      case 5: return 'bg-purple-500'
-      case 6: return 'bg-rose-500'
-      default: return 'bg-gray-500'
-    }
-  }
-
   return (
     <div className="space-y-6">
       <div className="flex justify-between items-center">
@@ -124,94 +110,23 @@ export function PageRoutesManager() {
               New Page Route
             </Button>
           </DialogTrigger>
-          <DialogContent className="max-w-2xl">
+          <DialogContent className="max-w-4xl">
             <DialogHeader>
               <DialogTitle>{editingPage ? 'Edit Page Route' : 'Create New Page Route'}</DialogTitle>
               <DialogDescription>
                 Configure the route path, access level, and authentication requirements
               </DialogDescription>
             </DialogHeader>
-            
-            <div className="space-y-4 py-4">
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="path">Route Path *</Label>
-                  <Input
-                    id="path"
-                    placeholder="/home"
-                    value={formData.path || ''}
-                    onChange={(e) => setFormData({ ...formData, path: e.target.value })}
-                  />
-                </div>
-                <div className="space-y-2">
-                  <Label htmlFor="title">Page Title *</Label>
-                  <Input
-                    id="title"
-                    placeholder="Home Page"
-                    value={formData.title || ''}
-                    onChange={(e) => setFormData({ ...formData, title: e.target.value })}
-                  />
-                </div>
-              </div>
-
-              <div className="grid grid-cols-2 gap-4">
-                <div className="space-y-2">
-                  <Label htmlFor="level">Application Level</Label>
-                  <Select
-                    value={String(formData.level)}
-                    onValueChange={(value) => setFormData({ ...formData, level: Number(value) as AppLevel })}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select level" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="1">Level 1 - Public</SelectItem>
-                      <SelectItem value="2">Level 2 - User Area</SelectItem>
-                      <SelectItem value="3">Level 3 - Moderator Desk</SelectItem>
-                      <SelectItem value="4">Level 4 - Admin Panel</SelectItem>
-                      <SelectItem value="5">Level 5 - God Builder</SelectItem>
-                      <SelectItem value="6">Level 6 - Supergod Console</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="requiredRole">Required Role (if auth)</Label>
-                  <Select
-                    value={formData.requiredRole || 'public'}
-                    onValueChange={(value) => setFormData({ ...formData, requiredRole: value as UserRole })}
-                  >
-                    <SelectTrigger>
-                      <SelectValue placeholder="Select role" />
-                    </SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="public">Public</SelectItem>
-                      <SelectItem value="user">User</SelectItem>
-                      <SelectItem value="moderator">Moderator</SelectItem>
-                      <SelectItem value="admin">Admin</SelectItem>
-                      <SelectItem value="god">God</SelectItem>
-                      <SelectItem value="supergod">Supergod</SelectItem>
-                    </SelectContent>
-                  </Select>
-                </div>
-              </div>
-
-              <div className="flex items-center space-x-2">
-                <Switch
-                  id="requiresAuth"
-                  checked={formData.requiresAuth}
-                  onCheckedChange={(checked) => setFormData({ ...formData, requiresAuth: checked })}
-                />
-                <Label htmlFor="requiresAuth" className="cursor-pointer">Requires Authentication</Label>
-              </div>
+            <div className="grid gap-6 md:grid-cols-2">
+              <RouteEditor
+                formData={formData}
+                onChange={setFormData}
+                onSave={handleSavePage}
+                onCancel={handleCloseDialog}
+                isEdit={Boolean(editingPage)}
+              />
+              <Preview formData={formData} />
             </div>
-
-            <DialogFooter>
-              <Button variant="outline" onClick={handleCloseDialog}>Cancel</Button>
-              <Button onClick={handleSavePage}>
-                {editingPage ? 'Update Page' : 'Create Page'}
-              </Button>
-            </DialogFooter>
           </DialogContent>
         </Dialog>
       </div>
@@ -222,67 +137,11 @@ export function PageRoutesManager() {
           <CardDescription>All page routes in your application</CardDescription>
         </CardHeader>
         <CardContent>
-          {pages.length === 0 ? (
-            <div className="text-center py-12 text-muted-foreground">
-              <p>No pages configured yet. Create your first page route!</p>
-            </div>
-          ) : (
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableHead>Path</TableHead>
-                  <TableHead>Title</TableHead>
-                  <TableHead>Level</TableHead>
-                  <TableHead>Auth</TableHead>
-                  <TableHead>Required Role</TableHead>
-                  <TableHead className="text-right">Actions</TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {pages.map((page) => (
-                  <TableRow key={page.id}>
-                    <TableCell className="font-mono text-sm">{page.path}</TableCell>
-                    <TableCell>{page.title}</TableCell>
-                    <TableCell>
-                      <Badge className={getLevelBadgeColor(page.level)}>
-                        Level {page.level}
-                      </Badge>
-                    </TableCell>
-                    <TableCell>
-                      {page.requiresAuth ? (
-                        <LockKey className="text-orange-500" weight="fill" />
-                      ) : (
-                        <Eye className="text-green-500" weight="fill" />
-                      )}
-                    </TableCell>
-                    <TableCell>
-                      <Badge variant="outline">
-                        {page.requiredRole || 'public'}
-                      </Badge>
-                    </TableCell>
-                    <TableCell className="text-right">
-                      <div className="flex justify-end gap-2">
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => handleOpenDialog(page)}
-                        >
-                          <Pencil />
-                        </Button>
-                        <Button
-                          size="sm"
-                          variant="ghost"
-                          onClick={() => handleDeletePage(page.id)}
-                        >
-                          <Trash />
-                        </Button>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          )}
+          <RoutesTable
+            pages={pages}
+            onEdit={handleOpenDialog}
+            onDelete={handleDeletePage}
+          />
         </CardContent>
       </Card>
     </div>
diff --git a/frontends/nextjs/src/components/managers/component/ComponentConfigDialog.tsx b/frontends/nextjs/src/components/managers/component/ComponentConfigDialog.tsx
index f4da06685..33f5af4f8 100644
--- a/frontends/nextjs/src/components/managers/component/ComponentConfigDialog.tsx
+++ b/frontends/nextjs/src/components/managers/component/ComponentConfigDialog.tsx
@@ -1,24 +1,10 @@
 import { useState, useEffect, useCallback } from 'react'
-import { Button } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Label } from '@/components/ui'
-import { Textarea } from '@/components/ui'
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui'
-import { Switch } from '@/components/ui'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { ScrollArea } from '@/components/ui'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui'
 import { Database, ComponentNode, ComponentConfig } from '@/lib/database'
 import { componentCatalog } from '@/lib/components/component-catalog'
 import { toast } from 'sonner'
-import type { PropDefinition } from '@/lib/builder-types'
-
-/** Select option type for property schema options */
-interface SelectOption {
-  value: string
-  label: string
-}
+import { ComponentConfigActions } from './ComponentConfigDialog/Actions'
+import { ComponentConfigFields } from './ComponentConfigDialog/Fields'
 
 interface ComponentConfigDialogProps {
   node: ComponentNode
@@ -74,65 +60,6 @@ export function ComponentConfigDialog({ node, isOpen, onClose, onSave, nerdMode
 
   const componentDef = componentCatalog.find(c => c.type === node.type)
 
-  const renderPropEditor = (propSchema: PropDefinition) => {
-    const value = props[propSchema.name] ?? propSchema.defaultValue
-
-    switch (propSchema.type) {
-      case 'string':
-        return (
-          <Input
-            value={String(value || '')}
-            onChange={(e) => setProps({ ...props, [propSchema.name]: e.target.value })}
-            placeholder={String(propSchema.defaultValue || '')}
-          />
-        )
-      
-      case 'number':
-        return (
-          <Input
-            type="number"
-            value={String(value || '')}
-            onChange={(e) => setProps({ ...props, [propSchema.name]: Number(e.target.value) })}
-          />
-        )
-      
-      case 'boolean':
-        return (
-          <Switch
-            checked={Boolean(value)}
-            onCheckedChange={(checked) => setProps({ ...props, [propSchema.name]: checked })}
-          />
-        )
-      
-      case 'select':
-        return (
-          <Select
-            value={String(value || propSchema.defaultValue || '')}
-            onValueChange={(val) => setProps({ ...props, [propSchema.name]: val })}
-          >
-            <SelectTrigger>
-              <SelectValue />
-            </SelectTrigger>
-            <SelectContent>
-              {propSchema.options?.map((opt: SelectOption) => (
-                <SelectItem key={opt.value} value={opt.value}>
-                  {opt.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        )
-      
-      default:
-        return (
-          <Input
-            value={String(value || '')}
-            onChange={(e) => setProps({ ...props, [propSchema.name]: e.target.value })}
-          />
-        )
-    }
-  }
-
   return (
     <Dialog open={isOpen} onOpenChange={onClose}>
       <DialogContent className="max-w-3xl max-h-[90vh]">
@@ -143,147 +70,18 @@ export function ComponentConfigDialog({ node, isOpen, onClose, onSave, nerdMode
           </DialogDescription>
         </DialogHeader>
 
-        <Tabs defaultValue="props" className="flex-1">
-          <TabsList className={nerdMode ? "grid w-full grid-cols-3" : "grid w-full grid-cols-2"}>
-            <TabsTrigger value="props">Properties</TabsTrigger>
-            <TabsTrigger value="styles">Styles</TabsTrigger>
-            {nerdMode && <TabsTrigger value="events">Events</TabsTrigger>}
-          </TabsList>
+        <ComponentConfigFields
+          componentDef={componentDef}
+          props={props}
+          setProps={setProps}
+          styles={styles}
+          setStyles={setStyles}
+          events={events}
+          setEvents={setEvents}
+          nerdMode={nerdMode}
+        />
 
-          <ScrollArea className="h-[500px] mt-4">
-            <TabsContent value="props" className="space-y-4 px-1">
-              {componentDef?.propSchema && componentDef.propSchema.length > 0 ? (
-                componentDef.propSchema.map((propSchema) => (
-                  <div key={propSchema.name} className="space-y-2">
-                    <Label htmlFor={propSchema.name}>{propSchema.label}</Label>
-                    {renderPropEditor(propSchema)}
-                  </div>
-                ))
-              ) : (
-                <div className="text-center py-8 text-muted-foreground">
-                  <p>No configurable properties for this component</p>
-                </div>
-              )}
-
-              {nerdMode && (
-                <Card className="mt-6">
-                  <CardHeader>
-                    <CardTitle className="text-sm">Custom Properties (JSON)</CardTitle>
-                    <CardDescription className="text-xs">
-                      Add additional props as JSON
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Textarea
-                      value={JSON.stringify(props, null, 2)}
-                      onChange={(e) => {
-                        try {
-                          setProps(JSON.parse(e.target.value))
-                        } catch {
-                          // Ignore invalid JSON during typing
-                        }
-                      }}
-                      className="font-mono text-xs"
-                      rows={6}
-                    />
-                  </CardContent>
-                </Card>
-              )}
-            </TabsContent>
-
-            <TabsContent value="styles" className="space-y-4 px-1">
-              <div className="space-y-2">
-                <Label htmlFor="className">Tailwind Classes</Label>
-                <Input
-                  id="className"
-                  value={String(props.className || '')}
-                  onChange={(e) => setProps({ ...props, className: e.target.value })}
-                  placeholder="p-4 bg-white rounded-lg"
-                />
-              </div>
-
-              {nerdMode && (
-                <Card className="mt-6">
-                  <CardHeader>
-                    <CardTitle className="text-sm">Custom Styles (CSS-in-JS)</CardTitle>
-                    <CardDescription className="text-xs">
-                      Define inline styles as JSON object
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Textarea
-                      value={JSON.stringify(styles, null, 2)}
-                      onChange={(e) => {
-                        try {
-                          setStyles(JSON.parse(e.target.value))
-                        } catch {
-                          // Ignore invalid JSON during typing
-                        }
-                      }}
-                      className="font-mono text-xs"
-                      rows={12}
-                      placeholder='{\n  "backgroundColor": "#fff",\n  "padding": "16px"\n}'
-                    />
-                  </CardContent>
-                </Card>
-              )}
-            </TabsContent>
-
-            {nerdMode && (
-              <TabsContent value="events" className="space-y-4 px-1">
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="text-sm">Event Handlers</CardTitle>
-                    <CardDescription className="text-xs">
-                      Map events to Lua script IDs
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent className="space-y-4">
-                    {['onClick', 'onChange', 'onSubmit', 'onFocus', 'onBlur'].map((eventName) => (
-                      <div key={eventName} className="space-y-2">
-                        <Label htmlFor={eventName}>{eventName}</Label>
-                        <Input
-                          id={eventName}
-                          value={events[eventName] || ''}
-                          onChange={(e) => setEvents({ ...events, [eventName]: e.target.value })}
-                          placeholder="lua_script_id"
-                        />
-                      </div>
-                    ))}
-                  </CardContent>
-                </Card>
-
-                <Card>
-                  <CardHeader>
-                    <CardTitle className="text-sm">Custom Events (JSON)</CardTitle>
-                    <CardDescription className="text-xs">
-                      Define additional event handlers
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    <Textarea
-                      value={JSON.stringify(events, null, 2)}
-                      onChange={(e) => {
-                        try {
-                          setEvents(JSON.parse(e.target.value))
-                        } catch {
-                          // Ignore invalid JSON during typing
-                        }
-                      }}
-                      className="font-mono text-xs"
-                      rows={6}
-                    />
-                  </CardContent>
-                </Card>
-              </TabsContent>
-            )}
-          </ScrollArea>
-        </Tabs>
-
-        <DialogFooter>
-          <Button variant="outline" onClick={onClose}>Cancel</Button>
-          <Button onClick={() => void handleSave()}>Save Configuration</Button>
-        </DialogFooter>
+        <ComponentConfigActions onClose={onClose} onSave={handleSave} />
       </DialogContent>
     </Dialog>
   )
diff --git a/frontends/nextjs/src/components/managers/component/ComponentConfigDialog/Actions.tsx b/frontends/nextjs/src/components/managers/component/ComponentConfigDialog/Actions.tsx
new file mode 100644
index 000000000..925d87bd4
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/component/ComponentConfigDialog/Actions.tsx
@@ -0,0 +1,20 @@
+import { Button } from '@/components/ui'
+import { DialogFooter } from '@/components/ui'
+
+interface ComponentConfigActionsProps {
+  onClose: () => void
+  onSave: () => Promise<void> | void
+}
+
+export function ComponentConfigActions({ onClose, onSave }: ComponentConfigActionsProps) {
+  return (
+    <DialogFooter>
+      <Button variant="outline" onClick={onClose}>
+        Cancel
+      </Button>
+      <Button onClick={() => void onSave()}>
+        Save Configuration
+      </Button>
+    </DialogFooter>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/component/ComponentConfigDialog/Fields.tsx b/frontends/nextjs/src/components/managers/component/ComponentConfigDialog/Fields.tsx
new file mode 100644
index 000000000..df4c88732
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/component/ComponentConfigDialog/Fields.tsx
@@ -0,0 +1,238 @@
+import { Input } from '@/components/ui'
+import { Label } from '@/components/ui'
+import { Textarea } from '@/components/ui'
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui'
+import { Switch } from '@/components/ui'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
+import { ScrollArea } from '@/components/ui'
+import type { ComponentDefinition, PropDefinition } from '@/lib/components/types'
+
+interface SelectOption {
+  value: string
+  label: string
+}
+
+interface ComponentConfigFieldsProps {
+  componentDef?: ComponentDefinition
+  props: Record<string, unknown>
+  setProps: (value: Record<string, unknown>) => void
+  styles: Record<string, unknown>
+  setStyles: (value: Record<string, unknown>) => void
+  events: Record<string, string>
+  setEvents: (value: Record<string, string>) => void
+  nerdMode: boolean
+}
+
+function renderPropEditor(
+  propSchema: PropDefinition,
+  props: Record<string, unknown>,
+  setProps: (value: Record<string, unknown>) => void
+) {
+  const value = props[propSchema.name] ?? propSchema.defaultValue
+
+  switch (propSchema.type) {
+    case 'string':
+      return (
+        <Input
+          value={String(value || '')}
+          onChange={(e) => setProps({ ...props, [propSchema.name]: e.target.value })}
+          placeholder={String(propSchema.defaultValue || '')}
+        />
+      )
+
+    case 'number':
+      return (
+        <Input
+          type="number"
+          value={String(value || '')}
+          onChange={(e) => setProps({ ...props, [propSchema.name]: Number(e.target.value) })}
+        />
+      )
+
+    case 'boolean':
+      return (
+        <Switch
+          checked={Boolean(value)}
+          onCheckedChange={(checked) => setProps({ ...props, [propSchema.name]: checked })}
+        />
+      )
+
+    case 'select':
+      return (
+        <Select
+          value={String(value || propSchema.defaultValue || '')}
+          onValueChange={(val) => setProps({ ...props, [propSchema.name]: val })}
+        >
+          <SelectTrigger>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {propSchema.options?.map((opt: SelectOption) => (
+              <SelectItem key={opt.value} value={opt.value}>
+                {opt.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      )
+
+    default:
+      return (
+        <Input
+          value={String(value || '')}
+          onChange={(e) => setProps({ ...props, [propSchema.name]: e.target.value })}
+        />
+      )
+  }
+}
+
+export function ComponentConfigFields({
+  componentDef,
+  props,
+  setProps,
+  styles,
+  setStyles,
+  events,
+  setEvents,
+  nerdMode,
+}: ComponentConfigFieldsProps) {
+  return (
+    <Tabs defaultValue="props" className="flex-1">
+      <TabsList className={nerdMode ? "grid w-full grid-cols-3" : "grid w-full grid-cols-2"}>
+        <TabsTrigger value="props">Properties</TabsTrigger>
+        <TabsTrigger value="styles">Styles</TabsTrigger>
+        {nerdMode && <TabsTrigger value="events">Events</TabsTrigger>}
+      </TabsList>
+
+      <ScrollArea className="h-[500px] mt-4">
+        <TabsContent value="props" className="space-y-4 px-1">
+          {componentDef?.propSchema && componentDef.propSchema.length > 0 ? (
+            componentDef.propSchema.map((propSchema) => (
+              <div key={propSchema.name} className="space-y-2">
+                <Label htmlFor={propSchema.name}>{propSchema.label}</Label>
+                {renderPropEditor(propSchema, props, setProps)}
+              </div>
+            ))
+          ) : (
+            <div className="text-center py-8 text-muted-foreground">
+              <p>No configurable properties for this component</p>
+            </div>
+          )}
+
+          {nerdMode && (
+            <Card className="mt-6">
+              <CardHeader>
+                <CardTitle className="text-sm">Custom Properties (JSON)</CardTitle>
+                <CardDescription className="text-xs">
+                  Add additional props as JSON
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Textarea
+                  value={JSON.stringify(props, null, 2)}
+                  onChange={(e) => {
+                    try {
+                      setProps(JSON.parse(e.target.value))
+                    } catch {
+                      // Ignore invalid JSON during typing
+                    }
+                  }}
+                  className="font-mono text-xs"
+                  rows={6}
+                />
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+
+        <TabsContent value="styles" className="space-y-4 px-1">
+          <div className="space-y-2">
+            <Label htmlFor="className">Tailwind Classes</Label>
+            <Input
+              id="className"
+              value={String(props.className || '')}
+              onChange={(e) => setProps({ ...props, className: e.target.value })}
+              placeholder="p-4 bg-white rounded-lg"
+            />
+          </div>
+
+          {nerdMode && (
+            <Card className="mt-6">
+              <CardHeader>
+                <CardTitle className="text-sm">Custom Styles (CSS-in-JS)</CardTitle>
+                <CardDescription className="text-xs">
+                  Define inline styles as JSON object
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Textarea
+                  value={JSON.stringify(styles, null, 2)}
+                  onChange={(e) => {
+                    try {
+                      setStyles(JSON.parse(e.target.value))
+                    } catch {
+                      // Ignore invalid JSON during typing
+                    }
+                  }}
+                  className="font-mono text-xs"
+                  rows={12}
+                  placeholder={'{\n  "backgroundColor": "#fff",\n  "padding": "16px"\n}'}
+                />
+              </CardContent>
+            </Card>
+          )}
+        </TabsContent>
+
+        {nerdMode && (
+          <TabsContent value="events" className="space-y-4 px-1">
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm">Event Handlers</CardTitle>
+                <CardDescription className="text-xs">
+                  Map events to Lua script IDs
+                </CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                {['onClick', 'onChange', 'onSubmit', 'onFocus', 'onBlur'].map((eventName) => (
+                  <div key={eventName} className="space-y-2">
+                    <Label htmlFor={eventName}>{eventName}</Label>
+                    <Input
+                      id={eventName}
+                      value={events[eventName] || ''}
+                      onChange={(e) => setEvents({ ...events, [eventName]: e.target.value })}
+                      placeholder="lua_script_id"
+                    />
+                  </div>
+                ))}
+              </CardContent>
+            </Card>
+
+            <Card>
+              <CardHeader>
+                <CardTitle className="text-sm">Custom Events (JSON)</CardTitle>
+                <CardDescription className="text-xs">
+                  Define additional event handlers
+                </CardDescription>
+              </CardHeader>
+              <CardContent>
+                <Textarea
+                  value={JSON.stringify(events, null, 2)}
+                  onChange={(e) => {
+                    try {
+                      setEvents(JSON.parse(e.target.value))
+                    } catch {
+                      // Ignore invalid JSON during typing
+                    }
+                  }}
+                  className="font-mono text-xs"
+                  rows={6}
+                />
+              </CardContent>
+            </Card>
+          </TabsContent>
+        )}
+      </ScrollArea>
+    </Tabs>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/component/ComponentHierarchyEditor.tsx b/frontends/nextjs/src/components/managers/component/ComponentHierarchyEditor.tsx
index 00715843f..63218d5c3 100644
--- a/frontends/nextjs/src/components/managers/component/ComponentHierarchyEditor.tsx
+++ b/frontends/nextjs/src/components/managers/component/ComponentHierarchyEditor.tsx
@@ -6,7 +6,6 @@ import { ScrollArea } from '@/components/ui'
 import { Separator } from '@/components/ui'
 import {
   ArrowsOutCardinal,
-  Cursor,
   Plus,
   Tree,
 } from '@phosphor-icons/react'
@@ -14,9 +13,10 @@ import { Database, type ComponentNode } from '@/lib/database'
 import { componentCatalog } from '@/lib/components/component-catalog'
 import { toast } from 'sonner'
 import { ComponentConfigDialog } from './ComponentConfigDialog'
-import { TreeNode } from './modules/TreeNode'
 import { useHierarchyData } from './modules/useHierarchyData'
 import { useHierarchyDragDrop } from './modules/useHierarchyDragDrop'
+import { HierarchyTree } from './ComponentHierarchyEditor/Tree'
+import { selectRootNodes } from './ComponentHierarchyEditor/selectors'
 
 export function ComponentHierarchyEditor({ nerdMode = false }: { nerdMode?: boolean }) {
   const { pages, selectedPageId, setSelectedPageId, hierarchy, loadHierarchy } = useHierarchyData()
@@ -37,10 +37,7 @@ export function ComponentHierarchyEditor({ nerdMode = false }: { nerdMode?: bool
   const componentIdPrefix = useId()
 
   const rootNodes = useMemo(
-    () =>
-      Object.values(hierarchy)
-        .filter(node => node.pageId === selectedPageId && !node.parentId)
-        .sort((a, b) => a.order - b.order),
+    () => selectRootNodes(hierarchy, selectedPageId),
     [hierarchy, selectedPageId]
   )
 
@@ -108,50 +105,6 @@ export function ComponentHierarchyEditor({ nerdMode = false }: { nerdMode?: bool
     [hierarchy, loadHierarchy]
   )
 
-  const renderTree = useMemo(
-    () =>
-      rootNodes.length === 0 ? (
-        <div className="flex flex-col items-center justify-center h-64 text-muted-foreground">
-          <Cursor size={48} className="mb-4" />
-          <p>No components yet. Add one from the catalog!</p>
-        </div>
-      ) : (
-        <div className="space-y-1">
-          {rootNodes.map((node) => (
-            <TreeNode
-              key={node.id}
-              node={node}
-              hierarchy={hierarchy}
-              selectedNodeId={selectedNodeId}
-              expandedNodes={expandedNodes}
-              onSelect={setSelectedNodeId}
-              onToggle={handleToggleNode}
-              onDelete={handleDeleteNode}
-              onConfig={setConfigNodeId}
-              onDragStart={handleDragStart}
-              onDragOver={handleDragOver}
-              onDrop={handleDrop}
-              draggingNodeId={draggingNodeId}
-            />
-          ))}
-        </div>
-      ),
-    [
-      expandedNodes,
-      handleDeleteNode,
-      handleDragOver,
-      handleDragStart,
-      handleDrop,
-      handleToggleNode,
-      hierarchy,
-      rootNodes,
-      selectedNodeId,
-      draggingNodeId,
-      setConfigNodeId,
-      setSelectedNodeId,
-    ]
-  )
-
   return (
     <div className="grid grid-cols-12 gap-6 h-[calc(100vh-12rem)]">
       <div className="col-span-8 space-y-4">
@@ -191,7 +144,20 @@ export function ComponentHierarchyEditor({ nerdMode = false }: { nerdMode?: bool
           <CardContent className="flex-1 overflow-hidden">
             <ScrollArea className="h-full pr-4">
               {selectedPageId ? (
-                renderTree
+                <HierarchyTree
+                  rootNodes={rootNodes}
+                  hierarchy={hierarchy}
+                  selectedNodeId={selectedNodeId}
+                  expandedNodes={expandedNodes}
+                  draggingNodeId={draggingNodeId}
+                  onSelect={setSelectedNodeId}
+                  onToggle={handleToggleNode}
+                  onDelete={handleDeleteNode}
+                  onConfig={setConfigNodeId}
+                  onDragStart={handleDragStart}
+                  onDragOver={handleDragOver}
+                  onDrop={handleDrop}
+                />
               ) : (
                 <div className="flex items-center justify-center h-64 text-muted-foreground">
                   <p>Select a page to edit its component hierarchy</p>
diff --git a/frontends/nextjs/src/components/managers/component/ComponentHierarchyEditor/Tree.tsx b/frontends/nextjs/src/components/managers/component/ComponentHierarchyEditor/Tree.tsx
new file mode 100644
index 000000000..5960b5f7c
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/component/ComponentHierarchyEditor/Tree.tsx
@@ -0,0 +1,65 @@
+import { Cursor } from '@phosphor-icons/react'
+import type React from 'react'
+import type { ComponentNode } from '@/lib/database'
+import { TreeNode } from '../modules/TreeNode'
+
+interface HierarchyTreeProps {
+  rootNodes: ComponentNode[]
+  hierarchy: Record<string, ComponentNode>
+  selectedNodeId: string | null
+  expandedNodes: Record<string, boolean>
+  draggingNodeId: string | null
+  onSelect: (nodeId: string) => void
+  onToggle: (nodeId: string) => void
+  onDelete: (nodeId: string) => Promise<void>
+  onConfig: (nodeId: string) => void
+  onDragStart: (event: React.DragEvent, nodeId: string) => void
+  onDragOver: (event: React.DragEvent, nodeId: string) => void
+  onDrop: (event: React.DragEvent, nodeId: string) => void
+}
+
+export function HierarchyTree({
+  rootNodes,
+  hierarchy,
+  selectedNodeId,
+  expandedNodes,
+  draggingNodeId,
+  onSelect,
+  onToggle,
+  onDelete,
+  onConfig,
+  onDragStart,
+  onDragOver,
+  onDrop,
+}: HierarchyTreeProps) {
+  if (rootNodes.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-64 text-muted-foreground">
+        <Cursor size={48} className="mb-4" />
+        <p>No components yet. Add one from the catalog!</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-1">
+      {rootNodes.map((node) => (
+        <TreeNode
+          key={node.id}
+          node={node}
+          hierarchy={hierarchy}
+          selectedNodeId={selectedNodeId}
+          expandedNodes={expandedNodes}
+          onSelect={onSelect}
+          onToggle={onToggle}
+          onDelete={onDelete}
+          onConfig={onConfig}
+          onDragStart={onDragStart}
+          onDragOver={onDragOver}
+          onDrop={onDrop}
+          draggingNodeId={draggingNodeId}
+        />
+      ))}
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/component/ComponentHierarchyEditor/selectors.ts b/frontends/nextjs/src/components/managers/component/ComponentHierarchyEditor/selectors.ts
new file mode 100644
index 000000000..383c12303
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/component/ComponentHierarchyEditor/selectors.ts
@@ -0,0 +1,10 @@
+import type { ComponentNode } from '@/lib/database'
+
+export function selectRootNodes(
+  hierarchy: Record<string, ComponentNode>,
+  selectedPageId: string | null
+): ComponentNode[] {
+  return Object.values(hierarchy)
+    .filter(node => node.pageId === selectedPageId && !node.parentId)
+    .sort((a, b) => a.order - b.order)
+}
diff --git a/frontends/nextjs/src/components/managers/css/CssClassBuilder.tsx b/frontends/nextjs/src/components/managers/css/CssClassBuilder.tsx
index 4672a3889..3d03603e9 100644
--- a/frontends/nextjs/src/components/managers/css/CssClassBuilder.tsx
+++ b/frontends/nextjs/src/components/managers/css/CssClassBuilder.tsx
@@ -1,14 +1,12 @@
-import { useState, useEffect, useMemo, useCallback } from 'react'
-import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui'
+import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui'
+import { Badge } from '@/components/ui'
 import { Button } from '@/components/ui'
 import { Input } from '@/components/ui'
 import { Label } from '@/components/ui'
-import { ScrollArea } from '@/components/ui'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-import { Badge } from '@/components/ui'
-import { Database } from '@/lib/database'
-import { Plus, X, FloppyDisk } from '@phosphor-icons/react'
-import { toast } from 'sonner'
+import { useClassBuilderState } from './class-builder/hooks'
+import { Preview } from './class-builder/Preview'
+import { RuleEditor } from './class-builder/RuleEditor'
+import { X, FloppyDisk } from '@phosphor-icons/react'
 
 interface CssClassBuilderProps {
   open: boolean
@@ -17,119 +15,30 @@ interface CssClassBuilderProps {
   onSave: (classes: string) => void
 }
 
-interface CssCategory {
-  name: string
-  classes: string[]
-}
-
-// eslint-disable-next-line no-useless-escape
-const CLASS_TOKEN_PATTERN = /^[A-Za-z0-9:_/.\[\]()%#!,=+-]+$/
-const parseClassList = (value: string) => Array.from(new Set(value.split(/\s+/).filter(Boolean)))
-
 export function CssClassBuilder({ open, onClose, initialValue = '', onSave }: CssClassBuilderProps) {
-  const [selectedClasses, setSelectedClasses] = useState<string[]>([])
-  const [categories, setCategories] = useState<CssCategory[]>([])
-  const [searchQuery, setSearchQuery] = useState('')
-  const [customClass, setCustomClass] = useState('')
-  const [activeTab, setActiveTab] = useState('custom')
+  const {
+    categories,
+    filteredCategories,
+    selectedClasses,
+    selectedClassSet,
+    searchQuery,
+    setSearchQuery,
+    activeTab,
+    setActiveTab,
+    customClass,
+    setCustomClass,
+    invalidCustomTokens,
+    duplicateCustomTokens,
+    unknownCustomTokens,
+    canAddCustom,
+    addCustomClass,
+    toggleClass,
+    clearSelectedClasses,
+  } = useClassBuilderState({ open, initialValue })
 
-  const knownClassSet = useMemo(
-    () => new Set(categories.flatMap((category) => category.classes)),
-    [categories]
-  )
-  const selectedClassSet = useMemo(() => new Set(selectedClasses), [selectedClasses])
-  const normalizedSearch = searchQuery.trim().toLowerCase()
-  const filteredCategories = useMemo(() => {
-    if (!normalizedSearch) {
-      return categories
-    }
-
-    return categories
-      .map((category) => ({
-        ...category,
-        classes: category.classes.filter((cls) => cls.toLowerCase().includes(normalizedSearch)),
-      }))
-      .filter((category) => category.classes.length > 0)
-  }, [categories, normalizedSearch])
-
-  const customTokens = customClass.trim().split(/\s+/).filter(Boolean)
-  const uniqueCustomTokens = Array.from(new Set(customTokens))
-  const invalidCustomTokens = uniqueCustomTokens.filter((token) => !CLASS_TOKEN_PATTERN.test(token))
-  const duplicateCustomTokens = uniqueCustomTokens.filter((token) => selectedClassSet.has(token))
-  const unknownCustomTokens = uniqueCustomTokens.filter((token) => !knownClassSet.has(token))
-  const canAddCustom =
-    uniqueCustomTokens.length > 0 &&
-    invalidCustomTokens.length === 0 &&
-    uniqueCustomTokens.some((token) => !selectedClassSet.has(token))
-
-  const loadCssClasses = useCallback(async () => {
-    const classes = await Database.getCssClasses()
-    const sorted = classes.slice().sort((a, b) => a.name.localeCompare(b.name))
-    setCategories(sorted)
-  }, [])
-
-  useEffect(() => {
-    if (open) {
-      loadCssClasses()
-      setSelectedClasses(parseClassList(initialValue))
-      setSearchQuery('')
-      setCustomClass('')
-    }
-  }, [open, initialValue, loadCssClasses])
-
-  useEffect(() => {
-    if (!open) {
-      return
-    }
-
-    if (filteredCategories.length === 0) {
-      setActiveTab('custom')
-      return
-    }
-
-    if (activeTab === 'custom') {
-      return
-    }
-
-    const hasActiveTab = filteredCategories.some((category) => category.name === activeTab)
-    if (!hasActiveTab) {
-      setActiveTab(filteredCategories[0]?.name ?? 'custom')
-    }
-  }, [activeTab, filteredCategories, open])
-
-  const toggleClass = (cssClass: string) => {
-    setSelectedClasses(current => {
-      if (current.includes(cssClass)) {
-        return current.filter(c => c !== cssClass)
-      } else {
-        return [...current, cssClass]
-      }
-    })
-  }
-
-  const addCustomClass = () => {
-    if (uniqueCustomTokens.length === 0) {
-      return
-    }
-
-    if (invalidCustomTokens.length > 0) {
-      toast.error(`Invalid class name: ${invalidCustomTokens.join(', ')}`)
-      return
-    }
-
-    const newTokens = uniqueCustomTokens.filter((token) => !selectedClassSet.has(token))
-    if (newTokens.length === 0) {
-      toast.info('Those classes are already selected')
-      return
-    }
-
-    setSelectedClasses((current) => [...current, ...newTokens])
-    setCustomClass('')
-  }
-
-  const clearSelectedClasses = () => {
-    setSelectedClasses([])
-  }
+  const normalizedSearch = searchQuery.trim()
+  const hasNoCategories = filteredCategories.length === 0 && categories.length === 0
+  const hasNoSearchResults = filteredCategories.length === 0 && categories.length > 0 && normalizedSearch
 
   const handleSave = () => {
     onSave(selectedClasses.join(' '))
@@ -176,21 +85,16 @@ export function CssClassBuilder({ open, onClose, initialValue = '', onSave }: Cs
                 </div>
               </div>
               <div className="flex flex-wrap gap-2">
-                {selectedClasses.map(cls => (
+                {selectedClasses.map((cls) => (
                   <Badge key={cls} variant="secondary" className="gap-2">
                     {cls}
-                    <button
-                      onClick={() => toggleClass(cls)}
-                      className="hover:text-destructive"
-                    >
+                    <button onClick={() => toggleClass(cls)} className="hover:text-destructive">
                       <X size={14} />
                     </button>
                   </Badge>
                 ))}
               </div>
-              <div className="rounded border bg-background p-2 font-mono text-sm">
-                {selectedClasses.join(' ')}
-              </div>
+              <div className="rounded border bg-background p-2 font-mono text-sm">{selectedClasses.join(' ')}</div>
             </div>
           ) : (
             <div className="p-4 border rounded-lg bg-muted/30 text-sm text-muted-foreground">
@@ -198,106 +102,34 @@ export function CssClassBuilder({ open, onClose, initialValue = '', onSave }: Cs
             </div>
           )}
 
-          <div className="p-4 border rounded-lg bg-muted/30 space-y-2">
-            <Label className="text-xs uppercase tracking-wider">Preview</Label>
-            <div className="rounded-md border border-dashed bg-background p-3">
-              <div className={`rounded-md p-4 transition-all ${selectedClasses.join(' ')}`}>
-                <div className="text-sm font-semibold">Preview element</div>
-                <div className="text-xs text-muted-foreground">
-                  This sample updates as you add or remove classes.
-                </div>
-                <div className="mt-3 inline-flex items-center rounded-md border px-3 py-1 text-xs">
-                  Sample button
-                </div>
-              </div>
-            </div>
-          </div>
+          <Preview selectedClasses={selectedClasses} />
 
-          {filteredCategories.length === 0 && categories.length === 0 && (
+          {hasNoCategories && (
             <div className="rounded-lg border bg-muted/30 p-4 text-sm text-muted-foreground">
               No CSS categories available yet. Add some in the CSS Classes tab.
             </div>
           )}
 
-          {filteredCategories.length === 0 && categories.length > 0 && normalizedSearch && (
+          {hasNoSearchResults && (
             <div className="rounded-lg border bg-muted/30 p-4 text-sm text-muted-foreground">
               No classes match &quot;{searchQuery}&quot;.
             </div>
           )}
 
-          <Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1">
-            <div className="overflow-x-auto">
-              <TabsList className="w-max">
-                {filteredCategories.map(category => (
-                  <TabsTrigger key={category.name} value={category.name}>
-                    {category.name}
-                  </TabsTrigger>
-                ))}
-                <TabsTrigger value="custom">Custom</TabsTrigger>
-              </TabsList>
-            </div>
-
-            {filteredCategories.map(category => (
-              <TabsContent key={category.name} value={category.name}>
-                <ScrollArea className="h-[300px] border rounded-lg p-4">
-                  <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
-                    {category.classes.map(cls => (
-                      <button
-                        key={cls}
-                        onClick={() => toggleClass(cls)}
-                        aria-pressed={selectedClassSet.has(cls)}
-                        className={`
-                          px-3 py-2 text-sm rounded border text-left font-mono transition-all duration-150 active:scale-95
-                          ${selectedClassSet.has(cls)
-                            ? 'bg-primary text-primary-foreground border-primary'
-                            : 'bg-card hover:bg-accent hover:text-accent-foreground'
-                          }
-                        `}
-                      >
-                        {cls}
-                      </button>
-                    ))}
-                  </div>
-                </ScrollArea>
-              </TabsContent>
-            ))}
-
-            <TabsContent value="custom">
-              <div className="border rounded-lg p-4 space-y-3">
-                <div className="flex gap-2">
-                  <Input
-                    placeholder="Enter custom class name..."
-                    value={customClass}
-                    onChange={(e) => setCustomClass(e.target.value)}
-                    onKeyDown={(e) => e.key === 'Enter' && canAddCustom && addCustomClass()}
-                    className={`font-mono ${invalidCustomTokens.length > 0 ? 'border-destructive focus-visible:ring-destructive' : ''}`}
-                  />
-                  <Button onClick={addCustomClass} disabled={!canAddCustom}>
-                    <Plus className="mr-2" />
-                    Add
-                  </Button>
-                </div>
-                {invalidCustomTokens.length > 0 && (
-                  <p className="text-xs text-destructive">
-                    Invalid class names: {invalidCustomTokens.join(', ')}
-                  </p>
-                )}
-                {invalidCustomTokens.length === 0 && unknownCustomTokens.length > 0 && (
-                  <p className="text-xs text-muted-foreground">
-                    Not in library: {unknownCustomTokens.join(', ')}. They will still be added.
-                  </p>
-                )}
-                {duplicateCustomTokens.length > 0 && (
-                  <p className="text-xs text-muted-foreground">
-                    Already selected: {duplicateCustomTokens.join(', ')}
-                  </p>
-                )}
-                <p className="text-xs text-muted-foreground">
-                  Add custom CSS classes that aren't in the predefined list.
-                </p>
-              </div>
-            </TabsContent>
-          </Tabs>
+          <RuleEditor
+            filteredCategories={filteredCategories}
+            activeTab={activeTab}
+            onTabChange={setActiveTab}
+            selectedClassSet={selectedClassSet}
+            toggleClass={toggleClass}
+            customClass={customClass}
+            setCustomClass={setCustomClass}
+            canAddCustom={canAddCustom}
+            addCustomClass={addCustomClass}
+            invalidCustomTokens={invalidCustomTokens}
+            duplicateCustomTokens={duplicateCustomTokens}
+            unknownCustomTokens={unknownCustomTokens}
+          />
         </div>
 
         <DialogFooter className="gap-2">
diff --git a/frontends/nextjs/src/components/managers/css/class-builder/Preview.tsx b/frontends/nextjs/src/components/managers/css/class-builder/Preview.tsx
new file mode 100644
index 000000000..0c1159976
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/css/class-builder/Preview.tsx
@@ -0,0 +1,24 @@
+import { Label } from '@/components/ui'
+
+interface PreviewProps {
+  selectedClasses: string[]
+}
+
+export function Preview({ selectedClasses }: PreviewProps) {
+  return (
+    <div className="p-4 border rounded-lg bg-muted/30 space-y-2">
+      <Label className="text-xs uppercase tracking-wider">Preview</Label>
+      <div className="rounded-md border border-dashed bg-background p-3">
+        <div className={`rounded-md p-4 transition-all ${selectedClasses.join(' ')}`}>
+          <div className="text-sm font-semibold">Preview element</div>
+          <div className="text-xs text-muted-foreground">
+            This sample updates as you add or remove classes.
+          </div>
+          <div className="mt-3 inline-flex items-center rounded-md border px-3 py-1 text-xs">
+            Sample button
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/css/class-builder/RuleEditor.tsx b/frontends/nextjs/src/components/managers/css/class-builder/RuleEditor.tsx
new file mode 100644
index 000000000..a13cd055d
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/css/class-builder/RuleEditor.tsx
@@ -0,0 +1,109 @@
+import { Button, Input, ScrollArea, Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
+import type { CssCategory } from '@/lib/database'
+import { Plus } from '@phosphor-icons/react'
+
+interface RuleEditorProps {
+  filteredCategories: CssCategory[]
+  activeTab: string
+  onTabChange: (value: string) => void
+  selectedClassSet: Set<string>
+  toggleClass: (cssClass: string) => void
+  customClass: string
+  setCustomClass: (value: string) => void
+  canAddCustom: boolean
+  addCustomClass: () => void
+  invalidCustomTokens: string[]
+  duplicateCustomTokens: string[]
+  unknownCustomTokens: string[]
+}
+
+export function RuleEditor({
+  filteredCategories,
+  activeTab,
+  onTabChange,
+  selectedClassSet,
+  toggleClass,
+  customClass,
+  setCustomClass,
+  canAddCustom,
+  addCustomClass,
+  invalidCustomTokens,
+  duplicateCustomTokens,
+  unknownCustomTokens,
+}: RuleEditorProps) {
+  return (
+    <Tabs value={activeTab} onValueChange={onTabChange} className="flex-1">
+      <div className="overflow-x-auto">
+        <TabsList className="w-max">
+          {filteredCategories.map((category) => (
+            <TabsTrigger key={category.name} value={category.name}>
+              {category.name}
+            </TabsTrigger>
+          ))}
+          <TabsTrigger value="custom">Custom</TabsTrigger>
+        </TabsList>
+      </div>
+
+      {filteredCategories.map((category) => (
+        <TabsContent key={category.name} value={category.name}>
+          <ScrollArea className="h-[300px] border rounded-lg p-4">
+            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2">
+              {category.classes.map((cls) => (
+                <button
+                  key={cls}
+                  onClick={() => toggleClass(cls)}
+                  aria-pressed={selectedClassSet.has(cls)}
+                  className={`
+                    px-3 py-2 text-sm rounded border text-left font-mono transition-all duration-150 active:scale-95
+                    ${selectedClassSet.has(cls)
+                      ? 'bg-primary text-primary-foreground border-primary'
+                      : 'bg-card hover:bg-accent hover:text-accent-foreground'
+                    }
+                  `}
+                >
+                  {cls}
+                </button>
+              ))}
+            </div>
+          </ScrollArea>
+        </TabsContent>
+      ))}
+
+      <TabsContent value="custom">
+        <div className="border rounded-lg p-4 space-y-3">
+          <div className="flex gap-2">
+            <Input
+              placeholder="Enter custom class name..."
+              value={customClass}
+              onChange={(e) => setCustomClass(e.target.value)}
+              onKeyDown={(e) => e.key === 'Enter' && canAddCustom && addCustomClass()}
+              className={`font-mono ${invalidCustomTokens.length > 0 ? 'border-destructive focus-visible:ring-destructive' : ''}`}
+            />
+            <Button onClick={addCustomClass} disabled={!canAddCustom}>
+              <Plus className="mr-2" />
+              Add
+            </Button>
+          </div>
+          {invalidCustomTokens.length > 0 && (
+            <p className="text-xs text-destructive">
+              Invalid class names: {invalidCustomTokens.join(', ')}
+            </p>
+          )}
+          {invalidCustomTokens.length === 0 && unknownCustomTokens.length > 0 && (
+            <p className="text-xs text-muted-foreground">
+              Not in library: {unknownCustomTokens.join(', ')}. They will still be added.
+            </p>
+          )}
+          {duplicateCustomTokens.length > 0 && (
+            <p className="text-xs text-muted-foreground">
+              Already selected: {duplicateCustomTokens.join(', ')}
+            </p>
+          )}
+          <p className="text-xs text-muted-foreground">
+            Add custom CSS classes that aren't in the predefined list.
+          </p>
+        </div>
+      </TabsContent>
+    </Tabs>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/css/class-builder/hooks.ts b/frontends/nextjs/src/components/managers/css/class-builder/hooks.ts
new file mode 100644
index 000000000..d4a7ff8c0
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/css/class-builder/hooks.ts
@@ -0,0 +1,147 @@
+import { useState, useEffect, useMemo, useCallback } from 'react'
+import { Database, CssCategory } from '@/lib/database'
+import { toast } from 'sonner'
+
+const CLASS_TOKEN_PATTERN = /^[A-Za-z0-9:_/.\[\]()%#!,=+-]+$/
+const parseClassList = (value: string) => Array.from(new Set(value.split(/\s+/).filter(Boolean)))
+
+interface UseClassBuilderStateProps {
+  open: boolean
+  initialValue: string
+}
+
+export function useClassBuilderState({ open, initialValue }: UseClassBuilderStateProps) {
+  const [selectedClasses, setSelectedClasses] = useState<string[]>([])
+  const [categories, setCategories] = useState<CssCategory[]>([])
+  const [searchQuery, setSearchQuery] = useState('')
+  const [customClass, setCustomClass] = useState('')
+  const [activeTab, setActiveTab] = useState('custom')
+
+  const knownClassSet = useMemo(() => new Set(categories.flatMap((category) => category.classes)), [categories])
+  const selectedClassSet = useMemo(() => new Set(selectedClasses), [selectedClasses])
+  const normalizedSearch = searchQuery.trim().toLowerCase()
+
+  const filteredCategories = useMemo(() => {
+    if (!normalizedSearch) {
+      return categories
+    }
+
+    return categories
+      .map((category) => ({
+        ...category,
+        classes: category.classes.filter((cls) => cls.toLowerCase().includes(normalizedSearch)),
+      }))
+      .filter((category) => category.classes.length > 0)
+  }, [categories, normalizedSearch])
+
+  const customTokens = useMemo(() => customClass.trim().split(/\s+/).filter(Boolean), [customClass])
+  const uniqueCustomTokens = useMemo(() => Array.from(new Set(customTokens)), [customTokens])
+  const invalidCustomTokens = useMemo(
+    () => uniqueCustomTokens.filter((token) => !CLASS_TOKEN_PATTERN.test(token)),
+    [uniqueCustomTokens]
+  )
+  const duplicateCustomTokens = useMemo(
+    () => uniqueCustomTokens.filter((token) => selectedClassSet.has(token)),
+    [uniqueCustomTokens, selectedClassSet]
+  )
+  const unknownCustomTokens = useMemo(
+    () => uniqueCustomTokens.filter((token) => !knownClassSet.has(token)),
+    [uniqueCustomTokens, knownClassSet]
+  )
+  const canAddCustom = useMemo(
+    () =>
+      uniqueCustomTokens.length > 0 &&
+      invalidCustomTokens.length === 0 &&
+      uniqueCustomTokens.some((token) => !selectedClassSet.has(token)),
+    [invalidCustomTokens.length, selectedClassSet, uniqueCustomTokens]
+  )
+
+  const loadCssClasses = useCallback(async () => {
+    const classes = await Database.getCssClasses()
+    const sorted = classes.slice().sort((a, b) => a.name.localeCompare(b.name))
+    setCategories(sorted)
+  }, [])
+
+  useEffect(() => {
+    if (open) {
+      loadCssClasses()
+      setSelectedClasses(parseClassList(initialValue))
+      setSearchQuery('')
+      setCustomClass('')
+    }
+  }, [open, initialValue, loadCssClasses])
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    if (filteredCategories.length === 0) {
+      setActiveTab('custom')
+      return
+    }
+
+    if (activeTab === 'custom') {
+      return
+    }
+
+    const hasActiveTab = filteredCategories.some((category) => category.name === activeTab)
+    if (!hasActiveTab) {
+      setActiveTab(filteredCategories[0]?.name ?? 'custom')
+    }
+  }, [activeTab, filteredCategories, open])
+
+  const toggleClass = (cssClass: string) => {
+    setSelectedClasses((current) => {
+      if (current.includes(cssClass)) {
+        return current.filter((c) => c !== cssClass)
+      }
+
+      return [...current, cssClass]
+    })
+  }
+
+  const addCustomClass = () => {
+    if (uniqueCustomTokens.length === 0) {
+      return
+    }
+
+    if (invalidCustomTokens.length > 0) {
+      toast.error(`Invalid class name: ${invalidCustomTokens.join(', ')}`)
+      return
+    }
+
+    const newTokens = uniqueCustomTokens.filter((token) => !selectedClassSet.has(token))
+    if (newTokens.length === 0) {
+      toast.info('Those classes are already selected')
+      return
+    }
+
+    setSelectedClasses((current) => [...current, ...newTokens])
+    setCustomClass('')
+  }
+
+  const clearSelectedClasses = () => {
+    setSelectedClasses([])
+  }
+
+  return {
+    categories,
+    filteredCategories,
+    selectedClasses,
+    selectedClassSet,
+    searchQuery,
+    setSearchQuery,
+    activeTab,
+    setActiveTab,
+    customClass,
+    setCustomClass,
+    invalidCustomTokens,
+    duplicateCustomTokens,
+    unknownCustomTokens,
+    canAddCustom,
+    addCustomClass,
+    toggleClass,
+    clearSelectedClasses,
+  }
+}
diff --git a/frontends/nextjs/src/components/managers/database/ActionToolbar.tsx b/frontends/nextjs/src/components/managers/database/ActionToolbar.tsx
new file mode 100644
index 000000000..ddd2029cb
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/database/ActionToolbar.tsx
@@ -0,0 +1,38 @@
+import { Button } from '@/components/ui'
+import { ArrowsClockwise, Export, UploadSimple, Trash } from '@phosphor-icons/react'
+
+interface ActionToolbarProps {
+  isLoading?: boolean
+  onRefresh: () => void
+  onExport: () => void
+  onImport: () => void
+  onClear: () => void
+}
+
+export function ActionToolbar({ isLoading, onRefresh, onExport, onImport, onClear }: ActionToolbarProps) {
+  return (
+    <div className="flex items-center justify-between">
+      <div>
+        <h2 className="text-2xl font-bold">Database Management</h2>
+        <p className="text-muted-foreground">Manage all persistent data across the application</p>
+      </div>
+      <div className="flex gap-2">
+        <Button variant="outline" size="sm" onClick={onRefresh} disabled={isLoading}>
+          <ArrowsClockwise size={16} className={isLoading ? 'animate-spin' : ''} />
+        </Button>
+        <Button variant="outline" size="sm" onClick={onExport}>
+          <Export size={16} className="mr-2" />
+          Export
+        </Button>
+        <Button variant="outline" size="sm" onClick={onImport}>
+          <UploadSimple size={16} className="mr-2" />
+          Import
+        </Button>
+        <Button variant="destructive" size="sm" onClick={onClear}>
+          <Trash className="mr-2" size={16} />
+          Clear DB
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/database/ConnectionForm.tsx b/frontends/nextjs/src/components/managers/database/ConnectionForm.tsx
new file mode 100644
index 000000000..ac3dc3ce8
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/database/ConnectionForm.tsx
@@ -0,0 +1,115 @@
+import { useState, type FormEvent } from 'react'
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label } from '@/components/ui'
+
+export interface ConnectionDetails {
+  driver: string
+  host: string
+  port: string
+  database: string
+  username: string
+  password: string
+}
+
+interface ConnectionFormProps {
+  onConnect: (details: ConnectionDetails) => Promise<void> | void
+  isConnecting?: boolean
+  status: 'disconnected' | 'connecting' | 'connected'
+  lastConnectedAt: Date | null
+}
+
+export function ConnectionForm({ onConnect, isConnecting, status, lastConnectedAt }: ConnectionFormProps) {
+  const [details, setDetails] = useState<ConnectionDetails>({
+    driver: 'prisma-client',
+    host: 'localhost',
+    port: '5432',
+    database: 'metabuilder',
+    username: 'admin',
+    password: '',
+  })
+
+  const handleChange = (key: keyof ConnectionDetails, value: string) => {
+    setDetails((prev) => ({ ...prev, [key]: value }))
+  }
+
+  const handleSubmit = async (event: FormEvent) => {
+    event.preventDefault()
+    await onConnect(details)
+  }
+
+  const statusVariant = status === 'connected' ? 'default' : status === 'connecting' ? 'secondary' : 'outline'
+  const statusLabel =
+    status === 'connected'
+      ? 'Connected'
+      : status === 'connecting'
+        ? 'Connecting...'
+        : 'Not connected'
+
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between">
+        <div>
+          <CardTitle>Connection</CardTitle>
+          <CardDescription>Initialize and validate access to the database layer</CardDescription>
+        </div>
+        <Badge variant={statusVariant}>{statusLabel}</Badge>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={handleSubmit} className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="driver">Driver</Label>
+            <Input
+              id="driver"
+              value={details.driver}
+              onChange={(e) => handleChange('driver', e.target.value)}
+              placeholder="prisma-client"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="database">Database</Label>
+            <Input
+              id="database"
+              value={details.database}
+              onChange={(e) => handleChange('database', e.target.value)}
+              placeholder="metabuilder"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="host">Host</Label>
+            <Input id="host" value={details.host} onChange={(e) => handleChange('host', e.target.value)} placeholder="localhost" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="port">Port</Label>
+            <Input id="port" value={details.port} onChange={(e) => handleChange('port', e.target.value)} placeholder="5432" />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="username">Username</Label>
+            <Input
+              id="username"
+              value={details.username}
+              onChange={(e) => handleChange('username', e.target.value)}
+              placeholder="admin"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={details.password}
+              onChange={(e) => handleChange('password', e.target.value)}
+              placeholder="••••••••"
+            />
+          </div>
+          <div className="md:col-span-2 flex items-center justify-between">
+            <div className="text-sm text-muted-foreground">
+              {lastConnectedAt ? `Last connected ${lastConnectedAt.toLocaleString()}` : 'No connection established yet.'}
+            </div>
+            <Button type="submit" disabled={isConnecting}>
+              {isConnecting ? 'Connecting...' : 'Initialize'}
+            </Button>
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/database/DatabaseManager.tsx b/frontends/nextjs/src/components/managers/database/DatabaseManager.tsx
index ba65e5fd1..d951f226a 100644
--- a/frontends/nextjs/src/components/managers/database/DatabaseManager.tsx
+++ b/frontends/nextjs/src/components/managers/database/DatabaseManager.tsx
@@ -1,9 +1,7 @@
-import { useState, useEffect } from 'react'
-import { Button } from '@/components/ui'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { Badge } from '@/components/ui'
-import { ScrollArea } from '@/components/ui'
 import { Database, DB_KEYS } from '@/lib/database'
+import type { ModelSchema } from '@/lib/types/schema-types'
 import { toast } from 'sonner'
 import {
   Database as DatabaseIcon,
@@ -16,12 +14,27 @@ import {
   ChatCircle,
   Tree,
   Gear,
-  Trash,
-  ArrowsClockwise,
 } from '@phosphor-icons/react'
+import { ActionToolbar } from './ActionToolbar'
+import { ConnectionForm, type ConnectionDetails } from './ConnectionForm'
+import { SchemaViewer } from './SchemaViewer'
+
+interface DatabaseStats {
+  users: number
+  credentials: number
+  workflows: number
+  luaScripts: number
+  pages: number
+  schemas: number
+  comments: number
+  componentNodes: number
+  componentConfigs: number
+}
+
+type ConnectionState = 'disconnected' | 'connecting' | 'connected'
 
 export function DatabaseManager() {
-  const [stats, setStats] = useState({
+  const [stats, setStats] = useState<DatabaseStats>({
     users: 0,
     credentials: 0,
     workflows: 0,
@@ -32,14 +45,12 @@ export function DatabaseManager() {
     componentNodes: 0,
     componentConfigs: 0,
   })
-
+  const [schemas, setSchemas] = useState<ModelSchema[]>([])
   const [isLoading, setIsLoading] = useState(false)
+  const [connectionState, setConnectionState] = useState<ConnectionState>('disconnected')
+  const [lastConnectedAt, setLastConnectedAt] = useState<Date | null>(null)
 
-  useEffect(() => {
-    loadStats()
-  }, [])
-
-  const loadStats = async () => {
+  const loadStats = useCallback(async () => {
     setIsLoading(true)
     try {
       const [
@@ -48,7 +59,7 @@ export function DatabaseManager() {
         workflows,
         luaScripts,
         pages,
-        schemas,
+        schemaData,
         comments,
         hierarchy,
         configs,
@@ -70,19 +81,25 @@ export function DatabaseManager() {
         workflows: workflows.length,
         luaScripts: luaScripts.length,
         pages: pages.length,
-        schemas: schemas.length,
+        schemas: schemaData.length,
         comments: comments.length,
         componentNodes: Object.keys(hierarchy).length,
         componentConfigs: Object.keys(configs).length,
       })
+      setSchemas(schemaData)
     } catch (error) {
+      console.error(error)
       toast.error('Failed to load database statistics')
     } finally {
       setIsLoading(false)
     }
-  }
+  }, [])
 
-  const handleClearDatabase = async () => {
+  useEffect(() => {
+    void loadStats()
+  }, [loadStats])
+
+  const handleClearDatabase = useCallback(async () => {
     if (!confirm('Are you sure you want to clear the entire database? This action cannot be undone!')) {
       return
     }
@@ -97,11 +114,12 @@ export function DatabaseManager() {
       await loadStats()
       toast.success('Database cleared and reinitialized')
     } catch (error) {
+      console.error(error)
       toast.error('Failed to clear database')
     }
-  }
+  }, [loadStats])
 
-  const handleExportDatabase = async () => {
+  const handleExportDatabase = useCallback(async () => {
     try {
       const data = await Database.exportDatabase()
       const blob = new Blob([data], { type: 'application/json' })
@@ -113,11 +131,12 @@ export function DatabaseManager() {
       URL.revokeObjectURL(url)
       toast.success('Database exported successfully')
     } catch (error) {
+      console.error(error)
       toast.error('Failed to export database')
     }
-  }
+  }, [])
 
-  const handleImportDatabase = () => {
+  const handleImportDatabase = useCallback(() => {
     const input = document.createElement('input')
     input.type = 'file'
     input.accept = 'application/json'
@@ -131,51 +150,64 @@ export function DatabaseManager() {
         await loadStats()
         toast.success('Database imported successfully')
       } catch (error) {
+        console.error(error)
         toast.error('Failed to import database')
       }
     }
     input.click()
-  }
+  }, [loadStats])
 
-  const totalRecords = Object.values(stats).reduce((a, b) => a + b, 0)
+  const handleConnect = useCallback(
+    async (details: ConnectionDetails) => {
+      setConnectionState('connecting')
+      try {
+        await Database.initializeDatabase()
+        setConnectionState('connected')
+        setLastConnectedAt(new Date())
+        toast.success(`Connected to ${details.database || 'Metabuilder database'} via ${details.driver}`)
+        await loadStats()
+      } catch (error) {
+        console.error(error)
+        setConnectionState('disconnected')
+        toast.error('Failed to initialize database connection')
+      }
+    },
+    [loadStats],
+  )
 
-  const dbEntities = [
-    { key: 'users', icon: Users, label: 'Users', count: stats.users, color: 'text-blue-500' },
-    { key: 'credentials', icon: Key, label: 'Credentials (SHA-512)', count: stats.credentials, color: 'text-amber-500' },
-    { key: 'workflows', icon: Lightning, label: 'Workflows', count: stats.workflows, color: 'text-purple-500' },
-    { key: 'luaScripts', icon: Code, label: 'Lua Scripts', count: stats.luaScripts, color: 'text-indigo-500' },
-    { key: 'pages', icon: FileText, label: 'Pages', count: stats.pages, color: 'text-cyan-500' },
-    { key: 'schemas', icon: TableIcon, label: 'Data Schemas', count: stats.schemas, color: 'text-green-500' },
-    { key: 'comments', icon: ChatCircle, label: 'Comments', count: stats.comments, color: 'text-pink-500' },
-    { key: 'componentNodes', icon: Tree, label: 'Component Hierarchy', count: stats.componentNodes, color: 'text-teal-500' },
-    { key: 'componentConfigs', icon: Gear, label: 'Component Configs', count: stats.componentConfigs, color: 'text-orange-500' },
-  ]
+  const dbEntities = useMemo(
+    () => [
+      { key: 'users', icon: Users, label: 'Users', count: stats.users, color: 'text-blue-500' },
+      { key: 'credentials', icon: Key, label: 'Credentials (SHA-512)', count: stats.credentials, color: 'text-amber-500' },
+      { key: 'workflows', icon: Lightning, label: 'Workflows', count: stats.workflows, color: 'text-purple-500' },
+      { key: 'luaScripts', icon: Code, label: 'Lua Scripts', count: stats.luaScripts, color: 'text-indigo-500' },
+      { key: 'pages', icon: FileText, label: 'Pages', count: stats.pages, color: 'text-cyan-500' },
+      { key: 'schemas', icon: TableIcon, label: 'Data Schemas', count: stats.schemas, color: 'text-green-500' },
+      { key: 'comments', icon: ChatCircle, label: 'Comments', count: stats.comments, color: 'text-pink-500' },
+      { key: 'componentNodes', icon: Tree, label: 'Component Hierarchy', count: stats.componentNodes, color: 'text-teal-500' },
+      { key: 'componentConfigs', icon: Gear, label: 'Component Configs', count: stats.componentConfigs, color: 'text-orange-500' },
+    ],
+    [stats],
+  )
+
+  const totalRecords = useMemo(() => Object.values(stats).reduce((a, b) => a + b, 0), [stats])
 
   return (
     <div className="space-y-6">
-      <div className="flex items-center justify-between">
-        <div>
-          <h2 className="text-2xl font-bold">Database Management</h2>
-          <p className="text-muted-foreground">
-            Manage all persistent data across the application
-          </p>
-        </div>
-        <div className="flex gap-2">
-          <Button variant="outline" size="sm" onClick={loadStats} disabled={isLoading}>
-            <ArrowsClockwise size={16} className={isLoading ? 'animate-spin' : ''} />
-          </Button>
-          <Button variant="outline" size="sm" onClick={handleExportDatabase}>
-            Export
-          </Button>
-          <Button variant="outline" size="sm" onClick={handleImportDatabase}>
-            Import
-          </Button>
-          <Button variant="destructive" size="sm" onClick={handleClearDatabase}>
-            <Trash className="mr-2" size={16} />
-            Clear DB
-          </Button>
-        </div>
-      </div>
+      <ActionToolbar
+        isLoading={isLoading}
+        onRefresh={() => void loadStats()}
+        onExport={handleExportDatabase}
+        onImport={handleImportDatabase}
+        onClear={handleClearDatabase}
+      />
+
+      <ConnectionForm
+        onConnect={handleConnect}
+        isConnecting={connectionState === 'connecting'}
+        status={connectionState}
+        lastConnectedAt={lastConnectedAt}
+      />
 
       <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
         <Card className="col-span-full bg-gradient-to-br from-primary/10 to-accent/10 border-2 border-dashed border-primary/30">
@@ -184,9 +216,7 @@ export function DatabaseManager() {
               <DatabaseIcon size={24} />
               Database Overview
             </CardTitle>
-            <CardDescription>
-              All data stored using SHA-512 password hashing and KV persistence
-            </CardDescription>
+            <CardDescription>All data stored using SHA-512 password hashing and KV persistence</CardDescription>
           </CardHeader>
           <CardContent>
             <div className="text-3xl font-bold">{totalRecords}</div>
@@ -210,31 +240,7 @@ export function DatabaseManager() {
         ))}
       </div>
 
-      <Card>
-        <CardHeader>
-          <CardTitle>Database Keys</CardTitle>
-          <CardDescription>
-            All KV storage keys used by the application
-          </CardDescription>
-        </CardHeader>
-        <CardContent>
-          <ScrollArea className="h-64">
-            <div className="space-y-2">
-              {Object.entries(DB_KEYS).map(([key, value]) => (
-                <div key={key} className="flex items-center justify-between p-3 border border-border rounded-lg">
-                  <div>
-                    <span className="font-mono text-sm font-medium">{key}</span>
-                    <p className="text-xs text-muted-foreground mt-1">{value}</p>
-                  </div>
-                  <Badge variant="secondary" className="font-mono text-xs">
-                    KV
-                  </Badge>
-                </div>
-              ))}
-            </div>
-          </ScrollArea>
-        </CardContent>
-      </Card>
+      <SchemaViewer schemas={schemas} dbKeys={DB_KEYS} />
 
       <Card className="border-amber-500/50 bg-amber-500/5">
         <CardHeader>
diff --git a/frontends/nextjs/src/components/managers/database/SchemaViewer.tsx b/frontends/nextjs/src/components/managers/database/SchemaViewer.tsx
new file mode 100644
index 000000000..f601641c0
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/database/SchemaViewer.tsx
@@ -0,0 +1,81 @@
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle, ScrollArea } from '@/components/ui'
+import type { ModelSchema } from '@/lib/types/schema-types'
+
+interface SchemaViewerProps {
+  schemas: ModelSchema[]
+  dbKeys: Record<string, string>
+}
+
+export function SchemaViewer({ schemas, dbKeys }: SchemaViewerProps) {
+  return (
+    <div className="grid gap-4 lg:grid-cols-2">
+      <Card>
+        <CardHeader>
+          <CardTitle>Schemas</CardTitle>
+          <CardDescription>Models and fields available in the database</CardDescription>
+        </CardHeader>
+        <CardContent>
+          {schemas.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No schemas configured yet.</p>
+          ) : (
+            <div className="space-y-3">
+              {schemas.map((schema) => (
+                <div key={schema.name} className="rounded-lg border p-3 bg-muted/40">
+                  <div className="flex items-center justify-between gap-2">
+                    <div>
+                      <p className="flex items-center gap-2 text-sm font-semibold">
+                        {schema.icon && <span className="text-lg">{schema.icon}</span>}
+                        {schema.label || schema.name}
+                        <span className="font-mono text-xs text-muted-foreground">{schema.name}</span>
+                      </p>
+                      {schema.labelPlural && (
+                        <p className="text-xs text-muted-foreground">Plural: {schema.labelPlural}</p>
+                      )}
+                    </div>
+                    <Badge variant="secondary">{schema.fields.length} fields</Badge>
+                  </div>
+                  {schema.fields.length > 0 && (
+                    <div className="mt-2 flex flex-wrap gap-2 text-xs text-muted-foreground">
+                      {schema.fields.slice(0, 6).map((field) => (
+                        <span key={field.name} className="rounded-full bg-background px-2 py-1 border">
+                          {field.label || field.name} ({field.type})
+                        </span>
+                      ))}
+                      {schema.fields.length > 6 && (
+                        <span className="rounded-full bg-background px-2 py-1 border">+{schema.fields.length - 6} more</span>
+                      )}
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Database Keys</CardTitle>
+          <CardDescription>All KV storage keys used by the application</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ScrollArea className="h-72">
+            <div className="space-y-2">
+              {Object.entries(dbKeys).map(([key, value]) => (
+                <div key={key} className="flex items-center justify-between p-3 border border-border rounded-lg">
+                  <div>
+                    <span className="font-mono text-sm font-medium">{key}</span>
+                    <p className="text-xs text-muted-foreground mt-1">{value}</p>
+                  </div>
+                  <Badge variant="secondary" className="font-mono text-xs">
+                    KV
+                  </Badge>
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/dropdown/DropdownConfigForm.tsx b/frontends/nextjs/src/components/managers/dropdown/DropdownConfigForm.tsx
new file mode 100644
index 000000000..754d4cf73
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/dropdown/DropdownConfigForm.tsx
@@ -0,0 +1,182 @@
+import { useEffect, useMemo, useState } from 'react'
+import { Badge, Button, Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle, Input, Label, ScrollArea, Separator } from '@/components/ui'
+import { FloppyDisk, Plus, X } from '@phosphor-icons/react'
+import { toast } from 'sonner'
+import type { DropdownConfig } from '@/lib/database'
+
+interface DropdownConfigFormProps {
+  open: boolean
+  editingDropdown: DropdownConfig | null
+  onOpenChange: (open: boolean) => void
+  onSave: (config: DropdownConfig, isEdit: boolean) => Promise<void> | void
+}
+
+const getDefaultOptions = (dropdown?: DropdownConfig | null) => dropdown?.options ?? []
+
+const buildDropdownConfig = (
+  dropdown: DropdownConfig | null,
+  name: string,
+  label: string,
+  options: Array<{ value: string; label: string }>
+): DropdownConfig => ({
+  id: dropdown?.id ?? `dropdown_${Date.now()}`,
+  name: name.trim(),
+  label: label.trim(),
+  options,
+})
+
+export function DropdownConfigForm({ open, editingDropdown, onOpenChange, onSave }: DropdownConfigFormProps) {
+  const [dropdownName, setDropdownName] = useState('')
+  const [dropdownLabel, setDropdownLabel] = useState('')
+  const [options, setOptions] = useState<Array<{ value: string; label: string }>>([])
+  const [newOptionValue, setNewOptionValue] = useState('')
+  const [newOptionLabel, setNewOptionLabel] = useState('')
+
+  const isEditMode = useMemo(() => Boolean(editingDropdown), [editingDropdown])
+
+  useEffect(() => {
+    if (open) {
+      setDropdownName(editingDropdown?.name ?? '')
+      setDropdownLabel(editingDropdown?.label ?? '')
+      setOptions(getDefaultOptions(editingDropdown))
+    } else {
+      setDropdownName('')
+      setDropdownLabel('')
+      setOptions([])
+      setNewOptionValue('')
+      setNewOptionLabel('')
+    }
+  }, [open, editingDropdown])
+
+  const addOption = () => {
+    if (!newOptionValue.trim() || !newOptionLabel.trim()) {
+      toast.error('Please provide both a value and label for the option')
+      return
+    }
+
+    const duplicate = options.some(
+      (opt) => opt.value.toLowerCase() === newOptionValue.trim().toLowerCase()
+    )
+
+    if (duplicate) {
+      toast.error('An option with this value already exists')
+      return
+    }
+
+    setOptions((current) => [
+      ...current,
+      { value: newOptionValue.trim(), label: newOptionLabel.trim() },
+    ])
+    setNewOptionValue('')
+    setNewOptionLabel('')
+  }
+
+  const removeOption = (index: number) => {
+    setOptions((current) => current.filter((_, i) => i !== index))
+  }
+
+  const handleSave = async () => {
+    if (!dropdownName.trim() || !dropdownLabel.trim() || options.length === 0) {
+      toast.error('Please fill all fields and add at least one option')
+      return
+    }
+
+    const config = buildDropdownConfig(editingDropdown, dropdownName, dropdownLabel, options)
+    await onSave(config, isEditMode)
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>{isEditMode ? 'Edit' : 'Create'} Dropdown Configuration</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-2">
+            <Label htmlFor="dropdownName">Dropdown Name (ID)</Label>
+            <Input
+              id="dropdownName"
+              placeholder="e.g., status_options"
+              value={dropdownName}
+              onChange={(e) => setDropdownName(e.target.value)}
+            />
+            <p className="text-xs text-muted-foreground">Unique identifier for this dropdown</p>
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="dropdownLabel">Display Label</Label>
+            <Input
+              id="dropdownLabel"
+              placeholder="e.g., Status"
+              value={dropdownLabel}
+              onChange={(e) => setDropdownLabel(e.target.value)}
+            />
+          </div>
+
+          <Separator />
+
+          <div className="space-y-2">
+            <Label>Options</Label>
+            <div className="flex gap-2">
+              <Input
+                placeholder="Value"
+                value={newOptionValue}
+                onChange={(e) => setNewOptionValue(e.target.value)}
+              />
+              <Input
+                placeholder="Label"
+                value={newOptionLabel}
+                onChange={(e) => setNewOptionLabel(e.target.value)}
+              />
+              <Button onClick={addOption} type="button">
+                <Plus size={16} />
+              </Button>
+            </div>
+          </div>
+
+          {options.length > 0 && (
+            <ScrollArea className="h-[200px] border rounded-lg p-3">
+              <div className="space-y-2">
+                {options.map((opt, i) => (
+                  <div key={i} className="flex items-center justify-between p-2 border rounded bg-muted/50">
+                    <div className="flex-1">
+                      <span className="font-mono text-sm">{opt.value}</span>
+                      <span className="mx-2 text-muted-foreground">→</span>
+                      <span className="text-sm">{opt.label}</span>
+                    </div>
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      onClick={() => removeOption(i)}
+                    >
+                      <X size={16} />
+                    </Button>
+                  </div>
+                ))}
+              </div>
+            </ScrollArea>
+          )}
+        </div>
+
+        {options.length === 0 && (
+          <div className="flex items-center gap-2 rounded-md border bg-muted/40 p-3 text-sm text-muted-foreground">
+            <Badge variant="outline">Tip</Badge>
+            Add at least one option to save this dropdown configuration.
+          </div>
+        )}
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+          <Button onClick={handleSave}>
+            <FloppyDisk className="mr-2" />
+            Save
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/dropdown/PreviewPane.tsx b/frontends/nextjs/src/components/managers/dropdown/PreviewPane.tsx
new file mode 100644
index 000000000..bbc144249
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/dropdown/PreviewPane.tsx
@@ -0,0 +1,44 @@
+import { Badge, Button, Card, Separator } from '@/components/ui'
+import { Pencil, Trash } from '@phosphor-icons/react'
+import type { DropdownConfig } from '@/lib/database'
+
+interface PreviewPaneProps {
+  dropdown: DropdownConfig
+  onEdit: (dropdown: DropdownConfig) => void
+  onDelete: (id: string) => void
+}
+
+export function PreviewPane({ dropdown, onEdit, onDelete }: PreviewPaneProps) {
+  const handleDelete = () => {
+    if (confirm('Are you sure you want to delete this dropdown configuration?')) {
+      onDelete(dropdown.id)
+    }
+  }
+
+  return (
+    <Card className="p-4 space-y-3">
+      <div className="flex items-start justify-between">
+        <div>
+          <h3 className="font-semibold">{dropdown.label}</h3>
+          <p className="text-xs text-muted-foreground font-mono">{dropdown.name}</p>
+        </div>
+        <div className="flex gap-1">
+          <Button size="sm" variant="ghost" onClick={() => onEdit(dropdown)}>
+            <Pencil size={16} />
+          </Button>
+          <Button size="sm" variant="ghost" onClick={handleDelete}>
+            <Trash size={16} />
+          </Button>
+        </div>
+      </div>
+      <Separator />
+      <div className="flex flex-wrap gap-1">
+        {dropdown.options.map((opt, i) => (
+          <Badge key={i} variant="secondary" className="text-xs">
+            {opt.label}
+          </Badge>
+        ))}
+      </div>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/package/PackageDetailsDialog.tsx b/frontends/nextjs/src/components/managers/package/PackageDetailsDialog.tsx
new file mode 100644
index 000000000..14b63509e
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/package/PackageDetailsDialog.tsx
@@ -0,0 +1,185 @@
+import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, ScrollArea, Separator, Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
+import type { PackageCatalogData } from '@/lib/packages/core/package-catalog'
+import type { InstalledPackage } from '@/lib/package-types'
+import { Download, Star, Tag, Trash, User } from '@phosphor-icons/react'
+import { DependenciesTab } from './tabs/DependenciesTab'
+import { ScriptsTab } from './tabs/ScriptsTab'
+
+interface PackageDetailsDialogProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  selectedPackage: PackageCatalogData | null
+  installing: boolean
+  onInstall: (packageId: string) => void
+  onUninstall: (packageId: string) => void
+  installedPackages: InstalledPackage[]
+  getCatalogEntry: (packageId: string) => PackageCatalogData | undefined
+}
+
+export function PackageDetailsDialog({
+  open,
+  onOpenChange,
+  selectedPackage,
+  installing,
+  onInstall,
+  onUninstall,
+  installedPackages,
+  getCatalogEntry,
+}: PackageDetailsDialogProps) {
+  if (!selectedPackage) return null
+
+  const { manifest, content } = selectedPackage
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
+        <DialogHeader>
+          <div className="flex items-start gap-4">
+            <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-purple-500 to-purple-700 flex items-center justify-center text-3xl flex-shrink-0">
+              {manifest.icon}
+            </div>
+            <div className="flex-1">
+              <DialogTitle className="text-2xl">{manifest.name}</DialogTitle>
+              <DialogDescription className="mt-1">{manifest.description}</DialogDescription>
+              <div className="flex items-center gap-3 mt-3">
+                <Badge variant="secondary">{manifest.category}</Badge>
+                <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                  <Download size={14} />
+                  <span>{manifest.downloadCount.toLocaleString()}</span>
+                </div>
+                <div className="flex items-center gap-1 text-sm text-muted-foreground">
+                  <Star size={14} weight="fill" className="text-yellow-500" />
+                  <span>{manifest.rating}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </DialogHeader>
+
+        <Separator className="my-4" />
+
+        <Tabs defaultValue="overview" className="flex-1 flex flex-col">
+          <div className="px-1">
+            <TabsList className="grid grid-cols-3 w-full">
+              <TabsTrigger value="overview">Overview</TabsTrigger>
+              <TabsTrigger value="dependencies">Dependencies</TabsTrigger>
+              <TabsTrigger value="scripts">Scripts</TabsTrigger>
+            </TabsList>
+          </div>
+
+          <TabsContent value="overview" className="flex-1 m-0">
+            <ScrollArea className="h-[50vh]">
+              <div className="space-y-6 pr-4">
+                <div className="grid grid-cols-2 gap-4">
+                  <div>
+                    <h4 className="font-semibold mb-2">Author</h4>
+                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                      <User size={16} />
+                      <span>{manifest.author}</span>
+                    </div>
+                  </div>
+                  <div>
+                    <h4 className="font-semibold mb-2">Version</h4>
+                    <p className="text-sm text-muted-foreground">{manifest.version}</p>
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="font-semibold mb-2">Tags</h4>
+                  <div className="flex flex-wrap gap-2">
+                    {manifest.tags.map(tag => (
+                      <Badge key={tag} variant="outline">
+                        <Tag size={12} className="mr-1" />
+                        {tag}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+
+                <div>
+                  <h4 className="font-semibold mb-2">Includes</h4>
+                  <div className="grid grid-cols-2 gap-3">
+                    <div className="p-3 rounded-lg bg-muted">
+                      <div className="font-medium text-sm">Data Models</div>
+                      <div className="text-2xl font-bold text-primary">{content.schemas.length}</div>
+                    </div>
+                    <div className="p-3 rounded-lg bg-muted">
+                      <div className="font-medium text-sm">Pages</div>
+                      <div className="text-2xl font-bold text-primary">{content.pages.length}</div>
+                    </div>
+                    <div className="p-3 rounded-lg bg-muted">
+                      <div className="font-medium text-sm">Workflows</div>
+                      <div className="text-2xl font-bold text-primary">{content.workflows.length}</div>
+                    </div>
+                    <div className="p-3 rounded-lg bg-muted">
+                      <div className="font-medium text-sm">Scripts</div>
+                      <div className="text-2xl font-bold text-primary">{content.luaScripts.length}</div>
+                    </div>
+                  </div>
+                </div>
+
+                {content.schemas.length > 0 && (
+                  <div>
+                    <h4 className="font-semibold mb-2">Data Models</h4>
+                    <div className="space-y-2">
+                      {content.schemas.map(schema => (
+                        <div key={schema.name} className="p-3 rounded-lg border">
+                          <div className="font-medium">{schema.displayName || schema.name}</div>
+                          <div className="text-sm text-muted-foreground">{schema.fields.length} fields</div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {content.pages.length > 0 && (
+                  <div>
+                    <h4 className="font-semibold mb-2">Pages</h4>
+                    <div className="space-y-2">
+                      {content.pages.map(page => (
+                        <div key={page.id} className="p-3 rounded-lg border">
+                          <div className="font-medium">{page.title}</div>
+                          <div className="text-sm text-muted-foreground font-mono">{page.path}</div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </ScrollArea>
+          </TabsContent>
+
+          <TabsContent value="dependencies" className="flex-1 m-0">
+            <ScrollArea className="h-[50vh] pr-4">
+              <DependenciesTab
+                dependencies={manifest.dependencies}
+                installedPackages={installedPackages}
+                resolveCatalogEntry={getCatalogEntry}
+              />
+            </ScrollArea>
+          </TabsContent>
+
+          <TabsContent value="scripts" className="flex-1 m-0">
+            <ScrollArea className="h-[50vh] pr-4">
+              <ScriptsTab scripts={content.luaScripts} />
+            </ScrollArea>
+          </TabsContent>
+        </Tabs>
+
+        <DialogFooter className="mt-4">
+          {manifest.installed ? (
+            <Button variant="destructive" onClick={() => onUninstall(manifest.id)}>
+              <Trash size={16} className="mr-2" />
+              Uninstall
+            </Button>
+          ) : (
+            <Button onClick={() => onInstall(manifest.id)} disabled={installing}>
+              <Download size={16} className="mr-2" />
+              {installing ? 'Installing...' : 'Install Package'}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/package/PackageManager.tsx b/frontends/nextjs/src/components/managers/package/PackageManager.tsx
index 5bdeda96e..ea5300946 100644
--- a/frontends/nextjs/src/components/managers/package/PackageManager.tsx
+++ b/frontends/nextjs/src/components/managers/package/PackageManager.tsx
@@ -1,12 +1,12 @@
 import { useState } from 'react'
-import { Badge, Button, Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, ScrollArea, Separator } from '@/components/ui'
-import { toast } from 'sonner'
-import { installPackage, togglePackageEnabled, uninstallPackage } from '@/lib/api/packages'
+import { Button } from '@/components/ui'
 import type { PackageCatalogData } from '@/lib/packages/core/package-catalog'
-import { ArrowSquareIn, Download, Export, Package, Star, Tag, Trash, User } from '@phosphor-icons/react'
+import { ArrowSquareIn, Export, Package } from '@phosphor-icons/react'
+import { PackageDetailsDialog } from './PackageDetailsDialog'
 import { PackageImportExport } from './PackageImportExport'
 import { PackageFilters } from './package-manager/PackageFilters'
 import { PackageTabs } from './package-manager/PackageTabs'
+import { usePackageActions } from './package-manager/usePackageActions'
 import { usePackages } from './package-manager/usePackages'
 
 interface PackageManagerProps {
@@ -31,61 +31,12 @@ export function PackageManager({ onClose }: PackageManagerProps) {
   } = usePackages()
   const [selectedPackage, setSelectedPackage] = useState<PackageCatalogData | null>(null)
   const [showDetails, setShowDetails] = useState(false)
-  const [installing, setInstalling] = useState(false)
   const [showImportExport, setShowImportExport] = useState(false)
   const [importExportMode, setImportExportMode] = useState<'import' | 'export'>('export')
-
-  const handleInstallPackage = async (packageId: string) => {
-    setInstalling(true)
-    try {
-      const packageEntry = getCatalogEntry(packageId)
-      if (!packageEntry) {
-        toast.error('Package not found')
-        return
-      }
-
-      await installPackage(packageId)
-
-      toast.success(`${packageEntry.manifest.name} installed successfully!`)
-      await loadPackages()
-      setShowDetails(false)
-    } catch (error) {
-      console.error('Installation error:', error)
-      toast.error('Failed to install package')
-    } finally {
-      setInstalling(false)
-    }
-  }
-
-  const handleUninstallPackage = async (packageId: string) => {
-    try {
-      const packageEntry = getCatalogEntry(packageId)
-      if (!packageEntry) {
-        toast.error('Package not found')
-        return
-      }
-
-      await uninstallPackage(packageId)
-
-      toast.success(`${packageEntry.manifest.name} uninstalled successfully!`)
-      await loadPackages()
-      setShowDetails(false)
-    } catch (error) {
-      console.error('Uninstallation error:', error)
-      toast.error('Failed to uninstall package')
-    }
-  }
-
-  const handleTogglePackage = async (packageId: string, enabled: boolean) => {
-    try {
-      await togglePackageEnabled(packageId, enabled)
-      toast.success(enabled ? 'Package enabled' : 'Package disabled')
-      await loadPackages()
-    } catch (error) {
-      console.error('Toggle error:', error)
-      toast.error('Failed to toggle package')
-    }
-  }
+  const { installing, handleInstallPackage, handleUninstallPackage, handleTogglePackage } = usePackageActions({
+    loadPackages,
+    getCatalogEntry,
+  })
 
   const openPackageDetails = (packageId: string) => {
     const catalogEntry = getCatalogEntry(packageId)
@@ -162,131 +113,16 @@ export function PackageManager({ onClose }: PackageManagerProps) {
         />
       </div>
 
-      <Dialog open={showDetails} onOpenChange={setShowDetails}>
-        <DialogContent className="max-w-3xl max-h-[90vh] overflow-hidden flex flex-col">
-          {selectedPackage && (
-            <>
-              <DialogHeader>
-                <div className="flex items-start gap-4">
-                  <div className="w-16 h-16 rounded-xl bg-gradient-to-br from-purple-500 to-purple-700 flex items-center justify-center text-3xl flex-shrink-0">
-                    {selectedPackage.manifest.icon}
-                  </div>
-                  <div className="flex-1">
-                    <DialogTitle className="text-2xl">{selectedPackage.manifest.name}</DialogTitle>
-                    <DialogDescription className="mt-1">{selectedPackage.manifest.description}</DialogDescription>
-                    <div className="flex items-center gap-3 mt-3">
-                      <Badge variant="secondary">{selectedPackage.manifest.category}</Badge>
-                      <div className="flex items-center gap-1 text-sm text-muted-foreground">
-                        <Download size={14} />
-                        <span>{selectedPackage.manifest.downloadCount.toLocaleString()}</span>
-                      </div>
-                      <div className="flex items-center gap-1 text-sm text-muted-foreground">
-                        <Star size={14} weight="fill" className="text-yellow-500" />
-                        <span>{selectedPackage.manifest.rating}</span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </DialogHeader>
-
-              <Separator className="my-4" />
-
-              <ScrollArea className="flex-1">
-                <div className="space-y-6 pr-4">
-                  <div>
-                    <h4 className="font-semibold mb-2">Author</h4>
-                    <div className="flex items-center gap-2 text-sm text-muted-foreground">
-                      <User size={16} />
-                      <span>{selectedPackage.manifest.author}</span>
-                    </div>
-                  </div>
-
-                  <div>
-                    <h4 className="font-semibold mb-2">Version</h4>
-                    <p className="text-sm text-muted-foreground">{selectedPackage.manifest.version}</p>
-                  </div>
-
-                  <div>
-                    <h4 className="font-semibold mb-2">Tags</h4>
-                    <div className="flex flex-wrap gap-2">
-                      {selectedPackage.manifest.tags.map(tag => (
-                        <Badge key={tag} variant="outline">
-                          <Tag size={12} className="mr-1" />
-                          {tag}
-                        </Badge>
-                      ))}
-                    </div>
-                  </div>
-
-                  <div>
-                    <h4 className="font-semibold mb-2">Includes</h4>
-                    <div className="grid grid-cols-2 gap-3">
-                      <div className="p-3 rounded-lg bg-muted">
-                        <div className="font-medium text-sm">Data Models</div>
-                        <div className="text-2xl font-bold text-primary">{selectedPackage.content.schemas.length}</div>
-                      </div>
-                      <div className="p-3 rounded-lg bg-muted">
-                        <div className="font-medium text-sm">Pages</div>
-                        <div className="text-2xl font-bold text-primary">{selectedPackage.content.pages.length}</div>
-                      </div>
-                      <div className="p-3 rounded-lg bg-muted">
-                        <div className="font-medium text-sm">Workflows</div>
-                        <div className="text-2xl font-bold text-primary">{selectedPackage.content.workflows.length}</div>
-                      </div>
-                      <div className="p-3 rounded-lg bg-muted">
-                        <div className="font-medium text-sm">Scripts</div>
-                        <div className="text-2xl font-bold text-primary">{selectedPackage.content.luaScripts.length}</div>
-                      </div>
-                    </div>
-                  </div>
-
-                  {selectedPackage.content.schemas.length > 0 && (
-                    <div>
-                      <h4 className="font-semibold mb-2">Data Models</h4>
-                      <div className="space-y-2">
-                        {selectedPackage.content.schemas.map(schema => (
-                          <div key={schema.name} className="p-3 rounded-lg border">
-                            <div className="font-medium">{schema.displayName || schema.name}</div>
-                            <div className="text-sm text-muted-foreground">{schema.fields.length} fields</div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-
-                  {selectedPackage.content.pages.length > 0 && (
-                    <div>
-                      <h4 className="font-semibold mb-2">Pages</h4>
-                      <div className="space-y-2">
-                        {selectedPackage.content.pages.map(page => (
-                          <div key={page.id} className="p-3 rounded-lg border">
-                            <div className="font-medium">{page.title}</div>
-                            <div className="text-sm text-muted-foreground font-mono">{page.path}</div>
-                          </div>
-                        ))}
-                      </div>
-                    </div>
-                  )}
-                </div>
-              </ScrollArea>
-
-              <DialogFooter className="mt-4">
-                {selectedPackage.manifest.installed ? (
-                  <Button variant="destructive" onClick={() => handleUninstallPackage(selectedPackage.manifest.id)}>
-                    <Trash size={16} className="mr-2" />
-                    Uninstall
-                  </Button>
-                ) : (
-                  <Button onClick={() => handleInstallPackage(selectedPackage.manifest.id)} disabled={installing}>
-                    <Download size={16} className="mr-2" />
-                    {installing ? 'Installing...' : 'Install Package'}
-                  </Button>
-                )}
-              </DialogFooter>
-            </>
-          )}
-        </DialogContent>
-      </Dialog>
+      <PackageDetailsDialog
+        open={showDetails}
+        onOpenChange={setShowDetails}
+        selectedPackage={selectedPackage}
+        installing={installing}
+        onInstall={(packageId) => handleInstallPackage(packageId, () => setShowDetails(false))}
+        onUninstall={(packageId) => handleUninstallPackage(packageId, () => setShowDetails(false))}
+        installedPackages={installedPackages}
+        getCatalogEntry={getCatalogEntry}
+      />
 
       <PackageImportExport
         open={showImportExport}
diff --git a/frontends/nextjs/src/components/managers/package/import-export/ExportDialog.tsx b/frontends/nextjs/src/components/managers/package/import-export/ExportDialog.tsx
index c55c0e0ad..4a9702c93 100644
--- a/frontends/nextjs/src/components/managers/package/import-export/ExportDialog.tsx
+++ b/frontends/nextjs/src/components/managers/package/import-export/ExportDialog.tsx
@@ -1,29 +1,24 @@
 import type React from 'react'
-import { Button } from '@/components/ui'
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui'
-import { Label } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Textarea } from '@/components/ui'
-import { Checkbox } from '@/components/ui'
-import { ScrollArea } from '@/components/ui'
-import { Separator } from '@/components/ui'
+import {
+  Button,
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  ScrollArea,
+  Separator,
+} from '@/components/ui'
 import { Export, Package, Database as DatabaseIcon, FileArrowDown } from '@phosphor-icons/react'
 import type { PackageManifest } from '@/lib/package-types'
 import type { ExportPackageOptions } from '@/lib/packages/core/package-export'
-
-const exportOptionLabels: { key: keyof ExportPackageOptions; label: string }[] = [
-  { key: 'includeSchemas', label: 'Include data schemas' },
-  { key: 'includePages', label: 'Include page configurations' },
-  { key: 'includeWorkflows', label: 'Include workflows' },
-  { key: 'includeLuaScripts', label: 'Include Lua scripts' },
-  { key: 'includeComponentHierarchy', label: 'Include component hierarchies' },
-  { key: 'includeComponentConfigs', label: 'Include component configurations' },
-  { key: 'includeCssClasses', label: 'Include CSS classes' },
-  { key: 'includeDropdownConfigs', label: 'Include dropdown configurations' },
-  { key: 'includeSeedData', label: 'Include seed data' },
-  { key: 'includeAssets', label: 'Include assets (images, videos, audio, documents)' },
-]
+import { ExportOptions } from './ExportOptions'
+import { ExportManifestForm } from './ExportManifestForm'
 
 interface ExportDialogProps {
   open: boolean
@@ -100,104 +95,18 @@ export const ExportDialog = ({
 
           <Separator />
 
-          <div className="space-y-4">
-            <div>
-              <Label htmlFor="package-name">Package Name *</Label>
-              <Input
-                id="package-name"
-                placeholder="My Awesome Package"
-                value={manifest.name}
-                onChange={e => setManifest(prev => ({ ...prev, name: e.target.value }))}
-              />
-            </div>
-
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <Label htmlFor="package-version">Version</Label>
-                <Input
-                  id="package-version"
-                  placeholder="1.0.0"
-                  value={manifest.version}
-                  onChange={e => setManifest(prev => ({ ...prev, version: e.target.value }))}
-                />
-              </div>
-
-              <div>
-                <Label htmlFor="package-author">Author</Label>
-                <Input
-                  id="package-author"
-                  placeholder="Your Name"
-                  value={manifest.author}
-                  onChange={e => setManifest(prev => ({ ...prev, author: e.target.value }))}
-                />
-              </div>
-            </div>
-
-            <div>
-              <Label htmlFor="package-description">Description</Label>
-              <Textarea
-                id="package-description"
-                placeholder="Describe what this package does..."
-                value={manifest.description}
-                onChange={e => setManifest(prev => ({ ...prev, description: e.target.value }))}
-                rows={3}
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="package-tags">Tags</Label>
-              <div className="flex gap-2 mb-2">
-                <Input
-                  id="package-tags"
-                  placeholder="Add a tag..."
-                  value={tagInput}
-                  onChange={e => setTagInput(e.target.value)}
-                  onKeyDown={e => e.key === 'Enter' && (e.preventDefault(), onAddTag())}
-                />
-                <Button type="button" onClick={onAddTag}>
-                  Add
-                </Button>
-              </div>
-              {manifest.tags && manifest.tags.length > 0 && (
-                <div className="flex flex-wrap gap-2">
-                  {manifest.tags.map(tag => (
-                    <div key={tag} className="px-2 py-1 bg-secondary rounded-md text-sm flex items-center gap-2">
-                      <span>{tag}</span>
-                      <button
-                        type="button"
-                        onClick={() => onRemoveTag(tag)}
-                        className="text-muted-foreground hover:text-foreground"
-                      >
-                        ×
-                      </button>
-                    </div>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
+          <ExportManifestForm
+            manifest={manifest}
+            setManifest={setManifest}
+            tagInput={tagInput}
+            setTagInput={setTagInput}
+            onAddTag={onAddTag}
+            onRemoveTag={onRemoveTag}
+          />
 
           <Separator />
 
-            <div>
-              <Label className="mb-3 block">Export Options</Label>
-              <div className="space-y-3">
-                {exportOptionLabels.map(({ key, label }) => (
-                  <div className="flex items-center gap-2" key={key}>
-                    <Checkbox
-                      id={`export-${key}`}
-                      checked={exportOptions[key] as boolean}
-                      onCheckedChange={checked =>
-                        setExportOptions(prev => ({ ...prev, [key]: checked as boolean }))
-                      }
-                    />
-                    <Label htmlFor={`export-${key}`} className="font-normal cursor-pointer">
-                      {label}
-                    </Label>
-                  </div>
-                ))}
-              </div>
-            </div>
+            <ExportOptions exportOptions={exportOptions} setExportOptions={setExportOptions} />
         </div>
       </ScrollArea>
 
diff --git a/frontends/nextjs/src/components/managers/package/import-export/ExportManifestForm.tsx b/frontends/nextjs/src/components/managers/package/import-export/ExportManifestForm.tsx
new file mode 100644
index 000000000..6d220d3b3
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/package/import-export/ExportManifestForm.tsx
@@ -0,0 +1,100 @@
+import type React from 'react'
+import { Button, Input, Label, Textarea } from '@/components/ui'
+import type { PackageManifest } from '@/lib/package-types'
+
+interface ExportManifestFormProps {
+  manifest: Partial<PackageManifest>
+  setManifest: React.Dispatch<React.SetStateAction<Partial<PackageManifest>>>
+  tagInput: string
+  setTagInput: (value: string) => void
+  onAddTag: () => void
+  onRemoveTag: (tag: string) => void
+}
+
+export function ExportManifestForm({
+  manifest,
+  setManifest,
+  tagInput,
+  setTagInput,
+  onAddTag,
+  onRemoveTag,
+}: ExportManifestFormProps) {
+  return (
+    <div className="space-y-4">
+      <div>
+        <Label htmlFor="package-name">Package Name *</Label>
+        <Input
+          id="package-name"
+          placeholder="My Awesome Package"
+          value={manifest.name}
+          onChange={e => setManifest(prev => ({ ...prev, name: e.target.value }))}
+        />
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <Label htmlFor="package-version">Version</Label>
+          <Input
+            id="package-version"
+            placeholder="1.0.0"
+            value={manifest.version}
+            onChange={e => setManifest(prev => ({ ...prev, version: e.target.value }))}
+          />
+        </div>
+
+        <div>
+          <Label htmlFor="package-author">Author</Label>
+          <Input
+            id="package-author"
+            placeholder="Your Name"
+            value={manifest.author}
+            onChange={e => setManifest(prev => ({ ...prev, author: e.target.value }))}
+          />
+        </div>
+      </div>
+
+      <div>
+        <Label htmlFor="package-description">Description</Label>
+        <Textarea
+          id="package-description"
+          placeholder="Describe what this package does..."
+          value={manifest.description}
+          onChange={e => setManifest(prev => ({ ...prev, description: e.target.value }))}
+          rows={3}
+        />
+      </div>
+
+      <div>
+        <Label htmlFor="package-tags">Tags</Label>
+        <div className="flex gap-2 mb-2">
+          <Input
+            id="package-tags"
+            placeholder="Add a tag..."
+            value={tagInput}
+            onChange={e => setTagInput(e.target.value)}
+            onKeyDown={e => e.key === 'Enter' && (e.preventDefault(), onAddTag())}
+          />
+          <Button type="button" onClick={onAddTag}>
+            Add
+          </Button>
+        </div>
+        {manifest.tags && manifest.tags.length > 0 && (
+          <div className="flex flex-wrap gap-2">
+            {manifest.tags.map(tag => (
+              <div key={tag} className="px-2 py-1 bg-secondary rounded-md text-sm flex items-center gap-2">
+                <span>{tag}</span>
+                <button
+                  type="button"
+                  onClick={() => onRemoveTag(tag)}
+                  className="text-muted-foreground hover:text-foreground"
+                >
+                  ×
+                </button>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/package/import-export/ExportOptions.tsx b/frontends/nextjs/src/components/managers/package/import-export/ExportOptions.tsx
new file mode 100644
index 000000000..82fb5c41a
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/package/import-export/ExportOptions.tsx
@@ -0,0 +1,42 @@
+import { Checkbox, Label } from '@/components/ui'
+import type { ExportPackageOptions } from '@/lib/packages/core/package-export'
+
+const exportOptionLabels: { key: keyof ExportPackageOptions; label: string }[] = [
+  { key: 'includeSchemas', label: 'Include data schemas' },
+  { key: 'includePages', label: 'Include page configurations' },
+  { key: 'includeWorkflows', label: 'Include workflows' },
+  { key: 'includeLuaScripts', label: 'Include Lua scripts' },
+  { key: 'includeComponentHierarchy', label: 'Include component hierarchies' },
+  { key: 'includeComponentConfigs', label: 'Include component configurations' },
+  { key: 'includeCssClasses', label: 'Include CSS classes' },
+  { key: 'includeDropdownConfigs', label: 'Include dropdown configurations' },
+  { key: 'includeSeedData', label: 'Include seed data' },
+  { key: 'includeAssets', label: 'Include assets (images, videos, audio, documents)' },
+]
+
+interface ExportOptionsProps {
+  exportOptions: ExportPackageOptions
+  setExportOptions: React.Dispatch<React.SetStateAction<ExportPackageOptions>>
+}
+
+export function ExportOptions({ exportOptions, setExportOptions }: ExportOptionsProps) {
+  return (
+    <div>
+      <Label className="mb-3 block">Export Options</Label>
+      <div className="space-y-3">
+        {exportOptionLabels.map(({ key, label }) => (
+          <div className="flex items-center gap-2" key={key}>
+            <Checkbox
+              id={`export-${key}`}
+              checked={exportOptions[key] as boolean}
+              onCheckedChange={checked => setExportOptions(prev => ({ ...prev, [key]: checked as boolean }))}
+            />
+            <Label htmlFor={`export-${key}`} className="font-normal cursor-pointer">
+              {label}
+            </Label>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/package/package-manager/usePackageActions.ts b/frontends/nextjs/src/components/managers/package/package-manager/usePackageActions.ts
new file mode 100644
index 000000000..700c04435
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/package/package-manager/usePackageActions.ts
@@ -0,0 +1,83 @@
+import { useCallback, useState } from 'react'
+import { toast } from 'sonner'
+import { installPackage, togglePackageEnabled, uninstallPackage } from '@/lib/api/packages'
+import type { PackageCatalogData } from '@/lib/packages/core/package-catalog'
+
+interface UsePackageActionsProps {
+  loadPackages: () => Promise<void>
+  getCatalogEntry: (packageId: string) => PackageCatalogData | undefined
+}
+
+export function usePackageActions({ loadPackages, getCatalogEntry }: UsePackageActionsProps) {
+  const [installing, setInstalling] = useState(false)
+
+  const resolvePackage = useCallback(
+    (packageId: string) => {
+      const packageEntry = getCatalogEntry(packageId)
+      if (!packageEntry) {
+        toast.error('Package not found')
+        return null
+      }
+      return packageEntry
+    },
+    [getCatalogEntry]
+  )
+
+  const handleInstallPackage = useCallback(
+    async (packageId: string, onComplete?: () => void) => {
+      setInstalling(true)
+      const packageEntry = resolvePackage(packageId)
+      if (!packageEntry) {
+        setInstalling(false)
+        return
+      }
+
+      try {
+        await installPackage(packageId)
+        toast.success(`${packageEntry.manifest.name} installed successfully!`)
+        await loadPackages()
+        onComplete?.()
+      } catch (error) {
+        console.error('Installation error:', error)
+        toast.error('Failed to install package')
+      } finally {
+        setInstalling(false)
+      }
+    },
+    [loadPackages, resolvePackage]
+  )
+
+  const handleUninstallPackage = useCallback(
+    async (packageId: string, onComplete?: () => void) => {
+      const packageEntry = resolvePackage(packageId)
+      if (!packageEntry) return
+
+      try {
+        await uninstallPackage(packageId)
+        toast.success(`${packageEntry.manifest.name} uninstalled successfully!`)
+        await loadPackages()
+        onComplete?.()
+      } catch (error) {
+        console.error('Uninstallation error:', error)
+        toast.error('Failed to uninstall package')
+      }
+    },
+    [loadPackages, resolvePackage]
+  )
+
+  const handleTogglePackage = useCallback(
+    async (packageId: string, enabled: boolean) => {
+      try {
+        await togglePackageEnabled(packageId, enabled)
+        toast.success(enabled ? 'Package enabled' : 'Package disabled')
+        await loadPackages()
+      } catch (error) {
+        console.error('Toggle error:', error)
+        toast.error('Failed to toggle package')
+      }
+    },
+    [loadPackages]
+  )
+
+  return { installing, handleInstallPackage, handleUninstallPackage, handleTogglePackage }
+}
diff --git a/frontends/nextjs/src/components/managers/package/tabs/DependenciesTab.tsx b/frontends/nextjs/src/components/managers/package/tabs/DependenciesTab.tsx
new file mode 100644
index 000000000..516b95328
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/package/tabs/DependenciesTab.tsx
@@ -0,0 +1,57 @@
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
+import type { PackageCatalogData } from '@/lib/packages/core/package-catalog'
+import type { InstalledPackage } from '@/lib/package-types'
+import { CheckCircle, WarningCircle } from '@phosphor-icons/react'
+
+interface DependenciesTabProps {
+  dependencies: string[]
+  installedPackages: InstalledPackage[]
+  resolveCatalogEntry: (packageId: string) => PackageCatalogData | undefined
+}
+
+export function DependenciesTab({ dependencies, installedPackages, resolveCatalogEntry }: DependenciesTabProps) {
+  if (dependencies.length === 0) {
+    return <p className="text-sm text-muted-foreground">No dependencies required.</p>
+  }
+
+  return (
+    <div className="space-y-3">
+      {dependencies.map(dependencyId => {
+        const catalogEntry = resolveCatalogEntry(dependencyId)
+        const isInstalled = installedPackages.some(pkg => pkg.packageId === dependencyId)
+        const dependencyName = catalogEntry?.manifest.name ?? dependencyId
+        const dependencyDescription = catalogEntry?.manifest.description ?? 'Dependency not found in catalog.'
+
+        return (
+          <Card key={dependencyId}>
+            <CardHeader className="flex flex-row items-start justify-between gap-3">
+              <div>
+                <CardTitle className="text-base flex items-center gap-2">
+                  {dependencyName}
+                  <Badge variant={isInstalled ? 'secondary' : 'outline'}>{isInstalled ? 'Installed' : 'Missing'}</Badge>
+                </CardTitle>
+                <CardDescription>{dependencyDescription}</CardDescription>
+              </div>
+              {isInstalled ? (
+                <CheckCircle size={20} className="text-green-500" />
+              ) : (
+                <WarningCircle size={20} className="text-amber-500" />
+              )}
+            </CardHeader>
+            {catalogEntry?.manifest.tags?.length ? (
+              <CardContent>
+                <div className="flex flex-wrap gap-2">
+                  {catalogEntry.manifest.tags.map(tag => (
+                    <Badge key={`${dependencyId}-${tag}`} variant="outline">
+                      {tag}
+                    </Badge>
+                  ))}
+                </div>
+              </CardContent>
+            ) : null}
+          </Card>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/package/tabs/ScriptsTab.tsx b/frontends/nextjs/src/components/managers/package/tabs/ScriptsTab.tsx
new file mode 100644
index 000000000..795a9a1c2
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/package/tabs/ScriptsTab.tsx
@@ -0,0 +1,42 @@
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
+
+interface Script {
+  id?: string
+  name?: string
+  description?: string
+  category?: string
+  code?: string
+}
+
+interface ScriptsTabProps {
+  scripts: Script[]
+}
+
+export function ScriptsTab({ scripts }: ScriptsTabProps) {
+  if (!scripts.length) {
+    return <p className="text-sm text-muted-foreground">No scripts included in this package.</p>
+  }
+
+  return (
+    <div className="space-y-3">
+      {scripts.map((script, index) => (
+        <Card key={script.id ?? script.name ?? index}>
+          <CardHeader className="flex flex-row items-start justify-between gap-3">
+            <div>
+              <CardTitle className="text-base">{script.name ?? 'Unnamed Script'}</CardTitle>
+              <CardDescription>{script.description ?? 'No description provided.'}</CardDescription>
+            </div>
+            {script.category ? <Badge variant="outline">{script.category}</Badge> : null}
+          </CardHeader>
+          {script.code ? (
+            <CardContent>
+              <pre className="bg-muted rounded-lg p-3 text-xs overflow-x-auto">
+                <code>{script.code}</code>
+              </pre>
+            </CardContent>
+          ) : null}
+        </Card>
+      ))}
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/page-routes/Preview.tsx b/frontends/nextjs/src/components/managers/page-routes/Preview.tsx
new file mode 100644
index 000000000..2bfd2e207
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/page-routes/Preview.tsx
@@ -0,0 +1,37 @@
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
+import { Eye, LockKey } from '@phosphor-icons/react'
+import type { PageConfig } from '@/lib/level-types'
+
+interface PreviewProps {
+  formData: Partial<PageConfig>
+}
+
+export function Preview({ formData }: PreviewProps) {
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle>Route Preview</CardTitle>
+        <CardDescription>Quick glance at the route details</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <p className="text-xs uppercase text-muted-foreground">Path</p>
+          <p className="font-mono">{formData.path || '/your-path'}</p>
+        </div>
+        <div>
+          <p className="text-xs uppercase text-muted-foreground">Title</p>
+          <p className="font-semibold">{formData.title || 'Untitled Page'}</p>
+        </div>
+        <div className="flex items-center gap-3">
+          <Badge variant="outline">Level {formData.level || 1}</Badge>
+          <Badge variant="secondary">{formData.requiredRole || 'public'}</Badge>
+          {formData.requiresAuth ? (
+            <LockKey className="text-orange-500" weight="fill" />
+          ) : (
+            <Eye className="text-green-500" weight="fill" />
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/page-routes/RouteEditor.tsx b/frontends/nextjs/src/components/managers/page-routes/RouteEditor.tsx
new file mode 100644
index 000000000..e772c97ff
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/page-routes/RouteEditor.tsx
@@ -0,0 +1,107 @@
+import {
+  Button,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+} from '@/components/ui'
+import type { PageConfig, UserRole, AppLevel } from '@/lib/level-types'
+
+export type RouteFormData = Partial<PageConfig>
+
+interface RouteEditorProps {
+  formData: RouteFormData
+  onChange: (value: RouteFormData) => void
+  onSave: () => void
+  onCancel: () => void
+  isEdit: boolean
+}
+
+export function RouteEditor({ formData, onChange, onSave, onCancel, isEdit }: RouteEditorProps) {
+  return (
+    <div className="space-y-4 py-4">
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="path">Route Path *</Label>
+          <Input
+            id="path"
+            placeholder="/home"
+            value={formData.path || ''}
+            onChange={(e) => onChange({ ...formData, path: e.target.value })}
+          />
+        </div>
+        <div className="space-y-2">
+          <Label htmlFor="title">Page Title *</Label>
+          <Input
+            id="title"
+            placeholder="Home Page"
+            value={formData.title || ''}
+            onChange={(e) => onChange({ ...formData, title: e.target.value })}
+          />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div className="space-y-2">
+          <Label htmlFor="level">Application Level</Label>
+          <Select
+            value={formData.level ? String(formData.level) : ''}
+            onValueChange={(value) => onChange({ ...formData, level: Number(value) as AppLevel })}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Select level" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="1">Level 1 - Public</SelectItem>
+              <SelectItem value="2">Level 2 - User Area</SelectItem>
+              <SelectItem value="3">Level 3 - Moderator Desk</SelectItem>
+              <SelectItem value="4">Level 4 - Admin Panel</SelectItem>
+              <SelectItem value="5">Level 5 - God Builder</SelectItem>
+              <SelectItem value="6">Level 6 - Supergod Console</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="requiredRole">Required Role (if auth)</Label>
+          <Select
+            value={formData.requiredRole || 'public'}
+            onValueChange={(value) => onChange({ ...formData, requiredRole: value as UserRole })}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Select role" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="public">Public</SelectItem>
+              <SelectItem value="user">User</SelectItem>
+              <SelectItem value="moderator">Moderator</SelectItem>
+              <SelectItem value="admin">Admin</SelectItem>
+              <SelectItem value="god">God</SelectItem>
+              <SelectItem value="supergod">Supergod</SelectItem>
+            </SelectContent>
+          </Select>
+        </div>
+      </div>
+
+      <div className="flex items-center space-x-2">
+        <Switch
+          id="requiresAuth"
+          checked={formData.requiresAuth}
+          onCheckedChange={(checked) => onChange({ ...formData, requiresAuth: checked })}
+        />
+        <Label htmlFor="requiresAuth" className="cursor-pointer">Requires Authentication</Label>
+      </div>
+
+      <div className="flex gap-2 justify-end">
+        <Button type="button" variant="outline" onClick={onCancel}>Cancel</Button>
+        <Button type="button" onClick={onSave}>
+          {isEdit ? 'Update Page' : 'Create Page'}
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/page-routes/RoutesTable.tsx b/frontends/nextjs/src/components/managers/page-routes/RoutesTable.tsx
new file mode 100644
index 000000000..be7f98038
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/page-routes/RoutesTable.tsx
@@ -0,0 +1,98 @@
+import {
+  Badge,
+  Button,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui'
+import { Eye, LockKey, Pencil, Trash } from '@phosphor-icons/react'
+import type { PageConfig, AppLevel } from '@/lib/level-types'
+
+interface RoutesTableProps {
+  pages: PageConfig[]
+  onEdit: (page: PageConfig) => void
+  onDelete: (pageId: string) => void
+}
+
+const getLevelBadgeColor = (level: AppLevel) => {
+  switch (level) {
+    case 1: return 'bg-blue-500'
+    case 2: return 'bg-green-500'
+    case 3: return 'bg-orange-500'
+    case 4: return 'bg-sky-500'
+    case 5: return 'bg-purple-500'
+    case 6: return 'bg-rose-500'
+    default: return 'bg-gray-500'
+  }
+}
+
+export function RoutesTable({ pages, onEdit, onDelete }: RoutesTableProps) {
+  if (pages.length === 0) {
+    return (
+      <div className="text-center py-12 text-muted-foreground">
+        <p>No pages configured yet. Create your first page route!</p>
+      </div>
+    )
+  }
+
+  return (
+    <Table>
+      <TableHeader>
+        <TableRow>
+          <TableHead>Path</TableHead>
+          <TableHead>Title</TableHead>
+          <TableHead>Level</TableHead>
+          <TableHead>Auth</TableHead>
+          <TableHead>Required Role</TableHead>
+          <TableHead className="text-right">Actions</TableHead>
+        </TableRow>
+      </TableHeader>
+      <TableBody>
+        {pages.map((page) => (
+          <TableRow key={page.id}>
+            <TableCell className="font-mono text-sm">{page.path}</TableCell>
+            <TableCell>{page.title}</TableCell>
+            <TableCell>
+              <Badge className={getLevelBadgeColor(page.level)}>
+                Level {page.level}
+              </Badge>
+            </TableCell>
+            <TableCell>
+              {page.requiresAuth ? (
+                <LockKey className="text-orange-500" weight="fill" />
+              ) : (
+                <Eye className="text-green-500" weight="fill" />
+              )}
+            </TableCell>
+            <TableCell>
+              <Badge variant="outline">
+                {page.requiredRole || 'public'}
+              </Badge>
+            </TableCell>
+            <TableCell className="text-right">
+              <div className="flex justify-end gap-2">
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => onEdit(page)}
+                >
+                  <Pencil />
+                </Button>
+                <Button
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => onDelete(page.id)}
+                >
+                  <Trash />
+                </Button>
+              </div>
+            </TableCell>
+          </TableRow>
+        ))}
+      </TableBody>
+    </Table>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/user-management/AuditTrail.tsx b/frontends/nextjs/src/components/managers/user-management/AuditTrail.tsx
new file mode 100644
index 000000000..216ebf7c9
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/user-management/AuditTrail.tsx
@@ -0,0 +1,149 @@
+'use client'
+import { useMemo, useState } from 'react'
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  ScrollArea,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui'
+import { Clock, ShieldWarning, UserSwitch } from '@phosphor-icons/react'
+export type AuditSeverity = 'info' | 'warning' | 'critical'
+export interface AuditEvent {
+  id: string
+  actor: string
+  action: string
+  target?: string
+  timestamp: string | number
+  severity: AuditSeverity
+}
+interface AuditTrailProps {
+  events: AuditEvent[]
+  showSearch?: boolean
+  maxRows?: number
+}
+const SEVERITY_META: Record<AuditSeverity, { label: string; variant: 'default' | 'secondary' | 'destructive' }> = {
+  info: { label: 'Info', variant: 'secondary' },
+  warning: { label: 'Warning', variant: 'default' },
+  critical: { label: 'Critical', variant: 'destructive' },
+}
+const formatTime = (value: string | number) => new Date(value).toLocaleString()
+export function AuditTrail({ events, showSearch = true, maxRows }: AuditTrailProps) {
+  const [query, setQuery] = useState('')
+  const [severity, setSeverity] = useState<AuditSeverity | 'all'>('all')
+  const filtered = useMemo(() => {
+    const text = query.toLowerCase()
+    return events
+      .filter((event) => {
+        const matchesText =
+          !text || `${event.actor} ${event.action} ${event.target ?? ''}`.toLowerCase().includes(text)
+        const matchesSeverity = severity === 'all' || event.severity === severity
+        return matchesText && matchesSeverity
+      })
+      .slice(0, maxRows ?? events.length)
+  }, [events, query, severity, maxRows])
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <CardTitle>Audit trail</CardTitle>
+            <CardDescription>Recent security-sensitive actions.</CardDescription>
+          </div>
+          <Badge variant="outline" className="gap-1">
+            <UserSwitch size={14} />
+            {events.length} events
+          </Badge>
+        </div>
+        {showSearch && (
+          <div className="grid gap-3 sm:grid-cols-2">
+            <div className="space-y-1">
+              <Label htmlFor="audit-query">Search</Label>
+              <Input
+                id="audit-query"
+                placeholder="Filter by actor or action"
+                value={query}
+                onChange={(event) => setQuery(event.target.value)}
+              />
+            </div>
+            <div className="space-y-1">
+              <Label htmlFor="audit-severity">Severity</Label>
+              <select
+                id="audit-severity"
+                className="h-10 rounded-md border border-input bg-background px-3 text-sm"
+                value={severity}
+                onChange={(event) => setSeverity(event.target.value as AuditSeverity | 'all')}
+              >
+                <option value="all">All events</option>
+                {Object.entries(SEVERITY_META).map(([value, meta]) => (
+                  <option key={value} value={value}>
+                    {meta.label}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        )}
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="rounded-md border">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-36">Timestamp</TableHead>
+                <TableHead>Actor</TableHead>
+                <TableHead>Action</TableHead>
+                <TableHead className="w-32">Severity</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filtered.map((event) => (
+                <TableRow key={event.id}>
+                  <TableCell className="text-xs text-muted-foreground">
+                    <div className="flex items-center gap-2">
+                      <Clock size={14} />
+                      {formatTime(event.timestamp)}
+                    </div>
+                  </TableCell>
+                  <TableCell className="font-medium">{event.actor}</TableCell>
+                  <TableCell className="text-sm text-muted-foreground">
+                    {event.action}
+                    {event.target && (
+                      <span className="ml-2 rounded bg-muted px-2 py-1 text-xs text-foreground">
+                        {event.target}
+                      </span>
+                    )}
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant={SEVERITY_META[event.severity].variant} className="gap-1">
+                      <ShieldWarning size={14} />
+                      {SEVERITY_META[event.severity].label}
+                    </Badge>
+                  </TableCell>
+                </TableRow>
+              ))}
+              {filtered.length === 0 && (
+                <TableRow>
+                  <TableCell colSpan={4} className="text-center text-muted-foreground">
+                    No audit events found.
+                  </TableCell>
+                </TableRow>
+              )}
+            </TableBody>
+          </Table>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/user-management/RoleEditor.tsx b/frontends/nextjs/src/components/managers/user-management/RoleEditor.tsx
new file mode 100644
index 000000000..15acb1179
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/user-management/RoleEditor.tsx
@@ -0,0 +1,125 @@
+'use client'
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  Switch,
+} from '@/components/ui'
+import type { UserRole } from '@/lib/level-types'
+
+interface RoleEditorProps {
+  role: UserRole
+  onRoleChange: (role: UserRole) => void
+  isInstanceOwner?: boolean
+  onInstanceOwnerChange?: (value: boolean) => void
+  allowedRoles?: UserRole[]
+}
+
+const ROLE_INFO: Record<UserRole, { blurb: string; highlights: string[] }> = {
+  public: {
+    blurb: 'Read-only access for guest viewers.',
+    highlights: ['View public resources', 'No authentication needed'],
+  },
+  user: {
+    blurb: 'Standard workspace member with personal settings.',
+    highlights: ['Create content', 'Access shared libraries'],
+  },
+  moderator: {
+    blurb: 'Content moderator with collaboration tools.',
+    highlights: ['Manage comments', 'Resolve reports', 'Escalate to admins'],
+  },
+  admin: {
+    blurb: 'Tenant-level administrator controls.',
+    highlights: ['Invite users', 'Configure pages', 'Reset credentials'],
+  },
+  god: {
+    blurb: 'Power user with platform configuration access.',
+    highlights: ['Manage integrations', 'Run advanced scripts', 'Override safety flags'],
+  },
+  supergod: {
+    blurb: 'Instance owner with full control.',
+    highlights: ['Edit system settings', 'Manage tenants', 'Bypass feature gates'],
+  },
+}
+
+const roleLabel = (role: UserRole) => role.charAt(0).toUpperCase() + role.slice(1)
+
+export function RoleEditor({
+  role,
+  onRoleChange,
+  isInstanceOwner,
+  onInstanceOwnerChange,
+  allowedRoles,
+}: RoleEditorProps) {
+  const options = allowedRoles ?? (Object.keys(ROLE_INFO) as UserRole[])
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>User role</CardTitle>
+        <CardDescription>Adjust access level and ownership flags.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label>Role</Label>
+          <Select value={role} onValueChange={(value) => onRoleChange(value as UserRole)}>
+            <SelectTrigger className="w-full">
+              <SelectValue placeholder="Choose a role" />
+            </SelectTrigger>
+            <SelectContent>
+              {options.map((value) => (
+                <SelectItem key={value} value={value}>
+                  <div className="flex items-center justify-between gap-3">
+                    <span>{roleLabel(value)}</span>
+                    <Badge variant={value === 'supergod' || value === 'god' ? 'default' : 'secondary'}>
+                      {value === 'public' ? 'Read only' : 'Level access'}
+                    </Badge>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+
+        <div className="rounded-md border p-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <p className="font-medium">{roleLabel(role)}</p>
+              <p className="text-sm text-muted-foreground">{ROLE_INFO[role].blurb}</p>
+            </div>
+            <Badge variant="outline">{ROLE_INFO[role].highlights.length} capabilities</Badge>
+          </div>
+          <ul className="mt-3 grid gap-2 text-sm text-muted-foreground sm:grid-cols-2">
+            {ROLE_INFO[role].highlights.map((item) => (
+              <li key={item} className="flex items-center gap-2">
+                <span className="h-1.5 w-1.5 rounded-full bg-primary" />
+                <span>{item}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+
+        {onInstanceOwnerChange && (
+          <div className="flex items-center justify-between rounded-md border p-3">
+            <div>
+              <p className="font-medium">Instance owner</p>
+              <p className="text-sm text-muted-foreground">
+                Grants access to backup, billing, and infrastructure settings.
+              </p>
+            </div>
+            <Switch checked={isInstanceOwner} onCheckedChange={onInstanceOwnerChange} />
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/managers/user-management/UserList.tsx b/frontends/nextjs/src/components/managers/user-management/UserList.tsx
new file mode 100644
index 000000000..5dd9151c5
--- /dev/null
+++ b/frontends/nextjs/src/components/managers/user-management/UserList.tsx
@@ -0,0 +1,149 @@
+'use client'
+import { useMemo, useState } from 'react'
+import {
+  Avatar,
+  AvatarFallback,
+  Badge,
+  Button,
+  Input,
+  Label,
+  ScrollArea,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui'
+import { FunnelSimple, PencilSimple, Trash } from '@phosphor-icons/react'
+import type { User, UserRole } from '@/lib/level-types'
+interface UserListProps {
+  users: User[]
+  onEdit?: (user: User) => void
+  onDelete?: (user: User) => void
+  compact?: boolean
+}
+const ROLE_STYLES: Record<UserRole, { label: string; variant: 'default' | 'secondary' | 'outline' }> = {
+    public: { label: 'Public', variant: 'outline' },
+    user: { label: 'User', variant: 'outline' },
+    moderator: { label: 'Moderator', variant: 'secondary' },
+    admin: { label: 'Admin', variant: 'secondary' },
+    god: { label: 'God', variant: 'default' },
+    supergod: { label: 'Supergod', variant: 'default' },
+  }
+
+function initials(value: string) {
+  return value
+    .split(' ')
+    .map((chunk) => chunk[0])
+    .join('')
+    .slice(0, 2)
+    .toUpperCase()
+}
+
+export function UserList({ users, onEdit, onDelete, compact }: UserListProps) {
+  const [query, setQuery] = useState('')
+  const [role, setRole] = useState<UserRole | 'all'>('all')
+
+  const filtered = useMemo(() => {
+    return users.filter((user) => {
+      const matchesQuery = `${user.username} ${user.email}`
+        .toLowerCase()
+        .includes(query.toLowerCase())
+      const matchesRole = role === 'all' || user.role === role
+      return matchesQuery && matchesRole
+    })
+  }, [users, query, role])
+
+  return (
+    <div className="space-y-3">
+      <div className="flex flex-wrap items-end gap-3">
+        <div className="space-y-1">
+          <Label htmlFor="user-search">Search users</Label>
+          <Input
+            id="user-search"
+            placeholder="Search by name or email"
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+          />
+        </div>
+        <div className="space-y-1">
+          <Label className="flex items-center gap-2" htmlFor="role-filter">
+            <FunnelSimple size={16} /> Role filter
+          </Label>
+          <select
+            id="role-filter"
+            className="h-10 rounded-md border border-input bg-background px-3 text-sm"
+            value={role}
+            onChange={(event) => setRole(event.target.value as UserRole | 'all')}
+          >
+            <option value="all">All roles</option>
+            {Object.entries(ROLE_STYLES).map(([value, meta]) => (
+              <option key={value} value={value}>
+                {meta.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      <ScrollArea className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>User</TableHead>
+              <TableHead>Email</TableHead>
+              <TableHead className="w-32">Role</TableHead>
+              <TableHead className="w-40">Joined</TableHead>
+              {(onEdit || onDelete) && <TableHead className="w-28 text-right">Actions</TableHead>}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {filtered.map((user) => (
+              <TableRow key={user.id} className={compact ? 'text-sm' : undefined}>
+                <TableCell className="flex items-center gap-3">
+                  <Avatar className="h-9 w-9">
+                    {user.profilePicture && <img alt={user.username} src={user.profilePicture} />}
+                    <AvatarFallback>{initials(user.username)}</AvatarFallback>
+                  </Avatar>
+                  <div>
+                    <div className="font-medium">{user.username}</div>
+                    <div className="text-xs text-muted-foreground">ID: {user.id}</div>
+                  </div>
+                </TableCell>
+                <TableCell className="text-muted-foreground">{user.email}</TableCell>
+                <TableCell>
+                  <Badge variant={ROLE_STYLES[user.role]?.variant}>{ROLE_STYLES[user.role]?.label}</Badge>
+                </TableCell>
+                <TableCell className="text-muted-foreground">
+                  {new Date(user.createdAt).toLocaleDateString()}
+                </TableCell>
+                {(onEdit || onDelete) && (
+                  <TableCell className="flex justify-end gap-2">
+                    {onEdit && (
+                      <Button size="icon" variant="outline" onClick={() => onEdit(user)}>
+                        <PencilSimple size={16} />
+                      </Button>
+                    )}
+                    {onDelete && (
+                      <Button size="icon" variant="ghost" onClick={() => onDelete(user)}>
+                        <Trash size={16} />
+                      </Button>
+                    )}
+                  </TableCell>
+                )}
+              </TableRow>
+            ))}
+            {filtered.length === 0 && (
+              <TableRow>
+                <TableCell colSpan={5} className="text-center text-muted-foreground">
+                  No users match your filters.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </ScrollArea>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/auth/GodCredentialsSettings.tsx b/frontends/nextjs/src/components/misc/auth/GodCredentialsSettings.tsx
index 6574e2dbf..d1c099d80 100644
--- a/frontends/nextjs/src/components/misc/auth/GodCredentialsSettings.tsx
+++ b/frontends/nextjs/src/components/misc/auth/GodCredentialsSettings.tsx
@@ -1,13 +1,10 @@
 import { useState, useEffect } from 'react'
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
-import { Button } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Label } from '@/components/ui'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui'
-import { Alert, AlertDescription } from '@/components/ui'
+import { GodCredentialsForm } from '@/components/auth/god-credentials/Form'
+import { GodCredentialsSummary } from '@/components/auth/god-credentials/Summary'
 import { Database } from '@/lib/database'
 import { toast } from 'sonner'
-import { Clock, Key, WarningCircle, CheckCircle } from '@phosphor-icons/react'
+import { Key } from '@phosphor-icons/react'
 
 export function GodCredentialsSettings() {
   const [duration, setDuration] = useState<number>(60)
@@ -112,91 +109,21 @@ export function GodCredentialsSettings() {
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-6">
-        {isActive && (
-          <Alert className="bg-gradient-to-br from-purple-500/10 to-orange-500/10 border-purple-500/50">
-            <CheckCircle className="h-5 w-5 text-green-500" />
-            <AlertDescription className="ml-2">
-              <div className="space-y-1">
-                <p className="font-semibold text-sm">
-                  God credentials are currently visible on the front page
-                </p>
-                <p className="text-xs text-muted-foreground">
-                  Time remaining: <span className="font-mono font-semibold">{timeRemaining}</span>
-                </p>
-              </div>
-            </AlertDescription>
-          </Alert>
-        )}
+        <GodCredentialsSummary
+          isActive={isActive}
+          expiryTime={expiryTime}
+          timeRemaining={timeRemaining}
+        />
 
-        {!isActive && expiryTime > 0 && (
-          <Alert>
-            <WarningCircle className="h-5 w-5 text-yellow-500" />
-            <AlertDescription className="ml-2">
-              <p className="text-sm">
-                God credentials have expired or been hidden
-              </p>
-            </AlertDescription>
-          </Alert>
-        )}
-
-        <div className="space-y-4">
-          <div className="space-y-2">
-            <Label htmlFor="duration">Expiry Duration</Label>
-            <div className="flex gap-2">
-              <Input
-                id="duration"
-                type="number"
-                min="1"
-                max={unit === 'hours' ? '24' : '1440'}
-                value={duration}
-                onChange={(e) => setDuration(Number(e.target.value))}
-                className="flex-1"
-              />
-              <Select value={unit} onValueChange={(v) => setUnit(v as 'minutes' | 'hours')}>
-                <SelectTrigger className="w-32">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="minutes">Minutes</SelectItem>
-                  <SelectItem value="hours">Hours</SelectItem>
-                </SelectContent>
-              </Select>
-            </div>
-            <p className="text-xs text-muted-foreground">
-              Set the duration for how long credentials are visible (1 minute to 24 hours)
-            </p>
-          </div>
-
-          <div className="flex gap-2">
-            <Button onClick={handleSave} className="flex-1">
-              <Clock className="mr-2" size={16} />
-              Save Duration
-            </Button>
-          </div>
-        </div>
-
-        <div className="border-t pt-4 space-y-3">
-          <div className="space-y-2">
-            <Label>Expiry Management</Label>
-            <p className="text-xs text-muted-foreground">
-              Reset or clear the current expiry timer
-            </p>
-          </div>
-          
-          <div className="flex gap-2">
-            <Button onClick={handleResetExpiry} variant="outline" className="flex-1">
-              Reset Timer
-            </Button>
-            <Button onClick={handleClearExpiry} variant="outline" className="flex-1">
-              Clear Expiry
-            </Button>
-          </div>
-          
-          <p className="text-xs text-muted-foreground">
-            <strong>Reset Timer:</strong> Restart the countdown using the configured duration<br />
-            <strong>Clear Expiry:</strong> Remove expiry time (credentials will show on next page load)
-          </p>
-        </div>
+        <GodCredentialsForm
+          duration={duration}
+          unit={unit}
+          onDurationChange={setDuration}
+          onUnitChange={setUnit}
+          onSave={handleSave}
+          onResetExpiry={handleResetExpiry}
+          onClearExpiry={handleClearExpiry}
+        />
       </CardContent>
     </Card>
   )
diff --git a/frontends/nextjs/src/components/misc/auth/UnifiedLogin.tsx b/frontends/nextjs/src/components/misc/auth/UnifiedLogin.tsx
index ea705d863..074034aa1 100644
--- a/frontends/nextjs/src/components/misc/auth/UnifiedLogin.tsx
+++ b/frontends/nextjs/src/components/misc/auth/UnifiedLogin.tsx
@@ -4,11 +4,13 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/com
 import { Input } from '@/components/ui'
 import { Label } from '@/components/ui'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-import { SignIn, UserPlus, ArrowLeft, Envelope } from '@phosphor-icons/react'
+import { ArrowLeft, Envelope, SignIn, UserPlus } from '@phosphor-icons/react'
 import { toast } from 'sonner'
 import { Database, hashPassword } from '@/lib/database'
 import { generateScrambledPassword, simulateEmailSend } from '@/lib/password-utils'
 import { Alert, AlertDescription } from '@/components/ui'
+import { LoginForm } from '@/components/auth/unified-login/LoginForm'
+import { Provider, ProviderList } from '@/components/auth/unified-login/ProviderList'
 
 export interface UnifiedLoginProps {
   onLogin: (credentials: { username: string; password: string }) => void
@@ -20,6 +22,14 @@ export function UnifiedLogin({ onLogin, onRegister, onBack }: UnifiedLoginProps)
   const [loginForm, setLoginForm] = useState({ username: '', password: '' })
   const [registerForm, setRegisterForm] = useState({ username: '', email: '' })
   const [resetEmail, setResetEmail] = useState('')
+  const providers: Provider[] = [
+    { name: 'Google', description: 'Use your Google Workspace account' },
+    { name: 'GitHub', description: 'Developer SSO via GitHub' },
+  ]
+
+  const handleProviderSelect = (provider: Provider) => {
+    toast.info(`${provider.name} login is coming soon`)
+  }
 
   const handleLogin = () => {
     if (!loginForm.username || !loginForm.password) {
@@ -119,37 +129,14 @@ export function UnifiedLogin({ onLogin, onRegister, onBack }: UnifiedLoginProps)
             </TabsList>
 
             <TabsContent value="login" className="space-y-4 mt-6">
-              <div className="space-y-2">
-                <Label htmlFor="login-username">Username</Label>
-                <Input
-                  id="login-username"
-                  value={loginForm.username}
-                  onChange={(e) => setLoginForm({ ...loginForm, username: e.target.value })}
-                  placeholder="Enter username"
-                  onKeyDown={(e) => e.key === 'Enter' && handleLogin()}
-                />
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="login-password">Password</Label>
-                <Input
-                  id="login-password"
-                  type="password"
-                  value={loginForm.password}
-                  onChange={(e) => setLoginForm({ ...loginForm, password: e.target.value })}
-                  placeholder="Enter password"
-                  onKeyDown={(e) => e.key === 'Enter' && handleLogin()}
-                />
-              </div>
-              <Button className="w-full" onClick={handleLogin}>
-                <SignIn className="mr-2" size={16} />
-                Sign In
-              </Button>
-              <Alert>
-                <AlertDescription className="text-xs">
-                  <p className="font-semibold mb-1">Test Credentials:</p>
-                  <p>Check browser console for default user passwords (they are scrambled on first run)</p>
-                </AlertDescription>
-              </Alert>
+              <LoginForm
+                username={loginForm.username}
+                password={loginForm.password}
+                onUsernameChange={(username) => setLoginForm({ ...loginForm, username })}
+                onPasswordChange={(password) => setLoginForm({ ...loginForm, password })}
+                onSubmit={handleLogin}
+              />
+              <ProviderList providers={providers} onSelect={handleProviderSelect} />
             </TabsContent>
 
             <TabsContent value="register" className="space-y-4 mt-6">
diff --git a/frontends/nextjs/src/components/misc/data/generic-page/Preview.tsx b/frontends/nextjs/src/components/misc/data/generic-page/Preview.tsx
new file mode 100644
index 000000000..65836e4ab
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/data/generic-page/Preview.tsx
@@ -0,0 +1,120 @@
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle, Separator } from '@/components/ui'
+import { PageDefinition } from '@/lib/rendering/page/page-renderer'
+import { Eye, Layout, ShieldCheck } from '@phosphor-icons/react'
+
+interface GenericPagePreviewProps {
+  page: PageDefinition
+  updatedAt?: string
+  footerText?: string
+}
+
+const layoutCopy: Record<PageDefinition['layout'], string> = {
+  default: 'Default layout with header and footer',
+  sidebar: 'Sidebar layout with navigation',
+  dashboard: 'Dashboard layout with widgets',
+  blank: 'Blank canvas for custom layouts'
+}
+
+export function Preview({ page, updatedAt, footerText }: GenericPagePreviewProps) {
+  const showHeader = page.metadata?.showHeader !== false
+  const showFooter = page.metadata?.showFooter !== false
+
+  return (
+    <Card className="h-full">
+      <CardHeader className="space-y-1">
+        <CardTitle className="flex items-center gap-2">
+          <Eye size={20} weight="duotone" />
+          Page preview
+        </CardTitle>
+        <CardDescription className="flex items-center gap-2 text-muted-foreground">
+          <Layout size={16} />
+          {layoutCopy[page.layout]}
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="flex items-center justify-between gap-3">
+          <div className="space-y-1">
+            <p className="text-sm text-muted-foreground">{page.description || 'No description provided.'}</p>
+            <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+              <Badge variant="outline" className="capitalize">
+                Level {page.level}
+              </Badge>
+              <Badge variant="secondary">{page.components.length} components</Badge>
+              {page.permissions?.requiresAuth && (
+                <span className="inline-flex items-center gap-1">
+                  <ShieldCheck size={14} />
+                  Auth required{page.permissions?.requiredRole ? ` (${page.permissions.requiredRole})` : ''}
+                </span>
+              )}
+              {updatedAt && <span>Last updated {updatedAt}</span>}
+            </div>
+          </div>
+          <Badge>{page.metadata?.headerTitle || page.title}</Badge>
+        </div>
+
+        <div className="rounded-lg border bg-card p-4 shadow-inner">
+          {showHeader && (
+            <div className="mb-3 flex items-center justify-between rounded-md border border-dashed border-border/60 bg-muted/60 px-3 py-2 text-sm">
+              <span className="font-semibold">Header</span>
+              <Badge variant="outline">{page.metadata?.headerTitle || 'Default title'}</Badge>
+            </div>
+          )}
+
+          <div
+            className={`grid gap-3 ${page.layout === 'dashboard' ? 'lg:grid-cols-3 md:grid-cols-2 grid-cols-1' : ''} ${
+              page.layout === 'sidebar' ? 'lg:grid-cols-[240px_1fr]' : ''
+            }`}
+          >
+            {page.layout === 'sidebar' && (
+              <div className="rounded-md border border-dashed border-border/60 bg-muted/50 p-3 text-sm text-muted-foreground">
+                Sidebar navigation
+              </div>
+            )}
+
+            <div className="space-y-3 rounded-md border border-dashed border-border/60 bg-background p-3">
+              <p className="text-sm font-semibold">Component tree</p>
+              <div className="grid gap-2 md:grid-cols-2">
+                {page.components.slice(0, 4).map(component => (
+                  <div key={component.id} className="rounded border bg-muted/40 p-2 text-xs text-muted-foreground">
+                    <div className="flex items-center justify-between">
+                      <span className="font-semibold text-foreground">{component.type}</span>
+                      {component.children && component.children.length > 0 && (
+                        <Badge variant="outline">{component.children.length} children</Badge>
+                      )}
+                    </div>
+                    {component.props?.className && <p className="line-clamp-1">{component.props.className}</p>}
+                  </div>
+                ))}
+                {page.components.length === 0 && (
+                  <p className="text-xs text-muted-foreground">Add components to see them previewed here.</p>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {showFooter && (
+            <div className="mt-3 flex items-center justify-between rounded-md border border-dashed border-border/60 bg-muted/60 px-3 py-2 text-sm text-muted-foreground">
+              <span>Footer</span>
+              <Badge variant="secondary">{footerText || 'Configured in metadata'}</Badge>
+            </div>
+          )}
+        </div>
+
+        <Separator />
+
+        <div className="grid gap-2 text-sm text-muted-foreground md:grid-cols-2">
+          <div className="space-y-1">
+            <p className="text-xs uppercase tracking-wide text-foreground">Lua hooks</p>
+            <p>onLoad: {page.luaScripts?.onLoad || 'Not configured'}</p>
+            <p>onUnload: {page.luaScripts?.onUnload || 'Not configured'}</p>
+          </div>
+          <div className="space-y-1">
+            <p className="text-xs uppercase tracking-wide text-foreground">Metadata</p>
+            <p>Header actions: {page.metadata?.headerActions?.length ?? 0}</p>
+            <p>Sidebar items: {page.metadata?.sidebarItems?.length ?? 0}</p>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/data/generic-page/SectionList.tsx b/frontends/nextjs/src/components/misc/data/generic-page/SectionList.tsx
new file mode 100644
index 000000000..4dd8ce0f7
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/data/generic-page/SectionList.tsx
@@ -0,0 +1,101 @@
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, ScrollArea, Separator } from '@/components/ui'
+import { ListNumbers, Plus, PushPinSimple, SquaresFour } from '@phosphor-icons/react'
+
+export interface PageSection {
+  id: string
+  title: string
+  description?: string
+  componentCount?: number
+  status?: 'draft' | 'review' | 'published'
+  updatedAt?: string
+}
+
+interface SectionListProps {
+  sections: PageSection[]
+  selectedSectionId?: string
+  onSelectSection?: (section: PageSection) => void
+  onCreateSection?: () => void
+}
+
+const statusVariant: Record<NonNullable<PageSection['status']>, 'default' | 'secondary' | 'outline'> = {
+  draft: 'secondary',
+  review: 'outline',
+  published: 'default'
+}
+
+export function SectionList({ sections, selectedSectionId, onSelectSection, onCreateSection }: SectionListProps) {
+  return (
+    <Card className="h-full">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0">
+        <div className="space-y-1">
+          <CardTitle className="flex items-center gap-2">
+            <ListNumbers size={20} weight="duotone" />
+            Sections
+          </CardTitle>
+          <CardDescription>Outline the sections that make up your generic page.</CardDescription>
+        </div>
+        <Button size="sm" onClick={onCreateSection} variant="secondary">
+          <Plus size={16} />
+          Add Section
+        </Button>
+      </CardHeader>
+      <CardContent className="p-0">
+        {sections.length === 0 ? (
+          <div className="py-10 text-center text-muted-foreground">
+            <p className="text-sm">No sections yet. Create your first section to start building the page.</p>
+          </div>
+        ) : (
+          <ScrollArea className="max-h-[520px]">
+            <div className="divide-y divide-border">
+              {sections.map(section => (
+                <button
+                  key={section.id}
+                  className={`w-full text-left transition hover:bg-muted/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background ${
+                    selectedSectionId === section.id ? 'bg-muted' : ''
+                  }`}
+                  onClick={() => onSelectSection?.(section)}
+                >
+                  <div className="flex items-start gap-3 px-4 py-3">
+                    <div className="mt-1">
+                      {section.status ? (
+                        <Badge variant={statusVariant[section.status]} className="capitalize">
+                          {section.status}
+                        </Badge>
+                      ) : (
+                        <Badge variant="outline">Draft</Badge>
+                      )}
+                    </div>
+                    <div className="flex-1 space-y-1">
+                      <div className="flex items-center justify-between gap-2">
+                        <div>
+                          <p className="font-semibold leading-none">{section.title}</p>
+                          {section.description && (
+                            <p className="text-sm text-muted-foreground line-clamp-2">{section.description}</p>
+                          )}
+                        </div>
+                        {section.updatedAt && (
+                          <p className="text-xs text-muted-foreground whitespace-nowrap">Updated {section.updatedAt}</p>
+                        )}
+                      </div>
+                      <div className="flex items-center gap-3 text-xs text-muted-foreground">
+                        <span className="inline-flex items-center gap-1">
+                          <SquaresFour size={14} />
+                          {section.componentCount ?? 0} components
+                        </span>
+                        <Separator orientation="vertical" className="h-4" />
+                        <span className="inline-flex items-center gap-1">
+                          <PushPinSimple size={14} />
+                          ID: {section.id}
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </ScrollArea>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/data/quick-guide/MediaPane.tsx b/frontends/nextjs/src/components/misc/data/quick-guide/MediaPane.tsx
new file mode 100644
index 000000000..7f7f2dd27
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/data/quick-guide/MediaPane.tsx
@@ -0,0 +1,69 @@
+import Image from 'next/image'
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label } from '@/components/ui'
+import { FilmSlate, ImageSquare } from '@phosphor-icons/react'
+
+interface MediaPaneProps {
+  thumbnailUrl?: string
+  videoUrl?: string
+  onThumbnailChange?: (value: string) => void
+  onVideoChange?: (value: string) => void
+}
+
+export function MediaPane({ thumbnailUrl, videoUrl, onThumbnailChange, onVideoChange }: MediaPaneProps) {
+  return (
+    <Card className="h-full">
+      <CardHeader className="space-y-1">
+        <CardTitle className="flex items-center gap-2">
+          <FilmSlate size={20} weight="duotone" />
+          Media
+        </CardTitle>
+        <CardDescription>Optional visuals to make the quick guide easier to follow.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="space-y-2">
+          <Label htmlFor="thumbnail-url">Thumbnail image</Label>
+          <Input
+            id="thumbnail-url"
+            value={thumbnailUrl || ''}
+            onChange={(e) => onThumbnailChange?.(e.target.value)}
+            placeholder="https://images.example.com/quick-guide.png"
+          />
+          <p className="text-xs text-muted-foreground">Shown in dashboards and previews.</p>
+          {thumbnailUrl && (
+            <div className="relative aspect-[16/9] overflow-hidden rounded-lg border bg-muted">
+              <Image src={thumbnailUrl} alt="Quick guide thumbnail" fill className="object-cover" />
+            </div>
+          )}
+        </div>
+
+        <div className="space-y-2">
+          <Label htmlFor="video-url">Demo video (optional)</Label>
+          <Input
+            id="video-url"
+            value={videoUrl || ''}
+            onChange={(e) => onVideoChange?.(e.target.value)}
+            placeholder="YouTube or direct MP4 link"
+          />
+          <p className="text-xs text-muted-foreground">Embed a short clip that shows the flow in action.</p>
+          {videoUrl && (
+            <div className="rounded-lg border bg-black p-3 text-sm text-muted-foreground">
+              <Badge variant="secondary" className="mb-2 inline-flex items-center gap-1">
+                <ImageSquare size={14} />
+                Preview
+              </Badge>
+              <div className="aspect-video overflow-hidden rounded-md bg-muted">
+                <iframe
+                  className="h-full w-full"
+                  src={videoUrl}
+                  title="Quick guide demo"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                  allowFullScreen
+                />
+              </div>
+            </div>
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/data/quick-guide/StepsEditor.tsx b/frontends/nextjs/src/components/misc/data/quick-guide/StepsEditor.tsx
new file mode 100644
index 000000000..093b90fb0
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/data/quick-guide/StepsEditor.tsx
@@ -0,0 +1,139 @@
+import { useEffect, useState } from 'react'
+import { Badge, Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label, Textarea } from '@/components/ui'
+import { ArrowCounterClockwise, ListNumbers, Plus, Trash } from '@phosphor-icons/react'
+
+export interface GuideStep {
+  id: string
+  title: string
+  description: string
+  mediaUrl?: string
+  duration?: string
+}
+
+interface StepsEditorProps {
+  steps: GuideStep[]
+  onChange?: (steps: GuideStep[]) => void
+}
+
+export function StepsEditor({ steps, onChange }: StepsEditorProps) {
+  const [localSteps, setLocalSteps] = useState<GuideStep[]>(steps)
+
+  useEffect(() => {
+    setLocalSteps(steps)
+  }, [steps])
+
+  const updateStep = (id: string, payload: Partial<GuideStep>) => {
+    const nextSteps = localSteps.map(step => (step.id === id ? { ...step, ...payload } : step))
+    setLocalSteps(nextSteps)
+    onChange?.(nextSteps)
+  }
+
+  const removeStep = (id: string) => {
+    const nextSteps = localSteps.filter(step => step.id !== id)
+    setLocalSteps(nextSteps)
+    onChange?.(nextSteps)
+  }
+
+  const addStep = () => {
+    const newStep: GuideStep = {
+      id: crypto.randomUUID(),
+      title: 'New step',
+      description: 'Describe what happens in this step.',
+      duration: '1-2 min'
+    }
+
+    const nextSteps = [...localSteps, newStep]
+    setLocalSteps(nextSteps)
+    onChange?.(nextSteps)
+  }
+
+  const resetOrdering = () => {
+    const nextSteps = localSteps.map((step, index) => ({ ...step, id: `step_${index + 1}` }))
+    setLocalSteps(nextSteps)
+    onChange?.(nextSteps)
+  }
+
+  return (
+    <Card className="h-full">
+      <CardHeader className="flex items-center justify-between space-y-0">
+        <div>
+          <CardTitle className="flex items-center gap-2">
+            <ListNumbers size={20} weight="duotone" />
+            Steps
+          </CardTitle>
+          <CardDescription>Keep your quick guide instructions concise and actionable.</CardDescription>
+        </div>
+        <div className="flex items-center gap-2">
+          <Button variant="secondary" size="sm" onClick={resetOrdering}>
+            <ArrowCounterClockwise size={16} />
+            Reset IDs
+          </Button>
+          <Button size="sm" onClick={addStep}>
+            <Plus size={16} />
+            Add Step
+          </Button>
+        </div>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        {localSteps.length === 0 ? (
+          <p className="text-sm text-muted-foreground">Add your first step to get started.</p>
+        ) : (
+          <div className="space-y-4">
+            {localSteps.map((step, index) => (
+              <div key={step.id} className="rounded-lg border border-border/80 bg-card/60 p-4 shadow-sm">
+                <div className="mb-3 flex items-center justify-between">
+                  <div className="flex items-center gap-2 text-sm text-muted-foreground">
+                    <Badge variant="outline">Step {index + 1}</Badge>
+                    <span>Duration: {step.duration || 'n/a'}</span>
+                  </div>
+                  <Button variant="ghost" size="icon" onClick={() => removeStep(step.id)}>
+                    <Trash size={16} />
+                  </Button>
+                </div>
+                <div className="grid gap-3 md:grid-cols-2">
+                  <div className="space-y-2">
+                    <Label htmlFor={`title-${step.id}`}>Title</Label>
+                    <Input
+                      id={`title-${step.id}`}
+                      value={step.title}
+                      onChange={(e) => updateStep(step.id, { title: e.target.value })}
+                      placeholder="Give this step a short name"
+                    />
+                  </div>
+                  <div className="space-y-2">
+                    <Label htmlFor={`duration-${step.id}`}>Expected duration</Label>
+                    <Input
+                      id={`duration-${step.id}`}
+                      value={step.duration || ''}
+                      onChange={(e) => updateStep(step.id, { duration: e.target.value })}
+                      placeholder="e.g. 30s, 1-2 min"
+                    />
+                  </div>
+                </div>
+                <div className="mt-3 space-y-2">
+                  <Label htmlFor={`description-${step.id}`}>Description</Label>
+                  <Textarea
+                    id={`description-${step.id}`}
+                    value={step.description}
+                    onChange={(e) => updateStep(step.id, { description: e.target.value })}
+                    rows={3}
+                    placeholder="Outline the actions or context for this step"
+                  />
+                </div>
+                <div className="mt-3 space-y-2">
+                  <Label htmlFor={`media-${step.id}`}>Media URL (optional)</Label>
+                  <Input
+                    id={`media-${step.id}`}
+                    value={step.mediaUrl || ''}
+                    onChange={(e) => updateStep(step.id, { mediaUrl: e.target.value })}
+                    placeholder="Link to an image, GIF, or short video"
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/data/smtp/ConnectionForm.tsx b/frontends/nextjs/src/components/misc/data/smtp/ConnectionForm.tsx
new file mode 100644
index 000000000..8c5b15269
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/data/smtp/ConnectionForm.tsx
@@ -0,0 +1,112 @@
+import { useMemo } from 'react'
+import { Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input, Label, Switch } from '@/components/ui'
+import { EnvelopeSimple, FloppyDisk } from '@phosphor-icons/react'
+import type { SMTPConfig } from '@/lib/password-utils'
+
+interface ConnectionFormProps {
+  value: SMTPConfig
+  onChange: (value: SMTPConfig) => void
+  onSave?: () => void
+  onTest?: () => void
+}
+
+export function ConnectionForm({ value, onChange, onSave, onTest }: ConnectionFormProps) {
+  const securePort = useMemo(() => (value.tls ? 465 : 587), [value.tls])
+
+  const updateField = <K extends keyof SMTPConfig>(key: K, fieldValue: SMTPConfig[K]) => {
+    onChange({ ...value, [key]: fieldValue })
+  }
+
+  return (
+    <Card className="h-full">
+      <CardHeader className="space-y-1">
+        <CardTitle className="flex items-center gap-2">
+          <EnvelopeSimple size={20} weight="duotone" />
+          SMTP connection
+        </CardTitle>
+        <CardDescription>Configure how MetaBuilder connects to your mail provider.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="host">Host</Label>
+            <Input
+              id="host"
+              value={value.host}
+              onChange={(e) => updateField('host', e.target.value)}
+              placeholder="smtp.example.com"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="port">Port</Label>
+            <Input
+              id="port"
+              type="number"
+              value={value.port}
+              onChange={(e) => updateField('port', parseInt(e.target.value || '0', 10))}
+              placeholder={securePort.toString()}
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="username">Username</Label>
+            <Input
+              id="username"
+              value={value.username}
+              onChange={(e) => updateField('username', e.target.value)}
+              placeholder="user@example.com"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="password">Password</Label>
+            <Input
+              id="password"
+              type="password"
+              value={value.password}
+              onChange={(e) => updateField('password', e.target.value)}
+              placeholder="App password or token"
+            />
+          </div>
+        </div>
+
+        <div className="grid gap-4 md:grid-cols-2">
+          <div className="space-y-2">
+            <Label htmlFor="fromName">From name</Label>
+            <Input
+              id="fromName"
+              value={value.fromName || ''}
+              onChange={(e) => updateField('fromName', e.target.value)}
+              placeholder="MetaBuilder"
+            />
+          </div>
+          <div className="space-y-2">
+            <Label htmlFor="fromEmail">From email</Label>
+            <Input
+              id="fromEmail"
+              type="email"
+              value={value.fromEmail}
+              onChange={(e) => updateField('fromEmail', e.target.value)}
+              placeholder="no-reply@example.com"
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between rounded-lg border bg-muted/40 p-3">
+          <div>
+            <p className="font-medium">Use secure connection (TLS)</p>
+            <p className="text-sm text-muted-foreground">Switching on updates the recommended port to {securePort}.</p>
+          </div>
+          <Switch checked={value.tls} onCheckedChange={(checked) => updateField('tls', checked)} />
+        </div>
+      </CardContent>
+      <CardFooter className="flex flex-wrap items-center gap-2">
+        <Button variant="secondary" onClick={onTest}>
+          Test connection
+        </Button>
+        <Button onClick={onSave}>
+          <FloppyDisk size={16} />
+          Save configuration
+        </Button>
+      </CardFooter>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/data/smtp/StatusCard.tsx b/frontends/nextjs/src/components/misc/data/smtp/StatusCard.tsx
new file mode 100644
index 000000000..830d9350b
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/data/smtp/StatusCard.tsx
@@ -0,0 +1,55 @@
+import { Badge, Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
+import { CheckCircle, Clock, WarningCircle } from '@phosphor-icons/react'
+import type { ReactNode } from 'react'
+
+export type ConnectionStatus = 'idle' | 'connected' | 'error'
+
+interface StatusCardProps {
+  status: ConnectionStatus
+  host?: string
+  lastChecked?: string
+  message?: string
+}
+
+const statusCopy: Record<ConnectionStatus, { label: string; tone: string; icon: ReactNode }> = {
+  idle: {
+    label: 'Not tested',
+    tone: 'bg-muted text-muted-foreground',
+    icon: <Clock size={16} />
+  },
+  connected: {
+    label: 'Connected',
+    tone: 'bg-emerald-500/15 text-emerald-700 dark:text-emerald-300',
+    icon: <CheckCircle size={16} />
+  },
+  error: {
+    label: 'Connection failed',
+    tone: 'bg-destructive/15 text-destructive',
+    icon: <WarningCircle size={16} />
+  }
+}
+
+export function StatusCard({ status, host, lastChecked, message }: StatusCardProps) {
+  const copy = statusCopy[status]
+
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle>Connection status</CardTitle>
+        <CardDescription>Stay aware of how the platform talks to your SMTP provider.</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <Badge variant="secondary" className={`inline-flex items-center gap-2 ${copy.tone}`}>
+          {copy.icon}
+          {copy.label}
+        </Badge>
+
+        <div className="text-sm text-muted-foreground space-y-1">
+          <p>Host: {host || 'Not configured'}</p>
+          <p>Last checked: {lastChecked || 'Pending test'}</p>
+          <p>{message || 'Run a test to see connection details.'}</p>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/demos/DBALDemo.tsx b/frontends/nextjs/src/components/misc/demos/DBALDemo.tsx
index 0292b4142..373463a95 100644
--- a/frontends/nextjs/src/components/misc/demos/DBALDemo.tsx
+++ b/frontends/nextjs/src/components/misc/demos/DBALDemo.tsx
@@ -5,10 +5,15 @@
  * with the MetaBuilder application.
  */
 
+import { useMemo, useState } from 'react'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
+import { useDBAL } from '@/hooks/use-dbal/use-dbal'
 import { BlobStorageDemo } from './dbal/BlobStorageDemo'
 import { CachedDataDemo } from './dbal/CachedDataDemo'
+import { ConnectionForm } from './dbal/ConnectionForm'
 import { KVStoreDemo } from './dbal/KVStoreDemo'
+import { LogsPanel } from './dbal/LogsPanel'
+import { ResultPanel } from './dbal/ResultPanel'
 import { DBALTabConfig, DBAL_CONTAINER_CLASS, DBAL_TAB_GRID_CLASS } from './dbal/dbal-demo.utils'
 
 const tabs: DBALTabConfig[] = [
@@ -18,6 +23,25 @@ const tabs: DBALTabConfig[] = [
 ]
 
 export function DBALDemo() {
+  const { isReady, error } = useDBAL()
+  const [logs, setLogs] = useState<string[]>([])
+  const [latestResult, setLatestResult] = useState<unknown>(null)
+
+  const statusMessage = useMemo(() => {
+    if (error) return `Error: ${error}`
+    return isReady ? 'Connected' : 'Initializing...'
+  }, [error, isReady])
+
+  const handleConnect = (config: { endpoint: string; apiKey: string }) => {
+    const timestamp = new Date().toLocaleTimeString()
+    setLogs((current) => [...current, `${timestamp}: Connected to ${config.endpoint}`])
+    setLatestResult({
+      endpoint: config.endpoint,
+      apiKey: config.apiKey ? '***' : 'Not provided',
+      ready: isReady,
+    })
+  }
+
   return (
     <div className={DBAL_CONTAINER_CLASS}>
       <div className="mb-8">
@@ -27,6 +51,20 @@ export function DBALDemo() {
         </p>
       </div>
 
+      <div className="grid gap-4 md:grid-cols-2 mb-6">
+        <ConnectionForm
+          defaultUrl={process.env.NEXT_PUBLIC_DBAL_ENDPOINT}
+          defaultApiKey={process.env.NEXT_PUBLIC_DBAL_API_KEY}
+          statusMessage={statusMessage}
+          onConnect={handleConnect}
+        />
+        <ResultPanel title="Connection Details" result={latestResult} emptyLabel="Submit the form to log a connection" />
+      </div>
+
+      <div className="mb-6">
+        <LogsPanel logs={logs} title="Demo Logs" />
+      </div>
+
       <Tabs defaultValue={tabs[0].value} className="space-y-4">
         <TabsList className={DBAL_TAB_GRID_CLASS}>
           {tabs.map((tab) => (
diff --git a/frontends/nextjs/src/components/misc/demos/IRCWebchat.tsx b/frontends/nextjs/src/components/misc/demos/IRCWebchat.tsx
index 746af5e67..068de8118 100644
--- a/frontends/nextjs/src/components/misc/demos/IRCWebchat.tsx
+++ b/frontends/nextjs/src/components/misc/demos/IRCWebchat.tsx
@@ -1,21 +1,9 @@
-import { useState, useEffect, useRef } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Button } from '@/components/ui'
-import { ScrollArea } from '@/components/ui'
-import { Badge } from '@/components/ui'
-import { PaperPlaneTilt, Users, SignOut, Gear } from '@phosphor-icons/react'
+import { useState, useEffect } from 'react'
 import { useKV } from '@github/spark/hooks'
 import type { User } from '@/lib/level-types'
-
-interface ChatMessage {
-  id: string
-  username: string
-  userId: string
-  message: string
-  timestamp: number
-  type: 'message' | 'system' | 'join' | 'leave'
-}
+import { ChatWindow } from './irc/ChatWindow'
+import { useChatInput, useFormattedTimes } from './irc/hooks'
+import type { ChatMessage } from './irc/types'
 
 interface IRCWebchatProps {
   user: User
@@ -26,10 +14,9 @@ interface IRCWebchatProps {
 export function IRCWebchat({ user, channelName = 'general', onClose }: IRCWebchatProps) {
   const [messages, setMessages] = useKV<ChatMessage[]>(`chat_${channelName}`, [])
   const [onlineUsers, setOnlineUsers] = useKV<string[]>(`chat_${channelName}_users`, [])
-  const [inputMessage, setInputMessage] = useState('')
   const [showSettings, setShowSettings] = useState(false)
-  const scrollRef = useRef<HTMLDivElement>(null)
-  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const { inputMessage, setInputMessage, handleKeyPress } = useChatInput(handleSendMessage)
+  const formattedTimes = useFormattedTimes(messages || [], formatTime)
 
   useEffect(() => {
     addUserToChannel()
@@ -38,14 +25,6 @@ export function IRCWebchat({ user, channelName = 'general', onClose }: IRCWebcha
     }
   }, [])
 
-  useEffect(() => {
-    scrollToBottom()
-  }, [messages])
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }
-
   const addUserToChannel = () => {
     setOnlineUsers((current) => {
       if (!current) return [user.username]
@@ -89,7 +68,7 @@ export function IRCWebchat({ user, channelName = 'general', onClose }: IRCWebcha
     })
   }
 
-  const handleSendMessage = () => {
+  function handleSendMessage() {
     const trimmed = inputMessage.trim()
     if (!trimmed) return
 
@@ -151,121 +130,24 @@ export function IRCWebchat({ user, channelName = 'general', onClose }: IRCWebcha
     }
   }
 
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      handleSendMessage()
-    }
-  }
-
-  const formatTime = (timestamp: number) => {
+  function formatTime(timestamp: number) {
     const date = new Date(timestamp)
     return date.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
   }
 
-  const getMessageStyle = (msg: ChatMessage) => {
-    if (msg.type === 'system' || msg.type === 'join' || msg.type === 'leave') {
-      return 'text-muted-foreground italic text-sm'
-    }
-    return ''
-  }
-
   return (
-    <Card className="h-[600px] flex flex-col">
-      <CardHeader className="border-b border-border pb-3">
-        <div className="flex items-center justify-between">
-          <CardTitle className="flex items-center gap-2 text-lg">
-            <span className="font-mono">#</span>
-            {channelName}
-          </CardTitle>
-          <div className="flex items-center gap-2">
-            <Badge variant="secondary" className="gap-1.5">
-              <Users size={14} />
-              {onlineUsers?.length || 0}
-            </Badge>
-            <Button size="sm" variant="ghost" onClick={() => setShowSettings(!showSettings)}>
-              <Gear size={16} />
-            </Button>
-            {onClose && (
-              <Button size="sm" variant="ghost" onClick={onClose}>
-                <SignOut size={16} />
-              </Button>
-            )}
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="flex-1 flex flex-col p-0 overflow-hidden">
-        <div className="flex flex-1 overflow-hidden">
-          <ScrollArea className="flex-1 p-4" ref={scrollRef}>
-            <div className="space-y-2 font-mono text-sm">
-              {(messages || []).map((msg) => (
-                <div key={msg.id} className={getMessageStyle(msg)}>
-                  {msg.type === 'message' && (
-                    <div className="flex gap-2">
-                      <span className="text-muted-foreground shrink-0">{formatTime(msg.timestamp)}</span>
-                      <span className="font-semibold shrink-0 text-primary">&lt;{msg.username}&gt;</span>
-                      <span className="break-words">{msg.message}</span>
-                    </div>
-                  )}
-                  {msg.type === 'system' && msg.username === 'System' && (
-                    <div className="flex gap-2">
-                      <span className="text-muted-foreground shrink-0">{formatTime(msg.timestamp)}</span>
-                      <span>*** {msg.message}</span>
-                    </div>
-                  )}
-                  {msg.type === 'system' && msg.username !== 'System' && (
-                    <div className="flex gap-2">
-                      <span className="text-muted-foreground shrink-0">{formatTime(msg.timestamp)}</span>
-                      <span className="text-accent">* {msg.username} {msg.message}</span>
-                    </div>
-                  )}
-                  {(msg.type === 'join' || msg.type === 'leave') && (
-                    <div className="flex gap-2">
-                      <span className="text-muted-foreground shrink-0">{formatTime(msg.timestamp)}</span>
-                      <span className={msg.type === 'join' ? 'text-green-500' : 'text-orange-500'}>
-                        --&gt; {msg.message}
-                      </span>
-                    </div>
-                  )}
-                </div>
-              ))}
-              <div ref={messagesEndRef} />
-            </div>
-          </ScrollArea>
-
-          {showSettings && (
-            <div className="w-48 border-l border-border p-4 bg-muted/20">
-              <h4 className="font-semibold text-sm mb-3">Online Users</h4>
-              <div className="space-y-1.5 text-sm">
-                {(onlineUsers || []).map((username) => (
-                  <div key={username} className="flex items-center gap-2">
-                    <div className="w-2 h-2 rounded-full bg-green-500" />
-                    <span>{username}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="border-t border-border p-4">
-          <div className="flex gap-2">
-            <Input
-              value={inputMessage}
-              onChange={(e) => setInputMessage(e.target.value)}
-              onKeyPress={handleKeyPress}
-              placeholder="Type a message... (/help for commands)"
-              className="flex-1 font-mono"
-            />
-            <Button onClick={handleSendMessage} size="icon">
-              <PaperPlaneTilt size={18} />
-            </Button>
-          </div>
-          <p className="text-xs text-muted-foreground mt-2">
-            Press Enter to send. Type /help for commands.
-          </p>
-        </div>
-      </CardContent>
-    </Card>
+    <ChatWindow
+      channelName={channelName}
+      messages={messages || []}
+      formattedTimes={formattedTimes}
+      onlineUsers={onlineUsers || []}
+      inputMessage={inputMessage}
+      onInputChange={setInputMessage}
+      onSendMessage={handleSendMessage}
+      onToggleSettings={() => setShowSettings(!showSettings)}
+      showSettings={showSettings}
+      onClose={onClose}
+      onInputKeyPress={handleKeyPress}
+    />
   )
 }
diff --git a/frontends/nextjs/src/components/misc/demos/IRCWebchatDeclarative.tsx b/frontends/nextjs/src/components/misc/demos/IRCWebchatDeclarative.tsx
index 1919b9524..8d77f26dc 100644
--- a/frontends/nextjs/src/components/misc/demos/IRCWebchatDeclarative.tsx
+++ b/frontends/nextjs/src/components/misc/demos/IRCWebchatDeclarative.tsx
@@ -1,22 +1,10 @@
-import { useState, useEffect, useRef } from 'react'
-import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Button } from '@/components/ui'
-import { ScrollArea } from '@/components/ui'
-import { Badge } from '@/components/ui'
-import { PaperPlaneTilt, Users, SignOut, Gear } from '@phosphor-icons/react'
+import { useState, useEffect } from 'react'
 import { useKV } from '@github/spark/hooks'
 import type { User } from '@/lib/level-types'
 import { getDeclarativeRenderer } from '@/lib/rendering-lib/declarative-component-renderer'
-
-interface ChatMessage {
-  id: string
-  username: string
-  userId: string
-  message: string
-  timestamp: number
-  type: 'message' | 'system' | 'join' | 'leave' | 'command'
-}
+import { ChatWindow } from './irc/ChatWindow'
+import { useChatInput, useFormattedTimes } from './irc/hooks'
+import type { ChatMessage } from './irc/types'
 
 interface IRCWebchatDeclarativeProps {
   user: User
@@ -27,11 +15,10 @@ interface IRCWebchatDeclarativeProps {
 export function IRCWebchatDeclarative({ user, channelName = 'general', onClose }: IRCWebchatDeclarativeProps) {
   const [messages, setMessages] = useKV<ChatMessage[]>(`chat_${channelName}`, [])
   const [onlineUsers, setOnlineUsers] = useKV<string[]>(`chat_${channelName}_users`, [])
-  const [inputMessage, setInputMessage] = useState('')
   const [showSettings, setShowSettings] = useState(false)
-  const scrollRef = useRef<HTMLDivElement>(null)
-  const messagesEndRef = useRef<HTMLDivElement>(null)
+  const { inputMessage, setInputMessage, handleKeyPress } = useChatInput(handleSendMessage)
   const renderer = getDeclarativeRenderer()
+  const formattedTimes = useFormattedTimes(messages, formatTime)
 
   useEffect(() => {
     addUserToChannel()
@@ -40,14 +27,6 @@ export function IRCWebchatDeclarative({ user, channelName = 'general', onClose }
     }
   }, [])
 
-  useEffect(() => {
-    scrollToBottom()
-  }, [messages])
-
-  const scrollToBottom = () => {
-    messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' })
-  }
-
   const addUserToChannel = async () => {
     setOnlineUsers((current) => {
       if (!current) return [user.username]
@@ -113,7 +92,7 @@ export function IRCWebchatDeclarative({ user, channelName = 'general', onClose }
     }
   }
 
-  const handleSendMessage = async () => {
+  async function handleSendMessage() {
     const trimmed = inputMessage.trim()
     if (!trimmed) return
 
@@ -182,14 +161,9 @@ export function IRCWebchatDeclarative({ user, channelName = 'general', onClose }
     }
   }
 
-  const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter' && !e.shiftKey) {
-      e.preventDefault()
-      handleSendMessage()
-    }
   }
 
-  const formatTime = async (timestamp: number): Promise<string> => {
+  async function formatTime(timestamp: number): Promise<string> {
     try {
       const formatted = await renderer.executeLuaScript('lua_irc_format_time', [timestamp])
       return formatted || new Date(timestamp).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })
@@ -198,122 +172,19 @@ export function IRCWebchatDeclarative({ user, channelName = 'general', onClose }
     }
   }
 
-  const [formattedTimes, setFormattedTimes] = useState<Record<string, string>>({})
-
-  useEffect(() => {
-    const updateTimes = async () => {
-      const times: Record<string, string> = {}
-      for (const msg of messages || []) {
-        times[msg.id] = await formatTime(msg.timestamp)
-      }
-      setFormattedTimes(times)
-    }
-    updateTimes()
-  }, [messages])
-
-  const getMessageStyle = (msg: ChatMessage) => {
-    if (msg.type === 'system' || msg.type === 'join' || msg.type === 'leave') {
-      return 'text-muted-foreground italic text-sm'
-    }
-    return ''
-  }
-
   return (
-    <Card className="h-[600px] flex flex-col">
-      <CardHeader className="border-b border-border pb-3">
-        <div className="flex items-center justify-between">
-          <CardTitle className="flex items-center gap-2 text-lg">
-            <span className="font-mono">#</span>
-            {channelName}
-          </CardTitle>
-          <div className="flex items-center gap-2">
-            <Badge variant="secondary" className="gap-1.5">
-              <Users size={14} />
-              {onlineUsers?.length || 0}
-            </Badge>
-            <Button size="sm" variant="ghost" onClick={() => setShowSettings(!showSettings)}>
-              <Gear size={16} />
-            </Button>
-            {onClose && (
-              <Button size="sm" variant="ghost" onClick={onClose}>
-                <SignOut size={16} />
-              </Button>
-            )}
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent className="flex-1 flex flex-col p-0 overflow-hidden">
-        <div className="flex flex-1 overflow-hidden">
-          <ScrollArea className="flex-1 p-4" ref={scrollRef}>
-            <div className="space-y-2 font-mono text-sm">
-              {(messages || []).map((msg) => (
-                <div key={msg.id} className={getMessageStyle(msg)}>
-                  {msg.type === 'message' && (
-                    <div className="flex gap-2">
-                      <span className="text-muted-foreground shrink-0">{formattedTimes[msg.id] || ''}</span>
-                      <span className="font-semibold shrink-0 text-primary">&lt;{msg.username}&gt;</span>
-                      <span className="break-words">{msg.message}</span>
-                    </div>
-                  )}
-                  {msg.type === 'system' && msg.username === 'System' && (
-                    <div className="flex gap-2">
-                      <span className="text-muted-foreground shrink-0">{formattedTimes[msg.id] || ''}</span>
-                      <span>*** {msg.message}</span>
-                    </div>
-                  )}
-                  {msg.type === 'system' && msg.username !== 'System' && (
-                    <div className="flex gap-2">
-                      <span className="text-muted-foreground shrink-0">{formattedTimes[msg.id] || ''}</span>
-                      <span className="text-accent">* {msg.username} {msg.message}</span>
-                    </div>
-                  )}
-                  {(msg.type === 'join' || msg.type === 'leave') && (
-                    <div className="flex gap-2">
-                      <span className="text-muted-foreground shrink-0">{formattedTimes[msg.id] || ''}</span>
-                      <span className={msg.type === 'join' ? 'text-green-500' : 'text-orange-500'}>
-                        --&gt; {msg.message}
-                      </span>
-                    </div>
-                  )}
-                </div>
-              ))}
-              <div ref={messagesEndRef} />
-            </div>
-          </ScrollArea>
-
-          {showSettings && (
-            <div className="w-48 border-l border-border p-4 bg-muted/20">
-              <h4 className="font-semibold text-sm mb-3">Online Users</h4>
-              <div className="space-y-1.5 text-sm">
-                {(onlineUsers || []).map((username) => (
-                  <div key={username} className="flex items-center gap-2">
-                    <div className="w-2 h-2 rounded-full bg-green-500" />
-                    <span>{username}</span>
-                  </div>
-                ))}
-              </div>
-            </div>
-          )}
-        </div>
-
-        <div className="border-t border-border p-4">
-          <div className="flex gap-2">
-            <Input
-              value={inputMessage}
-              onChange={(e) => setInputMessage(e.target.value)}
-              onKeyPress={handleKeyPress}
-              placeholder="Type a message... (/help for commands)"
-              className="flex-1 font-mono"
-            />
-            <Button onClick={handleSendMessage} size="icon">
-              <PaperPlaneTilt size={18} />
-            </Button>
-          </div>
-          <p className="text-xs text-muted-foreground mt-2">
-            Press Enter to send. Type /help for commands.
-          </p>
-        </div>
-      </CardContent>
-    </Card>
+    <ChatWindow
+      channelName={channelName}
+      messages={messages || []}
+      formattedTimes={formattedTimes}
+      onlineUsers={onlineUsers || []}
+      inputMessage={inputMessage}
+      onInputChange={setInputMessage}
+      onSendMessage={handleSendMessage}
+      onToggleSettings={() => setShowSettings(!showSettings)}
+      showSettings={showSettings}
+      onClose={onClose}
+      onInputKeyPress={handleKeyPress}
+    />
   )
 }
diff --git a/frontends/nextjs/src/components/misc/demos/ScreenshotAnalyzer.tsx b/frontends/nextjs/src/components/misc/demos/ScreenshotAnalyzer.tsx
index a8ab25a73..a919b591c 100644
--- a/frontends/nextjs/src/components/misc/demos/ScreenshotAnalyzer.tsx
+++ b/frontends/nextjs/src/components/misc/demos/ScreenshotAnalyzer.tsx
@@ -1,26 +1,11 @@
 import { useState } from 'react'
-import {
-  Box,
-  Button,
-  Card,
-  CardContent,
-  CardHeader,
-  Chip,
-  CircularProgress,
-  Stack,
-  Typography,
-  Grid,
-} from '@mui/material'
-import {
-  CameraAlt as CameraIcon,
-  Visibility as EyeIcon,
-  Download as DownloadIcon,
-  Refresh as RefreshIcon,
-} from '@mui/icons-material'
+import { Box, Card, CardContent, CardHeader, Chip, Grid, Typography } from '@mui/material'
 import { toast } from 'sonner'
 import { captureDomSnapshot } from '@/lib/screenshot/capture-dom-snapshot'
 import { requestScreenshotAnalysis } from '@/lib/screenshot/request-screenshot-analysis'
 import type { ScreenshotAnalysisResult } from '@/lib/screenshot/types'
+import { UploadSection } from './screenshot-analyzer/UploadSection'
+import { ResultPanel } from './screenshot-analyzer/ResultPanel'
 
 export function ScreenshotAnalyzer() {
   const [isCapturing, setIsCapturing] = useState(false)
@@ -96,108 +81,16 @@ export function ScreenshotAnalyzer() {
         <Chip label="Local Analysis" color="secondary" />
       </Box>
 
-      <Card>
-        <CardHeader
-          title="Capture & Analyze"
-          subheader="Create a DOM snapshot and run heuristic checks"
-        />
-        <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          <Box sx={{ display: 'flex', gap: 1.5 }}>
-            <Button
-              onClick={captureScreenshot}
-              disabled={isCapturing || isAnalyzing}
-              variant="contained"
-              startIcon={<CameraIcon />}
-              sx={{ flex: 1 }}
-            >
-              {isCapturing ? 'Capturing...' : 'Capture & Analyze'}
-            </Button>
+      <UploadSection
+        isCapturing={isCapturing}
+        isAnalyzing={isAnalyzing}
+        screenshotData={screenshotData}
+        onCapture={captureScreenshot}
+        onDownload={downloadScreenshot}
+        onReanalyze={analyzeScreenshot}
+      />
 
-            {screenshotData && (
-              <>
-                <Button
-                  onClick={downloadScreenshot}
-                  variant="outlined"
-                  startIcon={<DownloadIcon />}
-                >
-                  Download
-                </Button>
-
-                <Button
-                  onClick={analyzeScreenshot}
-                  variant="outlined"
-                  disabled={isAnalyzing}
-                  startIcon={<RefreshIcon />}
-                >
-                  Re-analyze
-                </Button>
-              </>
-            )}
-          </Box>
-
-          {isAnalyzing && (
-            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', p: 4, gap: 1.5 }}>
-              <CircularProgress size={24} />
-              <Typography color="text.secondary">Analyzing with heuristics...</Typography>
-            </Box>
-          )}
-
-          {analysisReport && !isAnalyzing && (
-            <Card variant="outlined" sx={{ bgcolor: 'action.hover' }}>
-              <CardHeader
-                avatar={<EyeIcon />}
-                title="Heuristic Analysis"
-                titleTypographyProps={{ variant: 'subtitle1' }}
-              />
-              <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-                {analysisResult && (
-                  <Stack direction="row" spacing={1} useFlexGap flexWrap="wrap">
-                    <Chip size="small" label={`Words: ${analysisResult.metrics.wordCount}`} />
-                    <Chip size="small" label={`Headings: ${analysisResult.metrics.headingCount}`} />
-                    <Chip size="small" label={`Links: ${analysisResult.metrics.linkCount}`} />
-                    <Chip size="small" label={`Buttons: ${analysisResult.metrics.buttonCount}`} />
-                    <Chip size="small" label={`Images: ${analysisResult.metrics.imgCount}`} />
-                    <Chip size="small" label={`Missing alt: ${analysisResult.metrics.imgMissingAltCount}`} />
-                  </Stack>
-                )}
-
-                {analysisResult?.warnings.length ? (
-                  <Box>
-                    <Typography variant="subtitle2" gutterBottom>Warnings</Typography>
-                    <Box component="ul" sx={{ pl: 3, m: 0 }}>
-                      {analysisResult.warnings.map((warning) => (
-                        <li key={warning}>
-                          <Typography variant="body2">{warning}</Typography>
-                        </li>
-                      ))}
-                    </Box>
-                  </Box>
-                ) : null}
-
-                <Typography
-                  component="pre"
-                  sx={{
-                    whiteSpace: 'pre-wrap',
-                    fontFamily: 'inherit',
-                    fontSize: '0.875rem',
-                  }}
-                >
-                  {analysisReport}
-                </Typography>
-              </CardContent>
-            </Card>
-          )}
-
-          {screenshotData && (
-            <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 1, p: 2, bgcolor: 'action.hover' }}>
-              <Typography variant="subtitle2" gutterBottom>Screenshot Preview</Typography>
-              <Box sx={{ maxHeight: 384, overflow: 'auto', border: 1, borderColor: 'divider', borderRadius: 1 }}>
-                <Box component="img" src={screenshotData} alt="Page screenshot" sx={{ width: '100%' }} />
-              </Box>
-            </Box>
-          )}
-        </CardContent>
-      </Card>
+      <ResultPanel analysisReport={analysisReport} analysisResult={analysisResult} />
 
       <Card>
         <CardHeader title="Page Information" />
diff --git a/frontends/nextjs/src/components/misc/demos/dbal/ConnectionForm.tsx b/frontends/nextjs/src/components/misc/demos/dbal/ConnectionForm.tsx
new file mode 100644
index 000000000..0e8d2f960
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/demos/dbal/ConnectionForm.tsx
@@ -0,0 +1,66 @@
+import { useState } from 'react'
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Input, Label } from '@/components/ui'
+
+interface ConnectionFormProps {
+  defaultUrl?: string
+  defaultApiKey?: string
+  isConnecting?: boolean
+  statusMessage?: string
+  onConnect?: (config: { endpoint: string; apiKey: string }) => void
+}
+
+export function ConnectionForm({
+  defaultUrl = '',
+  defaultApiKey = '',
+  isConnecting = false,
+  statusMessage,
+  onConnect,
+}: ConnectionFormProps) {
+  const [endpoint, setEndpoint] = useState(defaultUrl)
+  const [apiKey, setApiKey] = useState(defaultApiKey)
+
+  const handleSubmit = (event: React.FormEvent) => {
+    event.preventDefault()
+    onConnect?.({ endpoint, apiKey })
+  }
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>DBAL Connection</CardTitle>
+        <CardDescription>Configure the DBAL endpoint used by the demos</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form className="space-y-4" onSubmit={handleSubmit}>
+          <div className="space-y-2">
+            <Label htmlFor="dbal-endpoint">Endpoint</Label>
+            <Input
+              id="dbal-endpoint"
+              placeholder="http://localhost:8080/api/dbal"
+              value={endpoint}
+              onChange={(event) => setEndpoint(event.target.value)}
+            />
+          </div>
+
+          <div className="space-y-2">
+            <Label htmlFor="dbal-api-key">API Key</Label>
+            <Input
+              id="dbal-api-key"
+              type="password"
+              placeholder="Optional"
+              value={apiKey}
+              onChange={(event) => setApiKey(event.target.value)}
+            />
+          </div>
+
+          <div className="flex items-center gap-3">
+            <Button type="submit" disabled={isConnecting}>
+              {isConnecting ? 'Connecting…' : 'Connect'}
+            </Button>
+            {statusMessage ? <p className="text-sm text-muted-foreground">{statusMessage}</p> : null}
+          </div>
+        </form>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/demos/dbal/LogsPanel.tsx b/frontends/nextjs/src/components/misc/demos/dbal/LogsPanel.tsx
new file mode 100644
index 000000000..331915b6f
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/demos/dbal/LogsPanel.tsx
@@ -0,0 +1,31 @@
+import { Card, CardContent, CardHeader, CardTitle, ScrollArea } from '@/components/ui'
+
+interface LogsPanelProps {
+  logs: string[]
+  title?: string
+}
+
+export function LogsPanel({ logs, title = 'Activity' }: LogsPanelProps) {
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        <ScrollArea className="h-64 rounded border bg-muted/50 p-3 font-mono text-sm">
+          <div className="space-y-2">
+            {logs.length === 0 ? (
+              <p className="text-muted-foreground">No events yet</p>
+            ) : (
+              logs.map((entry, index) => (
+                <div key={index} className="text-foreground">
+                  {entry}
+                </div>
+              ))
+            )}
+          </div>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/demos/dbal/ResultPanel.tsx b/frontends/nextjs/src/components/misc/demos/dbal/ResultPanel.tsx
new file mode 100644
index 000000000..0c7f27d36
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/demos/dbal/ResultPanel.tsx
@@ -0,0 +1,26 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui'
+
+interface ResultPanelProps {
+  title?: string
+  result: unknown
+  emptyLabel?: string
+}
+
+export function ResultPanel({ title = 'Latest Result', result, emptyLabel = 'No result yet' }: ResultPanelProps) {
+  return (
+    <Card className="h-full">
+      <CardHeader>
+        <CardTitle>{title}</CardTitle>
+      </CardHeader>
+      <CardContent>
+        {result ? (
+          <pre className="whitespace-pre-wrap break-words rounded bg-muted/50 p-3 text-sm">
+            {JSON.stringify(result, null, 2)}
+          </pre>
+        ) : (
+          <p className="text-sm text-muted-foreground">{emptyLabel}</p>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/demos/irc/ChatWindow.tsx b/frontends/nextjs/src/components/misc/demos/irc/ChatWindow.tsx
new file mode 100644
index 000000000..2bf7af42f
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/demos/irc/ChatWindow.tsx
@@ -0,0 +1,138 @@
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, Input, ScrollArea } from '@/components/ui'
+import { Gear, PaperPlaneTilt, SignOut, Users } from '@phosphor-icons/react'
+import { UserList } from './UserList'
+import type { ChatMessage } from './types'
+
+interface ChatWindowProps {
+  channelName: string
+  messages: ChatMessage[]
+  formattedTimes: Record<string, string>
+  onlineUsers: string[]
+  inputMessage: string
+  onInputChange: (value: string) => void
+  onSendMessage: () => void
+  onToggleSettings: () => void
+  showSettings: boolean
+  onClose?: () => void
+  onInputKeyPress?: (event: React.KeyboardEvent) => void
+}
+
+export function ChatWindow({
+  channelName,
+  messages,
+  formattedTimes,
+  onlineUsers,
+  inputMessage,
+  onInputChange,
+  onSendMessage,
+  onToggleSettings,
+  showSettings,
+  onClose,
+  onInputKeyPress,
+}: ChatWindowProps) {
+  const getMessageStyle = (message: ChatMessage) => {
+    if (message.type === 'system' || message.type === 'join' || message.type === 'leave' || message.type === 'command') {
+      return 'text-muted-foreground italic text-sm'
+    }
+    return ''
+  }
+
+  return (
+    <Card className="h-[600px] flex flex-col">
+      <CardHeader className="border-b border-border pb-3">
+        <div className="flex items-center justify-between">
+          <CardTitle className="flex items-center gap-2 text-lg">
+            <span className="font-mono">#</span>
+            {channelName}
+          </CardTitle>
+          <div className="flex items-center gap-2">
+            <Badge variant="secondary" className="gap-1.5">
+              <Users size={14} />
+              {onlineUsers.length}
+            </Badge>
+            <Button size="sm" variant="ghost" onClick={onToggleSettings}>
+              <Gear size={16} />
+            </Button>
+            {onClose && (
+              <Button size="sm" variant="ghost" onClick={onClose}>
+                <SignOut size={16} />
+              </Button>
+            )}
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent className="flex-1 flex flex-col p-0 overflow-hidden">
+        <div className="flex flex-1 overflow-hidden">
+          <ScrollArea className="flex-1 p-4">
+            <div className="space-y-2 font-mono text-sm">
+              {messages.map((message) => (
+                <div key={message.id} className={getMessageStyle(message)}>
+                  {message.type === 'message' && (
+                    <div className="flex gap-2">
+                      <span className="text-muted-foreground shrink-0">{formattedTimes[message.id] || ''}</span>
+                      <span className="font-semibold shrink-0 text-primary">&lt;{message.username}&gt;</span>
+                      <span className="break-words">{message.message}</span>
+                    </div>
+                  )}
+
+                  {message.type === 'system' && message.username === 'System' && (
+                    <div className="flex gap-2">
+                      <span className="text-muted-foreground shrink-0">{formattedTimes[message.id] || ''}</span>
+                      <span>*** {message.message}</span>
+                    </div>
+                  )}
+
+                  {message.type === 'system' && message.username !== 'System' && (
+                    <div className="flex gap-2">
+                      <span className="text-muted-foreground shrink-0">{formattedTimes[message.id] || ''}</span>
+                      <span className="text-accent">* {message.username} {message.message}</span>
+                    </div>
+                  )}
+
+                  {(message.type === 'join' || message.type === 'leave') && (
+                    <div className="flex gap-2">
+                      <span className="text-muted-foreground shrink-0">{formattedTimes[message.id] || ''}</span>
+                      <span className={message.type === 'join' ? 'text-green-500' : 'text-orange-500'}>
+                        --&gt; {message.message}
+                      </span>
+                    </div>
+                  )}
+
+                  {message.type === 'command' && (
+                    <div className="flex gap-2">
+                      <span className="text-muted-foreground shrink-0">{formattedTimes[message.id] || ''}</span>
+                      <span className="text-muted-foreground">{message.message}</span>
+                    </div>
+                  )}
+                </div>
+              ))}
+            </div>
+          </ScrollArea>
+
+          {showSettings && (
+            <div className="w-48 border-l border-border p-4 bg-muted/20">
+              <h4 className="font-semibold text-sm mb-3">Online Users</h4>
+              <UserList users={onlineUsers} />
+            </div>
+          )}
+        </div>
+
+        <div className="border-t border-border p-4">
+          <div className="flex gap-2">
+            <Input
+              value={inputMessage}
+              onChange={(event) => onInputChange(event.target.value)}
+              onKeyPress={onInputKeyPress}
+              placeholder="Type a message... (/help for commands)"
+              className="flex-1 font-mono"
+            />
+            <Button onClick={onSendMessage} size="icon">
+              <PaperPlaneTilt size={18} />
+            </Button>
+          </div>
+          <p className="text-xs text-muted-foreground mt-2">Press Enter to send. Type /help for commands.</p>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/demos/irc/UserList.tsx b/frontends/nextjs/src/components/misc/demos/irc/UserList.tsx
new file mode 100644
index 000000000..c6cf0a932
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/demos/irc/UserList.tsx
@@ -0,0 +1,20 @@
+interface UserListProps {
+  users: string[]
+}
+
+export function UserList({ users }: UserListProps) {
+  if (users.length === 0) {
+    return <p className="text-sm text-muted-foreground">No users online</p>
+  }
+
+  return (
+    <div className="space-y-1.5 text-sm">
+      {users.map((username) => (
+        <div key={username} className="flex items-center gap-2">
+          <div className="w-2 h-2 rounded-full bg-green-500" />
+          <span>{username}</span>
+        </div>
+      ))}
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/demos/irc/hooks.ts b/frontends/nextjs/src/components/misc/demos/irc/hooks.ts
new file mode 100644
index 000000000..86c588024
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/demos/irc/hooks.ts
@@ -0,0 +1,55 @@
+import { useEffect, useState } from 'react'
+import type { ChatMessage } from './types'
+
+type TimestampFormatter = (timestamp: number) => Promise<string> | string
+
+export function useChatInput(onSubmit: () => void) {
+  const [inputMessage, setInputMessage] = useState('')
+
+  const handleKeyPress = (event: React.KeyboardEvent) => {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault()
+      onSubmit()
+    }
+  }
+
+  return {
+    inputMessage,
+    setInputMessage,
+    handleKeyPress,
+  }
+}
+
+export function useFormattedTimes(messages: ChatMessage[] | undefined, formatTime: TimestampFormatter) {
+  const [formattedTimes, setFormattedTimes] = useState<Record<string, string>>({})
+
+  useEffect(() => {
+    let isMounted = true
+
+    const formatAllTimes = async () => {
+      if (!messages) {
+        setFormattedTimes({})
+        return
+      }
+
+      const entries = await Promise.all(
+        messages.map(async (message) => {
+          const formatted = await formatTime(message.timestamp)
+          return [message.id, formatted] as const
+        }),
+      )
+
+      if (isMounted) {
+        setFormattedTimes(Object.fromEntries(entries))
+      }
+    }
+
+    formatAllTimes()
+
+    return () => {
+      isMounted = false
+    }
+  }, [messages, formatTime])
+
+  return formattedTimes
+}
diff --git a/frontends/nextjs/src/components/misc/demos/irc/types.ts b/frontends/nextjs/src/components/misc/demos/irc/types.ts
new file mode 100644
index 000000000..c46671dc7
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/demos/irc/types.ts
@@ -0,0 +1,10 @@
+export type ChatMessageType = 'message' | 'system' | 'join' | 'leave' | 'command'
+
+export interface ChatMessage {
+  id: string
+  username: string
+  userId: string
+  message: string
+  timestamp: number
+  type: ChatMessageType
+}
diff --git a/frontends/nextjs/src/components/misc/demos/screenshot-analyzer/ResultPanel.tsx b/frontends/nextjs/src/components/misc/demos/screenshot-analyzer/ResultPanel.tsx
new file mode 100644
index 000000000..8090f442f
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/demos/screenshot-analyzer/ResultPanel.tsx
@@ -0,0 +1,56 @@
+import { Box, Card, CardContent, CardHeader, Chip, Stack, Typography } from '@mui/material'
+import { Visibility as EyeIcon } from '@mui/icons-material'
+import type { ScreenshotAnalysisResult } from '@/lib/screenshot/types'
+
+interface ResultPanelProps {
+  analysisReport: string
+  analysisResult: ScreenshotAnalysisResult | null
+}
+
+export function ResultPanel({ analysisReport, analysisResult }: ResultPanelProps) {
+  if (!analysisReport) return null
+
+  return (
+    <Card variant="outlined" sx={{ bgcolor: 'action.hover' }}>
+      <CardHeader avatar={<EyeIcon />} title="Heuristic Analysis" titleTypographyProps={{ variant: 'subtitle1' }} />
+      <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {analysisResult && (
+          <Stack direction="row" spacing={1} useFlexGap flexWrap="wrap">
+            <Chip size="small" label={`Words: ${analysisResult.metrics.wordCount}`} />
+            <Chip size="small" label={`Headings: ${analysisResult.metrics.headingCount}`} />
+            <Chip size="small" label={`Links: ${analysisResult.metrics.linkCount}`} />
+            <Chip size="small" label={`Buttons: ${analysisResult.metrics.buttonCount}`} />
+            <Chip size="small" label={`Images: ${analysisResult.metrics.imgCount}`} />
+            <Chip size="small" label={`Missing alt: ${analysisResult.metrics.imgMissingAltCount}`} />
+          </Stack>
+        )}
+
+        {analysisResult?.warnings.length ? (
+          <Box>
+            <Typography variant="subtitle2" gutterBottom>
+              Warnings
+            </Typography>
+            <Box component="ul" sx={{ pl: 3, m: 0 }}>
+              {analysisResult.warnings.map((warning) => (
+                <li key={warning}>
+                  <Typography variant="body2">{warning}</Typography>
+                </li>
+              ))}
+            </Box>
+          </Box>
+        ) : null}
+
+        <Typography
+          component="pre"
+          sx={{
+            whiteSpace: 'pre-wrap',
+            fontFamily: 'inherit',
+            fontSize: '0.875rem',
+          }}
+        >
+          {analysisReport}
+        </Typography>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/demos/screenshot-analyzer/UploadSection.tsx b/frontends/nextjs/src/components/misc/demos/screenshot-analyzer/UploadSection.tsx
new file mode 100644
index 000000000..c768becdc
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/demos/screenshot-analyzer/UploadSection.tsx
@@ -0,0 +1,71 @@
+import { Box, Button, Card, CardContent, CardHeader, CircularProgress, Typography } from '@mui/material'
+import { CameraAlt as CameraIcon, Download as DownloadIcon, Refresh as RefreshIcon } from '@mui/icons-material'
+
+interface UploadSectionProps {
+  isCapturing: boolean
+  isAnalyzing: boolean
+  screenshotData: string | null
+  onCapture: () => void
+  onDownload: () => void
+  onReanalyze: () => void
+  previewTitle?: string
+}
+
+export function UploadSection({
+  isCapturing,
+  isAnalyzing,
+  screenshotData,
+  onCapture,
+  onDownload,
+  onReanalyze,
+  previewTitle = 'Screenshot Preview',
+}: UploadSectionProps) {
+  return (
+    <Card>
+      <CardHeader title="Capture & Analyze" subheader="Create a DOM snapshot and run heuristic checks" />
+      <CardContent sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        <Box sx={{ display: 'flex', gap: 1.5 }}>
+          <Button
+            onClick={onCapture}
+            disabled={isCapturing || isAnalyzing}
+            variant="contained"
+            startIcon={<CameraIcon />}
+            sx={{ flex: 1 }}
+          >
+            {isCapturing ? 'Capturing...' : 'Capture & Analyze'}
+          </Button>
+
+          {screenshotData && (
+            <>
+              <Button onClick={onDownload} variant="outlined" startIcon={<DownloadIcon />}>
+                Download
+              </Button>
+
+              <Button onClick={onReanalyze} variant="outlined" disabled={isAnalyzing} startIcon={<RefreshIcon />}>
+                Re-analyze
+              </Button>
+            </>
+          )}
+        </Box>
+
+        {isAnalyzing && (
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', p: 4, gap: 1.5 }}>
+            <CircularProgress size={24} />
+            <Typography color="text.secondary">Analyzing with heuristics...</Typography>
+          </Box>
+        )}
+
+        {screenshotData && (
+          <Box sx={{ border: 1, borderColor: 'divider', borderRadius: 1, p: 2, bgcolor: 'action.hover' }}>
+            <Typography variant="subtitle2" gutterBottom>
+              {previewTitle}
+            </Typography>
+            <Box sx={{ maxHeight: 384, overflow: 'auto', border: 1, borderColor: 'divider', borderRadius: 1 }}>
+              <Box component="img" src={screenshotData} alt="Page screenshot" sx={{ width: '100%' }} />
+            </Box>
+          </Box>
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/github/GitHubActionsFetcher.tsx b/frontends/nextjs/src/components/misc/github/GitHubActionsFetcher.tsx
index 441bd2d0e..51a09ac13 100644
--- a/frontends/nextjs/src/components/misc/github/GitHubActionsFetcher.tsx
+++ b/frontends/nextjs/src/components/misc/github/GitHubActionsFetcher.tsx
@@ -1,101 +1,40 @@
-import { useEffect, useState } from 'react'
 import { Stack } from '@mui/material'
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-import { formatWorkflowRunAnalysis, summarizeWorkflowRuns } from '@/lib/github/analyze-workflow-runs'
-import { toast } from 'sonner'
 
-import { useWorkflowRuns } from './hooks/useWorkflowRuns'
-import { useWorkflowLogAnalysis } from './hooks/useWorkflowLogAnalysis'
+import { useActionsFetcher } from './workflows/useActionsFetcher'
 import { AnalysisPanel } from './views/AnalysisPanel'
 import { RunDetails } from './views/RunDetails'
 import { RunList } from './views/RunList'
 
 export function GitHubActionsFetcher() {
-  const [analysis, setAnalysis] = useState<string | null>(null)
-  const [isAnalyzing, setIsAnalyzing] = useState(false)
-  const [activeTab, setActiveTab] = useState<'runs' | 'logs' | 'analysis'>(
-    'runs',
-  )
-
   const {
     runs,
     isLoading,
     error,
     needsAuth,
-    repoInfo,
     repoLabel,
     lastFetched,
-    secondsUntilRefresh,
     autoRefreshEnabled,
+    secondsUntilRefresh,
     toggleAutoRefresh,
+    downloadWorkflowData,
     fetchRuns,
     getStatusColor,
+    isLoadingLogs,
     conclusion,
     summaryTone,
-  } = useWorkflowRuns()
-
-  const {
-    analyzeRunLogs,
-    downloadRunLogs,
-    isLoadingLogs,
-    runJobs,
-    runLogs,
     selectedRunId,
-  } = useWorkflowLogAnalysis({
-    repoInfo,
-    onAnalysisStart: () => setIsAnalyzing(true),
-    onAnalysisComplete: (report) => {
-      if (report) {
-        setAnalysis(report)
-      }
-      setIsAnalyzing(false)
-    },
-  })
-
-  const downloadWorkflowData = () => {
-    if (!runs) return
-
-    const jsonData = JSON.stringify(runs, null, 2)
-    const blob = new Blob([jsonData], { type: 'application/json' })
-    const url = URL.createObjectURL(blob)
-    const anchor = document.createElement('a')
-    anchor.href = url
-    anchor.download = `github-actions-${new Date().toISOString()}.json`
-    document.body.appendChild(anchor)
-    anchor.click()
-    document.body.removeChild(anchor)
-    URL.revokeObjectURL(url)
-    toast.success('Downloaded workflow data')
-  }
-
-  const analyzeWorkflows = async () => {
-    if (!runs || runs.length === 0) {
-      toast.error('No data to analyze')
-      return
-    }
-
-    setIsAnalyzing(true)
-    try {
-      const summary = summarizeWorkflowRuns(runs)
-      const report = formatWorkflowRunAnalysis(summary)
-      setAnalysis(report)
-      toast.success('Analysis complete')
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Analysis failed'
-      toast.error(errorMessage)
-    } finally {
-      setIsAnalyzing(false)
-    }
-  }
-
-  const handleAnalyzeLogs = () => analyzeRunLogs(runs)
-
-  useEffect(() => {
-    if (runLogs && activeTab === 'runs') {
-      setActiveTab('logs')
-    }
-  }, [activeTab, runLogs])
+    runLogs,
+    runJobs,
+    analyzeLogs,
+    analyzeWorkflows,
+    downloadRunLogs,
+    analysis,
+    isAnalyzing,
+    activeTab,
+    setActiveTab,
+  } = useActionsFetcher()
 
   return (
     <Stack spacing={3}>
@@ -134,7 +73,7 @@ export function GitHubActionsFetcher() {
               runLogs={runLogs}
               runJobs={runJobs}
               selectedRunId={selectedRunId}
-              onAnalyzeLogs={handleAnalyzeLogs}
+              onAnalyzeLogs={analyzeLogs}
               isAnalyzing={isAnalyzing}
             />
           </TabsContent>
@@ -145,7 +84,7 @@ export function GitHubActionsFetcher() {
             analysis={analysis}
             isAnalyzing={isAnalyzing}
             runLogs={runLogs}
-            onAnalyzeLogs={handleAnalyzeLogs}
+            onAnalyzeLogs={analyzeLogs}
             onAnalyzeWorkflows={analyzeWorkflows}
           />
         </TabsContent>
diff --git a/frontends/nextjs/src/components/misc/github/views/RunList.tsx b/frontends/nextjs/src/components/misc/github/views/RunList.tsx
index 25b511d03..675400f34 100644
--- a/frontends/nextjs/src/components/misc/github/views/RunList.tsx
+++ b/frontends/nextjs/src/components/misc/github/views/RunList.tsx
@@ -1,14 +1,11 @@
-import { Box, Stack, Typography } from '@mui/material'
+import { Stack } from '@mui/material'
 
-import { CheckCircle as SuccessIcon } from '@mui/icons-material'
+import { Card, CardContent, CardHeader } from '@/components/ui'
 
-import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Skeleton } from '@/components/ui'
-
-import type { WorkflowRun } from '../types'
+import { Filters } from './run-list/Filters'
 import { RefreshControls } from './run-list/RefreshControls'
-import { RunItemCard } from './run-list/RunItemCard'
 import { RunListAlerts } from './run-list/RunListAlerts'
-import { RunListEmptyState } from './run-list/RunListEmptyState'
+import { RunTable } from './run-list/Table'
 import type { RunListProps } from './run-list/run-list.types'
 
 export function RunList({
@@ -39,32 +36,7 @@ export function RunList({
           alignItems={{ xs: 'flex-start', lg: 'center' }}
           justifyContent="space-between"
         >
-          <Stack spacing={1}>
-            <Typography variant="h4" fontWeight={700}>
-              GitHub Actions Monitor
-            </Typography>
-            <Typography color="text.secondary">
-              Repository:{' '}
-              <Box
-                component="code"
-                sx={{
-                  ml: 1,
-                  px: 1,
-                  py: 0.5,
-                  borderRadius: 1,
-                  bgcolor: 'action.hover',
-                  fontSize: '0.875rem',
-                }}
-              >
-                {repoLabel}
-              </Box>
-            </Typography>
-            {lastFetched && (
-              <Typography variant="caption" color="text.secondary">
-                Last fetched: {lastFetched.toLocaleString()}
-              </Typography>
-            )}
-          </Stack>
+          <Filters repoLabel={repoLabel} lastFetched={lastFetched} />
 
           <RefreshControls
             autoRefreshEnabled={autoRefreshEnabled}
@@ -86,57 +58,14 @@ export function RunList({
           summaryTone={summaryTone}
         />
 
-        <Card sx={{ borderWidth: 2, borderColor: 'divider' }}>
-          <CardHeader>
-            <Stack direction="row" spacing={1} alignItems="center" justifyContent="space-between">
-              <Stack direction="row" spacing={1} alignItems="center">
-                <SuccessIcon sx={{ color: 'success.main', fontSize: 24 }} />
-                <CardTitle>Recent Workflow Runs</CardTitle>
-              </Stack>
-              {isLoading && <Skeleton sx={{ width: 120, height: 12 }} />}
-            </Stack>
-            <CardDescription>Latest GitHub Actions runs with status and controls</CardDescription>
-          </CardHeader>
-
-          <CardContent>
-            {isLoading && !runs && (
-              <Stack spacing={2}>
-                <Skeleton sx={{ height: 96 }} />
-                <Skeleton sx={{ height: 96 }} />
-                <Skeleton sx={{ height: 96 }} />
-              </Stack>
-            )}
-
-            {runs && runs.length > 0 ? (
-              <Stack spacing={2}>
-                {runs.map((run: WorkflowRun) => (
-                  <RunItemCard
-                    key={run.id}
-                    run={run}
-                    getStatusColor={getStatusColor}
-                    onDownloadLogs={onDownloadLogs}
-                    isLoadingLogs={isLoadingLogs}
-                    selectedRunId={selectedRunId}
-                  />
-                ))}
-                <Box sx={{ textAlign: 'center', pt: 2 }}>
-                  <Button
-                    variant="outline"
-                    onClick={() => {
-                      if (!runs) return
-                      const jsonData = JSON.stringify(runs, null, 2)
-                      navigator.clipboard.writeText(jsonData)
-                    }}
-                  >
-                    Copy All as JSON
-                  </Button>
-                </Box>
-              </Stack>
-            ) : (
-              <RunListEmptyState isLoading={isLoading} />
-            )}
-          </CardContent>
-        </Card>
+        <RunTable
+          runs={runs}
+          isLoading={isLoading}
+          getStatusColor={getStatusColor}
+          onDownloadLogs={onDownloadLogs}
+          isLoadingLogs={isLoadingLogs}
+          selectedRunId={selectedRunId}
+        />
       </CardContent>
     </Card>
   )
diff --git a/frontends/nextjs/src/components/misc/github/views/run-list/Filters.tsx b/frontends/nextjs/src/components/misc/github/views/run-list/Filters.tsx
new file mode 100644
index 000000000..40fa01bd1
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/github/views/run-list/Filters.tsx
@@ -0,0 +1,34 @@
+import { Box, Stack, Typography } from '@mui/material'
+
+import type { RunListProps } from './run-list.types'
+
+type FiltersProps = Pick<RunListProps, 'repoLabel' | 'lastFetched'>
+
+export const Filters = ({ repoLabel, lastFetched }: FiltersProps) => (
+  <Stack spacing={1}>
+    <Typography variant="h4" fontWeight={700}>
+      GitHub Actions Monitor
+    </Typography>
+    <Typography color="text.secondary">
+      Repository:{' '}
+      <Box
+        component="code"
+        sx={{
+          ml: 1,
+          px: 1,
+          py: 0.5,
+          borderRadius: 1,
+          bgcolor: 'action.hover',
+          fontSize: '0.875rem',
+        }}
+      >
+        {repoLabel}
+      </Box>
+    </Typography>
+    {lastFetched && (
+      <Typography variant="caption" color="text.secondary">
+        Last fetched: {lastFetched.toLocaleString()}
+      </Typography>
+    )}
+  </Stack>
+)
diff --git a/frontends/nextjs/src/components/misc/github/views/run-list/RunItemCard.tsx b/frontends/nextjs/src/components/misc/github/views/run-list/RunRow.tsx
similarity index 92%
rename from frontends/nextjs/src/components/misc/github/views/run-list/RunItemCard.tsx
rename to frontends/nextjs/src/components/misc/github/views/run-list/RunRow.tsx
index 798877a59..6f53fc8fe 100644
--- a/frontends/nextjs/src/components/misc/github/views/run-list/RunItemCard.tsx
+++ b/frontends/nextjs/src/components/misc/github/views/run-list/RunRow.tsx
@@ -7,21 +7,22 @@ import type { WorkflowRun } from '../types'
 import type { RunListProps } from './run-list.types'
 import { spinSx } from './run-list.types'
 
-type RunItemCardProps = Pick<
+type RunRowProps = Pick<
   RunListProps,
   'getStatusColor' | 'onDownloadLogs' | 'isLoadingLogs' | 'selectedRunId'
 > & {
   run: WorkflowRun
 }
 
-export const RunItemCard = ({
+export const RunRow = ({
   run,
   getStatusColor,
   onDownloadLogs,
   isLoadingLogs,
   selectedRunId,
-}: RunItemCardProps) => {
+}: RunRowProps) => {
   const statusIcon = getStatusColor(run.status, run.conclusion)
+  const isSelectedRun = isLoadingLogs && selectedRunId === run.id
 
   return (
     <Card variant="outlined" sx={{ borderColor: 'divider' }}>
@@ -81,14 +82,14 @@ export const RunItemCard = ({
               variant="outline"
               size="sm"
               onClick={() => onDownloadLogs(run.id, run.name)}
-              disabled={isLoadingLogs && selectedRunId === run.id}
+              disabled={isSelectedRun}
               startIcon={
-                isLoadingLogs && selectedRunId === run.id
+                isSelectedRun
                   ? <RunningIcon sx={{ fontSize: 16, ...spinSx }} />
                   : <DownloadIcon sx={{ fontSize: 16 }} />
               }
             >
-              {isLoadingLogs && selectedRunId === run.id ? 'Loading...' : 'Download Logs'}
+              {isSelectedRun ? 'Loading...' : 'Download Logs'}
             </Button>
             <Button
               variant="outline"
diff --git a/frontends/nextjs/src/components/misc/github/views/run-list/Table.tsx b/frontends/nextjs/src/components/misc/github/views/run-list/Table.tsx
new file mode 100644
index 000000000..c72b35e8b
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/github/views/run-list/Table.tsx
@@ -0,0 +1,81 @@
+import { Box, Stack } from '@mui/material'
+import { CheckCircle as SuccessIcon } from '@mui/icons-material'
+
+import { Button, Card, CardContent, CardDescription, CardHeader, CardTitle, Skeleton } from '@/components/ui'
+
+import type { RunListProps } from './run-list.types'
+import { RunListEmptyState } from './RunListEmptyState'
+import { RunRow } from './RunRow'
+
+type RunTableProps = Pick<
+  RunListProps,
+  | 'runs'
+  | 'isLoading'
+  | 'getStatusColor'
+  | 'onDownloadLogs'
+  | 'isLoadingLogs'
+  | 'selectedRunId'
+>
+
+export const RunTable = ({
+  runs,
+  isLoading,
+  getStatusColor,
+  onDownloadLogs,
+  isLoadingLogs,
+  selectedRunId,
+}: RunTableProps) => {
+  const copyRunsToClipboard = () => {
+    if (!runs) return
+
+    const jsonData = JSON.stringify(runs, null, 2)
+    navigator.clipboard.writeText(jsonData)
+  }
+
+  return (
+    <Card sx={{ borderWidth: 2, borderColor: 'divider' }}>
+      <CardHeader>
+        <Stack direction="row" spacing={1} alignItems="center" justifyContent="space-between">
+          <Stack direction="row" spacing={1} alignItems="center">
+            <SuccessIcon sx={{ color: 'success.main', fontSize: 24 }} />
+            <CardTitle>Recent Workflow Runs</CardTitle>
+          </Stack>
+          {isLoading && <Skeleton sx={{ width: 120, height: 12 }} />}
+        </Stack>
+        <CardDescription>Latest GitHub Actions runs with status and controls</CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        {isLoading && !runs && (
+          <Stack spacing={2}>
+            <Skeleton sx={{ height: 96 }} />
+            <Skeleton sx={{ height: 96 }} />
+            <Skeleton sx={{ height: 96 }} />
+          </Stack>
+        )}
+
+        {runs && runs.length > 0 ? (
+          <Stack spacing={2}>
+            {runs.map((run) => (
+              <RunRow
+                key={run.id}
+                run={run}
+                getStatusColor={getStatusColor}
+                onDownloadLogs={onDownloadLogs}
+                isLoadingLogs={isLoadingLogs}
+                selectedRunId={selectedRunId}
+              />
+            ))}
+            <Box sx={{ textAlign: 'center', pt: 2 }}>
+              <Button variant="outline" onClick={copyRunsToClipboard}>
+                Copy All as JSON
+              </Button>
+            </Box>
+          </Stack>
+        ) : (
+          <RunListEmptyState isLoading={isLoading} />
+        )}
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/github/workflows/hooks/useWorkflowRuns.ts b/frontends/nextjs/src/components/misc/github/workflows/hooks/useWorkflowRuns.ts
new file mode 100644
index 000000000..8513558ed
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/github/workflows/hooks/useWorkflowRuns.ts
@@ -0,0 +1,12 @@
+import { useWorkflowRunsApi } from './useWorkflowRunsApi'
+import { useWorkflowRunsSelectors } from './useWorkflowRunsSelectors'
+
+export function useWorkflowRuns() {
+  const api = useWorkflowRunsApi()
+  const selectors = useWorkflowRunsSelectors(api.runs)
+
+  return {
+    ...api,
+    ...selectors,
+  }
+}
diff --git a/frontends/nextjs/src/components/misc/github/hooks/useWorkflowRuns.ts b/frontends/nextjs/src/components/misc/github/workflows/hooks/useWorkflowRunsApi.ts
similarity index 51%
rename from frontends/nextjs/src/components/misc/github/hooks/useWorkflowRuns.ts
rename to frontends/nextjs/src/components/misc/github/workflows/hooks/useWorkflowRunsApi.ts
index 5cf9ede25..a6c7c9568 100644
--- a/frontends/nextjs/src/components/misc/github/hooks/useWorkflowRuns.ts
+++ b/frontends/nextjs/src/components/misc/github/workflows/hooks/useWorkflowRunsApi.ts
@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 
-import { WorkflowRun, RepoInfo } from '../types'
+import { RepoInfo, WorkflowRun } from '../../types'
 
 const DEFAULT_REPO_LABEL = 'johndoe6345789/metabuilder'
 
-export function useWorkflowRuns() {
+export function useWorkflowRunsApi() {
   const [runs, setRuns] = useState<WorkflowRun[] | null>(null)
   const [isLoading, setIsLoading] = useState(false)
   const [error, setError] = useState<string | null>(null)
@@ -15,7 +15,10 @@ export function useWorkflowRuns() {
   const [secondsUntilRefresh, setSecondsUntilRefresh] = useState(30)
   const [autoRefreshEnabled, setAutoRefreshEnabled] = useState(true)
 
-  const repoLabel = repoInfo ? `${repoInfo.owner}/${repoInfo.repo}` : DEFAULT_REPO_LABEL
+  const repoLabel = useMemo(
+    () => (repoInfo ? `${repoInfo.owner}/${repoInfo.repo}` : DEFAULT_REPO_LABEL),
+    [repoInfo],
+  )
 
   const fetchRuns = useCallback(async () => {
     setIsLoading(true)
@@ -86,72 +89,6 @@ export function useWorkflowRuns() {
 
   const toggleAutoRefresh = () => setAutoRefreshEnabled((prev) => !prev)
 
-  const getStatusColor = (status: string, conclusion: string | null) => {
-    if (status === 'completed') {
-      if (conclusion === 'success') return 'success.main'
-      if (conclusion === 'failure') return 'error.main'
-      if (conclusion === 'cancelled') return 'text.secondary'
-    }
-    return 'warning.main'
-  }
-
-  const conclusion = useMemo(() => {
-    if (!runs || runs.length === 0) return null
-
-    const total = runs.length
-    const completed = runs.filter(r => r.status === 'completed').length
-    const successful = runs.filter(r => r.status === 'completed' && r.conclusion === 'success').length
-    const failed = runs.filter(r => r.status === 'completed' && r.conclusion === 'failure').length
-    const cancelled = runs.filter(r => r.status === 'completed' && r.conclusion === 'cancelled').length
-    const inProgress = runs.filter(r => r.status !== 'completed').length
-
-    const mostRecent = runs[0]
-    const mostRecentTimestamp = new Date(mostRecent.updated_at).getTime()
-    const timeThreshold = 5 * 60 * 1000
-    const recentWorkflows = runs.filter((run) => {
-      const runTimestamp = new Date(run.updated_at).getTime()
-      return mostRecentTimestamp - runTimestamp <= timeThreshold
-    })
-
-    const mostRecentPassed = recentWorkflows.every(
-      (run) => run.status === 'completed' && run.conclusion === 'success',
-    )
-    const mostRecentFailed = recentWorkflows.some(
-      (run) => run.status === 'completed' && run.conclusion === 'failure',
-    )
-    const mostRecentRunning = recentWorkflows.some((run) => run.status !== 'completed')
-
-    const successRate = total > 0 ? Math.round((successful / total) * 100) : 0
-    let health: 'healthy' | 'warning' | 'critical' = 'healthy'
-    if (failed / total > 0.3 || successRate < 60) {
-      health = 'critical'
-    } else if (failed > 0 || inProgress > 0) {
-      health = 'warning'
-    }
-
-    return {
-      total,
-      completed,
-      successful,
-      failed,
-      cancelled,
-      inProgress,
-      successRate,
-      health,
-      recentWorkflows,
-      mostRecentPassed,
-      mostRecentFailed,
-      mostRecentRunning,
-    }
-  }, [runs])
-
-  const summaryTone = useMemo(() => {
-    if (!conclusion) return 'warning'
-    if (conclusion.mostRecentPassed) return 'success'
-    if (conclusion.mostRecentFailed) return 'error'
-    return 'warning'
-  }, [conclusion])
-
   return {
     runs,
     isLoading,
@@ -164,8 +101,5 @@ export function useWorkflowRuns() {
     autoRefreshEnabled,
     toggleAutoRefresh,
     fetchRuns,
-    getStatusColor,
-    conclusion,
-    summaryTone,
   }
 }
diff --git a/frontends/nextjs/src/components/misc/github/workflows/hooks/useWorkflowRunsSelectors.ts b/frontends/nextjs/src/components/misc/github/workflows/hooks/useWorkflowRunsSelectors.ts
new file mode 100644
index 000000000..388caf9cd
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/github/workflows/hooks/useWorkflowRunsSelectors.ts
@@ -0,0 +1,97 @@
+import { useCallback, useMemo } from 'react'
+
+import { WorkflowRun } from '../../types'
+
+const TIME_THRESHOLD_MS = 5 * 60 * 1000
+
+type PipelineHealth = 'healthy' | 'warning' | 'critical'
+
+type PipelineSummary = {
+  total: number
+  completed: number
+  successful: number
+  failed: number
+  cancelled: number
+  inProgress: number
+  successRate: number
+  health: PipelineHealth
+  recentWorkflows: WorkflowRun[]
+  mostRecentPassed: boolean
+  mostRecentFailed: boolean
+  mostRecentRunning: boolean
+}
+
+type SummaryTone = 'success' | 'error' | 'warning'
+
+export const useWorkflowRunsSelectors = (runs: WorkflowRun[] | null) => {
+  const getStatusColor = useCallback((status: string, conclusion: string | null) => {
+    if (status === 'completed') {
+      if (conclusion === 'success') return 'success.main'
+      if (conclusion === 'failure') return 'error.main'
+      if (conclusion === 'cancelled') return 'text.secondary'
+    }
+    return 'warning.main'
+  }, [])
+
+  const conclusion = useMemo<PipelineSummary | null>(() => {
+    if (!runs || runs.length === 0) return null
+
+    const total = runs.length
+    const completed = runs.filter(r => r.status === 'completed').length
+    const successful = runs.filter(r => r.status === 'completed' && r.conclusion === 'success').length
+    const failed = runs.filter(r => r.status === 'completed' && r.conclusion === 'failure').length
+    const cancelled = runs.filter(r => r.status === 'completed' && r.conclusion === 'cancelled').length
+    const inProgress = runs.filter(r => r.status !== 'completed').length
+
+    const mostRecent = runs[0]
+    const mostRecentTimestamp = new Date(mostRecent.updated_at).getTime()
+    const recentWorkflows = runs.filter((run) => {
+      const runTimestamp = new Date(run.updated_at).getTime()
+      return mostRecentTimestamp - runTimestamp <= TIME_THRESHOLD_MS
+    })
+
+    const mostRecentPassed = recentWorkflows.every(
+      (run) => run.status === 'completed' && run.conclusion === 'success',
+    )
+    const mostRecentFailed = recentWorkflows.some(
+      (run) => run.status === 'completed' && run.conclusion === 'failure',
+    )
+    const mostRecentRunning = recentWorkflows.some((run) => run.status !== 'completed')
+
+    const successRate = total > 0 ? Math.round((successful / total) * 100) : 0
+    let health: PipelineHealth = 'healthy'
+    if (failed / total > 0.3 || successRate < 60) {
+      health = 'critical'
+    } else if (failed > 0 || inProgress > 0) {
+      health = 'warning'
+    }
+
+    return {
+      total,
+      completed,
+      successful,
+      failed,
+      cancelled,
+      inProgress,
+      successRate,
+      health,
+      recentWorkflows,
+      mostRecentPassed,
+      mostRecentFailed,
+      mostRecentRunning,
+    }
+  }, [runs])
+
+  const summaryTone = useMemo<SummaryTone>(() => {
+    if (!conclusion) return 'warning'
+    if (conclusion.mostRecentPassed) return 'success'
+    if (conclusion.mostRecentFailed) return 'error'
+    return 'warning'
+  }, [conclusion])
+
+  return {
+    getStatusColor,
+    conclusion,
+    summaryTone,
+  }
+}
diff --git a/frontends/nextjs/src/components/misc/github/workflows/useActionsFetcher.ts b/frontends/nextjs/src/components/misc/github/workflows/useActionsFetcher.ts
new file mode 100644
index 000000000..2edae04af
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/github/workflows/useActionsFetcher.ts
@@ -0,0 +1,84 @@
+import { useCallback, useEffect, useState } from 'react'
+import { toast } from 'sonner'
+
+import { formatWorkflowRunAnalysis, summarizeWorkflowRuns } from '@/lib/github/analyze-workflow-runs'
+
+import { useWorkflowLogAnalysis } from '../hooks/useWorkflowLogAnalysis'
+import { useWorkflowRuns } from './hooks/useWorkflowRuns'
+
+export function useActionsFetcher() {
+  const [analysis, setAnalysis] = useState<string | null>(null)
+  const [isAnalyzing, setIsAnalyzing] = useState(false)
+  const [activeTab, setActiveTab] = useState<'runs' | 'logs' | 'analysis'>('runs')
+
+  const workflowRuns = useWorkflowRuns()
+
+  const workflowLogAnalysis = useWorkflowLogAnalysis({
+    repoInfo: workflowRuns.repoInfo,
+    onAnalysisStart: () => setIsAnalyzing(true),
+    onAnalysisComplete: (report) => {
+      if (report) {
+        setAnalysis(report)
+      }
+      setIsAnalyzing(false)
+    },
+  })
+
+  const downloadWorkflowData = useCallback(() => {
+    if (!workflowRuns.runs) return
+
+    const jsonData = JSON.stringify(workflowRuns.runs, null, 2)
+    const blob = new Blob([jsonData], { type: 'application/json' })
+    const url = URL.createObjectURL(blob)
+    const anchor = document.createElement('a')
+    anchor.href = url
+    anchor.download = `github-actions-${new Date().toISOString()}.json`
+    document.body.appendChild(anchor)
+    anchor.click()
+    document.body.removeChild(anchor)
+    URL.revokeObjectURL(url)
+    toast.success('Downloaded workflow data')
+  }, [workflowRuns.runs])
+
+  const analyzeWorkflows = useCallback(async () => {
+    if (!workflowRuns.runs || workflowRuns.runs.length === 0) {
+      toast.error('No data to analyze')
+      return
+    }
+
+    setIsAnalyzing(true)
+    try {
+      const summary = summarizeWorkflowRuns(workflowRuns.runs)
+      const report = formatWorkflowRunAnalysis(summary)
+      setAnalysis(report)
+      toast.success('Analysis complete')
+    } catch (err) {
+      const errorMessage = err instanceof Error ? err.message : 'Analysis failed'
+      toast.error(errorMessage)
+    } finally {
+      setIsAnalyzing(false)
+    }
+  }, [workflowRuns.runs])
+
+  const analyzeLogs = useCallback(() => {
+    workflowLogAnalysis.analyzeRunLogs(workflowRuns.runs)
+  }, [workflowLogAnalysis, workflowRuns.runs])
+
+  useEffect(() => {
+    if (workflowLogAnalysis.runLogs && activeTab === 'runs') {
+      setActiveTab('logs')
+    }
+  }, [activeTab, workflowLogAnalysis.runLogs])
+
+  return {
+    ...workflowRuns,
+    ...workflowLogAnalysis,
+    analysis,
+    isAnalyzing,
+    activeTab,
+    setActiveTab,
+    analyzeLogs,
+    analyzeWorkflows,
+    downloadWorkflowData,
+  }
+}
diff --git a/frontends/nextjs/src/components/misc/viewers/audit-log/Filters.tsx b/frontends/nextjs/src/components/misc/viewers/audit-log/Filters.tsx
new file mode 100644
index 000000000..7dc47373d
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/viewers/audit-log/Filters.tsx
@@ -0,0 +1,188 @@
+import { useMemo } from 'react'
+import { Badge, Button, Input, Label, Switch, ToggleGroup, ToggleGroupItem } from '@/components/ui'
+import type { OperationType, ResourceType } from '@/lib/security/secure-db/types'
+import { FunnelSimple, MagnifyingGlass, X } from '@phosphor-icons/react'
+
+interface AuditLogFiltersProps {
+  searchTerm: string
+  onSearchChange: (value: string) => void
+  selectedOperations: OperationType[]
+  onOperationsChange: (operations: OperationType[]) => void
+  selectedResources: ResourceType[]
+  onResourcesChange: (resources: ResourceType[]) => void
+  showFailuresOnly: boolean
+  onShowFailuresChange: (value: boolean) => void
+  availableOperations?: OperationType[]
+  availableResources?: ResourceType[]
+  onReset?: () => void
+}
+
+const DEFAULT_OPERATIONS: OperationType[] = ['CREATE', 'READ', 'UPDATE', 'DELETE']
+const DEFAULT_RESOURCES: ResourceType[] = [
+  'user',
+  'workflow',
+  'luaScript',
+  'pageConfig',
+  'modelSchema',
+  'comment',
+  'componentNode',
+  'componentConfig',
+  'cssCategory',
+  'dropdownConfig',
+  'tenant',
+  'powerTransfer',
+  'smtpConfig',
+  'credential'
+]
+
+export function AuditLogFilters({
+  searchTerm,
+  onSearchChange,
+  selectedOperations,
+  onOperationsChange,
+  selectedResources,
+  onResourcesChange,
+  showFailuresOnly,
+  onShowFailuresChange,
+  availableOperations,
+  availableResources,
+  onReset
+}: AuditLogFiltersProps) {
+  const operationOptions = availableOperations || DEFAULT_OPERATIONS
+  const resourceOptions = useMemo(
+    () => availableResources || DEFAULT_RESOURCES,
+    [availableResources]
+  )
+
+  return (
+    <div className="space-y-4 rounded-lg border bg-card p-4 shadow-sm">
+      <div className="flex items-center gap-2 text-muted-foreground">
+        <FunnelSimple weight="bold" />
+        <span className="text-sm font-medium">Filters</span>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="space-y-2">
+          <Label htmlFor="audit-log-search">Search</Label>
+          <div className="relative">
+            <MagnifyingGlass className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              id="audit-log-search"
+              placeholder="Search by user, resource, or error message"
+              value={searchTerm}
+              onChange={(event) => onSearchChange(event.target.value)}
+              className="pl-9"
+            />
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between rounded-md bg-muted/40 px-3 py-2">
+          <div className="space-y-1">
+            <Label htmlFor="audit-log-failures">Failures only</Label>
+            <p className="text-xs text-muted-foreground">Show only unsuccessful operations</p>
+          </div>
+          <Switch
+            id="audit-log-failures"
+            checked={showFailuresOnly}
+            onCheckedChange={onShowFailuresChange}
+          />
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-2">
+        <div className="space-y-2">
+          <Label>Operations</Label>
+          <ToggleGroup
+            type="multiple"
+            value={selectedOperations}
+            onValueChange={(value) => onOperationsChange(value as OperationType[])}
+            className="flex flex-wrap gap-2"
+          >
+            {operationOptions.map((operation) => (
+              <ToggleGroupItem
+                key={operation}
+                value={operation}
+                className="data-[state=on]:bg-primary data-[state=on]:text-primary-foreground"
+              >
+                {operation}
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex items-center justify-between">
+            <Label>Resources</Label>
+            <span className="text-xs text-muted-foreground">Select one or more</span>
+          </div>
+          <div className="flex flex-wrap gap-2">
+            {resourceOptions.map((resource) => {
+              const isSelected = selectedResources.includes(resource)
+              return (
+                <Button
+                  key={resource}
+                  variant={isSelected ? 'default' : 'outline'}
+                  size="sm"
+                  onClick={() =>
+                    onResourcesChange(
+                      isSelected
+                        ? selectedResources.filter((value) => value !== resource)
+                        : [...selectedResources, resource]
+                    )
+                  }
+                  className="rounded-full"
+                >
+                  <Badge
+                    variant={isSelected ? 'default' : 'secondary'}
+                    className="pointer-events-none bg-transparent px-0 text-xs capitalize"
+                  >
+                    {resource}
+                  </Badge>
+                </Button>
+              )
+            })}
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+          {selectedOperations.length > 0 && (
+            <Badge variant="outline" className="gap-1">
+              <span className="font-medium">Operations:</span>
+              <span>{selectedOperations.join(', ')}</span>
+            </Badge>
+          )}
+          {selectedResources.length > 0 && (
+            <Badge variant="outline" className="gap-1">
+              <span className="font-medium">Resources:</span>
+              <span>{selectedResources.join(', ')}</span>
+            </Badge>
+          )}
+          {showFailuresOnly && (
+            <Badge variant="destructive" className="gap-1">
+              <WarningIcon />
+              Failures
+            </Badge>
+          )}
+          {selectedOperations.length === 0 &&
+            selectedResources.length === 0 &&
+            !showFailuresOnly && (
+              <span>No filters applied</span>
+            )}
+        </div>
+
+        {onReset && (
+          <Button variant="ghost" size="sm" onClick={onReset} className="ml-auto gap-1">
+            <X className="h-4 w-4" />
+            Clear all
+          </Button>
+        )}
+      </div>
+    </div>
+  )
+}
+
+function WarningIcon() {
+  return <span className="inline-block h-3 w-3 rounded-full bg-destructive" />
+}
diff --git a/frontends/nextjs/src/components/misc/viewers/audit-log/LogTable.tsx b/frontends/nextjs/src/components/misc/viewers/audit-log/LogTable.tsx
new file mode 100644
index 000000000..21cbbdae7
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/viewers/audit-log/LogTable.tsx
@@ -0,0 +1,124 @@
+import { Badge, Card, CardContent, CardHeader, CardTitle, ScrollArea, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui'
+import type { AuditLog, OperationType, ResourceType } from '@/lib/security/secure-db/types'
+import { ArrowDown, ArrowUp, ShieldCheck, User as UserIcon, WarningCircle } from '@phosphor-icons/react'
+
+interface LogTableProps {
+  logs: AuditLog[]
+  sortField?: keyof AuditLog | null
+  sortDirection?: 'asc' | 'desc'
+  onSortChange?: (field: keyof AuditLog) => void
+}
+
+const OPERATION_COLORS: Record<OperationType, string> = {
+  CREATE: 'bg-green-100 text-green-800',
+  READ: 'bg-blue-100 text-blue-800',
+  UPDATE: 'bg-yellow-100 text-yellow-800',
+  DELETE: 'bg-red-100 text-red-800'
+}
+
+const RESOURCE_ICONS: Partial<Record<ResourceType, JSX.Element>> = {
+  user: <UserIcon className="h-4 w-4" weight="bold" />,
+  credential: <ShieldCheck className="h-4 w-4" weight="bold" />
+}
+
+export function LogTable({ logs, sortField, sortDirection = 'asc', onSortChange }: LogTableProps) {
+  const handleSort = (field: keyof AuditLog) => {
+    onSortChange?.(field)
+  }
+
+  return (
+    <Card className="overflow-hidden">
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 border-b bg-muted/40 py-3">
+        <CardTitle className="text-base font-semibold">Audit Log</CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <ScrollArea className="h-[480px]">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-muted/30">
+                <SortableHeader
+                  field="timestamp"
+                  label="Timestamp"
+                  sortField={sortField}
+                  sortDirection={sortDirection}
+                  onSort={handleSort}
+                />
+                <TableHead>User</TableHead>
+                <TableHead>Operation</TableHead>
+                <TableHead>Resource</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Details</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {logs.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={6} className="py-12 text-center text-muted-foreground">
+                    No audit events to display
+                  </TableCell>
+                </TableRow>
+              ) : (
+                logs.map((log) => (
+                  <TableRow key={log.id} className="hover:bg-muted/20">
+                    <TableCell className="text-sm text-muted-foreground">
+                      {new Date(log.timestamp).toLocaleString()}
+                    </TableCell>
+                    <TableCell className="font-medium">{log.username}</TableCell>
+                    <TableCell>
+                      <Badge className={OPERATION_COLORS[log.operation]}>{log.operation}</Badge>
+                    </TableCell>
+                    <TableCell className="flex items-center gap-2">
+                      {RESOURCE_ICONS[log.resource] || <ShieldCheck className="h-4 w-4 text-muted-foreground" />}
+                      <span className="capitalize">{log.resource}</span>
+                    </TableCell>
+                    <TableCell>
+                      {log.success ? (
+                        <Badge variant="outline" className="border-green-200 text-green-700">
+                          <ShieldCheck className="mr-1 h-4 w-4" />
+                          Success
+                        </Badge>
+                      ) : (
+                        <Badge variant="destructive" className="gap-1">
+                          <WarningCircle className="h-4 w-4" />
+                          Failed
+                        </Badge>
+                      )}
+                    </TableCell>
+                    <TableCell className="text-sm text-muted-foreground">
+                      {log.errorMessage || '—'}
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </ScrollArea>
+      </CardContent>
+    </Card>
+  )
+}
+
+interface SortableHeaderProps {
+  field: keyof AuditLog
+  label: string
+  sortField?: keyof AuditLog | null
+  sortDirection?: 'asc' | 'desc'
+  onSort?: (field: keyof AuditLog) => void
+}
+
+function SortableHeader({ field, label, sortField, sortDirection = 'asc', onSort }: SortableHeaderProps) {
+  const isActive = sortField === field
+  const Icon = sortDirection === 'asc' ? ArrowUp : ArrowDown
+
+  return (
+    <TableHead
+      className="cursor-pointer select-none"
+      onClick={() => onSort?.(field)}
+    >
+      <div className="flex items-center gap-2">
+        {label}
+        {isActive && <Icon className="h-3.5 w-3.5" />}
+      </div>
+    </TableHead>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/viewers/model-list/DetailsDrawer.tsx b/frontends/nextjs/src/components/misc/viewers/model-list/DetailsDrawer.tsx
new file mode 100644
index 000000000..07bc37865
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/viewers/model-list/DetailsDrawer.tsx
@@ -0,0 +1,73 @@
+import { Badge, Button, ScrollArea, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from '@/components/ui'
+import type { ModelSchema } from '@/lib/schema-types'
+import { getFieldLabel } from '@/lib/schema-utils'
+
+interface DetailsDrawerProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  record: any | null
+  model: ModelSchema
+}
+
+export function DetailsDrawer({ open, onOpenChange, record, model }: DetailsDrawerProps) {
+  const renderValue = (fieldName: string) => {
+    const field = model.fields.find((item) => item.name === fieldName)
+    if (!field) return null
+    const value = record?.[fieldName]
+
+    if (value === null || value === undefined || value === '') {
+      return <span className="text-muted-foreground">Not provided</span>
+    }
+
+    switch (field.type) {
+      case 'boolean':
+        return value ? (
+          <Badge variant="outline" className="bg-emerald-50 text-emerald-700">
+            Yes
+          </Badge>
+        ) : (
+          <Badge variant="secondary">No</Badge>
+        )
+      case 'date':
+      case 'datetime':
+        return new Date(value).toLocaleString()
+      case 'json':
+        return <pre className="whitespace-pre-wrap rounded-md bg-muted/60 p-3 text-xs">{JSON.stringify(value, null, 2)}</pre>
+      default:
+        return <span className="font-medium text-foreground">{String(value)}</span>
+    }
+  }
+
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-xl">
+        <SheetHeader>
+          <SheetTitle>{model.label || model.name} details</SheetTitle>
+          <SheetDescription>Review the full record and its attributes.</SheetDescription>
+        </SheetHeader>
+
+        <Separator className="my-4" />
+
+        <ScrollArea className="h-[70vh] pr-4">
+          <div className="space-y-4">
+            {model.fields.map((field) => (
+              <div key={field.name} className="rounded-lg border bg-muted/40 p-3">
+                <p className="text-xs uppercase text-muted-foreground">{getFieldLabel(field)}</p>
+                <div className="mt-1 text-sm">{renderValue(field.name)}</div>
+                {field.helpText && (
+                  <p className="mt-1 text-xs text-muted-foreground">{field.helpText}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        </ScrollArea>
+
+        <SheetFooter className="mt-6">
+          <SheetClose asChild>
+            <Button variant="outline" className="w-full sm:w-auto">Close</Button>
+          </SheetClose>
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/viewers/model-list/ModelFilters.tsx b/frontends/nextjs/src/components/misc/viewers/model-list/ModelFilters.tsx
new file mode 100644
index 000000000..465f5605d
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/viewers/model-list/ModelFilters.tsx
@@ -0,0 +1,82 @@
+import { Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui'
+import type { FieldSchema, ModelSchema } from '@/lib/schema-types'
+import { MagnifyingGlass } from '@phosphor-icons/react'
+
+interface ModelFiltersProps {
+  model: ModelSchema
+  filters: Record<string, any>
+  searchTerm: string
+  onSearchChange: (value: string) => void
+  onFilterChange: (field: string, value: any) => void
+}
+
+function getFilterableFields(model: ModelSchema): FieldSchema[] {
+  if (model.listFilter) {
+    return model.fields.filter((field) => model.listFilter?.includes(field.name))
+  }
+  return model.fields.filter((field) => field.type === 'select' || field.type === 'boolean')
+}
+
+export function ModelFilters({ model, filters, searchTerm, onSearchChange, onFilterChange }: ModelFiltersProps) {
+  const filterFields = getFilterableFields(model)
+
+  return (
+    <div className="space-y-3 rounded-lg border bg-card p-4 shadow-sm">
+      <div className="space-y-2">
+        <Label htmlFor="model-search">Search</Label>
+        <div className="relative">
+          <MagnifyingGlass className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            id="model-search"
+            placeholder={`Search ${model.labelPlural || model.name}`}
+            value={searchTerm}
+            onChange={(event) => onSearchChange(event.target.value)}
+            className="pl-9"
+          />
+        </div>
+      </div>
+
+      {filterFields.length > 0 && (
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
+          {filterFields.map((field) => (
+            <div key={field.name} className="space-y-1.5">
+              <Label>{field.label || field.name}</Label>
+              {field.type === 'select' ? (
+                <Select
+                  value={filters[field.name] ?? '__all__'}
+                  onValueChange={(value) => onFilterChange(field.name, value === '__all__' ? null : value)}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder={field.label || field.name} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__all__">All</SelectItem>
+                    {field.choices?.map((choice) => (
+                      <SelectItem key={choice.value} value={choice.value}>
+                        {choice.label || choice.value}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              ) : (
+                <Select
+                  value={filters[field.name] === true ? 'true' : filters[field.name] === false ? 'false' : '__all__'}
+                  onValueChange={(value) => onFilterChange(field.name, value === 'true' ? true : value === 'false' ? false : null)}
+                >
+                  <SelectTrigger>
+                    <SelectValue placeholder={field.label || field.name} />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="__all__">All</SelectItem>
+                    <SelectItem value="true">Yes</SelectItem>
+                    <SelectItem value="false">No</SelectItem>
+                  </SelectContent>
+                </Select>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/misc/viewers/model-list/ModelTable.tsx b/frontends/nextjs/src/components/misc/viewers/model-list/ModelTable.tsx
new file mode 100644
index 000000000..8ecf94a36
--- /dev/null
+++ b/frontends/nextjs/src/components/misc/viewers/model-list/ModelTable.tsx
@@ -0,0 +1,148 @@
+import { Badge, Button, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui'
+import type { FieldSchema, ModelSchema } from '@/lib/schema-types'
+import { getFieldLabel } from '@/lib/schema-utils'
+import { ArrowDown, ArrowUp, Pencil, Trash } from '@phosphor-icons/react'
+import { ReactNode } from 'react'
+
+interface ModelTableProps {
+  model: ModelSchema
+  records: any[]
+  displayFields: string[]
+  sortField?: string | null
+  sortDirection?: 'asc' | 'desc'
+  onSortChange?: (field: string) => void
+  onEdit?: (record: any) => void
+  onDelete?: (id: string) => void
+  onRowClick?: (record: any) => void
+  renderRelationValue?: (value: string, field: FieldSchema) => ReactNode
+}
+
+export function ModelTable({
+  model,
+  records,
+  displayFields,
+  sortField,
+  sortDirection = 'asc',
+  onSortChange,
+  onEdit,
+  onDelete,
+  onRowClick,
+  renderRelationValue
+}: ModelTableProps) {
+  const actionColumns = onEdit || onDelete ? 1 : 0
+
+  const renderCellValue = (record: any, fieldName: string) => {
+    const field = model.fields.find((item) => item.name === fieldName)
+    if (!field) return null
+
+    const value = record[fieldName]
+
+    if (value === null || value === undefined) {
+      return <span className="text-muted-foreground">—</span>
+    }
+
+    if (field.type === 'relation' && typeof value === 'string' && renderRelationValue) {
+      return renderRelationValue(value, field)
+    }
+
+    switch (field.type) {
+      case 'boolean':
+        return value ? <Badge variant="outline">Yes</Badge> : <Badge variant="secondary">No</Badge>
+      case 'date':
+      case 'datetime':
+        return new Date(value).toLocaleString()
+      case 'json':
+        return <code className="text-xs">{JSON.stringify(value)}</code>
+      default:
+        return typeof value === 'string' && value.length > 60 ? `${value.slice(0, 60)}…` : String(value)
+    }
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border">
+      <Table>
+        <TableHeader>
+          <TableRow className="bg-muted/50">
+            {displayFields.map((fieldName) => {
+              const field = model.fields.find((item) => item.name === fieldName)
+              if (!field) return null
+              const isSortable = field.sortable !== false
+              const isActive = sortField === fieldName
+              const Icon = sortDirection === 'asc' ? ArrowUp : ArrowDown
+
+              return (
+                <TableHead
+                  key={fieldName}
+                  className={isSortable ? 'cursor-pointer select-none' : undefined}
+                  onClick={() => isSortable && onSortChange?.(fieldName)}
+                >
+                  <div className="flex items-center gap-2">
+                    <span className="uppercase text-xs font-semibold tracking-wide">
+                      {getFieldLabel(field)}
+                    </span>
+                    {isSortable && isActive && <Icon className="h-3.5 w-3.5" />}
+                  </div>
+                </TableHead>
+              )
+            })}
+            {(onEdit || onDelete) && <TableHead className="w-24">Actions</TableHead>}
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {records.length === 0 ? (
+            <TableRow>
+              <TableCell colSpan={displayFields.length + actionColumns} className="py-10 text-center text-muted-foreground">
+                No records to display
+              </TableCell>
+            </TableRow>
+          ) : (
+            records.map((record) => (
+              <TableRow
+                key={record.id}
+                className="hover:bg-muted/30"
+                onClick={() => onRowClick?.(record)}
+              >
+                {displayFields.map((fieldName) => (
+                  <TableCell key={fieldName} className="py-3">
+                    {renderCellValue(record, fieldName)}
+                  </TableCell>
+                ))}
+                {(onEdit || onDelete) && (
+                  <TableCell>
+                    <div className="flex gap-2">
+                      {onEdit && (
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          onClick={(event) => {
+                            event.stopPropagation()
+                            onEdit(record)
+                          }}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                      )}
+                      {onDelete && (
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+                          onClick={(event) => {
+                            event.stopPropagation()
+                            onDelete(record.id)
+                          }}
+                        >
+                          <Trash className="h-4 w-4" />
+                        </Button>
+                      )}
+                    </div>
+                  </TableCell>
+                )}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE.tsx b/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE.tsx
index ea2e93964..9b5505273 100644
--- a/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE.tsx
+++ b/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE.tsx
@@ -1,246 +1,58 @@
-import { useEffect, useMemo, useState } from 'react'
-import { Card, CardContent } from '@/components/ui'
 import { toast } from 'sonner'
-import { useKV } from '@github/spark/hooks'
-import type { FileNode } from '@/lib/nerd-mode-ide'
-import {
-  appendExportPath,
-  buildZipFromFileTree,
-  fileTreeOperations,
-  getPackageTemplateById,
-  getPackageTemplates,
-} from '@/lib/nerd-mode-ide'
+import { Card, CardContent } from '@/components/ui'
 import { GitConfigDialog } from '../dialogs/GitConfigDialog'
-import { NerdModeEditorPanel } from '../panels/NerdModeEditorPanel'
-import { NerdModeIDEFileExplorer } from '../components/NerdModeIDEFileExplorer'
 import { NerdModeIDEHeader } from '../components/NerdModeIDEHeader'
 import { NewItemDialog } from '../dialogs/NewItemDialog'
 import { TemplateDialog } from '../dialogs/TemplateDialog'
-import type { GitConfig, TestResult } from './types'
+import { EditorPane } from './NerdModeIDE/EditorPane'
+import { Sidebar } from './NerdModeIDE/Sidebar'
+import { useNerdIdeState } from './NerdModeIDE/useNerdIdeState'
 
 interface NerdModeIDEProps {
   className?: string
 }
 
 export function NerdModeIDE({ className }: NerdModeIDEProps) {
-  const templates = useMemo(() => getPackageTemplates(), [])
-  const defaultTemplate = templates[0]
-
-  const [fileTree, setFileTree] = useKV<FileNode[]>('nerd-mode-file-tree', defaultTemplate.tree)
-  const [workspaceName, setWorkspaceName] = useKV<string>('nerd-mode-workspace', defaultTemplate.rootName)
-  const [selectedFileId, setSelectedFileId] = useState<string | null>(null)
-  const [activeFolderId, setActiveFolderId] = useState<string | null>(fileTree?.[0]?.id ?? null)
-  const [fileContent, setFileContent] = useState('')
-  const [gitConfig, setGitConfig] = useKV<GitConfig | null>('nerd-mode-git-config', null)
-  const [showGitDialog, setShowGitDialog] = useState(false)
-  const [showNewItemDialog, setShowNewItemDialog] = useState(false)
-  const [showTemplateDialog, setShowTemplateDialog] = useState(false)
-  const [newItemName, setNewItemName] = useState('')
-  const [newItemType, setNewItemType] = useState<'file' | 'folder'>('file')
-  const [testResults, setTestResults] = useState<TestResult[]>([])
-  const [consoleOutput, setConsoleOutput] = useState<string[]>([])
-  const [isRunning, setIsRunning] = useState(false)
-  const [gitCommitMessage, setGitCommitMessage] = useState('')
-
-  const selectedFile = useMemo(() => {
-    if (!fileTree || !selectedFileId) return null
-    return fileTreeOperations.findNodeById(fileTree, selectedFileId)
-  }, [fileTree, selectedFileId])
-
-  useEffect(() => {
-    if (!fileTree) return
-    if (!selectedFileId) {
-      const firstFile = fileTreeOperations.findFirstFile(fileTree)
-      if (firstFile) {
-        setSelectedFileId(firstFile.id)
-      }
-      return
-    }
-
-    const fileNode = fileTreeOperations.findNodeById(fileTree, selectedFileId)
-    if (fileNode?.type === 'file') {
-      setFileContent(fileNode.content ?? '')
-    }
-  }, [fileTree, selectedFileId])
-
-  const handleToggleFolder = (nodeId: string) => {
-    if (!fileTree) return
-    const node = fileTreeOperations.findNodeById(fileTree, nodeId)
-    if (node?.type === 'folder') {
-      setFileTree(fileTreeOperations.updateNode(fileTree, nodeId, { expanded: !node.expanded }))
-    }
-  }
-
-  const handleSaveFile = () => {
-    if (!fileTree || !selectedFileId) return
-    setFileTree(fileTreeOperations.updateNode(fileTree, selectedFileId, { content: fileContent }))
-    toast.success(`Saved ${selectedFile?.name || 'file'}`)
-  }
-
-  const handleDeleteFile = () => {
-    if (!fileTree || !selectedFileId) return
-    setFileTree(fileTreeOperations.deleteNode(fileTree, selectedFileId))
-    setSelectedFileId(null)
-    setFileContent('')
-    toast.success(`Deleted ${selectedFile?.name || 'file'}`)
-  }
-
-  const handleCreateItem = () => {
-    if (!newItemName.trim() || !fileTree) {
-      toast.error('Please enter a name')
-      return
-    }
-
-    const parentNode = activeFolderId
-      ? fileTreeOperations.findNodeById(fileTree, activeFolderId)
-      : null
-
-    const exportPath = parentNode?.exportPath
-      ? appendExportPath(parentNode.exportPath, newItemName)
-      : undefined
-
-    const newNode = newItemType === 'file'
-      ? fileTreeOperations.createFileNode({ name: newItemName, exportPath })
-      : fileTreeOperations.createFolderNode({ name: newItemName, exportPath, expanded: true })
-
-    setFileTree(fileTreeOperations.appendNode(fileTree, activeFolderId, newNode))
-    setNewItemName('')
-    setShowNewItemDialog(false)
-
-    if (newNode.type === 'file') {
-      setSelectedFileId(newNode.id)
-      setFileContent(newNode.content ?? '')
-    }
-
-    toast.success(`Created ${newNode.name}`)
-  }
-
-  const handleRunCode = () => {
-    setIsRunning(true)
-    setConsoleOutput((current) => [...current, `> Running ${selectedFile?.name || 'code'}...`])
-
-    setTimeout(() => {
-      setConsoleOutput((current) => [
-        ...current,
-        'OK Code executed successfully',
-        '> Output: Hello from MetaBuilder IDE!',
-      ])
-      setIsRunning(false)
-      toast.success('Code executed')
-    }, 1000)
-  }
-
-  const handleRunTests = () => {
-    setConsoleOutput((current) => [...current, '> Running test suite...'])
-
-    const mockTests: TestResult[] = [
-      { name: 'Feed component renders', status: 'passed', duration: 45 },
-      { name: 'Package export bundles files', status: 'passed', duration: 123 },
-      { name: 'Lua manifest loads', status: 'passed', duration: 234 },
-      { name: 'Permissions hook', status: 'passed', duration: 67 },
-    ]
-
-    setTimeout(() => {
-      setTestResults(mockTests)
-      setConsoleOutput((current) => [
-        ...current,
-        `OK ${mockTests.filter((test) => test.status === 'passed').length} tests passed`,
-        `FAIL ${mockTests.filter((test) => test.status === 'failed').length} tests failed`,
-      ])
-      toast.success('Tests completed')
-    }, 1500)
-  }
-
-  const handleGitPush = () => {
-    if (!gitConfig) {
-      toast.error('Please configure Git first')
-      setShowGitDialog(true)
-      return
-    }
-
-    if (!gitCommitMessage.trim()) {
-      toast.error('Please enter a commit message')
-      return
-    }
-
-    setConsoleOutput((current) => [
-      ...current,
-      `> git add .`,
-      `> git commit -m "${gitCommitMessage}"`,
-      `> git push origin ${gitConfig.branch}`,
-    ])
-
-    setTimeout(() => {
-      setConsoleOutput((current) => [
-        ...current,
-        `OK Pushed to ${gitConfig.provider} (${gitConfig.repoUrl})`,
-      ])
-      setGitCommitMessage('')
-      toast.success('Changes pushed to repository')
-    }, 1000)
-  }
-
-  const handleGitPull = () => {
-    if (!gitConfig) {
-      toast.error('Please configure Git first')
-      setShowGitDialog(true)
-      return
-    }
-
-    setConsoleOutput((current) => [...current, `> git pull origin ${gitConfig.branch}`])
-
-    setTimeout(() => {
-      setConsoleOutput((current) => [
-        ...current,
-        `OK Pulled latest changes from ${gitConfig.branch}`,
-      ])
-      toast.success('Repository updated')
-    }, 1000)
-  }
-
-  const handleExportZip = async () => {
-    if (!fileTree || fileTree.length === 0) {
-      toast.error('No files to export')
-      return
-    }
-
-    try {
-      const blob = await buildZipFromFileTree(fileTree)
-      const url = URL.createObjectURL(blob)
-      const anchor = document.createElement('a')
-      anchor.href = url
-      anchor.download = `${workspaceName || 'workspace'}.zip`
-      anchor.click()
-      URL.revokeObjectURL(url)
-      toast.success('Zip exported')
-    } catch (error) {
-      toast.error('Failed to export zip')
-    }
-  }
-
-  const handleTemplateSelect = (templateId: string) => {
-    const template = getPackageTemplateById(templateId)
-    if (!template) return
-
-    setFileTree(template.tree)
-    setWorkspaceName(template.rootName)
-    setActiveFolderId(template.tree[0]?.id ?? null)
-    const firstFile = fileTreeOperations.findFirstFile(template.tree)
-    setSelectedFileId(firstFile?.id ?? null)
-    setFileContent(firstFile?.content ?? '')
-    setShowTemplateDialog(false)
-    toast.success(`Loaded ${template.name}`)
-  }
-
-  const handleUpdateGitConfig = (updates: Partial<GitConfig>) => {
-    setGitConfig((current) => ({
-      provider: current?.provider ?? 'github',
-      repoUrl: current?.repoUrl ?? '',
-      branch: current?.branch ?? 'main',
-      token: current?.token ?? '',
-      ...updates,
-    }))
-  }
+  const {
+    activeFolderId,
+    consoleOutput,
+    fileContent,
+    fileTree,
+    gitCommitMessage,
+    gitConfig,
+    isRunning,
+    newItemName,
+    newItemType,
+    selectedFile,
+    selectedFileId,
+    showGitDialog,
+    showNewItemDialog,
+    showTemplateDialog,
+    templates,
+    testResults,
+    workspaceName,
+    handleCreateItem,
+    handleDeleteFile,
+    handleExportZip,
+    handleGitPull,
+    handleGitPush,
+    handleRunCode,
+    handleRunTests,
+    handleSaveFile,
+    handleTemplateSelect,
+    handleToggleFolder,
+    handleUpdateGitConfig,
+    setActiveFolderId,
+    setConsoleOutput,
+    setFileContent,
+    setGitCommitMessage,
+    setNewItemName,
+    setNewItemType,
+    setSelectedFileId,
+    setShowGitDialog,
+    setShowNewItemDialog,
+    setShowTemplateDialog,
+  } = useNerdIdeState()
 
   return (
     <div className={className}>
@@ -254,7 +66,7 @@ export function NerdModeIDE({ className }: NerdModeIDEProps) {
         />
         <CardContent className="p-0">
           <div className="grid grid-cols-4 h-[calc(100vh-200px)]">
-            <NerdModeIDEFileExplorer
+            <Sidebar
               nodes={fileTree || []}
               selectedFileId={selectedFileId}
               activeFolderId={activeFolderId}
@@ -262,7 +74,7 @@ export function NerdModeIDE({ className }: NerdModeIDEProps) {
               onSelectFile={setSelectedFileId}
               onSelectFolder={setActiveFolderId}
             />
-            <NerdModeEditorPanel
+            <EditorPane
               selectedFile={selectedFile && selectedFile.type === 'file' ? selectedFile : null}
               fileContent={fileContent}
               isRunning={isRunning}
diff --git a/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE/EditorPane.tsx b/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE/EditorPane.tsx
new file mode 100644
index 000000000..48aeb8c3f
--- /dev/null
+++ b/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE/EditorPane.tsx
@@ -0,0 +1,27 @@
+import type { FileNode } from '@/lib/nerd-mode-ide'
+import type { GitConfig, TestResult } from '../types'
+import { NerdModeEditorPanel } from '../../panels/NerdModeEditorPanel'
+
+interface EditorPaneProps {
+  selectedFile: FileNode | null
+  fileContent: string
+  isRunning: boolean
+  consoleOutput: string[]
+  testResults: TestResult[]
+  gitConfig: GitConfig | null
+  gitCommitMessage: string
+  onFileChange: (value: string) => void
+  onRunCode: () => void
+  onSaveFile: () => void
+  onDeleteFile: () => void
+  onClearConsole: () => void
+  onRunTests: () => void
+  onCommitMessageChange: (value: string) => void
+  onGitPush: () => void
+  onGitPull: () => void
+  onOpenGitConfig: () => void
+}
+
+export function EditorPane(props: EditorPaneProps) {
+  return <NerdModeEditorPanel {...props} />
+}
diff --git a/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE/Sidebar.tsx b/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE/Sidebar.tsx
new file mode 100644
index 000000000..b48fe4faf
--- /dev/null
+++ b/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE/Sidebar.tsx
@@ -0,0 +1,31 @@
+import type { FileNode } from '@/lib/nerd-mode-ide'
+import { NerdModeIDEFileExplorer } from '../../components/NerdModeIDEFileExplorer'
+
+interface SidebarProps {
+  nodes: FileNode[]
+  selectedFileId: string | null
+  activeFolderId: string | null
+  onToggleFolder: (nodeId: string) => void
+  onSelectFile: (nodeId: string) => void
+  onSelectFolder: (nodeId: string | null) => void
+}
+
+export function Sidebar({
+  nodes,
+  selectedFileId,
+  activeFolderId,
+  onToggleFolder,
+  onSelectFile,
+  onSelectFolder,
+}: SidebarProps) {
+  return (
+    <NerdModeIDEFileExplorer
+      nodes={nodes}
+      selectedFileId={selectedFileId}
+      activeFolderId={activeFolderId}
+      onToggleFolder={onToggleFolder}
+      onSelectFile={onSelectFile}
+      onSelectFolder={onSelectFolder}
+    />
+  )
+}
diff --git a/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE/useNerdIdeState.ts b/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE/useNerdIdeState.ts
new file mode 100644
index 000000000..55d58a1c1
--- /dev/null
+++ b/frontends/nextjs/src/components/nerd-mode-ide/core/NerdModeIDE/useNerdIdeState.ts
@@ -0,0 +1,274 @@
+import { useEffect, useMemo, useState } from 'react'
+import { toast } from 'sonner'
+import { useKV } from '@github/spark/hooks'
+import type { FileNode } from '@/lib/nerd-mode-ide'
+import {
+  appendExportPath,
+  buildZipFromFileTree,
+  fileTreeOperations,
+  getPackageTemplateById,
+  getPackageTemplates,
+} from '@/lib/nerd-mode-ide'
+import type { GitConfig, TestResult } from '../types'
+
+export function useNerdIdeState() {
+  const templates = useMemo(() => getPackageTemplates(), [])
+  const defaultTemplate = templates[0]
+
+  const [fileTree, setFileTree] = useKV<FileNode[]>('nerd-mode-file-tree', defaultTemplate.tree)
+  const [workspaceName, setWorkspaceName] = useKV<string>('nerd-mode-workspace', defaultTemplate.rootName)
+  const [selectedFileId, setSelectedFileId] = useState<string | null>(null)
+  const [activeFolderId, setActiveFolderId] = useState<string | null>(fileTree?.[0]?.id ?? null)
+  const [fileContent, setFileContent] = useState('')
+  const [gitConfig, setGitConfig] = useKV<GitConfig | null>('nerd-mode-git-config', null)
+  const [showGitDialog, setShowGitDialog] = useState(false)
+  const [showNewItemDialog, setShowNewItemDialog] = useState(false)
+  const [showTemplateDialog, setShowTemplateDialog] = useState(false)
+  const [newItemName, setNewItemName] = useState('')
+  const [newItemType, setNewItemType] = useState<'file' | 'folder'>('file')
+  const [testResults, setTestResults] = useState<TestResult[]>([])
+  const [consoleOutput, setConsoleOutput] = useState<string[]>([])
+  const [isRunning, setIsRunning] = useState(false)
+  const [gitCommitMessage, setGitCommitMessage] = useState('')
+
+  const selectedFile = useMemo(() => {
+    if (!fileTree || !selectedFileId) return null
+    return fileTreeOperations.findNodeById(fileTree, selectedFileId)
+  }, [fileTree, selectedFileId])
+
+  useEffect(() => {
+    if (!fileTree) return
+    if (!selectedFileId) {
+      const firstFile = fileTreeOperations.findFirstFile(fileTree)
+      if (firstFile) {
+        setSelectedFileId(firstFile.id)
+      }
+      return
+    }
+
+    const fileNode = fileTreeOperations.findNodeById(fileTree, selectedFileId)
+    if (fileNode?.type === 'file') {
+      setFileContent(fileNode.content ?? '')
+    }
+  }, [fileTree, selectedFileId])
+
+  const handleToggleFolder = (nodeId: string) => {
+    if (!fileTree) return
+    const node = fileTreeOperations.findNodeById(fileTree, nodeId)
+    if (node?.type === 'folder') {
+      setFileTree(fileTreeOperations.updateNode(fileTree, nodeId, { expanded: !node.expanded }))
+    }
+  }
+
+  const handleSaveFile = () => {
+    if (!fileTree || !selectedFileId) return
+    setFileTree(fileTreeOperations.updateNode(fileTree, selectedFileId, { content: fileContent }))
+    toast.success(`Saved ${selectedFile?.name || 'file'}`)
+  }
+
+  const handleDeleteFile = () => {
+    if (!fileTree || !selectedFileId) return
+    setFileTree(fileTreeOperations.deleteNode(fileTree, selectedFileId))
+    setSelectedFileId(null)
+    setFileContent('')
+    toast.success(`Deleted ${selectedFile?.name || 'file'}`)
+  }
+
+  const handleCreateItem = () => {
+    if (!newItemName.trim() || !fileTree) {
+      toast.error('Please enter a name')
+      return
+    }
+
+    const parentNode = activeFolderId
+      ? fileTreeOperations.findNodeById(fileTree, activeFolderId)
+      : null
+
+    const exportPath = parentNode?.exportPath
+      ? appendExportPath(parentNode.exportPath, newItemName)
+      : undefined
+
+    const newNode = newItemType === 'file'
+      ? fileTreeOperations.createFileNode({ name: newItemName, exportPath })
+      : fileTreeOperations.createFolderNode({ name: newItemName, exportPath, expanded: true })
+
+    setFileTree(fileTreeOperations.appendNode(fileTree, activeFolderId, newNode))
+    setNewItemName('')
+    setShowNewItemDialog(false)
+
+    if (newNode.type === 'file') {
+      setSelectedFileId(newNode.id)
+      setFileContent(newNode.content ?? '')
+    }
+
+    toast.success(`Created ${newNode.name}`)
+  }
+
+  const handleRunCode = () => {
+    setIsRunning(true)
+    setConsoleOutput((current) => [...current, `> Running ${selectedFile?.name || 'code'}...`])
+
+    setTimeout(() => {
+      setConsoleOutput((current) => [
+        ...current,
+        'OK Code executed successfully',
+        '> Output: Hello from MetaBuilder IDE!',
+      ])
+      setIsRunning(false)
+      toast.success('Code executed')
+    }, 1000)
+  }
+
+  const handleRunTests = () => {
+    setConsoleOutput((current) => [...current, '> Running test suite...'])
+
+    const mockTests: TestResult[] = [
+      { name: 'Feed component renders', status: 'passed', duration: 45 },
+      { name: 'Package export bundles files', status: 'passed', duration: 123 },
+      { name: 'Lua manifest loads', status: 'passed', duration: 234 },
+      { name: 'Permissions hook', status: 'passed', duration: 67 },
+    ]
+
+    setTimeout(() => {
+      setTestResults(mockTests)
+      setConsoleOutput((current) => [
+        ...current,
+        `OK ${mockTests.filter((test) => test.status === 'passed').length} tests passed`,
+        `FAIL ${mockTests.filter((test) => test.status === 'failed').length} tests failed`,
+      ])
+      toast.success('Tests completed')
+    }, 1500)
+  }
+
+  const handleGitPush = () => {
+    if (!gitConfig) {
+      toast.error('Please configure Git first')
+      setShowGitDialog(true)
+      return
+    }
+
+    if (!gitCommitMessage.trim()) {
+      toast.error('Please enter a commit message')
+      return
+    }
+
+    setConsoleOutput((current) => [
+      ...current,
+      `> git add .`,
+      `> git commit -m "${gitCommitMessage}"`,
+      `> git push origin ${gitConfig.branch}`,
+    ])
+
+    setTimeout(() => {
+      setConsoleOutput((current) => [
+        ...current,
+        `OK Pushed to ${gitConfig.provider} (${gitConfig.repoUrl})`,
+      ])
+      setGitCommitMessage('')
+      toast.success('Changes pushed to repository')
+    }, 1000)
+  }
+
+  const handleGitPull = () => {
+    if (!gitConfig) {
+      toast.error('Please configure Git first')
+      setShowGitDialog(true)
+      return
+    }
+
+    setConsoleOutput((current) => [...current, `> git pull origin ${gitConfig.branch}`])
+
+    setTimeout(() => {
+      setConsoleOutput((current) => [
+        ...current,
+        `OK Pulled latest changes from ${gitConfig.branch}`,
+      ])
+      toast.success('Repository updated')
+    }, 1000)
+  }
+
+  const handleExportZip = async () => {
+    if (!fileTree || fileTree.length === 0) {
+      toast.error('No files to export')
+      return
+    }
+
+    try {
+      const blob = await buildZipFromFileTree(fileTree)
+      const url = URL.createObjectURL(blob)
+      const anchor = document.createElement('a')
+      anchor.href = url
+      anchor.download = `${workspaceName || 'workspace'}.zip`
+      anchor.click()
+      URL.revokeObjectURL(url)
+      toast.success('Zip exported')
+    } catch (error) {
+      toast.error('Failed to export zip')
+    }
+  }
+
+  const handleTemplateSelect = (templateId: string) => {
+    const template = getPackageTemplateById(templateId)
+    if (!template) return
+
+    setFileTree(template.tree)
+    setWorkspaceName(template.rootName)
+    setActiveFolderId(template.tree[0]?.id ?? null)
+    const firstFile = fileTreeOperations.findFirstFile(template.tree)
+    setSelectedFileId(firstFile?.id ?? null)
+    setFileContent(firstFile?.content ?? '')
+    setShowTemplateDialog(false)
+    toast.success(`Loaded ${template.name}`)
+  }
+
+  const handleUpdateGitConfig = (updates: Partial<GitConfig>) => {
+    setGitConfig((current) => ({
+      provider: current?.provider ?? 'github',
+      repoUrl: current?.repoUrl ?? '',
+      branch: current?.branch ?? 'main',
+      token: current?.token ?? '',
+      ...updates,
+    }))
+  }
+
+  return {
+    activeFolderId,
+    consoleOutput,
+    fileContent,
+    fileTree,
+    gitCommitMessage,
+    gitConfig,
+    isRunning,
+    newItemName,
+    newItemType,
+    selectedFile,
+    selectedFileId,
+    showGitDialog,
+    showNewItemDialog,
+    showTemplateDialog,
+    templates,
+    testResults,
+    workspaceName,
+    handleCreateItem,
+    handleDeleteFile,
+    handleExportZip,
+    handleGitPull,
+    handleGitPush,
+    handleRunCode,
+    handleRunTests,
+    handleSaveFile,
+    handleTemplateSelect,
+    handleToggleFolder,
+    handleUpdateGitConfig,
+    setActiveFolderId,
+    setConsoleOutput,
+    setFileContent,
+    setGitCommitMessage,
+    setNewItemName,
+    setNewItemType,
+    setSelectedFileId,
+    setShowGitDialog,
+    setShowNewItemDialog,
+    setShowTemplateDialog,
+  }
+}
diff --git a/frontends/nextjs/src/components/organisms/security/ActionButtons.tsx b/frontends/nextjs/src/components/organisms/security/ActionButtons.tsx
new file mode 100644
index 000000000..e0a5f441a
--- /dev/null
+++ b/frontends/nextjs/src/components/organisms/security/ActionButtons.tsx
@@ -0,0 +1,42 @@
+import { Button } from '@/components/ui'
+import { DialogFooter } from '@/components/ui'
+import type { SecurityScanResult } from '@/lib/security/scanner/security-scanner'
+
+interface ActionButtonsProps {
+  scanResult: SecurityScanResult
+  onCancel: () => void
+  onProceed?: () => void
+  showProceedButton?: boolean
+}
+
+export function ActionButtons({
+  scanResult,
+  onCancel,
+  onProceed,
+  showProceedButton = false
+}: ActionButtonsProps) {
+  const disableProceed = scanResult.severity === 'critical'
+
+  return (
+    <DialogFooter className="flex-col sm:flex-row gap-2">
+      <Button
+        variant="outline"
+        onClick={onCancel}
+        className="w-full sm:w-auto"
+      >
+        {scanResult.safe ? 'Close' : 'Cancel'}
+      </Button>
+
+      {!scanResult.safe && showProceedButton && (
+        <Button
+          variant={scanResult.severity === 'critical' ? 'destructive' : 'default'}
+          onClick={onProceed}
+          disabled={disableProceed}
+          className="w-full sm:w-auto"
+        >
+          {scanResult.severity === 'critical' ? 'Force Proceed (Not Recommended)' : 'Proceed Anyway'}
+        </Button>
+      )}
+    </DialogFooter>
+  )
+}
diff --git a/frontends/nextjs/src/components/organisms/security/SecurityMessage.tsx b/frontends/nextjs/src/components/organisms/security/SecurityMessage.tsx
new file mode 100644
index 000000000..3091dc661
--- /dev/null
+++ b/frontends/nextjs/src/components/organisms/security/SecurityMessage.tsx
@@ -0,0 +1,171 @@
+import { Alert, AlertDescription } from '@/components/ui'
+import { Badge } from '@/components/ui'
+import { DialogDescription, DialogHeader, DialogTitle } from '@/components/ui'
+import { ScrollArea } from '@/components/ui'
+import { Separator } from '@/components/ui'
+import { ShieldWarning, Warning, Info, CheckCircle } from '@phosphor-icons/react'
+import type { SecurityIssue, SecurityScanResult } from '@/lib/security/scanner/security-scanner'
+import { getSeverityColor, getSeverityIcon } from '@/lib/security/scanner/security-scanner'
+
+interface SecurityMessageProps {
+  scanResult: SecurityScanResult
+  codeType?: string
+}
+
+const severityOrder = ['critical', 'high', 'medium', 'low'] as const
+
+const getSeverityBadgeVariant = (severity: string) => {
+  switch (severity) {
+    case 'critical':
+    case 'high':
+      return 'destructive'
+    case 'medium':
+      return 'default'
+    case 'low':
+      return 'secondary'
+    default:
+      return 'outline'
+  }
+}
+
+const getIcon = (severity: string) => {
+  switch (severity) {
+    case 'critical':
+    case 'high':
+      return <ShieldWarning className="w-12 h-12 text-red-600" weight="fill" />
+    case 'medium':
+      return <Warning className="w-12 h-12 text-yellow-600" weight="fill" />
+    case 'low':
+      return <Info className="w-12 h-12 text-blue-600" weight="fill" />
+    default:
+      return <CheckCircle className="w-12 h-12 text-green-600" weight="fill" />
+  }
+}
+
+const getTitle = (severity: string, safe: boolean) => {
+  if (safe) return 'Code Security Check Passed'
+
+  switch (severity) {
+    case 'critical':
+      return 'CRITICAL SECURITY THREAT DETECTED'
+    case 'high':
+      return 'High-Risk Security Issues Detected'
+    case 'medium':
+      return 'Security Warnings Detected'
+    case 'low':
+      return 'Minor Security Concerns'
+    default:
+      return 'Security Scan Complete'
+  }
+}
+
+const getDescription = (scanResult: SecurityScanResult, codeType: string) => {
+  if (scanResult.safe) {
+    return `Your ${codeType} has been scanned and appears to be safe.`
+  }
+
+  const { issues } = scanResult
+  return `Your ${codeType} contains ${issues.length} security ${issues.length === 1 ? 'issue' : 'issues'} that require attention.`
+}
+
+export function SecurityMessage({ scanResult, codeType = 'code' }: SecurityMessageProps) {
+  const groupedIssues = scanResult.issues.reduce((acc, issue) => {
+    if (!acc[issue.severity]) {
+      acc[issue.severity] = []
+    }
+    acc[issue.severity].push(issue)
+    return acc
+  }, {} as Record<string, SecurityIssue[]>)
+
+  return (
+    <>
+      <DialogHeader>
+        <div className="flex items-center gap-4 mb-2">
+          {getIcon(scanResult.severity)}
+          <div className="flex-1">
+            <DialogTitle className="text-2xl">{getTitle(scanResult.severity, scanResult.safe)}</DialogTitle>
+            <DialogDescription className="text-base mt-1">
+              {getDescription(scanResult, codeType)}
+            </DialogDescription>
+          </div>
+        </div>
+      </DialogHeader>
+
+      <ScrollArea className="max-h-[50vh] pr-4">
+        {scanResult.safe ? (
+          <Alert className="border-green-200 bg-green-50">
+            <CheckCircle className="h-5 w-5 text-green-600" weight="fill" />
+            <AlertDescription className="text-green-800">
+              No security issues detected. Your code follows security best practices.
+            </AlertDescription>
+          </Alert>
+        ) : (
+          <div className="space-y-4">
+            {severityOrder.map(severity => {
+              const issues = groupedIssues[severity]
+              if (!issues || issues.length === 0) return null
+
+              return (
+                <div key={severity} className="space-y-2">
+                  <div className="flex items-center gap-2">
+                    <Badge variant={getSeverityBadgeVariant(severity)} className="uppercase">
+                      {getSeverityIcon(severity)} {severity}
+                    </Badge>
+                    <span className="text-sm text-muted-foreground">
+                      {issues.length} {issues.length === 1 ? 'issue' : 'issues'}
+                    </span>
+                  </div>
+
+                  <div className="space-y-2">
+                    {issues.map((issue, idx) => (
+                      <Alert key={idx} className={getSeverityColor(issue.severity)}>
+                        <div className="space-y-2">
+                          <div className="flex items-start justify-between gap-2">
+                            <div className="flex-1">
+                              <p className="font-semibold">{issue.message}</p>
+                              {issue.line && (
+                                <p className="text-sm opacity-75 mt-1">
+                                  Line {issue.line}
+                                </p>
+                              )}
+                            </div>
+                            <Badge variant="outline" className="font-mono text-xs">
+                              {issue.pattern}
+                            </Badge>
+                          </div>
+                          {issue.recommendation && (
+                            <>
+                              <Separator className="my-2" />
+                              <div className="text-sm">
+                                <p className="font-medium mb-1">Recommendation:</p>
+                                <p className="opacity-90">{issue.recommendation}</p>
+                              </div>
+                            </>
+                          )}
+                        </div>
+                      </Alert>
+                    ))}
+                  </div>
+                </div>
+              )
+            })}
+
+            {(scanResult.severity === 'critical' || scanResult.severity === 'high') && (
+              <Alert className="border-red-300 bg-red-50 mt-4">
+                <ShieldWarning className="h-5 w-5 text-red-600" weight="fill" />
+                <AlertDescription className="text-red-800">
+                  <p className="font-semibold mb-2">Security Alert</p>
+                  <p>
+                    {scanResult.severity === 'critical'
+                      ? 'This code contains CRITICAL security vulnerabilities that could compromise system security, steal data, or execute malicious actions. It is strongly recommended NOT to proceed.'
+                      : 'This code contains HIGH-RISK security issues that could lead to vulnerabilities or unexpected behavior. Carefully review and fix these issues before proceeding.'}
+                  </p>
+                </AlertDescription>
+              </Alert>
+            )}
+          </div>
+        )}
+      </ScrollArea>
+    </>
+  )
+}
diff --git a/frontends/nextjs/src/components/organisms/security/SecurityWarningDialog.tsx b/frontends/nextjs/src/components/organisms/security/SecurityWarningDialog.tsx
index d84d4015e..2e1129fe4 100644
--- a/frontends/nextjs/src/components/organisms/security/SecurityWarningDialog.tsx
+++ b/frontends/nextjs/src/components/organisms/security/SecurityWarningDialog.tsx
@@ -1,32 +1,19 @@
 /**
  * SecurityWarningDialog - Organism Component
- * 
+ *
  * This component is categorized as an organism (not a molecule) because:
  * 1. It contains complex data processing (groups security issues by severity)
  * 2. It implements security-specific business rules (severity ordering, badge variants)
  * 3. It's a feature-specific component for security scanning results
  * 4. It exceeds the recommended 150 LOC guideline for molecules (235 LOC)
- * 
+ *
  * See: docs/analysis/molecule-organism-audit.md for full categorization analysis
  */
 
-import { useState } from 'react'
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui'
-import { Button } from '@/components/ui'
-import { Alert, AlertDescription } from '@/components/ui'
-import { ScrollArea } from '@/components/ui'
-import { Badge } from '@/components/ui'
-import { Separator } from '@/components/ui'
-import { ShieldWarning, Warning, Info, CheckCircle } from '@phosphor-icons/react'
-import type { SecurityScanResult, SecurityIssue } from '@/lib/security/scanner/security-scanner'
-import { getSeverityColor, getSeverityIcon } from '@/lib/security/scanner/security-scanner'
+import { Dialog, DialogContent } from '@/components/ui'
+import type { SecurityScanResult } from '@/lib/security/scanner/security-scanner'
+import { ActionButtons } from './ActionButtons'
+import { SecurityMessage } from './SecurityMessage'
 
 interface SecurityWarningDialogProps {
   open: boolean
@@ -47,200 +34,34 @@ export function SecurityWarningDialog({
   codeType = 'code',
   showProceedButton = false
 }: SecurityWarningDialogProps) {
-  const [acknowledged, setAcknowledged] = useState(false)
+  const closeDialog = () => {
+    onOpenChange(false)
+  }
 
   const handleProceed = () => {
     if (onProceed) {
       onProceed()
     }
-    setAcknowledged(false)
-    onOpenChange(false)
+    closeDialog()
   }
 
   const handleCancel = () => {
     if (onCancel) {
       onCancel()
     }
-    setAcknowledged(false)
-    onOpenChange(false)
+    closeDialog()
   }
 
-  const getSeverityBadgeVariant = (severity: string) => {
-    switch (severity) {
-      case 'critical':
-        return 'destructive'
-      case 'high':
-        return 'destructive'
-      case 'medium':
-        return 'default'
-      case 'low':
-        return 'secondary'
-      default:
-        return 'outline'
-    }
-  }
-
-  const getIcon = () => {
-    switch (scanResult.severity) {
-      case 'critical':
-      case 'high':
-        return <ShieldWarning className="w-12 h-12 text-red-600" weight="fill" />
-      case 'medium':
-        return <Warning className="w-12 h-12 text-yellow-600" weight="fill" />
-      case 'low':
-        return <Info className="w-12 h-12 text-blue-600" weight="fill" />
-      default:
-        return <CheckCircle className="w-12 h-12 text-green-600" weight="fill" />
-    }
-  }
-
-  const getTitle = () => {
-    if (scanResult.safe) {
-      return 'Code Security Check Passed'
-    }
-    switch (scanResult.severity) {
-      case 'critical':
-        return 'CRITICAL SECURITY THREAT DETECTED'
-      case 'high':
-        return 'High-Risk Security Issues Detected'
-      case 'medium':
-        return 'Security Warnings Detected'
-      case 'low':
-        return 'Minor Security Concerns'
-      default:
-        return 'Security Scan Complete'
-    }
-  }
-
-  const getDescription = () => {
-    if (scanResult.safe) {
-      return `Your ${codeType} has been scanned and appears to be safe.`
-    }
-    return `Your ${codeType} contains ${scanResult.issues.length} security ${scanResult.issues.length === 1 ? 'issue' : 'issues'} that require attention.`
-  }
-
-  const groupedIssues = scanResult.issues.reduce((acc, issue) => {
-    if (!acc[issue.severity]) {
-      acc[issue.severity] = []
-    }
-    acc[issue.severity].push(issue)
-    return acc
-  }, {} as Record<string, SecurityIssue[]>)
-
-  const severityOrder = ['critical', 'high', 'medium', 'low']
-
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-3xl max-h-[80vh]">
-        <DialogHeader>
-          <div className="flex items-center gap-4 mb-2">
-            {getIcon()}
-            <div className="flex-1">
-              <DialogTitle className="text-2xl">{getTitle()}</DialogTitle>
-              <DialogDescription className="text-base mt-1">
-                {getDescription()}
-              </DialogDescription>
-            </div>
-          </div>
-        </DialogHeader>
-
-        <ScrollArea className="max-h-[50vh] pr-4">
-          {scanResult.safe ? (
-            <Alert className="border-green-200 bg-green-50">
-              <CheckCircle className="h-5 w-5 text-green-600" weight="fill" />
-              <AlertDescription className="text-green-800">
-                No security issues detected. Your code follows security best practices.
-              </AlertDescription>
-            </Alert>
-          ) : (
-            <div className="space-y-4">
-              {severityOrder.map(severity => {
-                const issues = groupedIssues[severity]
-                if (!issues || issues.length === 0) return null
-
-                return (
-                  <div key={severity} className="space-y-2">
-                    <div className="flex items-center gap-2">
-                      <Badge variant={getSeverityBadgeVariant(severity)} className="uppercase">
-                        {getSeverityIcon(severity)} {severity}
-                      </Badge>
-                      <span className="text-sm text-muted-foreground">
-                        {issues.length} {issues.length === 1 ? 'issue' : 'issues'}
-                      </span>
-                    </div>
-
-                    <div className="space-y-2">
-                      {issues.map((issue, idx) => (
-                        <Alert key={idx} className={getSeverityColor(issue.severity)}>
-                          <div className="space-y-2">
-                            <div className="flex items-start justify-between gap-2">
-                              <div className="flex-1">
-                                <p className="font-semibold">{issue.message}</p>
-                                {issue.line && (
-                                  <p className="text-sm opacity-75 mt-1">
-                                    Line {issue.line}
-                                  </p>
-                                )}
-                              </div>
-                              <Badge variant="outline" className="font-mono text-xs">
-                                {issue.pattern}
-                              </Badge>
-                            </div>
-                            {issue.recommendation && (
-                              <>
-                                <Separator className="my-2" />
-                                <div className="text-sm">
-                                  <p className="font-medium mb-1">Recommendation:</p>
-                                  <p className="opacity-90">{issue.recommendation}</p>
-                                </div>
-                              </>
-                            )}
-                          </div>
-                        </Alert>
-                      ))}
-                    </div>
-                  </div>
-                )
-              })}
-
-              {(scanResult.severity === 'critical' || scanResult.severity === 'high') && (
-                <Alert className="border-red-300 bg-red-50 mt-4">
-                  <ShieldWarning className="h-5 w-5 text-red-600" weight="fill" />
-                  <AlertDescription className="text-red-800">
-                    <p className="font-semibold mb-2">Security Alert</p>
-                    <p>
-                      {scanResult.severity === 'critical' 
-                        ? 'This code contains CRITICAL security vulnerabilities that could compromise system security, steal data, or execute malicious actions. It is strongly recommended NOT to proceed.'
-                        : 'This code contains HIGH-RISK security issues that could lead to vulnerabilities or unexpected behavior. Carefully review and fix these issues before proceeding.'
-                      }
-                    </p>
-                  </AlertDescription>
-                </Alert>
-              )}
-            </div>
-          )}
-        </ScrollArea>
-
-        <DialogFooter className="flex-col sm:flex-row gap-2">
-          <Button
-            variant="outline"
-            onClick={handleCancel}
-            className="w-full sm:w-auto"
-          >
-            {scanResult.safe ? 'Close' : 'Cancel'}
-          </Button>
-          
-          {!scanResult.safe && showProceedButton && (
-            <Button
-              variant={scanResult.severity === 'critical' ? 'destructive' : 'default'}
-              onClick={handleProceed}
-              disabled={scanResult.severity === 'critical' && !acknowledged}
-              className="w-full sm:w-auto"
-            >
-              {scanResult.severity === 'critical' ? 'Force Proceed (Not Recommended)' : 'Proceed Anyway'}
-            </Button>
-          )}
-        </DialogFooter>
+        <SecurityMessage scanResult={scanResult} codeType={codeType} />
+        <ActionButtons
+          scanResult={scanResult}
+          onCancel={handleCancel}
+          onProceed={showProceedButton ? handleProceed : undefined}
+          showProceedButton={showProceedButton}
+        />
       </DialogContent>
     </Dialog>
   )
diff --git a/frontends/nextjs/src/components/rendering/PropertyInspector.tsx b/frontends/nextjs/src/components/rendering/PropertyInspector.tsx
index 801ac2f4c..baeced0a5 100644
--- a/frontends/nextjs/src/components/rendering/PropertyInspector.tsx
+++ b/frontends/nextjs/src/components/rendering/PropertyInspector.tsx
@@ -1,16 +1,11 @@
 import { useState, useEffect } from 'react'
-import { ScrollArea } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Label } from '@/components/ui'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui'
-import { Button } from '@/components/ui'
-import { Separator } from '@/components/ui'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-import type { ComponentInstance } from '@/lib/builder-types'
+import { Separator, Button } from '@/components/ui'
+import type { ComponentInstance } from '@/lib/types/builder-types'
 import { componentCatalog } from '@/lib/component-catalog'
-import { Code, PaintBrush, Trash, Palette } from '@phosphor-icons/react'
+import { Trash } from '@phosphor-icons/react'
 import { CssClassBuilder } from '@/components/CssClassBuilder'
 import { Database, DropdownConfig } from '@/lib/database'
+import { PropertyPanels } from './components/PropertyPanels'
 
 interface PropertyInspectorProps {
   component: ComponentInstance | null
@@ -67,131 +62,14 @@ export function PropertyInspector({ component, onUpdate, onDelete, onCodeEdit }:
         <p className="text-xs text-muted-foreground">Component Properties</p>
       </div>
 
-      <Tabs defaultValue="props" className="flex-1 flex flex-col">
-        <TabsList className="w-full rounded-none border-b">
-          <TabsTrigger value="props" className="flex-1">
-            <PaintBrush className="mr-2" size={16} />
-            Props
-          </TabsTrigger>
-          <TabsTrigger value="code" className="flex-1">
-            <Code className="mr-2" size={16} />
-            Code
-          </TabsTrigger>
-        </TabsList>
-
-        <TabsContent value="props" className="flex-1 mt-0">
-          <ScrollArea className="h-full p-4">
-            <div className="space-y-4">
-              {componentDef?.propSchema.map(propDef => {
-                const dynamicDropdown = propDef.type === 'dynamic-select' 
-                  ? dynamicDropdowns.find(d => d.name === propDef.dynamicSource)
-                  : null
-
-                return (
-                  <div key={propDef.name} className="space-y-2">
-                    <Label className="text-xs uppercase tracking-wider">{propDef.label}</Label>
-                    
-                    {propDef.name === 'className' ? (
-                      <div className="flex gap-2">
-                        <Input
-                          value={component.props[propDef.name] || ''}
-                          onChange={(e) => handlePropChange(propDef.name, e.target.value)}
-                          className="flex-1 font-mono text-xs"
-                        />
-                        <Button
-                          size="sm"
-                          variant="outline"
-                          onClick={() => openCssBuilder(propDef.name)}
-                        >
-                          <Palette size={16} />
-                        </Button>
-                      </div>
-                    ) : propDef.type === 'string' ? (
-                      <Input
-                        value={component.props[propDef.name] || ''}
-                        onChange={(e) => handlePropChange(propDef.name, e.target.value)}
-                      />
-                    ) : propDef.type === 'number' ? (
-                      <Input
-                        type="number"
-                        value={component.props[propDef.name] || ''}
-                        onChange={(e) => handlePropChange(propDef.name, Number(e.target.value))}
-                      />
-                    ) : propDef.type === 'boolean' ? (
-                      <Select
-                        value={String(component.props[propDef.name] || false)}
-                        onValueChange={(value) => handlePropChange(propDef.name, value === 'true')}
-                      >
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          <SelectItem value="true">True</SelectItem>
-                          <SelectItem value="false">False</SelectItem>
-                        </SelectContent>
-                      </Select>
-                    ) : propDef.type === 'select' && propDef.options ? (
-                      <Select
-                        value={component.props[propDef.name] || propDef.defaultValue}
-                        onValueChange={(value) => handlePropChange(propDef.name, value)}
-                      >
-                        <SelectTrigger>
-                          <SelectValue />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {propDef.options.map(option => (
-                            <SelectItem key={option.value} value={option.value}>
-                              {option.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    ) : propDef.type === 'dynamic-select' && dynamicDropdown ? (
-                      <Select
-                        value={component.props[propDef.name] || ''}
-                        onValueChange={(value) => handlePropChange(propDef.name, value)}
-                      >
-                        <SelectTrigger>
-                          <SelectValue placeholder={`Select ${dynamicDropdown.label}`} />
-                        </SelectTrigger>
-                        <SelectContent>
-                          {dynamicDropdown.options.map(option => (
-                            <SelectItem key={option.value} value={option.value}>
-                              {option.label}
-                            </SelectItem>
-                          ))}
-                        </SelectContent>
-                      </Select>
-                    ) : null}
-
-                    {propDef.description && (
-                      <p className="text-xs text-muted-foreground">{propDef.description}</p>
-                    )}
-                  </div>
-                )
-              })}
-
-              {(!componentDef?.propSchema || componentDef.propSchema.length === 0) && (
-                <p className="text-sm text-muted-foreground">This component has no configurable properties.</p>
-              )}
-            </div>
-          </ScrollArea>
-        </TabsContent>
-
-        <TabsContent value="code" className="flex-1 mt-0">
-          <div className="p-4 h-full flex flex-col items-center justify-center text-center space-y-4">
-            <Code size={48} className="text-muted-foreground" />
-            <div>
-              <p className="text-sm text-muted-foreground mb-2">
-                Add custom JavaScript code for this component
-              </p>
-              <Button onClick={onCodeEdit} variant="outline">
-                Open Code Editor
-              </Button>
-            </div>
-          </div>
-        </TabsContent>
-      </Tabs>
+      <PropertyPanels
+        component={component}
+        componentDef={componentDef}
+        dynamicDropdowns={dynamicDropdowns}
+        onPropChange={handlePropChange}
+        onCodeEdit={onCodeEdit}
+        onOpenCssBuilder={openCssBuilder}
+      />
 
       <Separator />
 
diff --git a/frontends/nextjs/src/components/rendering/RenderComponent.tsx b/frontends/nextjs/src/components/rendering/RenderComponent.tsx
index 2cf420926..8b23fa0aa 100644
--- a/frontends/nextjs/src/components/rendering/RenderComponent.tsx
+++ b/frontends/nextjs/src/components/rendering/RenderComponent.tsx
@@ -1,32 +1,16 @@
-import type { ComponentInstance } from '@/lib/builder-types'
-import { Button } from '@/components/ui'
-import { Input } from '@/components/ui'
-import { Textarea } from '@/components/ui'
-import { Label } from '@/components/ui'
-import { Badge } from '@/components/ui'
-import { Card } from '@/components/ui'
-import { Switch } from '@/components/ui'
-import { Checkbox } from '@/components/ui'
-import { Separator } from '@/components/ui'
-import { Alert } from '@/components/ui'
-import { Progress } from '@/components/ui'
-import { Slider } from '@/components/ui'
-import { Avatar, AvatarFallback } from '@/components/ui'
-import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui'
-import { IRCWebchatDeclarative } from '@/components/IRCWebchatDeclarative'
-import { NotificationSummaryCard } from '@/components/NotificationSummaryCard'
+import type React from 'react'
+import type { ComponentInstance } from '@/lib/types/builder-types'
 import type { User } from '@/lib/level-types'
-import { getDeclarativeRenderer } from '@/lib/declarative-component-renderer'
+import { RenderNode } from './components/RenderNode'
 
 interface RenderComponentProps {
   component: ComponentInstance
   isSelected: boolean
   onSelect: (id: string) => void
   user?: User
-  contextData?: Record<string, any>
 }
 
-export function RenderComponent({ component, isSelected, onSelect, user, contextData }: RenderComponentProps) {
+export function RenderComponent({ component, isSelected, onSelect, user }: RenderComponentProps) {
   const handleClick = (e: React.MouseEvent) => {
     e.stopPropagation()
     onSelect(component.id)
@@ -41,191 +25,19 @@ export function RenderComponent({ component, isSelected, onSelect, user, context
         isSelected={isSelected}
         onSelect={onSelect}
         user={user}
-        contextData={contextData}
       />
     ))
   }
 
   const wrapperClass = `relative ${isSelected ? 'ring-2 ring-accent ring-offset-2' : 'hover:ring-1 hover:ring-accent/50'} transition-all cursor-pointer`
 
-  const renderComponentByType = () => {
-    const { type, props } = component
-    const renderer = getDeclarativeRenderer()
-
-    if (renderer.hasComponentConfig(type)) {
-      if (type === 'IRCWebchat' && user) {
-        return (
-          <IRCWebchatDeclarative
-            user={user}
-            channelName={props.channelName || 'general'}
-            onClose={props.onClose}
-          />
-        )
-      }
-      
-      return (
-        <div className="p-4 border-2 border-dashed border-accent">
-          Declarative Component: {type}
-          <div className="text-xs text-muted-foreground mt-2">
-            This is a package-defined component
-          </div>
-        </div>
-      )
-    }
-
-    switch (type) {
-      case 'Container':
-        return (
-          <div className={props.className || 'p-4'}>
-            {renderChildren()}
-          </div>
-        )
-
-      case 'Flex':
-        return (
-          <div className={props.className || 'flex gap-4'}>
-            {renderChildren()}
-          </div>
-        )
-
-      case 'Grid':
-        return (
-          <div className={props.className || 'grid grid-cols-2 gap-4'}>
-            {renderChildren()}
-          </div>
-        )
-
-      case 'Stack':
-        return (
-          <div className={props.className || 'flex flex-col gap-2'}>
-            {renderChildren()}
-          </div>
-        )
-
-      case 'Card':
-        return (
-          <Card className={props.className || 'p-6'}>
-            {renderChildren()}
-          </Card>
-        )
-
-      case 'NotificationSummary':
-        return (
-          <NotificationSummaryCard
-            title={props.title}
-            subtitle={props.subtitle}
-            totalLabel={props.totalLabel}
-            items={props.items}
-          />
-        )
-
-      case 'Button':
-        return (
-          <Button variant={props.variant} size={props.size}>
-            {props.children || 'Button'}
-          </Button>
-        )
-
-      case 'Input':
-        return (
-          <Input
-            placeholder={props.placeholder}
-            type={props.type}
-          />
-        )
-
-      case 'Textarea':
-        return (
-          <Textarea
-            placeholder={props.placeholder}
-            rows={props.rows}
-          />
-        )
-
-      case 'Label':
-        return <Label>{props.children || 'Label'}</Label>
-
-      case 'Heading': {
-        const level = props.level || '1'
-        const className = props.className
-        const text = props.children || 'Heading'
-        
-        if (level === '1') return <h1 className={className}>{text}</h1>
-        if (level === '2') return <h2 className={className}>{text}</h2>
-        if (level === '3') return <h3 className={className}>{text}</h3>
-        if (level === '4') return <h4 className={className}>{text}</h4>
-        return <h1 className={className}>{text}</h1>
-      }
-
-      case 'Text':
-        return (
-          <p className={props.className}>
-            {props.children || 'Text'}
-          </p>
-        )
-
-      case 'Badge':
-        return (
-          <Badge variant={props.variant}>
-            {props.children || 'Badge'}
-          </Badge>
-        )
-
-      case 'Switch':
-        return <Switch />
-
-      case 'Checkbox':
-        return <Checkbox />
-
-      case 'Separator':
-        return <Separator />
-
-      case 'Alert':
-        return (
-          <Alert variant={props.variant}>
-            {renderChildren()}
-          </Alert>
-        )
-
-      case 'Progress':
-        return <Progress value={props.value || 50} />
-
-      case 'Slider':
-        return <Slider defaultValue={props.defaultValue || [50]} max={props.max || 100} step={props.step || 1} />
-
-      case 'Avatar':
-        return (
-          <Avatar>
-            <AvatarFallback>U</AvatarFallback>
-          </Avatar>
-        )
-
-      case 'Table':
-        return (
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>Column 1</TableHead>
-                <TableHead>Column 2</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              <TableRow>
-                <TableCell>Data 1</TableCell>
-                <TableCell>Data 2</TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-        )
-
-      default:
-        return <div className="p-4 border-2 border-dashed">Unknown Component: {type}</div>
-    }
-  }
-
   return (
     <div className={wrapperClass} onClick={handleClick}>
-      {renderComponentByType()}
+      <RenderNode
+        component={component}
+        renderChildren={renderChildren}
+        user={user}
+      />
     </div>
   )
 }
diff --git a/frontends/nextjs/src/components/rendering/components/FieldTypes.tsx b/frontends/nextjs/src/components/rendering/components/FieldTypes.tsx
new file mode 100644
index 000000000..2e53c0431
--- /dev/null
+++ b/frontends/nextjs/src/components/rendering/components/FieldTypes.tsx
@@ -0,0 +1,114 @@
+import { Button, Input, Label, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui'
+import type { PropDefinition } from '@/lib/types/builder-types'
+import type { DropdownConfig } from '@/lib/database'
+import { Palette } from '@phosphor-icons/react'
+
+interface FieldTypesProps {
+  propDef: PropDefinition
+  value: any
+  onChange: (value: any) => void
+  dynamicDropdown?: DropdownConfig | null
+  onOpenCssBuilder?: () => void
+}
+
+export function FieldTypes({ propDef, value, onChange, dynamicDropdown, onOpenCssBuilder }: FieldTypesProps) {
+  const renderInputByType = () => {
+    if (propDef.name === 'className') {
+      return (
+        <div className="flex gap-2">
+          <Input
+            value={value || ''}
+            onChange={(e) => onChange(e.target.value)}
+            className="flex-1 font-mono text-xs"
+          />
+          {onOpenCssBuilder && (
+            <Button size="sm" variant="outline" onClick={onOpenCssBuilder}>
+              <Palette size={16} />
+            </Button>
+          )}
+        </div>
+      )
+    }
+
+    switch (propDef.type) {
+      case 'string':
+        return (
+          <Input
+            value={value || ''}
+            onChange={(e) => onChange(e.target.value)}
+          />
+        )
+      case 'number':
+        return (
+          <Input
+            type="number"
+            value={value || ''}
+            onChange={(e) => onChange(Number(e.target.value))}
+          />
+        )
+      case 'boolean':
+        return (
+          <Select
+            value={String(value || false)}
+            onValueChange={(val) => onChange(val === 'true')}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="true">True</SelectItem>
+              <SelectItem value="false">False</SelectItem>
+            </SelectContent>
+          </Select>
+        )
+      case 'select':
+        return (
+          <Select
+            value={value || propDef.defaultValue}
+            onValueChange={(val) => onChange(val)}
+          >
+            <SelectTrigger>
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              {propDef.options?.map(option => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )
+      case 'dynamic-select':
+        return (
+          <Select
+            value={value || ''}
+            onValueChange={(val) => onChange(val)}
+          >
+            <SelectTrigger>
+              <SelectValue placeholder={dynamicDropdown ? `Select ${dynamicDropdown.label}` : 'Select option'} />
+            </SelectTrigger>
+            <SelectContent>
+              {dynamicDropdown?.options.map(option => (
+                <SelectItem key={option.value} value={option.value}>
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )
+      default:
+        return null
+    }
+  }
+
+  return (
+    <div className="space-y-2">
+      <Label className="text-xs uppercase tracking-wider">{propDef.label}</Label>
+      {renderInputByType()}
+      {propDef.description && (
+        <p className="text-xs text-muted-foreground">{propDef.description}</p>
+      )}
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/rendering/components/PropertyPanels.tsx b/frontends/nextjs/src/components/rendering/components/PropertyPanels.tsx
new file mode 100644
index 000000000..f7452d992
--- /dev/null
+++ b/frontends/nextjs/src/components/rendering/components/PropertyPanels.tsx
@@ -0,0 +1,80 @@
+import { ScrollArea, Tabs, TabsContent, TabsList, TabsTrigger, Button } from '@/components/ui'
+import type { ComponentDefinition, ComponentInstance } from '@/lib/types/builder-types'
+import type { DropdownConfig } from '@/lib/database'
+import { Code, PaintBrush } from '@phosphor-icons/react'
+import { FieldTypes } from './FieldTypes'
+
+interface PropertyPanelsProps {
+  component: ComponentInstance
+  componentDef?: ComponentDefinition
+  dynamicDropdowns: DropdownConfig[]
+  onPropChange: (propName: string, value: any) => void
+  onCodeEdit: () => void
+  onOpenCssBuilder: (propName: string) => void
+}
+
+export function PropertyPanels({
+  component,
+  componentDef,
+  dynamicDropdowns,
+  onPropChange,
+  onCodeEdit,
+  onOpenCssBuilder,
+}: PropertyPanelsProps) {
+  return (
+    <Tabs defaultValue="props" className="flex-1 flex flex-col">
+      <TabsList className="w-full rounded-none border-b">
+        <TabsTrigger value="props" className="flex-1">
+          <PaintBrush className="mr-2" size={16} />
+          Props
+        </TabsTrigger>
+        <TabsTrigger value="code" className="flex-1">
+          <Code className="mr-2" size={16} />
+          Code
+        </TabsTrigger>
+      </TabsList>
+
+      <TabsContent value="props" className="flex-1 mt-0">
+        <ScrollArea className="h-full p-4">
+          <div className="space-y-4">
+            {componentDef?.propSchema?.length ? (
+              componentDef.propSchema.map(propDef => {
+                const dynamicDropdown =
+                  propDef.type === 'dynamic-select'
+                    ? dynamicDropdowns.find(d => d.name === propDef.dynamicSource)
+                    : null
+
+                return (
+                  <FieldTypes
+                    key={propDef.name}
+                    propDef={propDef}
+                    value={component.props[propDef.name] || ''}
+                    onChange={(value) => onPropChange(propDef.name, value)}
+                    dynamicDropdown={dynamicDropdown}
+                    onOpenCssBuilder={() => onOpenCssBuilder(propDef.name)}
+                  />
+                )
+              })
+            ) : (
+              <p className="text-sm text-muted-foreground">This component has no configurable properties.</p>
+            )}
+          </div>
+        </ScrollArea>
+      </TabsContent>
+
+      <TabsContent value="code" className="flex-1 mt-0">
+        <div className="p-4 h-full flex flex-col items-center justify-center text-center space-y-4">
+          <Code size={48} className="text-muted-foreground" />
+          <div>
+            <p className="text-sm text-muted-foreground mb-2">
+              Add custom JavaScript code for this component
+            </p>
+            <Button onClick={onCodeEdit} variant="outline">
+              Open Code Editor
+            </Button>
+          </div>
+        </div>
+      </TabsContent>
+    </Tabs>
+  )
+}
diff --git a/frontends/nextjs/src/components/rendering/components/RenderNode.tsx b/frontends/nextjs/src/components/rendering/components/RenderNode.tsx
new file mode 100644
index 000000000..a2ea3c18a
--- /dev/null
+++ b/frontends/nextjs/src/components/rendering/components/RenderNode.tsx
@@ -0,0 +1,188 @@
+import type React from 'react'
+import type { ComponentInstance } from '@/lib/types/builder-types'
+import { Button, Input, Textarea, Label, Badge, Card, Switch, Checkbox, Separator, Alert, Progress, Slider, Avatar, AvatarFallback, Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui'
+import { IRCWebchatDeclarative } from '@/components/IRCWebchatDeclarative'
+import { NotificationSummaryCard } from '@/components/NotificationSummaryCard'
+import type { User } from '@/lib/level-types'
+import { getDeclarativeRenderer } from '@/lib/declarative-component-renderer'
+
+interface RenderNodeProps {
+  component: ComponentInstance
+  renderChildren: () => React.ReactNode
+  user?: User
+}
+
+export function RenderNode({ component, renderChildren, user }: RenderNodeProps) {
+  const { type, props } = component
+  const renderer = getDeclarativeRenderer()
+
+  if (renderer.hasComponentConfig(type)) {
+    if (type === 'IRCWebchat' && user) {
+      return (
+        <IRCWebchatDeclarative
+          user={user}
+          channelName={props.channelName || 'general'}
+          onClose={props.onClose}
+        />
+      )
+    }
+
+    return (
+      <div className="p-4 border-2 border-dashed border-accent">
+        Declarative Component: {type}
+        <div className="text-xs text-muted-foreground mt-2">
+          This is a package-defined component
+        </div>
+      </div>
+    )
+  }
+
+  switch (type) {
+    case 'Container':
+      return (
+        <div className={props.className || 'p-4'}>
+          {renderChildren()}
+        </div>
+      )
+
+    case 'Flex':
+      return (
+        <div className={props.className || 'flex gap-4'}>
+          {renderChildren()}
+        </div>
+      )
+
+    case 'Grid':
+      return (
+        <div className={props.className || 'grid grid-cols-2 gap-4'}>
+          {renderChildren()}
+        </div>
+      )
+
+    case 'Stack':
+      return (
+        <div className={props.className || 'flex flex-col gap-2'}>
+          {renderChildren()}
+        </div>
+      )
+
+    case 'Card':
+      return (
+        <Card className={props.className || 'p-6'}>
+          {renderChildren()}
+        </Card>
+      )
+
+    case 'NotificationSummary':
+      return (
+        <NotificationSummaryCard
+          title={props.title}
+          subtitle={props.subtitle}
+          totalLabel={props.totalLabel}
+          items={props.items}
+        />
+      )
+
+    case 'Button':
+      return (
+        <Button variant={props.variant} size={props.size}>
+          {props.children || 'Button'}
+        </Button>
+      )
+
+    case 'Input':
+      return (
+        <Input
+          placeholder={props.placeholder}
+          type={props.type}
+        />
+      )
+
+    case 'Textarea':
+      return (
+        <Textarea
+          placeholder={props.placeholder}
+          rows={props.rows}
+        />
+      )
+
+    case 'Label':
+      return <Label>{props.children || 'Label'}</Label>
+
+    case 'Heading': {
+      const level = props.level || '1'
+      const className = props.className
+      const text = props.children || 'Heading'
+
+      if (level === '1') return <h1 className={className}>{text}</h1>
+      if (level === '2') return <h2 className={className}>{text}</h2>
+      if (level === '3') return <h3 className={className}>{text}</h3>
+      if (level === '4') return <h4 className={className}>{text}</h4>
+      return <h1 className={className}>{text}</h1>
+    }
+
+    case 'Text':
+      return (
+        <p className={props.className}>
+          {props.children || 'Text'}
+        </p>
+      )
+
+    case 'Badge':
+      return (
+        <Badge variant={props.variant}>
+          {props.children || 'Badge'}
+        </Badge>
+      )
+
+    case 'Switch':
+      return <Switch />
+
+    case 'Checkbox':
+      return <Checkbox />
+
+    case 'Separator':
+      return <Separator />
+
+    case 'Alert':
+      return (
+        <Alert variant={props.variant}>
+          {renderChildren()}
+        </Alert>
+      )
+
+    case 'Progress':
+      return <Progress value={props.value || 50} />
+
+    case 'Slider':
+      return <Slider defaultValue={props.defaultValue || [50]} max={props.max || 100} step={props.step || 1} />
+
+    case 'Avatar':
+      return (
+        <Avatar>
+          <AvatarFallback>U</AvatarFallback>
+        </Avatar>
+      )
+
+    case 'Table':
+      return (
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Column 1</TableHead>
+              <TableHead>Column 2</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <TableRow>
+              <TableCell>Data 1</TableCell>
+              <TableCell>Data 2</TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      )
+
+    default:
+      return <div className="p-4 border-2 border-dashed">Unknown Component: {type}</div>
+  }
+}
diff --git a/frontends/nextjs/src/components/schema/level4/Tabs.tsx b/frontends/nextjs/src/components/schema/level4/Tabs.tsx
new file mode 100644
index 000000000..71fe309c7
--- /dev/null
+++ b/frontends/nextjs/src/components/schema/level4/Tabs.tsx
@@ -0,0 +1,186 @@
+import { Button, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui'
+import { Input, Label } from '@/components/ui'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui'
+import { ValidationPanel } from '@/components/schema/level4/ValidationPanel'
+import type { FieldSchema, FieldType, ModelSchema } from '@/lib/schema-types'
+import { Plus, Trash } from '@phosphor-icons/react'
+
+interface SchemaTabsProps {
+  currentModel: ModelSchema
+  onUpdateModel: (updates: Partial<ModelSchema>) => void
+  onAddField: () => void
+  onDeleteField: (fieldName: string) => void
+  onUpdateField: (fieldName: string, updates: Partial<FieldSchema>) => void
+}
+
+export function SchemaTabs({
+  currentModel,
+  onUpdateModel,
+  onAddField,
+  onDeleteField,
+  onUpdateField,
+}: SchemaTabsProps) {
+  const handleFieldChange = (fieldName: string, updates: Partial<FieldSchema>) => {
+    onUpdateField(fieldName, updates)
+  }
+
+  return (
+    <>
+      <CardHeader>
+        <CardTitle>Edit Model: {currentModel.label ?? currentModel.name}</CardTitle>
+        <CardDescription>Configure model properties and fields</CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        <div className="grid gap-4 md:grid-cols-2">
+          <TextField
+            label="Model Name (ID)"
+            value={currentModel.name}
+            onChange={(value) => onUpdateModel({ name: value })}
+            placeholder="user_model"
+          />
+          <TextField
+            label="Display Label"
+            value={currentModel.label || ''}
+            onChange={(value) => onUpdateModel({ label: value })}
+            placeholder="User"
+          />
+          <TextField
+            label="Plural Label"
+            value={currentModel.labelPlural || ''}
+            onChange={(value) => onUpdateModel({ labelPlural: value })}
+            placeholder="Users"
+          />
+          <TextField
+            label="Icon Name"
+            value={currentModel.icon || ''}
+            onChange={(value) => onUpdateModel({ icon: value })}
+            placeholder="users"
+          />
+        </div>
+
+        <div>
+          <div className="flex items-center justify-between mb-4">
+            <Label className="text-base">Fields</Label>
+            <Button size="sm" onClick={onAddField}>
+              <Plus className="mr-2" size={16} />
+              Add Field
+            </Button>
+          </div>
+
+          <div className="space-y-4">
+            {currentModel.fields.length === 0 ? (
+              <p className="text-sm text-muted-foreground text-center py-8 border border-dashed rounded-lg">
+                No fields yet. Add a field to start.
+              </p>
+            ) : (
+              currentModel.fields.map((field) => (
+                <FieldCard
+                  key={field.name}
+                  field={field}
+                  onChange={(updates) => handleFieldChange(field.name, updates)}
+                  onDelete={() => onDeleteField(field.name)}
+                />
+              ))
+            )}
+          </div>
+        </div>
+      </CardContent>
+    </>
+  )
+}
+
+interface FieldCardProps {
+  field: FieldSchema
+  onChange: (updates: Partial<FieldSchema>) => void
+  onDelete: () => void
+}
+
+function FieldCard({ field, onChange, onDelete }: FieldCardProps) {
+  return (
+    <div className="border-2 rounded-lg">
+      <CardContent className="pt-6 space-y-4">
+        <div className="flex items-start justify-between gap-4">
+          <div className="grid gap-4 md:grid-cols-2 flex-1">
+            <TextField
+              label="Field Name"
+              value={field.name}
+              onChange={(value) => onChange({ name: value })}
+              placeholder="email"
+              labelClassName="text-xs"
+            />
+            <TextField
+              label="Label"
+              value={field.label || ''}
+              onChange={(value) => onChange({ label: value })}
+              placeholder="Email Address"
+              labelClassName="text-xs"
+            />
+            <div className="space-y-2">
+              <Label className="text-xs">Type</Label>
+              <Select
+                value={field.type}
+                onValueChange={(value) => onChange({ type: value as FieldType })}
+              >
+                <SelectTrigger>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="string">String</SelectItem>
+                  <SelectItem value="text">Text</SelectItem>
+                  <SelectItem value="number">Number</SelectItem>
+                  <SelectItem value="boolean">Boolean</SelectItem>
+                  <SelectItem value="date">Date</SelectItem>
+                  <SelectItem value="datetime">DateTime</SelectItem>
+                  <SelectItem value="email">Email</SelectItem>
+                  <SelectItem value="url">URL</SelectItem>
+                  <SelectItem value="select">Select</SelectItem>
+                  <SelectItem value="relation">Relation</SelectItem>
+                  <SelectItem value="json">JSON</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <TextField
+              label="Default Value"
+              value={field.default ?? ''}
+              onChange={(value) => onChange({ default: value || undefined })}
+              placeholder="Default"
+              labelClassName="text-xs"
+            />
+          </div>
+          <Button variant="ghost" size="sm" onClick={onDelete}>
+            <Trash size={16} />
+          </Button>
+        </div>
+
+        <ValidationPanel field={field} onChange={onChange} />
+      </CardContent>
+    </div>
+  )
+}
+
+interface TextFieldProps {
+  label: string
+  value: string
+  onChange: (value: string) => void
+  placeholder?: string
+  labelClassName?: string
+}
+
+function TextField({ label, value, onChange, placeholder, labelClassName }: TextFieldProps) {
+  return (
+    <div className="space-y-2">
+      <Label className={labelClassName}>{label}</Label>
+      <Input
+        value={value}
+        onChange={(event) => onChange(event.target.value)}
+        placeholder={placeholder}
+      />
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/schema/level4/ValidationPanel.tsx b/frontends/nextjs/src/components/schema/level4/ValidationPanel.tsx
new file mode 100644
index 000000000..ce8bdb6f1
--- /dev/null
+++ b/frontends/nextjs/src/components/schema/level4/ValidationPanel.tsx
@@ -0,0 +1,84 @@
+import { Input, Label, Switch } from '@/components/ui'
+import type { FieldSchema } from '@/lib/schema-types'
+
+interface ValidationPanelProps {
+  field: FieldSchema
+  onChange: (updates: Partial<FieldSchema>) => void
+}
+
+const numericKeys = ['min', 'max', 'minLength', 'maxLength'] as const
+type NumericValidationKey = (typeof numericKeys)[number]
+
+const labels: Record<NumericValidationKey, string> = {
+  min: 'Minimum Value',
+  max: 'Maximum Value',
+  minLength: 'Minimum Length',
+  maxLength: 'Maximum Length',
+}
+
+export function ValidationPanel({ field, onChange }: ValidationPanelProps) {
+  const handleNumberChange = (key: NumericValidationKey, value: string) => {
+    const parsedValue = value === '' ? undefined : Number(value)
+    const nextValidation = {
+      ...field.validation,
+      [key]: Number.isNaN(parsedValue) ? undefined : parsedValue,
+    }
+
+    onChange({ validation: nextValidation })
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
+        {numericKeys.map((key) => (
+          <div key={key} className="space-y-2">
+            <Label className="text-xs">{labels[key]}</Label>
+            <Input
+              type="number"
+              value={field.validation?.[key] ?? ''}
+              onChange={(event) => handleNumberChange(key, event.target.value)}
+              placeholder="0"
+            />
+          </div>
+        ))}
+        <div className="space-y-2 lg:col-span-2">
+          <Label className="text-xs">Pattern (regex)</Label>
+          <Input
+            value={field.validation?.pattern ?? ''}
+            onChange={(event) =>
+              onChange({
+                validation: {
+                  ...field.validation,
+                  pattern: event.target.value || undefined,
+                },
+              })
+            }
+            placeholder="^\\d{3}-\\d{3}-\\d{4}$"
+          />
+        </div>
+      </div>
+
+      <div className="flex flex-wrap gap-4">
+        <Toggle label="Required" checked={field.required} onCheckedChange={(checked) => onChange({ required: checked })} />
+        <Toggle label="Unique" checked={field.unique} onCheckedChange={(checked) => onChange({ unique: checked })} />
+        <Toggle label="Editable" checked={field.editable !== false} onCheckedChange={(checked) => onChange({ editable: checked })} />
+        <Toggle label="Searchable" checked={field.searchable} onCheckedChange={(checked) => onChange({ searchable: checked })} />
+      </div>
+    </div>
+  )
+}
+
+interface ToggleProps {
+  label: string
+  checked?: boolean
+  onCheckedChange: (value: boolean) => void
+}
+
+function Toggle({ label, checked, onCheckedChange }: ToggleProps) {
+  return (
+    <div className="flex items-center gap-2">
+      <Switch checked={checked ?? false} onCheckedChange={onCheckedChange} />
+      <Label className="text-xs">{label}</Label>
+    </div>
+  )
+}
diff --git a/frontends/nextjs/src/components/schema/level4/useSchemaLevel4.ts b/frontends/nextjs/src/components/schema/level4/useSchemaLevel4.ts
new file mode 100644
index 000000000..77c6e8590
--- /dev/null
+++ b/frontends/nextjs/src/components/schema/level4/useSchemaLevel4.ts
@@ -0,0 +1,127 @@
+import { useCallback, useEffect, useMemo, useState } from 'react'
+import { toast } from 'sonner'
+
+import type { FieldSchema, ModelSchema } from '@/lib/schema-types'
+
+interface UseSchemaLevel4Props {
+  schemas: ModelSchema[]
+  onSchemasChange: (schemas: ModelSchema[]) => void
+}
+
+export function useSchemaLevel4({ schemas, onSchemasChange }: UseSchemaLevel4Props) {
+  const [selectedModel, setSelectedModel] = useState<string | null>(schemas[0]?.name ?? null)
+
+  useEffect(() => {
+    if (!selectedModel && schemas[0]) {
+      setSelectedModel(schemas[0].name)
+    }
+
+    if (selectedModel && !schemas.some(schema => schema.name === selectedModel)) {
+      setSelectedModel(schemas[0]?.name ?? null)
+    }
+  }, [schemas, selectedModel])
+
+  const currentModel = useMemo(
+    () => schemas.find((schema) => schema.name === selectedModel) ?? null,
+    [schemas, selectedModel]
+  )
+
+  const applyChanges = useCallback(
+    (nextSchemas: ModelSchema[]) => {
+      onSchemasChange(nextSchemas)
+    },
+    [onSchemasChange]
+  )
+
+  const handleAddModel = useCallback(() => {
+    const newModel: ModelSchema = {
+      name: `Model_${Date.now()}`,
+      label: 'New Model',
+      fields: [],
+    }
+
+    applyChanges([...schemas, newModel])
+    setSelectedModel(newModel.name)
+    toast.success('Model created')
+  }, [applyChanges, schemas])
+
+  const handleDeleteModel = useCallback(
+    (modelName: string) => {
+      const updatedSchemas = schemas.filter((schema) => schema.name !== modelName)
+
+      applyChanges(updatedSchemas)
+      if (selectedModel === modelName) {
+        setSelectedModel(updatedSchemas[0]?.name ?? null)
+      }
+      toast.success('Model deleted')
+    },
+    [applyChanges, schemas, selectedModel]
+  )
+
+  const handleUpdateModel = useCallback(
+    (updates: Partial<ModelSchema>) => {
+      if (!currentModel) return
+
+      applyChanges(
+        schemas.map((schema) =>
+          schema.name === currentModel.name ? { ...schema, ...updates } : schema
+        )
+      )
+    },
+    [applyChanges, currentModel, schemas]
+  )
+
+  const handleAddField = useCallback(() => {
+    if (!currentModel) return
+
+    const newField: FieldSchema = {
+      name: `field_${Date.now()}`,
+      type: 'string',
+      label: 'New Field',
+      required: false,
+      editable: true,
+    }
+
+    handleUpdateModel({
+      fields: [...currentModel.fields, newField],
+    })
+    toast.success('Field added')
+  }, [currentModel, handleUpdateModel])
+
+  const handleDeleteField = useCallback(
+    (fieldName: string) => {
+      if (!currentModel) return
+
+      handleUpdateModel({
+        fields: currentModel.fields.filter((field) => field.name !== fieldName),
+      })
+      toast.success('Field deleted')
+    },
+    [currentModel, handleUpdateModel]
+  )
+
+  const handleUpdateField = useCallback(
+    (fieldName: string, updates: Partial<FieldSchema>) => {
+      if (!currentModel) return
+
+      handleUpdateModel({
+        fields: currentModel.fields.map((field) =>
+          field.name === fieldName ? { ...field, ...updates } : field
+        ),
+      })
+    },
+    [currentModel, handleUpdateModel]
+  )
+
+  return {
+    currentModel,
+    selectedModel,
+    selectModel: setSelectedModel,
+    handleAddField,
+    handleAddModel,
+    handleDeleteField,
+    handleDeleteModel,
+    handleUpdateField,
+    handleUpdateModel,
+  }
+}
diff --git a/frontends/nextjs/src/components/ui/core.ts b/frontends/nextjs/src/components/ui/core.ts
new file mode 100644
index 000000000..c590037e1
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/core.ts
@@ -0,0 +1,87 @@
+// Core UI exports: foundational atoms and common building blocks
+export * from './atoms'
+
+// Common molecules
+export {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardDescription,
+  CardContent,
+  CardFooter,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+  Alert,
+  AlertTitle,
+  AlertDescription,
+  type AlertVariant,
+  type AlertProps,
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+  RadioGroup,
+  RadioGroupItem,
+  ToggleGroup,
+  ToggleGroupItem,
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+  NavItem,
+  type NavItemProps,
+  NavLink,
+  type NavLinkProps,
+  NavGroup,
+  type NavGroupProps,
+} from './molecules'
+
+// Navigation and command organisms
+export {
+  Navigation,
+  NavigationMenu,
+  NavigationList,
+  NavigationItem,
+  NavigationTrigger,
+  NavigationContent,
+  NavigationLink,
+  NavigationBrand,
+  NavigationSeparator,
+  NavigationSpacer,
+  NavigationMobileToggle,
+  useNavigationDropdown,
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarNav,
+  SidebarSection,
+  SidebarSeparator,
+  SidebarToggle,
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandSeparator,
+  CommandShortcut,
+  useCommandShortcut,
+} from './organisms'
+
+export type { SidebarItem, SidebarProps } from './organisms'
diff --git a/frontends/nextjs/src/components/ui/data.ts b/frontends/nextjs/src/components/ui/data.ts
new file mode 100644
index 000000000..db7736da2
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/data.ts
@@ -0,0 +1,28 @@
+// Data-centric UI exports
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableRow,
+  TableHead,
+  TableCell,
+  TableCaption,
+  Form,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  useFormField,
+  Pagination,
+  SimplePagination,
+  TablePagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationEllipsis,
+  PaginationPrevious,
+  PaginationNext,
+} from './organisms'
diff --git a/frontends/nextjs/src/components/ui/index.ts b/frontends/nextjs/src/components/ui/index.ts
index 7100dd9fa..bda704572 100644
--- a/frontends/nextjs/src/components/ui/index.ts
+++ b/frontends/nextjs/src/components/ui/index.ts
@@ -1,263 +1,9 @@
-// UI Components - Atomic Design Structure
-// This file re-exports all UI components organized by atomic design pattern
+// Central UI barrel exports
+export * from './core'
+export * from './overlay'
+export * from './data'
 
-// ============================================================================
-// ATOMS - Basic building blocks (buttons, inputs, labels, etc.)
-// ============================================================================
-export {
-  // Button
-  Button,
-  type ButtonProps,
-  type ButtonVariant,
-  type ButtonSize,
-  // Input
-  Input,
-  type InputProps,
-  // Textarea
-  Textarea,
-  type TextareaProps,
-  // Label
-  Label,
-  type LabelProps,
-  // Checkbox
-  Checkbox,
-  type CheckboxProps,
-  // Switch
-  Switch,
-  type SwitchProps,
-  // Badge
-  Badge,
-  type BadgeProps,
-  type BadgeVariant,
-  // Avatar
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  type AvatarProps,
-  // Separator
-  Separator,
-  type SeparatorProps,
-  // Skeleton
-  Skeleton,
-  type SkeletonProps,
-  // Progress
-  Progress,
-  type ProgressProps,
-  // Slider
-  Slider,
-  type SliderProps,
-  // Toggle
-  Toggle,
-  type ToggleProps,
-  type ToggleVariant,
-  type ToggleSize,
-  // ScrollArea
-  ScrollArea,
-  ScrollBar,
-  type ScrollAreaProps,
-  // NEW ATOMS (available in God Tier panel via @/components/ui)
-  // Radio
-  Radio,
-  type RadioProps,
-  // Icon
-  Icon,
-  type IconProps,
-  type IconName,
-  type IconSize,
-  // Link
-  Link,
-  type LinkProps,
-  // Text
-  Text,
-  type TextProps,
-  type TextVariant,
-  type TextWeight,
-  type TextAlign,
-  // TextArea (multi-line)
-  TextArea,
-  type TextAreaProps,
-  // AtomSelect (simple dropdown)
-  AtomSelect,
-  type SelectProps as AtomSelectProps,
-  type SelectOption,
-} from './atoms'
-
-// ============================================================================
-// MOLECULES - Simple groups of atoms (cards, dialogs, selects, etc.)
-// ============================================================================
-export {
-  // Card
-  Card,
-  CardHeader,
-  CardContent,
-  CardFooter,
-  CardTitle,
-  CardDescription,
-  // Dialog
-  Dialog,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  DialogClose,
-  DialogOverlay,
-  DialogPortal,
-  // Select
-  Select,
-  SelectTrigger,
-  SelectContent,
-  SelectItem,
-  SelectGroup,
-  SelectLabel,
-  SelectSeparator,
-  SelectValue,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  // Tabs
-  Tabs,
-  TabsList,
-  TabsTrigger,
-  TabsContent,
-  // Tooltip
-  Tooltip,
-  TooltipTrigger,
-  TooltipContent,
-  TooltipProvider,
-  SimpleTooltip,
-  // Alert
-  Alert,
-  AlertTitle,
-  AlertDescription,
-  type AlertVariant,
-  type AlertProps,
-  // Accordion
-  Accordion,
-  AccordionItem,
-  AccordionTrigger,
-  AccordionContent,
-  // DropdownMenu
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuLabel,
-  DropdownMenuGroup,
-  DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSub,
-  DropdownMenuSubTrigger,
-  DropdownMenuSubContent,
-  DropdownMenuShortcut,
-  DropdownMenuPortal,
-  // RadioGroup
-  RadioGroup,
-  RadioGroupItem,
-  // Popover
-  Popover,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverAnchor,
-  // ToggleGroup
-  ToggleGroup,
-  ToggleGroupItem,
-  // Breadcrumb
-  Breadcrumb,
-  BreadcrumbList,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  BreadcrumbEllipsis,
-} from './molecules'
-
-// ============================================================================
-// ORGANISMS - Complex components (tables, forms, navigation, etc.)
-// ============================================================================
-export {
-  // Table
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableRow,
-  TableHead,
-  TableCell,
-  TableCaption,
-  // Form
-  Form,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormDescription,
-  FormMessage,
-  useFormField,
-  // Sheet (Drawer)
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-  SheetClose,
-  // Sidebar
-  Sidebar,
-  SidebarHeader,
-  SidebarContent,
-  SidebarFooter,
-  SidebarNav,
-  SidebarSection,
-  SidebarSeparator,
-  SidebarToggle,
-  // Command Palette
-  Command,
-  CommandInput,
-  CommandList,
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandSeparator,
-  CommandShortcut,
-  useCommandShortcut,
-  // Pagination
-  Pagination,
-  SimplePagination,
-  TablePagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationEllipsis,
-  PaginationPrevious,
-  PaginationNext,
-  // Navigation
-  Navigation,
-  NavigationMenu,
-  NavigationList,
-  NavigationItem,
-  NavigationTrigger,
-  NavigationContent,
-  NavigationLink,
-  NavigationBrand,
-  NavigationSeparator,
-  NavigationSpacer,
-  NavigationMobileToggle,
-  useNavigationDropdown,
-  // Alert Dialog
-  AlertDialog,
-  AlertDialogTrigger,
-  AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogCancel,
-  AlertDialogAction,
-} from './organisms'
-
-// Re-export types
-export type { SidebarItem, SidebarProps } from './organisms'
+// Preserve category-level entrypoints
+export * from './atoms'
+export * from './molecules'
+export * from './organisms'
diff --git a/frontends/nextjs/src/components/ui/molecules/index.ts b/frontends/nextjs/src/components/ui/molecules/index.ts
index 64b1d6336..3cb99d39e 100644
--- a/frontends/nextjs/src/components/ui/molecules/index.ts
+++ b/frontends/nextjs/src/components/ui/molecules/index.ts
@@ -14,6 +14,7 @@ export {
   DialogTitle,
   DialogTrigger,
 } from './overlay/Dialog'
+export { DialogSection, DialogSections } from './overlay/Dialog/Sections'
 export {
   Select,
   SelectContent,
@@ -47,6 +48,8 @@ export {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
 } from './overlay/DropdownMenu'
+export { MenuItem, type MenuItemProps } from './overlay/DropdownMenu/MenuItem'
+export { useDropdownState } from './overlay/useDropdownState'
 export { RadioGroup, RadioGroupItem } from './selection/RadioGroup'
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } from './overlay/Popover'
 export { ToggleGroup, ToggleGroupItem } from './selection/ToggleGroup'
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.tsx
index b1ba9106a..6404f85f0 100644
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.tsx
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.tsx
@@ -1,17 +1,11 @@
 'use client'
 
 import { forwardRef, ReactNode } from 'react'
-import {
-  Dialog as MuiDialog,
-  DialogTitle as MuiDialogTitle,
-  DialogContent as MuiDialogContent,
-  DialogActions,
-  DialogProps as MuiDialogProps,
-  IconButton,
-  Typography,
-  Box,
-} from '@mui/material'
+import { Dialog as MuiDialog, DialogTitle as MuiDialogTitle, DialogProps as MuiDialogProps, IconButton, Typography, Box } from '@mui/material'
 import CloseIcon from '@mui/icons-material/Close'
+import { DialogContent, type DialogContentProps } from './dialog/Body'
+import { DialogFooter, type DialogFooterProps } from './dialog/Footer'
+import { DialogHeader, type DialogHeaderProps } from './dialog/Header'
 
 export interface DialogProps extends Omit<MuiDialogProps, 'onClose'> {
   onOpenChange?: (open: boolean) => void
@@ -30,7 +24,7 @@ const Dialog = forwardRef<HTMLDivElement, DialogProps>(
         {children}
       </MuiDialog>
     )
-  }
+  },
 )
 Dialog.displayName = 'Dialog'
 
@@ -47,7 +41,7 @@ const DialogTrigger = forwardRef<HTMLDivElement, DialogTriggerProps>(
         {children}
       </Box>
     )
-  }
+  },
 )
 DialogTrigger.displayName = 'DialogTrigger'
 
@@ -83,79 +77,23 @@ const DialogClose = forwardRef<HTMLButtonElement, DialogCloseProps>(
         <CloseIcon />
       </IconButton>
     )
-  }
+  },
 )
 DialogClose.displayName = 'DialogClose'
 
-interface DialogContentProps {
-  children: ReactNode
-  className?: string
-  onClose?: () => void
-  showCloseButton?: boolean
-}
-
-const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ children, showCloseButton = true, onClose, ...props }, ref) => {
-    return (
-      <MuiDialogContent ref={ref} sx={{ position: 'relative', pt: showCloseButton ? 6 : 2 }} {...props}>
-        {showCloseButton && onClose && (
-          <IconButton
-            aria-label="close"
-            onClick={onClose}
-            sx={{ position: 'absolute', right: 8, top: 8, color: 'text.secondary' }}
-          >
-            <CloseIcon />
-          </IconButton>
-        )}
-        {children}
-      </MuiDialogContent>
-    )
-  }
-)
-DialogContent.displayName = 'DialogContent'
-
-interface DialogHeaderProps {
-  children: ReactNode
-  className?: string
-}
-
-const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Box ref={ref} sx={{ display: 'flex', flexDirection: 'column', gap: 1, pb: 2 }} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-DialogHeader.displayName = 'DialogHeader'
-
-interface DialogFooterProps {
-  children: ReactNode
-  className?: string
-}
-
-const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <DialogActions ref={ref} sx={{ px: 3, py: 2 }} {...props}>
-        {children}
-      </DialogActions>
-    )
-  }
-)
-DialogFooter.displayName = 'DialogFooter'
-
 interface DialogTitleProps {
   children: ReactNode
   className?: string
 }
 
-const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>(
-  ({ children, ...props }, ref) => {
-    return <MuiDialogTitle ref={ref} {...props}>{children}</MuiDialogTitle>
-  }
-)
+const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>((props, ref) => {
+  const { children, ...rest } = props
+  return (
+    <MuiDialogTitle ref={ref} {...rest}>
+      {children}
+    </MuiDialogTitle>
+  )
+})
 DialogTitle.displayName = 'DialogTitle'
 
 interface DialogDescriptionProps {
@@ -163,15 +101,14 @@ interface DialogDescriptionProps {
   className?: string
 }
 
-const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Typography ref={ref} variant="body2" color="text.secondary" {...props}>
-        {children}
-      </Typography>
-    )
-  }
-)
+const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProps>((props, ref) => {
+  const { children, ...rest } = props
+  return (
+    <Typography ref={ref} variant="body2" color="text.secondary" {...rest}>
+      {children}
+    </Typography>
+  )
+})
 DialogDescription.displayName = 'DialogDescription'
 
 export {
@@ -186,3 +123,5 @@ export {
   DialogTitle,
   DialogTrigger,
 }
+
+export type { DialogContentProps, DialogFooterProps, DialogHeaderProps }
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Sections.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Sections.tsx
new file mode 100644
index 000000000..5cb3694c1
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Sections.tsx
@@ -0,0 +1,34 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { Box, Divider, Stack } from '@mui/material'
+
+interface DialogSectionsProps {
+  children: ReactNode
+  spacing?: number
+  divided?: boolean
+}
+
+const DialogSections = ({ children, spacing = 3, divided = false }: DialogSectionsProps) => {
+  return (
+    <Stack spacing={spacing} divider={divided ? <Divider flexItem /> : undefined}>
+      {children}
+    </Stack>
+  )
+}
+DialogSections.displayName = 'DialogSections'
+
+interface DialogSectionProps {
+  children: ReactNode
+}
+
+const DialogSection = ({ children }: DialogSectionProps) => {
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+      {children}
+    </Box>
+  )
+}
+DialogSection.displayName = 'DialogSection'
+
+export { DialogSection, DialogSections }
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu/MenuItem.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu/MenuItem.tsx
new file mode 100644
index 000000000..d97c202a9
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu/MenuItem.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
+import { Box, Typography } from '@mui/material'
+
+import { DropdownMenuItem } from '../DropdownMenu'
+
+type DropdownMenuItemComponentProps = ComponentPropsWithoutRef<typeof DropdownMenuItem>
+
+interface MenuItemProps extends DropdownMenuItemComponentProps {
+  description?: ReactNode
+  detail?: ReactNode
+}
+
+const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
+  ({ children, description, detail, ...props }, ref) => {
+    return (
+      <DropdownMenuItem ref={ref} {...props}>
+        <Box sx={{ display: 'flex', alignItems: description ? 'flex-start' : 'center', gap: 2, width: '100%' }}>
+          <Box sx={{ flex: 1 }}>
+            <Typography variant="body2">{children}</Typography>
+            {description && (
+              <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+                {description}
+              </Typography>
+            )}
+          </Box>
+          {detail && (
+            <Box component="span" sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>
+              {detail}
+            </Box>
+          )}
+        </Box>
+      </DropdownMenuItem>
+    )
+  }
+)
+MenuItem.displayName = 'MenuItem'
+
+export type { MenuItemProps }
+export { MenuItem }
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Body.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Body.tsx
new file mode 100644
index 000000000..4110abf26
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Body.tsx
@@ -0,0 +1,37 @@
+'use client'
+
+import { forwardRef, ReactNode } from 'react'
+import { DialogContent as MuiDialogContent, IconButton } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+
+export interface DialogBodyProps {
+  children: ReactNode
+  className?: string
+  onClose?: () => void
+  showCloseButton?: boolean
+}
+
+const DialogBody = forwardRef<HTMLDivElement, DialogBodyProps>(
+  ({ children, showCloseButton = true, onClose, ...props }, ref) => {
+    return (
+      <MuiDialogContent ref={ref} sx={{ position: 'relative', pt: showCloseButton ? 6 : 2 }} {...props}>
+        {showCloseButton && onClose && (
+          <IconButton
+            aria-label="close"
+            onClick={onClose}
+            sx={{ position: 'absolute', right: 8, top: 8, color: 'text.secondary' }}
+          >
+            <CloseIcon />
+          </IconButton>
+        )}
+        {children}
+      </MuiDialogContent>
+    )
+  },
+)
+DialogBody.displayName = 'DialogBody'
+
+export type DialogContentProps = DialogBodyProps
+const DialogContent = DialogBody
+
+export { DialogBody, DialogContent }
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Footer.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Footer.tsx
new file mode 100644
index 000000000..b68366c9b
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Footer.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { forwardRef, ReactNode } from 'react'
+import { DialogActions as MuiDialogActions } from '@mui/material'
+
+export interface DialogFooterProps {
+  children: ReactNode
+  className?: string
+}
+
+const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>((props, ref) => {
+  const { children, ...rest } = props
+  return (
+    <MuiDialogActions ref={ref} sx={{ px: 3, py: 2 }} {...rest}>
+      {children}
+    </MuiDialogActions>
+  )
+})
+DialogFooter.displayName = 'DialogFooter'
+
+export { DialogFooter }
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Header.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Header.tsx
new file mode 100644
index 000000000..36c0f1b75
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Header.tsx
@@ -0,0 +1,21 @@
+'use client'
+
+import { forwardRef, ReactNode } from 'react'
+import { Box } from '@mui/material'
+
+export interface DialogHeaderProps {
+  children: ReactNode
+  className?: string
+}
+
+const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>((props, ref) => {
+  const { children, ...rest } = props
+  return (
+    <Box ref={ref} sx={{ display: 'flex', flexDirection: 'column', gap: 1, pb: 2 }} {...rest}>
+      {children}
+    </Box>
+  )
+})
+DialogHeader.displayName = 'DialogHeader'
+
+export { DialogHeader }
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/useDropdownState.ts b/frontends/nextjs/src/components/ui/molecules/overlay/useDropdownState.ts
new file mode 100644
index 000000000..f769e857a
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/molecules/overlay/useDropdownState.ts
@@ -0,0 +1,21 @@
+'use client'
+
+import { useCallback, useState, type MouseEvent } from 'react'
+
+function useDropdownState<TAnchor extends HTMLElement = HTMLElement>() {
+  const [anchorEl, setAnchorEl] = useState<TAnchor | null>(null)
+
+  const open = Boolean(anchorEl)
+
+  const handleOpen = useCallback((event: MouseEvent<TAnchor>) => {
+    setAnchorEl(event.currentTarget)
+  }, [])
+
+  const handleClose = useCallback(() => {
+    setAnchorEl(null)
+  }, [])
+
+  return { anchorEl, open, setAnchorEl, handleOpen, handleClose }
+}
+
+export { useDropdownState }
diff --git a/frontends/nextjs/src/components/ui/navigation/dropdown-menu.ts b/frontends/nextjs/src/components/ui/navigation/dropdown-menu.ts
index 99a3d8e99..4366baf84 100644
--- a/frontends/nextjs/src/components/ui/navigation/dropdown-menu.ts
+++ b/frontends/nextjs/src/components/ui/navigation/dropdown-menu.ts
@@ -15,4 +15,7 @@ export {
   DropdownMenuCheckboxItem,
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
+  MenuItem,
+  type MenuItemProps,
+  useDropdownState,
 } from './molecules/DropdownMenu'
diff --git a/frontends/nextjs/src/components/ui/navigation/molecules/DropdownMenu/index.ts b/frontends/nextjs/src/components/ui/navigation/molecules/DropdownMenu/index.ts
new file mode 100644
index 000000000..c64b6e7bd
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/navigation/molecules/DropdownMenu/index.ts
@@ -0,0 +1,19 @@
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+} from '../../../molecules/overlay/DropdownMenu'
+export { MenuItem, type MenuItemProps } from '../../../molecules/overlay/DropdownMenu/MenuItem'
+export { useDropdownState } from '../../../molecules/overlay/useDropdownState'
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/AlertDialog.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/AlertDialog.tsx
index 270072d29..e2a904553 100644
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/AlertDialog.tsx
+++ b/frontends/nextjs/src/components/ui/organisms/dialogs/AlertDialog.tsx
@@ -1,24 +1,16 @@
-// TODO: Split this file (268 LOC) into smaller organisms (<150 LOC each)
 'use client'
 
 import { forwardRef, ReactNode } from 'react'
-import {
-  Dialog,
-  DialogTitle,
-  DialogContent,
-  DialogContentText,
-  DialogActions,
-  Button,
-  IconButton,
-  Typography,
-} from '@mui/material'
-import CloseIcon from '@mui/icons-material/Close'
-import WarningAmberIcon from '@mui/icons-material/WarningAmber'
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
-import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
+import { Dialog } from '@mui/material'
+
+import {
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from './alert/Content'
+import { AlertDialogAction, AlertDialogCancel, AlertDialogFooter } from './alert/Actions'
 
-// AlertDialog Root
 interface AlertDialogProps {
   open: boolean
   onClose?: () => void
@@ -52,7 +44,6 @@ const AlertDialog = forwardRef<HTMLDivElement, AlertDialogProps>(
 )
 AlertDialog.displayName = 'AlertDialog'
 
-// AlertDialogTrigger - element that opens dialog
 interface AlertDialogTriggerProps {
   children: ReactNode
   onClick?: () => void
@@ -70,200 +61,14 @@ const AlertDialogTrigger = forwardRef<HTMLSpanElement, AlertDialogTriggerProps>(
 )
 AlertDialogTrigger.displayName = 'AlertDialogTrigger'
 
-// AlertDialogContent - wrapper for dialog content
-interface AlertDialogContentProps {
-  children: ReactNode
-  showCloseButton?: boolean
-  onClose?: () => void
-  className?: string
-}
-
-const AlertDialogContent = forwardRef<HTMLDivElement, AlertDialogContentProps>(
-  ({ children, showCloseButton = false, onClose, className, ...props }, ref) => {
-    return (
-      <>
-        {showCloseButton && onClose && (
-          <IconButton
-            onClick={onClose}
-            sx={{
-              position: 'absolute',
-              right: 8,
-              top: 8,
-              color: 'text.secondary',
-            }}
-          >
-            <CloseIcon />
-          </IconButton>
-        )}
-        {children}
-      </>
-    )
-  }
-)
-AlertDialogContent.displayName = 'AlertDialogContent'
-
-// AlertDialogHeader
-interface AlertDialogHeaderProps {
-  children: ReactNode
-  icon?: 'warning' | 'error' | 'info' | 'success' | ReactNode
-}
-
-const AlertDialogHeader = forwardRef<HTMLDivElement, AlertDialogHeaderProps>(
-  ({ children, icon, ...props }, ref) => {
-    const getIcon = () => {
-      if (!icon) return null
-      if (typeof icon !== 'string') return icon
-
-      const iconMap = {
-        warning: <WarningAmberIcon color="warning" sx={{ fontSize: 40 }} />,
-        error: <ErrorOutlineIcon color="error" sx={{ fontSize: 40 }} />,
-        info: <InfoOutlinedIcon color="info" sx={{ fontSize: 40 }} />,
-        success: <CheckCircleOutlineIcon color="success" sx={{ fontSize: 40 }} />,
-      }
-      return iconMap[icon]
-    }
-
-    const iconElement = getIcon()
-
-    return (
-      <DialogTitle
-        ref={ref}
-        id="alert-dialog-title"
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: iconElement ? 'center' : 'flex-start',
-          gap: 1,
-          pt: 3,
-          pb: 0,
-        }}
-        {...props}
-      >
-        {iconElement}
-        {children}
-      </DialogTitle>
-    )
-  }
-)
-AlertDialogHeader.displayName = 'AlertDialogHeader'
-
-// AlertDialogTitle
-interface AlertDialogTitleProps {
-  children: ReactNode
-  className?: string
-}
-
-const AlertDialogTitle = forwardRef<HTMLHeadingElement, AlertDialogTitleProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Typography
-        ref={ref}
-        variant="h6"
-        component="span"
-        className={className}
-        sx={{
-          fontWeight: 600,
-          textAlign: 'inherit',
-        }}
-        {...props}
-      >
-        {children}
-      </Typography>
-    )
-  }
-)
-AlertDialogTitle.displayName = 'AlertDialogTitle'
-
-// AlertDialogDescription
-interface AlertDialogDescriptionProps {
-  children: ReactNode
-  className?: string
-}
-
-const AlertDialogDescription = forwardRef<HTMLDivElement, AlertDialogDescriptionProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <DialogContent ref={ref} className={className} sx={{ pt: 2 }} {...props}>
-        <DialogContentText id="alert-dialog-description">
-          {children}
-        </DialogContentText>
-      </DialogContent>
-    )
-  }
-)
-AlertDialogDescription.displayName = 'AlertDialogDescription'
-
-// AlertDialogFooter
-interface AlertDialogFooterProps {
-  children: ReactNode
-}
-
-const AlertDialogFooter = forwardRef<HTMLDivElement, AlertDialogFooterProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <DialogActions ref={ref} sx={{ p: 2, pt: 0 }} {...props}>
-        {children}
-      </DialogActions>
-    )
-  }
-)
-AlertDialogFooter.displayName = 'AlertDialogFooter'
-
-// AlertDialogCancel
-interface AlertDialogCancelProps {
-  children?: ReactNode
-  onClick?: () => void
-  className?: string
-}
-
-const AlertDialogCancel = forwardRef<HTMLButtonElement, AlertDialogCancelProps>(
-  ({ children = 'Cancel', onClick, className, ...props }, ref) => {
-    return (
-      <Button ref={ref} onClick={onClick} color="inherit" className={className} {...props}>
-        {children}
-      </Button>
-    )
-  }
-)
-AlertDialogCancel.displayName = 'AlertDialogCancel'
-
-// AlertDialogAction
-interface AlertDialogActionProps {
-  children?: ReactNode
-  onClick?: () => void
-  color?: 'primary' | 'error' | 'warning' | 'success' | 'info'
-  variant?: 'text' | 'outlined' | 'contained'
-  autoFocus?: boolean
-  className?: string
-}
-
-const AlertDialogAction = forwardRef<HTMLButtonElement, AlertDialogActionProps>(
-  ({ children = 'Confirm', onClick, color = 'primary', variant = 'contained', autoFocus = true, className, ...props }, ref) => {
-    return (
-      <Button
-        ref={ref}
-        onClick={onClick}
-        color={color}
-        variant={variant}
-        autoFocus={autoFocus}
-        className={className}
-        {...props}
-      >
-        {children}
-      </Button>
-    )
-  }
-)
-AlertDialogAction.displayName = 'AlertDialogAction'
-
 export {
   AlertDialog,
-  AlertDialogTrigger,
+  AlertDialogAction,
+  AlertDialogCancel,
   AlertDialogContent,
-  AlertDialogHeader,
-  AlertDialogTitle,
   AlertDialogDescription,
   AlertDialogFooter,
-  AlertDialogCancel,
-  AlertDialogAction,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
 }
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Command.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/Command.tsx
index 7005d4e05..a812c86f2 100644
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Command.tsx
+++ b/frontends/nextjs/src/components/ui/organisms/dialogs/Command.tsx
@@ -1,3 +1,6 @@
 'use client'
 
 export * from './command'
+export * from './Command/Palette'
+export * from './Command/Results'
+export * from './Command/useCommandState'
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Palette.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Palette.tsx
new file mode 100644
index 000000000..d275cb4ab
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Palette.tsx
@@ -0,0 +1,38 @@
+'use client'
+
+import { ReactNode } from 'react'
+
+import { CommandDialog } from '../command'
+
+interface CommandPaletteProps {
+  children: ReactNode
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  placeholder?: string
+  search: string
+  onSearchChange: (value: string) => void
+}
+
+const CommandPalette = ({
+  children,
+  open,
+  onOpenChange,
+  placeholder = 'Type a command or search...',
+  search,
+  onSearchChange,
+}: CommandPaletteProps) => {
+  return (
+    <CommandDialog open={open} onClose={() => onOpenChange(false)}>
+      <CommandDialog.Input
+        value={search}
+        onChange={onSearchChange}
+        placeholder={placeholder}
+        autoFocus
+      />
+      {children}
+    </CommandDialog>
+  )
+}
+
+export { CommandPalette }
+export type { CommandPaletteProps }
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Results.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Results.tsx
new file mode 100644
index 000000000..4e72f24b6
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Results.tsx
@@ -0,0 +1,56 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { Box, Typography } from '@mui/material'
+
+import { CommandDialog } from '../command'
+import type { CommandGroup, CommandItem } from '../command/command.types'
+
+interface CommandResultsProps {
+  groups: CommandGroup[]
+  emptyMessage?: ReactNode
+  onSelect?: (item: CommandItem) => void
+}
+
+const CommandResults = ({ groups, emptyMessage = 'No results found.', onSelect }: CommandResultsProps) => {
+  const hasResults = groups.some((group) => group.items.length > 0)
+
+  return (
+    <CommandDialog.List>
+      {hasResults ? (
+        groups.map((group, index) => (
+          <CommandDialog.Group key={group.heading ?? index} heading={group.heading}>
+            {group.items.map((item) => (
+              <CommandDialog.Item
+                key={item.id}
+                icon={item.icon}
+                shortcut={item.shortcut}
+                disabled={item.disabled}
+                onSelect={() => {
+                  item.onSelect?.()
+                  onSelect?.(item)
+                }}
+              >
+                <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+                  <Typography variant="body2" component="span">
+                    {item.label}
+                  </Typography>
+                  {item.description && (
+                    <Typography variant="caption" color="text.secondary" component="span">
+                      {item.description}
+                    </Typography>
+                  )}
+                </Box>
+              </CommandDialog.Item>
+            ))}
+          </CommandDialog.Group>
+        ))
+      ) : (
+        <CommandDialog.Empty>{emptyMessage}</CommandDialog.Empty>
+      )}
+    </CommandDialog.List>
+  )
+}
+
+export { CommandResults }
+export type { CommandResultsProps }
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Command/useCommandState.ts b/frontends/nextjs/src/components/ui/organisms/dialogs/Command/useCommandState.ts
new file mode 100644
index 000000000..796bfa395
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/organisms/dialogs/Command/useCommandState.ts
@@ -0,0 +1,59 @@
+'use client'
+
+import { useMemo, useState } from 'react'
+
+import type { CommandGroup, CommandItem } from '../command/command.types'
+
+interface UseCommandStateOptions {
+  groups: CommandGroup[]
+  defaultOpen?: boolean
+}
+
+interface UseCommandStateResult {
+  filteredGroups: CommandGroup[]
+  open: boolean
+  search: string
+  setOpen: (open: boolean) => void
+  setSearch: (value: string) => void
+  close: () => void
+}
+
+const filterItems = (items: CommandItem[], query: string) => {
+  if (!query) return items
+  const lowered = query.toLowerCase()
+  return items.filter((item) => {
+    const labelMatch = item.label.toLowerCase().includes(lowered)
+    const keywordsMatch = item.keywords?.some((keyword) => keyword.toLowerCase().includes(lowered))
+    const descriptionMatch = item.description?.toLowerCase().includes(lowered)
+
+    return labelMatch || keywordsMatch || descriptionMatch
+  })
+}
+
+const useCommandState = ({ groups, defaultOpen = false }: UseCommandStateOptions): UseCommandStateResult => {
+  const [open, setOpen] = useState(defaultOpen)
+  const [search, setSearch] = useState('')
+
+  const filteredGroups = useMemo(() => {
+    if (!search) return groups
+
+    return groups
+      .map((group) => ({
+        ...group,
+        items: filterItems(group.items, search),
+      }))
+      .filter((group) => group.items.length > 0)
+  }, [groups, search])
+
+  return {
+    filteredGroups,
+    open,
+    search,
+    setOpen,
+    setSearch,
+    close: () => setOpen(false),
+  }
+}
+
+export { useCommandState }
+export type { UseCommandStateOptions, UseCommandStateResult }
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet.tsx
index 0ea3c093e..cf4bdeba3 100644
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet.tsx
+++ b/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet.tsx
@@ -1,255 +1,4 @@
-// TODO: Split this file (254 LOC) into smaller organisms (<150 LOC each)
 'use client'
 
-import { forwardRef, ReactNode } from 'react'
-import {
-  Drawer,
-  DrawerProps,
-  Box,
-  IconButton,
-  Typography,
-} from '@mui/material'
-import CloseIcon from '@mui/icons-material/Close'
-
-// Sheet (Drawer) Root Component
-interface SheetProps extends Omit<DrawerProps, 'anchor'> {
-  children: ReactNode
-  side?: 'left' | 'right' | 'top' | 'bottom'
-  onOpenChange?: (open: boolean) => void
-}
-
-const Sheet = forwardRef<HTMLDivElement, SheetProps>(
-  ({ children, side = 'right', open, onClose, onOpenChange, ...props }, ref) => {
-    const handleClose = (_event: React.SyntheticEvent | object, reason: 'backdropClick' | 'escapeKeyDown') => {
-      if (typeof onClose === 'function') {
-        onClose(_event, reason)
-      }
-      onOpenChange?.(false)
-    }
-    return (
-      <Drawer
-        ref={ref}
-        anchor={side}
-        open={open}
-        onClose={handleClose}
-        {...props}
-      >
-        {children}
-      </Drawer>
-    )
-  }
-)
-Sheet.displayName = 'Sheet'
-
-// SheetTrigger - returns children with onClick handler
-interface SheetTriggerProps {
-  children: ReactNode
-  onClick?: () => void
-  asChild?: boolean
-}
-
-const SheetTrigger = forwardRef<HTMLButtonElement, SheetTriggerProps>(
-  ({ children, onClick, asChild, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        component="span"
-        onClick={onClick}
-        sx={{ cursor: 'pointer' }}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-SheetTrigger.displayName = 'SheetTrigger'
-
-// SheetContent
-interface SheetContentProps {
-  children: ReactNode
-  side?: 'left' | 'right' | 'top' | 'bottom'
-  onClose?: () => void
-  showCloseButton?: boolean
-  className?: string
-}
-
-const SheetContent = forwardRef<HTMLDivElement, SheetContentProps>(
-  ({ children, side = 'right', onClose, showCloseButton = true, ...props }, ref) => {
-    const isHorizontal = side === 'left' || side === 'right'
-    
-    return (
-      <Box
-        ref={ref}
-        sx={{
-          width: isHorizontal ? 320 : '100%',
-          height: isHorizontal ? '100%' : 'auto',
-          maxHeight: !isHorizontal ? '80vh' : undefined,
-          display: 'flex',
-          flexDirection: 'column',
-          p: 3,
-          bgcolor: 'background.paper',
-        }}
-        {...props}
-      >
-        {showCloseButton && (
-          <IconButton
-            onClick={onClose}
-            sx={{
-              position: 'absolute',
-              top: 8,
-              right: 8,
-              color: 'text.secondary',
-            }}
-            size="small"
-          >
-            <CloseIcon fontSize="small" />
-          </IconButton>
-        )}
-        {children}
-      </Box>
-    )
-  }
-)
-SheetContent.displayName = 'SheetContent'
-
-// SheetHeader
-interface SheetHeaderProps {
-  children: ReactNode
-  className?: string
-}
-
-const SheetHeader = forwardRef<HTMLDivElement, SheetHeaderProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        sx={{
-          display: 'flex',
-          flexDirection: 'column',
-          gap: 0.5,
-          pb: 2,
-          textAlign: 'left',
-        }}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-SheetHeader.displayName = 'SheetHeader'
-
-// SheetFooter
-interface SheetFooterProps {
-  children: ReactNode
-  className?: string
-}
-
-const SheetFooter = forwardRef<HTMLDivElement, SheetFooterProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        sx={{
-          display: 'flex',
-          flexDirection: 'column-reverse',
-          gap: 1,
-          pt: 2,
-          mt: 'auto',
-          sm: {
-            flexDirection: 'row',
-            justifyContent: 'flex-end',
-          },
-        }}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-SheetFooter.displayName = 'SheetFooter'
-
-// SheetTitle
-interface SheetTitleProps {
-  children: ReactNode
-  className?: string
-}
-
-const SheetTitle = forwardRef<HTMLHeadingElement, SheetTitleProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Typography
-        ref={ref}
-        variant="h6"
-        component="h2"
-        sx={{
-          fontWeight: 600,
-          lineHeight: 1.2,
-        }}
-        {...props}
-      >
-        {children}
-      </Typography>
-    )
-  }
-)
-SheetTitle.displayName = 'SheetTitle'
-
-// SheetDescription
-interface SheetDescriptionProps {
-  children: ReactNode
-  className?: string
-}
-
-const SheetDescription = forwardRef<HTMLParagraphElement, SheetDescriptionProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Typography
-        ref={ref}
-        variant="body2"
-        color="text.secondary"
-        {...props}
-      >
-        {children}
-      </Typography>
-    )
-  }
-)
-SheetDescription.displayName = 'SheetDescription'
-
-// SheetClose - button to close sheet
-interface SheetCloseProps {
-  children: ReactNode
-  onClick?: () => void
-  asChild?: boolean
-}
-
-const SheetClose = forwardRef<HTMLButtonElement, SheetCloseProps>(
-  ({ children, onClick, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        component="span"
-        onClick={onClick}
-        sx={{ cursor: 'pointer' }}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-SheetClose.displayName = 'SheetClose'
-
-export {
-  Sheet,
-  SheetTrigger,
-  SheetContent,
-  SheetHeader,
-  SheetFooter,
-  SheetTitle,
-  SheetDescription,
-  SheetClose,
-}
+export { Sheet, SheetClose, SheetContent, SheetTrigger } from './Sheet/Drawer'
+export { SheetDescription, SheetFooter, SheetHeader, SheetTitle } from './Sheet/Header'
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Drawer.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Drawer.tsx
new file mode 100644
index 000000000..0f2f83f09
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Drawer.tsx
@@ -0,0 +1,129 @@
+'use client'
+
+import { forwardRef, ReactNode, SyntheticEvent } from 'react'
+import { Box, Drawer, DrawerProps, IconButton } from '@mui/material'
+import CloseIcon from '@mui/icons-material/Close'
+
+interface SheetProps extends Omit<DrawerProps, 'anchor'> {
+  children: ReactNode
+  side?: 'left' | 'right' | 'top' | 'bottom'
+  onOpenChange?: (open: boolean) => void
+}
+
+const Sheet = forwardRef<HTMLDivElement, SheetProps>(
+  ({ children, side = 'right', open, onClose, onOpenChange, ...props }, ref) => {
+    const handleClose = (_event: SyntheticEvent | object, reason: 'backdropClick' | 'escapeKeyDown') => {
+      if (typeof onClose === 'function') {
+        onClose(_event, reason)
+      }
+      onOpenChange?.(false)
+    }
+    return (
+      <Drawer
+        ref={ref}
+        anchor={side}
+        open={open}
+        onClose={handleClose}
+        {...props}
+      >
+        {children}
+      </Drawer>
+    )
+  }
+)
+Sheet.displayName = 'Sheet'
+
+interface SheetTriggerProps {
+  children: ReactNode
+  onClick?: () => void
+  asChild?: boolean
+}
+
+const SheetTrigger = forwardRef<HTMLButtonElement, SheetTriggerProps>(
+  ({ children, onClick, asChild, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        component="span"
+        onClick={onClick}
+        sx={{ cursor: 'pointer' }}
+        {...props}
+      >
+        {children}
+      </Box>
+    )
+  }
+)
+SheetTrigger.displayName = 'SheetTrigger'
+
+interface SheetContentProps {
+  children: ReactNode
+  side?: 'left' | 'right' | 'top' | 'bottom'
+  onClose?: () => void
+  showCloseButton?: boolean
+  className?: string
+}
+
+const SheetContent = forwardRef<HTMLDivElement, SheetContentProps>(
+  ({ children, side = 'right', onClose, showCloseButton = true, ...props }, ref) => {
+    const isHorizontal = side === 'left' || side === 'right'
+
+    return (
+      <Box
+        ref={ref}
+        sx={{
+          width: isHorizontal ? 320 : '100%',
+          height: isHorizontal ? '100%' : 'auto',
+          maxHeight: !isHorizontal ? '80vh' : undefined,
+          display: 'flex',
+          flexDirection: 'column',
+          p: 3,
+          bgcolor: 'background.paper',
+        }}
+        {...props}
+      >
+        {showCloseButton && (
+          <IconButton
+            onClick={onClose}
+            sx={{
+              position: 'absolute',
+              top: 8,
+              right: 8,
+              color: 'text.secondary',
+            }}
+            size="small"
+          >
+            <CloseIcon fontSize="small" />
+          </IconButton>
+        )}
+        {children}
+      </Box>
+    )
+  }
+)
+SheetContent.displayName = 'SheetContent'
+
+interface SheetCloseProps {
+  children: ReactNode
+  onClick?: () => void
+  asChild?: boolean
+}
+
+const SheetClose = forwardRef<HTMLButtonElement, SheetCloseProps>(
+  ({ children, onClick, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        component="span"
+        onClick={onClick}
+        sx={{ cursor: 'pointer' }}
+        {...props}
+      >
+        {children}
+      </Box>
+    )
+  }
+)
+SheetClose.displayName = 'SheetClose'
+
+export { Sheet, SheetClose, SheetContent, SheetTrigger }
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Header.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Header.tsx
new file mode 100644
index 000000000..09d954bd5
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Header.tsx
@@ -0,0 +1,105 @@
+'use client'
+
+import { forwardRef, ReactNode } from 'react'
+import { Box, Typography } from '@mui/material'
+
+interface SheetHeaderProps {
+  children: ReactNode
+  className?: string
+}
+
+const SheetHeader = forwardRef<HTMLDivElement, SheetHeaderProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          gap: 0.5,
+          pb: 2,
+          textAlign: 'left',
+        }}
+        {...props}
+      >
+        {children}
+      </Box>
+    )
+  }
+)
+SheetHeader.displayName = 'SheetHeader'
+
+interface SheetFooterProps {
+  children: ReactNode
+  className?: string
+}
+
+const SheetFooter = forwardRef<HTMLDivElement, SheetFooterProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        sx={{
+          display: 'flex',
+          flexDirection: { xs: 'column-reverse', sm: 'row' },
+          gap: 1,
+          pt: 2,
+          mt: 'auto',
+          justifyContent: { sm: 'flex-end' },
+        }}
+        {...props}
+      >
+        {children}
+      </Box>
+    )
+  }
+)
+SheetFooter.displayName = 'SheetFooter'
+
+interface SheetTitleProps {
+  children: ReactNode
+  className?: string
+}
+
+const SheetTitle = forwardRef<HTMLHeadingElement, SheetTitleProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Typography
+        ref={ref}
+        variant="h6"
+        component="h2"
+        sx={{
+          fontWeight: 600,
+          lineHeight: 1.2,
+        }}
+        {...props}
+      >
+        {children}
+      </Typography>
+    )
+  }
+)
+SheetTitle.displayName = 'SheetTitle'
+
+interface SheetDescriptionProps {
+  children: ReactNode
+  className?: string
+}
+
+const SheetDescription = forwardRef<HTMLParagraphElement, SheetDescriptionProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <Typography
+        ref={ref}
+        variant="body2"
+        color="text.secondary"
+        {...props}
+      >
+        {children}
+      </Typography>
+    )
+  }
+)
+SheetDescription.displayName = 'SheetDescription'
+
+export { SheetDescription, SheetFooter, SheetHeader, SheetTitle }
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/alert/Actions.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/alert/Actions.tsx
new file mode 100644
index 000000000..6670952cb
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/organisms/dialogs/alert/Actions.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import { forwardRef, ReactNode } from 'react'
+import { Button, DialogActions } from '@mui/material'
+
+interface AlertDialogFooterProps {
+  children: ReactNode
+}
+
+const AlertDialogFooter = forwardRef<HTMLDivElement, AlertDialogFooterProps>(
+  ({ children, ...props }, ref) => {
+    return (
+      <DialogActions ref={ref} sx={{ p: 2, pt: 0 }} {...props}>
+        {children}
+      </DialogActions>
+    )
+  }
+)
+AlertDialogFooter.displayName = 'AlertDialogFooter'
+
+interface AlertDialogCancelProps {
+  children?: ReactNode
+  onClick?: () => void
+  className?: string
+}
+
+const AlertDialogCancel = forwardRef<HTMLButtonElement, AlertDialogCancelProps>(
+  ({ children = 'Cancel', onClick, className, ...props }, ref) => {
+    return (
+      <Button ref={ref} onClick={onClick} color="inherit" className={className} {...props}>
+        {children}
+      </Button>
+    )
+  }
+)
+AlertDialogCancel.displayName = 'AlertDialogCancel'
+
+interface AlertDialogActionProps {
+  children?: ReactNode
+  onClick?: () => void
+  color?: 'primary' | 'error' | 'warning' | 'success' | 'info'
+  variant?: 'text' | 'outlined' | 'contained'
+  autoFocus?: boolean
+  className?: string
+}
+
+const AlertDialogAction = forwardRef<HTMLButtonElement, AlertDialogActionProps>(
+  (
+    { children = 'Confirm', onClick, color = 'primary', variant = 'contained', autoFocus = true, className, ...props },
+    ref
+  ) => {
+    return (
+      <Button
+        ref={ref}
+        onClick={onClick}
+        color={color}
+        variant={variant}
+        autoFocus={autoFocus}
+        className={className}
+        {...props}
+      >
+        {children}
+      </Button>
+    )
+  }
+)
+AlertDialogAction.displayName = 'AlertDialogAction'
+
+export { AlertDialogAction, AlertDialogCancel, AlertDialogFooter }
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/alert/Content.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/alert/Content.tsx
new file mode 100644
index 000000000..ca1261344
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/organisms/dialogs/alert/Content.tsx
@@ -0,0 +1,145 @@
+'use client'
+
+import { forwardRef, ReactNode } from 'react'
+import {
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
+  IconButton,
+  Typography,
+} from '@mui/material'
+import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'
+import CloseIcon from '@mui/icons-material/Close'
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
+import WarningAmberIcon from '@mui/icons-material/WarningAmber'
+
+interface AlertDialogContentProps {
+  children: ReactNode
+  showCloseButton?: boolean
+  onClose?: () => void
+  className?: string
+}
+
+const AlertDialogContent = ({
+  children,
+  showCloseButton = false,
+  onClose,
+  className,
+  ...props
+}: AlertDialogContentProps) => {
+  return (
+    <>
+      {showCloseButton && onClose && (
+        <IconButton
+          onClick={onClose}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            top: 8,
+            color: 'text.secondary',
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+      )}
+      {children}
+    </>
+  )
+}
+AlertDialogContent.displayName = 'AlertDialogContent'
+
+interface AlertDialogHeaderProps {
+  children: ReactNode
+  icon?: 'warning' | 'error' | 'info' | 'success' | ReactNode
+}
+
+const AlertDialogHeader = forwardRef<HTMLDivElement, AlertDialogHeaderProps>(
+  ({ children, icon, ...props }, ref) => {
+    const getIcon = () => {
+      if (!icon) return null
+      if (typeof icon !== 'string') return icon
+
+      const iconMap = {
+        warning: <WarningAmberIcon color="warning" sx={{ fontSize: 40 }} />,
+        error: <ErrorOutlineIcon color="error" sx={{ fontSize: 40 }} />,
+        info: <InfoOutlinedIcon color="info" sx={{ fontSize: 40 }} />,
+        success: <CheckCircleOutlineIcon color="success" sx={{ fontSize: 40 }} />,
+      }
+      return iconMap[icon]
+    }
+
+    const iconElement = getIcon()
+
+    return (
+      <DialogTitle
+        ref={ref}
+        id="alert-dialog-title"
+        sx={{
+          display: 'flex',
+          flexDirection: 'column',
+          alignItems: iconElement ? 'center' : 'flex-start',
+          gap: 1,
+          pt: 3,
+          pb: 0,
+        }}
+        {...props}
+      >
+        {iconElement}
+        {children}
+      </DialogTitle>
+    )
+  }
+)
+AlertDialogHeader.displayName = 'AlertDialogHeader'
+
+interface AlertDialogTitleProps {
+  children: ReactNode
+  className?: string
+}
+
+const AlertDialogTitle = forwardRef<HTMLHeadingElement, AlertDialogTitleProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <Typography
+        ref={ref}
+        variant="h6"
+        component="span"
+        className={className}
+        sx={{
+          fontWeight: 600,
+          textAlign: 'inherit',
+        }}
+        {...props}
+      >
+        {children}
+      </Typography>
+    )
+  }
+)
+AlertDialogTitle.displayName = 'AlertDialogTitle'
+
+interface AlertDialogDescriptionProps {
+  children: ReactNode
+  className?: string
+}
+
+const AlertDialogDescription = forwardRef<HTMLDivElement, AlertDialogDescriptionProps>(
+  ({ children, className, ...props }, ref) => {
+    return (
+      <DialogContent ref={ref} className={className} sx={{ pt: 2 }} {...props}>
+        <DialogContentText id="alert-dialog-description">
+          {children}
+        </DialogContentText>
+      </DialogContent>
+    )
+  }
+)
+AlertDialogDescription.displayName = 'AlertDialogDescription'
+
+export {
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogHeader,
+  AlertDialogTitle,
+}
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/MenuItemList.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/MenuItemList.tsx
new file mode 100644
index 000000000..29b5007b5
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/organisms/navigation/MenuItemList.tsx
@@ -0,0 +1,109 @@
+'use client'
+
+import { forwardRef, ReactNode, useState } from 'react'
+import {
+  Box,
+  Collapse,
+  List,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+} from '@mui/material'
+import ExpandLess from '@mui/icons-material/ExpandLess'
+import ExpandMore from '@mui/icons-material/ExpandMore'
+
+interface SidebarItem {
+  label: string
+  icon?: ReactNode
+  href?: string
+  onClick?: () => void
+  children?: SidebarItem[]
+  badge?: ReactNode
+  disabled?: boolean
+}
+
+interface MenuItemListProps {
+  items: SidebarItem[]
+  dense?: boolean
+}
+
+const MenuItemList = forwardRef<HTMLUListElement, MenuItemListProps>(
+  ({ items, dense = false, ...props }, ref) => {
+    const [openItems, setOpenItems] = useState<Set<string>>(new Set())
+
+    const toggleItem = (label: string) => {
+      setOpenItems(prev => {
+        const next = new Set(prev)
+        if (next.has(label)) {
+          next.delete(label)
+        } else {
+          next.add(label)
+        }
+        return next
+      })
+    }
+
+    const renderItem = (item: SidebarItem, depth: number = 0) => {
+      const hasChildren = item.children && item.children.length > 0
+      const isOpen = openItems.has(item.label)
+
+      return (
+        <Box key={item.label}>
+          <ListItem disablePadding>
+            <ListItemButton
+              onClick={() => {
+                if (hasChildren) {
+                  toggleItem(item.label)
+                } else if (item.onClick) {
+                  item.onClick()
+                }
+              }}
+              disabled={item.disabled}
+              sx={{
+                pl: 2 + depth * 2,
+                minHeight: dense ? 40 : 48,
+              }}
+            >
+              {item.icon && (
+                <ListItemIcon sx={{ minWidth: 36 }}>
+                  {item.icon}
+                </ListItemIcon>
+              )}
+              <ListItemText
+                primary={item.label}
+                primaryTypographyProps={{
+                  variant: dense ? 'body2' : 'body1',
+                  fontWeight: depth === 0 ? 500 : 400,
+                }}
+              />
+              {item.badge && (
+                <Box sx={{ mr: 1 }}>
+                  {item.badge}
+                </Box>
+              )}
+              {hasChildren && (isOpen ? <ExpandLess /> : <ExpandMore />)}
+            </ListItemButton>
+          </ListItem>
+          {hasChildren && (
+            <Collapse in={isOpen} timeout="auto" unmountOnExit>
+              <List component="div" disablePadding dense={dense}>
+                {item.children!.map(child => renderItem(child, depth + 1))}
+              </List>
+            </Collapse>
+          )}
+        </Box>
+      )
+    }
+
+    return (
+      <List ref={ref} dense={dense} {...props}>
+        {items.map(item => renderItem(item))}
+      </List>
+    )
+  }
+)
+MenuItemList.displayName = 'MenuItemList'
+
+export { MenuItemList }
+export type { MenuItemListProps, SidebarItem }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar.tsx
index bd9bdb0a8..760030fbe 100644
--- a/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar.tsx
+++ b/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar.tsx
@@ -1,37 +1,18 @@
-// TODO: Split this file (309 LOC) into smaller organisms (<150 LOC each)
 'use client'
 
-import { forwardRef, ReactNode, useState } from 'react'
+import { forwardRef, ReactNode } from 'react'
 import {
   Box,
   Drawer,
-  List,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Collapse,
-  Divider,
   IconButton,
-  useTheme,
   useMediaQuery,
-  Typography,
+  useTheme,
 } from '@mui/material'
 import MenuIcon from '@mui/icons-material/Menu'
-import ExpandLess from '@mui/icons-material/ExpandLess'
-import ExpandMore from '@mui/icons-material/ExpandMore'
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
 
-// Types
-interface SidebarItem {
-  label: string
-  icon?: ReactNode
-  href?: string
-  onClick?: () => void
-  children?: SidebarItem[]
-  badge?: ReactNode
-  disabled?: boolean
-}
+import { MenuItemList, type MenuItemListProps, type SidebarItem } from './MenuItemList'
+import { SidebarHeader, type SidebarHeaderProps } from './Sidebar/Header'
+import { SidebarSection, SidebarSeparator } from './Sidebar/NavSections'
 
 interface SidebarProps {
   children?: ReactNode
@@ -42,7 +23,6 @@ interface SidebarProps {
   anchor?: 'left' | 'right'
 }
 
-// Sidebar Root
 const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
   ({ children, open = true, onClose, width = 280, variant = 'permanent', anchor = 'left', ...props }, ref) => {
     const theme = useTheme()
@@ -76,227 +56,66 @@ const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
 )
 Sidebar.displayName = 'Sidebar'
 
-// SidebarHeader
-interface SidebarHeaderProps {
-  children?: ReactNode
-  onClose?: () => void
-  showCloseButton?: boolean
-}
-
-const SidebarHeader = forwardRef<HTMLDivElement, SidebarHeaderProps>(
-  ({ children, onClose, showCloseButton = false, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          p: 2,
-          minHeight: 64,
-        }}
-        {...props}
-      >
-        {children}
-        {showCloseButton && onClose && (
-          <IconButton onClick={onClose} size="small">
-            <ChevronLeftIcon />
-          </IconButton>
-        )}
-      </Box>
-    )
-  }
-)
-SidebarHeader.displayName = 'SidebarHeader'
-
-// SidebarContent
 interface SidebarContentProps {
   children: ReactNode
 }
 
 const SidebarContent = forwardRef<HTMLDivElement, SidebarContentProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        sx={{
-          flex: 1,
-          overflow: 'auto',
-          py: 1,
-        }}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
+  ({ children, ...props }, ref) => (
+    <Box
+      ref={ref}
+      sx={{
+        flex: 1,
+        overflow: 'auto',
+        py: 1,
+      }}
+      {...props}
+    >
+      {children}
+    </Box>
+  )
 )
 SidebarContent.displayName = 'SidebarContent'
 
-// SidebarFooter
 interface SidebarFooterProps {
   children: ReactNode
 }
 
 const SidebarFooter = forwardRef<HTMLDivElement, SidebarFooterProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        sx={{
-          p: 2,
-          borderTop: 1,
-          borderColor: 'divider',
-        }}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
+  ({ children, ...props }, ref) => (
+    <Box
+      ref={ref}
+      sx={{
+        p: 2,
+        borderTop: 1,
+        borderColor: 'divider',
+      }}
+      {...props}
+    >
+      {children}
+    </Box>
+  )
 )
 SidebarFooter.displayName = 'SidebarFooter'
 
-// SidebarNav
-interface SidebarNavProps {
-  items: SidebarItem[]
-  dense?: boolean
-}
-
-const SidebarNav = forwardRef<HTMLUListElement, SidebarNavProps>(
-  ({ items, dense = false, ...props }, ref) => {
-    const [openItems, setOpenItems] = useState<Set<string>>(new Set())
-
-    const toggleItem = (label: string) => {
-      setOpenItems(prev => {
-        const next = new Set(prev)
-        if (next.has(label)) {
-          next.delete(label)
-        } else {
-          next.add(label)
-        }
-        return next
-      })
-    }
-
-    const renderItem = (item: SidebarItem, depth: number = 0) => {
-      const hasChildren = item.children && item.children.length > 0
-      const isOpen = openItems.has(item.label)
-
-      return (
-        <Box key={item.label}>
-          <ListItem disablePadding>
-            <ListItemButton
-              onClick={() => {
-                if (hasChildren) {
-                  toggleItem(item.label)
-                } else if (item.onClick) {
-                  item.onClick()
-                }
-              }}
-              disabled={item.disabled}
-              sx={{
-                pl: 2 + depth * 2,
-                minHeight: dense ? 40 : 48,
-              }}
-            >
-              {item.icon && (
-                <ListItemIcon sx={{ minWidth: 36 }}>
-                  {item.icon}
-                </ListItemIcon>
-              )}
-              <ListItemText
-                primary={item.label}
-                primaryTypographyProps={{
-                  variant: dense ? 'body2' : 'body1',
-                  fontWeight: depth === 0 ? 500 : 400,
-                }}
-              />
-              {item.badge && (
-                <Box sx={{ mr: 1 }}>
-                  {item.badge}
-                </Box>
-              )}
-              {hasChildren && (isOpen ? <ExpandLess /> : <ExpandMore />)}
-            </ListItemButton>
-          </ListItem>
-          {hasChildren && (
-            <Collapse in={isOpen} timeout="auto" unmountOnExit>
-              <List component="div" disablePadding dense={dense}>
-                {item.children!.map(child => renderItem(child, depth + 1))}
-              </List>
-            </Collapse>
-          )}
-        </Box>
-      )
-    }
-
-    return (
-      <List ref={ref} dense={dense} {...props}>
-        {items.map(item => renderItem(item))}
-      </List>
-    )
-  }
-)
-SidebarNav.displayName = 'SidebarNav'
-
-// SidebarSection
-interface SidebarSectionProps {
-  title?: string
-  children: ReactNode
-}
-
-const SidebarSection = forwardRef<HTMLDivElement, SidebarSectionProps>(
-  ({ title, children, ...props }, ref) => {
-    return (
-      <Box ref={ref} sx={{ py: 1 }} {...props}>
-        {title && (
-          <Typography
-            variant="caption"
-            sx={{
-              px: 2,
-              py: 1,
-              display: 'block',
-              color: 'text.secondary',
-              fontWeight: 600,
-              textTransform: 'uppercase',
-              letterSpacing: '0.05em',
-            }}
-          >
-            {title}
-          </Typography>
-        )}
-        {children}
-      </Box>
-    )
-  }
-)
-SidebarSection.displayName = 'SidebarSection'
-
-// SidebarSeparator
-const SidebarSeparator = forwardRef<HTMLHRElement, Record<string, never>>(
-  (props, ref) => {
-    return <Divider ref={ref} sx={{ my: 1 }} {...props} />
-  }
-)
-SidebarSeparator.displayName = 'SidebarSeparator'
-
-// SidebarToggle - trigger to open sidebar on mobile
 interface SidebarToggleProps {
   onClick: () => void
 }
 
 const SidebarToggle = forwardRef<HTMLButtonElement, SidebarToggleProps>(
-  ({ onClick, ...props }, ref) => {
-    return (
-      <IconButton ref={ref} onClick={onClick} edge="start" {...props}>
-        <MenuIcon />
-      </IconButton>
-    )
-  }
+  ({ onClick, ...props }, ref) => (
+    <IconButton ref={ref} onClick={onClick} edge="start" {...props}>
+      <MenuIcon />
+    </IconButton>
+  )
 )
 SidebarToggle.displayName = 'SidebarToggle'
 
+const SidebarNav = forwardRef<HTMLUListElement, MenuItemListProps>((props, ref) => (
+  <MenuItemList ref={ref} {...props} />
+))
+SidebarNav.displayName = 'SidebarNav'
+
 export {
   Sidebar,
   SidebarHeader,
@@ -307,4 +126,4 @@ export {
   SidebarSeparator,
   SidebarToggle,
 }
-export type { SidebarItem, SidebarProps }
+export type { SidebarItem, SidebarProps, SidebarHeaderProps }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar/Header.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar/Header.tsx
new file mode 100644
index 000000000..cfe0fe23d
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar/Header.tsx
@@ -0,0 +1,38 @@
+import { forwardRef, ReactNode } from 'react'
+import { Box, IconButton } from '@mui/material'
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'
+
+interface SidebarHeaderProps {
+  children?: ReactNode
+  onClose?: () => void
+  showCloseButton?: boolean
+}
+
+const SidebarHeader = forwardRef<HTMLDivElement, SidebarHeaderProps>(
+  ({ children, onClose, showCloseButton = false, ...props }, ref) => {
+    return (
+      <Box
+        ref={ref}
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'space-between',
+          p: 2,
+          minHeight: 64,
+        }}
+        {...props}
+      >
+        {children}
+        {showCloseButton && onClose && (
+          <IconButton onClick={onClose} size="small">
+            <ChevronLeftIcon />
+          </IconButton>
+        )}
+      </Box>
+    )
+  }
+)
+SidebarHeader.displayName = 'SidebarHeader'
+
+export { SidebarHeader }
+export type { SidebarHeaderProps }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar/NavSections.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar/NavSections.tsx
new file mode 100644
index 000000000..8e05ba355
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar/NavSections.tsx
@@ -0,0 +1,44 @@
+import { forwardRef, ReactNode } from 'react'
+import { Box, Divider, Typography } from '@mui/material'
+
+interface SidebarSectionProps {
+  title?: string
+  children: ReactNode
+}
+
+const SidebarSection = forwardRef<HTMLDivElement, SidebarSectionProps>(
+  ({ title, children, ...props }, ref) => {
+    return (
+      <Box ref={ref} sx={{ py: 1 }} {...props}>
+        {title && (
+          <Typography
+            variant="caption"
+            sx={{
+              px: 2,
+              py: 1,
+              display: 'block',
+              color: 'text.secondary',
+              fontWeight: 600,
+              textTransform: 'uppercase',
+              letterSpacing: '0.05em',
+            }}
+          >
+            {title}
+          </Typography>
+        )}
+        {children}
+      </Box>
+    )
+  }
+)
+SidebarSection.displayName = 'SidebarSection'
+
+const SidebarSeparator = forwardRef<HTMLHRElement, Record<string, never>>(
+  (props, ref) => {
+    return <Divider ref={ref} sx={{ my: 1 }} {...props} />
+  }
+)
+SidebarSeparator.displayName = 'SidebarSeparator'
+
+export { SidebarSection, SidebarSeparator }
+export type { SidebarSectionProps }
diff --git a/frontends/nextjs/src/components/ui/overlay.ts b/frontends/nextjs/src/components/ui/overlay.ts
new file mode 100644
index 000000000..1eb7af331
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/overlay.ts
@@ -0,0 +1,57 @@
+// Overlay-focused UI exports
+export {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+  DialogOverlay,
+  DialogPortal,
+  Tooltip,
+  TooltipTrigger,
+  TooltipContent,
+  TooltipProvider,
+  SimpleTooltip,
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+  DropdownMenuGroup,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+  DropdownMenuShortcut,
+  DropdownMenuPortal,
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverAnchor,
+} from './molecules'
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+  SheetClose,
+  AlertDialog,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+} from './organisms'
diff --git a/frontends/nextjs/src/components/ui/sonner.tsx b/frontends/nextjs/src/components/ui/sonner.tsx
index 746a8da84..9ee4c8d07 100644
--- a/frontends/nextjs/src/components/ui/sonner.tsx
+++ b/frontends/nextjs/src/components/ui/sonner.tsx
@@ -2,95 +2,68 @@
 
 /**
  * Sonner-compatible toast API using MUI Snackbar
- * Provides a drop-in replacement for the 'sonner' package
- * 
+ * Provides a drop-in replacement for the 'sonner' package.
+ *
  * Usage:
- *   import { toast } from '@/components/ui/sonner'
- *   toast.success('Saved!')
- *   toast.error('Failed to save')
- *   toast('Default message')
+ *
+ * ```tsx
+ * import { Toaster, toast } from '@/components/ui/sonner'
+ *
+ * function App() {
+ *   return (
+ *     <>
+ *       <button onClick={() => toast('Default message')}>Show default toast</button>
+ *       <button onClick={() => toast.success('Saved!')}>Show success toast</button>
+ *       <button onClick={() => toast.error('Failed to save')}>Show error toast</button>
+ *       <Toaster />
+ *     </>
+ *   )
+ * }
+ * ```
  */
 
-import React, { createContext, useContext, useCallback, useState, useEffect } from 'react'
-import { Snackbar, Alert, type AlertColor, Box } from '@mui/material'
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react'
 
-// Types
-export interface ToastOptions {
-  description?: string
-  duration?: number
-  position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right'
-  id?: string | number
-}
+import { ToastContainer, type ToastHandlers } from './sonner/ToastContainer'
+import {
+  DEFAULT_DURATION,
+  type Toast,
+  type ToastOptions,
+  type ToastType,
+} from './sonner/config'
 
-interface Toast {
-  id: string | number
-  message: string
-  description?: string
-  type: AlertColor | 'default'
-  duration: number
-}
+const ToastContext = createContext<ToastHandlers>({
+  addToast: () => {},
+  removeToast: () => {},
+})
 
-interface ToastContextValue {
-  addToast: (toast: Toast) => void
-  removeToast: (id?: string | number) => void
-}
-
-// Context
-const ToastContext = createContext<ToastContextValue | null>(null)
-
-// Global toast queue for when called outside provider
 let globalAddToast: ((toast: Toast) => void) | null = null
 let globalRemoveToast: ((id?: string | number) => void) | null = null
 let toastIdCounter = 0
 
 const generateId = () => `toast-${++toastIdCounter}`
 
-/**
- * Creates a toast message
- */
-const createToast = (message: string, type: AlertColor | 'default', options?: ToastOptions): Toast => ({
+const createToast = (message: string, type: ToastType, options?: ToastOptions): Toast => ({
   id: options?.id ?? generateId(),
   message,
   description: options?.description,
   type,
-  duration: options?.duration ?? 4000,
+  duration: options?.duration ?? DEFAULT_DURATION,
 })
 
-/**
- * Toast API - Sonner-compatible interface
- */
+const enqueueToast = (toast: Toast) => {
+  globalAddToast?.(toast)
+  return toast.id
+}
+
 export const toast = Object.assign(
-  (message: string, options?: ToastOptions) => {
-    const t = createToast(message, 'default', options)
-    globalAddToast?.(t)
-    return t.id
-  },
+  (message: string, options?: ToastOptions) => enqueueToast(createToast(message, 'default', options)),
   {
-    success: (message: string, options?: ToastOptions) => {
-      const t = createToast(message, 'success', options)
-      globalAddToast?.(t)
-      return t.id
-    },
-    error: (message: string, options?: ToastOptions) => {
-      const t = createToast(message, 'error', options)
-      globalAddToast?.(t)
-      return t.id
-    },
-    warning: (message: string, options?: ToastOptions) => {
-      const t = createToast(message, 'warning', options)
-      globalAddToast?.(t)
-      return t.id
-    },
-    info: (message: string, options?: ToastOptions) => {
-      const t = createToast(message, 'info', options)
-      globalAddToast?.(t)
-      return t.id
-    },
-    loading: (message: string, options?: ToastOptions) => {
-      const t = createToast(message, 'info', { ...options, duration: 0 })
-      globalAddToast?.(t)
-      return t.id
-    },
+    success: (message: string, options?: ToastOptions) => enqueueToast(createToast(message, 'success', options)),
+    error: (message: string, options?: ToastOptions) => enqueueToast(createToast(message, 'error', options)),
+    warning: (message: string, options?: ToastOptions) => enqueueToast(createToast(message, 'warning', options)),
+    info: (message: string, options?: ToastOptions) => enqueueToast(createToast(message, 'info', options)),
+    loading: (message: string, options?: ToastOptions) => enqueueToast(createToast(message, 'info', { ...options, duration: 0 })),
     dismiss: (id?: string | number) => {
       globalRemoveToast?.(id)
     },
@@ -107,16 +80,12 @@ export const toast = Object.assign(
       try {
         const result = await promise
         toast.dismiss(id)
-        const successMessage = typeof messages.success === 'function' 
-          ? messages.success(result) 
-          : messages.success
+        const successMessage = typeof messages.success === 'function' ? messages.success(result) : messages.success
         toast.success(successMessage, options)
         return result
       } catch (error) {
         toast.dismiss(id)
-        const errorMessage = typeof messages.error === 'function'
-          ? messages.error(error)
-          : messages.error
+        const errorMessage = typeof messages.error === 'function' ? messages.error(error) : messages.error
         toast.error(errorMessage, options)
         throw error
       }
@@ -124,11 +93,7 @@ export const toast = Object.assign(
   }
 )
 
-/**
- * Toaster component - Renders toast notifications
- * Place this at the root of your app (in layout.tsx)
- */
-export function Toaster({ 
+export function Toaster({
   position = 'bottom-right',
   richColors = false,
   expand = false,
@@ -139,89 +104,40 @@ export function Toaster({
   expand?: boolean
   closeButton?: boolean
 }) {
-  const [toasts, setToasts] = useState<Toast[]>([])
+  const [handlers, setHandlers] = useState<ToastHandlers>({
+    addToast: () => {},
+    removeToast: () => {},
+  })
 
-  const addToast = useCallback((toast: Toast) => {
-    setToasts(prev => [...prev, toast])
-  }, [])
-
-  const removeToast = useCallback((id?: string | number) => {
-    if (typeof id === 'undefined') {
-      setToasts([])
-      return
-    }
-    setToasts(prev => prev.filter(t => t.id !== id))
-  }, [])
-
-  // Register global handler
   useEffect(() => {
-    globalAddToast = addToast
-    globalRemoveToast = removeToast
     return () => {
       globalAddToast = null
       globalRemoveToast = null
     }
-  }, [addToast, removeToast])
+  }, [])
 
-  // Map position to MUI anchor origin
-  const getAnchorOrigin = () => {
-    const vertical = position?.startsWith('top') ? 'top' : 'bottom'
-    const horizontal = position?.includes('left') ? 'left' : position?.includes('center') ? 'center' : 'right'
-    return { vertical, horizontal } as const
-  }
+  const registerHandlers = useCallback((nextHandlers: ToastHandlers) => {
+    setHandlers(nextHandlers)
+    globalAddToast = nextHandlers.addToast
+    globalRemoveToast = nextHandlers.removeToast
+  }, [])
 
   return (
-    <ToastContext.Provider value={{ addToast, removeToast }}>
-      <Box
-        sx={{
-          position: 'fixed',
-          zIndex: 9999,
-          ...(position?.includes('top') ? { top: 16 } : { bottom: 16 }),
-          ...(position?.includes('left') ? { left: 16 } : position?.includes('center') ? { left: '50%', transform: 'translateX(-50%)' } : { right: 16 }),
-        }}
-      >
-        {toasts.map((t, index) => (
-          <Snackbar
-            key={t.id}
-            open
-            autoHideDuration={t.duration || null}
-            onClose={() => removeToast(t.id)}
-            anchorOrigin={getAnchorOrigin()}
-            sx={{ 
-              position: 'relative',
-              mb: 1,
-            }}
-          >
-            <Alert
-              severity={t.type === 'default' ? 'info' : t.type}
-              variant={richColors ? 'filled' : 'standard'}
-              onClose={closeButton ? () => removeToast(t.id) : undefined}
-              sx={{ width: '100%', minWidth: 300 }}
-            >
-              {t.message}
-              {t.description && (
-                <Box component="div" sx={{ fontSize: '0.875rem', opacity: 0.8, mt: 0.5 }}>
-                  {t.description}
-                </Box>
-              )}
-            </Alert>
-          </Snackbar>
-        ))}
-      </Box>
+    <ToastContext.Provider value={handlers}>
+      <ToastContainer
+        position={position}
+        richColors={richColors}
+        expand={expand}
+        closeButton={closeButton}
+        onRegister={registerHandlers}
+      />
     </ToastContext.Provider>
   )
 }
 
-/**
- * Hook to access toast context
- */
 export function useToast() {
   const context = useContext(ToastContext)
-  return {
-    toast,
-    ...(context ?? { addToast: () => {}, removeToast: () => {} }),
-  }
+  return { toast, ...context }
 }
 
-// Default export for sonner compatibility
 export default toast
diff --git a/frontends/nextjs/src/components/ui/sonner/ToastContainer.tsx b/frontends/nextjs/src/components/ui/sonner/ToastContainer.tsx
new file mode 100644
index 000000000..904626cd2
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/sonner/ToastContainer.tsx
@@ -0,0 +1,93 @@
+'use client'
+
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
+import { Alert, Box, Snackbar } from '@mui/material'
+
+import {
+  anchorFromPosition,
+  containerPlacement,
+  type Toast,
+  type ToastOptions,
+} from './config'
+
+export interface ToastHandlers {
+  addToast: (toast: Toast) => void
+  removeToast: (id?: string | number) => void
+}
+
+interface ToastContainerProps extends ToastOptions {
+  richColors?: boolean
+  expand?: boolean
+  closeButton?: boolean
+  onRegister?: (handlers: ToastHandlers) => void
+}
+
+export function ToastContainer({
+  position = 'bottom-right',
+  richColors = false,
+  expand = false,
+  closeButton = false,
+  onRegister,
+}: ToastContainerProps) {
+  const [toasts, setToasts] = useState<Toast[]>([])
+
+  const addToast = useCallback((toast: Toast) => {
+    setToasts(prev => [...prev, toast])
+  }, [])
+
+  const removeToast = useCallback((id?: string | number) => {
+    if (typeof id === 'undefined') {
+      setToasts([])
+      return
+    }
+    setToasts(prev => prev.filter(t => t.id !== id))
+  }, [])
+
+  useEffect(() => {
+    onRegister?.({ addToast, removeToast })
+  }, [addToast, onRegister, removeToast])
+
+  const anchorOrigin = useMemo(() => anchorFromPosition(position), [position])
+  const containerPosition = useMemo(
+    () => containerPlacement(position),
+    [position]
+  )
+
+  return (
+    <Box
+      sx={{
+        position: 'fixed',
+        zIndex: 9999,
+        ...containerPosition,
+      }}
+    >
+      {toasts.map(t => (
+        <Snackbar
+          key={t.id}
+          open
+          autoHideDuration={t.duration || null}
+          onClose={() => removeToast(t.id)}
+          anchorOrigin={anchorOrigin}
+          sx={{
+            position: 'relative',
+            mb: 1,
+          }}
+        >
+          <Alert
+            severity={t.type === 'default' ? 'info' : t.type}
+            variant={richColors ? 'filled' : 'standard'}
+            onClose={closeButton ? () => removeToast(t.id) : undefined}
+            sx={{ width: expand ? '100%' : 'auto', minWidth: 300 }}
+          >
+            {t.message}
+            {t.description && (
+              <Box component="div" sx={{ fontSize: '0.875rem', opacity: 0.8, mt: 0.5 }}>
+                {t.description}
+              </Box>
+            )}
+          </Alert>
+        </Snackbar>
+      ))}
+    </Box>
+  )
+}
diff --git a/frontends/nextjs/src/components/ui/sonner/config.ts b/frontends/nextjs/src/components/ui/sonner/config.ts
new file mode 100644
index 000000000..ea74c1242
--- /dev/null
+++ b/frontends/nextjs/src/components/ui/sonner/config.ts
@@ -0,0 +1,47 @@
+import { type AlertColor } from '@mui/material'
+
+export type ToastPosition =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right'
+
+export interface ToastOptions {
+  description?: string
+  duration?: number
+  position?: ToastPosition
+  id?: string | number
+}
+
+export type ToastType = AlertColor | 'default'
+
+export interface Toast {
+  id: string | number
+  message: string
+  description?: string
+  type: ToastType
+  duration: number
+}
+
+export const DEFAULT_DURATION = 4000
+
+export const anchorFromPosition = (position?: ToastPosition) => {
+  const vertical = position?.startsWith('top') ? 'top' : 'bottom'
+  const horizontal = position?.includes('left')
+    ? 'left'
+    : position?.includes('center')
+      ? 'center'
+      : 'right'
+  return { vertical, horizontal } as const
+}
+
+export const containerPlacement = (position?: ToastPosition) => ({
+  ...(position?.includes('top') ? { top: 16 } : { bottom: 16 }),
+  ...(position?.includes('left')
+    ? { left: 16 }
+    : position?.includes('center')
+      ? { left: '50%', transform: 'translateX(-50%)' }
+      : { right: 16 }),
+})
diff --git a/frontends/nextjs/src/data/form/FieldGroup.tsx b/frontends/nextjs/src/data/form/FieldGroup.tsx
new file mode 100644
index 000000000..67ad752ca
--- /dev/null
+++ b/frontends/nextjs/src/data/form/FieldGroup.tsx
@@ -0,0 +1,50 @@
+import type { ReactNode } from 'react'
+import { Box, Stack, Typography } from '@mui/material'
+
+interface FieldGroupProps {
+  title: string
+  description?: ReactNode
+  actions?: ReactNode
+  children: ReactNode
+  spacing?: number
+}
+
+export function FieldGroup({
+  title,
+  description,
+  actions,
+  children,
+  spacing = 2,
+}: FieldGroupProps) {
+  return (
+    <Stack
+      spacing={2}
+      sx={{
+        border: 1,
+        borderColor: 'divider',
+        borderRadius: 2,
+        p: 2,
+        backgroundColor: 'background.paper',
+      }}
+    >
+      <Stack direction="row" justifyContent="space-between" spacing={2} alignItems="flex-start">
+        <Box>
+          <Typography variant="subtitle1" fontWeight={600} sx={{ lineHeight: 1.3 }}>
+            {title}
+          </Typography>
+          {description ? (
+            <Typography variant="body2" color="text.secondary" sx={{ mt: 0.5 }}>
+              {description}
+            </Typography>
+          ) : null}
+        </Box>
+
+        {actions ? (
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>{actions}</Box>
+        ) : null}
+      </Stack>
+
+      <Stack spacing={spacing}>{children}</Stack>
+    </Stack>
+  )
+}
diff --git a/frontends/nextjs/src/data/form/ValidationSummary.tsx b/frontends/nextjs/src/data/form/ValidationSummary.tsx
new file mode 100644
index 000000000..57eb90278
--- /dev/null
+++ b/frontends/nextjs/src/data/form/ValidationSummary.tsx
@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react'
+import { Alert, AlertTitle, List, ListItem, ListItemText } from '@mui/material'
+
+/**
+ * Props for {@link ValidationSummary}.
+ *
+ * @property errors List of validation errors to display. Each entry can be a plain
+ *   string message or a ReactNode for fully custom rendering (e.g. including links
+ *   or emphasized text). The list is rendered as items in a bulleted list.
+ * @property title Optional title rendered inside the error alert header. This
+ *   is only shown when {@link ValidationSummaryProps.showTitle | showTitle} is
+ *   `true`. Defaults to `"Please fix the following"`.
+ * @property showTitle When `true` (default), renders an {@link AlertTitle} using
+ *   the provided `title`. Set to `false` when you want to suppress the header and
+ *   only show the list of errors.
+ */
+interface ValidationSummaryProps {
+  errors: Array<string | ReactNode>
+  title?: string
+  showTitle?: boolean
+}
+
+/**
+ * Displays a standardized validation error summary as an error {@link Alert}
+ * containing an optional title and a bulleted list of errors.
+ *
+ * Renders nothing when the `errors` array is empty.
+ */
+export function ValidationSummary({
+  errors,
+  title = 'Please fix the following',
+  showTitle = true,
+}: ValidationSummaryProps) {
+  if (!errors.length) return null
+
+  return (
+    <Alert severity="error" variant="outlined" sx={{ alignItems: 'flex-start' }}>
+      {showTitle ? <AlertTitle>{title}</AlertTitle> : null}
+      <List dense disablePadding component="ul" sx={{ pl: 3 }}>
+        {errors.map((error, index) => (
+          <ListItem
+            key={index}
+            disableGutters
+            component="li"
+            sx={{ py: 0.25, px: 0 }}
+          >
+            <ListItemText primaryTypographyProps={{ variant: 'body2' }} primary={error} />
+          </ListItem>
+        ))}
+      </List>
+    </Alert>
+  )
+}
diff --git a/frontends/nextjs/src/data/table/Body.tsx b/frontends/nextjs/src/data/table/Body.tsx
new file mode 100644
index 000000000..80225d390
--- /dev/null
+++ b/frontends/nextjs/src/data/table/Body.tsx
@@ -0,0 +1,59 @@
+import type { ReactNode } from 'react'
+import { TableBody, TableCell, TableRow } from '@mui/material'
+
+import { EmptyState } from './EmptyState'
+import type { DataTableColumn } from './types'
+
+interface BodyProps<T> {
+  columns: Array<DataTableColumn<T>>
+  rows: T[]
+  getRowId?: (row: T, rowIndex: number) => string | number
+  renderActions?: (row: T) => ReactNode
+  onRowClick?: (row: T) => void
+  emptyMessage?: string
+}
+
+export function Body<T>({
+  columns,
+  rows,
+  getRowId,
+  renderActions,
+  onRowClick,
+  emptyMessage = 'No records found',
+}: BodyProps<T>) {
+  const colSpan = columns.length + (renderActions ? 1 : 0)
+
+  return (
+    <TableBody>
+      {rows.length === 0 ? (
+        <EmptyState colSpan={colSpan} message={emptyMessage} />
+      ) : (
+        rows.map((row, rowIndex) => {
+          const rowId = getRowId ? getRowId(row, rowIndex) : rowIndex
+          const handleClick = onRowClick ? () => onRowClick(row) : undefined
+
+          return (
+            <TableRow
+              key={rowId}
+              hover={Boolean(onRowClick)}
+              onClick={handleClick}
+              sx={onRowClick ? { cursor: 'pointer' } : undefined}
+            >
+              {columns.map((column) => {
+                const content = column.render ? column.render(row, rowIndex) : (row as Record<string, unknown>)[column.key]
+
+                return (
+                  <TableCell key={column.key} align={column.align} sx={column.sx}>
+                    {content ?? '—'}
+                  </TableCell>
+                )
+              })}
+
+              {renderActions ? <TableCell align="right">{renderActions(row)}</TableCell> : null}
+            </TableRow>
+          )
+        })
+      )}
+    </TableBody>
+  )
+}
diff --git a/frontends/nextjs/src/data/table/EmptyState.tsx b/frontends/nextjs/src/data/table/EmptyState.tsx
new file mode 100644
index 000000000..b79247aaa
--- /dev/null
+++ b/frontends/nextjs/src/data/table/EmptyState.tsx
@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+import { Stack, TableCell, TableRow, Typography } from '@mui/material'
+
+/**
+ * Props for the {@link EmptyState} table row.
+ *
+ * This is typically used when a data-driven table has no rows to display and
+ * you want to show a friendly message, optionally with a follow-up action.
+ *
+ * @property colSpan - Number of table columns the empty-state cell should span.
+ * @property message - Optional message shown to explain that there is no data.
+ * @property action - Optional call-to-action content (for example, a "Create"
+ * button or "Reload" button) rendered below the message.
+ */
+interface EmptyStateProps {
+  colSpan: number
+  message?: string
+  action?: ReactNode
+}
+
+/**
+ * Renders a full-width table row indicating that there is currently no data
+ * to display for the surrounding table.
+ *
+ * Use this component as the only row in a table body when the data source is
+ * empty. You can pass an optional `action` to surface primary actions such as
+ * creating a new item or retrying a failed load.
+ */
+export function EmptyState({ colSpan, message = 'No data to display', action }: EmptyStateProps) {
+  return (
+    <TableRow>
+      <TableCell colSpan={colSpan} sx={{ py: 6 }}>
+        <Stack alignItems="center" spacing={1}>
+          <Typography variant="subtitle1">{message}</Typography>
+          {action ? <Stack direction="row" spacing={1}>{action}</Stack> : null}
+        </Stack>
+      </TableCell>
+    </TableRow>
+  )
+}
diff --git a/frontends/nextjs/src/data/table/Header.tsx b/frontends/nextjs/src/data/table/Header.tsx
new file mode 100644
index 000000000..a7c9f6602
--- /dev/null
+++ b/frontends/nextjs/src/data/table/Header.tsx
@@ -0,0 +1,52 @@
+import { TableCell, TableHead, TableRow, Typography } from '@mui/material'
+
+import type { DataTableColumn } from './types'
+
+interface HeaderProps<T> {
+  columns: Array<DataTableColumn<T>>
+  actionsHeader?: string
+}
+
+export function Header<T>({ columns, actionsHeader }: HeaderProps<T>) {
+  return (
+    <TableHead>
+      <TableRow>
+        {columns.map((column) => (
+          <TableCell
+            key={column.key}
+            align={column.align}
+            sx={{
+              borderBottom: 1,
+              borderColor: 'divider',
+              ...(column.width ? { width: column.width } : {}),
+              ...(column.sx ?? {}),
+            }}
+          >
+            <Typography
+              variant="caption"
+              color="text.secondary"
+              sx={{ textTransform: 'uppercase', letterSpacing: 0.2 }}
+            >
+              {column.label}
+            </Typography>
+          </TableCell>
+        ))}
+
+        {actionsHeader ? (
+          <TableCell
+            align="right"
+            sx={{ borderBottom: 1, borderColor: 'divider', width: 1, whiteSpace: 'nowrap' }}
+          >
+            <Typography
+              variant="caption"
+              color="text.secondary"
+              sx={{ textTransform: 'uppercase', letterSpacing: 0.2 }}
+            >
+              {actionsHeader}
+            </Typography>
+          </TableCell>
+        ) : null}
+      </TableRow>
+    </TableHead>
+  )
+}
diff --git a/frontends/nextjs/src/data/table/types.ts b/frontends/nextjs/src/data/table/types.ts
new file mode 100644
index 000000000..d0b94318f
--- /dev/null
+++ b/frontends/nextjs/src/data/table/types.ts
@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react'
+import type { TableCellProps } from '@mui/material'
+
+export interface DataTableColumn<T> {
+  key: string
+  label: string
+  align?: TableCellProps['align']
+  width?: number | string
+  render?: (row: T, rowIndex: number) => ReactNode
+  sx?: TableCellProps['sx']
+}
diff --git a/frontends/nextjs/src/hooks/__tests__/useAuth.roles.test.ts b/frontends/nextjs/src/hooks/__tests__/useAuth.roles.test.ts
new file mode 100644
index 000000000..336565286
--- /dev/null
+++ b/frontends/nextjs/src/hooks/__tests__/useAuth.roles.test.ts
@@ -0,0 +1,100 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { renderHook, act, waitFor } from '@testing-library/react'
+import type { User } from '@/lib/level-types'
+import { useAuth } from '@/hooks/useAuth'
+import { fetchSession } from '@/lib/auth/api/fetch-session'
+import { login as loginRequest } from '@/lib/auth/api/login'
+import { logout as logoutRequest } from '@/lib/auth/api/logout'
+
+vi.mock('@/lib/auth/api/fetch-session', () => ({
+  fetchSession: vi.fn(),
+}))
+
+vi.mock('@/lib/auth/api/login', () => ({
+  login: vi.fn(),
+}))
+
+vi.mock('@/lib/auth/api/logout', () => ({
+  logout: vi.fn(),
+}))
+
+const mockFetchSession = vi.mocked(fetchSession)
+const mockLogin = vi.mocked(loginRequest)
+const mockLogout = vi.mocked(logoutRequest)
+
+const createUser = (overrides?: Partial<User>): User => ({
+  id: 'user_1',
+  username: 'alice',
+  email: 'alice@example.com',
+  role: 'user',
+  createdAt: 1000,
+  tenantId: undefined,
+  profilePicture: undefined,
+  bio: undefined,
+  isInstanceOwner: false,
+  ...overrides,
+})
+
+const waitForIdle = async (result: { current: { isLoading: boolean } }) => {
+  await waitFor(() => {
+    expect(result.current.isLoading).toBe(false)
+  })
+}
+
+const resetAuthStore = async () => {
+  const { result, unmount } = renderHook(() => useAuth())
+  await waitForIdle(result)
+  await act(async () => {
+    await result.current.logout()
+  })
+  await waitForIdle(result)
+  unmount()
+}
+
+describe('useAuth role mapping', () => {
+  beforeEach(async () => {
+    mockFetchSession.mockReset()
+    mockLogin.mockReset()
+    mockLogout.mockReset()
+    mockFetchSession.mockResolvedValue(null)
+    mockLogout.mockResolvedValue(undefined)
+
+    await resetAuthStore()
+  })
+
+  it.each([
+    { role: 'public', expectedLevel: 1 },
+    { role: 'user', expectedLevel: 2 },
+    { role: 'admin', expectedLevel: 4 },
+    { role: 'supergod', expectedLevel: 6 },
+    { role: 'unknown', expectedLevel: 0 },
+  ])('applies level for role "$role"', async ({ role, expectedLevel }) => {
+    const { result, unmount } = renderHook(() => useAuth())
+
+    mockLogin.mockResolvedValue(createUser({ role }))
+
+    await waitForIdle(result)
+    await act(async () => {
+      await result.current.login('alice@example.com', 'password')
+    })
+
+    expect(result.current.user?.level).toBe(expectedLevel)
+
+    unmount()
+  })
+
+  it('maps refreshed session roles to levels', async () => {
+    const { result, unmount } = renderHook(() => useAuth())
+
+    mockFetchSession.mockResolvedValue(createUser({ role: 'moderator' }))
+
+    await act(async () => {
+      await result.current.refresh()
+    })
+    await waitForIdle(result)
+
+    expect(result.current.user?.level).toBe(3)
+
+    unmount()
+  })
+})
diff --git a/frontends/nextjs/src/hooks/useAuth.test.ts b/frontends/nextjs/src/hooks/__tests__/useAuth.session.test.ts
similarity index 77%
rename from frontends/nextjs/src/hooks/useAuth.test.ts
rename to frontends/nextjs/src/hooks/__tests__/useAuth.session.test.ts
index 66531dcd9..ffb955ac2 100644
--- a/frontends/nextjs/src/hooks/useAuth.test.ts
+++ b/frontends/nextjs/src/hooks/__tests__/useAuth.session.test.ts
@@ -1,6 +1,11 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { renderHook, act, waitFor } from '@testing-library/react'
 import type { User } from '@/lib/level-types'
+import { useAuth } from '@/hooks/useAuth'
+import { fetchSession } from '@/lib/auth/api/fetch-session'
+import { login as loginRequest } from '@/lib/auth/api/login'
+import { register as registerRequest } from '@/lib/auth/api/register'
+import { logout as logoutRequest } from '@/lib/auth/api/logout'
 
 vi.mock('@/lib/auth/api/fetch-session', () => ({
   fetchSession: vi.fn(),
@@ -18,12 +23,6 @@ vi.mock('@/lib/auth/api/logout', () => ({
   logout: vi.fn(),
 }))
 
-import { useAuth } from '@/hooks/useAuth'
-import { fetchSession } from '@/lib/auth/api/fetch-session'
-import { login as loginRequest } from '@/lib/auth/api/login'
-import { register as registerRequest } from '@/lib/auth/api/register'
-import { logout as logoutRequest } from '@/lib/auth/api/logout'
-
 const mockFetchSession = vi.mocked(fetchSession)
 const mockLogin = vi.mocked(loginRequest)
 const mockRegister = vi.mocked(registerRequest)
@@ -48,7 +47,17 @@ const waitForIdle = async (result: { current: { isLoading: boolean } }) => {
   })
 }
 
-describe('useAuth', () => {
+const resetAuthStore = async () => {
+  const { result, unmount } = renderHook(() => useAuth())
+  await waitForIdle(result)
+  await act(async () => {
+    await result.current.logout()
+  })
+  await waitForIdle(result)
+  unmount()
+}
+
+describe('useAuth session flows', () => {
   beforeEach(async () => {
     mockFetchSession.mockReset()
     mockLogin.mockReset()
@@ -57,16 +66,10 @@ describe('useAuth', () => {
     mockFetchSession.mockResolvedValue(null)
     mockLogout.mockResolvedValue(undefined)
 
-    const { result, unmount } = renderHook(() => useAuth())
-    await waitForIdle(result)
-    await act(async () => {
-      await result.current.logout()
-    })
-    await waitForIdle(result)
-    unmount()
+    await resetAuthStore()
   })
 
-  it('should start unauthenticated after session check', async () => {
+  it('starts unauthenticated after session check', async () => {
     const { result, unmount } = renderHook(() => useAuth())
 
     await waitForIdle(result)
@@ -77,28 +80,20 @@ describe('useAuth', () => {
     unmount()
   })
 
-  it.each([
-    { email: 'alice@example.com', expectedName: 'alice' },
-    { email: 'bob.smith@corp.io', expectedName: 'bob.smith' },
-  ])('should authenticate $email', async ({ email, expectedName }) => {
+  it('authenticates on login', async () => {
     const { result, unmount } = renderHook(() => useAuth())
 
-    mockLogin.mockResolvedValue(createUser({
-      id: 'user_1',
-      username: expectedName,
-      email,
-    }))
+    mockLogin.mockResolvedValue(createUser())
 
     await waitForIdle(result)
     await act(async () => {
-      await result.current.login(email, 'password')
+      await result.current.login('alice@example.com', 'password')
     })
 
     expect(result.current.user).toMatchObject({
       id: 'user_1',
-      email,
-      name: expectedName,
-      username: expectedName,
+      email: 'alice@example.com',
+      username: 'alice',
       level: 2,
     })
     expect(result.current.isAuthenticated).toBe(true)
@@ -106,7 +101,7 @@ describe('useAuth', () => {
     unmount()
   })
 
-  it('should clear user on logout', async () => {
+  it('clears user on logout', async () => {
     const { result, unmount } = renderHook(() => useAuth())
 
     mockLogin.mockResolvedValue(createUser())
@@ -126,14 +121,16 @@ describe('useAuth', () => {
     unmount()
   })
 
-  it('should register and authenticate', async () => {
+  it('registers and authenticates', async () => {
     const { result, unmount } = renderHook(() => useAuth())
 
-    mockRegister.mockResolvedValue(createUser({
-      id: 'user_2',
-      username: 'newbie',
-      email: 'newbie@example.com',
-    }))
+    mockRegister.mockResolvedValue(
+      createUser({
+        id: 'user_2',
+        username: 'newbie',
+        email: 'newbie@example.com',
+      })
+    )
 
     await waitForIdle(result)
     await act(async () => {
@@ -143,7 +140,6 @@ describe('useAuth', () => {
     expect(result.current.user).toMatchObject({
       id: 'user_2',
       email: 'newbie@example.com',
-      name: 'newbie',
       username: 'newbie',
       level: 2,
     })
@@ -152,7 +148,7 @@ describe('useAuth', () => {
     unmount()
   })
 
-  it('should sync state across hooks', async () => {
+  it('syncs state across hooks', async () => {
     const first = renderHook(() => useAuth())
     const second = renderHook(() => useAuth())
 
diff --git a/frontends/nextjs/src/hooks/data/useKV.test.ts b/frontends/nextjs/src/hooks/data/__tests__/useKV.store.test.ts
similarity index 54%
rename from frontends/nextjs/src/hooks/data/useKV.test.ts
rename to frontends/nextjs/src/hooks/data/__tests__/useKV.store.test.ts
index d842a5c57..1334e1226 100644
--- a/frontends/nextjs/src/hooks/data/useKV.test.ts
+++ b/frontends/nextjs/src/hooks/data/__tests__/useKV.store.test.ts
@@ -1,54 +1,34 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { renderHook, act, waitFor } from '@testing-library/react'
-import { useKV } from '@/hooks/useKV'
+import { useKV } from '@/hooks/data/useKV'
 
-describe('useKV', () => {
-  const STORAGE_PREFIX = 'mb_kv:'
-  let store: Record<string, string>
+const STORAGE_PREFIX = 'mb_kv:'
+let store: Record<string, string>
 
+const setupLocalStorage = (): void => {
+  store = {}
+  vi.stubGlobal('localStorage', {
+    getItem: vi.fn((key: string) => store[key] ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      store[key] = value
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete store[key]
+    }),
+    clear: vi.fn(() => {
+      Object.keys(store).forEach(k => delete store[k])
+    }),
+    length: 0,
+    key: vi.fn(() => null),
+  })
+}
+
+describe('useKV storage', () => {
   beforeEach(() => {
-    // Mock localStorage
-    store = {}
-    vi.stubGlobal('localStorage', {
-      getItem: vi.fn((key: string) => store[key] ?? null),
-      setItem: vi.fn((key: string, value: string) => { store[key] = value }),
-      removeItem: vi.fn((key: string) => { delete store[key] }),
-      clear: vi.fn(() => { Object.keys(store).forEach(k => delete store[k]) }),
-      length: 0,
-      key: vi.fn(() => null),
-    })
+    setupLocalStorage()
   })
 
-  it.each([
-    { key: 'user_name', defaultValue: 'John', description: 'string value' },
-    { key: 'user_count', defaultValue: 0, description: 'number value' },
-    { key: 'is_active', defaultValue: true, description: 'boolean value' },
-    { key: 'user_data', defaultValue: { id: 1, name: 'John' }, description: 'object value' },
-  ])('should initialize hook with $description', ({ key, defaultValue }) => {
-    const { result } = renderHook(() => useKV(key, defaultValue))
-    const [value] = result.current
-
-    expect(value).toBe(defaultValue)
-  })
-
-  it('should initialize with undefined when no default value provided', () => {
-    const { result } = renderHook(() => useKV('empty_key'))
-    const [value] = result.current
-
-    expect(value).toBeUndefined()
-  })
-
-  it('should load value from localStorage when available', async () => {
-    localStorage.setItem(`${STORAGE_PREFIX}stored_key`, JSON.stringify('stored'))
-
-    const { result } = renderHook(() => useKV('stored_key', 'default'))
-
-    await waitFor(() => {
-      expect(result.current[0]).toBe('stored')
-    })
-  })
-
-  it('should migrate legacy localStorage entries to namespaced keys', () => {
+  it('migrates legacy localStorage entries to namespaced keys', () => {
     localStorage.setItem('legacy_key', JSON.stringify('legacy'))
 
     const { result } = renderHook(() => useKV('legacy_key', 'default'))
@@ -58,7 +38,7 @@ describe('useKV', () => {
     expect(localStorage.getItem('legacy_key')).toBeNull()
   })
 
-  it('should update value when using updater function', async () => {
+  it('updates value when using updater function', async () => {
     const { result } = renderHook(() => useKV('counter', 0))
 
     const [, updateValue] = result.current
@@ -71,9 +51,8 @@ describe('useKV', () => {
     expect(newValue).toBe(1)
   })
 
-  it('should update value when providing direct value', async () => {
+  it('updates value when providing direct value', async () => {
     const { result } = renderHook(() => useKV('name', 'John'))
-
     const [, updateValue] = result.current
 
     await act(async () => {
@@ -84,7 +63,7 @@ describe('useKV', () => {
     expect(newValue).toBe('Jane')
   })
 
-  it('should handle complex object updates', async () => {
+  it('handles complex object updates', async () => {
     const initialObject = { id: 1, name: 'John', email: 'john@example.com' }
     const { result } = renderHook(() => useKV('user', initialObject))
 
@@ -101,7 +80,7 @@ describe('useKV', () => {
     expect(newValue).toEqual({ id: 1, name: 'Jane', email: 'john@example.com' })
   })
 
-  it('should handle array updates', async () => {
+  it('handles array updates', async () => {
     const initialArray = [1, 2, 3]
     const { result } = renderHook(() => useKV('items', initialArray))
 
@@ -115,7 +94,7 @@ describe('useKV', () => {
     expect(newValue).toEqual([1, 2, 3, 4])
   })
 
-  it('should maintain separate state for different keys', async () => {
+  it('maintains separate state for different keys', () => {
     const { result: result1 } = renderHook(() => useKV('key1', 'value1'))
     const { result: result2 } = renderHook(() => useKV('key2', 'value2'))
 
@@ -126,7 +105,7 @@ describe('useKV', () => {
     expect(value2).toBe('value2')
   })
 
-  it('should persist updates across multiple hooks with same key', async () => {
+  it('persists updates across multiple hooks with same key', async () => {
     const { result: firstHook } = renderHook(() => useKV('shared_key', 'initial'))
     const [, updateValue] = firstHook.current
 
@@ -134,14 +113,13 @@ describe('useKV', () => {
       await updateValue('updated')
     })
 
-    // Create a new hook with the same key
     const { result: secondHook } = renderHook(() => useKV('shared_key', 'initial'))
     const [value] = secondHook.current
 
     expect(value).toBe('updated')
   })
 
-  it('should sync updates across mounted hooks with same key', async () => {
+  it('syncs updates across mounted hooks with same key', async () => {
     const { result: firstHook } = renderHook(() => useKV('sync_key', 'initial'))
     const { result: secondHook } = renderHook(() => useKV('sync_key', 'initial'))
 
@@ -154,19 +132,7 @@ describe('useKV', () => {
     })
   })
 
-  it.each([
-    { initialValue: null, key: 'falsy_key_null', description: 'null value' },
-    { initialValue: false, key: 'falsy_key_false', description: 'false boolean' },
-    { initialValue: 0, key: 'falsy_key_zero', description: 'zero number' },
-    { initialValue: '', key: 'falsy_key_empty', description: 'empty string' },
-  ])('should handle falsy $description correctly', ({ initialValue, key }) => {
-    const { result } = renderHook(() => useKV(key, initialValue))
-    const [value] = result.current
-
-    expect(value).toBe(initialValue)
-  })
-
-  it('should handle rapid updates correctly', async () => {
+  it('handles rapid updates correctly', async () => {
     const { result } = renderHook(() => useKV('rapid_key', 0))
     const [, updateValue] = result.current
 
@@ -183,7 +149,7 @@ describe('useKV', () => {
     expect(finalValue).toBeGreaterThanOrEqual(1)
   })
 
-  it('should persist updates to localStorage', async () => {
+  it('persists updates to localStorage', async () => {
     const { result } = renderHook(() => useKV('persist_key', 'initial'))
     const [, updateValue] = result.current
 
diff --git a/frontends/nextjs/src/hooks/data/__tests__/useKV.validation.test.ts b/frontends/nextjs/src/hooks/data/__tests__/useKV.validation.test.ts
new file mode 100644
index 000000000..19b6f25a5
--- /dev/null
+++ b/frontends/nextjs/src/hooks/data/__tests__/useKV.validation.test.ts
@@ -0,0 +1,70 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { renderHook } from '@testing-library/react'
+import { useKV } from '@/hooks/data/useKV'
+
+const STORAGE_PREFIX = 'mb_kv:'
+let store: Record<string, string>
+
+const setupLocalStorage = (): void => {
+  store = {}
+  vi.stubGlobal('localStorage', {
+    getItem: vi.fn((key: string) => store[key] ?? null),
+    setItem: vi.fn((key: string, value: string) => {
+      store[key] = value
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete store[key]
+    }),
+    clear: vi.fn(() => {
+      Object.keys(store).forEach(k => delete store[k])
+    }),
+    length: 0,
+    key: vi.fn(() => null),
+  })
+}
+
+describe('useKV validation', () => {
+  beforeEach(() => {
+    setupLocalStorage()
+  })
+
+  it.each([
+    { key: 'user_name', defaultValue: 'John', description: 'string value' },
+    { key: 'user_count', defaultValue: 0, description: 'number value' },
+    { key: 'is_active', defaultValue: true, description: 'boolean value' },
+    { key: 'user_data', defaultValue: { id: 1, name: 'John' }, description: 'object value' },
+  ])('initializes with $description', ({ key, defaultValue }) => {
+    const { result } = renderHook(() => useKV(key, defaultValue))
+    const [value] = result.current
+
+    expect(value).toBe(defaultValue)
+  })
+
+  it('initializes with undefined when no default value provided', () => {
+    const { result } = renderHook(() => useKV('empty_key'))
+    const [value] = result.current
+
+    expect(value).toBeUndefined()
+  })
+
+  it.each([
+    { initialValue: null, key: 'falsy_key_null', description: 'null value' },
+    { initialValue: false, key: 'falsy_key_false', description: 'false boolean' },
+    { initialValue: 0, key: 'falsy_key_zero', description: 'zero number' },
+    { initialValue: '', key: 'falsy_key_empty', description: 'empty string' },
+  ])('handles $description correctly', ({ initialValue, key }) => {
+    const { result } = renderHook(() => useKV(key, initialValue))
+    const [value] = result.current
+
+    expect(value).toBe(initialValue)
+  })
+
+  it('loads value from localStorage when available', () => {
+    localStorage.setItem(`${STORAGE_PREFIX}stored_key`, JSON.stringify('stored'))
+
+    const { result } = renderHook(() => useKV('stored_key', 'default'))
+    const [value] = result.current
+
+    expect(value).toBe('stored')
+  })
+})
diff --git a/frontends/nextjs/src/hooks/ui/state/__tests__/useAutoRefresh.error-handling.test.ts b/frontends/nextjs/src/hooks/ui/state/__tests__/useAutoRefresh.error-handling.test.ts
new file mode 100644
index 000000000..1d9f1b6db
--- /dev/null
+++ b/frontends/nextjs/src/hooks/ui/state/__tests__/useAutoRefresh.error-handling.test.ts
@@ -0,0 +1,74 @@
+/**
+ * Auto-refresh error-handling tests
+ */
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
+import { renderHook, act } from '@testing-library/react'
+import { useAutoRefresh } from '../useAutoRefresh'
+
+describe('useAutoRefresh error handling', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  it('stops refresh when disabled after being enabled', () => {
+    const onRefresh = vi.fn().mockResolvedValue(undefined)
+
+    const { result } = renderHook(() =>
+      useAutoRefresh({
+        intervalMs: 5000,
+        onRefresh,
+        enabled: true,
+      })
+    )
+
+    act(() => {
+      vi.advanceTimersByTime(2500)
+    })
+
+    act(() => {
+      result.current.setEnabled(false)
+    })
+
+    act(() => {
+      vi.advanceTimersByTime(10000)
+    })
+
+    expect(onRefresh).not.toHaveBeenCalled()
+  })
+
+  it('continues scheduling refreshes after onRefresh errors', () => {
+    const erroringRefresh = vi.fn().mockImplementation(() =>
+      Promise.reject(new Error('refresh failed')).catch(() => {})
+    )
+
+    const { result } = renderHook(() =>
+      useAutoRefresh({
+        intervalMs: 2000,
+        onRefresh: erroringRefresh,
+        enabled: true,
+      })
+    )
+
+    expect(result.current.secondsUntilNextRefresh).toBe(2)
+
+    act(() => {
+      vi.advanceTimersByTime(2000)
+    })
+    expect(erroringRefresh).toHaveBeenCalledTimes(1)
+
+    act(() => {
+      vi.advanceTimersByTime(1000)
+    })
+    expect(result.current.secondsUntilNextRefresh).toBe(1)
+
+    act(() => {
+      vi.advanceTimersByTime(1000)
+    })
+    expect(result.current.secondsUntilNextRefresh).toBe(2)
+    expect(erroringRefresh).toHaveBeenCalledTimes(2)
+  })
+})
diff --git a/frontends/nextjs/src/hooks/ui/state/useAutoRefresh.test.ts b/frontends/nextjs/src/hooks/ui/state/__tests__/useAutoRefresh.polling.test.ts
similarity index 71%
rename from frontends/nextjs/src/hooks/ui/state/useAutoRefresh.test.ts
rename to frontends/nextjs/src/hooks/ui/state/__tests__/useAutoRefresh.polling.test.ts
index c61dda058..13c26ff29 100644
--- a/frontends/nextjs/src/hooks/ui/state/useAutoRefresh.test.ts
+++ b/frontends/nextjs/src/hooks/ui/state/__tests__/useAutoRefresh.polling.test.ts
@@ -1,13 +1,11 @@
 /**
- * Tests for useAutoRefresh hook - Auto-refresh polling management
- * Following parameterized test pattern per project conventions
+ * Auto-refresh polling tests
  */
-
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { renderHook, act, waitFor } from '@testing-library/react'
-import { useAutoRefresh } from './useAutoRefresh'
+import { useAutoRefresh } from '../useAutoRefresh'
 
-describe('useAutoRefresh', () => {
+describe('useAutoRefresh polling', () => {
   beforeEach(() => {
     vi.useFakeTimers()
   })
@@ -21,7 +19,7 @@ describe('useAutoRefresh', () => {
       { enabled: false, expectAutoRefreshing: false },
       { enabled: true, expectAutoRefreshing: true },
       { enabled: undefined, expectAutoRefreshing: false },
-    ])('should initialize with enabled=$enabled -> isAutoRefreshing=$expectAutoRefreshing', ({ enabled, expectAutoRefreshing }) => {
+    ])('initializes with enabled=$enabled -> isAutoRefreshing=$expectAutoRefreshing', ({ enabled, expectAutoRefreshing }) => {
       const onRefresh = vi.fn().mockResolvedValue(undefined)
 
       const { result } = renderHook(() =>
@@ -39,7 +37,7 @@ describe('useAutoRefresh', () => {
       { intervalMs: 30000, expectedSeconds: 30 },
       { intervalMs: 60000, expectedSeconds: 60 },
       { intervalMs: 5000, expectedSeconds: 5 },
-    ])('should set secondsUntilNextRefresh from intervalMs=$intervalMs', ({ intervalMs, expectedSeconds }) => {
+    ])('sets secondsUntilNextRefresh from intervalMs=$intervalMs', ({ intervalMs, expectedSeconds }) => {
       const onRefresh = vi.fn().mockResolvedValue(undefined)
 
       const { result } = renderHook(() =>
@@ -55,7 +53,7 @@ describe('useAutoRefresh', () => {
   })
 
   describe('toggleAutoRefresh', () => {
-    it('should toggle from disabled to enabled', () => {
+    it('toggles from disabled to enabled', () => {
       const onRefresh = vi.fn().mockResolvedValue(undefined)
 
       const { result } = renderHook(() =>
@@ -75,7 +73,7 @@ describe('useAutoRefresh', () => {
       expect(result.current.isAutoRefreshing).toBe(true)
     })
 
-    it('should toggle from enabled to disabled', () => {
+    it('toggles from enabled to disabled', () => {
       const onRefresh = vi.fn().mockResolvedValue(undefined)
 
       const { result } = renderHook(() =>
@@ -102,7 +100,7 @@ describe('useAutoRefresh', () => {
       { initial: true, setTo: false, expected: false },
       { initial: false, setTo: false, expected: false },
       { initial: true, setTo: true, expected: true },
-    ])('should set from $initial to $setTo', ({ initial, setTo, expected }) => {
+    ])('sets from $initial to $setTo', ({ initial, setTo, expected }) => {
       const onRefresh = vi.fn().mockResolvedValue(undefined)
 
       const { result } = renderHook(() =>
@@ -122,7 +120,7 @@ describe('useAutoRefresh', () => {
   })
 
   describe('refresh timing', () => {
-    it('should call onRefresh after intervalMs when enabled', async () => {
+    it('calls onRefresh after intervalMs when enabled', async () => {
       const onRefresh = vi.fn().mockResolvedValue(undefined)
 
       renderHook(() =>
@@ -133,23 +131,20 @@ describe('useAutoRefresh', () => {
         })
       )
 
-      // Not called initially
       expect(onRefresh).not.toHaveBeenCalled()
 
-      // Advance to just before interval
       act(() => {
         vi.advanceTimersByTime(4999)
       })
       expect(onRefresh).not.toHaveBeenCalled()
 
-      // Advance past interval
       act(() => {
         vi.advanceTimersByTime(1)
       })
       expect(onRefresh).toHaveBeenCalledTimes(1)
     })
 
-    it('should not call onRefresh when disabled', () => {
+    it('does not call onRefresh when disabled', () => {
       const onRefresh = vi.fn().mockResolvedValue(undefined)
 
       renderHook(() =>
@@ -167,7 +162,7 @@ describe('useAutoRefresh', () => {
       expect(onRefresh).not.toHaveBeenCalled()
     })
 
-    it('should call onRefresh multiple times at interval', () => {
+    it('calls onRefresh multiple times at interval', () => {
       const onRefresh = vi.fn().mockResolvedValue(undefined)
 
       renderHook(() =>
@@ -179,7 +174,7 @@ describe('useAutoRefresh', () => {
       )
 
       act(() => {
-        vi.advanceTimersByTime(15000) // 3 intervals
+        vi.advanceTimersByTime(15000)
       })
 
       expect(onRefresh).toHaveBeenCalledTimes(3)
@@ -187,7 +182,7 @@ describe('useAutoRefresh', () => {
   })
 
   describe('countdown', () => {
-    it('should decrement countdown every second when enabled', () => {
+    it('decrements countdown every second when enabled', () => {
       const onRefresh = vi.fn().mockResolvedValue(undefined)
 
       const { result } = renderHook(() =>
@@ -211,7 +206,7 @@ describe('useAutoRefresh', () => {
       expect(result.current.secondsUntilNextRefresh).toBe(3)
     })
 
-    it('should reset countdown after reaching zero', () => {
+    it('resets countdown after reaching zero', () => {
       const onRefresh = vi.fn().mockResolvedValue(undefined)
 
       const { result } = renderHook(() =>
@@ -224,45 +219,11 @@ describe('useAutoRefresh', () => {
 
       expect(result.current.secondsUntilNextRefresh).toBe(3)
 
-      // Advance 3 seconds to reach zero
       act(() => {
         vi.advanceTimersByTime(3000)
       })
 
-      // Should reset to initial value
       expect(result.current.secondsUntilNextRefresh).toBe(3)
     })
   })
-
-  describe('cleanup', () => {
-    it('should stop refresh when disabled after being enabled', () => {
-      const onRefresh = vi.fn().mockResolvedValue(undefined)
-
-      const { result } = renderHook(() =>
-        useAutoRefresh({
-          intervalMs: 5000,
-          onRefresh,
-          enabled: true,
-        })
-      )
-
-      // Advance half interval
-      act(() => {
-        vi.advanceTimersByTime(2500)
-      })
-
-      // Disable
-      act(() => {
-        result.current.setEnabled(false)
-      })
-
-      // Advance another full interval
-      act(() => {
-        vi.advanceTimersByTime(10000)
-      })
-
-      // Should not have been called (disabled before first interval completed)
-      expect(onRefresh).not.toHaveBeenCalled()
-    })
-  })
 })
diff --git a/frontends/nextjs/src/lib/db/core/entities.ts b/frontends/nextjs/src/lib/db/core/entities.ts
new file mode 100644
index 000000000..c5b09e9f8
--- /dev/null
+++ b/frontends/nextjs/src/lib/db/core/entities.ts
@@ -0,0 +1,22 @@
+// Domain re-exports
+export * from '../auth'
+export * from '../users'
+export * from '../credentials'
+export * from '../sessions'
+export * from '../workflows'
+export * from '../lua-scripts'
+export * from '../pages'
+export * from '../schemas'
+export * from '../comments'
+export * from '../app-config'
+export * from '../system-config'
+export * from '../components'
+export * from '../css-classes'
+export * from '../dropdown-configs'
+export * from '../tenants'
+export * from '../packages'
+export * from '../power-transfers'
+export * from '../smtp-config'
+export * from '../god-credentials'
+export * from '../database-admin'
+export * from '../error-logs'
diff --git a/frontends/nextjs/src/lib/db/core/index.ts b/frontends/nextjs/src/lib/db/core/index.ts
index 26aded445..36681295d 100644
--- a/frontends/nextjs/src/lib/db/core/index.ts
+++ b/frontends/nextjs/src/lib/db/core/index.ts
@@ -6,220 +6,8 @@ export { DB_KEYS } from './types'
 export { getAdapter, closeAdapter } from './dbal-client'
 export type { DBALAdapter, ListOptions, ListResult } from './dbal-client'
 
-// Core
-export { hashPassword } from '../password/hash-password'
-export { verifyPassword } from '../password/verify-password'
-export { initializeDatabase } from './initialize-database'
+// Operations
+export { hashPassword, verifyPassword, initializeDatabase, Database } from './operations'
 
 // Domain re-exports
-export * from '../auth'
-export * from '../users'
-export * from '../credentials'
-export * from '../sessions'
-export * from '../workflows'
-export * from '../lua-scripts'
-export * from '../pages'
-export * from '../schemas'
-export * from '../comments'
-export * from '../app-config'
-export * from '../system-config'
-export * from '../components'
-export * from '../css-classes'
-export * from '../dropdown-configs'
-export * from '../tenants'
-export * from '../packages'
-export * from '../power-transfers'
-export * from '../smtp-config'
-export * from '../god-credentials'
-export * from '../database-admin'
-export * from '../error-logs'
-
-// Import all for namespace class
-import { initializeDatabase } from './initialize-database'
-import { hashPassword } from '../password/hash-password'
-import { verifyPassword } from '../password/verify-password'
-import * as auth from '../auth'
-import * as users from '../users'
-import * as credentials from '../credentials'
-import * as sessions from '../sessions'
-import * as workflows from '../workflows'
-import * as luaScripts from '../lua-scripts'
-import * as pages from '../pages'
-import * as schemas from '../schemas'
-import * as comments from '../comments'
-import * as appConfig from '../app-config'
-import * as systemConfig from '../system-config'
-import * as components from '../components'
-import * as cssClasses from '../css-classes'
-import * as dropdownConfigs from '../dropdown-configs'
-import * as tenants from '../tenants'
-import * as packages from '../packages'
-import * as powerTransfers from '../power-transfers'
-import * as smtpConfig from '../smtp-config'
-import * as godCredentials from '../god-credentials'
-import * as databaseAdmin from '../database-admin'
-import * as errorLogs from '../error-logs'
-
-/**
- * Database namespace class - groups all DB operations as static methods
- * No instance state - pure function container for backward compatibility
- */
-export class Database {
-  // Core
-  static initializeDatabase = initializeDatabase
-  static hashPassword = hashPassword
-  static verifyPassword = verifyPassword
-
-  // Auth
-  static authenticateUser = auth.authenticateUser
-  static getUserByUsername = auth.getUserByUsername
-  static getUserByEmail = auth.getUserByEmail
-
-  // Users
-  static getUsers = users.getUsers
-  static getUserById = users.getUserById
-  static setUsers = users.setUsers
-  static addUser = users.addUser
-  static updateUser = users.updateUser
-  static deleteUser = users.deleteUser
-  static getSuperGod = users.getSuperGod
-  static transferSuperGodPower = users.transferSuperGodPower
-
-  // Credentials
-  static getCredentials = credentials.getCredentials
-  static setCredential = credentials.setCredential
-  static verifyCredentials = credentials.verifyCredentials
-  static getPasswordChangeTimestamps = credentials.getPasswordChangeTimestamps
-  static setPasswordChangeTimestamps = credentials.setPasswordChangeTimestamps
-  static getPasswordResetTokens = credentials.getPasswordResetTokens
-  static setPasswordResetToken = credentials.setPasswordResetToken
-  static deletePasswordResetToken = credentials.deletePasswordResetToken
-  
-  // Sessions
-  static createSession = sessions.createSession
-  static getSessionById = sessions.getSessionById
-  static getSessionByToken = sessions.getSessionByToken
-  static updateSession = sessions.updateSession
-  static deleteSession = sessions.deleteSession
-  static deleteSessionByToken = sessions.deleteSessionByToken
-  static listSessions = sessions.listSessions
-
-  // Workflows
-  static getWorkflows = workflows.getWorkflows
-  static setWorkflows = workflows.setWorkflows
-  static addWorkflow = workflows.addWorkflow
-  static updateWorkflow = workflows.updateWorkflow
-  static deleteWorkflow = workflows.deleteWorkflow
-
-  // Lua Scripts
-  static getLuaScripts = luaScripts.getLuaScripts
-  static setLuaScripts = luaScripts.setLuaScripts
-  static addLuaScript = luaScripts.addLuaScript
-  static updateLuaScript = luaScripts.updateLuaScript
-  static deleteLuaScript = luaScripts.deleteLuaScript
-
-  // Pages
-  static getPages = pages.getPages
-  static setPages = pages.setPages
-  static addPage = pages.addPage
-  static updatePage = pages.updatePage
-  static deletePage = pages.deletePage
-
-  // Schemas
-  static getSchemas = schemas.getSchemas
-  static setSchemas = schemas.setSchemas
-  static addSchema = schemas.addSchema
-  static updateSchema = schemas.updateSchema
-  static deleteSchema = schemas.deleteSchema
-
-  // Comments
-  static getComments = comments.getComments
-  static setComments = comments.setComments
-  static addComment = comments.addComment
-  static updateComment = comments.updateComment
-  static deleteComment = comments.deleteComment
-
-  // App Config
-  static getAppConfig = appConfig.getAppConfig
-  static setAppConfig = appConfig.setAppConfig
-
-  // System Config
-  static getSystemConfigValue = systemConfig.getSystemConfigValue
-
-  // Components
-  static getComponentHierarchy = components.getComponentHierarchy
-  static setComponentHierarchy = components.setComponentHierarchy
-  static addComponentNode = components.addComponentNode
-  static updateComponentNode = components.updateComponentNode
-  static deleteComponentNode = components.deleteComponentNode
-  static getComponentConfigs = components.getComponentConfigs
-  static setComponentConfigs = components.setComponentConfigs
-  static addComponentConfig = components.addComponentConfig
-  static updateComponentConfig = components.updateComponentConfig
-  static deleteComponentConfig = components.deleteComponentConfig
-
-  // CSS Classes
-  static getCssClasses = cssClasses.getCssClasses
-  static setCssClasses = cssClasses.setCssClasses
-  static addCssCategory = cssClasses.addCssCategory
-  static updateCssCategory = cssClasses.updateCssCategory
-  static deleteCssCategory = cssClasses.deleteCssCategory
-
-  // Dropdown Configs
-  static getDropdownConfigs = dropdownConfigs.getDropdownConfigs
-  static setDropdownConfigs = dropdownConfigs.setDropdownConfigs
-  static addDropdownConfig = dropdownConfigs.addDropdownConfig
-  static updateDropdownConfig = dropdownConfigs.updateDropdownConfig
-  static deleteDropdownConfig = dropdownConfigs.deleteDropdownConfig
-
-  // Tenants
-  static getTenants = tenants.getTenants
-  static setTenants = tenants.setTenants
-  static addTenant = tenants.addTenant
-  static updateTenant = tenants.updateTenant
-  static deleteTenant = tenants.deleteTenant
-
-  // Packages
-  static getInstalledPackages = packages.getInstalledPackages
-  static setInstalledPackages = packages.setInstalledPackages
-  static installPackage = packages.installPackage
-  static uninstallPackage = packages.uninstallPackage
-  static togglePackageEnabled = packages.togglePackageEnabled
-  static getPackageData = packages.getPackageData
-  static setPackageData = packages.setPackageData
-  static deletePackageData = packages.deletePackageData
-
-  // Power Transfers
-  static getPowerTransferRequests = powerTransfers.getPowerTransferRequests
-  static setPowerTransferRequests = powerTransfers.setPowerTransferRequests
-  static addPowerTransferRequest = powerTransfers.addPowerTransferRequest
-  static updatePowerTransferRequest = powerTransfers.updatePowerTransferRequest
-  static deletePowerTransferRequest = powerTransfers.deletePowerTransferRequest
-
-  // SMTP Config
-  static getSMTPConfig = smtpConfig.getSMTPConfig
-  static setSMTPConfig = smtpConfig.setSMTPConfig
-
-  // God Credentials
-  static getGodCredentialsExpiry = godCredentials.getGodCredentialsExpiry
-  static setGodCredentialsExpiry = godCredentials.setGodCredentialsExpiry
-  static getFirstLoginFlags = godCredentials.getFirstLoginFlags
-  static setFirstLoginFlag = godCredentials.setFirstLoginFlag
-  static getGodCredentialsExpiryDuration = godCredentials.getGodCredentialsExpiryDuration
-  static setGodCredentialsExpiryDuration = godCredentials.setGodCredentialsExpiryDuration
-  static shouldShowGodCredentials = godCredentials.shouldShowGodCredentials
-  static resetGodCredentialsExpiry = godCredentials.resetGodCredentialsExpiry
-
-  // Database Admin
-  static clearDatabase = databaseAdmin.clearDatabase
-  static exportDatabase = databaseAdmin.exportDatabase
-  static importDatabase = databaseAdmin.importDatabase
-  static seedDefaultData = databaseAdmin.seedDefaultData
-
-  // Error Logs
-  static getErrorLogs = errorLogs.getErrorLogs
-  static addErrorLog = errorLogs.addErrorLog
-  static updateErrorLog = errorLogs.updateErrorLog
-  static deleteErrorLog = errorLogs.deleteErrorLog
-  static clearErrorLogs = errorLogs.clearErrorLogs
-}
+export * from './entities'
diff --git a/frontends/nextjs/src/lib/db/core/operations.ts b/frontends/nextjs/src/lib/db/core/operations.ts
new file mode 100644
index 000000000..3135730a7
--- /dev/null
+++ b/frontends/nextjs/src/lib/db/core/operations.ts
@@ -0,0 +1,190 @@
+import { initializeDatabase } from './initialize-database'
+import { hashPassword } from '../password/hash-password'
+import { verifyPassword } from '../password/verify-password'
+import * as auth from '../auth'
+import * as users from '../users'
+import * as credentials from '../credentials'
+import * as sessions from '../sessions'
+import * as workflows from '../workflows'
+import * as luaScripts from '../lua-scripts'
+import * as pages from '../pages'
+import * as schemas from '../schemas'
+import * as comments from '../comments'
+import * as appConfig from '../app-config'
+import * as systemConfig from '../system-config'
+import * as components from '../components'
+import * as cssClasses from '../css-classes'
+import * as dropdownConfigs from '../dropdown-configs'
+import * as tenants from '../tenants'
+import * as packages from '../packages'
+import * as powerTransfers from '../power-transfers'
+import * as smtpConfig from '../smtp-config'
+import * as godCredentials from '../god-credentials'
+import * as databaseAdmin from '../database-admin'
+import * as errorLogs from '../error-logs'
+
+export { initializeDatabase, hashPassword, verifyPassword }
+
+/**
+ * Database namespace class - groups all DB operations as static methods
+ * No instance state - pure function container for backward compatibility
+ */
+export class Database {
+  // Core
+  static initializeDatabase = initializeDatabase
+  static hashPassword = hashPassword
+  static verifyPassword = verifyPassword
+
+  // Auth
+  static authenticateUser = auth.authenticateUser
+  static getUserByUsername = auth.getUserByUsername
+  static getUserByEmail = auth.getUserByEmail
+
+  // Users
+  static getUsers = users.getUsers
+  static getUserById = users.getUserById
+  static setUsers = users.setUsers
+  static addUser = users.addUser
+  static updateUser = users.updateUser
+  static deleteUser = users.deleteUser
+  static getSuperGod = users.getSuperGod
+  static transferSuperGodPower = users.transferSuperGodPower
+
+  // Credentials
+  static getCredentials = credentials.getCredentials
+  static setCredential = credentials.setCredential
+  static verifyCredentials = credentials.verifyCredentials
+  static getPasswordChangeTimestamps = credentials.getPasswordChangeTimestamps
+  static setPasswordChangeTimestamps = credentials.setPasswordChangeTimestamps
+  static getPasswordResetTokens = credentials.getPasswordResetTokens
+  static setPasswordResetToken = credentials.setPasswordResetToken
+  static deletePasswordResetToken = credentials.deletePasswordResetToken
+
+  // Sessions
+  static createSession = sessions.createSession
+  static getSessionById = sessions.getSessionById
+  static getSessionByToken = sessions.getSessionByToken
+  static updateSession = sessions.updateSession
+  static deleteSession = sessions.deleteSession
+  static deleteSessionByToken = sessions.deleteSessionByToken
+  static listSessions = sessions.listSessions
+
+  // Workflows
+  static getWorkflows = workflows.getWorkflows
+  static setWorkflows = workflows.setWorkflows
+  static addWorkflow = workflows.addWorkflow
+  static updateWorkflow = workflows.updateWorkflow
+  static deleteWorkflow = workflows.deleteWorkflow
+
+  // Lua Scripts
+  static getLuaScripts = luaScripts.getLuaScripts
+  static setLuaScripts = luaScripts.setLuaScripts
+  static addLuaScript = luaScripts.addLuaScript
+  static updateLuaScript = luaScripts.updateLuaScript
+  static deleteLuaScript = luaScripts.deleteLuaScript
+
+  // Pages
+  static getPages = pages.getPages
+  static setPages = pages.setPages
+  static addPage = pages.addPage
+  static updatePage = pages.updatePage
+  static deletePage = pages.deletePage
+
+  // Schemas
+  static getSchemas = schemas.getSchemas
+  static setSchemas = schemas.setSchemas
+  static addSchema = schemas.addSchema
+  static updateSchema = schemas.updateSchema
+  static deleteSchema = schemas.deleteSchema
+
+  // Comments
+  static getComments = comments.getComments
+  static setComments = comments.setComments
+  static addComment = comments.addComment
+  static updateComment = comments.updateComment
+  static deleteComment = comments.deleteComment
+
+  // App Config
+  static getAppConfig = appConfig.getAppConfig
+  static setAppConfig = appConfig.setAppConfig
+
+  // System Config
+  static getSystemConfigValue = systemConfig.getSystemConfigValue
+
+  // Components
+  static getComponentHierarchy = components.getComponentHierarchy
+  static setComponentHierarchy = components.setComponentHierarchy
+  static addComponentNode = components.addComponentNode
+  static updateComponentNode = components.updateComponentNode
+  static deleteComponentNode = components.deleteComponentNode
+  static getComponentConfigs = components.getComponentConfigs
+  static setComponentConfigs = components.setComponentConfigs
+  static addComponentConfig = components.addComponentConfig
+  static updateComponentConfig = components.updateComponentConfig
+  static deleteComponentConfig = components.deleteComponentConfig
+
+  // CSS Classes
+  static getCssClasses = cssClasses.getCssClasses
+  static setCssClasses = cssClasses.setCssClasses
+  static addCssCategory = cssClasses.addCssCategory
+  static updateCssCategory = cssClasses.updateCssCategory
+  static deleteCssCategory = cssClasses.deleteCssCategory
+
+  // Dropdown Configs
+  static getDropdownConfigs = dropdownConfigs.getDropdownConfigs
+  static setDropdownConfigs = dropdownConfigs.setDropdownConfigs
+  static addDropdownConfig = dropdownConfigs.addDropdownConfig
+  static updateDropdownConfig = dropdownConfigs.updateDropdownConfig
+  static deleteDropdownConfig = dropdownConfigs.deleteDropdownConfig
+
+  // Tenants
+  static getTenants = tenants.getTenants
+  static setTenants = tenants.setTenants
+  static addTenant = tenants.addTenant
+  static updateTenant = tenants.updateTenant
+  static deleteTenant = tenants.deleteTenant
+
+  // Packages
+  static getInstalledPackages = packages.getInstalledPackages
+  static setInstalledPackages = packages.setInstalledPackages
+  static installPackage = packages.installPackage
+  static uninstallPackage = packages.uninstallPackage
+  static togglePackageEnabled = packages.togglePackageEnabled
+  static getPackageData = packages.getPackageData
+  static setPackageData = packages.setPackageData
+  static deletePackageData = packages.deletePackageData
+
+  // Power Transfers
+  static getPowerTransferRequests = powerTransfers.getPowerTransferRequests
+  static setPowerTransferRequests = powerTransfers.setPowerTransferRequests
+  static addPowerTransferRequest = powerTransfers.addPowerTransferRequest
+  static updatePowerTransferRequest = powerTransfers.updatePowerTransferRequest
+  static deletePowerTransferRequest = powerTransfers.deletePowerTransferRequest
+
+  // SMTP Config
+  static getSMTPConfig = smtpConfig.getSMTPConfig
+  static setSMTPConfig = smtpConfig.setSMTPConfig
+
+  // God Credentials
+  static getGodCredentialsExpiry = godCredentials.getGodCredentialsExpiry
+  static setGodCredentialsExpiry = godCredentials.setGodCredentialsExpiry
+  static getFirstLoginFlags = godCredentials.getFirstLoginFlags
+  static setFirstLoginFlag = godCredentials.setFirstLoginFlag
+  static getGodCredentialsExpiryDuration = godCredentials.getGodCredentialsExpiryDuration
+  static setGodCredentialsExpiryDuration = godCredentials.setGodCredentialsExpiryDuration
+  static shouldShowGodCredentials = godCredentials.shouldShowGodCredentials
+  static resetGodCredentialsExpiry = godCredentials.resetGodCredentialsExpiry
+
+  // Database Admin
+  static clearDatabase = databaseAdmin.clearDatabase
+  static exportDatabase = databaseAdmin.exportDatabase
+  static importDatabase = databaseAdmin.importDatabase
+  static seedDefaultData = databaseAdmin.seedDefaultData
+
+  // Error Logs
+  static getErrorLogs = errorLogs.getErrorLogs
+  static addErrorLog = errorLogs.addErrorLog
+  static updateErrorLog = errorLogs.updateErrorLog
+  static deleteErrorLog = errorLogs.deleteErrorLog
+  static clearErrorLogs = errorLogs.clearErrorLogs
+}
diff --git a/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/categories/advanced.ts b/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/categories/advanced.ts
new file mode 100644
index 000000000..19ca68f3d
--- /dev/null
+++ b/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/categories/advanced.ts
@@ -0,0 +1,3 @@
+import type { CssCategory } from '../../../../core/types'
+
+export const buildAdvancedCssCategories = (): CssCategory[] => []
diff --git a/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/categories/base.ts b/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/categories/base.ts
new file mode 100644
index 000000000..ac5c71f08
--- /dev/null
+++ b/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/categories/base.ts
@@ -0,0 +1,278 @@
+import type { CssCategory } from '../../../../core/types'
+import { buildSizingClasses, buildSpacingClasses } from '../build-css-classes'
+
+export const buildBaseCssCategories = (): CssCategory[] => [
+  {
+    name: 'Layout',
+    classes: [
+      'block',
+      'inline-block',
+      'inline',
+      'flex',
+      'inline-flex',
+      'grid',
+      'inline-grid',
+      'contents',
+      'hidden',
+      'flex-row',
+      'flex-row-reverse',
+      'flex-col',
+      'flex-col-reverse',
+      'flex-wrap',
+      'flex-wrap-reverse',
+      'flex-nowrap',
+    ],
+  },
+  {
+    name: 'Spacing',
+    classes: buildSpacingClasses(),
+  },
+  {
+    name: 'Sizing',
+    classes: buildSizingClasses(),
+  },
+  {
+    name: 'Typography',
+    classes: [
+      'text-xs',
+      'text-sm',
+      'text-base',
+      'text-lg',
+      'text-xl',
+      'text-2xl',
+      'text-3xl',
+      'text-4xl',
+      'text-5xl',
+      'text-6xl',
+      'font-thin',
+      'font-light',
+      'font-normal',
+      'font-medium',
+      'font-semibold',
+      'font-bold',
+      'font-extrabold',
+      'font-black',
+      'leading-none',
+      'leading-tight',
+      'leading-snug',
+      'leading-normal',
+      'leading-relaxed',
+      'leading-loose',
+      'tracking-tighter',
+      'tracking-tight',
+      'tracking-normal',
+      'tracking-wide',
+      'tracking-wider',
+      'tracking-widest',
+      'text-left',
+      'text-center',
+      'text-right',
+      'text-justify',
+      'uppercase',
+      'lowercase',
+      'capitalize',
+      'normal-case',
+      'italic',
+      'not-italic',
+      'underline',
+      'no-underline',
+      'line-through',
+      'font-sans',
+      'font-serif',
+      'font-mono',
+    ],
+  },
+  {
+    name: 'Colors',
+    classes: [
+      'text-foreground',
+      'text-muted-foreground',
+      'text-primary',
+      'text-primary-foreground',
+      'text-secondary',
+      'text-secondary-foreground',
+      'text-accent',
+      'text-accent-foreground',
+      'text-destructive',
+      'text-destructive-foreground',
+      'bg-background',
+      'bg-card',
+      'bg-muted',
+      'bg-accent',
+      'bg-primary',
+      'bg-secondary',
+      'bg-destructive',
+      'bg-popover',
+      'bg-transparent',
+      'bg-white',
+      'bg-black',
+      'text-white',
+      'text-black',
+      'border-border',
+      'border-input',
+      'border-primary',
+      'border-secondary',
+      'border-accent',
+      'border-destructive',
+      'ring-ring',
+      'ring-primary',
+      'ring-secondary',
+      'ring-accent',
+      'ring-destructive',
+    ],
+  },
+  {
+    name: 'Borders',
+    classes: [
+      'border',
+      'border-0',
+      'border-2',
+      'border-4',
+      'border-8',
+      'border-t',
+      'border-b',
+      'border-l',
+      'border-r',
+      'border-x',
+      'border-y',
+      'border-solid',
+      'border-dashed',
+      'border-dotted',
+      'border-double',
+      'border-hidden',
+      'rounded-none',
+      'rounded-sm',
+      'rounded',
+      'rounded-md',
+      'rounded-lg',
+      'rounded-xl',
+      'rounded-2xl',
+      'rounded-3xl',
+      'rounded-full',
+    ],
+  },
+  {
+    name: 'Effects',
+    classes: [
+      'shadow-none',
+      'shadow-sm',
+      'shadow',
+      'shadow-md',
+      'shadow-lg',
+      'shadow-xl',
+      'shadow-2xl',
+      'shadow-inner',
+      'ring-0',
+      'ring-1',
+      'ring-2',
+      'ring-4',
+      'ring-offset-1',
+      'ring-offset-2',
+      'opacity-0',
+      'opacity-25',
+      'opacity-50',
+      'opacity-75',
+      'opacity-100',
+      'transition',
+      'transition-all',
+      'transition-colors',
+      'transition-opacity',
+      'transition-transform',
+      'duration-75',
+      'duration-100',
+      'duration-150',
+      'duration-200',
+      'duration-300',
+      'duration-500',
+      'ease-in',
+      'ease-out',
+      'ease-in-out',
+      'blur-none',
+      'blur-sm',
+      'blur',
+      'blur-md',
+      'blur-lg',
+      'backdrop-blur',
+      'backdrop-blur-sm',
+    ],
+  },
+  {
+    name: 'Positioning',
+    classes: [
+      'static',
+      'relative',
+      'absolute',
+      'fixed',
+      'sticky',
+      'inset-0',
+      'inset-x-0',
+      'inset-y-0',
+      'top-0',
+      'right-0',
+      'bottom-0',
+      'left-0',
+      'z-auto',
+      'z-0',
+      'z-10',
+      'z-20',
+      'z-30',
+      'z-40',
+      'z-50',
+      'overflow-hidden',
+      'overflow-auto',
+      'overflow-scroll',
+      'overflow-visible',
+      'overflow-x-auto',
+      'overflow-y-auto',
+    ],
+  },
+  {
+    name: 'Alignment',
+    classes: [
+      'items-start',
+      'items-center',
+      'items-end',
+      'items-stretch',
+      'items-baseline',
+      'justify-start',
+      'justify-center',
+      'justify-end',
+      'justify-between',
+      'justify-around',
+      'justify-evenly',
+      'content-start',
+      'content-center',
+      'content-end',
+      'self-start',
+      'self-center',
+      'self-end',
+      'self-stretch',
+      'place-items-start',
+      'place-items-center',
+      'place-items-end',
+    ],
+  },
+  {
+    name: 'Interactivity',
+    classes: [
+      'cursor-pointer',
+      'cursor-default',
+      'cursor-not-allowed',
+      'pointer-events-none',
+      'pointer-events-auto',
+      'select-none',
+      'select-text',
+      'select-all',
+      'select-auto',
+      'hover:bg-accent',
+      'hover:text-accent-foreground',
+      'hover:underline',
+      'active:scale-95',
+      'focus:ring-2',
+      'focus:ring-primary',
+      'focus-visible:outline-none',
+      'disabled:opacity-50',
+      'disabled:pointer-events-none',
+    ],
+  },
+]
diff --git a/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/categories/experimental.ts b/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/categories/experimental.ts
new file mode 100644
index 000000000..6bc131ebd
--- /dev/null
+++ b/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/categories/experimental.ts
@@ -0,0 +1,3 @@
+import type { CssCategory } from '../../../../core/types'
+
+export const buildExperimentalCssCategories = (): CssCategory[] => []
diff --git a/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/default-css-categories.ts b/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/default-css-categories.ts
index 772760517..c9449ffdc 100644
--- a/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/default-css-categories.ts
+++ b/frontends/nextjs/src/lib/db/database-admin/seed-default-data/css/default-css-categories.ts
@@ -1,278 +1,10 @@
 import type { CssCategory } from '../../../core/types'
-import { buildSizingClasses, buildSpacingClasses } from './build-css-classes'
+import { buildAdvancedCssCategories } from './categories/advanced'
+import { buildBaseCssCategories } from './categories/base'
+import { buildExperimentalCssCategories } from './categories/experimental'
 
 export const buildDefaultCssCategories = (): CssCategory[] => [
-  {
-    name: 'Layout',
-    classes: [
-      'block',
-      'inline-block',
-      'inline',
-      'flex',
-      'inline-flex',
-      'grid',
-      'inline-grid',
-      'contents',
-      'hidden',
-      'flex-row',
-      'flex-row-reverse',
-      'flex-col',
-      'flex-col-reverse',
-      'flex-wrap',
-      'flex-wrap-reverse',
-      'flex-nowrap',
-    ],
-  },
-  {
-    name: 'Spacing',
-    classes: buildSpacingClasses(),
-  },
-  {
-    name: 'Sizing',
-    classes: buildSizingClasses(),
-  },
-  {
-    name: 'Typography',
-    classes: [
-      'text-xs',
-      'text-sm',
-      'text-base',
-      'text-lg',
-      'text-xl',
-      'text-2xl',
-      'text-3xl',
-      'text-4xl',
-      'text-5xl',
-      'text-6xl',
-      'font-thin',
-      'font-light',
-      'font-normal',
-      'font-medium',
-      'font-semibold',
-      'font-bold',
-      'font-extrabold',
-      'font-black',
-      'leading-none',
-      'leading-tight',
-      'leading-snug',
-      'leading-normal',
-      'leading-relaxed',
-      'leading-loose',
-      'tracking-tighter',
-      'tracking-tight',
-      'tracking-normal',
-      'tracking-wide',
-      'tracking-wider',
-      'tracking-widest',
-      'text-left',
-      'text-center',
-      'text-right',
-      'text-justify',
-      'uppercase',
-      'lowercase',
-      'capitalize',
-      'normal-case',
-      'italic',
-      'not-italic',
-      'underline',
-      'no-underline',
-      'line-through',
-      'font-sans',
-      'font-serif',
-      'font-mono',
-    ],
-  },
-  {
-    name: 'Colors',
-    classes: [
-      'text-foreground',
-      'text-muted-foreground',
-      'text-primary',
-      'text-primary-foreground',
-      'text-secondary',
-      'text-secondary-foreground',
-      'text-accent',
-      'text-accent-foreground',
-      'text-destructive',
-      'text-destructive-foreground',
-      'bg-background',
-      'bg-card',
-      'bg-muted',
-      'bg-accent',
-      'bg-primary',
-      'bg-secondary',
-      'bg-destructive',
-      'bg-popover',
-      'bg-transparent',
-      'bg-white',
-      'bg-black',
-      'text-white',
-      'text-black',
-      'border-border',
-      'border-input',
-      'border-primary',
-      'border-secondary',
-      'border-accent',
-      'border-destructive',
-      'ring-ring',
-      'ring-primary',
-      'ring-secondary',
-      'ring-accent',
-      'ring-destructive',
-    ],
-  },
-  {
-    name: 'Borders',
-    classes: [
-      'border',
-      'border-0',
-      'border-2',
-      'border-4',
-      'border-8',
-      'border-t',
-      'border-b',
-      'border-l',
-      'border-r',
-      'border-x',
-      'border-y',
-      'border-solid',
-      'border-dashed',
-      'border-dotted',
-      'border-double',
-      'border-hidden',
-      'rounded-none',
-      'rounded-sm',
-      'rounded',
-      'rounded-md',
-      'rounded-lg',
-      'rounded-xl',
-      'rounded-2xl',
-      'rounded-3xl',
-      'rounded-full',
-    ],
-  },
-  {
-    name: 'Effects',
-    classes: [
-      'shadow-none',
-      'shadow-sm',
-      'shadow',
-      'shadow-md',
-      'shadow-lg',
-      'shadow-xl',
-      'shadow-2xl',
-      'shadow-inner',
-      'ring-0',
-      'ring-1',
-      'ring-2',
-      'ring-4',
-      'ring-offset-1',
-      'ring-offset-2',
-      'opacity-0',
-      'opacity-25',
-      'opacity-50',
-      'opacity-75',
-      'opacity-100',
-      'transition',
-      'transition-all',
-      'transition-colors',
-      'transition-opacity',
-      'transition-transform',
-      'duration-75',
-      'duration-100',
-      'duration-150',
-      'duration-200',
-      'duration-300',
-      'duration-500',
-      'ease-in',
-      'ease-out',
-      'ease-in-out',
-      'blur-none',
-      'blur-sm',
-      'blur',
-      'blur-md',
-      'blur-lg',
-      'backdrop-blur',
-      'backdrop-blur-sm',
-    ],
-  },
-  {
-    name: 'Positioning',
-    classes: [
-      'static',
-      'relative',
-      'absolute',
-      'fixed',
-      'sticky',
-      'inset-0',
-      'inset-x-0',
-      'inset-y-0',
-      'top-0',
-      'right-0',
-      'bottom-0',
-      'left-0',
-      'z-auto',
-      'z-0',
-      'z-10',
-      'z-20',
-      'z-30',
-      'z-40',
-      'z-50',
-      'overflow-hidden',
-      'overflow-auto',
-      'overflow-scroll',
-      'overflow-visible',
-      'overflow-x-auto',
-      'overflow-y-auto',
-    ],
-  },
-  {
-    name: 'Alignment',
-    classes: [
-      'items-start',
-      'items-center',
-      'items-end',
-      'items-stretch',
-      'items-baseline',
-      'justify-start',
-      'justify-center',
-      'justify-end',
-      'justify-between',
-      'justify-around',
-      'justify-evenly',
-      'content-start',
-      'content-center',
-      'content-end',
-      'self-start',
-      'self-center',
-      'self-end',
-      'self-stretch',
-      'place-items-start',
-      'place-items-center',
-      'place-items-end',
-    ],
-  },
-  {
-    name: 'Interactivity',
-    classes: [
-      'cursor-pointer',
-      'cursor-default',
-      'cursor-not-allowed',
-      'pointer-events-none',
-      'pointer-events-auto',
-      'select-none',
-      'select-text',
-      'select-all',
-      'select-auto',
-      'hover:bg-accent',
-      'hover:text-accent-foreground',
-      'hover:underline',
-      'active:scale-95',
-      'focus:ring-2',
-      'focus:ring-primary',
-      'focus-visible:outline-none',
-      'disabled:opacity-50',
-      'disabled:pointer-events-none',
-    ],
-  },
+  ...buildBaseCssCategories(),
+  ...buildAdvancedCssCategories(),
+  ...buildExperimentalCssCategories(),
 ]
diff --git a/frontends/nextjs/src/lib/github/workflows/analysis/runs/analyze-workflow-runs.test.ts b/frontends/nextjs/src/lib/github/workflows/analysis/runs/analyze-workflow-runs.test.ts
index ce3d5d2a1..ce1897add 100644
--- a/frontends/nextjs/src/lib/github/workflows/analysis/runs/analyze-workflow-runs.test.ts
+++ b/frontends/nextjs/src/lib/github/workflows/analysis/runs/analyze-workflow-runs.test.ts
@@ -1,5 +1,52 @@
 import { describe, it, expect } from 'vitest'
-import { summarizeWorkflowRuns } from './analyze-workflow-runs'
+import {
+  analyzeWorkflowRuns,
+  parseWorkflowRuns,
+  summarizeWorkflowRuns,
+} from './analyze-workflow-runs'
+
+describe('parseWorkflowRuns', () => {
+  it('normalizes unknown entries and ignores items without numeric IDs', () => {
+    const runs = [
+      {
+        id: 1,
+        name: 'Build',
+        status: 'completed',
+        conclusion: 'success',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:10:00Z',
+        head_branch: 'main',
+        event: 'push',
+      },
+      { id: 'not-a-number' },
+      {
+        id: 2,
+        name: '',
+        status: '',
+        conclusion: 'failure',
+        created_at: '',
+        updated_at: '',
+        head_branch: '',
+        event: '',
+      },
+    ]
+
+    const parsed = parseWorkflowRuns(runs)
+
+    expect(parsed).toHaveLength(2)
+    expect(parsed[0].name).toBe('Build')
+    expect(parsed[1]).toEqual({
+      id: 2,
+      name: 'Unknown workflow',
+      status: 'unknown',
+      conclusion: 'failure',
+      created_at: '',
+      updated_at: '',
+      head_branch: 'unknown',
+      event: 'unknown',
+    })
+  })
+})
 
 describe('summarizeWorkflowRuns', () => {
   it('summarizes totals, success rate, and failure hotspots', () => {
@@ -60,3 +107,24 @@ describe('summarizeWorkflowRuns', () => {
     expect(summary.mostRecent).toBeNull()
   })
 })
+
+describe('analyzeWorkflowRuns', () => {
+  it('returns parsed summary and formatted output', () => {
+    const result = analyzeWorkflowRuns([
+      {
+        id: 7,
+        name: 'Deploy',
+        status: 'completed',
+        conclusion: 'success',
+        created_at: '2024-02-01T00:00:00Z',
+        updated_at: '2024-02-01T00:05:00Z',
+        head_branch: 'main',
+        event: 'workflow_dispatch',
+      },
+    ])
+
+    expect(result.summary.total).toBe(1)
+    expect(result.formatted).toContain('Workflow Run Analysis')
+    expect(result.formatted).toContain('Deploy')
+  })
+})
diff --git a/frontends/nextjs/src/lib/github/workflows/analysis/runs/analyze-workflow-runs.ts b/frontends/nextjs/src/lib/github/workflows/analysis/runs/analyze-workflow-runs.ts
index 0c9de1453..2f0049237 100644
--- a/frontends/nextjs/src/lib/github/workflows/analysis/runs/analyze-workflow-runs.ts
+++ b/frontends/nextjs/src/lib/github/workflows/analysis/runs/analyze-workflow-runs.ts
@@ -1,164 +1,18 @@
-export type WorkflowRunLike = {
-  id: number
-  name: string
-  status: string
-  conclusion: string | null
-  created_at: string
-  updated_at: string
-  head_branch: string
-  event: string
-}
+import { parseWorkflowRuns, WorkflowRunLike } from './parser'
+import { formatWorkflowRunAnalysis, summarizeWorkflowRuns, WorkflowRunSummary } from './stats'
 
-export type WorkflowRunSummary = {
-  total: number
-  completed: number
-  successful: number
-  failed: number
-  cancelled: number
-  inProgress: number
-  successRate: number
-  mostRecent: WorkflowRunLike | null
-  recentRuns: WorkflowRunLike[]
-  topFailingWorkflows: Array<{ name: string; failures: number }>
-  failingBranches: Array<{ branch: string; failures: number }>
-  failingEvents: Array<{ event: string; failures: number }>
-}
+export type { WorkflowRunLike, WorkflowRunSummary }
+export { parseWorkflowRuns, summarizeWorkflowRuns, formatWorkflowRunAnalysis }
 
-const DEFAULT_RECENT_COUNT = 5
-const DEFAULT_TOP_COUNT = 3
-
-function toTopCounts(
-  values: string[],
-  topCount: number
-): Array<{ key: string; count: number }> {
-  const counts = new Map<string, number>()
-  values.forEach((value) => {
-    counts.set(value, (counts.get(value) || 0) + 1)
-  })
-
-  return Array.from(counts.entries())
-    .map(([key, count]) => ({ key, count }))
-    .sort((a, b) => b.count - a.count || a.key.localeCompare(b.key))
-    .slice(0, topCount)
-}
-
-export function summarizeWorkflowRuns(
-  runs: WorkflowRunLike[],
+export function analyzeWorkflowRuns(
+  runs: unknown[],
   options?: { recentCount?: number; topCount?: number }
-): WorkflowRunSummary {
-  const recentCount = options?.recentCount ?? DEFAULT_RECENT_COUNT
-  const topCount = options?.topCount ?? DEFAULT_TOP_COUNT
-  const total = runs.length
-
-  const completedRuns = runs.filter((run) => run.status === 'completed')
-  const successful = completedRuns.filter((run) => run.conclusion === 'success').length
-  const failed = completedRuns.filter((run) => run.conclusion === 'failure').length
-  const cancelled = completedRuns.filter((run) => run.conclusion === 'cancelled').length
-  const inProgress = total - completedRuns.length
-  const successRate = completedRuns.length
-    ? Math.round((successful / completedRuns.length) * 100)
-    : 0
-
-  const sortedByUpdated = [...runs].sort(
-    (a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
-  )
-  const mostRecent = sortedByUpdated[0] ?? null
-  const recentRuns = sortedByUpdated.slice(0, recentCount)
-
-  const failureRuns = completedRuns.filter((run) => run.conclusion === 'failure')
-  const topFailingWorkflows = toTopCounts(
-    failureRuns.map((run) => run.name),
-    topCount
-  ).map((entry) => ({ name: entry.key, failures: entry.count }))
-
-  const failingBranches = toTopCounts(
-    failureRuns.map((run) => run.head_branch),
-    topCount
-  ).map((entry) => ({ branch: entry.key, failures: entry.count }))
-
-  const failingEvents = toTopCounts(
-    failureRuns.map((run) => run.event),
-    topCount
-  ).map((entry) => ({ event: entry.key, failures: entry.count }))
+) {
+  const parsedRuns = parseWorkflowRuns(runs)
+  const summary = summarizeWorkflowRuns(parsedRuns, options)
 
   return {
-    total,
-    completed: completedRuns.length,
-    successful,
-    failed,
-    cancelled,
-    inProgress,
-    successRate,
-    mostRecent,
-    recentRuns,
-    topFailingWorkflows,
-    failingBranches,
-    failingEvents,
+    summary,
+    formatted: formatWorkflowRunAnalysis(summary),
   }
 }
-
-export function formatWorkflowRunAnalysis(summary: WorkflowRunSummary) {
-  const lines: string[] = []
-
-  lines.push('Workflow Run Analysis')
-  lines.push('---------------------')
-  lines.push(`Total runs: ${summary.total}`)
-  lines.push(
-    `Completed: ${summary.completed} (success: ${summary.successful}, failed: ${summary.failed}, cancelled: ${summary.cancelled})`
-  )
-  lines.push(`In progress: ${summary.inProgress}`)
-  lines.push(`Success rate: ${summary.successRate}%`)
-
-  if (summary.mostRecent) {
-    lines.push('')
-    lines.push('Most recent run:')
-    lines.push(
-      `- ${summary.mostRecent.name} | ${summary.mostRecent.status}${
-        summary.mostRecent.conclusion ? `/${summary.mostRecent.conclusion}` : ''
-      } | ${summary.mostRecent.head_branch} | ${summary.mostRecent.updated_at}`
-    )
-  }
-
-  if (summary.recentRuns.length > 0) {
-    lines.push('')
-    lines.push('Recent runs:')
-    summary.recentRuns.forEach((run) => {
-      lines.push(
-        `- ${run.name} | ${run.status}${
-          run.conclusion ? `/${run.conclusion}` : ''
-        } | ${run.head_branch} | ${run.updated_at}`
-      )
-    })
-  }
-
-  if (summary.topFailingWorkflows.length > 0) {
-    lines.push('')
-    lines.push('Top failing workflows:')
-    summary.topFailingWorkflows.forEach((entry) => {
-      lines.push(`- ${entry.name}: ${entry.failures}`)
-    })
-  }
-
-  if (summary.failingBranches.length > 0) {
-    lines.push('')
-    lines.push('Failing branches:')
-    summary.failingBranches.forEach((entry) => {
-      lines.push(`- ${entry.branch}: ${entry.failures}`)
-    })
-  }
-
-  if (summary.failingEvents.length > 0) {
-    lines.push('')
-    lines.push('Failing events:')
-    summary.failingEvents.forEach((entry) => {
-      lines.push(`- ${entry.event}: ${entry.failures}`)
-    })
-  }
-
-  if (summary.total === 0) {
-    lines.push('')
-    lines.push('No workflow runs available to analyze.')
-  }
-
-  return lines.join('\n')
-}
diff --git a/frontends/nextjs/src/lib/github/workflows/analysis/runs/parser.ts b/frontends/nextjs/src/lib/github/workflows/analysis/runs/parser.ts
new file mode 100644
index 000000000..25570391d
--- /dev/null
+++ b/frontends/nextjs/src/lib/github/workflows/analysis/runs/parser.ts
@@ -0,0 +1,50 @@
+export type WorkflowRunLike = {
+  id: number
+  name: string
+  status: string
+  conclusion: string | null
+  created_at: string
+  updated_at: string
+  head_branch: string
+  event: string
+}
+
+const FALLBACK_NAME = 'Unknown workflow'
+const FALLBACK_STATUS = 'unknown'
+const FALLBACK_BRANCH = 'unknown'
+const FALLBACK_EVENT = 'unknown'
+
+function toStringOrFallback(value: unknown, fallback: string) {
+  return typeof value === 'string' && value.trim() ? value : fallback
+}
+
+export function parseWorkflowRuns(runs: unknown[]): WorkflowRunLike[] {
+  if (!Array.isArray(runs)) {
+    return []
+  }
+
+  return runs
+    .map((run) => {
+      const candidate = run as Partial<WorkflowRunLike> & { id?: unknown }
+      const id = Number(candidate.id)
+
+      if (!Number.isFinite(id)) {
+        return null
+      }
+
+      return {
+        id,
+        name: toStringOrFallback(candidate.name, FALLBACK_NAME),
+        status: toStringOrFallback(candidate.status, FALLBACK_STATUS),
+        conclusion:
+          candidate.conclusion === null || typeof candidate.conclusion === 'string'
+            ? candidate.conclusion
+            : null,
+        created_at: toStringOrFallback(candidate.created_at, ''),
+        updated_at: toStringOrFallback(candidate.updated_at, ''),
+        head_branch: toStringOrFallback(candidate.head_branch, FALLBACK_BRANCH),
+        event: toStringOrFallback(candidate.event, FALLBACK_EVENT),
+      }
+    })
+    .filter((run): run is WorkflowRunLike => Boolean(run))
+}
diff --git a/frontends/nextjs/src/lib/github/workflows/analysis/runs/stats.ts b/frontends/nextjs/src/lib/github/workflows/analysis/runs/stats.ts
new file mode 100644
index 000000000..138771e60
--- /dev/null
+++ b/frontends/nextjs/src/lib/github/workflows/analysis/runs/stats.ts
@@ -0,0 +1,153 @@
+import { WorkflowRunLike } from './parser'
+
+export type WorkflowRunSummary = {
+  total: number
+  completed: number
+  successful: number
+  failed: number
+  cancelled: number
+  inProgress: number
+  successRate: number
+  mostRecent: WorkflowRunLike | null
+  recentRuns: WorkflowRunLike[]
+  topFailingWorkflows: Array<{ name: string; failures: number }>
+  failingBranches: Array<{ branch: string; failures: number }>
+  failingEvents: Array<{ event: string; failures: number }>
+}
+
+const DEFAULT_RECENT_COUNT = 5
+const DEFAULT_TOP_COUNT = 3
+
+function toTopCounts(
+  values: string[],
+  topCount: number
+): Array<{ key: string; count: number }> {
+  const counts = new Map<string, number>()
+  values.forEach((value) => {
+    counts.set(value, (counts.get(value) || 0) + 1)
+  })
+
+  return Array.from(counts.entries())
+    .map(([key, count]) => ({ key, count }))
+    .sort((a, b) => b.count - a.count || a.key.localeCompare(b.key))
+    .slice(0, topCount)
+}
+
+export function summarizeWorkflowRuns(
+  runs: WorkflowRunLike[],
+  options?: { recentCount?: number; topCount?: number }
+): WorkflowRunSummary {
+  const recentCount = options?.recentCount ?? DEFAULT_RECENT_COUNT
+  const topCount = options?.topCount ?? DEFAULT_TOP_COUNT
+  const total = runs.length
+
+  const completedRuns = runs.filter((run) => run.status === 'completed')
+  const successful = completedRuns.filter((run) => run.conclusion === 'success').length
+  const failed = completedRuns.filter((run) => run.conclusion === 'failure').length
+  const cancelled = completedRuns.filter((run) => run.conclusion === 'cancelled').length
+  const inProgress = total - completedRuns.length
+  const successRate = completedRuns.length
+    ? Math.round((successful / completedRuns.length) * 100)
+    : 0
+
+  const sortedByUpdated = [...runs].sort(
+    (a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
+  )
+  const mostRecent = sortedByUpdated[0] ?? null
+  const recentRuns = sortedByUpdated.slice(0, recentCount)
+
+  const failureRuns = completedRuns.filter((run) => run.conclusion === 'failure')
+  const topFailingWorkflows = toTopCounts(
+    failureRuns.map((run) => run.name),
+    topCount
+  ).map((entry) => ({ name: entry.key, failures: entry.count }))
+
+  const failingBranches = toTopCounts(
+    failureRuns.map((run) => run.head_branch),
+    topCount
+  ).map((entry) => ({ branch: entry.key, failures: entry.count }))
+
+  const failingEvents = toTopCounts(
+    failureRuns.map((run) => run.event),
+    topCount
+  ).map((entry) => ({ event: entry.key, failures: entry.count }))
+
+  return {
+    total,
+    completed: completedRuns.length,
+    successful,
+    failed,
+    cancelled,
+    inProgress,
+    successRate,
+    mostRecent,
+    recentRuns,
+    topFailingWorkflows,
+    failingBranches,
+    failingEvents,
+  }
+}
+
+export function formatWorkflowRunAnalysis(summary: WorkflowRunSummary) {
+  const lines: string[] = []
+
+  lines.push('Workflow Run Analysis')
+  lines.push('---------------------')
+  lines.push(`Total runs: ${summary.total}`)
+  lines.push(
+    `Completed: ${summary.completed} (success: ${summary.successful}, failed: ${summary.failed}, cancelled: ${summary.cancelled})`
+  )
+  lines.push(`In progress: ${summary.inProgress}`)
+  lines.push(`Success rate: ${summary.successRate}%`)
+
+  if (summary.mostRecent) {
+    lines.push('')
+    lines.push('Most recent run:')
+    lines.push(
+      `- ${summary.mostRecent.name} | ${summary.mostRecent.status}${
+        summary.mostRecent.conclusion ? `/${summary.mostRecent.conclusion}` : ''
+      } | ${summary.mostRecent.head_branch} | ${summary.mostRecent.updated_at}`
+    )
+  }
+
+  if (summary.recentRuns.length > 0) {
+    lines.push('')
+    lines.push('Recent runs:')
+    summary.recentRuns.forEach((run) => {
+      lines.push(
+        `- ${run.name} | ${run.status}${run.conclusion ? `/${run.conclusion}` : ''} | ${run.head_branch} | ${run.updated_at}`
+      )
+    })
+  }
+
+  if (summary.topFailingWorkflows.length > 0) {
+    lines.push('')
+    lines.push('Top failing workflows:')
+    summary.topFailingWorkflows.forEach((entry) => {
+      lines.push(`- ${entry.name}: ${entry.failures}`)
+    })
+  }
+
+  if (summary.failingBranches.length > 0) {
+    lines.push('')
+    lines.push('Failing branches:')
+    summary.failingBranches.forEach((entry) => {
+      lines.push(`- ${entry.branch}: ${entry.failures}`)
+    })
+  }
+
+  if (summary.failingEvents.length > 0) {
+    lines.push('')
+    lines.push('Failing events:')
+    summary.failingEvents.forEach((entry) => {
+      lines.push(`- ${entry.event}: ${entry.failures}`)
+    })
+  }
+
+  if (summary.total === 0) {
+    lines.push('')
+    lines.push('No workflow runs available to analyze.')
+  }
+
+  return lines.join('\n')
+}
diff --git a/frontends/nextjs/src/lib/lua/engine/core/__tests__/lua-engine.events.test.ts b/frontends/nextjs/src/lib/lua/engine/core/__tests__/lua-engine.events.test.ts
new file mode 100644
index 000000000..e3e33513a
--- /dev/null
+++ b/frontends/nextjs/src/lib/lua/engine/core/__tests__/lua-engine.events.test.ts
@@ -0,0 +1,74 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest'
+import { LuaEngine, createLuaEngine } from '../lua-engine'
+
+describe('lua-engine events', () => {
+  let engine: LuaEngine
+
+  beforeEach(() => {
+    engine = createLuaEngine()
+  })
+
+  afterEach(() => {
+    engine.destroy()
+  })
+
+  describe('logging', () => {
+    it('should capture log() calls', async () => {
+      const result = await engine.execute(`
+        log("message 1")
+        log("message 2")
+        return "done"
+      `)
+      expect(result.success).toBe(true)
+      expect(result.logs).toContain('message 1')
+      expect(result.logs).toContain('message 2')
+    })
+
+    it('should capture print() calls', async () => {
+      const result = await engine.execute(`
+        print("printed output")
+        return true
+      `)
+      expect(result.success).toBe(true)
+      expect(result.logs).toContain('printed output')
+    })
+
+    it.each([
+      { name: 'number', code: 'log(42)', expected: '42' },
+      { name: 'boolean', code: 'log(true)', expected: 'true' },
+      { name: 'multiple args', code: 'log("a", "b", "c")', expected: 'a b c' },
+    ])('should log $name correctly', async ({ code, expected }) => {
+      const result = await engine.execute(code)
+      expect(result.logs).toContain(expected)
+    })
+  })
+
+  describe('error handling', () => {
+    it.each([
+      {
+        name: 'syntax error',
+        code: 'this is not valid lua !!!',
+        errorContains: 'Syntax error',
+      },
+      {
+        name: 'undefined variable',
+        code: 'return undefinedVar.property',
+        errorContains: 'Runtime error',
+      },
+      {
+        name: 'type error',
+        code: 'return "string" + 5',
+        errorContains: 'error',
+      },
+      {
+        name: 'explicit error',
+        code: 'error("intentional error")',
+        errorContains: 'intentional error',
+      },
+    ])('should handle $name', async ({ code, errorContains }) => {
+      const result = await engine.execute(code)
+      expect(result.success).toBe(false)
+      expect(result.error?.toLowerCase()).toContain(errorContains.toLowerCase())
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/lua/engine/core/lua-engine.test.ts b/frontends/nextjs/src/lib/lua/engine/core/__tests__/lua-engine.execution.test.ts
similarity index 80%
rename from frontends/nextjs/src/lib/lua/engine/core/lua-engine.test.ts
rename to frontends/nextjs/src/lib/lua/engine/core/__tests__/lua-engine.execution.test.ts
index 4700460ff..8affd583b 100644
--- a/frontends/nextjs/src/lib/lua/engine/core/lua-engine.test.ts
+++ b/frontends/nextjs/src/lib/lua/engine/core/__tests__/lua-engine.execution.test.ts
@@ -1,7 +1,7 @@
 import { describe, it, expect, beforeEach, afterEach } from 'vitest'
-import { LuaEngine, createLuaEngine, type LuaExecutionContext } from './lua-engine'
+import { LuaEngine, createLuaEngine, type LuaExecutionContext } from '../lua-engine'
 
-describe('lua-engine', () => {
+describe('lua-engine execution', () => {
   let engine: LuaEngine
 
   beforeEach(() => {
@@ -81,31 +81,31 @@ describe('lua-engine', () => {
         {
           name: 'access context.data number',
           code: 'return context.data.value * 2',
-          context: { data: { value: 21 } },
+          context: { data: { value: 21 } } satisfies LuaExecutionContext,
           expected: 42,
         },
         {
           name: 'access context.data string',
           code: 'return context.data.name',
-          context: { data: { name: 'test' } },
+          context: { data: { name: 'test' } } satisfies LuaExecutionContext,
           expected: 'test',
         },
         {
           name: 'access context.data boolean',
           code: 'return context.data.active',
-          context: { data: { active: true } },
+          context: { data: { active: true } } satisfies LuaExecutionContext,
           expected: true,
         },
         {
           name: 'access nested context.data',
           code: 'return context.data.user.name',
-          context: { data: { user: { name: 'Alice' } } },
+          context: { data: { user: { name: 'Alice' } } } satisfies LuaExecutionContext,
           expected: 'Alice',
         },
         {
           name: 'access context.data array',
           code: 'return context.data.items[2]',
-          context: { data: { items: [10, 20, 30] } },
+          context: { data: { items: [10, 20, 30] } } satisfies LuaExecutionContext,
           expected: 20,
         },
       ])('should $name', async ({ code, context, expected }) => {
@@ -241,66 +241,6 @@ describe('lua-engine', () => {
       })
     })
 
-    describe('logging', () => {
-      it('should capture log() calls', async () => {
-        const result = await engine.execute(`
-          log("message 1")
-          log("message 2")
-          return "done"
-        `)
-        expect(result.success).toBe(true)
-        expect(result.logs).toContain('message 1')
-        expect(result.logs).toContain('message 2')
-      })
-
-      it('should capture print() calls', async () => {
-        const result = await engine.execute(`
-          print("printed output")
-          return true
-        `)
-        expect(result.success).toBe(true)
-        expect(result.logs).toContain('printed output')
-      })
-
-      it.each([
-        { name: 'number', code: 'log(42)', expected: '42' },
-        { name: 'boolean', code: 'log(true)', expected: 'true' },
-        { name: 'multiple args', code: 'log("a", "b", "c")', expected: 'a b c' },
-      ])('should log $name correctly', async ({ code, expected }) => {
-        const result = await engine.execute(code)
-        expect(result.logs).toContain(expected)
-      })
-    })
-
-    describe('error handling', () => {
-      it.each([
-        {
-          name: 'syntax error',
-          code: 'this is not valid lua !!!',
-          errorContains: 'Syntax error',
-        },
-        {
-          name: 'undefined variable',
-          code: 'return undefinedVar.property',
-          errorContains: 'Runtime error',
-        },
-        {
-          name: 'type error',
-          code: 'return "string" + 5',
-          errorContains: 'error',
-        },
-        {
-          name: 'explicit error',
-          code: 'error("intentional error")',
-          errorContains: 'intentional error',
-        },
-      ])('should handle $name', async ({ code, errorContains }) => {
-        const result = await engine.execute(code)
-        expect(result.success).toBe(false)
-        expect(result.error?.toLowerCase()).toContain(errorContains.toLowerCase())
-      })
-    })
-
     describe('multiple return values', () => {
       it('should handle multiple return values', async () => {
         const result = await engine.execute('return 1, 2, 3')
diff --git a/frontends/nextjs/src/lib/nerd-mode-ide/templates/configs/advanced.ts b/frontends/nextjs/src/lib/nerd-mode-ide/templates/configs/advanced.ts
new file mode 100644
index 000000000..6c92a720b
--- /dev/null
+++ b/frontends/nextjs/src/lib/nerd-mode-ide/templates/configs/advanced.ts
@@ -0,0 +1,3 @@
+import type { PackageTemplateConfig } from '../../types'
+
+export const ADVANCED_PACKAGE_TEMPLATE_CONFIGS: PackageTemplateConfig[] = []
diff --git a/frontends/nextjs/src/lib/nerd-mode-ide/templates/configs/base.ts b/frontends/nextjs/src/lib/nerd-mode-ide/templates/configs/base.ts
new file mode 100644
index 000000000..4a129db79
--- /dev/null
+++ b/frontends/nextjs/src/lib/nerd-mode-ide/templates/configs/base.ts
@@ -0,0 +1,267 @@
+import type { PackageTemplateConfig, ReactAppTemplateConfig } from '../../types'
+
+export const BASE_REACT_APP_TEMPLATE_CONFIG: ReactAppTemplateConfig = {
+  id: 'react_next_starter',
+  name: 'Next.js Web App',
+  description: 'A clean Next.js starter with app router, hero component, and typed config files.',
+  rootName: 'web_app',
+  tags: ['nextjs', 'react', 'web', 'starter'],
+}
+
+const socialHubComponents = [
+  {
+    id: 'social_hub_root',
+    type: 'Stack',
+    props: { className: 'flex flex-col gap-6' },
+    children: [
+      {
+        id: 'social_hub_hero',
+        type: 'Card',
+        props: { className: 'p-6' },
+        children: [
+          {
+            id: 'social_hub_heading',
+            type: 'Heading',
+            props: { children: 'Social Hub', level: '2', className: 'text-2xl font-bold' },
+            children: [],
+          },
+          {
+            id: 'social_hub_subtitle',
+            type: 'Text',
+            props: { children: 'A modern feed for creator updates, curated stories, and live moments.' },
+            children: [],
+          },
+        ],
+      },
+      {
+        id: 'social_hub_stats',
+        type: 'Grid',
+        props: { className: 'grid grid-cols-3 gap-4' },
+        children: [
+          {
+            id: 'social_hub_stat_1',
+            type: 'Card',
+            props: { className: 'p-4' },
+            children: [
+              {
+                id: 'social_hub_stat_label_1',
+                type: 'Text',
+                props: { children: 'Creators live', className: 'text-sm text-muted-foreground' },
+                children: [],
+              },
+              {
+                id: 'social_hub_stat_value_1',
+                type: 'Heading',
+                props: { children: '128', level: '3', className: 'text-xl font-semibold' },
+                children: [],
+              },
+            ],
+          },
+          {
+            id: 'social_hub_stat_2',
+            type: 'Card',
+            props: { className: 'p-4' },
+            children: [
+              {
+                id: 'social_hub_stat_label_2',
+                type: 'Text',
+                props: { children: 'Trending tags', className: 'text-sm text-muted-foreground' },
+                children: [],
+              },
+              {
+                id: 'social_hub_stat_value_2',
+                type: 'Heading',
+                props: { children: '42', level: '3', className: 'text-xl font-semibold' },
+                children: [],
+              },
+            ],
+          },
+          {
+            id: 'social_hub_stat_3',
+            type: 'Card',
+            props: { className: 'p-4' },
+            children: [
+              {
+                id: 'social_hub_stat_label_3',
+                type: 'Text',
+                props: { children: 'Live rooms', className: 'text-sm text-muted-foreground' },
+                children: [],
+              },
+              {
+                id: 'social_hub_stat_value_3',
+                type: 'Heading',
+                props: { children: '7', level: '3', className: 'text-xl font-semibold' },
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'social_hub_composer',
+        type: 'Card',
+        props: { className: 'p-4' },
+        children: [
+          {
+            id: 'social_hub_composer_label',
+            type: 'Label',
+            props: { children: 'Share a quick update' },
+            children: [],
+          },
+          {
+            id: 'social_hub_composer_input',
+            type: 'Textarea',
+            props: { placeholder: 'What are you building today?', rows: 3 },
+            children: [],
+          },
+          {
+            id: 'social_hub_composer_actions',
+            type: 'Flex',
+            props: { className: 'flex gap-2' },
+            children: [
+              {
+                id: 'social_hub_composer_publish',
+                type: 'Button',
+                props: { children: 'Publish', variant: 'default' },
+                children: [],
+              },
+              {
+                id: 'social_hub_composer_media',
+                type: 'Button',
+                props: { children: 'Add media', variant: 'outline' },
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+      {
+        id: 'social_hub_feed',
+        type: 'Stack',
+        props: { className: 'flex flex-col gap-4' },
+        children: [
+          {
+            id: 'social_hub_feed_post_1',
+            type: 'Card',
+            props: { className: 'p-5' },
+            children: [
+              {
+                id: 'social_hub_feed_post_1_title',
+                type: 'Heading',
+                props: { children: 'Launch day recap', level: '3', className: 'text-lg font-semibold' },
+                children: [],
+              },
+              {
+                id: 'social_hub_feed_post_1_body',
+                type: 'Text',
+                props: { children: 'We shipped the new live rooms and saw a 32% boost in engagement.' },
+                children: [],
+              },
+              {
+                id: 'social_hub_feed_post_1_badge',
+                type: 'Badge',
+                props: { children: 'Community' },
+                children: [],
+              },
+            ],
+          },
+          {
+            id: 'social_hub_feed_post_2',
+            type: 'Card',
+            props: { className: 'p-5' },
+            children: [
+              {
+                id: 'social_hub_feed_post_2_title',
+                type: 'Heading',
+                props: { children: 'Creator spotlight', level: '3', className: 'text-lg font-semibold' },
+                children: [],
+              },
+              {
+                id: 'social_hub_feed_post_2_body',
+                type: 'Text',
+                props: { children: 'Nova shares her workflow for livestreaming and managing subscribers.' },
+                children: [],
+              },
+              {
+                id: 'social_hub_feed_post_2_badge',
+                type: 'Badge',
+                props: { children: 'Spotlight', variant: 'secondary' },
+                children: [],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const socialHubExamples = {
+  feedItems: [
+    {
+      id: 'post_001',
+      author: 'Nova',
+      title: 'Launch day recap',
+      summary: 'We shipped live rooms and doubled community sessions.',
+      tags: ['launch', 'community'],
+    },
+    {
+      id: 'post_002',
+      author: 'Kai',
+      title: 'Build log: day 42',
+      summary: 'Refined the moderation pipeline and added creator scorecards.',
+      tags: ['buildinpublic'],
+    },
+  ],
+  trendingTags: ['#buildinpublic', '#metabuilder', '#live'],
+  rooms: [
+    { id: 'room_1', title: 'Creator Q&A', host: 'Eli', live: true },
+    { id: 'room_2', title: 'Patch Notes', host: 'Nova', live: false },
+  ],
+}
+
+const socialHubLuaScripts = [
+  {
+    fileName: 'init.lua',
+    description: 'Lifecycle hooks for package installation.',
+    code: 'local M = {}\\n\\nfunction M.on_install(context)\\n  return { message = "Social Hub installed", version = context.version }\\nend\\n\\nfunction M.on_uninstall()\\n  return { message = "Social Hub removed" }\\nend\\n\\nreturn M',
+  },
+  {
+    fileName: 'permissions.lua',
+    description: 'Role-based access rules for posting and moderation.',
+    code: 'local Permissions = {}\\n\\nfunction Permissions.can_post(user)\\n  return user and (user.role == "user" or user.role == "admin" or user.role == "god")\\nend\\n\\nfunction Permissions.can_moderate(user)\\n  return user and (user.role == "admin" or user.role == "god" or user.role == "supergod")\\nend\\n\\nreturn Permissions',
+  },
+  {
+    fileName: 'feed_rank.lua',
+    description: 'Score feed items based on recency and engagement.',
+    code: 'local FeedRank = {}\\n\\nfunction FeedRank.score(item)\\n  local freshness = item.age_minutes and (100 - item.age_minutes) or 50\\n  local engagement = (item.likes or 0) * 2 + (item.comments or 0) * 3\\n  return freshness + engagement\\nend\\n\\nreturn FeedRank',
+  },
+  {
+    fileName: 'moderation.lua',
+    description: 'Flag content for review using lightweight heuristics.',
+    code: 'local Moderation = {}\\n\\nfunction Moderation.flag(content)\\n  local lowered = string.lower(content or "")\\n  if string.find(lowered, "spam") then\\n    return { flagged = true, reason = "spam_keyword" }\\n  end\\n  return { flagged = false }\\nend\\n\\nreturn Moderation',
+  },
+  {
+    fileName: 'analytics.lua',
+    description: 'Aggregate engagement signals for dashboards.',
+    code: 'local Analytics = {}\\n\\nfunction Analytics.aggregate(events)\\n  local summary = { views = 0, likes = 0, comments = 0 }\\n  for _, event in ipairs(events or {}) do\\n    summary.views = summary.views + (event.views or 0)\\n    summary.likes = summary.likes + (event.likes or 0)\\n    summary.comments = summary.comments + (event.comments or 0)\\n  end\\n  return summary\\nend\\n\\nreturn Analytics',
+  },
+]
+
+export const BASE_PACKAGE_TEMPLATE_CONFIGS: PackageTemplateConfig[] = [
+  {
+    id: 'package_social_hub',
+    name: 'Social Hub Package',
+    description: 'A package blueprint for social feeds, creator updates, and live rooms.',
+    rootName: 'social_hub',
+    packageId: 'social_hub',
+    author: 'MetaBuilder',
+    version: '1.0.0',
+    category: 'social',
+    summary: 'Modern social feed with creator tools and live rooms.',
+    components: socialHubComponents,
+    examples: socialHubExamples,
+    luaScripts: socialHubLuaScripts,
+    tags: ['package', 'social', 'feed', 'lua'],
+  },
+]
diff --git a/frontends/nextjs/src/lib/nerd-mode-ide/templates/configs/experimental.ts b/frontends/nextjs/src/lib/nerd-mode-ide/templates/configs/experimental.ts
new file mode 100644
index 000000000..3180b351b
--- /dev/null
+++ b/frontends/nextjs/src/lib/nerd-mode-ide/templates/configs/experimental.ts
@@ -0,0 +1,3 @@
+import type { PackageTemplateConfig } from '../../types'
+
+export const EXPERIMENTAL_PACKAGE_TEMPLATE_CONFIGS: PackageTemplateConfig[] = []
diff --git a/frontends/nextjs/src/lib/nerd-mode-ide/templates/template-configs.ts b/frontends/nextjs/src/lib/nerd-mode-ide/templates/template-configs.ts
index 60badbc19..b134a9822 100644
--- a/frontends/nextjs/src/lib/nerd-mode-ide/templates/template-configs.ts
+++ b/frontends/nextjs/src/lib/nerd-mode-ide/templates/template-configs.ts
@@ -1,267 +1,12 @@
-import type { PackageTemplateConfig, ReactAppTemplateConfig } from './types'
+import type { PackageTemplateConfig, ReactAppTemplateConfig } from '../types'
+import { ADVANCED_PACKAGE_TEMPLATE_CONFIGS } from './configs/advanced'
+import { BASE_PACKAGE_TEMPLATE_CONFIGS, BASE_REACT_APP_TEMPLATE_CONFIG } from './configs/base'
+import { EXPERIMENTAL_PACKAGE_TEMPLATE_CONFIGS } from './configs/experimental'
 
-export const REACT_APP_TEMPLATE_CONFIG: ReactAppTemplateConfig = {
-  id: 'react_next_starter',
-  name: 'Next.js Web App',
-  description: 'A clean Next.js starter with app router, hero component, and typed config files.',
-  rootName: 'web_app',
-  tags: ['nextjs', 'react', 'web', 'starter'],
-}
-
-const socialHubComponents = [
-  {
-    id: 'social_hub_root',
-    type: 'Stack',
-    props: { className: 'flex flex-col gap-6' },
-    children: [
-      {
-        id: 'social_hub_hero',
-        type: 'Card',
-        props: { className: 'p-6' },
-        children: [
-          {
-            id: 'social_hub_heading',
-            type: 'Heading',
-            props: { children: 'Social Hub', level: '2', className: 'text-2xl font-bold' },
-            children: [],
-          },
-          {
-            id: 'social_hub_subtitle',
-            type: 'Text',
-            props: { children: 'A modern feed for creator updates, curated stories, and live moments.' },
-            children: [],
-          },
-        ],
-      },
-      {
-        id: 'social_hub_stats',
-        type: 'Grid',
-        props: { className: 'grid grid-cols-3 gap-4' },
-        children: [
-          {
-            id: 'social_hub_stat_1',
-            type: 'Card',
-            props: { className: 'p-4' },
-            children: [
-              {
-                id: 'social_hub_stat_label_1',
-                type: 'Text',
-                props: { children: 'Creators live', className: 'text-sm text-muted-foreground' },
-                children: [],
-              },
-              {
-                id: 'social_hub_stat_value_1',
-                type: 'Heading',
-                props: { children: '128', level: '3', className: 'text-xl font-semibold' },
-                children: [],
-              },
-            ],
-          },
-          {
-            id: 'social_hub_stat_2',
-            type: 'Card',
-            props: { className: 'p-4' },
-            children: [
-              {
-                id: 'social_hub_stat_label_2',
-                type: 'Text',
-                props: { children: 'Trending tags', className: 'text-sm text-muted-foreground' },
-                children: [],
-              },
-              {
-                id: 'social_hub_stat_value_2',
-                type: 'Heading',
-                props: { children: '42', level: '3', className: 'text-xl font-semibold' },
-                children: [],
-              },
-            ],
-          },
-          {
-            id: 'social_hub_stat_3',
-            type: 'Card',
-            props: { className: 'p-4' },
-            children: [
-              {
-                id: 'social_hub_stat_label_3',
-                type: 'Text',
-                props: { children: 'Live rooms', className: 'text-sm text-muted-foreground' },
-                children: [],
-              },
-              {
-                id: 'social_hub_stat_value_3',
-                type: 'Heading',
-                props: { children: '7', level: '3', className: 'text-xl font-semibold' },
-                children: [],
-              },
-            ],
-          },
-        ],
-      },
-      {
-        id: 'social_hub_composer',
-        type: 'Card',
-        props: { className: 'p-4' },
-        children: [
-          {
-            id: 'social_hub_composer_label',
-            type: 'Label',
-            props: { children: 'Share a quick update' },
-            children: [],
-          },
-          {
-            id: 'social_hub_composer_input',
-            type: 'Textarea',
-            props: { placeholder: 'What are you building today?', rows: 3 },
-            children: [],
-          },
-          {
-            id: 'social_hub_composer_actions',
-            type: 'Flex',
-            props: { className: 'flex gap-2' },
-            children: [
-              {
-                id: 'social_hub_composer_publish',
-                type: 'Button',
-                props: { children: 'Publish', variant: 'default' },
-                children: [],
-              },
-              {
-                id: 'social_hub_composer_media',
-                type: 'Button',
-                props: { children: 'Add media', variant: 'outline' },
-                children: [],
-              },
-            ],
-          },
-        ],
-      },
-      {
-        id: 'social_hub_feed',
-        type: 'Stack',
-        props: { className: 'flex flex-col gap-4' },
-        children: [
-          {
-            id: 'social_hub_feed_post_1',
-            type: 'Card',
-            props: { className: 'p-5' },
-            children: [
-              {
-                id: 'social_hub_feed_post_1_title',
-                type: 'Heading',
-                props: { children: 'Launch day recap', level: '3', className: 'text-lg font-semibold' },
-                children: [],
-              },
-              {
-                id: 'social_hub_feed_post_1_body',
-                type: 'Text',
-                props: { children: 'We shipped the new live rooms and saw a 32% boost in engagement.' },
-                children: [],
-              },
-              {
-                id: 'social_hub_feed_post_1_badge',
-                type: 'Badge',
-                props: { children: 'Community' },
-                children: [],
-              },
-            ],
-          },
-          {
-            id: 'social_hub_feed_post_2',
-            type: 'Card',
-            props: { className: 'p-5' },
-            children: [
-              {
-                id: 'social_hub_feed_post_2_title',
-                type: 'Heading',
-                props: { children: 'Creator spotlight', level: '3', className: 'text-lg font-semibold' },
-                children: [],
-              },
-              {
-                id: 'social_hub_feed_post_2_body',
-                type: 'Text',
-                props: { children: 'Nova shares her workflow for livestreaming and managing subscribers.' },
-                children: [],
-              },
-              {
-                id: 'social_hub_feed_post_2_badge',
-                type: 'Badge',
-                props: { children: 'Spotlight', variant: 'secondary' },
-                children: [],
-              },
-            ],
-          },
-        ],
-      },
-    ],
-  },
-]
-
-const socialHubExamples = {
-  feedItems: [
-    {
-      id: 'post_001',
-      author: 'Nova',
-      title: 'Launch day recap',
-      summary: 'We shipped live rooms and doubled community sessions.',
-      tags: ['launch', 'community'],
-    },
-    {
-      id: 'post_002',
-      author: 'Kai',
-      title: 'Build log: day 42',
-      summary: 'Refined the moderation pipeline and added creator scorecards.',
-      tags: ['buildinpublic'],
-    },
-  ],
-  trendingTags: ['#buildinpublic', '#metabuilder', '#live'],
-  rooms: [
-    { id: 'room_1', title: 'Creator Q&A', host: 'Eli', live: true },
-    { id: 'room_2', title: 'Patch Notes', host: 'Nova', live: false },
-  ],
-}
-
-const socialHubLuaScripts = [
-  {
-    fileName: 'init.lua',
-    description: 'Lifecycle hooks for package installation.',
-    code: 'local M = {}\n\nfunction M.on_install(context)\n  return { message = "Social Hub installed", version = context.version }\nend\n\nfunction M.on_uninstall()\n  return { message = "Social Hub removed" }\nend\n\nreturn M',
-  },
-  {
-    fileName: 'permissions.lua',
-    description: 'Role-based access rules for posting and moderation.',
-    code: 'local Permissions = {}\n\nfunction Permissions.can_post(user)\n  return user and (user.role == "user" or user.role == "admin" or user.role == "god")\nend\n\nfunction Permissions.can_moderate(user)\n  return user and (user.role == "admin" or user.role == "god" or user.role == "supergod")\nend\n\nreturn Permissions',
-  },
-  {
-    fileName: 'feed_rank.lua',
-    description: 'Score feed items based on recency and engagement.',
-    code: 'local FeedRank = {}\n\nfunction FeedRank.score(item)\n  local freshness = item.age_minutes and (100 - item.age_minutes) or 50\n  local engagement = (item.likes or 0) * 2 + (item.comments or 0) * 3\n  return freshness + engagement\nend\n\nreturn FeedRank',
-  },
-  {
-    fileName: 'moderation.lua',
-    description: 'Flag content for review using lightweight heuristics.',
-    code: 'local Moderation = {}\n\nfunction Moderation.flag(content)\n  local lowered = string.lower(content or "")\n  if string.find(lowered, "spam") then\n    return { flagged = true, reason = "spam_keyword" }\n  end\n  return { flagged = false }\nend\n\nreturn Moderation',
-  },
-  {
-    fileName: 'analytics.lua',
-    description: 'Aggregate engagement signals for dashboards.',
-    code: 'local Analytics = {}\n\nfunction Analytics.aggregate(events)\n  local summary = { views = 0, likes = 0, comments = 0 }\n  for _, event in ipairs(events or {}) do\n    summary.views = summary.views + (event.views or 0)\n    summary.likes = summary.likes + (event.likes or 0)\n    summary.comments = summary.comments + (event.comments or 0)\n  end\n  return summary\nend\n\nreturn Analytics',
-  },
-]
+export const REACT_APP_TEMPLATE_CONFIG: ReactAppTemplateConfig = BASE_REACT_APP_TEMPLATE_CONFIG
 
 export const PACKAGE_TEMPLATE_CONFIGS: PackageTemplateConfig[] = [
-  {
-    id: 'package_social_hub',
-    name: 'Social Hub Package',
-    description: 'A package blueprint for social feeds, creator updates, and live rooms.',
-    rootName: 'social_hub',
-    packageId: 'social_hub',
-    author: 'MetaBuilder',
-    version: '1.0.0',
-    category: 'social',
-    summary: 'Modern social feed with creator tools and live rooms.',
-    components: socialHubComponents,
-    examples: socialHubExamples,
-    luaScripts: socialHubLuaScripts,
-    tags: ['package', 'social', 'feed', 'lua'],
-  },
+  ...BASE_PACKAGE_TEMPLATE_CONFIGS,
+  ...ADVANCED_PACKAGE_TEMPLATE_CONFIGS,
+  ...EXPERIMENTAL_PACKAGE_TEMPLATE_CONFIGS,
 ]
diff --git a/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat-ui-schema.ts b/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat-ui-schema.ts
index f5ebfea80..9b6bb1225 100644
--- a/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat-ui-schema.ts
+++ b/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat-ui-schema.ts
@@ -1,238 +1,44 @@
 import type { PackageContent } from '../../package-types'
+import { ircWebchatComponentConfig } from './irc-webchat/schema/layout'
 
 type IrcWebchatUiSchema = Pick<PackageContent, 'pages' | 'componentHierarchy' | 'componentConfigs'>
 
-export const createIrcWebchatUiSchema = (): IrcWebchatUiSchema => ({
-  pages: [
-    {
-      id: 'page_chat',
-      path: '/chat',
-      title: 'IRC Webchat',
-      level: 2,
-      componentTree: [
-        {
-          id: 'comp_chat_root',
-          type: 'IRCWebchat',
-          props: {
-            channelName: 'general',
-          },
-          children: [],
+const pages: IrcWebchatUiSchema['pages'] = [
+  {
+    id: 'page_chat',
+    path: '/chat',
+    title: 'IRC Webchat',
+    level: 2,
+    componentTree: [
+      {
+        id: 'comp_chat_root',
+        type: 'IRCWebchat',
+        props: {
+          channelName: 'general',
         },
-      ],
-      requiresAuth: true,
-      requiredRole: 'user',
-    },
-  ],
-  componentHierarchy: {
-    page_chat: {
-      id: 'comp_chat_root',
-      type: 'IRCWebchat',
-      props: {},
-      children: [],
-    },
-  },
-  componentConfigs: {
-    IRCWebchat: {
-      type: 'IRCWebchat',
-      category: 'social',
-      label: 'IRC Webchat',
-      description: 'IRC-style chat component with channels and commands',
-      icon: '💬',
-      props: [
-        {
-          name: 'channelName',
-          type: 'string',
-          label: 'Channel Name',
-          defaultValue: 'general',
-          required: false,
-        },
-        {
-          name: 'showSettings',
-          type: 'boolean',
-          label: 'Show Settings',
-          defaultValue: false,
-          required: false,
-        },
-        {
-          name: 'height',
-          type: 'string',
-          label: 'Height',
-          defaultValue: '600px',
-          required: false,
-        },
-      ],
-      config: {
-        layout: 'Card',
-        styling: {
-          className: 'h-[600px] flex flex-col',
-        },
-        children: [
-          {
-            id: 'header',
-            type: 'CardHeader',
-            props: {
-              className: 'border-b border-border pb-3',
-            },
-            children: [
-              {
-                id: 'title_container',
-                type: 'Flex',
-                props: {
-                  className: 'flex items-center justify-between',
-                },
-                children: [
-                  {
-                    id: 'title',
-                    type: 'CardTitle',
-                    props: {
-                      className: 'flex items-center gap-2 text-lg',
-                      content: '#{channelName}',
-                    },
-                  },
-                  {
-                    id: 'actions',
-                    type: 'Flex',
-                    props: {
-                      className: 'flex items-center gap-2',
-                    },
-                    children: [
-                      {
-                        id: 'user_badge',
-                        type: 'Badge',
-                        props: {
-                          variant: 'secondary',
-                          className: 'gap-1.5',
-                          icon: 'Users',
-                          content: '{onlineUsersCount}',
-                        },
-                      },
-                      {
-                        id: 'settings_button',
-                        type: 'Button',
-                        props: {
-                          size: 'sm',
-                          variant: 'ghost',
-                          icon: 'Gear',
-                          onClick: 'toggleSettings',
-                        },
-                      },
-                    ],
-                  },
-                ],
-              },
-            ],
-          },
-          {
-            id: 'content',
-            type: 'CardContent',
-            props: {
-              className: 'flex-1 flex flex-col p-0 overflow-hidden',
-            },
-            children: [
-              {
-                id: 'main_area',
-                type: 'Flex',
-                props: {
-                  className: 'flex flex-1 overflow-hidden',
-                },
-                children: [
-                  {
-                    id: 'messages_area',
-                    type: 'ScrollArea',
-                    props: {
-                      className: 'flex-1 p-4',
-                    },
-                    children: [
-                      {
-                        id: 'messages_container',
-                        type: 'MessageList',
-                        props: {
-                          className: 'space-y-2 font-mono text-sm',
-                          dataSource: 'messages',
-                          itemRenderer: 'renderMessage',
-                        },
-                      },
-                    ],
-                  },
-                  {
-                    id: 'sidebar',
-                    type: 'Container',
-                    props: {
-                      className: 'w-48 border-l border-border p-4 bg-muted/20',
-                      conditional: 'showSettings',
-                    },
-                    children: [
-                      {
-                        id: 'sidebar_title',
-                        type: 'Heading',
-                        props: {
-                          level: '4',
-                          className: 'font-semibold text-sm mb-3',
-                          content: 'Online Users',
-                        },
-                      },
-                      {
-                        id: 'users_list',
-                        type: 'UserList',
-                        props: {
-                          className: 'space-y-1.5 text-sm',
-                          dataSource: 'onlineUsers',
-                        },
-                      },
-                    ],
-                  },
-                ],
-              },
-              {
-                id: 'input_area',
-                type: 'Container',
-                props: {
-                  className: 'border-t border-border p-4',
-                },
-                children: [
-                  {
-                    id: 'input_row',
-                    type: 'Flex',
-                    props: {
-                      className: 'flex gap-2',
-                    },
-                    children: [
-                      {
-                        id: 'message_input',
-                        type: 'Input',
-                        props: {
-                          className: 'flex-1 font-mono',
-                          placeholder: 'Type a message... (/help for commands)',
-                          onKeyPress: 'handleKeyPress',
-                          value: '{inputMessage}',
-                          onChange: 'updateInputMessage',
-                        },
-                      },
-                      {
-                        id: 'send_button',
-                        type: 'Button',
-                        props: {
-                          size: 'icon',
-                          icon: 'PaperPlaneTilt',
-                          onClick: 'handleSendMessage',
-                        },
-                      },
-                    ],
-                  },
-                  {
-                    id: 'help_text',
-                    type: 'Text',
-                    props: {
-                      className: 'text-xs text-muted-foreground mt-2',
-                      content: 'Press Enter to send. Type /help for commands.',
-                    },
-                  },
-                ],
-              },
-            ],
-          },
-        ],
+        children: [],
       },
-    },
+    ],
+    requiresAuth: true,
+    requiredRole: 'user',
   },
+]
+
+const componentHierarchy: IrcWebchatUiSchema['componentHierarchy'] = {
+  page_chat: {
+    id: 'comp_chat_root',
+    type: 'IRCWebchat',
+    props: {},
+    children: [],
+  },
+}
+
+const componentConfigs: IrcWebchatUiSchema['componentConfigs'] = {
+  IRCWebchat: ircWebchatComponentConfig,
+}
+
+export const createIrcWebchatUiSchema = (): IrcWebchatUiSchema => ({
+  pages,
+  componentHierarchy,
+  componentConfigs,
 })
diff --git a/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat-workflow-actions.ts b/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat-workflow-actions.ts
index 6b86117d8..249358653 100644
--- a/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat-workflow-actions.ts
+++ b/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat-workflow-actions.ts
@@ -1,197 +1,13 @@
 import type { PackageContent } from '../../package-types'
+import { commandActions } from './irc-webchat/actions/commands'
+import { eventActions } from './irc-webchat/actions/events'
 
 type IrcWebchatWorkflows = Pick<PackageContent, 'workflows' | 'luaScripts'>
 
-export const createIrcWebchatWorkflowActions = (): IrcWebchatWorkflows => ({
-  workflows: [
-    {
-      id: 'workflow_send_message',
-      name: 'Send Chat Message',
-      description: 'Workflow for sending a chat message',
-      nodes: [],
-      edges: [],
-      enabled: true,
-    },
-    {
-      id: 'workflow_join_channel',
-      name: 'Join Channel',
-      description: 'Workflow for joining a chat channel',
-      nodes: [],
-      edges: [],
-      enabled: true,
-    },
-  ],
-  luaScripts: [
-    {
-      id: 'lua_irc_send_message',
-      name: 'Send IRC Message',
-      description: 'Sends a message to the chat channel',
-      code: `-- Send IRC Message
-function sendMessage(channelId, username, userId, message)
-local msgId = "msg_" .. tostring(os.time()) .. "_" .. math.random(1000, 9999)
-local msg = {
-  id = msgId,
-  channelId = channelId,
-  username = username,
-  userId = userId,
-  message = message,
-  type = "message",
-  timestamp = os.time() * 1000
-}
-log("Sending message: " .. message)
-return msg
-end
-
-return sendMessage`,
-      parameters: [
-        { name: 'channelId', type: 'string' },
-        { name: 'username', type: 'string' },
-        { name: 'userId', type: 'string' },
-        { name: 'message', type: 'string' },
-      ],
-      returnType: 'table',
-    },
-    {
-      id: 'lua_irc_handle_command',
-      name: 'Handle IRC Command',
-      description: 'Processes IRC commands like /help, /users, etc',
-      code: `-- Handle IRC Command
-function handleCommand(command, channelId, username, onlineUsers)
-local parts = {}
-for part in string.gmatch(command, "%S+") do
-  table.insert(parts, part)
-end
-
-local cmd = parts[1]:lower()
-local response = {
-  id = "msg_" .. tostring(os.time()) .. "_" .. math.random(1000, 9999),
-  username = "System",
-  userId = "system",
-  type = "system",
-  timestamp = os.time() * 1000,
-  channelId = channelId
-}
-
-if cmd == "/help" then
-  response.message = "Available commands: /help, /users, /clear, /me <action>"
-elseif cmd == "/users" then
-  local userCount = #onlineUsers
-  local userList = table.concat(onlineUsers, ", ")
-  response.message = "Online users (" .. userCount .. "): " .. userList
-elseif cmd == "/clear" then
-  response.message = "CLEAR_MESSAGES"
-  response.type = "command"
-elseif cmd == "/me" then
-  if #parts > 1 then
-    local action = table.concat(parts, " ", 2)
-    response.message = action
-    response.username = username
-    response.userId = username
-    response.type = "system"
-  else
-    response.message = "Usage: /me <action>"
-  end
-else
-  response.message = "Unknown command: " .. cmd .. ". Type /help for available commands."
-end
-
-return response
-end
-
-return handleCommand`,
-      parameters: [
-        { name: 'command', type: 'string' },
-        { name: 'channelId', type: 'string' },
-        { name: 'username', type: 'string' },
-        { name: 'onlineUsers', type: 'table' },
-      ],
-      returnType: 'table',
-    },
-    {
-      id: 'lua_irc_format_time',
-      name: 'Format Timestamp',
-      description: 'Formats a timestamp for display',
-      code: `-- Format Timestamp
-function formatTime(timestamp)
-local date = os.date("*t", timestamp / 1000)
-local hour = date.hour
-local ampm = "AM"
-
-if hour >= 12 then
-  ampm = "PM"
-  if hour > 12 then
-    hour = hour - 12
-  end
-end
-
-if hour == 0 then
-  hour = 12
-end
-
-return string.format("%02d:%02d %s", hour, date.min, ampm)
-end
-
-return formatTime`,
-      parameters: [
-        { name: 'timestamp', type: 'number' },
-      ],
-      returnType: 'string',
-    },
-    {
-      id: 'lua_irc_user_join',
-      name: 'User Join Channel',
-      description: 'Handles user joining a channel',
-      code: `-- User Join Channel
-function userJoin(channelId, username, userId)
-local joinMsg = {
-  id = "msg_" .. tostring(os.time()) .. "_" .. math.random(1000, 9999),
-  channelId = channelId,
-  username = "System",
-  userId = "system",
-  message = username .. " has joined the channel",
-  type = "join",
-  timestamp = os.time() * 1000
-}
-
-log(username .. " joined channel " .. channelId)
-return joinMsg
-end
-
-return userJoin`,
-      parameters: [
-        { name: 'channelId', type: 'string' },
-        { name: 'username', type: 'string' },
-        { name: 'userId', type: 'string' },
-      ],
-      returnType: 'table',
-    },
-    {
-      id: 'lua_irc_user_leave',
-      name: 'User Leave Channel',
-      description: 'Handles user leaving a channel',
-      code: `-- User Leave Channel
-function userLeave(channelId, username, userId)
-local leaveMsg = {
-  id = "msg_" .. tostring(os.time()) .. "_" .. math.random(1000, 9999),
-  channelId = channelId,
-  username = "System",
-  userId = "system",
-  message = username .. " has left the channel",
-  type = "leave",
-  timestamp = os.time() * 1000
-}
-
-log(username .. " left channel " .. channelId)
-return leaveMsg
-end
-
-return userLeave`,
-      parameters: [
-        { name: 'channelId', type: 'string' },
-        { name: 'username', type: 'string' },
-        { name: 'userId', type: 'string' },
-      ],
-      returnType: 'table',
-    },
-  ],
+const mergeActions = (...actions: IrcWebchatWorkflows[]): IrcWebchatWorkflows => ({
+  workflows: actions.flatMap((action) => action.workflows),
+  luaScripts: actions.flatMap((action) => action.luaScripts),
 })
+
+export const createIrcWebchatWorkflowActions = (): IrcWebchatWorkflows =>
+  mergeActions(commandActions, eventActions)
diff --git a/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat/actions/commands.ts b/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat/actions/commands.ts
new file mode 100644
index 000000000..01c4a10fe
--- /dev/null
+++ b/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat/actions/commands.ts
@@ -0,0 +1,103 @@
+import type { PackageContent } from '../../../../package-types'
+
+type IrcWebchatWorkflowActions = Pick<PackageContent, 'workflows' | 'luaScripts'>
+
+export const commandActions: IrcWebchatWorkflowActions = {
+  workflows: [
+    {
+      id: 'workflow_send_message',
+      name: 'Send Chat Message',
+      description: 'Workflow for sending a chat message',
+      nodes: [],
+      edges: [],
+      enabled: true,
+    },
+  ],
+  luaScripts: [
+    {
+      id: 'lua_irc_send_message',
+      name: 'Send IRC Message',
+      description: 'Sends a message to the chat channel',
+      code: `-- Send IRC Message
+function sendMessage(channelId, username, userId, message)
+local msgId = "msg_" .. tostring(os.time()) .. "_" .. math.random(1000, 9999)
+local msg = {
+  id = msgId,
+  channelId = channelId,
+  username = username,
+  userId = userId,
+  message = message,
+  type = "message",
+  timestamp = os.time() * 1000
+}
+log("Sending message: " .. message)
+return msg
+end
+
+return sendMessage`,
+      parameters: [
+        { name: 'channelId', type: 'string' },
+        { name: 'username', type: 'string' },
+        { name: 'userId', type: 'string' },
+        { name: 'message', type: 'string' },
+      ],
+      returnType: 'table',
+    },
+    {
+      id: 'lua_irc_handle_command',
+      name: 'Handle IRC Command',
+      description: 'Processes IRC commands like /help, /users, etc',
+      code: `-- Handle IRC Command
+function handleCommand(command, channelId, username, onlineUsers)
+local parts = {}
+for part in string.gmatch(command, "%S+") do
+  table.insert(parts, part)
+end
+
+local cmd = parts[1]:lower()
+local response = {
+  id = "msg_" .. tostring(os.time()) .. "_" .. math.random(1000, 9999),
+  username = "System",
+  userId = "system",
+  type = "system",
+  timestamp = os.time() * 1000,
+  channelId = channelId
+}
+
+if cmd == "/help" then
+  response.message = "Available commands: /help, /users, /clear, /me <action>"
+elseif cmd == "/users" then
+  local userCount = #onlineUsers
+  local userList = table.concat(onlineUsers, ", ")
+  response.message = "Online users (" .. userCount .. "): " .. userList
+elseif cmd == "/clear" then
+  response.message = "CLEAR_MESSAGES"
+  response.type = "command"
+elseif cmd == "/me" then
+  if #parts > 1 then
+    local action = table.concat(parts, " ", 2)
+    response.message = action
+    response.username = username
+    response.userId = username
+    response.type = "system"
+  else
+    response.message = "Usage: /me <action>"
+  end
+else
+  response.message = "Unknown command: " .. cmd .. ". Type /help for available commands."
+end
+
+return response
+end
+
+return handleCommand`,
+      parameters: [
+        { name: 'command', type: 'string' },
+        { name: 'channelId', type: 'string' },
+        { name: 'username', type: 'string' },
+        { name: 'onlineUsers', type: 'table' },
+      ],
+      returnType: 'table',
+    },
+  ],
+}
diff --git a/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat/actions/events.ts b/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat/actions/events.ts
new file mode 100644
index 000000000..6ad746480
--- /dev/null
+++ b/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat/actions/events.ts
@@ -0,0 +1,104 @@
+import type { PackageContent } from '../../../../package-types'
+
+type IrcWebchatWorkflowActions = Pick<PackageContent, 'workflows' | 'luaScripts'>
+
+export const eventActions: IrcWebchatWorkflowActions = {
+  workflows: [
+    {
+      id: 'workflow_join_channel',
+      name: 'Join Channel',
+      description: 'Workflow for joining a chat channel',
+      nodes: [],
+      edges: [],
+      enabled: true,
+    },
+  ],
+  luaScripts: [
+    {
+      id: 'lua_irc_format_time',
+      name: 'Format Timestamp',
+      description: 'Formats a timestamp for display',
+      code: `-- Format Timestamp
+function formatTime(timestamp)
+local date = os.date("*t", timestamp / 1000)
+local hour = date.hour
+local ampm = "AM"
+
+if hour >= 12 then
+  ampm = "PM"
+  if hour > 12 then
+    hour = hour - 12
+  end
+end
+
+if hour == 0 then
+  hour = 12
+end
+
+return string.format("%02d:%02d %s", hour, date.min, ampm)
+end
+
+return formatTime`,
+      parameters: [
+        { name: 'timestamp', type: 'number' },
+      ],
+      returnType: 'string',
+    },
+    {
+      id: 'lua_irc_user_join',
+      name: 'User Join Channel',
+      description: 'Handles user joining a channel',
+      code: `-- User Join Channel
+function userJoin(channelId, username, userId)
+local joinMsg = {
+  id = "msg_" .. tostring(os.time()) .. "_" .. math.random(1000, 9999),
+  channelId = channelId,
+  username = "System",
+  userId = "system",
+  message = username .. " has joined the channel",
+  type = "join",
+  timestamp = os.time() * 1000
+}
+
+log(username .. " joined channel " .. channelId)
+return joinMsg
+end
+
+return userJoin`,
+      parameters: [
+        { name: 'channelId', type: 'string' },
+        { name: 'username', type: 'string' },
+        { name: 'userId', type: 'string' },
+      ],
+      returnType: 'table',
+    },
+    {
+      id: 'lua_irc_user_leave',
+      name: 'User Leave Channel',
+      description: 'Handles user leaving a channel',
+      code: `-- User Leave Channel
+function userLeave(channelId, username, userId)
+local leaveMsg = {
+  id = "msg_" .. tostring(os.time()) .. "_" .. math.random(1000, 9999),
+  channelId = channelId,
+  username = "System",
+  userId = "system",
+  message = username .. " has left the channel",
+  type = "leave",
+  timestamp = os.time() * 1000
+}
+
+log(username .. " left channel " .. channelId)
+return leaveMsg
+end
+
+return userLeave`,
+      parameters: [
+        { name: 'channelId', type: 'string' },
+        { name: 'username', type: 'string' },
+        { name: 'userId', type: 'string' },
+      ],
+      returnType: 'table',
+    },
+  ],
+}
diff --git a/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat/schema/layout.ts b/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat/schema/layout.ts
new file mode 100644
index 000000000..32d038178
--- /dev/null
+++ b/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat/schema/layout.ts
@@ -0,0 +1,143 @@
+import { createMessageArea, createMessageInputArea } from './messages'
+
+const createHeaderSection = () => ({
+  id: 'header',
+  type: 'CardHeader',
+  props: {
+    className: 'border-b border-border pb-3',
+  },
+  children: [
+    {
+      id: 'title_container',
+      type: 'Flex',
+      props: {
+        className: 'flex items-center justify-between',
+      },
+      children: [
+        {
+          id: 'title',
+          type: 'CardTitle',
+          props: {
+            className: 'flex items-center gap-2 text-lg',
+            content: '#{channelName}',
+          },
+        },
+        {
+          id: 'actions',
+          type: 'Flex',
+          props: {
+            className: 'flex items-center gap-2',
+          },
+          children: [
+            {
+              id: 'user_badge',
+              type: 'Badge',
+              props: {
+                variant: 'secondary',
+                className: 'gap-1.5',
+                icon: 'Users',
+                content: '{onlineUsersCount}',
+              },
+            },
+            {
+              id: 'settings_button',
+              type: 'Button',
+              props: {
+                size: 'sm',
+                variant: 'ghost',
+                icon: 'Gear',
+                onClick: 'toggleSettings',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+})
+
+const createSidebar = () => ({
+  id: 'sidebar',
+  type: 'Container',
+  props: {
+    className: 'w-48 border-l border-border p-4 bg-muted/20',
+    conditional: 'showSettings',
+  },
+  children: [
+    {
+      id: 'sidebar_title',
+      type: 'Heading',
+      props: {
+        level: '4',
+        className: 'font-semibold text-sm mb-3',
+        content: 'Online Users',
+      },
+    },
+    {
+      id: 'users_list',
+      type: 'UserList',
+      props: {
+        className: 'space-y-1.5 text-sm',
+        dataSource: 'onlineUsers',
+      },
+    },
+  ],
+})
+
+export const ircWebchatComponentConfig = {
+  type: 'IRCWebchat',
+  category: 'social',
+  label: 'IRC Webchat',
+  description: 'IRC-style chat component with channels and commands',
+  icon: '💬',
+  props: [
+    {
+      name: 'channelName',
+      type: 'string',
+      label: 'Channel Name',
+      defaultValue: 'general',
+      required: false,
+    },
+    {
+      name: 'showSettings',
+      type: 'boolean',
+      label: 'Show Settings',
+      defaultValue: false,
+      required: false,
+    },
+    {
+      name: 'height',
+      type: 'string',
+      label: 'Height',
+      defaultValue: '600px',
+      required: false,
+    },
+  ],
+  config: {
+    layout: 'Card',
+    styling: {
+      className: 'h-[600px] flex flex-col',
+    },
+    children: [
+      createHeaderSection(),
+      {
+        id: 'content',
+        type: 'CardContent',
+        props: {
+          className: 'flex-1 flex flex-col p-0 overflow-hidden',
+        },
+        children: [
+          {
+            id: 'main_area',
+            type: 'Flex',
+            props: {
+              className: 'flex flex-1 overflow-hidden',
+            },
+            children: [createMessageArea(), createSidebar()],
+          },
+          createMessageInputArea(),
+        ],
+      },
+    ],
+  },
+}
diff --git a/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat/schema/messages.ts b/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat/schema/messages.ts
new file mode 100644
index 000000000..10428363d
--- /dev/null
+++ b/frontends/nextjs/src/lib/packages/core/package-definitions/set-b/irc-webchat/schema/messages.ts
@@ -0,0 +1,65 @@
+export const createMessageArea = () => ({
+  id: 'messages_area',
+  type: 'ScrollArea',
+  props: {
+    className: 'flex-1 p-4',
+  },
+  children: [
+    {
+      id: 'messages_container',
+      type: 'MessageList',
+      props: {
+        className: 'space-y-2 font-mono text-sm',
+        dataSource: 'messages',
+        itemRenderer: 'renderMessage',
+      },
+    },
+  ],
+})
+
+export const createMessageInputArea = () => ({
+  id: 'input_area',
+  type: 'Container',
+  props: {
+    className: 'border-t border-border p-4',
+  },
+  children: [
+    {
+      id: 'input_row',
+      type: 'Flex',
+      props: {
+        className: 'flex gap-2',
+      },
+      children: [
+        {
+          id: 'message_input',
+          type: 'Input',
+          props: {
+            className: 'flex-1 font-mono',
+            placeholder: 'Type a message... (/help for commands)',
+            onKeyPress: 'handleKeyPress',
+            value: '{inputMessage}',
+            onChange: 'updateInputMessage',
+          },
+        },
+        {
+          id: 'send_button',
+          type: 'Button',
+          props: {
+            size: 'icon',
+            icon: 'PaperPlaneTilt',
+            onClick: 'handleSendMessage',
+          },
+        },
+      ],
+    },
+    {
+      id: 'help_text',
+      type: 'Text',
+      props: {
+        className: 'text-xs text-muted-foreground mt-2',
+        content: 'Press Enter to send. Type /help for commands.',
+      },
+    },
+  ],
+})
diff --git a/frontends/nextjs/src/lib/packages/tests/package-glue.test.ts b/frontends/nextjs/src/lib/packages/tests/package-glue.test.ts
index 9b810b9d3..e1a2ff01b 100644
--- a/frontends/nextjs/src/lib/packages/tests/package-glue.test.ts
+++ b/frontends/nextjs/src/lib/packages/tests/package-glue.test.ts
@@ -1,30 +1,13 @@
 /**
- * Tests for package-glue module - Package registry utilities
- * Following parameterized test pattern per project conventions
+ * Shared helpers for package-glue test suites.
+ * Individual suites live under ./package-glue/.
  */
 
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import type { PackageRegistry, PackageDefinition, LuaScriptFile } from './package-glue'
-import {
-  getPackage,
-  getPackagesByCategory,
-  getPackageComponents,
-  getPackageScripts,
-  getPackageScriptFiles,
-  getAllPackageScripts,
-  getPackageExamples,
-  checkDependencies,
-  installPackageComponents,
-  installPackageScripts,
-  installPackage,
-  uninstallPackage,
-  getInstalledPackages,
-  isPackageInstalled,
-  exportAllPackagesForSeed,
-} from './package-glue'
+import { vi } from 'vitest'
 
-// Helper to create mock package definitions
-function createMockPackage(
+import type { LuaScriptFile, PackageDefinition, PackageRegistry } from '../package-glue'
+
+export function createMockPackage(
   id: string,
   options: Partial<PackageDefinition> = {}
 ): PackageDefinition {
@@ -44,8 +27,7 @@ function createMockPackage(
   }
 }
 
-// Helper to create mock registry
-function createMockRegistry(packages: PackageDefinition[]): PackageRegistry {
+export function createMockRegistry(packages: PackageDefinition[]): PackageRegistry {
   const registry: PackageRegistry = {}
   for (const pkg of packages) {
     registry[pkg.packageId] = pkg
@@ -53,8 +35,9 @@ function createMockRegistry(packages: PackageDefinition[]): PackageRegistry {
   return registry
 }
 
-// Helper to create mock database
-function createMockDb() {
+export type MockDb = ReturnType<typeof createMockDb>
+
+export function createMockDb() {
   const data: Record<string, Record<string, any>> = {}
   return {
     set: vi.fn(async (table: string, key: string, value: any) => {
@@ -74,546 +57,7 @@ function createMockDb() {
   }
 }
 
-describe('package-glue', () => {
-  describe('getPackage', () => {
-    it.each([
-      {
-        name: 'returns package when found',
-        registry: createMockRegistry([createMockPackage('test_pkg')]),
-        packageId: 'test_pkg',
-        expectFound: true,
-      },
-      {
-        name: 'returns undefined when not found',
-        registry: createMockRegistry([createMockPackage('other_pkg')]),
-        packageId: 'test_pkg',
-        expectFound: false,
-      },
-      {
-        name: 'returns undefined from empty registry',
-        registry: createMockRegistry([]),
-        packageId: 'test_pkg',
-        expectFound: false,
-      },
-    ])('should handle $name', ({ registry, packageId, expectFound }) => {
-      const result = getPackage(registry, packageId)
-
-      if (expectFound) {
-        expect(result).toBeDefined()
-        expect(result?.packageId).toBe(packageId)
-      } else {
-        expect(result).toBeUndefined()
-      }
-    })
-  })
-
-  describe('getPackagesByCategory', () => {
-    const mixedRegistry = createMockRegistry([
-      createMockPackage('pkg1', { category: 'ui' }),
-      createMockPackage('pkg2', { category: 'ui' }),
-      createMockPackage('pkg3', { category: 'data' }),
-      createMockPackage('pkg4', { category: 'util' }),
-    ])
-
-    it.each([
-      {
-        name: 'returns packages in category',
-        registry: mixedRegistry,
-        category: 'ui',
-        expectedCount: 2,
-      },
-      {
-        name: 'returns single package in category',
-        registry: mixedRegistry,
-        category: 'data',
-        expectedCount: 1,
-      },
-      {
-        name: 'returns empty array for unknown category',
-        registry: mixedRegistry,
-        category: 'unknown',
-        expectedCount: 0,
-      },
-      {
-        name: 'returns empty array from empty registry',
-        registry: createMockRegistry([]),
-        category: 'ui',
-        expectedCount: 0,
-      },
-    ])('should handle $name', ({ registry, category, expectedCount }) => {
-      const result = getPackagesByCategory(registry, category)
-
-      expect(result).toHaveLength(expectedCount)
-      result.forEach((pkg) => {
-        expect(pkg.category).toBe(category)
-      })
-    })
-  })
-
-  describe('getPackageComponents', () => {
-    it.each([
-      {
-        name: 'returns components array',
-        pkg: createMockPackage('test', {
-          components: [{ id: 'c1' }, { id: 'c2' }],
-        }),
-        expectedLength: 2,
-      },
-      {
-        name: 'returns empty array when no components',
-        pkg: createMockPackage('test', { components: [] }),
-        expectedLength: 0,
-      },
-      {
-        name: 'returns empty array when components is undefined',
-        pkg: { ...createMockPackage('test'), components: undefined as any },
-        expectedLength: 0,
-      },
-    ])('should handle $name', ({ pkg, expectedLength }) => {
-      const result = getPackageComponents(pkg)
-
-      expect(Array.isArray(result)).toBe(true)
-      expect(result).toHaveLength(expectedLength)
-    })
-  })
-
-  describe('getPackageScripts', () => {
-    it.each([
-      {
-        name: 'returns scripts string',
-        pkg: createMockPackage('test', { scripts: 'return 42' }),
-        expected: 'return 42',
-      },
-      {
-        name: 'returns empty string when undefined',
-        pkg: createMockPackage('test'),
-        expected: '',
-      },
-      {
-        name: 'returns empty string when null',
-        pkg: { ...createMockPackage('test'), scripts: null as any },
-        expected: '',
-      },
-    ])('should handle $name', ({ pkg, expected }) => {
-      const result = getPackageScripts(pkg)
-
-      expect(result).toBe(expected)
-    })
-  })
-
-  describe('getPackageScriptFiles', () => {
-    const mockScriptFiles: LuaScriptFile[] = [
-      { name: 'init', path: 'scripts/init.lua', code: 'return {}' },
-      { name: 'utils', path: 'scripts/utils.lua', code: 'return true' },
-    ]
-
-    it.each([
-      {
-        name: 'returns script files array',
-        pkg: createMockPackage('test', { scriptFiles: mockScriptFiles }),
-        expectedLength: 2,
-      },
-      {
-        name: 'returns empty array when undefined',
-        pkg: createMockPackage('test'),
-        expectedLength: 0,
-      },
-      {
-        name: 'returns empty array when empty',
-        pkg: createMockPackage('test', { scriptFiles: [] }),
-        expectedLength: 0,
-      },
-    ])('should handle $name', ({ pkg, expectedLength }) => {
-      const result = getPackageScriptFiles(pkg)
-
-      expect(Array.isArray(result)).toBe(true)
-      expect(result).toHaveLength(expectedLength)
-    })
-  })
-
-  describe('getAllPackageScripts', () => {
-    const mockScriptFiles: LuaScriptFile[] = [
-      { name: 'init', path: 'scripts/init.lua', code: 'return {}' },
-    ]
-
-    it.each([
-      {
-        name: 'returns both legacy and files',
-        pkg: createMockPackage('test', {
-          scripts: 'legacy code',
-          scriptFiles: mockScriptFiles,
-        }),
-        expectedLegacy: 'legacy code',
-        expectedFilesLength: 1,
-      },
-      {
-        name: 'handles missing legacy',
-        pkg: createMockPackage('test', { scriptFiles: mockScriptFiles }),
-        expectedLegacy: '',
-        expectedFilesLength: 1,
-      },
-      {
-        name: 'handles missing files',
-        pkg: createMockPackage('test', { scripts: 'code' }),
-        expectedLegacy: 'code',
-        expectedFilesLength: 0,
-      },
-      {
-        name: 'handles both missing',
-        pkg: createMockPackage('test'),
-        expectedLegacy: '',
-        expectedFilesLength: 0,
-      },
-    ])('should handle $name', ({ pkg, expectedLegacy, expectedFilesLength }) => {
-      const result = getAllPackageScripts(pkg)
-
-      expect(result.legacy).toBe(expectedLegacy)
-      expect(result.files).toHaveLength(expectedFilesLength)
-    })
-  })
-
-  describe('getPackageExamples', () => {
-    it.each([
-      {
-        name: 'returns examples object',
-        pkg: createMockPackage('test', {
-          examples: { demo: 'code' },
-        }),
-        hasExamples: true,
-      },
-      {
-        name: 'returns empty object when undefined',
-        pkg: createMockPackage('test'),
-        hasExamples: false,
-      },
-    ])('should handle $name', ({ pkg, hasExamples }) => {
-      const result = getPackageExamples(pkg)
-
-      expect(typeof result).toBe('object')
-      if (hasExamples) {
-        expect(result.demo).toBe('code')
-      } else {
-        expect(Object.keys(result)).toHaveLength(0)
-      }
-    })
-  })
-
-  describe('checkDependencies', () => {
-    it.each([
-      {
-        name: 'satisfied when no dependencies',
-        registry: createMockRegistry([createMockPackage('test')]),
-        packageId: 'test',
-        expectedSatisfied: true,
-        expectedMissing: [],
-      },
-      {
-        name: 'satisfied when all dependencies present',
-        registry: createMockRegistry([
-          createMockPackage('test', { dependencies: ['dep1', 'dep2'] }),
-          createMockPackage('dep1'),
-          createMockPackage('dep2'),
-        ]),
-        packageId: 'test',
-        expectedSatisfied: true,
-        expectedMissing: [],
-      },
-      {
-        name: 'not satisfied when dependencies missing',
-        registry: createMockRegistry([
-          createMockPackage('test', { dependencies: ['dep1', 'dep2'] }),
-          createMockPackage('dep1'),
-        ]),
-        packageId: 'test',
-        expectedSatisfied: false,
-        expectedMissing: ['dep2'],
-      },
-      {
-        name: 'not satisfied when package not found',
-        registry: createMockRegistry([]),
-        packageId: 'nonexistent',
-        expectedSatisfied: false,
-        expectedMissing: ['nonexistent'],
-      },
-    ])('should handle $name', ({ registry, packageId, expectedSatisfied, expectedMissing }) => {
-      const result = checkDependencies(registry, packageId)
-
-      expect(result.satisfied).toBe(expectedSatisfied)
-      expect(result.missing).toEqual(expectedMissing)
-    })
-  })
-
-  describe('installPackageComponents', () => {
-    it('should install all components to database', async () => {
-      const db = createMockDb()
-      const pkg = createMockPackage('test', {
-        components: [
-          { id: 'comp1', type: 'button' },
-          { id: 'comp2', type: 'form' },
-        ],
-      })
-
-      await installPackageComponents(pkg, db)
-
-      expect(db.set).toHaveBeenCalledTimes(2)
-      expect(db.set).toHaveBeenCalledWith('components', 'comp1', { id: 'comp1', type: 'button' })
-      expect(db.set).toHaveBeenCalledWith('components', 'comp2', { id: 'comp2', type: 'form' })
-    })
-
-    it('should handle empty components array', async () => {
-      const db = createMockDb()
-      const pkg = createMockPackage('test', { components: [] })
-
-      await installPackageComponents(pkg, db)
-
-      expect(db.set).not.toHaveBeenCalled()
-    })
-  })
-
-  describe('installPackageScripts', () => {
-    it('should install legacy script', async () => {
-      const db = createMockDb()
-      const pkg = createMockPackage('test', { scripts: 'return 42' })
-
-      await installPackageScripts(pkg, db)
-
-      expect(db.set).toHaveBeenCalledWith('lua_scripts', 'package_test', {
-        id: 'package_test',
-        name: 'Package test Scripts',
-        code: 'return 42',
-        category: 'package',
-        packageId: 'test',
-      })
-    })
-
-    it('should install multi-file scripts', async () => {
-      const db = createMockDb()
-      const pkg = createMockPackage('test', {
-        scriptFiles: [
-          { name: 'init', path: 'scripts/init.lua', code: 'return {}', category: 'setup', description: 'Init script' },
-        ],
-      })
-
-      await installPackageScripts(pkg, db)
-
-      expect(db.set).toHaveBeenCalledWith('lua_scripts', 'package_test_init', {
-        id: 'package_test_init',
-        name: 'Package test - init',
-        code: 'return {}',
-        category: 'setup',
-        packageId: 'test',
-        path: 'scripts/init.lua',
-        description: 'Init script',
-      })
-    })
-
-    it('should install both legacy and multi-file scripts', async () => {
-      const db = createMockDb()
-      const pkg = createMockPackage('test', {
-        scripts: 'legacy',
-        scriptFiles: [{ name: 'utils', path: 'scripts/utils.lua', code: 'helpers' }],
-      })
-
-      await installPackageScripts(pkg, db)
-
-      expect(db.set).toHaveBeenCalledTimes(2)
-    })
-  })
-
-  describe('installPackage', () => {
-    it.each([
-      {
-        name: 'successfully installs package',
-        registry: createMockRegistry([createMockPackage('test')]),
-        packageId: 'test',
-        expectSuccess: true,
-      },
-      {
-        name: 'fails when package not found',
-        registry: createMockRegistry([]),
-        packageId: 'nonexistent',
-        expectSuccess: false,
-        expectedError: 'Package nonexistent not found',
-      },
-      {
-        name: 'fails when dependencies missing',
-        registry: createMockRegistry([
-          createMockPackage('test', { dependencies: ['missing'] }),
-        ]),
-        packageId: 'test',
-        expectSuccess: false,
-        expectedError: 'Missing dependencies: missing',
-      },
-    ])('should handle $name', async ({ registry, packageId, expectSuccess, expectedError }) => {
-      const db = createMockDb()
-
-      const result = await installPackage(registry, packageId, db)
-
-      expect(result.success).toBe(expectSuccess)
-      if (expectedError) {
-        expect(result.error).toContain(expectedError)
-      }
-      if (expectSuccess) {
-        expect(db.set).toHaveBeenCalledWith(
-          'installed_packages',
-          packageId,
-          expect.objectContaining({ packageId, name: expect.any(String) })
-        )
-      }
-    })
-  })
-
-  describe('uninstallPackage', () => {
-    it.each([
-      {
-        name: 'successfully uninstalls package',
-        registry: createMockRegistry([
-          createMockPackage('test', { components: [{ id: 'c1' }] }),
-        ]),
-        packageId: 'test',
-        expectSuccess: true,
-      },
-      {
-        name: 'fails when package not found',
-        registry: createMockRegistry([]),
-        packageId: 'nonexistent',
-        expectSuccess: false,
-        expectedError: 'Package nonexistent not found',
-      },
-    ])('should handle $name', async ({ registry, packageId, expectSuccess, expectedError }) => {
-      const db = createMockDb()
-
-      const result = await uninstallPackage(registry, packageId, db)
-
-      expect(result.success).toBe(expectSuccess)
-      if (expectedError) {
-        expect(result.error).toContain(expectedError)
-      }
-      if (expectSuccess) {
-        expect(db.delete).toHaveBeenCalledWith('installed_packages', packageId)
-      }
-    })
-  })
-
-  describe('getInstalledPackages', () => {
-    it('should return installed package IDs', async () => {
-      const db = createMockDb()
-      db._data['installed_packages'] = { pkg1: {}, pkg2: {} }
-
-      const result = await getInstalledPackages(db)
-
-      expect(result).toEqual(['pkg1', 'pkg2'])
-    })
-
-    it('should return empty array on error', async () => {
-      const db = createMockDb()
-      db.getAll = vi.fn().mockRejectedValue(new Error('DB error'))
-
-      const result = await getInstalledPackages(db)
-
-      expect(result).toEqual([])
-    })
-
-    it('should return empty array when no packages', async () => {
-      const db = createMockDb()
-
-      const result = await getInstalledPackages(db)
-
-      expect(result).toEqual([])
-    })
-  })
-
-  describe('isPackageInstalled', () => {
-    it.each([
-      {
-        name: 'returns true when installed',
-        setupDb: (db: ReturnType<typeof createMockDb>) => {
-          db._data['installed_packages'] = { test: { packageId: 'test' } }
-        },
-        packageId: 'test',
-        expected: true,
-      },
-      {
-        name: 'returns false when not installed',
-        setupDb: () => {},
-        packageId: 'test',
-        expected: false,
-      },
-    ])('should handle $name', async ({ setupDb, packageId, expected }) => {
-      const db = createMockDb()
-      setupDb(db)
-
-      const result = await isPackageInstalled(packageId, db)
-
-      expect(result).toBe(expected)
-    })
-
-    it('should return false on error', async () => {
-      const db = createMockDb()
-      db.get = vi.fn().mockRejectedValue(new Error('DB error'))
-
-      const result = await isPackageInstalled('test', db)
-
-      expect(result).toBe(false)
-    })
-  })
-
-  describe('exportAllPackagesForSeed', () => {
-    it('should export all package data', () => {
-      const registry = createMockRegistry([
-        createMockPackage('pkg1', {
-          name: 'Package 1',
-          components: [{ id: 'c1' }],
-          scripts: 'lua code',
-        }),
-        createMockPackage('pkg2', {
-          name: 'Package 2',
-          scriptFiles: [{ name: 'init', path: 'scripts/init.lua', code: 'return {}' }],
-        }),
-      ])
-
-      const result = exportAllPackagesForSeed(registry)
-
-      expect(result.components).toHaveLength(1)
-      expect(result.scripts).toHaveLength(2) // 1 legacy + 1 file
-      expect(result.packages).toHaveLength(2)
-      expect(result.packages[0].packageId).toBe('pkg1')
-      expect(result.packages[1].packageId).toBe('pkg2')
-    })
-
-    it('should handle empty registry', () => {
-      const result = exportAllPackagesForSeed({})
-
-      expect(result.components).toEqual([])
-      expect(result.scripts).toEqual([])
-      expect(result.packages).toEqual([])
-    })
-
-    it('should include script metadata', () => {
-      const registry = createMockRegistry([
-        createMockPackage('pkg', {
-          scriptFiles: [
-            {
-              name: 'utils',
-              path: 'scripts/utils.lua',
-              code: 'return true',
-              category: 'helpers',
-              description: 'Utility functions',
-            },
-          ],
-        }),
-      ])
-
-      const result = exportAllPackagesForSeed(registry)
-
-      expect(result.scripts[0]).toMatchObject({
-        id: 'package_pkg_utils',
-        name: 'Package pkg - utils',
-        code: 'return true',
-        category: 'helpers',
-        path: 'scripts/utils.lua',
-        description: 'Utility functions',
-      })
-    })
-  })
-})
+export const mockScriptFiles: LuaScriptFile[] = [
+  { name: 'init', path: 'scripts/init.lua', code: 'return {}' },
+  { name: 'utils', path: 'scripts/utils.lua', code: 'return true' },
+]
diff --git a/frontends/nextjs/src/lib/packages/tests/package-glue/execution.test.ts b/frontends/nextjs/src/lib/packages/tests/package-glue/execution.test.ts
new file mode 100644
index 000000000..36d7ae1c9
--- /dev/null
+++ b/frontends/nextjs/src/lib/packages/tests/package-glue/execution.test.ts
@@ -0,0 +1,229 @@
+import { describe, it, expect, vi } from 'vitest'
+
+import {
+  getInstalledPackages,
+  installPackage,
+  installPackageComponents,
+  installPackageScripts,
+  isPackageInstalled,
+  uninstallPackage,
+} from '../../package-glue'
+import { createMockDb, createMockPackage, createMockRegistry, mockScriptFiles } from '../package-glue.test'
+
+describe('package-glue execution', () => {
+  describe('installPackageComponents', () => {
+    it('should install all components to database', async () => {
+      const db = createMockDb()
+      const pkg = createMockPackage('test', {
+        components: [
+          { id: 'comp1', type: 'button' },
+          { id: 'comp2', type: 'form' },
+        ],
+      })
+
+      await installPackageComponents(pkg, db)
+
+      expect(db.set).toHaveBeenCalledTimes(2)
+      expect(db.set).toHaveBeenCalledWith('components', 'comp1', { id: 'comp1', type: 'button' })
+      expect(db.set).toHaveBeenCalledWith('components', 'comp2', { id: 'comp2', type: 'form' })
+    })
+
+    it('should handle empty components array', async () => {
+      const db = createMockDb()
+      const pkg = createMockPackage('test', { components: [] })
+
+      await installPackageComponents(pkg, db)
+
+      expect(db.set).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('installPackageScripts', () => {
+    it('should install legacy script', async () => {
+      const db = createMockDb()
+      const pkg = createMockPackage('test', { scripts: 'return 42' })
+
+      await installPackageScripts(pkg, db)
+
+      expect(db.set).toHaveBeenCalledWith('lua_scripts', 'package_test', {
+        id: 'package_test',
+        name: 'Package test Scripts',
+        code: 'return 42',
+        category: 'package',
+        packageId: 'test',
+      })
+    })
+
+    it('should install multi-file scripts', async () => {
+      const db = createMockDb()
+      const pkg = createMockPackage('test', {
+        scriptFiles: [
+          { name: 'init', path: 'scripts/init.lua', code: 'return {}', category: 'setup', description: 'Init script' },
+        ],
+      })
+
+      await installPackageScripts(pkg, db)
+
+      expect(db.set).toHaveBeenCalledWith('lua_scripts', 'package_test_init', {
+        id: 'package_test_init',
+        name: 'Package test - init',
+        code: 'return {}',
+        category: 'setup',
+        packageId: 'test',
+        path: 'scripts/init.lua',
+        description: 'Init script',
+      })
+    })
+
+    it('should install both legacy and multi-file scripts', async () => {
+      const db = createMockDb()
+      const scriptFiles = mockScriptFiles.slice(0, 1)
+      const pkg = createMockPackage('test', {
+        scripts: 'legacy',
+        scriptFiles,
+      })
+
+      await installPackageScripts(pkg, db)
+
+      expect(db.set).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe('installPackage', () => {
+    it.each([
+      {
+        name: 'successfully installs package',
+        registry: createMockRegistry([createMockPackage('test')]),
+        packageId: 'test',
+        expectSuccess: true,
+      },
+      {
+        name: 'fails when package not found',
+        registry: createMockRegistry([]),
+        packageId: 'nonexistent',
+        expectSuccess: false,
+        expectedError: 'Package nonexistent not found',
+      },
+      {
+        name: 'fails when dependencies missing',
+        registry: createMockRegistry([
+          createMockPackage('test', { dependencies: ['missing'] }),
+        ]),
+        packageId: 'test',
+        expectSuccess: false,
+        expectedError: 'Missing dependencies: missing',
+      },
+    ])('should handle $name', async ({ registry, packageId, expectSuccess, expectedError }) => {
+      const db = createMockDb()
+
+      const result = await installPackage(registry, packageId, db)
+
+      expect(result.success).toBe(expectSuccess)
+      if (expectedError) {
+        expect(result.error).toContain(expectedError)
+      }
+      if (expectSuccess) {
+        expect(db.set).toHaveBeenCalledWith(
+          'installed_packages',
+          packageId,
+          expect.objectContaining({ packageId, name: expect.any(String) })
+        )
+      }
+    })
+  })
+
+  describe('uninstallPackage', () => {
+    it.each([
+      {
+        name: 'successfully uninstalls package',
+        registry: createMockRegistry([
+          createMockPackage('test', { components: [{ id: 'c1' }] }),
+        ]),
+        packageId: 'test',
+        expectSuccess: true,
+      },
+      {
+        name: 'fails when package not found',
+        registry: createMockRegistry([]),
+        packageId: 'nonexistent',
+        expectSuccess: false,
+        expectedError: 'Package nonexistent not found',
+      },
+    ])('should handle $name', async ({ registry, packageId, expectSuccess, expectedError }) => {
+      const db = createMockDb()
+
+      const result = await uninstallPackage(registry, packageId, db)
+
+      expect(result.success).toBe(expectSuccess)
+      if (expectedError) {
+        expect(result.error).toContain(expectedError)
+      }
+      if (expectSuccess) {
+        expect(db.delete).toHaveBeenCalledWith('installed_packages', packageId)
+      }
+    })
+  })
+
+  describe('getInstalledPackages', () => {
+    it('should return installed package IDs', async () => {
+      const db = createMockDb()
+      db._data['installed_packages'] = { pkg1: {}, pkg2: {} }
+
+      const result = await getInstalledPackages(db)
+
+      expect(result).toEqual(['pkg1', 'pkg2'])
+    })
+
+    it('should return empty array on error', async () => {
+      const db = createMockDb()
+      db.getAll = vi.fn().mockRejectedValue(new Error('DB error'))
+
+      const result = await getInstalledPackages(db)
+
+      expect(result).toEqual([])
+    })
+
+    it('should return empty array when no packages', async () => {
+      const db = createMockDb()
+
+      const result = await getInstalledPackages(db)
+
+      expect(result).toEqual([])
+    })
+  })
+
+  describe('isPackageInstalled', () => {
+    it.each([
+      {
+        name: 'returns true when installed',
+        setupDb: (db: ReturnType<typeof createMockDb>) => {
+          db._data['installed_packages'] = { test: { packageId: 'test' } }
+        },
+        packageId: 'test',
+        expected: true,
+      },
+      {
+        name: 'returns false when not installed',
+        setupDb: () => {},
+        packageId: 'test',
+        expected: false,
+      },
+    ])('should handle $name', async ({ setupDb, packageId, expected }) => {
+      const db = createMockDb()
+      setupDb(db)
+
+      const result = await isPackageInstalled(packageId, db)
+
+      expect(result).toBe(expected)
+    })
+
+    it('should return false on error', async () => {
+      const db = createMockDb()
+      db.get = vi.fn().mockRejectedValue(new Error('DB error'))
+
+      const result = await isPackageInstalled('test', db)
+
+      expect(result).toBe(false)
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/packages/tests/package-glue/regression.test.ts b/frontends/nextjs/src/lib/packages/tests/package-glue/regression.test.ts
new file mode 100644
index 000000000..9f25df8a4
--- /dev/null
+++ b/frontends/nextjs/src/lib/packages/tests/package-glue/regression.test.ts
@@ -0,0 +1,65 @@
+import { describe, it, expect } from 'vitest'
+
+import { exportAllPackagesForSeed } from '../../package-glue'
+import { createMockPackage, createMockRegistry } from '../package-glue.test'
+
+describe('package-glue regressions', () => {
+  describe('exportAllPackagesForSeed', () => {
+    it('should export all package data', () => {
+      const registry = createMockRegistry([
+        createMockPackage('pkg1', {
+          name: 'Package 1',
+          components: [{ id: 'c1' }],
+          scripts: 'lua code',
+        }),
+        createMockPackage('pkg2', {
+          name: 'Package 2',
+          scriptFiles: [{ name: 'init', path: 'scripts/init.lua', code: 'return {}' }],
+        }),
+      ])
+
+      const result = exportAllPackagesForSeed(registry)
+
+      expect(result.components).toHaveLength(1)
+      expect(result.scripts).toHaveLength(2)
+      expect(result.packages).toHaveLength(2)
+      expect(result.packages[0].packageId).toBe('pkg1')
+      expect(result.packages[1].packageId).toBe('pkg2')
+    })
+
+    it('should handle empty registry', () => {
+      const result = exportAllPackagesForSeed({})
+
+      expect(result.components).toEqual([])
+      expect(result.scripts).toEqual([])
+      expect(result.packages).toEqual([])
+    })
+
+    it('should include script metadata', () => {
+      const registry = createMockRegistry([
+        createMockPackage('pkg', {
+          scriptFiles: [
+            {
+              name: 'utils',
+              path: 'scripts/utils.lua',
+              code: 'return true',
+              category: 'helpers',
+              description: 'Utility functions',
+            },
+          ],
+        }),
+      ])
+
+      const result = exportAllPackagesForSeed(registry)
+
+      expect(result.scripts[0]).toMatchObject({
+        id: 'package_pkg_utils',
+        name: 'Package pkg - utils',
+        code: 'return true',
+        category: 'helpers',
+        path: 'scripts/utils.lua',
+        description: 'Utility functions',
+      })
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/packages/tests/package-glue/validation.test.ts b/frontends/nextjs/src/lib/packages/tests/package-glue/validation.test.ts
new file mode 100644
index 000000000..129c72c50
--- /dev/null
+++ b/frontends/nextjs/src/lib/packages/tests/package-glue/validation.test.ts
@@ -0,0 +1,284 @@
+import { describe, it, expect } from 'vitest'
+
+import type { LuaScriptFile } from '../../package-glue'
+import {
+  checkDependencies,
+  getAllPackageScripts,
+  getPackage,
+  getPackageComponents,
+  getPackageExamples,
+  getPackageScriptFiles,
+  getPackageScripts,
+  getPackagesByCategory,
+} from '../../package-glue'
+import { createMockPackage, createMockRegistry } from '../package-glue.test'
+
+describe('package-glue validation', () => {
+  describe('getPackage', () => {
+    it.each([
+      {
+        name: 'returns package when found',
+        registry: createMockRegistry([createMockPackage('test_pkg')]),
+        packageId: 'test_pkg',
+        expectFound: true,
+      },
+      {
+        name: 'returns undefined when not found',
+        registry: createMockRegistry([createMockPackage('other_pkg')]),
+        packageId: 'test_pkg',
+        expectFound: false,
+      },
+      {
+        name: 'returns undefined from empty registry',
+        registry: createMockRegistry([]),
+        packageId: 'test_pkg',
+        expectFound: false,
+      },
+    ])('should handle $name', ({ registry, packageId, expectFound }) => {
+      const result = getPackage(registry, packageId)
+
+      if (expectFound) {
+        expect(result).toBeDefined()
+        expect(result?.packageId).toBe(packageId)
+      } else {
+        expect(result).toBeUndefined()
+      }
+    })
+  })
+
+  describe('getPackagesByCategory', () => {
+    const mixedRegistry = createMockRegistry([
+      createMockPackage('pkg1', { category: 'ui' }),
+      createMockPackage('pkg2', { category: 'ui' }),
+      createMockPackage('pkg3', { category: 'data' }),
+      createMockPackage('pkg4', { category: 'util' }),
+    ])
+
+    it.each([
+      {
+        name: 'returns packages in category',
+        registry: mixedRegistry,
+        category: 'ui',
+        expectedCount: 2,
+      },
+      {
+        name: 'returns single package in category',
+        registry: mixedRegistry,
+        category: 'data',
+        expectedCount: 1,
+      },
+      {
+        name: 'returns empty array for unknown category',
+        registry: mixedRegistry,
+        category: 'unknown',
+        expectedCount: 0,
+      },
+      {
+        name: 'returns empty array from empty registry',
+        registry: createMockRegistry([]),
+        category: 'ui',
+        expectedCount: 0,
+      },
+    ])('should handle $name', ({ registry, category, expectedCount }) => {
+      const result = getPackagesByCategory(registry, category)
+
+      expect(result).toHaveLength(expectedCount)
+      result.forEach((pkg) => {
+        expect(pkg.category).toBe(category)
+      })
+    })
+  })
+
+  describe('getPackageComponents', () => {
+    it.each([
+      {
+        name: 'returns components array',
+        pkg: createMockPackage('test', {
+          components: [{ id: 'c1' }, { id: 'c2' }],
+        }),
+        expectedLength: 2,
+      },
+      {
+        name: 'returns empty array when no components',
+        pkg: createMockPackage('test', { components: [] }),
+        expectedLength: 0,
+      },
+      {
+        name: 'returns empty array when components is undefined',
+        pkg: { ...createMockPackage('test'), components: undefined as any },
+        expectedLength: 0,
+      },
+    ])('should handle $name', ({ pkg, expectedLength }) => {
+      const result = getPackageComponents(pkg)
+
+      expect(Array.isArray(result)).toBe(true)
+      expect(result).toHaveLength(expectedLength)
+    })
+  })
+
+  describe('getPackageScripts', () => {
+    it.each([
+      {
+        name: 'returns scripts string',
+        pkg: createMockPackage('test', { scripts: 'return 42' }),
+        expected: 'return 42',
+      },
+      {
+        name: 'returns empty string when undefined',
+        pkg: createMockPackage('test'),
+        expected: '',
+      },
+      {
+        name: 'returns empty string when null',
+        pkg: { ...createMockPackage('test'), scripts: null as any },
+        expected: '',
+      },
+    ])('should handle $name', ({ pkg, expected }) => {
+      const result = getPackageScripts(pkg)
+
+      expect(result).toBe(expected)
+    })
+  })
+
+  describe('getPackageScriptFiles', () => {
+    const mockScriptFiles: LuaScriptFile[] = [
+      { name: 'init', path: 'scripts/init.lua', code: 'return {}' },
+      { name: 'utils', path: 'scripts/utils.lua', code: 'return true' },
+    ]
+
+    it.each([
+      {
+        name: 'returns script files array',
+        pkg: createMockPackage('test', { scriptFiles: mockScriptFiles }),
+        expectedLength: 2,
+      },
+      {
+        name: 'returns empty array when undefined',
+        pkg: createMockPackage('test'),
+        expectedLength: 0,
+      },
+      {
+        name: 'returns empty array when empty',
+        pkg: createMockPackage('test', { scriptFiles: [] }),
+        expectedLength: 0,
+      },
+    ])('should handle $name', ({ pkg, expectedLength }) => {
+      const result = getPackageScriptFiles(pkg)
+
+      expect(Array.isArray(result)).toBe(true)
+      expect(result).toHaveLength(expectedLength)
+    })
+  })
+
+  describe('getAllPackageScripts', () => {
+    const mockScriptFiles: LuaScriptFile[] = [
+      { name: 'init', path: 'scripts/init.lua', code: 'return {}' },
+    ]
+
+    it.each([
+      {
+        name: 'returns both legacy and files',
+        pkg: createMockPackage('test', {
+          scripts: 'legacy code',
+          scriptFiles: mockScriptFiles,
+        }),
+        expectedLegacy: 'legacy code',
+        expectedFilesLength: 1,
+      },
+      {
+        name: 'handles missing legacy',
+        pkg: createMockPackage('test', { scriptFiles: mockScriptFiles }),
+        expectedLegacy: '',
+        expectedFilesLength: 1,
+      },
+      {
+        name: 'handles missing files',
+        pkg: createMockPackage('test', { scripts: 'code' }),
+        expectedLegacy: 'code',
+        expectedFilesLength: 0,
+      },
+      {
+        name: 'handles both missing',
+        pkg: createMockPackage('test'),
+        expectedLegacy: '',
+        expectedFilesLength: 0,
+      },
+    ])('should handle $name', ({ pkg, expectedLegacy, expectedFilesLength }) => {
+      const result = getAllPackageScripts(pkg)
+
+      expect(result.legacy).toBe(expectedLegacy)
+      expect(result.files).toHaveLength(expectedFilesLength)
+    })
+  })
+
+  describe('getPackageExamples', () => {
+    it.each([
+      {
+        name: 'returns examples object',
+        pkg: createMockPackage('test', {
+          examples: { demo: 'code' },
+        }),
+        hasExamples: true,
+      },
+      {
+        name: 'returns empty object when undefined',
+        pkg: createMockPackage('test'),
+        hasExamples: false,
+      },
+    ])('should handle $name', ({ pkg, hasExamples }) => {
+      const result = getPackageExamples(pkg)
+
+      expect(typeof result).toBe('object')
+      if (hasExamples) {
+        expect(result.demo).toBe('code')
+      } else {
+        expect(Object.keys(result)).toHaveLength(0)
+      }
+    })
+  })
+
+  describe('checkDependencies', () => {
+    it.each([
+      {
+        name: 'satisfied when no dependencies',
+        registry: createMockRegistry([createMockPackage('test')]),
+        packageId: 'test',
+        expectedSatisfied: true,
+        expectedMissing: [],
+      },
+      {
+        name: 'satisfied when all dependencies present',
+        registry: createMockRegistry([
+          createMockPackage('test', { dependencies: ['dep1', 'dep2'] }),
+          createMockPackage('dep1'),
+          createMockPackage('dep2'),
+        ]),
+        packageId: 'test',
+        expectedSatisfied: true,
+        expectedMissing: [],
+      },
+      {
+        name: 'not satisfied when dependencies missing',
+        registry: createMockRegistry([
+          createMockPackage('test', { dependencies: ['dep1', 'dep2'] }),
+          createMockPackage('dep1'),
+        ]),
+        packageId: 'test',
+        expectedSatisfied: false,
+        expectedMissing: ['dep2'],
+      },
+      {
+        name: 'not satisfied when package not found',
+        registry: createMockRegistry([]),
+        packageId: 'nonexistent',
+        expectedSatisfied: false,
+        expectedMissing: ['nonexistent'],
+      },
+    ])('should handle $name', ({ registry, packageId, expectedSatisfied, expectedMissing }) => {
+      const result = checkDependencies(registry, packageId)
+
+      expect(result.satisfied).toBe(expectedSatisfied)
+      expect(result.missing).toEqual(expectedMissing)
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/rendering/page/builder-types.ts b/frontends/nextjs/src/lib/rendering/page/builder-types.ts
index 346266bd4..bc9bfb617 100644
--- a/frontends/nextjs/src/lib/rendering/page/builder-types.ts
+++ b/frontends/nextjs/src/lib/rendering/page/builder-types.ts
@@ -1 +1 @@
-export * from '../builder-types'
+export * from '@/lib/types/builder-types'
diff --git a/frontends/nextjs/src/lib/rendering/page/components.ts b/frontends/nextjs/src/lib/rendering/page/components.ts
new file mode 100644
index 000000000..b5da67a93
--- /dev/null
+++ b/frontends/nextjs/src/lib/rendering/page/components.ts
@@ -0,0 +1,99 @@
+import type { ComponentInstance } from '@/lib/types/builder-types'
+
+export const buildHeaderActions = (): ComponentInstance[] => [
+  {
+    id: 'header_login_btn',
+    type: 'Button',
+    props: {
+      children: 'Login',
+      variant: 'default',
+      size: 'sm',
+    },
+    children: [],
+  },
+]
+
+export const buildProfileCard = (): ComponentInstance => ({
+  id: 'comp_profile',
+  type: 'Card',
+  props: {
+    className: 'p-6',
+  },
+  children: [
+    {
+      id: 'comp_profile_header',
+      type: 'Heading',
+      props: {
+        level: 2,
+        children: 'User Profile',
+        className: 'text-2xl font-bold mb-4',
+      },
+      children: [],
+    },
+    {
+      id: 'comp_profile_content',
+      type: 'Container',
+      props: {
+        className: 'space-y-4',
+      },
+      children: [
+        {
+          id: 'comp_profile_bio',
+          type: 'Textarea',
+          props: {
+            placeholder: 'Tell us about yourself...',
+            className: 'min-h-32',
+          },
+          children: [],
+        },
+        {
+          id: 'comp_profile_save',
+          type: 'Button',
+          props: {
+            children: 'Save Profile',
+            variant: 'default',
+          },
+          children: [],
+        },
+      ],
+    },
+  ],
+})
+
+export const buildCommentsCard = (): ComponentInstance => ({
+  id: 'comp_comments',
+  type: 'Card',
+  props: {
+    className: 'p-6',
+  },
+  children: [
+    {
+      id: 'comp_comments_header',
+      type: 'Heading',
+      props: {
+        level: 2,
+        children: 'Community Comments',
+        className: 'text-2xl font-bold mb-4',
+      },
+      children: [],
+    },
+    {
+      id: 'comp_comments_input',
+      type: 'Textarea',
+      props: {
+        placeholder: 'Share your thoughts...',
+        className: 'mb-4',
+      },
+      children: [],
+    },
+    {
+      id: 'comp_comments_post',
+      type: 'Button',
+      props: {
+        children: 'Post Comment',
+        variant: 'default',
+      },
+      children: [],
+    },
+  ],
+})
diff --git a/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/build-level2-user-dashboard.ts b/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/build-level2-user-dashboard.ts
index b20c55eec..ecadaccbd 100644
--- a/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/build-level2-user-dashboard.ts
+++ b/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/build-level2-user-dashboard.ts
@@ -1,131 +1,46 @@
-import type { PageDefinition } from './page-renderer'
-import type { ComponentInstance } from './builder-types'
 import { Database } from '@/lib/database'
+import { buildCommentsCard, buildProfileCard } from '@/lib/rendering/page/components'
+import type { PageDefinition } from '@/lib/rendering/page/page-renderer'
 
 export function buildLevel2UserDashboard(): PageDefinition {
-    const profileCard: ComponentInstance = {
-      id: 'comp_profile',
-      type: 'Card',
-      props: {
-        className: 'p-6'
-      },
-      children: [
+  return {
+    id: 'page_level2_dashboard',
+    level: 2,
+    title: 'User Dashboard',
+    description: 'User dashboard with profile and comments',
+    layout: 'dashboard',
+    components: [buildProfileCard(), buildCommentsCard()],
+    permissions: {
+      requiresAuth: true,
+      requiredRole: 'user',
+    },
+    metadata: {
+      showHeader: true,
+      showFooter: false,
+      headerTitle: 'Dashboard',
+      sidebarItems: [
         {
-          id: 'comp_profile_header',
-          type: 'Heading',
-          props: {
-            level: 2,
-            children: 'User Profile',
-            className: 'text-2xl font-bold mb-4'
-          },
-          children: []
+          id: 'nav_home',
+          label: 'Home',
+          icon: '🏠',
+          action: 'navigate',
+          target: '1',
         },
         {
-          id: 'comp_profile_content',
-          type: 'Container',
-          props: {
-            className: 'space-y-4'
-          },
-          children: [
-            {
-              id: 'comp_profile_bio',
-              type: 'Textarea',
-              props: {
-                placeholder: 'Tell us about yourself...',
-                className: 'min-h-32'
-              },
-              children: []
-            },
-            {
-              id: 'comp_profile_save',
-              type: 'Button',
-              props: {
-                children: 'Save Profile',
-                variant: 'default'
-              },
-              children: []
-            }
-          ]
-        }
-      ]
-    }
-
-    const commentsCard: ComponentInstance = {
-      id: 'comp_comments',
-      type: 'Card',
-      props: {
-        className: 'p-6'
-      },
-      children: [
-        {
-          id: 'comp_comments_header',
-          type: 'Heading',
-          props: {
-            level: 2,
-            children: 'Community Comments',
-            className: 'text-2xl font-bold mb-4'
-          },
-          children: []
+          id: 'nav_profile',
+          label: 'Profile',
+          icon: '👤',
+          action: 'navigate',
+          target: '2',
         },
         {
-          id: 'comp_comments_input',
-          type: 'Textarea',
-          props: {
-            placeholder: 'Share your thoughts...',
-            className: 'mb-4'
-          },
-          children: []
+          id: 'nav_chat',
+          label: 'Chat',
+          icon: '💬',
+          action: 'navigate',
+          target: '2',
         },
-        {
-          id: 'comp_comments_post',
-          type: 'Button',
-          props: {
-            children: 'Post Comment',
-            variant: 'default'
-          },
-          children: []
-        }
-      ]
-    }
-
-    return {
-      id: 'page_level2_dashboard',
-      level: 2,
-      title: 'User Dashboard',
-      description: 'User dashboard with profile and comments',
-      layout: 'dashboard',
-      components: [profileCard, commentsCard],
-      permissions: {
-        requiresAuth: true,
-        requiredRole: 'user'
-      },
-      metadata: {
-        showHeader: true,
-        showFooter: false,
-        headerTitle: 'Dashboard',
-        sidebarItems: [
-          {
-            id: 'nav_home',
-            label: 'Home',
-            icon: '🏠',
-            action: 'navigate',
-            target: '1'
-          },
-          {
-            id: 'nav_profile',
-            label: 'Profile',
-            icon: '👤',
-            action: 'navigate',
-            target: '2'
-          },
-          {
-            id: 'nav_chat',
-            label: 'Chat',
-            icon: '💬',
-            action: 'navigate',
-            target: '2'
-          }
-        ]
-      }
-    }
+      ],
+    },
+  }
 }
diff --git a/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/build-level3-admin-panel.ts b/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/build-level3-admin-panel.ts
index c01748387..09decf394 100644
--- a/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/build-level3-admin-panel.ts
+++ b/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/build-level3-admin-panel.ts
@@ -1,4 +1,4 @@
-import type { PageDefinition } from './page-renderer'
+import type { PageDefinition } from '@/lib/rendering/page/page-renderer'
 import type { ComponentInstance } from './builder-types'
 import { Database } from '@/lib/database'
 
diff --git a/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/get-page-definition-builder.ts b/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/get-page-definition-builder.ts
index bb5d846e8..52bea90f7 100644
--- a/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/get-page-definition-builder.ts
+++ b/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/get-page-definition-builder.ts
@@ -1,4 +1,4 @@
-import type { PageDefinition } from './page-renderer'
+import type { PageDefinition } from '@/lib/rendering/page/page-renderer'
 import type { ComponentInstance } from './builder-types'
 import { Database } from '@/lib/database'
 
diff --git a/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/get-pages.ts b/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/get-pages.ts
index f8c718851..c92c18a88 100644
--- a/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/get-pages.ts
+++ b/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/get-pages.ts
@@ -1,4 +1,4 @@
-import type { PageDefinition } from './page-renderer'
+import type { PageDefinition } from '@/lib/rendering/page/page-renderer'
 import type { ComponentInstance } from './builder-types'
 import { Database } from '@/lib/database'
 
diff --git a/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/homepage/build-level1-homepage.ts b/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/homepage/build-level1-homepage.ts
index 0b21ffdfa..071f69f15 100644
--- a/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/homepage/build-level1-homepage.ts
+++ b/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/homepage/build-level1-homepage.ts
@@ -1,21 +1,9 @@
 import type { PageDefinition } from '@/lib/rendering/page/page-renderer'
 import type { ComponentInstance } from '@/lib/rendering/page/builder-types'
+import { buildHeaderActions } from '@/lib/rendering/page/components'
 import { buildFeaturesComponent } from './build-features-component'
 import { buildHeroComponent } from './build-hero-component'
 
-const buildHeaderActions = (): ComponentInstance[] => [
-  {
-    id: 'header_login_btn',
-    type: 'Button',
-    props: {
-      children: 'Login',
-      variant: 'default',
-      size: 'sm'
-    },
-    children: []
-  }
-]
-
 export const buildLevel1Homepage = (): PageDefinition => {
   const heroComponent = buildHeroComponent()
   const featuresComponent = buildFeaturesComponent()
diff --git a/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/initialize-default-pages.ts b/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/initialize-default-pages.ts
index aadeb907e..8f2a89c30 100644
--- a/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/initialize-default-pages.ts
+++ b/frontends/nextjs/src/lib/rendering/page/page-definition-builder/functions/initialize-default-pages.ts
@@ -1,4 +1,4 @@
-import type { PageDefinition } from './page-renderer'
+import type { PageDefinition } from '@/lib/rendering/page/page-renderer'
 import type { ComponentInstance } from './builder-types'
 import { Database } from '@/lib/database'
 
diff --git a/frontends/nextjs/src/lib/rendering/page/page-renderer.ts b/frontends/nextjs/src/lib/rendering/page/page-renderer.ts
index 1e56867c6..04e953bdd 100644
--- a/frontends/nextjs/src/lib/rendering/page/page-renderer.ts
+++ b/frontends/nextjs/src/lib/rendering/page/page-renderer.ts
@@ -1,8 +1,8 @@
-import type { ComponentInstance } from '../types/builder-types'
-import type { User } from '../types/level-types'
-import { Database } from '../database'
-import type { LuaEngine } from '../lua-engine'
-import { executeLuaScriptWithProfile } from '../lua/execute-lua-script-with-profile'
+import { Database } from '@/lib/database'
+import type { LuaEngine } from '@/lib/lua-engine'
+import { executeLuaScriptWithProfile } from '@/lib/lua/execute-lua-script-with-profile'
+import type { ComponentInstance } from '@/lib/types/builder-types'
+import type { User } from '@/lib/types/level-types'
 
 export interface PageDefinition {
   id: string
diff --git a/frontends/nextjs/src/lib/rendering/page/utils.ts b/frontends/nextjs/src/lib/rendering/page/utils.ts
new file mode 100644
index 000000000..22472c760
--- /dev/null
+++ b/frontends/nextjs/src/lib/rendering/page/utils.ts
@@ -0,0 +1,29 @@
+import type { ComponentInstance } from '@/lib/types/builder-types'
+import type { User, UserRole } from '@/lib/types/level-types'
+import type { PageDefinition } from './page-renderer'
+
+export function createMockPage(
+  id: string,
+  options: Partial<PageDefinition> = {}
+): PageDefinition {
+  return {
+    id,
+    level: options.level ?? 1,
+    title: options.title ?? `Page ${id}`,
+    layout: options.layout ?? 'default',
+    components: (options.components as ComponentInstance[] | undefined) ?? [],
+    permissions: options.permissions,
+    luaScripts: options.luaScripts,
+    metadata: options.metadata,
+  }
+}
+
+export function createMockUser(role: UserRole | string, id = 'user1'): User {
+  return {
+    id,
+    username: `User ${id}`,
+    role: role as UserRole,
+    email: `${id}@test.com`,
+    createdAt: Date.now(),
+  }
+}
diff --git a/frontends/nextjs/src/lib/rendering/tests/declarative-component-renderer.evaluation.test.ts b/frontends/nextjs/src/lib/rendering/tests/declarative-component-renderer.evaluation.test.ts
new file mode 100644
index 000000000..e562eae07
--- /dev/null
+++ b/frontends/nextjs/src/lib/rendering/tests/declarative-component-renderer.evaluation.test.ts
@@ -0,0 +1,127 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { DeclarativeComponentRenderer } from '@/lib/rendering/declarative-component-renderer'
+
+describe('declarative-component-renderer evaluation', () => {
+  let renderer: DeclarativeComponentRenderer
+
+  beforeEach(() => {
+    renderer = new DeclarativeComponentRenderer()
+  })
+
+  describe('interpolateValue', () => {
+    it.each([
+      {
+        name: 'simple interpolation',
+        template: 'Hello {name}!',
+        context: { name: 'World' },
+        expected: 'Hello World!',
+      },
+      {
+        name: 'multiple placeholders',
+        template: '{greeting} {name}, welcome to {place}',
+        context: { greeting: 'Hi', name: 'Alice', place: 'Wonderland' },
+        expected: 'Hi Alice, welcome to Wonderland',
+      },
+      {
+        name: 'missing placeholder',
+        template: 'Hello {name}, age: {age}',
+        context: { name: 'Bob' },
+        expected: 'Hello Bob, age: {age}',
+      },
+      {
+        name: 'numeric value',
+        template: 'Count: {count}',
+        context: { count: 42 },
+        expected: 'Count: 42',
+      },
+      {
+        name: 'boolean value',
+        template: 'Active: {active}',
+        context: { active: true },
+        expected: 'Active: true',
+      },
+      {
+        name: 'empty template',
+        template: '',
+        context: { name: 'test' },
+        expected: '',
+      },
+      {
+        name: 'no placeholders',
+        template: 'Plain text',
+        context: { name: 'ignored' },
+        expected: 'Plain text',
+      },
+      {
+        name: 'null template',
+        template: null as any,
+        context: { name: 'test' },
+        expected: null,
+      },
+      {
+        name: 'undefined value in context',
+        template: 'Value: {val}',
+        context: { val: undefined },
+        expected: 'Value: {val}',
+      },
+    ])('should handle $name', ({ template, context, expected }) => {
+      expect(renderer.interpolateValue(template, context)).toBe(expected)
+    })
+  })
+
+  describe('evaluateConditional', () => {
+    it.each([
+      { name: 'boolean true', condition: true, context: {}, expected: true },
+      { name: 'boolean false', condition: false, context: {}, expected: false },
+      { name: 'empty string condition', condition: '', context: {}, expected: true },
+      { name: 'null condition', condition: null as any, context: {}, expected: true },
+      { name: 'undefined condition', condition: undefined as any, context: {}, expected: true },
+      { name: 'truthy context value', condition: 'isActive', context: { isActive: true }, expected: true },
+      { name: 'falsy context value', condition: 'isActive', context: { isActive: false }, expected: false },
+      { name: 'missing context key', condition: 'missing', context: {}, expected: false },
+      { name: 'truthy string value', condition: 'name', context: { name: 'test' }, expected: true },
+      { name: 'empty string value', condition: 'name', context: { name: '' }, expected: false },
+      { name: 'zero value', condition: 'count', context: { count: 0 }, expected: false },
+      { name: 'positive number', condition: 'count', context: { count: 5 }, expected: true },
+    ])('should return $expected for $name', ({ condition, context, expected }) => {
+      expect(renderer.evaluateConditional(condition, context)).toBe(expected)
+    })
+  })
+
+  describe('resolveDataSource', () => {
+    it.each([
+      {
+        name: 'existing array data source',
+        dataSource: 'items',
+        context: { items: [1, 2, 3] },
+        expected: [1, 2, 3],
+      },
+      {
+        name: 'empty array data source',
+        dataSource: 'items',
+        context: { items: [] },
+        expected: [],
+      },
+      {
+        name: 'missing data source',
+        dataSource: 'missing',
+        context: {},
+        expected: [],
+      },
+      {
+        name: 'null data source key',
+        dataSource: '',
+        context: { items: [1] },
+        expected: [],
+      },
+      {
+        name: 'object array data source',
+        dataSource: 'users',
+        context: { users: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] },
+        expected: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
+      },
+    ])('should resolve $name', ({ dataSource, context, expected }) => {
+      expect(renderer.resolveDataSource(dataSource, context)).toEqual(expected)
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/rendering/tests/declarative-component-renderer.lifecycle.test.ts b/frontends/nextjs/src/lib/rendering/tests/declarative-component-renderer.lifecycle.test.ts
new file mode 100644
index 000000000..05f80594d
--- /dev/null
+++ b/frontends/nextjs/src/lib/rendering/tests/declarative-component-renderer.lifecycle.test.ts
@@ -0,0 +1,183 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import {
+  DeclarativeComponentRenderer,
+  getDeclarativeRenderer,
+  loadPackageComponents,
+  type DeclarativeComponentConfig,
+} from '@/lib/rendering/declarative-component-renderer'
+
+describe('declarative-component-renderer lifecycle', () => {
+  let renderer: DeclarativeComponentRenderer
+
+  beforeEach(() => {
+    renderer = new DeclarativeComponentRenderer()
+  })
+
+  describe('registerComponentConfig', () => {
+    it.each([
+      {
+        name: 'basic component',
+        type: 'button',
+        config: {
+          type: 'button',
+          category: 'input',
+          label: 'Button',
+          description: 'A clickable button',
+          icon: 'click',
+          props: [],
+          config: { layout: 'inline', styling: { className: 'btn' }, children: [] },
+        },
+      },
+      {
+        name: 'component with props',
+        type: 'input',
+        config: {
+          type: 'input',
+          category: 'form',
+          label: 'Input Field',
+          description: 'Text input',
+          icon: 'text',
+          props: [
+            { name: 'placeholder', type: 'string', label: 'Placeholder', required: false },
+            { name: 'value', type: 'string', label: 'Value', required: true, defaultValue: '' },
+          ],
+          config: { layout: 'block', styling: { className: 'input' }, children: [] },
+        },
+      },
+    ])('should register $name', ({ type, config }) => {
+      renderer.registerComponentConfig(type, config as DeclarativeComponentConfig)
+
+      expect(renderer.hasComponentConfig(type)).toBe(true)
+      expect(renderer.getComponentConfig(type)).toEqual(config)
+    })
+  })
+
+  describe('hasComponentConfig', () => {
+    it.each([
+      { type: 'registered', shouldRegister: true, expected: true },
+      { type: 'unregistered', shouldRegister: false, expected: false },
+    ])('should return $expected for $type component', ({ type, shouldRegister, expected }) => {
+      if (shouldRegister) {
+        renderer.registerComponentConfig(type, {
+          type,
+          category: 'test',
+          label: 'Test',
+          description: '',
+          icon: '',
+          props: [],
+          config: { layout: '', styling: { className: '' }, children: [] },
+        })
+      }
+
+      expect(renderer.hasComponentConfig(type)).toBe(expected)
+    })
+  })
+
+  describe('getComponentConfig', () => {
+    it('should return undefined for non-existent component', () => {
+      expect(renderer.getComponentConfig('nonexistent')).toBeUndefined()
+    })
+
+    it('should return config for registered component', () => {
+      const config: DeclarativeComponentConfig = {
+        type: 'test',
+        category: 'test',
+        label: 'Test Component',
+        description: 'A test',
+        icon: 'test',
+        props: [],
+        config: { layout: 'block', styling: { className: 'test' }, children: [] },
+      }
+      renderer.registerComponentConfig('test', config)
+
+      expect(renderer.getComponentConfig('test')).toEqual(config)
+    })
+  })
+
+  describe('getDeclarativeRenderer', () => {
+    it('should return a global renderer instance', () => {
+      const renderer1 = getDeclarativeRenderer()
+      const renderer2 = getDeclarativeRenderer()
+
+      expect(renderer1).toBe(renderer2)
+      expect(renderer1).toBeInstanceOf(DeclarativeComponentRenderer)
+    })
+  })
+
+  describe('loadPackageComponents', () => {
+    it('should load component configs from package', () => {
+      const renderer = getDeclarativeRenderer()
+      const testType = `loadTest_${Date.now()}`
+
+      loadPackageComponents({
+        componentConfigs: {
+          [testType]: {
+            type: testType,
+            category: 'test',
+            label: 'Loaded Component',
+            description: 'Loaded from package',
+            icon: 'package',
+            props: [],
+            config: { layout: 'block', styling: { className: 'loaded' }, children: [] },
+          },
+        },
+      })
+
+      expect(renderer.hasComponentConfig(testType)).toBe(true)
+    })
+
+    it('should load Lua scripts from package', () => {
+      const luaExecuteSpy = vi.spyOn(DeclarativeComponentRenderer.prototype as any, 'executeLuaScript')
+
+      loadPackageComponents({
+        luaScripts: [
+          {
+            id: `pkgScript_${Date.now()}`,
+            code: 'function formatTime() return 1 end',
+            parameters: [],
+            returnType: 'number',
+          },
+        ],
+      })
+
+      expect(luaExecuteSpy).not.toHaveBeenCalled()
+    })
+
+    it('should handle empty package content', () => {
+      loadPackageComponents({})
+      loadPackageComponents({ componentConfigs: {} })
+      loadPackageComponents({ luaScripts: [] })
+
+      expect(true).toBe(true)
+    })
+
+    it('should handle package with both configs and scripts', () => {
+      const renderer = getDeclarativeRenderer()
+      const uniqueId = Date.now()
+
+      loadPackageComponents({
+        componentConfigs: {
+          [`combo_${uniqueId}`]: {
+            type: `combo_${uniqueId}`,
+            category: 'combo',
+            label: 'Combo',
+            description: 'Combined',
+            icon: 'combo',
+            props: [],
+            config: { layout: 'flex', styling: { className: 'combo' }, children: [] },
+          },
+        },
+        luaScripts: [
+          {
+            id: `comboScript_${uniqueId}`,
+            code: 'function userJoin(name) return "Welcome " .. name end',
+            parameters: [{ name: 'name' }],
+            returnType: 'string',
+          },
+        ],
+      })
+
+      expect(renderer.hasComponentConfig(`combo_${uniqueId}`)).toBe(true)
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/rendering/tests/declarative-component-renderer.lua.test.ts b/frontends/nextjs/src/lib/rendering/tests/declarative-component-renderer.lua.test.ts
new file mode 100644
index 000000000..378a55af5
--- /dev/null
+++ b/frontends/nextjs/src/lib/rendering/tests/declarative-component-renderer.lua.test.ts
@@ -0,0 +1,61 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { DeclarativeComponentRenderer } from '@/lib/rendering/declarative-component-renderer'
+
+describe('declarative-component-renderer lua integration', () => {
+  let renderer: DeclarativeComponentRenderer
+
+  beforeEach(() => {
+    renderer = new DeclarativeComponentRenderer()
+  })
+
+  describe('registerLuaScript', () => {
+    it('should register and store Lua scripts', () => {
+      const script = {
+        code: 'return x + y',
+        parameters: [{ name: 'x' }, { name: 'y' }],
+        returnType: 'number',
+      }
+      renderer.registerLuaScript('add', script)
+
+      expect(renderer.executeLuaScript('add', [1, 2])).resolves.toBeDefined()
+    })
+  })
+
+  describe('executeLuaScript', () => {
+    it('should throw error for non-existent script', async () => {
+      await expect(renderer.executeLuaScript('nonexistent', [])).rejects.toThrow(
+        'Lua script not found: nonexistent'
+      )
+    })
+
+    it('should execute script with parameters', async () => {
+      renderer.registerLuaScript('testScript', {
+        code: `
+function formatTime(timestamp)
+  return timestamp * 1000
+end
+`,
+        parameters: [{ name: 'timestamp' }],
+        returnType: 'number',
+      })
+
+      const result = await renderer.executeLuaScript('testScript', [5])
+      expect(result).toBe(5000)
+    })
+
+    it('should handle script with no parameters', async () => {
+      renderer.registerLuaScript('constantScript', {
+        code: `
+function formatTime()
+  return 42
+end
+`,
+        parameters: [],
+        returnType: 'number',
+      })
+
+      const result = await renderer.executeLuaScript('constantScript', [])
+      expect(result).toBe(42)
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/rendering/tests/declarative-component-renderer.test.ts b/frontends/nextjs/src/lib/rendering/tests/declarative-component-renderer.test.ts
deleted file mode 100644
index a46bb5bde..000000000
--- a/frontends/nextjs/src/lib/rendering/tests/declarative-component-renderer.test.ts
+++ /dev/null
@@ -1,355 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import {
-  DeclarativeComponentRenderer,
-  getDeclarativeRenderer,
-  loadPackageComponents,
-  type DeclarativeComponentConfig,
-} from './declarative-component-renderer'
-
-describe('declarative-component-renderer', () => {
-  let renderer: DeclarativeComponentRenderer
-
-  beforeEach(() => {
-    renderer = new DeclarativeComponentRenderer()
-  })
-
-  describe('DeclarativeComponentRenderer', () => {
-    describe('registerComponentConfig', () => {
-      it.each([
-        {
-          name: 'basic component',
-          type: 'button',
-          config: {
-            type: 'button',
-            category: 'input',
-            label: 'Button',
-            description: 'A clickable button',
-            icon: 'click',
-            props: [],
-            config: { layout: 'inline', styling: { className: 'btn' }, children: [] },
-          },
-        },
-        {
-          name: 'component with props',
-          type: 'input',
-          config: {
-            type: 'input',
-            category: 'form',
-            label: 'Input Field',
-            description: 'Text input',
-            icon: 'text',
-            props: [
-              { name: 'placeholder', type: 'string', label: 'Placeholder', required: false },
-              { name: 'value', type: 'string', label: 'Value', required: true, defaultValue: '' },
-            ],
-            config: { layout: 'block', styling: { className: 'input' }, children: [] },
-          },
-        },
-      ])('should register $name', ({ type, config }) => {
-        renderer.registerComponentConfig(type, config as DeclarativeComponentConfig)
-
-        expect(renderer.hasComponentConfig(type)).toBe(true)
-        expect(renderer.getComponentConfig(type)).toEqual(config)
-      })
-    })
-
-    describe('hasComponentConfig', () => {
-      it.each([
-        { type: 'registered', shouldRegister: true, expected: true },
-        { type: 'unregistered', shouldRegister: false, expected: false },
-      ])('should return $expected for $type component', ({ type, shouldRegister, expected }) => {
-        if (shouldRegister) {
-          renderer.registerComponentConfig(type, {
-            type,
-            category: 'test',
-            label: 'Test',
-            description: '',
-            icon: '',
-            props: [],
-            config: { layout: '', styling: { className: '' }, children: [] },
-          })
-        }
-
-        expect(renderer.hasComponentConfig(type)).toBe(expected)
-      })
-    })
-
-    describe('getComponentConfig', () => {
-      it('should return undefined for non-existent component', () => {
-        expect(renderer.getComponentConfig('nonexistent')).toBeUndefined()
-      })
-
-      it('should return config for registered component', () => {
-        const config: DeclarativeComponentConfig = {
-          type: 'test',
-          category: 'test',
-          label: 'Test Component',
-          description: 'A test',
-          icon: 'test',
-          props: [],
-          config: { layout: 'block', styling: { className: 'test' }, children: [] },
-        }
-        renderer.registerComponentConfig('test', config)
-
-        expect(renderer.getComponentConfig('test')).toEqual(config)
-      })
-    })
-
-    describe('interpolateValue', () => {
-      it.each([
-        {
-          name: 'simple interpolation',
-          template: 'Hello {name}!',
-          context: { name: 'World' },
-          expected: 'Hello World!',
-        },
-        {
-          name: 'multiple placeholders',
-          template: '{greeting} {name}, welcome to {place}',
-          context: { greeting: 'Hi', name: 'Alice', place: 'Wonderland' },
-          expected: 'Hi Alice, welcome to Wonderland',
-        },
-        {
-          name: 'missing placeholder',
-          template: 'Hello {name}, age: {age}',
-          context: { name: 'Bob' },
-          expected: 'Hello Bob, age: {age}',
-        },
-        {
-          name: 'numeric value',
-          template: 'Count: {count}',
-          context: { count: 42 },
-          expected: 'Count: 42',
-        },
-        {
-          name: 'boolean value',
-          template: 'Active: {active}',
-          context: { active: true },
-          expected: 'Active: true',
-        },
-        {
-          name: 'empty template',
-          template: '',
-          context: { name: 'test' },
-          expected: '',
-        },
-        {
-          name: 'no placeholders',
-          template: 'Plain text',
-          context: { name: 'ignored' },
-          expected: 'Plain text',
-        },
-        {
-          name: 'null template',
-          template: null as any,
-          context: { name: 'test' },
-          expected: null,
-        },
-        {
-          name: 'undefined value in context',
-          template: 'Value: {val}',
-          context: { val: undefined },
-          expected: 'Value: {val}',
-        },
-      ])('should handle $name', ({ template, context, expected }) => {
-        expect(renderer.interpolateValue(template, context)).toBe(expected)
-      })
-    })
-
-    describe('evaluateConditional', () => {
-      it.each([
-        { name: 'boolean true', condition: true, context: {}, expected: true },
-        { name: 'boolean false', condition: false, context: {}, expected: false },
-        { name: 'empty string condition', condition: '', context: {}, expected: true },
-        { name: 'null condition', condition: null as any, context: {}, expected: true },
-        { name: 'undefined condition', condition: undefined as any, context: {}, expected: true },
-        { name: 'truthy context value', condition: 'isActive', context: { isActive: true }, expected: true },
-        { name: 'falsy context value', condition: 'isActive', context: { isActive: false }, expected: false },
-        { name: 'missing context key', condition: 'missing', context: {}, expected: false },
-        { name: 'truthy string value', condition: 'name', context: { name: 'test' }, expected: true },
-        { name: 'empty string value', condition: 'name', context: { name: '' }, expected: false },
-        { name: 'zero value', condition: 'count', context: { count: 0 }, expected: false },
-        { name: 'positive number', condition: 'count', context: { count: 5 }, expected: true },
-      ])('should return $expected for $name', ({ condition, context, expected }) => {
-        expect(renderer.evaluateConditional(condition, context)).toBe(expected)
-      })
-    })
-
-    describe('resolveDataSource', () => {
-      it.each([
-        {
-          name: 'existing array data source',
-          dataSource: 'items',
-          context: { items: [1, 2, 3] },
-          expected: [1, 2, 3],
-        },
-        {
-          name: 'empty array data source',
-          dataSource: 'items',
-          context: { items: [] },
-          expected: [],
-        },
-        {
-          name: 'missing data source',
-          dataSource: 'missing',
-          context: {},
-          expected: [],
-        },
-        {
-          name: 'null data source key',
-          dataSource: '',
-          context: { items: [1] },
-          expected: [],
-        },
-        {
-          name: 'object array data source',
-          dataSource: 'users',
-          context: { users: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }] },
-          expected: [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }],
-        },
-      ])('should resolve $name', ({ dataSource, context, expected }) => {
-        expect(renderer.resolveDataSource(dataSource, context)).toEqual(expected)
-      })
-    })
-
-    describe('registerLuaScript', () => {
-      it('should register and store Lua scripts', () => {
-        const script = {
-          code: 'return x + y',
-          parameters: [{ name: 'x' }, { name: 'y' }],
-          returnType: 'number',
-        }
-        renderer.registerLuaScript('add', script)
-
-        // Verify registration by attempting to execute
-        // The script is stored internally
-        expect(true).toBe(true) // Script registered without error
-      })
-    })
-
-    describe('executeLuaScript', () => {
-      it('should throw error for non-existent script', async () => {
-        await expect(renderer.executeLuaScript('nonexistent', [])).rejects.toThrow(
-          'Lua script not found: nonexistent'
-        )
-      })
-
-      it('should execute script with parameters', async () => {
-        renderer.registerLuaScript('testScript', {
-          code: `
-function formatTime(timestamp)
-  return timestamp * 1000
-end
-`,
-          parameters: [{ name: 'timestamp' }],
-          returnType: 'number',
-        })
-
-        const result = await renderer.executeLuaScript('testScript', [5])
-        expect(result).toBe(5000)
-      })
-
-      it('should handle script with no parameters', async () => {
-        renderer.registerLuaScript('constantScript', {
-          code: `
-function formatTime()
-  return 42
-end
-`,
-          parameters: [],
-          returnType: 'number',
-        })
-
-        const result = await renderer.executeLuaScript('constantScript', [])
-        expect(result).toBe(42)
-      })
-    })
-  })
-
-  describe('getDeclarativeRenderer', () => {
-    it('should return a global renderer instance', () => {
-      const renderer1 = getDeclarativeRenderer()
-      const renderer2 = getDeclarativeRenderer()
-
-      expect(renderer1).toBe(renderer2)
-      expect(renderer1).toBeInstanceOf(DeclarativeComponentRenderer)
-    })
-  })
-
-  describe('loadPackageComponents', () => {
-    it('should load component configs from package', () => {
-      const renderer = getDeclarativeRenderer()
-      const testType = `loadTest_${Date.now()}`
-
-      loadPackageComponents({
-        componentConfigs: {
-          [testType]: {
-            type: testType,
-            category: 'test',
-            label: 'Loaded Component',
-            description: 'Loaded from package',
-            icon: 'package',
-            props: [],
-            config: { layout: 'block', styling: { className: 'loaded' }, children: [] },
-          },
-        },
-      })
-
-      expect(renderer.hasComponentConfig(testType)).toBe(true)
-    })
-
-    it('should load Lua scripts from package', () => {
-      loadPackageComponents({
-        luaScripts: [
-          {
-            id: `pkgScript_${Date.now()}`,
-            code: 'function formatTime() return 1 end',
-            parameters: [],
-            returnType: 'number',
-          },
-        ],
-      })
-
-      // Script loaded without error
-      expect(true).toBe(true)
-    })
-
-    it('should handle empty package content', () => {
-      // Should not throw
-      loadPackageComponents({})
-      loadPackageComponents({ componentConfigs: {} })
-      loadPackageComponents({ luaScripts: [] })
-
-      expect(true).toBe(true)
-    })
-
-    it('should handle package with both configs and scripts', () => {
-      const renderer = getDeclarativeRenderer()
-      const uniqueId = Date.now()
-
-      loadPackageComponents({
-        componentConfigs: {
-          [`combo_${uniqueId}`]: {
-            type: `combo_${uniqueId}`,
-            category: 'combo',
-            label: 'Combo',
-            description: 'Combined',
-            icon: 'combo',
-            props: [],
-            config: { layout: 'flex', styling: { className: 'combo' }, children: [] },
-          },
-        },
-        luaScripts: [
-          {
-            id: `comboScript_${uniqueId}`,
-            code: 'function userJoin(name) return "Welcome " .. name end',
-            parameters: [{ name: 'name' }],
-            returnType: 'string',
-          },
-        ],
-      })
-
-      expect(renderer.hasComponentConfig(`combo_${uniqueId}`)).toBe(true)
-    })
-  })
-})
diff --git a/frontends/nextjs/src/lib/rendering/tests/page-renderer.layout.test.ts b/frontends/nextjs/src/lib/rendering/tests/page-renderer.layout.test.ts
new file mode 100644
index 000000000..ad2047c0a
--- /dev/null
+++ b/frontends/nextjs/src/lib/rendering/tests/page-renderer.layout.test.ts
@@ -0,0 +1,55 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { PageRenderer } from '@/lib/rendering/page/page-renderer'
+import { createMockPage } from '@/lib/rendering/page/utils'
+
+const { Database, MockLuaEngine } = vi.hoisted(() => {
+  class MockLuaEngine {
+    execute = vi.fn()
+  }
+  return {
+    Database: {
+      getPages: vi.fn(),
+      addPage: vi.fn(),
+      getLuaScripts: vi.fn(),
+    },
+    MockLuaEngine,
+  }
+})
+
+vi.mock('@/lib/database', () => ({ Database }))
+vi.mock('@/lib/lua-engine', () => ({ LuaEngine: MockLuaEngine }))
+
+describe('page-renderer layout queries', () => {
+  let renderer: PageRenderer
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    renderer = new PageRenderer()
+    Database.getPages.mockResolvedValue([])
+    Database.addPage.mockResolvedValue(undefined)
+    Database.getLuaScripts.mockResolvedValue([])
+  })
+
+  describe('getPagesByLevel', () => {
+    it('should filter pages by level', async () => {
+      await renderer.registerPage(createMockPage('p1', { level: 1 }))
+      await renderer.registerPage(createMockPage('p2', { level: 2 }))
+      await renderer.registerPage(createMockPage('p3', { level: 2 }))
+      await renderer.registerPage(createMockPage('p4', { level: 3 }))
+
+      const level2Pages = renderer.getPagesByLevel(2)
+
+      expect(level2Pages).toHaveLength(2)
+      expect(level2Pages.map(p => p.id)).toContain('p2')
+      expect(level2Pages.map(p => p.id)).toContain('p3')
+    })
+
+    it('should return empty array for level with no pages', async () => {
+      await renderer.registerPage(createMockPage('p1', { level: 1 }))
+
+      const level5Pages = renderer.getPagesByLevel(5)
+
+      expect(level5Pages).toHaveLength(0)
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/rendering/tests/page-renderer.lifecycle.test.ts b/frontends/nextjs/src/lib/rendering/tests/page-renderer.lifecycle.test.ts
new file mode 100644
index 000000000..24d15e036
--- /dev/null
+++ b/frontends/nextjs/src/lib/rendering/tests/page-renderer.lifecycle.test.ts
@@ -0,0 +1,138 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { getPageRenderer, PageRenderer } from '@/lib/rendering/page/page-renderer'
+import { createMockPage } from '@/lib/rendering/page/utils'
+
+const { Database, MockLuaEngine } = vi.hoisted(() => {
+  class MockLuaEngine {
+    execute = vi.fn()
+  }
+  return {
+    Database: {
+      getPages: vi.fn(),
+      addPage: vi.fn(),
+      getLuaScripts: vi.fn(),
+    },
+    MockLuaEngine,
+  }
+})
+
+vi.mock('@/lib/database', () => ({ Database }))
+vi.mock('@/lib/lua-engine', () => ({ LuaEngine: MockLuaEngine }))
+
+describe('page-renderer lifecycle', () => {
+  let renderer: PageRenderer
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    renderer = new PageRenderer()
+    Database.getPages.mockResolvedValue([])
+    Database.addPage.mockResolvedValue(undefined)
+    Database.getLuaScripts.mockResolvedValue([])
+  })
+
+  describe('registerPage', () => {
+    it('should register a page and add to database', async () => {
+      const page = createMockPage('test-page', { title: 'Test Page' })
+
+      await renderer.registerPage(page)
+
+      expect(Database.addPage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: 'test-page',
+          title: 'Test Page',
+        })
+      )
+      expect(renderer.getPage('test-page')).toEqual(page)
+    })
+
+    it('should handle pages with permissions', async () => {
+      const page = createMockPage('auth-page', {
+        permissions: {
+          requiresAuth: true,
+          requiredRole: 'admin',
+        },
+      })
+
+      await renderer.registerPage(page)
+
+      expect(Database.addPage).toHaveBeenCalledWith(
+        expect.objectContaining({
+          requiresAuth: true,
+          requiredRole: 'admin',
+        })
+      )
+    })
+  })
+
+  describe('loadPages', () => {
+    it('should load pages from database', async () => {
+      Database.getPages.mockResolvedValue([
+        {
+          id: 'page1',
+          title: 'Page 1',
+          level: 2,
+          componentTree: [],
+          requiresAuth: false,
+        },
+        {
+          id: 'page2',
+          title: 'Page 2',
+          level: 3,
+          componentTree: [{ id: 'c1', type: 'text' }],
+          requiresAuth: true,
+          requiredRole: 'admin',
+        },
+      ])
+
+      await renderer.loadPages()
+
+      expect(renderer.getPage('page1')).toBeDefined()
+      expect(renderer.getPage('page2')).toBeDefined()
+      expect(renderer.getPage('page1')?.title).toBe('Page 1')
+      expect(renderer.getPage('page2')?.permissions?.requiresAuth).toBe(true)
+    })
+
+    it('should handle empty database', async () => {
+      Database.getPages.mockResolvedValue([])
+
+      await renderer.loadPages()
+
+      expect(renderer.getPage('nonexistent')).toBeUndefined()
+    })
+  })
+
+  describe('getPage', () => {
+    it.each([
+      {
+        name: 'returns page when exists',
+        pageId: 'existing',
+        expectFound: true,
+      },
+      {
+        name: 'returns undefined when not exists',
+        pageId: 'nonexistent',
+        expectFound: false,
+      },
+    ])('should handle $name', async ({ pageId, expectFound }) => {
+      await renderer.registerPage(createMockPage('existing'))
+
+      const result = renderer.getPage(pageId)
+
+      if (expectFound) {
+        expect(result).toBeDefined()
+        expect(result?.id).toBe(pageId)
+      } else {
+        expect(result).toBeUndefined()
+      }
+    })
+  })
+
+  describe('getPageRenderer singleton', () => {
+    it('should return the same instance', () => {
+      const instance1 = getPageRenderer()
+      const instance2 = getPageRenderer()
+
+      expect(instance1).toBe(instance2)
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/rendering/tests/page-renderer.permissions.test.ts b/frontends/nextjs/src/lib/rendering/tests/page-renderer.permissions.test.ts
new file mode 100644
index 000000000..68c87b172
--- /dev/null
+++ b/frontends/nextjs/src/lib/rendering/tests/page-renderer.permissions.test.ts
@@ -0,0 +1,100 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { PageRenderer, type PageDefinition } from '@/lib/rendering/page/page-renderer'
+import { createMockPage, createMockUser } from '@/lib/rendering/page/utils'
+
+const { Database, MockLuaEngine } = vi.hoisted(() => {
+  class MockLuaEngine {
+    execute = vi.fn()
+  }
+  return {
+    Database: {
+      getPages: vi.fn(),
+      addPage: vi.fn(),
+      getLuaScripts: vi.fn(),
+    },
+    MockLuaEngine,
+  }
+})
+
+vi.mock('@/lib/database', () => ({ Database }))
+vi.mock('@/lib/lua-engine', () => ({ LuaEngine: MockLuaEngine }))
+
+describe('page-renderer permissions', () => {
+  let renderer: PageRenderer
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    renderer = new PageRenderer()
+    Database.getPages.mockResolvedValue([])
+    Database.addPage.mockResolvedValue(undefined)
+    Database.getLuaScripts.mockResolvedValue([])
+  })
+
+  describe('checkPermissions', () => {
+    it.each([
+      {
+        name: 'allows when no permissions defined',
+        page: createMockPage('open'),
+        user: null,
+        expectedAllowed: true,
+      },
+      {
+        name: 'blocks unauthenticated user when auth required',
+        page: createMockPage('auth', {
+          permissions: { requiresAuth: true },
+        }),
+        user: null,
+        expectedAllowed: false,
+        expectedReason: 'Authentication required',
+      },
+      {
+        name: 'allows authenticated user when auth required',
+        page: createMockPage('auth', {
+          permissions: { requiresAuth: true },
+        }),
+        user: createMockUser('user'),
+        expectedAllowed: true,
+      },
+      {
+        name: 'blocks user with insufficient role',
+        page: createMockPage('admin', {
+          permissions: { requiresAuth: true, requiredRole: 'admin' },
+        }),
+        user: createMockUser('user'),
+        expectedAllowed: false,
+        expectedReason: 'Insufficient permissions',
+      },
+      {
+        name: 'allows user with sufficient role',
+        page: createMockPage('admin', {
+          permissions: { requiresAuth: true, requiredRole: 'admin' },
+        }),
+        user: createMockUser('admin'),
+        expectedAllowed: true,
+      },
+      {
+        name: 'allows god role for admin page',
+        page: createMockPage('admin', {
+          permissions: { requiresAuth: true, requiredRole: 'admin' },
+        }),
+        user: createMockUser('god'),
+        expectedAllowed: true,
+      },
+      {
+        name: 'allows supergod role for god page',
+        page: createMockPage('god', {
+          permissions: { requiresAuth: true, requiredRole: 'god' },
+        }),
+        user: createMockUser('supergod'),
+        expectedAllowed: true,
+      },
+    ])('should handle $name', async ({ page, user, expectedAllowed, expectedReason }) => {
+      const result = await renderer.checkPermissions(page as PageDefinition, user)
+
+      expect(result.allowed).toBe(expectedAllowed)
+      if (expectedReason) {
+        expect(result.reason).toBe(expectedReason)
+      }
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/rendering/tests/page-renderer.test.ts b/frontends/nextjs/src/lib/rendering/tests/page-renderer.test.ts
deleted file mode 100644
index 562b2dc3d..000000000
--- a/frontends/nextjs/src/lib/rendering/tests/page-renderer.test.ts
+++ /dev/null
@@ -1,265 +0,0 @@
-/**
- * Tests for page-renderer.ts - Page rendering and permission checking
- * Following parameterized test pattern per project conventions
- */
-
-import { describe, it, expect, beforeEach, vi } from 'vitest'
-import type { PageDefinition } from './page-renderer'
-import type { User, UserRole } from '../types/level-types'
-
-// Mock Database
-const { Database, MockLuaEngine } = vi.hoisted(() => {
-  class MockLuaEngine {
-    execute = vi.fn()
-  }
-  return {
-    Database: {
-      getPages: vi.fn(),
-      addPage: vi.fn(),
-      getLuaScripts: vi.fn(),
-    },
-    MockLuaEngine,
-  }
-})
-
-vi.mock('../database', () => ({ Database }))
-vi.mock('../lua-engine', () => ({ LuaEngine: MockLuaEngine }))
-
-import { PageRenderer, getPageRenderer } from './page-renderer'
-
-// Helper to create mock page definitions
-function createMockPage(
-  id: string,
-  options: Partial<PageDefinition> = {}
-): PageDefinition {
-  return {
-    id,
-    level: options.level ?? 1,
-    title: options.title ?? `Page ${id}`,
-    layout: options.layout ?? 'default',
-    components: options.components ?? [],
-    permissions: options.permissions,
-    luaScripts: options.luaScripts,
-    metadata: options.metadata,
-  }
-}
-
-// Helper to create mock users
-function createMockUser(role: string, id = 'user1'): User {
-  return {
-    id,
-    username: `User ${id}`,
-    role: role as UserRole,
-    email: `${id}@test.com`,
-    createdAt: Date.now(),
-  }
-}
-
-describe('page-renderer', () => {
-  let renderer: PageRenderer
-
-  beforeEach(() => {
-    vi.clearAllMocks()
-    renderer = new PageRenderer()
-    Database.getPages.mockResolvedValue([])
-    Database.addPage.mockResolvedValue(undefined)
-    Database.getLuaScripts.mockResolvedValue([])
-  })
-
-  describe('registerPage', () => {
-    it('should register a page and add to database', async () => {
-      const page = createMockPage('test-page', { title: 'Test Page' })
-
-      await renderer.registerPage(page)
-
-      expect(Database.addPage).toHaveBeenCalledWith(
-        expect.objectContaining({
-          id: 'test-page',
-          title: 'Test Page',
-        })
-      )
-      expect(renderer.getPage('test-page')).toEqual(page)
-    })
-
-    it('should handle pages with permissions', async () => {
-      const page = createMockPage('auth-page', {
-        permissions: {
-          requiresAuth: true,
-          requiredRole: 'admin',
-        },
-      })
-
-      await renderer.registerPage(page)
-
-      expect(Database.addPage).toHaveBeenCalledWith(
-        expect.objectContaining({
-          requiresAuth: true,
-          requiredRole: 'admin',
-        })
-      )
-    })
-  })
-
-  describe('loadPages', () => {
-    it('should load pages from database', async () => {
-      Database.getPages.mockResolvedValue([
-        {
-          id: 'page1',
-          title: 'Page 1',
-          level: 2,
-          componentTree: [],
-          requiresAuth: false,
-        },
-        {
-          id: 'page2',
-          title: 'Page 2',
-          level: 3,
-          componentTree: [{ id: 'c1', type: 'text' }],
-          requiresAuth: true,
-          requiredRole: 'admin',
-        },
-      ])
-
-      await renderer.loadPages()
-
-      expect(renderer.getPage('page1')).toBeDefined()
-      expect(renderer.getPage('page2')).toBeDefined()
-      expect(renderer.getPage('page1')?.title).toBe('Page 1')
-      expect(renderer.getPage('page2')?.permissions?.requiresAuth).toBe(true)
-    })
-
-    it('should handle empty database', async () => {
-      Database.getPages.mockResolvedValue([])
-
-      await renderer.loadPages()
-
-      expect(renderer.getPage('nonexistent')).toBeUndefined()
-    })
-  })
-
-  describe('getPage', () => {
-    it.each([
-      {
-        name: 'returns page when exists',
-        pageId: 'existing',
-        expectFound: true,
-      },
-      {
-        name: 'returns undefined when not exists',
-        pageId: 'nonexistent',
-        expectFound: false,
-      },
-    ])('should handle $name', async ({ pageId, expectFound }) => {
-      await renderer.registerPage(createMockPage('existing'))
-
-      const result = renderer.getPage(pageId)
-
-      if (expectFound) {
-        expect(result).toBeDefined()
-        expect(result?.id).toBe(pageId)
-      } else {
-        expect(result).toBeUndefined()
-      }
-    })
-  })
-
-  describe('getPagesByLevel', () => {
-    it('should filter pages by level', async () => {
-      await renderer.registerPage(createMockPage('p1', { level: 1 }))
-      await renderer.registerPage(createMockPage('p2', { level: 2 }))
-      await renderer.registerPage(createMockPage('p3', { level: 2 }))
-      await renderer.registerPage(createMockPage('p4', { level: 3 }))
-
-      const level2Pages = renderer.getPagesByLevel(2)
-
-      expect(level2Pages).toHaveLength(2)
-      expect(level2Pages.map(p => p.id)).toContain('p2')
-      expect(level2Pages.map(p => p.id)).toContain('p3')
-    })
-
-    it('should return empty array for level with no pages', async () => {
-      await renderer.registerPage(createMockPage('p1', { level: 1 }))
-
-      const level5Pages = renderer.getPagesByLevel(5)
-
-      expect(level5Pages).toHaveLength(0)
-    })
-  })
-
-  describe('checkPermissions', () => {
-    it.each([
-      {
-        name: 'allows when no permissions defined',
-        page: createMockPage('open'),
-        user: null,
-        expectedAllowed: true,
-      },
-      {
-        name: 'blocks unauthenticated user when auth required',
-        page: createMockPage('auth', {
-          permissions: { requiresAuth: true },
-        }),
-        user: null,
-        expectedAllowed: false,
-        expectedReason: 'Authentication required',
-      },
-      {
-        name: 'allows authenticated user when auth required',
-        page: createMockPage('auth', {
-          permissions: { requiresAuth: true },
-        }),
-        user: createMockUser('user'),
-        expectedAllowed: true,
-      },
-      {
-        name: 'blocks user with insufficient role',
-        page: createMockPage('admin', {
-          permissions: { requiresAuth: true, requiredRole: 'admin' },
-        }),
-        user: createMockUser('user'),
-        expectedAllowed: false,
-        expectedReason: 'Insufficient permissions',
-      },
-      {
-        name: 'allows user with sufficient role',
-        page: createMockPage('admin', {
-          permissions: { requiresAuth: true, requiredRole: 'admin' },
-        }),
-        user: createMockUser('admin'),
-        expectedAllowed: true,
-      },
-      {
-        name: 'allows god role for admin page',
-        page: createMockPage('admin', {
-          permissions: { requiresAuth: true, requiredRole: 'admin' },
-        }),
-        user: createMockUser('god'),
-        expectedAllowed: true,
-      },
-      {
-        name: 'allows supergod role for god page',
-        page: createMockPage('god', {
-          permissions: { requiresAuth: true, requiredRole: 'god' },
-        }),
-        user: createMockUser('supergod'),
-        expectedAllowed: true,
-      },
-    ])('should handle $name', async ({ page, user, expectedAllowed, expectedReason }) => {
-      const result = await renderer.checkPermissions(page, user)
-
-      expect(result.allowed).toBe(expectedAllowed)
-      if (expectedReason) {
-        expect(result.reason).toBe(expectedReason)
-      }
-    })
-  })
-
-  describe('getPageRenderer singleton', () => {
-    it('should return the same instance', () => {
-      const instance1 = getPageRenderer()
-      const instance2 = getPageRenderer()
-
-      expect(instance1).toBe(instance2)
-    })
-  })
-})
diff --git a/frontends/nextjs/src/lib/schema-utils.ts b/frontends/nextjs/src/lib/schema-utils.ts
new file mode 100644
index 000000000..a02a1958d
--- /dev/null
+++ b/frontends/nextjs/src/lib/schema-utils.ts
@@ -0,0 +1,3 @@
+// Backward compatibility entry point for schema utilities
+// Prefer importing from '@/lib/schema' but keep legacy path working
+export * from './schema'
diff --git a/frontends/nextjs/src/lib/schema/SchemaUtils.ts b/frontends/nextjs/src/lib/schema/SchemaUtils.ts
index d56780371..bb4693aa2 100644
--- a/frontends/nextjs/src/lib/schema/SchemaUtils.ts
+++ b/frontends/nextjs/src/lib/schema/SchemaUtils.ts
@@ -1,27 +1,27 @@
 import type { FieldSchema, ModelSchema, SchemaConfig } from '@/lib/schema-types'
-
-// Import individual functions (lambdas)
-import { getModelKey } from './functions/get-model-key'
-import { getRecordsKey } from './functions/get-records-key'
-import { findModel } from './functions/find-model'
-import { getFieldLabel } from './functions/get-field-label'
-import { getModelLabel } from './functions/get-model-label'
-import { getModelLabelPlural } from './functions/get-model-label-plural'
-import { getHelpText } from './functions/get-help-text'
-import { generateId } from './functions/generate-id'
-import { validateField } from './functions/validate-field'
-import { validateRecord } from './functions/validate-record'
-import { getDefaultValue } from './functions/get-default-value'
-import { createEmptyRecord } from './functions/create-empty-record'
-import { sortRecords } from './functions/sort-records'
-import { filterRecords } from './functions/filter-records'
+import {
+  createEmptyRecord,
+  findModel,
+  filterRecords,
+  generateId,
+  getDefaultValue,
+  getFieldLabel,
+  getHelpText,
+  getModelKey,
+  getModelLabel,
+  getModelLabelPlural,
+  getRecordsKey,
+  sortRecords,
+  validateField,
+  validateRecord,
+} from './functions'
 
 /**
  * SchemaUtils - Class wrapper for schema utility functions
- * 
+ *
  * This class serves as a container for lambda functions related to schema operations.
  * Each method delegates to an individual function file in the functions/ directory.
- * 
+ *
  * Pattern: "class is container for lambdas"
  * - Each lambda is defined in its own file under functions/
  * - This class wraps them for convenient namespaced access
diff --git a/frontends/nextjs/src/lib/schema/__tests__/schema-utils.fixtures.ts b/frontends/nextjs/src/lib/schema/__tests__/schema-utils.fixtures.ts
new file mode 100644
index 000000000..2eec75544
--- /dev/null
+++ b/frontends/nextjs/src/lib/schema/__tests__/schema-utils.fixtures.ts
@@ -0,0 +1,30 @@
+import type { FieldSchema, ModelSchema, SchemaConfig } from '@/lib/schema-types'
+
+export const createMockField = (): FieldSchema => ({
+  name: 'email',
+  type: 'email',
+  label: 'Email Address',
+  required: true,
+  helpText: 'Enter a valid email',
+})
+
+export const createMockModel = (): ModelSchema => ({
+  name: 'User',
+  label: 'User Account',
+  labelPlural: 'Users',
+  fields: [
+    { name: 'id', type: 'string', required: true },
+    { name: 'name', type: 'string', required: true, label: 'Full Name' },
+    { name: 'email', type: 'email', required: true },
+    { name: 'age', type: 'number' },
+  ],
+})
+
+export const createMockSchema = (): SchemaConfig => ({
+  apps: [
+    {
+      name: 'TestApp',
+      models: [createMockModel()],
+    },
+  ],
+})
diff --git a/frontends/nextjs/src/lib/schema/__tests__/schema-utils.migration.test.ts b/frontends/nextjs/src/lib/schema/__tests__/schema-utils.migration.test.ts
new file mode 100644
index 000000000..b766616f9
--- /dev/null
+++ b/frontends/nextjs/src/lib/schema/__tests__/schema-utils.migration.test.ts
@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest'
+import { findModel, getModelKey, getRecordsKey } from '@/lib/schema-utils'
+import type { SchemaConfig } from '@/lib/schema-types'
+import { createMockSchema } from './schema-utils.fixtures'
+
+describe('schema-utils migration', () => {
+  describe('getModelKey', () => {
+    it.each([
+      { appName: 'MyApp', modelName: 'User', expected: 'MyApp_User' },
+      { appName: 'app-v2', modelName: 'User_Profile', expected: 'app-v2_User_Profile' },
+      { appName: '', modelName: 'Model', expected: '_Model' },
+    ])('should generate key "$expected" for app=$appName, model=$modelName', ({ appName, modelName, expected }) => {
+      const result = getModelKey(appName, modelName)
+      expect(result).toBe(expected)
+    })
+  })
+
+  describe('getRecordsKey', () => {
+    it('should generate a records key with prefix', () => {
+      const result = getRecordsKey('MyApp', 'User')
+      expect(result).toBe('records_MyApp_User')
+    })
+
+    it('should include records prefix', () => {
+      const result = getRecordsKey('app', 'data')
+      expect(result).toMatch(/^records_/)
+    })
+  })
+
+  describe('findModel', () => {
+    it('should find a model by app and model name', () => {
+      const result = findModel(createMockSchema(), 'TestApp', 'User')
+      expect(result).toBeDefined()
+      expect(result?.name).toBe('User')
+    })
+
+    it('should return undefined if app not found', () => {
+      const result = findModel(createMockSchema(), 'NonExistentApp', 'User')
+      expect(result).toBeUndefined()
+    })
+
+    it('should return undefined if model not found in app', () => {
+      const result = findModel(createMockSchema(), 'TestApp', 'NonExistentModel')
+      expect(result).toBeUndefined()
+    })
+
+    it('should handle multiple apps correctly', () => {
+      const multiAppSchema: SchemaConfig = {
+        apps: [
+          { name: 'App1', models: [{ name: 'Model1', fields: [] }] },
+          { name: 'App2', models: [{ name: 'Model2', fields: [] }] },
+        ],
+      }
+      const result = findModel(multiAppSchema, 'App2', 'Model2')
+      expect(result?.name).toBe('Model2')
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/schema/schema-utils.test.ts b/frontends/nextjs/src/lib/schema/__tests__/schema-utils.serialization.test.ts
similarity index 51%
rename from frontends/nextjs/src/lib/schema/schema-utils.test.ts
rename to frontends/nextjs/src/lib/schema/__tests__/schema-utils.serialization.test.ts
index c19c83304..a6264b22f 100644
--- a/frontends/nextjs/src/lib/schema/schema-utils.test.ts
+++ b/frontends/nextjs/src/lib/schema/__tests__/schema-utils.serialization.test.ts
@@ -1,108 +1,22 @@
 import { describe, it, expect, beforeEach } from 'vitest'
 import {
-  getModelKey,
-  getRecordsKey,
-  findModel,
+  createEmptyRecord,
+  filterRecords,
+  generateId,
+  getDefaultValue,
   getFieldLabel,
+  getHelpText,
   getModelLabel,
   getModelLabelPlural,
-  getHelpText,
-  generateId,
-  validateField,
-  validateRecord,
-  getDefaultValue,
-  createEmptyRecord,
   sortRecords,
-  filterRecords,
 } from '@/lib/schema-utils'
-import type { FieldSchema, ModelSchema, SchemaConfig } from '@/lib/schema-types'
-
-describe('schema-utils', () => {
-  // Test data setup
-  const mockField: FieldSchema = {
-    name: 'email',
-    type: 'email',
-    label: 'Email Address',
-    required: true,
-    helpText: 'Enter a valid email',
-  }
-
-  const mockModel: ModelSchema = {
-    name: 'User',
-    label: 'User Account',
-    labelPlural: 'Users',
-    fields: [
-      { name: 'id', type: 'string', required: true },
-      { name: 'name', type: 'string', required: true, label: 'Full Name' },
-      { name: 'email', type: 'email', required: true },
-      { name: 'age', type: 'number' },
-    ],
-  }
-
-  const mockSchema: SchemaConfig = {
-    apps: [
-      {
-        name: 'TestApp',
-        models: [mockModel],
-      },
-    ],
-  }
-
-  describe('getModelKey', () => {
-    it.each([
-      { appName: 'MyApp', modelName: 'User', expected: 'MyApp_User' },
-      { appName: 'app-v2', modelName: 'User_Profile', expected: 'app-v2_User_Profile' },
-      { appName: '', modelName: 'Model', expected: '_Model' },
-    ])('should generate key "$expected" for app=$appName, model=$modelName', ({ appName, modelName, expected }) => {
-      const result = getModelKey(appName, modelName)
-      expect(result).toBe(expected)
-    })
-  })
-
-  describe('getRecordsKey', () => {
-    it('should generate a records key with prefix', () => {
-      const result = getRecordsKey('MyApp', 'User')
-      expect(result).toBe('records_MyApp_User')
-    })
-
-    it('should include records prefix', () => {
-      const result = getRecordsKey('app', 'data')
-      expect(result).toMatch(/^records_/)
-    })
-  })
-
-  describe('findModel', () => {
-    it('should find a model by app and model name', () => {
-      const result = findModel(mockSchema, 'TestApp', 'User')
-      expect(result).toBeDefined()
-      expect(result?.name).toBe('User')
-    })
-
-    it('should return undefined if app not found', () => {
-      const result = findModel(mockSchema, 'NonExistentApp', 'User')
-      expect(result).toBeUndefined()
-    })
-
-    it('should return undefined if model not found in app', () => {
-      const result = findModel(mockSchema, 'TestApp', 'NonExistentModel')
-      expect(result).toBeUndefined()
-    })
-
-    it('should handle multiple apps correctly', () => {
-      const multiAppSchema: SchemaConfig = {
-        apps: [
-          { name: 'App1', models: [{ name: 'Model1', fields: [] }] },
-          { name: 'App2', models: [{ name: 'Model2', fields: [] }] },
-        ],
-      }
-      const result = findModel(multiAppSchema, 'App2', 'Model2')
-      expect(result?.name).toBe('Model2')
-    })
-  })
+import type { FieldSchema, ModelSchema } from '@/lib/schema-types'
+import { createMockField, createMockModel } from './schema-utils.fixtures'
 
+describe('schema-utils serialization', () => {
   describe('getFieldLabel', () => {
     it.each([
-      { field: mockField, expected: 'Email Address', description: 'custom label' },
+      { field: createMockField(), expected: 'Email Address', description: 'custom label' },
       { field: { name: 'email', type: 'email' }, expected: 'Email', description: 'auto-capitalized field name' },
       { field: { name: 'firstName', type: 'string' }, expected: 'FirstName', description: 'multi-word field name' },
     ])('should return $description', ({ field, expected }) => {
@@ -113,7 +27,7 @@ describe('schema-utils', () => {
 
   describe('getModelLabel', () => {
     it('should return custom label if provided', () => {
-      const result = getModelLabel(mockModel)
+      const result = getModelLabel(createMockModel())
       expect(result).toBe('User Account')
     })
 
@@ -126,7 +40,7 @@ describe('schema-utils', () => {
 
   describe('getModelLabelPlural', () => {
     it('should return custom plural label if provided', () => {
-      const result = getModelLabelPlural(mockModel)
+      const result = getModelLabelPlural(createMockModel())
       expect(result).toBe('Users')
     })
 
@@ -139,7 +53,7 @@ describe('schema-utils', () => {
 
   describe('getHelpText', () => {
     it('should return help text if string', () => {
-      const result = getHelpText(mockField)
+      const result = getHelpText(createMockField())
       expect(result).toBe('Enter a valid email')
     })
 
@@ -178,135 +92,6 @@ describe('schema-utils', () => {
     })
   })
 
-  describe('validateField', () => {
-    it.each([
-      {
-        name: 'required field empty',
-        field: { name: 'email', type: 'email', required: true },
-        value: '',
-        shouldHaveError: true,
-      },
-      {
-        name: 'non-required field empty',
-        field: { name: 'nickname', type: 'string', required: false },
-        value: '',
-        shouldHaveError: false,
-      },
-      {
-        name: 'invalid email',
-        field: { name: 'email', type: 'email' },
-        value: 'invalid',
-        shouldHaveError: true,
-      },
-      {
-        name: 'valid email',
-        field: { name: 'email', type: 'email' },
-        value: 'test@example.com',
-        shouldHaveError: false,
-      },
-      {
-        name: 'invalid URL',
-        field: { name: 'website', type: 'url' },
-        value: 'not a url',
-        shouldHaveError: true,
-      },
-      {
-        name: 'valid URL',
-        field: { name: 'website', type: 'url' },
-        value: 'https://example.com',
-        shouldHaveError: false,
-      },
-      {
-        name: 'number below min',
-        field: { name: 'age', type: 'number', validation: { min: 0, max: 150 } },
-        value: -1,
-        shouldHaveError: true,
-      },
-      {
-        name: 'number above max',
-        field: { name: 'age', type: 'number', validation: { min: 0, max: 150 } },
-        value: 200,
-        shouldHaveError: true,
-      },
-      {
-        name: 'valid number in range',
-        field: { name: 'age', type: 'number', validation: { min: 0, max: 150 } },
-        value: 25,
-        shouldHaveError: false,
-      },
-      {
-        name: 'string too short',
-        field: { name: 'password', type: 'string', validation: { minLength: 8, maxLength: 20 } },
-        value: 'short',
-        shouldHaveError: true,
-      },
-      {
-        name: 'string too long',
-        field: { name: 'password', type: 'string', validation: { minLength: 8, maxLength: 20 } },
-        value: 'verylongpasswordthatexceedslimit',
-        shouldHaveError: true,
-      },
-      {
-        name: 'valid string length',
-        field: { name: 'password', type: 'string', validation: { minLength: 8, maxLength: 20 } },
-        value: 'goodpass123',
-        shouldHaveError: false,
-      },
-      {
-        name: 'valid pattern match',
-        field: { name: 'code', type: 'string', validation: { pattern: '^[A-Z]{3}-\\d{3}$' } },
-        value: 'ABC-123',
-        shouldHaveError: false,
-      },
-      {
-        name: 'invalid pattern match',
-        field: { name: 'code', type: 'string', validation: { pattern: '^[A-Z]{3}-\\d{3}$' } },
-        value: 'abc-123',
-        shouldHaveError: true,
-      },
-    ])('should $name', ({ field, value, shouldHaveError }) => {
-      const result = validateField(field as FieldSchema, value)
-      if (shouldHaveError) {
-        expect(result).toBeTruthy()
-      } else {
-        expect(result).toBeNull()
-      }
-    })
-  })
-
-  describe('validateRecord', () => {
-    it('should validate all fields in a record', () => {
-      const record = { id: '1', name: 'John', email: 'invalid-email' }
-      const errors = validateRecord(mockModel, record)
-      expect(errors.email).toBeTruthy()
-    })
-
-    it('should return empty errors for valid record', () => {
-      const record = {
-        id: '1',
-        name: 'John Doe',
-        email: 'john@example.com',
-        age: 30,
-      }
-      const errors = validateRecord(mockModel, record)
-      expect(Object.keys(errors).length).toBe(0)
-    })
-
-    it('should skip non-editable fields', () => {
-      const model: ModelSchema = {
-        name: 'Post',
-        fields: [
-          { name: 'id', type: 'string', editable: false },
-          { name: 'title', type: 'string', required: true },
-        ],
-      }
-      const record = { title: '' }
-      const errors = validateRecord(model, record)
-      expect(errors.id).toBeUndefined()
-      expect(errors.title).toBeTruthy()
-    })
-  })
-
   describe('getDefaultValue', () => {
     it.each([
       { field: { name: 'count', type: 'number', default: 42 }, expected: 42, description: 'custom default' },
@@ -335,7 +120,7 @@ describe('schema-utils', () => {
 
   describe('createEmptyRecord', () => {
     it('should create a record with all fields', () => {
-      const record = createEmptyRecord(mockModel)
+      const record = createEmptyRecord(createMockModel())
       expect(record.id).toBeDefined()
       expect(record.name).toBe('')
       expect(record.email).toBe('')
@@ -343,8 +128,8 @@ describe('schema-utils', () => {
     })
 
     it('should generate unique ID', () => {
-      const record1 = createEmptyRecord(mockModel)
-      const record2 = createEmptyRecord(mockModel)
+      const record1 = createEmptyRecord(createMockModel())
+      const record2 = createEmptyRecord(createMockModel())
       expect(record1.id).not.toBe(record2.id)
     })
 
diff --git a/frontends/nextjs/src/lib/schema/__tests__/schema-utils.validation.test.ts b/frontends/nextjs/src/lib/schema/__tests__/schema-utils.validation.test.ts
new file mode 100644
index 000000000..ba56e9239
--- /dev/null
+++ b/frontends/nextjs/src/lib/schema/__tests__/schema-utils.validation.test.ts
@@ -0,0 +1,135 @@
+import { describe, it, expect } from 'vitest'
+import { validateField, validateRecord } from '@/lib/schema-utils'
+import type { FieldSchema, ModelSchema } from '@/lib/schema-types'
+import { createMockModel } from './schema-utils.fixtures'
+
+describe('schema-utils validation', () => {
+  describe('validateField', () => {
+    it.each([
+      {
+        name: 'required field empty',
+        field: { name: 'email', type: 'email', required: true },
+        value: '',
+        shouldHaveError: true,
+      },
+      {
+        name: 'non-required field empty',
+        field: { name: 'nickname', type: 'string', required: false },
+        value: '',
+        shouldHaveError: false,
+      },
+      {
+        name: 'invalid email',
+        field: { name: 'email', type: 'email' },
+        value: 'invalid',
+        shouldHaveError: true,
+      },
+      {
+        name: 'valid email',
+        field: { name: 'email', type: 'email' },
+        value: 'test@example.com',
+        shouldHaveError: false,
+      },
+      {
+        name: 'invalid URL',
+        field: { name: 'website', type: 'url' },
+        value: 'not a url',
+        shouldHaveError: true,
+      },
+      {
+        name: 'valid URL',
+        field: { name: 'website', type: 'url' },
+        value: 'https://example.com',
+        shouldHaveError: false,
+      },
+      {
+        name: 'number below min',
+        field: { name: 'age', type: 'number', validation: { min: 0, max: 150 } },
+        value: -1,
+        shouldHaveError: true,
+      },
+      {
+        name: 'number above max',
+        field: { name: 'age', type: 'number', validation: { min: 0, max: 150 } },
+        value: 200,
+        shouldHaveError: true,
+      },
+      {
+        name: 'valid number in range',
+        field: { name: 'age', type: 'number', validation: { min: 0, max: 150 } },
+        value: 25,
+        shouldHaveError: false,
+      },
+      {
+        name: 'string too short',
+        field: { name: 'password', type: 'string', validation: { minLength: 8, maxLength: 20 } },
+        value: 'short',
+        shouldHaveError: true,
+      },
+      {
+        name: 'string too long',
+        field: { name: 'password', type: 'string', validation: { minLength: 8, maxLength: 20 } },
+        value: 'verylongpasswordthatexceedslimit',
+        shouldHaveError: true,
+      },
+      {
+        name: 'valid string length',
+        field: { name: 'password', type: 'string', validation: { minLength: 8, maxLength: 20 } },
+        value: 'goodpass123',
+        shouldHaveError: false,
+      },
+      {
+        name: 'valid pattern match',
+        field: { name: 'code', type: 'string', validation: { pattern: '^[A-Z]{3}-\\d{3}$' } },
+        value: 'ABC-123',
+        shouldHaveError: false,
+      },
+      {
+        name: 'invalid pattern match',
+        field: { name: 'code', type: 'string', validation: { pattern: '^[A-Z]{3}-\\d{3}$' } },
+        value: 'abc-123',
+        shouldHaveError: true,
+      },
+    ])('should $name', ({ field, value, shouldHaveError }) => {
+      const result = validateField(field as FieldSchema, value)
+      if (shouldHaveError) {
+        expect(result).toBeTruthy()
+      } else {
+        expect(result).toBeNull()
+      }
+    })
+  })
+
+  describe('validateRecord', () => {
+    it('should validate all fields in a record', () => {
+      const record = { id: '1', name: 'John', email: 'invalid-email' }
+      const errors = validateRecord(createMockModel(), record)
+      expect(errors.email).toBeTruthy()
+    })
+
+    it('should return empty errors for valid record', () => {
+      const record = {
+        id: '1',
+        name: 'John Doe',
+        email: 'john@example.com',
+        age: 30,
+      }
+      const errors = validateRecord(createMockModel(), record)
+      expect(Object.keys(errors).length).toBe(0)
+    })
+
+    it('should skip non-editable fields', () => {
+      const model: ModelSchema = {
+        name: 'Post',
+        fields: [
+          { name: 'id', type: 'string', editable: false },
+          { name: 'title', type: 'string', required: true },
+        ],
+      }
+      const record = { title: '' }
+      const errors = validateRecord(model, record)
+      expect(errors.id).toBeUndefined()
+      expect(errors.title).toBeTruthy()
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/schema/default-schema.ts b/frontends/nextjs/src/lib/schema/default-schema.ts
index 398071c44..a01c0a590 100644
--- a/frontends/nextjs/src/lib/schema/default-schema.ts
+++ b/frontends/nextjs/src/lib/schema/default-schema.ts
@@ -1,308 +1,6 @@
 import type { SchemaConfig } from '../types/schema-types'
+import { defaultApps } from './default/components'
 
 export const defaultSchema: SchemaConfig = {
-  apps: [
-    {
-      name: 'blog',
-      label: 'Blog',
-      models: [
-        {
-          name: 'post',
-          label: 'Post',
-          labelPlural: 'Posts',
-          icon: 'Article',
-          listDisplay: ['title', 'author', 'status', 'publishedAt'],
-          listFilter: ['status', 'author'],
-          searchFields: ['title', 'content'],
-          ordering: ['-publishedAt'],
-          fields: [
-            {
-              name: 'id',
-              type: 'string',
-              label: 'ID',
-              required: true,
-              unique: true,
-              editable: false,
-              listDisplay: false,
-            },
-            {
-              name: 'title',
-              type: 'string',
-              label: 'Title',
-              required: true,
-              validation: {
-                minLength: 3,
-                maxLength: 200,
-              },
-              listDisplay: true,
-              searchable: true,
-              sortable: true,
-            },
-            {
-              name: 'slug',
-              type: 'string',
-              label: 'Slug',
-              required: true,
-              unique: true,
-              helpText: 'URL-friendly version of the title',
-              validation: {
-                pattern: '^[a-z0-9-]+$',
-              },
-              listDisplay: false,
-              sortable: true,
-            },
-            {
-              name: 'content',
-              type: 'text',
-              label: 'Content',
-              required: true,
-              helpText: 'Main post content',
-              listDisplay: false,
-              searchable: true,
-            },
-            {
-              name: 'excerpt',
-              type: 'text',
-              label: 'Excerpt',
-              required: false,
-              helpText: ['Short summary of the post', 'Used in list views and previews'],
-              validation: {
-                maxLength: 500,
-              },
-              listDisplay: false,
-            },
-            {
-              name: 'author',
-              type: 'relation',
-              label: 'Author',
-              required: true,
-              relatedModel: 'author',
-              listDisplay: true,
-              sortable: true,
-            },
-            {
-              name: 'status',
-              type: 'select',
-              label: 'Status',
-              required: true,
-              default: 'draft',
-              choices: [
-                { value: 'draft', label: 'Draft' },
-                { value: 'published', label: 'Published' },
-                { value: 'archived', label: 'Archived' },
-              ],
-              listDisplay: true,
-              sortable: true,
-            },
-            {
-              name: 'featured',
-              type: 'boolean',
-              label: 'Featured',
-              default: false,
-              helpText: 'Display on homepage',
-              listDisplay: true,
-            },
-            {
-              name: 'publishedAt',
-              type: 'datetime',
-              label: 'Published At',
-              required: false,
-              listDisplay: true,
-              sortable: true,
-            },
-            {
-              name: 'tags',
-              type: 'json',
-              label: 'Tags',
-              required: false,
-              helpText: 'JSON array of tag strings',
-              listDisplay: false,
-            },
-            {
-              name: 'views',
-              type: 'number',
-              label: 'Views',
-              default: 0,
-              validation: {
-                min: 0,
-              },
-              listDisplay: false,
-            },
-          ],
-        },
-        {
-          name: 'author',
-          label: 'Author',
-          labelPlural: 'Authors',
-          icon: 'User',
-          listDisplay: ['name', 'email', 'active', 'createdAt'],
-          listFilter: ['active'],
-          searchFields: ['name', 'email'],
-          ordering: ['name'],
-          fields: [
-            {
-              name: 'id',
-              type: 'string',
-              label: 'ID',
-              required: true,
-              unique: true,
-              editable: false,
-              listDisplay: false,
-            },
-            {
-              name: 'name',
-              type: 'string',
-              label: 'Name',
-              required: true,
-              validation: {
-                minLength: 2,
-                maxLength: 100,
-              },
-              listDisplay: true,
-              searchable: true,
-              sortable: true,
-            },
-            {
-              name: 'email',
-              type: 'email',
-              label: 'Email',
-              required: true,
-              unique: true,
-              listDisplay: true,
-              searchable: true,
-              sortable: true,
-            },
-            {
-              name: 'bio',
-              type: 'text',
-              label: 'Bio',
-              required: false,
-              helpText: 'Author biography',
-              validation: {
-                maxLength: 1000,
-              },
-              listDisplay: false,
-            },
-            {
-              name: 'website',
-              type: 'url',
-              label: 'Website',
-              required: false,
-              listDisplay: false,
-            },
-            {
-              name: 'active',
-              type: 'boolean',
-              label: 'Active',
-              default: true,
-              listDisplay: true,
-            },
-            {
-              name: 'createdAt',
-              type: 'datetime',
-              label: 'Created At',
-              required: true,
-              editable: false,
-              listDisplay: true,
-              sortable: true,
-            },
-          ],
-        },
-      ],
-    },
-    {
-      name: 'ecommerce',
-      label: 'E-Commerce',
-      models: [
-        {
-          name: 'product',
-          label: 'Product',
-          labelPlural: 'Products',
-          icon: 'ShoppingCart',
-          listDisplay: ['name', 'price', 'stock', 'available'],
-          listFilter: ['available', 'category'],
-          searchFields: ['name', 'description'],
-          ordering: ['name'],
-          fields: [
-            {
-              name: 'id',
-              type: 'string',
-              label: 'ID',
-              required: true,
-              unique: true,
-              editable: false,
-              listDisplay: false,
-            },
-            {
-              name: 'name',
-              type: 'string',
-              label: 'Product Name',
-              required: true,
-              validation: {
-                minLength: 3,
-                maxLength: 200,
-              },
-              listDisplay: true,
-              searchable: true,
-              sortable: true,
-            },
-            {
-              name: 'description',
-              type: 'text',
-              label: 'Description',
-              required: false,
-              helpText: 'Product description',
-              listDisplay: false,
-              searchable: true,
-            },
-            {
-              name: 'price',
-              type: 'number',
-              label: 'Price',
-              required: true,
-              validation: {
-                min: 0,
-              },
-              listDisplay: true,
-              sortable: true,
-            },
-            {
-              name: 'stock',
-              type: 'number',
-              label: 'Stock',
-              required: true,
-              default: 0,
-              validation: {
-                min: 0,
-              },
-              listDisplay: true,
-              sortable: true,
-            },
-            {
-              name: 'category',
-              type: 'select',
-              label: 'Category',
-              required: true,
-              choices: [
-                { value: 'electronics', label: 'Electronics' },
-                { value: 'clothing', label: 'Clothing' },
-                { value: 'books', label: 'Books' },
-                { value: 'home', label: 'Home & Garden' },
-                { value: 'toys', label: 'Toys' },
-              ],
-              listDisplay: false,
-              sortable: true,
-            },
-            {
-              name: 'available',
-              type: 'boolean',
-              label: 'Available',
-              default: true,
-              listDisplay: true,
-            },
-          ],
-        },
-      ],
-    },
-  ],
+  apps: defaultApps,
 }
diff --git a/frontends/nextjs/src/lib/schema/default/components.ts b/frontends/nextjs/src/lib/schema/default/components.ts
new file mode 100644
index 000000000..9fe3f02bd
--- /dev/null
+++ b/frontends/nextjs/src/lib/schema/default/components.ts
@@ -0,0 +1,54 @@
+import type { AppSchema, ModelSchema } from '../../types/schema-types'
+import { authorFields, postFields, productFields } from './forms'
+
+export const blogModels: ModelSchema[] = [
+  {
+    name: 'post',
+    label: 'Post',
+    labelPlural: 'Posts',
+    icon: 'Article',
+    listDisplay: ['title', 'author', 'status', 'publishedAt'],
+    listFilter: ['status', 'author'],
+    searchFields: ['title', 'content'],
+    ordering: ['-publishedAt'],
+    fields: postFields,
+  },
+  {
+    name: 'author',
+    label: 'Author',
+    labelPlural: 'Authors',
+    icon: 'User',
+    listDisplay: ['name', 'email', 'active', 'createdAt'],
+    listFilter: ['active'],
+    searchFields: ['name', 'email'],
+    ordering: ['name'],
+    fields: authorFields,
+  },
+]
+
+export const ecommerceModels: ModelSchema[] = [
+  {
+    name: 'product',
+    label: 'Product',
+    labelPlural: 'Products',
+    icon: 'ShoppingCart',
+    listDisplay: ['name', 'price', 'stock', 'available'],
+    listFilter: ['available', 'category'],
+    searchFields: ['name', 'description'],
+    ordering: ['name'],
+    fields: productFields,
+  },
+]
+
+export const defaultApps: AppSchema[] = [
+  {
+    name: 'blog',
+    label: 'Blog',
+    models: blogModels,
+  },
+  {
+    name: 'ecommerce',
+    label: 'E-Commerce',
+    models: ecommerceModels,
+  },
+]
diff --git a/frontends/nextjs/src/lib/schema/default/forms.ts b/frontends/nextjs/src/lib/schema/default/forms.ts
new file mode 100644
index 000000000..81ae491a5
--- /dev/null
+++ b/frontends/nextjs/src/lib/schema/default/forms.ts
@@ -0,0 +1,244 @@
+import type { FieldSchema } from '../../types/schema-types'
+import { authorValidations, postValidations, productValidations } from './validation'
+
+export const postFields: FieldSchema[] = [
+  {
+    name: 'id',
+    type: 'string',
+    label: 'ID',
+    required: true,
+    unique: true,
+    editable: false,
+    listDisplay: false,
+  },
+  {
+    name: 'title',
+    type: 'string',
+    label: 'Title',
+    required: true,
+    validation: postValidations.title,
+    listDisplay: true,
+    searchable: true,
+    sortable: true,
+  },
+  {
+    name: 'slug',
+    type: 'string',
+    label: 'Slug',
+    required: true,
+    unique: true,
+    helpText: 'URL-friendly version of the title',
+    validation: postValidations.slug,
+    listDisplay: false,
+    sortable: true,
+  },
+  {
+    name: 'content',
+    type: 'text',
+    label: 'Content',
+    required: true,
+    helpText: 'Main post content',
+    listDisplay: false,
+    searchable: true,
+  },
+  {
+    name: 'excerpt',
+    type: 'text',
+    label: 'Excerpt',
+    required: false,
+    helpText: ['Short summary of the post', 'Used in list views and previews'],
+    validation: postValidations.excerpt,
+    listDisplay: false,
+  },
+  {
+    name: 'author',
+    type: 'relation',
+    label: 'Author',
+    required: true,
+    relatedModel: 'author',
+    listDisplay: true,
+    sortable: true,
+  },
+  {
+    name: 'status',
+    type: 'select',
+    label: 'Status',
+    required: true,
+    default: 'draft',
+    choices: [
+      { value: 'draft', label: 'Draft' },
+      { value: 'published', label: 'Published' },
+      { value: 'archived', label: 'Archived' },
+    ],
+    listDisplay: true,
+    sortable: true,
+  },
+  {
+    name: 'featured',
+    type: 'boolean',
+    label: 'Featured',
+    default: false,
+    helpText: 'Display on homepage',
+    listDisplay: true,
+  },
+  {
+    name: 'publishedAt',
+    type: 'datetime',
+    label: 'Published At',
+    required: false,
+    listDisplay: true,
+    sortable: true,
+  },
+  {
+    name: 'tags',
+    type: 'json',
+    label: 'Tags',
+    required: false,
+    helpText: 'JSON array of tag strings',
+    listDisplay: false,
+  },
+  {
+    name: 'views',
+    type: 'number',
+    label: 'Views',
+    default: 0,
+    validation: postValidations.views,
+    listDisplay: false,
+  },
+]
+
+export const authorFields: FieldSchema[] = [
+  {
+    name: 'id',
+    type: 'string',
+    label: 'ID',
+    required: true,
+    unique: true,
+    editable: false,
+    listDisplay: false,
+  },
+  {
+    name: 'name',
+    type: 'string',
+    label: 'Name',
+    required: true,
+    validation: authorValidations.name,
+    listDisplay: true,
+    searchable: true,
+    sortable: true,
+  },
+  {
+    name: 'email',
+    type: 'email',
+    label: 'Email',
+    required: true,
+    unique: true,
+    listDisplay: true,
+    searchable: true,
+    sortable: true,
+  },
+  {
+    name: 'bio',
+    type: 'text',
+    label: 'Bio',
+    required: false,
+    helpText: 'Author biography',
+    validation: authorValidations.bio,
+    listDisplay: false,
+  },
+  {
+    name: 'website',
+    type: 'url',
+    label: 'Website',
+    required: false,
+    listDisplay: false,
+  },
+  {
+    name: 'active',
+    type: 'boolean',
+    label: 'Active',
+    default: true,
+    listDisplay: true,
+  },
+  {
+    name: 'createdAt',
+    type: 'datetime',
+    label: 'Created At',
+    required: true,
+    editable: false,
+    listDisplay: true,
+    sortable: true,
+  },
+]
+
+export const productFields: FieldSchema[] = [
+  {
+    name: 'id',
+    type: 'string',
+    label: 'ID',
+    required: true,
+    unique: true,
+    editable: false,
+    listDisplay: false,
+  },
+  {
+    name: 'name',
+    type: 'string',
+    label: 'Product Name',
+    required: true,
+    validation: productValidations.name,
+    listDisplay: true,
+    searchable: true,
+    sortable: true,
+  },
+  {
+    name: 'description',
+    type: 'text',
+    label: 'Description',
+    required: false,
+    helpText: 'Product description',
+    listDisplay: false,
+    searchable: true,
+  },
+  {
+    name: 'price',
+    type: 'number',
+    label: 'Price',
+    required: true,
+    validation: productValidations.price,
+    listDisplay: true,
+    sortable: true,
+  },
+  {
+    name: 'stock',
+    type: 'number',
+    label: 'Stock',
+    required: true,
+    default: 0,
+    validation: productValidations.stock,
+    listDisplay: true,
+    sortable: true,
+  },
+  {
+    name: 'category',
+    type: 'select',
+    label: 'Category',
+    required: true,
+    choices: [
+      { value: 'electronics', label: 'Electronics' },
+      { value: 'clothing', label: 'Clothing' },
+      { value: 'books', label: 'Books' },
+      { value: 'home', label: 'Home & Garden' },
+      { value: 'toys', label: 'Toys' },
+    ],
+    listDisplay: false,
+    sortable: true,
+  },
+  {
+    name: 'available',
+    type: 'boolean',
+    label: 'Available',
+    default: true,
+    listDisplay: true,
+  },
+]
diff --git a/frontends/nextjs/src/lib/schema/default/validation.ts b/frontends/nextjs/src/lib/schema/default/validation.ts
new file mode 100644
index 000000000..0573520f4
--- /dev/null
+++ b/frontends/nextjs/src/lib/schema/default/validation.ts
@@ -0,0 +1,19 @@
+import type { FieldSchema } from '../../types/schema-types'
+
+export const postValidations: Record<string, FieldSchema['validation']> = {
+  title: { minLength: 3, maxLength: 200 },
+  slug: { pattern: '^[a-z0-9-]+$' },
+  excerpt: { maxLength: 500 },
+  views: { min: 0 },
+}
+
+export const authorValidations: Record<string, FieldSchema['validation']> = {
+  name: { minLength: 2, maxLength: 100 },
+  bio: { maxLength: 1000 },
+}
+
+export const productValidations: Record<string, FieldSchema['validation']> = {
+  name: { minLength: 3, maxLength: 200 },
+  price: { min: 0 },
+  stock: { min: 0 },
+}
diff --git a/frontends/nextjs/src/lib/schema/functions/index.ts b/frontends/nextjs/src/lib/schema/functions/index.ts
index 5575a442a..036a235a8 100644
--- a/frontends/nextjs/src/lib/schema/functions/index.ts
+++ b/frontends/nextjs/src/lib/schema/functions/index.ts
@@ -1,15 +1,15 @@
 // Individual function exports
-export { getModelKey } from './get-model-key'
-export { getRecordsKey } from './get-records-key'
-export { findModel } from './find-model'
-export { getFieldLabel } from './get-field-label'
-export { getModelLabel } from './get-model-label'
-export { getModelLabelPlural } from './get-model-label-plural'
-export { getHelpText } from './get-help-text'
-export { generateId } from './generate-id'
-export { validateField } from './validate-field'
-export { validateRecord } from './validate-record'
-export { getDefaultValue } from './get-default-value'
-export { createEmptyRecord } from './create-empty-record'
-export { sortRecords } from './sort-records'
-export { filterRecords } from './filter-records'
+export { getModelKey } from './model/get-model-key'
+export { getRecordsKey } from './record/get-records-key'
+export { findModel } from './model/find-model'
+export { getFieldLabel } from './field/get-field-label'
+export { getModelLabel } from './model/get-model-label'
+export { getModelLabelPlural } from './model/get-model-label-plural'
+export { getHelpText } from './field/get-help-text'
+export { generateId } from './record/crud/generate-id'
+export { validateField } from './field/validate-field'
+export { validateRecord } from './record/validate-record'
+export { getDefaultValue } from './field/get-default-value'
+export { createEmptyRecord } from './record/crud/create-empty-record'
+export { sortRecords } from './record/sort-records'
+export { filterRecords } from './record/filter-records'
diff --git a/frontends/nextjs/src/lib/schema/functions/record/crud/create-empty-record.ts b/frontends/nextjs/src/lib/schema/functions/record/crud/create-empty-record.ts
index f6cdce151..441524bde 100644
--- a/frontends/nextjs/src/lib/schema/functions/record/crud/create-empty-record.ts
+++ b/frontends/nextjs/src/lib/schema/functions/record/crud/create-empty-record.ts
@@ -1,6 +1,6 @@
 import type { ModelSchema } from '@/lib/schema-types'
 import { generateId } from './generate-id'
-import { getDefaultValue } from './get-default-value'
+import { getDefaultValue } from '../../field/get-default-value'
 
 /**
  * Create an empty record with default values for a model
@@ -9,7 +9,7 @@ import { getDefaultValue } from './get-default-value'
  */
 export const createEmptyRecord = (model: ModelSchema): any => {
   const record: any = {}
-  
+
   for (const field of model.fields) {
     if (field.name === 'id') {
       record.id = generateId()
@@ -19,6 +19,6 @@ export const createEmptyRecord = (model: ModelSchema): any => {
       record[field.name] = getDefaultValue(field)
     }
   }
-  
+
   return record
 }
diff --git a/frontends/nextjs/src/lib/schema/functions/record/validate-record.ts b/frontends/nextjs/src/lib/schema/functions/record/validate-record.ts
index 9b61543da..77e842a8f 100644
--- a/frontends/nextjs/src/lib/schema/functions/record/validate-record.ts
+++ b/frontends/nextjs/src/lib/schema/functions/record/validate-record.ts
@@ -1,5 +1,5 @@
 import type { ModelSchema } from '@/lib/schema-types'
-import { validateField } from './validate-field'
+import { validateField } from '../field/validate-field'
 
 /**
  * Validate a record against its model schema
@@ -12,7 +12,7 @@ export const validateRecord = (
   record: any
 ): Record<string, string> => {
   const errors: Record<string, string> = {}
-  
+
   for (const field of model.fields) {
     if (field.editable === false) continue
     const error = validateField(field, record[field.name])
diff --git a/frontends/nextjs/src/lib/schema/index.ts b/frontends/nextjs/src/lib/schema/index.ts
index 1e68e8671..97056cc3f 100644
--- a/frontends/nextjs/src/lib/schema/index.ts
+++ b/frontends/nextjs/src/lib/schema/index.ts
@@ -1,3 +1,6 @@
 // Schema utilities exports
 export * from './schema-utils'
 export { defaultSchema } from './default-schema'
+export * from './default/components'
+export * from './default/forms'
+export * from './default/validation'
diff --git a/frontends/nextjs/src/lib/security/functions/patterns/javascript-patterns.ts b/frontends/nextjs/src/lib/security/functions/patterns/javascript-patterns.ts
index aa8214905..266675ae6 100644
--- a/frontends/nextjs/src/lib/security/functions/patterns/javascript-patterns.ts
+++ b/frontends/nextjs/src/lib/security/functions/patterns/javascript-patterns.ts
@@ -4,181 +4,12 @@
  */
 
 import type { SecurityPattern } from '../types'
+import { JAVASCRIPT_INJECTION_PATTERNS } from './javascript/injection'
+import { JAVASCRIPT_MISC_PATTERNS } from './javascript/misc'
+import { JAVASCRIPT_XSS_PATTERNS } from './javascript/xss'
 
 export const JAVASCRIPT_PATTERNS: SecurityPattern[] = [
-  {
-    pattern: /eval\s*\(/gi,
-    type: 'dangerous',
-    severity: 'critical',
-    message: 'Use of eval() detected - can execute arbitrary code',
-    recommendation: 'Use safe alternatives like JSON.parse() or Function constructor with strict validation'
-  },
-  {
-    pattern: /Function\s*\(/gi,
-    type: 'dangerous',
-    severity: 'high',
-    message: 'Dynamic Function constructor detected',
-    recommendation: 'Avoid dynamic code generation or use with extreme caution'
-  },
-  {
-    pattern: /innerHTML\s*=/gi,
-    type: 'dangerous',
-    severity: 'high',
-    message: 'innerHTML assignment detected - XSS vulnerability risk',
-    recommendation: 'Use textContent, createElement, or React JSX instead'
-  },
-  {
-    pattern: /dangerouslySetInnerHTML/gi,
-    type: 'dangerous',
-    severity: 'high',
-    message: 'dangerouslySetInnerHTML detected - XSS vulnerability risk',
-    recommendation: 'Sanitize HTML content or use safe alternatives'
-  },
-  {
-    pattern: /document\.write\s*\(/gi,
-    type: 'dangerous',
-    severity: 'medium',
-    message: 'document.write() detected - can cause security issues',
-    recommendation: 'Use DOM manipulation methods instead'
-  },
-  {
-    pattern: /\.call\s*\(\s*window/gi,
-    type: 'suspicious',
-    severity: 'medium',
-    message: 'Calling functions with window context',
-    recommendation: 'Be careful with context manipulation'
-  },
-  {
-    pattern: /\.apply\s*\(\s*window/gi,
-    type: 'suspicious',
-    severity: 'medium',
-    message: 'Applying functions with window context',
-    recommendation: 'Be careful with context manipulation'
-  },
-  {
-    pattern: /__proto__/gi,
-    type: 'dangerous',
-    severity: 'critical',
-    message: 'Prototype pollution attempt detected',
-    recommendation: 'Never manipulate __proto__ directly'
-  },
-  {
-    pattern: /constructor\s*\[\s*['"]prototype['"]\s*\]/gi,
-    type: 'dangerous',
-    severity: 'critical',
-    message: 'Prototype manipulation detected',
-    recommendation: 'Use Object.create() or proper class syntax'
-  },
-  {
-    pattern: /import\s+.*\s+from\s+['"]https?:/gi,
-    type: 'dangerous',
-    severity: 'critical',
-    message: 'Remote code import detected',
-    recommendation: 'Only import from trusted, local sources'
-  },
-  {
-    pattern: /<script[^>]*>/gi,
-    type: 'dangerous',
-    severity: 'critical',
-    message: 'Script tag injection detected',
-    recommendation: 'Never inject script tags dynamically'
-  },
-  {
-    pattern: /on(click|load|error|mouseover|mouseout|focus|blur)\s*=/gi,
-    type: 'suspicious',
-    severity: 'medium',
-    message: 'Inline event handler detected',
-    recommendation: 'Use addEventListener or React event handlers'
-  },
-  {
-    pattern: /javascript:\s*/gi,
-    type: 'dangerous',
-    severity: 'high',
-    message: 'javascript: protocol detected',
-    recommendation: 'Never use javascript: protocol in URLs'
-  },
-  {
-    pattern: /data:\s*text\/html/gi,
-    type: 'dangerous',
-    severity: 'high',
-    message: 'Data URI with HTML detected',
-    recommendation: 'Avoid data URIs with executable content'
-  },
-  {
-    pattern: /setTimeout\s*\(\s*['"`]/gi,
-    type: 'dangerous',
-    severity: 'high',
-    message: 'setTimeout with string argument detected',
-    recommendation: 'Use setTimeout with function reference instead'
-  },
-  {
-    pattern: /setInterval\s*\(\s*['"`]/gi,
-    type: 'dangerous',
-    severity: 'high',
-    message: 'setInterval with string argument detected',
-    recommendation: 'Use setInterval with function reference instead'
-  },
-  {
-    pattern: /localStorage|sessionStorage/gi,
-    type: 'warning',
-    severity: 'low',
-    message: 'Local/session storage usage detected',
-    recommendation: 'Use useKV hook for persistent data instead'
-  },
-  {
-    pattern: /crypto\.subtle|atob|btoa/gi,
-    type: 'warning',
-    severity: 'low',
-    message: 'Cryptographic operation detected',
-    recommendation: 'Ensure proper key management and secure practices'
-  },
-  {
-    pattern: /XMLHttpRequest|fetch\s*\(\s*['"`]http/gi,
-    type: 'warning',
-    severity: 'medium',
-    message: 'External HTTP request detected',
-    recommendation: 'Ensure CORS and security headers are properly configured'
-  },
-  {
-    pattern: /window\.open/gi,
-    type: 'suspicious',
-    severity: 'medium',
-    message: 'window.open detected',
-    recommendation: 'Be cautious with popup windows'
-  },
-  {
-    pattern: /location\.href\s*=/gi,
-    type: 'suspicious',
-    severity: 'medium',
-    message: 'Direct location manipulation detected',
-    recommendation: 'Use React Router or validate URLs carefully'
-  },
-  {
-    pattern: /require\s*\(\s*[^'"`]/gi,
-    type: 'dangerous',
-    severity: 'high',
-    message: 'Dynamic require() detected',
-    recommendation: 'Use static imports only'
-  },
-  {
-    pattern: /\.exec\s*\(|child_process|spawn|fork|execFile/gi,
-    type: 'malicious',
-    severity: 'critical',
-    message: 'System command execution attempt detected',
-    recommendation: 'This is not allowed in browser environment'
-  },
-  {
-    pattern: /fs\.|path\.|os\./gi,
-    type: 'malicious',
-    severity: 'critical',
-    message: 'Node.js system module usage detected',
-    recommendation: 'File system access not allowed in browser'
-  },
-  {
-    pattern: /process\.env|process\.exit/gi,
-    type: 'suspicious',
-    severity: 'medium',
-    message: 'Process manipulation detected',
-    recommendation: 'Not applicable in browser environment'
-  }
+  ...JAVASCRIPT_INJECTION_PATTERNS,
+  ...JAVASCRIPT_XSS_PATTERNS,
+  ...JAVASCRIPT_MISC_PATTERNS
 ]
diff --git a/frontends/nextjs/src/lib/security/functions/patterns/javascript/injection.ts b/frontends/nextjs/src/lib/security/functions/patterns/javascript/injection.ts
new file mode 100644
index 000000000..a3a5a0cdd
--- /dev/null
+++ b/frontends/nextjs/src/lib/security/functions/patterns/javascript/injection.ts
@@ -0,0 +1,53 @@
+import type { SecurityPattern } from '../../types'
+
+export const JAVASCRIPT_INJECTION_PATTERNS: SecurityPattern[] = [
+  {
+    pattern: /eval\s*\(/gi,
+    type: 'dangerous',
+    severity: 'critical',
+    message: 'Use of eval() detected - can execute arbitrary code',
+    recommendation: 'Use safe alternatives like JSON.parse() or Function constructor with strict validation'
+  },
+  {
+    pattern: /Function\s*\(/gi,
+    type: 'dangerous',
+    severity: 'high',
+    message: 'Dynamic Function constructor detected',
+    recommendation: 'Avoid dynamic code generation or use with extreme caution'
+  },
+  {
+    pattern: /import\s+.*\s+from\s+['"]https?:/gi,
+    type: 'dangerous',
+    severity: 'critical',
+    message: 'Remote code import detected',
+    recommendation: 'Only import from trusted, local sources'
+  },
+  {
+    pattern: /setTimeout\s*\(\s*['"`]/gi,
+    type: 'dangerous',
+    severity: 'high',
+    message: 'setTimeout with string argument detected',
+    recommendation: 'Use setTimeout with function reference instead'
+  },
+  {
+    pattern: /setInterval\s*\(\s*['"`]/gi,
+    type: 'dangerous',
+    severity: 'high',
+    message: 'setInterval with string argument detected',
+    recommendation: 'Use setInterval with function reference instead'
+  },
+  {
+    pattern: /require\s*\(\s*[^'"`]/gi,
+    type: 'dangerous',
+    severity: 'high',
+    message: 'Dynamic require() detected',
+    recommendation: 'Use static imports only'
+  },
+  {
+    pattern: /\.exec\s*\(|child_process|spawn|fork|execFile/gi,
+    type: 'malicious',
+    severity: 'critical',
+    message: 'System command execution attempt detected',
+    recommendation: 'This is not allowed in browser environment'
+  }
+]
diff --git a/frontends/nextjs/src/lib/security/functions/patterns/javascript/misc.ts b/frontends/nextjs/src/lib/security/functions/patterns/javascript/misc.ts
new file mode 100644
index 000000000..3b1efdaf9
--- /dev/null
+++ b/frontends/nextjs/src/lib/security/functions/patterns/javascript/misc.ts
@@ -0,0 +1,81 @@
+import type { SecurityPattern } from '../../types'
+
+export const JAVASCRIPT_MISC_PATTERNS: SecurityPattern[] = [
+  {
+    pattern: /\.call\s*\(\s*window/gi,
+    type: 'suspicious',
+    severity: 'medium',
+    message: 'Calling functions with window context',
+    recommendation: 'Be careful with context manipulation'
+  },
+  {
+    pattern: /\.apply\s*\(\s*window/gi,
+    type: 'suspicious',
+    severity: 'medium',
+    message: 'Applying functions with window context',
+    recommendation: 'Be careful with context manipulation'
+  },
+  {
+    pattern: /__proto__/gi,
+    type: 'dangerous',
+    severity: 'critical',
+    message: 'Prototype pollution attempt detected',
+    recommendation: 'Never manipulate __proto__ directly'
+  },
+  {
+    pattern: /constructor\s*\[\s*['"]prototype['"]\s*\]/gi,
+    type: 'dangerous',
+    severity: 'critical',
+    message: 'Prototype manipulation detected',
+    recommendation: 'Use Object.create() or proper class syntax'
+  },
+  {
+    pattern: /localStorage|sessionStorage/gi,
+    type: 'warning',
+    severity: 'low',
+    message: 'Local/session storage usage detected',
+    recommendation: 'Use useKV hook for persistent data instead'
+  },
+  {
+    pattern: /crypto\.subtle|atob|btoa/gi,
+    type: 'warning',
+    severity: 'low',
+    message: 'Cryptographic operation detected',
+    recommendation: 'Ensure proper key management and secure practices'
+  },
+  {
+    pattern: /XMLHttpRequest|fetch\s*\(\s*['"`]http/gi,
+    type: 'warning',
+    severity: 'medium',
+    message: 'External HTTP request detected',
+    recommendation: 'Ensure CORS and security headers are properly configured'
+  },
+  {
+    pattern: /window\.open/gi,
+    type: 'suspicious',
+    severity: 'medium',
+    message: 'window.open detected',
+    recommendation: 'Be cautious with popup windows'
+  },
+  {
+    pattern: /location\.href\s*=/gi,
+    type: 'suspicious',
+    severity: 'medium',
+    message: 'Direct location manipulation detected',
+    recommendation: 'Use React Router or validate URLs carefully'
+  },
+  {
+    pattern: /fs\.|path\.|os\./gi,
+    type: 'malicious',
+    severity: 'critical',
+    message: 'Node.js system module usage detected',
+    recommendation: 'File system access not allowed in browser'
+  },
+  {
+    pattern: /process\.env|process\.exit/gi,
+    type: 'suspicious',
+    severity: 'medium',
+    message: 'Process manipulation detected',
+    recommendation: 'Not applicable in browser environment'
+  }
+]
diff --git a/frontends/nextjs/src/lib/security/functions/patterns/javascript/xss.ts b/frontends/nextjs/src/lib/security/functions/patterns/javascript/xss.ts
new file mode 100644
index 000000000..378fa8fd4
--- /dev/null
+++ b/frontends/nextjs/src/lib/security/functions/patterns/javascript/xss.ts
@@ -0,0 +1,53 @@
+import type { SecurityPattern } from '../../types'
+
+export const JAVASCRIPT_XSS_PATTERNS: SecurityPattern[] = [
+  {
+    pattern: /innerHTML\s*=/gi,
+    type: 'dangerous',
+    severity: 'high',
+    message: 'innerHTML assignment detected - XSS vulnerability risk',
+    recommendation: 'Use textContent, createElement, or React JSX instead'
+  },
+  {
+    pattern: /dangerouslySetInnerHTML/gi,
+    type: 'dangerous',
+    severity: 'high',
+    message: 'dangerouslySetInnerHTML detected - XSS vulnerability risk',
+    recommendation: 'Sanitize HTML content or use safe alternatives'
+  },
+  {
+    pattern: /document\.write\s*\(/gi,
+    type: 'dangerous',
+    severity: 'medium',
+    message: 'document.write() detected - can cause security issues',
+    recommendation: 'Use DOM manipulation methods instead'
+  },
+  {
+    pattern: /<script[^>]*>/gi,
+    type: 'dangerous',
+    severity: 'critical',
+    message: 'Script tag injection detected',
+    recommendation: 'Never inject script tags dynamically'
+  },
+  {
+    pattern: /on(click|load|error|mouseover|mouseout|focus|blur)\s*=/gi,
+    type: 'suspicious',
+    severity: 'medium',
+    message: 'Inline event handler detected',
+    recommendation: 'Use addEventListener or React event handlers'
+  },
+  {
+    pattern: /javascript:\s*/gi,
+    type: 'dangerous',
+    severity: 'high',
+    message: 'javascript: protocol detected',
+    recommendation: 'Never use javascript: protocol in URLs'
+  },
+  {
+    pattern: /data:\s*text\/html/gi,
+    type: 'dangerous',
+    severity: 'high',
+    message: 'Data URI with HTML detected',
+    recommendation: 'Avoid data URIs with executable content'
+  }
+]
diff --git a/frontends/nextjs/src/lib/security/scanner/__tests__/security-scanner.detection.test.ts b/frontends/nextjs/src/lib/security/scanner/__tests__/security-scanner.detection.test.ts
new file mode 100644
index 000000000..a910bea9d
--- /dev/null
+++ b/frontends/nextjs/src/lib/security/scanner/__tests__/security-scanner.detection.test.ts
@@ -0,0 +1,234 @@
+import { describe, expect, it } from 'vitest'
+
+import { scanForVulnerabilities, securityScanner } from '@/lib/security-scanner'
+
+describe('security-scanner detection', () => {
+  describe('scanJavaScript', () => {
+    it.each([
+      {
+        name: 'flag eval usage as critical',
+        code: ['const safe = true;', 'const result = eval("1 + 1")'].join('\n'),
+        expectedSeverity: 'critical',
+        expectedSafe: false,
+        expectedIssueType: 'dangerous',
+        expectedIssuePattern: 'eval',
+        expectedLine: 2,
+      },
+      {
+        name: 'warn on localStorage usage but stay safe',
+        code: 'localStorage.setItem("k", "v")',
+        expectedSeverity: 'low',
+        expectedSafe: true,
+        expectedIssueType: 'warning',
+        expectedIssuePattern: 'localStorage',
+      },
+      {
+        name: 'return safe for benign code',
+        code: 'const sum = (a, b) => a + b',
+        expectedSeverity: 'safe',
+        expectedSafe: true,
+      },
+    ])(
+      'should $name',
+      ({ code, expectedSeverity, expectedSafe, expectedIssueType, expectedIssuePattern, expectedLine }) => {
+        const result = securityScanner.scanJavaScript(code)
+        expect(result.severity).toBe(expectedSeverity)
+        expect(result.safe).toBe(expectedSafe)
+
+        if (expectedIssueType || expectedIssuePattern) {
+          const issue = result.issues.find(item => {
+            const matchesType = expectedIssueType ? item.type === expectedIssueType : true
+            const matchesPattern = expectedIssuePattern ? item.pattern.includes(expectedIssuePattern) : true
+            return matchesType && matchesPattern
+          })
+          expect(issue).toBeDefined()
+          if (expectedLine !== undefined) {
+            expect(issue?.line).toBe(expectedLine)
+          }
+        } else {
+          expect(result.issues.length).toBe(0)
+        }
+
+        if (expectedSafe) {
+          expect(result.sanitizedCode).toBe(code)
+        } else {
+          expect(result.sanitizedCode).toBeUndefined()
+        }
+      }
+    )
+  })
+
+  describe('scanLua', () => {
+    it.each([
+      {
+        name: 'flag os.execute usage as critical',
+        code: 'os.execute("rm -rf /")',
+        expectedSeverity: 'critical',
+        expectedSafe: false,
+        expectedIssueType: 'malicious',
+        expectedIssuePattern: 'os.execute',
+      },
+      {
+        name: 'return safe for simple Lua function',
+        code: 'function add(a, b) return a + b end',
+        expectedSeverity: 'safe',
+        expectedSafe: true,
+      },
+    ])('should $name', ({ code, expectedSeverity, expectedSafe, expectedIssueType, expectedIssuePattern }) => {
+      const result = securityScanner.scanLua(code)
+      expect(result.severity).toBe(expectedSeverity)
+      expect(result.safe).toBe(expectedSafe)
+
+      if (expectedIssueType || expectedIssuePattern) {
+        const issue = result.issues.find(item => {
+          const matchesType = expectedIssueType ? item.type === expectedIssueType : true
+          const matchesPattern = expectedIssuePattern ? item.pattern.includes(expectedIssuePattern) : true
+          return matchesType && matchesPattern
+        })
+        expect(issue).toBeDefined()
+      } else {
+        expect(result.issues.length).toBe(0)
+      }
+
+      if (expectedSafe) {
+        expect(result.sanitizedCode).toBe(code)
+      } else {
+        expect(result.sanitizedCode).toBeUndefined()
+      }
+    })
+  })
+
+  describe('scanJSON', () => {
+    it.each([
+      {
+        name: 'flag invalid JSON as medium severity',
+        json: '{"value": }',
+        expectedSeverity: 'medium',
+        expectedSafe: false,
+        expectedIssuePattern: 'JSON parse error',
+      },
+      {
+        name: 'flag prototype pollution in JSON as critical',
+        json: '{"__proto__": {"polluted": true}}',
+        expectedSeverity: 'critical',
+        expectedSafe: false,
+        expectedIssuePattern: '__proto__',
+      },
+      {
+        name: 'return safe for valid JSON',
+        json: '{"ok": true}',
+        expectedSeverity: 'safe',
+        expectedSafe: true,
+      },
+    ])('should $name', ({ json, expectedSeverity, expectedSafe, expectedIssuePattern }) => {
+      const result = securityScanner.scanJSON(json)
+      expect(result.severity).toBe(expectedSeverity)
+      expect(result.safe).toBe(expectedSafe)
+
+      if (expectedIssuePattern) {
+        expect(result.issues.some(issue => issue.pattern.includes(expectedIssuePattern))).toBe(true)
+      } else {
+        expect(result.issues.length).toBe(0)
+      }
+
+      if (expectedSafe) {
+        expect(result.sanitizedCode).toBe(json)
+      } else {
+        expect(result.sanitizedCode).toBeUndefined()
+      }
+    })
+  })
+
+  describe('scanHTML', () => {
+    it.each([
+      {
+        name: 'flag script tags as critical',
+        html: '<div><script>alert(1)</script></div>',
+        expectedSeverity: 'critical',
+        expectedSafe: false,
+      },
+      {
+        name: 'flag inline handlers as high',
+        html: '<button onclick="alert(1)">Click</button>',
+        expectedSeverity: 'high',
+        expectedSafe: false,
+      },
+      {
+        name: 'return safe for plain markup',
+        html: '<div><span>Safe</span></div>',
+        expectedSeverity: 'safe',
+        expectedSafe: true,
+      },
+    ])('should $name', ({ html, expectedSeverity, expectedSafe }) => {
+      const result = securityScanner.scanHTML(html)
+      expect(result.severity).toBe(expectedSeverity)
+      expect(result.safe).toBe(expectedSafe)
+    })
+  })
+
+  describe('sanitizeInput', () => {
+    it.each([
+      {
+        name: 'remove script tags and inline handlers from text',
+        input: '<div onclick="alert(1)">Click</div><script>alert(2)</script><a href="javascript:alert(3)">x</a>',
+        type: 'text' as const,
+        shouldExclude: ['<script', 'onclick', 'javascript:'],
+      },
+      {
+        name: 'remove data html URIs from html',
+        input: '<img src="data:text/html;base64,abc"><script>alert(1)</script>',
+        type: 'html' as const,
+        shouldExclude: ['data:text/html', '<script'],
+      },
+      {
+        name: 'neutralize prototype pollution in json',
+        input: '{"__proto__": {"polluted": true}, "note": "constructor[\\"prototype\\"]"}',
+        type: 'json' as const,
+        shouldInclude: ['_proto_'],
+        shouldExclude: ['__proto__', 'constructor["prototype"]'],
+      },
+    ])('should $name', ({ input, type, shouldExclude = [], shouldInclude = [] }) => {
+      const sanitized = securityScanner.sanitizeInput(input, type)
+      shouldExclude.forEach(value => {
+        expect(sanitized).not.toContain(value)
+      })
+      shouldInclude.forEach(value => {
+        expect(sanitized).toContain(value)
+      })
+    })
+  })
+
+  describe('scanForVulnerabilities', () => {
+    it.each([
+      {
+        name: 'auto-detects JSON and flags prototype pollution',
+        code: '{"__proto__": {"polluted": true}}',
+        expectedSeverity: 'critical',
+      },
+      {
+        name: 'auto-detects Lua when function/end present',
+        code: 'function dangerous() os.execute("rm -rf /") end',
+        expectedSeverity: 'critical',
+      },
+      {
+        name: 'auto-detects HTML and flags script tags',
+        code: '<div><script>alert(1)</script></div>',
+        expectedSeverity: 'critical',
+      },
+      {
+        name: 'falls back to JavaScript scanning',
+        code: 'const result = eval("1 + 1")',
+        expectedSeverity: 'critical',
+      },
+      {
+        name: 'honors explicit type parameter',
+        code: 'return 1',
+        type: 'lua' as const,
+        expectedSeverity: 'safe',
+      },
+    ])('should $name', ({ code, type, expectedSeverity }) => {
+      const result = scanForVulnerabilities(code, type)
+      expect(result.severity).toBe(expectedSeverity)
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/security/scanner/__tests__/security-scanner.reporting.test.ts b/frontends/nextjs/src/lib/security/scanner/__tests__/security-scanner.reporting.test.ts
new file mode 100644
index 000000000..42f9a2dd2
--- /dev/null
+++ b/frontends/nextjs/src/lib/security/scanner/__tests__/security-scanner.reporting.test.ts
@@ -0,0 +1,29 @@
+import { describe, expect, it } from 'vitest'
+
+import { getSeverityColor, getSeverityIcon } from '@/lib/security-scanner'
+
+describe('security-scanner reporting', () => {
+  describe('getSeverityColor', () => {
+    it.each([
+      { severity: 'critical', expected: 'error' },
+      { severity: 'high', expected: 'warning' },
+      { severity: 'medium', expected: 'info' },
+      { severity: 'low', expected: 'secondary' },
+      { severity: 'safe', expected: 'success' },
+    ])('should map $severity to expected classes', ({ severity, expected }) => {
+      expect(getSeverityColor(severity)).toBe(expected)
+    })
+  })
+
+  describe('getSeverityIcon', () => {
+    it.each([
+      { severity: 'critical', expected: '\u{1F6A8}' },
+      { severity: 'high', expected: '\u26A0\uFE0F' },
+      { severity: 'medium', expected: '\u26A1' },
+      { severity: 'low', expected: '\u2139\uFE0F' },
+      { severity: 'safe', expected: '\u2713' },
+    ])('should map $severity to expected icon', ({ severity, expected }) => {
+      expect(getSeverityIcon(severity)).toBe(expected)
+    })
+  })
+})
diff --git a/frontends/nextjs/src/lib/security/scanner/security-scanner.test.ts b/frontends/nextjs/src/lib/security/scanner/security-scanner.test.ts
index 142a8997b..0e9fcbd80 100644
--- a/frontends/nextjs/src/lib/security/scanner/security-scanner.test.ts
+++ b/frontends/nextjs/src/lib/security/scanner/security-scanner.test.ts
@@ -1,257 +1,2 @@
-import { describe, it, expect } from 'vitest'
-import { securityScanner, scanForVulnerabilities, getSeverityColor, getSeverityIcon } from '@/lib/security-scanner'
-
-describe('security-scanner', () => {
-  describe('scanJavaScript', () => {
-    it.each([
-      {
-        name: 'flag eval usage as critical',
-        code: ['const safe = true;', 'const result = eval("1 + 1")'].join('\n'),
-        expectedSeverity: 'critical',
-        expectedSafe: false,
-        expectedIssueType: 'dangerous',
-        expectedIssuePattern: 'eval',
-        expectedLine: 2,
-      },
-      {
-        name: 'warn on localStorage usage but stay safe',
-        code: 'localStorage.setItem("k", "v")',
-        expectedSeverity: 'low',
-        expectedSafe: true,
-        expectedIssueType: 'warning',
-        expectedIssuePattern: 'localStorage',
-      },
-      {
-        name: 'return safe for benign code',
-        code: 'const sum = (a, b) => a + b',
-        expectedSeverity: 'safe',
-        expectedSafe: true,
-      },
-    ])(
-      'should $name',
-      ({ code, expectedSeverity, expectedSafe, expectedIssueType, expectedIssuePattern, expectedLine }) => {
-        const result = securityScanner.scanJavaScript(code)
-        expect(result.severity).toBe(expectedSeverity)
-        expect(result.safe).toBe(expectedSafe)
-
-        if (expectedIssueType || expectedIssuePattern) {
-          const issue = result.issues.find(item => {
-            const matchesType = expectedIssueType ? item.type === expectedIssueType : true
-            const matchesPattern = expectedIssuePattern ? item.pattern.includes(expectedIssuePattern) : true
-            return matchesType && matchesPattern
-          })
-          expect(issue).toBeDefined()
-          if (expectedLine !== undefined) {
-            expect(issue?.line).toBe(expectedLine)
-          }
-        } else {
-          expect(result.issues.length).toBe(0)
-        }
-
-        if (expectedSafe) {
-          expect(result.sanitizedCode).toBe(code)
-        } else {
-          expect(result.sanitizedCode).toBeUndefined()
-        }
-      }
-    )
-  })
-
-  describe('scanLua', () => {
-    it.each([
-      {
-        name: 'flag os.execute usage as critical',
-        code: 'os.execute("rm -rf /")',
-        expectedSeverity: 'critical',
-        expectedSafe: false,
-        expectedIssueType: 'malicious',
-        expectedIssuePattern: 'os.execute',
-      },
-      {
-        name: 'return safe for simple Lua function',
-        code: 'function add(a, b) return a + b end',
-        expectedSeverity: 'safe',
-        expectedSafe: true,
-      },
-    ])('should $name', ({ code, expectedSeverity, expectedSafe, expectedIssueType, expectedIssuePattern }) => {
-      const result = securityScanner.scanLua(code)
-      expect(result.severity).toBe(expectedSeverity)
-      expect(result.safe).toBe(expectedSafe)
-
-      if (expectedIssueType || expectedIssuePattern) {
-        const issue = result.issues.find(item => {
-          const matchesType = expectedIssueType ? item.type === expectedIssueType : true
-          const matchesPattern = expectedIssuePattern ? item.pattern.includes(expectedIssuePattern) : true
-          return matchesType && matchesPattern
-        })
-        expect(issue).toBeDefined()
-      } else {
-        expect(result.issues.length).toBe(0)
-      }
-
-      if (expectedSafe) {
-        expect(result.sanitizedCode).toBe(code)
-      } else {
-        expect(result.sanitizedCode).toBeUndefined()
-      }
-    })
-  })
-
-  describe('scanJSON', () => {
-    it.each([
-      {
-        name: 'flag invalid JSON as medium severity',
-        json: '{"value": }',
-        expectedSeverity: 'medium',
-        expectedSafe: false,
-        expectedIssuePattern: 'JSON parse error',
-      },
-      {
-        name: 'flag prototype pollution in JSON as critical',
-        json: '{"__proto__": {"polluted": true}}',
-        expectedSeverity: 'critical',
-        expectedSafe: false,
-        expectedIssuePattern: '__proto__',
-      },
-      {
-        name: 'return safe for valid JSON',
-        json: '{"ok": true}',
-        expectedSeverity: 'safe',
-        expectedSafe: true,
-      },
-    ])('should $name', ({ json, expectedSeverity, expectedSafe, expectedIssuePattern }) => {
-      const result = securityScanner.scanJSON(json)
-      expect(result.severity).toBe(expectedSeverity)
-      expect(result.safe).toBe(expectedSafe)
-
-      if (expectedIssuePattern) {
-        expect(result.issues.some(issue => issue.pattern.includes(expectedIssuePattern))).toBe(true)
-      } else {
-        expect(result.issues.length).toBe(0)
-      }
-
-      if (expectedSafe) {
-        expect(result.sanitizedCode).toBe(json)
-      } else {
-        expect(result.sanitizedCode).toBeUndefined()
-      }
-    })
-  })
-
-  describe('scanHTML', () => {
-    it.each([
-      {
-        name: 'flag script tags as critical',
-        html: '<div><script>alert(1)</script></div>',
-        expectedSeverity: 'critical',
-        expectedSafe: false,
-      },
-      {
-        name: 'flag inline handlers as high',
-        html: '<button onclick="alert(1)">Click</button>',
-        expectedSeverity: 'high',
-        expectedSafe: false,
-      },
-      {
-        name: 'return safe for plain markup',
-        html: '<div><span>Safe</span></div>',
-        expectedSeverity: 'safe',
-        expectedSafe: true,
-      },
-    ])('should $name', ({ html, expectedSeverity, expectedSafe }) => {
-      const result = securityScanner.scanHTML(html)
-      expect(result.severity).toBe(expectedSeverity)
-      expect(result.safe).toBe(expectedSafe)
-    })
-  })
-
-  describe('sanitizeInput', () => {
-    it.each([
-      {
-        name: 'remove script tags and inline handlers from text',
-        input: '<div onclick="alert(1)">Click</div><script>alert(2)</script><a href="javascript:alert(3)">x</a>',
-        type: 'text' as const,
-        shouldExclude: ['<script', 'onclick', 'javascript:'],
-      },
-      {
-        name: 'remove data html URIs from html',
-        input: '<img src="data:text/html;base64,abc"><script>alert(1)</script>',
-        type: 'html' as const,
-        shouldExclude: ['data:text/html', '<script'],
-      },
-      {
-        name: 'neutralize prototype pollution in json',
-        input: '{"__proto__": {"polluted": true}, "note": "constructor[\\"prototype\\"]"}',
-        type: 'json' as const,
-        shouldInclude: ['_proto_'],
-        shouldExclude: ['__proto__', 'constructor["prototype"]'],
-      },
-    ])('should $name', ({ input, type, shouldExclude = [], shouldInclude = [] }) => {
-      const sanitized = securityScanner.sanitizeInput(input, type)
-      shouldExclude.forEach(value => {
-        expect(sanitized).not.toContain(value)
-      })
-      shouldInclude.forEach(value => {
-        expect(sanitized).toContain(value)
-      })
-    })
-  })
-
-  describe('getSeverityColor', () => {
-    it.each([
-      { severity: 'critical', expected: 'error' },
-      { severity: 'high', expected: 'warning' },
-      { severity: 'medium', expected: 'info' },
-      { severity: 'low', expected: 'secondary' },
-      { severity: 'safe', expected: 'success' },
-    ])('should map $severity to expected classes', ({ severity, expected }) => {
-      expect(getSeverityColor(severity)).toBe(expected)
-    })
-  })
-
-  describe('getSeverityIcon', () => {
-    it.each([
-      { severity: 'critical', expected: '\u{1F6A8}' },
-      { severity: 'high', expected: '\u26A0\uFE0F' },
-      { severity: 'medium', expected: '\u26A1' },
-      { severity: 'low', expected: '\u2139\uFE0F' },
-      { severity: 'safe', expected: '\u2713' },
-    ])('should map $severity to expected icon', ({ severity, expected }) => {
-      expect(getSeverityIcon(severity)).toBe(expected)
-    })
-  })
-
-  describe('scanForVulnerabilities', () => {
-    it.each([
-      {
-        name: 'auto-detects JSON and flags prototype pollution',
-        code: '{"__proto__": {"polluted": true}}',
-        expectedSeverity: 'critical',
-      },
-      {
-        name: 'auto-detects Lua when function/end present',
-        code: 'function dangerous() os.execute("rm -rf /") end',
-        expectedSeverity: 'critical',
-      },
-      {
-        name: 'auto-detects HTML and flags script tags',
-        code: '<div><script>alert(1)</script></div>',
-        expectedSeverity: 'critical',
-      },
-      {
-        name: 'falls back to JavaScript scanning',
-        code: 'const result = eval("1 + 1")',
-        expectedSeverity: 'critical',
-      },
-      {
-        name: 'honors explicit type parameter',
-        code: 'return 1',
-        type: 'lua' as const,
-        expectedSeverity: 'safe',
-      },
-    ])('should $name', ({ code, type, expectedSeverity }) => {
-      const result = scanForVulnerabilities(code, type)
-      expect(result.severity).toBe(expectedSeverity)
-    })
-  })
-})
+import './__tests__/security-scanner.detection.test'
+import './__tests__/security-scanner.reporting.test'
diff --git a/frontends/nextjs/src/lib/workflow/engine/__tests__/workflow-engine.errors.test.ts b/frontends/nextjs/src/lib/workflow/engine/__tests__/workflow-engine.errors.test.ts
new file mode 100644
index 000000000..5e4aba120
--- /dev/null
+++ b/frontends/nextjs/src/lib/workflow/engine/__tests__/workflow-engine.errors.test.ts
@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest'
+import { WorkflowEngine } from '../workflow-engine'
+import { createContext, createNode, createWorkflow } from './workflow-engine.fixtures'
+
+describe('workflow-engine errors', () => {
+  it('fails unknown node types with a clear error', async () => {
+    const workflow = createWorkflow('err-1', 'Unknown node', [
+      createNode('mystery', 'unknown' as any, 'Mystery node'),
+    ])
+
+    const result = await WorkflowEngine.execute(workflow, createContext({}))
+
+    expect(result.success).toBe(false)
+    expect(result.error).toContain('Unknown node type')
+  })
+
+  it('reports condition evaluation failures', async () => {
+    const workflow = createWorkflow('err-2', 'Bad condition', [
+      createNode('trigger', 'trigger', 'Start trigger'),
+      createNode('condition', 'condition', 'Broken', {
+        condition: '(() => { throw new Error("nope") })()',
+      }),
+    ])
+
+    const result = await WorkflowEngine.execute(workflow, createContext({}))
+
+    expect(result.success).toBe(false)
+    expect(result.error).toContain('Condition evaluation failed')
+    expect(result.outputs.trigger).toEqual({})
+  })
+
+  it('stops after configured retries when a node keeps failing', async () => {
+    const workflow = createWorkflow('err-3', 'Retry failure', [
+      createNode('trigger', 'trigger', 'Start trigger'),
+      createNode('retry', 'transform', 'Keep failing', {
+        retry: { maxAttempts: 2, delayMs: 0 },
+        transform: '(() => { throw new Error("still failing") })()',
+      }),
+    ])
+
+    const result = await WorkflowEngine.execute(workflow, createContext({ data: 1 }))
+
+    expect(result.success).toBe(false)
+    expect(result.error).toContain('Transform failed')
+    expect(result.logs.filter((log) => log.includes('Retrying node'))).toHaveLength(1)
+  })
+
+  it('propagates Lua script resolution errors', async () => {
+    const workflow = createWorkflow('err-4', 'Missing script', [
+      createNode('lua', 'lua', 'Lookup', { scriptId: 'missing-script' }),
+    ])
+
+    const result = await WorkflowEngine.execute(workflow, createContext({}, { scripts: [] }))
+
+    expect(result.success).toBe(false)
+    expect(result.error).toContain('Script not found: missing-script')
+  })
+})
diff --git a/frontends/nextjs/src/lib/workflow/engine/__tests__/workflow-engine.execution.test.ts b/frontends/nextjs/src/lib/workflow/engine/__tests__/workflow-engine.execution.test.ts
new file mode 100644
index 000000000..b2dc093ff
--- /dev/null
+++ b/frontends/nextjs/src/lib/workflow/engine/__tests__/workflow-engine.execution.test.ts
@@ -0,0 +1,55 @@
+import { beforeEach, describe, expect, it } from 'vitest'
+import { createWorkflowEngine, WorkflowEngine } from '../workflow-engine'
+import { createContext, createNode, createWorkflow } from './workflow-engine.fixtures'
+
+describe('workflow-engine execution', () => {
+  let engine: WorkflowEngine
+
+  beforeEach(() => {
+    engine = createWorkflowEngine()
+  })
+
+  it('executes nodes sequentially and returns aggregated outputs', async () => {
+    const workflow = createWorkflow('exec-1', 'Sequential run', [
+      createNode('trigger', 'trigger', 'Start trigger'),
+      createNode('transform', 'transform', 'Add one', { transform: 'data.value + 1' }),
+      createNode('action', 'action', 'Echo'),
+    ])
+
+    const result = await engine.executeWorkflow(workflow, createContext({ value: 5 }))
+
+    expect(result.success).toBe(true)
+    expect(result.outputs.trigger).toEqual({ value: 5 })
+    expect(result.outputs.transform).toBe(6)
+    expect(result.outputs.action).toBe(6)
+    expect(result.logs.at(-1)).toContain('Workflow completed successfully')
+  })
+
+  it('stops execution after a false condition while keeping prior outputs', async () => {
+    const workflow = createWorkflow('exec-2', 'Early stop', [
+      createNode('trigger', 'trigger', 'Start trigger'),
+      createNode('condition', 'condition', 'Stopper', { condition: 'false' }),
+      createNode('action', 'action', 'Should not run'),
+    ])
+
+    const result = await engine.executeWorkflow(workflow, createContext({}))
+
+    expect(result.success).toBe(true)
+    expect(result.outputs.action).toBeUndefined()
+    expect(Object.keys(result.outputs)).toHaveLength(2)
+    expect(result.logs.some((log) => log.includes('Condition node returned false'))).toBe(true)
+  })
+
+  it('passes user context through to Lua nodes', async () => {
+    const workflow = createWorkflow('exec-3', 'Lua context', [
+      createNode('lua', 'lua', 'User echo', { code: 'return context.user.id' }),
+    ])
+
+    const context = createContext({}, { user: { id: 'user-123' } })
+    const result = await WorkflowEngine.execute(workflow, context)
+
+    expect(result.success).toBe(true)
+    expect(result.outputs.lua).toBe('user-123')
+    expect(result.logs[0]).toContain('Starting workflow: Lua context')
+  })
+})
diff --git a/frontends/nextjs/src/lib/workflow/engine/__tests__/workflow-engine.fixtures.ts b/frontends/nextjs/src/lib/workflow/engine/__tests__/workflow-engine.fixtures.ts
new file mode 100644
index 000000000..e1ab9e686
--- /dev/null
+++ b/frontends/nextjs/src/lib/workflow/engine/__tests__/workflow-engine.fixtures.ts
@@ -0,0 +1,22 @@
+import type { Workflow, WorkflowNode } from '../../../types/level-types'
+import type { WorkflowExecutionContext } from '../../workflow-execution-context'
+
+export function createNode(
+  id: string,
+  type: WorkflowNode['type'],
+  label: string,
+  config: Record<string, any> = {}
+): WorkflowNode {
+  return { id, type, label, config, position: { x: 0, y: 0 } }
+}
+
+export function createWorkflow(id: string, name: string, nodes: WorkflowNode[]): Workflow {
+  return { id, name, nodes, edges: [], enabled: true }
+}
+
+export function createContext(
+  data: any = {},
+  overrides: Partial<WorkflowExecutionContext> = {}
+): WorkflowExecutionContext {
+  return { data, ...overrides }
+}
diff --git a/frontends/nextjs/src/lib/workflow/engine/__tests__/workflow-engine.persistence.test.ts b/frontends/nextjs/src/lib/workflow/engine/__tests__/workflow-engine.persistence.test.ts
new file mode 100644
index 000000000..adcc6d40f
--- /dev/null
+++ b/frontends/nextjs/src/lib/workflow/engine/__tests__/workflow-engine.persistence.test.ts
@@ -0,0 +1,55 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { WorkflowEngine } from '../workflow-engine'
+import { createContext, createNode, createWorkflow } from './workflow-engine.fixtures'
+import * as SandboxFactory from '../../../lua/engine/sandbox/create-sandboxed-lua-engine'
+import type { SandboxedLuaResult } from '../../../lua/engine/sandbox/sandboxed-lua-engine'
+
+afterEach(() => {
+  vi.restoreAllMocks()
+})
+
+describe('workflow-engine persistence', () => {
+  it('returns accumulated outputs and logs when a node fails', async () => {
+    const workflow = createWorkflow('persist-1', 'Failure keeps history', [
+      createNode('trigger', 'trigger', 'Start trigger'),
+      createNode('transform', 'transform', 'Break here', {
+        transform: '(() => { throw new Error("boom"); })()',
+      }),
+      createNode('action', 'action', 'Should not run'),
+    ])
+
+    const result = await WorkflowEngine.execute(workflow, createContext({ value: 3 }))
+
+    expect(result.success).toBe(false)
+    expect(result.outputs.trigger).toEqual({ value: 3 })
+    expect(result.outputs.action).toBeUndefined()
+    expect(result.logs.some((log) => log.includes('Break here'))).toBe(true)
+    expect(result.error).toContain('Transform failed')
+  })
+
+  it('persists security warnings from Lua execution', async () => {
+    const sandboxResult: SandboxedLuaResult = {
+      execution: { success: true, result: 99, logs: ['lua log'] },
+      security: { severity: 'high', issues: [{ message: 'uses os' }] } as any,
+    }
+
+    const mockEngine = {
+      executeWithSandbox: vi.fn(async () => sandboxResult),
+      destroy: vi.fn(),
+    }
+
+    vi.spyOn(SandboxFactory, 'createSandboxedLuaEngine').mockReturnValue(mockEngine as any)
+
+    const workflow = createWorkflow('persist-2', 'Lua security', [
+      createNode('lua', 'lua', 'Sandboxed', { code: 'return 1' }),
+    ])
+
+    const result = await WorkflowEngine.execute(workflow, createContext({}))
+
+    expect(result.success).toBe(true)
+    expect(result.outputs.lua).toBe(99)
+    expect(result.securityWarnings).toContain('Security issues detected: uses os')
+    expect(result.logs.some((log) => log.includes('[Lua] lua log'))).toBe(true)
+    expect(mockEngine.destroy).toHaveBeenCalled()
+  })
+})
diff --git a/frontends/nextjs/src/lib/workflow/engine/workflow-engine.test.ts b/frontends/nextjs/src/lib/workflow/engine/workflow-engine.test.ts
deleted file mode 100644
index bc91ceb0a..000000000
--- a/frontends/nextjs/src/lib/workflow/engine/workflow-engine.test.ts
+++ /dev/null
@@ -1,388 +0,0 @@
-import { describe, it, expect, beforeEach } from 'vitest'
-import { WorkflowEngine, createWorkflowEngine } from './workflow-engine'
-import type { Workflow, WorkflowNode, LuaScript } from '../types/level-types'
-
-// Helper to create a minimal valid WorkflowNode
-function createNode(
-  id: string,
-  type: WorkflowNode['type'],
-  label: string,
-  config: Record<string, any> = {}
-): WorkflowNode {
-  return { id, type, label, config, position: { x: 0, y: 0 } }
-}
-
-// Helper to create a minimal valid Workflow
-function createWorkflow(
-  id: string,
-  name: string,
-  nodes: WorkflowNode[]
-): Workflow {
-  return { id, name, nodes, edges: [], enabled: true }
-}
-
-describe('workflow-engine', () => {
-  let engine: WorkflowEngine
-
-  beforeEach(() => {
-    engine = createWorkflowEngine()
-  })
-
-  describe('createWorkflowEngine', () => {
-    it('should create a new WorkflowEngine instance', () => {
-      const engine = createWorkflowEngine()
-      expect(engine).toBeInstanceOf(WorkflowEngine)
-    })
-  })
-
-  describe('executeWorkflow', () => {
-    it.each([
-      {
-        name: 'simple trigger workflow',
-        workflow: createWorkflow('w1', 'Simple Workflow', [
-          createNode('n1', 'trigger', 'Start'),
-        ]),
-        context: { data: { test: 'value' } },
-        expected: {
-          success: true,
-          hasOutputs: true,
-          outputCount: 1,
-        },
-      },
-      {
-        name: 'workflow with action node',
-        workflow: createWorkflow('w2', 'Action Workflow', [
-          createNode('n1', 'trigger', 'Start'),
-          createNode('n2', 'action', 'Process', { action: 'process' }),
-        ]),
-        context: { data: { value: 42 } },
-        expected: {
-          success: true,
-          hasOutputs: true,
-          outputCount: 2,
-        },
-      },
-      {
-        name: 'workflow with transform node',
-        workflow: createWorkflow('w3', 'Transform Workflow', [
-          createNode('n1', 'trigger', 'Start'),
-          createNode('n2', 'transform', 'Double', { transform: 'data.value * 2' }),
-        ]),
-        context: { data: { value: 5 } },
-        expected: {
-          success: true,
-          hasOutputs: true,
-          outputCount: 2,
-        },
-      },
-    ])('should execute $name successfully', async ({ workflow, context, expected }) => {
-      const result = await engine.executeWorkflow(workflow, context)
-
-      expect(result.success).toBe(expected.success)
-      expect(result.error).toBeUndefined()
-      expect(Object.keys(result.outputs)).toHaveLength(expected.outputCount)
-      expect(result.logs.length).toBeGreaterThan(0)
-      expect(result.logs[0]).toContain(`Starting workflow: ${workflow.name}`)
-    })
-
-    it.each([
-      {
-        name: 'false condition stops execution',
-        workflow: createWorkflow('w4', 'Condition Workflow', [
-          createNode('n1', 'trigger', 'Start'),
-          createNode('n2', 'condition', 'Check', { condition: 'false' }),
-          createNode('n3', 'action', 'Never Run'),
-        ]),
-        context: { data: {} },
-        expected: {
-          success: true,
-          outputCount: 2, // Only trigger and condition, not the action
-          stoppedEarly: true,
-        },
-      },
-      {
-        name: 'true condition continues execution',
-        workflow: createWorkflow('w5', 'Pass Condition', [
-          createNode('n1', 'trigger', 'Start'),
-          createNode('n2', 'condition', 'Check', { condition: 'true' }),
-          createNode('n3', 'action', 'Should Run'),
-        ]),
-        context: { data: {} },
-        expected: {
-          success: true,
-          outputCount: 3, // All nodes execute
-          stoppedEarly: false,
-        },
-      },
-      {
-        name: 'data-based condition',
-        workflow: createWorkflow('w6', 'Data Condition', [
-          createNode('n1', 'trigger', 'Start'),
-          createNode('n2', 'condition', 'Check Value', { condition: 'data.value > 10' }),
-        ]),
-        context: { data: { value: 5 } },
-        expected: {
-          success: true,
-          outputCount: 2,
-          stoppedEarly: true,
-        },
-      },
-    ])('should handle $name', async ({ workflow, context, expected }) => {
-      const result = await engine.executeWorkflow(workflow, context)
-
-      expect(result.success).toBe(expected.success)
-      expect(Object.keys(result.outputs)).toHaveLength(expected.outputCount)
-      
-      if (expected.stoppedEarly) {
-        expect(result.logs.some(log => log.includes('stopping workflow'))).toBe(true)
-      }
-    })
-
-    it.each([
-      {
-        name: 'node with unknown type',
-        workflow: createWorkflow('w7', 'Invalid Node', [
-          createNode('n1', 'unknown' as any, 'Bad Node'),
-        ]),
-        context: { data: {} },
-        expectedError: 'Unknown node type',
-      },
-      {
-        name: 'invalid condition syntax',
-        workflow: createWorkflow('w8', 'Bad Condition', [
-          createNode('n1', 'trigger', 'Start'),
-          createNode('n2', 'condition', 'Invalid', { condition: 'invalid syntax !' }),
-        ]),
-        context: { data: {} },
-        expectedError: 'failed',
-      },
-      {
-        name: 'invalid transform syntax',
-        workflow: createWorkflow('w9', 'Bad Transform', [
-          createNode('n1', 'trigger', 'Start'),
-          createNode('n2', 'transform', 'Invalid', { transform: 'this is not valid javascript' }),
-        ]),
-        context: { data: {} },
-        expectedError: 'Transform failed',
-      },
-    ])('should handle node error: $name', async ({ workflow, context, expectedError }) => {
-      const result = await engine.executeWorkflow(workflow, context)
-
-      expect(result.success).toBe(false)
-      expect(result.error).toBeDefined()
-      expect(result.error?.toLowerCase()).toContain(expectedError.toLowerCase())
-      expect(result.logs.length).toBeGreaterThan(0)
-    })
-
-    it('retries a failing node until it succeeds', async () => {
-      const context: any = { data: { value: 10 }, meta: { attempts: 0 } }
-      const workflow = createWorkflow('w-retry', 'Retry Workflow', [
-        createNode('n1', 'trigger', 'Start'),
-        createNode('n2', 'transform', 'Retry Transform', {
-          retry: { maxAttempts: 3, delayMs: 0 },
-          transform:
-            '(() => { context.meta.attempts += 1; if (context.meta.attempts < 2) { throw new Error("boom"); } return data.value + 1; })()',
-        }),
-      ])
-
-      const result = await engine.executeWorkflow(workflow, context)
-
-      expect(result.success).toBe(true)
-      expect(result.outputs.n2).toBe(11)
-      expect(context.meta.attempts).toBe(2)
-      expect(result.logs.some(log => log.includes('Retrying node'))).toBe(true)
-    })
-
-    it('stops retrying after max attempts', async () => {
-      const context: any = { data: { value: 1 }, meta: { attempts: 0 } }
-      const workflow = createWorkflow('w-retry-fail', 'Retry Failure', [
-        createNode('n1', 'trigger', 'Start'),
-        createNode('n2', 'transform', 'Always Fail', {
-          retry: { maxAttempts: 2, delayMs: 0 },
-          transform:
-            '(() => { context.meta.attempts += 1; throw new Error("still failing"); })()',
-        }),
-      ])
-
-      const result = await engine.executeWorkflow(workflow, context)
-
-      expect(result.success).toBe(false)
-      expect(result.error?.toLowerCase()).toContain('transform failed')
-      expect(context.meta.attempts).toBe(2)
-      expect(result.logs.some(log => log.includes('Retrying node'))).toBe(true)
-    })
-  })
-
-  describe('Lua node execution', () => {
-    it.each([
-      {
-        name: 'simple Lua return',
-        node: createNode('n1', 'lua', 'Lua Node', { code: 'return 42' }),
-        data: {},
-        expectedOutput: 42,
-        expectedSuccess: true,
-      },
-      {
-        name: 'Lua with data access',
-        node: createNode('n2', 'lua', 'Data Access', { code: 'return context.data.value * 2' }),
-        data: { value: 21 },
-        expectedOutput: 42,
-        expectedSuccess: true,
-      },
-      {
-        name: 'Lua with default code',
-        node: createNode('n3', 'lua', 'Default'),
-        data: { test: 'value' },
-        expectedOutput: { test: 'value' },
-        expectedSuccess: true,
-      },
-    ])('should execute $name', async ({ node, data, expectedOutput, expectedSuccess }) => {
-      const workflow = createWorkflow('w-lua', 'Lua Test', [node])
-
-      const result = await engine.executeWorkflow(workflow, { data })
-
-      expect(result.success).toBe(expectedSuccess)
-      expect(result.outputs[node.id]).toEqual(expectedOutput)
-    })
-
-    it.each([
-      {
-        name: 'Lua with script reference',
-        scripts: [
-          { id: 'script1', name: 'Test Script', code: 'return 100', description: '' },
-        ] as LuaScript[],
-        node: createNode('n1', 'lua', 'Script Ref', { scriptId: 'script1' }),
-        expectedOutput: 100,
-      },
-      {
-        name: 'Lua with missing script',
-        scripts: [] as LuaScript[],
-        node: createNode('n2', 'lua', 'Missing Script', { scriptId: 'nonexistent' }),
-        expectedError: 'Script not found',
-      },
-    ])('should handle $name', async ({ scripts, node, expectedOutput, expectedError }) => {
-      const workflow = createWorkflow('w-script', 'Script Test', [node])
-
-      const result = await engine.executeWorkflow(workflow, { data: {}, scripts })
-
-      if (expectedError) {
-        expect(result.success).toBe(false)
-        expect(result.error).toContain(expectedError)
-      } else {
-        expect(result.success).toBe(true)
-        expect(result.outputs[node.id]).toBe(expectedOutput)
-      }
-    })
-
-    it.each([
-      {
-        name: 'syntax error',
-        code: 'this is not valid lua !!',
-        expectedError: true,
-      },
-      {
-        name: 'runtime error',
-        code: 'error("Intentional error")',
-        expectedError: true,
-      },
-    ])('should handle Lua error: $name', async ({ code, expectedError }) => {
-      const workflow = createWorkflow('w-error', 'Error Test', [
-        createNode('n1', 'lua', 'Error Node', { code }),
-      ])
-
-      const result = await engine.executeWorkflow(workflow, { data: {} })
-
-      expect(result.success).toBe(!expectedError)
-      if (expectedError) {
-        expect(result.error).toBeDefined()
-      }
-    })
-
-    it('should capture Lua security warnings', async () => {
-      // Test with code that might trigger security warnings
-      const workflow = createWorkflow('w-security', 'Security Test', [
-        createNode('n1', 'lua', 'Security Check', {
-          code: `
-            -- Attempting unsafe operations
-            return 42
-          `,
-        }),
-      ])
-
-      const result = await engine.executeWorkflow(workflow, { data: {} })
-
-      // Should still execute successfully due to sandbox
-      expect(result.success).toBe(true)
-      expect(result.securityWarnings).toBeDefined()
-    })
-  })
-
-  describe('logging and context', () => {
-    it('should capture logs from all nodes', async () => {
-      const workflow = createWorkflow('w-log', 'Log Test', [
-        createNode('n1', 'trigger', 'Start'),
-        createNode('n2', 'action', 'Action', { action: 'test' }),
-        createNode('n3', 'transform', 'Transform', { transform: '42' }),
-      ])
-
-      const result = await engine.executeWorkflow(workflow, { data: {} })
-
-      expect(result.logs.length).toBeGreaterThan(0)
-      expect(result.logs[0]).toContain('Starting workflow')
-      expect(result.logs.some(log => log.includes('Executing node'))).toBe(true)
-      expect(result.logs[result.logs.length - 1]).toContain('completed successfully')
-    })
-
-    it('should pass user context to nodes', async () => {
-      const user = { id: 'user1', name: 'Test User' }
-      const workflow = createWorkflow('w-user', 'User Context', [
-        createNode('n1', 'lua', 'Get User', { code: 'return context.user.name' }),
-      ])
-
-      const result = await engine.executeWorkflow(workflow, { data: {}, user })
-
-      expect(result.success).toBe(true)
-      expect(result.outputs.n1).toBe('Test User')
-    })
-  })
-
-  describe('complex workflow scenarios', () => {
-    it('should execute multi-stage workflow with data flow', async () => {
-      // Note: In this workflow, data flows through each node
-      // n1: trigger passes through initial data
-      // n2: transforms data.value to data.value + 10
-      // n3: condition evaluates data > 50, passes through boolean (true)
-      // n4: transforms data (now true/1) * 2 = 2
-      const workflow = createWorkflow('w-complex', 'Complex Workflow', [
-        createNode('n1', 'trigger', 'Start'),
-        createNode('n2', 'transform', 'Add 10', { transform: 'data.value + 10' }),
-        createNode('n3', 'condition', 'Check > 50', { condition: 'data > 50' }),
-        createNode('n4', 'transform', 'Double', { transform: 'data * 2' }),
-      ])
-
-      const result = await engine.executeWorkflow(workflow, { data: { value: 45 } })
-
-      expect(result.success).toBe(true)
-      expect(result.outputs.n2).toBe(55) // 45 + 10
-      expect(result.outputs.n3).toBe(true) // 55 > 50
-      // n4 receives `true` (JS coerces to 1) and multiplies by 2
-      expect(result.outputs.n4).toBe(2) // true * 2 = 2
-    })
-
-    it('should handle workflow with early termination', async () => {
-      const workflow = createWorkflow('w-early', 'Early Stop', [
-        createNode('n1', 'trigger', 'Start'),
-        createNode('n2', 'condition', 'Always False', { condition: 'false' }),
-        createNode('n3', 'action', 'Never Runs'),
-        createNode('n4', 'action', 'Also Never Runs'),
-      ])
-
-      const result = await engine.executeWorkflow(workflow, { data: {} })
-
-      expect(result.success).toBe(true)
-      expect(Object.keys(result.outputs)).toHaveLength(2) // Only n1 and n2
-      expect(result.outputs.n3).toBeUndefined()
-      expect(result.outputs.n4).toBeUndefined()
-    })
-  })
-})
diff --git a/frontends/nextjs/src/theme/types/components.d.ts b/frontends/nextjs/src/theme/types/components.d.ts
new file mode 100644
index 000000000..b3c850088
--- /dev/null
+++ b/frontends/nextjs/src/theme/types/components.d.ts
@@ -0,0 +1,71 @@
+import '@mui/material/styles'
+import '@mui/material/Typography'
+import '@mui/material/Button'
+import '@mui/material/Chip'
+import '@mui/material/IconButton'
+import '@mui/material/Badge'
+import '@mui/material/Alert'
+
+// Typography variants and component overrides
+declare module '@mui/material/styles' {
+  interface TypographyVariants {
+    code: React.CSSProperties
+    kbd: React.CSSProperties
+    label: React.CSSProperties
+  }
+
+  interface TypographyVariantsOptions {
+    code?: React.CSSProperties
+    kbd?: React.CSSProperties
+    label?: React.CSSProperties
+  }
+}
+
+declare module '@mui/material/Typography' {
+  interface TypographyPropsVariantOverrides {
+    code: true
+    kbd: true
+    label: true
+  }
+}
+
+declare module '@mui/material/Button' {
+  interface ButtonPropsVariantOverrides {
+    soft: true
+    ghost: true
+  }
+
+  interface ButtonPropsColorOverrides {
+    neutral: true
+  }
+}
+
+declare module '@mui/material/Chip' {
+  interface ChipPropsVariantOverrides {
+    soft: true
+  }
+
+  interface ChipPropsColorOverrides {
+    neutral: true
+  }
+}
+
+declare module '@mui/material/IconButton' {
+  interface IconButtonPropsColorOverrides {
+    neutral: true
+  }
+}
+
+declare module '@mui/material/Badge' {
+  interface BadgePropsColorOverrides {
+    neutral: true
+  }
+}
+
+declare module '@mui/material/Alert' {
+  interface AlertPropsVariantOverrides {
+    soft: true
+  }
+}
+
+export {}
diff --git a/frontends/nextjs/src/theme/types/layout.d.ts b/frontends/nextjs/src/theme/types/layout.d.ts
new file mode 100644
index 000000000..6c9219bfc
--- /dev/null
+++ b/frontends/nextjs/src/theme/types/layout.d.ts
@@ -0,0 +1,70 @@
+import '@mui/material/styles'
+
+// Custom theme properties for layout and design tokens
+declare module '@mui/material/styles' {
+  interface Theme {
+    custom: {
+      fonts: {
+        body: string
+        heading: string
+        mono: string
+      }
+      borderRadius: {
+        none: number
+        sm: number
+        md: number
+        lg: number
+        xl: number
+        full: number
+      }
+      contentWidth: {
+        sm: string
+        md: string
+        lg: string
+        xl: string
+        full: string
+      }
+      sidebar: {
+        width: number
+        collapsedWidth: number
+      }
+      header: {
+        height: number
+      }
+    }
+  }
+
+  interface ThemeOptions {
+    custom?: {
+      fonts?: {
+        body?: string
+        heading?: string
+        mono?: string
+      }
+      borderRadius?: {
+        none?: number
+        sm?: number
+        md?: number
+        lg?: number
+        xl?: number
+        full?: number
+      }
+      contentWidth?: {
+        sm?: string
+        md?: string
+        lg?: string
+        xl?: string
+        full?: string
+      }
+      sidebar?: {
+        width?: number
+        collapsedWidth?: number
+      }
+      header?: {
+        height?: number
+      }
+    }
+  }
+}
+
+export {}
diff --git a/frontends/nextjs/src/theme/types/palette.d.ts b/frontends/nextjs/src/theme/types/palette.d.ts
new file mode 100644
index 000000000..edf25b4a1
--- /dev/null
+++ b/frontends/nextjs/src/theme/types/palette.d.ts
@@ -0,0 +1,38 @@
+import '@mui/material/styles'
+
+// Extend palette with custom neutral colors
+declare module '@mui/material/styles' {
+  interface Palette {
+    neutral: {
+      50: string
+      100: string
+      200: string
+      300: string
+      400: string
+      500: string
+      600: string
+      700: string
+      800: string
+      900: string
+      950: string
+    }
+  }
+
+  interface PaletteOptions {
+    neutral?: {
+      50?: string
+      100?: string
+      200?: string
+      300?: string
+      400?: string
+      500?: string
+      600?: string
+      700?: string
+      800?: string
+      900?: string
+      950?: string
+    }
+  }
+}
+
+export {}
diff --git a/frontends/nextjs/src/theme/types/theme.d.ts b/frontends/nextjs/src/theme/types/theme.d.ts
index a8623d1fb..e3a795dd5 100644
--- a/frontends/nextjs/src/theme/types/theme.d.ts
+++ b/frontends/nextjs/src/theme/types/theme.d.ts
@@ -1,200 +1,10 @@
 /**
  * MUI Theme Type Extensions
- * 
- * This file extends Material-UI's theme interface with custom properties.
- * All custom design tokens and component variants should be declared here.
+ *
+ * This file aggregates the theme augmentation modules to keep the
+ * main declaration lightweight while still exposing all custom tokens.
  */
 
-import '@mui/material/styles'
-import '@mui/material/Typography'
-import '@mui/material/Button'
-
-// ============================================================================
-// Custom Palette Extensions
-// ============================================================================
-
-declare module '@mui/material/styles' {
-  // Extend palette with custom neutral colors
-  interface Palette {
-    neutral: {
-      50: string
-      100: string
-      200: string
-      300: string
-      400: string
-      500: string
-      600: string
-      700: string
-      800: string
-      900: string
-      950: string
-    }
-  }
-
-  interface PaletteOptions {
-    neutral?: {
-      50?: string
-      100?: string
-      200?: string
-      300?: string
-      400?: string
-      500?: string
-      600?: string
-      700?: string
-      800?: string
-      900?: string
-      950?: string
-    }
-  }
-
-  // Custom typography variants
-  interface TypographyVariants {
-    code: React.CSSProperties
-    kbd: React.CSSProperties
-    label: React.CSSProperties
-  }
-
-  interface TypographyVariantsOptions {
-    code?: React.CSSProperties
-    kbd?: React.CSSProperties
-    label?: React.CSSProperties
-  }
-
-  // Custom theme properties
-  interface Theme {
-    custom: {
-      fonts: {
-        body: string
-        heading: string
-        mono: string
-      }
-      borderRadius: {
-        none: number
-        sm: number
-        md: number
-        lg: number
-        xl: number
-        full: number
-      }
-      contentWidth: {
-        sm: string
-        md: string
-        lg: string
-        xl: string
-        full: string
-      }
-      sidebar: {
-        width: number
-        collapsedWidth: number
-      }
-      header: {
-        height: number
-      }
-    }
-  }
-
-  interface ThemeOptions {
-    custom?: {
-      fonts?: {
-        body?: string
-        heading?: string
-        mono?: string
-      }
-      borderRadius?: {
-        none?: number
-        sm?: number
-        md?: number
-        lg?: number
-        xl?: number
-        full?: number
-      }
-      contentWidth?: {
-        sm?: string
-        md?: string
-        lg?: string
-        xl?: string
-        full?: string
-      }
-      sidebar?: {
-        width?: number
-        collapsedWidth?: number
-      }
-      header?: {
-        height?: number
-      }
-    }
-  }
-}
-
-// ============================================================================
-// Typography Variant Mapping
-// ============================================================================
-
-declare module '@mui/material/Typography' {
-  interface TypographyPropsVariantOverrides {
-    code: true
-    kbd: true
-    label: true
-  }
-}
-
-// ============================================================================
-// Button Variants & Colors
-// ============================================================================
-
-declare module '@mui/material/Button' {
-  interface ButtonPropsVariantOverrides {
-    soft: true
-    ghost: true
-  }
-
-  interface ButtonPropsColorOverrides {
-    neutral: true
-  }
-}
-
-// ============================================================================
-// Chip Variants
-// ============================================================================
-
-declare module '@mui/material/Chip' {
-  interface ChipPropsVariantOverrides {
-    soft: true
-  }
-
-  interface ChipPropsColorOverrides {
-    neutral: true
-  }
-}
-
-// ============================================================================
-// IconButton Colors
-// ============================================================================
-
-declare module '@mui/material/IconButton' {
-  interface IconButtonPropsColorOverrides {
-    neutral: true
-  }
-}
-
-// ============================================================================
-// Badge Colors
-// ============================================================================
-
-declare module '@mui/material/Badge' {
-  interface BadgePropsColorOverrides {
-    neutral: true
-  }
-}
-
-// ============================================================================
-// Alert Variants
-// ============================================================================
-
-declare module '@mui/material/Alert' {
-  interface AlertPropsVariantOverrides {
-    soft: true
-  }
-}
-
-export {}
+export * from './palette'
+export * from './layout'
+export * from './components'
diff --git a/tools/analysis/test/cli.ts b/tools/analysis/test/cli.ts
new file mode 100644
index 000000000..32521d2e6
--- /dev/null
+++ b/tools/analysis/test/cli.ts
@@ -0,0 +1,8 @@
+#!/usr/bin/env tsx
+
+import { runTestAnalysis } from './report'
+
+runTestAnalysis(process.argv[2]).catch(error => {
+  console.error('Failed to generate test analysis report:', error)
+  process.exit(1)
+})
diff --git a/tools/analysis/test/report.ts b/tools/analysis/test/report.ts
new file mode 100644
index 000000000..a43a658a5
--- /dev/null
+++ b/tools/analysis/test/report.ts
@@ -0,0 +1,36 @@
+import { writeFileSync } from 'fs'
+import { analyzeCoverage, CoverageReport } from './analyze-test-coverage/coverage-runner'
+import { analyzeImplementations } from './analyze-implementation-completeness/analyze-implementations'
+import { summarizeAnalyses } from './analyze-implementation-completeness/summarize-analyses'
+import { AnalysisSummary } from './analyze-implementation-completeness/types'
+
+export interface TestAnalysisReport {
+  coverage: CoverageReport
+  implementationCompleteness: AnalysisSummary
+}
+
+export const buildTestAnalysisReport = async (): Promise<TestAnalysisReport> => {
+  const [coverage, implementationCompleteness] = await Promise.all([
+    analyzeCoverage(),
+    Promise.resolve(summarizeAnalyses(analyzeImplementations()))
+  ])
+
+  return { coverage, implementationCompleteness }
+}
+
+export const writeTestAnalysisReport = (report: TestAnalysisReport, outputPath = 'test-analysis-report.json'): void => {
+  try {
+    writeFileSync(outputPath, JSON.stringify(report, null, 2))
+    console.error(`Test analysis written to ${outputPath}`)
+  } catch (error) {
+    console.error(`Failed to write test analysis to ${outputPath}:`, error)
+  }
+}
+
+export const runTestAnalysis = async (outputPath?: string): Promise<void> => {
+  const report = await buildTestAnalysisReport()
+  const destination = outputPath ?? 'test-analysis-report.json'
+
+  writeTestAnalysisReport(report, destination)
+  console.log(JSON.stringify(report, null, 2))
+}
diff --git a/tools/generation/generate-test-coverage-report.js b/tools/generation/generate-test-coverage-report.js
deleted file mode 100644
index c6246fc13..000000000
--- a/tools/generation/generate-test-coverage-report.js
+++ /dev/null
@@ -1,199 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * Test Coverage Report Generator
- * 
- * Generates a comprehensive report of function-to-test mapping
- * Identifies untested functions and provides actionable recommendations
- */
-
-import fs from "fs";
-import path from "path";
-
-function findFiles(dir, pattern, ignore = []) {
-  let results = [];
-  try {
-    const files = fs.readdirSync(dir);
-
-    for (const file of files) {
-      const filepath = path.join(dir, file);
-      const stat = fs.statSync(filepath);
-      const relPath = path.relative(process.cwd(), filepath);
-
-      if (ignore.some(ign => relPath.includes(ign))) continue;
-
-      if (stat.isDirectory()) {
-        results = results.concat(findFiles(filepath, pattern, ignore));
-      } else if (pattern.test(file)) {
-        results.push(filepath);
-      }
-    }
-  } catch (e) {}
-  return results;
-}
-
-function extractFunctions(content) {
-  const functions = [];
-  const lines = content.split("\n");
-
-  lines.forEach((line, index) => {
-    const lineNum = index + 1;
-
-    // export function/const
-    const namedMatch = line.match(/export\s+(?:function|const|async\s+function|async\s+const)\s+(\w+)/);
-    if (namedMatch) {
-      functions.push({
-        name: namedMatch[1],
-        line: lineNum,
-        type: "export",
-      });
-    }
-  });
-
-  return functions;
-}
-
-function extractTestCases(content) {
-  const testNames = [];
-  const lines = content.split("\n");
-
-  lines.forEach((line) => {
-    // Match describe, it, test
-    const testMatch = line.match(/(?:describe|it|test)\s*\(\s*['"`]([^'"`]+)['"`]/);
-    if (testMatch) {
-      testNames.push(testMatch[1]);
-    }
-  });
-
-  return testNames;
-}
-
-function generateReport() {
-  const ignore = ["node_modules", ".next", "build", "dist", ".git"];
-
-  // Find all source and test files
-  const srcFiles = findFiles("src", /\.(ts|tsx)$/, ignore)
-    .concat(findFiles("packages", /\.(ts|tsx)$/, ignore))
-    .concat(findFiles("dbal/development", /\.(ts|tsx)$/, ignore))
-    .filter(f => !f.includes(".test.") && !f.includes(".spec."));
-
-  const testFiles = findFiles(".", /\.(test|spec)\.(ts|tsx)$/, ignore);
-
-  // Extract functions and tests
-  const functionsByFile = new Map();
-  const testsByFile = new Map();
-
-  srcFiles.forEach(file => {
-    try {
-      const content = fs.readFileSync(file, "utf-8");
-      const funcs = extractFunctions(content);
-      if (funcs.length > 0) {
-        functionsByFile.set(file, funcs);
-      }
-    } catch (e) {}
-  });
-
-  testFiles.forEach(file => {
-    try {
-      const content = fs.readFileSync(file, "utf-8");
-      const tests = extractTestCases(content);
-      if (tests.length > 0) {
-        testsByFile.set(file, tests);
-      }
-    } catch (e) {}
-  });
-
-  // Generate markdown report
-  let report = `# Function-to-Test Coverage Report\n\n`;
-  report += `Generated: ${new Date().toISOString()}\n\n`;
-
-  const totalFunctions = Array.from(functionsByFile.values()).reduce((sum, funcs) => sum + funcs.length, 0);
-  const totalTests = Array.from(testsByFile.values()).reduce((sum, tests) => sum + tests.length, 0);
-
-  report += `## Summary\n\n`;
-  report += `- **Total Functions**: ${totalFunctions}\n`;
-  report += `- **Total Test Cases**: ${totalTests}\n`;
-  report += `- **Source Files with Functions**: ${functionsByFile.size}\n`;
-  report += `- **Test Files**: ${testFiles.length}\n\n`;
-
-  report += `## Files with Function Coverage\n\n`;
-
-  const sortedFiles = Array.from(functionsByFile.entries()).sort((a, b) => {
-    const aPath = a[0];
-    const bPath = b[0];
-    return aPath.localeCompare(bPath);
-  });
-
-  sortedFiles.forEach(([file, funcs]) => {
-    const relFile = path.relative(process.cwd(), file);
-    const testFile = file.replace(/\.tsx?$/, ".test.ts").replace(/\.tsx?$/, ".test.tsx");
-    const hasTest = testFiles.includes(testFile) || testsByFile.has(testFile);
-    const status = hasTest ? "✅" : "❌";
-
-    report += `### ${status} ${relFile}\n\n`;
-    report += `**Functions**: ${funcs.length}\n\n`;
-
-    funcs.forEach(func => {
-      report += `- \`${func.name}\` (line ${func.line})\n`;
-    });
-
-    if (hasTest) {
-      const tests = testsByFile.get(testFile) || [];
-      report += `\n**Test Cases**: ${tests.length}\n\n`;
-    }
-
-    report += `\n`;
-  });
-
-  report += `## Test Files\n\n`;
-
-  testFiles.forEach(file => {
-    const relFile = path.relative(process.cwd(), file);
-    const tests = testsByFile.get(file) || [];
-
-    report += `### ${relFile}\n\n`;
-    report += `**Test Cases**: ${tests.length}\n\n`;
-
-    tests.forEach(test => {
-      report += `- ${test}\n`;
-    });
-
-    report += `\n`;
-  });
-
-  report += `## Recommendations\n\n`;
-
-  const untested = Array.from(functionsByFile.entries()).filter(
-    ([file]) => !testFiles.some(t => t.endsWith(file.replace(/\.(ts|tsx)$/, ".test.ts")))
-  );
-
-  if (untested.length > 0) {
-    report += `### Files Needing Test Coverage\n\n`;
-    untested.forEach(([file, funcs]) => {
-      const relFile = path.relative(process.cwd(), file);
-      report += `- **${relFile}**: ${funcs.length} functions need tests\n`;
-    });
-    report += `\n`;
-  }
-
-  report += `### Best Practices\n\n`;
-  report += `1. **Parameterized Tests**: Use \`it.each()\` for testing multiple similar scenarios\n`;
-  report += `2. **Test Organization**: Group related tests in \`describe()\` blocks\n`;
-  report += `3. **Clear Descriptions**: Use descriptive test names that explain what is being tested\n`;
-  report += `4. **Edge Cases**: Include tests for null, undefined, empty values, and boundary conditions\n`;
-  report += `5. **Mocking**: Use \`vi.fn()\` and \`vi.mock()\` for external dependencies\n`;
-  report += `6. **Async Testing**: Use \`async/await\` and \`act()\` for async operations\n`;
-  report += `7. **Setup/Teardown**: Use \`beforeEach\` and \`afterEach\` for test setup and cleanup\n\n`;
-
-  return report;
-}
-
-// Write report
-const report = generateReport();
-fs.writeFileSync("FUNCTION_TEST_COVERAGE.md", report);
-
-console.log("✅ Coverage report generated: FUNCTION_TEST_COVERAGE.md");
-console.log("\nTo run all tests:");
-console.log("  npm test -- --run\n");
-console.log("To run tests in watch mode:");
-console.log("  npm test\n");
diff --git a/tools/generation/generate-test-coverage-report.ts b/tools/generation/generate-test-coverage-report.ts
new file mode 100644
index 000000000..6ae348a1c
--- /dev/null
+++ b/tools/generation/generate-test-coverage-report.ts
@@ -0,0 +1,122 @@
+#!/usr/bin/env tsx
+
+import fs from 'fs'
+import path from 'path'
+
+import {
+  DEFAULT_IGNORE_PATHS,
+  SOURCE_DIRECTORIES,
+  type CoverageData,
+  type FunctionInfo,
+} from './report/data'
+import { buildReport } from './report/templates'
+
+const SRC_PATTERN = /\.(ts|tsx)$/
+const TEST_PATTERN = /(test|spec)\.(ts|tsx)$/
+
+const findFiles = (dir: string, pattern: RegExp, ignore: string[] = []) => {
+  let results: string[] = []
+
+  try {
+    const files = fs.readdirSync(dir)
+
+    for (const file of files) {
+      const filepath = path.join(dir, file)
+      const stat = fs.statSync(filepath)
+      const relPath = path.relative(process.cwd(), filepath)
+
+      if (ignore.some(ignored => relPath.includes(ignored))) continue
+
+      if (stat.isDirectory()) {
+        results = results.concat(findFiles(filepath, pattern, ignore))
+      } else if (pattern.test(file)) {
+        results.push(filepath)
+      }
+    }
+  } catch (error) {
+    console.warn(`Skipping unreadable path ${dir}:`, error)
+  }
+
+  return results
+}
+
+const extractFunctions = (content: string): FunctionInfo[] => {
+  const functions: FunctionInfo[] = []
+
+  content.split('\n').forEach((line, index) => {
+    const lineNum = index + 1
+    const namedMatch = line.match(/export\s+(?:function|const|async\s+function|async\s+const)\s+(\w+)/)
+
+    if (namedMatch) {
+      functions.push({
+        name: namedMatch[1],
+        line: lineNum,
+        type: 'export',
+      })
+    }
+  })
+
+  return functions
+}
+
+const extractTestCases = (content: string) => {
+  const testNames: string[] = []
+
+  content.split('\n').forEach(line => {
+    const testMatch = line.match(/(?:describe|it|test)\s*\(\s*['"`]([^'"`]+)['"`]/)
+    if (testMatch) {
+      testNames.push(testMatch[1])
+    }
+  })
+
+  return testNames
+}
+
+const collectCoverageData = (): CoverageData => {
+  const sourceFiles = SOURCE_DIRECTORIES.flatMap(dir => findFiles(dir, SRC_PATTERN, DEFAULT_IGNORE_PATHS)).filter(
+    file => !file.includes('.test.') && !file.includes('.spec.')
+  )
+  const testFiles = findFiles('.', TEST_PATTERN, DEFAULT_IGNORE_PATHS)
+
+  const functionsByFile = new Map<string, FunctionInfo[]>()
+  const testsByFile = new Map<string, string[]>()
+
+  sourceFiles.forEach(file => {
+    try {
+      const content = fs.readFileSync(file, 'utf-8')
+      const functions = extractFunctions(content)
+      if (functions.length) {
+        functionsByFile.set(file, functions)
+      }
+    } catch (error) {
+      console.warn(`Unable to read source file ${file}:`, error)
+    }
+  })
+
+  testFiles.forEach(file => {
+    try {
+      const content = fs.readFileSync(file, 'utf-8')
+      const tests = extractTestCases(content)
+      if (tests.length) {
+        testsByFile.set(file, tests)
+      }
+    } catch (error) {
+      console.warn(`Unable to read test file ${file}:`, error)
+    }
+  })
+
+  return { functionsByFile, testsByFile, testFiles }
+}
+
+const main = () => {
+  const report = buildReport(collectCoverageData())
+  fs.writeFileSync('FUNCTION_TEST_COVERAGE.md', report)
+
+  console.log('✅ Coverage report generated: FUNCTION_TEST_COVERAGE.md')
+  console.log('\nTo run all tests:')
+  console.log('  npm test -- --run\n')
+  console.log('To run tests in watch mode:')
+  console.log('  npm test\n')
+}
+
+main()
diff --git a/tools/generation/report/data.ts b/tools/generation/report/data.ts
new file mode 100644
index 000000000..c330e7220
--- /dev/null
+++ b/tools/generation/report/data.ts
@@ -0,0 +1,27 @@
+export type FunctionInfo = {
+  name: string
+  line: number
+  type: 'export'
+}
+
+export type CoverageData = {
+  functionsByFile: Map<string, FunctionInfo[]>
+  testsByFile: Map<string, string[]>
+  testFiles: string[]
+}
+
+export const DEFAULT_IGNORE_PATHS = ['node_modules', '.next', 'build', 'dist', '.git']
+
+export const SOURCE_DIRECTORIES = ['src', 'packages', 'dbal/development']
+
+export const TEST_FILE_SUFFIXES = ['.test.ts', '.test.tsx', '.spec.ts', '.spec.tsx']
+
+export const BEST_PRACTICES = [
+  '**Parameterized Tests**: Use `it.each()` for testing multiple similar scenarios',
+  '**Test Organization**: Group related tests in `describe()` blocks',
+  '**Clear Descriptions**: Use descriptive test names that explain what is being tested',
+  '**Edge Cases**: Include tests for null, undefined, empty values, and boundary conditions',
+  '**Mocking**: Use `vi.fn()` and `vi.mock()` for external dependencies',
+  '**Async Testing**: Use `async/await` and `act()` for async operations',
+  '**Setup/Teardown**: Use `beforeEach` and `afterEach` for test setup and cleanup',
+]
diff --git a/tools/generation/report/templates.ts b/tools/generation/report/templates.ts
new file mode 100644
index 000000000..b63e9fd04
--- /dev/null
+++ b/tools/generation/report/templates.ts
@@ -0,0 +1,110 @@
+import path from 'path'
+
+import { BEST_PRACTICES, TEST_FILE_SUFFIXES, type CoverageData } from './data'
+
+const findMatchingTestFile = (
+  sourceFile: string,
+  testFiles: string[],
+  testsByFile: Map<string, string[]>
+) => {
+  const base = sourceFile.replace(/\.(ts|tsx)$/, '')
+
+  return TEST_FILE_SUFFIXES
+    .map(suffix => `${base}${suffix}`)
+    .find(candidate => testFiles.includes(candidate) || testsByFile.has(candidate))
+}
+
+const buildSummary = ({ functionsByFile, testsByFile, testFiles }: CoverageData) => {
+  const totalFunctions = Array.from(functionsByFile.values()).reduce(
+    (sum, funcs) => sum + funcs.length,
+    0
+  )
+  const totalTests = Array.from(testsByFile.values()).reduce((sum, tests) => sum + tests.length, 0)
+
+  return [
+    '## Summary\n',
+    `- **Total Functions**: ${totalFunctions}`,
+    `- **Total Test Cases**: ${totalTests}`,
+    `- **Source Files with Functions**: ${functionsByFile.size}`,
+    `- **Test Files**: ${testFiles.length}\n`,
+  ].join('\n')
+}
+
+const buildFileCoverageSection = ({ functionsByFile, testsByFile, testFiles }: CoverageData) => {
+  const sortedFiles = Array.from(functionsByFile.entries()).sort(([a], [b]) => a.localeCompare(b))
+
+  const sections = sortedFiles.map(([file, funcs]) => {
+    const relFile = path.relative(process.cwd(), file)
+    const matchingTest = findMatchingTestFile(file, testFiles, testsByFile)
+    const status = matchingTest ? '✅' : '❌'
+
+    const functionDetails = funcs
+      .map(func => `- \`${func.name}\` (line ${func.line})`)
+      .join('\n')
+
+    const testDetails = matchingTest
+      ? [`\n**Test Cases**: ${(testsByFile.get(matchingTest) || []).length}\n`].join('')
+      : ''
+
+    return [
+      `### ${status} ${relFile}\n`,
+      `**Functions**: ${funcs.length}\n`,
+      functionDetails,
+      '\n',
+      testDetails,
+    ].join('\n')
+  })
+
+  return ['## Files with Function Coverage\n', ...sections, ''].join('\n')
+}
+
+const buildTestFilesSection = ({ testFiles, testsByFile }: CoverageData) => {
+  const sections = testFiles.map(file => {
+    const relFile = path.relative(process.cwd(), file)
+    const tests = testsByFile.get(file) || []
+
+    const cases = tests.map(test => `- ${test}`).join('\n')
+
+    return [`### ${relFile}\n`, `**Test Cases**: ${tests.length}\n`, cases, '\n'].join('\n')
+  })
+
+  return ['## Test Files\n', ...sections, ''].join('\n')
+}
+
+const buildRecommendations = ({ functionsByFile, testsByFile, testFiles }: CoverageData) => {
+  const untested = Array.from(functionsByFile.entries()).filter(
+    ([file]) => !findMatchingTestFile(file, testFiles, testsByFile)
+  )
+
+  const untestedLines = untested.length
+    ? [
+        '### Files Needing Test Coverage\n',
+        ...untested.map(([file, funcs]) => {
+          const relFile = path.relative(process.cwd(), file)
+          return `- **${relFile}**: ${funcs.length} functions need tests`
+        }),
+        '\n',
+      ]
+    : []
+
+  const bestPractices = BEST_PRACTICES.map((practice, index) => `${index + 1}. ${practice}`).join('\n')
+
+  return [
+    '## Recommendations\n',
+    ...untestedLines,
+    '### Best Practices\n',
+    `${bestPractices}\n`,
+  ].join('\n')
+}
+
+export const buildReport = (data: CoverageData) => {
+  return [
+    '# Function-to-Test Coverage Report\n',
+    `Generated: ${new Date().toISOString()}\n`,
+    buildSummary(data),
+    '',
+    buildFileCoverageSection(data),
+    buildTestFilesSection(data),
+    buildRecommendations(data),
+  ].join('\n')
+}