diff --git a/pages/services.tsx b/pages/services.tsx
index 9a24a5a..25436b5 100644
--- a/pages/services.tsx
+++ b/pages/services.tsx
@@ -4,31 +4,54 @@ import Dockerode from 'dockerode';
 import { ReactElement } from 'react'
 import useSWR from 'swr';
 import { CardContentService, PageContentBox, PageDescription, PageTitle } from '../components/styles/content';
+import { ServiceCardMobile } from '../components/styles/cards/mobile';
 import ServiceList from '../public/pages.json';
+import useWindowSize from '../components/windowsize';
 
 const fetcher = (url: string) => fetch(url).then((res) => res.json())
 
 function Services() {
   const { initialData, fullData, loadingFull, error } = useServices();
+  const isMobile = useWindowSize();
 
   let content: ReactElement = <></>;
 
   if (error) { content = <div>Error loading data</div> }
   else if (loadingFull) {
-    content =
-      <PageContentBox>
-        {initialData?.map((item: Service) => (
-          <CardContentService key={item.name} content={item} />
-        ))}
-      </PageContentBox>
+    if (isMobile) {
+      content =
+        <PageContentBox>
+          {initialData?.map((item: Service) => (
+            <ServiceCardMobile key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
+    else {
+      content =
+        <PageContentBox>
+          {initialData?.map((item: Service) => (
+            <CardContentService key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
   }
   else if (fullData) {
-    content =
-      <PageContentBox>
-        {fullData.map((item: Service) => (
-          <CardContentService key={item.name} content={item} />
-        ))}
-      </PageContentBox>
+    if (isMobile) {
+      content =
+        <PageContentBox>
+          {fullData.map((item: Service) => (
+            <ServiceCardMobile key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
+    else {
+      content =
+        <PageContentBox>
+          {fullData.map((item: Service) => (
+            <CardContentService key={item.name} content={item} />
+          ))}
+        </PageContentBox>
+    }
   }
   else {
     content = <div>Error loading data</div>