diff --git a/src/web/src/features/users/pages/UserEditPage.tsx b/src/web/src/features/users/pages/UserEditPage.tsx
index 8ac581d..78605e7 100644
--- a/src/web/src/features/users/pages/UserEditPage.tsx
+++ b/src/web/src/features/users/pages/UserEditPage.tsx
@@ -8,6 +8,7 @@ import { AlertCircle } from 'lucide-react'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Alert, AlertDescription } from '@/components/ui/alert'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
 import {
   Form,
   FormControl,
@@ -19,6 +20,7 @@ import {
 import { useUser } from '../hooks/useUser'
 import { useUpdateUser } from '../hooks/useUpdateUser'
 import { ResetPasswordModal } from '../components/ResetPasswordModal'
+import { PermisosEditor } from '../components/PermisosEditor'
 import { useAuthStore } from '@/stores/authStore'
 
 const editSchema = z.object({
@@ -111,12 +113,14 @@ export function UserEditPage() {
     )
   }
 
+  const isSelf = loggedUserId === userId
+
   return (
     <div className="max-w-xl space-y-6">
       <div className="flex items-center justify-between">
         <h1 className="text-xl font-semibold">Editar Usuario</h1>
         <div className="flex items-center gap-2">
-          {loggedUserId !== userId && <ResetPasswordModal userId={userId} />}
+          {!isSelf && <ResetPasswordModal userId={userId} />}
           <Button variant="ghost" size="sm" onClick={() => navigate('/usuarios')}>
             Volver
           </Button>
@@ -129,105 +133,120 @@ export function UserEditPage() {
         <p className="text-sm font-mono bg-muted rounded px-3 py-2">{user.username}</p>
       </div>
 
-      <Form {...form}>
-        <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4" noValidate>
-          {backendError && (
-            <Alert variant="destructive">
-              <AlertCircle className="h-4 w-4" />
-              <AlertDescription>{backendError}</AlertDescription>
-            </Alert>
-          )}
+      <Tabs defaultValue="perfil">
+        <TabsList>
+          <TabsTrigger value="perfil">Perfil</TabsTrigger>
+          <TabsTrigger value="permisos" disabled={isSelf}>
+            Permisos
+          </TabsTrigger>
+        </TabsList>
 
-          <FormField
-            control={form.control}
-            name="nombre"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Nombre</FormLabel>
-                <FormControl>
-                  <Input {...field} disabled={isPending} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+        <TabsContent value="perfil">
+          <Form {...form}>
+            <form onSubmit={form.handleSubmit(handleSubmit)} className="space-y-4" noValidate>
+              {backendError && (
+                <Alert variant="destructive">
+                  <AlertCircle className="h-4 w-4" />
+                  <AlertDescription>{backendError}</AlertDescription>
+                </Alert>
+              )}
 
-          <FormField
-            control={form.control}
-            name="apellido"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Apellido</FormLabel>
-                <FormControl>
-                  <Input {...field} disabled={isPending} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+              <FormField
+                control={form.control}
+                name="nombre"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Nombre</FormLabel>
+                    <FormControl>
+                      <Input {...field} disabled={isPending} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-          <FormField
-            control={form.control}
-            name="email"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Email (opcional)</FormLabel>
-                <FormControl>
-                  <Input {...field} type="email" disabled={isPending} />
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+              <FormField
+                control={form.control}
+                name="apellido"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Apellido</FormLabel>
+                    <FormControl>
+                      <Input {...field} disabled={isPending} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-          <FormField
-            control={form.control}
-            name="rol"
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Rol</FormLabel>
-                <FormControl>
-                  <select
-                    {...field}
-                    disabled={isPending}
-                    aria-label="Rol"
-                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-                  >
-                    <option value="admin">Admin</option>
-                    <option value="cajero">Cajero</option>
-                    <option value="reportes">Reportes</option>
-                  </select>
-                </FormControl>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
+              <FormField
+                control={form.control}
+                name="email"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email (opcional)</FormLabel>
+                    <FormControl>
+                      <Input {...field} type="email" disabled={isPending} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-          <FormField
-            control={form.control}
-            name="activo"
-            render={({ field }) => (
-              <FormItem className="flex flex-row items-center gap-3">
-                <FormControl>
-                  <input
-                    type="checkbox"
-                    checked={field.value}
-                    onChange={field.onChange}
-                    disabled={isPending}
-                    aria-label="Activo"
-                    className="h-4 w-4"
-                  />
-                </FormControl>
-                <FormLabel className="!mt-0">Activo</FormLabel>
-              </FormItem>
-            )}
-          />
+              <FormField
+                control={form.control}
+                name="rol"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Rol</FormLabel>
+                    <FormControl>
+                      <select
+                        {...field}
+                        disabled={isPending}
+                        aria-label="Rol"
+                        className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+                      >
+                        <option value="admin">Admin</option>
+                        <option value="cajero">Cajero</option>
+                        <option value="reportes">Reportes</option>
+                      </select>
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
 
-          <Button type="submit" disabled={isPending} className="w-full">
-            {isPending ? 'Guardando...' : 'Guardar cambios'}
-          </Button>
-        </form>
-      </Form>
+              <FormField
+                control={form.control}
+                name="activo"
+                render={({ field }) => (
+                  <FormItem className="flex flex-row items-center gap-3">
+                    <FormControl>
+                      <input
+                        type="checkbox"
+                        checked={field.value}
+                        onChange={field.onChange}
+                        disabled={isPending}
+                        aria-label="Activo"
+                        className="h-4 w-4"
+                      />
+                    </FormControl>
+                    <FormLabel className="!mt-0">Activo</FormLabel>
+                  </FormItem>
+                )}
+              />
+
+              <Button type="submit" disabled={isPending} className="w-full">
+                {isPending ? 'Guardando...' : 'Guardar cambios'}
+              </Button>
+            </form>
+          </Form>
+        </TabsContent>
+
+        <TabsContent value="permisos">
+          <PermisosEditor userId={userId} />
+        </TabsContent>
+      </Tabs>
     </div>
   )
 }
diff --git a/src/web/src/tests/features/users/UserEditPage.test.tsx b/src/web/src/tests/features/users/UserEditPage.test.tsx
index 5b8882c..c9284c4 100644
--- a/src/web/src/tests/features/users/UserEditPage.test.tsx
+++ b/src/web/src/tests/features/users/UserEditPage.test.tsx
@@ -162,4 +162,40 @@ describe('UserEditPage', () => {
     await waitFor(() => expect(screen.getByDisplayValue('Juan')).toBeInTheDocument())
     expect(screen.queryByRole('button', { name: /resetear contraseña/i })).not.toBeInTheDocument()
   })
+
+  // FP-01: tabs Perfil and Permisos visible when editing another user
+  it('shows tabs "Perfil" and "Permisos" when editing another user', async () => {
+    server.use(
+      http.get(`${API_URL}/api/v1/users/5`, () => HttpResponse.json(mockUserDetail)),
+      http.get(`${API_URL}/api/v1/users/5/permisos`, () =>
+        HttpResponse.json({
+          usuarioId: 5, rol: 'cajero', rolPermisos: [], grant: [], deny: [], effective: [],
+        }),
+      ),
+      http.get(`${API_URL}/api/v1/permisos`, () => HttpResponse.json([])),
+    )
+
+    renderEditPage(5)
+
+    await waitFor(() => expect(screen.getByDisplayValue('Juan')).toBeInTheDocument())
+
+    expect(screen.getByRole('tab', { name: /perfil/i })).toBeInTheDocument()
+    expect(screen.getByRole('tab', { name: /permisos/i })).toBeInTheDocument()
+  })
+
+  // FP-10: self-edit — tab Permisos is disabled
+  it('disables tab "Permisos" when editing own profile (self-edit)', async () => {
+    server.use(
+      http.get(`${API_URL}/api/v1/users/1`, () =>
+        HttpResponse.json({ ...mockUserDetail, id: 1, username: 'admin' }),
+      ),
+    )
+
+    renderEditPage(1)
+
+    await waitFor(() => expect(screen.getByDisplayValue('Juan')).toBeInTheDocument())
+
+    const permisosTab = screen.getByRole('tab', { name: /permisos/i })
+    expect(permisosTab).toBeDisabled()
+  })
 })