diff --git a/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.html b/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.html
index a9b5d311bd..293c024ac4 100644
--- a/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.html
+++ b/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.html
@@ -12,8 +12,12 @@
       <a
         *ngFor="let product of products.bento"
         [routerLink]="product.appRoute"
+        [ngClass]="
+          product.isActive
+            ? 'tw-bg-primary-500 tw-font-bold !tw-text-contrast tw-ring-offset-2 hover:tw-bg-primary-500'
+            : ''
+        "
         class="tw-group tw-flex tw-h-24 tw-w-28 tw-flex-col tw-items-center tw-justify-center tw-rounded tw-p-1 tw-text-primary-500 tw-outline-none hover:tw-bg-background-alt hover:tw-text-primary-700 hover:tw-no-underline focus-visible:!tw-ring-2 focus-visible:!tw-ring-primary-700"
-        routerLinkActive="tw-font-bold tw-bg-primary-500 hover:tw-bg-primary-500 !tw-text-contrast tw-ring-offset-2"
         ariaCurrentWhenActive="page"
       >
         <i class="bwi {{ product.icon }} tw-text-4xl !tw-m-0 !tw-mb-1"></i>
diff --git a/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.ts b/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.ts
index 21f186aa6a..95b4c04d5e 100644
--- a/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.ts
+++ b/apps/web/src/app/layouts/product-switcher/product-switcher-content.component.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild } from "@angular/core";
-import { ActivatedRoute } from "@angular/router";
+import { ActivatedRoute, Router } from "@angular/router";
 import { combineLatest, map } from "rxjs";
 
 import { OrganizationService } from "@bitwarden/common/admin-console/abstractions/organization/organization.service.abstraction";
@@ -25,6 +25,11 @@ type ProductSwitcherItem = {
    * Route for items in the `otherProducts$` section
    */
   marketingRoute?: string | any[];
+
+  /**
+   * Used to apply css styles to show when a button is selected
+   */
+  isActive?: boolean;
 };
 
 @Component({
@@ -56,12 +61,14 @@ export class ProductSwitcherContentComponent {
           icon: "bwi-lock",
           appRoute: "/vault",
           marketingRoute: "https://bitwarden.com/products/personal/",
+          isActive: !this.router.url.includes("/sm/"),
         },
         sm: {
           name: "Secrets Manager Beta",
           icon: "bwi-cli",
           appRoute: ["/sm", smOrg?.id],
           marketingRoute: "https://bitwarden.com/products/secrets-manager/",
+          isActive: this.router.url.includes("/sm/"),
         },
         orgs: {
           name: "Organizations",
@@ -90,5 +97,9 @@ export class ProductSwitcherContentComponent {
     })
   );
 
-  constructor(private organizationService: OrganizationService, private route: ActivatedRoute) {}
+  constructor(
+    private organizationService: OrganizationService,
+    private route: ActivatedRoute,
+    private router: Router
+  ) {}
 }