diff --git a/src/app/(admins)/user/usuarios/page.tsx b/src/app/(admins)/user/usuarios/page.tsx
index 540c060..a4b791d 100644
--- a/src/app/(admins)/user/usuarios/page.tsx
+++ b/src/app/(admins)/user/usuarios/page.tsx
@@ -1,12 +1,158 @@
 'use client';
 import Button from '@/components/button';
 import Table, { Header } from '@/components/table';
+const Modal = dynamic(() => import('@/components/modal'), { ssr: false });
 import { useGetApi } from '@/hooks/use-get-api';
 import { Administrador } from '@/types/administradores';
-import React from 'react';
+import React, { useState } from 'react';
+import axiosInstance from '@/utils/api-config';
+import dynamic from 'next/dynamic';
 
 export default function Page() {
-  const { data } = useGetApi<Administrador[]>('/administrador');
+  const { data, setData } = useGetApi<Administrador[]>('/administrador');
+
+  // Estado del modal
+  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [modalMode, setModalMode] = useState<'add' | 'edit'>('add');
+  const [selectedUser, setSelectedUser] = useState<Administrador | null>(null);
+
+  // Estado del modal de eliminación
+  const [isDeleteModalVisible, setIsDeleteModalVisible] = useState(false);
+  const [userToDelete, setUserToDelete] = useState<Administrador | null>(null);
+
+  // Estado del formulario
+  const [formData, setFormData] = useState({
+    nombre_usuario: '',
+    correo: '',
+    password: '',
+    id_tipo_user: '',
+  });
+
+  // Handlers del modal
+  const handleOpenAddModal = () => {
+    setModalMode('add');
+    setSelectedUser(null);
+    setFormData({
+      nombre_usuario: '',
+      correo: '',
+      password: '',
+      id_tipo_user: '',
+    });
+    setIsModalVisible(true);
+  };
+
+  const handleOpenEditModal = (user: Administrador) => {
+    setModalMode('edit');
+    setSelectedUser(user);
+    setFormData({
+      nombre_usuario: user.nombre_usuario,
+      correo: user.correo,
+      password: '',
+      id_tipo_user: user.tipoUser.id.toString(),
+    });
+    setIsModalVisible(true);
+  };
+
+  const handleCloseModal = () => {
+    setIsModalVisible(false);
+    setSelectedUser(null);
+  };
+
+  // Handlers del modal de eliminación
+  const handleOpenDeleteModal = (user: Administrador) => {
+    setUserToDelete(user);
+    setIsDeleteModalVisible(true);
+  };
+
+  const handleCloseDeleteModal = () => {
+    setIsDeleteModalVisible(false);
+    setUserToDelete(null);
+  };
+
+  const handleConfirmDelete = async () => {
+    // Aquí iría la lógica para eliminar el usuario
+    try {
+      if (userToDelete) {
+        // Lógica para eliminar el usuario
+        const response = await axiosInstance.delete(
+          `/administrador/${userToDelete.id_administrador}`
+        );
+
+        console.log('Usuario eliminado:', response.data);
+        // Actualizar la lista de usuarios en el estado
+        if (data) {
+          const updatedData = data.filter(
+            (user) => user.id_administrador !== userToDelete.id_administrador
+          );
+          setData(updatedData);
+        }
+      }
+    } catch (error) {
+      console.error('Error al eliminar el usuario:', error);
+    }
+    handleCloseDeleteModal();
+  };
+
+  // Handler para envío del formulario
+  const handleSubmitForm = async () => {
+    try {
+      if (modalMode === 'add') {
+        // Crear nuevo usuario
+        const payload = {
+          nombre_usuario: formData.nombre_usuario,
+          correo: formData.correo,
+          password: formData.password,
+          id_tipo_user: parseInt(formData.id_tipo_user),
+        };
+
+        const response = await axiosInstance.post('/administrador', payload);
+        console.log('Usuario creado:', response.data);
+
+        // Actualizar la lista de usuarios
+        if (data) {
+          setData([
+            ...data,
+            {
+              correo: formData.correo,
+              id_administrador: response.data.id_administrador,
+              nombre_usuario: formData.nombre_usuario,
+              tipoUser: {
+                id: parseInt(formData.id_tipo_user),
+                tipo: formData.id_tipo_user === '1' ? 'Administrador' : 'Staff',
+              },
+            },
+          ]);
+        }
+      } else if (modalMode === 'edit' && selectedUser) {
+        // Editar usuario existente
+        const payload = {
+          nombre_usuario: formData.nombre_usuario,
+          correo: formData.correo,
+          id_tipo_user: parseInt(formData.id_tipo_user),
+        };
+
+        const response = await axiosInstance.put(
+          `/administrador/${selectedUser.id_administrador}`,
+          payload
+        );
+        console.log('Usuario actualizado:', response.data);
+
+        // Actualizar la lista de usuarios
+        if (data) {
+          const updatedData = data.map((user) =>
+            user.id_administrador === selectedUser.id_administrador
+              ? { ...user, ...response.data }
+              : user
+          );
+          setData(updatedData);
+        }
+      }
+
+      handleCloseModal();
+    } catch (error) {
+      console.error('Error al guardar el usuario:', error);
+    }
+  };
 
   const headers: Header<Administrador>[] = [
     { key: 'id_administrador', label: 'ID' },
@@ -19,12 +165,16 @@ export default function Page() {
     },
     {
       key: 'tipoUser',
-      render: () => (
+      render: (_, row) => (
         <div className="d-flex gap-2">
-          <Button className="w-100" disabled>
+          <Button className="w-100" onClick={() => handleOpenEditModal(row)}>
             Editar
           </Button>
-          <Button variant="danger" className="w-100" disabled>
+          <Button
+            variant="danger"
+            className="w-100"
+            onClick={() => handleOpenDeleteModal(row)}
+          >
             Eliminar
           </Button>
         </div>
@@ -37,9 +187,166 @@ export default function Page() {
     <div>
       <div className="d-flex justify-content-between align-items-center my-3">
         <h1>Administradores</h1>
-        <Button variant="primary">Agregar Administrador</Button>
+        <Button variant="primary" onClick={handleOpenAddModal}>
+          Agregar Administrador
+        </Button>
       </div>
       {data && <Table headers={headers} data={data} />}
+
+      <Modal
+        isVisible={isModalVisible}
+        onClose={handleCloseModal}
+        size="lg"
+        closeButton={true}
+      >
+        <div className="p-3">
+          <h3 className="mb-4">
+            {modalMode === 'add'
+              ? 'Agregar Nuevo Administrador'
+              : 'Editar Administrador'}
+          </h3>
+
+          {modalMode === 'edit' && selectedUser && (
+            <div className="mb-3">
+              <p>
+                <strong>ID:</strong> {selectedUser.id_administrador}
+              </p>
+              <p>
+                <strong>Usuario actual:</strong> {selectedUser.nombre_usuario}
+              </p>
+              <p>
+                <strong>Correo actual:</strong> {selectedUser.correo}
+              </p>
+              <p>
+                <strong>Tipo:</strong> {selectedUser.tipoUser.tipo}
+              </p>
+            </div>
+          )}
+
+          <div className="mb-3">
+            <label htmlFor="nombre_usuario" className="form-label">
+              Nombre de Usuario
+            </label>
+            <input
+              type="text"
+              className="form-control"
+              id="nombre_usuario"
+              value={formData.nombre_usuario}
+              onChange={(e) =>
+                setFormData((prev) => ({
+                  ...prev,
+                  nombre_usuario: e.target.value,
+                }))
+              }
+              placeholder="Ingrese el nombre de usuario"
+            />
+          </div>
+
+          <div className="mb-3">
+            <label htmlFor="correo" className="form-label">
+              Correo Electrónico
+            </label>
+            <input
+              type="email"
+              className="form-control"
+              id="correo"
+              value={formData.correo}
+              onChange={(e) =>
+                setFormData((prev) => ({
+                  ...prev,
+                  correo: e.target.value,
+                }))
+              }
+              placeholder="Ingrese el correo electrónico"
+            />
+          </div>
+
+          {modalMode === 'add' && (
+            <div className="mb-3">
+              <label htmlFor="password" className="form-label">
+                Contraseña
+              </label>
+              <input
+                type="password"
+                className="form-control"
+                id="password"
+                value={formData.password}
+                onChange={(e) =>
+                  setFormData((prev) => ({
+                    ...prev,
+                    password: e.target.value,
+                  }))
+                }
+                placeholder="Ingrese la contraseña"
+              />
+            </div>
+          )}
+
+          <div className="mb-4">
+            <label htmlFor="tipoUser" className="form-label">
+              Tipo de Usuario
+            </label>
+            <select
+              className="form-select"
+              id="tipoUser"
+              value={formData.id_tipo_user}
+              onChange={(e) =>
+                setFormData((prev) => ({
+                  ...prev,
+                  id_tipo_user: e.target.value,
+                }))
+              }
+            >
+              <option value="">Seleccione un tipo</option>
+              <option value="1">Administrador</option>
+              <option value="2">Staff</option>
+            </select>
+          </div>
+
+          <div className="d-flex gap-2 justify-content-end">
+            <Button variant="secondary" onClick={handleCloseModal}>
+              Cancelar
+            </Button>
+            <Button variant="primary" onClick={handleSubmitForm}>
+              {modalMode === 'add' ? 'Crear Administrador' : 'Guardar Cambios'}
+            </Button>
+          </div>
+        </div>
+      </Modal>
+
+      {/* Modal de confirmación de eliminación */}
+      <Modal
+        isVisible={isDeleteModalVisible}
+        onClose={handleCloseDeleteModal}
+        size="md"
+        closeButton={true}
+      >
+        <div className="p-4 text-center">
+          <div className="mb-4">
+            <i className="bi bi-exclamation-triangle text-warning display-1"></i>
+          </div>
+
+          <h4 className="mb-3">¿Está seguro de eliminar al usuario?</h4>
+
+          {userToDelete && (
+            <div className="mb-4">
+              <p className="fs-5 fw-bold text-danger">
+                {userToDelete.nombre_usuario}
+              </p>
+              <p className="text-muted">Esta acción no se puede deshacer</p>
+            </div>
+          )}
+
+          <div className="d-flex gap-3 justify-content-center">
+            <Button variant="secondary" onClick={handleCloseDeleteModal}>
+              Cancelar
+            </Button>
+            <Button variant="danger" onClick={handleConfirmDelete}>
+              Sí, Eliminar
+            </Button>
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 }