diff --git a/ui/src/components/DeploymentStatusBadge.tsx b/ui/src/components/DeploymentStatusBadge.tsx
new file mode 100644
index 0000000..13965cf
--- /dev/null
+++ b/ui/src/components/DeploymentStatusBadge.tsx
@@ -0,0 +1,15 @@
+import { Badge } from '@cameleer/design-system';
+
+// Badge color values: 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto'
+const STATUS_COLORS: Record<string, 'primary' | 'success' | 'warning' | 'error' | 'running' | 'auto'> = {
+  BUILDING: 'warning',
+  STARTING: 'warning',
+  RUNNING: 'running',
+  FAILED: 'error',
+  STOPPED: 'auto',
+};
+
+export function DeploymentStatusBadge({ status }: { status: string }) {
+  const color = STATUS_COLORS[status] ?? 'auto';
+  return <Badge label={status} color={color} />;
+}
diff --git a/ui/src/components/RequirePermission.tsx b/ui/src/components/RequirePermission.tsx
new file mode 100644
index 0000000..f870bf6
--- /dev/null
+++ b/ui/src/components/RequirePermission.tsx
@@ -0,0 +1,13 @@
+import { usePermissions } from '../hooks/usePermissions';
+
+interface Props {
+  permission: string;
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}
+
+export function RequirePermission({ permission, children, fallback }: Props) {
+  const { has } = usePermissions();
+  if (!has(permission)) return fallback ? <>{fallback}</> : null;
+  return <>{children}</>;
+}
diff --git a/ui/src/hooks/usePermissions.ts b/ui/src/hooks/usePermissions.ts
new file mode 100644
index 0000000..6fd5a82
--- /dev/null
+++ b/ui/src/hooks/usePermissions.ts
@@ -0,0 +1,27 @@
+import { useAuthStore } from '../auth/auth-store';
+
+const ROLE_PERMISSIONS: Record<string, string[]> = {
+  OWNER: ['tenant:manage', 'billing:manage', 'team:manage', 'apps:manage', 'apps:deploy', 'secrets:manage', 'observe:read', 'observe:debug', 'settings:manage'],
+  ADMIN: ['team:manage', 'apps:manage', 'apps:deploy', 'secrets:manage', 'observe:read', 'observe:debug', 'settings:manage'],
+  DEVELOPER: ['apps:deploy', 'secrets:manage', 'observe:read', 'observe:debug'],
+  VIEWER: ['observe:read'],
+};
+
+export function usePermissions() {
+  const roles = useAuthStore((s) => s.roles);
+
+  const permissions = new Set<string>();
+  for (const role of roles) {
+    const perms = ROLE_PERMISSIONS[role];
+    if (perms) perms.forEach((p) => permissions.add(p));
+  }
+
+  return {
+    has: (permission: string) => permissions.has(permission),
+    canManageApps: permissions.has('apps:manage'),
+    canDeploy: permissions.has('apps:deploy'),
+    canManageTenant: permissions.has('tenant:manage'),
+    canViewObservability: permissions.has('observe:read'),
+    roles,
+  };
+}