diff --git a/Employee_Managment_App/src/components/Announcement.css b/Employee_Managment_App/src/components/Announcement.css
index f080c1e..d103eca 100644
--- a/Employee_Managment_App/src/components/Announcement.css
+++ b/Employee_Managment_App/src/components/Announcement.css
@@ -8,7 +8,11 @@
   --annc-backdrop: rgba(2,6,23,0.35);
   --annc-elev: 0 8px 20px rgba(2, 6, 23, 0.06);
   --annc-panel-width: 380px;
-}
+
+  --color-sf-icon-color: #6b7280;
+  --color-sf-secondary-border-color-hover: #d1d5db;
+  --color-sf-secondary-bg-color-hover: rgba(158, 158, 158, 0.2);
+  --color-sf-content-text-color: #111827;
 
 /* Backdrop area that starts below the top bar (top offset applied inline) */
 .annc-panel-backdrop {
@@ -145,8 +149,8 @@
   transition: background 160ms ease, border-color 160ms ease;
 }
 .annc-panel-item:hover {
-  background: #f8fffb;
-  border-color: #e8f7f1;
+    background: var(--color-sf-secondary-bg-color-hover);
+    color: var(--color-sf-content-text-color);
 }
 .annc-item-icon {
   width: 36px;
diff --git a/Employee_Managment_App/src/components/Policies.css b/Employee_Managment_App/src/components/Policies.css
index 43f49ef..edc4056 100644
--- a/Employee_Managment_App/src/components/Policies.css
+++ b/Employee_Managment_App/src/components/Policies.css
@@ -18,6 +18,7 @@
   --text-muted: #667085;
   --text-soft: #475467;
 
+
   --surface: #ffffff;
   --surface-subtle: #fafbfc;
 
@@ -27,12 +28,13 @@
   --shadow-xs: 0 1px 2px rgba(16, 24, 40, .06);
   --shadow-sm: 0 2px 8px rgba(16, 24, 40, .08);
   --shadow-md: 0 6px 18px rgba(16, 24, 40, .10);
+
+  --color-sf-primary-bg-color: #1ab394;
+  --color-sf-primary-border-color: #1ab394;
 }
 
 .policies-grid-wrapper {
   padding: 28px 24px;
-  max-width: 1160px;
-  margin: 0 auto;
   color: var(--text-strong);
 }
 
@@ -90,6 +92,7 @@
   text-decoration: underline;
 }
 
+
 /* Section headers and Reset link */
 .section-header {
   display: flex;
@@ -148,9 +151,8 @@
 }
 
 .filter-chip:hover {
-  background: var(--primary-50);
-  border-color: var(--primary-100);
-  transform: translateY(-1px);
+  border-color: var(--text-muted);
+
 }
 
 .filter-chip.is-active {
@@ -183,12 +185,11 @@
   position: relative;
   display: inline-flex;
   align-items: center;
+  text-align: center;
   gap: 8px;
-  padding-left: 22px;
 }
 
 .filter-chip .filter-chip__label::before {
-  content: '🏷️';
   position: absolute;
   left: 0;
   top: 50%;
@@ -196,31 +197,6 @@
   font-size: 14px;
 }
 
-.filter-chip-row .filter-chip:nth-child(1) .filter-chip__label::before {
-  content: '📚';
-}
-
-.filter-chip-row .filter-chip:nth-child(2) .filter-chip__label::before {
-  content: '🔒';
-}
-
-.filter-chip-row .filter-chip:nth-child(3) .filter-chip__label::before {
-  content: '🗓️';
-}
-
-.filter-chip-row .filter-chip:nth-child(4) .filter-chip__label::before {
-  content: '🧾';
-}
-
-.filter-chip-row .filter-chip:nth-child(5) .filter-chip__label::before {
-  content: '💻';
-}
-
-.filter-chip-row .filter-chip:nth-child(6) .filter-chip__label::before {
-  content: '👔';
-}
-
-/* Employment */
 
 /* Grid styling (unchanged core look from previous refresh) */
 .policy-name-cell {
@@ -307,14 +283,7 @@
   font-size: 16px;
 }
 
-/* Category pills in the grid */
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Category"] {
-  position: relative;
-  padding-left: 28px;
-}
-
 .policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Category"]::before {
-  content: '🏷️';
   position: absolute;
   left: 8px;
   top: 50%;
@@ -323,40 +292,6 @@
   opacity: .95;
 }
 
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Security"]::before {
-  content: '🔒';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="HR & Leave"]::before {
-  content: '🗓️';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Compliance"]::before {
-  content: '🧾';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="IT & Devices"]::before {
-  content: '💻';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Employment"]::before {
-  content: '👔';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Code of Conduct"]::before {
-  content: '📜';
-}
-
-.policies-grid-wrapper .e-grid .e-rowcell[aria-label*="Category"]>span {
-  display: inline-block;
-  padding: 4px 10px 4px 8px;
-  border-radius: 999px;
-  border: 1px solid var(--border);
-  background: #f9fafb;
-  font-weight: 700;
-  color: #1f2937;
-}
-
 /* Dialog */
 .policy-dialog .e-dlg-header-content {
   border-bottom: 1px solid var(--border);
@@ -435,12 +370,25 @@
 
 .policies-grid-wrapper .e-grid .e-pager .e-currentitem,
 .policies-grid-wrapper .e-grid .e-pager .e-currentitem:hover {
-  background: #1ab394;
-  border-color:#1ab394;
-  color: #fff;
+  background: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+  color: --surface;
 }
 
-.policies-grid-wrapper .e-grid .e-pager .e-numericitem:hover {
+.policies-grid-wrapper .e-grid .e-pager .e-numericitem:active {
+  background: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+
+}
+
+/* Keep hover color for non-active pages only */
+.policies-grid-wrapper .e-grid .e-pager .e-numericitem:not(.e-currentitem):hover {
   background: var(--primary-50);
   color: var(--primary-900);
-}
\ No newline at end of file
+}
+/* When hovering the active page, keep the active green */
+.policies-grid-wrapper .e-grid .e-pager .e-numericitem.e-currentitem:hover {
+  background: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+  color: --surface;
+}
diff --git a/Employee_Managment_App/src/components/TopNav.css b/Employee_Managment_App/src/components/TopNav.css
index 535aa68..a9b822e 100644
--- a/Employee_Managment_App/src/components/TopNav.css
+++ b/Employee_Managment_App/src/components/TopNav.css
@@ -22,13 +22,12 @@
   --bs-success: #1ab394;
 
   /* Component sizing to match HR portal */
-  --control-height: 38px;   /* search and create height */
   --create-width: 96px;     /* button width similar to screenshots */
   --search-max: 600px;      /* desktop search width similar to HR portal */
   
   --hr-search-width: 210px;
 
-  --control-height: 40px;
+  --control-height: 35px;
   --radius-pill: 9999px;
 
   --accent: #10b981;                   /* focus ring + border accent */
@@ -41,6 +40,11 @@
   --shadow-rest: 0 1px 2px rgba(0,0,0,.06);
   --shadow-focus: 0 6px 18px rgba(16, 185, 129, 0.16);
   --focus-ring: 0 0 0 4px rgba(16, 185, 129, 0.14);
+
+  --color-sf-icon-color: #6b7280;
+  --color-sf-secondary-border-color-hover: #d1d5db;
+  --color-sf-secondary-bg-color-hover:rgba(158, 158, 158, 0.2);
+  --color-sf-content-text-color: #111827;
 }
 
 /* Parallel fixed header */
@@ -85,6 +89,7 @@
 
 .company-name {
   font-size: 16px;
+  font-weight: bold;
   color: rgba(0, 0, 0, 0.87);
 }
 
@@ -103,13 +108,13 @@
 
 /* Input group container */
 .search-field.input-group {
+  pointer-events: none;
   position: relative;
   display: flex;
   align-items: center;
   width: 100%;
   height: var(--control-height);
   background: var(--search-bg);
-  border-radius: var(--radius-pill);
   box-shadow: var(--shadow-rest);
   transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease, transform 120ms ease;
 }
@@ -224,7 +229,6 @@
 
 .icon-btn {
   position: relative;
-  display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
@@ -238,9 +242,9 @@
 }
 
 .icon-btn:hover {
-  border-color: var(--accent-100);
-  background: var(--accent-50);
-  color: var(--accent-700);
+  border-color: var(--focus-ring);
+  background: transparent;
+  color: var(--color-sf-icon-color);
 }
 
 .icon-btn:active { transform: translateY(1px); }
@@ -308,13 +312,15 @@
 }
 
 .create-menu button:hover {
-  background: var(--accent-50);
-  color: var(--accent-700);
+  background: var(--color-sf-secondary-bg-color-hover);
+  border-color: var(--color-sf-content-text-color);
+  color: var(--color-sf-content-text-color);
 }
 
 /* Badge */
 .badge {
   position: absolute;
+  font-family: 'Roboto', sans-serif;
   top: -4px;
   right: -4px;
   min-width: 18px;
@@ -332,7 +338,14 @@
 }
 
 /* Avatar */
-.topnav-avatar-wrapper { position: relative; }
+.topnav-avatar-wrapper { 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.topnav-avatar-name{
+  margin-left: 10px;
+}
 
 .topnav-avatar {
   width: 36px;
@@ -351,9 +364,9 @@
 }
 
 .topnav-avatar:hover {
-  border-color: var(--accent-100);
-  background: var(--accent-50);
-  color: var(--accent-700);
+  border-color: var(--focus-ring);
+  background: transparent;
+  color: var(--color-sf-icon-color);
 }
 
 .topnav-avatar-menu {
diff --git a/Employee_Managment_App/src/index.css b/Employee_Managment_App/src/index.css
index 06b93dd..48b52d3 100644
--- a/Employee_Managment_App/src/index.css
+++ b/Employee_Managment_App/src/index.css
@@ -15,7 +15,18 @@
   line-height: 1;
   text-transform: none;
 }
-
+#payroll_grid .e-summaryrow .e-leftfreeze.e-summarycell[data-index="2"] {
+  border-right-color: #818cf8;
+  border-right-width: 2px;
+}
+ 
+#payroll_grid.e-grid.e-left-shadow .e-summaryrow .e-leftfreeze.e-summarycell[data-index="2"] {
+    clip-path: inset(0 -15px 0 0);
+    box-shadow: 4px 0 8px rgba(0, 0, 0, 0.12);
+    border-right-width: 0px;
+}
+ 
+ 
 .e-icons.e-small {
   font-size: 8px;
 }
@@ -388,6 +399,33 @@
   content: "\e759";
 }
 
+/* Primary/OK button: hover/focus in Column Chooser */
+.e-dialog .e-footer-content .e-btn.e-primary:hover,
+.e-dialog .e-footer-content .e-btn.e-primary:focus {
+  background-color: var(--color-sf-success) !important; /* subtle green */
+  border-color: var(--color-sf-success) !important;
+  color: var(--color-sf-dialog-border) !important;
+}
+
+/*Disabled primary button on hover */
+
+.e-dialog .e-footer-content .e-btn.e-primary:disabled:hover,
+.e-dialog .e-footer-content .e-btn.e-primary.e-disabled:hover,
+.e-dialog .e-footer-content .e-btn.e-primary[aria-disabled="true"]:hover { 
+  background-color: var(--color-sf-success-bg-color-disabled) !important;
+  border-color: var( --color-sf-success-border-color-disabled) !important;
+}
+
+/* Cancel button: keep subtle grey on hover/focus (not green) */
+
+.e-dialog .e-footer-content .e-btn:not(.e-primary):hover,
+.e-dialog .e-footer-content .e-btn:not(.e-primary):focus {
+  background-color: var(--color-sf-rating-unrated-disabled-color) !important;
+  border-color: var(--color-sf-primary-lighter) !important; 
+  color: var(--color-sf-appbar-bg-color-alt2) !important;         
+}
+
+
 .e-icons.e-italic:before {
   content: "\e75a";
 }
@@ -1908,6 +1946,69 @@
   content: "\e8d5";
 }
 
+/* Override Calendar/DatePicker colors: set selected date and Today to green */
+/* Selected/Start/End day: turn pill green and add green border */
+.e-calendar .e-content td.e-selected span.e-day,
+.e-calendar .e-content td.e-start-date span.e-day,
+.e-calendar .e-content td.e-end-date span.e-day,
+.e-daterangepicker .e-calendar .e-content td.e-selected span.e-day,
+.e-daterangepicker .e-calendar .e-content td.e-start-date span.e-day,
+.e-daterangepicker .e-calendar .e-content td.e-end-date span.e-day {
+  background-color:var(--color-sf-primary-bg-color) !important; 
+  border: 1px solid var(--color-sf-primary-bg-color) !important; /* green border for the selected date */
+  color: var(--color-sf-success-text) !important;
+  box-sizing: border-box;
+  border-radius: 6px !important; /* square with slightly rounded corners */
+}
+
+
+
+/* Today cell accent: green text/border */
+.e-calendar .e-content td.e-today span.e-day,
+.e-daterangepicker .e-calendar .e-content td.e-today span.e-day {
+  border: 1px solid  var(--color-sf-primary-bg-color) !important; /* visible green outline for Today */
+  color:  var(--color-sf-primary-bg-color) !important;
+  background-color: transparent !important;
+  border-radius: 6px !important;
+  box-sizing: border-box;
+}
+/* If Today is also selected, keep the text visible (white on green) */
+.e-calendar .e-content td.e-selected.e-today span.e-day,
+.e-daterangepicker .e-calendar .e-content td.e-selected.e-today span.e-day {
+  color: var(--color-sf-text-input-bg-color) !important;
+  background-color: var(--color-sf-primary-bg-color) !important;
+}
+
+/* Year/Decade view selected item: also green */
+.e-calendar .e-content.e-year td .e-selected,
+.e-calendar .e-content.e-decade td .e-selected {
+  background-color: var(--color-sf-primary-bg-color) !important;
+  color: var(--color-sf-primary-text) !important;
+}
+
+/* Today footer button: force green background/border */
+.e-calendar .e-footer-container .e-btn.e-today,
+.e-datepicker .e-footer-container .e-btn.e-today,
+.e-datepicker.e-popup-wrapper .e-footer-container .e-btn.e-today {
+  background-color: var(--color-sf-primary-bg-color) !important;
+  border-color: var(--color-sf-primary-bg-color) !important;
+  color: var(--color-sf-text-input-bg-color) !important;
+}
+.e-calendar .e-footer-container .e-btn.e-today:hover,
+.e-calendar .e-footer-container .e-btn.e-today:focus,
+.e-calendar .e-footer-container .e-btn.e-today:active,
+.e-datepicker .e-footer-container .e-btn.e-today:hover,
+.e-datepicker .e-footer-container .e-btn.e-today:focus,
+.e-datepicker .e-footer-container .e-btn.e-today:active,
+.e-datepicker.e-popup-wrapper .e-footer-container .e-btn.e-today:hover,
+.e-datepicker.e-popup-wrapper .e-footer-container .e-btn.e-today:focus,
+.e-datepicker.e-popup-wrapper .e-footer-container .e-btn.e-today:active {
+  background-color: var(--color-sf-primary-bg-color) !important;
+  border-color: var(--color-sf-primary-bg-color) !important;
+  color: var(--color-sf-text-input-bg-color) !important;
+}
+
+
 .e-icons.e-frame-mat:before {
   content: "\e8d6";
 }
@@ -2277,7 +2378,7 @@
   --color-sf-spreadsheet-gridline: #dee2e6;
   --color-sf-flyout-border: #e5e7eb;
   --color-sf-dialog-border: #fff;
-  --color-sf-primary: rgba(79, 70, 229);
+  --color-sf-primary: #1ab394;
   --color-sf-primary-text-color: #fff;
   --color-sf-primary-light: #818cf8;
   --color-sf-primary-lighter: #e0e7ff;
@@ -2320,7 +2421,7 @@
   --color-sf-secondary-bg-color: #fff;
   --color-sf-secondary-border-color: #d1d5db;
   --color-sf-secondary-text-color: #374151;
-  --color-sf-secondary-bg-color-hover: #f3f4f6;
+  --color-sf-secondary-bg-color-hover: rgba(158, 158, 158, 0.2);
   --color-sf-secondary-border-color-hover: #d1d5db;
   --color-sf-secondary-text-color-hover: #374151;
   --color-sf-secondary-bg-color-pressed: #e5e7eb;
@@ -4818,7 +4919,7 @@
 
 /* stylelint-disable property-no-vendor-prefix */
 .e-card {
-  -webkit-tap-highlight-color: var(--color-sf-primary);
+  -webkit-tap-highlight-color: var(--color-sf-primary-bg-color);
   background: var(--color-sf-content-bg-color);
   border: 1px solid var(--color-sf-border-light);
   -webkit-box-shadow: none;
@@ -4839,7 +4940,7 @@
 
 .e-card:active {
   background-color: var(--color-sf-content-bg-color-alt2);
-  border-color: var(--color-sf-primary);
+  border-color: var(--color-sf-primary-bg-color);
 }
 
 .e-card .e-card-separator {
@@ -5504,7 +5605,7 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden)::before,
 .e-splitter .e-split-bar.e-split-bar-horizontal .e-navigate-arrow:not(.e-icon-hidden)::after {
-  background-color: var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
   opacity: 0;
   -webkit-transition-duration: 0.3s;
   transition-duration: 0.3s;
@@ -5514,7 +5615,7 @@
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover,
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
-  background: var(--color-sf-primary);
+  background: var(--color-sf-primary-bg-color);
   border-left: none;
   border-right: none;
 }
@@ -5522,7 +5623,7 @@
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-resize-handler,
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active .e-resize-handler {
   background: var(--color-sf-content-bg-color);
-  color: var(--color-sf-primary);
+  color: var(---color-sf-primary-bg-color);
 }
 
 .e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover .e-navigate-arrow.e-arrow-left,
@@ -7116,8 +7217,8 @@
 
 .e-btn.e-primary:hover,
 .e-css.e-btn.e-primary:hover {
-  background: var(--color-sf-primary-bg-color-hover);
-  border-color: var(--color-sf-primary-border-color-hover);
+  background: var(--color-sf-success-bg-color-hover);
+  border-color: var(--color-sf-success-border-color-hover);
   -webkit-box-shadow: none;
   box-shadow: none;
   color: var(--color-sf-primary-text-hover);
@@ -7125,8 +7226,8 @@
 
 .e-btn.e-primary:focus,
 .e-css.e-btn.e-primary:focus {
-  background: var(--color-sf-primary-bg-color-focus);
-  border-color: var(--color-sf-primary-border-color-focus);
+  background: var(--color-sf-success-bg-color-hover);
+  border-color: var(--color-sf-success-bg-color-hover);
   color: var(--color-sf-primary-text-focus);
   outline: var(--color-sf-secondary-bg-color) 0 solid;
 }
@@ -7135,14 +7236,14 @@
 .e-css.e-btn.e-primary:focus-visible {
   background: var(--color-sf-primary-bg-color);
   color: var(--color-sf-primary-text-color);
-  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
-  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
+  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-success-bg-color-hover);
+  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-success-bg-color-hover);
 }
 
 .e-btn.e-primary:active,
 .e-css.e-btn.e-primary:active {
-  background: var(--color-sf-primary-bg-color-pressed);
-  border-color: var(--color-sf-primary-border-color-pressed);
+  background: var(--color-sf-success-bg-color-pressed);
+  border-color: var(--color-sf-success-border-color-pressed);
   color: var(--color-sf-primary-text-pressed);
   outline: var(--color-sf-secondary-bg-color) 0 solid;
   -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
@@ -7484,14 +7585,14 @@
 
 .e-btn.e-flat.e-primary:hover,
 .e-css.e-btn.e-flat.e-primary:hover {
-  background: var(--color-sf-primary-bg-color-hover);
-  border-color: var(--color-sf-primary-border-color-hover);
+  background: var(--color-sf-success-bg-color-hover);
+  border-color: var(--color-sf-success-border-color-hover);
   color: var(--color-sf-primary-text-color);
 }
 
 .e-btn.e-flat.e-primary:focus,
 .e-css.e-btn.e-flat.e-primary:focus {
-  background: var(--color-sf-primary-bg-color-hover);
+  background: var(--color-sf-primary-bg-color);
   border-color: var(--color-sf-primary-border-color-focus);
   color: var(--color-sf-primary-text-focus);
 }
@@ -7517,11 +7618,11 @@
 .e-btn.e-flat.e-primary.e-disabled,
 .e-css.e-btn.e-flat.e-primary:disabled,
 .e-css.e-btn.e-flat.e-primary.e-disabled {
-  background: var(--color-sf-primary-bg-color-disabled);
+  background: var(--color-sf-success-bg-color-disabled);
   border-color: transparent;
   -webkit-box-shadow: none;
   box-shadow: none;
-  color: var(--color-sf-primary-text-disabled);
+  color: var(--color-sf-success-text-disabled);
 }
 
 .e-btn.e-flat.e-primary .e-ripple-element,
@@ -7772,8 +7873,8 @@
 
 .e-btn.e-outline:hover,
 .e-css.e-btn.e-outline:hover {
-  background: var(--color-sf-secondary-bg-color-hover);
-  border-color: var(--color-sf-secondary-border-color-hover);
+  background: transparent;
+  border-color: var(--color-sf-secondary-text-color-hover);
   -webkit-box-shadow: none;
   box-shadow: none;
   color: var(--color-sf-secondary-text-color-hover);
@@ -7798,7 +7899,6 @@
 .e-btn.e-outline.e-active,
 .e-css.e-btn.e-outline:active,
 .e-css.e-btn.e-outline.e-active {
-  background: var(--color-sf-secondary-bg-color-pressed);
   border-color: var(--color-sf-secondary-border-color-pressed);
   -webkit-box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
   box-shadow: 0 0 0 4px rgba(var(--color-sf-secondary-shadow), 0.5);
@@ -7823,7 +7923,7 @@
 
 .e-btn.e-outline.e-primary:hover,
 .e-css.e-btn.e-outline.e-primary:hover {
-  background: var(--color-sf-primary-bg-color-hover);
+  background: var(--color-sf-primary-bg-color);
   border-color: var(--color-sf-primary-border-color-hover);
   color: var(--color-sf-primary-text-hover);
 }
@@ -8740,15 +8840,15 @@
 
 .e-checkbox-wrapper .e-frame.e-check,
 .e-css.e-checkbox-wrapper .e-frame.e-check {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
   color: var(--color-sf-primary-text-color);
 }
 
 .e-checkbox-wrapper .e-frame.e-stop,
 .e-css.e-checkbox-wrapper .e-frame.e-stop {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
   color: var(--color-sf-primary-text-color);
 }
 
@@ -8783,18 +8883,18 @@
 .e-css.e-checkbox-wrapper .e-checkbox:active+.e-frame {
   background-color: var(--color-sf-text-input-bg-color);
   border-color: var(--color-sf-primary-border-color-pressed);
-  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
-  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
+  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary-bg-color);
+  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary-bg-color);
 }
 
 .e-checkbox-wrapper .e-checkbox:focus+.e-frame.e-check,
 .e-checkbox-wrapper .e-checkbox:active+.e-frame.e-check,
 .e-css.e-checkbox-wrapper .e-checkbox:focus+.e-frame.e-check,
 .e-css.e-checkbox-wrapper .e-checkbox:active+.e-frame.e-check {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary-border-color-hover);
-  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
-  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary-bg-color);
+  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary-bg-color);
   color: var(--color-sf-primary-text-color);
 }
 
@@ -8802,31 +8902,31 @@
 .e-checkbox-wrapper .e-checkbox:active+.e-frame.e-stop,
 .e-css.e-checkbox-wrapper .e-checkbox:focus+.e-frame.e-stop,
 .e-css.e-checkbox-wrapper .e-checkbox:active+.e-frame.e-stop {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary-border-color-hover);
-  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
-  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-border-color);
+  -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary-bg-color);
+  box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary-bg-color);
   color: var(--color-sf-primary-text-color);
 }
 
 .e-checkbox-wrapper:hover .e-frame,
 .e-css.e-checkbox-wrapper:hover .e-frame {
   background-color: var(--color-sf-text-input-bg-color);
-  border-color: var(--color-sf-border);
+  border-color: var(--color-sf-primary-border-color);
 }
 
 .e-checkbox-wrapper:hover .e-frame.e-check,
 .e-css.e-checkbox-wrapper:hover .e-frame.e-check {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary);
-  color: var(--color-sf-primary-text-color);
+  background-color: var(--color-sf-primary-bg-color) !important;
+  border-color: var(--color-sf-primary-bg-color) !important;
+  color: var(--color-sf-primary-text-color) !important;
 }
 
 .e-checkbox-wrapper:hover .e-frame.e-stop,
 .e-css.e-checkbox-wrapper:hover .e-frame.e-stop {
   color: var(--color-sf-primary-text-color);
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-bg-color);
 }
 
 .e-checkbox-wrapper:hover .e-label,
@@ -9375,9 +9475,10 @@
   border-color: var(--color-sf-border);
 }
 
+
 .e-radio:checked+label::before {
-  background-color: var(--color-sf-primary);
-  border-color: var(--color-sf-primary);
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-primary-bg-color);
 }
 
 .e-radio:checked+label::after {
@@ -11643,7 +11744,7 @@
 
 .e-chip-list.e-chip.e-primary:not(.e-active) .e-chip-delete.e-dlt-btn:active,
 .e-chip-list .e-chip.e-primary:not(.e-active) .e-chip-delete.e-dlt-btn:active {
-  color: var(--color-sf-chip-primary-icon-color-pressed);
+  color: var(--color-sf-chip-success-icon-color-pressed);
 }
 
 .e-chip-list.e-chip.e-primary:hover,
@@ -11710,20 +11811,20 @@
 .e-chip-list .e-chip.e-primary.e-active {
   background: var(--color-sf-chip-primary-bg-color-pressed);
   border-color: var(--color-sf-chip-primary-border-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-active .e-chip-icon,
 .e-chip-list.e-chip.e-primary.e-active .e-chip-delete,
 .e-chip-list .e-chip.e-primary.e-active .e-chip-icon,
 .e-chip-list .e-chip.e-primary.e-active .e-chip-delete {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-active .e-chip-avatar,
 .e-chip-list .e-chip.e-primary.e-active .e-chip-avatar {
   background-color: var(--color-sf-chip-primary-bg-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary:active,
@@ -11770,27 +11871,27 @@
 .e-chip-list .e-chip.e-primary.e-clone-chip {
   background: var(--color-sf-chip-primary-bg-color-pressed);
   border-color: var(--color-sf-chip-primary-border-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-clone-chip .e-chip-icon,
 .e-chip-list.e-chip.e-primary.e-clone-chip .e-chip-delete,
 .e-chip-list .e-chip.e-primary.e-clone-chip .e-chip-icon,
 .e-chip-list .e-chip.e-primary.e-clone-chip .e-chip-delete {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-clone-chip .e-chip-avatar,
 .e-chip-list .e-chip.e-primary.e-clone-chip .e-chip-avatar {
   background-color: var(--color-sf-chip-primary-bg-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-clone-chip .e-drag-and-drop,
 .e-chip-list.e-chip.e-primary.e-clone-chip.e-error-treeview,
 .e-chip-list .e-chip.e-primary.e-clone-chip .e-drag-and-drop,
 .e-chip-list .e-chip.e-primary.e-clone-chip.e-error-treeview {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline,
@@ -11872,60 +11973,60 @@
 .e-chip-list .e-chip.e-primary.e-outline.e-focused.e-active {
   background: var(--color-sf-primary-bg-color-pressed);
   border-color: var(--color-sf-chip-primary-border-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-focused.e-active .e-chip-icon,
 .e-chip-list.e-chip.e-primary.e-outline.e-focused.e-active .e-chip-delete,
 .e-chip-list .e-chip.e-primary.e-outline.e-focused.e-active .e-chip-icon,
 .e-chip-list .e-chip.e-primary.e-outline.e-focused.e-active .e-chip-delete {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-focused.e-active .e-chip-avatar,
 .e-chip-list .e-chip.e-primary.e-outline.e-focused.e-active .e-chip-avatar {
   background-color: var(--color-sf-primary-bg-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-active,
 .e-chip-list .e-chip.e-primary.e-outline.e-active {
   background: var(--color-sf-chip-primary-bg-color);
   border-color: var(--color-sf-chip-primary-border-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-active .e-chip-icon,
 .e-chip-list.e-chip.e-primary.e-outline.e-active .e-chip-delete,
 .e-chip-list .e-chip.e-primary.e-outline.e-active .e-chip-icon,
 .e-chip-list .e-chip.e-primary.e-outline.e-active .e-chip-delete {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-active .e-chip-avatar,
 .e-chip-list .e-chip.e-primary.e-outline.e-active .e-chip-avatar {
   background-color: var(--color-sf-chip-primary-bg-color);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline:active,
 .e-chip-list .e-chip.e-primary.e-outline:active {
   background: var(--color-sf-primary-bg-color-pressed);
   border-color: var(--color-sf-chip-primary-border-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline:active .e-chip-icon,
 .e-chip-list.e-chip.e-primary.e-outline:active .e-chip-delete,
 .e-chip-list .e-chip.e-primary.e-outline:active .e-chip-icon,
 .e-chip-list .e-chip.e-primary.e-outline:active .e-chip-delete {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline:active .e-chip-avatar,
 .e-chip-list .e-chip.e-primary.e-outline:active .e-chip-avatar {
   background-color: var(--color-sf-primary-bg-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-disabled,
@@ -11952,27 +12053,27 @@
 .e-chip-list .e-chip.e-primary.e-outline.e-clone-chip {
   background: var(--color-sf-chip-primary-bg-color-pressed);
   border-color: var(--color-sf-chip-primary-border-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-clone-chip .e-chip-icon,
 .e-chip-list.e-chip.e-primary.e-outline.e-clone-chip .e-chip-delete,
 .e-chip-list .e-chip.e-primary.e-outline.e-clone-chip .e-chip-icon,
 .e-chip-list .e-chip.e-primary.e-outline.e-clone-chip .e-chip-delete {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-clone-chip .e-chip-avatar,
 .e-chip-list .e-chip.e-primary.e-outline.e-clone-chip .e-chip-avatar {
   background-color: var(--color-sf-chip-primary-bg-color-pressed);
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-primary.e-outline.e-clone-chip .e-drag-and-drop,
 .e-chip-list.e-chip.e-primary.e-outline.e-clone-chip.e-error-treeview,
 .e-chip-list .e-chip.e-primary.e-outline.e-clone-chip .e-drag-and-drop,
 .e-chip-list .e-chip.e-primary.e-outline.e-clone-chip.e-error-treeview {
-  color: var(--color-sf-chip-primary-text-pressed);
+  color: var(--color-sf-chip-success-text-pressed);
 }
 
 .e-chip-list.e-chip.e-success,
@@ -14936,7 +15037,7 @@ ejs-calendar {
 }
 
 .e-calendar .e-content td.e-selected.e-focused-date.e-today span.e-day {
-  background: var(--color-sf-primary-bg-color-hover);
+  background: var(--color-sf-primary-bg-color);
   color: var(--color-sf-primary-text-pressed);
   border-radius: 40px;
 }
@@ -15080,7 +15181,7 @@ ejs-calendar {
 
 .e-calendar .e-btn.e-today.e-flat.e-primary:hover,
 .e-calendar .e-css.e-btn.e-today.e-flat.e-primary:hover {
-  background-color: var(--color-sf-primary-bg-color-hover);
+  background-color: var(--color-sf-primary-bg-color);
   border-color: var(--color-sf-primary-border-color-hover);
   color: var(--color-sf-primary-text-hover);
 }
@@ -15372,7 +15473,7 @@ ejs-calendar {
 
 .e-bigger.e-small .e-calendar .e-content.e-year td.e-selected:hover span.e-day,
 .e-bigger.e-small .e-calendar .e-content.e-decade td.e-selected:hover span.e-day {
-  background-color: var(--color-sf-primary-bg-color-hover);
+  background-color: var(--color-sf-primary-bg-color);
 }
 
 .e-bigger.e-small .e-calendar .e-content.e-year td>span.e-day,
@@ -17716,7 +17817,7 @@ ejs-calendar {
 }
 
 .e-daterangepicker.e-popup .e-calendar .e-content .e-range-hover:not(.e-other-month) span {
-  background: var(--color-sf-primary-lighter);
+  background: var(--color-sf-msg-info-bg-color);
   border: none;
   color: var(--color-sf-content-text-color);
 }
@@ -17764,12 +17865,13 @@ ejs-calendar {
 }
 
 .e-daterangepicker.e-popup .e-presets .e-list-item.e-active {
-  background-color: var(--color-sf-content-bg-color-selected);
+    background-color: var(--color-sf-primary-bg-color);
+    color: var(--color-sf-warning-text-focus);
 }
 
 .e-daterangepicker.e-popup .e-presets .e-list-item.e-hover {
-  background-color: var(--color-sf-content-bg-color-hover);
-  color: var(--color-sf-content-text-color-hover);
+  background-color: var(--color-sf-primary-bg-color);
+  color: var(--color-sf-warning-text-focus);
 }
 
 .e-daterangepicker.e-popup .e-start-label,
@@ -17812,7 +17914,7 @@ ejs-calendar {
 
 .e-daterangepicker.e-popup .e-calendar .e-content .e-end-date.e-selected span.e-day,
 .e-daterangepicker.e-popup .e-calendar .e-content .e-start-date.e-selected span.e-day {
-  background: var(--color-sf-primary);
+  background: var(--color-sf-primary-bg-color);
   border-radius: 0;
 }
 
@@ -33088,10 +33190,10 @@ textarea.e-input::selection,
 .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group) textarea:focus,
 .e-float-input:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input,
 .e-float-input.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error):not(.e-input-group).e-input-focus input {
-  border-color: var(--color-sf-primary);
+  border-color: var(--color-sf-primary-bg-color);
   border-radius: 4px;
-  -webkit-box-shadow: 0 0 0 1px var(--color-sf-primary);
-  box-shadow: 0 0 0 1px var(--color-sf-primary);
+  -webkit-box-shadow: 0 0 0 1px var(---color-sf-primary-bg-color);
+  box-shadow: 0 0 0 1px var(--color-sf-primary-bg-color);
 }
 
 .e-input-group .e-input:focus:not(.e-success):not(.e-warning):not(.e-error),
@@ -33116,10 +33218,10 @@ textarea.e-input::selection,
 
 .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
 .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
-  border-color: var(--color-sf-primary);
+  border-color: var(--color-sf-primary-bg-color);
   border-radius: 4px;
-  -webkit-box-shadow: 0 0 0 1px var(--color-sf-primary);
-  box-shadow: 0 0 0 1px var(--color-sf-primary);
+  -webkit-box-shadow: 0 0 0 1px var(--color-sf-primary-bg-color);
+  box-shadow: 0 0 0 1px var(--color-sf-primary-bg-color);
 }
 
 .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:first-child:focus,
@@ -33154,8 +33256,8 @@ textarea.e-input::selection,
 .e-input-group:not(.e-success):not(.e-warning):not(.e-error),
 .e-input-group.e-control-wrapper:not(.e-success):not(.e-warning):not(.e-error) {
   border-color: var(--color-sf-border);
-  -webkit-box-shadow: 0 1px 2px 0 rgba(var(--color-sf-black), 0.05);
-  box-shadow: 0 1px 2px 0 rgba(var(--color-sf-black), 0.05);
+  -webkit-box-shadow: 0 1px 2px 0 rgba(var(--color-sf-primary-bg-color), 0.05);
+  box-shadow: 0 1px 2px 0 rgba(var(--color-sf-primary-bg-color), 0.05);
 }
 
 .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) .e-input:focus,
@@ -33418,7 +33520,7 @@ textarea.e-input::selection,
 .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input~label.e-float-text,
 .e-float-input.e-control-wrapper.e-small:not(.e-error).e-input-focus input~label.e-float-text,
 .e-small .e-float-input.e-control-wrapper:not(.e-error).e-input-focus input~label.e-float-text {
-  color: rgba(var(--color-sf-primary));
+  color: rgba(var(--color-sf-primary-bg-color));
 }
 
 .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
@@ -33429,7 +33531,7 @@ textarea.e-input::selection,
 .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
 .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
 .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
-  border-color: var(--color-sf-primary);
+  border-color: var(--color-sf-primary-bg-color);
 }
 
 .e-underline.e-input-group:hover:not(.e-input-focus):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
@@ -38403,7 +38505,7 @@ input.e-input.e-bigger.e-small,
 }
 
 .e-control-wrapper.e-slider-container .e-slider .e-handle.e-tab-handle {
-  background-color: var(--color-sf-primary-bg-color-hover);
+  background-color: var(--color-sf-primary-bg-color);
   -webkit-box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
   box-shadow: 0 0 0 2px var(--color-sf-content-bg-color), 0 0 0 4px var(--color-sf-primary);
 }
@@ -38814,7 +38916,7 @@ input.e-input.e-bigger.e-small,
 }
 
 .e-control-wrapper.e-slider-container.e-slider-hover .e-range {
-  background-color: var(--color-sf-primary-bg-color-hover);
+  background-color: var(--color-sf-primary-bg-color);
 }
 
 .e-control-wrapper.e-slider-container.e-slider-hover .e-handle {
@@ -50329,10 +50431,13 @@ body.e-colorpicker-overflow {
   color: var(--color-sf-content-text-color-alt4);
 }
 
+
 .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap:hover {
-  background: inherit;
+  border-color: var(--color-sf-secondary-border-color-hover);
+  background: var(--color-sf-secondary-bg-color-hover);
   border: 0;
   border-radius: 0;
+  color: var(--color-sf-icon-color);
 }
 
 @media screen and (max-width: 480px) {
@@ -57414,7 +57519,7 @@ ejs-sidebar {
 .e-stepper:not(.e-step-type-label) .e-indicator:hover,
 .e-stepper:not(.e-step-type-label) .e-step:hover {
   color: var(--color-sf-primary-text-color);
-  background: var(--color-sf-primary-bg-color-hover);
+  background: var(--color-sf-primary-bg-color);
 }
 
 .e-stepper:not(.e-step-type-label) .e-step-notstarted .e-indicator:hover,
@@ -57628,7 +57733,7 @@ ejs-sidebar {
 }
 
 .e-dialog .e-dlg-header-content+.e-dlg-content {
-  padding-top: 16px;
+  padding-top: 0px !important;
 }
 
 .e-dialog .e-btn .e-btn-icon.e-icon-dlg-close {
@@ -58079,7 +58184,7 @@ ejs-sidebar {
 }
 
 .e-footer-content .e-btn:hover.e-primary.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
-  background: var(--color-sf-primary-bg-color-hover);
+  background: var(--color-sf-primary-bg-color);
 }
 
 .e-footer-content .e-btn.e-flat:not([DISABLED]):not(.e-success):not(.e-danger):not(.e-warning):not(.e-info) {
@@ -68042,7 +68147,7 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 
 .e-grid .e-filtered::before {
-  color: var(--color-sf-primary);
+  color: var(--color-sf-primary-bg-color);
 }
 
 .e-grid .e-gridpopup .e-content {
@@ -70546,7 +70651,13 @@ li.e-separator.e-menu-item.e-excel-separator {
 }
 
 .overview-content #_tab_header_items .e-toolbar-item.e-active {
-  background-color: #1ab394;
+  background-color: var(--color-sf-primary-bg-color);
+}
+
+.overview-content #_tab_header_items .e-toolbar-item.e-active :hover {
+  background-color: var(--color-sf-primary-bg-color);
+  border-color: var(--color-sf-secondary-border-color-hover);
+
 }
 
 .overview-content #_tab_header_items .e-toolbar-item.e-active .e-tab-text {
@@ -71076,6 +71187,7 @@ td.cardcell.separateline {
 .app-sidebar .sidebar-brand .title {
   color: #e5e7eb;
   font-weight: 600;
+  font-size: 16px;
 }
 
 /* Nav items: icon + text; hide text when docked */