diff --git a/cosiap_frontend/src/App.jsx b/cosiap_frontend/src/App.jsx
index e20c2f07f34332d9df1c1b4070d2cde4c4917b1e..36598c785aaab63dfb8952e9c3f4d401bf580b7c 100644
--- a/cosiap_frontend/src/App.jsx
+++ b/cosiap_frontend/src/App.jsx
@@ -25,6 +25,7 @@ import LayoutBaseAuthenticator from "@/components/common/layouts/LayoutBaseAuthe
 import LayoutBaseNavigation from "@/components/common/layouts/LayoutBaseNavigation";
 import Modalidades from "@/components/modalidades/Modalidades";
 import CreateModalidad from "./components/modalidades/CrearModalidad";
+import EditModalidad from "./components/modalidades/EditarModalidad";
 
 function App() {
   const [viewPageLoader, setViewPageLoader] = useState(false);
@@ -106,7 +107,8 @@ function RoutesApp({ setViewPageLoader }) {
           >
             <Route path="/usuarios" element={<Inicio />} />
             <Route path="/solicitudes" element={<Inicio />} />
-            <Route path="/Crear_Modalidad" element={<CreateModalidad/>} />
+            <Route path="/crear-modalidad" element={<CreateModalidad/>} />
+            <Route path="/editar-modalidad/:id" element={<EditModalidad/>} />
           </Route>
         </Route>
 
diff --git a/cosiap_frontend/src/api.js b/cosiap_frontend/src/api.js
index 839e8af60b736ea23238f031127bcde8f05718d1..aa272b7255e6cd7581fdbc106d37a42db0280892 100644
--- a/cosiap_frontend/src/api.js
+++ b/cosiap_frontend/src/api.js
@@ -90,7 +90,7 @@ const api = {
     get: () => ax.get('api/modalidades'),
     post: (data) => ax.post('api/modalidades/', data),
     getById: (id) => ax.get(`api/modalidades/${id}`),
-    update: (id, data) => ax.put(`api/modalidades/${id}`, data),
+    update: (id, data) => ax.put(`api/modalidades/${id}/`, data),
     delete: (id) => ax.delete(`api/modalidades/${id}`),
     monto: {
       post: (data) => ax.post('api/modalidades', data),
@@ -111,6 +111,11 @@ const api = {
     reportes: {
       get: () => ax.get('api/solicitudes/reportes'),
       getById: (id) => ax.get(`api/solicitudes/reportes/${id}`),
+    },
+    solicitar:{
+      get: () => ax.get('api/solicitudes/solicitar'),
+      post: (data) => ax.post('api/solicitudes/solicitar', data),
+      update: (id,data) => ax.put(`api/solicitudes/solicitar/${id}`, data)
     }
   },
   dynamicTables: {
diff --git a/cosiap_frontend/src/components/modalidades/CrearModalidad.css b/cosiap_frontend/src/components/modalidades/CrearModalidad.css
index 4a0598fcf12b288ae21b287595297b74e22062ee..35cec7d50fa0847ae9e595861f9d499a123fe5b5 100644
--- a/cosiap_frontend/src/components/modalidades/CrearModalidad.css
+++ b/cosiap_frontend/src/components/modalidades/CrearModalidad.css
@@ -158,3 +158,11 @@ input[type="checkbox"] {
     margin-top: 20px;
     padding: 0 20px; 
 }
+
+.preview-image {
+    width: 100px;
+    height: 100px; 
+    object-fit: cover; 
+    border: 1px solid #ccc;
+    margin-top: 10px; 
+}
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
index fb4ea6c85d80e34ef0c1261fa699c654231173c4..ecdb4a7193796b46feb36b486203529bd20c2b4e 100644
--- a/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
+++ b/cosiap_frontend/src/components/modalidades/CrearModalidad.jsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from "react";
 import api from '../../api';
 import './CrearModalidad.css'
 import MainContainer from "../common/utility/MainContainer";
+import { useNavigate } from 'react-router-dom';
 
 // componente para la creación de una modalidad
 // incluyendo la estructura de su formulario dinámico
@@ -15,6 +16,7 @@ const CreateModalidad = () => {
     const [formName, setFormName] = useState('');
     const [sections, setSections] = useState([]);
     const [formatos, setFormatos] = useState([]); 
+    const navigate = useNavigate();
 
     // Obtener los formatos disponibles al cargar el componente
     useEffect(() => {
@@ -183,7 +185,7 @@ const CreateModalidad = () => {
                     'Content-Type': 'multipart/form-data',
                 },
             });
-            alert('Modalidad creada con éxito');
+            navigate('/modalidades')
         } catch (error){
             console.error('Error al crear la modalidad.', error);
             alert('Ocurrió un error al crear la modalidad.')
diff --git a/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..8428744c14e25cc7231cdb7b3e5dd80a39bcf69f
--- /dev/null
+++ b/cosiap_frontend/src/components/modalidades/EditarModalidad.jsx
@@ -0,0 +1,142 @@
+import { useState, useEffect } from "react";
+import api from '../../api';
+import './CrearModalidad.css';
+import MainContainer from "../common/utility/MainContainer";
+import { useNavigate, useParams } from 'react-router-dom';
+
+const EditModalidad = () => {
+    const { id } = useParams();
+    const [nombre, setNombre] = useState('');
+    const [descripcion, setDescripcion] = useState('');
+    const [montoMaximo, setMontoMaximo] = useState(0);
+    const [mostrar, setMostrar] = useState(true);
+    const [archivado, setArchivado] = useState(false);
+    const [imagen_anterior, setImagenAnterior] = useState(null)
+    const [imagen, setImagen] = useState(null);
+    const navigate = useNavigate();
+    // const [formID, setFormID] = useState('');
+
+    useEffect(() => {
+        const fetchModalidad = async () => {
+            try {
+                const response = await api.modalidades.getById(id);
+                const modalidadData = response.data;
+                setNombre(modalidadData.data.nombre);
+                setDescripcion(modalidadData.data.descripcion);
+                setMontoMaximo(modalidadData.data.monto_maximo);
+                setMostrar(modalidadData.data.mostrar);
+                setImagenAnterior(modalidadData.data.imagen);
+                setArchivado(modalidadData.data.archivado);
+                //setFormID(modalidadData.dynamic_form);
+            } catch (error) {
+                console.error("Error al obtener la modalidad", error);
+            }
+        };
+
+        fetchModalidad();
+    }, [id]);
+
+    const handleImageChange = (e) => {
+        setImagen(e.target.files[0]);
+    };
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+
+        try {
+            const formData = new FormData();
+            formData.append('nombre', nombre);
+            formData.append('descripcion', descripcion);
+            formData.append('monto_maximo', montoMaximo);
+            formData.append('mostrar', mostrar);
+            formData.append('archivado', archivado);
+            if (imagen) {
+                formData.append('imagen', imagen);
+            }
+            await api.modalidades.update(id, formData);
+            navigate('/modalidades')
+        } catch (error) {
+            console.error('Error al actualizar la modalidad.', error);
+            alert('Ocurrió un error al actualizar la modalidad.');
+        }
+    };
+
+    return (
+        <MainContainer title="Editar Modalidad">
+            <form onSubmit={handleSubmit} className="create-modalidad-form">
+                <div className="white-card">
+                    <div className="form-row">
+                        <div className="form-group">
+                            <label>Nombre:</label>
+                            <input
+                                type="text"
+                                value={nombre}
+                                onChange={(e) => setNombre(e.target.value)}
+                                placeholder="Ingrese el nombre"
+                                required
+                            />
+                        </div>
+                        <div className="form-group">
+                            <label>Descripción:</label>
+                            <textarea
+                                value={descripcion}
+                                onChange={(e) => setDescripcion(e.target.value)}
+                                placeholder="Ingrese la descripción"
+                                required
+                            />
+                        </div>
+                        <div className="form-group">
+                            <label>Imagen:</label>
+                            
+                            <img
+                                src={`http://localhost:8000${imagen_anterior}`}
+                                alt="Imagen previa"
+                                className="preview-image"
+                            />
+                            
+                            <input
+                                type="file"
+                                onChange={handleImageChange}
+                            />
+                        </div>
+                    </div>
+                    <div className="form-row">
+                        <div className="form-group">
+                            <label>Monto Máximo:</label>
+                            <input
+                                type="number"
+                                value={montoMaximo}
+                                onChange={(e) => setMontoMaximo(e.target.value)}
+                                placeholder="Ingrese el monto máximo"
+                                required
+                            />
+                        </div>
+                        <div className="form-group">
+                            <label>Mostrar:</label>
+                            <input
+                                type="checkbox"
+                                checked={mostrar}
+                                onChange={() => setMostrar(!mostrar)}
+                            />
+                        </div>
+                        <div className="form-group">
+                            <label>Archivado:</label>
+                            <input
+                                type="checkbox"
+                                checked={archivado}
+                                onChange={() => setArchivado(!archivado)}
+                            />
+                        </div>
+                    </div>
+                </div>
+                <div className="button-container">
+                    <button type="submit" className="submit-button">
+                        Actualizar Modalidad
+                    </button>
+                </div>
+            </form>
+        </MainContainer>
+    );
+};
+
+export default EditModalidad;
\ No newline at end of file
diff --git a/cosiap_frontend/src/components/modalidades/ListaModalidades.jsx b/cosiap_frontend/src/components/modalidades/ListaModalidades.jsx
index a3a939b927ac4464817f593f756cafb03aca712e..fdad3f2881873b4fbe2182971896b02e0ff133dd 100644
--- a/cosiap_frontend/src/components/modalidades/ListaModalidades.jsx
+++ b/cosiap_frontend/src/components/modalidades/ListaModalidades.jsx
@@ -5,14 +5,17 @@ import api from "@/api";
 import { useState, useEffect } from "react";
 import MainContainer from "@/components/common/utility/MainContainer";
 import './CrearModalidad.css'
+import { useNavigate } from "react-router-dom";
 
 export default function ListaModalidades({
   setViewPageLoader,
   handleModalidadDetail,
   isAdmin,
   handleModalidadCreate,
+  handleModalidadEdit,
 }) {
   const [modalidades, setModalidades] = useState([]);
+  const navigate = useNavigate();
 
   const obtenerModalidades = async () => {
     setViewPageLoader(true);
@@ -48,14 +51,17 @@ export default function ListaModalidades({
               >
                 <br></br>
                 <div className="fixed bottom-4 left-1/2 transform -translate-x-1/2">
-                  <button
-                    className="h-8 w-40 lg:w-48
-                    bg-[var(--principal-c)] text-[var(--principal-mf)] border border-[var(--principal-f)] font-bold text-center uppercase align-middle rounded-lg"
-                    onClick={() => handleModalidadDetail(item.id)}
+                <button
+                    className="h-8 w-40 lg:w-48 bg-[var(--principal-c)] text-[var(--principal-mf)] border border-[var(--principal-f)] font-bold text-center uppercase align-middle rounded-lg"
+                    onClick={() => {
+                      if (isAdmin) {
+                        navigate(`/editar-modalidad/${item.id}`); 
+                      } else {
+                        navigate(`/detalle-modalidad/${item.id}`); 
+                      }
+                    }}
                   >
-                  { isAdmin ? "Editar": "Solicitar"
-                    
-                  }
+                    {isAdmin ? "Editar" : "Solicitar"}
                   </button>
                 </div>
               </ModalidadCard>
diff --git a/cosiap_frontend/src/components/modalidades/Modalidades.jsx b/cosiap_frontend/src/components/modalidades/Modalidades.jsx
index e9f4e45d92f5a27277470771b44b85ccf66e9efe..e3f52bcde8770859fe758c66b924fd7fc4fd08a3 100644
--- a/cosiap_frontend/src/components/modalidades/Modalidades.jsx
+++ b/cosiap_frontend/src/components/modalidades/Modalidades.jsx
@@ -3,6 +3,7 @@ import { useState } from "react";
 import Modalidad from "@/components/modalidades/Modalidad";
 import { useAutenticacion } from "../common/utility/Autenticador";
 import CreateModalidad from "./CrearModalidad";
+import EditModalidad from "./EditarModalidad";
 
 export default function Modalidades({ setViewPageLoader }) {
   const [viewModalidades, setViewModalidades] = useState(true);
@@ -10,6 +11,7 @@ export default function Modalidades({ setViewPageLoader }) {
   const [selectedId, setSelectedId] = useState(null);
   const {isAdmin} = useAutenticacion();
   const [viewModalidadCreate, setViewModalidadCreate] = useState(false)
+  const [viewModalidadEdit, setViewModalidadEdit] = useState(false)
 
 
   const handleModalidadDetail = (id) => {
@@ -23,6 +25,12 @@ export default function Modalidades({ setViewPageLoader }) {
     setViewModalidadCreate(true)
   };
 
+  const handleModalidadEdit = (id) => {
+    setSelectedId(id)
+    setViewModalidadDetail(false);
+    setViewModalidadEdit(true)
+  }
+
 
   return (
     <>
@@ -32,6 +40,7 @@ export default function Modalidades({ setViewPageLoader }) {
           handleModalidadDetail={handleModalidadDetail}
           isAdmin = {isAdmin}
           handleModalidadCreate = {handleModalidadCreate}
+          handleModalidadEdit={handleModalidadEdit}
         />
       )}
       {viewModalidadDetail && selectedId && (
@@ -41,6 +50,9 @@ export default function Modalidades({ setViewPageLoader }) {
         <CreateModalidad
         />
       )}
+      {viewModalidadEdit && selectedId && (
+        <EditModalidad id={selectedId}/>
+      )}
     </>
   );
 }