diff --git a/docs/.vuepress/components/IterativeCycle.vue b/docs/.vuepress/components/IterativeCycle.vue
index ed787f20824eb09acfc1f9396506c6a8958927e0..9554d4d2a08941c9dedeca056a5aedb66fa241bf 100644
--- a/docs/.vuepress/components/IterativeCycle.vue
+++ b/docs/.vuepress/components/IterativeCycle.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="collapsible-cards">
+  <div class="iterative-cycle">
     <!-- Module Selector Tabs -->
     <div class="module-tabs">
       <div
@@ -13,9 +13,13 @@
     </div>
 
     <!-- Cycles Display -->
-    <div v-if="selectedModule !== null" class="cycle">
+    <div v-if="selectedModule !== null" class="collapsible-cards">
       <h2>{{ modules[selectedModule].title }}</h2>
-      <div v-for="(cycle, index) in modules[selectedModule].cycles" :key="index" class="card">
+      <div
+        v-for="(cycle, index) in modules[selectedModule].cycles"
+        :key="index"
+        class="card"
+      >
         <h4 @click="toggleCycle(index)">
           {{ cycle.title }}
           <span v-if="isCycleOpen(index)">â–²</span>
@@ -42,34 +46,65 @@ export default {
       openCycles: [], // Track which cycles are open
       modules: [
         {
-          title: 'Module 1: DBTL Cycles',
+          title: 'Module 1: Gibson Assemblies',
           cycles: [
             {
-              title: 'Cycle 1',
+              title: 'Cycle 1: Assembly',
+              phases: [
+                { title: 'Design', description: 'Designing DNA fragments for assembly.' },
+                { title: 'Build', description: 'Performing the Gibson assembly procedure.' },
+              ]
+            },
+            {
+              title: 'Cycle 2: Optimization',
+              phases: [
+                { title: 'Design', description: 'Adjusting fragment lengths for better efficiency.' },
+                { title: 'Build', description: 'Re-running the assembly with optimized parameters.' },
+              ]
+            },
+            {
+              title: 'Cycle 3: Verification',
               phases: [
-                { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
-                { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
-                { title: 'Test', description: 'Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.' },
-                { title: 'Learn', description: 'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore.' },
+                { title: 'Design', description: 'Designing verification tests for assemblies.' },
+                { title: 'Build', description: 'Executing verification assays.' },
               ]
             },
-            // Add more cycles as needed
           ]
         },
         {
-          title: 'Module 2: Design & Build',
+          title: 'Module 2: Characterisation',
           cycles: [
             {
-              title: 'Cycle 1',
+              title: 'Cycle 1: Characterization',
               phases: [
-                { title: 'Design', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
-                { title: 'Build', description: 'Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' },
+                { title: 'Design', description: 'Planning experiments to characterize assemblies.' },
+                { title: 'Build', description: 'Executing characterization assays.' },
               ]
             },
-            // Add more cycles as needed
           ]
         },
-        // Add more modules as needed
+        {
+          title: 'Module 3: Integrative Vector',
+          cycles: [
+            {
+              title: 'Cycle 1: Construction',
+              phases: [
+                { title: 'Design', description: 'Designing the integrative vector.' },
+              ]
+            },
+          ]
+        },
+        {
+          title: 'Module 4: Bioinformatics',
+          cycles: [
+            {
+              title: 'Cycle 1: Data Analysis',
+              phases: [
+                { title: 'Design', description: 'Setting up bioinformatics workflows.' },
+              ]
+            },
+          ]
+        }
       ]
     };
   },
@@ -93,6 +128,46 @@ export default {
 </script>
 
 <style scoped>
+/* Layout styles */
+.iterative-cycle {
+  font-family: 'Arial', sans-serif;
+  max-width: 800px;
+  margin: 20px auto;
+  padding: 20px;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* Module Selector Tabs */
+.module-tabs {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+
+.module-tab {
+  padding: 10px 20px;
+  margin: 0 10px;
+  font-size: 16px;
+  background-color: #f0f0f0;
+  border-radius: 5px;
+  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-tab.active {
+  background-color: #73aba2;
+  color: white;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* Collapsible Cards */
 .collapsible-cards {
   display: flex;
   flex-direction: column;
@@ -122,35 +197,23 @@ export default {
   color: #333;
 }
 
-h1,
-h3 {
-  color: #396d7e;
+/* Typography */
+h2 {
+  color: #2c3e50;
+  text-align: center;
 }
 
-.module-tabs {
-  display: flex;
-  justify-content: center;
-  margin-bottom: 20px;
-}
-
-.module-tab {
-  padding: 10px 20px;
-  margin: 0 10px;
-  font-size: 16px;
-  background-color: #f0f0f0;
-  border-radius: 5px;
-  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
-  cursor: pointer;
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+h3 {
+  color: #3498db;
+  margin-bottom: 10px;
 }
 
-.module-tab:hover {
-  background-color: #dfe6e9;
+ul {
+  margin-left: 20px;
 }
 
-.module-tab.active {
-  background-color: #73aba2;
-  color: white;
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+li {
+  color: #555;
 }
 </style>
+