diff --git a/assets/css/src/calendar-strip.css b/assets/css/src/calendar-strip.css
index b4d9211..1edd6ad 100644
--- a/assets/css/src/calendar-strip.css
+++ b/assets/css/src/calendar-strip.css
@@ -71,4 +71,17 @@
     margin-top: 2rem;
     border-top: var(--border);
   }
+
+  .calendar-strip__selector {
+    width: 7rem;
+  }
+
+  .calendar-strip__calendar-btn {
+    display: none;
+  }
+
+  .calendar-strip .prev-month,
+  .calendar-strip .next-month {
+    display: none;
+  }
 }
diff --git a/site/config/routes/month-dates.php b/site/config/routes/month-dates.php
index 42fbc69..0363656 100644
--- a/site/config/routes/month-dates.php
+++ b/site/config/routes/month-dates.php
@@ -24,6 +24,7 @@ return [
     $request = json_decode($jsonRequest, true);
 
     $dates = $request['dates'];
+
     $requestMonth = $request['month'];    
 
     $currentSeason = page('programme')->children()->first();
diff --git a/site/snippets/calendar-strip.php b/site/snippets/calendar-strip.php
index 879822c..31d3b5c 100644
--- a/site/snippets/calendar-strip.php
+++ b/site/snippets/calendar-strip.php
@@ -2,41 +2,96 @@
   class="calendar-strip"
   @mouseleave="open = false"
   x-data="{
-    monthNumb: dayjs().month(),
-    token: '<?= $site->mapadoToken() ?>',
-    contractId: '<?= $site->mapadoContractId() ?>',
-    dates: [],
-    targetSessions: [],
-    open: false,
-    today: dayjs().format('DD-MM-YYYY'),
+  monthNumb: dayjs().month(),
+  weekIndex: (() => {
+    dayjs.extend(window.dayjs_plugin_weekOfYear);
+    
+    const date = dayjs();
+    
+    const firstDayOfMonth = dayjs(date).startOf('month');
 
-    get monthName() {
-      return dayjs().month(this.monthNumb).format('MMMM');
-    },
+    const currentWeek = date.week();
+    const firstWeekOfMonth = firstDayOfMonth.week();
+    
+    const weekIndex = currentWeek - firstWeekOfMonth - 1;
 
-    async updateDates() {
-      const daysNode = document.querySelector('.calendar-strip__days')
-      daysNode.classList.toggle('progress')
-      
-      this.dates = getDatesInMonth(this.monthNumb);      
-      this.dates = await getMergedDates(this.monthNumb, this.dates)
+    console.log(`currentWeek: ${currentWeek}, firstWeekOfMonth: ${firstWeekOfMonth}, weekIndex: ${weekIndex}`);
+    
+    // Retourner l'index de la semaine
+    return weekIndex;
+  })(),
+  token: '<?= $site->mapadoToken() ?>',
+  contractId: '<?= $site->mapadoContractId() ?>',
+  dates: [],
+  targetSessions: [],
+  open: false,
+  today: dayjs().format('DD-MM-YYYY'),
 
-      console.log('Merged dates', this.dates)
-      document.querySelector('.calendar-strip__days').classList.toggle('progress')
-    },
+  get monthName() {
+    return dayjs().month(this.monthNumb).format('MMMM');
+  },
 
-    handleDayHover() {
-      if (this.date.sessions.length > 0) {
-        this.targetSessions = this.date.sessions;
-        this.open = true
-      } else {
-        setTimeout(() => {
-          this.targetSessions = this.date.sessions;
-        }, 100)
-        this.open = false
-      }
+  get currentWeek() {
+    const dates = JSON.parse(JSON.stringify(this.dates));
+    const start = this.weekIndex * 7;
+    const end = start + 7;
+
+    const allKeys = Object.keys(dates);
+
+    const slicedKeys = allKeys.slice(start, end);
+
+    const slicedObject = slicedKeys.reduce((obj, key) => {
+      obj[key] = dates[key];
+      return obj;
+    }, {});
+    return slicedObject;
+  },
+
+  async updateDates(resetWeek = false) {
+    const daysNode = document.querySelector('.calendar-strip__days');
+    daysNode.classList.toggle('progress');
+    
+    this.dates = getDatesInMonth(this.monthNumb);
+    this.dates = await getMergedDates(this.monthNumb, this.dates);
+    
+    console.log('Merged dates', this.dates);
+    daysNode.classList.toggle('progress');
+    if (resetWeek) {
+      this.weekIndex = 0
     }
-  }"
+  },
+
+  handleDayHover() {
+    if (this.date.sessions.length > 0) {
+      this.targetSessions = this.date.sessions;
+      this.open = true;
+    } else {
+      setTimeout(() => {
+        this.targetSessions = this.date.sessions;
+      }, 100);
+      this.open = false;
+    }
+  },
+
+  nextWeek() {
+    if (this.weekIndex < Math.floor(this.dates.length / 7)) {
+      this.weekIndex++;
+    } else {
+      this.monthNumb++;
+      this.updateDates();
+    }
+  },
+
+  prevWeek() {
+    if (this.weekIndex > 0) {
+      this.weekIndex--;
+    } else {
+      this.monthNumb--;
+      this.updateDates();
+    }
+  }
+}"
+
 
   x-init="updateDates()"
 >
@@ -46,7 +101,7 @@
     <button class="next-month" @click="monthNumb++; updateDates()">→</button>
   </div>
   <ul class="calendar-strip__days">
-    <template x-for="(date, index) in dates">
+    <template x-for="(date, index) in currentWeek">
       <li class="calendar-strip__day" :class="targetSessions.length > 0 && open && index == targetSessions[0].day ? 'active' : ''" :style="'animation-delay: ' + index * 0.03 + 's'">
         <button 
           :class="date.full === today ? 'today' : ''"
diff --git a/site/snippets/header.php b/site/snippets/header.php
index 9807f4e..c288073 100644
--- a/site/snippets/header.php
+++ b/site/snippets/header.php
@@ -14,6 +14,7 @@
     <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/fr.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/weekOfYear.js"></script>
 
     <!-- Calendar -->
     <?php if ($page->isHomePage() || $page->template() == 'event' || $page->template() == 'program'): ?>