diff --git a/src/composables/useCardSize.js b/src/composables/useCardSize.js
new file mode 100644
index 00000000..7f562106
--- /dev/null
+++ b/src/composables/useCardSize.js
@@ -0,0 +1,8 @@
+import { useQuasar } from 'quasar';
+
+export default function() {
+    const quasar = useQuasar();
+    if (quasar.screen.gt.xs) return 'q-pa-md'
+    else return 'q-pa-xs';
+
+}
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 249337c4..78eec9e8 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -5,6 +5,7 @@ import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
 import ClaimDescriptor from './ClaimDescriptor.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';

 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -28,7 +29,7 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index a3503628..9da9eb21 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -6,6 +6,7 @@ import CustomerDescriptor from './CustomerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';

 const stateStore = useStateStore();
 const route = useRoute();
@@ -30,7 +31,7 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Entry/Card/EntryCard.vue b/src/pages/Entry/Card/EntryCard.vue
index eea0b3b6..5a2bef18 100644
--- a/src/pages/Entry/Card/EntryCard.vue
+++ b/src/pages/Entry/Card/EntryCard.vue
@@ -7,6 +7,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import EntryDescriptor from './EntryDescriptor.vue';

 import { useStateStore } from 'stores/useStateStore';
+import useCardSize from 'src/composables/useCardSize';

 const { t } = useI18n();
 const stateStore = useStateStore();
@@ -33,7 +34,7 @@ const stateStore = useStateStore();
         <QPage>
             <VnSubToolbar />

-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/InvoiceIn/Card/InvoiceInCard.vue b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
index c0e36e58..0de31c18 100644
--- a/src/pages/InvoiceIn/Card/InvoiceInCard.vue
+++ b/src/pages/InvoiceIn/Card/InvoiceInCard.vue
@@ -8,6 +8,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import { useArrayData } from 'src/composables/useArrayData';
 import { onMounted, watch } from 'vue';
 import { useRoute } from 'vue-router';
+import useCardSize from 'src/composables/useCardSize';

 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -74,7 +75,7 @@ watch(
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
index fe6649fb..6844df2d 100644
--- a/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
+++ b/src/pages/InvoiceOut/Card/InvoiceOutCard.vue
@@ -5,6 +5,7 @@ import InvoiceOutDescriptor from './InvoiceOutDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';

 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -28,7 +29,7 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Item/Card/ItemCard.vue b/src/pages/Item/Card/ItemCard.vue
index 5ca20d6f..3b3750b2 100644
--- a/src/pages/Item/Card/ItemCard.vue
+++ b/src/pages/Item/Card/ItemCard.vue
@@ -4,6 +4,7 @@ import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
 import ItemDescriptor from './ItemDescriptor.vue';

 import { useStateStore } from 'stores/useStateStore';
+import useCardSize from 'src/composables/useCardSize';

 const stateStore = useStateStore();
 </script>
@@ -19,7 +20,7 @@ const stateStore = useStateStore();
         <QPage>
             <VnSubToolbar />

-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Supplier/Card/SupplierCard.vue b/src/pages/Supplier/Card/SupplierCard.vue
index 74b2dfb4..fdf1d785 100644
--- a/src/pages/Supplier/Card/SupplierCard.vue
+++ b/src/pages/Supplier/Card/SupplierCard.vue
@@ -5,6 +5,7 @@ import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import SupplierDescriptor from './SupplierDescriptor.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';

 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -30,7 +31,7 @@ const { t } = useI18n();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index 568cf644..0d5d3803 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -5,6 +5,7 @@ import TicketDescriptor from './TicketDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';

 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -29,7 +30,7 @@ const { t } = useI18n();
         <QPage>
             <VnSubToolbar />

-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Travel/Card/TravelCard.vue b/src/pages/Travel/Card/TravelCard.vue
index 76bf74c6..e6c7b7e2 100644
--- a/src/pages/Travel/Card/TravelCard.vue
+++ b/src/pages/Travel/Card/TravelCard.vue
@@ -3,6 +3,7 @@ import { useStateStore } from 'stores/useStateStore';
 import TravelDescriptor from './TravelDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';

 const stateStore = useStateStore();
 </script>
@@ -17,7 +18,7 @@ const stateStore = useStateStore();
     <QPageContainer>
         <QPage>
             <VnSubToolbar />
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Wagon/Card/WagonCard.vue b/src/pages/Wagon/Card/WagonCard.vue
index ba451777..5ac18fb4 100644
--- a/src/pages/Wagon/Card/WagonCard.vue
+++ b/src/pages/Wagon/Card/WagonCard.vue
@@ -3,6 +3,7 @@ import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute } from 'vue-router';
 import LeftMenu from 'components/LeftMenu.vue';
+import useCardSize from 'src/composables/useCardSize';

 const stateStore = useStateStore();
 const route = useRoute();
@@ -17,7 +18,7 @@ const { t } = useI18n();
     </QDrawer>
     <QPageContainer>
         <QPage>
-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>
diff --git a/src/pages/Worker/Card/WorkerCard.vue b/src/pages/Worker/Card/WorkerCard.vue
index 3b31f906..0d62dcfc 100644
--- a/src/pages/Worker/Card/WorkerCard.vue
+++ b/src/pages/Worker/Card/WorkerCard.vue
@@ -5,6 +5,7 @@ import WorkerDescriptor from './WorkerDescriptor.vue';
 import LeftMenu from 'components/LeftMenu.vue';
 import VnSearchbar from 'src/components/ui/VnSearchbar.vue';
 import VnSubToolbar from 'src/components/ui/VnSubToolbar.vue';
+import useCardSize from 'src/composables/useCardSize';

 const stateStore = useStateStore();
 const { t } = useI18n();
@@ -29,7 +30,7 @@ const { t } = useI18n();
         <QPage>
             <VnSubToolbar />

-            <div :class="$q.screen.gt.xs ? 'q-pa-md' : 'q-pa-xs'">
+            <div :class="useCardSize()">
                 <RouterView></RouterView>
             </div>
         </QPage>