diff --git a/app/Http/Controllers/GruposController.php b/app/Http/Controllers/GruposController.php
index 54b259495381f9dad63c5aa2a49115692bc49ad8..8cf28f464c77a3880be9b3060a52f534207af125 100644
--- a/app/Http/Controllers/GruposController.php
+++ b/app/Http/Controllers/GruposController.php
@@ -28,6 +28,17 @@ public function store(Request $request)
         return redirect()->route('catalogos.grupos.get')->with('success', 'Grupo creado correctamente.');
     }
 
+    public function view($id)
+    {
+        try{
+            $grupo = Grupos::find($id);
+            return view('adminGen.grupos.index', ['grupo' => $grupo, 'contactos' => $grupo->contactos]);
+        }catch(\Exception $e){
+            return redirect()->route('catalogos.grupos.get')->withErrors('Grupo no encontrado.');
+        }
+        
+    }
+
     public function update(Request $request, Grupos $grupos)
     {
         $validated = $request->validate([
diff --git a/app/Models/Grupos.php b/app/Models/Grupos.php
index 8624fc77f864fc34e4f79ee8079bc3f3e2e7817b..83b49df594d459779a30491a0cd8a9996f164dd8 100644
--- a/app/Models/Grupos.php
+++ b/app/Models/Grupos.php
@@ -29,7 +29,7 @@ public function listas(): BelongsToMany
 
     public function contactos(): BelongsToMany
     {
-        return $this->belongsToMany(Contacto::class, 'contactos_grupos', 'contacto_id', 'grupo_id');
+        return $this->belongsToMany(Contacto::class, 'contactos_grupos', 'grupo_id', 'contacto_id');
     }
 
     public function subgrupos(): HasMany
diff --git a/resources/views/adminGen/catalagos/grupos.blade.php b/resources/views/adminGen/catalagos/grupos.blade.php
index ed13ea581d933473dfec7f7f3adad12f1422ad42..03aa8de7d0e3c50c73c85f4ee8366f9e0c9e3758 100644
--- a/resources/views/adminGen/catalagos/grupos.blade.php
+++ b/resources/views/adminGen/catalagos/grupos.blade.php
@@ -144,6 +144,7 @@ function renderActions(id, nombre) {
                         <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>
                     </form>
                     <button class="btn btn-primary btn-sm" onclick="editItem(${id}, '${nombre}')">Editar</button>
+                    <a class="btn btn-white btn-sm" href="{{ route('catalogos.grupos.view', '') }}/${id}">Ver contactos</a>
                 </div>`;
         }
 
diff --git a/resources/views/adminGen/grupos/index.blade.php b/resources/views/adminGen/grupos/index.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..504867e1e3cec4e5c4039bff6178d6953b958bc6
--- /dev/null
+++ b/resources/views/adminGen/grupos/index.blade.php
@@ -0,0 +1,105 @@
+<x-layout.default>
+
+    <script src="/assets/js/simple-datatables.js"></script>
+    <link rel="stylesheet" href="{{ Vite::asset('resources/css/swiper-bundle.min.css') }}">
+    <script src="/assets/js/swiper-bundle.min.js"></script>
+    <div x-data="contactos">
+        <ul class="flex space-x-2 rtl:space-x-reverse">
+            <li>
+                <a href="javascript:;" class="text-primary hover:underline">Dashboard</a>
+            </li>
+            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
+                <span>Contactos del grupo {{$grupo->nombre}}</span>
+            </li>
+        </ul>
+        <div class="panel mt-6">
+            <table id="myTable" class="whitespace-nowrap table-hover">
+                <thead></thead>
+                <tbody></tbody>
+            </table>
+
+        </div>
+    </div>
+
+    <link rel="stylesheet" href="{{ Vite::asset('resources/css/highlight.min.css') }}">
+    <script src="/assets/js/highlight.min.js"></script>
+
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <link rel="stylesheet" href="/assets/css/jquery.toast.css">
+    <script src="/assets/js/jquery.toast.js"></script>
+
+    <script>
+        const contactos = @json($contactos);
+        const data = contactos.map(contacto => {
+            let nombreCompleto;
+            if (contacto.profesion?.abreviatura) {
+                nombreCompleto = contacto.profesion.abreviatura + ' ' + contacto.nombre;
+            } else {
+                nombreCompleto = contacto.nombre;
+            }
+            return [nombreCompleto, renderParameter(contacto.ap_paterno), renderParameter(contacto.ap_materno), renderParameter(contacto.cargo?.nombre)];
+        });
+
+        function renderParameter(parametro) {
+            if(parametro === null || parametro === undefined){
+                return `Sin información`;
+            }else{
+               return parametro;
+            }
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            const datatable = new simpleDatatables.DataTable('#myTable', {
+                data: {
+                    headings: ['Nombre', 'Apellido paterno', 'Apellido materno', 'Cargo'],
+                    data: data
+                },
+                perPage: 10,
+                perPageSelect: [10, 20, 30, 50, 100],
+                columns: [{
+                        select: 0,
+                        sort: 'asc'
+                    },
+                ],
+                firstLast: true,
+                firstText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M13 19L7 12L13 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.5" d="M16.9998 19L10.9998 12L16.9998 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+                lastText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M11 19L17 12L11 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path opacity="0.5" d="M6.99976 19L12.9998 12L6.99976 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+                prevText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M15 5L9 12L15 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+                nextText: '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="w-4.5 h-4.5 rtl:rotate-180"><path d="M9 5L15 12L9 19" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+                labels: {
+                    placeholder: "Buscar...",
+                    perPage: "{select}",
+                    noRows: "No hay filas para mostrar",
+                    info: "Mostrando {start} a {end} de {rows} filas",
+                },
+            });
+        });
+
+        function showToast(message, heading, icon) {
+            $.toast({
+                heading: heading,
+                text: message,
+                showHideTransition: 'slide',
+                icon: icon,
+                position: 'top-right',
+                loader: false,
+                hideAfter: 10000, 
+                allowToastClose: true,
+                textColor: '#676767',
+            });
+        }
+
+        document.addEventListener('DOMContentLoaded', function() {
+            @if(session('success'))
+            // Muestra el mensaje de éxito utilizando showMessage
+                showToast("{{ session('success') }}", 'Exito.', 'success')
+            @endif
+
+            @if($errors->any())
+                @foreach($errors->all() as $error)
+                    showToast(`{{ $error }}`, 'Error.', 'error');
+                @endforeach
+            @endif
+        });
+    </script>
+</x-layout.default>
\ No newline at end of file
diff --git a/routes/web.php b/routes/web.php
index b9ec60852d295f663350bc9017772d7cbefb1d87..56ee1c4d76ca9496d8c99cf114510e8794b79ac1 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -58,6 +58,7 @@
     Route::post('/grupos', [GruposController::class, 'store'])->name('grupos.store')->middleware(CheckRoles::class . ':admingen,admin,capturista' );
     Route::put('/grupos', [GruposController::class, 'update'])->name('grupos.update')->middleware(CheckRoles::class . ':admingen,admin,capturista' );
     Route::delete('/grupos/{id}', [GruposController::class, 'destroy'])->name('grupos.destroy')->middleware(CheckRoles::class . ':admingen,admin' );
+    Route::get('/grupos/{id}', [GruposController::class, 'view'])->name('grupos.view')->middleware(CheckRoles::class . ':admingen,admin,capturista' );
 });
 
 Route::name('catalogos.')->group(function () {