diff --git a/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.stories.ts b/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.stories.ts
index 241c927f39e..48a45deba89 100644
--- a/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.stories.ts
+++ b/apps/web/src/app/layouts/product-switcher/navigation-switcher/navigation-switcher.stories.ts
@@ -9,6 +9,7 @@ import { ProviderService } from "@bitwarden/common/admin-console/abstractions/pr
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { SyncService } from "@bitwarden/common/platform/sync";
 import { LayoutComponent, NavigationModule } from "@bitwarden/components";
 import { I18nMockService } from "@bitwarden/components/src/utils/i18n-mock.service";
 
@@ -45,6 +46,12 @@ class MockProviderService implements Partial<ProviderService> {
   }
 }
 
+class MockSyncService implements Partial<SyncService> {
+  async getLastSync() {
+    return Promise.resolve(new Date());
+  }
+}
+
 @Component({
   selector: "story-layout",
   template: `<ng-content></ng-content>`,
@@ -80,6 +87,7 @@ export default {
       providers: [
         { provide: OrganizationService, useClass: MockOrganizationService },
         { provide: ProviderService, useClass: MockProviderService },
+        { provide: MockSyncService, useClass: MockSyncService },
         ProductSwitcherService,
         {
           provide: I18nPipe,
diff --git a/apps/web/src/app/layouts/product-switcher/product-switcher.stories.ts b/apps/web/src/app/layouts/product-switcher/product-switcher.stories.ts
index a653e11ae03..b9d1d394920 100644
--- a/apps/web/src/app/layouts/product-switcher/product-switcher.stories.ts
+++ b/apps/web/src/app/layouts/product-switcher/product-switcher.stories.ts
@@ -9,6 +9,7 @@ import { ProviderService } from "@bitwarden/common/admin-console/abstractions/pr
 import { Organization } from "@bitwarden/common/admin-console/models/domain/organization";
 import { Provider } from "@bitwarden/common/admin-console/models/domain/provider";
 import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
+import { SyncService } from "@bitwarden/common/platform/sync";
 import { IconButtonModule, LinkModule, MenuModule } from "@bitwarden/components";
 import { I18nMockService } from "@bitwarden/components/src/utils/i18n-mock.service";
 
@@ -45,6 +46,12 @@ class MockProviderService implements Partial<ProviderService> {
   }
 }
 
+class MockSyncService implements Partial<SyncService> {
+  async getLastSync() {
+    return Promise.resolve(new Date());
+  }
+}
+
 @Component({
   selector: "story-layout",
   template: `<ng-content></ng-content>`,
@@ -75,6 +82,7 @@ export default {
         MockOrganizationService,
         { provide: ProviderService, useClass: MockProviderService },
         MockProviderService,
+        { provide: SyncService, useClass: MockSyncService },
         ProductSwitcherService,
         {
           provide: I18nService,