diff --git a/400-SOURCECODE/AIAHTML5.Web/app/widget/TopMenu.html b/400-SOURCECODE/AIAHTML5.Web/app/widget/TopMenu.html
index 594a5e5..31a5072 100644
--- a/400-SOURCECODE/AIAHTML5.Web/app/widget/TopMenu.html
+++ b/400-SOURCECODE/AIAHTML5.Web/app/widget/TopMenu.html
@@ -29,7 +29,7 @@
                 <!--<li><a href="#" ng-click="ShowListManager()">List Manager</a></li>-->
                
                 <li><a href="#" ng-click="ShowListManager()">List Manager</a></li>
-                <li><a href="#">Annotation Toolbar</a></li>
+                <li><a href="#" ng-click="ShowAnnotationWindow()">Annotation Toolbar</a></li>
                 <li><a href="#">Add to Existing Curriculum</a></li>
                 <li><a data-toggle="modal" data-target="#modal-settings" class="cursor-pointer">Settings</a></li>
                 <li role="separator" class="divider"></li>
diff --git a/400-SOURCECODE/AIAHTML5.Web/index.html b/400-SOURCECODE/AIAHTML5.Web/index.html
index 186a81f..75295e5 100644
--- a/400-SOURCECODE/AIAHTML5.Web/index.html
+++ b/400-SOURCECODE/AIAHTML5.Web/index.html
@@ -55,6 +55,24 @@
                 border-color: #1B92D0 !important;
                 color: #ffffff !important;
             }*/
+
+        .custom-tooltip-annotation {
+            background-color: #fff;
+            border: 0 none;
+            color: #000;
+            left: -52px;
+            opacity: 0.9;
+            padding: 3px 0;
+            position: absolute;
+            text-align: center;
+            top: 41px;
+            width: 120px;
+            display: none;
+            z-index: 10000;
+            border: 1px solid #000;
+            color: #000;
+            border-radius: 0;
+        }
     </style>
 
 
@@ -395,11 +413,13 @@
                             <h5>Mode</h5>
 
                             <div class="btn-group btn-group-justified" role="group" aria-label="...">
-                                <div class="btn-group" role="group">
-                                    <button type="button" class="btn btn-sm btn-success" ng-click="OnIdentifyClick()">Identify</button>
+                                <div class="btn-group" role="group" tooltip>
+                                    <div id="identify-block"  style="display: none; font-size:13px;">Identify Mode</div>
+                                    <button id="OnIdentify" type="button"  class="btn btn-sm btn-success" ng-click="OnIdentifyClick()">Identify</button>
                                 </div>
                                 <div class="btn-group" role="group">
-                                    <button type="button" class="btn btn-sm btn-success">Draw</button>
+                                    <div id="draw-block"  style="display: none; font-size: 13px;">Draw Mode</div>
+                                    <button id="DrawMode" type="button" class="btn btn-sm btn-success">Draw</button>
                                 </div>
                             </div>
 
@@ -1328,7 +1348,32 @@
 
 
 
+    <script>
+        $(function () {
+           
 
+            $("#OnIdentify").on('mouseover', function () {
+                $("#identify-block").addClass("custom-tooltip-annotation");
+                $(".custom-tooltip-annotation").css('display', 'block');
+            }).on('mouseout', function () {
+               // $("#identify-block").removeClass("custom-tooltip-annotation");
+                $(".custom-tooltip-annotation").css('display', 'none');
+                $("#identify-block").removeClass("custom-tooltip-annotation");
+            });
+
+         
+            $("#DrawMode").on('mouseover', function () {
+                $("#draw-block").addClass("custom-tooltip-annotation");
+                $(".custom-tooltip-annotation").css('display', 'block');
+          
+            }).on('mouseout', function () {
+               
+                $(".custom-tooltip-annotation").css('display', 'none');
+                $("#draw-block").removeClass("custom-tooltip-annotation");
+            });
+
+        });
+    </script>