diff --git a/Front/src/Componentes/ModalEditarGrupo.svelte b/Front/src/Componentes/ModalEditarGrupo.svelte
new file mode 100644
index 0000000..97e3dca
--- /dev/null
+++ b/Front/src/Componentes/ModalEditarGrupo.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import type { GrupoDto } from "../types";
+
+    let {
+        onClose,
+        data = $bindable(),
+        onSubmit,
+    }: {
+        onClose: () => void;
+        data: GrupoDto;
+        onSubmit: (a: GrupoDto) => void;
+    } = $props();
+
+    onMount(() => {});
+    const handleSubmit = (e: Event) => {
+        e.preventDefault();
+        onSubmit(data);
+    };
+</script>
+
+<div
+    class="modal show d-block"
+    tabindex="-1"
+    role="dialog"
+    aria-labelledby="exampleModalLabel"
+    aria-hidden="true"
+>
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="exampleModalLabel">
+                    Selecciona una opción
+                </h5>
+                <button
+                    type="button"
+                    class="btn-close"
+                    aria-label="Close"
+                    onclick={onClose}
+                ></button>
+            </div>
+            <div class="modal-body"></div>
+        </div>
+    </div>
+</div>
diff --git a/Front/src/types.d.ts b/Front/src/types.d.ts
index eb2e59d..26a28de 100644
--- a/Front/src/types.d.ts
+++ b/Front/src/types.d.ts
@@ -226,6 +226,7 @@ export type GrupoDto = {
   gruposIncluidos:string[],
   permisos:PermisoDto[]
 }
+
 export type PermisoDto = {
   id:number,
   descripcion:string