diff --git a/core/templates/core/create_receipt.html b/core/templates/core/create_receipt.html
index 0929321..84d9e6c 100644
--- a/core/templates/core/create_receipt.html
+++ b/core/templates/core/create_receipt.html
@@ -49,16 +49,16 @@
                             {% for form in items %}
                             <div class="item-row row g-2 align-items-center mb-2">
                                 {{ form.id }}
-                                <div class="col-7">
+                                <div class="col-12 col-md-7">
                                     {{ form.product }}
                                 </div>
-                                <div class="col-4">
+                                <div class="col-10 col-md-4">
                                     <div class="input-group">
                                         <span class="input-group-text bg-light border-end-0">R</span>
                                         {{ form.amount }}
                                     </div>
                                 </div>
-                                <div class="col-1 text-center">
+                                <div class="col-2 col-md-1 text-center">
                                     {% if items.can_delete %}
                                         <div class="form-check d-none">
                                             {{ form.DELETE }}
@@ -122,16 +122,16 @@
 <!-- Empty Form Template for JS -->
 <div id="empty-form" class="d-none">
     <div class="item-row row g-2 align-items-center mb-2">
-        <div class="col-7">
+        <div class="col-12 col-md-7">
             {{ items.empty_form.product }}
         </div>
-        <div class="col-4">
+        <div class="col-10 col-md-4">
             <div class="input-group">
                 <span class="input-group-text bg-light border-end-0">R</span>
                 {{ items.empty_form.amount }}
             </div>
         </div>
-        <div class="col-1 text-center">
+        <div class="col-2 col-md-1 text-center">
             <div class="form-check d-none">
                 {{ items.empty_form.DELETE }}
             </div>
diff --git a/core/templates/core/log_attendance.html b/core/templates/core/log_attendance.html
index 0328b9e..7c17444 100644
--- a/core/templates/core/log_attendance.html
+++ b/core/templates/core/log_attendance.html
@@ -19,14 +19,14 @@
                     {% csrf_token %}
                     
                     <div class="row mb-4">
-                        <div class="col-md-3">
+                        <div class="col-md-6 col-lg-3">
                             <label class="form-label fw-bold">Start Date</label>
                             {{ form.date }}
                             {% if form.date.errors %}
                                 <div class="text-danger mt-1 small">{{ form.date.errors }}</div>
                             {% endif %}
                         </div>
-                        <div class="col-md-3">
+                        <div class="col-md-6 col-lg-3">
                             <label class="form-label fw-bold">End Date (Optional)</label>
                             {{ form.end_date }}
                             <div class="mt-2">
@@ -40,14 +40,14 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-md-3">
+                        <div class="col-md-6 col-lg-3">
                             <label class="form-label fw-bold">Project</label>
                             {{ form.project }}
                             {% if form.project.errors %}
                                 <div class="text-danger mt-1 small">{{ form.project.errors }}</div>
                             {% endif %}
                         </div>
-                         <div class="col-md-3">
+                         <div class="col-md-6 col-lg-3">
                             <label class="form-label fw-bold">Team (Optional)</label>
                             {{ form.team }}
                             {% if form.team.errors %}
@@ -164,7 +164,12 @@
         transition: all 0.2s ease-in-out;
     }
     .mt-n4 {
-        margin-top: -3rem !important;
+        margin-top: -1.5rem !important;
+    }
+    @media (min-width: 768px) {
+        .mt-n4 {
+            margin-top: -3rem !important;
+        }
     }
 </style>
 
diff --git a/core/templates/core/payroll_dashboard.html b/core/templates/core/payroll_dashboard.html
index b484491..b32e9c0 100644
--- a/core/templates/core/payroll_dashboard.html
+++ b/core/templates/core/payroll_dashboard.html
@@ -9,8 +9,8 @@
 
 {% block content %}
 <div class="container py-5">
-    <div class="d-flex justify-content-between align-items-center mb-4">
-        <h1 class="h2 fw-bold text-dark">Payroll Dashboard</h1>
+    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-4">
+        <h1 class="h2 fw-bold text-dark mb-0">Payroll Dashboard</h1>
         <div>
             <button class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#addAdjustmentModal">
                 + Add Adjustment
@@ -118,7 +118,7 @@
     </div>
 
     <!-- Filter Tabs -->
-    <ul class="nav nav-pills mb-4">
+    <ul class="nav nav-pills mb-4 flex-nowrap overflow-auto pb-1">
         <li class="nav-item">
             <a class="nav-link {% if active_tab == 'pending' %}active{% endif %}" href="?status=pending">Pending Payments</a>
         </li>
@@ -191,7 +191,7 @@
                                 </td>
                                 <td class="text-end pe-4">
                                     {% if item.total_payable > 0 or item.has_pending_advances %}
-                                    <div class="d-flex gap-1 justify-content-end">
+                                    <div class="d-grid d-md-flex gap-1 justify-content-md-end">
                                         {% if item.ot_hours_unpriced > 0 %}
                                             <button type="button" class="btn btn-sm btn-warning text-dark price-ot-btn"
                                                 data-worker-id="{{ item.worker.id }}" data-worker-name="{{ item.worker.name }}">
@@ -448,8 +448,8 @@
                 <div class="modal-body">
                     <div class="mb-3">
                         <label class="form-label">Workers</label>
-                        <div class="mb-2 d-flex gap-2 align-items-center">
-                            <select id="adjTeamFilter" class="form-select form-select-sm" style="max-width: 200px;">
+                        <div class="mb-2 d-flex flex-wrap gap-2 align-items-center">
+                            <select id="adjTeamFilter" class="form-select form-select-sm" style="max-width: 300px;">
                                 <option value="">Filter by team...</option>
                                 {% for team in all_teams %}
                                 <option value="{{ team.id }}">{{ team.name }}</option>
diff --git a/core/templates/core/work_log_list.html b/core/templates/core/work_log_list.html
index a53b1a8..efc23ae 100644
--- a/core/templates/core/work_log_list.html
+++ b/core/templates/core/work_log_list.html
@@ -10,12 +10,12 @@
 {% block content %}
 <div class="dashboard-header pb-5">
     <div class="container">
-        <div class="d-flex justify-content-between align-items-center mb-4">
+        <div class="d-flex flex-wrap justify-content-between align-items-center gap-3 mb-4">
             <div>
                 <h1 class="display-5 mb-2">Work Log History</h1>
-                <p class="lead opacity-75">Filter and review historical daily work logs and adjustments.</p>
+                <p class="lead opacity-75 mb-0">Filter and review historical daily work logs and adjustments.</p>
             </div>
-            <div class="d-flex gap-2 align-items-center">
+            <div class="d-flex flex-wrap gap-2 align-items-center">
                 <!-- View Switcher -->
                 <div class="btn-group me-2 shadow-sm" role="group">
                   <a href="?view=list&worker={{ selected_worker|default:'' }}&team={{ selected_team|default:'' }}&project={{ selected_project|default:'' }}&payment_status={{ selected_payment_status|default:'' }}" class="btn btn-outline-secondary bg-white {% if view_mode != 'calendar' %}active fw-bold{% endif %}">
@@ -342,7 +342,10 @@
 </div>
 
 <style>
-    .mt-n4 { margin-top: -1.5rem !important; }
+    .mt-n4 { margin-top: -0.75rem !important; }
+    @media (min-width: 768px) {
+        .mt-n4 { margin-top: -1.5rem !important; }
+    }
     .bg-accent { background-color: var(--bs-accent); }
     .btn-accent { background-color: #ffde59; color: #000; border: none; font-weight: 600; }
     .btn-accent:hover { background-color: #e6c850; }
@@ -360,6 +363,13 @@
     .cal-day--has-logs { cursor: pointer; transition: background-color 0.15s; }
     .cal-day--has-logs:hover { background-color: rgba(13, 110, 253, 0.04) !important; }
     .cal-day--selected { background-color: rgba(13, 110, 253, 0.08) !important; box-shadow: inset 0 0 0 2px var(--bs-primary); }
+
+    /* Calendar mobile: compact cells */
+    @media (max-width: 767.98px) {
+        .calendar-table td { height: 80px !important; padding: 4px !important; }
+        .calendar-table .calendar-events { max-height: 50px !important; }
+        .calendar-table .calendar-events .mb-1 { font-size: 0.65rem !important; padding: 2px !important; }
+    }
 </style>
 
 <script>
diff --git a/static/css/custom.css b/static/css/custom.css
index 8767672..dc85a41 100644
--- a/static/css/custom.css
+++ b/static/css/custom.css
@@ -43,8 +43,10 @@ h1, h2, h3, .heading-font {
     transition: transform 0.2s ease-in-out;
 }
 
-.card:hover {
-    transform: translateY(-5px);
+@media (hover: hover) {
+    .card:hover {
+        transform: translateY(-5px);
+    }
 }
 
 .stat-card {