diff --git a/funnel/assets/js/profile_calendar.js b/funnel/assets/js/profile_calendar.js
index 6992fa950..0547745f8 100644
--- a/funnel/assets/js/profile_calendar.js
+++ b/funnel/assets/js/profile_calendar.js
@@ -16,6 +16,7 @@ $(() => {
       return {
         date: '',
         showFilter: false,
+        loading: false,
         calendarView: 'monthly',
         access: 'both',
         cfp: '',
@@ -49,6 +50,7 @@ $(() => {
             }
             return false;
           },
+          lazyFetching: false,
           eventTimeFormat: {
             // like '14:30:00'
             hour: '2-digit',
@@ -70,10 +72,12 @@ $(() => {
         this.events = this.calendar.getEvents();
       },
       prev() {
+        this.loading = true;
         this.calendar.prev();
         this.updateTitle();
       },
       next() {
+        this.loading = true;
         this.calendar.next();
         this.updateTitle();
       },
@@ -81,6 +85,7 @@ $(() => {
         this.showFilter = !this.showFilter;
       },
       applyFilter() {
+        this.loading = true;
         this.showFilter = false; // Close filter menu
         switch (this.calendarView) {
           case 'monthly':
@@ -115,5 +120,10 @@ $(() => {
           });
       },
     },
+    watch: {
+      events() {
+        this.loading = false;
+      },
+    },
   });
 });
diff --git a/funnel/assets/sass/components/_subnavbar.scss b/funnel/assets/sass/components/_subnavbar.scss
index c0d46fd73..9fc7fe978 100644
--- a/funnel/assets/sass/components/_subnavbar.scss
+++ b/funnel/assets/sass/components/_subnavbar.scss
@@ -1,5 +1,6 @@
 .sub-navbar-container--sticky {
   margin-top: $mui-grid-padding;
+  z-index: 3;
 }
 
 .sub-navbar {
diff --git a/funnel/assets/sass/mui/_dropdown.scss b/funnel/assets/sass/mui/_dropdown.scss
index dd0d54773..16a135b0e 100644
--- a/funnel/assets/sass/mui/_dropdown.scss
+++ b/funnel/assets/sass/mui/_dropdown.scss
@@ -45,7 +45,7 @@
   text-align: left;
   background-color: $mui-dropdown-bg-color;
   border-radius: $mui-dropdown-border-radius;
-  z-index: 1;
+  z-index: 4;
   background-clip: padding-box;
 
   // open state
diff --git a/funnel/assets/sass/pages/profile_calendar.scss b/funnel/assets/sass/pages/profile_calendar.scss
index b836c9c2a..391d6c27b 100644
--- a/funnel/assets/sass/pages/profile_calendar.scss
+++ b/funnel/assets/sass/pages/profile_calendar.scss
@@ -1,9 +1,85 @@
 @use 'sass:math';
 @import '../base/variable';
 
-.calendar-container {
+.calendar {
   width: 100%;
-  min-height: 300px;
+  min-height: 100vh;
+
+  .calendar__wrapper__project-list {
+    .calendar__wrapper__project-list__table {
+      border-collapse: collapse;
+      overflow: hidden;
+      margin: 0 !important;
+      border-radius: 16px;
+      tr {
+        border-bottom: 1px solid rgba(132, 146, 166, 0.3);
+      }
+
+      .calendar__wrapper__project-list__table__venue {
+        margin: $mui-grid-padding 0 0;
+        display: flex;
+        gap: $mui-grid-padding/4;
+      }
+    }
+  }
+
+  .calendar__wrapper__calendar__toolbar {
+    float: right;
+    padding: math.div($mui-grid-padding, 2) $mui-grid-padding;
+    width: 100%;
+    position: relative;
+    align-items: center;
+    z-index: 3;
+
+    .calendar__wrapper__calendar__toolbar__month {
+      font-size: 14px;
+      width: 100%;
+      height: 27px;
+      margin: math.div(-$mui-grid-padding, 2) math.div($mui-grid-padding, 2);
+      text-align: left;
+      font-variant: all-small-caps;
+    }
+
+    .calendar__wrapper__calendar__toolbar__filter {
+      height: 30.6px;
+      margin-right: math.div($mui-grid-padding, 1.25);
+      margin-top: math.div(-$mui-grid-padding, 8);
+    }
+
+    .calendar__wrapper__calendar__toolbar__filter__menu {
+      position: absolute;
+      left: 158px;
+      padding: $mui-grid-padding;
+      background-color: $mui-bg-color-primary;
+      z-index: 1000;
+      box-shadow:
+        0 0 2px rgba(0, 0, 0, 0.12),
+        0 2px 2px rgba(0, 0, 0, 0.2);
+      border-radius: 0 16px 16px 16px;
+      min-width: 200px;
+
+      button {
+        width: 100%;
+        margin-top: $mui-grid-padding;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    .calendar__wrapper .calendar__wrapper__headline {
+      order: 2;
+    }
+    .calendar__wrapper .calendar__wrapper__project-list {
+      order: 2;
+    }
+    .calendar__wrapper .calendar__wrapper__calendar {
+      order: 1;
+      margin: -$mui-grid-padding-double 0 $mui-grid-padding * 1.5;
+      position: sticky;
+      top: $mui-grid-padding-double;
+      z-index: 2;
+    }
+  }
 }
 
 .fc-header-toolbar {
@@ -11,7 +87,7 @@
 }
 
 .fc {
-  margin: $mui-grid-padding auto;
+  margin: $mui-grid-padding auto 0;
   width: 100%;
   max-width: 100%;
 
@@ -54,7 +130,20 @@
   .fc-multimonth-month {
     justify-content: left;
     padding: 0;
-    background: #fff;
+  }
+  .fc-multimonth-header {
+    border-radius: 16px;
+  }
+  .fc-view-harness-active > .fc-view {
+    border-radius: 16px;
+    inset: 10px 0 0;
+  }
+  .fc-scroller-harness-liquid {
+    border-radius: 0 0 16px 16px;
+  }
+  .fc-multimonth {
+    margin-top: -66px;
+    border: none !important;
   }
 
   --fc-border-color: #fff;
@@ -71,42 +160,34 @@
   display: block;
 }
 
-table.proposal-list-table tr {
-  border-bottom: 1px solid rgba(132, 146, 166, 0.3);
-}
-
-.flex-wrapper--baseline {
-  justify-content: right;
-  padding: math.div($mui-grid-padding, 2) $mui-grid-padding 0 0;
-  position: relative;
-  z-index: 3;
-}
-
-.fc-text-caption {
-  font-size: 14px;
-  font-variant: all-small-caps;
+.fc-theme-standard .fc-scrollgrid {
+  border: none;
 }
 
-.fc-multimonth {
-  margin: -66px 0 0;
+.fc-scrollgrid-section td,
+.fc-scrollgrid-section th {
+  border: none;
 }
 
 .fc-multimonth-title {
   font-size: 14px !important;
   font-variant: all-small-caps;
-  padding: $mui-grid-padding !important;
+  padding: $mui-grid-padding * 3 $mui-grid-padding $mui-grid-padding !important;
   text-align: left !important;
   font-weight: 600 !important;
 }
 
-.mui-table {
-  border-collapse: collapse;
-  overflow: hidden;
-  margin: 0 !important;
-  border-radius: 16px;
+.fc-button {
+  padding: 0;
+  margin-left: math.div(-$mui-grid-padding, 4);
 }
+
 .fc-view-harness {
-  height: 270px !important;
+  height: 260px !important;
+}
+
+.fc-daygrid-day-events{
+  top: -$mui-grid-padding/4;
 }
 
 .fc-daygrid-day-frame {
@@ -135,43 +216,3 @@ table.proposal-list-table tr {
   color: #1f2d3d;
   font-weight: 700;
 }
-
-@media (max-width: 768px) {
-  .calendar_mobile .grid__col-12 {
-    order: 2;
-  }
-  .calendar_mobile .proposal_list {
-    order: 2;
-  }
-  .calendar_mobile .calendar_mobile_container {
-    order: 1;
-    margin: -$mui-grid-padding-double 0 $mui-grid-padding * 1.5;
-    position: sticky;
-    top: $mui-grid-padding-double;
-    z-index: 2;
-  }
-}
-
-.proposal_venue {
-  margin: $mui-grid-padding 0 0;
-  display: flex;
-  gap: math.div($mui-grid-padding, 4);
-}
-
-.filter-menu {
-  position: absolute;
-  left: 158px;
-  padding: $mui-grid-padding;
-  background-color: $mui-bg-color-primary;
-  z-index: 1000;
-  box-shadow:
-    0 0 2px rgba(0, 0, 0, 0.12),
-    0 2px 2px rgba(0, 0, 0, 0.2);
-  border-radius: 0 16px 16px 16px;
-  min-width: 200px;
-
-  button {
-    width: 100%;
-    margin-top: $mui-grid-padding;
-  }
-}
diff --git a/funnel/templates/profile_calendar.html.jinja2 b/funnel/templates/profile_calendar.html.jinja2
index 1dd314fb7..2e72873a9 100644
--- a/funnel/templates/profile_calendar.html.jinja2
+++ b/funnel/templates/profile_calendar.html.jinja2
@@ -48,14 +48,15 @@
     <div class="projects-wrapper">
       <div class="mui-container project-page__content">
           {% raw %}
-            <div id="calendar" class="calendar-container" v-cloak>
-              <div class="grid calendar_mobile">
-                <div class="grid__col-12">
+            <div id="calendar" class="calendar" v-cloak>
+              <div class="grid calendar__wrapper">
+                <div class="grid__col-12 calendar__wrapper__headline">
                   <h2 class="mui--text-headline text-bold project-headline">Projects</h2>
                 </div>
-                <div class="grid__col-sm-6 grid__col-md-7 grid__col-lg-8 proposal_list">
+                <div class="grid__col-sm-6 grid__col-md-7 grid__col-lg-8 calendar__wrapper__project-list">
                   <div v-if="filteredEvents">
-                    <table class="proposal-list-table mui-table card page-card">
+                    <div class="flex-wrapper flex-wrapper--center flex-wrapper--justify-center" v-if="loading"><span class="loading"></span></div>
+                    <table class="calendar__wrapper__project-list__table mui-table card page-card">
                       <tbody>
                         <tr v-for="event in filteredEvents">
                           <td>
@@ -67,7 +68,7 @@
                               <div class="margin-bottom">
                                 <span class="badge text-bold" v-if="propertyVal(event, 'cfp_open')">Accepting proposals</span><span class="badge badge-success text-bold" v-if="propertyVal(event, 'member_access')">Member access</span><span class="badge badge-dark text-bold" v-else>Free</span>
                               </div>
-                              <p class="mui--text-caption mui--text-light proposal_venue"><faicon :icon="'map-marker-alt'" :baseline=false></faicon>{{ propertyVal(event, 'venue') }}</p>
+                              <p class="mui--text-caption mui--text-light calendar__wrapper__project-list__table__venue"><faicon :icon="'map-marker-alt'" :baseline=false></faicon>{{ propertyVal(event, 'venue') }}</p>
                             </div>
                           </td>
                         </tr>
@@ -76,74 +77,65 @@
                   </div>
                 </div>
                 <div class="grid__col-sm-6 grid__col-md-5 grid__col-lg-4
-                calendar_mobile_container">
+                calendar__wrapper__calendar">
                   <div class="page-card">
-                  <div class="flex-wrapper flex-wrapper--baseline">
-                    <button class="mui-btn mui-btn--small mui-btn--flat mui-btn--dark" @click="prev"><faicon :icon="'chevron-left'" :baseline=false></faicon></button>
-                    <span class="fc-text-caption text-bold"> {{ date }} </span>
-                    <button class="mui-btn mui-btn--small mui-btn--flat mui-btn--dark" @click="next"><faicon :icon="'chevron-right'" :baseline=false></faicon></button>
-                    <div class="filter">
-                      <a href="#" onclick="return false;" @click="toggleFilterMenu" class="mui--text-title mui--text-light" aria-label="Filter calendar" role="button" aria-haspopup="true" aria-expanded="false"><faicon :icon="'filter'" :baseline=false></faicon></a>
-                      <div class="filter-menu" v-if="showFilter">
-                        <form v-on:submit.prevent="applyFilter">
-                          <p class="mui--text-subtitle text-bold margin-bottom">{{ gettext('Format') }}</p>
-                          <div class="mui-form__controls">
-                            <div class="mui-textfield">
-                              <ul class="zero-bottom-margin mui-list--unstyled" id="duration">
-                                <li>
-                                  <input checked type="radio" id="monthly" name="view" value="monthly" v-model="calendarView"> <label for="monthly">{{ gettext('Monthly') }}</label>
-                                </li>
-                                <li>
-                                  <input type="radio" id="yearly" name="view" value="yearly" v-model="calendarView"> <label for="yearly">{{ gettext('Yearly') }}</label>
-                                </li>
-                              </ul>
-                            </div>
-                          </div>
-
-                          <p class="mui--text-subtitle text-bold top-padding margin-bottom">{{ gettext('Access') }}</p>
-                          <div id="field-member-events" class="mui-form__fields">
+                    <div class="flex-wrapper flex-wrapper--baseline calendar__wrapper__calendar__toolbar">
+                      <button class="mui-btn fc-button mui-btn--flat mui-btn--dark" @click="prev"><faicon :icon="'chevron-left'" :baseline=false></faicon></button>
+                      <span class="calendar__wrapper__calendar__toolbar__month text-bold"> {{ date }} </span>
+                      <div class="calendar__wrapper__calendar__toolbar__filter">
+                        <a href="#" onclick="return false;" @click="toggleFilterMenu" class="mui--text-title mui--text-light" aria-label="Filter calendar" role="button" aria-haspopup="true" aria-expanded="false"><faicon :icon="'filter'" :icon_size="'caption'" :baseline=false></faicon></a>
+                        <div class="calendar__wrapper__calendar__toolbar__filter__menu" v-if="showFilter">
+                          <form v-on:submit.prevent="applyFilter">
+                            <p class="mui--text-subtitle text-bold margin-bottom">{{ gettext('Format') }}</p>
                             <div class="mui-form__controls">
                               <div class="mui-textfield">
-                                <ul class="zero-bottom-margin mui-list--unstyled" id="access">
-                                  <li>
-                                    <input type="radio" id="member" name="access" value="member" v-model="access"> <label for="member">{{ gettext('Member only') }}</label>
-                                  </li>
+                                <ul class="zero-bottom-margin mui-list--unstyled" id="duration">
                                   <li>
-                                    <input type="radio" id="free" name="access" value="free" v-model="access"> <label for="free">{{ gettext('Free') }}</label>
+                                    <input checked type="radio" id="monthly" name="view" value="monthly" v-model="calendarView"> <label for="monthly">{{ gettext('Monthly') }}</label>
                                   </li>
                                   <li>
-                                    <input checked type="radio" id="both" name="access" value="both" v-model="access"> <label for="both">{{ gettext('Both') }}</label>
+                                    <input type="radio" id="yearly" name="view" value="yearly" v-model="calendarView"> <label for="yearly">{{ gettext('Yearly') }}</label>
                                   </li>
                                 </ul>
                               </div>
                             </div>
-                          </div>
 
-                          <p class="mui--text-subtitle text-bold top-padding margin-bottom">{{ gettext('Proposal Submissions') }}</p>
-                          <div id="field-member-events" class="mui-form__fields">
-                            <div class="mui-form__controls">
-                              <div class="mui-checkbox">
-                                <label>
-                                  <input type="checkbox"  id="cfp-state" name="cfp" v-model="cfp"> {{ gettext('Accepting') }}
-                                </label>
+                            <p class="mui--text-subtitle text-bold top-padding margin-bottom">{{ gettext('Access') }}</p>
+                            <div id="field-member-events" class="mui-form__fields">
+                              <div class="mui-form__controls">
+                                <div class="mui-textfield">
+                                  <ul class="zero-bottom-margin mui-list--unstyled" id="access">
+                                    <li>
+                                      <input type="radio" id="member" name="access" value="member" v-model="access"> <label for="member">{{ gettext('Member only') }}</label>
+                                    </li>
+                                    <li>
+                                      <input type="radio" id="free" name="access" value="free" v-model="access"> <label for="free">{{ gettext('Free') }}</label>
+                                    </li>
+                                    <li>
+                                      <input checked type="radio" id="both" name="access" value="both" v-model="access"> <label for="both">{{ gettext('Both') }}</label>
+                                    </li>
+                                  </ul>
+                                </div>
                               </div>
                             </div>
-                          </div>
-<!--                      <div id="field-free-events" class="mui-form__fields">
-                            <div class="mui-form__controls">
-                              <div class="mui-checkbox">
-                                <label>
-                                  <input type="checkbox" id="free_events" name="free_events" v-model="closed"> {{ gettext('Closed') }}
-                                </label>
+
+                            <p class="mui--text-subtitle text-bold top-padding margin-bottom">{{ gettext('Proposal Submissions') }}</p>
+                            <div id="field-member-events" class="mui-form__fields">
+                              <div class="mui-form__controls">
+                                <div class="mui-checkbox">
+                                  <label>
+                                    <input type="checkbox"  id="cfp-state" name="cfp" v-model="cfp"> {{ gettext('Accepting') }}
+                                  </label>
+                                </div>
                               </div>
                             </div>
-                          </div> -->
-                          <button type="submit" class="mui-btn mui-btn--small mui-btn--primary">Apply</button>
-                        </form>
+                            <button type="submit" class="mui-btn mui-btn--small mui-btn--primary">Apply</button>
+                          </form>
+                        </div>
                       </div>
+                      <button class="mui-btn fc-button mui-btn--flat mui-btn--dark" @click="next"><faicon :icon="'chevron-right'" :baseline=false></faicon></button>
                     </div>
-                  </div>
-                  <full-calendar ref="fullCalendar" :options="calendarOptions" />
+                    <full-calendar ref="fullCalendar" :options="calendarOptions" />
                   </div>
                 </div>
               </div>