diff --git a/src/pages/_layout/client/$clientId/update.tsx b/src/pages/_layout/client/$clientId/update.tsx
index c3ddf20..85cb947 100644
--- a/src/pages/_layout/client/$clientId/update.tsx
+++ b/src/pages/_layout/client/$clientId/update.tsx
@@ -41,7 +41,7 @@ import { queryClient } from '@/pages/__root'
 import { Skeleton } from '@/components/ui/skeleton'
 import styles from '@/styles/global.module.css'
 import { useToken } from '@/lib/context/login'
-import { redirect } from '@tanstack/react-router'
+// import { redirect } from '@tanstack/react-router'
 import { ScrollArea } from '@/components/ui/scroll-area'
 import { ScrollBar } from '@/components/ui/scroll-area'
 
@@ -58,13 +58,15 @@ export const getClientByIdOpt = ({ clientId }: { clientId: string }) => ({
 export const Route = createFileRoute('/_layout/client/$clientId/update')({
   component: UpdateClientById,
   loader: async ({ params }) => {
-    const { rol, userId } = useToken.getState()
     const data = queryClient.ensureQueryData(
       queryOptions(getClientByIdOpt(params))
     )
-    const ownerId = (await data)?.owner.id
-    if (ownerId !== userId && rol?.rolName !== 'Administrador')
-      throw redirect({ to: '/client' })
+
+    // TOOD: change this of site infer in the charge
+    // const { rol, userId } = useToken.getState()
+    // const ownerId = (await data)?.owner.id
+    // if (ownerId !== userId && rol?.rolName !== 'Administrador')
+    //   throw redirect({ to: '/client' })
 
     return { client: defer(data) }
   },
@@ -91,7 +93,7 @@ export function UpdateClientById() {
   const init = useRef(client)
 
   useEffect(() => {
-    if (!clientRes) throw Error()
+    if (!clientRes && isError) throw Error()
   }, [isError])
 
   const onSuccess = (data: TCLIENT_POST) => {
@@ -256,197 +258,202 @@ export function UpdateClientById() {
             {text.title({ state: !checked })}
           </DialogTitle>
           <Separator />
-          <DialogDescription className="text-xs text-start md:text-base text-muted-foreground">
+          <DialogDescription className="text-start text-xs text-muted-foreground md:text-base">
             {text.description({ state: !checked })}
           </DialogDescription>
         </DialogHeader>
-        <ScrollArea className='overflow-y-auto h-[60dvh] md:h-full'>
-        <ScrollBar orientation='vertical' />
-        <form
-          autoFocus={false}
-          autoComplete="off"
-          ref={form}
-          onSubmit={onSubmit}
-          onChange={onChange}
-          id="update-client"
-          className={clsx(
-            'p-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>label:last-child]:col-span-full [&>label]:space-y-2 [&_*:disabled]:cursor-text [&_*:disabled]:opacity-100',
-            {
-              '[&>label>span]:font-bold': checked,
-            }
-          )}
-        >
-          <Label>
-            <span>{text.form.firstName.label}</span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                disabled={!checked}
-                name={'nombres' as TFormName}
-                type="text"
-                defaultValue={clientRes?.nombres}
-                pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
-                placeholder={
-                  checked ? text.form.firstName.placeholder : undefined
-                }
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.lastName.label} </span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                disabled={!checked}
-                name={'apellidos' as TFormName}
-                type="text"
-                defaultValue={clientRes?.apellidos}
-                pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
-                placeholder={
-                  checked ? text.form.lastName.placeholder : undefined
-                }
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.id.label} </span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                disabled={!checked}
-                name={'numero_de_identificacion' as TFormName}
-                type="text"
-                defaultValue={clientRes?.numero_de_identificacion}
-                placeholder={checked ? text.form.id.placeholder : undefined}
-                pattern="[A-Za-z0-9]{6,12}"
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.typeId.label} </span>
-            {!isSuccess || !clientRes ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Select
-                defaultValue={
-                  '' + getIdById({ id: clientRes?.tipo_de_identificacion })?.id
-                }
-                disabled={!checked}
-                required
-                name={'tipo_de_identificacion' as TFormName}
-              >
-                <SelectTrigger className={clsx('w-full')}>
-                  <SelectValue placeholder={text.form.typeId.placeholder} />
-                </SelectTrigger>
-                <SelectContent className="[&_*]:cursor-pointer">
-                  {listIds()?.map(({ id, nombre }, index) => (
-                    <SelectItem key={index} value={'' + id}>
-                      {nombre}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.phone.label} </span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                disabled={!checked}
-                name={'celular' as TFormName}
-                type="tel"
-                defaultValue={clientRes?.celular}
-                pattern="(?:\+57|0)[0-9]{8}"
-                placeholder={checked ? text.form.phone.placeholder : undefined}
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.telephone.label} </span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                disabled={!checked}
-                name={'telefono' as TFormName}
-                type="tel"
-                defaultValue={clientRes?.telefono}
-                pattern="(?:\+57|0)[0-9]{6,7}"
-                placeholder={
-                  checked ? text.form.telephone.placeholder : undefined
-                }
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.direction.label}</span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                disabled={!checked}
-                name={'direccion' as TFormName}
-                type="text"
-                defaultValue={clientRes?.direccion}
-                placeholder={
-                  checked ? text.form.direction.placeholder : undefined
-                }
-              />
+        <ScrollArea className="h-[60dvh] overflow-y-auto md:h-full">
+          <ScrollBar orientation="vertical" />
+          <form
+            autoFocus={false}
+            autoComplete="off"
+            ref={form}
+            onSubmit={onSubmit}
+            onChange={onChange}
+            id="update-client"
+            className={clsx(
+              'grid-rows-subgrid grid grid-cols-none gap-3 gap-y-4 p-1 md:grid-cols-2 [&>label:last-child]:col-span-full [&>label]:space-y-2 [&_*:disabled]:cursor-text [&_*:disabled]:opacity-100',
+              {
+                '[&>label>span]:font-bold': checked,
+              }
             )}
-          </Label>
-          <Label>
-            <span>{text.form.ref.label}</span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <>
+          >
+            <Label>
+              <span>{text.form.firstName.label}</span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
                 <Input
+                  required
                   disabled={!checked}
-                  name={'referencia' as TFormName}
-                  list="client-referent"
+                  name={'nombres' as TFormName}
                   type="text"
-                  defaultValue={ref?.fullName}
-                  placeholder={checked ? text.form.ref.placeholder : undefined}
-                  pattern={`(${clients
-                    ?.map(({ fullName }) => fullName?.replace(/\s+/g, '\\s+'))
-                    ?.join('|')})`}
+                  defaultValue={clientRes?.nombres}
+                  pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
+                  placeholder={
+                    checked ? text.form.firstName.placeholder : undefined
+                  }
                 />
-                <datalist id="client-referent">
-                  {clients?.map(({ fullName }, index) => (
-                    <option key={index} value={fullName} />
-                  ))}
-                </datalist>
-              </>
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.comment.label}</span>
-            {!isSuccess ? (
-              <Skeleton className="h-28 w-full" />
-            ) : (
-              <Textarea
-                rows={5}
-                name={'comentarios' as TFormName}
-                placeholder={text.form.comment.placeholder}
-                defaultValue={clientRes?.comentarios}
-                disabled={!checked}
-              />
-            )}
-          </Label>
-        </form>
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.lastName.label} </span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  disabled={!checked}
+                  name={'apellidos' as TFormName}
+                  type="text"
+                  defaultValue={clientRes?.apellidos}
+                  pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
+                  placeholder={
+                    checked ? text.form.lastName.placeholder : undefined
+                  }
+                />
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.id.label} </span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  disabled={!checked}
+                  name={'numero_de_identificacion' as TFormName}
+                  type="text"
+                  defaultValue={clientRes?.numero_de_identificacion}
+                  placeholder={checked ? text.form.id.placeholder : undefined}
+                  pattern="[A-Za-z0-9]{6,12}"
+                />
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.typeId.label} </span>
+              {!isSuccess || !clientRes ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Select
+                  defaultValue={
+                    '' +
+                    getIdById({ id: clientRes?.tipo_de_identificacion })?.id
+                  }
+                  disabled={!checked}
+                  required
+                  name={'tipo_de_identificacion' as TFormName}
+                >
+                  <SelectTrigger className={clsx('w-full')}>
+                    <SelectValue placeholder={text.form.typeId.placeholder} />
+                  </SelectTrigger>
+                  <SelectContent className="[&_*]:cursor-pointer">
+                    {listIds()?.map(({ id, nombre }, index) => (
+                      <SelectItem key={index} value={'' + id}>
+                        {nombre}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.phone.label} </span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  disabled={!checked}
+                  name={'celular' as TFormName}
+                  type="tel"
+                  defaultValue={clientRes?.celular}
+                  pattern="(?:\+57|0)[0-9]{8}"
+                  placeholder={
+                    checked ? text.form.phone.placeholder : undefined
+                  }
+                />
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.telephone.label} </span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  disabled={!checked}
+                  name={'telefono' as TFormName}
+                  type="tel"
+                  defaultValue={clientRes?.telefono}
+                  pattern="(?:\+57|0)[0-9]{6,7}"
+                  placeholder={
+                    checked ? text.form.telephone.placeholder : undefined
+                  }
+                />
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.direction.label}</span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  disabled={!checked}
+                  name={'direccion' as TFormName}
+                  type="text"
+                  defaultValue={clientRes?.direccion}
+                  placeholder={
+                    checked ? text.form.direction.placeholder : undefined
+                  }
+                />
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.ref.label}</span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <>
+                  <Input
+                    disabled={!checked}
+                    name={'referencia' as TFormName}
+                    list="client-referent"
+                    type="text"
+                    defaultValue={ref?.fullName}
+                    placeholder={
+                      checked ? text.form.ref.placeholder : undefined
+                    }
+                    pattern={`(${clients
+                      ?.map(({ fullName }) => fullName?.replace(/\s+/g, '\\s+'))
+                      ?.join('|')})`}
+                  />
+                  <datalist id="client-referent">
+                    {clients?.map(({ fullName }, index) => (
+                      <option key={index} value={fullName} />
+                    ))}
+                  </datalist>
+                </>
+              )}
+            </Label>
+            <Label>
+              <span>{text.form.comment.label}</span>
+              {!isSuccess ? (
+                <Skeleton className="h-28 w-full" />
+              ) : (
+                <Textarea
+                  rows={5}
+                  name={'comentarios' as TFormName}
+                  placeholder={text.form.comment.placeholder}
+                  defaultValue={clientRes?.comentarios}
+                  disabled={!checked}
+                />
+              )}
+            </Label>
+          </form>
         </ScrollArea>
-        <DialogFooter className="!justify-between gap-2 flex-row">
+        <DialogFooter className="flex-row !justify-between gap-2">
           <div
             className={clsx('flex items-center gap-2 font-bold italic', {
               invisible: !userId || rol?.rolName !== 'Administrador',
@@ -454,8 +461,8 @@ export function UpdateClientById() {
           >
             {!isSuccess ? (
               <>
-                <Skeleton className="h-10 w-12" />
-                <Skeleton className="h-10 w-16" />
+                <Skeleton className="h-6 w-16 rounded-full md:h-8 md:w-12" />
+                <Skeleton className="h-6 w-16 rounded-full md:h-8 md:w-14" />
               </>
             ) : (
               <>
@@ -473,8 +480,8 @@ export function UpdateClientById() {
           <div className="space-x-2">
             {!isSuccess ? (
               <>
-                <Skeleton className="inline-block h-12 w-24" />
-                <Skeleton className="inline-block h-12 w-24" />
+                <Skeleton className="inline-block h-10 w-20 md:h-12 md:w-24" />
+                <Skeleton className="inline-block h-10 w-20 md:h-12 md:w-24" />
               </>
             ) : (
               <>
diff --git a/src/pages/_layout/user/$userId/update.tsx b/src/pages/_layout/user/$userId/update.tsx
index edf78bc..7908815 100644
--- a/src/pages/_layout/user/$userId/update.tsx
+++ b/src/pages/_layout/user/$userId/update.tsx
@@ -29,7 +29,14 @@ import { SpinLoader } from '@/components/ui/loader'
 import { queryClient } from '@/pages/__root'
 import { useToken } from '@/lib/context/login'
 import { Link } from '@tanstack/react-router'
-import { DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import {
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
 import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area'
 
@@ -248,161 +255,165 @@ export function UpdateUserById() {
       {!open && <Navigate to={'../../'} />}
       <DialogContent className="max-w-lg">
         <DialogHeader>
-          <DialogTitle className="text-start text-xl md:text-2xl">{text.title}</DialogTitle>
+          <DialogTitle className="text-start text-xl md:text-2xl">
+            {text.title}
+          </DialogTitle>
           <Separator />
-          <DialogDescription className='text-xs text-start md:text-base text-muted-foreground'>{text.descriiption}</DialogDescription>
+          <DialogDescription className="text-start text-xs text-muted-foreground md:text-base">
+            {text.descriiption}
+          </DialogDescription>
         </DialogHeader>
-        <ScrollArea className='overflow-y-auto h-[60dvh] md:h-full'>
-        <ScrollBar orientation='vertical' />
-        <form
-          autoFocus={false}
-          autoComplete="off"
-          ref={form}
-          onSubmit={onSubmit}
-          onChange={onChange}
-          id="update-user"
-          className={clsx(
-            'p-1 grid-rows-subgrid grid md:grid-cols-2 grid-cols-none gap-3 gap-y-4 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
-            {
-              '[&_*:disabled]:opacity-100':
-                !!userId && rol?.rolName !== 'Administrador',
-            }
-          )}
-        >
-          <Label className="!col-span-1">
-            <span>{text.form.firstName.label}</span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                name={'firstName' as TFormName}
-                type="text"
-                placeholder={text.form.firstName.placeholder}
-                defaultValue={userRes?.nombre.split(' ')?.at(0)}
-                onChange={onChangeName('firstName')}
-                pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
-              />
-            )}
-          </Label>
-          <Label className="!col-span-1">
-            <span>{text.form.lastName.label} </span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Input
-                required
-                name={'lastName' as TFormName}
-                type="text"
-                placeholder={text.form.lastName.placeholder}
-                defaultValue={userRes?.nombre.split(' ')?.at(1)}
-                onChange={onChangeName('lastName')}
-                pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
-              />
-            )}
-          </Label>
-          <Label>
-            <span>{text.form.rol.label} </span>
-            {!isSuccess ? (
-              <Skeleton className="h-10 w-full" />
-            ) : (
-              <Select
-                required
-                name={'rol' as TFormName}
-                defaultValue={
-                  '' + getRolByName({ rolName: userRes?.rol as TROLES })?.id
-                }
-              >
-                <SelectTrigger className="w-full">
-                  <SelectValue placeholder={text.form.rol.placeholder} />
-                </SelectTrigger>
-                <SelectContent className="[&_*]:cursor-pointer">
-                  {listRols()?.map(({ id, nombre }) => (
-                    <SelectItem key={id} value={'' + id}>
-                      {nombre}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
+        <ScrollArea className="h-[60dvh] overflow-y-auto md:h-full">
+          <ScrollBar orientation="vertical" />
+          <form
+            autoFocus={false}
+            autoComplete="off"
+            ref={form}
+            onSubmit={onSubmit}
+            onChange={onChange}
+            id="update-user"
+            className={clsx(
+              'grid-rows-subgrid grid grid-cols-none gap-3 gap-y-4 p-1 md:grid-cols-2 [&>*]:col-span-full [&>:is(label,div)]:space-y-2 [&_label>span]:font-bold',
+              {
+                '[&_*:disabled]:opacity-100':
+                  !!userId && rol?.rolName !== 'Administrador',
+              }
             )}
-          </Label>
-          <div>
-            <Label htmlFor="user-password">
-              <span>{text.form.password.current.label} </span>
+          >
+            <Label className="!col-span-1">
+              <span>{text.form.firstName.label}</span>
+              {!isSuccess ? (
+                <Skeleton className="h-10 w-full" />
+              ) : (
+                <Input
+                  required
+                  name={'firstName' as TFormName}
+                  type="text"
+                  placeholder={text.form.firstName.placeholder}
+                  defaultValue={userRes?.nombre.split(' ')?.at(0)}
+                  onChange={onChangeName('firstName')}
+                  pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
+                />
+              )}
             </Label>
-            <div className="flex flex-row-reverse items-center gap-x-2">
+            <Label className="!col-span-1">
+              <span>{text.form.lastName.label} </span>
               {!isSuccess ? (
-                <>
-                  <Skeleton className="h-10 w-10" />
-                  <Skeleton className="h-10 w-full" />
-                </>
+                <Skeleton className="h-10 w-full" />
               ) : (
-                <>
-                  <Button
-                    type="button"
-                    className="w-fit p-1.5"
-                    onClick={onClick('password')}
-                    variant={!visibility.password ? 'outline' : 'default'}
-                  >
-                    {!visibility.password ? <Eye /> : <EyeOff />}
-                  </Button>
-                  <Input
-                    id="user-password"
-                    name={'password' as TFormName}
-                    type={!visibility.password ? 'password' : 'text'}
-                    placeholder={text.form.password.current.placeholder}
-                    defaultValue={password?.password}
-                    onChange={onChangePassword}
-                    pattern="^.{6,}$"
-                  />
-                </>
+                <Input
+                  required
+                  name={'lastName' as TFormName}
+                  type="text"
+                  placeholder={text.form.lastName.placeholder}
+                  defaultValue={userRes?.nombre.split(' ')?.at(1)}
+                  onChange={onChangeName('lastName')}
+                  pattern="^[a-zA-Z]+(?: [a-zA-Z]+)?$"
+                />
               )}
-            </div>
-          </div>
-          <div>
-            <Label htmlFor="user-new">
-              <span>{text.form.password.new.label} </span>
             </Label>
-            <div className="flex flex-row-reverse items-center gap-x-2">
+            <Label>
+              <span>{text.form.rol.label} </span>
               {!isSuccess ? (
-                <>
-                  <Skeleton className="h-10 w-10" />
-                  <Skeleton className="h-10 w-full" />
-                </>
+                <Skeleton className="h-10 w-full" />
               ) : (
-                <>
-                  <Button
-                    type="button"
-                    className="w-fit p-1.5"
-                    onClick={onClick('confirmation')}
-                    variant={!visibility.confirmation ? 'outline' : 'default'}
-                  >
-                    {!visibility.confirmation ? <Eye /> : <EyeOff />}
-                  </Button>
-                  <Input
-                    id="user-new"
-                    name={'newPassword' as TFormName}
-                    required={!!password?.password}
-                    type={!visibility.confirmation ? 'password' : 'text'}
-                    placeholder={text.form.password.new.placeholder}
-                    defaultValue={password?.confirmation}
-                    onChange={onChangePassword}
-                    pattern={password?.password}
-                  />
-                </>
+                <Select
+                  required
+                  name={'rol' as TFormName}
+                  defaultValue={
+                    '' + getRolByName({ rolName: userRes?.rol as TROLES })?.id
+                  }
+                >
+                  <SelectTrigger className="w-full">
+                    <SelectValue placeholder={text.form.rol.placeholder} />
+                  </SelectTrigger>
+                  <SelectContent className="[&_*]:cursor-pointer">
+                    {listRols()?.map(({ id, nombre }) => (
+                      <SelectItem key={id} value={'' + id}>
+                        {nombre}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
               )}
+            </Label>
+            <div>
+              <Label htmlFor="user-password">
+                <span>{text.form.password.current.label} </span>
+              </Label>
+              <div className="flex flex-row-reverse items-center gap-x-2">
+                {!isSuccess ? (
+                  <>
+                    <Skeleton className="h-10 w-10" />
+                    <Skeleton className="h-10 w-full" />
+                  </>
+                ) : (
+                  <>
+                    <Button
+                      type="button"
+                      className="w-fit p-1.5"
+                      onClick={onClick('password')}
+                      variant={!visibility.password ? 'outline' : 'default'}
+                    >
+                      {!visibility.password ? <Eye /> : <EyeOff />}
+                    </Button>
+                    <Input
+                      id="user-password"
+                      name={'password' as TFormName}
+                      type={!visibility.password ? 'password' : 'text'}
+                      placeholder={text.form.password.current.placeholder}
+                      defaultValue={password?.password}
+                      onChange={onChangePassword}
+                      pattern="^.{6,}$"
+                    />
+                  </>
+                )}
+              </div>
+            </div>
+            <div>
+              <Label htmlFor="user-new">
+                <span>{text.form.password.new.label} </span>
+              </Label>
+              <div className="flex flex-row-reverse items-center gap-x-2">
+                {!isSuccess ? (
+                  <>
+                    <Skeleton className="h-10 w-10" />
+                    <Skeleton className="h-10 w-full" />
+                  </>
+                ) : (
+                  <>
+                    <Button
+                      type="button"
+                      className="w-fit p-1.5"
+                      onClick={onClick('confirmation')}
+                      variant={!visibility.confirmation ? 'outline' : 'default'}
+                    >
+                      {!visibility.confirmation ? <Eye /> : <EyeOff />}
+                    </Button>
+                    <Input
+                      id="user-new"
+                      name={'newPassword' as TFormName}
+                      required={!!password?.password}
+                      type={!visibility.confirmation ? 'password' : 'text'}
+                      placeholder={text.form.password.new.placeholder}
+                      defaultValue={password?.confirmation}
+                      onChange={onChangePassword}
+                      pattern={password?.password}
+                    />
+                  </>
+                )}
+              </div>
             </div>
-          </div>
-        </form>
+          </form>
         </ScrollArea>
-        <DialogFooter className="justify-start gap-2 flex-col md:flex-row">
+        <DialogFooter className="flex-col justify-start gap-2 md:flex-row">
           {!isSuccess ? (
             <>
               {currentUserId === +userId && (
-                <Skeleton className="me-auto h-12 w-40" />
+                <Skeleton className="me-auto h-12 w-full md:w-40" />
               )}
-              <Skeleton className="h-12 w-24" />
-              <Skeleton className="h-12 w-24" />
+              <Skeleton className="h-12 w-full md:w-24" />
+              <Skeleton className="h-12 w-full md:w-24" />
             </>
           ) : (
             <>