diff --git a/app/frontend/src/stylesheets/app.components.scss b/app/frontend/src/stylesheets/app.components.scss
index 544ff38cd..4e65054f1 100644
--- a/app/frontend/src/stylesheets/app.components.scss
+++ b/app/frontend/src/stylesheets/app.components.scss
@@ -667,31 +667,6 @@
   }
 }
 
-.calendar-legend-block {
-  text-align: right;
-  padding-right: 2em;
-
-  h4 {
-    font-size: 12px;
-    font-style: italic;
-  }
-
-  .legends {
-    display: flex;
-    flex-direction: row-reverse;
-  }
-
-  .calendar-legend {
-    border: 1px solid;
-    border-left: 3px solid;
-    border-radius: 3px;
-    font-size: 10px;
-    padding: 2px;
-    margin-left: 10px;
-    display: inline-block;
-  }
-}
-
 input[type=date].form-control {
   line-height: 25px;
 }
diff --git a/app/frontend/src/stylesheets/application.scss b/app/frontend/src/stylesheets/application.scss
index 37ba6b614..f69423add 100644
--- a/app/frontend/src/stylesheets/application.scss
+++ b/app/frontend/src/stylesheets/application.scss
@@ -15,8 +15,63 @@
 @import "app.components";
 @import "app.plugins";
 
+@import "modules/base/fab-alert";
+@import "modules/base/fab-button";
+@import "modules/base/fab-input";
+@import "modules/base/fab-modal";
+@import "modules/base/fab-popover";
+@import "modules/base/fab-text-editor";
+@import "modules/base/labelled-input";
+@import "modules/calendar/calendar";
+@import "modules/base/rhf-input";
+@import "modules/machines/machine-card";
+@import "modules/machines/machines-filters";
+@import "modules/machines/machines-list";
+@import "modules/machines/required-training-modal";
+@import "modules/payment-schedule/payment-schedule-dashboard";
+@import "modules/payment-schedule/payment-schedule-summary";
+@import "modules/payment-schedule/payment-schedules-list";
+@import "modules/payment-schedule/payment-schedules-table";
+@import "modules/payment/local-payment/local-payment-modal";
+@import "modules/payment/payment-modal";
+@import "modules/payment/payzen/payzen-keys-form";
+@import "modules/payment/payzen/payzen-modal";
+@import "modules/payment/payzen/payzen-settings";
+@import "modules/payment/payzen/payzen-update-card-modal";
+@import "modules/payment/stripe/stripe-confirm";
+@import "modules/payment/stripe/stripe-keys-form";
+@import "modules/payment/stripe/stripe-modal";
+@import "modules/payment/stripe/stripe-update-card-modal";
+@import "modules/plan-categories/delete-plan-category";
+@import "modules/plan-categories/manage-plan-category";
+@import "modules/plan-categories/plan-categories-list";
+@import "modules/plans/plan-card";
+@import "modules/plans/plans-filter";
+@import "modules/plans/plans-list";
+@import "modules/prepaid-packs/packs-summary";
+@import "modules/prepaid-packs/propose-packs-modal";
+@import "modules/pricing/editable-price";
+@import "modules/pricing/machines/configure-packs-button";
+@import "modules/pricing/machines/create-pack";
+@import "modules/pricing/machines/delete-pack";
+@import "modules/pricing/machines/edit-pack";
+@import "modules/pricing/machines/machines-pricing";
+@import "modules/pricing/machines/pack-form";
+@import "modules/pricing/spaces/configure-extended-prices-button";
+@import "modules/pricing/spaces/create-extended-price";
+@import "modules/pricing/spaces/delete-extended-price";
+@import "modules/pricing/spaces/edit-extended-price";
+@import "modules/pricing/spaces/spaces-pricing";
+@import "modules/select-gateway-modal";
+@import "modules/settings/check-list-setting";
+@import "modules/subscriptions/free-extend-modal";
+@import "modules/subscriptions/renew-modal";
+@import "modules/user/avatar";
+
 @import "modules/abuses";
 @import "modules/cookies";
+@import "modules/document-filters";
+@import "modules/event-themes";
 @import "modules/icalendar";
 @import "modules/invoice";
 @import "modules/members";
@@ -24,60 +79,7 @@
 @import "modules/signup";
 @import "modules/stripe";
 @import "modules/tour";
-@import "modules/base/fab-modal";
-@import "modules/base/fab-input";
-@import "modules/base/rhf-input";
-@import "modules/base/fab-button";
-@import "modules/base/fab-alert";
-@import "modules/base/fab-popover";
-@import "modules/base/labelled-input";
-@import "modules/base/fab-text-editor";
-@import "modules/payment-schedule/payment-schedule-summary";
 @import "modules/wallet-info";
-@import "modules/document-filters";
-@import "modules/payment-schedule/payment-schedules-table";
-@import "modules/payment-schedule/payment-schedules-list";
-@import "modules/payment-schedule/payment-schedule-dashboard";
-@import "modules/plans/plans-list";
-@import "modules/plans/plan-card";
-@import "modules/plans/plans-filter";
-@import "modules/event-themes";
-@import "modules/select-gateway-modal";
-@import "modules/payment/payment-modal";
-@import "modules/payment/stripe/stripe-keys-form";
-@import "modules/payment/stripe/stripe-confirm";
-@import "modules/payment/stripe/stripe-modal";
-@import "modules/payment/stripe/stripe-update-card-modal";
-@import "modules/payment/payzen/payzen-keys-form";
-@import "modules/payment/payzen/payzen-settings";
-@import "modules/payment/payzen/payzen-modal";
-@import "modules/payment/payzen/payzen-update-card-modal";
-@import "modules/payment/local-payment/local-payment-modal";
-@import "modules/plan-categories/plan-categories-list";
-@import "modules/plan-categories/manage-plan-category";
-@import "modules/plan-categories/delete-plan-category";
-@import "modules/machines/machine-card";
-@import "modules/machines/machines-list";
-@import "modules/machines/machines-filters";
-@import "modules/machines/required-training-modal";
-@import "modules/user/avatar";
-@import "modules/pricing/editable-price";
-@import "modules/pricing/machines/machines-pricing";
-@import "modules/pricing/machines/configure-packs-button";
-@import "modules/pricing/machines/pack-form";
-@import "modules/pricing/machines/delete-pack";
-@import "modules/pricing/machines/edit-pack";
-@import "modules/pricing/machines/create-pack";
-@import "modules/pricing/spaces/configure-extended-prices-button";
-@import "modules/pricing/spaces/create-extended-price";
-@import "modules/pricing/spaces/delete-extended-price";
-@import "modules/pricing/spaces/edit-extended-price";
-@import "modules/pricing/spaces/spaces-pricing";
-@import "modules/settings/check-list-setting";
-@import "modules/prepaid-packs/propose-packs-modal";
-@import "modules/prepaid-packs/packs-summary";
-@import "modules/subscriptions/free-extend-modal";
-@import "modules/subscriptions/renew-modal";
 
 @import "app.responsive";
 
diff --git a/app/frontend/src/stylesheets/modules/calendar/calendar.scss b/app/frontend/src/stylesheets/modules/calendar/calendar.scss
new file mode 100644
index 000000000..a35e29209
--- /dev/null
+++ b/app/frontend/src/stylesheets/modules/calendar/calendar.scss
@@ -0,0 +1,113 @@
+.calendar {
+  $tab-width: 40px;
+  &-admin {
+    &-header {
+      margin: 10px 30px 0;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex-wrap: wrap-reverse;
+    }
+    &-info {
+      display: contents;
+
+      input[type="checkbox"] { display: none; }
+      .content {
+        padding: 0 15px;
+        .placeholder {
+          display: none;
+          position: absolute;
+          font-weight: 400;
+          z-index: -1;
+        }
+      }
+    }
+
+    @media screen and (min-width: $screen-sm) {
+      &-header { margin-bottom: -20px; }
+      &-info .content { padding: 0 30px; }
+    }
+    @media screen and (min-width: $screen-md) {
+      &-section {
+        position: relative;
+        padding-right: $tab-width;
+      }
+      &-info {
+        position: absolute;
+        top: 0;
+        left: calc(100% - $tab-width);
+        width: $tab-width;
+        height: 100%;
+        display: block;
+        z-index: 1; 
+  
+        .content {
+          position: relative;
+          min-width: 220px;
+          width: fit-content;
+          height: 100%;
+          padding: 1px 20px 0 $tab-width;
+          border-left: 1px solid #dddddd;
+          background: linear-gradient(to right, var(--secondary) 0 $tab-width, var(--gray-soft-lightest) $tab-width 100%);
+          box-shadow: 0 10px 10px rgb(0 0 0 / 50%);
+          transition: transform 500ms ease-in-out;
+          cursor: pointer;
+          &::before {
+            position: sticky;
+            top: 0;
+            left: 0;
+            width: $tab-width;
+            height: $tab-width;
+            content: "\f30a";
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: "Font Awesome 5 Free"; font-weight: 900;
+            transform: translateX(-$tab-width);
+            transition: transform 300ms ease-in-out;
+            cursor: pointer;
+          }
+          .placeholder {
+            display: block;
+          }
+        }
+        input[type="checkbox"]:checked ~ .content {
+          background: var(--gray-soft-lightest);
+          transform: translateX(calc(-100% + $tab-width));
+          cursor: default;
+          &::before {
+            transform: translateX(-$tab-width) rotateZ(-180deg);
+          }
+        }
+      }
+    }
+  }
+
+  &-legend {
+    display: flex;
+    align-items: center;
+    h4 {
+      margin-right: 1rem;
+      font-size: 12px;
+      font-style: italic;
+      font-weight: 500;
+    }
+  
+    &-group {
+      display: flex;
+      flex-wrap: wrap;
+    }
+  
+    &-item {
+      display: inline-block;
+      padding: 2px;
+      border: 1px solid;
+      border-left: 3px solid;
+      border-radius: 3px;
+      font-size: 10px;
+      &:not(:first-of-type) {
+        margin-left: 1rem;
+      }
+    }
+  }
+}
diff --git a/app/frontend/templates/admin/calendar/calendar.html b/app/frontend/templates/admin/calendar/calendar.html
index c760602ef..41a68eb78 100644
--- a/app/frontend/templates/admin/calendar/calendar.html
+++ b/app/frontend/templates/admin/calendar/calendar.html
@@ -23,7 +23,7 @@
 </section>
 
 
-<section class="row no-gutter admin-calendar"
+<section class="row no-gutter admin-calendar calendar-admin-section"
          ui-tour="calendar"
          ui-tour-backdrop="true"
          ui-tour-template-url="'/shared/tour-step-template.html'"
@@ -31,136 +31,140 @@
          ui-tour-scroll-parent-id="content-main"
          post-render="setupCalendarTour">
 
-  <div class="col-sm-12 col-md-12 col-lg-9">
-    <div ui-calendar="calendarConfig" ng-model="eventSources" calendar="calendar" class="wrapper-lg"></div>
-    <div class="calendar-legend-block">
+  <div class="calendar-admin-header">
+    <div class="calendar-legend">
       <h4 translate>{{ 'app.admin.calendar.legend' }}</h4>
-      <div class="legends">
-        <span class="calendar-legend text-sm border-formation" translate>{{ 'app.admin.calendar.trainings' }}</span><br>
-        <span class="calendar-legend text-sm border-machine" translate>{{ 'app.admin.calendar.machines' }}</span><br>
-        <span class="calendar-legend text-sm border-space" ng-show="$root.modules.spaces" translate>{{ 'app.admin.calendar.spaces' }}</span>
-        <span class="calendar-legend text-sm border-event" ng-show="eventsInCalendar" translate>{{ 'app.admin.calendar.events' }}</span>
+      <div class="calendar-legend-group">
+        <span class="calendar-legend-item text-sm border-formation" translate>{{ 'app.admin.calendar.trainings' }}</span><br>
+        <span class="calendar-legend-item text-sm border-machine" translate>{{ 'app.admin.calendar.machines' }}</span><br>
+        <span class="calendar-legend-item text-sm border-space" ng-show="$root.modules.spaces" translate>{{ 'app.admin.calendar.spaces' }}</span>
+        <span class="calendar-legend-item text-sm border-event" ng-show="eventsInCalendar" translate>{{ 'app.admin.calendar.events' }}</span>
       </div>
     </div>
-  </div>
-
-  <div class="col-sm-12 col-md-12 col-lg-3">
-    <div class="m text-center" ng-show="isAuthorized('admin')">
+    <div ng-show="isAuthorized('admin')">
       <a class="btn btn-default export-xls-button"
-         ng-href="api/availabilities/export_index.xlsx"
-         target="export-frame"
-         ng-click="alertExport('index')"
-         uib-popover="{{ 'app.admin.calendar.availabilities_notice' | translate}}"
-         popover-trigger="mouseenter"
-         popover-placement="bottom">
+        ng-href="api/availabilities/export_index.xlsx"
+        target="export-frame"
+        ng-click="alertExport('index')"
+        uib-popover="{{ 'app.admin.calendar.availabilities_notice' | translate}}"
+        popover-trigger="mouseenter"
+        popover-placement="bottom-left">
         <i class="fa fa-file-excel-o"></i> {{ 'app.admin.calendar.availabilities' | translate }}
       </a>
       <iframe name="export-frame" height="0" width="0" class="none"></iframe>
     </div>
+  </div>
+  <div class="col-12">
+    <div ui-calendar="calendarConfig" ng-model="eventSources" calendar="calendar" class="wrapper-lg"></div>
+  </div>
 
-    <div class="widget panel b-a m m-t-lg" ng-if="availability" ng-show="(availability.slot_duration || availability.tags.length > 0) && availability.available_type !== 'event'">
-      <div class="panel-heading b-b small">
-        <h3><i class="fa fa-info-circle m-r" aria-hidden="true"></i><span translate>{{ 'app.admin.calendar.info' }}</span></h3>
+  <label class="calendar-admin-info">
+    <input type="checkbox">
+    <div class="content">
+      <p class="placeholder">Veuillez sélectionner un créneau</p>
+      <div class="widget panel b-a" ng-if="availability" ng-show="(availability.slot_duration || availability.tags.length > 0) && availability.available_type !== 'event'">
+        <div class="panel-heading b-b small">
+          <h3><i class="fa fa-info-circle m-r" aria-hidden="true"></i><span translate>{{ 'app.admin.calendar.info' }}</span></h3>
+        </div>
+        <div class="widget-content no-bg auto wrapper">
+          <div translate translate-values="{DURATION: availability.slot_duration}" ng-show="availability.slot_duration">{{ 'app.admin.calendar.slot_duration' }}</div>
+          <div class="m-t-sm" ng-show="availability.tags.length > 0">
+            <span translate>{{ 'app.admin.calendar.tags' }}</span>
+            <ul>
+              <li ng-repeat="tag in availability.tags">{{tag.name}}</li>
+            </ul>
+          </div>
+        </div>
       </div>
-      <div class="widget-content no-bg auto wrapper">
-        <div translate translate-values="{DURATION: availability.slot_duration}" ng-show="availability.slot_duration">{{ 'app.admin.calendar.slot_duration' }}</div>
-        <div class="m-t-sm" ng-show="availability.tags.length > 0">
-          <span translate>{{ 'app.admin.calendar.tags' }}</span>
-          <ul>
-            <li ng-repeat="tag in availability.tags">{{tag.name}}</li>
+  
+      <div class="widget panel b-a m-t-lg" ng-if="availability" ng-hide="availability.available_type == 'event'">
+        <div class="panel-heading b-b small">
+          <h3 translate>{{ 'app.admin.calendar.ongoing_reservations' }}</h3>
+        </div>
+        <div class="widget-content no-bg auto wrapper" ng-class="{'reservations-locked': availability.lock}">
+          <ul class="list-unstyled" ng-if="reservations.length > 0">
+            <li ng-repeat="r in reservations" class="m-b-xs" ng-class="{'reservation-canceled':r.canceled_at}">
+              {{r.user.name}}
+                - <span class="label reservation-time">{{ r.start_at | amDateFormat:'LLL' }} - {{ r.end_at | amDateFormat:'LT' }}</span>
+                - <span class="label label-success text-white">{{r.reservable.name}}</span>
+                <span class="btn btn-warning btn-xs" ng-click="cancelBooking(r)" ng-if="!r.canceled_at"><i class="fa fa-times red"></i></span>
+            </li>
+          </ul>
+          <div ng-show="reservations.length == 0" translate>{{ 'app.admin.calendar.without_reservation' }}</div>
+          <div class="m-t" ng-show="availability.lock"><i class="fa fa-ban"></i> <span class="m-l-xs" translate>{{ 'app.admin.calendar.reservations_locked' }}</span></div>
+        </div>
+      </div>
+  
+      <div class="widget panel b-a m-t-lg" ng-if="availability.machine_ids.length > 0">
+        <div class="panel-heading b-b small">
+          <h3 translate>{{ 'app.admin.calendar.machines' }}</h3>
+        </div>
+        <div class="widget-content no-bg auto wrapper">
+          <ul class="list-unstyled">
+            <li ng-repeat="m in machines" class="m-b-xs" ng-show="availability.machine_ids.indexOf(m.id) > -1">
+              {{m.name}}
+              <span class="btn btn-warning btn-xs" ng-click="removeMachine(m)" ng-if="availability.machine_ids.length > 1"><i class="fa fa-times red"></i></span>
+            </li>
           </ul>
         </div>
       </div>
-    </div>
-
-    <div class="widget panel b-a m m-t-lg" ng-if="availability" ng-hide="availability.available_type == 'event'">
-      <div class="panel-heading b-b small">
-        <h3 translate>{{ 'app.admin.calendar.ongoing_reservations' }}</h3>
+  
+      <div class="widget panel b-a m-t-lg" ng-if="availability.plan_ids.length > 0">
+        <div class="panel-heading b-b small">
+          <h3 translate>{{ 'app.admin.calendar.plans' }}</h3>
+        </div>
+        <div class="widget-content no-bg auto wrapper">
+          <ul class="list-unstyled">
+            <li ng-repeat="g in availability.plans" class="m-b-xs">
+              <div class="font-sbold">{{::g.name}}</div>
+              <ul class="m-n" ng-repeat="plan in g.plans">
+                <li>
+                  {{::plan.base_name}}
+                  <span class="btn btn-warning btn-xs" ng-click="removePlan(plan)" ><i class="fa fa-times red"></i></span>
+                </li>
+              </ul>
+            </li>
+          </ul>
+        </div>
       </div>
-      <div class="widget-content no-bg auto wrapper" ng-class="{'reservations-locked': availability.lock}">
-        <ul class="list-unstyled" ng-if="reservations.length > 0">
-          <li ng-repeat="r in reservations" class="m-b-xs" ng-class="{'reservation-canceled':r.canceled_at}">
-            {{r.user.name}}
-              - <span class="label reservation-time">{{ r.start_at | amDateFormat:'LLL' }} - {{ r.end_at | amDateFormat:'LT' }}</span>
-              - <span class="label label-success text-white">{{r.reservable.name}}</span>
-              <span class="btn btn-warning btn-xs" ng-click="cancelBooking(r)" ng-if="!r.canceled_at"><i class="fa fa-times red"></i></span>
-          </li>
-        </ul>
-        <div ng-show="reservations.length == 0" translate>{{ 'app.admin.calendar.without_reservation' }}</div>
-        <div class="m-t" ng-show="availability.lock"><i class="fa fa-ban"></i> <span class="m-l-xs" translate>{{ 'app.admin.calendar.reservations_locked' }}</span></div>
+  
+      <div class="widget panel b-a m-t-lg" ng-if="availability" >
+        <div class="panel-heading b-b small">
+          <h3 translate>{{ 'app.admin.calendar.actions' }}</h3>
+        </div>
+        <div class="widget-content no-bg auto wrapper" ng-hide="availability.available_type == 'event'">
+          <button class="btn btn-default" ng-click="toggleLockReservations()">
+            <span ng-hide="availability.lock">
+              <i class="fa fa-stop"></i>
+              <span class="m-l-xs" translate>{{ 'app.admin.calendar.block_reservations' }}</span>
+            </span>
+            <span ng-show="availability.lock">
+              <i class="fa fa-play"></i>
+              <span class="m-l-xs" translate>{{ 'app.admin.calendar.allow_reservations' }}</span>
+            </span>
+          </button>
+          <button class="btn btn-default m-t" ng-click="removeSlot()">
+            <span>
+              <i class="fa fa-trash"></i>
+              <span class="m-l-xs" translate>{{ 'app.admin.calendar.delete_slot' }}</span>
+            </span>
+          </button>
+        </div>
+        <div class="widget-content no-bg auto wrapper" ng-show="availability.available_type == 'event'">
+          <a class="btn btn-default pointer" ui-sref="app.admin.events_edit({id: availability.event_id})">
+            <span>
+              <i class="fa fa-edit"></i>
+              <span class="m-l-xs" translate>{{ 'app.admin.calendar.edit_event' }}</span>
+            </span>
+          </a>
+          <a class="btn btn-default m-t pointer" ui-sref="app.admin.event_reservations({id: availability.event_id})">
+            <span>
+              <i class="fa fa-bookmark"></i>
+              <span class="m-l-xs" translate>{{ 'app.admin.calendar.view_reservations' }}</span>
+            </span>
+          </a>
+        </div>
       </div>
     </div>
-
-    <div class="widget panel b-a m m-t-lg" ng-if="availability.machine_ids.length > 0">
-      <div class="panel-heading b-b small">
-        <h3 translate>{{ 'app.admin.calendar.machines' }}</h3>
-      </div>
-      <div class="widget-content no-bg auto wrapper">
-        <ul class="list-unstyled">
-          <li ng-repeat="m in machines" class="m-b-xs" ng-show="availability.machine_ids.indexOf(m.id) > -1">
-            {{m.name}}
-            <span class="btn btn-warning btn-xs" ng-click="removeMachine(m)" ng-if="availability.machine_ids.length > 1"><i class="fa fa-times red"></i></span>
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <div class="widget panel b-a m m-t-lg" ng-if="availability.plan_ids.length > 0">
-      <div class="panel-heading b-b small">
-        <h3 translate>{{ 'app.admin.calendar.plans' }}</h3>
-      </div>
-      <div class="widget-content no-bg auto wrapper">
-        <ul class="list-unstyled">
-          <li ng-repeat="g in availability.plans" class="m-b-xs">
-            <div class="font-sbold">{{::g.name}}</div>
-            <ul class="m-n" ng-repeat="plan in g.plans">
-              <li>
-                {{::plan.base_name}}
-                <span class="btn btn-warning btn-xs" ng-click="removePlan(plan)" ><i class="fa fa-times red"></i></span>
-              </li>
-            </ul>
-          </li>
-        </ul>
-      </div>
-    </div>
-
-    <div class="widget panel b-a m m-t-lg" ng-if="availability" >
-      <div class="panel-heading b-b small">
-        <h3 translate>{{ 'app.admin.calendar.actions' }}</h3>
-      </div>
-      <div class="widget-content no-bg auto wrapper" ng-hide="availability.available_type == 'event'">
-        <button class="btn btn-default" ng-click="toggleLockReservations()">
-          <span ng-hide="availability.lock">
-            <i class="fa fa-stop"></i>
-            <span class="m-l-xs" translate>{{ 'app.admin.calendar.block_reservations' }}</span>
-          </span>
-          <span ng-show="availability.lock">
-            <i class="fa fa-play"></i>
-            <span class="m-l-xs" translate>{{ 'app.admin.calendar.allow_reservations' }}</span>
-          </span>
-        </button>
-        <button class="btn btn-default m-t" ng-click="removeSlot()">
-          <span>
-            <i class="fa fa-trash"></i>
-            <span class="m-l-xs" translate>{{ 'app.admin.calendar.delete_slot' }}</span>
-          </span>
-        </button>
-      </div>
-      <div class="widget-content no-bg auto wrapper" ng-show="availability.available_type == 'event'">
-        <a class="btn btn-default pointer" ui-sref="app.admin.events_edit({id: availability.event_id})">
-          <span>
-            <i class="fa fa-edit"></i>
-            <span class="m-l-xs" translate>{{ 'app.admin.calendar.edit_event' }}</span>
-          </span>
-        </a>
-        <a class="btn btn-default m-t pointer" ui-sref="app.admin.event_reservations({id: availability.event_id})">
-          <span>
-            <i class="fa fa-bookmark"></i>
-            <span class="m-l-xs" translate>{{ 'app.admin.calendar.view_reservations' }}</span>
-          </span>
-        </a>
-      </div>
-    </div>
-  </div>
-
+  </label>
 </section>
diff --git a/app/frontend/templates/admin/calendar/icalendar.html b/app/frontend/templates/admin/calendar/icalendar.html
index bd010b9e8..ab91191d3 100644
--- a/app/frontend/templates/admin/calendar/icalendar.html
+++ b/app/frontend/templates/admin/calendar/icalendar.html
@@ -38,9 +38,9 @@
         </thead>
         <tbody>
         <tr ng-repeat="calendar in calendars">
-          <td class="calendar-name">{{calendar.name}}</td>
+          <td class="calendar-name">{{calendar.name}} plop</td>
           <td class="calendar-url"><a href="{{calendar.url}}" target="_blank">{{calendar.url}}</a></td>
-          <td class="calendar-legend-block text-left"><span class="calendar-legend" ng-style="calendarStyle(calendar)" translate> {{ calendar.text_hidden ? '' : 'app.admin.icalendar.example' }}</span>
+          <td class="calendar-legend-group"><span class="calendar-legend-item" ng-style="calendarStyle(calendar)" translate> {{ calendar.text_hidden ? '' : 'app.admin.icalendar.example' }}</span>
           <td class="calendar-actions">
             <button class="btn btn-info" ng-click="sync(calendar)"><i class="fa fa-refresh"></i></button>
             <button class="btn btn-danger" ng-click="delete(calendar)"><i class="fa fa-trash"></i></button>
diff --git a/app/frontend/templates/calendar/calendar.html b/app/frontend/templates/calendar/calendar.html
index c5d328845..597e83557 100644
--- a/app/frontend/templates/calendar/calendar.html
+++ b/app/frontend/templates/calendar/calendar.html
@@ -11,7 +11,7 @@
       </section>
     </div>
 
-    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md hidden-lg">
+    <div class="col-xs-12 col-sm-12 col-md-3 b-t hide-b-md">
       <div class="heading-actions wrapper">
         <button type="button" class="btn btn-default m-t m-b" ng-click="openFilterAside()">
           <span class="fa fa-filter"></span> {{ 'app.public.calendar.filter_calendar' | translate }}
@@ -24,26 +24,7 @@
 
 
 <section class="row no-gutter">
-  <div class="hidden-lg">
-    <div class="row">
-      <div class="col-sm-12 col-md-12">
-      </div>
-    </div>
-  </div>
-
-  <div class="col-sm-12 col-md-12 col-lg-9">
+  <div class="col-sm-12 col-md-12 col-lg-12">
     <div ui-calendar="calendarConfig" ng-model="eventSources" calendar="calendar" class="wrapper-lg public-calendar"></div>
   </div>
-
-  <div class="col-lg-3 hidden-md hidden-sm hidden-xs">
-    <div class="widget panel b-a m m-t-lg">
-      <div class="panel-heading b-b small">
-        <h3 translate>{{ 'app.public.calendar.filter_calendar' }}</h3>
-      </div>
-      <div class="widget-content no-bg auto wrapper calendar-filter">
-        <ng-include src="'/calendar/filter.html'"></ng-include>
-      </div>
-    </div>
-  </div>
-
 </section>