diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
index cfd94dd..a87bffe 100644
--- a/packages/demo/src/App.svelte
+++ b/packages/demo/src/App.svelte
@@ -38,6 +38,31 @@
   let stuff4 = false;
   let stuff5 = false;
 
+  function navbar(id: string) {
+    stuff1 = false;
+    stuff2 = false;
+    stuff3 = false;
+    stuff4 = false;
+    stuff5 = false;
+    switch (id) {
+      case 'stuff1':
+        stuff1 = true;
+        break;
+      case 'stuff2':
+        stuff2 = true;
+        break;
+      case 'stuff3':
+        stuff3 = true;
+        break;
+      case 'stuff4':
+        stuff4 = true;
+        break;
+      case 'stuff5':
+        stuff5 = true;
+        break;
+    }
+  }
+
   onMount(() => {
     window.GaReportService = new MockService();
   });
@@ -45,12 +70,12 @@
 
 <div style="width: 100%; height: 120px; display: flex; flex-direction: column; gap: 0.3rem; border-bottom: 3px solid #E76538; position: fixed; overflow: hidden; top: 0; z-index: 1000; background-color: #ffefe7;">
   <div style="display: flex;">
-    <div on:click={() => {stuff1 = true; stuff2 = false;}} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff1 ? 'white' : '#E76538'}; display:  flex; align-items: center; justify-content: center; background-color: {stuff1 ? '#E76538' : ''};">b2b v1.4</div>
-    <div on:click={() => {stuff1 = false; stuff2 = true;}} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff2 ? 'white' : '#E76538'}; display:  flex; align-items: center; justify-content: center; background-color: {stuff2 ? '#E76538' : ''};">b2b v2.0</div>
+    <div on:click={() => navbar('stuff1')} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff1 ? 'white' : '#E76538'}; display:  flex; align-items: center; justify-content: center; background-color: {stuff1 ? '#E76538' : ''};">b2b v1.4</div>
+    <div on:click={() => navbar('stuff2')} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff2 ? 'white' : '#E76538'}; display:  flex; align-items: center; justify-content: center; background-color: {stuff2 ? '#E76538' : ''};">b2b v2.0</div>
   </div>
-  <div role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff3 ? 'white' : '#E76538'}; display:  flex; align-items: center; justify-content: center; background-color: {stuff3 ? '#E76538' : ''};">b2b2c v1.2</div>
-  <div role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff4 ? 'white' : '#E76538'}; display:  flex; align-items: center; justify-content: center; background-color: {stuff4 ? '#E76538' : ''};">b2c v1.2</div>
-  <div role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff5 ? 'white' : '#E76538'}; display:  flex; align-items: center; justify-content: center; background-color: {stuff5 ? '#E76538' : ''};">SLE v1.0</div>
+  <div on:click={() => navbar('stuff3')} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff3 ? 'white' : '#E76538'}; display:  flex; align-items: center; justify-content: center; background-color: {stuff3 ? '#E76538' : ''};">b2b2c v1.2</div>
+  <div on:click={() => navbar('stuff4')} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff4 ? 'white' : '#E76538'}; display:  flex; align-items: center; justify-content: center; background-color: {stuff4 ? '#E76538' : ''};">b2c v1.2</div>
+  <div on:click={() => navbar('stuff5')} role="button" style="width: 140px; height: 25px; border-radius: 10px; border: 2px solid #E76538; color: {stuff5 ? 'white' : '#E76538'}; display:  flex; align-items: center; justify-content: center; background-color: {stuff5 ? '#E76538' : ''};">SLE v1.0</div>
 </div>
 
 {#if stuff1}
@@ -397,11 +422,11 @@
       </div>
     </div>
     <div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
-        <b>1. main-result.wc.svelte</b>
+        <b>1. main-result.wc.svelte (also used in b2b2c(v1.2) , b2c(v1.2))</b>
         <div style="border: 1px dashed lightcoral; width: 550px; height: 30rem;">
             <ga-main-result lang="english"></ga-main-result>
         </div>
-      </div>
+    </div>
     <div style="border-bottom: 2px dashed black; display: flex; flex-direction: column; align-items: center; width: 80%; padding: 2rem 0 2rem 0;">
       <b>2. overlap-title.wc.svelte</b>
       <div style="width: 71.3ch;height: 11ch; border: 1px dashed lightcoral;">
@@ -417,7 +442,7 @@
       </div>
     </div>
     <div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
-        <b>3. results-overview.wc.svelte</b>
+        <b>3. results-overview.wc.svelte (also used in b2b2c(v1.2) , b2c(v1.2))</b>
         <div style="display: flex; flex-direction: column; height: 588px; width: 550px; border: 1px dashed lightcoral;">
           <div style="width: 100%; height: 98px;">
             <ga-results-overview type="age" lang="english"></ga-results-overview>
@@ -446,7 +471,7 @@
         </div>
       </div>
     <div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
-        <b>5. single-overview.wc.svelte</b>
+        <b>5. single-overview.wc.svelte (also used in b2b2c(v1.2) , b2c(v1.2))</b>
         <div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
           <ga-single-overview type="shield" lang="english"></ga-single-overview>
         </div>
@@ -493,4 +518,120 @@
   </div>
 {/if}
 
+{#if stuff3}
+  <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 120px;">
+    <div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
+      <b>1. main-result.wc.svelte (also used in b2b(v2.0) , b2c(v1.2))</b>
+      <div style="border: 1px dashed lightcoral; width: 550px; height: 30rem;">
+        <ga-main-result lang="english"></ga-main-result>
+      </div>
+    </div>
+
+    <div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
+      <b>2. results-overview.wc.svelte (also used in b2b(v2.0) , b2c(v1.2))</b>
+      <div style="display: flex; flex-direction: column; height: 588px; width: 550px; border: 1px dashed lightcoral;">
+        <div style="width: 100%; height: 98px;">
+          <ga-results-overview type="age" lang="english"></ga-results-overview>
+        </div>
+        <div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
+          <ga-results-overview type="shield" lang="english"></ga-results-overview>
+        </div>
+        <div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
+          <ga-results-overview type="youth" lang="english"></ga-results-overview>
+        </div>
+        <div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
+          <ga-results-overview type="mature" lang="english"></ga-results-overview>
+        </div>
+        <div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
+          <ga-results-overview type="median" lang="english"></ga-results-overview>
+        </div>
+        <div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
+          <ga-results-overview type="lifestyle" lang="english"></ga-results-overview>
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
+      <b>3. single-overview.wc.svelte (also used in b2b(v2.0) , b2c(v1.2))</b>
+      <div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
+        <ga-single-overview type="shield" lang="english"></ga-single-overview>
+      </div>
+      <div style="margin: 5px;"></div>
+      <div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
+        <ga-single-overview type="youth" lang="english"></ga-single-overview>
+      </div>
+      <div style="margin: 5px;"></div>
+      <div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
+        <ga-single-overview type="mature" lang="english"></ga-single-overview>
+      </div>
+      <div style="margin: 5px;"></div>
+      <div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
+        <ga-single-overview type="median" lang="english"></ga-single-overview>
+      </div>
+      <div style="margin: 5px;"></div>
+      <div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
+        <ga-single-overview type="lifestyle" lang="english"></ga-single-overview>
+      </div>
+    </div>
+  </div>
+{/if}
+
+{#if stuff4}
+    <div style="width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin-top: 120px;">
+      <div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
+        <b>1. main-result.wc.svelte (also used in b2b(v2.0) , b2b2c(v1.2))</b>
+        <div style="border: 1px dashed lightcoral; width: 550px; height: 30rem;">
+          <ga-main-result lang="english"></ga-main-result>
+        </div>
+      </div>
+
+      <div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
+        <b>2. results-overview.wc.svelte (also used in b2b(v2.0) , b2b2c(v1.2))</b>
+        <div style="display: flex; flex-direction: column; height: 588px; width: 550px; border: 1px dashed lightcoral;">
+          <div style="width: 100%; height: 98px;">
+            <ga-results-overview type="age" lang="english"></ga-results-overview>
+          </div>
+          <div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
+            <ga-results-overview type="shield" lang="english"></ga-results-overview>
+          </div>
+          <div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
+            <ga-results-overview type="youth" lang="english"></ga-results-overview>
+          </div>
+          <div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
+            <ga-results-overview type="mature" lang="english"></ga-results-overview>
+          </div>
+          <div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
+            <ga-results-overview type="median" lang="english"></ga-results-overview>
+          </div>
+          <div style="width: 100%; height: 98px; border-top: 2px solid #09341F33;">
+            <ga-results-overview type="lifestyle" lang="english"></ga-results-overview>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex flex-col items-center" style="padding: 2rem 0 2rem 0; width: 80%; border-bottom: 2px dashed black;">
+        <b>3. single-overview.wc.svelte (also used in b2b(v2.0) , b2b2c(v1.2))</b>
+        <div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
+          <ga-single-overview type="shield" lang="english"></ga-single-overview>
+        </div>
+        <div style="margin: 5px;"></div>
+        <div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
+          <ga-single-overview type="youth" lang="english"></ga-single-overview>
+        </div>
+        <div style="margin: 5px;"></div>
+        <div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
+          <ga-single-overview type="mature" lang="english"></ga-single-overview>
+        </div>
+        <div style="margin: 5px;"></div>
+        <div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
+          <ga-single-overview type="median" lang="english"></ga-single-overview>
+        </div>
+        <div style="margin: 5px;"></div>
+        <div style="width: 550px; height: 200px; border: 1px dashed lightcoral;">
+          <ga-single-overview type="lifestyle" lang="english"></ga-single-overview>
+        </div>
+      </div>
+    </div>
+{/if}
+