diff --git a/src/viewerModule/threeSurfer/module.ts b/src/viewerModule/threeSurfer/module.ts
index fcc19bc37b1cb77bf04e0749534c2e8730715a96..626566404f2aa624d603184e40ee36895e80cedd 100644
--- a/src/viewerModule/threeSurfer/module.ts
+++ b/src/viewerModule/threeSurfer/module.ts
@@ -1,6 +1,8 @@
 import { CommonModule } from "@angular/common";
 import { NgModule } from "@angular/core";
+import { FormsModule } from "@angular/forms";
 import { AngularMaterialModule } from "src/ui/sharedModules/angularMaterial.module";
+import { UtilModule } from "src/util";
 import { ThreeSurferGlueCmp } from "./threeSurferGlue/threeSurfer.component";
 import { ThreeSurferViewerConfig } from "./tsViewerConfig/tsViewerConfig.component";
 
@@ -8,6 +10,8 @@ import { ThreeSurferViewerConfig } from "./tsViewerConfig/tsViewerConfig.compone
   imports: [
     CommonModule,
     AngularMaterialModule,
+    UtilModule,
+    FormsModule,
   ],
   declarations: [
     ThreeSurferGlueCmp,
diff --git a/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts b/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts
index b79246255b4e6e7ab5af0f1f7774f53c6f812301..db5e39b0760b1506192eccf4d0ad88874ef3cd80 100644
--- a/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts
+++ b/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.component.ts
@@ -37,6 +37,8 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, OnChanges, Af
   public modes: TThreeSurferMode[] = []
   public selectedMode: string
 
+  public allKeys: {name: string, checked: boolean}[] = []
+
   private regionMap: Map<string, Map<number, any>> = new Map()
   constructor(
     private el: ElementRef,
@@ -54,6 +56,7 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, OnChanges, Af
   }[] = []
 
   private unloadAllMeshes() {
+    this.allKeys = []
     while(this.loadedMeshes.length > 0) {
       const m = this.loadedMeshes.pop()
       this.tsRef.unloadMesh(m.threeSurfer)
@@ -68,7 +71,8 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, OnChanges, Af
     const { meshes } = mode
     for (const singleMesh of meshes) {
       const { mesh, colormap, hemisphere } = singleMesh
-      
+      this.allKeys.push({name: hemisphere, checked: true})
+
       const tsM = await this.tsRef.loadMesh(
         parseContext(mesh, [this.config['@context']])
       )
@@ -182,6 +186,13 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, OnChanges, Af
       const found = this.loadedMeshes.find(({ threeSurfer }) => threeSurfer === evGeom)
       
       if (!found) return this.handleMouseoverEvent(custEv)
+      
+      /**
+       * check if the mesh is toggled off
+       * if so, do not proceed
+       */
+      const checkKey = this.allKeys.find(key => key.name === found.hemisphere)
+      if (checkKey && !checkKey.checked) return 
 
       const { hemisphere: key, vIdxArr } = found
 
@@ -254,6 +265,18 @@ export class ThreeSurferGlueCmp implements IViewer<'threeSurfer'>, OnChanges, Af
       ).join(' / ')
   }
 
+  public handleCheckBox(key: { name: string, checked: boolean }, flag: boolean){
+    const foundMesh = this.loadedMeshes.find(m => m.hemisphere === key.name)
+    if (!foundMesh) {
+      throw new Error(`Cannot find mesh with name: ${key.name}`)
+    }
+    const meshObj = this.tsRef.customColormap.get(foundMesh.threeSurfer)
+    if (!meshObj) {
+      throw new Error(`mesh obj not found!`)
+    }
+    meshObj.mesh.visible = flag
+  }
+
   private onDestroyCb: (() => void) [] = []
 
   ngOnDestroy() {
diff --git a/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.style.css b/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.style.css
index 7f0e93fecac50602687cf91191a9dc0a93bdd54a..c5538b29efd15dbcca152e91581581b6525e90f2 100644
--- a/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.style.css
+++ b/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.style.css
@@ -5,19 +5,18 @@
   width: 100%;
 }
 
-:host > div
-{
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
-button[mat-icon-button]
+.button-container
 {
   z-index: 1;
   position: fixed;
   bottom: 1rem;
   right: 1rem;
+  width: 0px;
+  height:0px;
+
+  display: flex;
+  justify-content: flex-end;
+  align-items: flex-end;
 }
 
 span.mouseover
diff --git a/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.template.html b/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.template.html
index 9189a3cc7b2ae4bcc48b0127660a58460411bcb8..7a5d51f831637cf052b9608b55b715fd68d1aa62 100644
--- a/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.template.html
+++ b/src/viewerModule/threeSurfer/threeSurferGlue/threeSurfer.template.html
@@ -2,13 +2,40 @@
   class="mouseover iv-custom-comp text">
   {{ mouseoverText }}
 </span>
-<button mat-icon-button
-  color="primary"
-  class="pe-all"
-  [matMenuTriggerFor]="fsModeSelMenu">
-  <i class="fas fa-bars"></i>
-</button>
 
+<div class="button-container">
+
+  <!-- configurator -->
+  <button mat-icon-button
+    color="primary"
+    [matMenuTriggerFor]="configMenu"
+    class="pe-all">
+    <i class="fas fa-cog"></i>
+  </button>
+
+  <!-- selector -->
+  <button mat-icon-button
+    color="primary"
+    class="pe-all"
+    [matMenuTriggerFor]="fsModeSelMenu">
+    <i class="fas fa-bars"></i>
+  </button>
+</div>
+
+<!-- config menu -->
+<mat-menu #configMenu="matMenu">
+  <div class="iv-custom-comp text p-2">
+    <mat-checkbox *ngFor="let key of allKeys"
+      class="d-block"
+      iav-stop="click"
+      (ngModelChange)="handleCheckBox(key, $event)"
+      [(ngModel)]="key.checked">
+      {{ key.name }}
+    </mat-checkbox>
+  </div>
+</mat-menu>
+
+<!-- selector menu -->
 <mat-menu #fsModeSelMenu="matMenu">
   <button *ngFor="let mode of modes"
     mat-menu-item