diff --git a/src/components/App/CheckoutDelivery.vue b/src/components/App/CheckoutDelivery.vue
new file mode 100644
index 0000000..8190a10
--- /dev/null
+++ b/src/components/App/CheckoutDelivery.vue
@@ -0,0 +1,114 @@
+<script setup>
+import { ref } from "vue";
+
+import Input from "@Holos/Form/Input.vue";
+import QRscan from "./QRscan.vue";
+
+/** Eventos */
+const emit = defineEmits(["fine-searched"]);
+
+/** Refs */
+const numero_entrega = ref("");
+const fineData = ref({
+  fecha: "",
+  numero_entrega: "",
+  nombre: "",
+  monto_entrega: "",
+});
+
+/** Métodos */
+const handleSearch = () => {
+  if (!numero_entrega.value.trim()) {
+    Notify.warning("Por favor ingresa un número de entrega");
+    return;
+  }
+
+  fineData.value = {
+    fecha: "2025-11-11",
+    numero_entrega: numero_entrega.value,
+    nombre: "Juan Pérez García",
+    monto_entrega: "$1,500.00",
+  };
+
+  emit("fine-searched", fineData.value);
+};
+</script>
+
+<template>
+  <div class="space-y-6 p-6">
+    <div class="bg-white rounded-xl p-6 shadow-lg">
+      <h3 class="text-xl font-semibold mb-4 text-gray-800">Buscar Multa</h3>
+      <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+        <div class="mb-6">
+          <label class="block text-sm text-gray-600 font-medium mb-2">
+            Escanear Código QR
+          </label>
+          <div
+            class="w-full h-64 bg-gray-800 rounded-lg overflow-hidden"
+          >
+            <!-- QR -->
+            <QRscan
+              v-model:numero_entrega="numero_entrega"
+              @fine-searched="handleSearch"
+            />
+          </div>
+        </div>
+        <div class="flex flex-col justify-center">
+          <div class="mb-5">
+            <Input
+              v-model="numero_entrega"
+              id="Número de entrega"
+              type="text"
+              placeholder="Ingrese el número de entrega"
+              @keyup.enter="handleSearch"
+            />
+          </div>
+
+          <button
+            @click="handleSearch"
+            type="button"
+            class="w-full bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
+          >
+            Buscar
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="bg-white rounded-xl p-6 shadow-lg">
+      <form @submit.prevent="handlePayment">
+        <!-- Fecha -->
+        <div class="grid grid-cols-2 gap-4 mb-5">
+          <Input
+            v-model="fineData.fecha"
+            id="Fecha de entrega"
+            type="date"
+          />
+        </div>
+
+        <!-- Nombre -->
+        <div class="mb-5">
+          <Input v-model="fineData.nombre" id="Nombre del cajero" type="text"/>
+        </div>
+
+        <!-- Monto a Pagar -->
+        <div class="mb-5">
+          <Input
+            v-model="fineData.monto_entrega"
+            id="Monto a entregar"
+            type="text"
+            class="text-lg font-semibold"
+          />
+        </div>
+
+        <!-- Botón Cobrar -->
+        <button
+          type="submit"
+          class="w-full bg-green-700 hover:bg-green-600 text-white font-medium py-3.5 rounded-lg transition-colors"
+        >
+          Entregar caja
+        </button>
+      </form>
+    </div>
+  </div>
+</template>
diff --git a/src/components/App/FineSection.vue b/src/components/App/FineSection.vue
index 9dd2f4c..45b09d4 100644
--- a/src/components/App/FineSection.vue
+++ b/src/components/App/FineSection.vue
@@ -27,9 +27,6 @@ const handleSearch = () => {
     return;
   }
 
-  // Aquí harías la llamada a la API para buscar la multa
-  console.log("Buscando multa:", fineNumber.value);
-
   // Simular datos encontrados (temporal)
   fineData.value = {
     fecha: "2025-11-11",
@@ -171,7 +168,7 @@ const handlePayment = () => {
         <!-- Botón Cobrar -->
         <button
           type="submit"
-          class="w-full bg-[#7a0b3a] hover:bg-[#68082e] text-white font-medium py-3.5 rounded-lg transition-colors"
+          class="w-full bg-green-700 hover:bg-green-600 text-white font-medium py-3.5 rounded-lg transition-colors"
         >
           Cobrar
         </button>
diff --git a/src/layouts/AppLayout.vue b/src/layouts/AppLayout.vue
index 727d6b0..033ff71 100644
--- a/src/layouts/AppLayout.vue
+++ b/src/layouts/AppLayout.vue
@@ -59,6 +59,11 @@ onMounted(() => {
                     name="Cobro de Membresía" 
                     to="membership.index"
                 />
+                <Link
+                    icon="point_of_sale"
+                    name="Entrega de caja" 
+                    to="checkout.index"
+                />
             </Section>
             <Section
                 v-if="hasPermission('users.index')"
diff --git a/src/pages/App/Checkout/Index.vue b/src/pages/App/Checkout/Index.vue
new file mode 100644
index 0000000..69e1e36
--- /dev/null
+++ b/src/pages/App/Checkout/Index.vue
@@ -0,0 +1,9 @@
+<script setup>
+import PageHeader      from "@Holos/PageHeader.vue";
+import Checkout     from '@App/CheckoutDelivery.vue';
+</script>
+
+<template>
+    <PageHeader title="Entrega de Caja" />
+    <Checkout />
+</template>
\ No newline at end of file
diff --git a/src/router/Index.js b/src/router/Index.js
index 573ff7b..2db801c 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -102,6 +102,16 @@ const router = createRouter({
                             component: () => import('@Pages/App/Membership/Create.vue')
                         }
                     ]
+                },
+                 {
+                    path: 'checkout',
+                    children: [
+                        {
+                            path: '',
+                            name: 'checkout.index',
+                            component: () => import('@Pages/App/Checkout/Index.vue')
+                        },
+                    ]
                 }
             ],
         },