diff --git a/src/lib/components/services/ServiceCard.svelte b/src/lib/components/services/ServiceCard.svelte
index e8317a2..a25bde3 100644
--- a/src/lib/components/services/ServiceCard.svelte
+++ b/src/lib/components/services/ServiceCard.svelte
@@ -1,12 +1,15 @@
 <script lang="ts">
-	import { getImageLink } from "$lib/images";
+	import { getImageLink } from '$lib/images';
+	import type { Service } from '$lib/types/service';
+    import convertMinutesToHours from '$lib/utils/minToH';
+
+    export let item: Service['items'][number];
 
-    export let item: any = {};
 </script>
 
 <a href="/sluzby/{item.id}" id="{item.id}"class="w-72 card variant-glass-secondary mx-2 my-4 duration-500 hover:scale-105 hover:shadow-xl shadow-md">
     <header>
-        <img src={getImageLink({id: item.id, w: 288, h: 320 })} class="bg-black/50 object-cover aspect-[9/10] rounded-t-xl" alt="Post" />
+        <img src={getImageLink({id: item.id, w: 288, h: 320 })} class="bg-black/50 object-cover aspect-[9/10] rounded-t-xl" alt="Post" loading="lazy" />
     </header>
     <!-- <div class="img" style="background-image: url('/images/services/{item.id}.jpg');"/>                -->
     <div class="flex flex-col px-4 py-3 w-72 h-full">
@@ -29,7 +32,8 @@
         <footer class="justify-self-end align-bottom">
             <div class="flex flex-col md:flex-row md:justify-between items-center">
                 <p class=" text-lg text-surface-900 font-semibold text-right">
-                    {typeof item.price === 'number' ? `${item.price},-` : item.price}{typeof item.duration === 'number' ? `/${item.duration}h` : ''}
+                    {typeof item.price === 'number' ? `${item.price},-` : item.price}
+                    {typeof item.duration === 'number' ? `/${convertMinutesToHours(item.duration)}` : ''}
                 </p>
                 <a 
                 href="https://app.cal.com/kkosmetickysalon/{item.id}" 
@@ -40,4 +44,4 @@
         </footer>
         
     </div>
-</a>
\ No newline at end of file
+</a>
diff --git a/src/lib/utils/minToH.cjs b/src/lib/utils/minToH.cjs
new file mode 100644
index 0000000..a9a78ca
--- /dev/null
+++ b/src/lib/utils/minToH.cjs
@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+function convertMinutesToHours(minutes) {
+    try {
+        var hours = Math.floor(minutes / 60);
+        var mins = minutes % 60;
+        if (hours) {
+            console.log("".concat(hours, "h ").concat(mins, "m"));
+            return "".concat(hours, "h ").concat(mins, "m");
+        }
+        else
+            console.log("".concat(mins, "m"));
+        return "".concat(mins, "m");
+    }
+    catch (error) {
+        console.error("I don't think that's time: ".concat(error));
+        process.exit(1); // Exit with non-zero code to signal failure
+    }
+}
+exports.default = convertMinutesToHours;
diff --git a/src/lib/utils/minToH.ts b/src/lib/utils/minToH.ts
new file mode 100644
index 0000000..d956cad
--- /dev/null
+++ b/src/lib/utils/minToH.ts
@@ -0,0 +1,16 @@
+export default function convertMinutesToHours(minutes:number) {
+    try {
+        const hours = Math.floor(minutes / 60);
+        const mins = minutes % 60;
+        if (hours) {
+            console.log(`${hours}h ${mins}m`)
+            return `${hours}h ${mins}m`
+        }
+        
+        else console.log(`${mins}m`); return `${mins}m`
+        
+    } catch (error) {
+        console.error(`I don't think that's time: ${error}`);
+        process.exit(1); // Exit with non-zero code to signal failure
+    }
+}