diff --git a/app/Http/Controllers/SubgrupoController.php b/app/Http/Controllers/SubgrupoController.php
new file mode 100644
index 0000000000000000000000000000000000000000..a3adcd6d4cea812fcf951d079bc72ca37cff8741
--- /dev/null
+++ b/app/Http/Controllers/SubgrupoController.php
@@ -0,0 +1,98 @@
+<?php
+
+namespace App\Http\Controllers;
+
+use App\Models\Grupos;
+use App\Models\Subgrupo;
+use Illuminate\Http\Request;
+
+class SubgrupoController extends Controller
+{
+    /**
+     * Display a listing of the resource.
+     */
+    public function index()
+    {
+        $subgrupos = Subgrupo::with('grupo')->with('subgrupo')->get();
+
+        return view('adminGen.catalogos.subgrupos.index', compact('subgrupos'));
+    }
+
+    /**
+     * Show the form for creating a new resource.
+     */
+    public function create()
+    {
+        $subgrupos = Subgrupo::get();
+        $grupos = Grupos::get();
+        return view('adminGen.catalogos.subgrupos.create', compact('subgrupos', 'grupos'));
+    }
+
+    /**
+     * Store a newly created resource in storage.
+     */
+    public function store(Request $request)
+    {
+        $subgrupo = new Subgrupo;
+        $subgrupo->nombre = $request->nombre;
+        if(isset($request->grupo_id) && isset($request->subgrupo_id)) return redirect()->route('catalogos.subgrupos.create')->withErrors('Error al crear el subgrupo, solo es posible seleccionar un grupo o un subgrupo.');
+        if(isset($request->grupo_id)) $subgrupo->grupo_id = $request->grupo_id;
+        if(isset($request->subgrupo_id)) $subgrupo->subgrupo_id = $request->subgrupo_id;
+        $subgrupo->save();
+        return redirect()->route('catalogos.subgrupos.get')->with('success', 'Subgrupo creado correctamente.');
+    }
+
+    /**
+     * Display the specified resource.
+     */
+    public function show(Subgrupo $subgrupo)
+    {
+        //
+    }
+
+    /**
+     * Show the form for editing the specified resource.
+     */
+    public function edit(string $id)
+    {
+        $subgrupos = Subgrupo::where('id', '!=', $id)->get();
+        $subgrupo = Subgrupo::findOrFail($id);
+        $grupos = Grupos::get();
+
+        return view('adminGen.catalogos.subgrupos.edit', compact('subgrupos', 'grupos', 'subgrupo'));
+    }
+
+    /**
+     * Update the specified resource in storage.
+     */
+    public function update(Request $request, string $id)
+    {
+        $subgrupo = Subgrupo::findOrFail($id);
+        $subgrupo->nombre = $request->nombre;
+        if(isset($request->grupo_id) && isset($request->subgrupo_id)) return redirect()->route('catalogos.subgrupos.create')->withErrors('Error al crear el subgrupo, solo es posible seleccionar un grupo o un subgrupo.');
+        if(isset($request->grupo_id)){
+            $subgrupo->grupo_id = $request->grupo_id;
+            $subgrupo->subgrupo_id = null;
+        } 
+        if(isset($request->subgrupo_id)){
+            $subgrupo->subgrupo_id = $request->subgrupo_id;
+            $subgrupo->grupo_id = null;
+        }
+        $subgrupo->save();
+        return redirect()->route('catalogos.subgrupos.get')->with('success', 'Subgrupo actualizado correctamente.');
+    }
+
+    /**
+     * Remove the specified resource from storage.
+     */
+    public function destroy(string $id)
+    {
+        try{
+            $subgrupo = Subgrupo::findOrFail($id);
+            $subgrupo->delete();
+            return redirect()->route('catalogos.subgrupos.get')->with('success', 'Subgrupo eliminado correctamente.');
+        }catch(\Exception $e){
+            return redirect()->route('catalogos.subgrupos.get')->withErrors('Error al eliminar el subgrupo:' . $e->getMessage());
+        }
+    }
+}
diff --git a/app/Http/Controllers/subgrupoController.php b/app/Http/Controllers/subgrupoController.php
deleted file mode 100644
index 12badd4cc3b48523e8fe228f9a879184b6269413..0000000000000000000000000000000000000000
--- a/app/Http/Controllers/subgrupoController.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<?php
-
-namespace App\Http\Controllers;
-
-use Illuminate\Http\Request;
-
-class subgrupoController extends Controller
-{
-    //
-}
diff --git a/app/Models/Subgrupo.php b/app/Models/Subgrupo.php
new file mode 100644
index 0000000000000000000000000000000000000000..084a8fc2c94734d6831445150384b8aa9310c62e
--- /dev/null
+++ b/app/Models/Subgrupo.php
@@ -0,0 +1,29 @@
+<?php
+
+namespace App\Models;
+
+use Illuminate\Database\Eloquent\Factories\HasFactory;
+use Illuminate\Database\Eloquent\Model;
+use Illuminate\Database\Eloquent\Relations\BelongsTo;
+use Illuminate\Database\Eloquent\Relations\HasOne;
+
+class Subgrupo extends Model
+{
+    use HasFactory;
+
+    protected $fillable = [
+        'nombre',
+        'grupo_id',
+        'subgrupo_id',
+    ];
+
+    public function grupo(): BelongsTo
+    {
+        return $this->belongsTo(Grupos::class);
+    }
+    
+    public function subgrupo(): BelongsTo
+    {
+        return $this->belongsTo(Subgrupo::class);
+    }
+}
diff --git a/app/Models/subgrupo.php b/app/Models/subgrupo.php
deleted file mode 100644
index c834afbe0c2e28e01fa780f6e03e0e39caf42c38..0000000000000000000000000000000000000000
--- a/app/Models/subgrupo.php
+++ /dev/null
@@ -1,11 +0,0 @@
-<?php
-
-namespace App\Models;
-
-use Illuminate\Database\Eloquent\Factories\HasFactory;
-use Illuminate\Database\Eloquent\Model;
-
-class subgrupo extends Model
-{
-    use HasFactory;
-}
diff --git a/database/migrations/2024_06_03_194040_create_subgrupos_table.php b/database/migrations/2024_06_18_013012_create_subgrupos_table.php
similarity index 95%
rename from database/migrations/2024_06_03_194040_create_subgrupos_table.php
rename to database/migrations/2024_06_18_013012_create_subgrupos_table.php
index dbca58cc82464313f68181993e42458a75d84e11..73a8f5ed54fd1fa212dec0cdc7ea1652981e4f30 100644
--- a/database/migrations/2024_06_03_194040_create_subgrupos_table.php
+++ b/database/migrations/2024_06_18_013012_create_subgrupos_table.php
@@ -13,12 +13,13 @@ public function up(): void
     {
         Schema::create('subgrupos', function (Blueprint $table) {
             $table->id();
+            $table->string('nombre');
             $table->unsignedBigInteger('grupo_id')->nullable();
             $table->unsignedBigInteger('subgrupo_id')->nullable();
-            $table->timestamps();
 
             $table->foreign('grupo_id')->references('id')->on('grupos')->nullable();
             $table->foreign('subgrupo_id')->references('id')->on('subgrupos')->nullable();
+            $table->timestamps();
         });
     }
 
diff --git a/resources/views/adminGen/catalogos/subgrupos/create.blade.php b/resources/views/adminGen/catalogos/subgrupos/create.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..e1580047d016be85c1abd6651d1987dbc5501544
--- /dev/null
+++ b/resources/views/adminGen/catalogos/subgrupos/create.blade.php
@@ -0,0 +1,168 @@
+<x-layout.default>
+
+    <link rel='stylesheet' type='text/css' href='{{ Vite::asset("resources/css/nice-select2.css") }}'>
+
+    <div x-data="crearGrupos">
+        <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>Catálogos</span>
+            </li>
+            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
+                <a href="{{ route('catalogos.grupos.get') }}" class="text-primary hover:underline">Grupos</a>
+            </li>
+            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
+                <a href="{{ route('catalogos.subgrupos.get') }}" class="text-primary hover:underline">Subgrupos</a>
+            </li>
+            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
+                <span>Crear subgrupo</span>
+            </li>
+        </ul>
+        <div class="panel mt-6">
+            <div class="flex items-center justify-between mb-5">
+                <h5 class="font-semibold text-lg dark:text-white-light">Crear nuevo subgrupo</h5>
+            </div>
+            <div class="mb-5">
+                <form class="space-y-5" action="{{ route('catalogos.subgrupos.store') }}" method="POST">
+                    @csrf
+                    <div class="grid grid-cols-1 md:grid-cols-1 gap-5">
+                        <div>
+                            <label for="nombre">Nombre</label>
+                            <input id="nombre" name="nombre" type="text" required placeholder="Ingresa el nombre" class="form-input" />
+                        </div>
+                        <div class="mb-5">
+                            <label for="grupo_id">Grupo</label>
+                            <select id="grupo_id" name="grupo_id" required class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                                <option value="0" selected='selected'>Selecciona una opción</option>
+                                @foreach($grupos as $grupo)
+                                    <option value="{{ $grupo->id }}">{{ $grupo->nombre }}</option>
+                                @endforeach
+                            </select>
+                        </div>
+                        <div class="mb-5">
+                            <label for="subgrupo_id">Subgrupo</label>
+                            <select id="subgrupo_id" name="subgrupo_id" required class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                                <option value="0" selected='selected'>Selecciona una opción</option>
+                                @foreach($subgrupos as $subgrupo)
+                                    <option value="{{ $subgrupo->id }}">{{ $subgrupo->nombre }}</option>
+                                @endforeach
+                            </select>
+                        </div>
+                        <span class="badge bg-warning text-xs hover:top-0"><b>Nota:</b> Solo es posible seleccionar un grupo o un subgrupo, más no ambos.</span>
+                    </div>
+                    <button type="submit" class="btn btn-primary !mt-6">Guardar</button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <link rel="stylesheet" href="{{ Vite::asset('resources/css/highlight.min.css') }}">
+    <script src="/assets/js/highlight.min.js"></script>
+
+    <script src="/assets/js/nice-select2.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
+    <link rel="stylesheet" href="/assets/css/jquery.toast.css">
+    <script src="/assets/js/jquery.toast.js"></script>
+
+    <style>
+        .nice-select-disabled {
+            pointer-events: none;
+            opacity: 0.5;
+        }
+    </style>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function(e) {
+            // default
+            var els = document.querySelectorAll(".selectize");
+            els.forEach(function(select) {
+                NiceSelect.bind(select);
+            });
+
+            // seachable
+            var options = {
+                searchable: true
+            };
+            NiceSelect.bind(document.getElementById("grupo_id"), options);
+            NiceSelect.bind(document.getElementById("subgrupo_id"), options);
+
+            document.querySelectorAll('.nice-select .current').forEach(el => {
+                if (el.textContent.trim() === 'Select an option') {
+                    el.textContent = 'Selecciona una opción';
+                }
+            });
+
+            document.querySelectorAll('.nice-select .list .option').forEach(el => {
+                if (el.textContent.trim() === 'Select an option') {
+                    el.textContent = 'Selecciona una opción';
+                }
+            });
+
+            var searchInputs = document.querySelectorAll('.nice-select-search');
+            searchInputs.forEach(function(input) {
+                input.placeholder = 'Buscar...';
+            });
+
+            $('#grupo_id').on('change', function() {
+                if (this.value) {
+                    $('#subgrupo_id').prop('disabled', true).parent().addClass('nice-select-disabled');
+                } else {
+                    $('#subgrupo_id').prop('disabled', false).parent().removeClass('nice-select-disabled');
+                }
+            });
+
+            $('#subgrupo_id').on('change', function() {
+                if (this.value) {
+                    $('#grupo_id').prop('disabled', true).parent().addClass('nice-select-disabled');
+                } else {
+                    $('#grupo_id').prop('disabled', false).parent().removeClass('nice-select-disabled');
+                }
+            });
+        });
+
+        document.addEventListener("alpine:init", () => {
+            Alpine.data("crearGrupos", () => ({
+                codeArr: [],
+                toggleCode(name) {
+                    if (this.codeArr.includes(name)) {
+                        this.codeArr = this.codeArr.filter((d) => d != name);
+                    } else {
+                        this.codeArr.push(name);
+
+                        setTimeout(() => {
+                            document.querySelectorAll('pre.code').forEach(el => {
+                                hljs.highlightElement(el);
+                            });
+                        });
+                    }
+                }
+            }));
+        });
+
+        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($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/resources/views/adminGen/catalogos/subgrupos/edit.blade.php b/resources/views/adminGen/catalogos/subgrupos/edit.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..b3d5b801776cb1a7ea5b7855c450a61de9cb6353
--- /dev/null
+++ b/resources/views/adminGen/catalogos/subgrupos/edit.blade.php
@@ -0,0 +1,168 @@
+<x-layout.default>
+    <link rel='stylesheet' type='text/css' href='{{ Vite::asset("resources/css/nice-select2.css") }}'>
+
+    <div x-data="editarGrupos">
+        <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>Catálogos</span>
+            </li>
+            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
+                <a href="{{ route('catalogos.grupos.get') }}" class="text-primary hover:underline">Grupos</a>
+            </li>
+            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
+                <a href="{{ route('catalogos.subgrupos.get') }}" class="text-primary hover:underline">Subgrupos</a>
+            </li>
+            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
+                <span>Editar subgrupo</span>
+            </li>
+        </ul>
+        <div class="panel mt-6">
+            <div class="flex items-center justify-between mb-5">
+                <h5 class="font-semibold text-lg dark:text-white-light">Editar subgrupo</h5>
+            </div>
+            <div class="mb-5">
+                <form class="space-y-5" action="{{ route('catalogos.subgrupos.update', $subgrupo->id) }}" method="POST">
+                    @csrf
+                    @method('PUT')
+                    <div class="grid grid-cols-1 md:grid-cols-1 gap-5">
+                        <div>
+                            <label for="nombre">Nombre</label>
+                            <input id="nombre" name="nombre" type="text" required placeholder="Ingresa el nombre" value="{{ $subgrupo->nombre }}" class="form-input" />
+                        </div>
+                        <div class="mb-5">
+                            <label for="grupo_id">Grupo</label>
+                            <select id="grupo_id" name="grupo_id" required class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                                <option value="0" @if(!$subgrupo->grupo_id) selected='selected' @endif>Selecciona una opción</option>
+                                @foreach($grupos as $grupo)
+                                    <option value="{{ $grupo->id }}" @if($subgrupo->grupo_id == $grupo->id) selected='selected' @endif>{{ $grupo->nombre }}</option>
+                                @endforeach
+                            </select>
+                        </div>
+                        <div class="mb-5">
+                            <label for="subgrupo_id">Subgrupo</label>
+                            <select id="subgrupo_id" name="subgrupo_id" required class="block w-full py-2 px-3 border border-gray-300 bg-white rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
+                                <option value="0" @if(!$subgrupo->subgrupo_id) selected='selected' @endif>Selecciona una opción</option>
+                                @foreach($subgrupos as $subgrupoOpt)
+                                    <option value="{{ $subgrupoOpt->id }}" @if($subgrupo->subgrupo_id == $subgrupoOpt->id) selected='selected' @endif>{{ $subgrupoOpt->nombre }}</option>
+                                @endforeach
+                            </select>
+                        </div>
+                        <span class="badge bg-warning text-xs hover:top-0"><b>Nota:</b> Solo es posible seleccionar un grupo o un subgrupo, más no ambos.</span>
+                    </div>
+                    <button type="submit" class="btn btn-primary !mt-6">Guardar</button>
+                </form>
+            </div>
+        </div>
+    </div>
+
+    <link rel="stylesheet" href="{{ Vite::asset('resources/css/highlight.min.css') }}">
+    <script src="/assets/js/highlight.min.js"></script>
+
+    <script src="/assets/js/nice-select2.js"></script>
+    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>
+    <link rel="stylesheet" href="/assets/css/jquery.toast.css">
+    <script src="/assets/js/jquery.toast.js"></script>
+
+    <style>
+        .nice-select-disabled {
+            pointer-events: none;
+            opacity: 0.5;
+        }
+    </style>
+
+    <script>
+        document.addEventListener("DOMContentLoaded", function(e) {
+            var els = document.querySelectorAll(".selectize");
+            els.forEach(function(select) {
+                NiceSelect.bind(select);
+            });
+
+            var options = {
+                searchable: true
+            };
+            NiceSelect.bind(document.getElementById("grupo_id"), options);
+            NiceSelect.bind(document.getElementById("subgrupo_id"), options);
+
+            document.querySelectorAll('.nice-select .current').forEach(el => {
+                if (el.textContent.trim() === 'Select an option') {
+                    el.textContent = 'Selecciona una opción';
+                }
+            });
+
+            document.querySelectorAll('.nice-select .list .option').forEach(el => {
+                if (el.textContent.trim() === 'Select an option') {
+                    el.textContent = 'Selecciona una opción';
+                }
+            });
+
+            var searchInputs = document.querySelectorAll('.nice-select-search');
+            searchInputs.forEach(function(input) {
+                input.placeholder = 'Buscar...';
+            });
+
+            function toggleSelectState() {
+                if ($('#grupo_id').val() && $('#grupo_id').val() !== '0') {
+                    $('#subgrupo_id').prop('disabled', true).parent().addClass('nice-select-disabled');
+                } else {
+                    $('#subgrupo_id').prop('disabled', false).parent().removeClass('nice-select-disabled');
+                }
+
+                if ($('#subgrupo_id').val() && $('#subgrupo_id').val() !== '0') {
+                    $('#grupo_id').prop('disabled', true).parent().addClass('nice-select-disabled');
+                } else {
+                    $('#grupo_id').prop('disabled', false).parent().removeClass('nice-select-disabled');
+                }
+            }
+
+            $('#grupo_id').on('change', toggleSelectState);
+            $('#subgrupo_id').on('change', toggleSelectState);
+
+            toggleSelectState();
+        });
+
+        document.addEventListener("alpine:init", () => {
+            Alpine.data("editarGrupos", () => ({
+                codeArr: [],
+                toggleCode(name) {
+                    if (this.codeArr.includes(name)) {
+                        this.codeArr = this.codeArr.filter((d) => d != name);
+                    } else {
+                        this.codeArr.push(name);
+
+                        setTimeout(() => {
+                            document.querySelectorAll('pre.code').forEach(el => {
+                                hljs.highlightElement(el);
+                            });
+                        });
+                    }
+                }
+            }));
+        });
+
+        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($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/resources/views/adminGen/catalogos/subgrupos/index.blade.php b/resources/views/adminGen/catalogos/subgrupos/index.blade.php
new file mode 100644
index 0000000000000000000000000000000000000000..40895bdd5b035073cb6ea07d250d2c008ed3e728
--- /dev/null
+++ b/resources/views/adminGen/catalogos/subgrupos/index.blade.php
@@ -0,0 +1,120 @@
+<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="subgrupos">
+        <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>Catálogos</span>
+            </li>
+            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
+                <a href="{{ route('catalogos.grupos.get') }}" class="text-primary hover:underline">Grupos</a>
+            </li>
+            <li class="before:content-['/'] before:mr-1 rtl:before:ml-1">
+                <span>Subgrupos</span>
+            </li>
+        </ul>
+        <div class="panel mt-6">
+                <div class="flex items-center flex-wrap mb-5">
+                    <a href="{{ route('catalogos.subgrupos.create') }}" type="button" class="btn btn-success btn-sm m-1">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="9" cy="9" r="2" stroke="#1C274C" stroke-width="1.5"/>
+                        <path d="M13 15C13 16.1046 13 17 9 17C5 17 5 16.1046 5 15C5 13.8954 6.79086 13 9 13C11.2091 13 13 13.8954 13 15Z" stroke="#1C274C" stroke-width="1.5"/>
+                        <path d="M22 12C22 15.7712 22 17.6569 20.8284 18.8284C19.6569 20 17.7712 20 14 20H10C6.22876 20 4.34315 20 3.17157 18.8284C2 17.6569 2 15.7712 2 12C2 8.22876 2 6.34315 3.17157 5.17157C4.34315 4 6.22876 4 10 4H14C17.7712 4 19.6569 4 20.8284 5.17157C21.298 5.64118 21.5794 6.2255 21.748 7" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+                        <path d="M19 12H15" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+                        <path d="M19 9H14" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+                        <path d="M19 15H16" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
+                    </svg>
+                        Crear nuevo subgrupo
+                    </a>
+            </div>
+            <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 subgrupos = @json($subgrupos);
+        const data = subgrupos.map(subgrupo => [subgrupo.nombre, subgrupo.grupo?.nombre ?? 'Sin información', subgrupo.subgrupo?.nombre ?? 'Sin información', renderActions(subgrupo.id, subgrupo.nombre)]);
+
+        function renderActions(id, nombre) {
+            return `
+                <div class="flex space-x-2">
+                    <form action="{{ route('catalogos.subgrupos.destroy', '') }}/${id}" method="POST" class="inline-block">
+                        @csrf
+                        @method('DELETE')
+                        <button type="submit" class="btn btn-danger btn-sm">Eliminar</button>
+                    </form>
+                    <a href="/catalogos/grupos/subgrupos/${id}/editar" class="btn btn-primary btn-sm">Editar</a>
+                </div>`;
+        }
+
+        document.addEventListener('DOMContentLoaded', () => {
+            const datatable = new simpleDatatables.DataTable('#myTable', {
+                data: {
+                    headings: ['Nombre', 'Grupo', 'Subgrupo', 'Acciones'],
+                    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 95e14f6f7117bdd670328b7806454736cd3a4640..edaef8356678ebfeb84d9859fdaa178a13886737 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -8,6 +8,7 @@
 use App\Http\Controllers\CaracteristicasController;
 use App\Http\Controllers\DependenciaController;
 use App\Http\Controllers\GruposController;
+use App\Http\Controllers\SubgrupoController;
 use App\Http\Controllers\UserController;
 
 Route::get('/', function () {
@@ -47,6 +48,13 @@
     Route::post('/catalogos/dependencias', [DependenciaController::class, 'store'])->name('dependencias.store');
     Route::put('/catalogos/dependencias', [DependenciaController::class, 'update'])->name('dependencias.update');
     Route::delete('/catalogos/dependencias/{id}', [DependenciaController::class, 'destroy'])->name('dependencias.destroy');
+
+    Route::get('/catalogos/grupos/subgrupos', [SubgrupoController::class, 'index'])->name('subgrupos.get');
+    Route::get('/catalogos/grupos/subgrupos/crear', [SubgrupoController::class, 'create'])->name('subgrupos.create');
+    Route::post('/catalogos/grupos/subgrupos/crear', [SubgrupoController::class, 'store'])->name('subgrupos.store');
+    Route::get('/catalogos/grupos/subgrupos/{id}/editar', [SubgrupoController::class, 'edit'])->name('subgrupos.edit');
+    Route::put('/catalogos/grupos/subgrupos/{id}/editar', [SubgrupoController::class, 'update'])->name('subgrupos.update');
+    Route::delete('/catalogos/grupos/subgrupos/{id}', [SubgrupoController::class, 'destroy'])->name('subgrupos.destroy');
 });
 
 Route::name('usuarios.')->group(function () {