diff --git a/components/global/AddCard.vue b/components/global/AddCard.vue
index 835b4aa..ae14540 100644
--- a/components/global/AddCard.vue
+++ b/components/global/AddCard.vue
@@ -6,7 +6,7 @@ const emit = defineEmits(["on-click"])
 
 <template>
   <UiCard
-    class="h-full md:w-fit transition-all bg-transparent hover:text-slate-900 text-slate-500 dark:hover:text-slate-100 dark:text-slate-500 dark:focus-within:outline-gray-900 hover:-translate-y-0"
+    class="h-full lg:w-fit transition-all bg-transparent hover:text-slate-900 text-slate-500 dark:hover:text-slate-100 dark:text-slate-500 dark:focus-within:outline-gray-900 hover:-translate-y-0"
     has-click
     @on-click="emit('on-click')"
   >
diff --git a/pages/my/index.vue b/pages/my/index.vue
index 0af57e6..3d65a3c 100644
--- a/pages/my/index.vue
+++ b/pages/my/index.vue
@@ -135,11 +135,11 @@ function hideEditModal() {
           </Heading>
         </div>
 
-        <ul v-if="worlds?.data" class="grid lg:grid-cols-3 gap-2">
+        <ul v-if="worlds?.data" class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
           <li v-for="world in sortedWorlds" :key="world.id">
             <WorldPreviewCard :world="world" @on-edit="() => deployEditModal(world)" @on-delete="() => deployDeleteModal(world)" />
           </li>
-          <li class="md:w-fit">
+          <li class="xl:w-fit">
             <AddCard @on-click="() => isCreateWorldModalOpen = true">
               <template v-if="worlds?.data?.length > 0">
                 {{ $t('entity.world.addSingle') }}
diff --git a/pages/my/worlds/[id].vue b/pages/my/worlds/[id].vue
index bc29762..e07ea92 100644
--- a/pages/my/worlds/[id].vue
+++ b/pages/my/worlds/[id].vue
@@ -227,7 +227,7 @@ function hideEditModal() {
             </Heading>
           </div>
 
-          <ul class="grid md:grid-cols-3 gap-2">
+          <ul class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-2">
             <li v-for="calendar in sortedCalendars" :key="calendar.id">
               <CalendarPreviewCard
                 :calendar="calendar"
@@ -237,7 +237,7 @@ function hideEditModal() {
                 @on-delete="() => deployDeleteCalendarModal(calendar)" />
             </li>
 
-            <li class="md:w-fit">
+            <li class="xl:w-fit">
               <AddCard @on-click="() => isCreateCalendarModalOpen = true">
                 <template v-if="sortedCalendars.length > 0">
                   {{ $t('entity.calendar.addSingle') }}