diff --git a/apps/web/src/components/AuthButton.tsx b/apps/web/src/components/AuthButton.tsx
new file mode 100644
index 0000000..31b9c81
--- /dev/null
+++ b/apps/web/src/components/AuthButton.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { usePermission } from '../hooks/usePermission';
+
+interface AuthButtonProps {
+  code: string;
+  children: ReactNode;
+}
+
+export function AuthButton({ code, children }: AuthButtonProps) {
+  const { hasPermission } = usePermission(code);
+  if (!hasPermission) return null;
+  return <>{children}</>;
+}
diff --git a/apps/web/src/components/AuthGuard.tsx b/apps/web/src/components/AuthGuard.tsx
new file mode 100644
index 0000000..aad6ffe
--- /dev/null
+++ b/apps/web/src/components/AuthGuard.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react';
+import { usePermission } from '../hooks/usePermission';
+
+interface AuthGuardProps {
+  code: string;
+  children: ReactNode;
+}
+
+export function AuthGuard({ code, children }: AuthGuardProps) {
+  const { hasPermission } = usePermission(code);
+  if (!hasPermission) return null;
+  return <>{children}</>;
+}
diff --git a/apps/web/src/hooks/usePermission.ts b/apps/web/src/hooks/usePermission.ts
new file mode 100644
index 0000000..8d11f9a
--- /dev/null
+++ b/apps/web/src/hooks/usePermission.ts
@@ -0,0 +1,6 @@
+import { useAuthStore } from '../stores/auth';
+
+export function usePermission(code: string): { hasPermission: boolean } {
+  const permissions = useAuthStore((s) => s.permissions);
+  return { hasPermission: permissions.includes(code) };
+}