diff --git a/assets/style.css b/assets/style.css
index 34caabf2..dd7654be 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -43,7 +43,7 @@ li {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
-  justify-content: center;
+  /* justify-content: center; */
 }
 
 @media only screen and (max-width: 600px) {
@@ -55,6 +55,7 @@ li {
 .calh {
   /* this is to avoid content shift layout as v-calendar does not support SSR */
   height: 268px;
+  max-width: 600px;
 }
 
 .container {
diff --git a/pages/index.vue b/pages/index.vue
index 17e48150..6299f571 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -6,12 +6,13 @@ v-container.pa-0
     Announcement(v-for='announcement in announcements' :key='`a_${announcement.id}`' :announcement='announcement')
 
   //- Calendar and search bar
-  v-row.ma-2(v-if='!settings.hide_calendar')
-    .calh.col-xl-5.col-lg-5.col-md-7.col-sm-12.col-xs-12.mb-4.pa-0
-      //- this is needed as v-calendar does not support SSR
-      //- https://github.com/nathanreyes/v-calendar/issues/336
-      client-only(placeholder='Loading...')
-        Calendar(@dayclick='dayChange' @monthchange='monthChange' :events='events')
+  //- v-row.ma-2(v-if='!settings.hide_calendar')
+    //- .calh.col-xl-5.col-lg-5.col-md-7.col-sm-10.col-xs-12.pa-0.mx-sm-2.mx-0.my-0.mt-sm-2
+  .calh.mx-2.mx-sm-4.mt-2.mt-sm-4(v-if='!settings.hide_calendar')
+    //- this is needed as v-calendar does not support SSR
+    //- https://github.com/nathanreyes/v-calendar/issues/336
+    client-only(placeholder='Loading...')
+      Calendar(@dayclick='dayChange' @monthchange='monthChange' :events='events')
 
     //- .col.pt-0.pt-md-2.mt-4.ma-md-0.pb-0
     //-   //- v-btn(to='/search' color='primary' ) {{$t('common.search')}}