diff --git a/Front/src/App.svelte b/Front/src/App.svelte
index 9accdc5..8d0a851 100644
--- a/Front/src/App.svelte
+++ b/Front/src/App.svelte
@@ -32,6 +32,7 @@
     import MisPropiedadesEnVenta from "./paginas/MisPropiedadesEnVenta.svelte";
     import AdminGrupos from "./paginas/AdminGrupos.svelte";
     import OtroG from "./paginas/grupos/OtroG.svelte";
+    import GestionPemisos from "./paginas/GestionPemisos.svelte";
 </script>
 
 <Router>
@@ -129,6 +130,11 @@
         <ProteRoute componente={BuscarVentas} />
     </Route>
 
+    <!-- Creacion Permisos -->
+    <Route path="/accion/17">
+        <ProteRoute componente={GestionPemisos} />
+    </Route>
+
     <!-- Gestion Grupos -->
     <Route path="/accion/18">
         <ProteRoute componente={AdminGrupos} />
diff --git a/Front/src/Componentes/ModalEditarPermiso.svelte b/Front/src/Componentes/ModalEditarPermiso.svelte
new file mode 100644
index 0000000..95b9116
--- /dev/null
+++ b/Front/src/Componentes/ModalEditarPermiso.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import type { PermisoDto } from "../types";
+
+    let {
+        permiso = $bindable(),
+        onClose,
+        onSubmit,
+        modalTitle = "Modificar Permiso",
+    }: {
+        permiso: PermisoDto;
+        onClose: (a: string) => void;
+        onSubmit: (arg0: PermisoDto) => void;
+        modalTitle: string;
+    } = $props();
+
+    const maxChars = $state(25);
+    let remaining: number = $state(25);
+    const ogdesc: string = permiso.descripcion;
+
+    function saveChanges() {
+        onSubmit(permiso);
+        onClose(ogdesc);
+    }
+
+    function updateRemaining(event: Event) {
+        const inputValue = (event.target as HTMLInputElement).value;
+        permiso.descripcion = inputValue;
+        remaining = maxChars - inputValue.length;
+    }
+
+    $effect(() => {
+        remaining = maxChars - permiso.descripcion.length;
+    });
+</script>
+
+<div
+    class="modal show fade d-block"
+    tabindex="-1"
+    aria-labelledby="textModalLabel"
+    style="background-color: rgba(0, 0, 0, 0.3);"
+>
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="textModalLabel">{modalTitle}</h5>
+                <button
+                    type="button"
+                    class="btn-close"
+                    aria-label="Close"
+                    onclick={() => onClose(ogdesc)}
+                ></button>
+            </div>
+            <div class="modal-body">
+                <div class="mb-3">
+                    <label for="textInput" class="form-label">Descripcion</label
+                    >
+                    <input
+                        type="text"
+                        class="form-control"
+                        id="textInput"
+                        value={permiso.descripcion}
+                        maxlength={maxChars}
+                        oninput={updateRemaining}
+                    />
+                    <small class="form-text text-muted">
+                        {remaining} caracteres restantes de {maxChars}
+                    </small>
+                </div>
+            </div>
+            <div class="modal-footer">
+                <button
+                    type="button"
+                    class="btn btn-secondary"
+                    onclick={() => onClose(ogdesc)}>Cerrar</button
+                >
+                <button
+                    type="button"
+                    class="btn btn-primary"
+                    onclick={saveChanges}>Guardar</button
+                >
+            </div>
+        </div>
+    </div>
+</div>
diff --git a/Front/src/paginas/GestionPemisos.svelte b/Front/src/paginas/GestionPemisos.svelte
new file mode 100644
index 0000000..a1a4779
--- /dev/null
+++ b/Front/src/paginas/GestionPemisos.svelte
@@ -0,0 +1,148 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import NavBarAutocompletable from "../Componentes/NavBarAutocompletable.svelte";
+    import type { GrupoDto, PermisoDto } from "../types";
+    import { urlG } from "../stores/urlStore";
+    import ModalEstatico from "../Componentes/ModalEstatico.svelte";
+    import BarraHorizontalConTexto from "../Componentes/BarraHorizontalConTexto.svelte";
+    import BotonEsquina from "../Componentes/BotonEsquina.svelte";
+    import ModalEditarPermiso from "../Componentes/ModalEditarPermiso.svelte";
+    import Login from "./login.svelte";
+
+    const token: string = sessionStorage.getItem("token") || "";
+
+    let permisos: PermisoDto[] = $state([]);
+    let selpermiso: PermisoDto = $state({ descripcion: "", id: 0 });
+    let modaldat: string = $state("");
+    let showmodaladd = $state(false);
+    let showmodaledit = $state(false);
+
+    onMount(() => {
+        obtenerPermisos();
+    });
+
+    async function submitedit(a: GrupoDto) {
+        let b = a;
+        try {
+            let req = await fetch($urlG + "/api/grupo", {
+                method: "PATCH",
+                headers: {
+                    Auth: token,
+                    "Content-Type": "application/json",
+                },
+                body: JSON.stringify(b),
+            });
+            const resp = await req.json();
+            modaldat = resp.message;
+            if (req.ok) {
+                obtenerPermisos;
+            }
+        } catch {
+            modaldat = "Fallo al hacer la request";
+        }
+    }
+
+    async function obtenerPermisos() {
+        try {
+            let a = await fetch($urlG + "/api/permisos/todos", {
+                method: "GET",
+                headers: {
+                    Auth: token,
+                },
+            });
+            if (!a.ok) {
+                modaldat = "Fallo al obtener los permisos";
+                return;
+            }
+            permisos = await a.json();
+        } catch {
+            modaldat = "Fallo Al intentar hacer la request";
+        }
+    }
+
+    function NuevoPermiso(a: PermisoDto): void {
+        throw new Error("Function not implemented.WIP");
+    }
+
+    function PatchPermiso(): void {
+        throw new Error("Function not implemented.WIP");
+    }
+</script>
+
+{#if modaldat != ""}
+    <ModalEstatico payload={modaldat} />
+{/if}
+
+<NavBarAutocompletable />
+<div class="container-fluid mt-2">
+    <BarraHorizontalConTexto text="Gestionar Permisos" />
+
+    {#if permisos.length == 0}
+        <div class="text-center">
+            <div class="spinner-border" role="status">
+                <span class="visually-hidden">Loading...</span>
+            </div>
+        </div>
+    {:else}
+        <div class="position-relative z-1">
+            <BotonEsquina handleclick={() => (showmodaladd = true)} />
+        </div>
+        {#if showmodaladd}
+            <ModalEditarPermiso
+                onClose={() => (showmodaladd = false)}
+                permiso={{ descripcion: "", id: 0 }}
+                onSubmit={NuevoPermiso}
+                modalTitle="Nuevo Permiso"
+            />
+        {/if}
+        {#if showmodaledit}
+            <div class="position-relative z-2">
+                <ModalEditarPermiso
+                    onClose={(a: string) => {
+                        showmodaledit = false;
+                        selpermiso.descripcion = a;
+                    }}
+                    bind:permiso={selpermiso}
+                    onSubmit={PatchPermiso}
+                    modalTitle="Modificar Permiso"
+                />
+            </div>
+        {/if}
+        <div class="card mb-3">
+            <div class="card-body">
+                <div class="table-responsive">
+                    <table class="table table-striped">
+                        <thead>
+                            <tr>
+                                <th scope="col">ID</th>
+                                <th scope="col">Descripción</th>
+                                <th scope="col">Accioness</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {#each permisos as permiso}
+                                <tr>
+                                    <td>{permiso.id}</td>
+                                    <td>{permiso.descripcion}</td>
+                                    <td>
+                                        <div
+                                            class="d-flex justify-content-between"
+                                        >
+                                            <button
+                                                class="btn btn-warning btn-sm"
+                                                onclick={() => {
+                                                    showmodaledit = true;
+                                                    selpermiso = permiso;
+                                                }}>Editar</button
+                                            >
+                                        </div>
+                                    </td>
+                                </tr>
+                            {/each}
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+    {/if}
+</div>