diff --git a/Caracal b/Caracal
new file mode 160000
index 000000000..945e448e8
--- /dev/null
+++ b/Caracal
@@ -0,0 +1 @@
+Subproject commit 945e448e8e03ac72c26a7b4eee2b6f2b41f7d725
diff --git a/Distro b/Distro
new file mode 160000
index 000000000..4f107ac10
--- /dev/null
+++ b/Distro
@@ -0,0 +1 @@
+Subproject commit 4f107ac106b8ebd0422de32b6e9d69d00d0f517d
diff --git a/HISTORY.md b/HISTORY.md
index 47002df2f..3bba70c98 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -8,6 +8,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Index
 * **Version 3**
+    * [3.10.x](#camicroscope-3100)
     * [3.9.x](#camicroscope-390)
     * [3.8.x](#camicroscope-380)
     * [3.7.x](#camicroscope-377)
@@ -24,25 +25,54 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 * **Version 1**
     * [1.0.x](#camicroscope-10)
 
-### caMicroscope [Unreleased](https://github.com/camicroscope/camicroscope/compare/v3.9.10...camicroscope:develop)
+### caMicroscope [Unreleased](https://github.com/camicroscope/camicroscope/compare/v3.10.2...camicroscope:develop)
 ###### TBD
 
+### caMicroscope [3.10.2](https://github.com/camicroscope/camicroscope/compare/v3.10.1...camicroscope:v3.10.2)
+###### 2023-06-16
+* point to point
+* Fixed Workbench Navbar Overlapping  #580
+* The Reload button is not Responsive for small size devices #579
+* style: art Fixed fat hamburger icon & alignment issues of dropdown issue#596 #597
+* Styled export.html  #601
+* fix: bug Responsiveness issues of workbench section #605 #605
+* Slight spelling mistake caught while browsing code #630
+* Adding Footer to Sign Up Page #635
+* Fixed the UI of admin page: Solved issue #621 #620
+* Fixed spelling mistake #614
+* FIXED Overlapping / Not properly styled on class=card in the workbench.html #616
+* Fixed import.html interface #613
+
+### caMicroscope [3.10.1](https://github.com/camicroscope/camicroscope/compare/v3.10.0...camicroscope:v3.10.1)
+###### 2022-11-18
+* Bugfix for Magnifying glass with slide token auth
+
+### caMicroscope [3.10.0](https://github.com/camicroscope/camicroscope/compare/v3.9.11...camicroscope:v3.10.0)
+###### 2022-10-25
+* Result Export Page [caMicroscope/566](https://github.com/camicroscope/caMicroscope/pull/566)
+* Slide Token injection [caMicroscope/567](https://github.com/camicroscope/caMicroscope/pull/567)
+
+
 ### caMicroscope [3.9.11](https://github.com/camicroscope/camicroscope/compare/v3.9.10...camicroscope:v3.9.11)
 ###### 2021-01-20
 * add redir page/app
 
 ### caMicroscope [3.9.10](https://github.com/camicroscope/camicroscope/compare/v3.9.9...camicroscope:v3.9.10)
 ###### 2021-01-20
-
+* pathdb mode improvements
 
 ### caMicroscope [3.9.9](https://github.com/camicroscope/camicroscope/compare/v3.9.8...camicroscope:v3.9.9)
 ###### 2021-11-08
 * Fix and enhance Human Readable URL support
 
-### caMicroscope [3.9.10](https://github.com/camicroscope/camicroscope/compare/v3.9.8...camicroscope:v3.9.10)
+### caMicroscope [3.9.10](https://github.com/camicroscope/camicroscope/compare/v3.9.9...camicroscope:v3.9.10)
 ###### 2021-01-20
 * Human Readable Urls for pathdb
 
+### caMicroscope [3.9.9](https://github.com/camicroscope/camicroscope/compare/v3.9.8...camicroscope:v3.9.9)
+###### 2021-11-08
+* Fix and enhance Human Readable URL support
+
 ### caMicroscope [3.9.8](https://github.com/camicroscope/camicroscope/compare/v3.9.6...camicroscope:v3.9.8)
 ###### 2021-10-21
 * Add Segmentation -> Annotation Functionality [#542](https://github.com/camicroscope/caMicroscope/pull/542)
diff --git a/apps/Info.html b/apps/Info.html
index dbca95c1a..1605832ab 100644
--- a/apps/Info.html
+++ b/apps/Info.html
@@ -59,7 +59,7 @@
 					<span class="navbar-toggler-icon"></span>
 					</button>
 					<div class="collapse navbar-collapse" id="navbarSupportedContent" >
-						<ul class="navbar-nav mr-auto">
+						<ul class="navbar-nav mr-auto gap-1">
 							<li class="nav-item link" style="font-family: sans-serif;">
 							   <a class="nav-link" href="landing/landing.html"> <i class="fas fa-home"></i> Home</a>
 							</li>
diff --git a/apps/admin/admin.css b/apps/admin/admin.css
index 005bd2d3b..1bd7a8a19 100644
--- a/apps/admin/admin.css
+++ b/apps/admin/admin.css
@@ -49,6 +49,8 @@ iframe {
 .sidebar .nav-link {
   font-weight: 500;
   color: #5c5c5c;
+  font-size: 15px;
+  margin-bottom:5px
 }
 .sidebar .nav-link.active {
   font-weight: bold;
@@ -86,6 +88,9 @@ iframe {
   font-size: 1rem;
   background-color: rgba(0, 0, 0, 0.25);
   box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.25);
+  height: 60px;
+  background-color: #007bff;
+
 }
 
 .navbar .navbar-toggler {
@@ -111,18 +116,55 @@ iframe {
 }
 
 .title-icon {
-  background-image: url("../../favicon.ico");
+  background-image: url("./favicon_without_bg.png");
   background-repeat: no-repeat;
-  background-size: 3rem 3rem;
+  background-size: 4rem 3.8rem;
+  padding-bottom: 2px;
 }
 
 .title-txt {
   font-weight: bold;
   margin-left: 3rem;
+  font-size: 1.5rem;
+  padding-left: 12px;
 }
 .nav-link {
   cursor: pointer;
 }
+
 .nav-link:hover{
- background-color: #dfdfdf;
+  background-color: transparent;
+  border:2px solid #fff;
+  width: 100%;
+  opacity: 1;
+  padding: 10px;
+  border-radius: 5px;
+  font-weight: bold;
+}
+
+@media (max-width: 767.98px) {
+  .sidebar {
+    top: 2rem;
+  }
+  .sign{
+    text-align: center;
+    margin: auto;
+    padding: auto;
+  }
+  .nav-link:hover{
+    padding: 5px;
+    margin-top: 3px;
+    margin-bottom: 3px;
+    border:2px solid #fff;
+
+  }
+}
+
+.sign-text{
+  color: #fff !important;
+  font-weight: 500px;
 }
+.sign-text:hover{
+  color: #000 !important;
+  background-color: #fff
+}
\ No newline at end of file
diff --git a/apps/admin/admin.html b/apps/admin/admin.html
index 004298ed6..cd93f55c8 100644
--- a/apps/admin/admin.html
+++ b/apps/admin/admin.html
@@ -37,7 +37,7 @@
     <meta name="theme-color" content="#7952b3" />
 
     <style></style>
-    <title>CaMicroScope Bashboard</title>
+    <title>caMicroscope Dashboard</title>
   </head>
   <body>
     <header
@@ -63,9 +63,9 @@
         <span class="navbar-toggler-icon"></span>
       </button>
       <!-- <input class="form-control form-control-primary w-100" type="text" placeholder="Search" aria-label="Search"> -->
-      <ul class="navbar-nav px-3">
+      <ul class="navbar-nav px-3 sign">
         <li class="nav-item text-nowrap">
-          <a class="nav-link" href="#">Sign out</a>
+          <a class="nav-link sign-text" href="#">Sign out</a>
         </li>
       </ul>
     </header>
diff --git a/apps/admin/favicon_without_bg.png b/apps/admin/favicon_without_bg.png
new file mode 100644
index 000000000..b6a88ab7d
Binary files /dev/null and b/apps/admin/favicon_without_bg.png differ
diff --git a/apps/dev-workbench/workbench.css b/apps/dev-workbench/workbench.css
index 17a1657dc..37391ee21 100644
--- a/apps/dev-workbench/workbench.css
+++ b/apps/dev-workbench/workbench.css
@@ -18,8 +18,9 @@
 .btn {
   text-transform: unset !important;
 }
-.navbar {
-  padding-left: 20px;
+.nabvar {
+  display: flex;
+  flex-direction: row;
 }
 .navbar-brand{
   margin-right: 10rem !important;
@@ -38,3 +39,23 @@
 #toastPlaceholder {
   display: none;
 }
+
+
+#goBack{
+  display: flex;
+  margin: 0 1rem;
+}
+@media only screen and (max-width: 551px) {
+  nav {
+    flex-direction: column;
+  }
+  
+  nav ul {
+    flex-direction: column;
+  }
+  
+  nav ul li {
+    margin: 10px 0;
+  }
+}
+
diff --git a/apps/dev-workbench/workbench.html b/apps/dev-workbench/workbench.html
index a365eb261..99bc341c9 100644
--- a/apps/dev-workbench/workbench.html
+++ b/apps/dev-workbench/workbench.html
@@ -64,19 +64,32 @@
   <body>
     <!--Navbar-->
     <nav
-      class="navbar navbar-expand-lg navbar-dark"
+      class="navbar navbar-expand-lg navbar-dark flex-row px-2"
       style="background: rgb(33, 37, 41);"
     >
       <div style="cursor: pointer;" id="goBack">
         <i data-feather="arrow-left" class="text-white"></i>
       </div>
       
+<<<<<<< HEAD
+      <!-- Navbar brand --> 
+     
+      <div class="navbar-brand-div flex-grow-1">
+        <span style="cursor: default" class="navbar-brand " > Workbench</span>
+        
+      </div>
+      <div>
+
+      
+      <ul class="navbar-nav mr-auto px-2">
+=======
       <!-- Navbar brand -->
       <span style="cursor: default;" class="navbar-brand"> Workbench</span>
       <ul class="navbar-nav mr-auto">
+>>>>>>> master
         <!-- Dropdown -->
         <li
-          style="position: absolute; right: 2em; margin-top: -1.3em;"
+          
           class="nav-item dropdown"
         >
           <a
@@ -88,7 +101,7 @@
             >Options</a
           >
           <div
-            style="margin-left: -3em;"
+            style="margin-left: -5em;"
             class="dropdown-menu dropdown-primary"
             aria-labelledby="navbarDropdownMenuLink"
           >
@@ -112,6 +125,8 @@
               <i class="fas fa-question-circle"></i>
               &nbsp;&nbsp;Help/User Guide</a
             >
+            </div>
+
           </div>
         </li>
       </ul>
@@ -224,7 +239,7 @@
         "
       >
         <!-- Cards -->
-        <div class="card" style="max-width: 20em; margin: 0 auto;">
+        <div class="card" style="max-width: 20em; margin-left:2cm; auto;">
           <!-- Card content -->
           <div class="card-body">
             <!-- Title -->
@@ -253,10 +268,10 @@ <h4 class="card-title">Select your dataset</h4>
             </div>
           </div>
         </div>
-        <div style="height: 13em; padding: 6em 0; font-size: large;">
+        <div style="height: 1em; margin-left:5cm; padding: 2em 0; font-size: large;">
           <b> OR</b>
         </div>
-        <div class="card" style="max-width: 20em; margin: 0 auto;">
+        <div class="card" style="max-width: 20em; margin-left:2cm; auto;">
           <!-- Card content -->
           <div class="card-body">
             <!-- Title -->
diff --git a/apps/landing/landing.html b/apps/landing/landing.html
index 2b3d93923..e442429ca 100644
--- a/apps/landing/landing.html
+++ b/apps/landing/landing.html
@@ -40,7 +40,7 @@
             <span class="navbar-toggler-icon"></span>
             </button>
             <div class="collapse navbar-collapse" id="navbarSupportedContent" >
-                <ul class="navbar-nav mr-auto">
+                <ul class="navbar-nav mr-auto gap-1">
                     <li class="nav-item active link" style="font-family: sans-serif;">
                        <a class="nav-link" href="landing.html"> <i class="fas fa-home"></i> Home</a>
                     </li>
@@ -118,7 +118,7 @@ <h3>Documentation</h3>
 
 
 
-            <section class="about">
+            <section class="about" style="margin-left:0cm">
 
                 U24 CA18092401A1, <b>Tools to Analyze Morphology and Spatially Mapped Molecular Data</b>
             </section>
diff --git a/apps/landing/main.css b/apps/landing/main.css
index 9a08de800..0fe5b3598 100644
--- a/apps/landing/main.css
+++ b/apps/landing/main.css
@@ -1670,7 +1670,6 @@
 		display: inline-block;
 		font-size: 0.8em;
 		font-weight: 700;
-		height: 3.25em;
 		line-height: 3.35em;
 		padding: 0 2em;
 		text-align: center;
@@ -4741,9 +4740,7 @@
 			transition: background 0.5s; 
 			border-radius: 3px;
 		}
-		nav li:not(:first-child){
-			margin-left: 0.3em !important;
-		}
+		
 		nav li:not(.active):hover{
 			background: white;
 		}
@@ -4762,4 +4759,24 @@
 		.fas {
 			/* color: rgba(255,255,255,.5);; */
 			color: inherit;
+		}
+
+		/* Custom Scrollbar */
+
+		::-webkit-scrollbar {
+			width: 12px;
+		  }
+
+		::-webkit-scrollbar-track {
+		box-shadow: inset 0 0 1px grey; 
+		border-radius: 0px;
+		}
+
+		::-webkit-scrollbar-thumb {
+		background: #9a2ca0; 
+		border-radius: 5px;
+		}
+		
+		::-webkit-scrollbar-thumb:hover {
+		background: grey;
 		}
\ No newline at end of file
diff --git a/apps/port/export.html b/apps/port/export.html
index 4d8e3d82e..d79ecc75d 100644
--- a/apps/port/export.html
+++ b/apps/port/export.html
@@ -5,8 +5,9 @@
   <title>Export Results [caMicroscope]</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
   <style>
-    body{
-      padding:20px;
+    #exportTitle{
+      background-color: #17a2b8 !important;
+      color: white;
     }
     #output{
       padding: 20px;
@@ -15,24 +16,29 @@
       display:inline-block;
     }
     .form-check-input{
-      padding:5px !important;
+      padding:5px !important; 
+    }
+    .btn{
+      color: #fff;
+      background-color: #0d6efd;
+      border-color: #0d6efd;
     }
     </style>
 </head>
 <body>
 
-  <h1>Export Results</h1>
-  <div class="form">
+  <h1 class="text-center py-5" id="exportTitle">Export Results</h1>
+  <div class="form text-center my-5">
   <label for="slide_id">Slide Ids (exact matches, comma delimited):</label>
-  <input type="text" id="slide_id" name="slide_id"><br>
-
-  <button id="populate_btn" onclick="populateList()" type="button">Get List of Results</button>
+  <input type="text" class="mx-1" id="slide_id" name="slide_id">
+  <button id="populate_btn" onclick="populateList()" type="button" class="btn btn-primary mx-3">Get List of Results</button>
 
   </div>
-  <br><br>
-  <h3>Select Results</h3>
-  <div id="output"></div>
-  <button id="convert_btn" onclick="downloadResults()" type="button">Download Selected Results</button>
+  <div class="result text-center">
+    <h3>Select Results</h3>
+    <div id="output"></div>
+    <button id="convert_btn" onclick="downloadResults()" type="button" class="btn btn-primary my-3">Download Selected Results</button>
+  </div>
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8" crossorigin="anonymous"></script>
   <script src="//code.jquery.com/jquery.min.js"></script>
   <script src="./tree_table.js"></script>
diff --git a/apps/port/import.html b/apps/port/import.html
index 920dc773c..91ca4cc93 100644
--- a/apps/port/import.html
+++ b/apps/port/import.html
@@ -1,30 +1,112 @@
 <!DOCTYPE html>
 <html>
+
 <head>
   <script src="../../core/Store.js"></script>
   <script src="./import.js"></script>
   <script src="./xml2geo.js"></script>
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css">
+  <link rel="stylesheet" href="../../common/stacktable.css">
   <link rel="stylesheet" href="./style.css">
-  <title>Import and Export [caMicroscope]</title>
+  <link rel="stylesheet" href="../table.css" />
+  <link rel="stylesheet" href="../info.css" />
+  <title>Import and Export caMicroscope</title>
 </head>
+<style>
+  #exportTitle {
+    background-color: #17a2b8 !important;
+    color: white;
+    font-size: 18px;
+  }
+
+  .buttons {
+    width: 20%;
+    padding: 10px 0;
+    margin: 10px 40px;
+    border-radius: 5px;
+    border: none;
+    background: #17a2b8;
+    font-size: 14px;
+    font-weight: 600;
+    color: #fff;
+  }
+
+  .buttons:hover {
+    border: 1px solid #17a2b8;
+    color: #17a2b8;
+    background: #fff;
+  }
+
+  .h1 {
+    height: 120px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .h3 {
+    margin: 20px 0 0 25%;
+    font-size: 18px;
+  }
+
+  .h {
+    margin: 5px;
+  }
+
+  input {
+    margin: 5px;
+  }
+  
+  .form-check-input {
+    padding: 5px !important;
+  }
+
+  .btns {
+    display: flex;
+    margin: 0 20px;
+  }
+  .btnn{
+    margin: 10px 180px;
+  }
+  .file {
+    margin-top: 20px;
+  }
+  .slide {
+    margin:5px;
+  }
+</style>
+
 <body>
-  <h1>Import Annotations</h1>
-  <h3>Info</h3>
-  <div class="form">
-  <label for="slide_id">Slide Id:</label>
-  <input type="text" id="slide_id" name="slide_id"><br>
-  <label for="annot_name">Annotation Name:</label>
-  <input type="text" id="annot_name" name="annot_name"><br>
-  <h3>File Contents</h3>
-  <label for="annot_name">Input:</label>
-  <textarea id="input" name="input" rows="10" cols="30"></textarea><br>
-  <button id="convert_btn" onclick="xml2geo()" type="button">Convert from XML</button>
-  <button id="prepare_btn" onclick="prepareAnnot()" type="button">Prepare JSON</button>
+  <div class="" id="exportTitle">
+    <h1 class="h1">Import Annotations</h1>
+  </div>
+  <div class="h3">
+    <h3 class="h">Info</h3>
+    <div class="form">
+      <div class="slide">
+        <label for="slide_id" class="slide">Slide Id:</label>
+        <br>
+        <input type="text" id="slide_id" name="slide_id"><br>
+      </div>
+      <div class="slide">
+        <label for="annot_name" class="slide">Annotation Name:</label><br>
+        <input type="text" id="annot_name" name="annot_name"><br>
+      </div>
+      <h3 class="h h3 file">File Contents</h3>
+      <div class="slide">
+        <label for="annot_name" class="slide">Input:</label><br>
+        <textarea id="input" name="input" class="slide" rows="5" cols="75"></textarea><br>
+      </div>
+      <div class="btns">
+        <button id="convert_btn btn1" class="buttons" onclick="xml2geo()" type="button">Convert from XML</button>
+        <button id="prepare_btn btn2" class="buttons" onclick="prepareAnnot()" type="button">Prepare JSON</button>
+      </div>
+      <label for="annot_name" class="slide">Output:</label><br>
+      <textarea id="input" name="input" class="slide" rows="5" cols="75"></textarea><br>
+      <button id="post_btn" class="buttons btnn" onclick="saveAnnot()" type="button">Post</button>
+    </div>
   </div>
-  <br><br>
-  <h3>Output</h3>
-  <textarea id="output" rows="10" cols="30"></textarea>
-  <br>
-  <button id="post_btn" onclick="saveAnnot()" type="button">Post</button>
 </body>
-</html>
+
+</html>
\ No newline at end of file
diff --git a/apps/segment/segment.js b/apps/segment/segment.js
index ba91a628a..e164cbb06 100644
--- a/apps/segment/segment.js
+++ b/apps/segment/segment.js
@@ -488,7 +488,6 @@ function setFilter(filter) {
  * @param e
  */
 function drawRectangle(e) {
-  console.log(e);
   const canvas = $CAMIC.viewer.drawer.canvas; // Original Canvas
   canvas.style.cursor = e.checked ? 'crosshair' : 'default';
 
diff --git a/apps/signup/signup.css b/apps/signup/signup.css
index c832e124d..40d071bfb 100644
--- a/apps/signup/signup.css
+++ b/apps/signup/signup.css
@@ -99,9 +99,8 @@ nav li{
 	transition: background 0.5s; 
 	border-radius: 3px;
 }
-nav li:not(:first-child){
-	margin-left: 0.3em !important;
-}
+
+
 nav li:not(.active):hover{
 	background: white;
 }
diff --git a/apps/signup/signup.html b/apps/signup/signup.html
index bf87a3e86..10243698a 100644
--- a/apps/signup/signup.html
+++ b/apps/signup/signup.html
@@ -41,7 +41,7 @@
               <span class="navbar-toggler-icon"></span>
               </button>
               <div class="collapse navbar-collapse" id="navbarSupportedContent" >
-                  <ul class="navbar-nav mr-auto">
+                  <ul class="navbar-nav mr-auto gap-1">
                       <li class="nav-item link" style="font-family: sans-serif;">
                          <a class="nav-link" href="../landing/landing.html"> <i class="fas fa-home"></i> Home</a>
                       </li>
@@ -111,6 +111,9 @@ <h2 style="margin-top: -.5em;">User Signup</h2>
       </form>
       <div class="text-center" onclick="loginPage()">Already have an account? </div>
     </div>
+    <footer class="text-center text-white bg-dark p-3">
+      <p class="p">Copyright © 2021 caMicroscope</p>
+    </footer>
     <!-- popup -->
     <div id="popup-container"></div>
 
diff --git a/apps/table.css b/apps/table.css
index df3c12431..7653bb41e 100644
--- a/apps/table.css
+++ b/apps/table.css
@@ -87,6 +87,10 @@ nav li:not(.active):hover a {
   color: black !important;
 }
 
+nav li:not(.active):hover{
+	background: white;
+}
+
 .overall {
   display: flex;
 }
@@ -230,4 +234,4 @@ nav li:not(.active):hover a {
 }
 .p {
   margin-bottom: 0;
-}
\ No newline at end of file
+}
diff --git a/apps/table.html b/apps/table.html
index 1daf76a44..38b8b71ee 100644
--- a/apps/table.html
+++ b/apps/table.html
@@ -51,7 +51,7 @@
 				<span class="navbar-toggler-icon"></span>
 				</button>
 				<div class="collapse navbar-collapse" id="navbarSupportedContent" >
-					<ul class="navbar-nav mr-auto">
+					<ul class="navbar-nav mr-auto gap-1">
 						<li class="nav-item link" style="font-family: sans-serif;">
 						   <a class="nav-link" href="landing/landing.html"> <i class="fas fa-home"></i> Home</a>
 						</li>
@@ -133,9 +133,9 @@ <h1 class="h1">caMicroscope</h1>
             </div>
             </div>
 
-            <div class="d-md-inline-flex overall" style="width:18%;">
-                <div class="pl-md-2 pt-3">
-                    <button type="button" class="btn btn2 btn-success float-right w-md-100"
+            <div class="d-md-inline-flex" style="width:18%;">
+                <div class="pl-md-2 pt-2">
+                    <button type="button" class="btn btn2 btn-success float-right w-md-100" style="padding: 7px;"
                         onclick="(()=>{location.reload();return false;})()"> <i class="fas fa-sync-alt"></i>
                         <span class="reload">Reload</span> </button>
                 </div>
diff --git a/apps/table.js b/apps/table.js
index a812f459f..e3fe07fc9 100644
--- a/apps/table.js
+++ b/apps/table.js
@@ -21,7 +21,7 @@ function validateForm(callback) {
     finishUploadSuccess = false;
     $('#check_btn').hide();
     $('#post_btn').hide();
-    changeStatus('UPLOAD', 'Please chose a file first');
+    changeStatus('UPLOAD', 'Please choose a file first');
     return false;
   }
   // Check if slide name is empty
diff --git a/apps/viewer/init.js b/apps/viewer/init.js
index 4bb0e76cc..da010fe3e 100644
--- a/apps/viewer/init.js
+++ b/apps/viewer/init.js
@@ -310,6 +310,33 @@ function initCore() {
 // initialize all UI components
 async function initUIcomponents() {
   /* create UI components */
+  $UI.downloadSelectionModal = new ModalBox({
+    id: 'downloadSelectionModal',
+    hasHeader: true,
+    headerText: 'Download Selection',
+    hasFooter: true,
+  });
+  const header = $UI.downloadSelectionModal.elt.querySelector('.modalbox-header');
+  header.querySelector('span.close').style.display = 'None';
+  const footer = $UI.downloadSelectionModal.elt.querySelector('.modalbox-footer');
+  const cancelBtn = document.createElement('button');
+  cancelBtn.classList.add('btn');
+  cancelBtn.classList.add('btn-sm');
+  cancelBtn.classList.add('btn-secondary');
+  cancelBtn.textContent = 'Cancel';
+  const downloadBtn = document.createElement('button');
+  downloadBtn.classList.add('btn');
+  downloadBtn.classList.add('btn-sm');
+  downloadBtn.classList.add('btn-info');
+  downloadBtn.textContent = 'Download';
+  footer.innerHTML = '';
+  footer.classList.add('footer');
+  footer.appendChild(cancelBtn);
+  footer.appendChild(downloadBtn);
+
+  cancelBtn.addEventListener('click', hideDownloadSelection);
+  downloadBtn.addEventListener('click', downloadSelection);
+
 
   $UI.modalbox = new ModalBox({
     id: 'modalbox',
@@ -396,6 +423,15 @@ async function initUIcomponents() {
       callback: toggleMeasurement,
     });
   }
+  // donwload selection
+  subToolsOpt.push({
+    name: 'download_selection',
+    icon: 'get_app', // material icons' name
+    title: 'Download Selection',
+    type: 'check',
+    value: 'download',
+    callback: toggleDownloadSelection,
+  });
   // enhance
   subToolsOpt.push({
     name: 'Enhance',
diff --git a/apps/viewer/uicallbacks.js b/apps/viewer/uicallbacks.js
index dc62328f5..f2e55ed4e 100644
--- a/apps/viewer/uicallbacks.js
+++ b/apps/viewer/uicallbacks.js
@@ -312,10 +312,12 @@ function toolsOff() {
     case 'normal':
       annotationOff();
       break;
-
     case 'label':
       presetLabelOff();
       break;
+    case 'download_selection':
+      downloadSelectionOff();
+      break;
   }
 }
 
@@ -458,6 +460,33 @@ function toggleMeasurement(data) {
   }
 }
 
+/**
+ * switches download Selection tool on, called from toggleMeasurement
+ */
+function downloadSelectionOn() {
+  if (!$CAMIC.viewer.canvasDrawInstance) return;
+  $CAMIC.viewer.canvasDrawInstance.drawOn();
+  getDrawOption();
+  $CAMIC.viewer.canvasDrawInstance.drawMode = 'rect';
+  $CAMIC.viewer.canvasDrawInstance.style.color = '#000';
+  const li = $UI.toolbar.getSubTool('download_selection');
+  li.querySelector('input[type=checkbox]').checked = true;
+  $CAMIC.status = 'download_selection';
+}
+
+/**
+ * switches downloadSelection tool off, called from toggleMeasurement
+ */
+function downloadSelectionOff() {
+  if (!$CAMIC.viewer.canvasDrawInstance) return;
+  $CAMIC.viewer.canvasDrawInstance.drawOff();
+  $CAMIC.viewer.canvasDrawInstance.clear();
+  setDrawOption();
+  const li = $UI.toolbar.getSubTool('download_selection');
+  li.querySelector('input[type=checkbox]').checked = false;
+  $CAMIC.status = null;
+}
+
 /**
  * switches measuring tool on, called from toggleMeasurement
  */
@@ -975,6 +1004,53 @@ function algoCallback(data) {
  * @param {Object} data
  */
 const heatmapDefaultColor = '#1034a6';
+
+const drawOptionRecord = {};
+function getDrawOption() {
+  drawOptionRecord.drawMode = $CAMIC.viewer.canvasDrawInstance.drawMode;
+  drawOptionRecord.color = $CAMIC.viewer.canvasDrawInstance.style.color;
+}
+function setDrawOption() {
+  $CAMIC.viewer.canvasDrawInstance.drawMode = drawOptionRecord.drawMode || 'free';
+  $CAMIC.viewer.canvasDrawInstance.style.color = drawOptionRecord.color || '#7cfc00';
+}
+
+function toggleDownloadSelection(data) {
+  // const canvasDraw = $CAMIC.viewer.canvasDrawInstance;
+
+  // if(e.checked) {
+  //   downloadSelectionOn();
+  // } else {
+  //   downloadSelectionOff();
+  // }
+  if (!$CAMIC.viewer.canvasDrawInstance) {
+    console.warn('No Draw Tool');
+    return;
+  }
+  if (data.checked) {
+    // trun off the main menu
+    $UI.layersSideMenu.close();
+    if ($CAMIC.status == 'download_selection') {
+      downloadSelectionOn();
+      return;
+    }
+    // turn off download SelectionOn
+    toolsOff();
+    var checkAllToolsOff = setInterval(function() {
+      if ($CAMIC && $CAMIC.status == null) {
+        // all tool has turn off
+        clearInterval(checkAllToolsOff);
+        downloadSelectionOn();
+      }
+    }, 100);
+    // turn off magnifier
+    // magnifierOff();
+  } else {
+    downloadSelectionOff();
+  }
+}
+
+
 async function callback(data) {
   const viewerName = this.toString();
   let camic = null;
@@ -988,7 +1064,6 @@ async function callback(data) {
     default:
       break;
   }
-  // console.log(data)
 
   // return;
   data.forEach(function(d) {
@@ -1531,6 +1606,16 @@ function saveAnalytics() {
   console.log('saveAnalytics');
 }
 function startDrawing(e) {
+  //
+  if (
+    $UI.toolbar.getSubTool('download_selection') &&
+    $UI.toolbar.getSubTool('download_selection').querySelector('input[type=checkbox]')
+        .checked
+  ) {
+    console.log('start download_selection');
+    return;
+  }
+
   if (
     $UI.toolbar.getSubTool('preset_label') &&
     $UI.toolbar.getSubTool('preset_label').querySelector('input[type=checkbox]')
@@ -1551,7 +1636,94 @@ function startDrawing(e) {
   //     : !$UI.annotOptPanel._form_.isValid();
   return;
 }
+function downloadSelection() {
+  const chks = $UI.downloadSelectionModal.body.querySelectorAll('input[type=checkbox][name=downloadSelection]:checked');
+  if (!chks.length) {
+    alert('Please Check Annotation to Download.');
+    return;
+  }
+  //
+  const execIds = [];
+  chks.forEach((chk)=>execIds.push(chk.dataset.id));
+  // get annotation by
+  const bbox = $CAMIC.viewer.canvasDrawInstance._draws_data_[0].bound.coordinates[0];
+  const height = $CAMIC.viewer.imagingHelper.imgHeight;
+  const width = $CAMIC.viewer.imagingHelper.imgWidth;
+  const x0 = bbox[0][0]/width;
+  const y0 = bbox[0][1]/height;
+  const x1 = bbox[2][0]/width;
+  const y1 = bbox[2][1]/height;
+  //
+  $CAMIC.store.getMarkByIds(execIds, $D.params.slideId, null, 'computer', null, x0, x1, y0, y1).then((data)=>{
+    const element = document.createElement('a');
+    const blob = new Blob([JSON.stringify(data)], {type: 'application/json'});
+    const uri = URL.createObjectURL(blob);
+    element.setAttribute('href', uri);
+    element.setAttribute('download', `${$D.params.data.name}_${new Date().toISOString()}.json`);
+    element.style.display = 'none';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+    hideDownloadSelection();
+  });
+}
+
+function showDownloadSelection() {
+  // get selection area
+  const height = $CAMIC.viewer.imagingHelper.imgHeight;
+  const width = $CAMIC.viewer.imagingHelper.imgWidth;
+  // get annotation by
+  const bbox = $CAMIC.viewer.canvasDrawInstance._draws_data_[0].bound.coordinates[0];
+  const x0 = bbox[0][0]/width;
+  const y0 = bbox[0][1]/height;
+  const x1 = bbox[2][0]/width;
+  const y1 = bbox[2][1]/height;
+  // show up loading
+  $UI.downloadSelectionModal.body.innerHTML = 'Loading ...';
+  $CAMIC.store.markSegmentationCount($D.params.slideId, x0, x1, y0, y1).then((data)=>{
+    if (data&&Array.isArray(data)&&data.length) {
+      createSegmentTable(data);
+    } else {
+      $UI.downloadSelectionModal.body.innerHTML = 'No Data loaded ...';
+    }
+  });
+  $UI.downloadSelectionModal.open();
+}
+function createSegmentTable(data) {
+  $UI.downloadSelectionModal.body.innerHTML = '';
+  $UI.downloadSelectionModal.body.innerHTML = `<table style="width:100%;color:#154081;">
+<thead>
+  <tr>
+    <th>Name</th>
+    <th>Count</th>
+    <th>Download</th>
+  </tr>
+</thead>
+<tbody>
+  ${data.sort((a, b)=> b._id - a._id).map((d)=>`<tr>
+    <td style="text-align:center;">Segmentation / ${d._id}</td>
+    <td style="text-align:center;">${d.count}</td>
+    <td style="text-align:center;"><input data-id=${d._id} name='downloadSelection' type='checkbox' checked></td>
+  </tr>`).join('')}
+</tbody>
+</table>`;
+}
+function hideDownloadSelection() {
+  downloadSelectionOff();
+  $UI.downloadSelectionModal.close();
+}
+
 function stopDrawing(e) {
+  if (
+    $UI.toolbar.getSubTool('download_selection') &&
+    $UI.toolbar.getSubTool('download_selection').querySelector('input[type=checkbox]')
+        .checked
+  ) {
+    //
+    showDownloadSelection();
+    return;
+  }
+
   // preset label annotation
   if (
     $UI.toolbar.getSubTool('preset_label') &&
@@ -2036,7 +2208,6 @@ function deleteRulerHandler(execId) {
   $CAMIC.store
       .deleteMarkByExecId(execId, $D.params.data.slide)
       .then((datas) => {
-        console.log(datas);
         // server error
         if (datas.error) {
           const errorMessage = `${datas.text}: ${datas.url}`;
@@ -2240,7 +2411,6 @@ function onAddRuler(ruler) {
 }
 
 async function rootCallback({root, parent, parentName, items}) {
-  console.log({root, parent, items});
   // start a message
   openLoadStatus(`${root==parent?root:`${root} - ${parentName}`}`);
   //
diff --git a/apps/viewer/viewer.html b/apps/viewer/viewer.html
index 9046410d5..6cbb8217b 100644
--- a/apps/viewer/viewer.html
+++ b/apps/viewer/viewer.html
@@ -358,6 +358,7 @@
     <!-- toolbar -->
     <div id="ca_tools"></div>
     <div id="modalbox"></div>
+    <div id="downloadSelectionModal"></div>
     <!-- main viewer -->
     <div id="main_viewer" class="main"></div>
     <div id="minor_viewer" class="none"></div>
diff --git a/components/simplecontextmenu/simplecontextmenu.css b/components/simplecontextmenu/simplecontextmenu.css
index 0604d2950..7406dc4b5 100644
--- a/components/simplecontextmenu/simplecontextmenu.css
+++ b/components/simplecontextmenu/simplecontextmenu.css
@@ -154,7 +154,7 @@ height:102px;
 }
 
 .style:hover {
-  width: 66px;
+  width: 86px;
   height: 24px;
 }
 
diff --git a/components/simplecontextmenu/simplecontextmenu.js b/components/simplecontextmenu/simplecontextmenu.js
index 66f8a1e9a..07250364a 100644
--- a/components/simplecontextmenu/simplecontextmenu.js
+++ b/components/simplecontextmenu/simplecontextmenu.js
@@ -225,7 +225,6 @@
  */
   $.SimpleContextMenu.prototype.raiseEvent = function( eventName, eventArgs ) {
     // uncomment if you want to get a log of all events
-    // $.console.log( eventName );
     const handler = this.getHandler( eventName );
 
     if ( handler ) {
@@ -311,6 +310,7 @@
     style.classList.add('item');
     style.title = 'Style';
     const free = document.createElement('li');
+    free.title = 'Free';
     free.classList.add('active');
     free.dataset.model = 'free';
     const styleFree = document.createElement('a');
@@ -321,6 +321,7 @@
 
     const rect = document.createElement('li');
     rect.dataset.model = 'rect';
+    free.title = 'Rectangle';
     // free.classList.add('active');
     const styleRect = document.createElement('a');
     styleRect.classList.add('material-icons');
@@ -329,16 +330,26 @@
 
     const point = document.createElement('li');
     point.dataset.model = 'point';
+    point.title = 'Point';
     // free.classList.add('active');
     const stylePoint = document.createElement('a');
     stylePoint.classList.add('material-icons');
     stylePoint.textContent = 'fiber_manual_record';
     point.appendChild(stylePoint);
 
+    const pointToPoint = document.createElement('li');
+    pointToPoint.title = 'Point To Point';
+    pointToPoint.dataset.model = 'pointToPoint';
+    // free.classList.add('active');
+    const stylePointToPoint = document.createElement('a');
+    stylePointToPoint.classList.add('material-icons');
+    stylePointToPoint.textContent = 'timeline';
+    pointToPoint.appendChild(stylePointToPoint);
 
     style.appendChild(free);
     style.appendChild(rect);
     style.appendChild(point);
+    style.appendChild(pointToPoint);
     elt.appendChild(style);
 
     return elt;
diff --git a/core/Store.js b/core/Store.js
index 85cee4a8e..07c326a5b 100644
--- a/core/Store.js
+++ b/core/Store.js
@@ -195,7 +195,31 @@ class Store {
       mode: 'cors',
     }).then(this.errorHandler).then((x) => this.filterBroken(x, 'mark'));
   }
-
+  markSegmentationCount(slide, x0, x1, y0, y1) {
+    const suffix = 'Mark/segmentationCount';
+    const url = this.base + suffix;
+    const query = {};
+    if (slide) {
+      query['provenance.image.slide'] = slide;
+    }
+    query['provenance.analysis.source'] = 'computer';
+    if (x0) {
+      query.x0 = x0;
+    }
+    if (x1) {
+      query.x1 = x1;
+    }
+    if (y0) {
+      query.y0 = y0;
+    }
+    if (y1) {
+      query.y1 = y1;
+    }
+    return fetch(url + '?' + objToParamStr(query), {
+      credentials: 'include',
+      mode: 'cors',
+    }).then(this.errorHandler);
+  }
   getMarkByIds(ids, slide, notes, source, footprint, x0, x1, y0, y1) {
     if (!slide) {
       return {
@@ -237,7 +261,6 @@ class Store {
     if (y1) {
       query.y1 = y1;
     }
-
     return fetch(url, {
       method: 'POST',
       credentials: 'include',
@@ -882,7 +905,6 @@ class Store {
   updateSlideName(id, newName) {
     const suffix = 'Slide/update';
     const url = this.base + suffix;
-    console.log(id + '   ' + newName);
     const query = {
       '_id': id,
     };
@@ -1108,7 +1130,6 @@ class Store {
   updateSlideReview(id, newStatus) {
     const suffix = 'Slide/update';
     const url = this.base + suffix;
-    console.log(id + '   ' + newStatus);
     const query = {
       '_id': id,
     };
diff --git a/core/extension/openseadragon-canvas-draw-overlay.js b/core/extension/openseadragon-canvas-draw-overlay.js
index 3c43c005c..cb745fe05 100644
--- a/core/extension/openseadragon-canvas-draw-overlay.js
+++ b/core/extension/openseadragon-canvas-draw-overlay.js
@@ -110,6 +110,8 @@
       start: this.startDrawing.bind(this),
       stop: this.stopDrawing.bind(this),
       drawing: this.drawing.bind(this),
+      pointMove: this.pointMove.bind(this),
+      pointClick: this.pointClick.bind(this),
       updateView: this.updateView.bind(this),
     };
 
@@ -184,7 +186,7 @@
       this.isMoving = false;
 
       // creat supplies free, square, rectangle, line
-      this.drawMode = options.drawMode || 'rect'; // 'free', 'square', 'rect', 'line', 'grid'
+      this.drawMode = options.drawMode || 'rect'; // 'free', 'square', 'rect', 'line', 'grid', clickable
       this.size = options.size || null;
       // ctx styles opt
       this.style = {
@@ -368,9 +370,14 @@
 
       // add Event listeners
       this._div.addEventListener('mousemove', this._event.drawing);
+      
       this._div.addEventListener('mouseout', this._event.stop);
       this._div.addEventListener('mouseup', this._event.stop);
       this._div.addEventListener('mousedown', this._event.start);
+      
+      // point to point
+      this._div.addEventListener('mousemove', this._event.pointMove);
+      this._div.addEventListener('click', this._event.pointClick);
 
       this._viewer.addHandler('update-viewport', this._event.updateView);
       this._viewer.addHandler('open', this._event.updateView);
@@ -415,6 +422,9 @@
      * as the mouse steps in
      */
     startDrawing: function(e) {
+      if(this.drawMode == 'pointToPoint') {
+        return;
+      }      
       // prevent to open context menu when click on drawing mode
 
       let isRight;
@@ -509,13 +519,203 @@
         this.__newFeature(this._last.slice());
       }
     },
+    pointMove: function(e) {
+      if(this.isOn && this.drawMode == 'pointToPoint') {
+        let point = new OpenSeadragon.Point(e.clientX, e.clientY);
+        let img_point = this._viewer.viewport.windowToImageCoordinates(point);
+        if (
+          0 > img_point.x ||
+          this.imgWidth < img_point.x ||
+          0 > img_point.y ||
+          this.imgHeight < img_point.y
+        ) {
+          return;
+        }
+        img_point.x = Math.round(img_point.x);
+        img_point.y = Math.round(img_point.y);
+
+        // drawing anchor and lines
+        var line = $.isEmptyObject(this._current_path_)?
+        []:
+        [].concat(this._current_path_.geometry.coordinates[0]);
+        line = line.concat([[img_point.x,img_point.y]]);        
+        if(line.length == 1) return;
+        this.drawOnCanvas(
+          this._draw_ctx_,
+          function() {
+            // case 1: only one point
+            // if(line.length > 1) {
+            //   // end point
+            //   this._draw_ctx_.strokeStyle = 'red';
+            //   DrawHelper.drawCircle(
+            //     this._draw_ctx_,
+            //     img_point.x,
+            //     img_point.y,
+            //     this.style.lineWidth * 3,
+            //   );
+            // } else {
+              // draw line
+              DrawHelper.setStyle(this._draw_ctx_, this.style);              
+              DrawHelper.drawMultiline(
+                  this._draw_ctx_,
+                  line,
+              )
+              
+              // draw circle
+              // get start point (x, y)
+              const sx = line[0][0];
+              const sy = line[0][1];
+              // get end point (x, y)         
+              const ex = line[line.length - 1][0];
+              const ey = line[line.length - 1][1];              
+              if(line.length == 2) { // case 2: has two points   
+                this._draw_ctx_.strokeStyle = 'red';
+              } else { // case 3: more than 2 points
+                // calculate distance between start and end points                
+                const distance  = getDistance(
+                  this._viewer,
+                  new OpenSeadragon.Point(sx, sy),
+                  new OpenSeadragon.Point(ex, ey)
+                )
+                
+                this._draw_ctx_.strokeStyle = distance > 14 ? 'red' : 'blue';
+              }
+              // start point
+              DrawHelper.drawCircle(
+                  this._draw_ctx_,
+                  sx,
+                  sy,
+                  this.style.lineWidth * 3,
+              );              
+              // end point
+              DrawHelper.drawCircle(
+                  this._draw_ctx_,
+                  img_point.x,
+                  img_point.y,
+                  this.style.lineWidth * 3,
+              ); 
+            // }
+                               
+          }.bind(this))
+      }
+      
+    },
+    pointClick: function(e) {
+      
+      this.raiseEvent('start-drawing', {originalEvent: e});
+      if (this.stop) {
+        this.stop = false;
+        return;
+      }
+
+      if(this.isOn && this.drawMode == 'pointToPoint') {
+        let point = new OpenSeadragon.Point(e.clientX, e.clientY);
+        let img_point = this._viewer.viewport.windowToImageCoordinates(point);
+        if (
+          0 > img_point.x ||
+          this.imgWidth < img_point.x ||
+          0 > img_point.y ||
+          this.imgHeight < img_point.y
+        ) {
+          return;
+        }
+        img_point.x = Math.round(img_point.x);
+        img_point.y = Math.round(img_point.y);
+        this._last = [img_point.x, img_point.y];
 
+        if($.isEmptyObject(this._current_path_)) { 
+          this.__newFeature(this._last.slice());
+        } else {
+          this._current_path_.geometry.coordinates[0].push(this._last.slice());
+        }
+        // get current lines
+        var line = this._current_path_.geometry.coordinates[0];
+        // save point to point if the
+        if(line.length > 2 && getDistance(
+          this._viewer,
+          new OpenSeadragon.Point(line[0][0], line[0][1]),
+          new OpenSeadragon.Point(line[line.length - 1][0], line[line.length - 1][1])
+        ) <= 14) { // save annotations
+          this.__endNewFeature();
+          try {
+            // custom event on stop
+            this.raiseEvent('stop-drawing', {originalEvent: e});
+          } catch (e) {
+            // statements
+            console.error('draw-overlay:stop-drawing error:');
+            console.error(e);
+          }
+          return;
+        } 
+
+        // drawing anchor and lines
+        if(line.length == 1) return;
+        this.drawOnCanvas(
+          this._draw_ctx_,
+          function() {
+            // case 1: only one point
+            // if(line.length == 1) {
+            //   // end point
+            //   this._draw_ctx_.strokeStyle = 'red';
+            //   DrawHelper.drawCircle(
+            //     this._draw_ctx_,
+            //     img_point.x,
+            //     img_point.y,
+            //     this.style.lineWidth * 3,
+            //   );
+            // } else {
+              // draw line
+              DrawHelper.setStyle(this._draw_ctx_, this.style);              
+              DrawHelper.drawMultiline(
+                  this._draw_ctx_,
+                  line,
+              )
+              // draw circle
+              // get start point (x, y)
+              const sx = line[0][0];
+              const sy = line[0][1];
+              // get end point (x, y)         
+              const ex = line[line.length - 1][0];
+              const ey = line[line.length - 1][1];              
+              if(line.length == 2) { // case 2: has two points   
+                this._draw_ctx_.strokeStyle = 'red';
+              } else { // case 3: more than 2 points
+                // calculate distance between start and end points
+                const distance  = getDistance(
+                  this._viewer,
+                  new OpenSeadragon.Point(sx, sy),
+                  new OpenSeadragon.Point(ex, ey)
+                )
+                this._draw_ctx_.strokeStyle = distance > 14 ? 'red' : 'blue';
+              }
+              // start point
+              DrawHelper.drawCircle(
+                  this._draw_ctx_,
+                  sx,
+                  sy,
+                  this.style.lineWidth * 3,
+              );              
+              // end point
+              DrawHelper.drawCircle(
+                  this._draw_ctx_,
+                  img_point.x,
+                  img_point.y,
+                  this.style.lineWidth * 3,
+              ); 
+            //}        
+          }.bind(this)) 
+      }
+    },
     /**
      * @private
      * each drawing and collects the path data as point, as the mouse moves
      * @param  {Event} e the event
      */
     drawing: function(e) {
+      // stop if the draw mode is pointToPoint
+      if(this.drawMode == 'pointToPoint') {
+        return;
+      }
       // anything happening?
       if (!(this.isDrawing) && !(this.isMoving)) return;
 
@@ -719,6 +919,10 @@
      * stop drawing on the drawing canvas, when the mouse is up
      */
     stopDrawing: function(e) {
+      // stop if the draw mode is pointToPoint
+      if(this.drawMode == 'pointToPoint') {
+        return;
+      }      
       // if any movement or drawing
       if ((this.isDrawing) || (this.isMoving)) {
         // add style and data to data collection
@@ -1193,7 +1397,15 @@
 
 
   $.extend($.CanvasDraw.prototype, $.EventSource.prototype);
-
+  function getDistance(viewer, start, end) {
+    start = viewer.viewport.imageToWindowCoordinates(start);
+    end = viewer.viewport.imageToWindowCoordinates(end);
+
+    const dx = Math.round(Math.abs(start.x - end.x));
+    const dy = Math.round(Math.abs(start.y - end.y));
+    
+    return Math.sqrt(dx * dx + dy * dy);
+  }
   function getBounds(points) {
     let max; let min;
     points.forEach((point) => {
diff --git a/css/style.css b/css/style.css
index 17729581c..ab6f82fbe 100644
--- a/css/style.css
+++ b/css/style.css
@@ -52,6 +52,10 @@ body {
   height: 100%;
 }
 
+.modalbox .modalbox-footer.footer {
+  display: flex;
+  justify-content: space-between;
+}
 /*#minor_viewer.display {
     height: 100%;
     width: 100%;
diff --git a/package-lock.json b/package-lock.json
index 227159fd0..9e634bb8c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,7 +12,7 @@
         "chai": "^4.3.0",
         "eslint": "^6.8.0",
         "eslint-config-google": "^0.14.0",
-        "express": "^4.16.2",
+        "express": "^4.18.2",
         "jsdom": "^16.5.0",
         "lodash": "^4.17.21",
         "mocha": "^7.2.0",
@@ -54,21 +54,21 @@
       "integrity": "sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA=="
     },
     "node_modules/accepts": {
-      "version": "1.3.7",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz",
-      "integrity": "sha512-Il80Qs2WjYlJIBNzNkK6KYqlVMTbZLXgHx2oT0pU/fjRHyEp+PEfEPY0R3WCwAGVOtauxh1hOxNgIf5bv7dQpA==",
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.8.tgz",
+      "integrity": "sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==",
       "dependencies": {
-        "mime-types": "~2.1.24",
-        "negotiator": "0.6.2"
+        "mime-types": "~2.1.34",
+        "negotiator": "0.6.3"
       },
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/acorn": {
-      "version": "8.7.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
-      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
+      "version": "7.4.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -85,17 +85,6 @@
         "acorn-walk": "^7.1.1"
       }
     },
-    "node_modules/acorn-globals/node_modules/acorn": {
-      "version": "7.4.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
-      "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/acorn-jsx": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.2.0.tgz",
@@ -276,23 +265,26 @@
       }
     },
     "node_modules/body-parser": {
-      "version": "1.19.0",
-      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz",
-      "integrity": "sha512-dhEPs72UPbDnAQJ9ZKMNTP6ptJaionhP5cBb541nXPlW60Jepo9RV/a4fX4XWW9CuFNK22krhrj1+rgzifNCsw==",
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/body-parser/-/body-parser-1.20.1.tgz",
+      "integrity": "sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==",
       "dependencies": {
-        "bytes": "3.1.0",
+        "bytes": "3.1.2",
         "content-type": "~1.0.4",
         "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "http-errors": "1.7.2",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
-        "on-finished": "~2.3.0",
-        "qs": "6.7.0",
-        "raw-body": "2.4.0",
-        "type-is": "~1.6.17"
+        "on-finished": "2.4.1",
+        "qs": "6.11.0",
+        "raw-body": "2.5.1",
+        "type-is": "~1.6.18",
+        "unpipe": "1.0.0"
       },
       "engines": {
-        "node": ">= 0.8"
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
       }
     },
     "node_modules/brace-expansion": {
@@ -326,9 +318,9 @@
       "integrity": "sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw=="
     },
     "node_modules/bytes": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.0.tgz",
-      "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.1.2.tgz",
+      "integrity": "sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==",
       "engines": {
         "node": ">= 0.8"
       }
@@ -527,28 +519,28 @@
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
     },
     "node_modules/content-disposition": {
-      "version": "0.5.3",
-      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
-      "integrity": "sha512-ExO0774ikEObIAEV9kDo50o+79VCUdEB6n6lzKgGwupcVeRlhrj3qGAfwq8G6uBJjkqLrhT0qEYFcWng8z1z0g==",
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
+      "integrity": "sha512-FveZTNuGw04cxlAiWbzi6zTAL/lhehaWbTtgluJh4/E95DqMwTmha3KZN1aAWA8cFIhHzMZUvLevkw5Rqk+tSQ==",
       "dependencies": {
-        "safe-buffer": "5.1.2"
+        "safe-buffer": "5.2.1"
       },
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==",
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/cookie": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz",
-      "integrity": "sha512-+Hp8fLp57wnUSt0tY0tHEXh4voZRDnoIrZPqlo3DPiI4y9lwg/jqx+1Om94/W6ZaPDOUbnjOt/99w66zk+l1Xg==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
+      "integrity": "sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -680,17 +672,21 @@
       }
     },
     "node_modules/depd": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
-      "integrity": "sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-2.0.0.tgz",
+      "integrity": "sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 0.8"
       }
     },
     "node_modules/destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
+      "integrity": "sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==",
+      "engines": {
+        "node": ">= 0.8",
+        "npm": "1.2.8000 || >= 1.4.16"
+      }
     },
     "node_modules/diff": {
       "version": "3.5.0",
@@ -742,7 +738,7 @@
     "node_modules/ee-first": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
+      "integrity": "sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow=="
     },
     "node_modules/emoji-regex": {
       "version": "7.0.3",
@@ -752,7 +748,7 @@
     "node_modules/encodeurl": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
-      "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
+      "integrity": "sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==",
       "engines": {
         "node": ">= 0.8"
       }
@@ -820,7 +816,7 @@
     "node_modules/escape-html": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg="
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
     },
     "node_modules/escape-string-regexp": {
       "version": "1.0.5",
@@ -1037,17 +1033,6 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/espree/node_modules/acorn": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.1.1.tgz",
-      "integrity": "sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==",
-      "bin": {
-        "acorn": "bin/acorn"
-      },
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -1109,43 +1094,44 @@
     "node_modules/etag": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.1.tgz",
-      "integrity": "sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=",
+      "integrity": "sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/express": {
-      "version": "4.17.1",
-      "resolved": "https://registry.npmjs.org/express/-/express-4.17.1.tgz",
-      "integrity": "sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==",
+      "version": "4.18.2",
+      "resolved": "https://registry.npmjs.org/express/-/express-4.18.2.tgz",
+      "integrity": "sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==",
       "dependencies": {
-        "accepts": "~1.3.7",
+        "accepts": "~1.3.8",
         "array-flatten": "1.1.1",
-        "body-parser": "1.19.0",
-        "content-disposition": "0.5.3",
+        "body-parser": "1.20.1",
+        "content-disposition": "0.5.4",
         "content-type": "~1.0.4",
-        "cookie": "0.4.0",
+        "cookie": "0.5.0",
         "cookie-signature": "1.0.6",
         "debug": "2.6.9",
-        "depd": "~1.1.2",
+        "depd": "2.0.0",
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
-        "finalhandler": "~1.1.2",
+        "finalhandler": "1.2.0",
         "fresh": "0.5.2",
+        "http-errors": "2.0.0",
         "merge-descriptors": "1.0.1",
         "methods": "~1.1.2",
-        "on-finished": "~2.3.0",
+        "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
         "path-to-regexp": "0.1.7",
-        "proxy-addr": "~2.0.5",
-        "qs": "6.7.0",
+        "proxy-addr": "~2.0.7",
+        "qs": "6.11.0",
         "range-parser": "~1.2.1",
-        "safe-buffer": "5.1.2",
-        "send": "0.17.1",
-        "serve-static": "1.14.1",
-        "setprototypeof": "1.1.1",
-        "statuses": "~1.5.0",
+        "safe-buffer": "5.2.1",
+        "send": "0.18.0",
+        "serve-static": "1.15.0",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
         "type-is": "~1.6.18",
         "utils-merge": "1.0.1",
         "vary": "~1.1.2"
@@ -1243,16 +1229,16 @@
       }
     },
     "node_modules/finalhandler": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz",
-      "integrity": "sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-1.2.0.tgz",
+      "integrity": "sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==",
       "dependencies": {
         "debug": "2.6.9",
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
+        "on-finished": "2.4.1",
         "parseurl": "~1.3.3",
-        "statuses": "~1.5.0",
+        "statuses": "2.0.1",
         "unpipe": "~1.0.0"
       },
       "engines": {
@@ -1321,9 +1307,9 @@
       }
     },
     "node_modules/forwarded": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz",
-      "integrity": "sha1-mMI9qxF1ZXuMBXPozszZGw/xjIQ=",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/forwarded/-/forwarded-0.2.0.tgz",
+      "integrity": "sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -1331,7 +1317,7 @@
     "node_modules/fresh": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.2.tgz",
-      "integrity": "sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=",
+      "integrity": "sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -1522,18 +1508,18 @@
       }
     },
     "node_modules/http-errors": {
-      "version": "1.7.2",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz",
-      "integrity": "sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-2.0.0.tgz",
+      "integrity": "sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==",
       "dependencies": {
-        "depd": "~1.1.2",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.1.1",
-        "statuses": ">= 1.5.0 < 2",
-        "toidentifier": "1.0.0"
+        "depd": "2.0.0",
+        "inherits": "2.0.4",
+        "setprototypeof": "1.2.0",
+        "statuses": "2.0.1",
+        "toidentifier": "1.0.1"
       },
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 0.8"
       }
     },
     "node_modules/http-signature": {
@@ -1599,9 +1585,9 @@
       }
     },
     "node_modules/inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
+      "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="
     },
     "node_modules/inquirer": {
       "version": "7.1.0",
@@ -1971,6 +1957,17 @@
         }
       }
     },
+    "node_modules/jsdom/node_modules/acorn": {
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/json-schema": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.4.0.tgz",
@@ -2048,7 +2045,7 @@
     "node_modules/media-typer": {
       "version": "0.3.0",
       "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
-      "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
+      "integrity": "sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -2078,19 +2075,19 @@
       }
     },
     "node_modules/mime-db": {
-      "version": "1.43.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.43.0.tgz",
-      "integrity": "sha512-+5dsGEEovYbT8UY9yD7eE4XTc4UwJ1jBYlgaQQF38ENsKR3wj/8q8RFZrF9WIZpB2V1ArTVFUva8sAul1NzRzQ==",
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/mime-types": {
-      "version": "2.1.26",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.26.tgz",
-      "integrity": "sha512-01paPWYgLrkqAyrlDorC1uDwl2p3qZT7yl806vW7DvDoxwXi46jsjFbg+WdwotBIk6/MbEhO/dh5aZ5sNj/dWQ==",
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
       "dependencies": {
-        "mime-db": "1.43.0"
+        "mime-db": "1.52.0"
       },
       "engines": {
         "node": ">= 0.6"
@@ -2202,7 +2199,7 @@
     "node_modules/ms": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
+      "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="
     },
     "node_modules/mute-stream": {
       "version": "0.0.8",
@@ -2215,9 +2212,9 @@
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc="
     },
     "node_modules/negotiator": {
-      "version": "0.6.2",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
-      "integrity": "sha512-hZXc7K2e+PgeI1eDBe/10Ard4ekbfrrqG8Ep+8Jmf4JID2bNg7NvCPOZN+kfF574pFQI7mum2AUqDidoKqcTOw==",
+      "version": "0.6.3",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.3.tgz",
+      "integrity": "sha512-+EUsqGPLsM+j/zdChZjsnX51g4XrHFOIXwfnCVPGlQk/k5giakcKsuxCObBRu6DSm9opw/O6slWbJdghQM4bBg==",
       "engines": {
         "node": ">= 0.6"
       }
@@ -2342,9 +2339,9 @@
       }
     },
     "node_modules/on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
+      "integrity": "sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==",
       "dependencies": {
         "ee-first": "1.1.1"
       },
@@ -2522,11 +2519,11 @@
       }
     },
     "node_modules/proxy-addr": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
-      "integrity": "sha512-dh/frvCBVmSsDYzw6n926jv974gddhkFPfiN8hPOi30Wax25QZyZEGveluCgliBnqmuM+UJmBErbAUFIoDbjOw==",
+      "version": "2.0.7",
+      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
+      "integrity": "sha512-llQsMLSUDUPT44jdrU/O37qlnifitDP+ZwrmmZcoSKyLKvtZxpyV0n2/bD/N4tBAAZ/gJEdZU7KMraoK1+XYAg==",
       "dependencies": {
-        "forwarded": "~0.1.2",
+        "forwarded": "0.2.0",
         "ipaddr.js": "1.9.1"
       },
       "engines": {
@@ -2547,11 +2544,17 @@
       }
     },
     "node_modules/qs": {
-      "version": "6.7.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz",
-      "integrity": "sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==",
+      "version": "6.11.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
+      "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
       "engines": {
         "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/range-parser": {
@@ -2563,12 +2566,12 @@
       }
     },
     "node_modules/raw-body": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz",
-      "integrity": "sha512-4Oz8DUIwdvoa5qMJelxipzi/iJIi40O5cGV1wNYp5hvZP8ZN0T+jiNkL0QepXs+EsQ9XJ8ipEDoiH70ySUJP3Q==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/raw-body/-/raw-body-2.5.1.tgz",
+      "integrity": "sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==",
       "dependencies": {
-        "bytes": "3.1.0",
-        "http-errors": "1.7.2",
+        "bytes": "3.1.2",
+        "http-errors": "2.0.0",
         "iconv-lite": "0.4.24",
         "unpipe": "1.0.0"
       },
@@ -2756,9 +2759,23 @@
       }
     },
     "node_modules/safe-buffer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ]
     },
     "node_modules/safer-buffer": {
       "version": "2.1.2",
@@ -2785,42 +2802,42 @@
       }
     },
     "node_modules/send": {
-      "version": "0.17.1",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.17.1.tgz",
-      "integrity": "sha512-BsVKsiGcQMFwT8UxypobUKyv7irCNRHk1T0G680vk88yf6LBByGcZJOTJCrTP2xVN6yI+XjPJcNuE3V4fT9sAg==",
+      "version": "0.18.0",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.18.0.tgz",
+      "integrity": "sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==",
       "dependencies": {
         "debug": "2.6.9",
-        "depd": "~1.1.2",
-        "destroy": "~1.0.4",
+        "depd": "2.0.0",
+        "destroy": "1.2.0",
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "etag": "~1.8.1",
         "fresh": "0.5.2",
-        "http-errors": "~1.7.2",
+        "http-errors": "2.0.0",
         "mime": "1.6.0",
-        "ms": "2.1.1",
-        "on-finished": "~2.3.0",
+        "ms": "2.1.3",
+        "on-finished": "2.4.1",
         "range-parser": "~1.2.1",
-        "statuses": "~1.5.0"
+        "statuses": "2.0.1"
       },
       "engines": {
         "node": ">= 0.8.0"
       }
     },
     "node_modules/send/node_modules/ms": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz",
-      "integrity": "sha512-tgp+dl5cGk28utYktBsrFqA7HKgrhgPsg6Z/EfhWI4gl1Hwq8B/GmY/0oXZ6nF8hDVesS/FpnYaD/kOWhYQvyg=="
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
     "node_modules/serve-static": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz",
-      "integrity": "sha512-JMrvUwE54emCYWlTI+hGrGv5I8dEwmco/00EvkzIIsR7MqrHonbD9pO2MOfFnpFntl7ecpZs+3mW+XbQZu9QCg==",
+      "version": "1.15.0",
+      "resolved": "https://registry.npmjs.org/serve-static/-/serve-static-1.15.0.tgz",
+      "integrity": "sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==",
       "dependencies": {
         "encodeurl": "~1.0.2",
         "escape-html": "~1.0.3",
         "parseurl": "~1.3.3",
-        "send": "0.17.1"
+        "send": "0.18.0"
       },
       "engines": {
         "node": ">= 0.8.0"
@@ -2832,9 +2849,9 @@
       "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc="
     },
     "node_modules/setprototypeof": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
-      "integrity": "sha512-JvdAWfbXeIGaZ9cILp38HntZSFSo3mWg6xGcJJsd+d4aRMOqauag1C63dJfDw7OaMYwEbHMOxEZ1lqVRYP2OAw=="
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
+      "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
     "node_modules/shebang-command": {
       "version": "1.2.0",
@@ -2855,6 +2872,19 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -2912,11 +2942,11 @@
       }
     },
     "node_modules/statuses": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz",
-      "integrity": "sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
+      "integrity": "sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==",
       "engines": {
-        "node": ">= 0.6"
+        "node": ">= 0.8"
       }
     },
     "node_modules/stealthy-require": {
@@ -3095,9 +3125,9 @@
       }
     },
     "node_modules/toidentifier": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",
-      "integrity": "sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==",
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.1.tgz",
+      "integrity": "sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==",
       "engines": {
         "node": ">=0.6"
       }
@@ -3197,7 +3227,7 @@
     "node_modules/unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "integrity": "sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==",
       "engines": {
         "node": ">= 0.8"
       }
diff --git a/package.json b/package.json
index 8a457be44..83f457b01 100644
--- a/package.json
+++ b/package.json
@@ -10,13 +10,13 @@
   "author": "",
   "license": "BSD-3-Clause",
   "dependencies": {
-    "chai": "^4.3.0",
+    "chai": "^4.3.7",
     "eslint": "^6.8.0",
     "eslint-config-google": "^0.14.0",
-    "express": "^4.16.2",
+    "express": "^4.18.2",
     "jsdom": "^16.5.0",
     "lodash": "^4.17.21",
-    "mocha": "^7.2.0",
+    "mocha": "^10.2.0",
     "node-fetch": "^2.6.7",
     "tippy": "0.0.0"
   }