diff --git a/e2e/creatingASimpleGraph.spec.ts b/e2e/creatingASimpleGraph.spec.ts
index c4be9b468..7a9bfdae1 100644
--- a/e2e/creatingASimpleGraph.spec.ts
+++ b/e2e/creatingASimpleGraph.spec.ts
@@ -59,7 +59,7 @@ test('Creating a Simple Graph', async ({ page }) => {
 
   //wait for bootstrap modal then close
   await page.waitForTimeout(500);
-  await page.locator('.parameterTable').getByRole('button', { name: 'Close' }).click();
+  await page.locator('.closeBottomWindowBtn').getByRole('button').click();
 
   await page.close();
 });
diff --git a/e2e/parameterTableAndKeyboardShortcuts.spec.ts b/e2e/parameterTableAndKeyboardShortcuts.spec.ts
index 9a1783cde..976e9d2bd 100644
--- a/e2e/parameterTableAndKeyboardShortcuts.spec.ts
+++ b/e2e/parameterTableAndKeyboardShortcuts.spec.ts
@@ -88,7 +88,7 @@ test('Parameter Tables and keyboard Shortcuts', async ({ page }) => {
   
   //close the parameter table modal
   await page.waitForTimeout(800);
-  await page.locator('.parameterTableCloseButton').click();
+  await page.locator('.closeBottomWindowBtn button').click();
 
   //open the key graph parameter table modal
   await page.locator('#openGraphConfigurationTable').click();
diff --git a/src/EagleConfig.ts b/src/EagleConfig.ts
index d37e037d3..9c5800bbf 100644
--- a/src/EagleConfig.ts
+++ b/src/EagleConfig.ts
@@ -105,9 +105,12 @@ const colors: { name: string; color: string; }[] = [
     },{
         name: 'graphWarning',
         color: '#ffa500'
+    },{
+        
+    //eagle colors
+        name: 'hoverHighlight',
+        color: '#feb609'
     }
-
-
 ]
 
 export class EagleConfig {
@@ -171,5 +174,6 @@ export class EagleConfig {
         $("#logicalGraphParent").get(0).style.setProperty("--matchingEdgeColor", EagleConfig.getColor('edgeAutoComplete'));
         $("#logicalGraphParent").get(0).style.setProperty("--nodeOutputColor", EagleConfig.getColor('nodeOutputPort'));
         $("#logicalGraphParent").get(0).style.setProperty("--nodeInputColor", EagleConfig.getColor('nodeInputPort'));
+        $("html").get(0).style.setProperty("--hoverHighlight", EagleConfig.getColor('hoverHighlight'));
     }
 }
\ No newline at end of file
diff --git a/static/assets/img/settings_white_24dp.svg b/static/assets/img/settings_white_24dp.svg
deleted file mode 100644
index 1dbcba08a..000000000
--- a/static/assets/img/settings_white_24dp.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#FFFFFF"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M19.43 12.98c.04-.32.07-.64.07-.98 0-.34-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.09-.16-.26-.25-.44-.25-.06 0-.12.01-.17.03l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.06-.02-.12-.03-.18-.03-.17 0-.34.09-.43.25l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98 0 .33.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.09.16.26.25.44.25.06 0 .12-.01.17-.03l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.06.02.12.03.18.03.17 0 .34-.09.43-.25l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zm-1.98-1.71c.04.31.05.52.05.73 0 .21-.02.43-.05.73l-.14 1.13.89.7 1.08.84-.7 1.21-1.27-.51-1.04-.42-.9.68c-.43.32-.84.56-1.25.73l-1.06.43-.16 1.13-.2 1.35h-1.4l-.19-1.35-.16-1.13-1.06-.43c-.43-.18-.83-.41-1.23-.71l-.91-.7-1.06.43-1.27.51-.7-1.21 1.08-.84.89-.7-.14-1.13c-.03-.31-.05-.54-.05-.74s.02-.43.05-.73l.14-1.13-.89-.7-1.08-.84.7-1.21 1.27.51 1.04.42.9-.68c.43-.32.84-.56 1.25-.73l1.06-.43.16-1.13.2-1.35h1.39l.19 1.35.16 1.13 1.06.43c.43.18.83.41 1.23.71l.91.7 1.06-.43 1.27-.51.7 1.21-1.07.85-.89.7.14 1.13zM12 8c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 6c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"/></svg>
\ No newline at end of file
diff --git a/static/base.css b/static/base.css
index a1bc2c7cd..89cebd98b 100644
--- a/static/base.css
+++ b/static/base.css
@@ -1,5 +1,6 @@
 html {
-    height:100%
+    height:100%;
+    --hoverHighlight:red;
 }
 
 body {
@@ -71,6 +72,17 @@ body {
     margin:.3rem 0;
 }
 
+.navbar #settings{
+    width: 40px;
+    position: relative;
+}
+
+.navbar #settings i{
+    position: absolute;
+    font-size: 20px;
+    top: 10px;
+}
+
 #checkGraphWarnings span{
     top: -3px;
 }
@@ -437,12 +449,6 @@ color: #00bb00;}
     box-shadow: none;
 }
 
-#inspector .headerButtons button:hover,.inspectorTitleBtns button:hover, #inspector i.clickable:hover {
-    color: #b4d4ff;
-    background-color: transparent;
-    cursor:pointer;
-}
-
 #inspector .headerButtons button.btn:focus, .inspectorTitleBtns button:focus {
     box-shadow: none;
     background-color:transparent;
@@ -632,7 +638,7 @@ color: #00bb00;}
     height: 48px;
     top: 0px;
     left: -48px;
-    background-color: #002e5f;
+    background-color: #002e5f !important;
     z-index: 2;
     text-align: center;
     line-height: 48px;
@@ -640,6 +646,7 @@ color: #00bb00;}
     border-top-left-radius: 0.5rem;
     cursor: pointer;
     color:white;
+    user-select: none;
 }
 
 .dropDropDownParent{
@@ -1321,13 +1328,13 @@ select.form-control{
 #paletteList palette-component button, #paletteList palette-component span {
     height: 100%;
     width: 100%;
+    color:white;
 }
 
 #paletteList palette-component i {
     margin-left:50%;
     transform: translateX(-50%);
     pointer-events: none;
-    color:white;
     font-size: 24px;
 }
 
@@ -1560,7 +1567,7 @@ select.form-control{
     height: 48px;
     top: 0px;
     right: -48px;
-    background-color: #002e5f;
+    background-color: #002e5f !important;
     color:white;
     z-index: 2;
     text-align: center;
@@ -1568,6 +1575,7 @@ select.form-control{
     border-bottom-right-radius: 0.5rem;
     border-top-right-radius: 0.5rem;
     cursor: pointer;
+    user-select: none;
 }
 
 .leftWindow .leftWindowHandle span i {
@@ -1635,16 +1643,6 @@ select.form-control{
     background: rgb(211, 211, 211);
 }
 
-.navbar-center .navbar-btn:hover{
-    color: #002349 !important;
-    background: white;
-}
-
-.nodeSettingsBtn{
-    text-align: right;
-    color: #0059a5;
-}
-
 #repositoryList ul.repositories {
     list-style-type: none;
     padding: 0px;
@@ -2744,6 +2742,19 @@ palette-component input.form-control.selected {
 
 /* re-usable classes for various things */
 
+.iconHoverEffect, .iconHoverEffect:focus, .iconHoverEffect:active, .iconHoverEffect:hover{
+    background: transparent;
+    border:0px;
+    box-shadow: none !important;
+}
+
+.iconHoverEffect:hover {
+    color: var(--hoverHighlight) !important;
+    cursor: pointer;
+    border-color: var(--hoverHighlight) !important;
+    text-shadow: -1px -1px 0 #4b4b4b, 0 -1px 0 #4b4b4b, 1px -1px 0 #4b4b4b, 1px 0 0 #4b4b4b, 1px 1px 0 #4b4b4b, 0 1px 0 #4b4b4b, -1px 1px 0 #4b4b4b, -1px 0 0 #4b4b4b;
+}
+
 .linearTransition250{
     transition: ease-in-out 250ms !important; /*this requires an important tag to over ride existing transition effects for a few moments */
 }
\ No newline at end of file
diff --git a/static/components/palette-component.html b/static/components/palette-component.html
index 2844f901a..ae4c321f6 100644
--- a/static/components/palette-component.html
+++ b/static/components/palette-component.html
@@ -3,7 +3,7 @@
         <div class="input-group mb-1 rightClick_paletteComponent"  data-bind="attr: {id: 'palette_'  + $parentContext.$parentContext.$index() + '_' + $data.getPaletteComponentId()}, click: $root.paletteComponentClick, eagleTooltip: {content: $data.getHelpHTML(),size: '500px'}, eagleRightClick: {data:$data,type:'rightClick_paletteComponent'}">
             <div class="input-group-prepend">
                 <button class="nodeBtn" type="button" data-bind="click: function(){$root.addNodeToLogicalGraph($data, '', Eagle.AddNodeMode.Default, null)}, clickBubble: false, attr: {id: 'addPaletteNode' + $data.getNoWhiteSpaceName()}">
-                    <span class="input-group-text" data-bind="style: {'background-color': $data.color}">
+                    <span class="input-group-text iconHoverEffect" data-bind="style: {'background-color': $data.color}">
                         <i data-bind="class: $data.getIcon()"></i>
                     </span>
                 </button>
diff --git a/static/components/repository-file.html b/static/components/repository-file.html
index f223126dc..724d5c97e 100644
--- a/static/components/repository-file.html
+++ b/static/components/repository-file.html
@@ -16,10 +16,10 @@
         </div>
         <div class="col col-2 repo-actions">
             <!-- ko if: getIconUrl() === "device_hub" -->
-                <i class="material-icons md-18" data-bs-placement="left" style="cursor:pointer;top:3px;" data-bind="click: $root.insertRemoteFile, eagleTooltip: 'Insert'">add_box</i>
+                <i class="material-icons md-18 iconHoverEffect" data-bs-placement="left" style="cursor:pointer;top:3px;" data-bind="click: $root.insertRemoteFile, eagleTooltip: 'Insert'">add_box</i>
             <!-- /ko -->
             <!-- ko if: type === Eagle.FileType.Daliuge || type === Eagle.FileType.Graph || type === Eagle.FileType.Palette -->
-                <i class="material-icons md-18" data-bs-placement="left" style="cursor:pointer;top:3px;" data-bind="click: $root.deleteRemoteFile, eagleTooltip: 'Delete'">delete</i>
+                <i class="material-icons md-18 iconHoverEffect" data-bs-placement="left" style="cursor:pointer;top:3px;" data-bind="click: $root.deleteRemoteFile, eagleTooltip: 'Delete'">delete</i>
             <!-- /ko -->
         </div>
     </div>
diff --git a/static/components/repository.html b/static/components/repository.html
index e3fe9587e..1b96fd837 100644
--- a/static/components/repository.html
+++ b/static/components/repository.html
@@ -6,8 +6,8 @@
             </div>
             <!-- /ko -->
             <!-- ko ifnot: isFetching -->
-            <i class="material-icons md-18 interactive" data-bind="click: refresh,visible: folders().length == 0 && files().length==0 && fetched">cloud_off</i>
-            <i class="material-icons md-18 interactive" data-bs-placement="bottom" data-bind="click: refresh, visible: (folders().length != 0 || files().length != 0)&& fetched, eagleTooltip: 'Refresh'">cloud_done</i>
+            <i class="material-icons md-18 interactive iconHoverEffect" data-bind="click: refresh,visible: folders().length == 0 && files().length==0 && fetched">cloud_off</i>
+            <i class="material-icons md-18 interactive iconHoverEffect" data-bs-placement="bottom" data-bind="click: refresh, visible: (folders().length != 0 || files().length != 0)&& fetched, eagleTooltip: 'Refresh'">cloud_done</i>
 
             <!-- ko ifnot: fetched -->
             <!-- ko if: service === Repository.Service.GitHub -->
@@ -26,7 +26,7 @@
         </div>
         <!-- ko ifnot: isBuiltIn -->
         <div class="col col-1">
-            <i class="material-icons md-18 interactive" data-bind="click: remove, attr: {id: htmlId() + '-eject'}">eject</i>
+            <i class="material-icons md-18 interactive iconHoverEffect" data-bind="click: remove, attr: {id: htmlId() + '-eject'}">eject</i>
         </div>
         <!-- /ko -->
         <!-- ko if: expanded -->
diff --git a/static/tables.css b/static/tables.css
index 6898d38f6..c86492dc7 100644
--- a/static/tables.css
+++ b/static/tables.css
@@ -345,6 +345,18 @@ td:first-child input {
     padding:11px;
 }
 
+.closeBottomWindowBtn {
+    position: absolute;
+    top: 27px;
+    transform:translateY(-50%)
+}
+
+.closeBottomWindowBtn button, .closeBottomWindowBtn button:focus, .closeBottomWindowBtn button:active, .closeBottomWindowBtn button:hover{
+    background: transparent;
+    border:0px;
+    box-shadow: none !important;
+}
+
 .eagleTableDisplay  input, #editFieldModal  .dropdown input{
     border: none;
 }
@@ -452,7 +464,7 @@ td:first-child input {
     overflow-y: auto;
 }
 
-.eagleTableDisplay  .typesInput{
+.eagleTableDisplay .typesInput{
     padding: 0px;
     height: 35px;
     width: 100%;
@@ -462,7 +474,7 @@ td:first-child input {
     border-right: solid 1px #bbbbbb;
 }
 
-.eagleTableDisplay  .input-group{
+.eagleTableDisplay .input-group{
     border:black solid 1px;
     border-radius: 2px;
     flex-wrap: unset;
@@ -471,6 +483,10 @@ td:first-child input {
     padding-left:2px;
 }
 
+.eagleTableDisplay .input-group span{
+    margin: -2px;
+}
+
 .eagleTableDisplay  td button, #editFieldModal .dropdown-menu button{
     border: none;
     background-color: transparent;
@@ -482,11 +498,11 @@ td:first-child input {
     border-radius: 10px;
 }
 
-.eagleTableDisplay  td button:disabled{
+.eagleTableDisplay td button:disabled{
     color: rgb(113 113 113);
 }
 
-.eagleTableDisplay  td button.parameterTableDescriptionBtn, .eagleTableDisplay  td button.parameterTableCommentBtn {
+.eagleTableDisplay td button.parameterTableDescriptionBtn, .eagleTableDisplay td button.parameterTableCommentBtn {
     position: absolute;
     right: 4px;
     top: 4px;
@@ -497,7 +513,7 @@ td:first-child input {
     font-size: 12px;
 }
 
-.eagleTableDisplay  td button.parameterTableDescriptionBtn::before, .eagleTableDisplay  td button.parameterTableCommentBtn::before {
+.eagleTableDisplay td button.parameterTableDescriptionBtn::before, .eagleTableDisplay td button.parameterTableCommentBtn::before {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
diff --git a/templates/Errors.html b/templates/Errors.html
index e606f671f..735da7235 100644
--- a/templates/Errors.html
+++ b/templates/Errors.html
@@ -5,10 +5,9 @@ <h5 class="bottomWindowHeader">Graph Issues</h5>
     </div>
     
     <div class="header-center">
-        <button id= 'errorModalFixAll' class="btn btn-primary" data-bind="click: Errors.fixAll, eagleTooltip: Errors.getNumFixableIssues() + ' fix(es) available'">Fix All
+        <button id= 'errorModalFixAll' class="btn btn-primary iconHoverEffect" data-bind="click: Errors.fixAll, eagleTooltip: Errors.getNumFixableIssues() + ' fix(es) available'">Fix All
             <span data-bind="text: KeyboardShortcut.idToText('fix_all', true)"></span>
         </button>
-        <button type="button" class="btn btn-primary" data-bind="click:  function(){SideWindow.toggleShown('bottom')}, clickBubble:false"><span>Close</span></button>
     </div> 
     <div class="issuesBody">
         <div class='accordion' id='issuesDisplayAccordion'>
diff --git a/templates/base.html b/templates/base.html
index b11b6ef9c..4360311ad 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -57,7 +57,7 @@
         <div class="container-fluid" id="graphArea" data-bind="event: { dragover: SideWindow.sideWindowAdjust}">
             <!-- ko if: Setting.findValue(Setting.ALLOW_GRAPH_EDITING) || Setting.findValue(Setting.ALLOW_PALETTE_EDITING) -->
                 <div class="leftWindow" data-bind="style: { width: leftWindow().size(), left: Setting.findValue(Setting.LEFT_WINDOW_VISIBLE) ? 0 : -leftWindow().size(),'visibility':eagle.getEagleIsReady(), bottom: Utils.getBottomWindowHeight()+'vh'}">
-                    <div class="leftWindowHandle" data-bind="click: function(){SideWindow.toggleShown('left')}, eagleTooltip: 'Change Node Subject ' +KeyboardShortcut.idToText('toggle_left_window', true)">
+                    <div class="leftWindowHandle iconHoverEffect" data-bind="click: function(){SideWindow.toggleShown('left')}, eagleTooltip: 'Change Node Subject ' +KeyboardShortcut.idToText('toggle_left_window', true)">
                         <span style="display: none" data-bind="visible: Setting.findValue(Setting.LEFT_WINDOW_VISIBLE)">
                             <i class="material-icons">arrow_back</i>
                         </span>
@@ -148,19 +148,19 @@
 
             <div class="rightWindow" data-bind="style: { 'visibility':eagle.getEagleIsReady(), width: rightWindow().size(), right: Setting.findValue(Setting.RIGHT_WINDOW_VISIBLE) ? 0 : -rightWindow().size(), bottom: Utils.getBottomWindowHeight()+'vh'}">
                <div class="btn-group" id="rightWindowTabs" role="group" aria-label="RightWindowModeSelect">
-                        <button class="btn btn-secondary navbar-btn" id="rightWindowModeRepositories" type="button" data-bind="click: function(){changeRightWindowMode(Eagle.RightWindowMode.Repository)}, css: {active: Setting.findValue(Setting.RIGHT_WINDOW_MODE) === Eagle.RightWindowMode.Repository}">
+                        <button class="btn btn-secondary navbar-btn iconHoverEffect" id="rightWindowModeRepositories" type="button" data-bind="click: function(){changeRightWindowMode(Eagle.RightWindowMode.Repository)}, css: {active: Setting.findValue(Setting.RIGHT_WINDOW_MODE) === Eagle.RightWindowMode.Repository}">
                             Repositories
                         </button>
-                        <button class="btn btn-secondary navbar-btn" id="rightWindowModeHierarchy" type="button" data-bind="click: function(){changeRightWindowMode(Eagle.RightWindowMode.Hierarchy)}, css: {active: Setting.findValue(Setting.RIGHT_WINDOW_MODE) === Eagle.RightWindowMode.Hierarchy}">
+                        <button class="btn btn-secondary navbar-btn iconHoverEffect" id="rightWindowModeHierarchy" type="button" data-bind="click: function(){changeRightWindowMode(Eagle.RightWindowMode.Hierarchy)}, css: {active: Setting.findValue(Setting.RIGHT_WINDOW_MODE) === Eagle.RightWindowMode.Hierarchy}">
                             Hierarchy
                         </button>
                         <!-- ko ifnot: Setting.findValue(Setting.USER_TRANSLATOR_MODE) === Setting.TranslatorMode.Minimal -->
-                            <button class="btn btn-secondary navbar-btn" id="rightWindowModeTranslation" type="button" data-bind="click: function(){changeRightWindowMode(Eagle.RightWindowMode.TranslationMenu)}, css: {active: Setting.findValue(Setting.RIGHT_WINDOW_MODE) === Eagle.RightWindowMode.TranslationMenu}">
+                            <button class="btn btn-secondary navbar-btn iconHoverEffect" id="rightWindowModeTranslation" type="button" data-bind="click: function(){changeRightWindowMode(Eagle.RightWindowMode.TranslationMenu)}, css: {active: Setting.findValue(Setting.RIGHT_WINDOW_MODE) === Eagle.RightWindowMode.TranslationMenu}">
                                 Translation
                             </button>
                         <!-- /ko -->
                     </div>
-                <div class="rightWindowHandle" data-bind="click: function(){SideWindow.toggleShown('right')}, eagleTooltip: 'Change Node Subject ' + KeyboardShortcut.idToText('toggle_right_window', true)">
+                <div class="rightWindowHandle iconHoverEffect" data-bind="click: function(){SideWindow.toggleShown('right')}, eagleTooltip: 'Change Node Subject ' + KeyboardShortcut.idToText('toggle_right_window', true)">
                     <span data-bind="visible: Setting.findValue(Setting.RIGHT_WINDOW_VISIBLE)">
                         <i class="material-icons">arrow_forward</i>
                     </span>
@@ -190,20 +190,23 @@
                     <div class="dragHandle" draggable="true" data-bind="event: { dragstart: SideWindow.bottomWindowAdjustStart, dragend: SideWindow.sideWindowAdjustEnd }"></div>
                     <div class="tabs">
                         <div class="wrapper">
-                            <button id="bottomTabParamsTableSwitcher" type="button" class="btn btn-secondary btn-sm" data-bind="css:{activeTab:Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.NodeParameterTable},click: function(){ParameterTable.openTable(Eagle.BottomWindowMode.NodeParameterTable, ParameterTable.SelectType.Normal);}, clickBubble: false, eagleTooltip: 'Open Node Parameter Table ' + KeyboardShortcut.idToText('open_parameter_table', true)" data-bs-placement="left">
+                            <button id="bottomTabParamsTableSwitcher" type="button" class="btn btn-secondary btn-sm iconHoverEffect" data-bind="css:{activeTab:Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.NodeParameterTable},click: function(){ParameterTable.openTable(Eagle.BottomWindowMode.NodeParameterTable, ParameterTable.SelectType.Normal);}, clickBubble: false, eagleTooltip: 'Open Node Parameter Table ' + KeyboardShortcut.idToText('open_parameter_table', true)" data-bs-placement="left">
                                 <i class="material-icons md-20 clickable">table_chart</i>
                             </button>
-                            <button id="bottomTabKeyParamsSwitcher" class="btn btn-secondary btn-sm" type="button" data-bs-placement="bottom" data-bind="css:{activeTab:Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ConfigParameterTable}, click: function(){ParameterTable.openTable(Eagle.BottomWindowMode.ConfigParameterTable, ParameterTable.SelectType.Normal)}, eagleTooltip: `Open Graph Config Parameter Table ` + KeyboardShortcut.idToText('open_graph_attributes_configuration_table', true)">
+                            <button id="bottomTabKeyParamsSwitcher" class="btn btn-secondary btn-sm iconHoverEffect" type="button" data-bs-placement="bottom" data-bind="css:{activeTab:Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.ConfigParameterTable}, click: function(){ParameterTable.openTable(Eagle.BottomWindowMode.ConfigParameterTable, ParameterTable.SelectType.Normal)}, eagleTooltip: `Open Graph Config Parameter Table ` + KeyboardShortcut.idToText('open_graph_attributes_configuration_table', true)">
                                 <i class="md-20 icon-key_attribute_table clickable"></i>
                             </button>
-                            <button id="bottomTabGraphConfigurationsSwitcher" class="btn btn-secondary btn-sm" type="button" data-bs-placement="bottom" data-bind="css:{activeTab:Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigsTable}, click: function(){GraphConfigurationsTable.openTable()}, eagleTooltip: `Display all Graph Configurations ` + KeyboardShortcut.idToText('open_graph_attributes_configuration_table', true)">
+                            <button id="bottomTabGraphConfigurationsSwitcher" class="btn btn-secondary btn-sm iconHoverEffect" type="button" data-bs-placement="bottom" data-bind="css:{activeTab:Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphConfigsTable}, click: function(){GraphConfigurationsTable.openTable()}, eagleTooltip: `Display all Graph Configurations ` + KeyboardShortcut.idToText('open_graph_attributes_configuration_table', true)">
                                 <i class="md-20 icon-config_table clickable"></i>
                             </button>
-                            <button id="bottomTabGraphIssuesSwitcher" class="btn btn-secondary btn-sm" type="button" data-bs-placement="bottom" data-bind="css:{activeTab:Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphErrors}, click: function(){Setting.find(Setting.BOTTOM_WINDOW_MODE).setValue(Eagle.BottomWindowMode.GraphErrors)}, eagleTooltip: `Display Graph Issues`">
+                            <button id="bottomTabGraphIssuesSwitcher" class="btn btn-secondary btn-sm iconHoverEffect" type="button" data-bs-placement="bottom" data-bind="css:{activeTab:Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.GraphErrors}, click: function(){Setting.find(Setting.BOTTOM_WINDOW_MODE).setValue(Eagle.BottomWindowMode.GraphErrors)}, eagleTooltip: `Display Graph Issues`">
                                 <i class="md-20 icon-question_mark clickable"></i>
                             </button>
                         </div>
                     </div>
+                    <div class='closeBottomWindowBtn'>
+                        <button type="button" class="btn btn-primary iconHoverEffect" data-bind="click: function(){SideWindow.toggleShown('bottom')}, clickBubble:false"><i class="md-20 icon-cross clickable"></i></button>
+                    </div>
                     <div class="content">
                         <!-- ko if: $root.getEagleIsReady() -->
                             <!-- ko if: Setting.findValue(Setting.BOTTOM_WINDOW_MODE) === Eagle.BottomWindowMode.NodeParameterTable -->
diff --git a/templates/config_parameter_table.html b/templates/config_parameter_table.html
index 6a300363a..a2a706355 100644
--- a/templates/config_parameter_table.html
+++ b/templates/config_parameter_table.html
@@ -6,11 +6,10 @@ <h5 class="bottomWindowHeader">
         </h5>
 
         <div class="header-center">
-            <button type="button" class="btn btn-primary" data-bind="click: function(){SideWindow.toggleShown('bottom')}, clickBubble:false"><span class="parameterTableCloseButton">Close</span></button>
         </div> 
 
         <div class="dropdown parameterTableVisibilityContainer">
-            <a class="dropdown-toggle icon-table_column_visibility componentTableVisibilityBtn" data-bs-toggle="dropdown"></a>
+            <a class="dropdown-toggle icon-table_column_visibility componentTableVisibilityBtn iconHoverEffect" data-bs-toggle="dropdown"></a>
             <div class="dropdown-menu dropdown-menu-right">
                 <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleKeyAttribute()}"><span>Key Parameter</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().keyAttribute()"></div>
                 <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleFieldId()}"><span>Field ID</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().fieldId()"></div>
@@ -147,11 +146,11 @@ <h5 class="bottomWindowHeader">
                                         <!-- ko if: $data.getGraphConfigField() -->
                                         <td class='columnCell column_Comment' onmouseenter="ParameterTable.showEditComment(this)" onmouseleave="ParameterTable.hideEditComment(this)" data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('comment', $data) }, eagleTooltip: $data.getGraphConfigField().comment">
                                             <input class="tableParameter tableFieldCommentInput" type="string" data-bind="value: $data.getGraphConfigField().comment, disabled: ParameterTable.getNodeLockedState($data), valueUpdate: ['afterkeydown', 'input'], click: function(event, data){ParameterTable.select($data.getGraphConfigField().comment, 'comment', $data, $index())}, event:{keyup: function(event, data){ParameterTable.select($data.getGraphConfigField().comment, 'comment', $data, $index())}}">
-                                            <button class="parameterTableCommentBtn icon-pencil" data-bind="click:function(data,event){ParameterTable.requestEditCommentInModal($data)}"></button>
+                                            <button class="parameterTableCommentBtn icon-pencil iconHoverEffect" data-bind="click:function(data,event){ParameterTable.requestEditCommentInModal($data)}"></button>
                                         </td>
                                         <td class='columnCell column_Remove'>
                                             <button data-bind="click: function(){ParameterTable.requestRemoveField($data)}, disabled: !Setting.findValue(Setting.ALLOW_MODIFY_GRAPH_CONFIG), eagleTooltip:'Remove Field from Graph Config', clickBubble:false">
-                                                <i class="material-icons">remove</i>
+                                                <i class="material-icons iconHoverEffect">remove</i>
                                             </button>
                                         </td>
                                         <!-- /ko -->
diff --git a/templates/graph_configurations_table.html b/templates/graph_configurations_table.html
index c3f8e625b..11218207a 100644
--- a/templates/graph_configurations_table.html
+++ b/templates/graph_configurations_table.html
@@ -13,8 +13,7 @@ <h5 class="bottomWindowHeader">
         </div>
 
         <div class="header-center">
-            <button type="button" class="btn btn-primary" id="graphConfigurationsTableAddConfigButton" data-bind="click: newConfig, clickBubble:false" ><span id="graphConfigurationsTableAddConfig">Add Config</span></button>
-            <button type="button" class="btn btn-primary" data-bind="click:  function(){SideWindow.toggleShown('bottom')}, clickBubble:false"><span>Close</span></button>
+            <button type="button" class="btn btn-primary iconHoverEffect" id="graphConfigurationsTableAddConfigButton" data-bind="click: newConfig, clickBubble:false" ><span id="graphConfigurationsTableAddConfig">Add Config</span></button>
         </div> 
 
     </div>
@@ -58,19 +57,19 @@ <h5 class="bottomWindowHeader">
                                 <input class="tableParameter" type="string" data-bind="value: $data.numFields(), eagleTooltip: 'number of fields added to the graph configuration'">
                             </td>
                             <td class='columnCell column-active'>
-                                <button type="button" data-bind="click: function(){$root.logicalGraph().setActiveGraphConfig($data.getId());}">
+                                <button class="iconHoverEffect" type="button" data-bind="click: function(){$root.logicalGraph().setActiveGraphConfig($data.getId());}">
                                     <i class="material-icons md-18" data-bind="visible: $data.id() === $root.logicalGraph().activeGraphConfigId()">radio_button_checked</i>
                                     <i class="material-icons md-18" data-bind="hidden:  $data.id() === $root.logicalGraph().activeGraphConfigId()">radio_button_unchecked</i>
                                 </button>
                             </td>
                             <td class='columnCell column-actions'>
-                                <button class="btmWindowDuplicateBtn" data-bind="click: function(){$root.logicalGraph().duplicateGraphConfig($data);}, eagleTooltip:'Duplicate'">
+                                <button class="btmWindowDuplicateBtn iconHoverEffect" data-bind="click: function(){$root.logicalGraph().duplicateGraphConfig($data);}, eagleTooltip:'Duplicate'">
                                     <i class="material-icons">content_copy</i>
                                 </button>
-                                <button data-bind="click: function(){ParameterTable.requestEditConfig($data);}, eagleTooltip:'Edit', clickBubble:false">
+                                <button class="iconHoverEffect" data-bind="click: function(){ParameterTable.requestEditConfig($data);}, eagleTooltip:'Edit', clickBubble:false">
                                     <i class="material-icons">edit</i>
                                 </button>
-                                <button data-bind="click: function(){$root.logicalGraph().removeGraphConfig($data)}, eagleTooltip:'Remove Config from Graph', clickBubble:false">
+                                <button class="iconHoverEffect" data-bind="click: function(){$root.logicalGraph().removeGraphConfig($data)}, eagleTooltip:'Remove Config from Graph', clickBubble:false">
                                     <i class="material-icons">delete</i>
                                 </button>
                             </td>
diff --git a/templates/inspector.html b/templates/inspector.html
index 9eb9115be..d379fe97d 100644
--- a/templates/inspector.html
+++ b/templates/inspector.html
@@ -13,45 +13,45 @@
                                 <input data-bind="value:$data.name, eagleTooltip: $data.getName()"></input>
                             </div>
                             <div class="col-1 col">
-                                <i class="material-icons inspectorCloseBtn" data-bind="click: Setting.find(Setting.OBJECT_INSPECTOR_COLLAPSED_STATE).toggle, eagleTooltip: 'Collapse the Inspector'">close</i>
+                                <i class="material-icons iconHoverEffect" data-bind="click: Setting.find(Setting.OBJECT_INSPECTOR_COLLAPSED_STATE).toggle, eagleTooltip: 'Collapse the Inspector'">close</i>
                             </div>
-                        </div>
+                        </div> 
                         
                         <div class="headerButtons inspectorHeaderButtons" id="objectInspectorHeaderIconRow">
                             <div class="row">
                                 <div class="col-6 col">
                                     <i class="material-icons interactive" data-bs-placement="right" data-bind="eagleTooltip: $data.getGitHTML()" data-bs-toggle="tooltip" data-html="true">link</i>
                                     <i class="material-icons interactive" data-bs-placement="right" data-bind="eagleTooltip: 'Id: '+$data.getId()" data-bs-toggle="tooltip" data-html="true">fingerprint</i>
-                                    <i class="material-icons interactive clickable" onclick=eagle.editNodeDescription() data-bs-placement="right" data-bind="eagleTooltip: $data.getDescriptionHTML()" data-bs-toggle="tooltip" data-html="true">library_books</i>
+                                    <i class="material-icons interactive clickable iconHoverEffect" onclick=eagle.editNodeDescription() data-bs-placement="right" data-bind="eagleTooltip: $data.getDescriptionHTML()" data-bs-toggle="tooltip" data-html="true">library_books</i>
                                 
                                     <!-- ko if: $data.getAllErrorsWarnings().errors.length > 0 || $data.getAllErrorsWarnings().warnings.length > 0 -->
-                                        <i class="material-icons interactive clickable" onclick=eagle.showGraphErrors() data-bs-placement="right" data-bind="eagleTooltip: $data.getNodeIssuesHtml(), style:{'color': $data.getIconColor()}" data-bs-toggle="tooltip" data-html="true">error</i>
+                                        <i class="material-icons interactive clickable iconHoverEffect" onclick=eagle.showGraphErrors() data-bs-placement="right" data-bind="eagleTooltip: $data.getNodeIssuesHtml(), style:{'color': $data.getIconColor()}" data-bs-toggle="tooltip" data-html="true">error</i>
                                     <!-- /ko -->
                                 </div>
                                 <div class="col-6 col text-right">
                                     <!-- ko if: Eagle.selectedLocation() == Eagle.FileType.Graph || Setting.findValue(Setting.ALLOW_PALETTE_EDITING) -->
                                         <button type="button" id="openNodeParamsTable" class="btn btn-secondary btn-sm" data-bind="click: function(){ParameterTable.openTable(Eagle.BottomWindowMode.NodeParameterTable, ParameterTable.SelectType.Normal);}, clickBubble: false, eagleTooltip: 'Open Node Parameter Table ' + KeyboardShortcut.idToText('open_parameter_table', true)" data-bs-placement="left">
-                                            <i class="material-icons md-20 clickable">table_chart</i>
+                                            <i class="material-icons md-20 clickable iconHoverEffect">table_chart</i>
                                         </button>
                                     <!-- /ko -->
                                     <!-- ko if: Eagle.selectedLocation() == Eagle.FileType.Graph && $data.isDocker() -->
                                         <button type="button" id="openNodeParamsTable" class="btn btn-secondary btn-sm" data-bind="click: $root.fetchDockerHTML, clickBubble: false, eagleTooltip: 'Browse images on docker hub'" data-bs-placement="left">
-                                            <i class="icon-docker clickable"></i>
+                                            <i class="icon-docker clickable iconHoverEffect"></i>
                                         </button>
                                     <!-- /ko -->
                                     <!-- ko if: Eagle.selectedLocation() == Eagle.FileType.Graph || Setting.findValue(Setting.ALLOW_PALETTE_EDITING) -->
                                         <button type="button" id="duplicateSelectedNode" class="btn btn-secondary btn-sm" data-bind="click: function(){$root.duplicateSelection('normal')}, clickBubble: false, eagleTooltip: 'Duplicate Selection ' + KeyboardShortcut.idToText('duplicate_selection', true)" data-bs-placement="left">
-                                            <i class="material-icons md-20 clickable">content_copy</i>
+                                            <i class="material-icons md-20 clickable iconHoverEffect">content_copy</i>
                                         </button>
                                     <!-- /ko -->
                                     <!-- ko if: Setting.findValue(Setting.ALLOW_PALETTE_EDITING) -->
                                         <button type="button" id="addSelectedNodeToPalette" class="btn btn-secondary btn-sm" data-bind="click: function(){$root.addSelectedNodesToPalette('normal')}, clickBubble: false, eagleTooltip: 'Add Selected Node To Palette'" data-bs-placement="left">
-                                            <i class="material-icons md-20 clickable">library_add</i>
+                                            <i class="material-icons md-20 clickable iconHoverEffect">library_add</i>
                                         </button>
                                     <!-- /ko -->
                                     <!-- ko if: Eagle.selectedLocation() == Eagle.FileType.Graph || Setting.findValue(Setting.ALLOW_PALETTE_EDITING) -->
                                         <button type="button" id="deleteSelectedNode" class="btn btn-secondary btn-sm" data-bind="click: function(){$root.deleteSelection(false,false,false);}, clickBubble: false, eagleTooltip: 'Delete Selected Node ' + KeyboardShortcut.idToText('delete_selection', true)" data-bs-placement="left">
-                                            <i class="material-icons md-20 clickable">delete</i>
+                                            <i class="material-icons md-20 clickable iconHoverEffect">delete</i>
                                         </button>
                                     <!-- /ko -->
                                 </div>
@@ -104,7 +104,7 @@ <h5>Category:</h5>
                                 <h4>Edge Attributes</h4>
                             </div>
                             <div class="col-1 col">
-                                <i class="material-icons" data-bind="click: Setting.find(Setting.OBJECT_INSPECTOR_COLLAPSED_STATE).toggle, eagleTooltip: 'Collapse the Inspector'">close</i>
+                                <i class="material-icons iconHoverEffect" data-bind="click: Setting.find(Setting.OBJECT_INSPECTOR_COLLAPSED_STATE).toggle, eagleTooltip: 'Collapse the Inspector'">close</i>
                             </div>
                         </div>
                         
@@ -112,18 +112,18 @@ <h4>Edge Attributes</h4>
                             <div class="row">
                                 <div class="col-4 col">
                                     <!-- ko if: $data.getErrorsWarnings().errors.length > 0 || $data.getErrorsWarnings().warnings.length > 0 -->
-                                        <i class="material-icons interactive clickable" onclick=eagle.showGraphErrors() data-bs-placement="right" data-bind="eagleTooltip: $data.getNodeIssuesHtml(), style:{'color': $data.getIconColor()}" data-bs-toggle="tooltip" data-html="true">error</i>
+                                        <i class="material-icons interactive clickable iconHoverEffect" onclick=eagle.showGraphErrors() data-bs-placement="right" data-bind="eagleTooltip: $data.getNodeIssuesHtml(), style:{'color': $data.getIconColor()}" data-bs-toggle="tooltip" data-html="true">error</i>
                                     <!-- /ko -->
                                 </div>
                                 <div class="col-8 col text-right">
                                     <!-- ko if: Setting.findValue(Setting.ALLOW_EDGE_EDITING) -->
                                         <button type="button" class="btn btn-secondary btn-sm" data-bind="click: $root.editSelectedEdge, eagleTooltip: 'Edit Selected Edge ' + KeyboardShortcut.idToText('modify_selected_edge', true)">
-                                            <i class="material-icons md-24 clickable">edit</i>
+                                            <i class="material-icons md-24 clickable iconHoverEffect">edit</i>
                                         </button>
                                     <!-- /ko -->
                                     <!-- ko if: Setting.findValue(Setting.ALLOW_GRAPH_EDITING) -->
                                         <button  type="button" class="btn btn-secondary btn-sm" data-bind="click: function(){$root.deleteSelection(false,false,false);}, eagleTooltip: 'Delete Selected Edge ' + KeyboardShortcut.idToText('delete_selection', true)">
-                                            <i class="material-icons md-24 clickable">delete</i>
+                                            <i class="material-icons md-24 clickable iconHoverEffect">delete</i>
                                         </button>
                                     <!-- /ko -->
                                 </div>
@@ -168,7 +168,7 @@ <h5>Dest Port:</h5>
                                     <h5>Loop Aware</h5>
                                 </div>
                                 <div class="col-8 col contentObjectValue">
-                                    <button class="btn btn-secondary btn-sm radioBtn" id="objectInspectorToggleLoopAware" type="button" data-bind="click: function(){$root.selectedEdge().toggleLoopAware();},disabled:!Setting.findValue(Setting.ALLOW_GRAPH_EDITING)">
+                                    <button class="btn btn-secondary btn-sm radioBtn iconHoverEffect" id="objectInspectorToggleLoopAware" type="button" data-bind="click: function(){$root.selectedEdge().toggleLoopAware();},disabled:!Setting.findValue(Setting.ALLOW_GRAPH_EDITING)">
                                         <i class="material-icons md-18" data-bind="visible: $root.selectedEdge().isLoopAware()">radio_button_checked</i>
                                         <i class="material-icons md-18" data-bind="hidden: $root.selectedEdge().isLoopAware()">radio_button_unchecked</i>
                                     </button>
@@ -179,7 +179,7 @@ <h5>Loop Aware</h5>
                                     <h5>Closes Loop</h5>
                                 </div>
                                 <div class="col-8 col contentObjectValue">
-                                    <button class="btn btn-secondary btn-sm radioBtn" id="objectInspectorToggleClosesLoop" type="button" data-bind="click: function(){$root.selectedEdge().toggleClosesLoop();},disabled:!Setting.findValue(Setting.ALLOW_GRAPH_EDITING)">
+                                    <button class="btn btn-secondary btn-sm radioBtn iconHoverEffect" id="objectInspectorToggleClosesLoop" type="button" data-bind="click: function(){$root.selectedEdge().toggleClosesLoop();},disabled:!Setting.findValue(Setting.ALLOW_GRAPH_EDITING)">
                                         <i class="material-icons md-18" data-bind="visible: $root.selectedEdge().isClosesLoop()">radio_button_checked</i>
                                         <i class="material-icons md-18" data-bind="hidden: $root.selectedEdge().isClosesLoop()">radio_button_unchecked</i>
                                     </button>
@@ -200,7 +200,7 @@ <h5>Closes Loop</h5>
                                 <h4>Multi Selection</h4>
                             </div>
                             <div class="col-1 col">
-                                <i class="material-icons" data-bind="click: Setting.find(Setting.OBJECT_INSPECTOR_COLLAPSED_STATE).toggle, eagleTooltip: 'Collapse the Inspector'">close</i>
+                                <i class="material-icons iconHoverEffect" data-bind="click: Setting.find(Setting.OBJECT_INSPECTOR_COLLAPSED_STATE).toggle, eagleTooltip: 'Collapse the Inspector'">close</i>
                             </div>
                         </div>
                         
@@ -209,17 +209,17 @@ <h4>Multi Selection</h4>
                                 <div class="col-12 col text-right">
                                     <!-- ko if: Eagle.selectedLocation() == Eagle.FileType.Graph || Setting.findValue(Setting.ALLOW_PALETTE_EDITING) -->
                                         <button type="button" id="duplicateSelectedobjects" class="btn btn-secondary btn-sm" data-bind="click: function(){$root.duplicateSelection('normal')}, clickBubble: false, eagleTooltip: 'Duplicate Selection ' + KeyboardShortcut.idToText('duplicate_selection', true)" data-bs-placement="left">
-                                            <i  class="material-icons md-20 clickable">content_copy</i>
+                                            <i  class="material-icons md-20 clickable iconHoverEffect">content_copy</i>
                                         </button>
                                     <!-- /ko -->
                                     <!-- ko if: Setting.findValue(Setting.ALLOW_PALETTE_EDITING) -->
                                         <button type="button" id="addSelectedNodesToPalette" class="btn btn-secondary btn-sm" data-bind="click: function(){$root.addSelectedNodesToPalette('normal')}, clickBubble: false, eagleTooltip: 'Add Selected Node To Palette'" data-bs-placement="left">
-                                            <i  class="material-icons md-20 clickable">library_add</i>
+                                            <i  class="material-icons md-20 clickable iconHoverEffect">library_add</i>
                                         </button>
                                     <!-- /ko -->
                                     <!-- ko if: Setting.findValue(Setting.ALLOW_GRAPH_EDITING) -->
                                         <button  type="button" class="btn btn-secondary btn-sm" data-bind="click: function(){$root.deleteSelection(false,false,false);}, eagleTooltip: 'Delete Selected Edge ' + KeyboardShortcut.idToText('delete_selection', true)">
-                                            <i class="material-icons md-24 clickable">delete</i>
+                                            <i class="material-icons md-24 clickable iconHoverEffect">delete</i>
                                         </button>
                                     <!-- /ko -->
                                 </div>
@@ -249,7 +249,7 @@ <h5>Edges Selected: </h5>
         <!-- /ko -->      
     
         <!-- ko if: Setting.findValue(Setting.OBJECT_INSPECTOR_COLLAPSED_STATE) -->
-            <i class="material-icons" data-bind="click: Setting.find(Setting.OBJECT_INSPECTOR_COLLAPSED_STATE).toggle">info</i>
+            <i class="material-icons iconHoverEffect" data-bind="click: Setting.find(Setting.OBJECT_INSPECTOR_COLLAPSED_STATE).toggle">info</i>
         <!-- /ko -->
     <!-- /ko -->
 
@@ -263,7 +263,7 @@ <h5>Edges Selected: </h5>
                         <div class="col-11 col">
                             <h4>Graph Info</h4>
                         </div>
-                        <div class="col-1 col">
+                        <div class="col-1 col iconHoverEffect">
                             <i class="material-icons" data-bind="click: Setting.find(Setting.GRAPH_INSPECTOR_COLLAPSED_STATE).toggle, eagleTooltip: 'Collapse the Inspector'">close</i>
                         </div>
                     </div>
@@ -278,11 +278,11 @@ <h4>Graph Info</h4>
                                     <i class="material-icons interactive" data-bs-placement="right" data-bind="eagleTooltip: 'This is a Graph File from GitHub or GitLab'" data-bs-toggle="tooltip" data-html="true">account_tree</i>
                                 <!-- /ko -->
                                 <i class="material-icons interactive" data-bs-placement="right" data-bind="eagleTooltip: $root.logicalGraph().fileInfo().fullPath()" data-bs-toggle="tooltip" data-html="true">link</i>
-                                <i class="material-icons interactive clickable" data-bs-placement="right" data-bind="eagleTooltip: $root.logicalGraph().fileInfo().shortDescription, click: function(){Utils.showModelDataModal('Graph Info', $root.logicalGraph().fileInfo());}" data-bs-toggle="tooltip" data-html="true">sticky_note_2</i>
-                                <i class="material-icons interactive clickable" data-bs-placement="right" data-bind="eagleTooltip: $root.logicalGraph().fileInfo().detailedDescription, click: function(){Utils.showModelDataModal('Graph Info', $root.logicalGraph().fileInfo());}" data-bs-toggle="tooltip" data-html="true">menu_book</i>
+                                <i class="material-icons interactive clickable iconHoverEffect" data-bs-placement="right" data-bind="eagleTooltip: $root.logicalGraph().fileInfo().shortDescription, click: function(){Utils.showModelDataModal('Graph Info', $root.logicalGraph().fileInfo());}" data-bs-toggle="tooltip" data-html="true">sticky_note_2</i>
+                                <i class="material-icons interactive clickable iconHoverEffect" data-bs-placement="right" data-bind="eagleTooltip: $root.logicalGraph().fileInfo().detailedDescription, click: function(){Utils.showModelDataModal('Graph Info', $root.logicalGraph().fileInfo());}" data-bs-toggle="tooltip" data-html="true">menu_book</i>
                             </div>
                             <div class="col-6 col text-right">
-                                <i class="material-icons interactive clickable" data-bs-placement="right" data-bind="eagleTooltip: 'View graph configurations table', click: GraphConfigurationsTable.openTable" data-bs-toggle="tooltip" data-html="true">dns</i>
+                                <i class="material-icons interactive clickable iconHoverEffect" data-bs-placement="right" data-bind="eagleTooltip: 'View graph configurations table', click: GraphConfigurationsTable.openTable" data-bs-toggle="tooltip" data-html="true">dns</i>
                             </div>
                         </div>
                     </div>
@@ -333,7 +333,7 @@ <h5>Config Fields: </h5>
         <!-- /ko -->
             
         <!-- ko if: Setting.findValue(Setting.GRAPH_INSPECTOR_COLLAPSED_STATE) -->
-            <i class="material-icons" data-bind="click: Setting.find(Setting.GRAPH_INSPECTOR_COLLAPSED_STATE).toggle">info</i>
+            <i class="material-icons iconHoverEffect" data-bind="click: Setting.find(Setting.GRAPH_INSPECTOR_COLLAPSED_STATE).toggle">info</i>
         <!-- /ko -->
     <!-- /ko -->
 </div>
diff --git a/templates/modals/errors.html b/templates/modals/errors.html
index bfc853c09..d61cd76e9 100644
--- a/templates/modals/errors.html
+++ b/templates/modals/errors.html
@@ -62,7 +62,7 @@ <h2 class="accordion-header" id="checkGraphAccordionHeadingTwo">
                 </div>
             </div>
             <div class="modal-footer" style="justify-content: space-between;">
-                <button id= 'errorModalFixAll' class="btn btn-primary" data-bind="click: Errors.fixAll, eagleTooltip: Errors.getNumFixableIssues() + ' fix(es) available'">Fix All
+                <button id= 'errorModalFixAll' class="btn btn-primary iconHoverEffect" data-bind="click: Errors.fixAll, eagleTooltip: Errors.getNumFixableIssues() + ' fix(es) available'">Fix All
                     <span data-bind="text: KeyboardShortcut.idToText('fix_all', true)"></span>
                 </button>
                 <button type="button" class="btn btn-primary" data-bs-dismiss="modal">OK</button>
diff --git a/templates/modals/settings.html b/templates/modals/settings.html
index b7985395f..e43e68c39 100644
--- a/templates/modals/settings.html
+++ b/templates/modals/settings.html
@@ -47,8 +47,8 @@ <h5 class="modal-title" id="settingsModalTitle">Settings</h5>
                                                         <input type="text" class="form-control" placeholder="" data-bind="attr:{id:'setting'+$data.getKey(),value:$data.getName()}, eagleTooltip:$data.getDescription()" data-bs-placement="left" readonly>
                                                         <div class="input-group-append">
                                                             <button class="btn btn-secondary btn-sm" type="button" data-bind=" attr:{id:'setting'+$data.getKey()+'Button'}">
-                                                                <i class="material-icons md-18" data-bind="visible: $data.value">radio_button_checked</i>
-                                                                <i class="material-icons md-18" data-bind="hidden: $data.value">radio_button_unchecked</i>
+                                                                <i class="material-icons md-18 iconHoverEffect" data-bind="visible: $data.value">radio_button_checked</i>
+                                                                <i class="material-icons md-18 iconHoverEffect" data-bind="hidden: $data.value">radio_button_unchecked</i>
                                                             </button>
                                                         </div>
                                                     </div>
@@ -60,7 +60,7 @@ <h5 class="modal-title" id="settingsModalTitle">Settings</h5>
                                                         <input type="text" class="form-control" placeholder="" data-bind="attr:{id:'setting'+$data.getKey(),value:$data.getName()}, eagleTooltip:$data.getDescription()" data-bs-placement="left" readonly>
                                                         <div class="input-group-append">
                                                             <button class="btn btn-secondary btn-sm" type="button" data-bind="attr:{id:'setting'+$data.getKey()+'Function'}">
-                                                                <i class="material-icons-outlined md-18">ads_click</i>
+                                                                <i class="material-icons-outlined md-18 iconHoverEffect">ads_click</i>
                                                             </button>
                                                         </div>
                                                     </div>
@@ -74,7 +74,7 @@ <h5 class="modal-title" id="settingsModalTitle">Settings</h5>
                                                     <input type="password" autocomplete="off" class="form-control" placeholder="" data-bind="value: $data.value, attr:{id:'setting'+$data.getKey()+'Value'}">
                                                     <div class="input-group-append">
                                                         <button class="btn btn-secondary btn-sm" type="button" data-bind="click: $data.copy, attr:{id:'setting'+$data.getKey()+'Copy'}, eagleTooltip: 'Copy to clipboard'">
-                                                            <i class="material-icons md-18">content_copy</i>
+                                                            <i class="material-icons md-18 iconHoverEffect">content_copy</i>
                                                         </button>
                                                     </div>
                                                 </div>
diff --git a/templates/navbar.html b/templates/navbar.html
index 4ecb6fba9..a680585e3 100644
--- a/templates/navbar.html
+++ b/templates/navbar.html
@@ -21,23 +21,23 @@
             <!-- navbar category -->
             <div class="btn-group ms-4 navbarGroup" role="group" aria-label="Basic example">
                 <span class="navBarToolBarTitle">Graph</span>
-                <button id="openGraphModelDataModal" class="btn btn-outline-secondary navbar-btn" type="button" data-bs-placement="bottom" data-bind="click: function(){Utils.showModelDataModal('Graph Info', $root.logicalGraph().fileInfo());}, eagleTooltip: 'Show Graph Info'">
+                <button id="openGraphModelDataModal" class="btn btn-outline-secondary navbar-btn iconHoverEffect" type="button" data-bs-placement="bottom" data-bind="click: function(){Utils.showModelDataModal('Graph Info', $root.logicalGraph().fileInfo());}, eagleTooltip: 'Show Graph Info'">
                     <i class="material-icons md-18">info</i>
                 </button>
-                <button id="openGraphConfigurationTable" class="btn btn-outline-secondary navbar-btn" type="button" data-bs-placement="bottom" data-bind="click: function(){ParameterTable.openTable(Eagle.BottomWindowMode.ConfigParameterTable, ParameterTable.SelectType.Normal)}, eagleTooltip: `Display Graph Attributes Configuration ` + KeyboardShortcut.idToText('open_graph_attributes_configuration_table', true)">
+                <button id="openGraphConfigurationTable" class="btn btn-outline-secondary navbar-btn iconHoverEffect" type="button" data-bs-placement="bottom" data-bind="click: function(){ParameterTable.openTable(Eagle.BottomWindowMode.ConfigParameterTable, ParameterTable.SelectType.Normal)}, eagleTooltip: `Display Graph Attributes Configuration ` + KeyboardShortcut.idToText('open_graph_attributes_configuration_table', true)">
                     <i class="md-18 icon-key_attribute_table"></i>
                 </button>
-                <button id="copyGraphUrl" class="btn btn-outline-secondary navbar-btn" type="button" data-bs-placement="bottom" data-bind="click: copyGraphUrl, eagleTooltip: 'Copy Graph Url'" >
+                <button id="copyGraphUrl" class="btn btn-outline-secondary navbar-btn iconHoverEffect" type="button" data-bs-placement="bottom" data-bind="click: copyGraphUrl, eagleTooltip: 'Copy Graph Url'" >
                     <i class="material-icons md-18">content_copy</i>
                 </button>
             </div>
 
             <!-- navbar category -->
             <div class="btn-group ms-4 navbarGroup" role="group" aria-label="Basic example">
-                <button id="centerGraph" class="btn btn-outline-secondary navbar-btn" type="button" data-bs-placement="bottom" data-bind="click: centerGraph, eagleTooltip: 'Center Graph ' + KeyboardShortcut.idToText('center_graph', true)" >
+                <button id="centerGraph" class="btn btn-outline-secondary navbar-btn iconHoverEffect" type="button" data-bs-placement="bottom" data-bind="click: centerGraph, eagleTooltip: 'Center Graph ' + KeyboardShortcut.idToText('center_graph', true)" >
                     <i class="material-icons md-18">filter_center_focus</i>
                 </button>
-                <button id="screenshot" class="btn btn-outline-secondary navbar-btn" type="button" data-bs-placement="bottom" data-bind="click: saveGraphScreenshot, eagleTooltip: 'Screenshot the graph <br><br><em>This will ask for permission to record the screen. If it doesn`t, your browser may lack permissions or might be blocked from asking for them.<br> If the current tab is not automatically selected, please select this tab, window or screen. Note, in this case cropping of the graph may not be accurate.</em>' " >
+                <button id="screenshot" class="btn btn-outline-secondary navbar-btn iconHoverEffect" type="button" data-bs-placement="bottom" data-bind="click: saveGraphScreenshot, eagleTooltip: 'Screenshot the graph <br><br><em>This will ask for permission to record the screen. If it doesn`t, your browser may lack permissions or might be blocked from asking for them.<br> If the current tab is not automatically selected, please select this tab, window or screen. Note, in this case cropping of the graph may not be accurate.</em>' " >
                     <i class="material-icons md-18">photo_camera</i>
                 </button>
                 <span class="navBarToolBarTitle">View</span>
@@ -48,17 +48,17 @@
                 <span class="navBarToolBarTitle">Editing</span>
                 <!-- ko if: Setting.findValue(Setting.ALLOW_GRAPH_EDITING) -->
                     <!--
-                    <button id="toggleSnapToGrid" class="btn btn-outline-secondary navbar-btn" type="button" data-bs-placement="bottom" data-bind="click: toggleSnapToGrid, eagleTooltip: 'Toggle Snap-to-Grid ' + KeyboardShortcut.idToText('toggle_snap_to_grid', true), css: { 'navbar-btn-active': snapToGrid() }" >
+                    <button id="toggleSnapToGrid" class="btn btn-outline-secondary navbar-btn iconHoverEffect" type="button" data-bs-placement="bottom" data-bind="click: toggleSnapToGrid, eagleTooltip: 'Toggle Snap-to-Grid ' + KeyboardShortcut.idToText('toggle_snap_to_grid', true), css: { 'navbar-btn-active': snapToGrid() }" >
                         <i class="md-18 icon-snap_to_grid"></i>
                     </button>
                     -->
                 <!-- /ko -->
                 <!-- ko if: Setting.findValue(Setting.ALLOW_PALETTE_EDITING) -->
-                    <button id="addGraphNodesToPalette" class="btn btn-outline-secondary navbar-btn" type="button" data-bs-placement="bottom" data-bind="click: addGraphNodesToPalette, eagleTooltip: 'Add Graph Nodes to Palette ' + KeyboardShortcut.idToText('add_graph_nodes_to_palette', true)" >
+                    <button id="addGraphNodesToPalette" class="btn btn-outline-secondary navbar-btn iconHoverEffect" type="button" data-bs-placement="bottom" data-bind="click: addGraphNodesToPalette, eagleTooltip: 'Add Graph Nodes to Palette ' + KeyboardShortcut.idToText('add_graph_nodes_to_palette', true)" >
                         <i class="md-18 icon-add_to_palette"></i>
                     </button>
                 <!-- /ko -->
-                <button id="checkForComponentUpdates" class="btn btn-outline-secondary navbar-btn" type="button" data-bs-placement="bottom" data-bind="click: checkForComponentUpdates, eagleTooltip: 'Check for component updates ' + KeyboardShortcut.idToText('check_for_component_updates', true)">
+                <button id="checkForComponentUpdates" class="btn btn-outline-secondary navbar-btn iconHoverEffect" type="button" data-bs-placement="bottom" data-bind="click: checkForComponentUpdates, eagleTooltip: 'Check for component updates ' + KeyboardShortcut.idToText('check_for_component_updates', true)">
                     <i class="md-18 icon-component_update"></i>
                 </button>
             </div>
@@ -68,12 +68,12 @@
                 <div class="btn-group ms-4 navbarGroup" role="group" aria-label="Basic example" data-bind="css: {'navbarGroupWarning': graphWarnings().length > 0, 'navbarGroupError': graphErrors().length > 0,'navbarGroupSuccess':graphWarnings().length === 0 && graphErrors().length === 0}">
                     <span class="navBarToolBarTitle">Issues</span>
                     <!-- ko if: graphWarnings().length === 0 && graphErrors().length === 0 -->
-                        <button id="checkGraphDone" class="btn navbar-btn" type="button" data-bs-placement="bottom" data-bind="click: showGraphErrors, eagleTooltip: 'Check Graph for Errors'">
+                        <button id="checkGraphDone" class="btn navbar-btn iconHoverEffect" type="button" data-bs-placement="bottom" data-bind="click: showGraphErrors, eagleTooltip: 'Check Graph for Errors'">
                             <i class="material-icons md-18">done_all</i>
                         </button>
                     <!-- /ko -->
                     <!-- ko if: graphWarnings().length > 0 || graphErrors().length > 0 -->
-                        <button id="checkGraphWarnings" class="btn navbar-btn" type="button" data-bs-placement="bottom" style="display:none;" data-bind="click: showGraphErrors, visible:$root.logicalGraph()!=null, css: {'btn-outline-warning': graphWarnings().length > 0, 'btn-outline-danger': graphErrors().length > 0}, eagleTooltip: 'Check Graph for Errors ' + KeyboardShortcut.idToText('check_graph', true)">
+                        <button id="checkGraphWarnings" class="btn navbar-btn iconHoverEffect" type="button" data-bs-placement="bottom" style="display:none;" data-bind="click: showGraphErrors, visible:$root.logicalGraph()!=null, css: {'btn-outline-warning': graphWarnings().length > 0, 'btn-outline-danger': graphErrors().length > 0}, eagleTooltip: 'Check Graph for Errors ' + KeyboardShortcut.idToText('check_graph', true)">
                             <span class="badge bg-warning" data-bind="text: graphWarnings().length, visible: graphWarnings().length > 0"></span>
                             <span class="badge bg-danger" data-bind="text: graphErrors().length, visible: graphErrors().length > 0"></span>
                         </button>
@@ -87,7 +87,7 @@
                 <a href='javascript:void(0)' data-bind="click: function(){$root.deployDefaultTranslationAlgorithm()}">Translate</a>
             </div>
             <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle ms-auto" href="#" id="navbarDropdownGraph" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <a class="nav-link dropdown-toggle ms-auto iconHoverEffect" href="#" id="navbarDropdownGraph" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     Graph
                 </a>
                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownGraph">
@@ -143,7 +143,7 @@
             </li>
             <!-- ko if: Setting.findValue(Setting.ALLOW_PALETTE_EDITING) || Setting.findValue(Setting.ALLOW_GRAPH_EDITING) -->
             <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownPalette" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <a class="nav-link dropdown-toggle iconHoverEffect" href="#" id="navbarDropdownPalette" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     Palette
                 </a>
                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownPalette">
@@ -186,7 +186,7 @@
             </li>
             <!-- /ko -->
             <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle ms-auto" href="#" id="navbarDropdownConfig" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <a class="nav-link dropdown-toggle ms-auto iconHoverEffect" href="#" id="navbarDropdownConfig" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     Config
                 </a>
                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownConfig">
@@ -200,7 +200,7 @@
                 </div>
             </li>
             <li class="nav-item dropdown">
-                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownHelp" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <a class="nav-link dropdown-toggle iconHoverEffect" href="#" id="navbarDropdownHelp" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                     Help
                 </a>
                 <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownHelp">
@@ -220,7 +220,9 @@
                     </a>
                 </div>
             </li>
-            <a class="nav-link" data-bs-placement="bottom" alt="Settings" id="settings" href="#" data-bind="click: openSettings, eagleTooltip: 'Settings'"><img src="/static/assets/img/settings_white_24dp.svg" alt=""></a>
+            <a id="settings" class="nav-link iconHoverEffect" data-bs-placement="bottom" alt="Settings" href="#" data-bind="click: openSettings, eagleTooltip: 'Settings'">
+                <i class="icon-cog md-18"></i>
+            </a>
         </ul>
 
     </div>
diff --git a/templates/node_parameter_table.html b/templates/node_parameter_table.html
index 5cd8d3f35..2de0dc57a 100644
--- a/templates/node_parameter_table.html
+++ b/templates/node_parameter_table.html
@@ -29,11 +29,10 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                     Browse DockerHub
                 </button>
             <!-- /ko -->
-            <button type="button" class="btn btn-primary" data-bind="click: function(){SideWindow.toggleShown('bottom')}, clickBubble:false"><span class="parameterTableCloseButton">Close</span></button>
         </div> 
 
         <div class="dropdown parameterTableVisibilityContainer">
-            <a class="dropdown-toggle icon-table_column_visibility componentTableVisibilityBtn" data-bs-toggle="dropdown"></a>
+            <a class="dropdown-toggle icon-table_column_visibility componentTableVisibilityBtn iconHoverEffect" data-bs-toggle="dropdown"></a>
             <div class="dropdown-menu dropdown-menu-right">
                 <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleKeyAttribute()}"><span>Key Parameter</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().keyAttribute()"></div>
                 <div class="dropdown-item" data-bind="click:function(){ParameterTable.getActiveColumnVisibility().toggleFieldId()}"><span>Field ID</span><input type="checkbox" data-bind="checked:ParameterTable.getActiveColumnVisibility().fieldId()"></div>
@@ -99,14 +98,14 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                             <!-- ko ifnot: Setting.findValue(Setting.NODE_PARAMS_TABLE_DUAL_VALUE_DISPLAY) -->
                                                 <button class="showBothValues" data-bind="click: Setting.find(Setting.NODE_PARAMS_TABLE_DUAL_VALUE_DISPLAY).toggle, eagleTooltip:'Toggle On Dual Value Display. This shows both the configured value and the graphs own value.'">
                                                     <div>
-                                                        <i class="material-icons-outlined">check_box_outline_blank</i>
+                                                        <i class="material-icons-outlined iconHoverEffect">check_box_outline_blank</i>
                                                     </div>
                                                 </button>
                                             <!-- /ko -->
                                             <!-- ko if: Setting.findValue(Setting.NODE_PARAMS_TABLE_DUAL_VALUE_DISPLAY) -->
                                                 <button class="showBothValues" id="showBothValuesOn" data-bind="click: Setting.find(Setting.NODE_PARAMS_TABLE_DUAL_VALUE_DISPLAY).toggle, eagleTooltip:'Toggle Off Dual Value Display. This shows both the configured value and the graphs own value.'">
                                                     <div>
-                                                        <i class="icon-overwrite"></i>
+                                                        <i class="icon-overwrite iconHoverEffect"></i>
                                                     </div>
                                                 </button>
                                             <!-- /ko -->
@@ -161,12 +160,12 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                                     
                                                     <!-- ko if: Eagle.selectedLocation() === Eagle.FileType.Graph -->
                                                         <!-- ko ifnot: $root.logicalGraph().getActiveGraphConfig()?.hasField($data) -->
-                                                        <button data-bind="click: function(){ParameterTable.requestAddField($data)}, disabled: !Setting.findValue(Setting.ALLOW_MODIFY_GRAPH_CONFIG) || $root.getCurrentParamValueReadonly($data), eagleTooltip:'Add Field to Graph Config', style:{'visibility':'hidden'}, clickBubble:false">
+                                                        <button class="iconHoverEffect" data-bind="click: function(){ParameterTable.requestAddField($data)}, disabled: !Setting.findValue(Setting.ALLOW_MODIFY_GRAPH_CONFIG) || $root.getCurrentParamValueReadonly($data), eagleTooltip:'Add Field to Graph Config', style:{'visibility':'hidden'}, clickBubble:false">
                                                             <i class="material-icons">favorite_border</i>
                                                         </button>
                                                         <!-- /ko -->
                                                         <!-- ko if: $root.logicalGraph().getActiveGraphConfig()?.hasField($data) -->
-                                                        <button data-bind="click: function(){ParameterTable.requestRemoveField($data)}, disabled: !Setting.findValue(Setting.ALLOW_MODIFY_GRAPH_CONFIG) || $root.getCurrentParamValueReadonly($data), eagleTooltip:'Remove Field from Graph Config', style:{'visibility':'visible'}, clickBubble:false">
+                                                        <button class="iconHoverEffect" data-bind="click: function(){ParameterTable.requestRemoveField($data)}, disabled: !Setting.findValue(Setting.ALLOW_MODIFY_GRAPH_CONFIG) || $root.getCurrentParamValueReadonly($data), eagleTooltip:'Remove Field from Graph Config', style:{'visibility':'visible'}, clickBubble:false">
                                                             <i class="material-icons">favorite</i>
                                                         </button>
                                                         <!-- /ko -->
@@ -313,7 +312,7 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                                 <td class='columnCell column_Description' onmouseenter="ParameterTable.showEditDescription(this)" onmouseleave="ParameterTable.hideEditDescription(this)" data-bind=" css: { selectedTableParameter: ParameterTable.isSelected('description', $data) }, eagleTooltip:description">
                                                     <input class="tableParameter" type="string" data-bind="value: description, disabled: ParameterTable.getNodeLockedState($data), valueUpdate: ['afterkeydown', 'input'], click: function(event, data){ParameterTable.select($data.description(), 'description', $data, $index())}, event:{keyup: function(event, data){ParameterTable.select($data.description(), 'description', $data, $index())}}">
                                                     <!-- ko ifnot: ParameterTable.getNodeLockedState($data) -->
-                                                        <button class="parameterTableDescriptionBtn icon-pencil" data-bind="click:function(data,event){ParameterTable.requestEditDescriptionInModal($data)}"></button>
+                                                        <button class="parameterTableDescriptionBtn icon-pencil iconHoverEffect" data-bind="click:function(data,event){ParameterTable.requestEditDescriptionInModal($data)}"></button>
                                                     <!-- /ko -->
                                                 </td>
                                                 <!-- /ko -->
@@ -330,7 +329,7 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                                         <div class="input-group">
                                                             <input  class="typesInput form-control" type="text" autocomplete="off" data-bind="value:type, attr:{id:'typeInputFor_'+$data.getId()}">
                                                             <button class="btn btn-outline-secondary" data-bs-toggle="dropdown" aria-expanded="false" data-bind="attr:{id:'typeButtonFor_'+$data.getId()}" type="button">
-                                                                <span class="material-icons-outlined">
+                                                                <span class="material-icons-outlined iconHoverEffect">
                                                                     arrow_drop_down
                                                                 </span>
                                                             </button>
@@ -348,59 +347,59 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                                     <!-- ko if: ParameterTable.getNodeLockedState($data) -->
                                                             <!-- ko if: $data.isReadonly() -->
                                                             <button type="button" disabled data-bind="click: function(){$data.toggleReadOnly();},  eagleTooltip:Utils.getReadOnlyText()" data-bs-placement="left">
-                                                                <i class="material-icons">lock</i>
+                                                                <i class="material-icons iconHoverEffect">lock</i>
                                                             </button>
                                                         <!-- /ko -->
                                                         <!-- ko ifnot: $data.isReadonly() -->
                                                             <button type="button" disabled data-bind="click: function(){$data.toggleReadOnly();},  eagleTooltip:Utils.getReadOnlyText()" data-bs-placement="left">
-                                                                <i class="material-icons-outlined">lock_open</i>
+                                                                <i class="material-icons-outlined iconHoverEffect">lock_open</i>
                                                             </button>
                                                         <!-- /ko -->
                                                     <!-- /ko -->
                                                     <!-- ko ifnot: ParameterTable.getNodeLockedState($data) -->
                                                         <!-- ko if: $data.isReadonly() -->
                                                             <button type="button" data-bind="click: function(){$data.toggleReadOnly();}, eagleTooltip: 'Parameter Value is read only<br/>Click to toggle'" data-bs-placement="left">
-                                                                <i class="material-icons">lock</i>
+                                                                <i class="material-icons iconHoverEffect">lock</i>
                                                             </button>
                                                         <!-- /ko -->
                                                         <!-- ko ifnot: $data.isReadonly() -->
                                                             <button  type="button" data-bind="click: function(){$data.toggleReadOnly();},  eagleTooltip: 'Parameter Value is not read only<br/>Click to toggle'" data-bs-placement="left">
-                                                                <i class="material-icons-outlined">lock_open</i>
+                                                                <i class="material-icons-outlined iconHoverEffect">lock_open</i>
                                                             </button>
                                                         <!-- /ko -->
                                                         <!-- ko if: Setting.findValue(Setting.ALLOW_COMPONENT_EDITING)-->
                                                             <!-- ko if: $data.isPrecious() -->
                                                                 <button type="button" data-bind="click: $data.togglePrecious, eagleTooltip: 'Parameter is precious<br/>Click to toggle'" data-bs-placement="left">
-                                                                    <i class="material-icons">diamond</i>
+                                                                    <i class="material-icons iconHoverEffect">diamond</i>
                                                                 </button>
                                                             <!-- /ko -->
                                                             <!-- ko ifnot: $data.isPrecious() -->
                                                                 <button type="button" data-bind="click: $data.togglePrecious, eagleTooltip: 'Parameter is not precious<br/>Click to toggle'" data-bs-placement="left">
-                                                                    <i class="material-icons-outlined">diamond</i>
+                                                                    <i class="material-icons-outlined iconHoverEffect">diamond</i>
                                                                 </button>
                                                             <!-- /ko -->
                                                         <!-- /ko -->
                                                         <!-- ko if: Setting.findValue(Setting.ALLOW_COMPONENT_EDITING)-->
                                                                 <!-- ko if: $data.isPositionalArgument() -->
                                                                 <button type="button" data-bind="click: $data.togglePositionalArgument, eagleTooltip: 'Parameter is positional<br/>Click to toggle'" data-bs-placement="left">
-                                                                    <i class="material-icons">location_on</i>
+                                                                    <i class="material-icons iconHoverEffect">location_on</i>
                                                                 </button>
                                                             <!-- /ko -->
                                                             <!-- ko ifnot: $data.isPositionalArgument() -->
                                                                 <button type="button" data-bind="click: $data.togglePositionalArgument, eagleTooltip: 'Parameter is not positional<br/>Click to toggle'" data-bs-placement="left">
-                                                                    <i class="material-icons-outlined">location_on</i>
+                                                                    <i class="material-icons-outlined iconHoverEffect">location_on</i>
                                                                 </button>
                                                             <!-- /ko -->
                                                         <!-- /ko -->
                                                         <!-- ko ifnot: $data.usage() === Daliuge.FieldUsage.NoPort-->
                                                             <!-- ko if: $data.isEvent() -->
                                                                 <button type="button" data-bind="click: function(){$data.toggleEvent();}, eagleTooltip: 'Port is event port<br/>Click to toggle'" data-bs-placement="left">
-                                                                    <i class="material-icons">alarm_on</i>
+                                                                    <i class="material-icons iconHoverEffect">alarm_on</i>
                                                                 </button>
                                                             <!-- /ko -->
                                                             <!-- ko ifnot: $data.isEvent() -->
                                                                 <button type="button" data-bind="click: function(){$data.toggleEvent();}, eagleTooltip: 'Port is not event port<br/>Click to toggle'" data-bs-placement="left">
-                                                                    <i class="material-icons">alarm_off</i>
+                                                                    <i class="material-icons iconHoverEffect">alarm_off</i>
                                                                 </button>
                                                             <!-- /ko -->
                                                         <!-- /ko -->
@@ -444,18 +443,18 @@ <h5 class="bottomWindowHeader">Fields Table: </h5>
                                             
                                             <!-- ko if: ParameterTable.getActiveColumnVisibility().actions() -->
                                                 <td class="columnCell column_Actions">
-                                                    <button class="resetDefaults" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$data.resetToDefault();$root.selectedObjects.valueHasMutated();$root.flagActiveFileModified();}, disabled: $root.getCurrentParamReadonly($data), eagleTooltip:'Reset To Default'"><i class="material-icons">upload_file</i></button>
+                                                    <button class="resetDefaults iconHoverEffect" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$data.resetToDefault();$root.selectedObjects.valueHasMutated();$root.flagActiveFileModified();}, disabled: $root.getCurrentParamReadonly($data), eagleTooltip:'Reset To Default'"><i class="material-icons">upload_file</i></button>
                                                     <!-- ko ifnot: ParameterTable.getNodeLockedState($data) -->
-                                                        <button class="edit" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$root.editField(null, 'Field', $data.parameterType(), $data.usage(), $data.getId());}, disabled: $root.getCurrentParamReadonly($data), eagleTooltip:'Edit'"><i class="material-icons">edit</i></button>
-                                                        <button class="duplicate" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$root.duplicateParameter($index());$root.selectedObjects.valueHasMutated();$root.flagActiveFileModified();}, disabled: ParameterTable.getNodeLockedState($data), eagleTooltip:'Duplicate'"><i class="material-icons">content_copy</i></button>
-                                                        <button class="delete" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$root.logicalGraph().removeFieldFromNodeById($root.selectedNode(),$data.getId());}, disabled: ParameterTable.getNodeLockedState($data), eagleTooltip:'Remove parameter'"><i class="material-icons md-24">delete</i></button>
+                                                        <button class="edit iconHoverEffect" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$root.editField(null, 'Field', $data.parameterType(), $data.usage(), $data.getId());}, disabled: $root.getCurrentParamReadonly($data), eagleTooltip:'Edit'"><i class="material-icons">edit</i></button>
+                                                        <button class="duplicate iconHoverEffect" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$root.duplicateParameter($index());$root.selectedObjects.valueHasMutated();$root.flagActiveFileModified();}, disabled: ParameterTable.getNodeLockedState($data), eagleTooltip:'Duplicate'"><i class="material-icons">content_copy</i></button>
+                                                        <button class="delete iconHoverEffect" onclick="$(this).val(this.checked ? true : false)" data-bind="click: function(){$root.logicalGraph().removeFieldFromNodeById($root.selectedNode(),$data.getId());}, disabled: ParameterTable.getNodeLockedState($data), eagleTooltip:'Remove parameter'"><i class="material-icons md-24">delete</i></button>
                                                     <!-- /ko -->
                                                     <!-- ko if: $data.getHasErrors()-->
-                                                        <button class="text-danger" disabled data-bind="eagleTooltip:ParameterTable.getErrorsWarningsAsHtml($data)"><i class="material-icons">error</i></button>
+                                                        <button class="text-danger iconHoverEffect" disabled data-bind="eagleTooltip:ParameterTable.getErrorsWarningsAsHtml($data)"><i class="material-icons">error</i></button>
                                                     <!-- /ko -->
                                                     
                                                     <!-- ko if: $data.getHasOnlyWarnings()-->
-                                                        <button class="text-warning" disabled data-bind="eagleTooltip:ParameterTable.getErrorsWarningsAsHtml($data)"><i class="material-icons">warning</i></button>
+                                                        <button class="text-warning iconHoverEffect" disabled data-bind="eagleTooltip:ParameterTable.getErrorsWarningsAsHtml($data)"><i class="material-icons">warning</i></button>
                                                     <!-- /ko -->
                                                 </td>
                                             <!-- /ko -->
diff --git a/templates/palettes.html b/templates/palettes.html
index 6a9510faa..c01ceac16 100644
--- a/templates/palettes.html
+++ b/templates/palettes.html
@@ -4,7 +4,7 @@
             <button class="btn btn-primary btn-block btn_wide" id="explorePalettesButton" data-bind="click: showExplorePalettes, eagleTooltip: 'Retrieve information on all palettes in ' + Setting.findValue(Setting.EXPLORE_PALETTES_REPOSITORY)" data-bs-placement="bottom">Explore Palettes</button>
         </span>
         <span id="paletteWindowdropdownWrapper" class="dropdown">
-            <a class="dropdown-toggle material-icons" href="#" id="paletteWindowdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            <a class="dropdown-toggle material-icons iconHoverEffect" href="#" id="paletteWindowdropdown" role="button" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                 more_vert
             </a>
             <div class="dropdown-menu dropdown-menu-right" aria-labelledby="paletteWindowdropdown">
@@ -37,7 +37,7 @@
     <div class="accordion">
         <div data-bind="foreach: palettes">
             <div class="paletteCardWrapper">
-                <button type="button" class="material-icons md-18 dropdown-toggle paletteTripleDot" data-bs-toggle="dropdown" >more_vert</button>
+                <button type="button" class="material-icons md-18 dropdown-toggle paletteTripleDot iconHoverEffect" data-bs-toggle="dropdown" >more_vert</button>
                 <div class="dropdown-menu" data-bind="event:{mouseleave: $root.closePaletteMenus}">
                     <a href="#" data-bind="click: $root.sortPalette, clickBubble: false" data-html="true"><span>Sort</span></a>
                     <!-- ko ifnot: $data.fileInfo().builtIn -->