diff --git a/cats-frontend/src/App.tsx b/cats-frontend/src/App.tsx
index 056505f6..980b33e2 100644
--- a/cats-frontend/src/App.tsx
+++ b/cats-frontend/src/App.tsx
@@ -1,13 +1,11 @@
-import './App.css';
-import Header from './app/components/navigation/Header';
-import {
-  Outlet,
-} from 'react-router-dom';
-import '@bcgov/bc-sans/css/BCSans.css';
-import { ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import SideBar from './app/components/navigation/SideBar';
-import '@bcgov/bc-sans/css/BCSans.css';
+import "./App.css";
+import Header from "./app/components/navigation/Header";
+import { Outlet } from "react-router-dom";
+import "@bcgov/bc-sans/css/BCSans.css";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import SideBar from "./app/components/navigation/SideBar";
+import "@bcgov/bc-sans/css/BCSans.css";
 
 function App() {
   // const routes:RouteObject[] = [
diff --git a/cats-frontend/src/app/components/navigation/Header.css b/cats-frontend/src/app/components/navigation/Header.css
index f2d2fa8a..8b5927c9 100644
--- a/cats-frontend/src/app/components/navigation/Header.css
+++ b/cats-frontend/src/app/components/navigation/Header.css
@@ -1,25 +1,29 @@
 header {
-  background-color: #053662;
-  border-bottom: 2px solid #f8ba47;
+  /* background-color: #053662; */
+  border-bottom: 1px solid var(--surface-color-border-light, #d8d8d8);
   /* padding: 0 65px 0 65px; */
-  padding: 10px var(--layout-padding-xlarge) 11px var(--layout-padding-xlarge) !important;
-  color: #fff;
+  padding: 0px var(--layout-padding-xlarge) 0px var(--layout-padding-xlarge) !important;
+  color: var(--typography-color-link);
   display: flex;
   height: 65px;
   top: 0px;
   width: 100%;
   z-index: 99999 !important;
+  background-color: #ffffff;
 }
 
 .logo {
-  height: 41px;
+  height: 54px;
 }
 
 header h1 {
-  font-family: 'BCSans';
+  font-family: "BCSans";
   font-weight: normal; /* 400 */
   margin: 5px 5px 0 18px;
   visibility: hidden;
+  font-size: 24px;
+  border-left: 1px solid var(--surface-color-border-light);
+  padding-left: 24px;
 }
 
 header .banner {
@@ -30,12 +34,12 @@ header .banner {
   /* border-style: dotted;
     border-width: 1px;
     border-color: lightgrey; */
-  padding-left: 24px;
+  /* padding-left: 24px; */
 }
 
-header .siteName {
+/* header .siteName {
   margin-left: 24px;
-}
+} */
 
 header .other {
   display: flex;
@@ -62,7 +66,7 @@ header .other {
 }
 
 .bars-button {
-  color: var(--typography-color-primary-invert);
+  color: var(#2d2d2d);
   font-size: 21px;
   font-weight: 900;
   line-height: 21px;
@@ -85,13 +89,21 @@ header .other {
 
 @media screen and (max-width: 599px) {
   header h1 {
-    display: none;
+    font-size: 24px;
+    visibility: visible;
+    display: flex;
+    padding-left: 12px;
+    margin: 0px;
+  }
+
+  .logo {
+    height: 44px;
   }
 }
 
 @media screen and (min-width: 600px) and (max-width: 899px) {
   header h1 {
-    font-size: calc(5px + 2vw);
+    font-size: 24px;
     visibility: visible;
     display: flex;
   }
@@ -99,7 +111,7 @@ header .other {
 
 @media screen and (min-width: 900px) {
   header h1 {
-    font-size: 2em;
+    font-size: 24px;
     visibility: visible;
     display: flex;
   }
@@ -147,9 +159,21 @@ header .other {
   .navbar-for-small-device {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
   }
 
   .header-right-corner-section {
     gap: var(--layout-padding-small);
+    align-self: flex-end;
   }
 }
+
+.custom-toggler {
+  border: 1px solid var(--surface-border-dark);
+  border-radius: 0px;
+}
+
+.no-link-style {
+  text-decoration: none !important;
+  color: var(--typography-color-link) !important;
+}
diff --git a/cats-frontend/src/app/components/navigation/Header.tsx b/cats-frontend/src/app/components/navigation/Header.tsx
index 29152dd4..2853cdfe 100644
--- a/cats-frontend/src/app/components/navigation/Header.tsx
+++ b/cats-frontend/src/app/components/navigation/Header.tsx
@@ -1,14 +1,15 @@
-import logo from '../../../app/images/logos/logo-banner.png';
+import "@bcgov/design-tokens/css/variables.css";
+import logo from "../../../app/images/logos/logo-banner.png";
 
-import './Header.css';
-import moon from '../../images/moon.png';
-import { BarsIcon } from '../common/icon';
-import { useState } from 'react';
-import MobileNavMenu from './MobileNavMenu';
-import LanguageSwitcher from '../language/LanguageSwitcher';
-import UserAccount from '../account/UserAccount';
-import { LoginDropdown } from '../login/LoginDropdown';
-import { getUser } from '../../helpers/utility';
+import "./Header.css";
+import moon from "../../images/moon.png";
+import { BarsIcon } from "../common/icon";
+import { useState } from "react";
+import MobileNavMenu from "./MobileNavMenu";
+import LanguageSwitcher from "../language/LanguageSwitcher";
+import UserAccount from "../account/UserAccount";
+import { LoginDropdown } from "../login/LoginDropdown";
+import { getUser } from "../../helpers/utility";
 
 const Header = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -19,41 +20,42 @@ const Header = () => {
     setIsOpen(!isOpen);
   };
 
-
-
   return (
     <header className="navbar position-sticky navbar-for-small-device">
       <div className="banner" tabIndex={1} role="navigation">
         <a href="https://gov.bc.ca">
           <img src={logo} className="logo" alt="BC Government Logo" />
         </a>
-        <h1 className="siteName">CATS</h1>
+        <a href="/" className="no-link-style">
+          <h1 className="siteName">CATS </h1>
+        </a>
       </div>
       <div className="header-right-corner-section d-flex align-items-center">
-        <LanguageSwitcher />
+        {/* <LanguageSwitcher /> */}
 
         <button
-          className="navbar-toggler display-upto-medium no-bg-br-outline"
+          className="navbar-toggler display-upto-medium no-bg-br-outline custom-toggler"
           type="button"
           onClick={toggleNavbar}
           aria-label="menu for mobile/smaller devices"
-          aria-expanded={isOpen ? 'true' : 'false'}
+          aria-expanded={isOpen ? "true" : "false"}
           aria-controls="navbarMenu"
           aria-haspopup="true"
         >
           <BarsIcon className="bars-button" />
         </button>
-        <div className="d-sm-none d-md-flex d-none">
-          {/* Profile image */}
-          <img src={moon} alt="Moon image for theme." />
-        </div>
-        {user == null && LoginDropdown('Login')}
+
+        {/* <div className="d-sm-none d-md-flex d-none">       
+        <img src={moon} alt="Moon image for theme." />
+      </div> */}
+        {user == null && LoginDropdown("Sign in")}
         {!isOpen && user !== null && <UserAccount mobileView={isOpen} />}
       </div>
       <div
         role="menu"
-        className={`small-screen-menu mobile-menu ${isOpen ? 'show' : 'd-none'
-          }`}
+        className={`small-screen-menu mobile-menu ${
+          isOpen ? "show" : "d-none"
+        }`}
         onClick={() => toggleNavbar()}
       >
         <MobileNavMenu toggleOpen={toggleNavbar} mobileView={isOpen} />
diff --git a/cats-frontend/src/app/components/navigation/SideBar.css b/cats-frontend/src/app/components/navigation/SideBar.css
index 39f8ef79..b7766fa0 100644
--- a/cats-frontend/src/app/components/navigation/SideBar.css
+++ b/cats-frontend/src/app/components/navigation/SideBar.css
@@ -3,7 +3,7 @@
   --side-bar-padding-medium: var(--layout-padding-medium);
   --side-bar-background-color: #ffffff;
   --side-bar-shadow: 0px 3.2px 7.2px 0px rgba(0, 0, 0, 0.13);
-  --current-path-background-color: #053662;
+  --current-path-background-color: var(--surface-primary-default);
   --side-bar-text-color: var(--surface-primary-default);
   --side-bar-text-hover-color: #ffffff;
 }
@@ -14,17 +14,20 @@
   background: var(--side-bar-background-color);
   box-shadow: var(--side-bar-shadow);
   top: 65px;
-  padding: var(--layout-padding-large) var(--layout-padding-medium)
-    var(--layout-padding-large) var(--layout-padding-medium);
+  padding: var(--layout-padding-large) var(--layout-padding-large)
+    var(--layout-padding-large) var(--layout-padding-large);
   justify-content: space-between;
   min-height: calc(100vh - 65px) !important;
   border-right: 1px solid var(--surface-border-light, #d8d8d8);
+  min-width: 84px;
+  z-index: 9999;
+  max-width: 128px;
 }
 
 .side-bar:hover {
-  width: 160px;
-  z-index: 1000;
+  width: 240px;
   position: sticky;
+  max-width: 240px;
 }
 
 .side-bar:hover .sideBar-Nav {
@@ -64,8 +67,7 @@
 .sideBar-NavItem {
   height: 40px;
   padding: var(--layout-padding-small);
-  border-radius: var(--layout-padding-small);
-  cursor: pointer;
+  cursor: default;
   display: flex;
   align-items: center;
   gap: 5px;
@@ -143,3 +145,29 @@
   display: block;
   text-decoration: none;
 }
+
+.sidebar-menu-group {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+}
+
+.side-bar:hover .sidebar-menu-group {
+  align-items: flex-start;
+  width: 100%;
+}
+
+.side-bar:hover .currentPath {
+  justify-content: flex-start;
+}
+
+.side-bar:hover .sideBar-menu-item-hover:hover {
+  background: var(--surface-primary-hover);
+  width: 100%;
+}
+
+.side-bar:hover .sideBar-menu-item-hover:hover .sideBar-Icon,
+.side-bar:hover .sideBar-menu-item-hover:hover .sideBarDisplayText {
+  color: white !important;
+}
diff --git a/cats-frontend/src/app/components/navigation/navigationpills/NavigationPills.css b/cats-frontend/src/app/components/navigation/navigationpills/NavigationPills.css
index 67c32de0..2419d697 100644
--- a/cats-frontend/src/app/components/navigation/navigationpills/NavigationPills.css
+++ b/cats-frontend/src/app/components/navigation/navigationpills/NavigationPills.css
@@ -1,50 +1,3 @@
-.custom-nav-pill {
-  padding: var(--layout-padding-xsmall) var(--layout-padding-small)
-    var(--layout-padding-xsmall) var(--layout-padding-small);
-  border-radius: var(--surface-border-radius-medium);
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 16px;
-  text-align: center;
-  text-decoration: none;
-}
-
-.custom-nav-pill.default:first-child {
-  background: var(--surface-primary-default, #053662);
-  color: var(--typography-color-primary-invert, #ffffff);
-}
-
-.custom-nav-pill.active {
-  background: var(--surface-primary-default, #053662);
-  color: var(--typography-color-primary-invert, #ffffff);
-}
-
-.custom-nav-pill.disabled {
-  color: var(--typography-color-disabled);
-}
-
-.custom-nav-pill.enabled {
-  color: var(--typography-color-primary, #2d2d2d) !important;
-}
-
-.custom-nav-btn {
-  display: flex !important;
-  justify-content: center;
-  align-items: center;
-  border: 1px solid var(--surface-border-dark, #353433) !important;
-  padding: var(--layout-padding-xsmall) var(--layout-padding-small)
-    var(--layout-padding-xsmall) var(--layout-padding-small) !important;
-  border-radius: var(--surface-border-radius-medium) !important;
-  gap: var(--layout-margin-xsmall);
-  background: var(--surface-background-white, #ffffff);
-  color: var(--typography-color-primary, #2d2d2d) !important;
-  text-align: center !important;
-  font-size: 12px !important;
-  font-style: normal !important;
-  font-weight: 400 !important;
-  line-height: 16px !important;
-}
-
 .custom-nav-carousel-left-icon {
   background-image: url(../../../images/carousel-left-button.svg) !important;
   padding: var(--layout-padding-xsmall) var(--layout-padding-small)
@@ -68,33 +21,13 @@
 
 @media screen and (max-width: 786px) {
   .custom-nav-btn {
-    display: flex !important;
     justify-content: space-between;
-    align-items: center;
-    border: 1px solid var(--surface-border-dark, #353433) !important;
-    padding: var(--layout-padding-small) var(--layout-padding-medium)
-      var(--layout-padding-small) var(--layout-padding-medium) !important;
-    border-radius: var(--surface-border-radius-medium) !important;
-    gap: var(--layout-margin-small);
-    background: var(--surface-background-white, #ffffff);
-    color: var(--typography-color-primary, #2d2d2d) !important;
-    text-align: center !important;
-    font-size: 16px !important;
-    font-style: normal !important;
-    font-weight: 400 !important;
-    line-height: 24px !important;
     width: 100%;
     margin-bottom: 16px;
   }
   .custom-nav-pill {
-    padding: var(--layout-padding-small) var(--layout-padding-medium)
-      var(--layout-padding-small) var(--layout-padding-medium) !important;
-    border-radius: var(--surface-border-radius-medium);
-    font-size: 16px;
-    font-weight: 400;
-    line-height: 24px;
-    text-align: center;
-    text-decoration: none;
+    width: 100%;
+    justify-content: center;
   }
 
   .custom-nav-carousel-left-icon {
diff --git a/cats-frontend/src/app/images/logos/logo-banner.png b/cats-frontend/src/app/images/logos/logo-banner.png
index 17660d3e..86920241 100644
Binary files a/cats-frontend/src/app/images/logos/logo-banner.png and b/cats-frontend/src/app/images/logos/logo-banner.png differ