diff --git a/src/app.tsx b/src/app.tsx
index ba4c4e721..c7d7ba8fd 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -61,7 +61,7 @@ export const App = () => {
               }
             />
             <Route
-              path="/accounts"
+              path="/settings/accounts"
               element={
                 <RequireAuth>
                   <AccountsRoute />
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index e5c007f45..7656a5b92 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -110,6 +110,7 @@ export const Sidebar: FC = () => {
               icon={FilterIcon}
               size={Size.MEDIUM}
               metric={filterCount}
+              route={'/filters'}
               onClick={() => toggleFilters()}
             />
 
@@ -117,6 +118,7 @@ export const Sidebar: FC = () => {
               title="Settings"
               icon={GearIcon}
               size={Size.MEDIUM}
+              route={'/settings'}
               onClick={() => toggleSettings()}
             />
           </>
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index 0af5dada7..8031f87f7 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
             </svg>
           </button>
           <button
-            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 py-1"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 shadow-green-500 py-1"
             title="4 Unread Notifications"
             type="button"
           >
@@ -85,7 +85,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
             4
           </button>
           <button
-            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
             title="My Issues"
             type="button"
           >
@@ -109,7 +109,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
             </svg>
           </button>
           <button
-            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
             title="My Pull Requests"
             type="button"
           >
@@ -134,7 +134,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           class="px-3 py-4"
         >
           <button
-            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-2"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-2"
             title="Quit Gitify"
             type="button"
           >
@@ -217,7 +217,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           </svg>
         </button>
         <button
-          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 py-1"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 shadow-green-500 py-1"
           title="4 Unread Notifications"
           type="button"
         >
@@ -239,7 +239,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           4
         </button>
         <button
-          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
           title="My Issues"
           type="button"
         >
@@ -263,7 +263,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           </svg>
         </button>
         <button
-          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
           title="My Pull Requests"
           type="button"
         >
@@ -288,7 +288,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         class="px-3 py-4"
       >
         <button
-          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-2"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-2"
           title="Quit Gitify"
           type="button"
         >
@@ -428,7 +428,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
             </svg>
           </button>
           <button
-            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 py-1"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 shadow-green-500 py-1"
             title="4 Unread Notifications"
             type="button"
           >
@@ -450,7 +450,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
             4
           </button>
           <button
-            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
             title="My Issues"
             type="button"
           >
@@ -474,7 +474,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
             </svg>
           </button>
           <button
-            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
             title="My Pull Requests"
             type="button"
           >
@@ -499,7 +499,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           class="px-3 py-4"
         >
           <button
-            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-2"
+            class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-2"
             title="Quit Gitify"
             type="button"
           >
@@ -582,7 +582,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           </svg>
         </button>
         <button
-          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 py-1"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 shadow-green-500 py-1"
           title="4 Unread Notifications"
           type="button"
         >
@@ -604,7 +604,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           4
         </button>
         <button
-          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
           title="My Issues"
           type="button"
         >
@@ -628,7 +628,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           </svg>
         </button>
         <button
-          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
           title="My Pull Requests"
           type="button"
         >
@@ -653,7 +653,7 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         class="px-3 py-4"
       >
         <button
-          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-2"
+          class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-2"
           title="Quit Gitify"
           type="button"
         >
diff --git a/src/components/buttons/SidebarButton.test.tsx b/src/components/buttons/SidebarButton.test.tsx
index 7fb2f3172..f5166be54 100644
--- a/src/components/buttons/SidebarButton.test.tsx
+++ b/src/components/buttons/SidebarButton.test.tsx
@@ -1,5 +1,6 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { Size } from '../../types';
 import { type ISidebarButton, SidebarButton } from './SidebarButton';
 
@@ -10,7 +11,11 @@ describe('components/buttons/SidebarButton.tsx', () => {
       metric: 1,
       icon: MarkGithubIcon,
     };
-    const tree = render(<SidebarButton {...props} />);
+    const tree = render(
+      <MemoryRouter>
+        <SidebarButton {...props} />
+      </MemoryRouter>,
+    );
     expect(tree).toMatchSnapshot();
   });
 
@@ -20,7 +25,11 @@ describe('components/buttons/SidebarButton.tsx', () => {
       metric: 0,
       icon: MarkGithubIcon,
     };
-    const tree = render(<SidebarButton {...props} />);
+    const tree = render(
+      <MemoryRouter>
+        <SidebarButton {...props} />
+      </MemoryRouter>,
+    );
     expect(tree).toMatchSnapshot();
   });
 
@@ -31,7 +40,11 @@ describe('components/buttons/SidebarButton.tsx', () => {
       icon: MarkGithubIcon,
       size: Size.MEDIUM,
     };
-    const tree = render(<SidebarButton {...props} />);
+    const tree = render(
+      <MemoryRouter>
+        <SidebarButton {...props} />
+      </MemoryRouter>,
+    );
     expect(tree).toMatchSnapshot();
   });
 });
diff --git a/src/components/buttons/SidebarButton.tsx b/src/components/buttons/SidebarButton.tsx
index ea9c11398..9dd2621c0 100644
--- a/src/components/buttons/SidebarButton.tsx
+++ b/src/components/buttons/SidebarButton.tsx
@@ -1,5 +1,6 @@
 import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
+import { useLocation } from 'react-router-dom';
 import { IconColor, Size } from '../../types';
 import { cn } from '../../utils/cn';
 
@@ -7,6 +8,7 @@ export interface ISidebarButton {
   title: string;
   metric?: number;
   icon: Icon;
+  route?: string;
   onClick?: () => void;
   size?: Size;
   loading?: boolean;
@@ -14,16 +16,21 @@ export interface ISidebarButton {
 }
 
 export const SidebarButton: FC<ISidebarButton> = (props: ISidebarButton) => {
+  const location = useLocation();
+
   const hasMetric = props?.metric > 0;
 
+  const isRoute = location.pathname.startsWith(props.route);
+
   return (
     <button
       type="button"
       className={cn(
-        'flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default',
+        'flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500  disabled:cursor-default',
         hasMetric
-          ? `${IconColor.GREEN} hover:text-green-700`
-          : `${IconColor.WHITE} hover:text-gray-500`,
+          ? `${IconColor.GREEN} hover:text-green-700 shadow-green-500`
+          : `${IconColor.WHITE} hover:text-gray-500 shadow-white`,
+        isRoute && 'shadow',
         props.loading ? 'animate-spin' : undefined,
         props.size ? 'py-2' : 'py-1',
       )}
diff --git a/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
index c4c6cf409..257988a0e 100644
--- a/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
+++ b/src/components/buttons/__snapshots__/SidebarButton.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/buttons/SidebarButton.tsx should render - with specific size
   "baseElement": <body>
     <div>
       <button
-        class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-2"
+        class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-2"
         title="Mock Sidebar Button"
         type="button"
       >
@@ -30,7 +30,7 @@ exports[`components/buttons/SidebarButton.tsx should render - with specific size
   </body>,
   "container": <div>
     <button
-      class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-2"
+      class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-2"
       title="Mock Sidebar Button"
       type="button"
     >
@@ -111,7 +111,7 @@ exports[`components/buttons/SidebarButton.tsx should render with metric 1`] = `
   "baseElement": <body>
     <div>
       <button
-        class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 py-1"
+        class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 shadow-green-500 py-1"
         title="Mock Sidebar Button"
         type="button"
       >
@@ -136,7 +136,7 @@ exports[`components/buttons/SidebarButton.tsx should render with metric 1`] = `
   </body>,
   "container": <div>
     <button
-      class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 py-1"
+      class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-green-500 hover:text-green-700 shadow-green-500 py-1"
       title="Mock Sidebar Button"
       type="button"
     >
@@ -218,7 +218,7 @@ exports[`components/buttons/SidebarButton.tsx should render without metric 1`] =
   "baseElement": <body>
     <div>
       <button
-        class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+        class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
         title="Mock Sidebar Button"
         type="button"
       >
@@ -242,7 +242,7 @@ exports[`components/buttons/SidebarButton.tsx should render without metric 1`] =
   </body>,
   "container": <div>
     <button
-      class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 py-1"
+      class="flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold rounded-md focus:outline-none disabled:text-gray-500 disabled:cursor-default text-white hover:text-gray-500 shadow-white py-1"
       title="Mock Sidebar Button"
       type="button"
     >
diff --git a/src/components/settings/SettingsFooter.test.tsx b/src/components/settings/SettingsFooter.test.tsx
index ddd6bf31a..3cdf9ee24 100644
--- a/src/components/settings/SettingsFooter.test.tsx
+++ b/src/components/settings/SettingsFooter.test.tsx
@@ -123,7 +123,7 @@ describe('routes/components/settings/SettingsFooter.tsx', () => {
     });
 
     fireEvent.click(screen.getByTitle('Accounts'));
-    expect(mockNavigate).toHaveBeenCalledWith('/accounts');
+    expect(mockNavigate).toHaveBeenCalledWith('/settings/accounts');
   });
 
   it('should quit the app', async () => {
diff --git a/src/components/settings/SettingsFooter.tsx b/src/components/settings/SettingsFooter.tsx
index 54d4c4708..f81888ae6 100644
--- a/src/components/settings/SettingsFooter.tsx
+++ b/src/components/settings/SettingsFooter.tsx
@@ -37,7 +37,7 @@ export const SettingsFooter: FC = () => {
           className={BUTTON_CLASS_NAME}
           title="Accounts"
           onClick={() => {
-            navigate('/accounts');
+            navigate('/settings/accounts');
           }}
         >
           <PersonIcon size={Size.LARGE} aria-label="Accounts" />
diff --git a/src/types.ts b/src/types.ts
index fd6f0822b..c53273b82 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -140,6 +140,7 @@ export interface FormattedReason {
 export enum IconColor {
   GRAY = 'text-gray-500 dark:text-gray-300',
   GREEN = 'text-green-500',
+  ORANGE = 'text-orange-500',
   PURPLE = 'text-purple-500',
   RED = 'text-red-500',
   YELLOW = 'text-yellow-500 dark:text-yellow-300',