diff --git a/airbyte-webapp/src/components/base/Popout/Popout.tsx b/airbyte-webapp/src/components/base/Popout/Popout.tsx
index 915501ca19b6..28053686cab3 100644
--- a/airbyte-webapp/src/components/base/Popout/Popout.tsx
+++ b/airbyte-webapp/src/components/base/Popout/Popout.tsx
@@ -22,14 +22,15 @@ const ControlComponent = (props: ControlProps<Value, false>) => (
   <div ref={props.innerRef}>
     {props.selectProps.selectProps.targetComponent({
       onOpen: props.selectProps.selectProps.onOpen,
+      isOpen: props.selectProps.menuIsOpen,
       value: props.selectProps.value,
     })}
   </div>
 );
 
-type PopoutProps = DropdownProps & {
+interface PopoutProps extends DropdownProps {
   targetComponent: (props: { onOpen: () => void; isOpen?: boolean; value: Value }) => ReactNode;
-};
+}
 
 const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props }) => {
   const [isOpen, toggleOpen] = useToggle(false);
@@ -61,7 +62,10 @@ const Popout: React.FC<PopoutProps> = ({ onChange, targetComponent, ...props })
   return (
     <>
       <DropDown
-        selectProps={{ targetComponent, onOpen: toggleOpen }}
+        selectProps={{
+          targetComponent,
+          onOpen: toggleOpen,
+        }}
         autoFocus
         backspaceRemovesValue={false}
         controlShouldRenderValue={false}
diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
index 6847d9e8fc14..f6251008171d 100644
--- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
+++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
@@ -23,6 +23,7 @@ import SettingsIcon from "views/layout/SideBar/components/SettingsIcon";
 import SidebarPopout, { Icon, Item } from "views/layout/SideBar/components/SidebarPopout";
 import SourceIcon from "views/layout/SideBar/components/SourceIcon";
 import { NotificationIndicator } from "views/layout/SideBar/NotificationIndicator";
+import { useCalculateSidebarStyles, getPopoutStyles } from "views/layout/SideBar/SideBar";
 
 import { RoutePaths } from "../../../../../pages/routePaths";
 
@@ -51,29 +52,6 @@ const Menu = styled.ul`
   width: 100%;
 `;
 
-const MenuItem = styled(NavLink)`
-  color: ${({ theme }) => theme.greyColor30};
-  width: 100%;
-  cursor: pointer;
-  border-radius: 4px;
-  height: 70px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 15px;
-  margin-top: 7px;
-  text-decoration: none;
-  position: relative;
-
-  &.active {
-    color: ${({ theme }) => theme.whiteColor};
-    background: ${({ theme }) => theme.primaryColor};
-  }
-`;
-
 const Text = styled.div`
   margin-top: 7px;
 `;
@@ -102,6 +80,8 @@ const SideBar: React.FC = () => {
   const { show } = useIntercom();
   const handleChatUs = () => show();
 
+  const navLinkClassName = useCalculateSidebarStyles();
+
   return (
     <Bar>
       <div>
@@ -114,58 +94,58 @@ const SideBar: React.FC = () => {
         <Menu>
           {workspace.displaySetupWizard ? (
             <li>
-              <MenuItem to={RoutePaths.Onboarding}>
+              <NavLink className={navLinkClassName} to={RoutePaths.Onboarding}>
                 <OnboardingIcon />
                 <Text>
                   <FormattedMessage id="sidebar.onboarding" />
                 </Text>
-              </MenuItem>
+              </NavLink>
             </li>
           ) : null}
           <li>
-            <MenuItem to={RoutePaths.Connections}>
+            <NavLink className={navLinkClassName} to={RoutePaths.Connections}>
               <ConnectionsIcon />
               <Text>
                 <FormattedMessage id="sidebar.connections" />
               </Text>
-            </MenuItem>
+            </NavLink>
           </li>
           <li>
-            <MenuItem to={RoutePaths.Source}>
+            <NavLink className={navLinkClassName} to={RoutePaths.Source}>
               <SourceIcon />
               <Text>
                 <FormattedMessage id="sidebar.sources" />
               </Text>
-            </MenuItem>
+            </NavLink>
           </li>
           <li>
-            <MenuItem to={RoutePaths.Destination}>
+            <NavLink className={navLinkClassName} to={RoutePaths.Destination}>
               <DestinationIcon />
               <Text>
                 <FormattedMessage id="sidebar.destinations" />
               </Text>
-            </MenuItem>
+            </NavLink>
           </li>
         </Menu>
       </div>
       <Menu>
         <li>
-          <MenuItem to={CloudRoutes.Credits}>
+          <NavLink className={navLinkClassName} to={CloudRoutes.Credits}>
             <CreditsIcon icon={faStar} />
             <Text>
               <FormattedNumber value={cloudWorkspace.remainingCredits} />
             </Text>
-          </MenuItem>
+          </NavLink>
         </li>
         <li>
           <SidebarPopout options={[{ value: "docs" }, { value: "slack" }, { value: "status" }, { value: "recipes" }]}>
-            {({ onOpen }) => (
-              <MenuItem onClick={onOpen} as="div">
+            {({ onOpen, isOpen }) => (
+              <div className={getPopoutStyles(isOpen)} onClick={onOpen}>
                 <DocsIcon />
                 <Text>
                   <FormattedMessage id="sidebar.resources" />
                 </Text>
-              </MenuItem>
+              </div>
             )}
           </SidebarPopout>
         </li>
@@ -186,18 +166,18 @@ const SideBar: React.FC = () => {
               },
             ]}
           >
-            {({ onOpen }) => (
-              <MenuItem onClick={onOpen} as="div">
+            {({ onOpen, isOpen }) => (
+              <div className={getPopoutStyles(isOpen)} onClick={onOpen}>
                 <FontAwesomeIcon icon={faQuestionCircle} size="2x" />
                 <Text>
                   <FormattedMessage id="sidebar.support" />
                 </Text>
-              </MenuItem>
+              </div>
             )}
           </SidebarPopout>
         </li>
         <li>
-          <MenuItem to={RoutePaths.Settings}>
+          <NavLink className={navLinkClassName} to={RoutePaths.Settings}>
             <IfFeatureEnabled feature={FeatureItem.AllowUpdateConnectors}>
               <React.Suspense fallback={null}>
                 <NotificationIndicator />
@@ -207,7 +187,7 @@ const SideBar: React.FC = () => {
             <Text>
               <FormattedMessage id="sidebar.settings" />
             </Text>
-          </MenuItem>
+          </NavLink>
         </li>
       </Menu>
     </Bar>
diff --git a/airbyte-webapp/src/scss/_variables.scss b/airbyte-webapp/src/scss/_variables.scss
index 3fc7b581d800..3422dfa82954 100644
--- a/airbyte-webapp/src/scss/_variables.scss
+++ b/airbyte-webapp/src/scss/_variables.scss
@@ -1,4 +1,5 @@
 $transition: 0.3s;
+$transition-out: all $transition ease-out;
 
 $border-thin: 1px;
 $border-thick: 2px;
diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss
new file mode 100644
index 000000000000..ce6754aa1d73
--- /dev/null
+++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.module.scss
@@ -0,0 +1,55 @@
+@use "../../../scss/colors";
+@use "../../../scss/variables";
+
+.menuItem {
+  color: colors.$grey-30;
+  width: 100%;
+  cursor: pointer;
+  border-radius: 12px;
+  height: 70px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 15px;
+  margin-top: 7px;
+  text-decoration: none;
+  position: relative;
+
+  &:hover,
+  &:focus-visible {
+    background: colors.$dark-blue-800;
+    transition: variables.$transition-out;
+  }
+
+  &.active {
+    color: colors.$white;
+    background: colors.$blue-400;
+    transition: variables.$transition-out;
+
+    &:hover,
+    &:focus-visible {
+      color: colors.$white;
+      background: colors.$blue-300;
+      transition: variables.$transition-out;
+    }
+  }
+
+  &.activeChild {
+    color: colors.$white;
+    background: colors.$dark-blue-600;
+
+    &:hover,
+    &:focus-visible {
+      color: colors.$white;
+      background: colors.$dark-blue-400;
+    }
+  }
+
+  &.popoutOpen {
+    background: colors.$dark-blue-600;
+    transition: variables.$transition-out;
+  }
+}
diff --git a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx
index 80d20629b5d5..893a6c65fbe6 100644
--- a/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx
+++ b/airbyte-webapp/src/views/layout/SideBar/SideBar.tsx
@@ -1,5 +1,6 @@
 import { faRocket } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import classnames from "classnames";
 import React from "react";
 import { FormattedMessage } from "react-intl";
 import { NavLink } from "react-router-dom";
@@ -10,6 +11,7 @@ import Version from "components/Version";
 
 import { useConfig } from "config";
 import { useCurrentWorkspace } from "hooks/services/useWorkspace";
+import useRouter from "hooks/useRouter";
 
 import { RoutePaths } from "../../../pages/routePaths";
 import ConnectionsIcon from "./components/ConnectionsIcon";
@@ -20,6 +22,7 @@ import SettingsIcon from "./components/SettingsIcon";
 import SidebarPopout from "./components/SidebarPopout";
 import SourceIcon from "./components/SourceIcon";
 import { NotificationIndicator } from "./NotificationIndicator";
+import styles from "./SideBar.module.scss";
 
 const Bar = styled.nav`
   width: 100px;
@@ -41,45 +44,6 @@ const Menu = styled.ul`
   width: 100%;
 `;
 
-const MenuItem = styled(NavLink)`
-  color: ${({ theme }) => theme.greyColor30};
-  width: 100%;
-  cursor: pointer;
-  border-radius: 4px;
-  height: 70px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 15px;
-  margin-top: 7px;
-  text-decoration: none;
-  position: relative;
-
-  &.active {
-    color: ${({ theme }) => theme.whiteColor};
-    background: ${({ theme }) => theme.primaryColor};
-  }
-`;
-
-const MenuLinkItem = styled.a`
-  color: ${({ theme }) => theme.greyColor30};
-  width: 100%;
-  cursor: pointer;
-  height: 70px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 15px;
-  margin-top: 7px;
-  text-decoration: none;
-`;
-
 const Text = styled.div`
   margin-top: 7px;
 `;
@@ -89,10 +53,27 @@ const HelpIcon = styled(FontAwesomeIcon)`
   line-height: 21px;
 `;
 
+export const useCalculateSidebarStyles = () => {
+  const { location } = useRouter();
+
+  const menuItemStyle = (isActive: boolean) => {
+    const isChild = location.pathname.split("/").length > 4 && location.pathname.split("/")[3] !== "settings";
+    return classnames(styles.menuItem, { [styles.active]: isActive, [styles.activeChild]: isChild && isActive });
+  };
+
+  return ({ isActive }: { isActive: boolean }) => menuItemStyle(isActive);
+};
+
+export const getPopoutStyles = (isOpen?: boolean) => {
+  return classnames(styles.menuItem, { [styles.popoutOpen]: isOpen });
+};
+
 const SideBar: React.FC = () => {
   const config = useConfig();
   const workspace = useCurrentWorkspace();
 
+  const navLinkClassName = useCalculateSidebarStyles();
+
   return (
     <Bar>
       <div>
@@ -102,69 +83,64 @@ const SideBar: React.FC = () => {
         <Menu>
           {workspace.displaySetupWizard ? (
             <li>
-              <MenuItem to={RoutePaths.Onboarding}>
+              <NavLink className={navLinkClassName} to={RoutePaths.Onboarding}>
                 <OnboardingIcon />
                 <Text>
                   <FormattedMessage id="sidebar.onboarding" />
                 </Text>
-              </MenuItem>
+              </NavLink>
             </li>
           ) : null}
           <li>
-            <MenuItem to={RoutePaths.Connections}>
+            <NavLink className={navLinkClassName} to={RoutePaths.Connections}>
               <ConnectionsIcon />
               <Text>
                 <FormattedMessage id="sidebar.connections" />
               </Text>
-            </MenuItem>
+            </NavLink>
           </li>
           <li>
-            <MenuItem to={RoutePaths.Source}>
+            <NavLink className={navLinkClassName} to={RoutePaths.Source}>
               <SourceIcon />
               <Text>
                 <FormattedMessage id="sidebar.sources" />
               </Text>
-            </MenuItem>
+            </NavLink>
           </li>
           <li>
-            <MenuItem to={RoutePaths.Destination}>
+            <NavLink className={navLinkClassName} to={RoutePaths.Destination}>
               <DestinationIcon />
               <Text>
                 <FormattedMessage id="sidebar.destinations" />
               </Text>
-            </MenuItem>
+            </NavLink>
           </li>
         </Menu>
       </div>
       <Menu>
         <li>
-          <MenuLinkItem href={config.links.updateLink} target="_blank">
+          <a href={config.links.updateLink} target="_blank" rel="noreferrer" className={styles.menuItem}>
             <HelpIcon icon={faRocket} />
             <Text>
               <FormattedMessage id="sidebar.update" />
             </Text>
-          </MenuLinkItem>
+          </a>
         </li>
         <li>
           <SidebarPopout options={[{ value: "docs" }, { value: "slack" }, { value: "recipes" }]}>
-            {({ onOpen }) => (
-              <MenuItem onClick={onOpen} as="div">
+            {({ onOpen, isOpen }) => (
+              <div className={getPopoutStyles(isOpen)} onClick={onOpen}>
                 <DocsIcon />
                 <Text>
                   <FormattedMessage id="sidebar.resources" />
                 </Text>
-              </MenuItem>
+              </div>
             )}
           </SidebarPopout>
         </li>
 
         <li>
-          <MenuItem
-            to={RoutePaths.Settings}
-            // isActive={(_, location) =>
-            //   location.pathname.startsWith(RoutePaths.Settings)
-            // }
-          >
+          <NavLink className={navLinkClassName} to={RoutePaths.Settings}>
             <React.Suspense fallback={null}>
               <NotificationIndicator />
             </React.Suspense>
@@ -172,7 +148,7 @@ const SideBar: React.FC = () => {
             <Text>
               <FormattedMessage id="sidebar.settings" />
             </Text>
-          </MenuItem>
+          </NavLink>
         </li>
         {config.version ? (
           <li>
diff --git a/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx b/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx
index 6bd93af12a3b..842732987692 100644
--- a/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx
+++ b/airbyte-webapp/src/views/layout/SideBar/components/SidebarPopout.tsx
@@ -29,7 +29,7 @@ export const Icon = styled.div`
 `;
 
 const SidebarPopout: React.FC<{
-  children: (props: { onOpen: () => void }) => React.ReactNode;
+  children: (props: { onOpen: () => void; isOpen?: boolean }) => React.ReactNode;
   options: Array<{ value: string; label?: React.ReactNode }>;
 }> = ({ children, options }) => {
   const config = useConfig();
@@ -110,7 +110,12 @@ const SidebarPopout: React.FC<{
 
   return (
     <Popout
-      targetComponent={(targetProps) => children({ onOpen: targetProps.onOpen })}
+      targetComponent={(targetProps) =>
+        children({
+          onOpen: targetProps.onOpen,
+          isOpen: targetProps.isOpen,
+        })
+      }
       styles={{
         menuPortal: (base) => ({
           ...base,