diff --git a/src/App.css b/src/App.css
index 15adfdc..b9f06de 100644
--- a/src/App.css
+++ b/src/App.css
@@ -22,3 +22,4 @@
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
 }
+
diff --git a/src/index.css b/src/index.css
index 4f180d9..a0df80e 100644
--- a/src/index.css
+++ b/src/index.css
@@ -204,11 +204,12 @@ body {
 }
 
 /*** HeaderBar ***/
-
 .headerDiv {
     padding-bottom: 10px;
     padding-top: 20px;
-    border-bottom: 3px double #bdbdbd
+    border-bottom: 3px double #bdbdbd;
+    display: flex;
+    align-items: center;
 }
 
 .text-24 {
@@ -234,6 +235,13 @@ body {
     color: #5d5d5d;
 }
 
+.infoIcon {
+    margin-left: 10px;
+    position: relative;
+    top: 6px;
+    left: -5px;
+}
+
 /*!*** Auto Complete ***!*/
 
 .monacoWrapper {
@@ -1041,4 +1049,4 @@ img.tutorialSmallImage {
 .minedRulesComponent .identifierContainer .identifierHeader {
     width: 100%;
     margin: auto;
-}
\ No newline at end of file
+}
diff --git a/src/ui/headerBar.js b/src/ui/headerBar.js
index 64e7c4d..0dc0c6d 100644
--- a/src/ui/headerBar.js
+++ b/src/ui/headerBar.js
@@ -11,6 +11,8 @@ import {connect} from "react-redux";
 import {GoAlert} from "react-icons/go";
 import {webSocketSendMessage} from "../core/coreConstants";
 import {hashConst} from "./uiConstants";
+import {FaInfoCircle} from "react-icons/fa";
+import ReactTooltip from "react-tooltip";
 
 export class HeaderBar extends Component {
     render() {
@@ -22,6 +24,8 @@ export class HeaderBar extends Component {
                 )}
                 <div className="headerDiv">
                     {this.renderHeader()}
+                    <ReactTooltip place="top" type="dark" effect="float" />
+                    <FaInfoCircle className="infoIcon" data-tip={this.props.tooltip} />
                 </div>
             </div>
         );
@@ -126,6 +130,7 @@ function mapStateToProps(state) {
         tag: "",
         title: "",
         content: "",
+        tooltip: "",
     };
 
     switch (state.currentHash[0]) {
@@ -140,6 +145,7 @@ function mapStateToProps(state) {
             break;
         case hashConst.rules:
             props.title = "All Rules";
+            props.tooltip = "View and manage all documentation rules.";
             break;
         case hashConst.tagJsonChanged:
             props.title = "tagTable.json is changed.";
@@ -149,9 +155,11 @@ function mapStateToProps(state) {
             break;
         case hashConst.index:
             props.title = "Active Documentation";
+            props.tooltip = "View the main index of the Active Documentation.";
             break;
         case hashConst.violatedRules:
             props.title = "Violated Rules";
+            props.tooltip = "Review all rules that have been violated.";
             break;
         case hashConst.rulesForFile:
             props.content = state.openFilePath.replace(state.projectPath, "");
@@ -162,6 +170,7 @@ function mapStateToProps(state) {
             break;
         case hashConst.learnDesignRules:
             props.title = "Learn Design Rules";
+            props.tooltip="Explore and learn about design rules.";
             break;
         default:
             props.content = "Error no page is found for: " + state.currentHash[0];