diff --git a/docs/.vuepress/components/IterativeCycle.vue b/docs/.vuepress/components/IterativeCycle.vue
index bd8e49d5231fde8da19ce19357f343037d369461..07db87bf791d592d98a6194b75de359ce30af621 100644
--- a/docs/.vuepress/components/IterativeCycle.vue
+++ b/docs/.vuepress/components/IterativeCycle.vue
@@ -1,13 +1,15 @@
 <template>
   <div class="iterative-cycle">
-    <!-- Module Selector Dropdown -->
-    <div class="module-selector">
-      <label for="module">Select Module:</label>
-      <select id="module" v-model="selectedModule" class="module-dropdown">
-        <option v-for="(module, index) in modules" :key="index" :value="index">
-          {{ module.title }}
-        </option>
-      </select>
+    <!-- Module Selector Tabs -->
+    <div class="module-tabs">
+      <div
+        v-for="(module, index) in modules"
+        :key="index"
+        :class="['module-tab', { active: selectedModule === index }]"
+        @click="selectModule(index)"
+      >
+        {{ module.title }}
+      </div>
     </div>
 
     <!-- Cycles Display -->
@@ -116,12 +118,17 @@ export default {
     },
     isCycleOpen(index) {
       return this.openCycles.includes(index);
+    },
+    selectModule(index) {
+      this.selectedModule = index;
+      this.openCycles = []; // Close all cycles when switching modules
     }
   }
 };
 </script>
 
 <style scoped>
+/* Layout styles */
 .iterative-cycle {
   font-family: 'Arial', sans-serif;
   max-width: 800px;
@@ -133,24 +140,35 @@ export default {
   background-color: #f9f9f9;
 }
 
-.module-selector {
+/* Module Selector Tabs */
+.module-tabs {
+  display: flex;
+  justify-content: center;
   margin-bottom: 20px;
-  text-align: center;
 }
 
-.module-dropdown {
-  padding: 10px;
+.module-tab {
+  padding: 10px 20px;
+  margin: 0 10px;
   font-size: 16px;
-  border: 1px solid #3498db;
+  background-color: #f0f0f0;
   border-radius: 5px;
-  outline: none;
-  transition: border-color 0.3s ease;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+  cursor: pointer;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+}
+
+.module-tab:hover {
+  background-color: #dfe6e9;
 }
 
-.module-dropdown:focus {
-  border-color: #2980b9;
+.module-tab.active {
+  background-color: #74b9ff;
+  color: white;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
 }
 
+/* Cycle section */
 .cycle {
   margin-top: 20px;
 }
@@ -163,7 +181,7 @@ export default {
   width: 100%;
   padding: 10px;
   font-size: 16px;
-  background-color: #3498db;
+  background-color: #a3c88a; /* Updated button color */
   color: white;
   border: none;
   border-radius: 5px;
@@ -172,7 +190,7 @@ export default {
 }
 
 .cycle-button:hover {
-  background-color: #2980b9;
+  background-color: #8fb379;
 }
 
 .cycle-details {
@@ -184,6 +202,7 @@ export default {
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
 }
 
+/* Typography */
 h2 {
   color: #2c3e50;
   text-align: center;