diff --git a/src/assets/tailwind.css b/src/assets/tailwind.css
index 262752e..c607d72 100644
--- a/src/assets/tailwind.css
+++ b/src/assets/tailwind.css
@@ -56,6 +56,17 @@
   @apply text-neutral-700 bg-neutral-100 border border-neutral-500  hover:bg-neutral-500 hover:text-neutral-100 hover:border-neutral-300 focus:outline-none focus:border-neutral-500 focus:ring active:ring
 }
 
+/* button toggle */
+.btn-toggle-content {
+  @apply flex justify-between items-center w-full rounded-full bg-neutral-100 text-neutral-500
+}
+.btn-toggle-item {
+  @apply text-sm leading-5 font-medium text-center justify-center w-1/2 px-7 py-1.5 rounded-full cursor-pointer transition-all duration-200
+}
+.btn-toggle-show {
+  @apply bg-primary text-neutral-10 shadow-md
+}
+
 /* invalid */
 .is-invalid :invalid{
   @apply invalid:border-danger focus:ring-danger
@@ -70,3 +81,11 @@
 nav ul>li {
   @apply px-2 py-3.5 duration-300 hover:bg-neutral-900 hover:text-neutral-10 active:bg-neutral-900 active:text-neutral-10;
 }
+
+/* Header */
+.h1 {
+  @apply font-bold text-base leading-10
+}
+.h2 {
+  @apply font-bold text-sm leading-10
+}
diff --git a/src/main.js b/src/main.js
index 5662aa0..2527338 100644
--- a/src/main.js
+++ b/src/main.js
@@ -22,6 +22,7 @@ import 'primevue/resources/primevue.min.css'; //core css
 import 'primeicons/primeicons.css'; //icons
 import Sidebar from 'primevue/sidebar';
 import Button from 'primevue/button';
+import Dropdown from 'primevue/dropdown';
 
 const emitter = mitt();
 const app = createApp(App);
@@ -51,5 +52,6 @@ app.use(ToastPlugin, { // use `this.$toast` in Vue.js
 app.use(PrimeVue);
 app.component('Sidebar', Sidebar);
 app.component('Button', Button);
+app.component('Dropdown', Dropdown);
 
 app.mount("#app");
diff --git a/src/views/Discover/index.vue b/src/views/Discover/index.vue
index 2a6b0fa..e22af89 100644
--- a/src/views/Discover/index.vue
+++ b/src/views/Discover/index.vue
@@ -1,54 +1,127 @@
 <template>
-  <div>
-    <!-- 選擇 bpmn / processmap button -->
-    <ul class="m-3 flex">
-      <li class="rounded-xl p-2 mr-3 cursor-pointer border border-[#F0EFF4] hover:bg-primary"  @click="switchMapType('processMap')">Process map</li>
-      <li class="rounded-xl p-2 cursor-pointer border border-[#F0EFF4] hover:bg-primary"  @click="switchMapType('bpmn')">BPMN model</li>
-      <li class="p-2">map type:  {{ mapType }}</li>
-    </ul>
-    <!-- 選擇繪畫樣式 bezier / unbundled-bezier button-->
-    <ul class="m-3 flex">
-      <li class="rounded-xl p-2 mr-3 cursor-pointer border border-[#F0EFF4] hover:bg-primary"  @click="switchCurveStyles('unbundled-bezier')">unbundled-bezier</li>
-      <li class="rounded-xl p-2 cursor-pointer border border-[#F0EFF4] hover:bg-primary"  @click="switchCurveStyles('taxi')">taxi</li>
-      <li class="p-2">curve style: {{ curveStyle }}</li>
-    </ul>
-    <!-- 直向 TB | 橫向 LR -->
-    <ul class="m-3 flex">
-      <li class="rounded-xl p-2 mr-3 cursor-pointer border border-[#F0EFF4] hover:bg-primary"  @click="switchRank('LR')">LR</li>
-      <li class="rounded-xl p-2 cursor-pointer border border-[#F0EFF4] hover:bg-primary"  @click="switchRank('TB')">TB</li>
-      <li class="p-2">rank: {{ rank }}</li>
-    </ul>
-    <!-- Data Layer type -->
-    <ul class="m-3">
-      <li class="flex mb-3" @change="switchDataLayerType($event, 'freq')">
-        <div class="mr-5">
-          <input type="radio" id="freq" value="freq" name="dataLayer" checked/>
-          <label for="freq">Frequency</label>
-        </div>
-        <div>
-          <select class="border-b" :disabled="dataLayerType === 'duration'">
-            <option v-for="(freq, index) in selectFrequency" :key="index" :value="freq.value" :disabled="freq.disabled" :selected="freq.value === selectedFreq">{{ freq.label }}</option>
-          </select>
-        </div>
+  <Sidebar v-model:visible="visibleLeft" :dismissable="true" :closeIcon="'pi pi-chevron-left'" :modal="false" position="left">
+    <template #header>
+      <p class="h1">Visualization Setting</p>
+    </template>
+    <div>
+      <!-- View -->
+      <div class="my-4 border-b border-neutral-200">
+        <p class="h2">View</p>
+        <ul class="space-y-3 mb-4">
+          <!-- 選擇 bpmn / processmap button -->
+          <li class="btn-toggle-content">
+            <span class="btn-toggle-item" :class="mapType === 'processMap'?'btn-toggle-show  ':''" @click="switchMapType('processMap')">
+              Process map
+            </span>
+            <span class="btn-toggle-item" :class="mapType === 'bpmn'?'btn-toggle-show':''" @click="switchMapType('bpmn')">
+              BPMN Model
+            </span>
+          </li>
+          <!-- 選擇繪畫樣式 bezier / unbundled-bezier button-->
+          <li class="btn-toggle-content">
+            <span class="btn-toggle-item" :class="curveStyle === 'unbundled-bezier'?'btn-toggle-show  ':''" @click="switchCurveStyles('unbundled-bezier')">
+              Curved
+            </span>
+            <span class="btn-toggle-item" :class="curveStyle === 'taxi'?'btn-toggle-show':''" @click="switchCurveStyles('taxi')">
+              Elbow
+            </span>
+          </li>
+          <!-- 直向 TB | 橫向 LR -->
+          <li class="btn-toggle-content">
+            <span class="btn-toggle-item" :class="rank === 'LR'?'btn-toggle-show  ':''" @click="switchRank('LR')">
+              Horizontal
+            </span>
+            <span class="btn-toggle-item" :class="rank === 'TB'?'btn-toggle-show':''" @click="switchRank('TB')">
+              Vertical
+            </span>
+          </li>
+        </ul>
+      </div>
+      <!-- Data Layer -->
+      <div>
+        <p class="h2">Data Layer</p>
+        <ul class="space-y-2">
+          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'freq')">
+            <div class="flex items-center w-1/2">
+              <input type="radio" id="freq" value="freq" name="dataLayer" class="peer hidden" checked/>
+              <label for="freq" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary">
+              </label>
+              <span class="inline-block ml-2">Frequency</span>
+            </div>
+            <div class="w-1/2">
+              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'duration'">
+                <option v-for="(freq, index) in selectFrequency" :key="index" :value="freq.value" :disabled="freq.disabled" :selected="freq.value === selectedFreq">{{ freq.label }}</option>
+              </select>
+            </div>
+          </li>
+          <li class="flex justify-between mb-3" @change="switchDataLayerType($event, 'duration')">
+            <div class="flex items-center w-1/2">
+              <input type="radio" id="duration" value="duration" name="dataLayer" class="peer hidden" />
+              <label for="duration" class="inline-block h-4 w-4 m-2 cursor-pointer rounded-full ring-2 ring-neutral-300 shadow-sm peer-checked:ring-2 peer-checked:ring-primary peer-checked:ring-offset-2 peer-checked:bg-primary"></label>
+              <span class="inline-block ml-2">Duration</span>
+            </div>
+            <div class="w-1/2">
+              <select class="border border-neutral-500 rounded p-1 w-full focus-visible:outline-primary" :disabled="dataLayerType === 'freq'">
+                <option v-for="(duration, index) in selectDuration" :key="index" :value="duration.value" :disabled="duration.disabled" :selected="duration.value === selectedDuration">{{ duration.label }}</option>
+              </select>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <!-- 測試用 -->
+      <li class="mt-20">curve style: {{ curveStyle }}</li>
+      <li >map type:  {{ mapType }}</li>
+      <li >rank: {{ rank }}</li>
+      <li >Data Layer Type: {{ dataLayerType }}</li>
+      <li >Data Layer Option: {{ dataLayerOption }}</li>
+</Sidebar>
+
+  <!-- Switch data type Sidebar -->
+  <div class="flex flex-col justify-between py-4 w-14 h-screen-main absolute bottom-0 left-0 z-10" :class="visibleLeft === true? 'bg-neutral-100':''">
+    <ul class="space-y-4 flex flex-col justify-center items-center">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100" @click="visibleLeft = true">
+        <span class="material-symbols-outlined text-2xl text-neutral-500">
+          track_changes
+        </span>
       </li>
-      <li class="flex mb-3" @change="switchDataLayerType($event, 'duration')">
-        <div class="mr-5">
-          <input type="radio" id="duration" value="duration" name="dataLayer" />
-          <label for="duration">Duration</label>
-        </div>
-        <div>
-          <select class="border-b" :disabled="dataLayerType === 'freq'">
-            <option v-for="(duration, index) in selectDuration" :key="index" :value="duration.value" :disabled="duration.disabled" :selected="duration.value === selectedDuration">{{ duration.label }}</option>
-          </select>
-        </div>
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100">
+        <span class="material-symbols-outlined text-2xl text-neutral-500">
+          tornado
+        </span>
+      </li>
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100">
+        <span class="material-symbols-outlined text-2xl text-neutral-500">
+          rebase
+        </span>
+      </li>
+    </ul>
+
+    <ul class="flex flex-col justify-center items-center">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100">
+        <span class="material-symbols-outlined text-2xl text-neutral-500">
+          highlight
+        </span>
       </li>
-      <li class="mb-3">Data Layer Type: {{ dataLayerType }}</li>
-      <li class="mb-3">Data Layer Option: {{ dataLayerOption }}</li>
     </ul>
   </div>
-  <div class="min-w-full min-h-full">
-    <div id="cy" class="min-w-full min-h-screen border"></div>
+
+  <!-- cytoscapeMap -->
+  <div class="min-w-full h-screen-main bg-neutral-100 -z-40">
+    <div id="cy" class="min-w-full h-screen-main "></div>
   </div>
+
+  <div class="bg-transparent py-4 w-14 h-screen-main z-10 bottom-0 right-0 absolute">
+    <ul class="flex flex-col justify-center items-center">
+      <li class="inline-flex items-center justify-center border border-neutral-500  rounded-full w-9 h-9 cursor-pointer bg-neutral-100">
+        <span class="material-symbols-outlined text-2xl text-neutral-500">
+          info
+        </span>
+      </li>
+    </ul>
+  </div>
+
+
 </template>
 
 <script>
@@ -109,6 +182,7 @@ export default {
       selectedFreq: '',
       selectedDuration: '',
       rank: 'LR', // 直向 TB | 橫向 LR
+      visibleLeft: false, // SideBar
     }
   },
   methods: {
@@ -309,8 +383,24 @@ export default {
     this.allMapDataStore.logId = this.$route.params.logId;
   },
   mounted() {
-    this.isLoading = true;
+    this.isLoading = false;
     this.executeApi();
   },
 }
 </script>
+
+<style>
+.p-sidebar-left {
+  @apply ml-14
+}
+.p-sidebar-mask {
+  height: calc(100vh - 104px) !important;
+  top: 104px !important;
+}
+.p-sidebar {
+  @apply !shadow-[1px_0px_4px_rgba(0,0,0,0.25)]
+}
+.p-sidebar-header {
+  @apply bg-neutral-200 border-b border-neutral-300 !py-2 !justify-between
+};
+</style>
diff --git a/src/views/Login/index.vue b/src/views/Login/index.vue
index dd4af38..3d0de47 100644
--- a/src/views/Login/index.vue
+++ b/src/views/Login/index.vue
@@ -50,7 +50,6 @@ export default {
     return {
       isDisabled: true,
       showPassword: false,
-      visibleLeft: false,
     }
   },
   setup() {