diff --git a/templates/partials/page/calendar.html b/templates/partials/page/calendar.html
index 70974ce..466f851 100644
--- a/templates/partials/page/calendar.html
+++ b/templates/partials/page/calendar.html
@@ -121,16 +121,16 @@
         </div>
     </div>
     {% elif selected_view == 'year'%}
-    <div class="flex px-2 py-2 -mb-px">
+    <div class="flex justify-center px-2 py-2 -mb-px">
 
-        <div class="flex flex-wrap bg-white overflow-hidden">
+        <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 bg-white overflow-hidden">
             {% for i in range(12) %}
             {% set date = start_date + relativedelta(months=i) %}
             {% set first_day_of_month = date.replace(day=1) %}
             {% set last_day_of_month = date + relativedelta(day=31) %}
             {% set (first_day, last_day) = first_and_last_visible_days_in_month(first_day_of_month, last_day_of_month)
             %}
-            <div class="w-96 mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
+            <div class="mx-3 my-3 border-solid border-grey-light rounded border shadow-sm">
                 <div class="bg-grey-lighter px-2 py-2 border-solid border-grey-light border-b text-center cursor-pointer"
                     hx-get="{{ url_for('get_calendar', person_id=person['PersonId']) }}" hx-target="#container"
                     hx-vals='{"date": "{{ first_day_of_month }}", "view": "month"}' hx-push-url="true">{{