diff --git a/app/(private)/Impresiones/page.tsx b/app/(private)/Impresiones/page.tsx
index 7bbb6de..585faf0 100644
--- a/app/(private)/Impresiones/page.tsx
+++ b/app/(private)/Impresiones/page.tsx
@@ -6,10 +6,8 @@ import Impressions from "@/app/Components/Impressions/impressions";
 import ShowError from "@/app/Components/Global/ShowError";
 
 import { cookies } from "next/headers";
+import { getCost } from "@/app/lib/getCost";
 import { GetStudentWhitoutSancion } from "@/app/lib/getStudentWhitoutSancion";
-import { envConfig } from "@/app/lib/config";
-
-import axios from "axios";
 
 import "@/app/globals.css";
 
@@ -40,9 +38,32 @@ export default async function Page(props: {
     }
   }
 
+  let id_servicio: number;
+
+  switch (key) {
+    case "B/N":
+      id_servicio = 1;
+      break;
+
+    case "color":
+      id_servicio = 2;
+      break;
+
+    case "Plotter":
+      id_servicio = 3;
+      break;
+
+    case "Escaner":
+      id_servicio = 6;
+      break;
+  }
+
   try {
-    const response = await axios.get(`${envConfig.apiUrl}/costo`);
-    costos = response.data;
+    console.log(`getCost`)
+
+    const response = await getCost();
+    costos = response;
+
   } catch (error) {
     console.error("Error obteniendo costos:", error);
   }
@@ -119,8 +140,8 @@ export default async function Page(props: {
   const optionsToUse =
     roleNumber === 5
       ? options.filter(
-          (option) => option.key === "Recibo" || option.key === "B/N"
-        )
+        (option) => option.key === "Recibo" || option.key === "B/N"
+      )
       : options;
 
   return (
diff --git a/app/Components/Global/Toggle/Toggle.tsx b/app/Components/Global/Toggle/Toggle.tsx
index 8183867..9684064 100644
--- a/app/Components/Global/Toggle/Toggle.tsx
+++ b/app/Components/Global/Toggle/Toggle.tsx
@@ -7,7 +7,7 @@ import { useState, ReactNode } from "react";
 interface ToggleOption {
   key: string;
   label: string;
-  content: ReactNode;
+  content: ReactNode | (() => ReactNode);
 }
 
 interface ToggleProps {
@@ -46,7 +46,15 @@ export default function Toggle({ options, defaultView }: ToggleProps) {
       </div>
 
       <div className="padding toggleContent">
-        {options.find((opt) => opt.key === view)?.content}
+        {(() => {
+          const active = options.find((opt) => opt.key === view)?.content;
+
+          if (typeof active === "function") {
+            return active();
+          }
+
+          return active;
+        })()}
       </div>
     </section>
   );
diff --git a/app/Components/Impressions/impressions.tsx b/app/Components/Impressions/impressions.tsx
index 7911ef4..3ddeef3 100644
--- a/app/Components/Impressions/impressions.tsx
+++ b/app/Components/Impressions/impressions.tsx
@@ -19,6 +19,9 @@ interface ImpressionsProps {
 function Impressions({ costs, numAcount, id_servicio }: ImpressionsProps) {
   const [pages, setPages] = useState("");
   const [cost, setCost] = useState(String(costs[0].value));
+console.log(id_servicio)
+console.log(costs)
+  const total = Number(cost) * Number(pages);
 
   const router = useRouter();
   const handleLogout = () => {
@@ -61,7 +64,7 @@ function Impressions({ costs, numAcount, id_servicio }: ImpressionsProps) {
     const result = await PostImpressions({
       id_cuenta: numAcount,
       numero_hojas: parseInt(pages),
-      monto: parseInt(cost) * parseInt(pages),
+      monto: total,
       id_servicio,
     });
 
@@ -134,7 +137,7 @@ function Impressions({ costs, numAcount, id_servicio }: ImpressionsProps) {
           <label
             style={{ width: "100%", minWidth: "200px", maxWidth: "500px" }}
           >
-            {pages && cost && `$${parseInt(cost) * parseInt(pages)}.00`}
+            {pages && cost && `$${total}.00`}
           </label>
         </div>
 
diff --git a/app/lib/apiClient.ts b/app/lib/apiClient.ts
index 648bbe8..319bee8 100644
--- a/app/lib/apiClient.ts
+++ b/app/lib/apiClient.ts
@@ -36,7 +36,6 @@ apiClient.interceptors.response.use(
       if (status === 401) {
         Cookies.remove("token");
         Cookies.remove("user");
-
       }
 
       if (status === 403) {
diff --git a/app/lib/getCost.ts b/app/lib/getCost.ts
new file mode 100644
index 0000000..781aa32
--- /dev/null
+++ b/app/lib/getCost.ts
@@ -0,0 +1,28 @@
+import axios from "axios";
+import { envConfig } from "./config";
+import { cookies } from "next/headers";
+
+if (!envConfig.apiUrl) {
+  console.error("API URL is not defined in envConfig");
+}
+
+export async function getCost() {
+  const cookieStore = cookies();
+  const token = (await cookieStore).get("token")?.value;
+
+  try {
+    const response = await axios.get(`${envConfig.apiUrl}/costo`, {
+      headers: {
+        Authorization: `Bearer ${token}`,
+      },
+    });
+    return response.data;
+  } catch (error: any) {
+    const msg =
+      error.response?.data?.error ||
+      error.message ||
+      "Error desconocido al cobrar impresión";
+    return { error: msg };
+  }
+}
+//IO