diff --git a/frontends/nextjs/src/components/atoms/controls/Button.tsx b/frontends/nextjs/src/components/atoms/controls/Button.tsx
index 78679ad4e..bb113eb6b 100644
--- a/frontends/nextjs/src/components/atoms/controls/Button.tsx
+++ b/frontends/nextjs/src/components/atoms/controls/Button.tsx
@@ -1,7 +1,8 @@
 'use client'
 
-import { Button as MuiButton, ButtonProps as MuiButtonProps, CircularProgress } from '@mui/material'
+import { Button as FakemuiButton } from '@/fakemui'
 import { forwardRef } from 'react'
+import type { ButtonProps as FakemuiButtonProps } from '@/fakemui/fakemui/inputs/Button'
 
 /** Button visual style variants */
 export type ButtonVariant = 'contained' | 'outlined' | 'text' | 'destructive' | 'ghost'
@@ -11,9 +12,9 @@ export type ButtonSize = 'small' | 'medium' | 'large' | 'icon'
 
 /**
  * Props for the Button component
- * @extends {MuiButtonProps} Inherits Material-UI Button props
+ * Wrapper around fakemui Button to maintain API compatibility
  */
-export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size'> {
+export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'variant' | 'size'> {
   /** Visual style variant of the button */
   variant?: ButtonVariant
   /** Size of the button */
@@ -22,47 +23,54 @@ export interface ButtonProps extends Omit<MuiButtonProps, 'variant' | 'size'> {
   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, ...props }, ref) => {
+  ({ 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'
 
-    const muiVariant =
-      variant === 'destructive' || variant === 'ghost'
-        ? variant === 'ghost'
-          ? 'text'
-          : 'contained'
-        : variant
-
-    const muiColor = variant === 'destructive' ? 'error' : 'primary'
+    // Combine className with any sx-based classes
+    const combinedClassName = [className, sx?.className].filter(Boolean).join(' ')
 
     return (
-      <MuiButton
+      <FakemuiButton
         ref={ref}
-        variant={muiVariant}
-        color={muiColor}
-        size={isIcon ? 'medium' : size}
-        disabled={disabled || loading}
-        sx={{
-          ...(isIcon && {
-            minWidth: 40,
-            width: 40,
-            height: 40,
-            p: 0,
-            borderRadius: 1,
-          }),
-          ...(variant === 'ghost' && {
-            '&:hover': {
-              bgcolor: 'action.hover',
-            },
-          }),
-          ...sx,
-        }}
+        variant={fakemuiVariant}
+        size={fakemuiSize}
+        icon={isIcon}
+        loading={loading}
+        disabled={disabled}
+        fullWidth={fullWidth}
+        startIcon={startIcon}
+        endIcon={endIcon}
+        className={combinedClassName}
         {...props}
       >
-        {loading ? <CircularProgress size={20} color="inherit" /> : children}
-      </MuiButton>
+        {children}
+      </FakemuiButton>
     )
   }
 )
diff --git a/frontends/nextjs/src/components/atoms/controls/Checkbox.tsx b/frontends/nextjs/src/components/atoms/controls/Checkbox.tsx
index 436ae1e70..56d9636e7 100644
--- a/frontends/nextjs/src/components/atoms/controls/Checkbox.tsx
+++ b/frontends/nextjs/src/components/atoms/controls/Checkbox.tsx
@@ -1,37 +1,37 @@
 'use client'
 
-import {
-  Checkbox as MuiCheckbox,
-  CheckboxProps as MuiCheckboxProps,
-  FormControlLabel,
-} from '@mui/material'
+import { Checkbox as FakemuiCheckbox } from '@/fakemui'
 import { forwardRef } from 'react'
 
 /**
  * Props for the Checkbox component
- * @extends {MuiCheckboxProps} Inherits Material-UI Checkbox props
+ * Wrapper around fakemui Checkbox to maintain API compatibility
  */
-export interface CheckboxProps extends MuiCheckboxProps {
+export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'> {
   /** Optional label text to display next to the checkbox */
-  label?: string
+  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<HTMLButtonElement, CheckboxProps>(({ label, ...props }, ref) => {
-  if (label) {
-    return (
-      <FormControlLabel
-        control={<MuiCheckbox ref={ref} {...props} />}
-        label={label}
-        sx={{
-          '& .MuiFormControlLabel-label': {
-            fontSize: '0.875rem',
-          },
-        }}
-      />
-    )
-  }
+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 <MuiCheckbox ref={ref} {...props} />
+  return (
+    <FakemuiCheckbox
+      ref={ref}
+      label={label}
+      className={combinedClassName}
+      {...props}
+    />
+  )
 })
 
 Checkbox.displayName = 'Checkbox'
diff --git a/packages/role_editor/seed/metadata.json b/packages/role_editor/seed/metadata.json
new file mode 100644
index 000000000..f044c26f9
--- /dev/null
+++ b/packages/role_editor/seed/metadata.json
@@ -0,0 +1,32 @@
+{
+  "packageId": "role_editor",
+  "name": "Role Editor",
+  "version": "1.0.0",
+  "description": "User role management and permission configuration UI",
+  "icon": "static_content/icon.svg",
+  "author": "MetaBuilder",
+  "category": "ui",
+  "dependencies": [],
+  "devDependencies": ["lua_test"],
+  "exports": {
+    "components": [
+      "RoleEditor",
+      "RoleCard"
+    ],
+    "scripts": [
+      "role",
+      "config"
+    ]
+  },
+  "tests": {
+    "scripts": [
+      "tests/role.test.lua",
+      "tests/config.test.lua"
+    ],
+    "cases": [
+      "tests/role.cases.json",
+      "tests/config.cases.json"
+    ]
+  },
+  "minLevel": 3
+}