diff --git a/app/views/organizations/staff/default_pet_tasks/_default_pet_task_cards.html.erb b/app/views/organizations/staff/default_pet_tasks/_default_pet_task_cards.html.erb
new file mode 100644
index 000000000..5411f49ae
--- /dev/null
+++ b/app/views/organizations/staff/default_pet_tasks/_default_pet_task_cards.html.erb
@@ -0,0 +1,27 @@
+<%# Card %>
+<div class="col-lg-5 d-xl-none">
+  <div class="card card-hover m-2 m-sm-4" style='overflow: hidden; max-width: 350px;'>
+
+    <%# Card header %>
+    <ul class="list-group list-group-flush">
+      <li class="list-group-item d-flex justify-content-center">
+        <h4 class="card-title text-secondary mb-0">
+          <%=default_pet_tasks.name %>
+        </h4>
+      </li>
+        <% li_classes = %w[list-group-item text-secondary] %>
+        <%= tag.li("Description: #{default_pet_tasks.description}", class: li_classes) %>
+        <%= tag.li("Species: #{default_pet_tasks.human_enum_name(:species)}", class: li_classes) %>
+        <%= tag.li("Due in: #{default_pet_tasks.due_in_days ? pluralize(default_pet_tasks.due_in_days, "day") : ""}", class: li_classes) %>
+        <%= tag.li("Reccuring: #{default_pet_tasks.recurring? ? t('general.yes') : t('general.no')}", class: li_classes) %>
+        <% if allowed_to?(:manage?, default_pet_tasks) %>
+          <td>
+            <div class="d-flex align-items-center justify-content-center">
+              <%= link_to t('general.edit'), edit_staff_default_pet_task_path(default_pet_tasks), class: 'btn btn-warning m-2' %>
+              <%= link_to t('general.delete'), staff_default_pet_task_path(default_pet_tasks), class: 'btn btn-danger m-2', data: { turbo_method: "general.delete", turbo_confirm: t('.are_you_sure_delete') } %>
+            </div>
+          </td>
+        <% end %>
+    </ul>
+  </div>
+</div>
diff --git a/app/views/organizations/staff/default_pet_tasks/index.html.erb b/app/views/organizations/staff/default_pet_tasks/index.html.erb
index 9226d7113..c15502f1b 100644
--- a/app/views/organizations/staff/default_pet_tasks/index.html.erb
+++ b/app/views/organizations/staff/default_pet_tasks/index.html.erb
@@ -36,10 +36,21 @@
             <% end %>
           </div>
         </div>
-        <div class="d-flex justify-content-center align-items-center mt-2">
-          <%== pagy_bootstrap_nav(@pagy)  if @pagy.pages > 1 %>
-        </div>
   </section>
+
+  <div class="d-flex justify-content-center align-items-center mt-2">
+    <%== pagy_bootstrap_nav(@pagy)  if @pagy.pages > 1 %>
+  </div>
+  <div class="justify-content-md-between mb-4 mb-xl-0 gx-3">
+    <div class="d-none d-xl-block">
+      <%= render "default_pet_tasks_table"%>
+    </div> 
+    <div class="d-xl-none d-flex flex-wrap">
+      <%= render partial:"default_pet_task_cards", collection: @default_pet_tasks, as: :default_pet_tasks %>
+    </div>
+  </div>
+    <div class="d-flex justify-content-center align-items-center mt-2">
+    <%== pagy_bootstrap_nav(@pagy)  if @pagy.pages > 1 %>
+  </div>
   <% end %>
 <% end %>
-<%= render "default_pet_tasks_table" %>
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 675e9f760..910317ae0 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -440,6 +440,15 @@ en:
           default_pet_tasks: "Default Pet Tasks"
           create_default_task: "Create Default Task"
           are_you_sure_delete: "Are you sure you want to delete this default pet task?"
+        default_pet_task_cards:
+          name: "Name"
+          description: "Description"
+          species: "Species"
+          due_after: "Due in"
+          recurring: "Recurring"
+          default_pet_tasks: "Default Pet Tasks"
+          create_default_task: "Create Default Task"
+          are_you_sure_delete: "Are you sure you want to delete this default pet task?"
         default_pet_tasks_table:
           name: "Name"
           description: "Description"