diff --git a/frontends/nextjs/src/app/level1-client.tsx b/frontends/nextjs/src/app/level1-client.tsx
deleted file mode 100644
index 2fa560e6c..000000000
--- a/frontends/nextjs/src/app/level1-client.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-'use client'
-
-import { useRouter } from 'next/navigation'
-
-import { Level1 } from '@/components/Level1'
-import type { AppLevel } from '@/lib/level-types'
-import { getLevelPath } from '@/lib/navigation/get-level-path'
-
-export function Level1Client() {
-  const router = useRouter()
-
-  const handleNavigate = (level: number) => {
-    const normalizedLevel = Math.min(6, Math.max(1, level)) as AppLevel
-    router.push(getLevelPath(normalizedLevel))
-  }
-
-  return <Level1 onNavigate={handleNavigate} />
-}
diff --git a/frontends/nextjs/src/app/levels/LevelsClient.test.tsx b/frontends/nextjs/src/app/levels/LevelsClient.test.tsx
deleted file mode 100644
index db3e0ffca..000000000
--- a/frontends/nextjs/src/app/levels/LevelsClient.test.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-
-import LevelsClient from './LevelsClient'
-
-describe('LevelsClient', () => {
-  it('renders permission levels and promotes to the next tier', () => {
-    render(<LevelsClient />)
-    expect(screen.getByText(/Level 1 · Public/)).toBeTruthy()
-
-    const promoteButton = screen.getByRole('button', { name: /Promote to/ })
-    fireEvent.click(promoteButton)
-
-    expect(screen.getByText(/Upgraded to User/)).toBeTruthy()
-  })
-})
diff --git a/frontends/nextjs/src/app/levels/LevelsClient.tsx b/frontends/nextjs/src/app/levels/LevelsClient.tsx
deleted file mode 100644
index eb6351352..000000000
--- a/frontends/nextjs/src/app/levels/LevelsClient.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-
-import { useMemo, useState } from 'react'
-
-import { Container, Stack, Typography } from '@/fakemui'
-
-import { LevelDetails } from './components/LevelDetails'
-import { LevelsGrid } from './components/LevelsGrid'
-import { PERMISSION_LEVELS } from './levels-data'
-
-export default function LevelsClient() {
-  const [selectedLevelId, setSelectedLevelId] = useState(PERMISSION_LEVELS[0].id)
-  const [note, setNote] = useState('')
-
-  const selectedLevel = useMemo(
-    () => PERMISSION_LEVELS.find(level => level.id === selectedLevelId) ?? PERMISSION_LEVELS[0],
-    [selectedLevelId]
-  )
-
-  const nextLevel = useMemo(
-    () => PERMISSION_LEVELS.find(level => level.id === selectedLevelId + 1) ?? null,
-    [selectedLevelId]
-  )
-
-  const maxCapabilityCount = useMemo(
-    () => Math.max(...PERMISSION_LEVELS.map(level => level.capabilities.length)),
-    []
-  )
-
-  const handleSelect = (levelId: number) => {
-    setSelectedLevelId(levelId)
-    setNote(
-      `Selected ${PERMISSION_LEVELS.find(l => l.id === levelId)?.title ?? 'unknown'} privileges.`
-    )
-  }
-
-  const handlePromote = () => {
-    if (!nextLevel) {
-      setNote('You already command the cosmos. No further promotions available.')
-      return
-    }
-    setSelectedLevelId(nextLevel.id)
-    setNote(`Upgraded to ${nextLevel.title}.`)
-  }
-
-  return (
-    <Container maxWidth="lg" sx={{ py: 8 }}>
-      <Stack spacing={4}>
-        <Stack spacing={1}>
-          <Typography variant="h3" component="h1">
-            The Six Permission Levels
-          </Typography>
-          <Typography color="text.secondary">
-            Level up through Public, User, Moderator, Admin, God, and Super God to unlock the right
-            controls for your role.
-          </Typography>
-        </Stack>
-
-        <LevelsGrid
-          levels={PERMISSION_LEVELS}
-          onSelect={handleSelect}
-          selectedLevelId={selectedLevelId}
-        />
-
-        <LevelDetails
-          selectedLevel={selectedLevel}
-          nextLevel={nextLevel}
-          maxCapabilityCount={maxCapabilityCount}
-          note={note}
-          onPromote={handlePromote}
-        />
-      </Stack>
-    </Container>
-  )
-}
diff --git a/frontends/nextjs/src/app/levels/components/LevelDetails.tsx b/frontends/nextjs/src/app/levels/components/LevelDetails.tsx
deleted file mode 100644
index e1eb8f56b..000000000
--- a/frontends/nextjs/src/app/levels/components/LevelDetails.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {
-  Alert,
-  Box,
-  Button,
-  Chip,
-  Divider,
-  LinearProgress,
-  Paper,
-  Stack,
-  Typography,
-} from '@/fakemui'
-
-import type { PermissionLevel } from '../levels-data'
-import { highlightColor } from '../utils/highlightColor'
-
-type LevelDetailsProps = {
-  selectedLevel: PermissionLevel
-  nextLevel: PermissionLevel | null
-  maxCapabilityCount: number
-  note: string
-  onPromote: () => void
-}
-
-export const LevelDetails = ({
-  selectedLevel,
-  nextLevel,
-  maxCapabilityCount,
-  note,
-  onPromote,
-}: LevelDetailsProps) => (
-  <Paper
-    sx={{
-      p: 4,
-      border: theme => `1px dashed ${theme.palette.divider}`,
-      bgcolor: 'background.paper',
-    }}
-  >
-    <Stack spacing={2}>
-      <Stack direction="row" alignItems="center" spacing={1}>
-        <Typography variant="h5">Selected level details</Typography>
-        <Chip label={selectedLevel.badge} size="small" color="secondary" />
-      </Stack>
-      <Typography variant="body1" color="text.secondary">
-        {selectedLevel.description}
-      </Typography>
-      <Stack direction="row" spacing={1} flexWrap="wrap">
-        {selectedLevel.capabilities.map(capability => (
-          <Chip
-            key={capability}
-            label={capability}
-            size="small"
-            sx={{ borderColor: highlightColor(selectedLevel) }}
-          />
-        ))}
-      </Stack>
-      <Stack spacing={1}>
-        <LinearProgress
-          variant="determinate"
-          value={(selectedLevel.capabilities.length / maxCapabilityCount) * 100}
-          sx={{ height: 10, borderRadius: 2 }}
-        />
-        <Typography variant="body2" color="text.secondary">
-          {selectedLevel.capabilities.length} of {maxCapabilityCount} capability tiers unlocked
-        </Typography>
-      </Stack>
-      <Divider />
-      <Box>
-        <Typography variant="subtitle2" gutterBottom>
-          Next move
-        </Typography>
-        {nextLevel ? (
-          <Typography variant="body2" color="text.secondary">
-            Promote into <strong>{nextLevel.title}</strong> to unlock{' '}
-            {nextLevel.capabilities.length} controls.
-          </Typography>
-        ) : (
-          <Typography variant="body2" color="text.secondary">
-            Super God reigns supreme. You already own every privilege.
-          </Typography>
-        )}
-      </Box>
-      <Box>
-        <Button variant="contained" onClick={onPromote}>
-          {nextLevel ? `Promote to ${nextLevel.title}` : 'Hold the crown'}
-        </Button>
-      </Box>
-      {note && <Alert severity="info">{note}</Alert>}
-    </Stack>
-  </Paper>
-)
diff --git a/frontends/nextjs/src/app/levels/components/LevelsGrid.tsx b/frontends/nextjs/src/app/levels/components/LevelsGrid.tsx
deleted file mode 100644
index 4fc5b9ac7..000000000
--- a/frontends/nextjs/src/app/levels/components/LevelsGrid.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Box, Chip, Grid, Paper, Stack, Typography } from '@/fakemui'
-
-import type { PermissionLevel } from '../levels-data'
-
-type LevelsGridProps = {
-  levels: PermissionLevel[]
-  selectedLevelId: number
-  onSelect: (levelId: number) => void
-}
-
-export const LevelsGrid = ({ levels, selectedLevelId, onSelect }: LevelsGridProps) => (
-  <Grid container spacing={3}>
-    {levels.map(level => (
-      <Grid item xs={12} md={6} lg={4} key={level.id} component="div">
-        <Paper
-          onClick={() => onSelect(level.id)}
-          sx={{
-            border: theme =>
-              `2px solid ${selectedLevelId === level.id ? theme.palette.primary.main : theme.palette.divider}`,
-            p: 3,
-            cursor: 'pointer',
-            position: 'relative',
-            '&:hover': {
-              borderColor: 'primary.main',
-            },
-          }}
-          elevation={selectedLevelId === level.id ? 6 : 1}
-        >
-          <Box sx={{ position: 'absolute', top: 16, right: 16 }}>
-            <Chip label={level.badge} />
-          </Box>
-          <Typography variant="h6">
-            Level {level.id} · {level.title}
-          </Typography>
-          <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
-            {level.tagline}
-          </Typography>
-          <Typography variant="body2" sx={{ mb: 2 }}>
-            {level.description}
-          </Typography>
-          <Stack direction="row" spacing={1} flexWrap="wrap">
-            {level.capabilities.slice(0, 3).map(capability => (
-              <Chip key={capability} label={capability} size="small" variant="outlined" />
-            ))}
-          </Stack>
-        </Paper>
-      </Grid>
-    ))}
-  </Grid>
-)
diff --git a/frontends/nextjs/src/app/levels/levels-data.ts b/frontends/nextjs/src/app/levels/levels-data.ts
deleted file mode 100644
index 37412ef3c..000000000
--- a/frontends/nextjs/src/app/levels/levels-data.ts
+++ /dev/null
@@ -1,100 +0,0 @@
-export type PermissionLevel = {
-  id: number
-  key: string
-  title: string
-  description: string
-  badge: string
-  capabilities: string[]
-  tagline: string
-}
-
-export const PERMISSION_LEVELS: PermissionLevel[] = [
-  {
-    id: 1,
-    key: 'public',
-    title: 'Public',
-    badge: '🌍',
-    description: 'Read-only access to marketing, help, and showcase pages without signing in.',
-    tagline: 'Open browsing with zero authentication.',
-    capabilities: [
-      'Access the landing experience',
-      'Follow feature stories',
-      'Preview public dashboards',
-    ],
-  },
-  {
-    id: 2,
-    key: 'user',
-    title: 'User',
-    badge: '🧑‍💻',
-    description:
-      'Personalized workspace for building content, saving dashboards, and collaborating.',
-    tagline: 'Everyday contributors and team members.',
-    capabilities: [
-      'Edit personal settings',
-      'Manage own content',
-      'Launch saved dashboards',
-      'Join shared workflows',
-    ],
-  },
-  {
-    id: 3,
-    key: 'moderator',
-    title: 'Moderator',
-    badge: '🛡️',
-    description:
-      'Protect the community by triaging flags, reviewing reports, and shaping shared spaces.',
-    tagline: 'Guardians of behavior and tone.',
-    capabilities: [
-      'Moderate discussions',
-      'Resolve user flags',
-      'Review incident reports',
-      'Hide or restore content',
-    ],
-  },
-  {
-    id: 4,
-    key: 'admin',
-    title: 'Admin',
-    badge: '🧰',
-    description:
-      'Tenant administrators who manage users, billing, policies, and broader content sets.',
-    tagline: 'Operational control for the tenant layer.',
-    capabilities: [
-      'Manage user accounts',
-      'Adjust tenant settings',
-      'Approve packages',
-      'Oversee moderation queue',
-    ],
-  },
-  {
-    id: 5,
-    key: 'god',
-    title: 'God',
-    badge: '🧙‍♂️',
-    description:
-      'Blueprint builders who orchestrate workflows, seed packages, and shape the system architecture.',
-    tagline: 'Power users with advanced scripting rights.',
-    capabilities: [
-      'Author workflows',
-      'Compose the builder UI',
-      'Define multi-tenant templates',
-      'Seed packages',
-    ],
-  },
-  {
-    id: 6,
-    key: 'supergod',
-    title: 'Super God',
-    badge: '👑',
-    description:
-      'Full sovereignty over every tenant, infrastructure, and override path in the universe.',
-    tagline: 'Ultimate authority for platform-level change.',
-    capabilities: [
-      'Assign god roles',
-      'Transfer ownership',
-      'Burn and restore tenants',
-      'Run system-wide audits',
-    ],
-  },
-]
diff --git a/frontends/nextjs/src/app/levels/page.tsx b/frontends/nextjs/src/app/levels/page.tsx
deleted file mode 100644
index 1c4df2e51..000000000
--- a/frontends/nextjs/src/app/levels/page.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import type { Metadata } from 'next'
-
-import LevelsClient from './LevelsClient'
-
-export const metadata: Metadata = {
-  title: 'Permission Levels',
-  description: 'Explore the five permission tiers that govern MetaBuilder.',
-}
-
-export default function LevelsPage() {
-  return <LevelsClient />
-}
diff --git a/frontends/nextjs/src/app/levels/utils/highlightColor.ts b/frontends/nextjs/src/app/levels/utils/highlightColor.ts
deleted file mode 100644
index 7606ea4d5..000000000
--- a/frontends/nextjs/src/app/levels/utils/highlightColor.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import type { PermissionLevel } from '../levels-data'
-
-export const highlightColor = (level: PermissionLevel) => {
-  if (level.id === 6) return 'warning.main'
-  if (level.id === 5) return 'primary.main'
-  return 'divider'
-}
diff --git a/frontends/nextjs/src/components/atoms/README.md b/frontends/nextjs/src/components/atoms/README.md
deleted file mode 100644
index e327e1764..000000000
--- a/frontends/nextjs/src/components/atoms/README.md
+++ /dev/null
@@ -1,115 +0,0 @@
-# Atoms
-
-Atoms are the smallest, indivisible UI elements in the MetaBuilder component library. Built on Material UI.
-
-## Components
-
-### Controls
-| Component | Description | MUI Base |
-|-----------|-------------|----------|
-| `Button` | Primary action button with variants | `MuiButton` |
-| `Checkbox` | Boolean toggle with optional label | `MuiCheckbox` |
-| `Switch` | Toggle switch with optional label | `MuiSwitch` |
-| `Radio` | Radio button with optional label | `MuiRadio` |
-
-### Inputs
-| Component | Description | MUI Base |
-|-----------|-------------|----------|
-| `Input` | Text input field | `InputBase` |
-| `TextArea` | Multi-line text input | `TextareaAutosize` |
-| `Select` | Dropdown selection | `MuiSelect` |
-
-### Display
-| Component | Description | MUI Base |
-|-----------|-------------|----------|
-| `Label` | Form field label | `Typography` |
-| `Badge` | Status indicator chip | `Chip` |
-| `Avatar` | User/entity image with fallback | `MuiAvatar` |
-| `IconButton` | Icon-only button | `MuiIconButton` |
-| `Icon` | Icon wrapper for fakemui icons | `@/fakemui/icons` |
-| `Link` | Navigation link with Next.js integration | `MuiLink` + `NextLink` |
-| `Text` | Typography with weight/alignment options | `Typography` |
-
-### Feedback
-| Component | Description | MUI Base |
-|-----------|-------------|----------|
-| `Skeleton` | Loading placeholder | `MuiSkeleton` |
-| `Separator` | Visual divider | `Divider` |
-| `Progress` | Progress indicator | `LinearProgress` |
-| `Tooltip` | Hover information | `MuiTooltip` |
-| `Spinner` | Loading spinner | `CircularProgress` |
-
-## Usage
-
-```typescript
-import { 
-  Button, Input, TextArea, Select, Radio, 
-  Label, Badge, Icon, Link, Text 
-} from '@/components/atoms'
-
-function MyComponent() {
-  return (
-    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-      <Label required>Username</Label>
-      <Input placeholder="Enter username" />
-      
-      <Label>Bio</Label>
-      <TextArea placeholder="Tell us about yourself" minRows={4} />
-      
-      <Label>Country</Label>
-      <Select 
-        options={[
-          { value: 'us', label: 'United States' },
-          { value: 'uk', label: 'United Kingdom' },
-        ]}
-        placeholder="Select country"
-      />
-      
-      <Radio label="Subscribe to newsletter" />
-      
-      <Text variant="body2" muted>
-        By submitting, you agree to our <Link href="/terms">Terms</Link>
-      </Text>
-      
-      <Button variant="contained" startIcon={<Icon name="Save" />}>
-        Save Profile
-      </Button>
-      
-      <Badge variant="success" label="Active" />
-    </Box>
-  )
-}
-```
-
-## Design Principles
-
-1. ✅ **Single responsibility** - Each atom does one thing well
-2. ✅ **MUI-powered** - Built on Material UI for consistency
-3. ✅ **Theme-aware** - Respects light/dark mode via `sx` prop
-4. ✅ **Accessible** - ARIA attributes and keyboard navigation
-5. ✅ **Composable** - Combine to build molecules
-6. ❌ **DON'T** import molecules or organisms
-7. ❌ **DON'T** add business logic
-8. ❌ **DON'T** use Tailwind classes (use MUI `sx` prop instead)
-
-## Styling
-
-All atoms use the MUI `sx` prop for styling, which provides:
-- Theme-aware values (colors, spacing, typography)
-- Responsive breakpoints
-- Dark/light mode support
-- Type-safe CSS properties
-
-```tsx
-<Button 
-  sx={{ 
-    mt: 2,              // theme.spacing(2)
-    bgcolor: 'primary.main',
-    '&:hover': {
-      bgcolor: 'primary.dark'
-    }
-  }}
->
-  Styled Button
-</Button>
-```
diff --git a/frontends/nextjs/src/components/atoms/controls/Button.tsx b/frontends/nextjs/src/components/atoms/controls/Button.tsx
deleted file mode 100644
index 80be1e9da..000000000
--- a/frontends/nextjs/src/components/atoms/controls/Button.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Button as FakemuiButton } from '@/fakemui'
-import type { ButtonProps as FakemuiButtonProps } from '@/fakemui/fakemui/inputs/Button'
-
-/** Button visual style variants */
-export type ButtonVariant = 'contained' | 'outlined' | 'text' | 'destructive' | 'ghost'
-
-/** Button size options */
-export type ButtonSize = 'small' | 'medium' | 'large' | 'icon'
-
-/**
- * Props for the Button component
- * Wrapper around fakemui Button to maintain API compatibility
- */
-export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'variant' | 'size'> {
-  /** Visual style variant of the button */
-  variant?: ButtonVariant
-  /** Size of the button */
-  size?: ButtonSize
-  /** Whether to show a loading spinner */
-  loading?: boolean
-  /** Compatibility prop - ignored */
-  asChild?: boolean
-  /** Start icon element */
-  startIcon?: React.ReactNode
-  /** End icon element */
-  endIcon?: React.ReactNode
-  /** Full width button */
-  fullWidth?: boolean
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = 'contained', size = 'medium', loading, disabled, children, sx, startIcon, endIcon, fullWidth, className, ...props }, ref) => {
-    // Map MUI variants to fakemui variants
-    const fakemuiVariant: FakemuiButtonProps['variant'] =
-      variant === 'contained' ? 'primary' :
-      variant === 'outlined' ? 'outline' :
-      variant === 'text' ? 'text' :
-      variant === 'destructive' ? 'danger' :
-      variant === 'ghost' ? 'ghost' :
-      'default'
-
-    // Map MUI sizes to fakemui sizes
-    const fakemuiSize: FakemuiButtonProps['size'] =
-      size === 'small' ? 'sm' :
-      size === 'large' ? 'lg' :
-      'md'
-
-    const isIcon = size === 'icon'
-
-    // Combine className with any sx-based classes
-    const combinedClassName = [className, sx?.className].filter(Boolean).join(' ')
-
-    return (
-      <FakemuiButton
-        ref={ref}
-        variant={fakemuiVariant}
-        size={fakemuiSize}
-        icon={isIcon}
-        loading={loading}
-        disabled={disabled}
-        fullWidth={fullWidth}
-        startIcon={startIcon}
-        endIcon={endIcon}
-        className={combinedClassName}
-        {...props}
-      >
-        {children}
-      </FakemuiButton>
-    )
-  }
-)
-
-Button.displayName = 'Button'
-
-export { Button }
diff --git a/frontends/nextjs/src/components/atoms/controls/Checkbox.tsx b/frontends/nextjs/src/components/atoms/controls/Checkbox.tsx
deleted file mode 100644
index e6f04bbf0..000000000
--- a/frontends/nextjs/src/components/atoms/controls/Checkbox.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Checkbox as FakemuiCheckbox } from '@/fakemui'
-
-/**
- * Props for the Checkbox component
- * Wrapper around fakemui Checkbox to maintain API compatibility
- */
-export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-  /** Optional label text to display next to the checkbox */
-  label?: React.ReactNode
-  /** Whether the checkbox is in an error state (MUI compatibility) */
-  error?: boolean
-  /** MUI color prop (ignored for compatibility) */
-  color?: string
-  /** MUI size prop (ignored for compatibility) */
-  size?: string
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-}
-
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({ label, error, color, size, sx, className, ...props }, ref) => {
-  // Combine className with any sx-based classes
-  const combinedClassName = [className, sx?.className, error ? 'checkbox--error' : ''].filter(Boolean).join(' ')
-
-  return (
-    <FakemuiCheckbox
-      ref={ref}
-      label={label}
-      className={combinedClassName}
-      {...props}
-    />
-  )
-})
-
-Checkbox.displayName = 'Checkbox'
-
-export { Checkbox }
diff --git a/frontends/nextjs/src/components/atoms/controls/Radio.test.tsx b/frontends/nextjs/src/components/atoms/controls/Radio.test.tsx
deleted file mode 100644
index 03d263ba7..000000000
--- a/frontends/nextjs/src/components/atoms/controls/Radio.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { Radio } from './Radio'
-
-describe('Radio', () => {
-  it.each([
-    { label: 'Option A', value: 'a' },
-    { label: 'Option B', value: 'b' },
-    { label: undefined, value: 'c' },
-  ])('renders with props %o', ({ label, value }) => {
-    render(<Radio label={label} value={value} />)
-    const radio = screen.getByRole('radio')
-    expect(radio).not.toBeNull()
-    if (label) {
-      expect(screen.getByText(label)).not.toBeNull()
-    }
-  })
-
-  it('renders checked state', () => {
-    render(<Radio label="Selected" checked onChange={() => {}} />)
-    const radio = screen.getByRole('radio') as HTMLInputElement
-    expect(radio.checked).toBe(true)
-  })
-
-  it('renders disabled state', () => {
-    render(<Radio label="Disabled" disabled />)
-    const radio = screen.getByRole('radio') as HTMLInputElement
-    expect(radio.disabled).toBe(true)
-  })
-})
diff --git a/frontends/nextjs/src/components/atoms/controls/Radio.tsx b/frontends/nextjs/src/components/atoms/controls/Radio.tsx
deleted file mode 100644
index 784610355..000000000
--- a/frontends/nextjs/src/components/atoms/controls/Radio.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Radio as FakemuiRadio } from '@/fakemui'
-
-/**
- * Props for the Radio component
- * Wrapper around fakemui Radio to maintain API compatibility
- */
-export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-  /** Optional label text to display next to the radio */
-  label?: React.ReactNode
-  /** MUI color prop (ignored for compatibility) */
-  color?: string
-  /** MUI size prop (ignored for compatibility) */
-  size?: string
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-}
-
-const Radio = forwardRef<HTMLInputElement, RadioProps>(({ label, color, size, sx, className, ...props }, ref) => {
-  // Combine className with any sx-based classes
-  const combinedClassName = [className, sx?.className].filter(Boolean).join(' ')
-
-  return (
-    <FakemuiRadio
-      ref={ref}
-      label={label}
-      className={combinedClassName}
-      {...props}
-    />
-  )
-})
-
-Radio.displayName = 'Radio'
-
-export { Radio }
diff --git a/frontends/nextjs/src/components/atoms/controls/Switch.tsx b/frontends/nextjs/src/components/atoms/controls/Switch.tsx
deleted file mode 100644
index aaebd71e4..000000000
--- a/frontends/nextjs/src/components/atoms/controls/Switch.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Switch as FakemuiSwitch } from '@/fakemui'
-
-/**
- * Props for the Switch component
- * Wrapper around fakemui Switch to maintain API compatibility
- */
-export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
-  /** Optional label text to display next to the switch */
-  label?: React.ReactNode
-  /** MUI color prop (ignored for compatibility) */
-  color?: string
-  /** MUI size prop (ignored for compatibility) */
-  size?: string
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-}
-
-const Switch = forwardRef<HTMLInputElement, SwitchProps>(({ label, color, size, sx, className, ...props }, ref) => {
-  // Combine className with any sx-based classes
-  const combinedClassName = [className, sx?.className].filter(Boolean).join(' ')
-
-  return (
-    <FakemuiSwitch
-      ref={ref}
-      label={label}
-      className={combinedClassName}
-      {...props}
-    />
-  )
-})
-
-Switch.displayName = 'Switch'
-
-export { Switch }
diff --git a/frontends/nextjs/src/components/atoms/display/Avatar.tsx b/frontends/nextjs/src/components/atoms/display/Avatar.tsx
deleted file mode 100644
index 067a8a0d4..000000000
--- a/frontends/nextjs/src/components/atoms/display/Avatar.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Avatar as FakemuiAvatar, AvatarGroup as FakemuiAvatarGroup } from '@/fakemui'
-
-/** Avatar size options */
-export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
-/**
- * Props for the Avatar component
- * Wrapper around fakemui Avatar to maintain API compatibility
- */
-export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Size of the avatar */
-  size?: AvatarSize
-  /** Fallback text to display when no image is provided */
-  fallback?: string
-  /** Image source */
-  src?: string
-  /** Alt text for image */
-  alt?: string
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-}
-
-const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
-  ({ size = 'md', fallback, children, sx, src, alt, className, ...props }, ref) => {
-    // Map size to fakemui size props
-    const sizeProps = {
-      sm: size === 'xs' || size === 'sm',
-      md: size === 'md',
-      lg: size === 'lg',
-      xl: size === 'xl',
-    }
-
-    // Combine className with any sx-based classes
-    const combinedClassName = [className, sx?.className].filter(Boolean).join(' ')
-
-    return (
-      <FakemuiAvatar
-        ref={ref}
-        src={src}
-        alt={alt}
-        className={combinedClassName}
-        {...sizeProps}
-        {...props}
-      >
-        {children || fallback}
-      </FakemuiAvatar>
-    )
-  }
-)
-
-Avatar.displayName = 'Avatar'
-
-// Re-export AvatarGroup and create compatibility components
-const AvatarGroup = FakemuiAvatarGroup
-const AvatarFallback = ({ children }: { children: React.ReactNode }) => <>{children}</>
-const AvatarImage = Avatar
-
-export { Avatar, AvatarFallback, AvatarGroup, AvatarImage }
diff --git a/frontends/nextjs/src/components/atoms/display/Badge.tsx b/frontends/nextjs/src/components/atoms/display/Badge.tsx
deleted file mode 100644
index 2aace2c7b..000000000
--- a/frontends/nextjs/src/components/atoms/display/Badge.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Chip } from '@/fakemui'
-
-/** Badge visual style variants */
-export type BadgeVariant =
-  | 'default'
-  | 'secondary'
-  | 'destructive'
-  | 'outline'
-  | 'success'
-  | 'warning'
-
-/**
- * Props for the Badge component
- * Uses fakemui Chip component for badge functionality
- */
-export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Visual style variant of the badge */
-  variant?: BadgeVariant
-  /** Label text */
-  label?: string | React.ReactNode
-  /** Size of the badge */
-  size?: 'small' | 'medium'
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-  /** Whether badge is clickable */
-  clickable?: boolean
-  /** Delete handler */
-  onDelete?: () => void
-}
-
-const Badge = forwardRef<HTMLDivElement, BadgeProps>(
-  ({ variant = 'default', size = 'small', label, children, sx, className, ...props }, ref) => {
-    // Map variant to color class
-    const variantClass =
-      variant === 'destructive' ? 'chip--error' :
-      variant === 'success' ? 'chip--success' :
-      variant === 'warning' ? 'chip--warning' :
-      variant === 'secondary' ? 'chip--secondary' :
-      variant === 'outline' ? 'chip--outline' :
-      ''
-
-    // Combine className with any sx-based classes
-    const combinedClassName = [className, sx?.className, variantClass].filter(Boolean).join(' ')
-
-    return (
-      <Chip
-        ref={ref}
-        label={label || children}
-        size={size}
-        className={combinedClassName}
-        {...props}
-      />
-    )
-  }
-)
-
-Badge.displayName = 'Badge'
-
-export { Badge }
diff --git a/frontends/nextjs/src/components/atoms/display/Icon.test.tsx b/frontends/nextjs/src/components/atoms/display/Icon.test.tsx
deleted file mode 100644
index a58a1badb..000000000
--- a/frontends/nextjs/src/components/atoms/display/Icon.test.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { render } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { Icon, type IconName } from './Icon'
-
-describe('Icon', () => {
-  it.each([
-    { name: 'Home', size: 'small' },
-    { name: 'Settings', size: 'medium' },
-    { name: 'Trash', size: 'large' },
-    { name: 'Plus', size: 'inherit' },
-  ] as const)('renders icon $name with size $size', ({ name, size }) => {
-    const { container } = render(<Icon name={name} size={size} />)
-    expect(container.querySelector('svg')).not.toBeNull()
-  })
-
-  it('applies custom sx styles', () => {
-    const { container } = render(<Icon name="Home" sx={{ color: 'blue' }} />)
-    expect(container.querySelector('svg')).not.toBeNull()
-  })
-
-  it('returns null for unknown icon', () => {
-    const { container } = render(<Icon name={'UnknownIcon' as IconName} />)
-    expect(container.querySelector('svg')).toBeNull()
-  })
-})
diff --git a/frontends/nextjs/src/components/atoms/display/Icon.tsx b/frontends/nextjs/src/components/atoms/display/Icon.tsx
deleted file mode 100644
index 0e93fac73..000000000
--- a/frontends/nextjs/src/components/atoms/display/Icon.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client'
-
-import { CSSProperties, forwardRef } from 'react'
-
-import * as FakeMuiIcons from '@/fakemui/icons'
-
-// Create a type from the available fakemui icons
-export type IconName = keyof typeof FakeMuiIcons
-export type IconSize = 'small' | 'medium' | 'large' | 'inherit'
-
-export interface IconProps {
-  name: IconName
-  size?: IconSize
-  sx?: CSSProperties & Record<string, unknown>
-  className?: string
-  style?: CSSProperties
-}
-
-const sizeMap = {
-  small: 20,
-  medium: 24,
-  large: 32,
-  inherit: undefined,
-}
-
-const Icon = forwardRef<SVGSVGElement, IconProps>(
-  ({ name, size = 'medium', sx, className, style, ...props }, ref) => {
-    const IconComponent = FakeMuiIcons[name]
-
-    if (!IconComponent || typeof IconComponent !== 'function') {
-      console.warn(`Icon "${name}" not found in @/fakemui/icons`)
-      return null
-    }
-
-    const sizeValue = sizeMap[size]
-    const combinedStyle = { ...style, ...sx }
-
-    return (
-      <IconComponent
-        size={sizeValue}
-        style={combinedStyle}
-        className={className}
-        {...props}
-      />
-    )
-  }
-)
-
-Icon.displayName = 'Icon'
-
-export { Icon }
diff --git a/frontends/nextjs/src/components/atoms/display/IconButton.tsx b/frontends/nextjs/src/components/atoms/display/IconButton.tsx
deleted file mode 100644
index 64ed6d8c4..000000000
--- a/frontends/nextjs/src/components/atoms/display/IconButton.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { IconButton as FakemuiIconButton } from '@/fakemui'
-
-/** IconButton size options */
-export type IconButtonSize = 'small' | 'medium' | 'large'
-
-/**
- * Props for the IconButton component
- * Wrapper around fakemui IconButton to maintain API compatibility
- */
-export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /** Visual style variant of the icon button */
-  variant?: 'default' | 'outlined' | 'contained'
-  /** Size of the icon button */
-  size?: IconButtonSize
-  /** MUI color prop (ignored for compatibility) */
-  color?: string
-  /** MUI edge prop (ignored for compatibility) */
-  edge?: string | false
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-}
-
-const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(
-  ({ variant = 'default', size = 'medium', color, edge, sx, className, ...props }, ref) => {
-    // Map size to fakemui size props
-    const sizeProps = {
-      sm: size === 'small',
-      lg: size === 'large',
-    }
-
-    // Map variant to className
-    const variantClass =
-      variant === 'outlined' ? 'icon-btn--outlined' :
-      variant === 'contained' ? 'icon-btn--contained' :
-      ''
-
-    // Combine className with any sx-based classes
-    const combinedClassName = [className, sx?.className, variantClass].filter(Boolean).join(' ')
-
-    return (
-      <FakemuiIconButton
-        ref={ref}
-        className={combinedClassName}
-        {...sizeProps}
-        {...props}
-      />
-    )
-  }
-)
-
-IconButton.displayName = 'IconButton'
-
-export { IconButton }
diff --git a/frontends/nextjs/src/components/atoms/display/Label.tsx b/frontends/nextjs/src/components/atoms/display/Label.tsx
deleted file mode 100644
index 574122883..000000000
--- a/frontends/nextjs/src/components/atoms/display/Label.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client'
-
-import { forwardRef, LabelHTMLAttributes } from 'react'
-
-import { Label as FakemuiLabel } from '@/fakemui'
-
-/**
- * Props for the Label component
- * Wrapper around fakemui Label to maintain API compatibility
- */
-export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
-  /** Whether to display a required indicator (*) */
-  required?: boolean
-  /** Whether to style the label as an error state */
-  error?: boolean
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-}
-
-const Label = forwardRef<HTMLLabelElement, LabelProps>(
-  ({ children, required, error, sx, className, ...props }, ref) => {
-    // Combine className with any sx-based classes
-    const combinedClassName = [
-      className,
-      sx?.className,
-      error ? 'label--error' : '',
-    ].filter(Boolean).join(' ')
-
-    return (
-      <label ref={ref} className={`label ${combinedClassName}`} {...props}>
-        {children}
-        {required && <span className="label__required"> *</span>}
-      </label>
-    )
-  }
-)
-
-Label.displayName = 'Label'
-
-export { Label }
diff --git a/frontends/nextjs/src/components/atoms/display/Link.test.tsx b/frontends/nextjs/src/components/atoms/display/Link.test.tsx
deleted file mode 100644
index c106da4bb..000000000
--- a/frontends/nextjs/src/components/atoms/display/Link.test.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { Link } from './Link'
-
-describe('Link', () => {
-  it.each([
-    { href: '/about', external: false, children: 'About Us' },
-    { href: '/contact', external: false, children: 'Contact' },
-    { href: 'https://example.com', external: true, children: 'External Link' },
-  ])('renders link with props %o', ({ href, external, children }) => {
-    render(
-      <Link href={href} external={external}>
-        {children}
-      </Link>
-    )
-    const link = screen.getByText(children)
-    expect(link).not.toBeNull()
-    expect(link.getAttribute('href')).not.toBeNull()
-  })
-
-  it('renders external link with correct attributes', () => {
-    render(
-      <Link href="https://example.com" external>
-        External
-      </Link>
-    )
-    const link = screen.getByText('External')
-    expect(link.getAttribute('target')).toBe('_blank')
-    expect(link.getAttribute('rel')).toBe('noopener noreferrer')
-  })
-
-  it('renders internal link without target', () => {
-    render(<Link href="/internal">Internal</Link>)
-    const link = screen.getByText('Internal')
-    expect(link.getAttribute('target')).toBeNull()
-  })
-})
diff --git a/frontends/nextjs/src/components/atoms/display/Link.tsx b/frontends/nextjs/src/components/atoms/display/Link.tsx
deleted file mode 100644
index 3f77e7a0f..000000000
--- a/frontends/nextjs/src/components/atoms/display/Link.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client'
-
-import NextLink, { LinkProps as NextLinkProps } from 'next/link'
-import { forwardRef } from 'react'
-
-import { Link as FakemuiLink } from '@/fakemui'
-
-/**
- * Props for the Link component
- * Wrapper around fakemui Link with Next.js integration
- */
-export interface LinkProps extends Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'> {
-  /** Link href (Next.js or external URL) */
-  href: NextLinkProps['href']
-  /** Whether this is an external link */
-  external?: boolean
-  /** Link underline style */
-  underline?: 'none' | 'hover' | 'always'
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-  /** MUI component prop (ignored for compatibility) */
-  component?: any
-}
-
-const Link = forwardRef<HTMLAnchorElement, LinkProps>(
-  ({ href, external, children, underline = 'hover', sx, className, component, ...props }, ref) => {
-    // Combine className with any sx-based classes
-    const combinedClassName = [className, sx?.className].filter(Boolean).join(' ')
-
-    if (external) {
-      return (
-        <FakemuiLink
-          ref={ref}
-          href={href as string}
-          target="_blank"
-          rel="noopener noreferrer"
-          underline={underline}
-          className={combinedClassName}
-          {...props}
-        >
-          {children}
-        </FakemuiLink>
-      )
-    }
-
-    // For internal links, wrap fakemui Link with Next.js Link
-    return (
-      <NextLink href={href} passHref legacyBehavior>
-        <FakemuiLink
-          ref={ref}
-          underline={underline}
-          className={combinedClassName}
-          {...props}
-        >
-          {children}
-        </FakemuiLink>
-      </NextLink>
-    )
-  }
-)
-
-Link.displayName = 'Link'
-
-export { Link }
diff --git a/frontends/nextjs/src/components/atoms/display/Text.test.tsx b/frontends/nextjs/src/components/atoms/display/Text.test.tsx
deleted file mode 100644
index a8aee5c31..000000000
--- a/frontends/nextjs/src/components/atoms/display/Text.test.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { Text } from './Text'
-
-describe('Text', () => {
-  it.each([
-    { variant: 'h1', weight: 'bold', children: 'Heading 1' },
-    { variant: 'h2', weight: 'semibold', children: 'Heading 2' },
-    { variant: 'body1', weight: 'regular', children: 'Body text' },
-    { variant: 'body2', weight: 'light', children: 'Small text' },
-    { variant: 'caption', weight: 'medium', children: 'Caption' },
-  ] as const)('renders with variant=$variant weight=$weight', ({ variant, weight, children }) => {
-    render(
-      <Text variant={variant} weight={weight}>
-        {children}
-      </Text>
-    )
-    expect(screen.getByText(children)).not.toBeNull()
-  })
-
-  it.each([
-    { align: 'left', children: 'Left aligned' },
-    { align: 'center', children: 'Centered' },
-    { align: 'right', children: 'Right aligned' },
-  ] as const)('renders with align=$align', ({ align, children }) => {
-    render(<Text align={align}>{children}</Text>)
-    expect(screen.getByText(children)).not.toBeNull()
-  })
-
-  it('renders muted text', () => {
-    render(<Text muted>Muted text</Text>)
-    expect(screen.getByText('Muted text')).not.toBeNull()
-  })
-
-  it('renders truncated text', () => {
-    render(<Text truncate>Very long text that should truncate</Text>)
-    expect(screen.getByText('Very long text that should truncate')).not.toBeNull()
-  })
-})
diff --git a/frontends/nextjs/src/components/atoms/display/Text.tsx b/frontends/nextjs/src/components/atoms/display/Text.tsx
deleted file mode 100644
index 9d87f1feb..000000000
--- a/frontends/nextjs/src/components/atoms/display/Text.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Text as FakemuiText, Typography } from '@/fakemui'
-
-export type TextVariant =
-  | 'h1'
-  | 'h2'
-  | 'h3'
-  | 'h4'
-  | 'h5'
-  | 'h6'
-  | 'body1'
-  | 'body2'
-  | 'subtitle1'
-  | 'subtitle2'
-  | 'caption'
-  | 'overline'
-
-export type TextWeight = 'light' | 'regular' | 'medium' | 'semibold' | 'bold'
-export type TextAlign = 'left' | 'center' | 'right' | 'justify'
-
-/**
- * Props for the Text component
- * Wrapper around fakemui Text/Typography to maintain API compatibility
- */
-export interface TextProps extends React.HTMLAttributes<HTMLElement> {
-  /** Typography variant (MUI compatibility) */
-  variant?: TextVariant
-  /** Font weight */
-  weight?: TextWeight
-  /** Text alignment */
-  align?: TextAlign
-  /** Muted/secondary text style */
-  muted?: boolean
-  /** Truncate text with ellipsis */
-  truncate?: boolean
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-  /** MUI component prop - specify HTML element */
-  component?: React.ElementType
-}
-
-const weightMap = {
-  light: 'font-light',
-  regular: 'font-normal',
-  medium: 'font-medium',
-  semibold: 'font-semibold',
-  bold: 'font-bold',
-}
-
-const Text = forwardRef<HTMLElement, TextProps>(
-  (
-    { variant = 'body1', weight = 'regular', align = 'left', muted, truncate, sx, className, component, ...props },
-    ref
-  ) => {
-    // For heading variants, use Typography
-    if (variant && ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(variant)) {
-      const combinedClassName = [
-        className,
-        sx?.className,
-        weightMap[weight],
-        muted ? 'text-secondary' : '',
-        truncate ? 'truncate' : '',
-        `text-${align}`,
-      ].filter(Boolean).join(' ')
-
-      return (
-        <Typography
-          ref={ref as any}
-          variant={variant}
-          className={combinedClassName}
-          as={component}
-          {...props}
-        />
-      )
-    }
-
-    // For body/caption variants, use fakemui Text
-    const combinedClassName = [
-      className,
-      sx?.className,
-      weightMap[weight],
-      `text-${align}`,
-    ].filter(Boolean).join(' ')
-
-    return (
-      <FakemuiText
-        ref={ref as any}
-        secondary={muted}
-        truncate={truncate}
-        className={combinedClassName}
-        as={component || 'span'}
-        {...props}
-      />
-    )
-  }
-)
-
-Text.displayName = 'Text'
-
-export { Text }
diff --git a/frontends/nextjs/src/components/atoms/feedback/ErrorBoundary.tsx b/frontends/nextjs/src/components/atoms/feedback/ErrorBoundary.tsx
deleted file mode 100644
index 7e3c38ed6..000000000
--- a/frontends/nextjs/src/components/atoms/feedback/ErrorBoundary.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-
-import React, { Component, ReactNode } from 'react'
-
-import { Alert, Button, Typography } from '@/fakemui'
-import { logError, LogLevel } from '@/lib/errors/log-error'
-
-interface Props {
-  children: ReactNode
-  fallback?: ReactNode
-  onError?: (error: Error, errorInfo: React.ErrorInfo) => void
-}
-
-interface State {
-  hasError: boolean
-  error?: Error
-}
-
-/**
- * Error Boundary component to catch React rendering errors
- * Logs errors and displays a fallback UI
- */
-export class ErrorBoundary extends Component<Props, State> {
-  constructor(props: Props) {
-    super(props)
-    this.state = { hasError: false }
-  }
-
-  static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error }
-  }
-
-  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
-    // Log error with component stack
-    logError(
-      error,
-      {
-        component: 'ErrorBoundary',
-        componentStack: errorInfo.componentStack,
-      },
-      LogLevel.ERROR
-    )
-
-    // Call custom error handler if provided
-    this.props.onError?.(error, errorInfo)
-  }
-
-  handleReset = (): void => {
-    this.setState({ hasError: false, error: undefined })
-  }
-
-  render(): ReactNode {
-    if (this.state.hasError) {
-      // Use custom fallback if provided
-      if (this.props.fallback) {
-        return this.props.fallback
-      }
-
-      // Default error UI
-      return (
-        <div style={{ padding: '1.5rem' }}>
-          <Alert severity="error" style={{ marginBottom: '1rem' }}>
-            <Typography variant="h6">
-              Something went wrong
-            </Typography>
-            <Typography variant="body2" style={{ marginBottom: '1rem' }}>
-              {this.state.error?.message || 'An unexpected error occurred'}
-            </Typography>
-            <Button variant="primary" onClick={this.handleReset} size="sm">
-              Try Again
-            </Button>
-          </Alert>
-        </div>
-      )
-    }
-
-    return this.props.children
-  }
-}
diff --git a/frontends/nextjs/src/components/atoms/feedback/Progress.tsx b/frontends/nextjs/src/components/atoms/feedback/Progress.tsx
deleted file mode 100644
index 06b24ef2e..000000000
--- a/frontends/nextjs/src/components/atoms/feedback/Progress.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { CircularProgress,LinearProgress } from '@/fakemui'
-
-/**
- * Props for the Progress component
- * Wrapper around fakemui LinearProgress to maintain API compatibility
- */
-export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Progress value (0-100) */
-  value?: number
-  /** Whether to display a percentage label next to the progress bar */
-  showLabel?: boolean
-  /** Variant of the progress bar */
-  variant?: 'determinate' | 'indeterminate'
-  /** Color of the progress bar */
-  color?: string
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-}
-
-const Progress = forwardRef<HTMLDivElement, ProgressProps>(
-  ({ value, showLabel, variant, color, sx, className, ...props }, ref) => {
-    // Combine className with any sx-based classes
-    const combinedClassName = [className, sx?.className].filter(Boolean).join(' ')
-
-    if (showLabel && value !== undefined) {
-      return (
-        <div ref={ref} className={`progress-with-label ${combinedClassName}`} style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
-          <div style={{ flex: 1 }}>
-            <LinearProgress
-              value={value}
-              className={combinedClassName}
-              {...props}
-            />
-          </div>
-          <span className="progress-label text-secondary" style={{ minWidth: '40px' }}>
-            {Math.round(value)}%
-          </span>
-        </div>
-      )
-    }
-
-    return (
-      <LinearProgress
-        ref={ref}
-        value={value}
-        className={combinedClassName}
-        {...props}
-      />
-    )
-  }
-)
-
-Progress.displayName = 'Progress'
-
-// Also export CircularProgress for convenience
-export { CircularProgress, Progress }
diff --git a/frontends/nextjs/src/components/atoms/feedback/Separator.tsx b/frontends/nextjs/src/components/atoms/feedback/Separator.tsx
deleted file mode 100644
index 4ec5f6663..000000000
--- a/frontends/nextjs/src/components/atoms/feedback/Separator.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Divider } from '@/fakemui'
-
-/**
- * Props for the Separator component
- * Wrapper around fakemui Divider to maintain API compatibility
- */
-export interface SeparatorProps extends React.HTMLAttributes<HTMLHRElement> {
-  /** Orientation of the separator */
-  orientation?: 'horizontal' | 'vertical'
-  /** Whether the separator is decorative (for accessibility) */
-  decorative?: boolean
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-}
-
-const Separator = forwardRef<HTMLHRElement, SeparatorProps>(
-  ({ orientation = 'horizontal', decorative, sx, className, ...props }, ref) => {
-    // Combine className with any sx-based classes
-    const combinedClassName = [className, sx?.className].filter(Boolean).join(' ')
-
-    return (
-      <Divider
-        ref={ref}
-        orientation={orientation}
-        role={decorative ? 'presentation' : 'separator'}
-        className={combinedClassName}
-        {...props}
-      />
-    )
-  }
-)
-
-Separator.displayName = 'Separator'
-
-export { Separator }
diff --git a/frontends/nextjs/src/components/atoms/feedback/Skeleton.tsx b/frontends/nextjs/src/components/atoms/feedback/Skeleton.tsx
deleted file mode 100644
index bd75ee0d0..000000000
--- a/frontends/nextjs/src/components/atoms/feedback/Skeleton.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Skeleton as FakemuiSkeleton } from '@/fakemui'
-import type { SkeletonProps as FakemuiSkeletonProps } from '@/fakemui/fakemui/feedback/Skeleton'
-
-/**
- * Props for the Skeleton component
- * Wrapper around fakemui Skeleton to maintain API compatibility
- */
-export interface SkeletonProps extends React.HTMLAttributes<HTMLSpanElement> {
-  /** Shape variant */
-  variant?: 'text' | 'rectangular' | 'circular' | 'rounded'
-  /** Animation type */
-  animation?: 'pulse' | 'wave' | false
-  /** Width of the skeleton */
-  width?: string | number
-  /** Height of the skeleton */
-  height?: string | number
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-}
-
-const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
-  ({ variant = 'rounded', animation = 'wave', width, height, sx, className, ...props }, ref) => {
-    // Map MUI variant to fakemui variant
-    const fakemuiVariant = variant === 'rounded' ? 'rectangular' : variant
-
-    // Map MUI animation to fakemui animation
-    const fakemuiAnimation = animation === 'wave' ? 'pulse' : animation
-
-    // Combine className with any sx-based classes
-    const combinedClassName = [className, sx?.className].filter(Boolean).join(' ')
-
-    return (
-      <FakemuiSkeleton
-        ref={ref}
-        variant={fakemuiVariant}
-        animation={fakemuiAnimation}
-        width={width}
-        height={height}
-        className={combinedClassName}
-        {...props}
-      />
-    )
-  }
-)
-
-Skeleton.displayName = 'Skeleton'
-
-export { Skeleton }
diff --git a/frontends/nextjs/src/components/atoms/feedback/Spinner.tsx b/frontends/nextjs/src/components/atoms/feedback/Spinner.tsx
deleted file mode 100644
index c7ed32e7b..000000000
--- a/frontends/nextjs/src/components/atoms/feedback/Spinner.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { CircularProgress } from '@/fakemui'
-
-/** Spinner size options */
-export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg'
-
-/**
- * Props for the Spinner component
- * Wrapper around fakemui CircularProgress to maintain API compatibility
- */
-export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Size of the spinner (xs: 16px, sm: 20px, md: 24px, lg: 40px) or a custom number */
-  size?: SpinnerSize | number
-  /** Whether to center the spinner in its container */
-  centered?: boolean
-  /** Color of the spinner */
-  color?: string
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-}
-
-const sizeMap: Record<SpinnerSize, number> = {
-  xs: 16,
-  sm: 20,
-  md: 24,
-  lg: 40,
-}
-
-const Spinner = forwardRef<HTMLDivElement, SpinnerProps>(
-  ({ size = 'md', centered, color, sx, className, ...props }, ref) => {
-    const dimension = typeof size === 'number' ? size : sizeMap[size]
-
-    // Combine className with any sx-based classes
-    const combinedClassName = [className, sx?.className].filter(Boolean).join(' ')
-
-    const spinner = (
-      <CircularProgress
-        ref={ref}
-        size={dimension}
-        className={combinedClassName}
-        {...props}
-      />
-    )
-
-    if (centered) {
-      return (
-        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '1rem' }}>
-          {spinner}
-        </div>
-      )
-    }
-
-    return spinner
-  }
-)
-
-Spinner.displayName = 'Spinner'
-
-export { Spinner }
diff --git a/frontends/nextjs/src/components/atoms/feedback/Tooltip.tsx b/frontends/nextjs/src/components/atoms/feedback/Tooltip.tsx
deleted file mode 100644
index 057635e4b..000000000
--- a/frontends/nextjs/src/components/atoms/feedback/Tooltip.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-
-import { forwardRef, ReactElement, ReactNode } from 'react'
-
-import { Tooltip as FakemuiTooltip } from '@/fakemui'
-
-/**
- * Props for the Tooltip component
- * Wrapper around fakemui Tooltip to maintain API compatibility
- */
-export interface TooltipProps {
-  /** The element that triggers the tooltip */
-  children: ReactElement
-  /** Title or main content of the tooltip */
-  title?: ReactNode
-  /** Alias for title - main content of the tooltip */
-  content?: ReactNode
-  /** Position of the tooltip relative to its trigger */
-  side?: 'top' | 'right' | 'bottom' | 'left'
-  /** Delay in milliseconds before showing the tooltip */
-  delayDuration?: number
-  /** Whether to display an arrow pointing to the trigger element */
-  arrow?: boolean
-  /** Controlled open state */
-  open?: boolean
-  /** Callback when tooltip is opened */
-  onOpen?: () => void
-  /** Callback when tooltip is closed */
-  onClose?: () => void
-  /** MUI placement prop (mapped to side) */
-  placement?: 'top' | 'right' | 'bottom' | 'left'
-  /** MUI enterDelay prop (mapped to delayDuration) */
-  enterDelay?: number
-}
-
-const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
-  (
-    {
-      children,
-      content,
-      title,
-      side,
-      placement,
-      delayDuration,
-      enterDelay,
-      arrow = true,
-      open,
-      onOpen,
-      onClose,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <FakemuiTooltip
-        title={content || title || ''}
-        placement={side || placement || 'top'}
-        arrow={arrow}
-        open={open}
-        {...props}
-      >
-        {children}
-      </FakemuiTooltip>
-    )
-  }
-)
-
-Tooltip.displayName = 'Tooltip'
-
-// Compatibility exports
-const TooltipTrigger = ({ children }: { children: ReactElement }) => children
-const TooltipContent = ({ children }: { children: React.ReactNode }) => <>{children}</>
-const TooltipProvider = ({ children }: { children: React.ReactNode }) => <>{children}</>
-
-export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/frontends/nextjs/src/components/atoms/index.ts b/frontends/nextjs/src/components/atoms/index.ts
deleted file mode 100644
index 60b5fff94..000000000
--- a/frontends/nextjs/src/components/atoms/index.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-// Atoms - Basic building blocks
-// These are the smallest, indivisible UI components that form the foundation
-
-// Controls
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './controls/Button'
-export { Checkbox, type CheckboxProps } from './controls/Checkbox'
-export { Radio, type RadioProps } from './controls/Radio'
-export { Switch, type SwitchProps } from './controls/Switch'
-
-// Inputs
-export { Input, type InputProps } from './inputs/Input'
-export { Select, type SelectOption, type SelectProps } from './inputs/Select'
-export { TextArea, type TextAreaProps } from './inputs/TextArea'
-
-// Display
-export {
-  Avatar,
-  AvatarFallback,
-  AvatarGroup,
-  AvatarImage,
-  type AvatarProps,
-  type AvatarSize,
-} from './display/Avatar'
-export { Badge, type BadgeProps, type BadgeVariant } from './display/Badge'
-export { Icon, type IconName, type IconProps, type IconSize } from './display/Icon'
-export { IconButton, type IconButtonProps, type IconButtonSize } from './display/IconButton'
-export { Label, type LabelProps } from './display/Label'
-export { Link, type LinkProps } from './display/Link'
-export {
-  Text,
-  type TextAlign,
-  type TextProps,
-  type TextVariant,
-  type TextWeight,
-} from './display/Text'
-
-// Feedback
-export { CircularProgress, Progress, type ProgressProps } from './feedback/Progress'
-export { Separator, type SeparatorProps } from './feedback/Separator'
-export { Skeleton, type SkeletonProps } from './feedback/Skeleton'
-export { Spinner, type SpinnerProps, type SpinnerSize } from './feedback/Spinner'
-export {
-  Tooltip,
-  TooltipContent,
-  type TooltipProps,
-  TooltipProvider,
-  TooltipTrigger,
-} from './feedback/Tooltip'
diff --git a/frontends/nextjs/src/components/atoms/inputs/Input.tsx b/frontends/nextjs/src/components/atoms/inputs/Input.tsx
deleted file mode 100644
index 626a8b8e8..000000000
--- a/frontends/nextjs/src/components/atoms/inputs/Input.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Input as FakemuiInput } from '@/fakemui'
-import type { InputProps as FakemuiInputProps } from '@/fakemui/fakemui/inputs/Input'
-
-/**
- * Props for the Input component
- * Wrapper around fakemui Input to maintain API compatibility
- */
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  /** Whether the input is in an error state */
-  error?: boolean
-  /** Whether the input should take up the full width of its container */
-  fullWidth?: boolean
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-  /** MUI inputRef - forwarded as ref */
-  inputRef?: React.Ref<HTMLInputElement>
-  /** Start adornment element */
-  startAdornment?: React.ReactNode
-  /** End adornment element */
-  endAdornment?: React.ReactNode
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ type, error, fullWidth = true, sx, inputRef, startAdornment, endAdornment, className, ...props }, ref) => {
-    // Combine className with any sx-based classes
-    const combinedClassName = [className, sx?.className].filter(Boolean).join(' ')
-
-    return (
-      <FakemuiInput
-        ref={inputRef || ref}
-        type={type}
-        error={error}
-        fullWidth={fullWidth}
-        startAdornment={startAdornment}
-        endAdornment={endAdornment}
-        className={combinedClassName}
-        {...props}
-      />
-    )
-  }
-)
-
-Input.displayName = 'Input'
-
-export { Input }
diff --git a/frontends/nextjs/src/components/atoms/inputs/Select.test.tsx b/frontends/nextjs/src/components/atoms/inputs/Select.test.tsx
deleted file mode 100644
index 465ff3a33..000000000
--- a/frontends/nextjs/src/components/atoms/inputs/Select.test.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { Select } from './Select'
-
-const mockOptions = [
-  { value: 'opt1', label: 'Option 1' },
-  { value: 'opt2', label: 'Option 2' },
-  { value: 'opt3', label: 'Option 3', disabled: true },
-]
-
-describe('Select', () => {
-  it.each([
-    { options: mockOptions, placeholder: 'Choose option', fullWidth: true },
-    { options: mockOptions, placeholder: undefined, fullWidth: false },
-  ])('renders with props %o', props => {
-    render(<Select {...props} value="" onChange={() => {}} />)
-    const select = screen.getByRole('combobox')
-    expect(select).not.toBeNull()
-  })
-
-  it('shows placeholder when provided', () => {
-    render(<Select options={mockOptions} placeholder="Select..." value="" onChange={() => {}} />)
-    const select = screen.getByRole('combobox')
-    expect(select).not.toBeNull()
-  })
-
-  it('renders all options', () => {
-    render(<Select options={mockOptions} value="" onChange={() => {}} />)
-    const select = screen.getByRole('combobox')
-    expect(select).not.toBeNull()
-  })
-
-  it('shows error state', () => {
-    render(<Select options={mockOptions} error value="" onChange={() => {}} />)
-    const select = screen.getByRole('combobox')
-    expect(select).not.toBeNull()
-  })
-})
diff --git a/frontends/nextjs/src/components/atoms/inputs/Select.tsx b/frontends/nextjs/src/components/atoms/inputs/Select.tsx
deleted file mode 100644
index ef209af79..000000000
--- a/frontends/nextjs/src/components/atoms/inputs/Select.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Select as FakemuiSelect } from '@/fakemui'
-
-export interface SelectOption {
-  value: string | number
-  label: string
-  disabled?: boolean
-}
-
-/**
- * Props for the Select component
- * Wrapper around fakemui Select to maintain API compatibility
- */
-export interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'children'> {
-  /** Array of select options */
-  options: SelectOption[]
-  /** Placeholder text */
-  placeholder?: string
-  /** Error state */
-  error?: boolean
-  /** Full width */
-  fullWidth?: boolean
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-  /** MUI displayEmpty prop (ignored for compatibility) */
-  displayEmpty?: boolean
-}
-
-const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  ({ options, error, fullWidth = true, placeholder, sx, className, displayEmpty, ...props }, ref) => {
-    // Combine className with any sx-based classes
-    const combinedClassName = [className, sx?.className, error ? 'select--error' : ''].filter(Boolean).join(' ')
-
-    return (
-      <FakemuiSelect
-        ref={ref}
-        fullWidth={fullWidth}
-        className={combinedClassName}
-        {...props}
-      >
-        {placeholder && (
-          <option value="" disabled>
-            {placeholder}
-          </option>
-        )}
-        {options.map(option => (
-          <option key={option.value} value={option.value} disabled={option.disabled}>
-            {option.label}
-          </option>
-        ))}
-      </FakemuiSelect>
-    )
-  }
-)
-
-Select.displayName = 'Select'
-
-export { Select }
diff --git a/frontends/nextjs/src/components/atoms/inputs/TextArea.test.tsx b/frontends/nextjs/src/components/atoms/inputs/TextArea.test.tsx
deleted file mode 100644
index fd54ac7fb..000000000
--- a/frontends/nextjs/src/components/atoms/inputs/TextArea.test.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { TextArea } from './TextArea'
-
-describe('TextArea', () => {
-  it.each([
-    { placeholder: 'Enter text', fullWidth: true },
-    { placeholder: 'Comment here', fullWidth: false },
-    { placeholder: 'Description', minRows: 5 },
-  ])('renders with props %o', props => {
-    render(<TextArea {...props} />)
-    const textarea = screen.getByPlaceholderText(props.placeholder)
-    expect(textarea).not.toBeNull()
-  })
-
-  it('shows error state', () => {
-    render(<TextArea error placeholder="Enter text" />)
-    const textarea = screen.getByPlaceholderText('Enter text')
-    expect(textarea).not.toBeNull()
-  })
-
-  it('accepts placeholder prop', () => {
-    const placeholder = 'Type here'
-    render(<TextArea placeholder={placeholder} />)
-    const textarea = screen.getByPlaceholderText(placeholder) as HTMLTextAreaElement
-    expect(textarea.placeholder).toBe(placeholder)
-  })
-})
diff --git a/frontends/nextjs/src/components/atoms/inputs/TextArea.tsx b/frontends/nextjs/src/components/atoms/inputs/TextArea.tsx
deleted file mode 100644
index e107b26b2..000000000
--- a/frontends/nextjs/src/components/atoms/inputs/TextArea.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Textarea } from '@/fakemui'
-
-/**
- * Props for the TextArea component
- * Wrapper around fakemui Textarea to maintain API compatibility
- */
-export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  /** Whether the textarea is in an error state */
-  error?: boolean
-  /** Whether the textarea should take up the full width of its container */
-  fullWidth?: boolean
-  /** Minimum number of rows */
-  minRows?: number
-  /** Maximum number of rows */
-  maxRows?: number
-  /** MUI sx prop - converted to className for compatibility */
-  sx?: any
-}
-
-const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({ error, fullWidth = true, minRows = 3, maxRows, sx, className, ...props }, ref) => {
-    // Combine className with any sx-based classes
-    const combinedClassName = [className, sx?.className, error ? 'textarea--error' : ''].filter(Boolean).join(' ')
-
-    return (
-      <Textarea
-        ref={ref}
-        rows={minRows}
-        error={error}
-        fullWidth={fullWidth}
-        className={combinedClassName}
-        {...props}
-      />
-    )
-  }
-)
-
-TextArea.displayName = 'TextArea'
-
-export { TextArea }
diff --git a/frontends/nextjs/src/components/molecules/README.md b/frontends/nextjs/src/components/molecules/README.md
deleted file mode 100644
index 83f8eed78..000000000
--- a/frontends/nextjs/src/components/molecules/README.md
+++ /dev/null
@@ -1,112 +0,0 @@
-# Molecules
-
-Molecules are simple groups of atoms that function together as a cohesive unit. Built on Material UI.
-
-## Components
-
-| Component | Description | Atoms Used |
-|-----------|-------------|------------|
-| `Card` | Container with header/content/footer | Box, Typography |
-| `Dialog` | Modal dialog with transitions | MuiDialog |
-| `Alert` | Feedback message with severity | MuiAlert |
-| `Tabs` | Tab navigation | MuiTabs, MuiTab |
-| `Accordion` | Collapsible sections | MuiAccordion |
-| `Select` | Dropdown selection | MuiSelect |
-| `DropdownMenu` | Context/action menu | Menu, MenuItem |
-| `FormField` | Label + input + error | Label, Input |
-| `SearchInput` | Input with search icon | TextField |
-| `PasswordField` | Password input with visibility toggle | TextField, IconButton |
-| `EmailField` | Email input with icon | TextField, InputAdornment |
-| `NumberField` | Number input with constraints | TextField |
-| `SearchBar` | Search input with clear and filter buttons | TextField, IconButton |
-| `Popover` | Floating content panel | MuiPopover |
-
-### Application Molecules
-- `AppHeader` - Application header with logo and navigation
-- `AppFooter` - Application footer with links
-- `ProfileCard` - User profile display card
-- `SecurityWarningDialog` - Security warning modal
-- `PasswordChangeDialog` - Password change form modal
-
-## Usage
-
-```typescript
-import { 
-  Card, CardHeader, CardContent, 
-  Dialog, Alert,
-  PasswordField, EmailField, NumberField, SearchBar
-} from '@/components/molecules'
-
-function MyPage() {
-  return (
-    <Box>
-      <Card>
-        <CardHeader title="Title" description="Subtitle" />
-        <CardContent>Content here</CardContent>
-      </Card>
-
-      <Alert variant="success" title="Success!">
-        Operation completed.
-      </Alert>
-
-      <Dialog open={isOpen} onOpenChange={setIsOpen}>
-        <DialogContent>Modal content</DialogContent>
-      </Dialog>
-
-      <PasswordField 
-        label="Password"
-        value={password}
-        onChange={(e) => setPassword(e.target.value)}
-      />
-
-      <EmailField 
-        label="Email"
-        value={email}
-        onChange={(e) => setEmail(e.target.value)}
-        showIcon
-      />
-
-      <NumberField 
-        label="Age"
-        min={0}
-        max={120}
-        value={age}
-        onChange={(e) => setAge(e.target.value)}
-      />
-
-      <SearchBar
-        value={searchQuery}
-        onChange={setSearchQuery}
-        onClear={() => setSearchQuery('')}
-        showFilterButton
-        onFilterClick={handleOpenFilters}
-      />
-    </Box>
-  )
-}
-```
-
-## Rules
-
-1. ✅ **DO** compose molecules from atoms
-2. ✅ **DO** keep molecules focused on a single purpose
-3. ✅ **DO** use MUI `sx` prop for styling
-4. ✅ **DO** support both controlled and uncontrolled modes
-5. ❌ **DON'T** import organisms
-6. ❌ **DON'T** add complex business logic
-7. ❌ **DON'T** use Tailwind classes (use MUI `sx` prop)
-
-## Styling
-
-```tsx
-<Card sx={{ maxWidth: 400, mx: 'auto' }}>
-  <CardHeader 
-    title="User Profile"
-    sx={{ bgcolor: 'primary.light' }}
-  />
-  <CardContent>
-    <Typography>Content with theme colors</Typography>
-  </CardContent>
-</Card>
-```
-
diff --git a/frontends/nextjs/src/components/molecules/display/Accordion.tsx b/frontends/nextjs/src/components/molecules/display/Accordion.tsx
deleted file mode 100644
index 02f68cf86..000000000
--- a/frontends/nextjs/src/components/molecules/display/Accordion.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import {
-  Accordion as FakeMuiAccordion,
-  AccordionDetails,
-  AccordionSummary,
-  Typography,
-} from '@/fakemui'
-import { ExpandMore } from '@/fakemui/icons'
-
-// Accordion (single item)
-export interface AccordionProps {
-  children: ReactNode
-  expanded?: boolean
-  disabled?: boolean
-  type?: 'single' | 'multiple'
-  collapsible?: boolean
-  value?: string
-  className?: string
-}
-
-const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  ({ children, type = 'single', collapsible, expanded, disabled, className, ...props }, ref) => {
-    return (
-      <FakeMuiAccordion
-        ref={ref}
-        expanded={expanded}
-        disabled={disabled}
-        className={`accordion ${className || ''}`}
-        {...props}
-      >
-        {children}
-      </FakeMuiAccordion>
-    )
-  }
-)
-Accordion.displayName = 'Accordion'
-
-// AccordionItem (for shadcn compat - wraps Accordion)
-interface AccordionItemProps {
-  children: ReactNode
-  value: string
-  className?: string
-}
-
-const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
-  ({ children, value, className, ...props }, ref) => {
-    return (
-      <Accordion ref={ref} className={className} {...props}>
-        {children}
-      </Accordion>
-    )
-  }
-)
-AccordionItem.displayName = 'AccordionItem'
-
-// AccordionTrigger
-interface AccordionTriggerProps {
-  children: ReactNode
-  className?: string
-}
-
-const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <AccordionSummary
-        ref={ref}
-        expandIcon={<ExpandMore />}
-        className={`accordion-trigger ${className || ''}`}
-        {...props}
-      >
-        <Typography variant="body1" className="font-medium">
-          {children}
-        </Typography>
-      </AccordionSummary>
-    )
-  }
-)
-AccordionTrigger.displayName = 'AccordionTrigger'
-
-// AccordionContent
-interface AccordionContentProps {
-  children: ReactNode
-  className?: string
-}
-
-const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <AccordionDetails ref={ref} className={`accordion-content ${className || ''}`} {...props}>
-        {children}
-      </AccordionDetails>
-    )
-  }
-)
-AccordionContent.displayName = 'AccordionContent'
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }
diff --git a/frontends/nextjs/src/components/molecules/display/Alert.tsx b/frontends/nextjs/src/components/molecules/display/Alert.tsx
deleted file mode 100644
index 86406d926..000000000
--- a/frontends/nextjs/src/components/molecules/display/Alert.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Alert as FakeMuiAlert, AlertTitle as FakeMuiAlertTitle, IconButton } from '@/fakemui'
-import { Close } from '@/fakemui/icons'
-
-export type AlertVariant = 'default' | 'destructive' | 'success' | 'warning' | 'info'
-
-export interface AlertProps {
-  variant?: AlertVariant
-  title?: ReactNode
-  dismissible?: boolean
-  onDismiss?: () => void
-  children?: ReactNode
-  className?: string
-}
-
-const variantMap: Record<AlertVariant, 'info' | 'error' | 'success' | 'warning'> = {
-  default: 'info',
-  destructive: 'error',
-  success: 'success',
-  warning: 'warning',
-  info: 'info',
-}
-
-const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  (
-    { variant = 'default', title, dismissible, onDismiss, children, className, ...props },
-    ref
-  ) => {
-    const severity = variantMap[variant]
-
-    return (
-      <FakeMuiAlert
-        ref={ref}
-        severity={severity}
-        variant="outlined"
-        className={`alert ${className || ''}`}
-        action={
-          dismissible && onDismiss ? (
-            <IconButton aria-label="close" onClick={onDismiss}>
-              <Close size={16} />
-            </IconButton>
-          ) : undefined
-        }
-        {...props}
-      >
-        {title && <FakeMuiAlertTitle>{title}</FakeMuiAlertTitle>}
-        {children}
-      </FakeMuiAlert>
-    )
-  }
-)
-
-Alert.displayName = 'Alert'
-
-// AlertTitle (for direct use)
-const AlertTitle = FakeMuiAlertTitle
-
-// AlertDescription (shadcn compat)
-const AlertDescription = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <div ref={ref} className={`alert-description ${className || ''}`} {...props}>
-        {children}
-      </div>
-    )
-  }
-)
-AlertDescription.displayName = 'AlertDescription'
-
-export { Alert, AlertDescription, AlertTitle }
diff --git a/frontends/nextjs/src/components/molecules/display/Card.tsx b/frontends/nextjs/src/components/molecules/display/Card.tsx
deleted file mode 100644
index a857766e3..000000000
--- a/frontends/nextjs/src/components/molecules/display/Card.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import {
-  Box,
-  Card as FakeMuiCard,
-  CardActions,
-  CardContent as FakeMuiCardContent,
-  CardHeader as FakeMuiCardHeader,
-  Typography,
-} from '@/fakemui'
-
-// Card
-export interface CardProps {
-  children?: ReactNode
-  noPadding?: boolean
-  className?: string
-}
-
-const Card = forwardRef<HTMLDivElement, CardProps>(({ noPadding, className, ...props }, ref) => {
-  return (
-    <FakeMuiCard
-      ref={ref}
-      className={`card ${noPadding ? 'card--no-padding' : ''} ${className || ''}`}
-      {...props}
-    />
-  )
-})
-Card.displayName = 'Card'
-
-// CardHeader
-export interface CardHeaderProps {
-  title?: ReactNode
-  subheader?: ReactNode
-  action?: ReactNode
-  avatar?: ReactNode
-  description?: ReactNode
-  className?: string
-}
-
-const CardHeader = forwardRef<HTMLDivElement, CardHeaderProps>(
-  ({ description, subheader, ...props }, ref) => {
-    return (
-      <FakeMuiCardHeader
-        ref={ref}
-        subheader={description || subheader}
-        {...props}
-      />
-    )
-  }
-)
-CardHeader.displayName = 'CardHeader'
-
-// CardTitle (for shadcn compatibility)
-interface CardTitleProps {
-  children: ReactNode
-  className?: string
-}
-
-const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(({ children, className, ...props }, ref) => {
-  return (
-    <Typography ref={ref} variant="h6" className={`card-title ${className || ''}`} {...props}>
-      {children}
-    </Typography>
-  )
-})
-CardTitle.displayName = 'CardTitle'
-
-// CardDescription
-interface CardDescriptionProps {
-  children: ReactNode
-  className?: string
-}
-
-const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Typography ref={ref} variant="body2" className={`card-description ${className || ''}`} {...props}>
-        {children}
-      </Typography>
-    )
-  }
-)
-CardDescription.displayName = 'CardDescription'
-
-// CardContent
-const CardContent = forwardRef<HTMLDivElement, { children?: ReactNode; className?: string }>(
-  ({ className, ...props }, ref) => {
-    return <FakeMuiCardContent ref={ref} className={`card-content ${className || ''}`} {...props} />
-  }
-)
-CardContent.displayName = 'CardContent'
-
-// CardFooter / CardActions
-const CardFooter = forwardRef<HTMLDivElement, { children?: ReactNode; className?: string }>(
-  ({ className, ...props }, ref) => {
-    return (
-      <CardActions ref={ref} className={`card-footer ${className || ''}`} {...props} />
-    )
-  }
-)
-CardFooter.displayName = 'CardFooter'
-
-// CardAction (for header actions - shadcn compat)
-const CardAction = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`card-action ${className || ''}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-CardAction.displayName = 'CardAction'
-
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
diff --git a/frontends/nextjs/src/components/molecules/form/EmailField.test.tsx b/frontends/nextjs/src/components/molecules/form/EmailField.test.tsx
deleted file mode 100644
index bab785b38..000000000
--- a/frontends/nextjs/src/components/molecules/form/EmailField.test.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { EmailField } from './EmailField'
-
-describe('EmailField', () => {
-  it.each([
-    { label: 'Email', placeholder: 'you@example.com', showIcon: true },
-    { label: 'Your Email', placeholder: 'Enter email', showIcon: false },
-    { label: 'Work Email', placeholder: undefined, showIcon: true },
-  ])(
-    'renders with label "$label", placeholder "$placeholder", showIcon $showIcon',
-    ({ label, placeholder, showIcon }) => {
-      render(<EmailField label={label} placeholder={placeholder} showIcon={showIcon} />)
-
-      expect(screen.getByLabelText(label)).toBeTruthy()
-      if (placeholder) {
-        expect(screen.getByPlaceholderText(placeholder)).toBeTruthy()
-      }
-    }
-  )
-
-  it('renders with email icon by default', () => {
-    const { container } = render(<EmailField />)
-
-    // Icon is rendered via MUI Icon component
-    expect(container.querySelector('svg')).toBeTruthy()
-  })
-
-  it('does not render icon when showIcon is false', () => {
-    const { container } = render(<EmailField showIcon={false} />)
-
-    // No icon should be present
-    expect(container.querySelector('svg')).toBeNull()
-  })
-
-  it.each([
-    { error: 'Invalid email', helperText: undefined },
-    { error: undefined, helperText: 'Enter a valid email address' },
-    { error: 'Required field', helperText: 'Please provide your email' },
-  ])('displays error "$error" or helperText "$helperText"', ({ error, helperText }) => {
-    render(<EmailField error={error} helperText={helperText} />)
-
-    const displayText = error || helperText
-    if (displayText) {
-      expect(screen.getByText(displayText)).toBeTruthy()
-    }
-  })
-
-  it('calls onChange when value changes', () => {
-    const handleChange = vi.fn()
-    render(<EmailField onChange={handleChange} />)
-
-    const input = screen.getByLabelText('Email')
-    fireEvent.change(input, { target: { value: 'test@example.com' } })
-
-    expect(handleChange).toHaveBeenCalled()
-  })
-
-  it('has type="email" attribute', () => {
-    render(<EmailField />)
-
-    const input = screen.getByLabelText('Email') as HTMLInputElement
-    expect(input.type).toBe('email')
-  })
-})
diff --git a/frontends/nextjs/src/components/molecules/form/EmailField.tsx b/frontends/nextjs/src/components/molecules/form/EmailField.tsx
deleted file mode 100644
index 9b84b766f..000000000
--- a/frontends/nextjs/src/components/molecules/form/EmailField.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { TextField } from '@/fakemui'
-import { Email } from '@/fakemui/icons'
-
-export interface EmailFieldProps {
-  label?: string
-  name?: string
-  value?: string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  error?: string
-  helperText?: string
-  required?: boolean
-  placeholder?: string
-  fullWidth?: boolean
-  disabled?: boolean
-  autoComplete?: string
-  showIcon?: boolean
-  className?: string
-}
-
-const EmailField = forwardRef<HTMLInputElement, EmailFieldProps>(
-  (
-    {
-      label = 'Email',
-      name = 'email',
-      value,
-      onChange,
-      error,
-      helperText,
-      required = false,
-      placeholder = 'you@example.com',
-      fullWidth = true,
-      disabled = false,
-      autoComplete = 'email',
-      showIcon = true,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <TextField
-        ref={ref}
-        type="email"
-        label={label}
-        name={name}
-        value={value}
-        onChange={onChange}
-        error={!!error}
-        helperText={error || helperText}
-        required={required}
-        placeholder={placeholder}
-        fullWidth={fullWidth}
-        disabled={disabled}
-        autoComplete={autoComplete}
-        className={className}
-        startAdornment={
-          showIcon ? (
-            <Email size={16} style={{ color: 'rgba(0,0,0,0.54)' }} />
-          ) : undefined
-        }
-        {...props}
-      />
-    )
-  }
-)
-
-EmailField.displayName = 'EmailField'
-
-export { EmailField }
diff --git a/frontends/nextjs/src/components/molecules/form/FormField.module.scss b/frontends/nextjs/src/components/molecules/form/FormField.module.scss
deleted file mode 100644
index 52c3af56f..000000000
--- a/frontends/nextjs/src/components/molecules/form/FormField.module.scss
+++ /dev/null
@@ -1,64 +0,0 @@
-.formField {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.helperText {
-  font-size: 0.75rem;
-  color: var(--text-secondary, #666);
-
-  &.error {
-    color: var(--error-main, #d32f2f);
-  }
-}
-
-.searchInput {
-  border-radius: 4px;
-}
-
-.searchIcon {
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.textarea {
-  width: auto;
-  min-height: 80px;
-  padding: 8px 12px;
-  font-size: 0.875rem;
-  font-family: inherit;
-  border: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
-  border-radius: 4px;
-  background-color: var(--background-paper, #fff);
-  resize: vertical;
-  transition: border-color 0.2s, box-shadow 0.2s;
-
-  &:hover {
-    border-color: var(--text-secondary, #666);
-  }
-
-  &:focus {
-    outline: none;
-    border-color: var(--primary-main, #1976d2);
-    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.error {
-    border-color: var(--error-main, #d32f2f);
-
-    &:hover,
-    &:focus {
-      border-color: var(--error-main, #d32f2f);
-      box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
-    }
-  }
-
-  &.fullWidth {
-    width: 100%;
-  }
-}
diff --git a/frontends/nextjs/src/components/molecules/form/FormField.tsx b/frontends/nextjs/src/components/molecules/form/FormField.tsx
deleted file mode 100644
index 50fe2ef06..000000000
--- a/frontends/nextjs/src/components/molecules/form/FormField.tsx
+++ /dev/null
@@ -1,89 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, TextField } from '@/fakemui'
-import { Search } from '@/fakemui/icons'
-
-import { Label } from '../atoms/Label'
-import styles from './FormField.module.scss'
-
-// FormField - combines label and input
-export interface FormFieldProps {
-  label?: string
-  name?: string
-  error?: string
-  required?: boolean
-  helperText?: string
-  children: ReactNode
-  className?: string
-}
-
-const FormField = forwardRef<HTMLDivElement, FormFieldProps>(
-  ({ label, name, error, required, helperText, children, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`${styles.formField} ${className || ''}`} {...props}>
-        {label && (
-          <Label htmlFor={name} required={required} error={!!error}>
-            {label}
-          </Label>
-        )}
-        {children}
-        {(error || helperText) && (
-          <span className={`${styles.helperText} ${error ? styles.error : ''}`}>
-            {error || helperText}
-          </span>
-        )}
-      </Box>
-    )
-  }
-)
-FormField.displayName = 'FormField'
-
-// SearchInput - input with search icon
-export interface SearchInputProps {
-  value?: string
-  onChange?: (value: string) => void
-  placeholder?: string
-  fullWidth?: boolean
-  className?: string
-}
-
-const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(
-  ({ value, onChange, placeholder = 'Search...', fullWidth = true, className, ...props }, ref) => {
-    return (
-      <TextField
-        ref={ref}
-        value={value}
-        onChange={e => onChange?.(e.target.value)}
-        placeholder={placeholder}
-        fullWidth={fullWidth}
-        className={`${styles.searchInput} ${className || ''}`}
-        startAdornment={<Search size={16} className={styles.searchIcon} />}
-        {...props}
-      />
-    )
-  }
-)
-SearchInput.displayName = 'SearchInput'
-
-// TextArea
-export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
-  error?: boolean
-  fullWidth?: boolean
-}
-
-const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
-  ({ error, fullWidth = true, className, ...props }, ref) => {
-    return (
-      <textarea
-        ref={ref}
-        className={`${styles.textarea} ${error ? styles.error : ''} ${fullWidth ? styles.fullWidth : ''} ${className || ''}`}
-        {...props}
-      />
-    )
-  }
-)
-TextArea.displayName = 'TextArea'
-
-export { FormField, SearchInput, TextArea }
diff --git a/frontends/nextjs/src/components/molecules/form/NumberField.module.scss b/frontends/nextjs/src/components/molecules/form/NumberField.module.scss
deleted file mode 100644
index 3891803e1..000000000
--- a/frontends/nextjs/src/components/molecules/form/NumberField.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.numberField {
-  // Hide number input spinners
-  input[type='number'] {
-    -moz-appearance: textfield;
-
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-  }
-}
diff --git a/frontends/nextjs/src/components/molecules/form/NumberField.test.tsx b/frontends/nextjs/src/components/molecules/form/NumberField.test.tsx
deleted file mode 100644
index 21a170780..000000000
--- a/frontends/nextjs/src/components/molecules/form/NumberField.test.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { NumberField } from './NumberField'
-
-describe('NumberField', () => {
-  it.each([
-    { label: 'Number', value: undefined },
-    { label: 'Age', value: 25 },
-    { label: 'Quantity', value: 100 },
-  ])('renders with label "$label" and value $value', ({ label, value }) => {
-    render(<NumberField label={label} value={value} />)
-
-    expect(screen.getByLabelText(label)).toBeTruthy()
-    if (value !== undefined) {
-      expect(screen.getByDisplayValue(value.toString())).toBeTruthy()
-    }
-  })
-
-  it.each([
-    { min: 0, max: 100, step: 1 },
-    { min: -10, max: 10, step: 0.5 },
-    { min: undefined, max: undefined, step: undefined },
-  ])('respects min $min, max $max, step $step constraints', ({ min, max, step }) => {
-    render(<NumberField min={min} max={max} step={step} />)
-
-    const input = screen.getByLabelText('Number') as HTMLInputElement
-
-    if (min !== undefined) {
-      expect(input.min).toBe(min.toString())
-    }
-    if (max !== undefined) {
-      expect(input.max).toBe(max.toString())
-    }
-    if (step !== undefined) {
-      expect(input.step).toBe(step.toString())
-    } else {
-      expect(input.step).toBe('1')
-    }
-  })
-
-  it('calls onChange when value changes', () => {
-    const handleChange = vi.fn()
-    render(<NumberField onChange={handleChange} />)
-
-    const input = screen.getByLabelText('Number')
-    fireEvent.change(input, { target: { value: '42' } })
-
-    expect(handleChange).toHaveBeenCalled()
-  })
-
-  it.each([
-    { error: 'Value too high', helperText: undefined },
-    { error: undefined, helperText: 'Enter a number between 0 and 100' },
-  ])('displays error "$error" or helperText "$helperText"', ({ error, helperText }) => {
-    render(<NumberField error={error} helperText={helperText} />)
-
-    const displayText = error || helperText
-    if (displayText) {
-      expect(screen.getByText(displayText)).toBeTruthy()
-    }
-  })
-
-  it('has type="number" attribute', () => {
-    render(<NumberField />)
-
-    const input = screen.getByLabelText('Number') as HTMLInputElement
-    expect(input.type).toBe('number')
-  })
-})
diff --git a/frontends/nextjs/src/components/molecules/form/NumberField.tsx b/frontends/nextjs/src/components/molecules/form/NumberField.tsx
deleted file mode 100644
index 9d59f68de..000000000
--- a/frontends/nextjs/src/components/molecules/form/NumberField.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { TextField } from '@/fakemui'
-
-import styles from './NumberField.module.scss'
-
-export interface NumberFieldProps {
-  label?: string
-  name?: string
-  value?: number | string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  error?: string
-  helperText?: string
-  required?: boolean
-  placeholder?: string
-  fullWidth?: boolean
-  disabled?: boolean
-  min?: number
-  max?: number
-  step?: number | string
-  className?: string
-}
-
-const NumberField = forwardRef<HTMLInputElement, NumberFieldProps>(
-  (
-    {
-      label = 'Number',
-      name,
-      value,
-      onChange,
-      error,
-      helperText,
-      required = false,
-      placeholder,
-      fullWidth = true,
-      disabled = false,
-      min,
-      max,
-      step = 1,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <TextField
-        ref={ref}
-        type="number"
-        label={label}
-        name={name}
-        value={value}
-        onChange={onChange}
-        error={!!error}
-        helperText={error || helperText}
-        required={required}
-        placeholder={placeholder}
-        fullWidth={fullWidth}
-        disabled={disabled}
-        min={min}
-        max={max}
-        step={step}
-        className={`${styles.numberField} ${className || ''}`}
-        {...props}
-      />
-    )
-  }
-)
-
-NumberField.displayName = 'NumberField'
-
-export { NumberField }
diff --git a/frontends/nextjs/src/components/molecules/form/PasswordField.test.tsx b/frontends/nextjs/src/components/molecules/form/PasswordField.test.tsx
deleted file mode 100644
index 9ba901b54..000000000
--- a/frontends/nextjs/src/components/molecules/form/PasswordField.test.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { PasswordField } from './PasswordField'
-
-describe('PasswordField', () => {
-  it.each([
-    { label: 'Password', placeholder: undefined },
-    { label: 'Enter Password', placeholder: 'Your password' },
-    { label: 'Confirm Password', placeholder: 'Confirm your password' },
-  ])('renders with label "$label" and placeholder "$placeholder"', ({ label, placeholder }) => {
-    render(<PasswordField label={label} placeholder={placeholder} />)
-
-    expect(screen.getByLabelText(label)).toBeTruthy()
-    if (placeholder) {
-      expect(screen.getByPlaceholderText(placeholder)).toBeTruthy()
-    }
-  })
-
-  it('toggles password visibility when icon button is clicked', () => {
-    render(<PasswordField />)
-
-    const input = screen.getByLabelText('Password') as HTMLInputElement
-    expect(input.type).toBe('password')
-
-    const toggleButton = screen.getByLabelText('toggle password visibility')
-    fireEvent.click(toggleButton)
-
-    expect(input.type).toBe('text')
-
-    fireEvent.click(toggleButton)
-    expect(input.type).toBe('password')
-  })
-
-  it.each([
-    { error: 'Password is required', helperText: undefined },
-    { error: undefined, helperText: 'Must be at least 8 characters' },
-    { error: 'Too short', helperText: 'Should be longer' },
-  ])('displays error "$error" or helperText "$helperText"', ({ error, helperText }) => {
-    render(<PasswordField error={error} helperText={helperText} />)
-
-    const displayText = error || helperText
-    if (displayText) {
-      expect(screen.getByText(displayText)).toBeTruthy()
-    }
-  })
-
-  it('calls onChange when value changes', () => {
-    const handleChange = vi.fn()
-    render(<PasswordField onChange={handleChange} />)
-
-    const input = screen.getByLabelText('Password')
-    fireEvent.change(input, { target: { value: 'newpassword' } })
-
-    expect(handleChange).toHaveBeenCalled()
-  })
-
-  it('disables toggle button when field is disabled', () => {
-    render(<PasswordField disabled />)
-
-    const toggleButton = screen.getByLabelText('toggle password visibility')
-    expect(toggleButton.hasAttribute('disabled')).toBe(true)
-  })
-})
diff --git a/frontends/nextjs/src/components/molecules/form/PasswordField.tsx b/frontends/nextjs/src/components/molecules/form/PasswordField.tsx
deleted file mode 100644
index 19ccde024..000000000
--- a/frontends/nextjs/src/components/molecules/form/PasswordField.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-'use client'
-
-import { forwardRef, useState } from 'react'
-
-import { IconButton, TextField } from '@/fakemui'
-import { Visibility, VisibilityOff } from '@/fakemui/icons'
-
-export interface PasswordFieldProps {
-  label?: string
-  name?: string
-  value?: string
-  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
-  error?: string
-  helperText?: string
-  required?: boolean
-  placeholder?: string
-  fullWidth?: boolean
-  disabled?: boolean
-  autoComplete?: string
-  className?: string
-}
-
-const PasswordField = forwardRef<HTMLInputElement, PasswordFieldProps>(
-  (
-    {
-      label = 'Password',
-      name = 'password',
-      value,
-      onChange,
-      error,
-      helperText,
-      required = false,
-      placeholder,
-      fullWidth = true,
-      disabled = false,
-      autoComplete = 'current-password',
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const [showPassword, setShowPassword] = useState(false)
-
-    const togglePasswordVisibility = () => {
-      setShowPassword(prev => !prev)
-    }
-
-    return (
-      <TextField
-        ref={ref}
-        type={showPassword ? 'text' : 'password'}
-        label={label}
-        name={name}
-        value={value}
-        onChange={onChange}
-        error={!!error}
-        helperText={error || helperText}
-        required={required}
-        placeholder={placeholder}
-        fullWidth={fullWidth}
-        disabled={disabled}
-        autoComplete={autoComplete}
-        className={className}
-        endAdornment={
-          <IconButton
-            aria-label="toggle password visibility"
-            onClick={togglePasswordVisibility}
-            onMouseDown={e => e.preventDefault()}
-            disabled={disabled}
-            sm
-          >
-            {showPassword ? (
-              <VisibilityOff size={16} />
-            ) : (
-              <Visibility size={16} />
-            )}
-          </IconButton>
-        }
-        {...props}
-      />
-    )
-  }
-)
-
-PasswordField.displayName = 'PasswordField'
-
-export { PasswordField }
diff --git a/frontends/nextjs/src/components/molecules/form/SearchBar.module.scss b/frontends/nextjs/src/components/molecules/form/SearchBar.module.scss
deleted file mode 100644
index 83eb48240..000000000
--- a/frontends/nextjs/src/components/molecules/form/SearchBar.module.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.searchBar {
-  border-radius: 8px;
-  background-color: var(--background-paper, #fff);
-  transition: box-shadow 0.2s;
-
-  &:hover {
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
-  }
-
-  &:focus-within {
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-  }
-}
-
-.searchIcon {
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.endAdornments {
-  display: flex;
-  gap: 4px;
-  align-items: center;
-}
-
-.clearButton,
-.filterButton {
-  padding: 4px;
-}
diff --git a/frontends/nextjs/src/components/molecules/form/SearchBar.test.tsx b/frontends/nextjs/src/components/molecules/form/SearchBar.test.tsx
deleted file mode 100644
index 627c63d09..000000000
--- a/frontends/nextjs/src/components/molecules/form/SearchBar.test.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { SearchBar } from './SearchBar'
-
-describe('SearchBar', () => {
-  it.each([
-    { placeholder: 'Search...', value: '' },
-    { placeholder: 'Find items...', value: 'test query' },
-    { placeholder: 'Type to search', value: 'example' },
-  ])('renders with placeholder "$placeholder" and value "$value"', ({ placeholder, value }) => {
-    render(<SearchBar placeholder={placeholder} value={value} />)
-
-    expect(screen.getByPlaceholderText(placeholder)).toBeTruthy()
-    if (value) {
-      expect(screen.getByDisplayValue(value)).toBeTruthy()
-    }
-  })
-
-  it('shows search icon by default', () => {
-    const { container } = render(<SearchBar />)
-
-    // Search icon is always present
-    expect(container.querySelector('svg')).toBeTruthy()
-  })
-
-  it.each([
-    { showClearButton: true, value: 'test', shouldShowClear: true },
-    { showClearButton: false, value: 'test', shouldShowClear: false },
-    { showClearButton: true, value: '', shouldShowClear: false },
-  ])(
-    'handles clear button with showClearButton=$showClearButton, value="$value"',
-    ({ showClearButton, value, shouldShowClear }) => {
-      render(<SearchBar showClearButton={showClearButton} value={value} />)
-
-      const clearButton = screen.queryByLabelText('clear search')
-      if (shouldShowClear) {
-        expect(clearButton).toBeTruthy()
-      } else {
-        expect(clearButton).toBeNull()
-      }
-    }
-  )
-
-  it('calls onClear when clear button is clicked', () => {
-    const handleClear = vi.fn()
-    const handleChange = vi.fn()
-    render(<SearchBar value="test" onClear={handleClear} onChange={handleChange} />)
-
-    const clearButton = screen.getByLabelText('clear search')
-    fireEvent.click(clearButton)
-
-    expect(handleClear).toHaveBeenCalled()
-    expect(handleChange).toHaveBeenCalledWith('')
-  })
-
-  it.each([{ showFilterButton: true }, { showFilterButton: false }])(
-    'renders filter button when showFilterButton=$showFilterButton',
-    ({ showFilterButton }) => {
-      render(<SearchBar showFilterButton={showFilterButton} />)
-
-      const filterButton = screen.queryByLabelText('open filters')
-      if (showFilterButton) {
-        expect(filterButton).toBeTruthy()
-      } else {
-        expect(filterButton).toBeNull()
-      }
-    }
-  )
-
-  it('calls onFilterClick when filter button is clicked', () => {
-    const handleFilterClick = vi.fn()
-    render(<SearchBar showFilterButton onFilterClick={handleFilterClick} />)
-
-    const filterButton = screen.getByLabelText('open filters')
-    fireEvent.click(filterButton)
-
-    expect(handleFilterClick).toHaveBeenCalled()
-  })
-
-  it('calls onChange when input value changes', () => {
-    const handleChange = vi.fn()
-    render(<SearchBar onChange={handleChange} />)
-
-    const input = screen.getByPlaceholderText('Search...')
-    fireEvent.change(input, { target: { value: 'new search' } })
-
-    expect(handleChange).toHaveBeenCalledWith('new search')
-  })
-})
diff --git a/frontends/nextjs/src/components/molecules/form/SearchBar.tsx b/frontends/nextjs/src/components/molecules/form/SearchBar.tsx
deleted file mode 100644
index 8466eb546..000000000
--- a/frontends/nextjs/src/components/molecules/form/SearchBar.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, IconButton, TextField } from '@/fakemui'
-import { Clear, FilterList, Search } from '@/fakemui/icons'
-
-import styles from './SearchBar.module.scss'
-
-export interface SearchBarProps {
-  value?: string
-  onChange?: (value: string) => void
-  onClear?: () => void
-  onFilterClick?: () => void
-  placeholder?: string
-  fullWidth?: boolean
-  showFilterButton?: boolean
-  showClearButton?: boolean
-  disabled?: boolean
-  loading?: boolean
-  endAdornment?: ReactNode
-  className?: string
-}
-
-const SearchBar = forwardRef<HTMLInputElement, SearchBarProps>(
-  (
-    {
-      value = '',
-      onChange,
-      onClear,
-      onFilterClick,
-      placeholder = 'Search...',
-      fullWidth = true,
-      showFilterButton = false,
-      showClearButton = true,
-      disabled = false,
-      loading = false,
-      endAdornment,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      onChange?.(e.target.value)
-    }
-
-    const handleClear = () => {
-      onChange?.('')
-      onClear?.()
-    }
-
-    return (
-      <TextField
-        ref={ref}
-        value={value}
-        onChange={handleChange}
-        placeholder={placeholder}
-        fullWidth={fullWidth}
-        disabled={disabled}
-        className={`${styles.searchBar} ${className || ''}`}
-        startAdornment={
-          <Search size={16} className={styles.searchIcon} />
-        }
-        endAdornment={
-          <Box className={styles.endAdornments}>
-            {showClearButton && value && !disabled && (
-              <IconButton
-                aria-label="clear search"
-                onClick={handleClear}
-                sm
-                className={styles.clearButton}
-              >
-                <Clear size={16} />
-              </IconButton>
-            )}
-            {showFilterButton && (
-              <IconButton
-                aria-label="open filters"
-                onClick={onFilterClick}
-                disabled={disabled}
-                sm
-                className={styles.filterButton}
-              >
-                <FilterList size={16} />
-              </IconButton>
-            )}
-            {endAdornment}
-          </Box>
-        }
-        {...props}
-      />
-    )
-  }
-)
-
-SearchBar.displayName = 'SearchBar'
-
-export { SearchBar }
diff --git a/frontends/nextjs/src/components/molecules/form/Select.module.scss b/frontends/nextjs/src/components/molecules/form/Select.module.scss
deleted file mode 100644
index 736de964d..000000000
--- a/frontends/nextjs/src/components/molecules/form/Select.module.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.selectWrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-
-  &.fullWidth {
-    width: 100%;
-  }
-}
-
-.selectContainer {
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-}
-
-.select {
-  appearance: none;
-  width: 100%;
-  padding-right: 32px;
-}
-
-.icon {
-  position: absolute;
-  right: 8px;
-  pointer-events: none;
-  color: rgba(0, 0, 0, 0.54);
-}
diff --git a/frontends/nextjs/src/components/molecules/form/Select.tsx b/frontends/nextjs/src/components/molecules/form/Select.tsx
deleted file mode 100644
index a97eb769b..000000000
--- a/frontends/nextjs/src/components/molecules/form/Select.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode, SelectHTMLAttributes } from 'react'
-
-import { Box, FormControl, FormHelperText, FormLabel, Select as FakeMuiSelect } from '@/fakemui'
-import { KeyboardArrowDown } from '@/fakemui/icons'
-
-import styles from './Select.module.scss'
-import { SelectContent } from './SelectContent'
-import { SelectGroup } from './SelectGroup'
-import type { SelectItemProps } from './SelectItem'
-import { SelectItem } from './SelectItem'
-import { SelectLabel } from './SelectLabel'
-import { SelectSeparator } from './SelectSeparator'
-import { SelectTrigger } from './SelectTrigger'
-import { SelectValue } from './SelectValue'
-
-export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
-  onValueChange?: (value: string) => void
-  helperText?: ReactNode
-  label?: ReactNode
-  error?: boolean
-  fullWidth?: boolean
-}
-
-const Select = forwardRef<HTMLSelectElement, SelectProps>(
-  (
-    {
-      onValueChange,
-      value,
-      defaultValue,
-      label,
-      error,
-      helperText,
-      children,
-      className,
-      fullWidth = true,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <FormControl className={`${styles.selectWrapper} ${fullWidth ? styles.fullWidth : ''} ${className || ''}`}>
-        {label && <FormLabel>{label}</FormLabel>}
-        <Box className={styles.selectContainer}>
-          <FakeMuiSelect
-            ref={ref}
-            value={value as string}
-            defaultValue={defaultValue as string}
-            onChange={e => onValueChange?.(e.target.value)}
-            error={error}
-            className={styles.select}
-            {...props}
-          >
-            {children}
-          </FakeMuiSelect>
-          <KeyboardArrowDown size={16} className={styles.icon} />
-        </Box>
-        {helperText && <FormHelperText error={error}>{helperText}</FormHelperText>}
-      </FormControl>
-    )
-  }
-)
-Select.displayName = 'Select'
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
-export type { SelectItemProps }
diff --git a/frontends/nextjs/src/components/molecules/form/SelectContent.tsx b/frontends/nextjs/src/components/molecules/form/SelectContent.tsx
deleted file mode 100644
index 5b3e4f6e7..000000000
--- a/frontends/nextjs/src/components/molecules/form/SelectContent.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-interface SelectContentProps {
-  children: ReactNode
-  className?: string
-}
-
-const SelectContent = forwardRef<HTMLDivElement, SelectContentProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <div ref={ref} {...props}>
-        {children}
-      </div>
-    )
-  }
-)
-
-SelectContent.displayName = 'SelectContent'
-
-export { SelectContent }
diff --git a/frontends/nextjs/src/components/molecules/form/SelectGroup.tsx b/frontends/nextjs/src/components/molecules/form/SelectGroup.tsx
deleted file mode 100644
index 5f58c7b5d..000000000
--- a/frontends/nextjs/src/components/molecules/form/SelectGroup.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box } from '@/fakemui'
-
-interface SelectGroupProps {
-  children: ReactNode
-  className?: string
-}
-
-const SelectGroup = forwardRef<HTMLDivElement, SelectGroupProps>(({ children, ...props }, ref) => {
-  return (
-    <Box ref={ref} {...props}>
-      {children}
-    </Box>
-  )
-})
-
-SelectGroup.displayName = 'SelectGroup'
-
-export { SelectGroup }
diff --git a/frontends/nextjs/src/components/molecules/form/SelectItem.tsx b/frontends/nextjs/src/components/molecules/form/SelectItem.tsx
deleted file mode 100644
index 1a88ca7d5..000000000
--- a/frontends/nextjs/src/components/molecules/form/SelectItem.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { ButtonHTMLAttributes,forwardRef } from 'react'
-
-import { MenuItem } from '@/fakemui'
-
-export interface SelectItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  value?: string | number
-  textValue?: string
-  selected?: boolean
-  disabled?: boolean
-}
-
-const SelectItem = forwardRef<HTMLButtonElement, SelectItemProps>(
-  ({ value, children, selected, disabled, ...props }, ref) => {
-    return (
-      <MenuItem ref={ref} selected={selected} disabled={disabled} data-value={value} {...props}>
-        {children}
-      </MenuItem>
-    )
-  }
-)
-
-SelectItem.displayName = 'SelectItem'
-
-export { SelectItem }
diff --git a/frontends/nextjs/src/components/molecules/form/SelectLabel.module.scss b/frontends/nextjs/src/components/molecules/form/SelectLabel.module.scss
deleted file mode 100644
index e247be6e6..000000000
--- a/frontends/nextjs/src/components/molecules/form/SelectLabel.module.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-.selectLabel {
-  padding: 8px 16px;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--text-secondary, #666);
-}
diff --git a/frontends/nextjs/src/components/molecules/form/SelectLabel.tsx b/frontends/nextjs/src/components/molecules/form/SelectLabel.tsx
deleted file mode 100644
index a933b31e6..000000000
--- a/frontends/nextjs/src/components/molecules/form/SelectLabel.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box } from '@/fakemui'
-
-import styles from './SelectLabel.module.scss'
-
-interface SelectLabelProps {
-  children: ReactNode
-  className?: string
-}
-
-const SelectLabel = forwardRef<HTMLDivElement, SelectLabelProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`${styles.selectLabel} ${className || ''}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-
-SelectLabel.displayName = 'SelectLabel'
-
-export { SelectLabel }
diff --git a/frontends/nextjs/src/components/molecules/form/SelectSeparator.module.scss b/frontends/nextjs/src/components/molecules/form/SelectSeparator.module.scss
deleted file mode 100644
index 9828df497..000000000
--- a/frontends/nextjs/src/components/molecules/form/SelectSeparator.module.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.selectSeparator {
-  margin: 4px 0;
-  border-color: var(--divider, rgba(0, 0, 0, 0.12));
-}
diff --git a/frontends/nextjs/src/components/molecules/form/SelectSeparator.tsx b/frontends/nextjs/src/components/molecules/form/SelectSeparator.tsx
deleted file mode 100644
index d96bb78e4..000000000
--- a/frontends/nextjs/src/components/molecules/form/SelectSeparator.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Divider } from '@/fakemui'
-
-import styles from './SelectSeparator.module.scss'
-
-interface SelectSeparatorProps {
-  className?: string
-}
-
-const SelectSeparator = forwardRef<HTMLHRElement, SelectSeparatorProps>(
-  ({ className, ...props }, ref) => {
-    return <Divider ref={ref} className={`${styles.selectSeparator} ${className || ''}`} {...props} />
-  }
-)
-
-SelectSeparator.displayName = 'SelectSeparator'
-
-export { SelectSeparator }
diff --git a/frontends/nextjs/src/components/molecules/form/SelectTrigger.module.scss b/frontends/nextjs/src/components/molecules/form/SelectTrigger.module.scss
deleted file mode 100644
index 6a56b87d8..000000000
--- a/frontends/nextjs/src/components/molecules/form/SelectTrigger.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.selectTrigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 12px;
-  border: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
-  border-radius: 4px;
-  cursor: pointer;
-  transition: border-color 0.2s;
-
-  &:hover {
-    border-color: var(--text-secondary, #666);
-  }
-}
-
-.icon {
-  margin-left: 4px;
-  color: rgba(0, 0, 0, 0.54);
-}
diff --git a/frontends/nextjs/src/components/molecules/form/SelectTrigger.tsx b/frontends/nextjs/src/components/molecules/form/SelectTrigger.tsx
deleted file mode 100644
index 47a08ebf9..000000000
--- a/frontends/nextjs/src/components/molecules/form/SelectTrigger.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box } from '@/fakemui'
-import { KeyboardArrowDown } from '@/fakemui/icons'
-
-import styles from './SelectTrigger.module.scss'
-
-interface SelectTriggerProps {
-  children: ReactNode
-  className?: string
-}
-
-const SelectTrigger = forwardRef<HTMLDivElement, SelectTriggerProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`${styles.selectTrigger} ${className || ''}`} {...props}>
-        {children}
-        <KeyboardArrowDown size={16} className={styles.icon} />
-      </Box>
-    )
-  }
-)
-
-SelectTrigger.displayName = 'SelectTrigger'
-
-export { SelectTrigger }
diff --git a/frontends/nextjs/src/components/molecules/form/SelectValue.module.scss b/frontends/nextjs/src/components/molecules/form/SelectValue.module.scss
deleted file mode 100644
index a6ad2937d..000000000
--- a/frontends/nextjs/src/components/molecules/form/SelectValue.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-.selectValue {
-  &.hasValue {
-    color: var(--text-primary, rgba(0, 0, 0, 0.87));
-  }
-
-  &.placeholder {
-    color: var(--text-secondary, #666);
-  }
-}
diff --git a/frontends/nextjs/src/components/molecules/form/SelectValue.tsx b/frontends/nextjs/src/components/molecules/form/SelectValue.tsx
deleted file mode 100644
index 54c44adeb..000000000
--- a/frontends/nextjs/src/components/molecules/form/SelectValue.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box } from '@/fakemui'
-
-import styles from './SelectValue.module.scss'
-
-interface SelectValueProps {
-  placeholder?: string
-  children?: ReactNode
-  className?: string
-}
-
-const SelectValue = forwardRef<HTMLSpanElement, SelectValueProps>(
-  ({ placeholder, children, className, ...props }, ref) => {
-    return (
-      <Box
-        component="span"
-        ref={ref}
-        className={`${styles.selectValue} ${children ? styles.hasValue : styles.placeholder} ${className || ''}`}
-        {...props}
-      >
-        {children || placeholder}
-      </Box>
-    )
-  }
-)
-
-SelectValue.displayName = 'SelectValue'
-
-export { SelectValue }
diff --git a/frontends/nextjs/src/components/molecules/form/Tabs.module.scss b/frontends/nextjs/src/components/molecules/form/Tabs.module.scss
deleted file mode 100644
index 31088a2e7..000000000
--- a/frontends/nextjs/src/components/molecules/form/Tabs.module.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.tabsWrapper {
-  // Container for tabs
-}
-
-.tabs {
-  // Tabs container styling
-}
-
-.tabsList {
-  display: inline-flex;
-  background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-  border-radius: 4px;
-  padding: 4px;
-}
-
-.tabTrigger {
-  min-height: 36px;
-  padding: 8px 24px;
-  text-transform: none;
-  font-weight: 500;
-  border-radius: 2px;
-
-  &.tab--active {
-    background-color: var(--background-paper, #fff);
-  }
-}
-
-.tabContent {
-  padding-top: 16px;
-}
diff --git a/frontends/nextjs/src/components/molecules/form/Tabs.tsx b/frontends/nextjs/src/components/molecules/form/Tabs.tsx
deleted file mode 100644
index 81793d088..000000000
--- a/frontends/nextjs/src/components/molecules/form/Tabs.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import { ButtonHTMLAttributes, forwardRef, HTMLAttributes } from 'react'
-
-import { Box, Tab as FakeMuiTab, TabProps as FakeMuiTabProps,Tabs as FakeMuiTabs } from '@/fakemui'
-
-import styles from './Tabs.module.scss'
-
-// Tabs container
-export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
-  defaultValue?: string
-  value?: string
-  onValueChange?: (value: string) => void
-  variant?: 'standard' | 'scrollable' | 'fullWidth'
-}
-
-const Tabs = forwardRef<HTMLDivElement, TabsProps>(
-  ({ defaultValue, value, onValueChange, children, className, variant, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`${styles.tabsWrapper} ${className || ''}`} {...props}>
-        <FakeMuiTabs
-          value={value || defaultValue}
-          onChange={(_, newValue) => onValueChange?.(newValue)}
-          variant={variant}
-          className={styles.tabs}
-        >
-          {children}
-        </FakeMuiTabs>
-      </Box>
-    )
-  }
-)
-Tabs.displayName = 'Tabs'
-
-// TabsList (wrapper for tabs - for shadcn compat)
-const TabsList = forwardRef<HTMLDivElement, { children: React.ReactNode; className?: string }>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`${styles.tabsList} ${className || ''}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-TabsList.displayName = 'TabsList'
-
-// TabsTrigger (individual tab)
-export interface TabsTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
-  value: string
-  label?: React.ReactNode
-  selected?: boolean
-}
-
-const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
-  ({ value, label, children, className, selected, ...props }, ref) => {
-    return (
-      <FakeMuiTab
-        ref={ref}
-        value={value}
-        label={label || children}
-        selected={selected}
-        className={`${styles.tabTrigger} ${className || ''}`}
-        {...props}
-      />
-    )
-  }
-)
-TabsTrigger.displayName = 'TabsTrigger'
-
-// TabsContent (content panel)
-interface TabsContentProps {
-  value: string
-  children: React.ReactNode
-  className?: string
-  forceMount?: boolean
-}
-
-const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
-  ({ value, children, forceMount, className, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        role="tabpanel"
-        hidden={!forceMount}
-        id={`tabpanel-${value}`}
-        aria-labelledby={`tab-${value}`}
-        className={`${styles.tabContent} ${className || ''}`}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-TabsContent.displayName = 'TabsContent'
-
-export { Tabs, TabsContent, TabsList, TabsTrigger }
diff --git a/frontends/nextjs/src/components/molecules/index.ts b/frontends/nextjs/src/components/molecules/index.ts
deleted file mode 100644
index c0acd3f84..000000000
--- a/frontends/nextjs/src/components/molecules/index.ts
+++ /dev/null
@@ -1,109 +0,0 @@
-// Molecules - Simple combinations of atoms
-// These combine atoms to create more complex, reusable components
-
-// New MUI-based molecules
-export {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  type AccordionProps,
-  AccordionTrigger,
-} from './display/Accordion'
-export {
-  Alert,
-  AlertDescription,
-  type AlertProps,
-  AlertTitle,
-  type AlertVariant,
-} from './display/Alert'
-export {
-  Card,
-  CardAction,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  type CardHeaderProps,
-  type CardProps,
-  CardTitle,
-} from './display/Card'
-export { EmailField, type EmailFieldProps } from './form/EmailField'
-export {
-  FormField,
-  type FormFieldProps,
-  SearchInput,
-  type SearchInputProps,
-  TextArea,
-  type TextAreaProps,
-} from './form/FormField'
-export { NumberField, type NumberFieldProps } from './form/NumberField'
-export { PasswordField, type PasswordFieldProps } from './form/PasswordField'
-export { SearchBar, type SearchBarProps } from './form/SearchBar'
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  type SelectItemProps,
-  SelectLabel,
-  type SelectProps,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from './form/Select'
-export {
-  Tabs,
-  TabsContent,
-  TabsList,
-  type TabsProps,
-  TabsTrigger,
-  type TabsTriggerProps,
-} from './form/Tabs'
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  type DialogProps,
-  DialogTitle,
-  DialogTrigger,
-} from './overlay/Dialog'
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  type DropdownMenuContentProps,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  type DropdownMenuItemProps,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  type DropdownMenuProps,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from './overlay/DropdownMenu'
-export {
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  type PopoverContentProps,
-  type PopoverProps,
-  PopoverTrigger,
-} from './overlay/Popover'
-
-// Legacy shared components
-export { GodCredentialsBanner } from '../level1/GodCredentialsBanner'
-export { ProfileCard } from '../level2/ProfileCard'
-export { PasswordChangeDialog } from '../PasswordChangeDialog'
-export { AppFooter } from '../shared/AppFooter'
-export { AppHeader } from '../shared/AppHeader'
diff --git a/frontends/nextjs/src/components/molecules/overlay/Dialog.tsx b/frontends/nextjs/src/components/molecules/overlay/Dialog.tsx
deleted file mode 100644
index 83fcd001b..000000000
--- a/frontends/nextjs/src/components/molecules/overlay/Dialog.tsx
+++ /dev/null
@@ -1,187 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import {
-  Box,
-  DialogActions,
-  DialogContent as FakeMuiDialogContent,
-  DialogTitle as FakeMuiDialogTitle,
-  IconButton,
-  Modal,
-  Slide,
-  Typography,
-} from '@/fakemui'
-import { Close } from '@/fakemui/icons'
-
-// Dialog
-export interface DialogProps {
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-  onClose?: () => void
-  children?: ReactNode
-  className?: string
-}
-
-const Dialog = forwardRef<HTMLDivElement, DialogProps>(
-  ({ open, onOpenChange, onClose, children, className, ...props }, ref) => {
-    const handleClose = () => {
-      onClose?.()
-      onOpenChange?.(false)
-    }
-
-    return (
-      <Modal open={open} onClose={handleClose} className={className} {...props}>
-        <Slide direction="up" in={open}>
-          <div ref={ref} className="dialog-panel">{children}</div>
-        </Slide>
-      </Modal>
-    )
-  }
-)
-Dialog.displayName = 'Dialog'
-
-// DialogTrigger
-interface DialogTriggerProps {
-  children: ReactNode
-  asChild?: boolean
-  onClick?: () => void
-}
-
-const DialogTrigger = forwardRef<HTMLDivElement, DialogTriggerProps>(
-  ({ children, onClick, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        onClick={onClick}
-        className="dialog-trigger"
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-DialogTrigger.displayName = 'DialogTrigger'
-
-// DialogContent
-interface DialogContentProps {
-  children: ReactNode
-  className?: string
-  onClose?: () => void
-  showCloseButton?: boolean
-}
-
-const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(
-  ({ children, showCloseButton = true, onClose, className, ...props }, ref) => {
-    return (
-      <FakeMuiDialogContent
-        ref={ref}
-        className={`dialog-content ${showCloseButton ? 'dialog-content--with-close' : ''} ${className || ''}`}
-        {...props}
-      >
-        {showCloseButton && onClose && (
-          <IconButton
-            aria-label="close"
-            onClick={onClose}
-            className="dialog-close-button"
-          >
-            <Close />
-          </IconButton>
-        )}
-        {children}
-      </FakeMuiDialogContent>
-    )
-  }
-)
-DialogContent.displayName = 'DialogContent'
-
-// DialogHeader
-const DialogHeader = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`dialog-header ${className || ''}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-DialogHeader.displayName = 'DialogHeader'
-
-// DialogFooter
-const DialogFooter = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <DialogActions ref={ref} className={`dialog-footer ${className || ''}`} {...props}>
-        {children}
-      </DialogActions>
-    )
-  }
-)
-DialogFooter.displayName = 'DialogFooter'
-
-// DialogTitle
-const DialogTitle = forwardRef<HTMLHeadingElement, { children: ReactNode; className?: string }>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <FakeMuiDialogTitle ref={ref} className={`dialog-title ${className || ''}`} {...props}>
-        {children}
-      </FakeMuiDialogTitle>
-    )
-  }
-)
-DialogTitle.displayName = 'DialogTitle'
-
-// DialogDescription
-const DialogDescription = forwardRef<
-  HTMLParagraphElement,
-  { children: ReactNode; className?: string }
->(({ children, className, ...props }, ref) => {
-  return (
-    <Typography variant="body2" className={`dialog-description ${className || ''}`} {...props}>
-      <span ref={ref}>{children}</span>
-    </Typography>
-  )
-})
-DialogDescription.displayName = 'DialogDescription'
-
-// DialogClose
-const DialogClose = forwardRef<
-  HTMLButtonElement,
-  { children?: ReactNode; onClick?: () => void; asChild?: boolean }
->(({ children, onClick, ...props }, ref) => {
-  if (children) {
-    return (
-      <Box
-        onClick={onClick}
-        className="dialog-close"
-      >
-        {children}
-      </Box>
-    )
-  }
-  return (
-    <IconButton ref={ref} aria-label="close" onClick={onClick} {...props}>
-      <Close />
-    </IconButton>
-  )
-})
-DialogClose.displayName = 'DialogClose'
-
-// Compatibility exports
-const DialogPortal = ({ children }: { children: ReactNode }) => <>{children}</>
-const DialogOverlay = forwardRef<HTMLDivElement>((props, ref) => <div ref={ref} {...props} />)
-DialogOverlay.displayName = 'DialogOverlay'
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
diff --git a/frontends/nextjs/src/components/molecules/overlay/DropdownMenu.tsx b/frontends/nextjs/src/components/molecules/overlay/DropdownMenu.tsx
deleted file mode 100644
index 435c3c151..000000000
--- a/frontends/nextjs/src/components/molecules/overlay/DropdownMenu.tsx
+++ /dev/null
@@ -1,265 +0,0 @@
-'use client'
-
-import { forwardRef, MouseEvent as ReactMouseEvent, ReactNode } from 'react'
-
-import { Box, Divider, ListItemIcon, ListItemText, Menu, MenuItem, Typography } from '@/fakemui'
-import { Check, ChevronRight } from '@/fakemui/icons'
-
-// DropdownMenu (uses FakeMUI Menu under the hood)
-export interface DropdownMenuProps {
-  children: ReactNode
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}
-
-const DropdownMenu = ({ children, open, onOpenChange }: DropdownMenuProps) => {
-  return <>{children}</>
-}
-DropdownMenu.displayName = 'DropdownMenu'
-
-// DropdownMenuTrigger
-interface DropdownMenuTriggerProps {
-  children: ReactNode
-  asChild?: boolean
-  onClick?: (event: ReactMouseEvent<HTMLElement>) => void
-}
-
-const DropdownMenuTrigger = forwardRef<HTMLDivElement, DropdownMenuTriggerProps>(
-  ({ children, onClick, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        onClick={onClick}
-        className="dropdown-menu-trigger"
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-DropdownMenuTrigger.displayName = 'DropdownMenuTrigger'
-
-// DropdownMenuContent
-export interface DropdownMenuContentProps {
-  children?: ReactNode
-  align?: 'start' | 'center' | 'end'
-  side?: 'top' | 'right' | 'bottom' | 'left'
-  sideOffset?: number
-  anchorEl?: HTMLElement | null
-  onClose?: () => void
-  className?: string
-}
-
-const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
-  ({ children, align = 'start', side = 'bottom', anchorEl, onClose, className, ...props }, ref) => {
-    return (
-      <Menu
-        ref={ref}
-        open={Boolean(anchorEl)}
-        anchorEl={anchorEl}
-        onClose={onClose}
-        className={`dropdown-menu-content ${className || ''}`}
-        {...props}
-      >
-        {children}
-      </Menu>
-    )
-  }
-)
-DropdownMenuContent.displayName = 'DropdownMenuContent'
-
-// DropdownMenuItem
-export interface DropdownMenuItemProps {
-  children?: ReactNode
-  inset?: boolean
-  icon?: ReactNode
-  shortcut?: string
-  onClick?: () => void
-  disabled?: boolean
-  className?: string
-}
-
-const DropdownMenuItem = forwardRef<HTMLButtonElement, DropdownMenuItemProps>(
-  ({ children, inset, icon, shortcut, className, ...props }, ref) => {
-    return (
-      <MenuItem
-        ref={ref}
-        className={`dropdown-menu-item ${inset ? 'dropdown-menu-item--inset' : ''} ${className || ''}`}
-        {...props}
-      >
-        {icon && <ListItemIcon>{icon}</ListItemIcon>}
-        <ListItemText>{children}</ListItemText>
-        {shortcut && (
-          <Typography variant="caption" className="dropdown-menu-shortcut">
-            {shortcut}
-          </Typography>
-        )}
-      </MenuItem>
-    )
-  }
-)
-DropdownMenuItem.displayName = 'DropdownMenuItem'
-
-// DropdownMenuCheckboxItem
-interface DropdownMenuCheckboxItemProps {
-  children?: ReactNode
-  checked?: boolean
-  onCheckedChange?: (checked: boolean) => void
-  className?: string
-}
-
-const DropdownMenuCheckboxItem = forwardRef<HTMLButtonElement, DropdownMenuCheckboxItemProps>(
-  ({ children, checked, onCheckedChange, className, ...props }, ref) => {
-    return (
-      <MenuItem
-        ref={ref}
-        onClick={() => onCheckedChange?.(!checked)}
-        className={`dropdown-menu-checkbox-item ${className || ''}`}
-        {...props}
-      >
-        <ListItemIcon>
-          {checked && <Check size={16} />}
-        </ListItemIcon>
-        <ListItemText>{children}</ListItemText>
-      </MenuItem>
-    )
-  }
-)
-DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem'
-
-// DropdownMenuLabel
-const DropdownMenuLabel = forwardRef<
-  HTMLDivElement,
-  { children: ReactNode; inset?: boolean; className?: string }
->(({ children, inset, className, ...props }, ref) => {
-  return (
-    <Box
-      ref={ref}
-      className={`dropdown-menu-label ${inset ? 'dropdown-menu-label--inset' : ''} ${className || ''}`}
-      {...props}
-    >
-      {children}
-    </Box>
-  )
-})
-DropdownMenuLabel.displayName = 'DropdownMenuLabel'
-
-// DropdownMenuSeparator
-const DropdownMenuSeparator = forwardRef<HTMLHRElement, { className?: string }>((props, ref) => {
-  return <Divider ref={ref} className="dropdown-menu-separator" {...props} />
-})
-DropdownMenuSeparator.displayName = 'DropdownMenuSeparator'
-
-// DropdownMenuShortcut
-const DropdownMenuShortcut = ({ children }: { children: ReactNode }) => {
-  return (
-    <Typography variant="caption" className="dropdown-menu-shortcut">
-      {children}
-    </Typography>
-  )
-}
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
-
-// DropdownMenuGroup
-const DropdownMenuGroup = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`dropdown-menu-group ${className || ''}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-DropdownMenuGroup.displayName = 'DropdownMenuGroup'
-
-// DropdownMenuSub (submenu)
-const DropdownMenuSub = ({ children }: { children: ReactNode }) => <>{children}</>
-DropdownMenuSub.displayName = 'DropdownMenuSub'
-
-// DropdownMenuSubTrigger
-const DropdownMenuSubTrigger = forwardRef<
-  HTMLButtonElement,
-  { children: ReactNode; inset?: boolean; className?: string }
->(({ children, inset, className, ...props }, ref) => {
-  return (
-    <MenuItem
-      ref={ref}
-      className={`dropdown-menu-sub-trigger ${inset ? 'dropdown-menu-sub-trigger--inset' : ''} ${className || ''}`}
-      {...props}
-    >
-      <ListItemText>{children}</ListItemText>
-      <ChevronRight size={16} />
-    </MenuItem>
-  )
-})
-DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger'
-
-// DropdownMenuSubContent
-const DropdownMenuSubContent = forwardRef<
-  HTMLDivElement,
-  { children: ReactNode; className?: string }
->(({ children, className, ...props }, ref) => {
-  return (
-    <Box ref={ref} className={`dropdown-menu-sub-content ${className || ''}`} {...props}>
-      {children}
-    </Box>
-  )
-})
-DropdownMenuSubContent.displayName = 'DropdownMenuSubContent'
-
-// DropdownMenuPortal
-const DropdownMenuPortal = ({ children }: { children: ReactNode }) => <>{children}</>
-DropdownMenuPortal.displayName = 'DropdownMenuPortal'
-
-// DropdownMenuRadioGroup
-const DropdownMenuRadioGroup = forwardRef<
-  HTMLDivElement,
-  {
-    children: ReactNode
-    value?: string
-    onValueChange?: (value: string) => void
-    className?: string
-  }
->(({ children, className, ...props }, ref) => {
-  return (
-    <Box ref={ref} className={`dropdown-menu-radio-group ${className || ''}`} {...props}>
-      {children}
-    </Box>
-  )
-})
-DropdownMenuRadioGroup.displayName = 'DropdownMenuRadioGroup'
-
-// DropdownMenuRadioItem
-const DropdownMenuRadioItem = forwardRef<
-  HTMLButtonElement,
-  { children: ReactNode; value: string; className?: string }
->(({ children, value, className, ...props }, ref) => {
-  return (
-    <MenuItem ref={ref} className={`dropdown-menu-radio-item ${className || ''}`} {...props}>
-      <ListItemIcon>
-        <Box className="dropdown-menu-radio-dot" />
-      </ListItemIcon>
-      <ListItemText>{children}</ListItemText>
-    </MenuItem>
-  )
-})
-DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem'
-
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-}
diff --git a/frontends/nextjs/src/components/molecules/overlay/Popover.tsx b/frontends/nextjs/src/components/molecules/overlay/Popover.tsx
deleted file mode 100644
index b4ed7ba5e..000000000
--- a/frontends/nextjs/src/components/molecules/overlay/Popover.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, Popover as FakeMuiPopover } from '@/fakemui'
-
-// Popover container
-export interface PopoverProps {
-  children: ReactNode
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}
-
-const Popover = ({ children, open, onOpenChange }: PopoverProps) => {
-  return <>{children}</>
-}
-Popover.displayName = 'Popover'
-
-// PopoverTrigger
-interface PopoverTriggerProps {
-  children: ReactNode
-  asChild?: boolean
-  onClick?: (event: React.MouseEvent<HTMLElement>) => void
-}
-
-const PopoverTrigger = forwardRef<HTMLDivElement, PopoverTriggerProps>(
-  ({ children, onClick, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        onClick={onClick}
-        className="popover-trigger"
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-PopoverTrigger.displayName = 'PopoverTrigger'
-
-// PopoverContent
-export interface PopoverContentProps {
-  children?: ReactNode
-  align?: 'start' | 'center' | 'end'
-  side?: 'top' | 'right' | 'bottom' | 'left'
-  sideOffset?: number
-  anchorEl?: HTMLElement | null
-  onClose?: () => void
-  className?: string
-}
-
-const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
-  (
-    { children, align = 'center', side = 'bottom', sideOffset = 4, anchorEl, onClose, className, ...props },
-    ref
-  ) => {
-    const anchorOrigin = {
-      vertical: side === 'top' ? 'top' : 'bottom',
-      horizontal: align === 'end' ? 'right' : align === 'center' ? 'center' : 'left',
-    } as const
-
-    return (
-      <FakeMuiPopover
-        ref={ref}
-        open={Boolean(anchorEl)}
-        anchorEl={anchorEl}
-        onClose={onClose}
-        anchorOrigin={anchorOrigin}
-        transformOrigin={{
-          vertical: side === 'top' ? 'bottom' : 'top',
-          horizontal: anchorOrigin.horizontal,
-        }}
-        className={`popover-content ${className || ''}`}
-        {...props}
-      >
-        {children}
-      </FakeMuiPopover>
-    )
-  }
-)
-PopoverContent.displayName = 'PopoverContent'
-
-// PopoverAnchor
-const PopoverAnchor = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Box ref={ref} className="popover-anchor" {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-PopoverAnchor.displayName = 'PopoverAnchor'
-
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }
diff --git a/frontends/nextjs/src/components/organisms/README.md b/frontends/nextjs/src/components/organisms/README.md
deleted file mode 100644
index edd5f4fae..000000000
--- a/frontends/nextjs/src/components/organisms/README.md
+++ /dev/null
@@ -1,111 +0,0 @@
-# Organisms
-
-Complex UI sections that combine atoms and molecules into complete features. Built on Material UI.
-
-## Layout Components
-
-| Component | Description |
-|-----------|-------------|
-| `Table` | Data table with header/body/footer |
-| `Command` | Command palette (cmdk-style) |
-| `Sheet` | Side panel drawer |
-| `Sidebar` | Navigation sidebar with groups |
-| `NavigationMenu` | Top navigation with dropdowns |
-| `Form` | Form with react-hook-form integration |
-
-## Feature Components
-
-### Core Builders
-- `SchemaEditor` - Full schema editing interface
-- `ComponentCatalog` - Component browsing and selection
-- `PropertyInspector` - Component property editor
-- `Builder` - Visual page builder with drag-and-drop
-- `Canvas` - Rendering canvas for visual builder
-
-### Configuration Managers
-- `CssClassBuilder` - Visual CSS class selection
-- `ThemeEditor` - Theme customization interface
-- `SMTPConfigEditor` - SMTP configuration form
-
-### Code Editors
-- `CodeEditor` - Monaco-based code editor
-- `LuaEditor` - Lua script editor
-- `JsonEditor` - JSON editing with validation
-- `NerdModeIDE` - Full-featured IDE panel
-
-### Data Management
-- `DatabaseManager` - Database management
-- `UserManagement` - User CRUD interface
-- `PackageManager` - Package management
-- `AuditLogViewer` - Audit log display
-
-### Security Components
-- `SecurityWarningDialog` - Security scan results dialog with severity classification
-
-## Usage
-
-```typescript
-import { 
-  Table, TableHeader, TableBody, TableRow, TableCell,
-  Sidebar, SidebarHeader, SidebarContent,
-  UserManagement 
-} from '@/components/organisms'
-
-function AdminPanel() {
-  return (
-    <Box sx={{ display: 'flex', height: '100vh' }}>
-      <Sidebar width={280}>
-        <SidebarHeader>Admin</SidebarHeader>
-        <SidebarContent>
-          <SidebarGroup label="Users">
-            <SidebarMenuItem icon={<PeopleIcon />}>Users</SidebarMenuItem>
-          </SidebarGroup>
-        </SidebarContent>
-      </Sidebar>
-      <Box sx={{ flex: 1, p: 3 }}>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Name</TableHead>
-              <TableHead>Status</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {users.map(user => (
-              <TableRow key={user.id}>
-                <TableCell>{user.name}</TableCell>
-                <TableCell>{user.status}</TableCell>
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
-      </Box>
-    </Box>
-  )
-}
-```
-
-## Rules
-
-1. ✅ **DO** compose organisms from molecules and atoms
-2. ✅ **DO** include business logic when needed
-3. ✅ **DO** handle data fetching and state management
-4. ✅ **DO** use MUI `sx` prop for styling
-5. ❌ **DON'T** use Tailwind classes
-6. ❌ **DON'T** create organisms that are too granular (use molecules)
-
-## Testing
-
-```typescript
-describe('UserManagement', () => {
-  it('allows creating new users', async () => {
-    render(<UserManagement />)
-    
-    await userEvent.click(screen.getByRole('button', { name: /add user/i }))
-    await userEvent.type(screen.getByLabelText(/username/i), 'newuser')
-    await userEvent.click(screen.getByRole('button', { name: /save/i }))
-    
-    expect(screen.getByText('newuser')).toBeInTheDocument()
-  })
-})
-```
diff --git a/frontends/nextjs/src/components/organisms/data/Form.tsx b/frontends/nextjs/src/components/organisms/data/Form.tsx
deleted file mode 100644
index 9241eb155..000000000
--- a/frontends/nextjs/src/components/organisms/data/Form.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-import {
-  Controller,
-  ControllerProps,
-  FieldValues,
-  FormProvider,
-  useForm,
-  useFormContext,
-  UseFormReturn,
-} from 'react-hook-form'
-
-import {
-  Box,
-  FormControl,
-  FormGroup,
-  FormHelperText,
-  FormLabel,
-} from '@/fakemui'
-
-// Form wrapper with react-hook-form
-interface FormProps<T extends FieldValues> {
-  form: UseFormReturn<T>
-  onSubmit: (data: T) => void
-  children: ReactNode
-  className?: string
-}
-
-function Form<T extends FieldValues>({ form, onSubmit, children, className, ...props }: FormProps<T>) {
-  return (
-    <FormProvider {...form}>
-      <Box
-        component="form"
-        onSubmit={form.handleSubmit(onSubmit)}
-        className={`form-wrapper ${className || ''}`}
-        {...props}
-      >
-        {children}
-      </Box>
-    </FormProvider>
-  )
-}
-Form.displayName = 'Form'
-
-// FormField (wrapper for Controller)
-interface FormFieldProps<T extends FieldValues> extends Omit<ControllerProps<T>, 'render'> {
-  render: ControllerProps<T>['render']
-}
-
-function FormField<T extends FieldValues>({ name, control, render, ...props }: FormFieldProps<T>) {
-  return <Controller name={name} control={control} render={render} {...props} />
-}
-FormField.displayName = 'FormField'
-
-// FormItem
-const FormItem = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`form-item ${className || ''}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-FormItem.displayName = 'FormItem'
-
-// FormLabel
-const FormLabelComponent = forwardRef<
-  HTMLLabelElement,
-  { children: ReactNode; required?: boolean; error?: boolean; className?: string }
->(({ children, required, error, className, ...props }, ref) => {
-  return (
-    <FormLabel
-      ref={ref}
-      required={required}
-      error={error}
-      className={`form-label ${className || ''}`}
-      {...props}
-    >
-      {children}
-    </FormLabel>
-  )
-})
-FormLabelComponent.displayName = 'FormLabel'
-
-// FormControl (wrapper)
-const FormControlComponent = forwardRef<
-  HTMLDivElement,
-  { children: ReactNode; fullWidth?: boolean; error?: boolean; className?: string }
->(({ children, fullWidth = true, error, className, ...props }, ref) => {
-  return (
-    <FormControl ref={ref} fullWidth={fullWidth} error={error} className={className} {...props}>
-      {children}
-    </FormControl>
-  )
-})
-FormControlComponent.displayName = 'FormControl'
-
-// FormDescription
-const FormDescription = forwardRef<
-  HTMLParagraphElement,
-  { children: ReactNode; className?: string }
->(({ children, ...props }, ref) => {
-  return (
-    <FormHelperText ref={ref} {...props}>
-      {children}
-    </FormHelperText>
-  )
-})
-FormDescription.displayName = 'FormDescription'
-
-// FormMessage (error message)
-const FormMessage = forwardRef<HTMLParagraphElement, { children?: ReactNode; className?: string }>(
-  ({ children, ...props }, ref) => {
-    if (!children) return null
-    return (
-      <FormHelperText ref={ref} error {...props}>
-        {children}
-      </FormHelperText>
-    )
-  }
-)
-FormMessage.displayName = 'FormMessage'
-
-// useFormField hook (to get form context in nested components)
-const useFormField = () => {
-  const context = useFormContext()
-  return context
-}
-
-export {
-  Form,
-  FormControlComponent as FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabelComponent as FormLabel,
-  FormMessage,
-  FormProvider,
-  useForm,
-  useFormField,
-}
diff --git a/frontends/nextjs/src/components/organisms/data/Table.tsx b/frontends/nextjs/src/components/organisms/data/Table.tsx
deleted file mode 100644
index 22ea54133..000000000
--- a/frontends/nextjs/src/components/organisms/data/Table.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-// Table barrel export - maintains backward compatibility after splitting into smaller organisms
-// Components split into separate files to keep each under 150 LOC
-export {
-  TableCaption,
-  TableCell,
-  type TableCellProps,
-  TableHead,
-  type TableHeadProps,
-  TableRow,
-  type TableRowProps,
-} from './TableCell'
-export {
-  TableCore as Table,
-  TableBody,
-  TableFooter,
-  TableHeader,
-  type TableProps,
-} from './TableCore'
diff --git a/frontends/nextjs/src/components/organisms/data/TableCell.tsx b/frontends/nextjs/src/components/organisms/data/TableCell.tsx
deleted file mode 100644
index ef9efe283..000000000
--- a/frontends/nextjs/src/components/organisms/data/TableCell.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-'use client'
-
-import { ComponentProps,forwardRef, ReactNode } from 'react'
-
-import {
-  TableCell as FakemuiTableCell,
-  TableRow as FakemuiTableRow,
-} from '@/fakemui'
-
-// TableRow
-export interface TableRowProps {
-  children: ReactNode
-  className?: string
-  selected?: boolean
-  hover?: boolean
-  onClick?: () => void
-}
-
-const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
-  ({ children, selected, hover = true, className, ...props }, ref) => {
-    const classes = [
-      'table-row',
-      selected && 'table-row--selected',
-      hover && 'table-row--hover',
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ')
-
-    return (
-      <FakemuiTableRow ref={ref} className={classes} {...props}>
-        {children}
-      </FakemuiTableRow>
-    )
-  }
-)
-TableRow.displayName = 'TableRow'
-
-// TableHead (cell in header)
-export interface TableHeadProps extends ComponentProps<typeof FakemuiTableCell> {
-  className?: string
-}
-
-const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <FakemuiTableCell
-        ref={ref}
-        component="th"
-        className={`table-head-cell ${className || ''}`}
-        {...props}
-      >
-        {children}
-      </FakemuiTableCell>
-    )
-  }
-)
-TableHead.displayName = 'TableHead'
-
-// TableCell
-export interface TableCellProps extends ComponentProps<typeof FakemuiTableCell> {
-  className?: string
-}
-
-const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <FakemuiTableCell ref={ref} {...props}>
-        {children}
-      </FakemuiTableCell>
-    )
-  }
-)
-TableCell.displayName = 'TableCell'
-
-// TableCaption
-const TableCaption = forwardRef<
-  HTMLTableCaptionElement,
-  { children: ReactNode; className?: string }
->(({ children, ...props }, ref) => {
-  return (
-    <caption
-      ref={ref}
-      style={{
-        captionSide: 'bottom',
-        padding: '12px',
-        fontSize: '0.875rem',
-        color: 'var(--text-secondary)',
-      }}
-      {...props}
-    >
-      {children}
-    </caption>
-  )
-})
-TableCaption.displayName = 'TableCaption'
-
-export { TableCaption, TableCell, TableHead, TableRow }
diff --git a/frontends/nextjs/src/components/organisms/data/TableCore.tsx b/frontends/nextjs/src/components/organisms/data/TableCore.tsx
deleted file mode 100644
index 705a5dbc0..000000000
--- a/frontends/nextjs/src/components/organisms/data/TableCore.tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import {
-  Paper,
-  Table,
-  TableBody as FakemuiTableBody,
-  TableContainer,
-  TableFooter as FakemuiTableFooter,
-  TableHead as FakemuiTableHead,
-} from '@/fakemui'
-
-// Table wrapper with container
-export interface TableProps {
-  children: ReactNode
-  className?: string
-  stickyHeader?: boolean
-}
-
-const TableCore = forwardRef<HTMLTableElement, TableProps>(
-  ({ children, stickyHeader, className, ...props }, ref) => {
-    return (
-      <TableContainer>
-        <Paper className={`table-wrapper ${className || ''}`}>
-          <Table ref={ref} stickyHeader={stickyHeader} size="small" {...props}>
-            {children}
-          </Table>
-        </Paper>
-      </TableContainer>
-    )
-  }
-)
-TableCore.displayName = 'TableCore'
-
-// TableHeader
-const TableHeader = forwardRef<
-  HTMLTableSectionElement,
-  { children: ReactNode; className?: string }
->(({ children, ...props }, ref) => {
-  return (
-    <FakemuiTableHead ref={ref} {...props}>
-      {children}
-    </FakemuiTableHead>
-  )
-})
-TableHeader.displayName = 'TableHeader'
-
-// TableBody
-const TableBody = forwardRef<HTMLTableSectionElement, { children: ReactNode; className?: string }>(
-  ({ children, ...props }, ref) => {
-    return (
-      <FakemuiTableBody ref={ref} {...props}>
-        {children}
-      </FakemuiTableBody>
-    )
-  }
-)
-TableBody.displayName = 'TableBody'
-
-// TableFooter
-const TableFooter = forwardRef<
-  HTMLTableSectionElement,
-  { children: ReactNode; className?: string }
->(({ children, ...props }, ref) => {
-  return (
-    <FakemuiTableFooter ref={ref} {...props}>
-      {children}
-    </FakemuiTableFooter>
-  )
-})
-TableFooter.displayName = 'TableFooter'
-
-export { TableBody, TableCore, TableFooter, TableHeader }
diff --git a/frontends/nextjs/src/components/organisms/index.ts b/frontends/nextjs/src/components/organisms/index.ts
deleted file mode 100644
index 40b089ba8..000000000
--- a/frontends/nextjs/src/components/organisms/index.ts
+++ /dev/null
@@ -1,136 +0,0 @@
-// Organisms - Complex UI sections
-// These are larger components that combine atoms and molecules
-
-// New MUI-based organisms - Data
-export {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  type TableCellProps,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  type TableHeadProps,
-  type TableProps,
-  TableRow,
-  type TableRowProps,
-} from './data/Table'
-
-// New MUI-based organisms - Overlay/Dialogs
-export {
-  Command,
-  CommandDialog,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandLoading,
-  type CommandProps,
-  CommandSeparator,
-  CommandShortcut,
-} from './overlay/Command'
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  type SheetProps,
-  SheetTitle,
-  SheetTrigger,
-} from './overlay/Sheet'
-
-// New MUI-based organisms - Navigation
-export {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField as FormFieldController,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  FormProvider,
-  useForm,
-  useFormField,
-} from './data/Form'
-export {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  type NavigationMenuProps,
-  NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
-  NavigationMenuViewport,
-} from './navigation/NavigationMenu'
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarGroup,
-  SidebarGroupContent,
-  SidebarGroupLabel,
-  SidebarHeader,
-  SidebarInset,
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-  type SidebarProps,
-  SidebarProvider,
-  SidebarRail,
-  SidebarSeparator,
-  SidebarTrigger,
-} from './navigation/Sidebar'
-
-// Legacy feature components
-export { AuditLogViewer } from '../AuditLogViewer'
-export { Builder } from '../Builder'
-export { Canvas } from '../Canvas'
-export { CodeEditor } from '../CodeEditor'
-export { ComponentCatalog } from '../ComponentCatalog'
-export { ComponentConfigDialog } from '../ComponentConfigDialog'
-export { ComponentHierarchyEditor } from '../ComponentHierarchyEditor'
-export { CssClassBuilder } from '../CssClassBuilder'
-export { CssClassManager } from '../CssClassManager'
-export { DatabaseManager } from '../DatabaseManager'
-export { DropdownConfigManager } from '../DropdownConfigManager'
-export { FieldRenderer } from '../FieldRenderer'
-export { GenericPage } from '../GenericPage'
-export { GitHubActionsFetcher } from '../GitHubActionsFetcher'
-export { GodCredentialsSettings } from '../GodCredentialsSettings'
-export { JsonEditor } from '../JsonEditor'
-export { ContactSection } from '../level1/ContactSection'
-export { FeaturesSection } from '../level1/FeaturesSection'
-export { HeroSection } from '../level1/HeroSection'
-export { NavigationBar } from '../level1/NavigationBar'
-export { CommentsList } from '../level2/CommentsList'
-export { Login } from '../Login'
-export { LuaEditor } from '../LuaEditor'
-export { LuaSnippetLibrary } from '../LuaSnippetLibrary'
-export { ModelListView } from '../ModelListView'
-export { NerdModeIDE } from '../NerdModeIDE'
-export { PackageImportExport } from '../PackageImportExport'
-export { PackageManager } from '../PackageManager'
-export { PageRoutesManager } from '../PageRoutesManager'
-export { PropertyInspector } from '../PropertyInspector'
-export { QuickGuide } from '../QuickGuide'
-export { RecordForm } from '../RecordForm'
-export { RenderComponent } from '../RenderComponent'
-export { SchemaEditor } from '../SchemaEditor'
-export { SchemaEditorLevel4 } from '../SchemaEditorLevel4'
-export { ScreenshotAnalyzer } from '../ScreenshotAnalyzer'
-export { SMTPConfigEditor } from '../SMTPConfigEditor'
-export { ThemeEditor } from '../ThemeEditor'
-export { UnifiedLogin } from '../UnifiedLogin'
-export { UserManagement } from '../UserManagement'
-export { WorkflowEditor } from '../WorkflowEditor'
-
-// Security components
-export { SecurityWarningDialog } from './security/SecurityWarningDialog'
diff --git a/frontends/nextjs/src/components/organisms/navigation/NavigationMenu.tsx b/frontends/nextjs/src/components/organisms/navigation/NavigationMenu.tsx
deleted file mode 100644
index be19b8cc5..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/NavigationMenu.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-// NavigationMenu barrel export - maintains backward compatibility after splitting into smaller organisms
-// Components split into separate files to keep each under 150 LOC
-export {
-  NavigationMenuCore as NavigationMenu,
-  NavigationMenuItem,
-  NavigationMenuList,
-  type NavigationMenuProps,
-} from './NavigationMenuCore'
-export {
-  NavigationMenuIndicator,
-  NavigationMenuLink,
-  navigationMenuTriggerStyle,
-  NavigationMenuViewport,
-} from './NavigationMenuLink'
-export { NavigationMenuContent, NavigationMenuTrigger } from './NavigationMenuTrigger'
diff --git a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuCore.module.scss b/frontends/nextjs/src/components/organisms/navigation/NavigationMenuCore.module.scss
deleted file mode 100644
index dfcb2c865..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuCore.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-@use '@/styles/variables' as *;
-@use '@/styles/mixins' as *;
-
-.navigationMenu {
-  display: flex;
-  gap: 0.25rem;
-  
-  &.horizontal {
-    flex-direction: row;
-    align-items: center;
-  }
-  
-  &.vertical {
-    flex-direction: column;
-    align-items: stretch;
-  }
-}
-
-.navigationMenuList {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 0.25rem;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.navigationMenuItem {
-  position: relative;
-}
diff --git a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuCore.tsx b/frontends/nextjs/src/components/organisms/navigation/NavigationMenuCore.tsx
deleted file mode 100644
index 62f4dcd52..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuCore.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box } from '@/fakemui'
-
-import styles from './NavigationMenuCore.module.scss'
-
-// NavigationMenu container
-export interface NavigationMenuProps {
-  children: ReactNode
-  className?: string
-  orientation?: 'horizontal' | 'vertical'
-}
-
-const NavigationMenuCore = forwardRef<HTMLDivElement, NavigationMenuProps>(
-  ({ children, className = '', orientation = 'horizontal', ...props }, ref) => {
-    const orientationClass = orientation === 'horizontal' 
-      ? styles.horizontal 
-      : styles.vertical
-    
-    return (
-      <Box
-        ref={ref}
-        className={`${styles.navigationMenu} ${orientationClass} ${className}`}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-NavigationMenuCore.displayName = 'NavigationMenuCore'
-
-// NavigationMenuList
-const NavigationMenuList = forwardRef<
-  HTMLUListElement,
-  { children: ReactNode; className?: string }
->(({ children, className = '', ...props }, ref) => {
-  return (
-    <Box
-      ref={ref}
-      component="ul"
-      className={`${styles.navigationMenuList} ${className}`}
-      {...props}
-    >
-      {children}
-    </Box>
-  )
-})
-NavigationMenuList.displayName = 'NavigationMenuList'
-
-// NavigationMenuItem
-interface NavigationMenuItemProps {
-  children: ReactNode
-  className?: string
-}
-
-const NavigationMenuItem = forwardRef<HTMLLIElement, NavigationMenuItemProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Box 
-        ref={ref} 
-        component="li" 
-        className={`${styles.navigationMenuItem} ${className}`} 
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-NavigationMenuItem.displayName = 'NavigationMenuItem'
-
-export { NavigationMenuCore, NavigationMenuItem, NavigationMenuList }
diff --git a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuLink.module.scss b/frontends/nextjs/src/components/organisms/navigation/NavigationMenuLink.module.scss
deleted file mode 100644
index c35f3b778..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuLink.module.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-@use '@/styles/variables' as *;
-@use '@/styles/mixins' as *;
-
-.navigationMenuLink {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  text-transform: none;
-  font-weight: 500;
-  min-width: auto;
-  padding: 0.5rem 1rem;
-  color: var(--text-primary, inherit);
-  text-decoration: none;
-  border-radius: 4px;
-  transition: background-color 0.2s;
-  
-  &:hover {
-    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-  }
-  
-  &.active {
-    color: var(--primary-main, #1976d2);
-  }
-}
-
-.navigationMenuIndicator {
-  position: absolute;
-  bottom: 0;
-  height: 2px;
-  background-color: var(--primary-main, #1976d2);
-  transition: all 0.2s;
-}
-
-.navigationMenuViewport {
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  background-color: var(--background-paper, #fff);
-  border-radius: 4px;
-  box-shadow: var(--shadow-3, 0 4px 20px rgba(0, 0, 0, 0.15));
-  overflow: hidden;
-}
-
-.triggerStyle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.5rem 1rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 4px;
-  transition: all 0.2s;
-  
-  &:hover {
-    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-  }
-  
-  &:focus {
-    background-color: var(--action-focus, rgba(0, 0, 0, 0.12));
-  }
-}
diff --git a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuLink.tsx b/frontends/nextjs/src/components/organisms/navigation/NavigationMenuLink.tsx
deleted file mode 100644
index a835a2ead..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuLink.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, Button } from '@/fakemui'
-
-import styles from './NavigationMenuLink.module.scss'
-
-// NavigationMenuLink
-interface NavigationMenuLinkProps {
-  children: ReactNode
-  href?: string
-  active?: boolean
-  onClick?: () => void
-  className?: string
-}
-
-const NavigationMenuLink = forwardRef<HTMLAnchorElement, NavigationMenuLinkProps>(
-  ({ children, href, active, onClick, className = '', ...props }, ref) => {
-    const activeClass = active ? styles.active : ''
-    
-    // Use anchor element if href is provided
-    if (href) {
-      return (
-        <a
-          ref={ref}
-          href={href}
-          onClick={onClick}
-          className={`${styles.navigationMenuLink} ${activeClass} ${className}`}
-          {...props}
-        >
-          {children}
-        </a>
-      )
-    }
-    
-    return (
-      <Button
-        ref={ref as React.Ref<HTMLButtonElement>}
-        onClick={onClick}
-        variant="ghost"
-        className={`${styles.navigationMenuLink} ${activeClass} ${className}`}
-        {...props}
-      >
-        {children}
-      </Button>
-    )
-  }
-)
-NavigationMenuLink.displayName = 'NavigationMenuLink'
-
-// NavigationMenuIndicator
-const NavigationMenuIndicator = forwardRef<HTMLDivElement, { className?: string }>(
-  ({ className = '', ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        className={`${styles.navigationMenuIndicator} ${className}`}
-        {...props}
-      />
-    )
-  }
-)
-NavigationMenuIndicator.displayName = 'NavigationMenuIndicator'
-
-// NavigationMenuViewport
-const NavigationMenuViewport = forwardRef<
-  HTMLDivElement,
-  { children?: ReactNode; className?: string }
->(({ children, className = '', ...props }, ref) => {
-  return (
-    <Box
-      ref={ref}
-      className={`${styles.navigationMenuViewport} ${className}`}
-      {...props}
-    >
-      {children}
-    </Box>
-  )
-})
-NavigationMenuViewport.displayName = 'NavigationMenuViewport'
-
-// Helper: navigationMenuTriggerStyle (returns className for consistent styling)
-const navigationMenuTriggerStyle = () => styles.triggerStyle
-
-export {
-  NavigationMenuIndicator,
-  NavigationMenuLink,
-  navigationMenuTriggerStyle,
-  NavigationMenuViewport,
-}
diff --git a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuTrigger.module.scss b/frontends/nextjs/src/components/organisms/navigation/NavigationMenuTrigger.module.scss
deleted file mode 100644
index 726a91460..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuTrigger.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-@use '@/styles/variables' as *;
-@use '@/styles/mixins' as *;
-
-.navigationMenuTrigger {
-  text-transform: none;
-  font-weight: 500;
-  color: var(--text-primary, inherit);
-  
-  &:hover {
-    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-  }
-}
-
-.navigationMenuContent {
-  margin-top: 0.5rem;
-  min-width: 200px;
-  border-radius: 4px;
-  box-shadow: var(--shadow-3, 0 4px 20px rgba(0, 0, 0, 0.15));
-}
diff --git a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuTrigger.tsx b/frontends/nextjs/src/components/organisms/navigation/NavigationMenuTrigger.tsx
deleted file mode 100644
index 78279c431..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/NavigationMenuTrigger.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Button, Menu } from '@/fakemui'
-import { KeyboardArrowDown } from '@/fakemui/icons'
-
-import styles from './NavigationMenuTrigger.module.scss'
-
-// NavigationMenuTrigger
-interface NavigationMenuTriggerProps {
-  children: ReactNode
-  className?: string
-  onClick?: (event: React.MouseEvent<HTMLElement>) => void
-}
-
-const NavigationMenuTrigger = forwardRef<HTMLButtonElement, NavigationMenuTriggerProps>(
-  ({ children, className = '', onClick, ...props }, ref) => {
-    return (
-      <Button
-        ref={ref}
-        onClick={onClick}
-        variant="ghost"
-        endIcon={<KeyboardArrowDown />}
-        className={`${styles.navigationMenuTrigger} ${className}`}
-        {...props}
-      >
-        {children}
-      </Button>
-    )
-  }
-)
-NavigationMenuTrigger.displayName = 'NavigationMenuTrigger'
-
-// NavigationMenuContent
-interface NavigationMenuContentProps {
-  children: ReactNode
-  className?: string
-  anchorEl?: HTMLElement | null
-  open?: boolean
-  onClose?: () => void
-}
-
-const NavigationMenuContent = forwardRef<HTMLDivElement, NavigationMenuContentProps>(
-  ({ children, className = '', anchorEl: _anchorEl, open, onClose, ...props }, ref) => {
-    return (
-      <Menu
-        ref={ref}
-        open={open}
-        onClose={onClose}
-        className={`${styles.navigationMenuContent} ${className}`}
-        {...props}
-      >
-        {children}
-      </Menu>
-    )
-  }
-)
-NavigationMenuContent.displayName = 'NavigationMenuContent'
-
-export { NavigationMenuContent, NavigationMenuTrigger }
diff --git a/frontends/nextjs/src/components/organisms/navigation/Sidebar.tsx b/frontends/nextjs/src/components/organisms/navigation/Sidebar.tsx
deleted file mode 100644
index 796ebc44b..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/Sidebar.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-// Sidebar barrel export - maintains backward compatibility after splitting into smaller organisms
-// Components split into separate files to keep each under 150 LOC
-export { SidebarCore as Sidebar, type SidebarProps } from './SidebarCore'
-export { SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger } from './SidebarExtras'
-export { SidebarGroup, SidebarGroupContent, SidebarGroupLabel } from './SidebarGroup'
-export { SidebarContent, SidebarFooter, SidebarHeader, SidebarInset } from './SidebarLayout'
-export { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from './SidebarMenu'
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarCore.module.scss b/frontends/nextjs/src/components/organisms/navigation/SidebarCore.module.scss
deleted file mode 100644
index 862699c7d..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/SidebarCore.module.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-@use '@/styles/variables' as *;
-@use '@/styles/mixins' as *;
-
-.sidebarDrawer {
-  :global(.drawer__content) {
-    width: var(--sidebar-width, 280px);
-  }
-}
-
-.sidebarCore {
-  flex-shrink: 0;
-  width: var(--sidebar-width, 280px);
-  transition: width 0.2s ease-in-out;
-  overflow: hidden;
-  
-  &.open {
-    width: var(--sidebar-width, 280px);
-  }
-  
-  &.collapsed {
-    width: var(--sidebar-width, 64px);
-  }
-}
-
-.sidebarInner {
-  width: var(--sidebar-inner-width, 280px);
-  height: 100%;
-  background-color: var(--background-paper, #fff);
-  border-right: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
-  display: flex;
-  flex-direction: column;
-}
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarCore.tsx b/frontends/nextjs/src/components/organisms/navigation/SidebarCore.tsx
deleted file mode 100644
index 89e5b411d..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/SidebarCore.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, Drawer, useMediaQueryDown } from '@/fakemui'
-
-import styles from './SidebarCore.module.scss'
-
-// Sidebar container
-export interface SidebarProps {
-  children: ReactNode
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-  width?: number
-  collapsedWidth?: number
-  variant?: 'permanent' | 'persistent' | 'temporary'
-  side?: 'left' | 'right'
-}
-
-const SidebarCore = forwardRef<HTMLDivElement, SidebarProps>(
-  (
-    {
-      children,
-      open = true,
-      onOpenChange,
-      width = 280,
-      collapsedWidth = 64,
-      variant = 'permanent',
-      side = 'left',
-      ...props
-    },
-    ref
-  ) => {
-    const isMobile = useMediaQueryDown('md')
-
-    if (isMobile || variant === 'temporary') {
-      return (
-        <Drawer
-          ref={ref}
-          anchor={side}
-          open={open}
-          onClose={() => onOpenChange?.(false)}
-          className={styles.sidebarDrawer}
-          style={{ '--sidebar-width': `${width}px` } as React.CSSProperties}
-          {...props}
-        >
-          {children}
-        </Drawer>
-      )
-    }
-
-    const sidebarWidth = open ? width : collapsedWidth
-    const openClass = open ? styles.open : styles.collapsed
-
-    return (
-      <Box
-        ref={ref}
-        component="nav"
-        className={`${styles.sidebarCore} ${openClass}`}
-        style={{ '--sidebar-width': `${sidebarWidth}px`, '--sidebar-inner-width': `${width}px` } as React.CSSProperties}
-        {...props}
-      >
-        <Box className={styles.sidebarInner}>
-          {children}
-        </Box>
-      </Box>
-    )
-  }
-)
-SidebarCore.displayName = 'SidebarCore'
-
-export { SidebarCore }
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarExtras.module.scss b/frontends/nextjs/src/components/organisms/navigation/SidebarExtras.module.scss
deleted file mode 100644
index dea3fb925..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/SidebarExtras.module.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-@use '@/styles/variables' as *;
-@use '@/styles/mixins' as *;
-
-.sidebarSeparator {
-  margin: 0.5rem 0;
-}
-
-.sidebarTrigger {
-  // Uses IconButton styles
-}
-
-.sidebarRail {
-  position: absolute;
-  right: -4px;
-  top: 0;
-  bottom: 0;
-  width: 8px;
-  cursor: col-resize;
-  
-  &:hover {
-    background-color: var(--primary-main, #1976d2);
-    opacity: 0.2;
-  }
-}
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarExtras.tsx b/frontends/nextjs/src/components/organisms/navigation/SidebarExtras.tsx
deleted file mode 100644
index 17fae9ed8..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/SidebarExtras.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, Divider, IconButton } from '@/fakemui'
-import { Menu } from '@/fakemui/icons'
-
-import styles from './SidebarExtras.module.scss'
-
-// SidebarSeparator
-const SidebarSeparator = forwardRef<HTMLHRElement, { className?: string }>(
-  ({ className = '', ...props }, ref) => {
-    return <Divider ref={ref} className={`${styles.sidebarSeparator} ${className}`} {...props} />
-  }
-)
-SidebarSeparator.displayName = 'SidebarSeparator'
-
-// SidebarTrigger
-interface SidebarTriggerProps {
-  onClick?: () => void
-  className?: string
-}
-
-const SidebarTrigger = forwardRef<HTMLButtonElement, SidebarTriggerProps>(
-  ({ onClick, className = '', ...props }, ref) => {
-    return (
-      <IconButton ref={ref} onClick={onClick} sm className={`${styles.sidebarTrigger} ${className}`} {...props}>
-        <Menu />
-      </IconButton>
-    )
-  }
-)
-SidebarTrigger.displayName = 'SidebarTrigger'
-
-// SidebarRail
-const SidebarRail = forwardRef<HTMLDivElement, { className?: string }>(
-  ({ className = '', ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        className={`${styles.sidebarRail} ${className}`}
-        {...props}
-      />
-    )
-  }
-)
-SidebarRail.displayName = 'SidebarRail'
-
-// SidebarProvider
-const SidebarProvider = ({ children }: { children: ReactNode }) => <>{children}</>
-SidebarProvider.displayName = 'SidebarProvider'
-
-export { SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger }
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarGroup.module.scss b/frontends/nextjs/src/components/organisms/navigation/SidebarGroup.module.scss
deleted file mode 100644
index f3dad2f0f..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/SidebarGroup.module.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-@use '@/styles/variables' as *;
-@use '@/styles/mixins' as *;
-
-.sidebarGroup {
-  margin-bottom: 0.5rem;
-}
-
-.sidebarGroupHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 1rem;
-  
-  &.collapsible {
-    cursor: pointer;
-    
-    &:hover {
-      background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-    }
-  }
-}
-
-.sidebarGroupLabel {
-  font-size: 0.7rem;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-}
-
-.sidebarGroupLabelStandalone {
-  display: block;
-  padding: 0.5rem 1rem;
-  font-size: 0.7rem;
-  letter-spacing: 1px;
-  text-transform: uppercase;
-  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-}
-
-.sidebarGroupList {
-  padding: 0;
-}
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarGroup.tsx b/frontends/nextjs/src/components/organisms/navigation/SidebarGroup.tsx
deleted file mode 100644
index e5ac06c6a..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/SidebarGroup.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode, useState } from 'react'
-
-import { Box, Collapse, List, Typography } from '@/fakemui'
-import { ExpandLess, ExpandMore } from '@/fakemui/icons'
-
-import styles from './SidebarGroup.module.scss'
-
-// SidebarGroup
-interface SidebarGroupProps {
-  children: ReactNode
-  label?: string
-  collapsible?: boolean
-  defaultOpen?: boolean
-  className?: string
-}
-
-const SidebarGroup = forwardRef<HTMLDivElement, SidebarGroupProps>(
-  ({ children, label, collapsible, defaultOpen = true, className = '', ...props }, ref) => {
-    const [open, setOpen] = useState(defaultOpen)
-
-    return (
-      <Box ref={ref} className={`${styles.sidebarGroup} ${className}`} {...props}>
-        {label && (
-          <Box
-            onClick={collapsible ? () => setOpen(!open) : undefined}
-            className={`${styles.sidebarGroupHeader} ${collapsible ? styles.collapsible : ''}`}
-          >
-            <Typography
-              variant="overline"
-              className={styles.sidebarGroupLabel}
-            >
-              {label}
-            </Typography>
-            {collapsible &&
-              (open ? <ExpandLess size={16} /> : <ExpandMore size={16} />)}
-          </Box>
-        )}
-        {collapsible ? (
-          <Collapse in={open}>
-            <List dense className={styles.sidebarGroupList}>
-              {children}
-            </List>
-          </Collapse>
-        ) : (
-          <List dense className={styles.sidebarGroupList}>
-            {children}
-          </List>
-        )}
-      </Box>
-    )
-  }
-)
-SidebarGroup.displayName = 'SidebarGroup'
-
-// SidebarGroupLabel
-const SidebarGroupLabel = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Typography
-        ref={ref}
-        variant="overline"
-        className={`${styles.sidebarGroupLabelStandalone} ${className}`}
-        {...props}
-      >
-        {children}
-      </Typography>
-    )
-  }
-)
-SidebarGroupLabel.displayName = 'SidebarGroupLabel'
-
-// SidebarGroupContent
-const SidebarGroupContent = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Box ref={ref} className={className} {...props}>
-        <List dense className={styles.sidebarGroupList}>
-          {children}
-        </List>
-      </Box>
-    )
-  }
-)
-SidebarGroupContent.displayName = 'SidebarGroupContent'
-
-export { SidebarGroup, SidebarGroupContent, SidebarGroupLabel }
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarLayout.module.scss b/frontends/nextjs/src/components/organisms/navigation/SidebarLayout.module.scss
deleted file mode 100644
index e163d3785..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/SidebarLayout.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@use '@/styles/variables' as *;
-@use '@/styles/mixins' as *;
-
-.sidebarHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 1rem;
-  border-bottom: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
-}
-
-.sidebarContent {
-  flex: 1;
-  overflow: auto;
-  padding: 0.5rem 0;
-}
-
-.sidebarFooter {
-  padding: 1rem;
-  border-top: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
-}
-
-.sidebarInset {
-  flex: 1;
-  overflow: auto;
-}
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarLayout.tsx b/frontends/nextjs/src/components/organisms/navigation/SidebarLayout.tsx
deleted file mode 100644
index 37b0ac665..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/SidebarLayout.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box } from '@/fakemui'
-
-import styles from './SidebarLayout.module.scss'
-
-// SidebarHeader
-const SidebarHeader = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        className={`${styles.sidebarHeader} ${className}`}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-SidebarHeader.displayName = 'SidebarHeader'
-
-// SidebarContent
-const SidebarContent = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        className={`${styles.sidebarContent} ${className}`}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-SidebarContent.displayName = 'SidebarContent'
-
-// SidebarFooter
-const SidebarFooter = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        className={`${styles.sidebarFooter} ${className}`}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-SidebarFooter.displayName = 'SidebarFooter'
-
-// SidebarInset
-const SidebarInset = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`${styles.sidebarInset} ${className}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-SidebarInset.displayName = 'SidebarInset'
-
-export { SidebarContent, SidebarFooter, SidebarHeader, SidebarInset }
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarMenu.module.scss b/frontends/nextjs/src/components/organisms/navigation/SidebarMenu.module.scss
deleted file mode 100644
index c785d7394..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/SidebarMenu.module.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-@use '@/styles/variables' as *;
-@use '@/styles/mixins' as *;
-
-.sidebarMenuList {
-  padding: 0;
-}
-
-.sidebarMenuListItem {
-  padding: 0;
-}
-
-.sidebarMenuItemWrapper {
-  width: 100%;
-}
-
-.sidebarMenuButton {
-  display: flex;
-  align-items: center;
-  width: calc(100% - 0.5rem);
-  margin: 0 0.5rem;
-  padding: 0.5rem 0.75rem;
-  border-radius: 4px;
-  text-decoration: none;
-  color: inherit;
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: 0.875rem;
-  text-align: left;
-  transition: background-color 0.2s;
-  
-  &:hover {
-    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-  }
-  
-  &.active,
-  &:global(.list-item-button--selected) {
-    background-color: var(--primary-main, #1976d2);
-    color: var(--primary-contrast-text, #fff);
-    
-    .sidebarMenuIcon {
-      color: var(--primary-contrast-text, #fff);
-    }
-    
-    &:hover {
-      background-color: var(--primary-dark, #1565c0);
-    }
-  }
-  
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-    pointer-events: none;
-  }
-}
-
-.sidebarMenuIcon {
-  min-width: 36px;
-  display: flex;
-  align-items: center;
-  color: inherit;
-}
-
-.sidebarMenuText {
-  font-size: 0.875rem;
-}
diff --git a/frontends/nextjs/src/components/organisms/navigation/SidebarMenu.tsx b/frontends/nextjs/src/components/organisms/navigation/SidebarMenu.tsx
deleted file mode 100644
index bd10a5454..000000000
--- a/frontends/nextjs/src/components/organisms/navigation/SidebarMenu.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@/fakemui'
-
-import styles from './SidebarMenu.module.scss'
-
-// SidebarMenu (alias for List)
-const SidebarMenu = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Box ref={ref} className={className} {...props}>
-        <List dense className={styles.sidebarMenuList}>
-          {children}
-        </List>
-      </Box>
-    )
-  }
-)
-SidebarMenu.displayName = 'SidebarMenu'
-
-// SidebarMenuItem
-interface SidebarMenuItemProps {
-  children?: ReactNode
-  icon?: ReactNode
-  label?: string
-  href?: string
-  active?: boolean
-  disabled?: boolean
-  onClick?: () => void
-  className?: string
-}
-
-const SidebarMenuItem = forwardRef<HTMLDivElement, SidebarMenuItemProps>(
-  ({ children, icon, label, href, active, disabled, onClick, className = '', ...props }, ref) => {
-    const content = children || label
-    const activeClass = active ? styles.active : ''
-
-    const buttonContent = (
-      <>
-        {icon && <ListItemIcon className={styles.sidebarMenuIcon}>{icon}</ListItemIcon>}
-        <ListItemText primary={content} className={styles.sidebarMenuText} />
-      </>
-    )
-
-    return (
-      <ListItem className={styles.sidebarMenuListItem}>
-        <Box ref={ref} className={`${styles.sidebarMenuItemWrapper} ${className}`} {...props}>
-          {href ? (
-            <a
-              href={href}
-              onClick={onClick}
-              className={`${styles.sidebarMenuButton} ${activeClass} ${disabled ? styles.disabled : ''}`}
-              aria-disabled={disabled}
-            >
-              {buttonContent}
-            </a>
-          ) : (
-            <ListItemButton
-              selected={active}
-              disabled={disabled}
-              onClick={onClick}
-              className={`${styles.sidebarMenuButton} ${activeClass}`}
-            >
-              {buttonContent}
-            </ListItemButton>
-          )}
-        </Box>
-      </ListItem>
-    )
-  }
-)
-SidebarMenuItem.displayName = 'SidebarMenuItem'
-
-// SidebarMenuButton (alias for ListItemButton)
-const SidebarMenuButton = forwardRef<HTMLDivElement, SidebarMenuItemProps>((props, ref) => (
-  <SidebarMenuItem ref={ref} {...props} />
-))
-SidebarMenuButton.displayName = 'SidebarMenuButton'
-
-export { SidebarMenu, SidebarMenuButton, SidebarMenuItem }
diff --git a/frontends/nextjs/src/components/organisms/overlay/Command.tsx b/frontends/nextjs/src/components/organisms/overlay/Command.tsx
deleted file mode 100644
index a52f50cad..000000000
--- a/frontends/nextjs/src/components/organisms/overlay/Command.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-// Command barrel export - maintains backward compatibility after splitting into smaller organisms
-// Components split into separate files to keep each under 150 LOC
-export { CommandCore as Command, type CommandProps } from './CommandCore'
-export { CommandDialog, CommandInput } from './CommandDialog'
-export { CommandItem, CommandLoading, CommandSeparator, CommandShortcut } from './CommandItem'
-export { CommandEmpty, CommandGroup, CommandList } from './CommandList'
diff --git a/frontends/nextjs/src/components/organisms/overlay/CommandCore.tsx b/frontends/nextjs/src/components/organisms/overlay/CommandCore.tsx
deleted file mode 100644
index 11257557c..000000000
--- a/frontends/nextjs/src/components/organisms/overlay/CommandCore.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Paper } from '@/fakemui'
-
-// Command container (like cmdk)
-export interface CommandProps {
-  children: ReactNode
-  className?: string
-  onValueChange?: (value: string) => void
-  value?: string
-  filter?: (value: string, search: string) => number
-  shouldFilter?: boolean
-}
-
-const CommandCore = forwardRef<HTMLDivElement, CommandProps>(
-  ({ children, onValueChange, value, shouldFilter = true, className, ...props }, ref) => {
-    return (
-      <Paper
-        ref={ref}
-        variant="outlined"
-        className={`command-container ${className || ''}`}
-        {...props}
-      >
-        {children}
-      </Paper>
-    )
-  }
-)
-CommandCore.displayName = 'CommandCore'
-
-export { CommandCore }
diff --git a/frontends/nextjs/src/components/organisms/overlay/CommandDialog.tsx b/frontends/nextjs/src/components/organisms/overlay/CommandDialog.tsx
deleted file mode 100644
index 82ac98e5f..000000000
--- a/frontends/nextjs/src/components/organisms/overlay/CommandDialog.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, Input } from '@/fakemui'
-import { Search } from '@/fakemui/icons'
-
-// CommandDialog
-interface CommandDialogProps {
-  children: ReactNode
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}
-
-const CommandDialog = ({ children, open, onOpenChange }: CommandDialogProps) => {
-  if (!open) return null
-  return (
-    <Box className="command-dialog-overlay" onClick={() => onOpenChange?.(false)}>
-      <Box onClick={e => e.stopPropagation()} className="command-dialog-content">
-        {children}
-      </Box>
-    </Box>
-  )
-}
-CommandDialog.displayName = 'CommandDialog'
-
-// CommandInput
-interface CommandInputProps {
-  placeholder?: string
-  value?: string
-  onValueChange?: (value: string) => void
-  className?: string
-}
-
-const CommandInput = forwardRef<HTMLInputElement, CommandInputProps>(
-  ({ placeholder = 'Search...', value, onValueChange, className, ...props }, ref) => {
-    return (
-      <Box className={`command-input-wrapper ${className || ''}`}>
-        <Input
-          ref={ref}
-          fullWidth
-          size="sm"
-          placeholder={placeholder}
-          value={value}
-          onChange={e => onValueChange?.(e.target.value)}
-          startAdornment={<Search size={16} className="command-input-icon" />}
-          className="command-input"
-          {...props}
-        />
-      </Box>
-    )
-  }
-)
-CommandInput.displayName = 'CommandInput'
-
-export { CommandDialog, CommandInput }
diff --git a/frontends/nextjs/src/components/organisms/overlay/CommandItem.tsx b/frontends/nextjs/src/components/organisms/overlay/CommandItem.tsx
deleted file mode 100644
index d17e506b5..000000000
--- a/frontends/nextjs/src/components/organisms/overlay/CommandItem.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import {
-  Box,
-  CircularProgress,
-  Divider,
-  ListItem,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-  Typography,
-} from '@/fakemui'
-
-// CommandItem
-interface CommandItemProps {
-  children: ReactNode
-  value?: string
-  onSelect?: (value: string) => void
-  disabled?: boolean
-  icon?: ReactNode
-  shortcut?: string
-  className?: string
-}
-
-const CommandItem = forwardRef<HTMLLIElement, CommandItemProps>(
-  ({ children, value, onSelect, disabled, icon, shortcut, className, ...props }, ref) => {
-    return (
-      <ListItem ref={ref} disablePadding className={className} {...props}>
-        <ListItemButton
-          disabled={disabled}
-          onClick={() => onSelect?.(value || '')}
-          className="command-item-button"
-        >
-          {icon && <ListItemIcon className="command-item-icon">{icon}</ListItemIcon>}
-          <ListItemText primary={children} />
-          {shortcut && (
-            <Typography variant="caption" className="command-item-shortcut">
-              {shortcut}
-            </Typography>
-          )}
-        </ListItemButton>
-      </ListItem>
-    )
-  }
-)
-CommandItem.displayName = 'CommandItem'
-
-// CommandSeparator
-const CommandSeparator = forwardRef<HTMLHRElement, { className?: string }>((props, ref) => {
-  return <Divider ref={ref} className="command-separator" {...props} />
-})
-CommandSeparator.displayName = 'CommandSeparator'
-
-// CommandShortcut
-const CommandShortcut = ({ children }: { children: ReactNode }) => {
-  return (
-    <Typography variant="caption" className="command-shortcut">
-      {children}
-    </Typography>
-  )
-}
-CommandShortcut.displayName = 'CommandShortcut'
-
-// CommandLoading
-const CommandLoading = ({ children }: { children?: ReactNode }) => {
-  return (
-    <Box className="command-loading">
-      <CircularProgress size={16} />
-      <Typography variant="body2">
-        {children || 'Loading...'}
-      </Typography>
-    </Box>
-  )
-}
-CommandLoading.displayName = 'CommandLoading'
-
-export { CommandItem, CommandLoading, CommandSeparator, CommandShortcut }
diff --git a/frontends/nextjs/src/components/organisms/overlay/CommandList.tsx b/frontends/nextjs/src/components/organisms/overlay/CommandList.tsx
deleted file mode 100644
index 24ce7988c..000000000
--- a/frontends/nextjs/src/components/organisms/overlay/CommandList.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, List, Typography } from '@/fakemui'
-
-// CommandList
-interface CommandListProps {
-  children: ReactNode
-  className?: string
-}
-
-const CommandList = forwardRef<HTMLDivElement, CommandListProps>(({ children, className, ...props }, ref) => {
-  return (
-    <Box ref={ref} className={`command-list ${className || ''}`} {...props}>
-      <List dense disablePadding>
-        {children}
-      </List>
-    </Box>
-  )
-})
-CommandList.displayName = 'CommandList'
-
-// CommandEmpty
-interface CommandEmptyProps {
-  children?: ReactNode
-  className?: string
-}
-
-const CommandEmpty = forwardRef<HTMLDivElement, CommandEmptyProps>(
-  ({ children = 'No results found.', className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`command-empty ${className || ''}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-CommandEmpty.displayName = 'CommandEmpty'
-
-// CommandGroup
-interface CommandGroupProps {
-  children: ReactNode
-  heading?: string
-  className?: string
-}
-
-const CommandGroup = forwardRef<HTMLDivElement, CommandGroupProps>(
-  ({ children, heading, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`command-group ${className || ''}`} {...props}>
-        {heading && (
-          <Typography variant="overline" className="command-group-heading">
-            {heading}
-          </Typography>
-        )}
-        {children}
-      </Box>
-    )
-  }
-)
-CommandGroup.displayName = 'CommandGroup'
-
-export { CommandEmpty, CommandGroup, CommandList }
diff --git a/frontends/nextjs/src/components/organisms/overlay/Sheet.tsx b/frontends/nextjs/src/components/organisms/overlay/Sheet.tsx
deleted file mode 100644
index 10335a724..000000000
--- a/frontends/nextjs/src/components/organisms/overlay/Sheet.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-// Sheet barrel export - maintains backward compatibility after splitting into smaller organisms
-// Components split into separate files to keep each under 150 LOC
-export { SheetCore as Sheet, SheetContent, type SheetProps, SheetTrigger } from './SheetCore'
-export {
-  SheetClose,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-} from './SheetLayout'
diff --git a/frontends/nextjs/src/components/organisms/overlay/SheetCore.tsx b/frontends/nextjs/src/components/organisms/overlay/SheetCore.tsx
deleted file mode 100644
index 9f3e8130c..000000000
--- a/frontends/nextjs/src/components/organisms/overlay/SheetCore.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-'use client'
-
-import { ComponentProps,forwardRef, ReactNode } from 'react'
-
-import { Box, Drawer, IconButton } from '@/fakemui'
-import { Close } from '@/fakemui/icons'
-
-// Sheet (side panel drawer)
-export interface SheetProps extends Omit<ComponentProps<typeof Drawer>, 'onClose'> {
-  side?: 'left' | 'right' | 'top' | 'bottom'
-  onOpenChange?: (open: boolean) => void
-}
-
-const SheetCore = forwardRef<HTMLDivElement, SheetProps>(
-  ({ open, side = 'right', onOpenChange, children, className, ...props }, ref) => {
-    const sideClass = `sheet--${side}`
-    return (
-      <Drawer
-        ref={ref}
-        anchor={side}
-        open={open}
-        onClose={() => onOpenChange?.(false)}
-        className={`sheet ${sideClass} ${className || ''}`}
-        {...props}
-      >
-        {children}
-      </Drawer>
-    )
-  }
-)
-SheetCore.displayName = 'SheetCore'
-
-// SheetTrigger
-interface SheetTriggerProps {
-  children: ReactNode
-  asChild?: boolean
-  onClick?: () => void
-  className?: string
-}
-
-const SheetTrigger = forwardRef<HTMLDivElement, SheetTriggerProps>(
-  ({ children, onClick, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} onClick={onClick} className={`sheet-trigger ${className || ''}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-SheetTrigger.displayName = 'SheetTrigger'
-
-// SheetContent
-interface SheetContentProps {
-  children: ReactNode
-  className?: string
-  side?: 'left' | 'right' | 'top' | 'bottom'
-  onClose?: () => void
-}
-
-const SheetContent = forwardRef<HTMLDivElement, SheetContentProps>(
-  ({ children, side = 'right', onClose, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`sheet-content ${className || ''}`} {...props}>
-        {onClose && (
-          <IconButton aria-label="close" onClick={onClose} className="sheet-close-button">
-            <Close />
-          </IconButton>
-        )}
-        {children}
-      </Box>
-    )
-  }
-)
-SheetContent.displayName = 'SheetContent'
-
-export { SheetContent, SheetCore, SheetTrigger }
diff --git a/frontends/nextjs/src/components/organisms/overlay/SheetLayout.tsx b/frontends/nextjs/src/components/organisms/overlay/SheetLayout.tsx
deleted file mode 100644
index 9f3b661f5..000000000
--- a/frontends/nextjs/src/components/organisms/overlay/SheetLayout.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, IconButton, Typography } from '@/fakemui'
-import { Close } from '@/fakemui/icons'
-
-// SheetHeader
-const SheetHeader = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`sheet-header ${className || ''}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-SheetHeader.displayName = 'SheetHeader'
-
-// SheetFooter
-const SheetFooter = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`sheet-footer ${className || ''}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-SheetFooter.displayName = 'SheetFooter'
-
-// SheetTitle
-const SheetTitle = forwardRef<HTMLHeadingElement, { children: ReactNode; className?: string }>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Typography ref={ref} variant="h6" className={`sheet-title ${className || ''}`} {...props}>
-        {children}
-      </Typography>
-    )
-  }
-)
-SheetTitle.displayName = 'SheetTitle'
-
-// SheetDescription
-const SheetDescription = forwardRef<
-  HTMLParagraphElement,
-  { children: ReactNode; className?: string }
->(({ children, className, ...props }, ref) => {
-  return (
-    <Typography ref={ref} variant="body2" className={`sheet-description ${className || ''}`} {...props}>
-      {children}
-    </Typography>
-  )
-})
-SheetDescription.displayName = 'SheetDescription'
-
-// Compatibility exports
-const SheetPortal = ({ children }: { children: ReactNode }) => <>{children}</>
-const SheetOverlay = forwardRef<HTMLDivElement>((props, ref) => <div ref={ref} {...props} />)
-SheetOverlay.displayName = 'SheetOverlay'
-const SheetClose = forwardRef<HTMLButtonElement, { children?: ReactNode; asChild?: boolean }>(
-  ({ children }, ref) => {
-    if (children) return <>{children}</>
-    return (
-      <IconButton ref={ref} aria-label="close">
-        <Close />
-      </IconButton>
-    )
-  }
-)
-SheetClose.displayName = 'SheetClose'
-
-export {
-  SheetClose,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetOverlay,
-  SheetPortal,
-  SheetTitle,
-}
diff --git a/frontends/nextjs/src/components/organisms/security/ActionButtons.tsx b/frontends/nextjs/src/components/organisms/security/ActionButtons.tsx
deleted file mode 100644
index 451f13e73..000000000
--- a/frontends/nextjs/src/components/organisms/security/ActionButtons.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-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
deleted file mode 100644
index f1c1f00bd..000000000
--- a/frontends/nextjs/src/components/organisms/security/SecurityMessage.tsx
+++ /dev/null
@@ -1,174 +0,0 @@
-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 { CheckCircle, Info, ShieldWarning, Warning } from '@/fakemui/icons'
-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
deleted file mode 100644
index 3326d30a6..000000000
--- a/frontends/nextjs/src/components/organisms/security/SecurityWarningDialog.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * 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 { 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
-  onOpenChange: (open: boolean) => void
-  scanResult: SecurityScanResult
-  onProceed?: () => void
-  onCancel?: () => void
-  codeType?: string
-  showProceedButton?: boolean
-}
-
-export function SecurityWarningDialog({
-  open,
-  onOpenChange,
-  scanResult,
-  onProceed,
-  onCancel,
-  codeType = 'code',
-  showProceedButton = false,
-}: SecurityWarningDialogProps) {
-  const closeDialog = () => {
-    onOpenChange(false)
-  }
-
-  const handleProceed = () => {
-    if (onProceed) {
-      onProceed()
-    }
-    closeDialog()
-  }
-
-  const handleCancel = () => {
-    if (onCancel) {
-      onCancel()
-    }
-    closeDialog()
-  }
-
-  return (
-    <Dialog open={open} onOpenChange={onOpenChange}>
-      <DialogContent className="max-w-3xl max-h-[80vh]">
-        <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/Builder.tsx b/frontends/nextjs/src/components/rendering/Builder.tsx
deleted file mode 100644
index 724ea1d15..000000000
--- a/frontends/nextjs/src/components/rendering/Builder.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import { useState } from 'react'
-import { toast } from 'sonner'
-
-import { Button } from '@/components/ui'
-import { Eye, FloppyDisk, SignOut } from '@/fakemui/icons'
-import { useKV } from '@/hooks/data/useKV'
-import type {
-  BuilderState,
-  ComponentDefinition,
-  ComponentInstance,
-  ComponentProps,
-} from '@/lib/builder-types'
-
-import { Canvas } from './Canvas'
-import { CodeEditor } from './CodeEditor'
-import { ComponentCatalog } from './ComponentCatalog'
-import { PropertyInspector } from './PropertyInspector'
-
-interface BuilderProps {
-  onLogout: () => void
-}
-
-export function Builder({ onLogout }: BuilderProps) {
-  const [builderState, setBuilderState] = useKV<BuilderState>('gui_builder_state', {
-    components: [],
-    selectedId: null,
-  })
-
-  const [draggingComponent, setDraggingComponent] = useState<ComponentDefinition | null>(null)
-  const [codeEditorOpen, setCodeEditorOpen] = useState(false)
-
-  if (!builderState) return null
-
-  const selectedComponent =
-    builderState.components.find(c => c.id === builderState.selectedId) || null
-
-  const handleDragStart = (component: ComponentDefinition) => {
-    setDraggingComponent(component)
-  }
-
-  const handleDrop = (component: ComponentDefinition) => {
-    const newComponent: ComponentInstance = {
-      id: `comp_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
-      type: component.type,
-      props: { ...component.defaultProps },
-      children: [],
-    }
-
-    setBuilderState(current => {
-      if (!current) return { components: [newComponent], selectedId: newComponent.id }
-      return {
-        ...current,
-        components: [...current.components, newComponent],
-        selectedId: newComponent.id,
-      }
-    })
-
-    toast.success(`${component.label} added to canvas`)
-  }
-
-  const handleSelect = (id: string) => {
-    setBuilderState(current => {
-      if (!current) return { components: [], selectedId: id }
-      return {
-        ...current,
-        selectedId: id,
-      }
-    })
-  }
-
-  const handleUpdateProps = (id: string, props: ComponentProps) => {
-    setBuilderState(current => {
-      if (!current) return { components: [], selectedId: null }
-      return {
-        ...current,
-        components: current.components.map(comp => (comp.id === id ? { ...comp, props } : comp)),
-      }
-    })
-  }
-
-  const handleDelete = (id: string) => {
-    setBuilderState(current => {
-      if (!current) return { components: [], selectedId: null }
-      return {
-        ...current,
-        components: current.components.filter(comp => comp.id !== id),
-        selectedId: current.selectedId === id ? null : current.selectedId,
-      }
-    })
-    toast.success('Component deleted')
-  }
-
-  const handleCodeSave = (code: string) => {
-    if (!selectedComponent) return
-
-    setBuilderState(current => {
-      if (!current) return { components: [], selectedId: null }
-      return {
-        ...current,
-        components: current.components.map(comp =>
-          comp.id === selectedComponent.id ? { ...comp, customCode: code } : comp
-        ),
-      }
-    })
-    toast.success('Code saved')
-  }
-
-  const handleSaveProject = () => {
-    toast.success('Project saved successfully')
-  }
-
-  const handlePreview = () => {
-    toast.info('Preview mode coming soon')
-  }
-
-  return (
-    <div className="flex h-screen overflow-hidden bg-background">
-      <ComponentCatalog onDragStart={handleDragStart} />
-
-      <div className="flex-1 flex flex-col">
-        <header className="border-b border-border bg-card px-6 py-3 flex items-center justify-between">
-          <div>
-            <h1 className="text-xl font-bold">GUI Builder</h1>
-            <p className="text-xs text-muted-foreground">Visual Component Editor</p>
-          </div>
-          <div className="flex items-center gap-2">
-            <Button variant="outline" size="sm" onClick={handlePreview}>
-              <Eye className="mr-2" size={16} />
-              Preview
-            </Button>
-            <Button variant="outline" size="sm" onClick={handleSaveProject}>
-              <FloppyDisk className="mr-2" size={16} />
-              Save
-            </Button>
-            <Button variant="outline" size="sm" onClick={onLogout}>
-              <SignOut className="mr-2" size={16} />
-              Logout
-            </Button>
-          </div>
-        </header>
-
-        <div className="flex-1 flex overflow-hidden">
-          <Canvas
-            components={builderState.components}
-            selectedId={builderState.selectedId}
-            onSelect={handleSelect}
-            onDrop={handleDrop}
-            isDragging={draggingComponent !== null}
-          />
-
-          <PropertyInspector
-            component={selectedComponent}
-            onUpdate={handleUpdateProps}
-            onDelete={handleDelete}
-            onCodeEdit={() => setCodeEditorOpen(true)}
-          />
-        </div>
-      </div>
-
-      <CodeEditor
-        open={codeEditorOpen}
-        onClose={() => setCodeEditorOpen(false)}
-        code={selectedComponent?.customCode || ''}
-        onSave={handleCodeSave}
-        componentName={selectedComponent?.type || 'Component'}
-      />
-    </div>
-  )
-}
diff --git a/frontends/nextjs/src/components/rendering/Canvas.tsx b/frontends/nextjs/src/components/rendering/Canvas.tsx
deleted file mode 100644
index 031ac62f0..000000000
--- a/frontends/nextjs/src/components/rendering/Canvas.tsx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { useState } from 'react'
-
-import type { ComponentDefinition, ComponentInstance } from '@/lib/builder-types'
-
-import { RenderComponent } from './RenderComponent'
-
-interface CanvasProps {
-  components: ComponentInstance[]
-  selectedId: string | null
-  onSelect: (id: string) => void
-  onDrop: (component: ComponentDefinition) => void
-  isDragging: boolean
-}
-
-export function Canvas({ components, selectedId, onSelect, onDrop, isDragging }: CanvasProps) {
-  const [isOver, setIsOver] = useState(false)
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault()
-    setIsOver(true)
-  }
-
-  const handleDragLeave = () => {
-    setIsOver(false)
-  }
-
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault()
-    setIsOver(false)
-    onDrop(JSON.parse(e.dataTransfer.getData('component')))
-  }
-
-  return (
-    <div
-      className={`flex-1 bg-canvas p-8 overflow-auto transition-colors ${
-        isOver ? 'bg-drop-zone' : ''
-      }`}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-    >
-      <div
-        className={`min-h-[600px] bg-card rounded-lg p-6 border-2 transition-all ${
-          isOver ? 'border-drop-zone-border border-dashed' : 'border-border'
-        }`}
-      >
-        {components.length === 0 ? (
-          <div className="h-full flex items-center justify-center text-center">
-            <div className="space-y-2">
-              <p className="text-lg font-medium text-muted-foreground">
-                Drop components here to start building
-              </p>
-              <p className="text-sm text-muted-foreground">
-                Drag components from the left sidebar onto this canvas
-              </p>
-            </div>
-          </div>
-        ) : (
-          <div className="space-y-4">
-            {components.map(component => (
-              <RenderComponent
-                key={component.id}
-                component={component}
-                isSelected={selectedId === component.id}
-                onSelect={onSelect}
-              />
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
diff --git a/frontends/nextjs/src/components/rendering/FieldRenderer.tsx b/frontends/nextjs/src/components/rendering/FieldRenderer.tsx
deleted file mode 100644
index 6ebe11013..000000000
--- a/frontends/nextjs/src/components/rendering/FieldRenderer.tsx
+++ /dev/null
@@ -1,216 +0,0 @@
-import { Input } from '@/components/ui'
-import { Textarea } from '@/components/ui'
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui'
-import { Switch } from '@/components/ui'
-import { Label } from '@/components/ui'
-import { useKV } from '@/hooks/data/useKV'
-import type { FieldSchema, SchemaConfig } from '@/lib/schema-types'
-import { findModel, getFieldLabel, getHelpText, getModelLabel } from '@/lib/schema-utils'
-import { getRecordsKey } from '@/lib/schema-utils'
-import type { JsonValue } from '@/types/utility-types'
-
-interface FieldRendererProps {
-  field: FieldSchema
-  value: JsonValue
-  onChange: (value: JsonValue) => void
-  error?: string
-  schema: SchemaConfig
-  currentApp: string
-}
-
-type RelatedRecord = Record<string, JsonValue> & { id: string }
-
-export function FieldRenderer({
-  field,
-  value,
-  onChange,
-  error,
-  schema,
-  currentApp,
-}: FieldRendererProps) {
-  const label = getFieldLabel(field)
-  const helpText = getHelpText(field)
-
-  const relatedRecordsKey = field.relatedModel
-    ? getRecordsKey(currentApp, field.relatedModel)
-    : 'dummy'
-  const [relatedModelRecords] = useKV<RelatedRecord[]>(relatedRecordsKey, [])
-
-  const relatedModel =
-    field.type === 'relation' && field.relatedModel
-      ? findModel(schema, currentApp, field.relatedModel)
-      : null
-
-  const renderInput = () => {
-    if (field.editable === false) {
-      return (
-        <Input
-          id={field.name}
-          value={value || ''}
-          disabled
-          className="bg-muted font-mono text-sm"
-        />
-      )
-    }
-
-    switch (field.type) {
-      case 'string':
-      case 'email':
-      case 'url':
-        return (
-          <Input
-            id={field.name}
-            type={field.type === 'email' ? 'email' : field.type === 'url' ? 'url' : 'text'}
-            value={value || ''}
-            onChange={e => onChange(e.target.value)}
-            placeholder={label}
-            className={error ? 'border-destructive' : ''}
-          />
-        )
-
-      case 'text':
-        return (
-          <Textarea
-            id={field.name}
-            value={value || ''}
-            onChange={e => onChange(e.target.value)}
-            placeholder={label}
-            rows={6}
-            className={error ? 'border-destructive' : ''}
-          />
-        )
-
-      case 'number':
-        return (
-          <Input
-            id={field.name}
-            type="number"
-            value={value ?? ''}
-            onChange={e => onChange(e.target.value ? Number(e.target.value) : null)}
-            placeholder={label}
-            min={field.validation?.min}
-            max={field.validation?.max}
-            className={error ? 'border-destructive' : ''}
-          />
-        )
-
-      case 'boolean':
-        return (
-          <div className="flex items-center gap-2">
-            <Switch id={field.name} checked={!!value} onCheckedChange={onChange} />
-            <Label htmlFor={field.name} className="text-sm font-normal">
-              {value ? 'Yes' : 'No'}
-            </Label>
-          </div>
-        )
-
-      case 'date':
-        return (
-          <Input
-            id={field.name}
-            type="date"
-            value={value ? new Date(value).toISOString().split('T')[0] : ''}
-            onChange={e => onChange(e.target.value ? new Date(e.target.value).toISOString() : null)}
-            className={error ? 'border-destructive' : ''}
-          />
-        )
-
-      case 'datetime':
-        return (
-          <Input
-            id={field.name}
-            type="datetime-local"
-            value={value ? new Date(value).toISOString().slice(0, 16) : ''}
-            onChange={e => onChange(e.target.value ? new Date(e.target.value).toISOString() : null)}
-            className={error ? 'border-destructive' : ''}
-          />
-        )
-
-      case 'select':
-        return (
-          <Select value={value || undefined} onValueChange={onChange}>
-            <SelectTrigger id={field.name} className={error ? 'border-destructive' : ''}>
-              <SelectValue placeholder={`Select ${label}`} />
-            </SelectTrigger>
-            <SelectContent>
-              {field.choices?.map(choice => (
-                <SelectItem key={choice.value} value={choice.value}>
-                  {choice.label}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        )
-
-      case 'relation': {
-        if (!relatedModel || !relatedModelRecords || relatedModelRecords.length === 0) {
-          return (
-            <div className="text-sm text-muted-foreground p-2 border border-dashed rounded">
-              No {field.relatedModel} records available
-            </div>
-          )
-        }
-
-        const displayField =
-          relatedModel.fields.find(f => f.name === 'name' || f.name === 'title')?.name || 'id'
-
-        return (
-          <Select value={value || undefined} onValueChange={onChange}>
-            <SelectTrigger id={field.name} className={error ? 'border-destructive' : ''}>
-              <SelectValue placeholder={`Select ${label}`} />
-            </SelectTrigger>
-            <SelectContent>
-              {relatedModelRecords.map(record => (
-                <SelectItem key={record.id} value={record.id}>
-                  {record[displayField] || record.id}
-                </SelectItem>
-              ))}
-            </SelectContent>
-          </Select>
-        )
-      }
-
-      case 'json':
-        return (
-          <Textarea
-            id={field.name}
-            value={value ? JSON.stringify(value, null, 2) : ''}
-            onChange={e => {
-              try {
-                const parsed = e.target.value ? JSON.parse(e.target.value) : null
-                onChange(parsed)
-              } catch {
-                onChange(e.target.value)
-              }
-            }}
-            placeholder='{"key": "value"}'
-            rows={6}
-            className={`font-mono text-sm ${error ? 'border-destructive' : ''}`}
-          />
-        )
-
-      default:
-        return (
-          <Input
-            id={field.name}
-            value={value || ''}
-            onChange={e => onChange(e.target.value)}
-            placeholder={label}
-            className={error ? 'border-destructive' : ''}
-          />
-        )
-    }
-  }
-
-  return (
-    <div className="space-y-2">
-      <Label htmlFor={field.name} className="text-sm font-medium uppercase tracking-wide">
-        {label}
-        {field.required && <span className="text-destructive ml-1">*</span>}
-      </Label>
-      {renderInput()}
-      {helpText && !error && <p className="text-sm text-muted-foreground">{helpText}</p>}
-      {error && <p className="text-sm text-destructive">{error}</p>}
-    </div>
-  )
-}
diff --git a/frontends/nextjs/src/components/rendering/PropertyInspector.tsx b/frontends/nextjs/src/components/rendering/PropertyInspector.tsx
deleted file mode 100644
index a8940efa5..000000000
--- a/frontends/nextjs/src/components/rendering/PropertyInspector.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import { CssClassBuilder } from '@/components/CssClassBuilder'
-import { Button, Separator } from '@/components/ui'
-import { Trash } from '@/fakemui/icons'
-import { componentCatalog } from '@/lib/component-catalog'
-import { Database, DropdownConfig } from '@/lib/database'
-import type { ComponentInstance, ComponentProps } from '@/lib/types/builder-types'
-import type { JsonValue } from '@/types/utility-types'
-
-import { PropertyPanels } from './components/PropertyPanels'
-
-interface PropertyInspectorProps {
-  component: ComponentInstance | null
-  onUpdate: (id: string, props: ComponentProps) => void
-  onDelete: (id: string) => void
-  onCodeEdit: () => void
-}
-
-export function PropertyInspector({
-  component,
-  onUpdate,
-  onDelete,
-  onCodeEdit,
-}: PropertyInspectorProps) {
-  const [cssBuilderOpen, setCssBuilderOpen] = useState(false)
-  const [cssBuilderPropName, setCssBuilderPropName] = useState('')
-  const [dynamicDropdowns, setDynamicDropdowns] = useState<DropdownConfig[]>([])
-
-  useEffect(() => {
-    loadDynamicDropdowns()
-  }, [])
-
-  const loadDynamicDropdowns = async () => {
-    const dropdowns = await Database.getDropdownConfigs()
-    setDynamicDropdowns(dropdowns)
-  }
-
-  if (!component) {
-    return (
-      <div className="w-80 bg-card border-l border-border p-6 flex items-center justify-center text-center">
-        <p className="text-muted-foreground">Select a component to edit its properties</p>
-      </div>
-    )
-  }
-
-  const componentDef = componentCatalog.find(c => c.type === component.type)
-
-  const handlePropChange = (propName: string, value: JsonValue) => {
-    onUpdate(component.id, {
-      ...component.props,
-      [propName]: value,
-    })
-  }
-
-  const openCssBuilder = (propName: string) => {
-    setCssBuilderPropName(propName)
-    setCssBuilderOpen(true)
-  }
-
-  const handleCssClassSave = (classes: string) => {
-    handlePropChange(cssBuilderPropName, classes)
-    setCssBuilderOpen(false)
-  }
-
-  return (
-    <div className="w-80 bg-card border-l border-border flex flex-col h-screen">
-      <div className="p-4 border-b border-border">
-        <h2 className="text-lg font-bold mb-1">{component.type}</h2>
-        <p className="text-xs text-muted-foreground">Component Properties</p>
-      </div>
-
-      <PropertyPanels
-        component={component}
-        componentDef={componentDef}
-        dynamicDropdowns={dynamicDropdowns}
-        onPropChange={handlePropChange}
-        onCodeEdit={onCodeEdit}
-        onOpenCssBuilder={openCssBuilder}
-      />
-
-      <Separator />
-
-      <div className="p-4">
-        <Button variant="destructive" className="w-full" onClick={() => onDelete(component.id)}>
-          <Trash className="mr-2" />
-          Delete Component
-        </Button>
-      </div>
-
-      <CssClassBuilder
-        open={cssBuilderOpen}
-        onClose={() => setCssBuilderOpen(false)}
-        initialValue={
-          typeof component.props[cssBuilderPropName] === 'string'
-            ? component.props[cssBuilderPropName]
-            : ''
-        }
-        onSave={handleCssClassSave}
-      />
-    </div>
-  )
-}
diff --git a/frontends/nextjs/src/components/rendering/RenderComponent.tsx b/frontends/nextjs/src/components/rendering/RenderComponent.tsx
deleted file mode 100644
index 13fa9f15e..000000000
--- a/frontends/nextjs/src/components/rendering/RenderComponent.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import type React from 'react'
-
-import type { User } from '@/lib/level-types'
-import type { ComponentInstance } from '@/lib/types/builder-types'
-
-import { RenderNode } from './components/RenderNode'
-
-interface RenderComponentProps {
-  component: ComponentInstance
-  isSelected: boolean
-  onSelect: (id: string) => void
-  user?: User
-}
-
-export function RenderComponent({ component, isSelected, onSelect, user }: RenderComponentProps) {
-  const handleClick = (e: React.MouseEvent) => {
-    e.stopPropagation()
-    onSelect(component.id)
-  }
-
-  const renderChildren = () => {
-    if (component.children.length === 0) return null
-    return component.children.map(child => (
-      <RenderComponent
-        key={child.id}
-        component={child}
-        isSelected={isSelected}
-        onSelect={onSelect}
-        user={user}
-      />
-    ))
-  }
-
-  const wrapperClass = `relative ${isSelected ? 'ring-2 ring-accent ring-offset-2' : 'hover:ring-1 hover:ring-accent/50'} transition-all cursor-pointer`
-
-  return (
-    <div className={wrapperClass} onClick={handleClick}>
-      <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
deleted file mode 100644
index 5ddee243d..000000000
--- a/frontends/nextjs/src/components/rendering/components/FieldTypes.tsx
+++ /dev/null
@@ -1,125 +0,0 @@
-import {
-  Button,
-  Input,
-  Label,
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from '@/components/ui'
-import { Palette } from '@/fakemui/icons'
-import type { DropdownConfig } from '@/lib/database'
-import type { PropDefinition } from '@/lib/types/builder-types'
-import type { JsonValue } from '@/types/utility-types'
-
-interface FieldTypesProps {
-  propDef: PropDefinition
-  value: JsonValue
-  onChange: (value: JsonValue) => 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': {
-        const selectValue =
-          typeof value === 'string'
-            ? value
-            : typeof propDef.defaultValue === 'string'
-              ? propDef.defaultValue
-              : ''
-        return (
-          <Select value={selectValue} 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
deleted file mode 100644
index 05f7f3c7d..000000000
--- a/frontends/nextjs/src/components/rendering/components/PropertyPanels.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Button, ScrollArea, Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-import { Code, PaintBrush } from '@/fakemui/icons'
-import type { DropdownConfig } from '@/lib/database'
-import type { ComponentDefinition, ComponentInstance } from '@/lib/types/builder-types'
-import type { JsonValue } from '@/types/utility-types'
-
-import { FieldTypes } from './FieldTypes'
-
-interface PropertyPanelsProps {
-  component: ComponentInstance
-  componentDef?: ComponentDefinition
-  dynamicDropdowns: DropdownConfig[]
-  onPropChange: (propName: string, value: JsonValue) => 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
deleted file mode 100644
index 03cf103ef..000000000
--- a/frontends/nextjs/src/components/rendering/components/RenderNode.tsx
+++ /dev/null
@@ -1,163 +0,0 @@
-import type React from 'react'
-
-import {
-  Alert,
-  Avatar,
-  AvatarFallback,
-  Badge,
-  Button,
-  Card,
-  Checkbox,
-  Input,
-  Label,
-  Progress,
-  Separator,
-  Slider,
-  Switch,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-  Textarea,
-} from '@/components/ui'
-import { getDeclarativeRenderer } from '@/lib/declarative-component-renderer'
-import type { User } from '@/lib/level-types'
-import type { ComponentInstance } from '@/lib/types/builder-types'
-
-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)) {
-    return (
-      <div className="p-4 border-2 border-dashed border-accent">
-        Lua Package Component: {type}
-        <div className="text-xs text-muted-foreground mt-2">
-          This component is rendered from a Lua package
-        </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':
-      // Now handled via Lua package notification_center
-      return (
-        <div className="p-4 border-2 border-dashed border-accent">
-          Lua Package Component: NotificationSummary
-          <div className="text-xs text-muted-foreground mt-2">
-            Migrated to packages/notification_center
-          </div>
-        </div>
-      )
-
-    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/ui/README.md b/frontends/nextjs/src/components/ui/README.md
deleted file mode 100644
index 1cfdbe9d1..000000000
--- a/frontends/nextjs/src/components/ui/README.md
+++ /dev/null
@@ -1,99 +0,0 @@
-# UI Components Directory
-
-## ⚠️ IMPORTANT: This project uses fakemui, NOT Material-UI or Radix UI
-
-This directory uses **fakemui** (our custom UI library), organized with **Atomic Design** principles.
-
-## Directory Structure
-
-```
-ui/
-├── atoms/           # Basic building blocks
-│   ├── Button.tsx
-│   ├── Input.tsx
-│   ├── Checkbox.tsx
-│   └── ...
-├── molecules/       # Simple component groups
-│   ├── Card.tsx
-│   ├── Dialog.tsx
-│   ├── Select.tsx
-│   └── ...
-├── organisms/       # Complex UI sections
-│   ├── Table.tsx
-│   ├── Form.tsx
-│   ├── Sidebar.tsx
-│   └── ...
-└── index.ts         # Main export file
-```
-
-## Usage
-
-```tsx
-// Prefer the main barrel import
-import { Button, Card, Table, Dialog } from '@/components/ui'
-
-// Category imports are available when you want stricter layering
-import { Button, Input } from '@/components/ui/atoms'
-import { Card, Select } from '@/components/ui/molecules'
-import { Table, Form } from '@/components/ui/organisms'
-
-// Use fakemui for layout components
-import { Box, Typography, Grid } from '@/fakemui'
-
-// Use fakemui for icons
-import { Plus, Trash, Settings } from '@/fakemui/icons'
-```
-
-## Atomic Design Pattern
-
-### Atoms
-Basic UI elements that can't be broken down further:
-- Button, Input, Textarea, Label
-- Checkbox, Switch, Toggle
-- Badge, Avatar, Separator
-- Skeleton, Progress, Slider
-
-### Molecules
-Simple groups of atoms working together:
-- Card, Dialog, Select, Tabs
-- Alert, Accordion, Tooltip
-- DropdownMenu, RadioGroup, Popover
-- ToggleGroup, Breadcrumb
-
-### Tabs
-`Tabs` manages selection state. Provide `defaultValue` for uncontrolled usage or `value`/`onValueChange` for controlled usage. `TabsContent` hides inactive panels while keeping them mounted.
-
-### Organisms
-Complex, distinct UI sections:
-- Table, Form, Sheet
-- Sidebar, Navigation, Command
-- Pagination, AlertDialog
-
-## Styling
-
-Use fakemui's `sx` prop or SASS modules:
-
-```tsx
-// fakemui sx prop (recommended)
-<Box sx={{ display: 'flex', gap: 2, p: 3 }}>
-
-// SASS module
-import styles from './MyComponent.module.scss'
-<div className={styles.container}>
-```
-
-## Legacy Files
-
-⚠️ **Root wrapper files (like `button.tsx`, `dialog.tsx`, etc.) are legacy** and exist for
-backward compatibility. Avoid `@/components/ui/<component>` imports and use:
-- `atoms/`
-- `molecules/`
-- `organisms/`
-- Or direct fakemui imports from `@/fakemui`
-
-## Documentation
-
-- [UI Standards](../../../../UI_STANDARDS.md) - Project UI policy
-- [UI Migration Guide](../../../../docs/UI_MIGRATION.md) - Complete migration reference
-- [FakeMUI Theme](../../theme/fakemui-theme.ts) - Theme configuration
-- [FakeMUI README](../../../../fakemui/README.md) - Component library documentation
diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Button.module.scss b/frontends/nextjs/src/components/ui/atoms/controls/Button.module.scss
deleted file mode 100644
index c31b80c40..000000000
--- a/frontends/nextjs/src/components/ui/atoms/controls/Button.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.button {
-  // Base button styling handled by fakemui
-  // Add custom overrides here
-}
-
-.link {
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.icon {
-  min-width: 40px;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Button.tsx b/frontends/nextjs/src/components/ui/atoms/controls/Button.tsx
deleted file mode 100644
index 9b232906f..000000000
--- a/frontends/nextjs/src/components/ui/atoms/controls/Button.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-'use client'
-
-import { type AnchorHTMLAttributes, CSSProperties,forwardRef } from 'react'
-
-import { Button as FakemuiButton, ButtonProps as FakemuiButtonProps, ButtonSize as FakemuiButtonSize,ButtonVariant as FakemuiButtonVariant } from '@/fakemui/fakemui/inputs'
-
-import styles from './Button.module.scss'
-
-/** Button visual style variants */
-export type ButtonVariant = 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link'
-
-/** Button size options */
-export type ButtonSize = 'default' | 'sm' | 'lg' | 'icon'
-
-/**
- * Props for the Button component
- * @extends {FakemuiButtonProps} Inherits fakemui Button props
- */
-export interface ButtonProps extends Omit<FakemuiButtonProps, 'variant' | 'size'> {
-  /** Visual style variant of the button */
-  variant?: ButtonVariant
-  /** Size of the button */
-  size?: ButtonSize
-  /** Compatibility prop - ignored */
-  asChild?: boolean
-  /** Target attribute for link buttons */
-  target?: AnchorHTMLAttributes<HTMLAnchorElement>['target']
-  /** Rel attribute for link buttons */
-  rel?: AnchorHTMLAttributes<HTMLAnchorElement>['rel']
-  /** Custom inline styles */
-  style?: CSSProperties
-}
-
-const variantMap: Record<ButtonVariant, FakemuiButtonVariant> = {
-  default: 'primary',
-  destructive: 'danger',
-  outline: 'outline',
-  secondary: 'secondary',
-  ghost: 'ghost',
-  link: 'text',
-}
-
-const sizeMap: Record<ButtonSize, FakemuiButtonSize> = {
-  default: 'md',
-  sm: 'sm',
-  lg: 'lg',
-  icon: 'md',
-}
-
-const Button = forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ variant = 'default', size = 'default', children, className, style, ...props }, ref) => {
-    const fakemuiVariant = variantMap[variant]
-    const fakemuiSize = sizeMap[size]
-    const isIcon = size === 'icon'
-    const isLink = variant === 'link'
-
-    return (
-      <FakemuiButton
-        ref={ref}
-        variant={fakemuiVariant}
-        size={fakemuiSize}
-        icon={isIcon}
-        className={`${styles.button} ${isLink ? styles.link : ''} ${isIcon ? styles.icon : ''} ${className || ''}`}
-        style={style}
-        {...props}
-      >
-        {children}
-      </FakemuiButton>
-    )
-  }
-)
-
-Button.displayName = 'Button'
-
-export { Button }
diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Checkbox.module.scss b/frontends/nextjs/src/components/ui/atoms/controls/Checkbox.module.scss
deleted file mode 100644
index 8e206660c..000000000
--- a/frontends/nextjs/src/components/ui/atoms/controls/Checkbox.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-.checkbox {
-  // Compact checkbox styling
-  :global(.checkbox-box) {
-    width: 18px;
-    height: 18px;
-  }
-
-  :global(.checkbox-input) {
-    width: 18px;
-    height: 18px;
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Checkbox.tsx b/frontends/nextjs/src/components/ui/atoms/controls/Checkbox.tsx
deleted file mode 100644
index 267b6da9d..000000000
--- a/frontends/nextjs/src/components/ui/atoms/controls/Checkbox.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Checkbox as FakemuiCheckbox, CheckboxProps as FakemuiCheckboxProps } from '@/fakemui/fakemui/inputs'
-
-import styles from './Checkbox.module.scss'
-
-/**
- * Props for the Checkbox component
- * @extends {FakemuiCheckboxProps} Inherits fakemui Checkbox props
- */
-export interface CheckboxProps extends Omit<FakemuiCheckboxProps, 'onChange'> {
-  /** Callback when checked state changes (alternative to onChange) */
-  onCheckedChange?: (checked: boolean) => void
-  /** Standard onChange handler */
-  onChange?: React.ChangeEventHandler<HTMLInputElement>
-}
-
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  ({ onCheckedChange, onChange, className, ...props }, ref) => {
-    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-      onChange?.(event)
-      onCheckedChange?.(event.target.checked)
-    }
-
-    return (
-      <FakemuiCheckbox
-        ref={ref}
-        onChange={handleChange}
-        className={`${styles.checkbox} ${className || ''}`}
-        {...props}
-      />
-    )
-  }
-)
-
-Checkbox.displayName = 'Checkbox'
-
-export { Checkbox }
diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Slider.module.scss b/frontends/nextjs/src/components/ui/atoms/controls/Slider.module.scss
deleted file mode 100644
index c924b29c9..000000000
--- a/frontends/nextjs/src/components/ui/atoms/controls/Slider.module.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-.slider {
-  // Slider thumb styling
-  :global(.fakemui-slider-thumb),
-  &::-webkit-slider-thumb {
-    width: 16px;
-    height: 16px;
-  }
-
-  // Track styling
-  :global(.fakemui-slider-track) {
-    height: 4px;
-  }
-
-  // Rail styling  
-  :global(.fakemui-slider-rail) {
-    height: 4px;
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Slider.tsx b/frontends/nextjs/src/components/ui/atoms/controls/Slider.tsx
deleted file mode 100644
index 1ae4b8abe..000000000
--- a/frontends/nextjs/src/components/ui/atoms/controls/Slider.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-'use client'
-
-import { CSSProperties,forwardRef } from 'react'
-
-import { Slider as FakemuiSlider, SliderProps as FakemuiSliderProps } from '@/fakemui/fakemui/inputs'
-
-import styles from './Slider.module.scss'
-
-/**
- * Props for the Slider component
- * @extends {FakemuiSliderProps} Inherits fakemui Slider props
- */
-export interface SliderProps extends FakemuiSliderProps {
-  /** Custom inline styles */
-  style?: CSSProperties
-}
-
-const Slider = forwardRef<HTMLInputElement, SliderProps>(({ className, style, ...props }, ref) => {
-  return (
-    <FakemuiSlider
-      ref={ref}
-      className={`${styles.slider} ${className || ''}`}
-      style={style}
-      {...props}
-    />
-  )
-})
-
-Slider.displayName = 'Slider'
-
-export { Slider }
diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Switch.module.scss b/frontends/nextjs/src/components/ui/atoms/controls/Switch.module.scss
deleted file mode 100644
index 86b0c4408..000000000
--- a/frontends/nextjs/src/components/ui/atoms/controls/Switch.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.switch {
-  // Switch styling - fakemui uses default styling
-  // Add any custom overrides here if needed
-  display: inline-flex;
-  align-items: center;
-  
-  :global(.switch-track) {
-    width: 34px;
-    height: 14px;
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Switch.tsx b/frontends/nextjs/src/components/ui/atoms/controls/Switch.tsx
deleted file mode 100644
index a68c8740a..000000000
--- a/frontends/nextjs/src/components/ui/atoms/controls/Switch.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Switch as FakemuiSwitch, SwitchProps as FakemuiSwitchProps } from '@/fakemui/fakemui/inputs'
-
-import styles from './Switch.module.scss'
-
-/**
- * Props for the Switch component
- * @extends {FakemuiSwitchProps} Inherits fakemui Switch props
- */
-export interface SwitchProps extends Omit<FakemuiSwitchProps, 'onChange'> {
-  /** Callback when checked state changes (alternative to onChange) */
-  onCheckedChange?: (checked: boolean) => void
-  /** Standard onChange handler */
-  onChange?: React.ChangeEventHandler<HTMLInputElement>
-}
-
-const Switch = forwardRef<HTMLInputElement, SwitchProps>(
-  ({ onCheckedChange, onChange, className, ...props }, ref) => {
-    const handleChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
-      onChange?.(event)
-      onCheckedChange?.(event.target.checked)
-    }
-
-    return (
-      <FakemuiSwitch
-        ref={ref}
-        onChange={handleChange}
-        className={`${styles.switch} ${className || ''}`}
-        {...props}
-      />
-    )
-  }
-)
-
-Switch.displayName = 'Switch'
-
-export { Switch }
diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Toggle.module.scss b/frontends/nextjs/src/components/ui/atoms/controls/Toggle.module.scss
deleted file mode 100644
index 6556dba81..000000000
--- a/frontends/nextjs/src/components/ui/atoms/controls/Toggle.module.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-.toggle {
-  border: none;
-  background-color: transparent;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-  }
-
-  &.pressed {
-    background-color: var(--action-selected, rgba(0, 0, 0, 0.08));
-  }
-}
-
-.outline {
-  border: 1px solid var(--divider, #e0e0e0);
-}
-
-.sm {
-  height: 32px;
-  min-width: 32px;
-}
-
-.default {
-  height: 40px;
-  min-width: 40px;
-}
-
-.lg {
-  height: 48px;
-  min-width: 48px;
-}
-
-// Dark mode support
-[data-theme='dark'] {
-  .toggle {
-    &:hover {
-      background-color: var(--action-hover-dark, rgba(255, 255, 255, 0.08));
-    }
-
-    &.pressed {
-      background-color: var(--action-selected-dark, rgba(255, 255, 255, 0.16));
-    }
-  }
-
-  .outline {
-    border-color: var(--divider-dark, #424242);
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/controls/Toggle.tsx b/frontends/nextjs/src/components/ui/atoms/controls/Toggle.tsx
deleted file mode 100644
index e629bafc9..000000000
--- a/frontends/nextjs/src/components/ui/atoms/controls/Toggle.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-'use client'
-
-import { CSSProperties,forwardRef } from 'react'
-
-import { ToggleButton, ToggleButtonProps } from '@/fakemui/fakemui/inputs'
-
-import styles from './Toggle.module.scss'
-
-/** Toggle button visual style variants */
-export type ToggleVariant = 'default' | 'outline'
-
-/** Toggle button size options */
-export type ToggleSize = 'default' | 'sm' | 'lg'
-
-/**
- * Props for the Toggle component
- * @extends {ToggleButtonProps} Inherits fakemui ToggleButton props
- */
-export interface ToggleProps extends Omit<ToggleButtonProps, 'size'> {
-  /** Visual style variant of the toggle button */
-  variant?: ToggleVariant
-  /** Size of the toggle button */
-  size?: ToggleSize
-  /** Controlled pressed state */
-  pressed?: boolean
-  /** Callback when pressed state changes */
-  onPressedChange?: (pressed: boolean) => void
-  /** Custom inline styles */
-  style?: CSSProperties
-}
-
-const sizeMap: Record<ToggleSize, 'small' | 'medium' | 'large'> = {
-  sm: 'small',
-  default: 'medium',
-  lg: 'large',
-}
-
-const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(
-  (
-    { variant = 'default', size = 'default', pressed, onPressedChange, className, style, value, ...props },
-    ref
-  ) => {
-    const sizeClass = styles[size] || styles.default
-
-    return (
-      <ToggleButton
-        ref={ref}
-        value={value || 'toggle'}
-        selected={pressed}
-        onClick={() => onPressedChange?.(!pressed)}
-        size={sizeMap[size]}
-        className={`${styles.toggle} ${sizeClass} ${variant === 'outline' ? styles.outline : ''} ${pressed ? styles.pressed : ''} ${className || ''}`}
-        style={style}
-        {...props}
-      />
-    )
-  }
-)
-
-Toggle.displayName = 'Toggle'
-
-export { Toggle }
diff --git a/frontends/nextjs/src/components/ui/atoms/display/Avatar.module.scss b/frontends/nextjs/src/components/ui/atoms/display/Avatar.module.scss
deleted file mode 100644
index 45766cb50..000000000
--- a/frontends/nextjs/src/components/ui/atoms/display/Avatar.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-.avatar {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  overflow: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--action-hover, #f5f5f5);
-  color: var(--text-primary, #333);
-  font-weight: 500;
-
-  img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-}
-
-// Dark mode support
-[data-theme='dark'] {
-  .avatar {
-    background-color: var(--action-hover-dark, #2c2c2c);
-    color: var(--text-primary-dark, #fff);
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/display/Avatar.tsx b/frontends/nextjs/src/components/ui/atoms/display/Avatar.tsx
deleted file mode 100644
index 427c5df85..000000000
--- a/frontends/nextjs/src/components/ui/atoms/display/Avatar.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-'use client'
-
-import { CSSProperties,forwardRef } from 'react'
-
-import { Avatar as FakemuiAvatar, AvatarProps as FakemuiAvatarProps } from '@/fakemui/fakemui/data-display'
-
-import styles from './Avatar.module.scss'
-
-/**
- * Props for the Avatar component
- * @extends {FakemuiAvatarProps} Inherits fakemui Avatar props
- */
-export interface AvatarProps extends FakemuiAvatarProps {
-  /** Custom inline styles */
-  style?: CSSProperties
-}
-
-const Avatar = forwardRef<HTMLDivElement, AvatarProps>(({ className, style, ...props }, ref) => {
-  return (
-    <FakemuiAvatar
-      ref={ref}
-      md
-      className={`${styles.avatar} ${className || ''}`}
-      style={style}
-      {...props}
-    />
-  )
-})
-
-Avatar.displayName = 'Avatar'
-
-// For compatibility with shadcn pattern
-const AvatarImage = forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
-  (props, ref) => {
-    return (
-      <img ref={ref} {...props} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
-    )
-  }
-)
-AvatarImage.displayName = 'AvatarImage'
-
-interface AvatarFallbackProps {
-  children?: React.ReactNode
-  className?: string
-}
-
-const AvatarFallback = ({ children }: AvatarFallbackProps) => {
-  return <>{children}</>
-}
-
-export { Avatar, AvatarFallback, AvatarImage }
diff --git a/frontends/nextjs/src/components/ui/atoms/display/Badge.module.scss b/frontends/nextjs/src/components/ui/atoms/display/Badge.module.scss
deleted file mode 100644
index 31fd5fdaf..000000000
--- a/frontends/nextjs/src/components/ui/atoms/display/Badge.module.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.badge {
-  height: auto;
-  padding: 2px 6px;
-  font-size: 0.75rem;
-  font-weight: 500;
-  border-radius: 9999px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.default {
-  background-color: var(--primary-main, #1976d2);
-  color: var(--primary-contrast-text, #fff);
-}
-
-.secondary {
-  background-color: var(--secondary-main, #9c27b0);
-  color: var(--secondary-contrast-text, #fff);
-}
-
-.destructive {
-  background-color: var(--error-main, #d32f2f);
-  color: var(--error-contrast-text, #fff);
-}
-
-.outline {
-  background-color: transparent;
-  border: 1px solid var(--border-color, #e0e0e0);
-  color: var(--text-primary, #333);
-}
-
-// Dark mode support
-[data-theme='dark'] {
-  .outline {
-    border-color: var(--border-color-dark, #424242);
-    color: var(--text-primary-dark, #fff);
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/display/Badge.tsx b/frontends/nextjs/src/components/ui/atoms/display/Badge.tsx
deleted file mode 100644
index 75fcadab9..000000000
--- a/frontends/nextjs/src/components/ui/atoms/display/Badge.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-'use client'
-
-import { CSSProperties,forwardRef, ReactNode } from 'react'
-
-import { Chip } from '@/fakemui/fakemui/data-display'
-
-import styles from './Badge.module.scss'
-
-/** Badge visual style variants */
-export type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline'
-
-/**
- * Props for the Badge component
- */
-export interface BadgeProps {
-  /** Visual style variant of the badge */
-  variant?: BadgeVariant
-  /** Content to display inside the badge */
-  children?: ReactNode
-  /** CSS class name for custom styling */
-  className?: string
-  /** Custom inline styles */
-  style?: CSSProperties
-}
-
-const Badge = forwardRef<HTMLSpanElement, BadgeProps>(
-  ({ variant = 'default', children, className, style, ...props }, ref) => {
-    const variantClass = {
-      default: styles.default,
-      secondary: styles.secondary,
-      destructive: styles.destructive,
-      outline: styles.outline,
-    }[variant]
-
-    return (
-      <Chip
-        sm
-        outline={variant === 'outline'}
-        error={variant === 'destructive'}
-        className={`${styles.badge} ${variantClass} ${className || ''}`}
-        style={style}
-        {...props}
-      >
-        {children}
-      </Chip>
-    )
-  }
-)
-
-Badge.displayName = 'Badge'
-
-export { Badge }
diff --git a/frontends/nextjs/src/components/ui/atoms/display/Label.module.scss b/frontends/nextjs/src/components/ui/atoms/display/Label.module.scss
deleted file mode 100644
index 70b679581..000000000
--- a/frontends/nextjs/src/components/ui/atoms/display/Label.module.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.label {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-primary, #333);
-
-  &.disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-// Dark mode support
-[data-theme='dark'] {
-  .label {
-    color: var(--text-primary-dark, #fff);
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/display/Label.tsx b/frontends/nextjs/src/components/ui/atoms/display/Label.tsx
deleted file mode 100644
index 943c0d2e5..000000000
--- a/frontends/nextjs/src/components/ui/atoms/display/Label.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { FormLabel, FormLabelProps } from '@/fakemui/fakemui/inputs'
-
-import styles from './Label.module.scss'
-
-/**
- * Props for the Label component
- * @extends {FormLabelProps} Inherits fakemui FormLabel props
- */
-export interface LabelProps extends FormLabelProps {
-  /** ID of the form element this label is associated with */
-  htmlFor?: string
-  /** Content to display inside the label */
-  children?: ReactNode
-  /** Whether the label is disabled */
-  disabled?: boolean
-}
-
-const Label = forwardRef<HTMLLabelElement, LabelProps>(({ children, disabled, className, ...props }, ref) => {
-  return (
-    <FormLabel
-      ref={ref}
-      className={`${styles.label} ${disabled ? styles.disabled : ''} ${className || ''}`}
-      {...props}
-    >
-      {children}
-    </FormLabel>
-  )
-})
-
-Label.displayName = 'Label'
-
-export { Label }
diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/Progress.module.scss b/frontends/nextjs/src/components/ui/atoms/feedback/Progress.module.scss
deleted file mode 100644
index 876f293ea..000000000
--- a/frontends/nextjs/src/components/ui/atoms/feedback/Progress.module.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-.progress {
-  height: 8px;
-  border-radius: 4px;
-  background-color: var(--action-hover, rgba(0, 0, 0, 0.08));
-  overflow: hidden;
-
-  // Override fakemui progress bar styling
-  :global(.fakemui-progress-bar),
-  :global([class*="bar"]) {
-    border-radius: 4px;
-  }
-}
-
-// Dark mode support
-[data-theme='dark'] {
-  .progress {
-    background-color: var(--action-hover-dark, rgba(255, 255, 255, 0.08));
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/Progress.tsx b/frontends/nextjs/src/components/ui/atoms/feedback/Progress.tsx
deleted file mode 100644
index 0b8ef1b3c..000000000
--- a/frontends/nextjs/src/components/ui/atoms/feedback/Progress.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-import { CSSProperties,forwardRef } from 'react'
-
-import { LinearProgress, LinearProgressProps } from '@/fakemui/fakemui/feedback'
-
-import styles from './Progress.module.scss'
-
-/**
- * Props for the Progress component
- * @extends {LinearProgressProps} Inherits fakemui LinearProgress props
- */
-export interface ProgressProps extends LinearProgressProps {
-  /** Progress value (0-100) for determinate mode */
-  value?: number
-  /** Custom inline styles */
-  style?: CSSProperties
-}
-
-const Progress = forwardRef<HTMLDivElement, ProgressProps>(({ value, className, style, ...props }, ref) => {
-  return (
-    <LinearProgress
-      ref={ref}
-      variant={value !== undefined ? 'determinate' : 'indeterminate'}
-      value={value}
-      className={`${styles.progress} ${className || ''}`}
-      style={style}
-      {...props}
-    />
-  )
-})
-
-Progress.displayName = 'Progress'
-
-export { Progress }
diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/ScrollArea.module.scss b/frontends/nextjs/src/components/ui/atoms/feedback/ScrollArea.module.scss
deleted file mode 100644
index a0eb2313e..000000000
--- a/frontends/nextjs/src/components/ui/atoms/feedback/ScrollArea.module.scss
+++ /dev/null
@@ -1,39 +0,0 @@
-.scrollArea {
-  overflow: auto;
-
-  // Custom scrollbar styling
-  &::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-  }
-
-  &::-webkit-scrollbar-track {
-    background-color: transparent;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.2);
-    border-radius: 4px;
-
-    &:hover {
-      background-color: rgba(0, 0, 0, 0.3);
-    }
-  }
-}
-
-.scrollBarHidden {
-  display: none;
-}
-
-// Dark mode scrollbar
-[data-theme='dark'] {
-  .scrollArea {
-    &::-webkit-scrollbar-thumb {
-      background-color: rgba(255, 255, 255, 0.2);
-
-      &:hover {
-        background-color: rgba(255, 255, 255, 0.3);
-      }
-    }
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/ScrollArea.tsx b/frontends/nextjs/src/components/ui/atoms/feedback/ScrollArea.tsx
deleted file mode 100644
index b04bb0296..000000000
--- a/frontends/nextjs/src/components/ui/atoms/feedback/ScrollArea.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-'use client'
-
-import { CSSProperties,forwardRef } from 'react'
-
-import { Box, BoxProps } from '@/fakemui/fakemui/layout'
-
-import styles from './ScrollArea.module.scss'
-
-export interface ScrollAreaProps extends Omit<BoxProps, 'ref'> {
-  /** Custom inline styles */
-  style?: CSSProperties
-  /** CSS class name */
-  className?: string
-  /** Children to render inside scroll area */
-  children?: React.ReactNode
-}
-
-/**
- * ScrollArea - Fakemui-based scrollable container
- * Provides a styled scrollable area with custom scrollbar styling
- */
-export const ScrollArea = forwardRef<HTMLDivElement, ScrollAreaProps>(
-  ({ children, className, style, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        className={`${styles.scrollArea} ${className || ''}`}
-        style={style}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-
-ScrollArea.displayName = 'ScrollArea'
-
-/**
- * ScrollBar - Placeholder for Radix ScrollBar API compatibility
- * Not needed with fakemui implementation but exported for compatibility
- */
-export const ScrollBar = forwardRef<HTMLDivElement, BoxProps>(({ ...props }, ref) => {
-  // fakemui handles scrollbars natively via CSS
-  return <Box ref={ref} className={styles.scrollBarHidden} {...props} />
-})
-
-ScrollBar.displayName = 'ScrollBar'
diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/Separator.module.scss b/frontends/nextjs/src/components/ui/atoms/feedback/Separator.module.scss
deleted file mode 100644
index 7b2eebc64..000000000
--- a/frontends/nextjs/src/components/ui/atoms/feedback/Separator.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.separator {
-  border: none;
-  background-color: var(--divider, #e0e0e0);
-}
-
-.horizontal {
-  width: 100%;
-  height: 1px;
-  margin: 16px 0;
-}
-
-.vertical {
-  width: 1px;
-  height: 100%;
-  margin: 0 16px;
-}
-
-// Dark mode support
-[data-theme='dark'] {
-  .separator {
-    background-color: var(--divider-dark, #424242);
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/Separator.tsx b/frontends/nextjs/src/components/ui/atoms/feedback/Separator.tsx
deleted file mode 100644
index 003f1dbc3..000000000
--- a/frontends/nextjs/src/components/ui/atoms/feedback/Separator.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Divider, DividerProps } from '@/fakemui/fakemui/data-display'
-
-import styles from './Separator.module.scss'
-
-/**
- * Props for the Separator component
- * @extends {DividerProps} Inherits fakemui Divider props
- */
-export interface SeparatorProps extends DividerProps {
-  /** Direction of the separator */
-  orientation?: 'horizontal' | 'vertical'
-  /** Whether the separator is decorative (for accessibility) */
-  decorative?: boolean
-}
-
-const Separator = forwardRef<HTMLHRElement, SeparatorProps>(
-  ({ orientation = 'horizontal', className, ...props }, ref) => {
-    return (
-      <Divider
-        ref={ref}
-        vertical={orientation === 'vertical'}
-        className={`${styles.separator} ${orientation === 'vertical' ? styles.vertical : styles.horizontal} ${className || ''}`}
-        {...props}
-      />
-    )
-  }
-)
-
-Separator.displayName = 'Separator'
-
-export { Separator }
diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.module.scss b/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.module.scss
deleted file mode 100644
index 264426bf5..000000000
--- a/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.module.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.skeleton {
-  background-color: var(--action-hover, rgba(0, 0, 0, 0.08));
-  border-radius: 4px;
-}
-
-// Dark mode support
-[data-theme='dark'] {
-  .skeleton {
-    background-color: var(--action-hover-dark, rgba(255, 255, 255, 0.08));
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.tsx b/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.tsx
deleted file mode 100644
index e99402b98..000000000
--- a/frontends/nextjs/src/components/ui/atoms/feedback/Skeleton.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-'use client'
-
-import { CSSProperties,forwardRef } from 'react'
-
-import { Skeleton as FakemuiSkeleton, SkeletonProps as FakemuiSkeletonProps } from '@/fakemui/fakemui/feedback'
-
-import styles from './Skeleton.module.scss'
-
-/**
- * Props for the Skeleton component
- * @extends {FakemuiSkeletonProps} Inherits fakemui Skeleton props
- */
-export interface SkeletonProps extends FakemuiSkeletonProps {
-  /** Custom inline styles */
-  style?: CSSProperties
-}
-
-const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(({ className, style, ...props }, ref) => {
-  return (
-    <FakemuiSkeleton
-      ref={ref}
-      animation="wave"
-      className={`${styles.skeleton} ${className || ''}`}
-      style={style}
-      {...props}
-    />
-  )
-})
-
-Skeleton.displayName = 'Skeleton'
-
-export { Skeleton }
diff --git a/frontends/nextjs/src/components/ui/atoms/index.ts b/frontends/nextjs/src/components/ui/atoms/index.ts
deleted file mode 100644
index 4496b1145..000000000
--- a/frontends/nextjs/src/components/ui/atoms/index.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-// Atoms - Basic building blocks of the UI
-// These are the smallest, most fundamental components
-
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './controls/Button'
-export { Checkbox, type CheckboxProps } from './controls/Checkbox'
-export { Slider, type SliderProps } from './controls/Slider'
-export { Switch, type SwitchProps } from './controls/Switch'
-export { Toggle, type ToggleProps, type ToggleSize, type ToggleVariant } from './controls/Toggle'
-export { Avatar, AvatarFallback, AvatarImage, type AvatarProps } from './display/Avatar'
-export { Badge, type BadgeProps, type BadgeVariant } from './display/Badge'
-export { Label, type LabelProps } from './display/Label'
-export { Progress, type ProgressProps } from './feedback/Progress'
-export { ScrollArea, type ScrollAreaProps, ScrollBar } from './feedback/ScrollArea'
-export { Separator, type SeparatorProps } from './feedback/Separator'
-export { Skeleton, type SkeletonProps } from './feedback/Skeleton'
-export { Input, type InputProps } from './inputs/Input'
-export { Textarea, type TextareaProps } from './inputs/Textarea'
-
-// New atoms from @/components/atoms (available in God Tier panel)
-export { Radio, type RadioProps } from '../../atoms/controls/Radio'
-export { Icon, type IconName, type IconProps, type IconSize } from '../../atoms/display/Icon'
-export { Link, type LinkProps } from '../../atoms/display/Link'
-export {
-  Text,
-  type TextAlign,
-  type TextProps,
-  type TextVariant,
-  type TextWeight,
-} from '../../atoms/display/Text'
-export {
-  Select as AtomSelect,
-  type SelectOption,
-  type SelectProps,
-} from '../../atoms/inputs/Select'
-export { TextArea, type TextAreaProps } from '../../atoms/inputs/TextArea'
diff --git a/frontends/nextjs/src/components/ui/atoms/inputs/Input.module.scss b/frontends/nextjs/src/components/ui/atoms/inputs/Input.module.scss
deleted file mode 100644
index 8cc3b808b..000000000
--- a/frontends/nextjs/src/components/ui/atoms/inputs/Input.module.scss
+++ /dev/null
@@ -1,69 +0,0 @@
-.input {
-  width: 100%;
-
-  :global(.fakemui-input-base) {
-    padding: 8px 12px;
-    font-size: 0.875rem;
-    border: 1px solid var(--border-color, #e0e0e0);
-    border-radius: 4px;
-    background-color: var(--background-paper, #fff);
-    transition: border-color 0.2s, box-shadow 0.2s;
-  }
-
-  :global(.fakemui-input-base:hover) {
-    border-color: var(--text-primary, #333);
-  }
-
-  :global(.fakemui-input-base-input:focus) {
-    outline: none;
-  }
-
-  :global(.fakemui-input-base:focus-within) {
-    border-color: var(--primary-main, #1976d2);
-    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
-  }
-
-  :global(.fakemui-input-base-disabled) {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  :global(.fakemui-input-base-input) {
-    padding: 0;
-    border: none;
-    background: transparent;
-    font-family: inherit;
-    font-size: inherit;
-    width: 100%;
-  }
-
-  &.error {
-    :global(.fakemui-input-base) {
-      border-color: var(--error-main, #d32f2f);
-    }
-
-    :global(.fakemui-input-base:hover) {
-      border-color: var(--error-main, #d32f2f);
-    }
-
-    :global(.fakemui-input-base:focus-within) {
-      border-color: var(--error-main, #d32f2f);
-      box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
-    }
-  }
-}
-
-// Dark mode support
-[data-theme='dark'] {
-  .input {
-    :global(.fakemui-input-base) {
-      background-color: var(--background-paper-dark, #1e1e1e);
-      border-color: var(--border-color-dark, #424242);
-      color: var(--text-primary-dark, #fff);
-    }
-
-    :global(.fakemui-input-base:hover) {
-      border-color: var(--text-primary-dark, #fff);
-    }
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/inputs/Input.tsx b/frontends/nextjs/src/components/ui/atoms/inputs/Input.tsx
deleted file mode 100644
index 3d7f4e552..000000000
--- a/frontends/nextjs/src/components/ui/atoms/inputs/Input.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-'use client'
-
-import { forwardRef, InputHTMLAttributes } from 'react'
-
-import { InputBase, InputBaseProps } from '@/fakemui/fakemui/inputs'
-
-import styles from './Input.module.scss'
-
-/**
- * Props for the Input component
- * @extends {InputHTMLAttributes} Inherits HTML input element attributes
- */
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  /** Whether the input is in an error state */
-  error?: boolean
-}
-
-const Input = forwardRef<HTMLInputElement, InputProps>(
-  ({ type, error, className, style, ...props }, ref) => {
-    // Filter out HTML-specific props that conflict with InputBase
-    const { color, ...restProps } = props as InputProps & { color?: string }
-    return (
-      <InputBase
-        inputRef={ref}
-        type={type}
-        error={error}
-        fullWidth
-        className={`${styles.input} ${error ? styles.error : ''} ${className || ''}`}
-        inputProps={restProps}
-      />
-    )
-  }
-)
-
-Input.displayName = 'Input'
-
-export { Input }
diff --git a/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.module.scss b/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.module.scss
deleted file mode 100644
index 8c04e363f..000000000
--- a/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.module.scss
+++ /dev/null
@@ -1,52 +0,0 @@
-.textarea {
-  width: 100%;
-  padding: 8px 12px;
-  font-size: 0.875rem;
-  border: 1px solid var(--border-color, #e0e0e0);
-  border-radius: 4px;
-  background-color: var(--background-paper, #fff);
-  font-family: inherit;
-  resize: vertical;
-  transition: border-color 0.2s, box-shadow 0.2s;
-
-  &:hover {
-    border-color: var(--text-primary, #333);
-  }
-
-  &:focus {
-    outline: none;
-    border-color: var(--primary-main, #1976d2);
-    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.15);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &.error {
-    border-color: var(--error-main, #d32f2f);
-
-    &:hover {
-      border-color: var(--error-main, #d32f2f);
-    }
-
-    &:focus {
-      border-color: var(--error-main, #d32f2f);
-      box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.15);
-    }
-  }
-}
-
-// Dark mode support
-[data-theme='dark'] {
-  .textarea {
-    background-color: var(--background-paper-dark, #1e1e1e);
-    border-color: var(--border-color-dark, #424242);
-    color: var(--text-primary-dark, #fff);
-
-    &:hover {
-      border-color: var(--text-primary-dark, #fff);
-    }
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.tsx b/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.tsx
deleted file mode 100644
index dc598d102..000000000
--- a/frontends/nextjs/src/components/ui/atoms/inputs/Textarea.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Textarea as FakemuiTextarea, TextareaProps as FakemuiTextareaProps } from '@/fakemui/fakemui/inputs'
-
-import styles from './Textarea.module.scss'
-
-/**
- * Props for the Textarea component
- */
-export interface TextareaProps extends Omit<FakemuiTextareaProps, 'className'> {
-  /** Whether the textarea is in an error state */
-  error?: boolean
-  /** Whether the textarea is disabled */
-  disabled?: boolean
-  /** Placeholder text to display when empty */
-  placeholder?: string
-  /** Controlled value */
-  value?: string
-  /** Default value for uncontrolled mode */
-  defaultValue?: string
-  /** Callback when value changes */
-  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
-  /** Callback when textarea loses focus */
-  onBlur?: (event: React.FocusEvent<HTMLTextAreaElement>) => void
-  /** Callback when textarea receives focus */
-  onFocus?: (event: React.FocusEvent<HTMLTextAreaElement>) => void
-  /** Form field name */
-  name?: string
-  /** Element ID */
-  id?: string
-  /** Number of visible rows */
-  rows?: number
-  /** Minimum number of rows (for auto-resize) */
-  minRows?: number
-  /** Maximum number of rows (for auto-resize) */
-  maxRows?: number
-  /** CSS class name for custom styling */
-  className?: string
-  /** Whether the field is required */
-  required?: boolean
-  /** Whether the textarea is read-only */
-  readOnly?: boolean
-  /** Whether to auto-focus on mount */
-  autoFocus?: boolean
-}
-
-const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ error, minRows = 3, className, ...props }, ref) => {
-    return (
-      <FakemuiTextarea
-        ref={ref}
-        rows={minRows}
-        error={error}
-        className={`${styles.textarea} ${error ? styles.error : ''} ${className || ''}`}
-        {...props}
-      />
-    )
-  }
-)
-
-Textarea.displayName = 'Textarea'
-
-export { Textarea }
diff --git a/frontends/nextjs/src/components/ui/core.ts b/frontends/nextjs/src/components/ui/core.ts
deleted file mode 100644
index bee6384e0..000000000
--- a/frontends/nextjs/src/components/ui/core.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-// Core UI exports: foundational atoms and common building blocks
-export * from './atoms'
-
-// Common molecules
-export {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-  Alert,
-  AlertDescription,
-  type AlertProps,
-  AlertTitle,
-  type AlertVariant,
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-  NavGroup,
-  type NavGroupProps,
-  NavItem,
-  type NavItemProps,
-  NavLink,
-  type NavLinkProps,
-  RadioGroup,
-  RadioGroupItem,
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-  ToggleGroup,
-  ToggleGroupItem,
-} from './molecules'
-
-// Navigation and command organisms
-export type { SidebarItem, SidebarProps } from './organisms'
-export {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-  Navigation,
-  NavigationBrand,
-  NavigationContent,
-  NavigationItem,
-  NavigationLink,
-  NavigationList,
-  NavigationMenu,
-  NavigationMobileToggle,
-  NavigationSeparator,
-  NavigationSpacer,
-  NavigationTrigger,
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarNav,
-  SidebarSection,
-  SidebarSeparator,
-  SidebarToggle,
-  useCommandShortcut,
-  useNavigationDropdown,
-} from './organisms'
diff --git a/frontends/nextjs/src/components/ui/data.ts b/frontends/nextjs/src/components/ui/data.ts
deleted file mode 100644
index c9c21a66e..000000000
--- a/frontends/nextjs/src/components/ui/data.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-// Data-centric UI exports
-export {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-  SimplePagination,
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TablePagination,
-  TableRow,
-  useFormField,
-} from './organisms'
diff --git a/frontends/nextjs/src/components/ui/display/avatar.ts b/frontends/nextjs/src/components/ui/display/avatar.ts
deleted file mode 100644
index 8b36236a5..000000000
--- a/frontends/nextjs/src/components/ui/display/avatar.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Avatar, AvatarFallback, AvatarImage, type AvatarProps } from './atoms/Avatar'
diff --git a/frontends/nextjs/src/components/ui/display/badge.ts b/frontends/nextjs/src/components/ui/display/badge.ts
deleted file mode 100644
index 1fa13dc76..000000000
--- a/frontends/nextjs/src/components/ui/display/badge.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Badge, type BadgeProps, type BadgeVariant } from './atoms/Badge'
diff --git a/frontends/nextjs/src/components/ui/display/label.ts b/frontends/nextjs/src/components/ui/display/label.ts
deleted file mode 100644
index 2b4dbfd19..000000000
--- a/frontends/nextjs/src/components/ui/display/label.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Label, type LabelProps } from './atoms/Label'
diff --git a/frontends/nextjs/src/components/ui/display/table.ts b/frontends/nextjs/src/components/ui/display/table.ts
deleted file mode 100644
index 4ef29253d..000000000
--- a/frontends/nextjs/src/components/ui/display/table.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Re-export for backward compatibility
-export {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from './organisms/Table'
diff --git a/frontends/nextjs/src/components/ui/feedback/alert-dialog.ts b/frontends/nextjs/src/components/ui/feedback/alert-dialog.ts
deleted file mode 100644
index ef1e39a5f..000000000
--- a/frontends/nextjs/src/components/ui/feedback/alert-dialog.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-// Re-export for backward compatibility
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from './organisms/AlertDialog'
diff --git a/frontends/nextjs/src/components/ui/feedback/alert.ts b/frontends/nextjs/src/components/ui/feedback/alert.ts
deleted file mode 100644
index 2988d4d8a..000000000
--- a/frontends/nextjs/src/components/ui/feedback/alert.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-// Re-export for backward compatibility
-export {
-  Alert,
-  AlertDescription,
-  type AlertProps,
-  AlertTitle,
-  type AlertVariant,
-} from './molecules/Alert'
diff --git a/frontends/nextjs/src/components/ui/feedback/dialog.ts b/frontends/nextjs/src/components/ui/feedback/dialog.ts
deleted file mode 100644
index 1ff6f9c9c..000000000
--- a/frontends/nextjs/src/components/ui/feedback/dialog.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Re-export for backward compatibility
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-} from './molecules/Dialog'
diff --git a/frontends/nextjs/src/components/ui/feedback/progress.ts b/frontends/nextjs/src/components/ui/feedback/progress.ts
deleted file mode 100644
index c16961c85..000000000
--- a/frontends/nextjs/src/components/ui/feedback/progress.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Progress, type ProgressProps } from './atoms/Progress'
diff --git a/frontends/nextjs/src/components/ui/feedback/skeleton.ts b/frontends/nextjs/src/components/ui/feedback/skeleton.ts
deleted file mode 100644
index f38eba5f7..000000000
--- a/frontends/nextjs/src/components/ui/feedback/skeleton.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Skeleton, type SkeletonProps } from './atoms/Skeleton'
diff --git a/frontends/nextjs/src/components/ui/forms/controls/checkbox.ts b/frontends/nextjs/src/components/ui/forms/controls/checkbox.ts
deleted file mode 100644
index 77857c5a6..000000000
--- a/frontends/nextjs/src/components/ui/forms/controls/checkbox.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Checkbox, type CheckboxProps } from './atoms/Checkbox'
diff --git a/frontends/nextjs/src/components/ui/forms/controls/radio-group.ts b/frontends/nextjs/src/components/ui/forms/controls/radio-group.ts
deleted file mode 100644
index cbc991767..000000000
--- a/frontends/nextjs/src/components/ui/forms/controls/radio-group.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { RadioGroup, RadioGroupItem } from './molecules/RadioGroup'
diff --git a/frontends/nextjs/src/components/ui/forms/controls/select.ts b/frontends/nextjs/src/components/ui/forms/controls/select.ts
deleted file mode 100644
index 51d5a5034..000000000
--- a/frontends/nextjs/src/components/ui/forms/controls/select.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-// Re-export for backward compatibility
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from './molecules/Select'
diff --git a/frontends/nextjs/src/components/ui/forms/controls/slider.ts b/frontends/nextjs/src/components/ui/forms/controls/slider.ts
deleted file mode 100644
index ee91f7bf8..000000000
--- a/frontends/nextjs/src/components/ui/forms/controls/slider.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Slider, type SliderProps } from './atoms/Slider'
diff --git a/frontends/nextjs/src/components/ui/forms/controls/switch.ts b/frontends/nextjs/src/components/ui/forms/controls/switch.ts
deleted file mode 100644
index 39373ed11..000000000
--- a/frontends/nextjs/src/components/ui/forms/controls/switch.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Switch, type SwitchProps } from './atoms/Switch'
diff --git a/frontends/nextjs/src/components/ui/forms/inputs/input.ts b/frontends/nextjs/src/components/ui/forms/inputs/input.ts
deleted file mode 100644
index 7f7a0b872..000000000
--- a/frontends/nextjs/src/components/ui/forms/inputs/input.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Input, type InputProps } from './atoms/Input'
diff --git a/frontends/nextjs/src/components/ui/forms/inputs/textarea.ts b/frontends/nextjs/src/components/ui/forms/inputs/textarea.ts
deleted file mode 100644
index 80214eb01..000000000
--- a/frontends/nextjs/src/components/ui/forms/inputs/textarea.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Textarea, type TextareaProps } from './atoms/Textarea'
diff --git a/frontends/nextjs/src/components/ui/index.test.ts b/frontends/nextjs/src/components/ui/index.test.ts
deleted file mode 100644
index 36100da0e..000000000
--- a/frontends/nextjs/src/components/ui/index.test.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { describe, expect, it } from 'vitest'
-
-import { Button, Card, Dialog, Select, Table, Tabs } from '@/components/ui'
-
-describe('ui barrel exports', () => {
-  it('exposes common UI components', () => {
-    expect(Button).toBeDefined()
-    expect(Card).toBeDefined()
-    expect(Dialog).toBeDefined()
-    expect(Select).toBeDefined()
-    expect(Table).toBeDefined()
-    expect(Tabs).toBeDefined()
-  })
-})
diff --git a/frontends/nextjs/src/components/ui/index.ts b/frontends/nextjs/src/components/ui/index.ts
deleted file mode 100644
index 4f0dac7be..000000000
--- a/frontends/nextjs/src/components/ui/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Central UI barrel exports
-export * from './core'
-export * from './data'
-export * from './overlay'
-
-// Preserve category-level entrypoints
-export * from './atoms'
-export * from './molecules'
-export * from './organisms'
diff --git a/frontends/nextjs/src/components/ui/layout/containers/accordion.ts b/frontends/nextjs/src/components/ui/layout/containers/accordion.ts
deleted file mode 100644
index ffcab0f32..000000000
--- a/frontends/nextjs/src/components/ui/layout/containers/accordion.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './molecules/Accordion'
diff --git a/frontends/nextjs/src/components/ui/layout/containers/card.ts b/frontends/nextjs/src/components/ui/layout/containers/card.ts
deleted file mode 100644
index ac9d23eeb..000000000
--- a/frontends/nextjs/src/components/ui/layout/containers/card.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-// Re-export for backward compatibility
-export {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from './molecules/Card'
diff --git a/frontends/nextjs/src/components/ui/layout/containers/sheet.ts b/frontends/nextjs/src/components/ui/layout/containers/sheet.ts
deleted file mode 100644
index 85f549350..000000000
--- a/frontends/nextjs/src/components/ui/layout/containers/sheet.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-// Re-export for backward compatibility
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from './organisms/Sheet'
diff --git a/frontends/nextjs/src/components/ui/layout/scroll-area.ts b/frontends/nextjs/src/components/ui/layout/scroll-area.ts
deleted file mode 100644
index e56b9605d..000000000
--- a/frontends/nextjs/src/components/ui/layout/scroll-area.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { ScrollArea, type ScrollAreaProps, ScrollBar } from './atoms/ScrollArea'
diff --git a/frontends/nextjs/src/components/ui/layout/separator.ts b/frontends/nextjs/src/components/ui/layout/separator.ts
deleted file mode 100644
index d90361a2e..000000000
--- a/frontends/nextjs/src/components/ui/layout/separator.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Separator, type SeparatorProps } from './atoms/Separator'
diff --git a/frontends/nextjs/src/components/ui/layout/tabs.ts b/frontends/nextjs/src/components/ui/layout/tabs.ts
deleted file mode 100644
index 8713e089e..000000000
--- a/frontends/nextjs/src/components/ui/layout/tabs.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Tabs, TabsContent, TabsList, TabsTrigger } from './molecules/Tabs'
diff --git a/frontends/nextjs/src/components/ui/molecules/display/Accordion.tsx b/frontends/nextjs/src/components/ui/molecules/display/Accordion.tsx
deleted file mode 100644
index 4956b50c1..000000000
--- a/frontends/nextjs/src/components/ui/molecules/display/Accordion.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode, useState } from 'react'
-
-import {
-  Accordion as FakeMuiAccordion,
-  AccordionDetails,
-  AccordionSummary,
-  Typography,
-} from '@/fakemui'
-import { ExpandMore } from '@/fakemui/icons'
-
-interface AccordionProps {
-  children: ReactNode
-  type?: 'single' | 'multiple'
-  collapsible?: boolean
-  defaultValue?: string | string[]
-  value?: string | string[]
-  onValueChange?: (value: string | string[]) => void
-  className?: string
-}
-
-const Accordion = forwardRef<HTMLDivElement, AccordionProps>(
-  ({ children, type = 'single', ...props }, ref) => {
-    return (
-      <div ref={ref} {...props}>
-        {children}
-      </div>
-    )
-  }
-)
-Accordion.displayName = 'Accordion'
-
-interface AccordionItemProps {
-  children: ReactNode
-  value: string
-  disabled?: boolean
-  className?: string
-}
-
-const AccordionItem = forwardRef<HTMLDivElement, AccordionItemProps>(
-  ({ children, value, disabled, className, ...props }, ref) => {
-    const [expanded, setExpanded] = useState(false)
-
-    return (
-      <FakeMuiAccordion
-        ref={ref}
-        expanded={expanded}
-        disabled={disabled}
-        className={`accordion-item ${expanded ? 'accordion-item--expanded' : ''} ${className || ''}`}
-        {...props}
-      >
-        <div onClick={() => !disabled && setExpanded(!expanded)}>{children}</div>
-      </FakeMuiAccordion>
-    )
-  }
-)
-AccordionItem.displayName = 'AccordionItem'
-
-interface AccordionTriggerProps {
-  children: ReactNode
-  className?: string
-}
-
-const AccordionTrigger = forwardRef<HTMLButtonElement, AccordionTriggerProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <AccordionSummary
-        ref={ref}
-        expandIcon={<ExpandMore />}
-        className={className}
-        {...props}
-      >
-        <Typography variant="body1" className="font-medium">
-          {children}
-        </Typography>
-      </AccordionSummary>
-    )
-  }
-)
-AccordionTrigger.displayName = 'AccordionTrigger'
-
-interface AccordionContentProps {
-  children: ReactNode
-  className?: string
-}
-
-const AccordionContent = forwardRef<HTMLDivElement, AccordionContentProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <AccordionDetails ref={ref} className={className} {...props}>
-        {children}
-      </AccordionDetails>
-    )
-  }
-)
-AccordionContent.displayName = 'AccordionContent'
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger }
diff --git a/frontends/nextjs/src/components/ui/molecules/display/Alert.tsx b/frontends/nextjs/src/components/ui/molecules/display/Alert.tsx
deleted file mode 100644
index 9e480cc5d..000000000
--- a/frontends/nextjs/src/components/ui/molecules/display/Alert.tsx
+++ /dev/null
@@ -1,65 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Alert as FakeMuiAlert, AlertTitle as FakeMuiAlertTitle } from '@/fakemui'
-
-export type AlertVariant = 'default' | 'destructive'
-
-export interface AlertProps {
-  variant?: AlertVariant
-  children?: ReactNode
-  className?: string
-}
-
-const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ variant = 'default', children, className, ...props }, ref) => {
-    const severity = variant === 'destructive' ? 'error' : 'info'
-
-    return (
-      <FakeMuiAlert
-        ref={ref}
-        severity={severity}
-        variant="outlined"
-        className={className}
-        {...props}
-      >
-        {children}
-      </FakeMuiAlert>
-    )
-  }
-)
-
-Alert.displayName = 'Alert'
-
-interface AlertTitleProps {
-  children: ReactNode
-  className?: string
-}
-
-const AlertTitle = forwardRef<HTMLDivElement, AlertTitleProps>(({ children, ...props }, ref) => {
-  return (
-    <FakeMuiAlertTitle ref={ref} {...props}>
-      {children}
-    </FakeMuiAlertTitle>
-  )
-})
-AlertTitle.displayName = 'AlertTitle'
-
-interface AlertDescriptionProps {
-  children: ReactNode
-  className?: string
-}
-
-const AlertDescription = forwardRef<HTMLParagraphElement, AlertDescriptionProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <div ref={ref} {...props}>
-        {children}
-      </div>
-    )
-  }
-)
-AlertDescription.displayName = 'AlertDescription'
-
-export { Alert, AlertDescription, AlertTitle }
diff --git a/frontends/nextjs/src/components/ui/molecules/display/Card.module.scss b/frontends/nextjs/src/components/ui/molecules/display/Card.module.scss
deleted file mode 100644
index e6590c6ed..000000000
--- a/frontends/nextjs/src/components/ui/molecules/display/Card.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-// Card styles - migrated from MUI sx prop
-
-.card {
-  border-radius: 8px;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
-}
-
-.cardHeader {
-  padding: 24px;
-  padding-bottom: 0;
-}
-
-.cardTitle {
-  font-size: 1.25rem;
-  font-weight: 600;
-  line-height: 1.6;
-}
-
-.cardDescription {
-  font-size: 0.875rem;
-  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-}
-
-.cardContent {
-  padding: 24px;
-}
-
-.cardFooter {
-  padding: 24px;
-  padding-top: 0;
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/display/Card.tsx b/frontends/nextjs/src/components/ui/molecules/display/Card.tsx
deleted file mode 100644
index ef79d0f27..000000000
--- a/frontends/nextjs/src/components/ui/molecules/display/Card.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box } from '@/fakemui/fakemui/layout'
-import {
-  Card as FakeMuiCard,
-  CardActions,
-  CardContent as FakeMuiCardContent,
-  CardDescription as FakeMuiCardDescription,
-  CardFooter as FakeMuiCardFooter,
-  CardTitle as FakeMuiCardTitle,
-} from '@/fakemui/fakemui/surfaces'
-
-import styles from './Card.module.scss'
-
-export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: ReactNode
-  raised?: boolean
-  clickable?: boolean
-}
-
-const Card = forwardRef<HTMLDivElement, CardProps>(
-  ({ children, className = '', raised, clickable, ...props }, ref) => {
-    return (
-      <FakeMuiCard
-        ref={ref}
-        raised={raised}
-        clickable={clickable}
-        className={`${styles.card} ${className}`}
-        {...props}
-      >
-        {children}
-      </FakeMuiCard>
-    )
-  }
-)
-Card.displayName = 'Card'
-
-interface CardHeaderProps {
-  children?: ReactNode
-  className?: string
-}
-
-const CardHeaderComponent = forwardRef<HTMLDivElement, CardHeaderProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`${styles.cardHeader} ${className}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-CardHeaderComponent.displayName = 'CardHeader'
-
-interface CardTitleProps {
-  children?: ReactNode
-  className?: string
-}
-
-const CardTitle = forwardRef<HTMLHeadingElement, CardTitleProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <FakeMuiCardTitle ref={ref} className={`${styles.cardTitle} ${className}`} {...props}>
-        {children}
-      </FakeMuiCardTitle>
-    )
-  }
-)
-CardTitle.displayName = 'CardTitle'
-
-interface CardDescriptionProps {
-  children?: ReactNode
-  className?: string
-}
-
-const CardDescription = forwardRef<HTMLParagraphElement, CardDescriptionProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <FakeMuiCardDescription ref={ref} className={`${styles.cardDescription} ${className}`} {...props}>
-        {children}
-      </FakeMuiCardDescription>
-    )
-  }
-)
-CardDescription.displayName = 'CardDescription'
-
-interface CardContentProps {
-  children?: ReactNode
-  className?: string
-}
-
-const CardContentComponent = forwardRef<HTMLDivElement, CardContentProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <FakeMuiCardContent ref={ref} className={`${styles.cardContent} ${className}`} {...props}>
-        {children}
-      </FakeMuiCardContent>
-    )
-  }
-)
-CardContentComponent.displayName = 'CardContent'
-
-interface CardFooterProps {
-  children?: ReactNode
-  className?: string
-}
-
-const CardFooter = forwardRef<HTMLDivElement, CardFooterProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <FakeMuiCardFooter ref={ref} className={`${styles.cardFooter} ${className}`} {...props}>
-        {children}
-      </FakeMuiCardFooter>
-    )
-  }
-)
-CardFooter.displayName = 'CardFooter'
-
-export {
-  Card,
-  CardContentComponent as CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeaderComponent as CardHeader,
-  CardTitle,
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/index.ts b/frontends/nextjs/src/components/ui/molecules/index.ts
deleted file mode 100644
index 3d5309097..000000000
--- a/frontends/nextjs/src/components/ui/molecules/index.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-// Molecules - Combinations of atoms that form functional UI groups
-// These are relatively simple groups of UI elements functioning together as a unit
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './display/Accordion'
-export {
-  Alert,
-  AlertDescription,
-  type AlertProps,
-  AlertTitle,
-  type AlertVariant,
-} from './display/Alert'
-export {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from './display/Card'
-export {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-} from './navigation/Breadcrumb'
-export { NavGroup, type NavGroupProps } from './navigation/NavGroup'
-export { NavItem, type NavItemProps } from './navigation/NavItem'
-export { NavLink, type NavLinkProps } from './navigation/NavLink'
-export { Tabs, TabsContent, TabsList, TabsTrigger } from './navigation/Tabs'
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-} from './overlay/Dialog'
-export { DialogSection, DialogSections } from './overlay/Dialog/Sections'
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from './overlay/DropdownMenu'
-export { MenuItem, type MenuItemProps } from './overlay/DropdownMenu/MenuItem'
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger } from './overlay/Popover'
-export {
-  SimpleTooltip,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from './overlay/Tooltip'
-export { useDropdownState } from './overlay/useDropdownState'
-export { RadioGroup, RadioGroupItem } from './selection/RadioGroup'
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from './selection/Select'
-export { ToggleGroup, ToggleGroupItem } from './selection/ToggleGroup'
diff --git a/frontends/nextjs/src/components/ui/molecules/navigation/Breadcrumb.module.scss b/frontends/nextjs/src/components/ui/molecules/navigation/Breadcrumb.module.scss
deleted file mode 100644
index 1e52634ac..000000000
--- a/frontends/nextjs/src/components/ui/molecules/navigation/Breadcrumb.module.scss
+++ /dev/null
@@ -1,73 +0,0 @@
-// Breadcrumb styles - converted from MUI sx props
-
-.breadcrumbs {
-  display: flex;
-  align-items: center;
-}
-
-.breadcrumbsList {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.breadcrumbsItem {
-  display: flex;
-  align-items: center;
-}
-
-.breadcrumbsSeparator {
-  display: flex;
-  align-items: center;
-  margin: 0 8px;
-  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-}
-
-.breadcrumbItem {
-  display: inline-flex;
-  align-items: center;
-}
-
-.breadcrumbLink {
-  display: flex;
-  align-items: center;
-  font-size: 0.875rem;
-  color: inherit;
-  text-decoration: none;
-  transition: text-decoration 0.2s;
-
-  &:hover {
-    text-decoration: underline;
-  }
-}
-
-.breadcrumbPage {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-primary, rgba(0, 0, 0, 0.87));
-}
-
-.breadcrumbSeparator {
-  display: inline-flex;
-  align-items: center;
-  margin: 0 8px;
-  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-}
-
-.breadcrumbEllipsis {
-  display: flex;
-  align-items: center;
-  position: relative;
-}
-
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/navigation/Breadcrumb.tsx b/frontends/nextjs/src/components/ui/molecules/navigation/Breadcrumb.tsx
deleted file mode 100644
index bc2f5802e..000000000
--- a/frontends/nextjs/src/components/ui/molecules/navigation/Breadcrumb.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, Breadcrumbs, Link, Typography } from '@/fakemui'
-import { MoreHoriz, NavigateNext } from '@/fakemui/icons'
-
-import styles from './Breadcrumb.module.scss'
-
-interface BreadcrumbProps {
-  children: ReactNode
-  className?: string
-}
-
-const Breadcrumb = forwardRef<HTMLElement, BreadcrumbProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Breadcrumbs
-        ref={ref}
-        separator={<NavigateNext size={16} />}
-        className={`${styles.breadcrumbs} ${className}`}
-        aria-label="breadcrumb"
-        {...props}
-      >
-        {children}
-      </Breadcrumbs>
-    )
-  }
-)
-Breadcrumb.displayName = 'Breadcrumb'
-
-interface BreadcrumbListProps {
-  children: ReactNode
-  className?: string
-}
-
-const BreadcrumbList = forwardRef<HTMLOListElement, BreadcrumbListProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return <>{children}</>
-  }
-)
-BreadcrumbList.displayName = 'BreadcrumbList'
-
-interface BreadcrumbItemProps {
-  children: ReactNode
-  className?: string
-}
-
-const BreadcrumbItem = forwardRef<HTMLLIElement, BreadcrumbItemProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Box component="span" ref={ref} className={`${styles.breadcrumbItem} ${className}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-BreadcrumbItem.displayName = 'BreadcrumbItem'
-
-interface BreadcrumbLinkProps {
-  children: ReactNode
-  href?: string
-  asChild?: boolean
-  className?: string
-}
-
-const BreadcrumbLink = forwardRef<HTMLAnchorElement, BreadcrumbLinkProps>(
-  ({ children, href, className = '', ...props }, ref) => {
-    return (
-      <Link
-        ref={ref}
-        href={href}
-        underline="hover"
-        color="inherit"
-        className={`${styles.breadcrumbLink} ${className}`}
-        {...props}
-      >
-        {children}
-      </Link>
-    )
-  }
-)
-BreadcrumbLink.displayName = 'BreadcrumbLink'
-
-interface BreadcrumbPageProps {
-  children: ReactNode
-  className?: string
-}
-
-const BreadcrumbPage = forwardRef<HTMLSpanElement, BreadcrumbPageProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Typography
-        ref={ref}
-        className={`${styles.breadcrumbPage} ${className}`}
-        {...props}
-      >
-        {children}
-      </Typography>
-    )
-  }
-)
-BreadcrumbPage.displayName = 'BreadcrumbPage'
-
-interface BreadcrumbSeparatorProps {
-  children?: ReactNode
-  className?: string
-}
-
-const BreadcrumbSeparator = ({ children, className = '', ...props }: BreadcrumbSeparatorProps) => {
-  return (
-    <Box component="span" className={`${styles.breadcrumbSeparator} ${className}`} {...props}>
-      {children || <NavigateNext size={16} />}
-    </Box>
-  )
-}
-BreadcrumbSeparator.displayName = 'BreadcrumbSeparator'
-
-interface BreadcrumbEllipsisProps {
-  className?: string
-}
-
-const BreadcrumbEllipsis = ({ className = '', ...props }: BreadcrumbEllipsisProps) => {
-  return (
-    <Box component="span" className={`${styles.breadcrumbEllipsis} ${className}`} {...props}>
-      <MoreHoriz size={16} />
-      <span className={styles.srOnly}>More</span>
-    </Box>
-  )
-}
-BreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'
-
-export {
-  Breadcrumb,
-  BreadcrumbEllipsis,
-  BreadcrumbItem,
-  BreadcrumbLink,
-  BreadcrumbList,
-  BreadcrumbPage,
-  BreadcrumbSeparator,
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/navigation/NavGroup.module.scss b/frontends/nextjs/src/components/ui/molecules/navigation/NavGroup.module.scss
deleted file mode 100644
index ff75e20cb..000000000
--- a/frontends/nextjs/src/components/ui/molecules/navigation/NavGroup.module.scss
+++ /dev/null
@@ -1,89 +0,0 @@
-// NavGroup styles - converted from MUI sx props
-
-.navGroup {
-  width: 100%;
-}
-
-.divider {
-  margin: 8px 0;
-  border: none;
-  border-top: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
-}
-
-.groupItem {
-  list-style: none;
-  padding: 0;
-}
-
-.groupButton {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 8px 12px;
-  margin: 2px 4px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--primary-main, #1976d2);
-    outline-offset: -2px;
-  }
-}
-
-.groupButtonDisabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.icon {
-  display: flex;
-  align-items: center;
-  min-width: 40px;
-  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-}
-
-.labelText {
-  flex: 1;
-  font-size: 0.875rem;
-  font-weight: 600;
-  color: var(--text-primary, rgba(0, 0, 0, 0.87));
-}
-
-.expandIcon {
-  display: flex;
-  align-items: center;
-  color: rgba(0, 0, 0, 0.54);
-}
-
-.collapse {
-  overflow: hidden;
-  height: 0;
-  transition: height 0.2s ease-out;
-}
-
-.collapseOpen {
-  height: auto;
-}
-
-.childList {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.childListWithIcon {
-  padding-left: 24px;
-}
-
-.childListNoIcon {
-  padding-left: 8px;
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/navigation/NavGroup.test.tsx b/frontends/nextjs/src/components/ui/molecules/navigation/NavGroup.test.tsx
deleted file mode 100644
index 1248ae639..000000000
--- a/frontends/nextjs/src/components/ui/molecules/navigation/NavGroup.test.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { Folder as FolderIcon } from '@/fakemui/icons'
-
-import { NavGroup } from './NavGroup'
-import { NavItem } from './NavItem'
-
-describe('NavGroup', () => {
-  it.each([
-    { label: 'Navigation', defaultOpen: false },
-    { label: 'Settings', defaultOpen: true },
-    { label: 'Admin', defaultOpen: false },
-  ])('renders with label "$label" and defaultOpen=$defaultOpen', ({ label, defaultOpen }) => {
-    render(
-      <NavGroup label={label} defaultOpen={defaultOpen}>
-        <NavItem label="Child Item" />
-      </NavGroup>
-    )
-
-    expect(screen.getByText(label)).toBeTruthy()
-
-    const childItem = screen.queryByText('Child Item')
-    if (defaultOpen) {
-      expect(childItem).toBeTruthy()
-    }
-  })
-
-  it('toggles collapse when clicked', () => {
-    render(
-      <NavGroup label="Menu">
-        <NavItem label="Child Item" />
-      </NavGroup>
-    )
-
-    const button = screen.getByRole('button', { name: /Menu/i })
-    const childItem = screen.queryByText('Child Item')
-
-    // Children are always in DOM (CSS-based collapse)
-    expect(childItem).toBeTruthy()
-
-    // Click to expand
-    fireEvent.click(button)
-    expect(screen.queryByText('Child Item')).toBeTruthy()
-
-    // Click to collapse
-    fireEvent.click(button)
-    // Children remain in DOM but are hidden via CSS
-    expect(screen.queryByText('Child Item')).toBeTruthy()
-  })
-
-  it('renders with icon', () => {
-    const { container } = render(
-      <NavGroup label="Files" icon={<FolderIcon data-testid="folder-icon" />}>
-        <NavItem label="Document" />
-      </NavGroup>
-    )
-
-    expect(screen.getByTestId('folder-icon')).toBeTruthy()
-  })
-
-  it.each([{ disabled: true }, { disabled: false }])(
-    'handles disabled=$disabled state',
-    ({ disabled }) => {
-      render(
-        <NavGroup label="Menu" disabled={disabled}>
-          <NavItem label="Child" />
-        </NavGroup>
-      )
-
-      const button = screen.getByRole('button', { name: /Menu/i })
-
-      if (disabled) {
-        expect(button.hasAttribute('disabled')).toBe(true)
-        fireEvent.click(button)
-        // Children remain in DOM (CSS-based collapse), click doesn't toggle state
-        expect(screen.queryByText('Child')).toBeTruthy()
-      } else {
-        expect(button.hasAttribute('disabled')).toBe(false)
-      }
-    }
-  )
-
-  it('renders divider when divider=true', () => {
-    const { container } = render(
-      <NavGroup label="Menu" divider>
-        <NavItem label="Child" />
-      </NavGroup>
-    )
-
-    // Check for fakemui Divider component (renders as hr)
-    const divider = container.querySelector('hr')
-    expect(divider).toBeTruthy()
-  })
-
-  it('renders multiple children', () => {
-    render(
-      <NavGroup label="Menu" defaultOpen>
-        <NavItem label="Child 1" />
-        <NavItem label="Child 2" />
-        <NavItem label="Child 3" />
-      </NavGroup>
-    )
-
-    expect(screen.getByText('Child 1')).toBeTruthy()
-    expect(screen.getByText('Child 2')).toBeTruthy()
-    expect(screen.getByText('Child 3')).toBeTruthy()
-  })
-})
diff --git a/frontends/nextjs/src/components/ui/molecules/navigation/NavGroup.tsx b/frontends/nextjs/src/components/ui/molecules/navigation/NavGroup.tsx
deleted file mode 100644
index b939dab1b..000000000
--- a/frontends/nextjs/src/components/ui/molecules/navigation/NavGroup.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode, useState } from 'react'
-
-import { Box, Collapse, Divider, List, ListItem, ListItemIcon, ListItemText } from '@/fakemui'
-import { ExpandLess, ExpandMore } from '@/fakemui/icons'
-
-import styles from './NavGroup.module.scss'
-
-export interface NavGroupProps {
-  label: string
-  icon?: ReactNode
-  children: ReactNode
-  defaultOpen?: boolean
-  disabled?: boolean
-  divider?: boolean
-  className?: string
-}
-
-const NavGroup = forwardRef<HTMLDivElement, NavGroupProps>(
-  (
-    { label, icon, children, defaultOpen = false, disabled = false, divider = false, className = '', ...props },
-    ref
-  ) => {
-    const [open, setOpen] = useState(defaultOpen)
-
-    const handleToggle = () => {
-      if (!disabled) {
-        setOpen(prev => !prev)
-      }
-    }
-
-    const buttonClasses = [styles.groupButton, disabled && styles.groupButtonDisabled]
-      .filter(Boolean)
-      .join(' ')
-
-    const collapseClasses = [styles.collapse, open && styles.collapseOpen].filter(Boolean).join(' ')
-
-    const childListClasses = [
-      styles.childList,
-      icon ? styles.childListWithIcon : styles.childListNoIcon,
-    ]
-      .filter(Boolean)
-      .join(' ')
-
-    return (
-      <Box ref={ref} className={`${styles.navGroup} ${className}`} {...props}>
-        {divider && <Divider className={styles.divider} />}
-        <ListItem className={styles.groupItem}>
-          <button
-            type="button"
-            className={buttonClasses}
-            onClick={handleToggle}
-            disabled={disabled}
-          >
-            {icon && <ListItemIcon className={styles.icon}>{icon}</ListItemIcon>}
-            <ListItemText
-              primary={<span className={styles.labelText}>{label}</span>}
-            />
-            <span className={styles.expandIcon}>
-              {open ? (
-                <ExpandLess size={16} />
-              ) : (
-                <ExpandMore size={16} />
-              )}
-            </span>
-          </button>
-        </ListItem>
-        <Collapse in={open} className={collapseClasses}>
-          <List className={childListClasses}>{children}</List>
-        </Collapse>
-      </Box>
-    )
-  }
-)
-
-NavGroup.displayName = 'NavGroup'
-
-export { NavGroup }
diff --git a/frontends/nextjs/src/components/ui/molecules/navigation/NavItem.module.scss b/frontends/nextjs/src/components/ui/molecules/navigation/NavItem.module.scss
deleted file mode 100644
index faa9432ae..000000000
--- a/frontends/nextjs/src/components/ui/molecules/navigation/NavItem.module.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-// NavItem styles - converted from MUI sx props
-
-.navItem {
-  list-style: none;
-  padding: 0;
-}
-
-.navItemButton {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 8px 12px;
-  margin: 2px 4px;
-  border: none;
-  border-radius: 4px;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
-  transition: background-color 0.2s;
-
-  &:hover {
-    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--primary-main, #1976d2);
-    outline-offset: -2px;
-  }
-}
-
-.navItemButtonSelected {
-  background-color: var(--action-selected, rgba(0, 0, 0, 0.08));
-
-  &:hover {
-    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-  }
-}
-
-.navItemButtonDisabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-  pointer-events: none;
-}
-
-.navItemButtonDense {
-  padding: 4px 12px;
-}
-
-.icon {
-  display: flex;
-  align-items: center;
-  min-width: 40px;
-  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-}
-
-.iconActive {
-  color: var(--primary-main, #1976d2);
-}
-
-.text {
-  flex: 1;
-  min-width: 0;
-}
-
-.textPrimary {
-  display: block;
-  font-size: 0.875rem;
-  font-weight: 400;
-  color: var(--text-primary, rgba(0, 0, 0, 0.87));
-}
-
-.textPrimaryActive {
-  font-weight: 600;
-  color: var(--primary-main, #1976d2);
-}
-
-.textSecondary {
-  display: block;
-  font-size: 0.75rem;
-  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-}
-
-.badgeWrapper {
-  margin-left: 8px;
-}
-
-.badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 0.625rem;
-  min-width: 16px;
-  height: 16px;
-  padding: 0 4px;
-  border-radius: 8px;
-  background-color: var(--primary-main, #1976d2);
-  color: #fff;
-}
-
-.badgeDefault {
-  background-color: var(--grey-500, #9e9e9e);
-}
-
-.badgePrimary {
-  background-color: var(--primary-main, #1976d2);
-}
-
-.badgeSecondary {
-  background-color: var(--secondary-main, #9c27b0);
-}
-
-.badgeError {
-  background-color: var(--error-main, #d32f2f);
-}
-
-.badgeWarning {
-  background-color: var(--warning-main, #ed6c02);
-}
-
-.badgeInfo {
-  background-color: var(--info-main, #0288d1);
-}
-
-.badgeSuccess {
-  background-color: var(--success-main, #2e7d32);
-}
-
-.badgeStatic {
-  position: static;
-  transform: none;
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/navigation/NavItem.test.tsx b/frontends/nextjs/src/components/ui/molecules/navigation/NavItem.test.tsx
deleted file mode 100644
index f088093dd..000000000
--- a/frontends/nextjs/src/components/ui/molecules/navigation/NavItem.test.tsx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { Home as HomeIcon } from '@/fakemui/icons'
-
-import { NavItem } from './NavItem'
-
-describe('NavItem', () => {
-  it.each([
-    { label: 'Home', icon: <HomeIcon />, active: false },
-    { label: 'Dashboard', icon: <HomeIcon />, active: true },
-    { label: 'Settings', icon: undefined, active: false },
-  ])('renders with label "$label", icon presence, active=$active', ({ label, icon, active }) => {
-    render(<NavItem label={label} icon={icon} active={active} />)
-
-    expect(screen.getByText(label)).toBeTruthy()
-
-    const button = screen.getByRole('button')
-    // Check for CSS module active class pattern
-    if (active) {
-      expect(button.className).toMatch(/navItemButtonSelected/)
-    }
-  })
-
-  it.each([
-    { badge: 5, badgeColor: 'primary' as const },
-    { badge: '99+', badgeColor: 'error' as const },
-    { badge: undefined, badgeColor: 'default' as const },
-  ])('displays badge=$badge with badgeColor=$badgeColor', ({ badge, badgeColor }) => {
-    render(<NavItem label="Messages" icon={<HomeIcon />} badge={badge} badgeColor={badgeColor} />)
-
-    if (badge !== undefined) {
-      expect(screen.getByText(badge.toString())).toBeTruthy()
-    }
-  })
-
-  it('calls onClick when clicked', () => {
-    const handleClick = vi.fn()
-    render(<NavItem label="Home" onClick={handleClick} />)
-
-    const button = screen.getByRole('button')
-    fireEvent.click(button)
-
-    expect(handleClick).toHaveBeenCalled()
-  })
-
-  it.each([
-    { disabled: true, shouldBeDisabled: true },
-    { disabled: false, shouldBeDisabled: false },
-  ])('handles disabled=$disabled state', ({ disabled, shouldBeDisabled }) => {
-    render(<NavItem label="Home" disabled={disabled} />)
-
-    const button = screen.getByRole('button')
-    expect(button.hasAttribute('disabled')).toBe(shouldBeDisabled)
-  })
-
-  it('renders with secondary label', () => {
-    render(<NavItem label="Home" secondaryLabel="Main page" />)
-
-    expect(screen.getByText('Home')).toBeTruthy()
-    expect(screen.getByText('Main page')).toBeTruthy()
-  })
-
-  it('renders with href for navigation', () => {
-    render(<NavItem label="Home" href="/home" />)
-
-    // When href is provided, fakemui renders it as a link, not a button
-    const link = screen.getByRole('link')
-    expect(link.getAttribute('href')).toBe('/home')
-  })
-})
diff --git a/frontends/nextjs/src/components/ui/molecules/navigation/NavItem.tsx b/frontends/nextjs/src/components/ui/molecules/navigation/NavItem.tsx
deleted file mode 100644
index de1951ca9..000000000
--- a/frontends/nextjs/src/components/ui/molecules/navigation/NavItem.tsx
+++ /dev/null
@@ -1,108 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { ListItem, ListItemIcon, ListItemText } from '@/fakemui'
-
-import styles from './NavItem.module.scss'
-
-export interface NavItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
-  icon?: ReactNode
-  label: string
-  onClick?: () => void
-  active?: boolean
-  disabled?: boolean
-  badge?: number | string
-  badgeColor?: 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'
-  href?: string
-  secondaryLabel?: string
-  dense?: boolean
-  className?: string
-}
-
-const badgeColorMap: Record<string, string> = {
-  default: styles.badgeDefault,
-  primary: styles.badgePrimary,
-  secondary: styles.badgeSecondary,
-  error: styles.badgeError,
-  warning: styles.badgeWarning,
-  info: styles.badgeInfo,
-  success: styles.badgeSuccess,
-}
-
-const NavItem = forwardRef<HTMLLIElement, NavItemProps>(
-  (
-    {
-      icon,
-      label,
-      onClick,
-      active = false,
-      disabled = false,
-      badge,
-      badgeColor = 'primary',
-      href,
-      secondaryLabel,
-      dense = false,
-      className = '',
-      ...props
-    },
-    ref
-  ) => {
-    const buttonClasses = [
-      styles.navItemButton,
-      active && styles.navItemButtonSelected,
-      disabled && styles.navItemButtonDisabled,
-      dense && styles.navItemButtonDense,
-    ]
-      .filter(Boolean)
-      .join(' ')
-
-    const iconClasses = [styles.icon, active && styles.iconActive].filter(Boolean).join(' ')
-
-    const primaryTextClasses = [styles.textPrimary, active && styles.textPrimaryActive]
-      .filter(Boolean)
-      .join(' ')
-
-    const badgeClasses = [styles.badge, badgeColorMap[badgeColor]].filter(Boolean).join(' ')
-
-    const ButtonComponent = href ? 'a' : 'button'
-
-    return (
-      <ListItem ref={ref} className={`${styles.navItem} ${className}`} {...props}>
-        <ButtonComponent
-          className={buttonClasses}
-          onClick={onClick}
-          disabled={disabled}
-          {...(href ? { href } : { type: 'button' })}
-        >
-          {icon && (
-            <ListItemIcon className={iconClasses}>
-              {badge !== undefined ? (
-                <span className={styles.badgeWrapper}>
-                  {icon}
-                  <span className={badgeClasses}>{badge}</span>
-                </span>
-              ) : (
-                icon
-              )}
-            </ListItemIcon>
-          )}
-          <ListItemText
-            className={styles.text}
-            primary={<span className={primaryTextClasses}>{label}</span>}
-            secondary={secondaryLabel && <span className={styles.textSecondary}>{secondaryLabel}</span>}
-          />
-          {badge !== undefined && !icon && (
-            <span className={styles.badgeWrapper}>
-              <span className={`${badgeClasses} ${styles.badgeStatic}`}>{badge}</span>
-            </span>
-          )}
-        </ButtonComponent>
-      </ListItem>
-    )
-  }
-)
-
-NavItem.displayName = 'NavItem'
-
-export { NavItem }
diff --git a/frontends/nextjs/src/components/ui/molecules/navigation/NavLink.module.scss b/frontends/nextjs/src/components/ui/molecules/navigation/NavLink.module.scss
deleted file mode 100644
index b27c1e5e3..000000000
--- a/frontends/nextjs/src/components/ui/molecules/navigation/NavLink.module.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-// NavLink styles - converted from MUI sx props
-
-.navLink {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 16px;
-  border-radius: 4px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--text-primary, rgba(0, 0, 0, 0.87));
-  background-color: transparent;
-  cursor: pointer;
-  text-decoration: none;
-  transition: background-color 0.2s, color 0.2s;
-
-  &:hover {
-    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-    color: var(--text-primary, rgba(0, 0, 0, 0.87));
-  }
-
-  &:focus-visible {
-    outline: 2px solid var(--primary-main, #1976d2);
-    outline-offset: 2px;
-  }
-}
-
-.navLinkActive {
-  font-weight: 600;
-  color: var(--primary-main, #1976d2);
-  background-color: var(--action-selected, rgba(0, 0, 0, 0.08));
-
-  &:hover {
-    background-color: var(--action-selected, rgba(0, 0, 0, 0.08));
-    color: var(--primary-main, #1976d2);
-  }
-}
-
-.navLinkDisabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-
-  &:hover {
-    background-color: transparent;
-  }
-}
-
-.icon {
-  display: flex;
-  align-items: center;
-  font-size: 1.25rem;
-  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-}
-
-.iconActive {
-  color: var(--primary-main, #1976d2);
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/navigation/NavLink.test.tsx b/frontends/nextjs/src/components/ui/molecules/navigation/NavLink.test.tsx
deleted file mode 100644
index be587429f..000000000
--- a/frontends/nextjs/src/components/ui/molecules/navigation/NavLink.test.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import { Home as HomeIcon } from '@/fakemui/icons'
-
-import { NavLink } from './NavLink'
-
-describe('NavLink', () => {
-  it.each([
-    { href: '/home', children: 'Home', active: false },
-    { href: '/dashboard', children: 'Dashboard', active: true },
-    { href: '/settings', children: 'Settings', active: false },
-  ])(
-    'renders with href="$href", children="$children", active=$active',
-    ({ href, children, active }) => {
-      render(
-        <NavLink href={href} active={active}>
-          {children}
-        </NavLink>
-      )
-
-      const link = screen.getByText(children)
-      expect(link).toBeTruthy()
-
-      const linkElement = link.closest('a')
-      expect(linkElement?.getAttribute('href')).toBe(href)
-    }
-  )
-
-  it('renders with icon', () => {
-    const { container } = render(
-      <NavLink href="/home" icon={<HomeIcon data-testid="home-icon" />}>
-        Home
-      </NavLink>
-    )
-
-    expect(screen.getByTestId('home-icon')).toBeTruthy()
-  })
-
-  it.each([
-    { disabled: true, href: '/home' },
-    { disabled: false, href: '/dashboard' },
-  ])('handles disabled=$disabled state', ({ disabled, href }) => {
-    render(
-      <NavLink href={href} disabled={disabled}>
-        Link
-      </NavLink>
-    )
-
-    const link = screen.getByText('Link').closest('a')
-
-    if (disabled) {
-      expect(link?.hasAttribute('href')).toBe(false)
-    } else {
-      expect(link?.getAttribute('href')).toBe(href)
-    }
-  })
-
-  it('applies active styling when active=true', () => {
-    render(
-      <NavLink href="/home" active>
-        Home
-      </NavLink>
-    )
-
-    const link = screen.getByText('Home').closest('a')
-    // Check for active styling - fakemui applies CSS module classes
-    expect(link).toBeTruthy()
-    expect(link?.className).toMatch(/navLinkActive/)
-  })
-
-  it('does not have underline by default', () => {
-    render(<NavLink href="/home">Home</NavLink>)
-
-    const link = screen.getByText('Home').closest('a')
-    // fakemui Link with underline="none" doesn't add text-decoration
-    expect(link).toBeTruthy()
-  })
-})
diff --git a/frontends/nextjs/src/components/ui/molecules/navigation/NavLink.tsx b/frontends/nextjs/src/components/ui/molecules/navigation/NavLink.tsx
deleted file mode 100644
index b35e57e7c..000000000
--- a/frontends/nextjs/src/components/ui/molecules/navigation/NavLink.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, Link } from '@/fakemui'
-
-import styles from './NavLink.module.scss'
-
-export interface NavLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-  href: string
-  active?: boolean
-  disabled?: boolean
-  children: ReactNode
-  icon?: ReactNode
-  className?: string
-}
-
-const NavLink = forwardRef<HTMLAnchorElement, NavLinkProps>(
-  ({ href, active = false, disabled = false, children, icon, className = '', ...props }, ref) => {
-    const linkClasses = [
-      styles.navLink,
-      active && styles.navLinkActive,
-      disabled && styles.navLinkDisabled,
-      className,
-    ]
-      .filter(Boolean)
-      .join(' ')
-
-    const iconClasses = [styles.icon, active && styles.iconActive].filter(Boolean).join(' ')
-
-    return (
-      <Link
-        ref={ref}
-        href={disabled ? undefined : href}
-        underline="none"
-        className={linkClasses}
-        {...props}
-      >
-        {icon && (
-          <Box component="span" className={iconClasses}>
-            {icon}
-          </Box>
-        )}
-        {children}
-      </Link>
-    )
-  }
-)
-
-NavLink.displayName = 'NavLink'
-
-export { NavLink }
diff --git a/frontends/nextjs/src/components/ui/molecules/navigation/Tabs.tsx b/frontends/nextjs/src/components/ui/molecules/navigation/Tabs.tsx
deleted file mode 100644
index 338fb3899..000000000
--- a/frontends/nextjs/src/components/ui/molecules/navigation/Tabs.tsx
+++ /dev/null
@@ -1,8 +0,0 @@
-export type { TabsContentProps } from '../tabs/components/TabsContent'
-export { TabsContent } from '../tabs/components/TabsContent'
-export type { TabsListProps } from '../tabs/components/TabsList'
-export { TabsList } from '../tabs/components/TabsList'
-export type { TabsTriggerProps } from '../tabs/components/TabsTrigger'
-export { TabsTrigger } from '../tabs/components/TabsTrigger'
-export type { TabsProps } from '../tabs/core/Tabs'
-export { Tabs } from '../tabs/core/Tabs'
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.module.scss
deleted file mode 100644
index 46f7abb73..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// Dialog molecule component styles
-
-.trigger {
-  display: inline-flex;
-}
-
-.closeButton {
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
-}
-
-.description {
-  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.tsx
deleted file mode 100644
index 1aabfbf37..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog.tsx
+++ /dev/null
@@ -1,149 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Typography } from '@/fakemui/fakemui/data-display'
-import { IconButton } from '@/fakemui/fakemui/inputs'
-import { Box } from '@/fakemui/fakemui/layout'
-import {
-  Dialog as FakeMuiDialog,
-  DialogTitle as FakeMuiDialogTitle,
-} from '@/fakemui/fakemui/utils'
-import { Close } from '@/fakemui/icons'
-
-import styles from './Dialog.module.scss'
-import { DialogContent, type DialogContentProps } from './dialog/Body'
-import { DialogFooter, type DialogFooterProps } from './dialog/Footer'
-import { DialogHeader, type DialogHeaderProps } from './dialog/Header'
-
-export interface DialogProps {
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-  onClose?: () => void
-  children?: ReactNode
-  className?: string
-}
-
-const Dialog = forwardRef<HTMLDivElement, DialogProps>(
-  ({ open, onOpenChange, onClose, children, className, ...props }, ref) => {
-    const handleClose = () => {
-      onClose?.()
-      onOpenChange?.(false)
-    }
-
-    return (
-      <FakeMuiDialog ref={ref} open={open ?? false} onClose={handleClose} className={className} {...props}>
-        {children}
-      </FakeMuiDialog>
-    )
-  }
-)
-Dialog.displayName = 'Dialog'
-
-interface DialogTriggerProps {
-  children: ReactNode
-  asChild?: boolean
-  onClick?: () => void
-}
-
-const DialogTrigger = forwardRef<HTMLDivElement, DialogTriggerProps>(
-  ({ children, onClick, ...props }, ref) => {
-    return (
-      <Box ref={ref} onClick={onClick} className={styles.trigger} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-DialogTrigger.displayName = 'DialogTrigger'
-
-const DialogPortal = ({ children }: { children: ReactNode }) => <>{children}</>
-DialogPortal.displayName = 'DialogPortal'
-
-const DialogOverlay = forwardRef<HTMLDivElement>((props, ref) => <div ref={ref} {...props} />)
-DialogOverlay.displayName = 'DialogOverlay'
-
-interface DialogCloseProps {
-  children?: ReactNode
-  onClick?: () => void
-  asChild?: boolean
-}
-
-const DialogClose = forwardRef<HTMLButtonElement, DialogCloseProps>(
-  ({ children, onClick, ...props }, ref) => {
-    if (children) {
-      return (
-        <Box
-          ref={ref as unknown as React.Ref<HTMLDivElement>}
-          onClick={onClick}
-          className={styles.trigger}
-          {...props}
-        >
-          {children}
-        </Box>
-      )
-    }
-    return (
-      <IconButton
-        ref={ref}
-        aria-label="close"
-        onClick={onClick}
-        className={styles.closeButton}
-        {...props}
-      >
-        <Close />
-      </IconButton>
-    )
-  }
-)
-DialogClose.displayName = 'DialogClose'
-
-interface DialogTitleProps {
-  children: ReactNode
-  className?: string
-}
-
-const DialogTitle = forwardRef<HTMLHeadingElement, DialogTitleProps>((props, ref) => {
-  const { children, ...rest } = props
-  return (
-    <FakeMuiDialogTitle ref={ref} {...rest}>
-      {children}
-    </FakeMuiDialogTitle>
-  )
-})
-DialogTitle.displayName = 'DialogTitle'
-
-interface DialogDescriptionProps {
-  children: ReactNode
-  className?: string
-}
-
-const DialogDescription = forwardRef<HTMLParagraphElement, DialogDescriptionProps>((props, ref) => {
-  const { children, className, ...rest } = props
-  return (
-    <Typography
-      ref={ref}
-      variant="body2"
-      className={`${styles.description} ${className ?? ''}`}
-      {...rest}
-    >
-      {children}
-    </Typography>
-  )
-})
-DialogDescription.displayName = 'DialogDescription'
-
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-}
-
-export type { DialogContentProps, DialogFooterProps, DialogHeaderProps }
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Body.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Body.module.scss
deleted file mode 100644
index 40e5f0211..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Body.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-// DialogBody molecule component styles
-
-.body {
-  position: relative;
-  padding: 16px 24px;
-
-  &.hasCloseButton {
-    padding-top: 48px;
-  }
-}
-
-.closeButton {
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Footer.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Footer.module.scss
deleted file mode 100644
index 10fabe11b..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Footer.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-// DialogFooter molecule component styles
-
-.footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  padding: 16px 24px;
-  gap: 8px;
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Header.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Header.module.scss
deleted file mode 100644
index 72aa22288..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Header.module.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-// DialogHeader molecule component styles
-
-.header {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding-bottom: 16px;
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Sections.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Sections.module.scss
deleted file mode 100644
index de713f974..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Sections.module.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-// DialogSections molecule component styles
-
-.sections {
-  display: flex;
-  flex-direction: column;
-}
-
-.section {
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Sections.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Sections.tsx
deleted file mode 100644
index d90d59fb6..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Dialog/Sections.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'use client'
-
-import { ReactNode } from 'react'
-
-import { Divider } from '@/fakemui/fakemui/data-display'
-import { Stack } from '@/fakemui/fakemui/layout'
-
-import styles from './Sections.module.scss'
-
-interface DialogSectionsProps {
-  children: ReactNode
-  spacing?: number
-  divided?: boolean
-}
-
-const DialogSections = ({ children, spacing = 3, divided = false }: DialogSectionsProps) => {
-  return (
-    <Stack
-      className={styles.sections}
-      spacing={spacing}
-      divider={divided ? <Divider /> : undefined}
-    >
-      {children}
-    </Stack>
-  )
-}
-DialogSections.displayName = 'DialogSections'
-
-interface DialogSectionProps {
-  children: ReactNode
-}
-
-const DialogSection = ({ children }: DialogSectionProps) => {
-  return <div className={styles.section}>{children}</div>
-}
-DialogSection.displayName = 'DialogSection'
-
-export { DialogSection, DialogSections }
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu.module.scss
deleted file mode 100644
index 5099f5dcf..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu.module.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-// DropdownMenu styles - migrated from MUI sx prop
-
-.dropdownMenuTrigger {
-  display: inline-flex;
-}
-
-.dropdownMenuContent {
-  min-width: 180px;
-}
-
-.dropdownMenuItem {
-  font-size: 0.875rem;
-  padding: 8px 16px;
-  min-height: auto;
-
-  &.inset {
-    padding-left: 32px;
-  }
-}
-
-.dropdownMenuLabel {
-  padding: 8px 16px;
-  font-size: 0.875rem;
-  font-weight: 600;
-
-  &.inset {
-    padding-left: 32px;
-  }
-}
-
-.dropdownMenuSeparator {
-  margin: 4px 0;
-}
-
-.dropdownMenuShortcut {
-  margin-left: auto;
-  font-size: 0.75rem;
-  letter-spacing: 0.1em;
-  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu.tsx
deleted file mode 100644
index 3add080fc..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu.tsx
+++ /dev/null
@@ -1,210 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Divider } from '@/fakemui/fakemui/data-display'
-import { Box } from '@/fakemui/fakemui/layout'
-import { MenuItem } from '@/fakemui/fakemui/navigation'
-
-import styles from './DropdownMenu.module.scss'
-
-interface DropdownMenuProps {
-  children: ReactNode
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}
-
-const DropdownMenu = ({ children }: DropdownMenuProps) => <>{children}</>
-DropdownMenu.displayName = 'DropdownMenu'
-
-interface DropdownMenuTriggerProps {
-  children: ReactNode
-  asChild?: boolean
-  className?: string
-}
-
-const DropdownMenuTrigger = forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(
-  ({ children, asChild, className = '', ...props }, ref) => {
-    return (
-      <Box
-        ref={ref as unknown as React.Ref<HTMLElement>}
-        className={`${styles.dropdownMenuTrigger} ${className}`}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-DropdownMenuTrigger.displayName = 'DropdownMenuTrigger'
-
-interface DropdownMenuContentProps {
-  children: ReactNode
-  align?: 'start' | 'center' | 'end'
-  sideOffset?: number
-  className?: string
-}
-
-const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuContentProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`${styles.dropdownMenuContent} ${className}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-DropdownMenuContent.displayName = 'DropdownMenuContent'
-
-interface DropdownMenuItemProps {
-  children: ReactNode
-  disabled?: boolean
-  onSelect?: () => void
-  onClick?: () => void
-  className?: string
-  inset?: boolean
-}
-
-const DropdownMenuItem = forwardRef<HTMLButtonElement, DropdownMenuItemProps>(
-  ({ children, disabled, onSelect, onClick, inset, className = '', ...props }, ref) => {
-    return (
-      <MenuItem
-        ref={ref}
-        disabled={disabled}
-        onClick={onSelect || onClick}
-        className={`${styles.dropdownMenuItem} ${inset ? styles.inset : ''} ${className}`}
-        {...props}
-      >
-        {children}
-      </MenuItem>
-    )
-  }
-)
-DropdownMenuItem.displayName = 'DropdownMenuItem'
-
-interface DropdownMenuLabelProps {
-  children: ReactNode
-  className?: string
-  inset?: boolean
-}
-
-const DropdownMenuLabel = forwardRef<HTMLDivElement, DropdownMenuLabelProps>(
-  ({ children, inset, className = '', ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        className={`${styles.dropdownMenuLabel} ${inset ? styles.inset : ''} ${className}`}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-DropdownMenuLabel.displayName = 'DropdownMenuLabel'
-
-interface DropdownMenuSeparatorProps {
-  className?: string
-}
-
-const DropdownMenuSeparator = forwardRef<HTMLHRElement, DropdownMenuSeparatorProps>(
-  ({ className = '', ...props }, ref) => {
-    return <Divider ref={ref} className={`${styles.dropdownMenuSeparator} ${className}`} {...props} />
-  }
-)
-DropdownMenuSeparator.displayName = 'DropdownMenuSeparator'
-
-interface DropdownMenuShortcutProps {
-  children: ReactNode
-  className?: string
-}
-
-const DropdownMenuShortcut = ({ children, className = '', ...props }: DropdownMenuShortcutProps) => {
-  return (
-    <span className={`${styles.dropdownMenuShortcut} ${className}`} {...props}>
-      {children}
-    </span>
-  )
-}
-DropdownMenuShortcut.displayName = 'DropdownMenuShortcut'
-
-const DropdownMenuGroup = ({ children }: { children: ReactNode }) => <>{children}</>
-DropdownMenuGroup.displayName = 'DropdownMenuGroup'
-
-const DropdownMenuPortal = ({ children }: { children: ReactNode }) => <>{children}</>
-DropdownMenuPortal.displayName = 'DropdownMenuPortal'
-
-const DropdownMenuSub = ({ children }: { children: ReactNode }) => <>{children}</>
-DropdownMenuSub.displayName = 'DropdownMenuSub'
-
-const DropdownMenuSubContent = forwardRef<HTMLDivElement, { children: ReactNode; className?: string }>(
-  ({ children, className = '', ...props }, ref) => (
-    <Box ref={ref} className={className} {...props}>
-      {children}
-    </Box>
-  )
-)
-DropdownMenuSubContent.displayName = 'DropdownMenuSubContent'
-
-const DropdownMenuSubTrigger = forwardRef<HTMLButtonElement, DropdownMenuItemProps>(
-  ({ children, className = '', ...props }, ref) => (
-    <MenuItem ref={ref} className={className} {...props}>
-      {children}
-    </MenuItem>
-  )
-)
-DropdownMenuSubTrigger.displayName = 'DropdownMenuSubTrigger'
-
-interface DropdownMenuCheckboxItemProps extends DropdownMenuItemProps {
-  checked?: boolean
-  onCheckedChange?: (checked: boolean) => void
-}
-
-const DropdownMenuCheckboxItem = forwardRef<HTMLButtonElement, DropdownMenuCheckboxItemProps>(
-  ({ children, checked, onCheckedChange, className = '', ...props }, ref) => (
-    <MenuItem ref={ref} onClick={() => onCheckedChange?.(!checked)} className={className} {...props}>
-      {children}
-    </MenuItem>
-  )
-)
-DropdownMenuCheckboxItem.displayName = 'DropdownMenuCheckboxItem'
-
-interface DropdownMenuRadioGroupProps {
-  children: ReactNode
-  value?: string
-  onValueChange?: (value: string) => void
-}
-
-const DropdownMenuRadioGroup = ({ children }: DropdownMenuRadioGroupProps) => <>{children}</>
-DropdownMenuRadioGroup.displayName = 'DropdownMenuRadioGroup'
-
-interface DropdownMenuRadioItemProps extends DropdownMenuItemProps {
-  value: string
-}
-
-const DropdownMenuRadioItem = forwardRef<HTMLButtonElement, DropdownMenuRadioItemProps>(
-  ({ children, value, className = '', ...props }, ref) => (
-    <MenuItem ref={ref} className={className} {...props}>
-      {children}
-    </MenuItem>
-  )
-)
-DropdownMenuRadioItem.displayName = 'DropdownMenuRadioItem'
-
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu/MenuItem.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu/MenuItem.module.scss
deleted file mode 100644
index 8c667be3a..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu/MenuItem.module.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-// MenuItem molecule component styles
-
-.container {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  width: 100%;
-
-  &.hasDescription {
-    align-items: flex-start;
-  }
-}
-
-.content {
-  flex: 1;
-}
-
-.label {
-  font-size: 0.875rem;
-  line-height: 1.43;
-}
-
-.description {
-  margin-top: 4px;
-  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
-}
-
-.detail {
-  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
-  font-size: 0.875rem;
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu/MenuItem.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu/MenuItem.tsx
deleted file mode 100644
index e13ce6cab..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/DropdownMenu/MenuItem.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import { ComponentPropsWithoutRef, forwardRef, ReactNode } from 'react'
-
-import { Typography } from '@/fakemui/fakemui/data-display'
-
-import { DropdownMenuItem } from '../DropdownMenu'
-import styles from './MenuItem.module.scss'
-
-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}>
-        <div className={`${styles.container} ${description ? styles.hasDescription : ''}`}>
-          <div className={styles.content}>
-            <Typography variant="body2" className={styles.label}>{children}</Typography>
-            {description && (
-              <Typography variant="body2" className={styles.description}>
-                {description}
-              </Typography>
-            )}
-          </div>
-          {detail && (
-            <span className={styles.detail}>
-              {detail}
-            </span>
-          )}
-        </div>
-      </DropdownMenuItem>
-    )
-  }
-)
-MenuItem.displayName = 'MenuItem'
-
-export type { MenuItemProps }
-export { MenuItem }
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Popover.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/Popover.module.scss
deleted file mode 100644
index 78c23aefc..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Popover.module.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-// Popover styles - migrated from MUI sx prop
-
-.popoverTrigger {
-  display: inline-flex;
-}
-
-.popoverContent {
-  z-index: 50;
-  min-width: 200px;
-  background-color: var(--background-paper, #fff);
-  border-radius: 8px;
-  border: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  padding: 16px;
-  outline: none;
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Popover.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/Popover.tsx
deleted file mode 100644
index 5da73560b..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Popover.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box } from '@/fakemui/fakemui/layout'
-
-import styles from './Popover.module.scss'
-
-interface PopoverProps {
-  children: ReactNode
-  open?: boolean
-  onOpenChange?: (open: boolean) => void
-}
-
-const Popover = ({ children }: PopoverProps) => <>{children}</>
-Popover.displayName = 'Popover'
-
-interface PopoverTriggerProps {
-  children: ReactNode
-  asChild?: boolean
-  className?: string
-}
-
-const PopoverTrigger = forwardRef<HTMLDivElement, PopoverTriggerProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Box ref={ref} className={`${styles.popoverTrigger} ${className}`} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-PopoverTrigger.displayName = 'PopoverTrigger'
-
-interface PopoverContentProps {
-  children: ReactNode
-  align?: 'start' | 'center' | 'end'
-  sideOffset?: number
-  className?: string
-}
-
-const PopoverContent = forwardRef<HTMLDivElement, PopoverContentProps>(
-  ({ children, align = 'center', sideOffset = 4, className = '', ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        className={`${styles.popoverContent} ${className}`}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-PopoverContent.displayName = 'PopoverContent'
-
-const PopoverAnchor = forwardRef<HTMLDivElement, { children?: ReactNode; className?: string }>(
-  ({ children, className = '', ...props }, ref) => (
-    <Box ref={ref} className={className} {...props}>
-      {children}
-    </Box>
-  )
-)
-PopoverAnchor.displayName = 'PopoverAnchor'
-
-export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger }
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Tooltip.module.scss b/frontends/nextjs/src/components/ui/molecules/overlay/Tooltip.module.scss
deleted file mode 100644
index 1c2963f3d..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Tooltip.module.scss
+++ /dev/null
@@ -1,56 +0,0 @@
-// Tooltip styles - migrated from MUI sx prop
-
-.tooltipContent,
-.simpleTooltip {
-  &[data-tooltip] {
-    position: relative;
-
-    &::before {
-      content: attr(data-tooltip);
-      position: absolute;
-      padding: 6px 12px;
-      background-color: var(--grey-900, #212121);
-      color: var(--common-white, #fff);
-      font-size: 0.75rem;
-      border-radius: 4px;
-      white-space: nowrap;
-      z-index: 1000;
-      pointer-events: none;
-      opacity: 0;
-      transition: opacity 0.2s ease-in-out;
-    }
-
-    &:hover::before {
-      opacity: 1;
-    }
-
-    // Placement variations
-    &[data-placement="top"]::before {
-      bottom: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      margin-bottom: 8px;
-    }
-
-    &[data-placement="bottom"]::before {
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      margin-top: 8px;
-    }
-
-    &[data-placement="left"]::before {
-      right: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      margin-right: 8px;
-    }
-
-    &[data-placement="right"]::before {
-      left: 100%;
-      top: 50%;
-      transform: translateY(-50%);
-      margin-left: 8px;
-    }
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/Tooltip.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/Tooltip.tsx
deleted file mode 100644
index dcf4e8579..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/Tooltip.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Tooltip as FakeMuiTooltip } from '@/fakemui/fakemui/data-display'
-
-import styles from './Tooltip.module.scss'
-
-type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'
-
-interface TooltipProviderProps {
-  children: ReactNode
-  delayDuration?: number
-  skipDelayDuration?: number
-  disableHoverableContent?: boolean
-}
-
-const TooltipProvider = ({ children }: TooltipProviderProps) => <>{children}</>
-TooltipProvider.displayName = 'TooltipProvider'
-
-interface TooltipProps {
-  children: ReactNode
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  delayDuration?: number
-}
-
-const Tooltip = ({ children }: TooltipProps) => <>{children}</>
-Tooltip.displayName = 'Tooltip'
-
-interface TooltipTriggerProps {
-  children: ReactNode
-  asChild?: boolean
-}
-
-const TooltipTrigger = forwardRef<HTMLDivElement, TooltipTriggerProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <span ref={ref as React.Ref<HTMLSpanElement>} {...props}>
-        {children}
-      </span>
-    )
-  }
-)
-TooltipTrigger.displayName = 'TooltipTrigger'
-
-interface TooltipContentProps {
-  children: ReactNode
-  className?: string
-  sideOffset?: number
-  side?: TooltipPlacement
-}
-
-const TooltipContent = forwardRef<HTMLDivElement, TooltipContentProps>(
-  ({ children, side = 'top', className = '' }, ref) => {
-    return (
-      <FakeMuiTooltip
-        ref={ref as React.Ref<HTMLSpanElement>}
-        title={typeof children === 'string' ? children : ''}
-        placement={side}
-        className={`${styles.tooltipContent} ${className}`}
-      >
-        <span>{children}</span>
-      </FakeMuiTooltip>
-    )
-  }
-)
-TooltipContent.displayName = 'TooltipContent'
-
-// Simpler Tooltip wrapper that works with fakemui pattern
-interface SimpleTooltipProps {
-  title: ReactNode
-  children: ReactNode
-  placement?: TooltipPlacement
-  className?: string
-}
-
-const SimpleTooltip = ({ title, children, placement = 'top', className = '' }: SimpleTooltipProps) => {
-  return (
-    <FakeMuiTooltip
-      title={typeof title === 'string' ? title : ''}
-      placement={placement}
-      className={`${styles.simpleTooltip} ${className}`}
-    >
-      <span>{children}</span>
-    </FakeMuiTooltip>
-  )
-}
-
-export { SimpleTooltip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }
diff --git a/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Body.tsx b/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Body.tsx
deleted file mode 100644
index 1e4a8149a..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Body.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { IconButton } from '@/fakemui/fakemui/inputs'
-import { Close } from '@/fakemui/icons'
-
-import styles from './Body.module.scss'
-
-export interface DialogBodyProps {
-  children: ReactNode
-  className?: string
-  onClose?: () => void
-  showCloseButton?: boolean
-}
-
-const DialogBody = forwardRef<HTMLDivElement, DialogBodyProps>(
-  ({ children, showCloseButton = true, onClose, className, ...props }, ref) => {
-    const bodyClass = `${styles.body} ${showCloseButton && onClose ? styles.hasCloseButton : ''} ${className ?? ''}`
-    return (
-      <div ref={ref} className={bodyClass} {...props}>
-        {showCloseButton && onClose && (
-          <IconButton
-            aria-label="close"
-            onClick={onClose}
-            className={styles.closeButton}
-          >
-            <Close />
-          </IconButton>
-        )}
-        {children}
-      </div>
-    )
-  }
-)
-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
deleted file mode 100644
index d862324f2..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Footer.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import styles from './Footer.module.scss'
-
-export interface DialogFooterProps {
-  children: ReactNode
-  className?: string
-}
-
-const DialogFooter = forwardRef<HTMLDivElement, DialogFooterProps>((props, ref) => {
-  const { children, className, ...rest } = props
-  return (
-    <div ref={ref} className={`${styles.footer} ${className ?? ''}`} {...rest}>
-      {children}
-    </div>
-  )
-})
-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
deleted file mode 100644
index d22586545..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/dialog/Header.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import styles from './Header.module.scss'
-
-export interface DialogHeaderProps {
-  children: ReactNode
-  className?: string
-}
-
-const DialogHeader = forwardRef<HTMLDivElement, DialogHeaderProps>((props, ref) => {
-  const { children, className, ...rest } = props
-  return (
-    <div ref={ref} className={`${styles.header} ${className ?? ''}`} {...rest}>
-      {children}
-    </div>
-  )
-})
-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
deleted file mode 100644
index ce9beed18..000000000
--- a/frontends/nextjs/src/components/ui/molecules/overlay/useDropdownState.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-'use client'
-
-import { type MouseEvent, useCallback, useState } 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/molecules/selection/RadioGroup.tsx b/frontends/nextjs/src/components/ui/molecules/selection/RadioGroup.tsx
deleted file mode 100644
index a885ae0f7..000000000
--- a/frontends/nextjs/src/components/ui/molecules/selection/RadioGroup.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Radio, RadioGroup as FakeMuiRadioGroup } from '@/fakemui'
-
-interface RadioGroupProps {
-  children: ReactNode
-  defaultValue?: string
-  value?: string
-  onValueChange?: (value: string) => void
-  disabled?: boolean
-  className?: string
-}
-
-const RadioGroup = forwardRef<HTMLDivElement, RadioGroupProps>(
-  ({ children, defaultValue, value, onValueChange, disabled, className, ...props }, ref) => {
-    return (
-      <FakeMuiRadioGroup
-        ref={ref}
-        defaultValue={defaultValue}
-        value={value}
-        onChange={e => onValueChange?.(e.target.value)}
-        className={`radio-group ${disabled ? 'radio-group--disabled' : ''} ${className || ''}`}
-        {...props}
-      >
-        {children}
-      </FakeMuiRadioGroup>
-    )
-  }
-)
-RadioGroup.displayName = 'RadioGroup'
-
-interface RadioGroupItemProps {
-  value: string
-  disabled?: boolean
-  className?: string
-  id?: string
-}
-
-const RadioGroupItem = forwardRef<HTMLInputElement, RadioGroupItemProps>(
-  ({ value, disabled, id, className, ...props }, ref) => {
-    return (
-      <Radio
-        ref={ref}
-        value={value}
-        disabled={disabled}
-        id={id}
-        className={`radio-item ${className || ''}`}
-        {...props}
-      />
-    )
-  }
-)
-RadioGroupItem.displayName = 'RadioGroupItem'
-
-export { RadioGroup, RadioGroupItem }
diff --git a/frontends/nextjs/src/components/ui/molecules/selection/Select.tsx b/frontends/nextjs/src/components/ui/molecules/selection/Select.tsx
deleted file mode 100644
index 630da55a4..000000000
--- a/frontends/nextjs/src/components/ui/molecules/selection/Select.tsx
+++ /dev/null
@@ -1,138 +0,0 @@
-'use client'
-
-import { createContext, forwardRef, ReactNode, useContext, useState } from 'react'
-
-import { Divider, FormControl, MenuItem, Select as FakeMuiSelect, Typography } from '@/fakemui'
-
-interface SelectContextType {
-  value: string
-  onValueChange: (value: string) => void
-}
-
-const SelectContext = createContext<SelectContextType | null>(null)
-
-interface SelectProps {
-  children: ReactNode
-  value?: string
-  defaultValue?: string
-  onValueChange?: (value: string) => void
-  disabled?: boolean
-}
-
-const Select = ({ children, value, defaultValue, onValueChange, disabled }: SelectProps) => {
-  const [internalValue, setInternalValue] = useState(defaultValue ?? '')
-  const currentValue = value ?? internalValue
-  const handleChange = (newValue: string) => {
-    if (!value) setInternalValue(newValue)
-    onValueChange?.(newValue)
-  }
-
-  return (
-    <SelectContext.Provider value={{ value: currentValue, onValueChange: handleChange }}>
-      <FormControl className={disabled ? 'form-control--disabled' : ''}>
-        {children}
-      </FormControl>
-    </SelectContext.Provider>
-  )
-}
-
-interface SelectGroupProps {
-  children: ReactNode
-}
-
-const SelectGroup = ({ children }: SelectGroupProps) => <>{children}</>
-
-interface SelectValueProps {
-  placeholder?: string
-}
-
-const SelectValue = ({ placeholder }: SelectValueProps) => {
-  const context = useContext(SelectContext)
-  return <>{context?.value || placeholder}</>
-}
-
-interface SelectTriggerProps {
-  children: ReactNode
-  className?: string
-  size?: 'sm' | 'default'
-  id?: string
-}
-
-const SelectTrigger = forwardRef<HTMLSelectElement, SelectTriggerProps>(
-  ({ children, size = 'default', id, className, ...props }, ref) => {
-    const context = useContext(SelectContext)
-
-    return (
-      <FakeMuiSelect
-        ref={ref}
-        value={context?.value ?? ''}
-        onChange={(e) => context?.onValueChange(e.target.value)}
-        sm={size === 'sm'}
-        id={id}
-        className={className}
-        {...props}
-      >
-        {children}
-      </FakeMuiSelect>
-    )
-  }
-)
-SelectTrigger.displayName = 'SelectTrigger'
-
-interface SelectContentProps {
-  children: ReactNode
-  position?: 'item-aligned' | 'popper'
-}
-
-const SelectContent = ({ children }: SelectContentProps) => <>{children}</>
-
-interface SelectLabelProps {
-  children: ReactNode
-}
-
-const SelectLabel = ({ children }: SelectLabelProps) => {
-  return (
-    <Typography variant="caption" className="select-label">
-      {children}
-    </Typography>
-  )
-}
-
-interface SelectItemProps {
-  children: ReactNode
-  value: string
-  disabled?: boolean
-}
-
-const SelectItem = forwardRef<HTMLButtonElement, SelectItemProps>(
-  ({ children, value, disabled }, ref) => {
-    const context = useContext(SelectContext)
-    return (
-      <MenuItem
-        ref={ref}
-        onClick={() => !disabled && context?.onValueChange(value)}
-        disabled={disabled}
-      >
-        {children}
-      </MenuItem>
-    )
-  }
-)
-SelectItem.displayName = 'SelectItem'
-
-const SelectSeparator = () => <Divider className="select-separator" />
-const SelectScrollUpButton = () => null
-const SelectScrollDownButton = () => null
-
-export {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/selection/ToggleGroup.module.scss b/frontends/nextjs/src/components/ui/molecules/selection/ToggleGroup.module.scss
deleted file mode 100644
index 664f7cd18..000000000
--- a/frontends/nextjs/src/components/ui/molecules/selection/ToggleGroup.module.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-// ToggleGroup styles - migrated from MUI sx prop
-
-.toggleGroup {
-  display: inline-flex;
-  border-radius: 8px;
-
-  &.default {
-    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-    border: 0;
-  }
-
-  &.outline {
-    background-color: transparent;
-    border: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
-  }
-
-  .toggle-btn {
-    border: 0;
-    border-radius: 6px;
-    margin: 4px;
-
-    &.toggle-btn--selected {
-      background-color: var(--background-paper, #fff);
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
-    }
-  }
-}
-
-.toggleGroupItem {
-  padding: 8px 16px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  text-transform: none;
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/selection/ToggleGroup.tsx b/frontends/nextjs/src/components/ui/molecules/selection/ToggleGroup.tsx
deleted file mode 100644
index eadb716fd..000000000
--- a/frontends/nextjs/src/components/ui/molecules/selection/ToggleGroup.tsx
+++ /dev/null
@@ -1,97 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { ToggleButton, ToggleButtonGroup } from '@/fakemui/fakemui/inputs'
-
-import styles from './ToggleGroup.module.scss'
-
-interface ToggleGroupProps {
-  children: ReactNode
-  type?: 'single' | 'multiple'
-  value?: string | string[]
-  defaultValue?: string | string[]
-  onValueChange?: (value: string | string[]) => void
-  disabled?: boolean
-  className?: string
-  variant?: 'default' | 'outline'
-  size?: 'default' | 'sm' | 'lg'
-}
-
-const ToggleGroup = forwardRef<HTMLDivElement, ToggleGroupProps>(
-  (
-    {
-      children,
-      type = 'single',
-      value,
-      defaultValue,
-      onValueChange,
-      disabled,
-      variant = 'default',
-      size = 'default',
-      className = '',
-      ...props
-    },
-    ref
-  ) => {
-    const handleChange = (_: React.MouseEvent, newValue: string | string[] | null) => {
-      if (newValue !== null) {
-        onValueChange?.(newValue)
-      }
-    }
-
-    const sizeMap = {
-      sm: 'small' as const,
-      default: 'medium' as const,
-      lg: 'large' as const,
-    }
-
-    const classes = [
-      styles.toggleGroup,
-      variant === 'outline' ? styles.outline : styles.default,
-      className,
-    ].filter(Boolean).join(' ')
-
-    return (
-      <ToggleButtonGroup
-        ref={ref}
-        exclusive={type === 'single'}
-        value={value ?? defaultValue ?? null}
-        onChange={handleChange}
-        disabled={disabled}
-        size={sizeMap[size]}
-        className={classes}
-        {...props}
-      >
-        {children}
-      </ToggleButtonGroup>
-    )
-  }
-)
-ToggleGroup.displayName = 'ToggleGroup'
-
-interface ToggleGroupItemProps {
-  children: ReactNode
-  value: string
-  disabled?: boolean
-  className?: string
-}
-
-const ToggleGroupItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
-  ({ children, value, disabled, className = '', ...props }, ref) => {
-    return (
-      <ToggleButton
-        ref={ref}
-        value={value}
-        disabled={disabled}
-        className={`${styles.toggleGroupItem} ${className}`}
-        {...props}
-      >
-        {children}
-      </ToggleButton>
-    )
-  }
-)
-ToggleGroupItem.displayName = 'ToggleGroupItem'
-
-export { ToggleGroup, ToggleGroupItem }
diff --git a/frontends/nextjs/src/components/ui/molecules/tabs/components/TabsContent.tsx b/frontends/nextjs/src/components/ui/molecules/tabs/components/TabsContent.tsx
deleted file mode 100644
index 991af168f..000000000
--- a/frontends/nextjs/src/components/ui/molecules/tabs/components/TabsContent.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-'use client'
-
-import { forwardRef, useContext } from 'react'
-
-import type { BoxProps } from '@/fakemui'
-import { Box } from '@/fakemui'
-
-import { TabsContext } from '../core/tabs-context'
-
-export interface TabsContentProps extends Omit<BoxProps, 'ref'> {
-  value: string
-}
-
-const TabsContent = forwardRef<HTMLDivElement, TabsContentProps>(
-  ({ children, value, style, ...props }, ref) => {
-    const context = useContext(TabsContext)
-
-    if (!context) {
-      throw new Error('TabsContent must be used within Tabs')
-    }
-
-    const isActive = context.value === value
-
-    return (
-      <Box
-        ref={ref as React.Ref<HTMLElement>}
-        role="tabpanel"
-        id={`${context.idPrefix}-panel-${value}`}
-        aria-labelledby={`${context.idPrefix}-tab-${value}`}
-        hidden={!isActive}
-        style={{
-          flex: 1,
-          outline: 'none',
-          display: isActive ? 'block' : 'none',
-          ...style,
-        }}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-
-TabsContent.displayName = 'TabsContent'
-
-export { TabsContent }
diff --git a/frontends/nextjs/src/components/ui/molecules/tabs/components/TabsList.tsx b/frontends/nextjs/src/components/ui/molecules/tabs/components/TabsList.tsx
deleted file mode 100644
index c723ff55f..000000000
--- a/frontends/nextjs/src/components/ui/molecules/tabs/components/TabsList.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-'use client'
-
-import { forwardRef, useContext } from 'react'
-
-import type { BoxProps } from '@/fakemui'
-import { Box } from '@/fakemui'
-
-import { TabsContext } from '../core/tabs-context'
-
-export type TabsListProps = Omit<BoxProps, 'ref'>
-
-const TabsList = forwardRef<HTMLDivElement, TabsListProps>(({ children, style, ...props }, ref) => {
-  const context = useContext(TabsContext)
-
-  if (!context) {
-    throw new Error('TabsList must be used within Tabs')
-  }
-
-  return (
-    <Box
-      ref={ref as React.Ref<HTMLElement>}
-      role="tablist"
-      aria-orientation="horizontal"
-      style={{
-        display: 'inline-flex',
-        height: '36px',
-        alignItems: 'center',
-        justifyContent: 'center',
-        backgroundColor: 'rgba(0, 0, 0, 0.04)',
-        borderRadius: '8px',
-        padding: '4px',
-        ...style,
-      }}
-      {...props}
-    >
-      {children}
-    </Box>
-  )
-})
-
-TabsList.displayName = 'TabsList'
-
-export { TabsList }
diff --git a/frontends/nextjs/src/components/ui/molecules/tabs/components/TabsTrigger.module.scss b/frontends/nextjs/src/components/ui/molecules/tabs/components/TabsTrigger.module.scss
deleted file mode 100644
index 4b01ac75e..000000000
--- a/frontends/nextjs/src/components/ui/molecules/tabs/components/TabsTrigger.module.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.tabsTrigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  white-space: nowrap;
-  padding: 6px 16px;
-  font-size: 0.875rem;
-  font-weight: 500;
-  border-radius: 6px;
-  border: 0;
-  background-color: transparent;
-  color: var(--text-secondary, rgba(0, 0, 0, 0.6));
-  cursor: pointer;
-  transition: all 0.15s;
-
-  &:hover {
-    color: var(--text-primary, rgba(0, 0, 0, 0.87));
-  }
-
-  &[aria-selected='true'] {
-    background-color: var(--background-paper, #fff);
-    color: var(--text-primary, rgba(0, 0, 0, 0.87));
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/molecules/tabs/components/TabsTrigger.tsx b/frontends/nextjs/src/components/ui/molecules/tabs/components/TabsTrigger.tsx
deleted file mode 100644
index 4313b7653..000000000
--- a/frontends/nextjs/src/components/ui/molecules/tabs/components/TabsTrigger.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-'use client'
-
-import type { ButtonHTMLAttributes,CSSProperties, MouseEvent } from 'react'
-import { forwardRef, useContext } from 'react'
-
-import { Box } from '@/fakemui'
-
-import { TabsContext } from '../core/tabs-context'
-import styles from './TabsTrigger.module.scss'
-
-export interface TabsTriggerProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'ref'> {
-  value: string
-  style?: CSSProperties
-}
-
-const TabsTrigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(
-  ({ children, value, onClick, disabled, style, className, ...props }, ref) => {
-    const context = useContext(TabsContext)
-
-    if (!context) {
-      throw new Error('TabsTrigger must be used within Tabs')
-    }
-
-    const isSelected = context.value === value
-
-    const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
-      if (disabled) return
-      onClick?.(event)
-      if (!event.defaultPrevented) {
-        context.setValue(value)
-      }
-    }
-
-    return (
-      <Box
-        ref={ref as React.Ref<HTMLElement>}
-        component="button"
-        type="button"
-        role="tab"
-        id={`${context.idPrefix}-tab-${value}`}
-        aria-controls={`${context.idPrefix}-panel-${value}`}
-        aria-selected={isSelected}
-        tabIndex={isSelected ? 0 : -1}
-        disabled={disabled}
-        data-state={isSelected ? 'active' : 'inactive'}
-        data-value={value}
-        onClick={handleClick}
-        className={`${styles.tabsTrigger} ${className ?? ''}`}
-        style={style}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-
-TabsTrigger.displayName = 'TabsTrigger'
-
-export { TabsTrigger }
diff --git a/frontends/nextjs/src/components/ui/molecules/tabs/core/Tabs.test.tsx b/frontends/nextjs/src/components/ui/molecules/tabs/core/Tabs.test.tsx
deleted file mode 100644
index ae039fdc9..000000000
--- a/frontends/nextjs/src/components/ui/molecules/tabs/core/Tabs.test.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it } from 'vitest'
-
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui'
-
-describe('Tabs', () => {
-  it('switches active tab and hides inactive panels', () => {
-    render(
-      <Tabs defaultValue="alpha">
-        <TabsList>
-          <TabsTrigger value="alpha">Alpha</TabsTrigger>
-          <TabsTrigger value="beta">Beta</TabsTrigger>
-        </TabsList>
-        <TabsContent value="alpha">Alpha content</TabsContent>
-        <TabsContent value="beta">Beta content</TabsContent>
-      </Tabs>
-    )
-
-    const alphaPanel = screen.getByText('Alpha content').closest('[role="tabpanel"]')
-    const betaPanel = screen.getByText('Beta content').closest('[role="tabpanel"]')
-
-    expect(alphaPanel?.hasAttribute('hidden')).toBe(false)
-    expect(betaPanel?.hasAttribute('hidden')).toBe(true)
-
-    const betaTab = screen.getByRole('tab', { name: 'Beta' })
-    fireEvent.click(betaTab)
-
-    expect(alphaPanel?.hasAttribute('hidden')).toBe(true)
-    expect(betaPanel?.hasAttribute('hidden')).toBe(false)
-
-    const alphaTab = screen.getByRole('tab', { name: 'Alpha' })
-    expect(alphaTab.getAttribute('aria-selected')).toBe('false')
-    expect(betaTab.getAttribute('aria-selected')).toBe('true')
-  })
-})
diff --git a/frontends/nextjs/src/components/ui/molecules/tabs/core/Tabs.tsx b/frontends/nextjs/src/components/ui/molecules/tabs/core/Tabs.tsx
deleted file mode 100644
index 78824688d..000000000
--- a/frontends/nextjs/src/components/ui/molecules/tabs/core/Tabs.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-'use client'
-
-import { forwardRef, useId, useState } from 'react'
-
-import type { BoxProps } from '@/fakemui'
-import { Box } from '@/fakemui'
-
-import { TabsContext } from './tabs-context'
-
-export interface TabsProps extends Omit<BoxProps, 'ref'> {
-  defaultValue?: string
-  value?: string
-  onValueChange?: (value: string) => void
-}
-
-const Tabs = forwardRef<HTMLDivElement, TabsProps>(
-  ({ children, defaultValue, value, onValueChange, style, ...props }, ref) => {
-    const [internalValue, setInternalValue] = useState(defaultValue ?? '')
-    const currentValue = value ?? internalValue
-    const idPrefix = useId()
-
-    const handleValueChange = (nextValue: string) => {
-      if (value === undefined) {
-        setInternalValue(nextValue)
-      }
-      onValueChange?.(nextValue)
-    }
-
-    return (
-      <TabsContext.Provider value={{ value: currentValue, setValue: handleValueChange, idPrefix }}>
-        <Box
-          ref={ref as React.Ref<HTMLElement>}
-          style={{
-            display: 'flex',
-            flexDirection: 'column',
-            gap: '16px',
-            ...style,
-          }}
-          {...props}
-        >
-          {children}
-        </Box>
-      </TabsContext.Provider>
-    )
-  }
-)
-
-Tabs.displayName = 'Tabs'
-
-export { Tabs }
diff --git a/frontends/nextjs/src/components/ui/molecules/tabs/core/tabs-context.ts b/frontends/nextjs/src/components/ui/molecules/tabs/core/tabs-context.ts
deleted file mode 100644
index 485cfe907..000000000
--- a/frontends/nextjs/src/components/ui/molecules/tabs/core/tabs-context.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createContext } from 'react'
-
-export interface TabsContextValue {
-  value: string
-  setValue: (value: string) => void
-  idPrefix: string
-}
-
-export const TabsContext = createContext<TabsContextValue | null>(null)
diff --git a/frontends/nextjs/src/components/ui/navigation/button.ts b/frontends/nextjs/src/components/ui/navigation/button.ts
deleted file mode 100644
index 75386446e..000000000
--- a/frontends/nextjs/src/components/ui/navigation/button.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-// Re-export for backward compatibility
-export { Button, type ButtonProps, type ButtonSize, type ButtonVariant } from './atoms/Button'
diff --git a/frontends/nextjs/src/components/ui/navigation/dropdown-menu.ts b/frontends/nextjs/src/components/ui/navigation/dropdown-menu.ts
deleted file mode 100644
index a5f123ada..000000000
--- a/frontends/nextjs/src/components/ui/navigation/dropdown-menu.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-// Re-export for backward compatibility
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-  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
deleted file mode 100644
index 4d27b5beb..000000000
--- a/frontends/nextjs/src/components/ui/navigation/molecules/DropdownMenu/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} 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/Form.ts b/frontends/nextjs/src/components/ui/organisms/Form.ts
deleted file mode 100644
index c428344c3..000000000
--- a/frontends/nextjs/src/components/ui/organisms/Form.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './data/Form'
diff --git a/frontends/nextjs/src/components/ui/organisms/Table.ts b/frontends/nextjs/src/components/ui/organisms/Table.ts
deleted file mode 100644
index 1f6776340..000000000
--- a/frontends/nextjs/src/components/ui/organisms/Table.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './data/Table'
diff --git a/frontends/nextjs/src/components/ui/organisms/data/Form.module.scss b/frontends/nextjs/src/components/ui/organisms/data/Form.module.scss
deleted file mode 100644
index 3dfb45b1c..000000000
--- a/frontends/nextjs/src/components/ui/organisms/data/Form.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-/* Form organism styles */
-
-.formItem {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-
-.formLabel {
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
-
-  &.error {
-    color: var(--color-error-main, #d32f2f);
-  }
-}
-
-.formHelperText {
-  margin-top: 2px;
-  font-size: 0.75rem;
-
-  &.error {
-    color: var(--color-error-main, #d32f2f);
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/data/Form.tsx b/frontends/nextjs/src/components/ui/organisms/data/Form.tsx
deleted file mode 100644
index b4759b2ce..000000000
--- a/frontends/nextjs/src/components/ui/organisms/data/Form.tsx
+++ /dev/null
@@ -1,212 +0,0 @@
-// TODO: Split this file (209 LOC) into smaller organisms (<150 LOC each)
-'use client'
-
-import { createContext, forwardRef, ReactNode, useContext } from 'react'
-import {
-  Controller,
-  ControllerProps,
-  FieldPath,
-  FieldValues,
-  useFormContext,
-} from 'react-hook-form'
-
-import { Box, FormHelperText, FormLabel } from '@/fakemui'
-
-import styles from './Form.module.scss'
-
-// Form Context
-interface FormFieldContextValue {
-  name: string
-}
-
-const FormFieldContext = createContext<FormFieldContextValue | null>(null)
-
-interface FormItemContextValue {
-  id: string
-}
-
-const FormItemContext = createContext<FormItemContextValue | null>(null)
-
-// Custom hook to use form field
-const useFormField = () => {
-  const fieldContext = useContext(FormFieldContext)
-  const itemContext = useContext(FormItemContext)
-  const form = useFormContext()
-
-  if (!fieldContext) {
-    throw new Error('useFormField should be used within <FormField>')
-  }
-
-  const fieldState = form?.getFieldState(fieldContext.name, form.formState)
-
-  return {
-    id: itemContext?.id ?? fieldContext.name,
-    name: fieldContext.name,
-    formItemId: `${itemContext?.id ?? fieldContext.name}-form-item`,
-    formDescriptionId: `${itemContext?.id ?? fieldContext.name}-form-item-description`,
-    formMessageId: `${itemContext?.id ?? fieldContext.name}-form-item-message`,
-    ...fieldState,
-  }
-}
-
-// Form component - wraps react-hook-form
-const Form = forwardRef<HTMLFormElement, React.FormHTMLAttributes<HTMLFormElement>>(
-  ({ children, ...props }, ref) => {
-    return (
-      <form ref={ref} {...props}>
-        {children}
-      </form>
-    )
-  }
-)
-Form.displayName = 'Form'
-
-// FormField component
-interface FormFieldProps<
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
-> extends Omit<ControllerProps<TFieldValues, TName>, 'render'> {
-  render: ControllerProps<TFieldValues, TName>['render']
-}
-
-const FormField = <
-  TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
->({
-  name,
-  ...props
-}: FormFieldProps<TFieldValues, TName>) => {
-  return (
-    <FormFieldContext.Provider value={{ name }}>
-      <Controller name={name} {...props} />
-    </FormFieldContext.Provider>
-  )
-}
-FormField.displayName = 'FormField'
-
-// FormItem component
-interface FormItemProps {
-  children: ReactNode
-  className?: string
-}
-
-const FormItem = forwardRef<HTMLDivElement, FormItemProps>(
-  ({ children, className = '', ...props }, ref) => {
-    const id = `form-item-${Math.random().toString(36).substr(2, 9)}`
-
-    return (
-      <FormItemContext.Provider value={{ id }}>
-        <Box ref={ref} className={`${styles.formItem} ${className}`} {...props}>
-          {children}
-        </Box>
-      </FormItemContext.Provider>
-    )
-  }
-)
-FormItem.displayName = 'FormItem'
-
-// FormLabel component
-interface FormLabelProps {
-  children: ReactNode
-  className?: string
-}
-
-const FormLabelComponent = forwardRef<HTMLLabelElement, FormLabelProps>(
-  ({ children, className = '', ...props }, ref) => {
-    const { error, formItemId } = useFormField()
-
-    return (
-      <FormLabel
-        ref={ref}
-        htmlFor={formItemId}
-        className={`${styles.formLabel} ${error ? styles.error : ''} ${className}`}
-        {...props}
-      >
-        {children}
-      </FormLabel>
-    )
-  }
-)
-FormLabelComponent.displayName = 'FormLabel'
-
-// FormControl wrapper
-interface FormControlProps {
-  children: ReactNode
-  className?: string
-}
-
-const FormControlComponent = forwardRef<HTMLDivElement, FormControlProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <Box ref={ref} className={className} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-FormControlComponent.displayName = 'FormControl'
-
-// FormDescription component
-interface FormDescriptionProps {
-  children: ReactNode
-  className?: string
-}
-
-const FormDescription = forwardRef<HTMLParagraphElement, FormDescriptionProps>(
-  ({ children, className = '', ...props }, ref) => {
-    const { formDescriptionId } = useFormField()
-
-    return (
-      <FormHelperText
-        ref={ref}
-        id={formDescriptionId}
-        className={`${styles.formHelperText} ${className}`}
-        {...props}
-      >
-        {children}
-      </FormHelperText>
-    )
-  }
-)
-FormDescription.displayName = 'FormDescription'
-
-// FormMessage component
-interface FormMessageProps {
-  children?: ReactNode
-  className?: string
-}
-
-const FormMessage = forwardRef<HTMLParagraphElement, FormMessageProps>(
-  ({ children, className = '', ...props }, ref) => {
-    const { error, formMessageId } = useFormField()
-    const body = error ? String(error?.message) : children
-
-    if (!body) {
-      return null
-    }
-
-    return (
-      <FormHelperText
-        ref={ref}
-        id={formMessageId}
-        error={!!error}
-        className={`${styles.formHelperText} ${error ? styles.error : ''} ${className}`}
-        {...props}
-      >
-        {body}
-      </FormHelperText>
-    )
-  }
-)
-FormMessage.displayName = 'FormMessage'
-
-export {
-  Form,
-  FormControlComponent as FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabelComponent as FormLabel,
-  FormMessage,
-  useFormField,
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/data/Table.module.scss b/frontends/nextjs/src/components/ui/organisms/data/Table.module.scss
deleted file mode 100644
index f493e6675..000000000
--- a/frontends/nextjs/src/components/ui/organisms/data/Table.module.scss
+++ /dev/null
@@ -1,53 +0,0 @@
-/* Table organism styles */
-
-.tableContainer {
-  border: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.tableHeader {
-  background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
-}
-
-.tableFooter {
-  background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
-}
-
-.tableRow {
-  &:last-child td,
-  &:last-child th {
-    border-bottom: 0;
-  }
-
-  &:hover {
-    background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
-  }
-}
-
-.tableHeadCell {
-  font-weight: 600;
-  font-size: 0.75rem;
-  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-
-  &.clickable {
-    cursor: pointer;
-
-    &:hover {
-      background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
-    }
-  }
-}
-
-.tableCell {
-  font-size: 0.875rem;
-}
-
-.tableCaption {
-  caption-side: bottom;
-  padding: 16px;
-  color: inherit;
-  font-size: 0.875rem;
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/data/Table.tsx b/frontends/nextjs/src/components/ui/organisms/data/Table.tsx
deleted file mode 100644
index 3209ab41f..000000000
--- a/frontends/nextjs/src/components/ui/organisms/data/Table.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-// TODO: Split this file (173 LOC) into smaller organisms (<150 LOC each)
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import {
-  Table as FakeMuiTable,
-  TableBody as FakeMuiTableBody,
-  TableCell as FakeMuiTableCell,
-  TableContainer as FakeMuiTableContainer,
-  TableFooter as FakeMuiTableFooter,
-  TableHead as FakeMuiTableHead,
-  TableRow as FakeMuiTableRow,
-} from '@/fakemui'
-
-import styles from './Table.module.scss'
-
-interface TableProps {
-  children: ReactNode
-  className?: string
-}
-
-const Table = forwardRef<HTMLTableElement, TableProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <FakeMuiTableContainer className={`${styles.tableContainer} ${className}`}>
-        <FakeMuiTable ref={ref} size="small" {...props}>
-          {children}
-        </FakeMuiTable>
-      </FakeMuiTableContainer>
-    )
-  }
-)
-Table.displayName = 'Table'
-
-interface TableHeaderProps {
-  children: ReactNode
-  className?: string
-}
-
-const TableHeader = forwardRef<HTMLTableSectionElement, TableHeaderProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <FakeMuiTableHead ref={ref} className={`${styles.tableHeader} ${className}`} {...props}>
-        {children}
-      </FakeMuiTableHead>
-    )
-  }
-)
-TableHeader.displayName = 'TableHeader'
-
-interface TableBodyProps {
-  children: ReactNode
-  className?: string
-}
-
-const TableBody = forwardRef<HTMLTableSectionElement, TableBodyProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <FakeMuiTableBody ref={ref} className={className} {...props}>
-        {children}
-      </FakeMuiTableBody>
-    )
-  }
-)
-TableBody.displayName = 'TableBody'
-
-interface TableFooterProps {
-  children: ReactNode
-  className?: string
-}
-
-const TableFooter = forwardRef<HTMLTableSectionElement, TableFooterProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <FakeMuiTableFooter ref={ref} className={`${styles.tableFooter} ${className}`} {...props}>
-        {children}
-      </FakeMuiTableFooter>
-    )
-  }
-)
-TableFooter.displayName = 'TableFooter'
-
-interface TableRowProps {
-  children: ReactNode
-  className?: string
-}
-
-const TableRow = forwardRef<HTMLTableRowElement, TableRowProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <FakeMuiTableRow ref={ref} hover className={`${styles.tableRow} ${className}`} {...props}>
-        {children}
-      </FakeMuiTableRow>
-    )
-  }
-)
-TableRow.displayName = 'TableRow'
-
-interface TableHeadProps {
-  children: ReactNode
-  className?: string
-  onClick?: () => void
-}
-
-const TableHead = forwardRef<HTMLTableCellElement, TableHeadProps>(
-  ({ children, onClick, className = '', ...props }, ref) => {
-    return (
-      <FakeMuiTableCell
-        ref={ref}
-        header
-        onClick={onClick}
-        className={`${styles.tableHeadCell} ${onClick ? styles.clickable : ''} ${className}`}
-        {...props}
-      >
-        {children}
-      </FakeMuiTableCell>
-    )
-  }
-)
-TableHead.displayName = 'TableHead'
-
-interface TableCellProps {
-  children?: ReactNode
-  className?: string
-  colSpan?: number
-}
-
-const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <FakeMuiTableCell ref={ref} className={`${styles.tableCell} ${className}`} {...props}>
-        {children}
-      </FakeMuiTableCell>
-    )
-  }
-)
-TableCell.displayName = 'TableCell'
-
-interface TableCaptionProps {
-  children: ReactNode
-  className?: string
-}
-
-const TableCaption = forwardRef<HTMLTableCaptionElement, TableCaptionProps>(
-  ({ children, className = '', ...props }, ref) => {
-    return (
-      <caption ref={ref} className={`${styles.tableCaption} ${className}`} {...props}>
-        {children}
-      </caption>
-    )
-  }
-)
-TableCaption.displayName = 'TableCaption'
-
-export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow }
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/AlertDialog.module.scss b/frontends/nextjs/src/components/ui/organisms/dialogs/AlertDialog.module.scss
deleted file mode 100644
index 83d160f04..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/AlertDialog.module.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-// AlertDialog.module.scss
-// Styles for AlertDialog components
-
-.trigger {
-  cursor: pointer;
-  display: inline-flex;
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/AlertDialog.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/AlertDialog.tsx
deleted file mode 100644
index a3cf8279b..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/AlertDialog.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Dialog, DialogPanel } from '@/fakemui/fakemui/utils'
-
-import { AlertDialogAction, AlertDialogCancel, AlertDialogFooter } from './alert/Actions'
-import {
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from './alert/Content'
-import styles from './AlertDialog.module.scss'
-
-interface AlertDialogProps {
-  open: boolean
-  onClose?: () => void
-  onOpenChange?: (open: boolean) => void
-  children: ReactNode
-  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  fullWidth?: boolean
-}
-
-const AlertDialog = forwardRef<HTMLDivElement, AlertDialogProps>(
-  ({ open, onClose, onOpenChange, children, maxWidth = 'sm', fullWidth = true, ...props }, ref) => {
-    const handleClose = () => {
-      onClose?.()
-      onOpenChange?.(false)
-    }
-    return (
-      <Dialog
-        open={open}
-        onClose={handleClose}
-        aria-labelledby="alert-dialog-title"
-        aria-describedby="alert-dialog-description"
-        {...props}
-      >
-        <DialogPanel
-          ref={ref}
-          sm={maxWidth === 'sm' || maxWidth === 'xs'}
-          lg={maxWidth === 'lg'}
-          xl={maxWidth === 'xl'}
-        >
-          {children}
-        </DialogPanel>
-      </Dialog>
-    )
-  }
-)
-AlertDialog.displayName = 'AlertDialog'
-
-interface AlertDialogTriggerProps {
-  children: ReactNode
-  onClick?: () => void
-  asChild?: boolean
-}
-
-const AlertDialogTrigger = forwardRef<HTMLSpanElement, AlertDialogTriggerProps>(
-  ({ children, onClick, asChild, ...props }, ref) => {
-    return (
-      <span ref={ref} onClick={onClick} className={styles.trigger} {...props}>
-        {children}
-      </span>
-    )
-  }
-)
-AlertDialogTrigger.displayName = 'AlertDialogTrigger'
-
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  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
deleted file mode 100644
index a812c86f2..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Command.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-'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/CommandDialogShell.module.scss b/frontends/nextjs/src/components/ui/organisms/dialogs/Command/CommandDialogShell.module.scss
deleted file mode 100644
index 5c94ff3fb..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Command/CommandDialogShell.module.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-// CommandDialogShell.module.scss
-// Styles for Command dialog components
-
-.dialogPaper {
-  position: fixed;
-  top: 20%;
-  margin: 0;
-  border-radius: var(--radius-md, 0.5rem);
-  max-height: 60vh;
-  overflow: hidden;
-}
-
-.inputWrapper {
-  display: flex;
-  align-items: center;
-  padding: 0.75rem 1rem;
-  border-bottom: 1px solid var(--border-color, #e0e0e0);
-}
-
-.searchIcon {
-  color: var(--text-secondary, #666);
-  margin-right: 0.75rem;
-}
-
-.input {
-  flex: 1;
-  font-size: 0.875rem;
-
-  input {
-    padding: 0;
-  }
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Command/CommandList.module.scss b/frontends/nextjs/src/components/ui/organisms/dialogs/Command/CommandList.module.scss
deleted file mode 100644
index f777db33f..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Command/CommandList.module.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-// CommandList.module.scss
-// Styles for Command list components
-
-.list {
-  max-height: 300px;
-  overflow: auto;
-  padding: 0.5rem 0;
-}
-
-.empty {
-  padding: 3rem 0;
-  text-align: center;
-  color: var(--text-secondary, #666);
-  font-size: 0.875rem;
-}
-
-.group {
-  padding: 0.25rem 0;
-}
-
-.groupHeading {
-  padding: 0.5rem 1rem;
-  display: block;
-  color: var(--text-secondary, #666);
-  font-weight: 600;
-  font-size: 0.75rem;
-}
-
-.itemButton {
-  margin: 0 0.5rem;
-  border-radius: 0.25rem;
-  padding: 0.75rem;
-
-  &.selected {
-    background-color: var(--action-selected, rgba(0, 0, 0, 0.08));
-  }
-}
-
-.itemIcon {
-  min-width: 32px;
-}
-
-.shortcutWrapper {
-  display: flex;
-  gap: 0.25rem;
-  margin-left: 1rem;
-}
-
-.kbd {
-  padding: 0.125rem 0.5rem;
-  font-size: 0.75rem;
-  font-family: monospace;
-  background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-  border-radius: 0.25rem;
-  border: 1px solid var(--border-color, #e0e0e0);
-  color: var(--text-secondary, #666);
-}
-
-.separator {
-  margin: 0.5rem 0;
-}
-
-.shortcut {
-  margin-left: auto;
-  font-size: 0.75rem;
-  letter-spacing: 0.05em;
-  color: var(--text-secondary, #666);
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Palette.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Palette.tsx
deleted file mode 100644
index d275cb4ab..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Palette.tsx
+++ /dev/null
@@ -1,38 +0,0 @@
-'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.module.scss b/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Results.module.scss
deleted file mode 100644
index cc9e90696..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Results.module.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-// Results.module.scss
-// Styles for Command results components
-
-.itemContent {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-}
-
-.itemLabel {
-  font-size: 0.875rem;
-}
-
-.itemDescription {
-  color: var(--text-secondary, #666);
-  font-size: 0.75rem;
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Results.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Results.tsx
deleted file mode 100644
index a24341ad1..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Command/Results.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-'use client'
-
-import { ReactNode } from 'react'
-
-import { Typography } from '@/fakemui/fakemui/data-display'
-import { Box } from '@/fakemui/fakemui/layout'
-
-import { CommandDialog } from '../command'
-import type { CommandGroup, CommandItem } from '../command/command.types'
-import styles from './Results.module.scss'
-
-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 className={styles.itemContent}>
-                  <Typography variant="body2" as="span" className={styles.itemLabel}>
-                    {item.label}
-                  </Typography>
-                  {item.description && (
-                    <Typography variant="caption" as="span" className={styles.itemDescription}>
-                      {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
deleted file mode 100644
index 5791cfdc8..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Command/useCommandState.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-'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
deleted file mode 100644
index cf4bdeba3..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-'use client'
-
-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.module.scss b/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Drawer.module.scss
deleted file mode 100644
index 948237c3c..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Drawer.module.scss
+++ /dev/null
@@ -1,37 +0,0 @@
-// Drawer.module.scss
-// Styles for Sheet/Drawer components
-
-.trigger {
-  cursor: pointer;
-  display: inline-flex;
-}
-
-.close {
-  cursor: pointer;
-  display: inline-flex;
-}
-
-.content {
-  display: flex;
-  flex-direction: column;
-  padding: var(--spacing-lg, 1.5rem);
-  background-color: var(--surface-background, #fff);
-  position: relative;
-
-  &.horizontal {
-    width: 320px;
-    height: 100%;
-  }
-
-  &.vertical {
-    width: 100%;
-    height: auto;
-    max-height: 80vh;
-  }
-}
-
-.closeButton {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Drawer.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Drawer.tsx
deleted file mode 100644
index 4bad97b65..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Drawer.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { IconButton } from '@/fakemui/fakemui/inputs'
-import { Box } from '@/fakemui/fakemui/layout'
-import { Drawer } from '@/fakemui/fakemui/surfaces'
-import { Close as CloseIcon } from '@/fakemui/icons'
-
-import styles from './Drawer.module.scss'
-
-interface SheetProps {
-  children: ReactNode
-  side?: 'left' | 'right' | 'top' | 'bottom'
-  open?: boolean
-  onClose?: () => void
-  onOpenChange?: (open: boolean) => void
-}
-
-const Sheet = forwardRef<HTMLDivElement, SheetProps>(
-  ({ children, side = 'right', open, onClose, onOpenChange, ...props }, ref) => {
-    const handleClose = () => {
-      onClose?.()
-      onOpenChange?.(false)
-    }
-    return (
-      <Drawer 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 component="span" onClick={onClick} className={styles.trigger} {...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, className, ...props }, ref) => {
-    const isHorizontal = side === 'left' || side === 'right'
-
-    return (
-      <Box
-        ref={ref}
-        className={`${styles.content} ${isHorizontal ? styles.horizontal : styles.vertical} ${className || ''}`}
-        {...props}
-      >
-        {showCloseButton && (
-          <IconButton
-            onClick={onClose}
-            className={styles.closeButton}
-            sm
-          >
-            <CloseIcon />
-          </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 component="span" onClick={onClick} className={styles.close} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-SheetClose.displayName = 'SheetClose'
-
-export { Sheet, SheetClose, SheetContent, SheetTrigger }
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Header.module.scss b/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Header.module.scss
deleted file mode 100644
index 7ffe7b761..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Header.module.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-// Header.module.scss
-// Styles for Sheet header components
-
-.header {
-  display: flex;
-  flex-direction: column;
-  gap: 0.25rem;
-  padding-bottom: var(--spacing-md, 1rem);
-  text-align: left;
-}
-
-.footer {
-  display: flex;
-  flex-direction: column-reverse;
-  gap: 0.5rem;
-  padding-top: var(--spacing-md, 1rem);
-  margin-top: auto;
-
-  @media (min-width: 600px) {
-    flex-direction: row;
-    justify-content: flex-end;
-  }
-}
-
-.title {
-  font-weight: 600;
-  line-height: 1.2;
-  font-size: var(--font-size-lg, 1.25rem);
-  margin: 0;
-}
-
-.description {
-  color: var(--text-secondary, #666);
-  font-size: var(--font-size-sm, 0.875rem);
-  margin: 0;
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Header.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Header.tsx
deleted file mode 100644
index 20c956060..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/Sheet/Header.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Typography } from '@/fakemui/fakemui/data-display'
-import { Box } from '@/fakemui/fakemui/layout'
-
-import styles from './Header.module.scss'
-
-interface SheetHeaderProps {
-  children: ReactNode
-  className?: string
-}
-
-const SheetHeader = forwardRef<HTMLDivElement, SheetHeaderProps>(({ children, className, ...props }, ref) => {
-  return (
-    <Box
-      ref={ref}
-      className={`${styles.header} ${className || ''}`}
-      {...props}
-    >
-      {children}
-    </Box>
-  )
-})
-SheetHeader.displayName = 'SheetHeader'
-
-interface SheetFooterProps {
-  children: ReactNode
-  className?: string
-}
-
-const SheetFooter = forwardRef<HTMLDivElement, SheetFooterProps>(({ children, className, ...props }, ref) => {
-  return (
-    <Box
-      ref={ref}
-      className={`${styles.footer} ${className || ''}`}
-      {...props}
-    >
-      {children}
-    </Box>
-  )
-})
-SheetFooter.displayName = 'SheetFooter'
-
-interface SheetTitleProps {
-  children: ReactNode
-  className?: string
-}
-
-const SheetTitle = forwardRef<HTMLHeadingElement, SheetTitleProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Typography
-        variant="h6"
-        as="h2"
-        className={`${styles.title} ${className || ''}`}
-        {...props}
-      >
-        {children}
-      </Typography>
-    )
-  }
-)
-SheetTitle.displayName = 'SheetTitle'
-
-interface SheetDescriptionProps {
-  children: ReactNode
-  className?: string
-}
-
-const SheetDescription = forwardRef<HTMLParagraphElement, SheetDescriptionProps>(
-  ({ children, className, ...props }, ref) => {
-    return (
-      <Typography variant="body2" className={`${styles.description} ${className || ''}`} {...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
deleted file mode 100644
index bd0562873..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/alert/Actions.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Button, DialogActions } from '@/fakemui'
-
-interface AlertDialogFooterProps {
-  children: ReactNode
-}
-
-const AlertDialogFooter = forwardRef<HTMLDivElement, AlertDialogFooterProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <DialogActions ref={ref} className="alert-dialog-footer" {...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} variant="ghost" className={className} {...props}>
-        {children}
-      </Button>
-    )
-  }
-)
-AlertDialogCancel.displayName = 'AlertDialogCancel'
-
-interface AlertDialogActionProps {
-  children?: ReactNode
-  onClick?: () => void
-  color?: 'primary' | 'error' | 'warning' | 'success' | 'info'
-  variant?: 'text' | 'outline' | 'primary'
-  autoFocus?: boolean
-  className?: string
-}
-
-const AlertDialogAction = forwardRef<HTMLButtonElement, AlertDialogActionProps>(
-  (
-    {
-      children = 'Confirm',
-      onClick,
-      color = 'primary',
-      variant = 'primary',
-      autoFocus = true,
-      className,
-      ...props
-    },
-    ref
-  ) => {
-    const buttonVariant = color === 'error' ? 'danger' : variant
-    return (
-      <Button
-        ref={ref}
-        onClick={onClick}
-        variant={buttonVariant}
-        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
deleted file mode 100644
index 65ee3a597..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/alert/Content.tsx
+++ /dev/null
@@ -1,122 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { DialogContent, DialogTitle, IconButton, Typography } from '@/fakemui'
-import {
-  CheckCircleOutline as CheckCircleOutlineIcon,
-  Close as CloseIcon,
-  ErrorOutline as ErrorOutlineIcon,
-  InfoOutlined as InfoOutlinedIcon,
-  WarningAmber as WarningAmberIcon,
-} from '@/fakemui/icons'
-
-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}
-          className="alert-dialog-close"
-          aria-label="Close"
-        >
-          <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 size={40} style={{ color: '#ed6c02' }} />,
-        error: <ErrorOutlineIcon size={40} style={{ color: '#d32f2f' }} />,
-        info: <InfoOutlinedIcon size={40} style={{ color: '#0288d1' }} />,
-        success: <CheckCircleOutlineIcon size={40} style={{ color: '#2e7d32' }} />,
-      }
-      return iconMap[icon]
-    }
-
-    const iconElement = getIcon()
-
-    return (
-      <DialogTitle
-        ref={ref}
-        id="alert-dialog-title"
-        className={`alert-dialog-header ${iconElement ? 'alert-dialog-header--with-icon' : ''}`}
-        {...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"
-        as="span"
-        className={`alert-dialog-title ${className || ''}`}
-        {...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} {...props}>
-        <Typography variant="body2" id="alert-dialog-description">
-          {children}
-        </Typography>
-      </DialogContent>
-    )
-  }
-)
-AlertDialogDescription.displayName = 'AlertDialogDescription'
-
-export { AlertDialogContent, AlertDialogDescription, AlertDialogHeader, AlertDialogTitle }
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/command/CommandDialogShell.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/command/CommandDialogShell.tsx
deleted file mode 100644
index 77c81bcc6..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/command/CommandDialogShell.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { InputBase } from '@/fakemui/fakemui/inputs'
-import { Box } from '@/fakemui/fakemui/layout'
-import { Dialog, DialogPanel } from '@/fakemui/fakemui/utils'
-import { Search as SearchIcon } from '@/fakemui/icons'
-
-import type { CommandDialogProps, CommandInputProps } from './command.types'
-import styles from './CommandDialogShell.module.scss'
-
-const CommandDialogRoot = forwardRef<HTMLDivElement, CommandDialogProps>(
-  ({ open, onClose, children, ...props }, ref) => {
-    return (
-      <Dialog
-        open={open}
-        onClose={onClose}
-        className={styles.dialog}
-        {...props}
-      >
-        <DialogPanel ref={ref} sm className={styles.dialogPaper}>
-          {children}
-        </DialogPanel>
-      </Dialog>
-    )
-  }
-)
-CommandDialogRoot.displayName = 'CommandDialogRoot'
-
-const CommandInput = forwardRef<HTMLInputElement, CommandInputProps>(
-  (
-    { placeholder = 'Type a command or search...', value, onChange, autoFocus = true, ...props },
-    ref
-  ) => {
-    return (
-      <Box className={styles.inputWrapper}>
-        <SearchIcon className={styles.searchIcon} />
-        <InputBase
-          inputRef={ref}
-          placeholder={placeholder}
-          value={value}
-          onChange={e => onChange?.(e.target.value)}
-          autoFocus={autoFocus}
-          fullWidth
-          className={styles.input}
-          {...props}
-        />
-      </Box>
-    )
-  }
-)
-CommandInput.displayName = 'CommandInput'
-
-export { CommandDialogRoot, CommandInput }
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/command/CommandList.tsx b/frontends/nextjs/src/components/ui/organisms/dialogs/command/CommandList.tsx
deleted file mode 100644
index 69faab7d6..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/command/CommandList.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Divider, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography } from '@/fakemui/fakemui/data-display'
-import { Box } from '@/fakemui/fakemui/layout'
-
-import type {
-  CommandEmptyProps,
-  CommandGroupProps,
-  CommandItemProps,
-  CommandListProps,
-  CommandShortcutProps,
-} from './command.types'
-import styles from './CommandList.module.scss'
-
-const CommandList = forwardRef<HTMLDivElement, CommandListProps>(({ children, ...props }, ref) => {
-  return (
-    <Box ref={ref} className={styles.list} {...props}>
-      {children}
-    </Box>
-  )
-})
-CommandList.displayName = 'CommandList'
-
-const CommandEmpty = forwardRef<HTMLDivElement, CommandEmptyProps>(
-  ({ children = 'No results found.', ...props }, ref) => {
-    return (
-      <Box ref={ref} className={styles.empty} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-CommandEmpty.displayName = 'CommandEmpty'
-
-const CommandGroup = forwardRef<HTMLDivElement, CommandGroupProps>(
-  ({ heading, children, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={styles.group} {...props}>
-        {heading && (
-          <Typography
-            variant="caption"
-            className={styles.groupHeading}
-          >
-            {heading}
-          </Typography>
-        )}
-        <List dense>
-          {children}
-        </List>
-      </Box>
-    )
-  }
-)
-CommandGroup.displayName = 'CommandGroup'
-
-const CommandItem = forwardRef<HTMLLIElement, CommandItemProps>(
-  ({ children, icon, shortcut, onSelect, disabled = false, selected = false, ...props }, ref) => {
-    return (
-      <ListItem ref={ref} borderless {...props}>
-        <ListItemButton
-          onClick={onSelect}
-          disabled={disabled}
-          selected={selected}
-          className={`${styles.itemButton} ${selected ? styles.selected : ''}`}
-        >
-          {icon && <ListItemIcon className={styles.itemIcon}>{icon}</ListItemIcon>}
-          <ListItemText primary={children} />
-          {shortcut && shortcut.length > 0 && (
-            <Box className={styles.shortcutWrapper}>
-              {shortcut.map((key, index) => (
-                <kbd key={index} className={styles.kbd}>
-                  {key}
-                </kbd>
-              ))}
-            </Box>
-          )}
-        </ListItemButton>
-      </ListItem>
-    )
-  }
-)
-CommandItem.displayName = 'CommandItem'
-
-const CommandSeparator = forwardRef<HTMLHRElement, Record<string, never>>((props, ref) => {
-  return <Divider ref={ref} className={styles.separator} {...props} />
-})
-CommandSeparator.displayName = 'CommandSeparator'
-
-const CommandShortcut = forwardRef<HTMLSpanElement, CommandShortcutProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        component="span"
-        className={styles.shortcut}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-CommandShortcut.displayName = 'CommandShortcut'
-
-export { CommandEmpty, CommandGroup, CommandItem, CommandList, CommandSeparator, CommandShortcut }
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/command/command.types.ts b/frontends/nextjs/src/components/ui/organisms/dialogs/command/command.types.ts
deleted file mode 100644
index e23e6da79..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/command/command.types.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import { ReactNode } from 'react'
-
-interface CommandItem {
-  id: string
-  label: string
-  description?: string
-  icon?: ReactNode
-  shortcut?: string[]
-  onSelect?: () => void
-  disabled?: boolean
-  keywords?: string[]
-}
-
-interface CommandGroup {
-  heading?: string
-  items: CommandItem[]
-}
-
-interface CommandDialogProps {
-  open: boolean
-  onClose: () => void
-  children: ReactNode
-}
-
-interface CommandInputProps {
-  placeholder?: string
-  value?: string
-  onChange?: (value: string) => void
-  autoFocus?: boolean
-}
-
-interface CommandListProps {
-  children: ReactNode
-}
-
-interface CommandEmptyProps {
-  children?: ReactNode
-}
-
-interface CommandGroupProps {
-  heading?: string
-  children: ReactNode
-}
-
-interface CommandItemProps {
-  children?: ReactNode
-  icon?: ReactNode
-  shortcut?: string[]
-  onSelect?: () => void
-  disabled?: boolean
-  selected?: boolean
-}
-
-interface CommandShortcutProps {
-  children: ReactNode
-}
-
-export type {
-  CommandDialogProps,
-  CommandEmptyProps,
-  CommandGroup,
-  CommandGroupProps,
-  CommandInputProps,
-  CommandItem,
-  CommandItemProps,
-  CommandListProps,
-  CommandShortcutProps,
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/command/index.ts b/frontends/nextjs/src/components/ui/organisms/dialogs/command/index.ts
deleted file mode 100644
index 1e13a9112..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/command/index.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-'use client'
-
-import type {
-  CommandDialogProps,
-  CommandEmptyProps,
-  CommandGroup as CommandGroupType,
-  CommandGroupProps,
-  CommandInputProps,
-  CommandItem as CommandItemType,
-  CommandItemProps,
-  CommandListProps,
-  CommandShortcutProps,
-} from './command.types'
-import { CommandDialogRoot, CommandInput } from './CommandDialogShell'
-import {
-  CommandEmpty,
-  CommandGroup,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-} from './CommandList'
-import { useCommandShortcut } from './useCommandShortcuts'
-
-const CommandDialog = Object.assign(CommandDialogRoot, {
-  Input: CommandInput,
-  List: CommandList,
-  Empty: CommandEmpty,
-  Group: CommandGroup,
-  Item: CommandItem,
-  Separator: CommandSeparator,
-  Shortcut: CommandShortcut,
-})
-
-export {
-  CommandDialog,
-  CommandDialogRoot,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-  useCommandShortcut,
-}
-
-export type {
-  CommandDialogProps,
-  CommandEmptyProps,
-  CommandGroupProps,
-  CommandGroupType,
-  CommandInputProps,
-  CommandItemProps,
-  CommandItemType,
-  CommandListProps,
-  CommandShortcutProps,
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/dialogs/command/useCommandShortcuts.ts b/frontends/nextjs/src/components/ui/organisms/dialogs/command/useCommandShortcuts.ts
deleted file mode 100644
index 15aa98cb4..000000000
--- a/frontends/nextjs/src/components/ui/organisms/dialogs/command/useCommandShortcuts.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-'use client'
-
-import { useEffect } from 'react'
-
-const useCommandShortcut = (key: string, callback: () => void) => {
-  useEffect(() => {
-    const handleKeyDown = (event: globalThis.KeyboardEvent) => {
-      if ((event.metaKey || event.ctrlKey) && event.key === key) {
-        event.preventDefault()
-        callback()
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    return () => document.removeEventListener('keydown', handleKeyDown)
-  }, [key, callback])
-}
-
-export { useCommandShortcut }
diff --git a/frontends/nextjs/src/components/ui/organisms/index.ts b/frontends/nextjs/src/components/ui/organisms/index.ts
deleted file mode 100644
index 91801a5ad..000000000
--- a/frontends/nextjs/src/components/ui/organisms/index.ts
+++ /dev/null
@@ -1,107 +0,0 @@
-// Organisms - Complex UI components composed of molecules and atoms
-// These are distinct sections of the UI with specific functionality
-
-// Table
-export {
-  Table,
-  TableBody,
-  TableCaption,
-  TableCell,
-  TableFooter,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from './data/Table'
-
-// Form
-export {
-  Form,
-  FormControl,
-  FormDescription,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormMessage,
-  useFormField,
-} from './data/Form'
-
-// Sheet (Drawer)
-export {
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from './dialogs/Sheet'
-
-// Sidebar
-export type { SidebarItem, SidebarProps } from './navigation/Sidebar'
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarNav,
-  SidebarSection,
-  SidebarSeparator,
-  SidebarToggle,
-} from './navigation/Sidebar'
-
-// Command Palette
-export {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-  CommandShortcut,
-  useCommandShortcut,
-} from './dialogs/Command'
-
-// Pagination
-export {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-  SimplePagination,
-  TablePagination,
-} from './navigation/pagination'
-
-// Navigation
-export {
-  Navigation,
-  NavigationBrand,
-  NavigationContent,
-  NavigationItem,
-  NavigationLink,
-  NavigationList,
-  NavigationMenu,
-  NavigationMobileToggle,
-  NavigationSeparator,
-  NavigationSpacer,
-  NavigationTrigger,
-} from './navigation/Navigation'
-export type { NavigationItemType } from './navigation/utils/navigationConfig'
-export { useNavigationDropdown } from './navigation/utils/navigationHelpers'
-
-// Alert Dialog
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from './dialogs/AlertDialog'
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/MenuItemList.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/MenuItemList.tsx
deleted file mode 100644
index 1f25839b9..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/MenuItemList.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode, useState } from 'react'
-
-import { Box, Collapse, List, ListItem, ListItemButton, ListItemIcon, ListItemText } from '@/fakemui'
-import { ExpandLess, ExpandMore } from '@/fakemui/icons'
-
-import styles from './Navigation.module.scss'
-
-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 className={styles.menuItem}>
-            <ListItemButton
-              onClick={() => {
-                if (hasChildren) {
-                  toggleItem(item.label)
-                } else if (item.onClick) {
-                  item.onClick()
-                }
-              }}
-              disabled={item.disabled}
-              className={`${styles.menuItemButton} ${dense ? styles.dense : ''}`}
-              style={{ paddingLeft: `${16 + depth * 16}px` }}
-            >
-              {item.icon && <ListItemIcon className={styles.menuItemIcon}>{item.icon}</ListItemIcon>}
-              <ListItemText
-                primary={item.label}
-                className={`${styles.menuItemText} ${depth > 0 ? styles.nested : ''}`}
-              />
-              {item.badge && <span className={styles.menuItemBadge}>{item.badge}</span>}
-              {hasChildren && (
-                <span className={styles.expandIcon}>
-                  {isOpen ? <ExpandLess /> : <ExpandMore />}
-                </span>
-              )}
-            </ListItemButton>
-          </ListItem>
-          {hasChildren && (
-            <Collapse in={isOpen}>
-              <List dense={dense} className={styles.nestedList}>
-                {item.children!.map(child => renderItem(child, depth + 1))}
-              </List>
-            </Collapse>
-          )}
-        </Box>
-      )
-    }
-
-    return (
-      <List ref={ref} dense={dense} className={`${styles.menuList} ${dense ? styles.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/Navigation.module.scss b/frontends/nextjs/src/components/ui/organisms/navigation/Navigation.module.scss
deleted file mode 100644
index 40e545bd0..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/Navigation.module.scss
+++ /dev/null
@@ -1,233 +0,0 @@
-// Navigation Component Styles
-// Migrated from MUI sx props to CSS modules
-
-// AppBar styles
-.appBar {
-  background-color: var(--color-background-paper, #fff);
-  border-bottom: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
-  position: sticky;
-  top: 0;
-  z-index: 1100;
-}
-
-.toolbar {
-  display: flex;
-  align-items: center;
-  min-height: 64px;
-  padding: 0 16px;
-}
-
-// Navigation Menu
-.navMenu {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-}
-
-.navList {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.navItem {
-  position: relative;
-}
-
-.navTrigger {
-  text-transform: none;
-  font-weight: 500;
-  color: var(--color-text-primary, rgba(0, 0, 0, 0.87));
-  
-  &:hover {
-    background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
-  }
-}
-
-// Navigation Content (Menu dropdown)
-.navContent {
-  margin-top: 8px;
-  min-width: 200px;
-}
-
-// Navigation Link/MenuItem
-.navLink {
-  border-radius: 4px;
-  
-  &.active {
-    background-color: var(--color-action-selected, rgba(0, 0, 0, 0.08));
-  }
-}
-
-.linkIcon {
-  min-width: 36px;
-  display: flex;
-  align-items: center;
-}
-
-// Navigation Styling
-.brand {
-  display: flex;
-  align-items: center;
-  margin-right: 16px;
-  cursor: default;
-  
-  &.clickable {
-    cursor: pointer;
-  }
-}
-
-.separator {
-  margin: 0 8px;
-  height: 24px;
-  align-self: center;
-}
-
-.spacer {
-  flex-grow: 1;
-}
-
-// Mobile Toggle
-.mobileToggle {
-  display: block;
-  margin-right: 16px;
-  
-  @media (min-width: 600px) {
-    display: none;
-  }
-}
-
-// Sidebar
-.sidebar {
-  width: var(--sidebar-width, 280px);
-  flex-shrink: 0;
-  
-  &[data-open="false"] {
-    width: 0;
-  }
-}
-
-.sidebarPaper {
-  width: var(--sidebar-width, 280px);
-  box-sizing: border-box;
-  background-color: var(--color-background-paper, #fff);
-  border-right: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
-}
-
-.sidebarContent {
-  flex: 1;
-  overflow: auto;
-  padding: 8px 0;
-}
-
-.sidebarFooter {
-  padding: 16px;
-  border-top: 1px solid var(--color-divider, rgba(0, 0, 0, 0.12));
-}
-
-// Sidebar Header
-.sidebarHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 16px;
-  min-height: 64px;
-}
-
-// Sidebar Section
-.sidebarSection {
-  padding: 8px 0;
-}
-
-.sectionTitle {
-  padding: 8px 16px;
-  display: block;
-  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-size: 0.75rem;
-}
-
-.sidebarSeparator {
-  margin: 8px 0;
-}
-
-// Menu Item List
-.menuList {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-  
-  &.dense {
-    .menuItemButton {
-      min-height: 40px;
-    }
-  }
-}
-
-.menuItem {
-  padding: 0;
-}
-
-.menuItemButton {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  padding: 8px 16px;
-  min-height: 48px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  text-align: left;
-  
-  &:hover {
-    background-color: var(--color-action-hover, rgba(0, 0, 0, 0.04));
-  }
-  
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-  
-  &.dense {
-    min-height: 40px;
-  }
-}
-
-.menuItemIcon {
-  min-width: 36px;
-  display: flex;
-  align-items: center;
-  color: var(--color-text-secondary, rgba(0, 0, 0, 0.6));
-}
-
-.menuItemText {
-  flex: 1;
-  
-  .primaryText {
-    display: block;
-    font-weight: 500;
-    
-    &.nested {
-      font-weight: 400;
-    }
-  }
-}
-
-.menuItemBadge {
-  margin-right: 8px;
-}
-
-.expandIcon {
-  margin-left: auto;
-}
-
-.nestedList {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/Navigation.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/Navigation.tsx
deleted file mode 100644
index b1bc0d2a1..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/Navigation.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode, useEffect, useState } from 'react'
-
-import { AppBar, Slide,Toolbar } from '@/fakemui'
-
-import styles from './Navigation.module.scss'
-import {
-  NavigationContent,
-  NavigationItem,
-  NavigationLink,
-  NavigationList,
-  NavigationMenu,
-  NavigationTrigger,
-} from './NavigationMenuItems'
-import { NavigationMobileToggle } from './NavigationResponsive'
-import { NavigationBrand, NavigationSeparator, NavigationSpacer } from './NavigationStyling'
-
-interface NavigationProps {
-  children: ReactNode
-  position?: 'fixed' | 'absolute' | 'sticky' | 'static' | 'relative'
-  color?: 'default' | 'inherit' | 'primary' | 'secondary' | 'transparent'
-  elevation?: number
-  hideOnScroll?: boolean
-}
-
-/**
- * Custom hook to detect scroll direction for hide-on-scroll behavior
- */
-const useScrollTrigger = (): boolean => {
-  const [trigger, setTrigger] = useState(false)
-
-  useEffect(() => {
-    let lastScrollY = window.scrollY
-    const threshold = 100
-
-    const handleScroll = () => {
-      const currentScrollY = window.scrollY
-      setTrigger(currentScrollY > threshold && currentScrollY > lastScrollY)
-      lastScrollY = currentScrollY
-    }
-
-    window.addEventListener('scroll', handleScroll, { passive: true })
-    return () => window.removeEventListener('scroll', handleScroll)
-  }, [])
-
-  return trigger
-}
-
-const Navigation = forwardRef<HTMLElement, NavigationProps>(
-  (
-    {
-      children,
-      position = 'sticky',
-      color = 'default',
-      elevation = 0,
-      hideOnScroll = false,
-      ...props
-    },
-    ref
-  ) => {
-    const trigger = useScrollTrigger()
-
-    const appBar = (
-      <AppBar
-        ref={ref}
-        position={position}
-        color={color}
-        className={styles.appBar}
-        {...props}
-      >
-        <Toolbar className={styles.toolbar}>{children}</Toolbar>
-      </AppBar>
-    )
-
-    if (hideOnScroll) {
-      return (
-        <Slide direction="down" in={!trigger}>
-          {appBar}
-        </Slide>
-      )
-    }
-
-    return appBar
-  }
-)
-Navigation.displayName = 'Navigation'
-
-export {
-  Navigation,
-  NavigationBrand,
-  NavigationContent,
-  NavigationItem,
-  NavigationLink,
-  NavigationList,
-  NavigationMenu,
-  NavigationMobileToggle,
-  NavigationSeparator,
-  NavigationSpacer,
-  NavigationTrigger,
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/NavigationMenuItems.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/NavigationMenuItems.tsx
deleted file mode 100644
index 2f71586d1..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/NavigationMenuItems.tsx
+++ /dev/null
@@ -1,170 +0,0 @@
-import { ElementType, forwardRef, type MouseEvent, ReactNode } from 'react'
-
-import { Box, Button, ListItemIcon, ListItemText,Menu, MenuItem } from '@/fakemui'
-import { ExpandMore as ExpandMoreIcon } from '@/fakemui/icons'
-
-import styles from './Navigation.module.scss'
-
-interface NavigationMenuProps {
-  children: ReactNode
-}
-
-const NavigationMenu = forwardRef<HTMLDivElement, NavigationMenuProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        component="nav"
-        className={styles.navMenu}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-NavigationMenu.displayName = 'NavigationMenu'
-
-interface NavigationListProps {
-  children: ReactNode
-}
-
-const NavigationList = forwardRef<HTMLUListElement, NavigationListProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        component="ul"
-        className={styles.navList}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-NavigationList.displayName = 'NavigationList'
-
-interface NavigationItemProps {
-  children: ReactNode
-}
-
-const NavigationItem = forwardRef<HTMLLIElement, NavigationItemProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Box component="li" ref={ref} className={styles.navItem} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-NavigationItem.displayName = 'NavigationItem'
-
-interface NavigationTriggerProps {
-  children: ReactNode
-  onClick?: (event: MouseEvent<HTMLElement>) => void
-  hasDropdown?: boolean
-}
-
-const NavigationTrigger = forwardRef<HTMLButtonElement, NavigationTriggerProps>(
-  ({ children, onClick, hasDropdown = false, ...props }, ref) => {
-    return (
-      <Button
-        ref={ref}
-        onClick={onClick}
-        variant="ghost"
-        endIcon={hasDropdown ? <ExpandMoreIcon /> : undefined}
-        className={styles.navTrigger}
-        {...props}
-      >
-        {children}
-      </Button>
-    )
-  }
-)
-NavigationTrigger.displayName = 'NavigationTrigger'
-
-interface NavigationContentProps {
-  anchorEl: HTMLElement | null
-  open: boolean
-  onClose: () => void
-  children: ReactNode
-}
-
-const NavigationContent = forwardRef<HTMLDivElement, NavigationContentProps>(
-  ({ anchorEl, open, onClose, children, ...props }, ref) => {
-    return (
-      <Menu
-        ref={ref}
-        anchorEl={anchorEl}
-        open={open}
-        onClose={onClose}
-        className={styles.navContent}
-        {...props}
-      >
-        {children}
-      </Menu>
-    )
-  }
-)
-NavigationContent.displayName = 'NavigationContent'
-
-interface NavigationLinkProps {
-  children: ReactNode
-  href?: string
-  onClick?: () => void
-  active?: boolean
-  disabled?: boolean
-  icon?: ReactNode
-  asChild?: boolean
-  component?: ElementType
-}
-
-const NavigationLink = forwardRef<HTMLButtonElement, NavigationLinkProps>(
-  (
-    {
-      children,
-      href,
-      onClick,
-      active = false,
-      disabled = false,
-      icon,
-      asChild,
-      component,
-      ...props
-    },
-    ref
-  ) => {
-    const handleClick = () => {
-      if (href && !onClick) {
-        window.location.href = href
-      } else if (onClick) {
-        onClick()
-      }
-    }
-
-    return (
-      <MenuItem
-        ref={ref}
-        onClick={handleClick}
-        disabled={disabled}
-        selected={active}
-        className={`${styles.navLink} ${active ? styles.active : ''}`}
-        {...props}
-      >
-        {icon && <span className={styles.linkIcon}>{icon}</span>}
-        <span>{children}</span>
-      </MenuItem>
-    )
-  }
-)
-NavigationLink.displayName = 'NavigationLink'
-
-export {
-  NavigationContent,
-  NavigationItem,
-  NavigationLink,
-  NavigationList,
-  NavigationMenu,
-  NavigationTrigger,
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/NavigationResponsive.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/NavigationResponsive.tsx
deleted file mode 100644
index 3b48bc263..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/NavigationResponsive.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { forwardRef } from 'react'
-
-import { IconButton } from '@/fakemui'
-import { Menu as MenuIcon } from '@/fakemui/icons'
-
-import styles from './Navigation.module.scss'
-
-interface NavigationMobileToggleProps {
-  onClick: () => void
-}
-
-const NavigationMobileToggle = forwardRef<HTMLButtonElement, NavigationMobileToggleProps>(
-  ({ onClick, ...props }, ref) => {
-    return (
-      <IconButton
-        ref={ref}
-        onClick={onClick}
-        className={styles.mobileToggle}
-        {...props}
-      >
-        <MenuIcon />
-      </IconButton>
-    )
-  }
-)
-NavigationMobileToggle.displayName = 'NavigationMobileToggle'
-
-export { NavigationMobileToggle }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/NavigationStyling.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/NavigationStyling.tsx
deleted file mode 100644
index 679191518..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/NavigationStyling.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, Divider } from '@/fakemui'
-
-import styles from './Navigation.module.scss'
-
-interface NavigationBrandProps {
-  children: ReactNode
-  href?: string
-  onClick?: () => void
-}
-
-const NavigationBrand = forwardRef<HTMLDivElement, NavigationBrandProps>(
-  ({ children, href, onClick, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        onClick={onClick}
-        className={`${styles.brand} ${onClick || href ? styles.clickable : ''}`}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-NavigationBrand.displayName = 'NavigationBrand'
-
-const NavigationSeparator = forwardRef<HTMLHRElement, Record<string, never>>((props, ref) => {
-  return <Divider ref={ref} vertical className={styles.separator} {...props} />
-})
-NavigationSeparator.displayName = 'NavigationSeparator'
-
-const NavigationSpacer = forwardRef<HTMLDivElement, Record<string, never>>((props, ref) => {
-  return <Box ref={ref} className={styles.spacer} {...props} />
-})
-NavigationSpacer.displayName = 'NavigationSpacer'
-
-export { NavigationBrand, NavigationSeparator, NavigationSpacer }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar.tsx
deleted file mode 100644
index 0fde850b3..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, Drawer, IconButton, useMediaQuery } from '@/fakemui'
-import { Menu as MenuIcon } from '@/fakemui/icons'
-
-import { MenuItemList, type MenuItemListProps, type SidebarItem } from './MenuItemList'
-import styles from './Navigation.module.scss'
-import { SidebarHeader, type SidebarHeaderProps } from './Sidebar/Header'
-import { SidebarSection, SidebarSeparator } from './Sidebar/NavSections'
-
-interface SidebarProps {
-  children?: ReactNode
-  open?: boolean
-  onClose?: () => void
-  width?: number
-  variant?: 'permanent' | 'persistent' | 'temporary'
-  anchor?: 'left' | 'right'
-}
-
-const Sidebar = forwardRef<HTMLDivElement, SidebarProps>(
-  (
-    {
-      children,
-      open = true,
-      onClose,
-      width = 280,
-      variant = 'permanent',
-      anchor = 'left',
-      ...props
-    },
-    ref
-  ) => {
-    // Use media query to determine mobile vs desktop
-    const isMobile = useMediaQuery('(max-width: 959px)')
-    const actualVariant = isMobile ? 'temporary' : variant
-
-    return (
-      <Drawer
-        ref={ref}
-        variant={actualVariant}
-        anchor={anchor}
-        open={open}
-        onClose={onClose}
-        className={styles.sidebar}
-        style={{ 
-          '--sidebar-width': `${width}px`,
-          width: open ? width : 0 
-        } as React.CSSProperties}
-        {...props}
-      >
-        <div className={styles.sidebarPaper} style={{ width }}>
-          {children}
-        </div>
-      </Drawer>
-    )
-  }
-)
-Sidebar.displayName = 'Sidebar'
-
-interface SidebarContentProps {
-  children: ReactNode
-}
-
-const SidebarContent = forwardRef<HTMLDivElement, SidebarContentProps>(
-  ({ children, ...props }, ref) => (
-    <Box
-      ref={ref}
-      className={styles.sidebarContent}
-      {...props}
-    >
-      {children}
-    </Box>
-  )
-)
-SidebarContent.displayName = 'SidebarContent'
-
-interface SidebarFooterProps {
-  children: ReactNode
-}
-
-const SidebarFooter = forwardRef<HTMLDivElement, SidebarFooterProps>(
-  ({ children, ...props }, ref) => (
-    <Box
-      ref={ref}
-      className={styles.sidebarFooter}
-      {...props}
-    >
-      {children}
-    </Box>
-  )
-)
-SidebarFooter.displayName = 'SidebarFooter'
-
-interface SidebarToggleProps {
-  onClick: () => void
-}
-
-const SidebarToggle = forwardRef<HTMLButtonElement, SidebarToggleProps>(
-  ({ onClick, ...props }, ref) => (
-    <IconButton ref={ref} onClick={onClick} {...props}>
-      <MenuIcon />
-    </IconButton>
-  )
-)
-SidebarToggle.displayName = 'SidebarToggle'
-
-const SidebarNav = forwardRef<HTMLUListElement, MenuItemListProps>((props, ref) => (
-  <MenuItemList ref={ref} {...props} />
-))
-SidebarNav.displayName = 'SidebarNav'
-
-export {
-  Sidebar,
-  SidebarContent,
-  SidebarFooter,
-  SidebarHeader,
-  SidebarNav,
-  SidebarSection,
-  SidebarSeparator,
-  SidebarToggle,
-}
-export type { SidebarHeaderProps, SidebarItem, SidebarProps }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar/Header.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar/Header.tsx
deleted file mode 100644
index 5fb550881..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar/Header.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, IconButton } from '@/fakemui'
-import { ChevronLeft as ChevronLeftIcon } from '@/fakemui/icons'
-
-import styles from '../Navigation.module.scss'
-
-interface SidebarHeaderProps {
-  children?: ReactNode
-  onClose?: () => void
-  showCloseButton?: boolean
-}
-
-const SidebarHeader = forwardRef<HTMLDivElement, SidebarHeaderProps>(
-  ({ children, onClose, showCloseButton = false, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        className={styles.sidebarHeader}
-        {...props}
-      >
-        {children}
-        {showCloseButton && onClose && (
-          <IconButton onClick={onClose} sm>
-            <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
deleted file mode 100644
index 56d05d5d1..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/Sidebar/NavSections.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { forwardRef, ReactNode } from 'react'
-
-import { Box, Divider, Typography } from '@/fakemui'
-
-import styles from '../Navigation.module.scss'
-
-interface SidebarSectionProps {
-  title?: string
-  children: ReactNode
-}
-
-const SidebarSection = forwardRef<HTMLDivElement, SidebarSectionProps>(
-  ({ title, children, ...props }, ref) => {
-    return (
-      <Box ref={ref} className={styles.sidebarSection} {...props}>
-        {title && (
-          <Typography
-            variant="caption"
-            className={styles.sectionTitle}
-          >
-            {title}
-          </Typography>
-        )}
-        {children}
-      </Box>
-    )
-  }
-)
-SidebarSection.displayName = 'SidebarSection'
-
-const SidebarSeparator = forwardRef<HTMLHRElement, Record<string, never>>((props, ref) => {
-  return <Divider ref={ref} className={styles.sidebarSeparator} {...props} />
-})
-SidebarSeparator.displayName = 'SidebarSeparator'
-
-export { SidebarSection, SidebarSeparator }
-export type { SidebarSectionProps }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/Pagination.test.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/Pagination.test.tsx
deleted file mode 100644
index af6128fea..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/Pagination.test.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react'
-import { describe, expect, it, vi } from 'vitest'
-
-import {
-  Pagination,
-  PaginationContent,
-  PaginationEllipsis,
-  PaginationItem,
-  PaginationLink,
-  PaginationNext,
-  PaginationPrevious,
-  SimplePagination,
-  TablePagination,
-} from './index'
-
-describe('Pagination components', () => {
-  it('triggers onChange for root Pagination', () => {
-    const handleChange = vi.fn()
-    render(<Pagination count={3} page={1} onChange={handleChange} />)
-
-    fireEvent.click(screen.getByRole('button', { name: 'Go to page 2' }))
-
-    expect(handleChange).toHaveBeenCalledWith(2)
-  })
-
-  it('handles SimplePagination controls', () => {
-    const onPrevious = vi.fn()
-    const onNext = vi.fn()
-    render(
-      <SimplePagination
-        hasPrevious={false}
-        hasNext
-        onPrevious={onPrevious}
-        onNext={onNext}
-        previousLabel="Prev"
-        nextLabel="Next"
-      />
-    )
-
-    expect(screen.getByText('Prev').closest('button')?.disabled).toBe(true)
-    fireEvent.click(screen.getByText('Next'))
-
-    expect(onNext).toHaveBeenCalled()
-  })
-
-  it('navigates TablePagination pages', () => {
-    const onPageChange = vi.fn()
-    const onPageSizeChange = vi.fn()
-    render(
-      <TablePagination
-        count={30}
-        page={2}
-        pageSize={10}
-        onPageChange={onPageChange}
-        onPageSizeChange={onPageSizeChange}
-        showFirstLastButtons={false}
-      />
-    )
-
-    expect(screen.getByText('11-20 of 30')).toBeDefined()
-
-    fireEvent.click(screen.getByRole('button', { name: 'Go to next page' }))
-
-    expect(onPageChange).toHaveBeenCalledWith(3)
-  })
-
-  it('renders content wrappers', () => {
-    render(
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationLink isActive>1</PaginationLink>
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationEllipsis />
-        </PaginationItem>
-      </PaginationContent>
-    )
-
-    expect(screen.getByRole('list')).toBeDefined()
-    expect(screen.getAllByRole('listitem')).to.have.length(2)
-  })
-
-  it('renders link variants', () => {
-    const handleClick = vi.fn()
-    render(
-      <PaginationLink onClick={handleClick} isActive>
-        5
-      </PaginationLink>
-    )
-
-    fireEvent.click(screen.getByRole('button'))
-
-    expect(handleClick).toHaveBeenCalled()
-  })
-
-  it('wraps icon links for previous and next', () => {
-    const onPrevious = vi.fn()
-    const onNext = vi.fn()
-    render(
-      <PaginationContent>
-        <PaginationItem>
-          <PaginationPrevious onClick={onPrevious} />
-        </PaginationItem>
-        <PaginationItem>
-          <PaginationNext onClick={onNext} />
-        </PaginationItem>
-      </PaginationContent>
-    )
-
-    const buttons = screen.getAllByRole('button')
-    fireEvent.click(buttons[0])
-    fireEvent.click(buttons[1])
-
-    expect(onPrevious).toHaveBeenCalled()
-    expect(onNext).toHaveBeenCalled()
-  })
-
-  it('renders ellipsis marker', () => {
-    render(<PaginationEllipsis />)
-
-    expect(screen.getByText('...')).toBeDefined()
-  })
-})
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationContent.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationContent.tsx
deleted file mode 100644
index 19df8f111..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationContent.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-'use client'
-
-import { forwardRef, ReactNode } from 'react'
-
-import { Box } from '@/fakemui'
-
-import styles from './pagination.module.scss'
-
-interface PaginationContentProps {
-  children: ReactNode
-}
-
-interface PaginationItemWrapperProps {
-  children: ReactNode
-}
-
-const PaginationContent = forwardRef<HTMLUListElement, PaginationContentProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Box
-        ref={ref}
-        component="ul"
-        className={styles.paginationContent}
-        {...props}
-      >
-        {children}
-      </Box>
-    )
-  }
-)
-PaginationContent.displayName = 'PaginationContent'
-
-const PaginationItem = forwardRef<HTMLLIElement, PaginationItemWrapperProps>(
-  ({ children, ...props }, ref) => {
-    return (
-      <Box component="li" ref={ref} {...props}>
-        {children}
-      </Box>
-    )
-  }
-)
-PaginationItem.displayName = 'PaginationItem'
-
-export { PaginationContent, PaginationItem }
-export type { PaginationContentProps, PaginationItemWrapperProps }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationEllipsis.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationEllipsis.tsx
deleted file mode 100644
index 794b410bd..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationEllipsis.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Box } from '@/fakemui'
-
-import styles from './pagination.module.scss'
-
-const PaginationEllipsis = forwardRef<HTMLSpanElement, Record<string, never>>((props, ref) => {
-  return (
-    <Box
-      ref={ref}
-      component="span"
-      className={styles.paginationEllipsis}
-      {...props}
-    >
-      ...
-    </Box>
-  )
-})
-PaginationEllipsis.displayName = 'PaginationEllipsis'
-
-export { PaginationEllipsis }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationLink.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationLink.tsx
deleted file mode 100644
index f56a62962..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationLink.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { IconButton } from '@/fakemui'
-
-import styles from './pagination.module.scss'
-import { type PaginationLinkProps } from './paginationTypes'
-
-const PaginationLink = forwardRef<HTMLButtonElement, PaginationLinkProps>(
-  ({ children, onClick, isActive = false, disabled = false, size = 'medium', ...props }, ref) => {
-    const sizeClass = size === 'small' ? styles.paginationLinkSmall : size === 'large' ? styles.paginationLinkLarge : ''
-    const activeClass = isActive ? styles.paginationLinkActive : ''
-    
-    return (
-      <IconButton
-        ref={ref}
-        onClick={onClick}
-        disabled={disabled}
-        className={`${styles.paginationLink} ${sizeClass} ${activeClass}`}
-        {...props}
-      >
-        {children}
-      </IconButton>
-    )
-  }
-)
-PaginationLink.displayName = 'PaginationLink'
-
-export { PaginationLink }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationNext.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationNext.tsx
deleted file mode 100644
index 97b3f991a..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationNext.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { NextIcon } from './paginationIcons'
-import { PaginationLink } from './PaginationLink'
-import { type PaginationLinkProps } from './paginationTypes'
-
-const PaginationNext = forwardRef<HTMLButtonElement, Omit<PaginationLinkProps, 'children'>>(
-  (props, ref) => {
-    return (
-      <PaginationLink ref={ref} {...props}>
-        <NextIcon />
-      </PaginationLink>
-    )
-  }
-)
-PaginationNext.displayName = 'PaginationNext'
-
-export { PaginationNext }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationPrevious.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationPrevious.tsx
deleted file mode 100644
index 30393423e..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationPrevious.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { PreviousIcon } from './paginationIcons'
-import { PaginationLink } from './PaginationLink'
-import { type PaginationLinkProps } from './paginationTypes'
-
-const PaginationPrevious = forwardRef<HTMLButtonElement, Omit<PaginationLinkProps, 'children'>>(
-  (props, ref) => {
-    return (
-      <PaginationLink ref={ref} {...props}>
-        <PreviousIcon />
-      </PaginationLink>
-    )
-  }
-)
-PaginationPrevious.displayName = 'PaginationPrevious'
-
-export { PaginationPrevious }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationRoot.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationRoot.tsx
deleted file mode 100644
index ac58ed3c3..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/PaginationRoot.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Pagination as FakeMuiPagination } from '@/fakemui'
-
-interface PaginationProps {
-  count: number
-  page: number
-  onChange: (page: number) => void
-  siblingCount?: number
-  boundaryCount?: number
-  showFirstButton?: boolean
-  showLastButton?: boolean
-  disabled?: boolean
-  size?: 'small' | 'medium' | 'large'
-  variant?: 'text' | 'outlined'
-  shape?: 'circular' | 'rounded'
-  color?: 'primary' | 'secondary' | 'standard'
-}
-
-const Pagination = forwardRef<HTMLElement, PaginationProps>(
-  (
-    {
-      count,
-      page,
-      onChange,
-      siblingCount = 1,
-      boundaryCount = 1,
-      showFirstButton = false,
-      showLastButton = false,
-      disabled = false,
-      size = 'medium',
-      variant = 'outlined',
-      shape = 'rounded',
-      color = 'primary',
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <FakeMuiPagination
-        ref={ref as React.Ref<HTMLElement>}
-        count={count}
-        page={page}
-        onChange={onChange}
-        siblingCount={siblingCount}
-        boundaryCount={boundaryCount}
-        showFirstButton={showFirstButton}
-        showLastButton={showLastButton}
-        disabled={disabled}
-        size={size}
-        variant={variant}
-        shape={shape}
-        color={color}
-        {...props}
-      />
-    )
-  }
-)
-Pagination.displayName = 'Pagination'
-
-export { Pagination }
-export type { PaginationProps }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/SimplePagination.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/SimplePagination.tsx
deleted file mode 100644
index 5d1e115bb..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/SimplePagination.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-'use client'
-
-import { forwardRef } from 'react'
-
-import { Box, IconButton, Typography } from '@/fakemui'
-
-import styles from './pagination.module.scss'
-import { NextIcon, PreviousIcon } from './paginationIcons'
-
-interface SimplePaginationProps {
-  hasPrevious: boolean
-  hasNext: boolean
-  onPrevious: () => void
-  onNext: () => void
-  previousLabel?: string
-  nextLabel?: string
-  disabled?: boolean
-}
-
-const SimplePagination = forwardRef<HTMLDivElement, SimplePaginationProps>(
-  (
-    {
-      hasPrevious,
-      hasNext,
-      onPrevious,
-      onNext,
-      previousLabel = 'Previous',
-      nextLabel = 'Next',
-      disabled = false,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <Box
-        ref={ref}
-        className={styles.simplePagination}
-        {...props}
-      >
-        <IconButton
-          onClick={onPrevious}
-          disabled={disabled || !hasPrevious}
-          sm
-          className={styles.simplePaginationButton}
-        >
-          <PreviousIcon />
-          <Typography variant="body2" className={styles.simplePaginationLabel}>
-            {previousLabel}
-          </Typography>
-        </IconButton>
-        <IconButton
-          onClick={onNext}
-          disabled={disabled || !hasNext}
-          sm
-          className={styles.simplePaginationButton}
-        >
-          <Typography variant="body2" className={styles.simplePaginationLabel}>
-            {nextLabel}
-          </Typography>
-          <NextIcon />
-        </IconButton>
-      </Box>
-    )
-  }
-)
-SimplePagination.displayName = 'SimplePagination'
-
-export { SimplePagination }
-export type { SimplePaginationProps }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/TablePagination.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/TablePagination.tsx
deleted file mode 100644
index ca7fbbb03..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/TablePagination.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-'use client'
-
-import { ChangeEvent,forwardRef } from 'react'
-
-import { Box, FormControl, IconButton, Select, Typography } from '@/fakemui'
-import { FirstPage as FirstPageIcon, LastPage as LastPageIcon } from '@/fakemui/icons'
-
-import styles from './pagination.module.scss'
-import { NextIcon, PreviousIcon } from './paginationIcons'
-
-interface TablePaginationProps {
-  count: number
-  page: number
-  pageSize: number
-  pageSizeOptions?: number[]
-  onPageChange: (page: number) => void
-  onPageSizeChange: (pageSize: number) => void
-  showFirstLastButtons?: boolean
-  disabled?: boolean
-}
-
-const TablePagination = forwardRef<HTMLDivElement, TablePaginationProps>(
-  (
-    {
-      count,
-      page,
-      pageSize,
-      pageSizeOptions = [10, 25, 50, 100],
-      onPageChange,
-      onPageSizeChange,
-      showFirstLastButtons = true,
-      disabled = false,
-      ...props
-    },
-    ref
-  ) => {
-    const totalPages = Math.ceil(count / pageSize)
-    const startItem = (page - 1) * pageSize + 1
-    const endItem = Math.min(page * pageSize, count)
-
-    const handlePageSizeChange = (event: ChangeEvent<HTMLSelectElement>) => {
-      onPageSizeChange(Number(event.target.value))
-    }
-
-    return (
-      <Box
-        ref={ref}
-        className={styles.tablePagination}
-        {...props}
-      >
-        <Box className={styles.tablePaginationRowsPerPage}>
-          <Typography variant="body2" className={styles.tablePaginationLabel}>
-            Rows per page:
-          </Typography>
-          <FormControl sm>
-            <Select
-              value={pageSize}
-              onChange={handlePageSizeChange}
-              disabled={disabled}
-              sm
-              className={styles.tablePaginationSelect}
-            >
-              {pageSizeOptions.map(option => (
-                <option key={option} value={option}>
-                  {option}
-                </option>
-              ))}
-            </Select>
-          </FormControl>
-        </Box>
-
-        <Typography variant="body2" className={styles.tablePaginationLabel}>
-          {count === 0 ? '0' : `${startItem}-${endItem}`} of {count}
-        </Typography>
-
-        <Box className={styles.tablePaginationActions}>
-          {showFirstLastButtons && (
-            <IconButton
-              onClick={() => onPageChange(1)}
-              disabled={disabled || page === 1}
-              sm
-              aria-label="Go to first page"
-            >
-              <FirstPageIcon size={16} />
-            </IconButton>
-          )}
-          <IconButton
-            onClick={() => onPageChange(page - 1)}
-            disabled={disabled || page === 1}
-            sm
-            aria-label="Go to previous page"
-          >
-            <PreviousIcon />
-          </IconButton>
-          <IconButton
-            onClick={() => onPageChange(page + 1)}
-            disabled={disabled || page === totalPages}
-            sm
-            aria-label="Go to next page"
-          >
-            <NextIcon />
-          </IconButton>
-          {showFirstLastButtons && (
-            <IconButton
-              onClick={() => onPageChange(totalPages)}
-              disabled={disabled || page === totalPages}
-              sm
-              aria-label="Go to last page"
-            >
-              <LastPageIcon size={16} />
-            </IconButton>
-          )}
-        </Box>
-      </Box>
-    )
-  }
-)
-TablePagination.displayName = 'TablePagination'
-
-export { TablePagination }
-export type { TablePaginationProps }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/index.ts b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/index.ts
deleted file mode 100644
index 76630e24f..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export type { PaginationContentProps, PaginationItemWrapperProps } from './PaginationContent'
-export { PaginationContent, PaginationItem } from './PaginationContent'
-export { PaginationEllipsis } from './PaginationEllipsis'
-export { PaginationLink } from './PaginationLink'
-export { PaginationNext } from './PaginationNext'
-export { PaginationPrevious } from './PaginationPrevious'
-export type { PaginationProps } from './PaginationRoot'
-export { Pagination } from './PaginationRoot'
-export type { PaginationLinkProps } from './paginationTypes'
-export type { SimplePaginationProps } from './SimplePagination'
-export { SimplePagination } from './SimplePagination'
-export type { TablePaginationProps } from './TablePagination'
-export { TablePagination } from './TablePagination'
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/pagination.module.scss b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/pagination.module.scss
deleted file mode 100644
index 39bfa00f9..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/pagination.module.scss
+++ /dev/null
@@ -1,128 +0,0 @@
-// Pagination component styles
-// Migrated from @mui/material sx props to SCSS modules
-
-// PaginationContent
-.paginationContent {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-// PaginationEllipsis
-.paginationEllipsis {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 36px;
-  height: 36px;
-  color: var(--text-secondary, #666);
-}
-
-// PaginationLink
-.paginationLink {
-  min-width: 36px;
-  height: 36px;
-  border-radius: 4px;
-  background-color: transparent;
-  color: var(--text-primary, #333);
-  border: none;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transition: background-color 0.2s ease, color 0.2s ease;
-
-  &:hover:not(:disabled) {
-    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-.paginationLinkSmall {
-  min-width: 28px;
-  height: 28px;
-}
-
-.paginationLinkLarge {
-  min-width: 44px;
-  height: 44px;
-}
-
-.paginationLinkActive {
-  background-color: var(--primary-main, #1976d2);
-  color: var(--primary-contrast-text, #fff);
-
-  &:hover:not(:disabled) {
-    background-color: var(--primary-dark, #1565c0);
-  }
-}
-
-// SimplePagination
-.simplePagination {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.simplePaginationButton {
-  border: 1px solid var(--divider, rgba(0, 0, 0, 0.12));
-  border-radius: 4px;
-  padding: 0.5rem 1rem;
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-  background-color: transparent;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-
-  &:hover:not(:disabled) {
-    background-color: var(--action-hover, rgba(0, 0, 0, 0.04));
-  }
-
-  &:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-}
-
-.simplePaginationLabel {
-  margin: 0 0.25rem;
-}
-
-// TablePagination
-.tablePagination {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 1rem;
-  padding: 0.5rem 0;
-}
-
-.tablePaginationRowsPerPage {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.tablePaginationLabel {
-  color: var(--text-secondary, #666);
-}
-
-.tablePaginationSelect {
-  min-width: 70px;
-}
-
-.tablePaginationActions {
-  display: flex;
-  align-items: center;
-  gap: 0.25rem;
-}
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/paginationIcons.tsx b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/paginationIcons.tsx
deleted file mode 100644
index ca4679c02..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/paginationIcons.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import { ChevronLeft as ChevronLeftIcon, ChevronRight as ChevronRightIcon } from '@/fakemui/icons'
-
-const PreviousIcon = () => <ChevronLeftIcon size={16} />
-
-const NextIcon = () => <ChevronRightIcon size={16} />
-
-export { NextIcon, PreviousIcon }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/paginationTypes.ts b/frontends/nextjs/src/components/ui/organisms/navigation/pagination/paginationTypes.ts
deleted file mode 100644
index a5fdcd67a..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/pagination/paginationTypes.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { type ReactNode } from 'react'
-
-const paginationSizeMap = {
-  small: { minWidth: 28, height: 28 },
-  medium: { minWidth: 36, height: 36 },
-  large: { minWidth: 44, height: 44 },
-} as const
-
-interface PaginationLinkProps {
-  children: ReactNode
-  onClick?: () => void
-  isActive?: boolean
-  disabled?: boolean
-  size?: keyof typeof paginationSizeMap
-}
-
-export { paginationSizeMap }
-export type { PaginationLinkProps }
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/utils/navigationConfig.ts b/frontends/nextjs/src/components/ui/organisms/navigation/utils/navigationConfig.ts
deleted file mode 100644
index 02bd67edc..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/utils/navigationConfig.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ReactNode } from 'react'
-
-interface NavigationItem {
-  label: string
-  href?: string
-  onClick?: () => void
-  icon?: ReactNode
-  children?: NavigationItem[]
-  disabled?: boolean
-}
-
-export type NavigationItemType = NavigationItem
diff --git a/frontends/nextjs/src/components/ui/organisms/navigation/utils/navigationHelpers.ts b/frontends/nextjs/src/components/ui/organisms/navigation/utils/navigationHelpers.ts
deleted file mode 100644
index 9fb0fed78..000000000
--- a/frontends/nextjs/src/components/ui/organisms/navigation/utils/navigationHelpers.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { type MouseEvent, useState } from 'react'
-
-function useNavigationDropdown() {
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
-  const open = Boolean(anchorEl)
-
-  const handleOpen = (event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  return {
-    anchorEl,
-    open,
-    handleOpen,
-    handleClose,
-  }
-}
-
-export { useNavigationDropdown }
diff --git a/frontends/nextjs/src/components/ui/overlay.ts b/frontends/nextjs/src/components/ui/overlay.ts
deleted file mode 100644
index ed28c2d7e..000000000
--- a/frontends/nextjs/src/components/ui/overlay.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-// Overlay-focused UI exports
-export {
-  Dialog,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogOverlay,
-  DialogPortal,
-  DialogTitle,
-  DialogTrigger,
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuPortal,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-  Popover,
-  PopoverAnchor,
-  PopoverContent,
-  PopoverTrigger,
-  SimpleTooltip,
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from './molecules'
-export {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetFooter,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger,
-} from './organisms'
diff --git a/frontends/nextjs/src/components/ui/sonner.tsx b/frontends/nextjs/src/components/ui/sonner.tsx
deleted file mode 100644
index 3cfc81d32..000000000
--- a/frontends/nextjs/src/components/ui/sonner.tsx
+++ /dev/null
@@ -1,146 +0,0 @@
-'use client'
-
-/**
- * Sonner-compatible toast API using MUI Snackbar
- * Provides a drop-in replacement for the 'sonner' package.
- *
- * Usage:
- *
- * ```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, useCallback, useContext, useEffect, useState } from 'react'
-
-import { DEFAULT_DURATION, type Toast, type ToastOptions, type ToastType } from './sonner/config'
-import { ToastContainer, type ToastHandlers } from './sonner/ToastContainer'
-
-const ToastContext = createContext<ToastHandlers>({
-  addToast: () => {},
-  removeToast: () => {},
-})
-
-let globalAddToast: ((toast: Toast) => void) | null = null
-let globalRemoveToast: ((id?: string | number) => void) | null = null
-let toastIdCounter = 0
-
-const generateId = () => `toast-${++toastIdCounter}`
-
-const createToast = (message: string, type: ToastType, options?: ToastOptions): Toast => ({
-  id: options?.id ?? generateId(),
-  message,
-  description: options?.description,
-  type,
-  duration: options?.duration ?? DEFAULT_DURATION,
-})
-
-const enqueueToast = (toast: Toast) => {
-  globalAddToast?.(toast)
-  return toast.id
-}
-
-export const toast = Object.assign(
-  (message: string, options?: ToastOptions) =>
-    enqueueToast(createToast(message, 'default', options)),
-  {
-    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)
-    },
-    promise: async <T,>(
-      promise: Promise<T>,
-      messages: {
-        loading: string
-        success: string | ((data: T) => string)
-        error: string | ((error: unknown) => string)
-      },
-      options?: ToastOptions
-    ): Promise<T> => {
-      const id = toast.loading(messages.loading, options)
-      try {
-        const result = await promise
-        toast.dismiss(id)
-        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
-        toast.error(errorMessage, options)
-        throw error
-      }
-    },
-  }
-)
-
-export function Toaster({
-  position = 'bottom-right',
-  richColors = false,
-  expand = false,
-  closeButton = false,
-}: {
-  position?: ToastOptions['position']
-  richColors?: boolean
-  expand?: boolean
-  closeButton?: boolean
-}) {
-  const [handlers, setHandlers] = useState<ToastHandlers>({
-    addToast: () => {},
-    removeToast: () => {},
-  })
-
-  useEffect(() => {
-    return () => {
-      globalAddToast = null
-      globalRemoveToast = null
-    }
-  }, [])
-
-  const registerHandlers = useCallback((nextHandlers: ToastHandlers) => {
-    setHandlers(nextHandlers)
-    globalAddToast = nextHandlers.addToast
-    globalRemoveToast = nextHandlers.removeToast
-  }, [])
-
-  return (
-    <ToastContext.Provider value={handlers}>
-      <ToastContainer
-        position={position}
-        richColors={richColors}
-        expand={expand}
-        closeButton={closeButton}
-        onRegister={registerHandlers}
-      />
-    </ToastContext.Provider>
-  )
-}
-
-export function useToast() {
-  const context = useContext(ToastContext)
-  return { toast, ...context }
-}
-
-export default toast
diff --git a/frontends/nextjs/src/components/ui/sonner/ToastContainer.module.scss b/frontends/nextjs/src/components/ui/sonner/ToastContainer.module.scss
deleted file mode 100644
index bb7bc90ed..000000000
--- a/frontends/nextjs/src/components/ui/sonner/ToastContainer.module.scss
+++ /dev/null
@@ -1,60 +0,0 @@
-/* ToastContainer styles */
-
-.toastContainer {
-  position: fixed;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-
-.topLeft {
-  top: 16px;
-  left: 16px;
-}
-
-.topCenter {
-  top: 16px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.topRight {
-  top: 16px;
-  right: 16px;
-}
-
-.bottomLeft {
-  bottom: 16px;
-  left: 16px;
-}
-
-.bottomCenter {
-  bottom: 16px;
-  left: 50%;
-  transform: translateX(-50%);
-}
-
-.bottomRight {
-  bottom: 16px;
-  right: 16px;
-}
-
-.snackbar {
-  position: relative;
-  margin-bottom: 8px;
-}
-
-.alert {
-  min-width: 300px;
-
-  &.fullWidth {
-    width: 100%;
-  }
-}
-
-.alertDescription {
-  font-size: 0.875rem;
-  opacity: 0.8;
-  margin-top: 4px;
-}
diff --git a/frontends/nextjs/src/components/ui/sonner/ToastContainer.tsx b/frontends/nextjs/src/components/ui/sonner/ToastContainer.tsx
deleted file mode 100644
index a49198b52..000000000
--- a/frontends/nextjs/src/components/ui/sonner/ToastContainer.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-'use client'
-
-import { Alert, Box, Snackbar } from 'fakemui'
-import React, { useCallback, useEffect, useMemo, useState } from 'react'
-
-import { anchorFromPosition, containerPlacement, type Toast, type ToastOptions } from './config'
-import styles from './ToastContainer.module.scss'
-
-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
-}
-
-function getPositionClass(position: string): string {
-  switch (position) {
-    case 'top-left':
-      return styles.topLeft
-    case 'top-center':
-      return styles.topCenter
-    case 'top-right':
-      return styles.topRight
-    case 'bottom-left':
-      return styles.bottomLeft
-    case 'bottom-center':
-      return styles.bottomCenter
-    case 'bottom-right':
-    default:
-      return styles.bottomRight
-  }
-}
-
-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 positionClass = useMemo(() => getPositionClass(position), [position])
-
-  return (
-    <Box className={`${styles.toastContainer} ${positionClass}`}>
-      {toasts.map(t => (
-        <Snackbar
-          key={t.id}
-          open
-          autoHideDuration={t.duration || null}
-          onClose={() => removeToast(t.id)}
-          anchorOrigin={anchorOrigin}
-          className={styles.snackbar}
-        >
-          <Alert
-            severity={t.type === 'default' ? 'info' : t.type}
-            variant={richColors ? 'filled' : 'standard'}
-            onClose={closeButton ? () => removeToast(t.id) : undefined}
-            className={`${styles.alert} ${expand ? styles.fullWidth : ''}`}
-          >
-            {t.message}
-            {t.description && (
-              <Box component="div" className={styles.alertDescription}>
-                {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
deleted file mode 100644
index f226253f8..000000000
--- a/frontends/nextjs/src/components/ui/sonner/config.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Alert severity levels for toast notifications
- * Replaces MUI's AlertColor type
- */
-export type AlertSeverity = 'success' | 'info' | 'warning' | 'error'
-
-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 = AlertSeverity | '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
deleted file mode 100644
index 5aebfad35..000000000
--- a/frontends/nextjs/src/data/form/FieldGroup.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { ReactNode } from 'react'
-
-import { Box, Stack, Typography } from '@/fakemui'
-
-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} className="field-group">
-      <Stack direction="row" justifyContent="space-between" spacing={2} alignItems="flex-start">
-        <Box>
-          <Typography variant="subtitle1" className="field-group__title">
-            {title}
-          </Typography>
-          {description ? (
-            <Typography variant="body2" className="field-group__description">
-              {description}
-            </Typography>
-          ) : null}
-        </Box>
-
-        {actions ? (
-          <Box className="field-group__actions">{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
deleted file mode 100644
index 3d706ccf0..000000000
--- a/frontends/nextjs/src/data/form/ValidationSummary.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { ReactNode } from 'react'
-
-import { Alert, AlertTitle, List, ListItem, ListItemText } from '@/fakemui'
-
-/**
- * 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" className="validation-summary">
-      {showTitle ? <AlertTitle>{title}</AlertTitle> : null}
-      <List dense className="validation-summary__list">
-        {errors.map((error, index) => (
-          <ListItem key={index} className="validation-summary__item">
-            <ListItemText primary={error} />
-          </ListItem>
-        ))}
-      </List>
-    </Alert>
-  )
-}
diff --git a/frontends/nextjs/src/data/table/Body.tsx b/frontends/nextjs/src/data/table/Body.tsx
deleted file mode 100644
index 094bd3c2c..000000000
--- a/frontends/nextjs/src/data/table/Body.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import type { ReactNode } from 'react'
-
-import { TableBody, TableCell, TableRow } from '@/fakemui'
-
-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}
-              className={onRowClick ? 'table-row--clickable' : ''}
-            >
-              {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} className={column.className}>
-                    {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
deleted file mode 100644
index 521c59ffb..000000000
--- a/frontends/nextjs/src/data/table/EmptyState.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { ReactNode } from 'react'
-
-import { Stack, TableCell, TableRow, Typography } from '@/fakemui'
-
-/**
- * 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} className="table-empty-state">
-        <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
deleted file mode 100644
index 25124823e..000000000
--- a/frontends/nextjs/src/data/table/Header.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { TableCell, TableHead, TableRow, Typography } from '@/fakemui'
-
-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}
-            className={`table-header-cell ${column.width ? `width-${column.width}` : ''}`}
-          >
-            <Typography variant="caption" className="table-header-text">
-              {column.label}
-            </Typography>
-          </TableCell>
-        ))}
-
-        {actionsHeader ? (
-          <TableCell
-            align="right"
-            className="table-header-cell table-header-cell--actions"
-          >
-            <Typography variant="caption" className="table-header-text">
-              {actionsHeader}
-            </Typography>
-          </TableCell>
-        ) : null}
-      </TableRow>
-    </TableHead>
-  )
-}
diff --git a/frontends/nextjs/src/data/table/types.ts b/frontends/nextjs/src/data/table/types.ts
deleted file mode 100644
index f3c8dd509..000000000
--- a/frontends/nextjs/src/data/table/types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react'
-
-/**
- * Cell alignment options (replaces MUI TableCellProps['align'])
- */
-export type TableCellAlign = 'left' | 'center' | 'right' | 'justify' | 'inherit'
-
-/**
- * Style properties for table cells (replaces MUI's sx prop)
- */
-export type TableCellStyle = CSSProperties
-
-export interface DataTableColumn<T> {
-  key: string
-  label: string
-  align?: TableCellAlign
-  width?: number | string
-  render?: (row: T, rowIndex: number) => ReactNode
-  sx?: TableCellStyle
-}