diff --git a/frontend/src/components/layout/ProtectedRoute.tsx b/frontend/src/components/layout/ProtectedRoute.tsx
index c950345e..96163c44 100644
--- a/frontend/src/components/layout/ProtectedRoute.tsx
+++ b/frontend/src/components/layout/ProtectedRoute.tsx
@@ -1,13 +1,16 @@
 import { Navigate, useLocation } from 'react-router-dom'
 import { useAuthStore } from '@/store/authStore'
+import { usePermissions, type EffectiveRole } from '@/hooks/usePermissions'
 
 interface ProtectedRouteProps {
+  requiredRole?: EffectiveRole
   children: React.ReactNode
 }
 
-export function ProtectedRoute({ children }: ProtectedRouteProps) {
+export function ProtectedRoute({ requiredRole, children }: ProtectedRouteProps) {
   const { isAuthenticated, isLoading } = useAuthStore()
   const location = useLocation()
+  const { effectiveRole } = usePermissions()
 
   if (isLoading) {
     return (
@@ -21,6 +24,18 @@ export function ProtectedRoute({ children }: ProtectedRouteProps) {
     return <Navigate to="/login" state={{ from: location }} replace />
   }
 
+  if (requiredRole) {
+    const ROLE_HIERARCHY: Record<EffectiveRole, number> = {
+      super_admin: 4,
+      team_admin: 3,
+      engineer: 2,
+      viewer: 1,
+    }
+    if (ROLE_HIERARCHY[effectiveRole] < ROLE_HIERARCHY[requiredRole]) {
+      return <Navigate to="/trees" replace />
+    }
+  }
+
   return <>{children}</>
 }