diff --git a/.eslintrc.js b/.eslintrc.js
index ce3de561e47..eb5537025dd 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -27,7 +27,7 @@ module.exports = {
     '@typescript-eslint/lines-between-class-members': 'off',
     'react/jsx-wrap-multilines': 'off',
     'react/jsx-filename-extension': 'off',
-    'multiline-comment-style': ['error', 'starred-block'],
+    'multiline-comment-style': ['warn', 'starred-block'],
     'promise/catch-or-return': 'off',
     '@typescript-eslint/explicit-module-boundary-types': 'off',
     '@typescript-eslint/no-unused-expressions': 'off',
diff --git a/.source b/.source
index 1c620bbe71c..e4a7b124de8 160000
--- a/.source
+++ b/.source
@@ -1 +1 @@
-Subproject commit 1c620bbe71c855d33d93ba5943661266d0239389
+Subproject commit e4a7b124de85d0d5cd2d66cd34c88e0262ad5649
diff --git a/apps/api/src/app/change/usecases/get-changes/get-changes.usecase.ts b/apps/api/src/app/change/usecases/get-changes/get-changes.usecase.ts
index 36dafe5ef75..8e403a3ad3c 100644
--- a/apps/api/src/app/change/usecases/get-changes/get-changes.usecase.ts
+++ b/apps/api/src/app/change/usecases/get-changes/get-changes.usecase.ts
@@ -11,6 +11,8 @@ import {
 import { ChangeEntityTypeEnum } from '@novu/shared';
 import { ChangesResponseDto } from '../../dtos/change-response.dto';
 import { GetChangesCommand } from './get-changes.command';
+import { ApiException } from '../../../shared/exceptions/api.exception';
+import { ModuleRef } from '@nestjs/core';
 
 interface IViewEntity {
   templateName: string;
@@ -32,7 +34,8 @@ export class GetChanges {
     private messageTemplateRepository: MessageTemplateRepository,
     private notificationGroupRepository: NotificationGroupRepository,
     private feedRepository: FeedRepository,
-    private layoutRepository: LayoutRepository
+    private layoutRepository: LayoutRepository,
+    protected moduleRef: ModuleRef
   ) {}
 
   async execute(command: GetChangesCommand): Promise<ChangesResponseDto> {
@@ -65,6 +68,12 @@ export class GetChanges {
       if (change.type === ChangeEntityTypeEnum.DEFAULT_LAYOUT) {
         item = await this.getTemplateDataForDefaultLayout(change._entityId, command.environmentId);
       }
+      if (change.type === ChangeEntityTypeEnum.TRANSLATION) {
+        item = await this.getTemplateDataForTranslation(change._entityId, command.environmentId);
+      }
+      if (change.type === ChangeEntityTypeEnum.TRANSLATION_GROUP) {
+        item = await this.getTemplateDataForTranslationGroup(change._entityId, command.environmentId);
+      }
 
       list.push({
         ...change,
@@ -133,6 +142,54 @@ export class GetChanges {
     };
   }
 
+  private async getTemplateDataForTranslationGroup(
+    entityId: string,
+    environmentId: string
+  ): Promise<IViewEntity | Record<string, unknown>> {
+    try {
+      if (process.env.NOVU_ENTERPRISE === 'true' || process.env.CI_EE_TEST === 'true') {
+        if (!require('@novu/ee-translation')?.TranslationsService) {
+          throw new ApiException('Translation module is not loaded');
+        }
+        const service = this.moduleRef.get(require('@novu/ee-translation')?.TranslationsService, { strict: false });
+        const { name, identifier } = await service.getTranslationGroupData(environmentId, entityId);
+
+        return {
+          templateId: identifier,
+          templateName: name,
+        };
+      }
+    } catch (e) {
+      Logger.error(e, `Unexpected error while importing enterprise modules`, 'TranslationsService');
+    }
+
+    return {};
+  }
+
+  private async getTemplateDataForTranslation(
+    entityId: string,
+    environmentId: string
+  ): Promise<IViewEntity | Record<string, unknown>> {
+    try {
+      if (process.env.NOVU_ENTERPRISE === 'true' || process.env.CI_EE_TEST === 'true') {
+        if (!require('@novu/ee-translation')?.TranslationsService) {
+          throw new ApiException('Translation module is not loaded');
+        }
+        const service = this.moduleRef.get(require('@novu/ee-translation')?.TranslationsService, { strict: false });
+        const { name, group } = await service.getTranslationData(environmentId, entityId);
+
+        return {
+          templateName: name,
+          translationGroup: group,
+        };
+      }
+    } catch (e) {
+      Logger.error(e, `Unexpected error while importing enterprise modules`, 'TranslationsService');
+    }
+
+    return {};
+  }
+
   private async getTemplateDataForNotificationGroup(
     entityId: string,
     environmentId: string
diff --git a/apps/api/src/app/content-templates/content-templates.controller.ts b/apps/api/src/app/content-templates/content-templates.controller.ts
index e9b9146d118..d338a4b44b1 100644
--- a/apps/api/src/app/content-templates/content-templates.controller.ts
+++ b/apps/api/src/app/content-templates/content-templates.controller.ts
@@ -34,7 +34,8 @@ export class ContentTemplatesController {
     @Body('contentType') contentType: MessageTemplateContentType,
     @Body('payload') payload: any,
     @Body('subject') subject: string,
-    @Body('layoutId') layoutId: string
+    @Body('layoutId') layoutId: string,
+    @Body('locale') locale?: string
   ) {
     return this.compileEmailTemplateUsecase.execute(
       CompileEmailTemplateCommand.create({
@@ -46,6 +47,7 @@ export class ContentTemplatesController {
         payload,
         subject,
         layoutId,
+        locale,
       }),
       this.initiateTranslations.bind(this)
     );
@@ -56,7 +58,8 @@ export class ContentTemplatesController {
     @UserSession() user: IJwtPayload,
     @Body('content') content: string,
     @Body('payload') payload: any,
-    @Body('cta') cta: IMessageCTA
+    @Body('cta') cta: IMessageCTA,
+    @Body('locale') locale?: string
   ) {
     return this.compileInAppTemplate.execute(
       CompileInAppTemplateCommand.create({
@@ -66,13 +69,19 @@ export class ContentTemplatesController {
         content,
         payload,
         cta,
+        locale,
       }),
       this.initiateTranslations.bind(this)
     );
   }
   // TODO: refactor this to use params and single endpoint to manage all the channels
   @Post('/preview/sms')
-  public previewSms(@UserSession() user: IJwtPayload, @Body('content') content: string, @Body('payload') payload: any) {
+  public previewSms(
+    @UserSession() user: IJwtPayload,
+    @Body('content') content: string,
+    @Body('payload') payload: any,
+    @Body('locale') locale?: string
+  ) {
     return this.compileStepTemplate.execute(
       CompileStepTemplateCommand.create({
         userId: user._id,
@@ -80,6 +89,7 @@ export class ContentTemplatesController {
         environmentId: user.environmentId,
         content,
         payload,
+        locale,
       }),
       this.initiateTranslations.bind(this)
     );
@@ -89,7 +99,8 @@ export class ContentTemplatesController {
   public previewChat(
     @UserSession() user: IJwtPayload,
     @Body('content') content: string,
-    @Body('payload') payload: any
+    @Body('payload') payload: any,
+    @Body('locale') locale?: string
   ) {
     return this.compileStepTemplate.execute(
       CompileStepTemplateCommand.create({
@@ -98,6 +109,7 @@ export class ContentTemplatesController {
         environmentId: user.environmentId,
         content,
         payload,
+        locale,
       }),
       this.initiateTranslations.bind(this)
     );
@@ -107,7 +119,9 @@ export class ContentTemplatesController {
   public previewPush(
     @UserSession() user: IJwtPayload,
     @Body('content') content: string,
-    @Body('payload') payload: any
+    @Body('title') title: string,
+    @Body('payload') payload: any,
+    @Body('locale') locale?: string
   ) {
     return this.compileStepTemplate.execute(
       CompileStepTemplateCommand.create({
@@ -116,6 +130,8 @@ export class ContentTemplatesController {
         environmentId: user.environmentId,
         content,
         payload,
+        locale,
+        title,
       }),
       this.initiateTranslations.bind(this)
     );
@@ -128,7 +144,10 @@ export class ContentTemplatesController {
           throw new ApiException('Translation module is not loaded');
         }
         const service = this.moduleRef.get(require('@novu/ee-translation')?.TranslationsService, { strict: false });
-        const { namespaces, resources } = await service.getTranslationsList(environmentId, organizationId);
+        const { namespaces, resources, defaultLocale } = await service.getTranslationsList(
+          environmentId,
+          organizationId
+        );
 
         await i18next.init({
           resources,
@@ -137,6 +156,7 @@ export class ContentTemplatesController {
           nsSeparator: '.',
           lng: locale || 'en',
           compatibilityJSON: 'v2',
+          fallbackLng: defaultLocale,
           interpolation: {
             formatSeparator: ',',
             format: function (value, formatting, lng) {
diff --git a/apps/api/src/app/message-template/usecases/create-message-template/create-message-template.usecase.ts b/apps/api/src/app/message-template/usecases/create-message-template/create-message-template.usecase.ts
index 1f6b4cd19b1..8da75725d19 100644
--- a/apps/api/src/app/message-template/usecases/create-message-template/create-message-template.usecase.ts
+++ b/apps/api/src/app/message-template/usecases/create-message-template/create-message-template.usecase.ts
@@ -1,6 +1,6 @@
 import { Injectable } from '@nestjs/common';
-import { MessageTemplateEntity, MessageTemplateRepository } from '@novu/dal';
-import { ChangeEntityTypeEnum, IMessageAction } from '@novu/shared';
+import { MessageTemplateEntity, MessageTemplateRepository, LayoutEntity, LayoutRepository } from '@novu/dal';
+import { ChangeEntityTypeEnum, IMessageAction, StepTypeEnum } from '@novu/shared';
 
 import { CreateMessageTemplateCommand } from './create-message-template.command';
 import { sanitizeMessageContent } from '../../shared/sanitizer.service';
@@ -13,6 +13,7 @@ import { ApiException, CreateChange, CreateChangeCommand } from '@novu/applicati
 export class CreateMessageTemplate {
   constructor(
     private messageTemplateRepository: MessageTemplateRepository,
+    private layoutRepository: LayoutRepository,
     private createChange: CreateChange,
     private updateChange: UpdateChange
   ) {}
@@ -22,6 +23,14 @@ export class CreateMessageTemplate {
       throw new ApiException('Please provide a valid CTA action');
     }
 
+    let layoutId: string | undefined | null;
+    if (command.type === StepTypeEnum.EMAIL && !command.layoutId) {
+      const defaultLayout = await this.layoutRepository.findDefault(command.environmentId, command.organizationId);
+      layoutId = defaultLayout?._id;
+    } else {
+      layoutId = command.layoutId;
+    }
+
     let item: MessageTemplateEntity = await this.messageTemplateRepository.create({
       cta: command.cta,
       name: command.name,
@@ -32,7 +41,7 @@ export class CreateMessageTemplate {
       title: command.title,
       type: command.type,
       _feedId: command.feedId ? command.feedId : null,
-      _layoutId: command.layoutId || null,
+      _layoutId: layoutId,
       _organizationId: command.organizationId,
       _environmentId: command.environmentId,
       _creatorId: command.userId,
diff --git a/apps/api/src/app/testing/translations/get-locales-from-content.e2e-ee.ts b/apps/api/src/app/testing/translations/get-locales-from-content.e2e-ee.ts
new file mode 100644
index 00000000000..13f6e714fa1
--- /dev/null
+++ b/apps/api/src/app/testing/translations/get-locales-from-content.e2e-ee.ts
@@ -0,0 +1,36 @@
+import { UserSession } from '@novu/testing';
+import { expect } from 'chai';
+
+const createTranslationGroup = {
+  name: 'test',
+  identifier: 'test',
+  locales: ['hi_IN', 'en_US'],
+};
+
+const content = 'Hello {{i18n "test.key1"}}, {{i18n "test.key2"}}, {{i18n "test.key3"}}';
+
+describe('Get locales from content - /translations/groups/:identifier/locales/:locale (PATCH)', async () => {
+  let session: UserSession;
+
+  before(async () => {
+    session = new UserSession();
+    await session.initialize();
+    await session.testAgent.put(`/v1/organizations/language`).send({
+      locale: createTranslationGroup.locales[0],
+    });
+
+    await session.testAgent.post('/v1/translations/groups').send(createTranslationGroup);
+  });
+
+  it('should get locales from the content', async () => {
+    const { body } = await session.testAgent.post('/v1/translations/groups/preview/locales').send({
+      content,
+    });
+
+    const locales = body.data;
+
+    expect(locales.length).to.equal(2);
+    expect(locales[0].langIso).to.equal(createTranslationGroup.locales[0]);
+    expect(locales[1].langIso).to.equal(createTranslationGroup.locales[1]);
+  });
+});
diff --git a/apps/web/cypress/fixtures/translation.json b/apps/web/cypress/fixtures/translation.json
new file mode 100644
index 00000000000..63b42eb37ee
--- /dev/null
+++ b/apps/web/cypress/fixtures/translation.json
@@ -0,0 +1,19 @@
+{
+  "key": "value",
+  "keyDeep": {
+    "inner": "value"
+  },
+  "keyNesting": "reuse $t(keyDeep.inner)",
+  "keyInterpolate": "replace this {{value}}",
+  "keyInterpolateUnescaped": "replace this {{- value}}",
+  "keyContext_male": "the male variant",
+  "keyContext_female": "the female variant",
+  "keyPluralSimple": "the singular",
+  "keyPluralSimple_plural": "the plural",
+  "keyPluralMultipleEgArabic_0": "the plural form 0",
+  "keyPluralMultipleEgArabic_1": "the plural form 1",
+  "keyPluralMultipleEgArabic_2": "the plural form 2",
+  "keyPluralMultipleEgArabic_3": "the plural form 3",
+  "keyPluralMultipleEgArabic_11": "the plural form 4",
+  "keyPluralMultipleEgArabic_100": "the plural form 5"
+}
diff --git a/apps/web/cypress/support/commands.ts b/apps/web/cypress/support/commands.ts
index 766c9f46d4f..d773531671c 100644
--- a/apps/web/cypress/support/commands.ts
+++ b/apps/web/cypress/support/commands.ts
@@ -3,6 +3,7 @@
 
 import { MemberRoleEnum, MemberStatusEnum } from '@novu/shared';
 import 'cypress-wait-until';
+import 'cypress-file-upload';
 
 Cypress.Commands.add('getByTestId', (selector, ...args) => {
   return cy.get(`[data-test-id=${selector}]`, ...args);
@@ -13,8 +14,8 @@ Cypress.Commands.add('getBySelectorLike', (selector, ...args) => {
 });
 
 Cypress.Commands.add('waitLoadEnv', (beforeWait: () => void): void => {
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/environments').as('environments');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/environments/me').as('environments-me');
+  cy.intercept('GET', '**/v1/environments').as('environments');
+  cy.intercept('GET', '**/v1/environments/me').as('environments-me');
 
   beforeWait && beforeWait();
 
@@ -22,13 +23,13 @@ Cypress.Commands.add('waitLoadEnv', (beforeWait: () => void): void => {
 });
 
 Cypress.Commands.add('waitLoadTemplatePage', (beforeWait: () => void): void => {
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/environments').as('environments');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/organizations').as('organizations');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/environments/me').as('environments-me');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/notification-groups').as('notification-groups');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/changes/count').as('changes-count');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/integrations/active').as('active-integrations');
-  cy.intercept('GET', 'http://127.0.0.1:1336/v1/users/me').as('me');
+  cy.intercept('GET', '**/v1/environments').as('environments');
+  cy.intercept('GET', '**/v1/organizations').as('organizations');
+  cy.intercept('GET', '**/v1/environments/me').as('environments-me');
+  cy.intercept('GET', '**/v1/notification-groups').as('notification-groups');
+  cy.intercept('GET', '**/v1/changes/count').as('changes-count');
+  cy.intercept('GET', '**/v1/integrations/active').as('active-integrations');
+  cy.intercept('GET', '**/v1/users/me').as('me');
 
   beforeWait && beforeWait();
 
diff --git a/apps/web/cypress/tests/changes.spec.ts b/apps/web/cypress/tests/changes.spec.ts
index 025a122634a..8c66b5d0427 100644
--- a/apps/web/cypress/tests/changes.spec.ts
+++ b/apps/web/cypress/tests/changes.spec.ts
@@ -1,4 +1,4 @@
-import { dragAndDrop } from './notification-editor';
+import { dragAndDrop, editChannel } from './notification-editor';
 import { goBack } from './notification-editor';
 
 describe('Changes Screen', function () {
@@ -122,7 +122,7 @@ function createNotification() {
   cy.visit('/workflows/create');
   cy.waitForNetworkIdle(500);
 
-  cy.getByTestId('title').clear().type('Test Notification Title');
+  cy.getByTestId('name-input').clear().type('Test Notification Title');
 
   cy.getByTestId('settings-page').click();
   cy.waitForNetworkIdle(500);
@@ -135,7 +135,7 @@ function createNotification() {
   dragAndDrop('email');
   cy.waitForNetworkIdle(500);
 
-  cy.clickWorkflowNode(`node-emailSelector`);
+  editChannel('email');
   cy.waitForNetworkIdle(500);
 
   cy.getByTestId('emailSubject').type('this is email subject');
diff --git a/apps/web/cypress/tests/digest-playground.spec.ts b/apps/web/cypress/tests/digest-playground.spec.ts
index c97ae4e38bd..58fbeca2cfe 100644
--- a/apps/web/cypress/tests/digest-playground.spec.ts
+++ b/apps/web/cypress/tests/digest-playground.spec.ts
@@ -16,7 +16,7 @@ describe('Digest Playground Workflow Page', function () {
     cy.url().should('include', '/digest-playground');
     cy.contains('Digest Workflow Playground');
 
-    cy.get('a[href="https://docs.novu.co/workflows/digest"]').contains('Learn more in docs');
+    cy.get('a[href="https://docs.novu.co/workflows/digest?utm_campaign=in-app"]').contains('Learn more in docs');
   });
 
   it('the set up digest workflow should redirect to template edit page', function () {
diff --git a/apps/web/cypress/tests/integrations-list-modal.spec.ts b/apps/web/cypress/tests/integrations-list-modal.spec.ts
index 5310510f31c..e423c9b615b 100644
--- a/apps/web/cypress/tests/integrations-list-modal.spec.ts
+++ b/apps/web/cypress/tests/integrations-list-modal.spec.ts
@@ -29,10 +29,10 @@ describe('Integrations List Modal', function () {
       .as('session');
   });
 
-  const navigateToGetStarted = () => {
+  const navigateToGetStarted = (card = 'channel-card-email') => {
     cy.visit('/get-started');
     cy.location('pathname').should('equal', '/get-started');
-    cy.getByTestId('channel-card-email').find('button').contains('Change Provider').click();
+    cy.getByTestId(card).find('button').contains('Change Provider').click();
     cy.getByTestId('integrations-list-modal').should('be.visible').contains('Integrations Store');
   };
 
@@ -128,7 +128,7 @@ describe('Integrations List Modal', function () {
     cy.intercept('*/environments', async () => {
       await new Promise((resolve) => setTimeout(resolve, 3500));
     }).as('getEnvironments');
-    navigateToGetStarted();
+    navigateToGetStarted('channel-card-sms');
     cy.getByTestId('select-provider-sidebar').should('be.visible');
     cy.getByTestId('sidebar-close').should('be.visible').click();
 
@@ -152,7 +152,7 @@ describe('Integrations List Modal', function () {
       await new Promise((resolve) => setTimeout(resolve, 3500));
     }).as('getIntegrations');
 
-    navigateToGetStarted();
+    navigateToGetStarted('channel-card-sms');
     cy.getByTestId('select-provider-sidebar').should('be.visible');
     cy.getByTestId('sidebar-close').should('be.visible').click();
 
@@ -773,7 +773,7 @@ describe('Integrations List Modal', function () {
       'Select a framework to set up credentials to start sending notifications.'
     );
     cy.getByTestId('update-provider-sidebar')
-      .find('a[href="https://docs.novu.co/notification-center/introduction"]')
+      .find('a[href="https://docs.novu.co/notification-center/introduction?utm_campaign=in-app"]')
       .contains('Explore set-up guide');
     cy.getByTestId('is_active_id').should('have.value', 'true');
     cy.window().then((win) => {
diff --git a/apps/web/cypress/tests/integrations-list-page.spec.ts b/apps/web/cypress/tests/integrations-list-page.spec.ts
index 1adb8f2c79f..0d0fe14524a 100644
--- a/apps/web/cypress/tests/integrations-list-page.spec.ts
+++ b/apps/web/cypress/tests/integrations-list-page.spec.ts
@@ -924,7 +924,7 @@ describe('Integrations List Page', function () {
       'Select a framework to set up credentials to start sending notifications.'
     );
     cy.getByTestId('update-provider-sidebar')
-      .find('a[href="https://docs.novu.co/notification-center/introduction"]')
+      .find('a[href="https://docs.novu.co/notification-center/introduction?utm_campaign=in-app"]')
       .contains('Explore set-up guide');
     cy.getByTestId('is_active_id').should('have.value', 'true');
     cy.window().then((win) => {
diff --git a/apps/web/cypress/tests/layout/side-menu.spec.ts b/apps/web/cypress/tests/layout/side-menu.spec.ts
index edfb5853e2c..fb887a683b1 100644
--- a/apps/web/cypress/tests/layout/side-menu.spec.ts
+++ b/apps/web/cypress/tests/layout/side-menu.spec.ts
@@ -17,7 +17,7 @@ describe('Side Menu', function () {
     cy.getByTestId('side-nav-bottom-link-support').should('have.attr', 'href').should('eq', 'https://discord.novu.co');
     cy.getByTestId('side-nav-bottom-link-documentation')
       .should('have.attr', 'href')
-      .should('eq', 'https://docs.novu.co');
+      .should('eq', 'https://docs.novu.co?utm_campaign=in-app');
 
     cy.getByTestId('side-nav-bottom-link-share-feedback')
       .should('have.attr', 'href')
diff --git a/apps/web/cypress/tests/notification-editor/create-notification.spec.ts b/apps/web/cypress/tests/notification-editor/create-notification.spec.ts
index 7ac26e1965b..21eef7d3d2a 100644
--- a/apps/web/cypress/tests/notification-editor/create-notification.spec.ts
+++ b/apps/web/cypress/tests/notification-editor/create-notification.spec.ts
@@ -25,13 +25,13 @@ describe('Creation functionality', function () {
       .parent()
       .click()
       .find('textarea')
-      .type('<p>{{firstName}} someone assigned you to {{taskName}}', {
+      .type('<p>{{firstName}} someone assigned you to {{taskName}}</p>', {
         parseSpecialCharSequences: false,
         force: true,
       });
     cy.getByTestId('inAppRedirect').type('/example/test');
     cy.getByTestId('editor-mode-switch').find('label').last().click();
-    cy.getByTestId('in-app-content-preview').contains('firstName someone assigned you to taskName');
+    cy.getByTestId('in-app-content-preview').contains('firstName someone assigned you to taskName', { timeout: 1000 });
 
     goBack();
     cy.getByTestId('notification-template-submit-btn').click();
@@ -203,6 +203,9 @@ describe('Creation functionality', function () {
     cy.clickWorkflowNode('node-emailSelector');
     cy.waitForNetworkIdle(500);
 
+    cy.getByTestId('edit-action').click();
+    cy.waitForNetworkIdle(500);
+
     cy.getByTestId('emailSubject').type('this is email subject');
     cy.getByTestId('email-editor').getByTestId('editor-row').click();
     cy.getByTestId('editable-text-content').clear().type('This text is written from a test {{firstName}}', {
@@ -223,16 +226,26 @@ describe('Creation functionality', function () {
     cy.waitForNetworkIdle(500);
 
     cy.clickWorkflowNode('node-smsSelector');
+    cy.getByTestId('edit-action').click();
     cy.waitForNetworkIdle(500);
 
-    cy.getByTestId('smsNotificationContent').type('This text is written from a test {{var}}', {
-      parseSpecialCharSequences: false,
-    });
+    cy.get('.monaco-editor textarea:first', { timeout: 7000 })
+      .parent()
+      .click()
+      .find('textarea')
+      .type('This text is written from a test {{var}}', {
+        parseSpecialCharSequences: false,
+        force: true,
+      });
+    cy.getByTestId('open-variable-management').click();
+    cy.getByTestId('open-edit-variables-btn').click();
     cy.getByTestId('variable-default-value').type('Test');
+    cy.getByTestId('close-var-manager-modal').click();
 
     cy.getByTestId('notification-template-submit-btn').click();
     cy.waitForNetworkIdle(500);
-
+    cy.getByTestId('open-variable-management').click();
+    cy.getByTestId('open-edit-variables-btn').click();
     cy.getByTestId('variable-default-value').should('have.value', 'Test');
   });
 
@@ -240,11 +253,12 @@ describe('Creation functionality', function () {
     cy.waitLoadTemplatePage(() => {
       cy.visit('/workflows/create');
     });
+    cy.waitForNetworkIdle(500);
 
     dragAndDrop('email');
     cy.waitForNetworkIdle(500);
 
-    cy.clickWorkflowNode('node-emailSelector');
+    editChannel('email');
     cy.waitForNetworkIdle(500);
 
     cy.getByTestId('emailSubject').type('this is email subject');
diff --git a/apps/web/cypress/tests/notification-editor/index.ts b/apps/web/cypress/tests/notification-editor/index.ts
index dc963f5569b..38cb273ef5b 100644
--- a/apps/web/cypress/tests/notification-editor/index.ts
+++ b/apps/web/cypress/tests/notification-editor/index.ts
@@ -18,6 +18,9 @@ export function dragAndDrop(channel: Channel, dropTestId = 'addNodeButton') {
 
 export function editChannel(channel: Channel, last = false) {
   cy.clickWorkflowNode(`node-${channel}Selector`, last);
+  if (['inApp', 'email', 'sms', 'chat', 'push'].includes(channel)) {
+    cy.getByTestId('edit-action').click();
+  }
 }
 
 export function goBack() {
diff --git a/apps/web/cypress/tests/notification-editor/main-functionality.spec.ts b/apps/web/cypress/tests/notification-editor/main-functionality.spec.ts
index 81e1b615cec..09318a97952 100644
--- a/apps/web/cypress/tests/notification-editor/main-functionality.spec.ts
+++ b/apps/web/cypress/tests/notification-editor/main-functionality.spec.ts
@@ -85,7 +85,7 @@ describe('Workflow Editor - Main Functionality', function () {
 
     cy.getByTestId('settings-page').click();
     cy.waitForNetworkIdle(500);
-    cy.getByTestId('title').first().should('have.value', template.name);
+    cy.getByTestId('name-input').first().should('have.value', template.name);
 
     editChannel('inApp');
     cy.waitForNetworkIdle(500);
@@ -95,7 +95,7 @@ describe('Workflow Editor - Main Functionality', function () {
     goBack();
     cy.waitForNetworkIdle(500);
 
-    cy.getByTestId('title').clear().type('This is the new notification title');
+    cy.getByTestId('name-input').clear().type('This is the new notification title');
 
     editChannel('inApp', true);
     cy.waitForNetworkIdle(500);
@@ -211,7 +211,7 @@ describe('Workflow Editor - Main Functionality', function () {
     dragAndDrop('email');
     cy.waitForNetworkIdle(500);
 
-    cy.clickWorkflowNode(`node-emailSelector`);
+    editChannel(`email`);
 
     cy.getByTestId(`step-active-switch`).should('have.value', 'on');
     cy.getByTestId(`step-active-switch`).click({ force: true });
@@ -221,8 +221,8 @@ describe('Workflow Editor - Main Functionality', function () {
     goBack();
 
     dragAndDrop('inApp');
+    editChannel('inApp');
 
-    cy.clickWorkflowNode(`node-inAppSelector`);
     cy.getByTestId(`step-active-switch`).should('have.value', 'on');
   });
 
@@ -316,9 +316,15 @@ describe('Workflow Editor - Main Functionality', function () {
     addAndEditChannel('sms');
     cy.waitForNetworkIdle(500);
 
-    cy.getByTestId('smsNotificationContent').type('{{firstName}} someone assigned you to {{taskName}}', {
-      parseSpecialCharSequences: false,
-    });
+    cy.get('.monaco-editor textarea:first', { timeout: 7000 })
+      .parent()
+      .click()
+      .find('textarea')
+      .type('{{firstName}} someone assigned you to {{taskName}}', {
+        parseSpecialCharSequences: false,
+        force: true,
+      });
+
     goBack();
     cy.waitForNetworkIdle(500);
     cy.getByTestId('notification-template-submit-btn').click();
diff --git a/apps/web/cypress/tests/notification-editor/steps-actions.spec.ts b/apps/web/cypress/tests/notification-editor/steps-actions.spec.ts
index a6d53a05b8c..abd459104ff 100644
--- a/apps/web/cypress/tests/notification-editor/steps-actions.spec.ts
+++ b/apps/web/cypress/tests/notification-editor/steps-actions.spec.ts
@@ -25,7 +25,7 @@ describe('Workflow Editor - Steps Actions', function () {
     cy.get('.react-flow__node').should('have.length', 4);
     cy.clickWorkflowNode(`node-inAppSelector`);
     cy.waitForNetworkIdle(500);
-    cy.getByTestId('editor-sidebar-delete').click();
+    cy.getByTestId('step-actions-menu').click().getByTestId('delete-step-action').click();
     cy.get('.mantine-Modal-modal button').contains('Delete step').click();
     cy.getByTestId(`node-inAppSelector`).should('not.exist');
     cy.get('.react-flow__node').should('have.length', 3);
@@ -87,7 +87,11 @@ describe('Workflow Editor - Steps Actions', function () {
     dragAndDrop('sms');
 
     editChannel('sms');
-    cy.getByTestId('smsNotificationContent').type('new content for sms');
+    cy.get('.monaco-editor textarea:first').parent().click().find('textarea').type('new content for sms', {
+      parseSpecialCharSequences: false,
+      force: true,
+    });
+
     cy.getByTestId('notification-template-submit-btn').click();
 
     cy.visit('/workflows/edit/' + template._id);
@@ -112,12 +116,13 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.waitForNetworkIdle(500);
 
-    cy.clickWorkflowNode(`node-inAppSelector`);
+    editChannel(`inApp`);
     cy.getByTestId(`step-active-switch`).get('label').contains('Active');
     cy.getByTestId(`step-active-switch`).click({ force: true });
     goBack();
 
-    cy.clickWorkflowNode(`node-inAppSelector`);
+    editChannel(`inApp`);
+
     cy.getByTestId(`step-active-switch`).get('label').contains('Inactive');
   });
 
@@ -128,12 +133,12 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.waitForNetworkIdle(500);
 
-    cy.clickWorkflowNode(`node-inAppSelector`);
+    editChannel(`inApp`);
     cy.getByTestId(`step-should-stop-on-fail-switch`).get('label').contains('Stop if step fails');
     cy.getByTestId(`step-should-stop-on-fail-switch`).click({ force: true });
     goBack();
 
-    cy.clickWorkflowNode(`node-inAppSelector`);
+    editChannel(`inApp`);
     cy.getByTestId(`step-should-stop-on-fail-switch`).should('be.checked');
   });
 
@@ -214,7 +219,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.clickWorkflowNode(`node-inAppSelector`);
 
-    cy.getByTestId('editor-sidebar-add-conditions').click();
+    cy.getByTestId('add-conditions-action').click();
     cy.getByTestId('add-new-condition').click();
 
     cy.getByTestId('conditions-form-on').click();
@@ -227,7 +232,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('apply-conditions-btn').click();
 
-    cy.getByTestId('editor-sidebar-edit-conditions').contains('1');
+    cy.getByTestId('add-conditions-action').contains('1');
   });
 
   it('should be able to add read/seen filters to a particular step', function () {
@@ -239,7 +244,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.clickWorkflowNode(`node-emailSelector`);
 
-    cy.getByTestId('editor-sidebar-add-conditions').click();
+    cy.getByTestId('add-conditions-action').click();
     cy.getByTestId('add-new-condition').click();
 
     cy.getByTestId('conditions-form-on').click();
@@ -252,7 +257,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('apply-conditions-btn').click();
 
-    cy.getByTestId('editor-sidebar-edit-conditions').contains('1');
+    cy.getByTestId('add-conditions-action').contains('1');
   });
 
   it('should be able to not add read/seen filters to first step', function () {
@@ -264,7 +269,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.clickWorkflowNode(`node-inAppSelector`);
 
-    cy.getByTestId('editor-sidebar-add-conditions').click();
+    cy.getByTestId('add-conditions-action').click();
 
     cy.getByTestId('add-new-condition').click();
     cy.getByTestId('conditions-form-on').click();
@@ -280,7 +285,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.clickWorkflowNode(`node-inAppSelector`);
 
-    cy.getByTestId('editor-sidebar-add-conditions').click();
+    cy.getByTestId('add-conditions-action').click();
 
     cy.getByTestId('add-new-condition').click();
 
@@ -291,15 +296,15 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('apply-conditions-btn').click();
 
-    cy.getByTestId('editor-sidebar-edit-conditions').contains('1');
+    cy.getByTestId('add-conditions-action').contains('1');
 
-    cy.getByTestId('editor-sidebar-edit-conditions').click();
+    cy.getByTestId('add-conditions-action').click();
     cy.getByTestId('conditions-row-btn').click();
     cy.getByTestId('conditions-row-delete').click();
 
     cy.getByTestId('apply-conditions-btn').click();
 
-    cy.getByTestId('editor-sidebar-add-conditions').should('not.contain', '1');
+    cy.getByTestId('add-conditions-action').should('not.contain', '1');
   });
 
   it('should be able to add webhook filter for a particular step', function () {
@@ -311,7 +316,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.clickWorkflowNode(`node-inAppSelector`);
 
-    cy.getByTestId('editor-sidebar-add-conditions').click();
+    cy.getByTestId('add-conditions-action').click();
 
     cy.getByTestId('add-new-condition').click();
 
@@ -326,7 +331,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('apply-conditions-btn').click();
 
-    cy.getByTestId('editor-sidebar-edit-conditions').contains('1');
+    cy.getByTestId('add-conditions-action').contains('1');
   });
 
   it('should be able to add online right now filter for a particular step', function () {
@@ -338,7 +343,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.clickWorkflowNode(`node-inAppSelector`);
 
-    cy.getByTestId('editor-sidebar-add-conditions').click();
+    cy.getByTestId('add-conditions-action').click();
 
     cy.getByTestId('add-new-condition').click();
 
@@ -349,7 +354,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('apply-conditions-btn').click();
 
-    cy.getByTestId('editor-sidebar-edit-conditions').contains('1');
+    cy.getByTestId('add-conditions-action').contains('1');
   });
 
   it('should be able to add online in the last X time period filter for a particular step', function () {
@@ -361,7 +366,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.clickWorkflowNode(`node-inAppSelector`);
 
-    cy.getByTestId('editor-sidebar-add-conditions').click();
+    cy.getByTestId('add-conditions-action').click();
 
     cy.getByTestId('add-new-condition').click();
 
@@ -373,7 +378,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('apply-conditions-btn').click();
 
-    cy.getByTestId('editor-sidebar-edit-conditions').contains('1');
+    cy.getByTestId('add-conditions-action').contains('1');
   });
 
   it('should be able to add multiple filters to a particular step', function () {
@@ -385,7 +390,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.clickWorkflowNode(`node-inAppSelector`);
 
-    cy.getByTestId('editor-sidebar-add-conditions').click();
+    cy.getByTestId('add-conditions-action').click();
 
     cy.getByTestId('add-new-condition').click();
     cy.getByTestId('conditions-form-on').click();
@@ -404,7 +409,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('apply-conditions-btn').click();
 
-    cy.getByTestId('editor-sidebar-edit-conditions').contains('2');
+    cy.getByTestId('add-conditions-action').contains('2');
   });
 
   it('should re-render content on between step click', function () {
@@ -425,15 +430,23 @@ describe('Workflow Editor - Steps Actions', function () {
     const lastContent = 'last content for sms';
 
     cy.clickWorkflowNode(`node-smsSelector`);
-    cy.getByTestId('smsNotificationContent').type(firstContent);
+    cy.getByTestId('edit-action').click();
 
-    cy.clickWorkflowNode(`node-smsSelector`, true);
-    cy.getByTestId('smsNotificationContent').type(lastContent);
+    cy.get('.monaco-editor textarea:first').parent().click().find('textarea').type(firstContent, {
+      force: true,
+    });
 
+    cy.clickWorkflowNode(`node-smsSelector`, true);
+    cy.getByTestId('edit-action').click();
+    cy.get('.monaco-editor textarea:first').parent().click().find('textarea').type(lastContent, {
+      force: true,
+    });
     cy.clickWorkflowNode(`node-smsSelector`);
-    cy.getByTestId('smsNotificationContent').should('have.text', firstContent);
+    cy.getByTestId('edit-action').click();
+    cy.get('.monaco-editor textarea:first').parent().click().contains(firstContent);
 
     cy.clickWorkflowNode(`node-smsSelector`, true);
-    cy.getByTestId('smsNotificationContent').should('have.text', lastContent);
+    cy.getByTestId('edit-action').click();
+    cy.get('.monaco-editor textarea:first').parent().click().contains(lastContent);
   });
 });
diff --git a/apps/web/cypress/tests/notification-editor/variants.spec.ts b/apps/web/cypress/tests/notification-editor/variants.spec.ts
index 02fda30e0ab..e282017a323 100644
--- a/apps/web/cypress/tests/notification-editor/variants.spec.ts
+++ b/apps/web/cypress/tests/notification-editor/variants.spec.ts
@@ -17,7 +17,7 @@ describe('Workflow Editor - Variants', function () {
       cy.visit('/workflows/create');
     });
     cy.wait('@getWorkflow');
-    cy.getByTestId('title').first().clear().type(title).blur();
+    cy.getByTestId('name-input').first().clear().type(title).blur();
   };
 
   const fillInAppEditorContentWith = (text: string) => {
@@ -38,28 +38,38 @@ describe('Workflow Editor - Variants', function () {
   };
 
   const fillSmsEditorContentWith = (content: string) => {
-    cy.getByTestId('smsNotificationContent').clear().type(content, {
+    cy.get('.monaco-editor textarea:first').parent().click().find('textarea').clear({ force: true }).type(content, {
       parseSpecialCharSequences: false,
       force: true,
     });
   };
 
   const fillChatEditorContentWith = (content: string) => {
-    cy.getByTestId('chatNotificationContent').clear().type(content, {
+    cy.get('.monaco-editor textarea:first').parent().click().find('textarea').clear({ force: true }).type(content, {
       parseSpecialCharSequences: false,
       force: true,
     });
   };
 
   const fillPushEditorContentWith = (title: string, content: string) => {
-    cy.getByTestId('pushNotificationTitle').clear().type(title, {
-      parseSpecialCharSequences: false,
-      force: true,
-    });
-    cy.getByTestId('pushNotificationContent').clear().type(content, {
-      parseSpecialCharSequences: false,
-      force: true,
-    });
+    cy.get('[data-test-id=push-title-container] .monaco-editor textarea:first')
+      .parent()
+      .click()
+      .find('textarea')
+      .clear({ force: true })
+      .type(title, {
+        parseSpecialCharSequences: false,
+        force: true,
+      });
+    cy.get('[data-test-id=push-content-container] .monaco-editor textarea:first')
+      .parent()
+      .click()
+      .find('textarea')
+      .clear({ force: true })
+      .type(content, {
+        parseSpecialCharSequences: false,
+        force: true,
+      });
   };
 
   const showStepActions = (channel: Channel) => {
@@ -78,7 +88,7 @@ describe('Workflow Editor - Variants', function () {
     cy.getByTestId('add-new-condition').click();
     cy.getByTestId('conditions-form-key').last().type('test');
     cy.getByTestId('conditions-form-value').last().type('test');
-    cy.getByTestId('apply-conditions-btn').click();
+    cy.getByTestId('apply-conditions-btn').click({ force: true });
   };
 
   const checkTheVariantsList = (title: string, content: string) => {
@@ -122,14 +132,26 @@ describe('Workflow Editor - Variants', function () {
         cy.getByTestId('email-editor').contains(isVariant ? VARIANT_EDITOR_TEXT : EDITOR_TEXT);
         break;
       case 'sms':
-        cy.getByTestId('smsNotificationContent').should('have.value', isVariant ? VARIANT_EDITOR_TEXT : EDITOR_TEXT);
+        cy.get('.monaco-editor textarea:first')
+          .parent()
+          .click()
+          .contains(isVariant ? VARIANT_EDITOR_TEXT : EDITOR_TEXT);
         break;
       case 'chat':
-        cy.getByTestId('chatNotificationContent').should('have.value', isVariant ? VARIANT_EDITOR_TEXT : EDITOR_TEXT);
+        cy.get('.monaco-editor textarea:first')
+          .parent()
+          .click()
+          .contains(isVariant ? VARIANT_EDITOR_TEXT : EDITOR_TEXT);
         break;
       case 'push':
-        cy.getByTestId('pushNotificationTitle').should('have.value', PUSH_TITLE);
-        cy.getByTestId('pushNotificationContent').should('have.value', isVariant ? VARIANT_EDITOR_TEXT : EDITOR_TEXT);
+        cy.get('[data-test-id=push-title-container] .monaco-editor textarea:first')
+          .parent()
+          .click()
+          .contains(PUSH_TITLE);
+        cy.get('[data-test-id=push-content-container] .monaco-editor textarea:first')
+          .parent()
+          .click()
+          .contains(isVariant ? VARIANT_EDITOR_TEXT : EDITOR_TEXT);
         break;
     }
   };
@@ -146,14 +168,33 @@ describe('Workflow Editor - Variants', function () {
         cy.getByTestId('email-editor').clear();
         break;
       case 'sms':
-        cy.getByTestId('smsNotificationContent').clear();
+        cy.get('.monaco-editor textarea:first').parent().click().type('{cmd}a').find('textarea').clear({
+          force: true,
+        });
         break;
       case 'chat':
-        cy.getByTestId('chatNotificationContent').clear();
+        cy.get('.monaco-editor textarea:first').parent().click().type('{cmd}a').find('textarea').clear({
+          force: true,
+        });
         break;
       case 'push':
-        cy.getByTestId('pushNotificationTitle').clear();
-        cy.getByTestId('pushNotificationContent').clear();
+        cy.get('[data-test-id=push-title-container] .monaco-editor textarea:first')
+          .parent()
+          .click()
+          .find('textarea')
+          .type(Cypress.platform === 'darwin' ? '{cmd}a' : '{ctrl}a', { force: true })
+          .clear({
+            force: true,
+          });
+
+        cy.get('[data-test-id=push-content-container] .monaco-editor textarea:first')
+          .parent()
+          .click()
+          .find('textarea')
+          .type(Cypress.platform === 'darwin' ? '{cmd}a' : '{ctrl}a', { force: true })
+          .clear({
+            force: true,
+          });
         break;
     }
   };
@@ -309,7 +350,7 @@ describe('Workflow Editor - Variants', function () {
       fillEditorContent(channel, true);
       goBack();
 
-      cy.getByTestId('editor-sidebar-add-variant').should('be.visible').click();
+      cy.getByTestId('variant-sidebar-add-variant').should('be.visible').click();
       addConditions();
       fillEditorContent(channel, true);
       goBack();
@@ -322,7 +363,7 @@ describe('Workflow Editor - Variants', function () {
       cy.wait('@getWorkflow');
 
       cy.getByTestId(`node-${channel}Selector`).getByTestId('variants-count').contains('2 variants');
-      editChannel(channel);
+      cy.clickWorkflowNode(`node-${channel}Selector`);
 
       checkVariantListCard({ selector: 'variant-item-card-1', message: VARIANT_EDITOR_TEXT });
       checkVariantConditions({ selector: 'variant-item-card-1', contains: '1' });
@@ -551,11 +592,14 @@ describe('Workflow Editor - Variants', function () {
       addConditions();
       goBack();
 
-      cy.getByTestId('variants-list-sidebar').getByTestId('editor-sidebar-add-conditions').should('be.visible').click();
+      cy.getByTestId('variants-list-sidebar')
+        .getByTestId('variant-sidebar-add-conditions')
+        .should('be.visible')
+        .click();
       addConditions();
 
       cy.getByTestId('variants-list-sidebar')
-        .getByTestId('editor-sidebar-edit-conditions')
+        .getByTestId('variant-sidebar-edit-conditions')
         .should('be.visible')
         .contains('1');
     });
@@ -647,7 +691,7 @@ describe('Workflow Editor - Variants', function () {
 
       navigateAndOpenFirstWorkflow();
 
-      editChannel(channel);
+      cy.clickWorkflowNode(`node-${channel}Selector`);
 
       cy.getByTestId('variant-item-card-0').getByTestId('conditions-action').should('be.visible').contains('1');
       cy.getByTestId('variant-item-card-0').trigger('mouseover');
@@ -678,7 +722,7 @@ describe('Workflow Editor - Variants', function () {
 
       navigateAndOpenFirstWorkflow();
 
-      editChannel(channel);
+      cy.clickWorkflowNode(`node-${channel}Selector`);
 
       cy.getByTestId('variant-root-card').getByTestId('conditions-action').should('be.visible').contains('No');
       cy.getByTestId('variant-root-card').trigger('mouseover');
@@ -797,7 +841,7 @@ describe('Workflow Editor - Variants', function () {
       cy.reload();
       cy.wait('@getWorkflow');
 
-      cy.getByTestId('editor-sidebar-delete').click();
+      cy.getByTestId('variant-sidebar-delete').click();
 
       cy.get('.mantine-Modal-modal').contains('Delete step?');
       cy.get('.mantine-Modal-modal button').contains('Delete step').click();
@@ -907,12 +951,10 @@ describe('Workflow Editor - Variants', function () {
       checkVariantListCard({ selector: 'variant-item-card-0', message: messageTitleMissing, hasBorder: true });
 
       cy.getByTestId('variants-list-errors-down').click();
-
       checkCurrentError({ message: messageContentMissing, count: '2/2' });
       checkVariantListCard({ selector: 'variant-item-card-0', message: messageContentMissing, hasBorder: true });
 
       cy.getByTestId('variants-list-errors-up').click();
-
       checkCurrentError({ message: messageTitleMissing, count: '1/2' });
       checkVariantListCard({ selector: 'variant-item-card-0', message: messageTitleMissing, hasBorder: true });
     });
diff --git a/apps/web/cypress/tests/tenants-page.spec.ts b/apps/web/cypress/tests/tenants-page.spec.ts
index 8d8aba413b2..2df27625a43 100644
--- a/apps/web/cypress/tests/tenants-page.spec.ts
+++ b/apps/web/cypress/tests/tenants-page.spec.ts
@@ -25,12 +25,14 @@ describe('Tenants Page', function () {
     cy.getByTestId('tenants-list-table')
       .find('tr')
       .eq(1)
-      .click()
+      .click({ force: true })
       .then(() => {
         cy.getByTestId('tenant-name').clear().type('New Name');
         cy.getByTestId('update-tenant-sidebar-submit').click();
       });
 
+    cy.waitForNetworkIdle(500);
+
     cy.getByTestId('tenants-list-table').find('td:nth-child(1)').contains('New Name');
     cy.getByTestId('tenants-list-table').find('td:nth-child(2)').contains('test-tenant');
 
@@ -38,7 +40,7 @@ describe('Tenants Page', function () {
     cy.getByTestId('tenants-list-table')
       .find('tr')
       .eq(1)
-      .click()
+      .click({ force: true })
       .then(() => {
         cy.getByTestId('tenant-identifier').clear().type('new-identifier');
         cy.getByTestId('update-tenant-sidebar-submit').click();
diff --git a/apps/web/cypress/tests/translations/translation-group.spec-ee.ts b/apps/web/cypress/tests/translations/translation-group.spec-ee.ts
index 01ee02c7940..497914472e2 100644
--- a/apps/web/cypress/tests/translations/translation-group.spec-ee.ts
+++ b/apps/web/cypress/tests/translations/translation-group.spec-ee.ts
@@ -10,31 +10,48 @@ describe('Translations Group Page', function () {
   });
 
   it('should add a new translations group', function () {
-    cy.visit('/translations');
-    cy.waitForNetworkIdle(500);
-    cy.getByTestId('translation-title').should('have.text', 'Translations');
-    cy.getByTestId('add-group-btn').click();
-    cy.getByTestId('default-language-select').click();
-    cy.get('.mantine-Select-item').first().click();
-    cy.getByTestId('default-language-submit-btn').click();
-    cy.getByTestId('group-name-input').type('Test Group');
-    cy.getByTestId('group-identifier-input').should('have.value', 'test-group');
-    cy.getByTestId('add-group-submit-btn').click();
+    createTranslationGroup();
+    cy.getByTestId('test-group').click({ force: true });
+    cy.getByTestId('translation-filename').should('have.text', 'Empty...');
+    cy.getByTestId('translation-keys-value').should('have.text', '');
   });
 
   it('should delete a translations group', function () {
-    cy.visit('/translations');
-    cy.waitForNetworkIdle(500);
-    cy.getByTestId('translation-title').should('have.text', 'Translations');
-    cy.getByTestId('add-group-btn').click();
-    cy.getByTestId('default-language-select').click();
-    cy.get('.mantine-Select-item').first().click();
-    cy.getByTestId('default-language-submit-btn').click();
-    cy.getByTestId('group-name-input').type('Test Group');
-    cy.getByTestId('group-identifier-input').should('have.value', 'test-group');
-    cy.getByTestId('add-group-submit-btn').click();
+    createTranslationGroup();
     cy.getByTestId('delete-group-btn').click();
     cy.getByTestId('delete-group-submit-btn').should('have.text', 'Delete group').click();
     cy.getByTestId('add-group-btn').should('exist');
   });
+
+  it('should upload translation file', function () {
+    createTranslationGroup();
+
+    cy.getByTestId('upload-files-container').find('input').attachFile('translation.json');
+    cy.getByTestId('upload-submit-btn').click();
+    cy.visit('/translations');
+    cy.getByTestId('test-group').click();
+    cy.getByTestId('translation-filename').should('have.text', 'translation.json');
+    cy.getByTestId('translation-keys-value').should('have.text', 15);
+  });
 });
+
+function createTranslationGroup() {
+  const identifier = 'test-group';
+
+  cy.visit('/translations');
+  cy.waitForNetworkIdle(500);
+  cy.getByTestId('translation-title').should('have.text', 'Translations');
+  cy.getByTestId('add-group-btn').click();
+  cy.waitForNetworkIdle(500);
+
+  cy.getByTestId('default-language-select').click().type('Hindi');
+
+  cy.get('.mantine-Select-item').first().click();
+  cy.getByTestId('default-language-submit-btn').click();
+  cy.waitForNetworkIdle(500);
+
+  cy.getByTestId('group-name-input').type('Test Group');
+  cy.getByTestId('group-identifier-input').should('have.value', identifier);
+  cy.getByTestId('add-group-submit-btn').click({ force: true });
+  cy.waitForNetworkIdle(1000);
+}
diff --git a/apps/web/package.json b/apps/web/package.json
index 2a94cee32c7..ca0b0e76320 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -148,6 +148,7 @@
     "@types/react": "^17.0.0",
     "@types/testing-library__jest-dom": "^5.14.5",
     "cypress": "^13.3.1",
+    "cypress-file-upload": "^5.0.8",
     "cypress-localstorage-commands": "^2.2.4",
     "cypress-network-idle": "^1.14.2",
     "cypress-wait-until": "^2.0.1",
diff --git a/apps/web/public/index.html b/apps/web/public/index.html
index a9cf4b7ee17..99cd67813b7 100644
--- a/apps/web/public/index.html
+++ b/apps/web/public/index.html
@@ -39,11 +39,6 @@
     ></script>
     <% } %>
 
-    <% if ( process.env.REACT_APP_HUBSPOT_EMBED ) { %>
-    <!-- Start of HubSpot Embed Code -->
-    <script type="text/javascript" id="hs-script-loader" async defer src="//js.hs-scripts.com/<%= process.env.REACT_APP_HUBSPOT_EMBED %>.js"></script>
-    <!-- End of HubSpot Embed Code -->
-    <% } %>
   </body>
 </html>
 
diff --git a/apps/web/public/static/images/mobilePreview/android.webp b/apps/web/public/static/images/mobilePreview/android.webp
new file mode 100644
index 00000000000..f231b5496a1
Binary files /dev/null and b/apps/web/public/static/images/mobilePreview/android.webp differ
diff --git a/apps/web/public/static/images/mobilePreview/iphone.webp b/apps/web/public/static/images/mobilePreview/iphone.webp
new file mode 100644
index 00000000000..d00552e0803
Binary files /dev/null and b/apps/web/public/static/images/mobilePreview/iphone.webp differ
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 3c4f971a63c..c99c5e476be 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -59,6 +59,7 @@ import { SSO, UserAccess, Cloud } from '@novu/design-system';
 import { BrandingForm, LayoutsListPage } from './pages/brand/tabs';
 import { TranslationRoutes } from './pages/TranslationPages';
 import { VariantsPage } from './pages/templates/components/VariantsPage';
+import { ChannelPreview } from './pages/templates/components/ChannelPreview';
 import { BillingRoutes } from './pages/BillingPages';
 
 library.add(far, fas);
@@ -160,7 +161,8 @@ function App() {
                     <Route path="snippet" element={<SnippetPage />} />
                     <Route path="providers" element={<ProvidersPage />} />
                     <Route path=":channel/:stepUuid" element={<ChannelStepEditor />} />
-                    <Route path=":channel/:stepUuid/variants" element={<VariantsPage />} />
+                    <Route path=":channel/:stepUuid/preview" element={<ChannelPreview />} />
+                    <Route path=":channel/:stepUuid/variants/:variantUuid/preview" element={<VariantsPage />} />
                     <Route path=":channel/:stepUuid/variants/:variantUuid" element={<ChannelStepEditor />} />
                     <Route path=":channel/:stepUuid/variants/create" element={<VariantsPage />} />
                   </Route>
diff --git a/apps/web/src/api/content-templates.ts b/apps/web/src/api/content-templates.ts
index 4aebf00c119..faec1880804 100644
--- a/apps/web/src/api/content-templates.ts
+++ b/apps/web/src/api/content-templates.ts
@@ -1,4 +1,4 @@
-import { IEmailBlock, MessageTemplateContentType } from '@novu/shared';
+import { IEmailBlock, IMessageButton, IMessageCTA, MessageTemplateContentType } from '@novu/shared';
 import { api } from './api.client';
 
 export async function previewEmail({
@@ -7,16 +7,66 @@ export async function previewEmail({
   payload,
   subject,
   layoutId,
+  locale,
 }: {
   content?: string | IEmailBlock[];
   contentType?: MessageTemplateContentType;
   payload: string;
   subject?: string;
   layoutId?: string;
+  locale?: string;
 }) {
-  return api.post('/v1/content-templates/preview/email', { content, contentType, payload, subject, layoutId });
+  return api.post('/v1/content-templates/preview/email', { content, contentType, payload, subject, layoutId, locale });
 }
 
-export async function previewInApp({ content, cta, payload }: { content?: string; cta: any; payload: string }) {
-  return api.post('/v1/content-templates/preview/in-app', { content, payload, cta });
+export async function previewInApp({
+  content,
+  cta,
+  payload,
+  locale,
+}: {
+  content?: string;
+  cta?: IMessageCTA;
+  payload: string;
+  locale?: string;
+}) {
+  return api.post('/v1/content-templates/preview/in-app', { content, payload, cta, locale });
+}
+
+export async function previewChat({
+  content,
+  payload,
+  locale,
+}: {
+  content?: string;
+  payload: string;
+  locale?: string;
+}) {
+  return api.post('/v1/content-templates/preview/chat', { content, payload, locale });
+}
+
+export async function previewSms({
+  content,
+  payload,
+  locale,
+}: {
+  content?: string | IEmailBlock[];
+  payload: string;
+  locale?: string;
+}): Promise<{ content: string }> {
+  return api.post('/v1/content-templates/preview/sms', { content, payload, locale });
+}
+
+export async function previewPush({
+  content,
+  payload,
+  locale,
+  title,
+}: {
+  content?: string | IEmailBlock[];
+  title?: string;
+  payload?: string;
+  locale?: string;
+}): Promise<{ content: string; title: string }> {
+  return api.post('/v1/content-templates/preview/push', { content, payload, locale, title });
 }
diff --git a/apps/web/src/api/hooks/index.ts b/apps/web/src/api/hooks/index.ts
index 9ff0778944c..8d5472f5b9d 100644
--- a/apps/web/src/api/hooks/index.ts
+++ b/apps/web/src/api/hooks/index.ts
@@ -3,3 +3,9 @@ export * from './useInAppActivated';
 export * from './useDeleteIntegration';
 export * from './useWebhookSupportStatus';
 export * from './notification-templates';
+export * from './useGetLocalesFromContent';
+export * from './usePreviewEmail';
+export * from './usePreviewSms';
+export * from './usePreviewPush';
+export * from './usePreviewChat';
+export * from './usePreviewInApp';
diff --git a/apps/web/src/api/hooks/notification-templates/useCreateDigestDemoWorkflow.ts b/apps/web/src/api/hooks/notification-templates/useCreateDigestDemoWorkflow.ts
index 6b2ef8a16eb..d778b592dd9 100644
--- a/apps/web/src/api/hooks/notification-templates/useCreateDigestDemoWorkflow.ts
+++ b/apps/web/src/api/hooks/notification-templates/useCreateDigestDemoWorkflow.ts
@@ -1,7 +1,8 @@
 import { useCallback } from 'react';
 import { useMutation } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
-import { ICreateNotificationTemplateDto, INotificationTemplate, StepTypeEnum } from '@novu/shared';
+import { StepTypeEnum } from '@novu/shared';
+import type { IResponseError, ICreateNotificationTemplateDto, INotificationTemplate } from '@novu/shared';
 
 import { createTemplate } from '../../notification-templates';
 import { parseUrl } from '../../../utils/routeUtils';
@@ -10,13 +11,14 @@ import { errorMessage } from '../../../utils/notifications';
 import { useNotificationGroup, useTemplates } from '../../../hooks';
 import { v4 as uuid4 } from 'uuid';
 import { TemplateCreationSourceEnum } from '../../../pages/templates/shared';
+import { FIRST_100_WORKFLOWS } from '../../../constants/workflowConstants';
 
 export const useCreateDigestDemoWorkflow = () => {
   const navigate = useNavigate();
   const { groups, loading: areNotificationGroupLoading } = useNotificationGroup();
   const { mutateAsync: createNotificationTemplate, isLoading: isCreating } = useMutation<
     INotificationTemplate & { __source?: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { template: ICreateNotificationTemplateDto; params: { __source?: string } }
   >((data) => createTemplate(data.template, data.params), {
     onSuccess: (template) => {
@@ -26,7 +28,7 @@ export const useCreateDigestDemoWorkflow = () => {
       errorMessage('Failed to create Digest Workflow');
     },
   });
-  const { templates = [], loading: templatesLoading } = useTemplates();
+  const { templates = [], loading: templatesLoading } = useTemplates(FIRST_100_WORKFLOWS);
   const digestOnboardingTemplate = 'Digest Workflow Example';
 
   const createDigestDemoWorkflow = useCallback(() => {
diff --git a/apps/web/src/api/hooks/notification-templates/useCreateOnboardingExperimentWorkflow.ts b/apps/web/src/api/hooks/notification-templates/useCreateOnboardingExperimentWorkflow.ts
new file mode 100644
index 00000000000..3e2c95b6bae
--- /dev/null
+++ b/apps/web/src/api/hooks/notification-templates/useCreateOnboardingExperimentWorkflow.ts
@@ -0,0 +1,120 @@
+import { useCallback } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { v4 as uuid4 } from 'uuid';
+import { EmailProviderIdEnum, StepTypeEnum } from '@novu/shared';
+import type { IResponseError, ICreateNotificationTemplateDto, INotificationTemplate } from '@novu/shared';
+import { QueryKeys } from '@novu/shared-web';
+
+import { createTemplate } from '../../notification-templates';
+import { parseUrl } from '../../../utils/routeUtils';
+import { ROUTES } from '../../../constants/routes.enum';
+import { errorMessage } from '../../../utils/notifications';
+import { useNotificationGroup, useTemplates, useIntegrations } from '../../../hooks';
+import { FIRST_100_WORKFLOWS } from '../../../constants/workflowConstants';
+import { IntegrationEntity } from '../../../pages/integrations/types';
+import { setIntegrationAsPrimary } from '../../../api/integration';
+
+export const useCreateOnboardingExperimentWorkflow = () => {
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const { groups, loading: areNotificationGroupLoading } = useNotificationGroup();
+
+  const { mutateAsync: createNotificationTemplate, isLoading: isCreating } = useMutation<
+    INotificationTemplate & { __source?: string },
+    IResponseError,
+    { template: ICreateNotificationTemplateDto; params: { __source?: string } }
+  >((data) => createTemplate(data.template, data.params), {
+    onSuccess: (template) => {
+      navigate(parseUrl(ROUTES.WORKFLOWS_EDIT_TEMPLATEID, { templateId: template._id as string }));
+    },
+    onError: () => {
+      errorMessage('Failed to create onboarding experiment Workflow');
+    },
+  });
+
+  const { mutate: makePrimaryIntegration, isLoading: isPrimaryEmailIntegrationLoading } = useMutation<
+    IntegrationEntity,
+    IResponseError,
+    { id: string }
+  >(({ id }) => setIntegrationAsPrimary(id), {
+    onSuccess: () => {
+      queryClient.refetchQueries({
+        predicate: ({ queryKey }) =>
+          queryKey.includes(QueryKeys.integrationsList) || queryKey.includes(QueryKeys.activeIntegrations),
+      });
+    },
+    onError: () => {
+      errorMessage("Failed to update integration's primary status");
+    },
+  });
+
+  const { templates = [], loading: templatesLoading } = useTemplates(FIRST_100_WORKFLOWS);
+
+  const { integrations, loading: isIntegrationsLoading } = useIntegrations();
+
+  const onboardingExperimentWorkflow = 'Onboarding Workflow';
+
+  const createOnboardingExperimentWorkflow = useCallback(() => {
+    if (templatesLoading) return;
+
+    const onboardingExperimentWorkflowExists = templates.find((template) =>
+      template.name.includes(onboardingExperimentWorkflow)
+    );
+
+    const novuEmailIntegration = integrations?.find(
+      (integration) => integration.providerId === EmailProviderIdEnum.Novu
+    );
+
+    if (novuEmailIntegration && !novuEmailIntegration?.primary) {
+      makePrimaryIntegration({ id: novuEmailIntegration?._id as string });
+    }
+
+    if (onboardingExperimentWorkflowExists) {
+      navigate(
+        parseUrl(ROUTES.WORKFLOWS_EDIT_TEMPLATEID, { templateId: onboardingExperimentWorkflowExists._id as string })
+      );
+    } else {
+      const payload = {
+        name: onboardingExperimentWorkflow,
+        notificationGroupId: groups[0]._id,
+        active: true,
+        draft: false,
+        critical: false,
+        tags: ['onboarding'],
+        steps: [
+          {
+            template: {
+              subject: 'Your first email notification from Novu!',
+              senderName: 'Novu Onboarding',
+              type: StepTypeEnum.EMAIL,
+              contentType: 'customHtml',
+              content:
+                // eslint-disable-next-line max-len
+                'It\'s that simple! <br/>Learn more about creating workflows <a href="https://docs.novu.co/workflows/notification-workflows">here</a>.',
+            },
+            uuid: uuid4(),
+            active: true,
+          },
+        ],
+      };
+
+      createNotificationTemplate({
+        template: payload as any,
+        params: { __source: 'Onboarding Experiment Workflow' },
+      });
+    }
+  }, [templatesLoading, templates, integrations, makePrimaryIntegration, navigate, groups, createNotificationTemplate]);
+
+  return {
+    createOnboardingExperimentWorkflow,
+    isLoading: isPrimaryEmailIntegrationLoading || isCreating,
+    isDisabled:
+      areNotificationGroupLoading ||
+      templatesLoading ||
+      isIntegrationsLoading ||
+      isPrimaryEmailIntegrationLoading ||
+      isCreating,
+  };
+};
diff --git a/apps/web/src/api/hooks/notification-templates/useUpdateTemplate.ts b/apps/web/src/api/hooks/notification-templates/useUpdateTemplate.ts
index 3f8fdc40e5b..a08c08d2587 100644
--- a/apps/web/src/api/hooks/notification-templates/useUpdateTemplate.ts
+++ b/apps/web/src/api/hooks/notification-templates/useUpdateTemplate.ts
@@ -1,5 +1,5 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query';
-import { INotificationTemplate, IUpdateNotificationTemplateDto } from '@novu/shared';
+import type { IResponseError, INotificationTemplate, IUpdateNotificationTemplateDto } from '@novu/shared';
 
 import { updateTemplate } from '../../notification-templates';
 import { QueryKeys } from '../../query.keys';
@@ -7,7 +7,7 @@ import { QueryKeys } from '../../query.keys';
 export const useUpdateTemplate = (
   options: UseMutationOptions<
     INotificationTemplate,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { id: string; data: Partial<IUpdateNotificationTemplateDto> }
   > = {}
 ) => {
@@ -15,7 +15,7 @@ export const useUpdateTemplate = (
 
   const { mutateAsync: updateTemplateMutation, ...rest } = useMutation<
     INotificationTemplate,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { id: string; data: Partial<IUpdateNotificationTemplateDto> }
   >(({ id, data }) => updateTemplate(id, data), {
     ...options,
diff --git a/apps/web/src/api/hooks/useDeleteIntegration.ts b/apps/web/src/api/hooks/useDeleteIntegration.ts
index bd13801ab7c..5bdc4bca47f 100644
--- a/apps/web/src/api/hooks/useDeleteIntegration.ts
+++ b/apps/web/src/api/hooks/useDeleteIntegration.ts
@@ -1,38 +1,28 @@
 import { MutationOptions, useMutation, useQueryClient } from '@tanstack/react-query';
+import type { IResponseError } from '@novu/shared';
 
 import { deleteIntegration } from '../integration';
 import { QueryKeys } from '../query.keys';
 
 export const useDeleteIntegration = (
-  options: MutationOptions<
-    {},
-    { error: string; message: string; statusCode: number },
-    {
-      id: string;
-      name: string;
-    }
-  > = {}
+  options: MutationOptions<{}, IResponseError, { id: string; name: string }> = {}
 ) => {
   const queryClient = useQueryClient();
 
-  const { mutate: deleteIntegrationMutate, ...rest } = useMutation<
-    {},
-    { error: string; message: string; statusCode: number },
+  const { mutate: deleteIntegrationMutate, ...rest } = useMutation<{}, IResponseError, { id: string; name: string }>(
+    ({ id }) => deleteIntegration(id),
     {
-      id: string;
-      name: string;
-    }
-  >(({ id }) => deleteIntegration(id), {
-    ...options,
-    onSuccess: async (data, variables, context) => {
-      options?.onSuccess?.(data, variables, context);
+      ...options,
+      onSuccess: async (data, variables, context) => {
+        options?.onSuccess?.(data, variables, context);
 
-      await queryClient.refetchQueries({
-        predicate: ({ queryKey }) =>
-          queryKey.includes(QueryKeys.integrationsList) || queryKey.includes(QueryKeys.activeIntegrations),
-      });
-    },
-  });
+        await queryClient.refetchQueries({
+          predicate: ({ queryKey }) =>
+            queryKey.includes(QueryKeys.integrationsList) || queryKey.includes(QueryKeys.activeIntegrations),
+        });
+      },
+    }
+  );
 
   return {
     deleteIntegration: deleteIntegrationMutate,
diff --git a/apps/web/src/api/hooks/useGetLocalesFromContent.ts b/apps/web/src/api/hooks/useGetLocalesFromContent.ts
new file mode 100644
index 00000000000..40498f01526
--- /dev/null
+++ b/apps/web/src/api/hooks/useGetLocalesFromContent.ts
@@ -0,0 +1,54 @@
+import { errorMessage } from '@novu/design-system';
+import type { IResponseError, IEmailBlock } from '@novu/shared';
+import { IS_DOCKER_HOSTED } from '@novu/shared-web';
+import { useMutation } from '@tanstack/react-query';
+import { useCallback } from 'react';
+
+import { getLocalesFromContent } from '../translations';
+
+export interface ILocale {
+  name: string;
+  officialName: string | null;
+  numeric: string;
+  alpha2: string;
+  alpha3: string;
+  currencyName: string | null;
+  currencyAlphabeticCode: string | null;
+  langName: string;
+  langIso: string;
+}
+
+type Payload = {
+  content?: string | IEmailBlock[];
+};
+
+export const useGetLocalesFromContent = () => {
+  const {
+    mutateAsync: getLocalesFromContentMutation,
+    isLoading,
+    data,
+  } = useMutation<ILocale[], IResponseError, Payload>(({ content }) => getLocalesFromContent({ content }), {
+    onError: (e) => {
+      errorMessage(e.message || 'Unexpected error');
+    },
+  });
+
+  const getLocalesFromContentCallback = useCallback(
+    async ({ content }: Payload) => {
+      if (IS_DOCKER_HOSTED) {
+        return;
+      }
+
+      await getLocalesFromContentMutation({
+        content,
+      });
+    },
+    [getLocalesFromContentMutation]
+  );
+
+  return {
+    getLocalesFromContent: getLocalesFromContentCallback,
+    isLoading,
+    data: data || [],
+  };
+};
diff --git a/apps/web/src/api/hooks/useMakePrimaryIntegration.ts b/apps/web/src/api/hooks/useMakePrimaryIntegration.ts
index 6f3eb0148fb..8d3c31b072c 100644
--- a/apps/web/src/api/hooks/useMakePrimaryIntegration.ts
+++ b/apps/web/src/api/hooks/useMakePrimaryIntegration.ts
@@ -1,4 +1,5 @@
 import { useMutation, useQueryClient, UseMutationOptions } from '@tanstack/react-query';
+import type { IResponseError } from '@novu/shared';
 
 import { errorMessage } from '../../utils/notifications';
 import type { IntegrationEntity } from '../../pages/integrations/types';
@@ -7,37 +8,28 @@ import { QueryKeys } from '../query.keys';
 import { setIntegrationAsPrimary } from '../integration';
 
 export const useMakePrimaryIntegration = (
-  options: UseMutationOptions<
-    IntegrationEntity,
-    { error: string; message: string; statusCode: number },
-    {
-      id: string;
-    }
-  > = {}
+  options: UseMutationOptions<IntegrationEntity, IResponseError, { id: string }> = {}
 ) => {
   const queryClient = useQueryClient();
 
-  const { mutate: makePrimaryIntegration, ...rest } = useMutation<
-    IntegrationEntity,
-    { error: string; message: string; statusCode: number },
+  const { mutate: makePrimaryIntegration, ...rest } = useMutation<IntegrationEntity, IResponseError, { id: string }>(
+    ({ id }) => setIntegrationAsPrimary(id),
     {
-      id: string;
+      ...options,
+      onSuccess: (integration, variables, context) => {
+        successMessage(`${integration.name} provider instance is activated and marked as the primary instance`);
+        queryClient.refetchQueries({
+          predicate: ({ queryKey }) =>
+            queryKey.includes(QueryKeys.integrationsList) || queryKey.includes(QueryKeys.activeIntegrations),
+        });
+        options?.onSuccess?.(integration, variables, context);
+      },
+      onError: (e: any, variables, context) => {
+        errorMessage(e.message || 'Unexpected error');
+        options?.onError?.(e, variables, context);
+      },
     }
-  >(({ id }) => setIntegrationAsPrimary(id), {
-    ...options,
-    onSuccess: (integration, variables, context) => {
-      successMessage(`${integration.name} provider instance is activated and marked as the primary instance`);
-      queryClient.refetchQueries({
-        predicate: ({ queryKey }) =>
-          queryKey.includes(QueryKeys.integrationsList) || queryKey.includes(QueryKeys.activeIntegrations),
-      });
-      options?.onSuccess?.(integration, variables, context);
-    },
-    onError: (e: any, variables, context) => {
-      errorMessage(e.message || 'Unexpected error');
-      options?.onError?.(e, variables, context);
-    },
-  });
+  );
 
   return {
     makePrimaryIntegration,
diff --git a/apps/web/src/api/hooks/usePreviewChat.ts b/apps/web/src/api/hooks/usePreviewChat.ts
new file mode 100644
index 00000000000..1365d90d0f1
--- /dev/null
+++ b/apps/web/src/api/hooks/usePreviewChat.ts
@@ -0,0 +1,45 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { errorMessage } from '@novu/design-system';
+import type { IResponseError } from '@novu/shared';
+import { IS_DOCKER_HOSTED } from '@novu/shared-web';
+
+import { previewChat } from '../content-templates';
+
+type PayloadType = {
+  content?: string;
+  payload: string;
+  locale?: string;
+};
+
+type ResultType = { content: string };
+
+export const usePreviewChat = (options: UseMutationOptions<ResultType, IResponseError, PayloadType> = {}) => {
+  const { mutateAsync, isLoading } = useMutation<ResultType, IResponseError, PayloadType>(
+    ({ content, payload, locale }) => previewChat({ content, payload, locale }),
+    {
+      onError: (e) => {
+        errorMessage(e.message || 'Unexpected error');
+      },
+      onSuccess: (result, variables, context) => {
+        options?.onSuccess?.(result, variables, context);
+      },
+    }
+  );
+
+  const getChatPreview = useCallback(
+    async ({ content, payload, locale }: PayloadType) => {
+      await mutateAsync({
+        content,
+        payload,
+        locale,
+      });
+    },
+    [mutateAsync]
+  );
+
+  return {
+    getChatPreview,
+    isLoading,
+  };
+};
diff --git a/apps/web/src/api/hooks/usePreviewEmail.ts b/apps/web/src/api/hooks/usePreviewEmail.ts
new file mode 100644
index 00000000000..f0d6798663d
--- /dev/null
+++ b/apps/web/src/api/hooks/usePreviewEmail.ts
@@ -0,0 +1,52 @@
+import { errorMessage } from '@novu/design-system';
+import type { IResponseError, IEmailBlock, MessageTemplateContentType } from '@novu/shared';
+import { IS_DOCKER_HOSTED } from '@novu/shared-web';
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { previewEmail } from '../content-templates';
+
+export type PayloadType = {
+  content?: string | IEmailBlock[];
+  contentType?: MessageTemplateContentType;
+  payload: string;
+  subject?: string;
+  layoutId?: string;
+  locale?: string;
+};
+
+export type ResultType = { html: string; subject: string };
+
+export const usePreviewEmail = (options: UseMutationOptions<ResultType, IResponseError, PayloadType> = {}) => {
+  const { mutateAsync, isLoading } = useMutation<ResultType, IResponseError, PayloadType>(
+    ({ content, payload, contentType, layoutId, locale, subject }) =>
+      previewEmail({ content, payload, contentType, layoutId, locale, subject }),
+
+    {
+      onError: (e: any) => {
+        errorMessage(e.message || 'Unexpected error');
+      },
+      onSuccess: (result, variables, context) => {
+        options?.onSuccess?.(result, variables, context);
+      },
+    }
+  );
+
+  const getEmailPreviewCallback = useCallback(
+    async ({ content, payload, contentType, layoutId, locale, subject }: PayloadType) => {
+      await mutateAsync({
+        content,
+        payload,
+        contentType,
+        layoutId,
+        locale,
+        subject,
+      });
+    },
+    [mutateAsync]
+  );
+
+  return {
+    getEmailPreview: getEmailPreviewCallback,
+    isLoading,
+  };
+};
diff --git a/apps/web/src/api/hooks/usePreviewInApp.tsx b/apps/web/src/api/hooks/usePreviewInApp.tsx
new file mode 100644
index 00000000000..027ab383175
--- /dev/null
+++ b/apps/web/src/api/hooks/usePreviewInApp.tsx
@@ -0,0 +1,48 @@
+import { errorMessage } from '@novu/design-system';
+import { IMessageButton, IMessageCTA } from '@novu/shared';
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { previewInApp } from '../content-templates';
+
+type PayloadType = {
+  content?: string;
+  cta?: IMessageCTA;
+  payload: string;
+  locale?: string;
+};
+
+type ResultType = { content: string; ctaButtons: IMessageButton[] };
+
+type ErrorType = { error: string; message: string; statusCode: number };
+
+export const usePreviewInApp = (options: UseMutationOptions<ResultType, ErrorType, PayloadType> = {}) => {
+  const { mutateAsync, isLoading } = useMutation<ResultType, ErrorType, PayloadType>(
+    ({ content, payload, locale, cta }) => previewInApp({ content, payload, locale, cta }),
+
+    {
+      onError: (e: any) => {
+        errorMessage(e.message || 'Unexpected error');
+      },
+      onSuccess: (result, variables, context) => {
+        options?.onSuccess?.(result, variables, context);
+      },
+    }
+  );
+
+  const getInAppPreviewCallback = useCallback(
+    async ({ content, payload, locale, cta }: PayloadType) => {
+      await mutateAsync({
+        content,
+        payload,
+        locale,
+        cta,
+      });
+    },
+    [mutateAsync]
+  );
+
+  return {
+    getInAppPreview: getInAppPreviewCallback,
+    isLoading,
+  };
+};
diff --git a/apps/web/src/api/hooks/usePreviewPush.tsx b/apps/web/src/api/hooks/usePreviewPush.tsx
new file mode 100644
index 00000000000..5ea5c047834
--- /dev/null
+++ b/apps/web/src/api/hooks/usePreviewPush.tsx
@@ -0,0 +1,48 @@
+import { errorMessage } from '@novu/design-system';
+import { IEmailBlock } from '@novu/shared';
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { previewPush } from '../content-templates';
+
+type PayloadType = {
+  content?: string | IEmailBlock[];
+  payload: string;
+  title?: string;
+  locale?: string;
+};
+
+type ResultType = { content: string; title: string };
+
+type ErrorType = { error: string; message: string; statusCode: number };
+
+export const usePreviewPush = (options: UseMutationOptions<ResultType, ErrorType, PayloadType> = {}) => {
+  const { mutateAsync, isLoading } = useMutation<ResultType, ErrorType, PayloadType>(
+    ({ content, payload, locale, title }) => previewPush({ content, payload, locale, title }),
+
+    {
+      onError: (e: any) => {
+        errorMessage(e.message || 'Unexpected error');
+      },
+      onSuccess: (result, variables, context) => {
+        options?.onSuccess?.(result, variables, context);
+      },
+    }
+  );
+
+  const getPushPreviewCallback = useCallback(
+    async ({ content, payload, locale, title }: PayloadType) => {
+      await mutateAsync({
+        content,
+        payload: JSON.parse(payload),
+        locale,
+        title,
+      });
+    },
+    [mutateAsync]
+  );
+
+  return {
+    getPushPreview: getPushPreviewCallback,
+    isLoading,
+  };
+};
diff --git a/apps/web/src/api/hooks/usePreviewSms.ts b/apps/web/src/api/hooks/usePreviewSms.ts
new file mode 100644
index 00000000000..ea0756b08c8
--- /dev/null
+++ b/apps/web/src/api/hooks/usePreviewSms.ts
@@ -0,0 +1,45 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query';
+import { useCallback } from 'react';
+import { errorMessage } from '@novu/design-system';
+import type { IEmailBlock, IResponseError } from '@novu/shared';
+import { IS_DOCKER_HOSTED } from '@novu/shared-web';
+
+import { previewSms } from '../content-templates';
+
+type PayloadType = {
+  content?: string | IEmailBlock[];
+  payload: string;
+  locale?: string;
+};
+
+type ResultType = { content: string };
+
+export const usePreviewSms = (options: UseMutationOptions<ResultType, IResponseError, PayloadType> = {}) => {
+  const { mutateAsync, isLoading } = useMutation<ResultType, IResponseError, PayloadType>(
+    ({ content, payload, locale }) => previewSms({ content, payload, locale }),
+    {
+      onError: (e) => {
+        errorMessage(e.message || 'Unexpected error');
+      },
+      onSuccess: (result, variables, context) => {
+        options?.onSuccess?.(result, variables, context);
+      },
+    }
+  );
+
+  const getSmsPreview = useCallback(
+    async ({ content, payload, locale }: PayloadType) => {
+      await mutateAsync({
+        content,
+        payload: JSON.parse(payload),
+        locale,
+      });
+    },
+    [mutateAsync]
+  );
+
+  return {
+    getSmsPreview,
+    isLoading,
+  };
+};
diff --git a/apps/web/src/api/hooks/useUpdateIntegration.ts b/apps/web/src/api/hooks/useUpdateIntegration.ts
index 2f58172f371..e391604bc63 100644
--- a/apps/web/src/api/hooks/useUpdateIntegration.ts
+++ b/apps/web/src/api/hooks/useUpdateIntegration.ts
@@ -1,5 +1,5 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { IUpdateIntegrationBodyDto } from '@novu/shared';
+import type { IResponseError, IUpdateIntegrationBodyDto } from '@novu/shared';
 
 import { errorMessage } from '../../utils/notifications';
 import { updateIntegration } from '../integration';
@@ -12,7 +12,7 @@ export const useUpdateIntegration = (integrationId: string) => {
 
   const { mutateAsync: updateIntegrationMutation, isLoading: isLoadingUpdate } = useMutation<
     IntegrationEntity,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     {
       id: string;
       data: IUpdateIntegrationBodyDto;
diff --git a/apps/web/src/api/translations.ts b/apps/web/src/api/translations.ts
new file mode 100644
index 00000000000..ba7473442a6
--- /dev/null
+++ b/apps/web/src/api/translations.ts
@@ -0,0 +1,5 @@
+import { api } from './api.client';
+
+export async function getLocalesFromContent({ content }) {
+  return api.post('/v1/translations/groups/preview/locales', { content });
+}
diff --git a/apps/web/src/components/layout/components/OrganizationSelect.tsx b/apps/web/src/components/layout/components/OrganizationSelect.tsx
index 125c77a28c9..a717f527d7d 100644
--- a/apps/web/src/components/layout/components/OrganizationSelect.tsx
+++ b/apps/web/src/components/layout/components/OrganizationSelect.tsx
@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import * as capitalize from 'lodash.capitalize';
 import styled from '@emotion/styled';
-import { IOrganizationEntity } from '@novu/shared';
+import type { IResponseError, IOrganizationEntity } from '@novu/shared';
 
 import { Select } from '@novu/design-system';
 import { addOrganization, switchOrganization } from '../../../api/organization';
@@ -20,15 +20,13 @@ export default function OrganizationSelect() {
 
   const { isLoading: loadingAddOrganization, mutateAsync: createOrganization } = useMutation<
     IOrganizationEntity,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     string
   >((name) => addOrganization(name));
 
-  const { mutateAsync: changeOrganization } = useMutation<
-    string,
-    { error: string; message: string; statusCode: number },
-    string
-  >((id) => switchOrganization(id));
+  const { mutateAsync: changeOrganization } = useMutation<string, IResponseError, string>((id) =>
+    switchOrganization(id)
+  );
 
   const switchOrgCallback = useCallback(
     async (organizationId: string | string[] | null) => {
diff --git a/apps/web/src/components/layout/components/SideNav.tsx b/apps/web/src/components/layout/components/SideNav.tsx
index 42a233c4b19..94ed93ad6a4 100644
--- a/apps/web/src/components/layout/components/SideNav.tsx
+++ b/apps/web/src/components/layout/components/SideNav.tsx
@@ -30,7 +30,7 @@ import { currentOnboardingStep } from '../../../pages/quick-start/components/rou
 import { useSpotlightContext } from '../../providers/SpotlightProvider';
 import { ChangesCountBadge } from './ChangesCountBadge';
 import OrganizationSelect from './OrganizationSelect';
-import { FeatureFlagsKeysEnum } from '@novu/shared';
+import { FeatureFlagsKeysEnum, UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
 
 const usePopoverStyles = createStyles(({ colorScheme }) => ({
   dropdown: {
@@ -218,7 +218,7 @@ export function SideNav({}: Props) {
           <a
             target="_blank"
             rel="noopener noreferrer"
-            href="https://docs.novu.co"
+            href={`https://docs.novu.co${UTM_CAMPAIGN_QUERY_PARAM}`}
             data-test-id="side-nav-bottom-link-documentation"
           >
             Docs
diff --git a/apps/web/src/components/quick-start/digest-demo-flow/consts.ts b/apps/web/src/components/quick-start/digest-demo-flow/consts.ts
index 623c5854117..04671bbdb4b 100644
--- a/apps/web/src/components/quick-start/digest-demo-flow/consts.ts
+++ b/apps/web/src/components/quick-start/digest-demo-flow/consts.ts
@@ -1,3 +1,5 @@
+import { UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+
 export enum GuideTitleEnum {
   TRIGGER_PREVIEW = 'Trigger',
   TRIGGER_PLAYGROUND = 'Run trigger multiple times',
@@ -26,7 +28,7 @@ export const guidePreview: Record<string, IGuide> = {
   trigger: {
     title: GuideTitleEnum.TRIGGER_PREVIEW,
     description: 'Use the server SDK in your app for a specific trigger. ',
-    docsUrl: 'https://docs.novu.co/api-reference/events/trigger-event',
+    docsUrl: `https://docs.novu.co/api-reference/events/trigger-event${UTM_CAMPAIGN_QUERY_PARAM}`,
     sequence: {
       1: { open: false, opacity: HINT_HIDDEN_OPACITY },
       2: { open: true, opacity: HINT_VISIBLE_OPACITY },
@@ -38,7 +40,7 @@ export const guidePreview: Record<string, IGuide> = {
   digest: {
     title: GuideTitleEnum.DIGEST_PREVIEW,
     description: 'Aggregates multiple events into a precise notification. ',
-    docsUrl: 'https://docs.novu.co/workflows/digest',
+    docsUrl: `https://docs.novu.co/workflows/digest${UTM_CAMPAIGN_QUERY_PARAM}`,
     sequence: {
       1: { open: false, opacity: HINT_HIDDEN_OPACITY },
       2: { open: false, opacity: HINT_HIDDEN_OPACITY },
@@ -50,7 +52,7 @@ export const guidePreview: Record<string, IGuide> = {
   email: {
     title: GuideTitleEnum.CHANNELS_PREVIEW,
     description: 'Build desired order of channels. ',
-    docsUrl: 'https://docs.novu.co/channels-and-providers/integration-store',
+    docsUrl: `https://docs.novu.co/channels-and-providers/integration-store${UTM_CAMPAIGN_QUERY_PARAM}`,
     sequence: {
       1: { open: false, opacity: HINT_HIDDEN_OPACITY },
       2: { open: false, opacity: HINT_HIDDEN_OPACITY },
diff --git a/apps/web/src/components/quick-start/in-app-onboarding/TriggerNode.tsx b/apps/web/src/components/quick-start/in-app-onboarding/TriggerNode.tsx
index 35c10e0d5c2..557bfe20b75 100644
--- a/apps/web/src/components/quick-start/in-app-onboarding/TriggerNode.tsx
+++ b/apps/web/src/components/quick-start/in-app-onboarding/TriggerNode.tsx
@@ -1,13 +1,13 @@
 import { Handle, Position } from 'react-flow-renderer';
-
 import { Button, colors, shadows, Text, Title, BoltOutlinedGradient, Playground } from '@novu/design-system';
-
 import styled from '@emotion/styled';
 import { createStyles, Group, Popover, Stack, useMantineColorScheme } from '@mantine/core';
-import { ActorTypeEnum, INotificationTemplate, StepTypeEnum, SystemAvatarIconEnum } from '@novu/shared';
+import { ActorTypeEnum, StepTypeEnum, SystemAvatarIconEnum } from '@novu/shared';
+import type { IResponseError, INotificationTemplate } from '@novu/shared';
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
+
 import { createTemplate, testTrigger } from '../../../api/notification-templates';
 import { useEffectOnce, useNotificationGroup, useTemplates } from '../../../hooks';
 import {
@@ -19,6 +19,7 @@ import { NodeStep } from '../../workflow';
 import { useSegment } from '../../providers/SegmentProvider';
 import { errorMessage } from '../../../utils/notifications';
 import { TemplateCreationSourceEnum } from '../../../pages/templates/shared';
+import { FIRST_100_WORKFLOWS } from '../../../constants/workflowConstants';
 
 const useStyles = createStyles((theme) => ({
   dropdown: {
@@ -57,7 +58,7 @@ export function TriggerNode({ data }: { data: { label: string; email?: string }
 
 function TriggerButton({ setOpened }: { setOpened: (value: boolean) => void }) {
   const [notificationNumber, setNotificationNumber] = useState(1);
-  const { templates = [], loading: templatesLoading } = useTemplates();
+  const { templates = [], loading: templatesLoading } = useTemplates(FIRST_100_WORKFLOWS);
 
   const segment = useSegment();
 
@@ -65,7 +66,7 @@ function TriggerButton({ setOpened }: { setOpened: (value: boolean) => void }) {
 
   const { mutate: createNotificationTemplate, isLoading: createTemplateLoading } = useMutation<
     INotificationTemplate & { __source?: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { template: ICreateNotificationTemplateDto; params: { __source?: string } }
   >((data) => createTemplate(data.template, data.params), {
     onError: (error) => {
diff --git a/apps/web/src/components/utils/Spotlight.tsx b/apps/web/src/components/utils/Spotlight.tsx
index a51b6934978..75c1fac6a53 100644
--- a/apps/web/src/components/utils/Spotlight.tsx
+++ b/apps/web/src/components/utils/Spotlight.tsx
@@ -2,8 +2,10 @@ import { SpotlightProvider } from '@mantine/spotlight';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Activity, Bolt, Box, Settings, Repeat, Team, Brand, Chat } from '@novu/design-system';
-import { useSpotlightContext } from '../providers/SpotlightProvider';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+
 import { ROUTES } from '../../constants/routes.enum';
+import { useSpotlightContext } from '../providers/SpotlightProvider';
 
 export const SpotLight = ({ children }) => {
   const navigate = useNavigate();
@@ -57,7 +59,7 @@ export const SpotLight = ({ children }) => {
         id: 'navigate-docs',
         title: 'Go to Documentation',
         onTrigger: () => {
-          window?.open('https://docs.novu.co/', '_blank')?.focus();
+          window?.open(`https://docs.novu.co${UTM_CAMPAIGN_QUERY_PARAM}`, '_blank')?.focus();
         },
       },
       {
diff --git a/apps/web/src/components/workflow/FlowEditor.tsx b/apps/web/src/components/workflow/FlowEditor.tsx
index a940a895102..38a4fc74883 100644
--- a/apps/web/src/components/workflow/FlowEditor.tsx
+++ b/apps/web/src/components/workflow/FlowEditor.tsx
@@ -1,12 +1,4 @@
-import {
-  ComponentType,
-  MouseEvent,
-  MouseEvent as ReactMouseEvent,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { ComponentType, MouseEvent, MouseEvent as ReactMouseEvent, useCallback, useEffect, useRef } from 'react';
 import ReactFlow, {
   addEdge,
   Background,
@@ -63,6 +55,7 @@ export interface IFlowEditorProps extends ReactFlowProps {
   onStepInit?: (step: IFlowStep) => Promise<void>;
   onGetStepError?: (i: number, errors: any) => string;
   addStep?: (channelType: StepTypeEnum, id: string, index?: number) => void;
+  sidebarOpen?: boolean;
 }
 
 export function FlowEditor({
@@ -90,6 +83,7 @@ export function FlowEditor({
   onEdit,
   onDelete,
   onAddVariant,
+  sidebarOpen,
   ...restProps
 }: IFlowEditorProps) {
   const { colorScheme } = useMantineColorScheme();
@@ -101,11 +95,12 @@ export function FlowEditor({
 
   useEffect(() => {
     const clientWidth = reactFlowWrapper.current?.clientWidth;
-    const middle = clientWidth ? clientWidth / 2 - 100 : 0;
+    const sub = sidebarOpen ? 300 : 100;
+    const middle = clientWidth ? clientWidth / 2 - sub : 0;
     const zoomView = 1;
 
     reactFlowInstance.setViewport({ x: middle, y: 10, zoom: zoomView });
-  }, [reactFlowInstance]);
+  }, [reactFlowInstance, sidebarOpen]);
 
   useEffect(() => {
     setTimeout(() => {
diff --git a/apps/web/src/components/workflow/preview/chat/ChatContent.tsx b/apps/web/src/components/workflow/preview/chat/ChatContent.tsx
new file mode 100644
index 00000000000..1b566aaa6d4
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/chat/ChatContent.tsx
@@ -0,0 +1,81 @@
+import styled from '@emotion/styled';
+import { Group, Skeleton, Stack, useMantineColorScheme } from '@mantine/core';
+import { colors, Text } from '@novu/design-system';
+
+import { NovuGreyIcon, PreviewEditOverlay } from '../common';
+import { When } from '../../../utils/When';
+import { useHover } from '../../../../hooks';
+
+export function ChatContent({ isLoading, content, errorMsg, showOverlay = true }) {
+  const { isHovered, onMouseEnter, onMouseLeave } = useHover();
+  const { colorScheme } = useMantineColorScheme();
+  const isDark = colorScheme === 'dark';
+
+  return (
+    <ContentAndOVerlayWrapperStyled onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      {isHovered && showOverlay && <PreviewEditOverlay />}
+      <Group
+        spacing={16}
+        align="flex-start"
+        noWrap
+        sx={{
+          position: 'relative',
+          ...(isHovered && showOverlay && { filter: 'blur(2px)' }),
+        }}
+      >
+        <When truthy={isLoading}>
+          <Skeleton radius={8} height={40} width={40} />
+          <Stack spacing={3}>
+            <Skeleton height={20} width={80} />
+            <Skeleton height={20} width={280} radius="xs" />
+          </Stack>
+        </When>
+        <When truthy={!isLoading}>
+          <div>
+            <NovuGreyIcon color={isDark ? colors.B30 : colors.BGLight} width="32px" height="32px" />
+          </div>
+          <Stack spacing={5}>
+            <Group spacing={8} align="flex-start" noWrap>
+              <Text
+                weight="bold"
+                color={isDark ? colors.B80 : colors.B20}
+                size="lg"
+                style={{
+                  lineHeight: '20px',
+                }}
+              >
+                Your App
+              </Text>
+              <PillStyled isDark={isDark}>APP</PillStyled>
+              <Text color={isDark ? colors.B60 : colors.B70}>now</Text>
+            </Group>
+            {errorMsg ? (
+              <Text color={colors.error}>{errorMsg}</Text>
+            ) : (
+              <Text color={isDark ? colors.B80 : colors.B20}>{content}</Text>
+            )}
+          </Stack>
+        </When>
+      </Group>
+    </ContentAndOVerlayWrapperStyled>
+  );
+}
+
+const PillStyled = styled.div<{ isDark: boolean }>`
+  background-color: ${({ isDark }) => (isDark ? colors.B40 : colors.BGLight)};
+  border-radius: 0.25rem;
+  padding: 0px 6px;
+  align-items: center;
+  color: ${({ isDark }) => (isDark ? colors.B80 : colors.B40)};
+  font-size: 10px;
+  font-weight: 400;
+  line-height: 1.25rem;
+`;
+
+const ContentAndOVerlayWrapperStyled = styled.div`
+  position: relative;
+  padding-top: 1.5rem;
+  padding-bottom: 1.25rem;
+  border-radius: 0.5rem;
+  overflow: hidden;
+`;
diff --git a/apps/web/src/components/workflow/preview/chat/ChatInput.tsx b/apps/web/src/components/workflow/preview/chat/ChatInput.tsx
new file mode 100644
index 00000000000..c07679926e8
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/chat/ChatInput.tsx
@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+import { Group } from '@mantine/core';
+import { colors, Text } from '@novu/design-system';
+import { EmojiIcon, SendIcon } from '../common';
+
+export function ChatInput() {
+  return (
+    <InputStyled>
+      <Text color={colors.B40}>Message Bot</Text>
+      <Group spacing={21}>
+        <EmojiIcon />
+        <SendIcon />
+      </Group>
+    </InputStyled>
+  );
+}
+
+const InputStyled = styled.div`
+  display: flex;
+  padding: 16px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+
+  border-radius: 8px;
+  border: 1px solid ${colors.B40};
+  opacity: 0.2;
+  background: transparent;
+  margin-top: 20px;
+`;
diff --git a/apps/web/src/components/workflow/preview/chat/ChatPreview.tsx b/apps/web/src/components/workflow/preview/chat/ChatPreview.tsx
new file mode 100644
index 00000000000..54bf3c1abcb
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/chat/ChatPreview.tsx
@@ -0,0 +1,68 @@
+import styled from '@emotion/styled';
+import { Divider, Flex, useMantineColorScheme } from '@mantine/core';
+import { colors, Text } from '@novu/design-system';
+import { useFormContext } from 'react-hook-form';
+import { useLocation } from 'react-router-dom';
+
+import { IForm } from '../../../../pages/templates/components/formTypes';
+import { useStepFormPath } from '../../../../pages/templates/hooks/useStepFormPath';
+import { LocaleSelect } from '../common';
+import { ChatContent } from './ChatContent';
+import { ChatInput } from './ChatInput';
+import { useTemplateLocales } from '../../../../pages/templates/hooks/useTemplateLocales';
+import { usePreviewChatTemplate } from '../../../../pages/templates/hooks/usePreviewChatTemplate';
+
+const ChatPreviewContainer = styled.div`
+  width: 100%;
+  max-width: 37.5em;
+`;
+
+export function ChatPreview({ showLoading = false }: { showLoading?: boolean }) {
+  const { colorScheme } = useMantineColorScheme();
+  const isDark = colorScheme === 'dark';
+
+  const { watch } = useFormContext<IForm>();
+  const path = useStepFormPath();
+  const content = watch(`${path}.template.content`);
+  const { pathname } = useLocation();
+  const isPreviewPath = pathname.endsWith('/preview');
+
+  const { selectedLocale, locales, areLocalesLoading, onLocaleChange } = useTemplateLocales({
+    content: content as string,
+    disabled: showLoading,
+  });
+
+  const { isPreviewContentLoading, previewContent, templateError } = usePreviewChatTemplate({
+    locale: selectedLocale,
+    disabled: showLoading,
+  });
+
+  return (
+    <ChatPreviewContainer>
+      <Flex>
+        <LocaleSelect
+          value={selectedLocale}
+          onLocaleChange={onLocaleChange}
+          isLoading={areLocalesLoading || isPreviewContentLoading}
+          locales={locales || []}
+        />
+      </Flex>
+      <Divider
+        color={isDark ? colors.B30 : colors.BGLight}
+        label={
+          <Text color={isDark ? colors.B30 : colors.BGLight} weight="bold">
+            Today
+          </Text>
+        }
+        labelPosition="center"
+      />
+      <ChatContent
+        showOverlay={isPreviewPath}
+        isLoading={showLoading || isPreviewContentLoading || areLocalesLoading}
+        content={previewContent}
+        errorMsg={templateError}
+      />
+      <ChatInput />
+    </ChatPreviewContainer>
+  );
+}
diff --git a/apps/web/src/components/workflow/preview/chat/index.ts b/apps/web/src/components/workflow/preview/chat/index.ts
new file mode 100644
index 00000000000..4fdde8ad750
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/chat/index.ts
@@ -0,0 +1 @@
+export * from './ChatPreview';
diff --git a/apps/web/src/pages/templates/editor/Mobile.tsx b/apps/web/src/components/workflow/preview/common/EmailMobile.tsx
similarity index 94%
rename from apps/web/src/pages/templates/editor/Mobile.tsx
rename to apps/web/src/components/workflow/preview/common/EmailMobile.tsx
index b71049a5b36..719c3e20c09 100644
--- a/apps/web/src/pages/templates/editor/Mobile.tsx
+++ b/apps/web/src/components/workflow/preview/common/EmailMobile.tsx
@@ -23,7 +23,7 @@ const useStyles = createStyles((theme) => ({
   },
 }));
 
-export const Mobile = ({ children }) => {
+export const EmailMobile = ({ children }) => {
   const { classes } = useStyles();
 
   return (
diff --git a/apps/web/src/components/workflow/preview/common/EmojiIcon.tsx b/apps/web/src/components/workflow/preview/common/EmojiIcon.tsx
new file mode 100644
index 00000000000..023dceef392
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/EmojiIcon.tsx
@@ -0,0 +1,24 @@
+/* eslint-disable max-len */
+export const EmojiIcon = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <mask
+        id="mask0_4003_40332"
+        style={{ maskType: 'alpha' }}
+        width="24"
+        height="24"
+        x="0"
+        y="0"
+        maskUnits="userSpaceOnUse"
+      >
+        <path fill="#D9D9D9" d="M0 0H24V24H0z"></path>
+      </mask>
+      <g mask="url(#mask0_4003_40332)">
+        <path
+          fill="#525266"
+          d="M15.5 11c.417 0 .77-.146 1.063-.438.291-.291.437-.645.437-1.062 0-.417-.146-.77-.438-1.063A1.447 1.447 0 0015.5 8c-.417 0-.77.146-1.063.438A1.446 1.446 0 0014 9.5c0 .417.146.77.438 1.063.291.291.645.437 1.062.437zm-7 0c.417 0 .77-.146 1.063-.438.291-.291.437-.645.437-1.062 0-.417-.146-.77-.438-1.063A1.447 1.447 0 008.5 8c-.417 0-.77.146-1.063.438A1.447 1.447 0 007 9.5c0 .417.146.77.438 1.063.291.291.645.437 1.062.437zm3.5 6.5c1.133 0 2.162-.32 3.088-.962A5.485 5.485 0 0017.1 14h-1.65a4.1 4.1 0 01-1.462 1.463A3.846 3.846 0 0112 16c-.717 0-1.38-.18-1.988-.537A4.099 4.099 0 018.55 14H6.9a5.485 5.485 0 002.012 2.538A5.294 5.294 0 0012 17.5zm0 4.5a9.738 9.738 0 01-3.9-.788 10.099 10.099 0 01-3.175-2.137c-.9-.9-1.612-1.958-2.137-3.175A9.738 9.738 0 012 12c0-1.383.263-2.683.788-3.9a10.099 10.099 0 012.137-3.175c.9-.9 1.958-1.612 3.175-2.137A9.738 9.738 0 0112 2c1.383 0 2.683.263 3.9.788a10.098 10.098 0 013.175 2.137c.9.9 1.613 1.958 2.137 3.175A9.738 9.738 0 0122 12a9.738 9.738 0 01-.788 3.9 10.098 10.098 0 01-2.137 3.175c-.9.9-1.958 1.613-3.175 2.137A9.738 9.738 0 0112 22zm0-2c2.233 0 4.125-.775 5.675-2.325C19.225 16.125 20 14.233 20 12c0-2.233-.775-4.125-2.325-5.675C16.125 4.775 14.233 4 12 4c-2.233 0-4.125.775-5.675 2.325C4.775 7.875 4 9.767 4 12c0 2.233.775 4.125 2.325 5.675C7.875 19.225 9.767 20 12 20z"
+        ></path>
+      </g>
+    </svg>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/common/LocaleSelect.tsx b/apps/web/src/components/workflow/preview/common/LocaleSelect.tsx
new file mode 100644
index 00000000000..685fcd80d8b
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/LocaleSelect.tsx
@@ -0,0 +1,85 @@
+import styled from '@emotion/styled';
+import { SelectItemProps, Group } from '@mantine/core';
+import { Select, ISelectProps, Text } from '@novu/design-system';
+import { forwardRef } from 'react';
+import { IS_DOCKER_HOSTED } from '../../../../config';
+
+const rightSectionWidth = 20;
+
+export function LocaleSelect({
+  locales,
+  value,
+  isLoading,
+  onLocaleChange,
+  className,
+  dropdownPosition,
+}: {
+  locales: { langName: string; langIso: string }[];
+  value?: string;
+  isLoading?: boolean;
+  onLocaleChange: (val: string) => void;
+  className?: string;
+  dropdownPosition?: ISelectProps['dropdownPosition'];
+}) {
+  // Do not render locale select if self-hosted or no locale or only one locale
+  if (IS_DOCKER_HOSTED || locales.length < 2) {
+    return null;
+  }
+
+  return (
+    <SelectContainer className={className}>
+      <Select
+        itemComponent={SelectItem}
+        data={locales?.map((locale) => {
+          return {
+            value: locale.langIso,
+            label: locale.langName,
+          };
+        })}
+        icon={<FlagIcon locale={value} />}
+        loading={isLoading}
+        limit={50}
+        searchable
+        withinPortal
+        onChange={(val) => {
+          if (!val || Array.isArray(val)) return;
+
+          onLocaleChange(val);
+        }}
+        value={value}
+        variant="unstyled"
+        rightSectionWidth={rightSectionWidth}
+        dropdownPosition={dropdownPosition}
+      />
+    </SelectContainer>
+  );
+}
+
+const SelectItem = forwardRef<HTMLDivElement, SelectItemProps>(({ label, value, ...others }: SelectItemProps, ref) => {
+  return (
+    <Group ref={ref} noWrap {...others}>
+      <FlagIcon locale={value} />
+      <Text rows={1}> {label}</Text>
+    </Group>
+  );
+});
+
+export const FlagIcon = ({ locale }) => {
+  if (IS_DOCKER_HOSTED) {
+    return null;
+  }
+
+  try {
+    const module = require('@novu/ee-translation-web');
+
+    return module.FlagIcon({ locale });
+  } catch (e) {}
+
+  return [];
+};
+
+const SelectContainer = styled.div`
+  .mantine-Select-input {
+    padding-right: ${rightSectionWidth}px;
+  }
+`;
diff --git a/apps/web/src/components/workflow/preview/common/NovuGreyIcon.tsx b/apps/web/src/components/workflow/preview/common/NovuGreyIcon.tsx
new file mode 100644
index 00000000000..cf8c8d6e6a9
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/NovuGreyIcon.tsx
@@ -0,0 +1,19 @@
+/* eslint-disable max-len */
+export const NovuGreyIcon = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="none" viewBox="0 0 32 32" {...props}>
+      <path
+        fill="currentColor"
+        d="M24.766 2.613A15.926 15.926 0 0016 0c-1.782 0-3.495.291-5.096.829l12.262 12.34c.589.593 1.6.176 1.6-.66V2.614z"
+      />
+      <path
+        fill="currentColor"
+        d="M6.343 3.242A15.975 15.975 0 000 16c0 3.025.84 5.854 2.298 8.266V19.49c0-5.24 6.344-7.856 10.038-4.139l13.321 13.407A15.975 15.975 0 0032 16c0-3.025-.84-5.854-2.298-8.266v4.776c0 5.24-6.344 7.856-10.038 4.139L6.343 3.242z"
+      />
+      <path
+        fill="currentColor"
+        d="M21.096 31.171L8.834 18.831c-.589-.593-1.6-.176-1.6.66v9.896A15.925 15.925 0 0016 32c1.782 0 3.495-.291 5.096-.829z"
+      />
+    </svg>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/common/PreviewEditOverlay.tsx b/apps/web/src/components/workflow/preview/common/PreviewEditOverlay.tsx
new file mode 100644
index 00000000000..978a088f6cc
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/PreviewEditOverlay.tsx
@@ -0,0 +1,50 @@
+import styled from '@emotion/styled';
+import { Flex, Group, Overlay, UnstyledButton, useMantineColorScheme } from '@mantine/core';
+import { colors, PencilOutlined, Text } from '@novu/design-system';
+import { StepTypeEnum } from '@novu/shared';
+import { useNavigate, useParams } from 'react-router-dom';
+import { useBasePath } from '../../../../pages/templates/hooks/useBasePath';
+
+export function PreviewEditOverlay() {
+  const { colorScheme } = useMantineColorScheme();
+  const isDark = colorScheme === 'dark';
+
+  const basePath = useBasePath();
+  const { channel, stepUuid, variantUuid } = useParams<{
+    channel: StepTypeEnum;
+    stepUuid: string;
+    variantUuid: string;
+  }>();
+
+  const navigate = useNavigate();
+
+  const handleEditMessage = () => {
+    const isVariant = !!variantUuid;
+    let path = `${basePath}/${channel}/${stepUuid}`;
+    if (isVariant) {
+      path += `/variants/${variantUuid}`;
+    }
+
+    navigate(path);
+  };
+
+  return (
+    <OverlayStyled>
+      <Flex onClick={handleEditMessage} align="center" justify="center" h="100%" style={{ cursor: 'pointer' }}>
+        <UnstyledButton>
+          <Group spacing={10} position="center" align="center" h="100%" noWrap>
+            <PencilOutlined color={isDark ? colors.white : colors.B60} />
+            <Text color={isDark ? colors.white : colors.B60} weight="bold">
+              Edit message
+            </Text>
+          </Group>
+        </UnstyledButton>
+      </Flex>
+    </OverlayStyled>
+  );
+}
+
+const OverlayStyled = styled(Overlay)`
+  border: 1px solid ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B30 : colors.BGLight)};
+  background: ${({ theme }) => (theme.colorScheme === 'dark' ? 'rgba(41, 41, 51, 0.8)' : 'rgba(255, 255, 255, 0.8)')};
+`;
diff --git a/apps/web/src/components/workflow/preview/common/PreviewUserIcon.tsx b/apps/web/src/components/workflow/preview/common/PreviewUserIcon.tsx
new file mode 100644
index 00000000000..ea08468539e
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/PreviewUserIcon.tsx
@@ -0,0 +1,12 @@
+/* eslint-disable max-len */
+export const PreviewUserIcon = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" fill="none" viewBox="0 0 40 40" {...props}>
+      <path fill="#3D3D4D" d="M40 20c0 11.046-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0s20 8.954 20 20z" />
+      <path
+        fill="#525266"
+        d="M7 35.2v-4.228c0-1.018.257-1.91.77-2.673a5.002 5.002 0 012.008-1.744c1.815-.842 3.588-1.474 5.32-1.895a22.072 22.072 0 015.235-.632c1.76 0 3.5.215 5.223.646 1.722.43 3.49 1.058 5.305 1.881a4.96 4.96 0 012.035 1.744c.514.764.77 1.655.77 2.673v3.63A19.93 19.93 0 0120 40a19.922 19.922 0 01-13-4.8zM15.764 19.958c1.213 1.213 2.736 1.82 4.57 1.82 1.833 0 3.356-.607 4.569-1.82s1.82-2.736 1.82-4.57c0-1.832-.607-3.356-1.82-4.569S22.167 9 20.333 9c-1.833 0-3.356.606-4.57 1.82-1.212 1.212-1.819 2.736-1.819 4.569 0 1.833.607 3.356 1.82 4.57z"
+      />
+    </svg>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/common/SendIcon.tsx b/apps/web/src/components/workflow/preview/common/SendIcon.tsx
new file mode 100644
index 00000000000..a0bce8de46e
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/SendIcon.tsx
@@ -0,0 +1,21 @@
+/* eslint-disable max-len */
+export const SendIcon = (props) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" {...props}>
+      <mask
+        id="mask0_4003_40335"
+        style={{ maskType: 'alpha' }}
+        width="24"
+        height="24"
+        x="0"
+        y="0"
+        maskUnits="userSpaceOnUse"
+      >
+        <path fill="#D9D9D9" d="M0 0H24V24H0z"></path>
+      </mask>
+      <g mask="url(#mask0_4003_40335)">
+        <path fill="#525266" d="M3 20V4l19 8-19 8zm2-3l11.85-5L5 7v3.5l6 1.5-6 1.5V17z"></path>
+      </g>
+    </svg>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/common/icons/InAppHeaderIcons.tsx b/apps/web/src/components/workflow/preview/common/icons/InAppHeaderIcons.tsx
new file mode 100644
index 00000000000..5bdb30c91a0
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/icons/InAppHeaderIcons.tsx
@@ -0,0 +1,74 @@
+import { useMantineColorScheme } from '@mantine/core';
+
+/* eslint-disable max-len */
+export const InAppHeaderIcons = (props) => {
+  const { colorScheme } = useMantineColorScheme();
+  const isDark = colorScheme === 'dark';
+
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="96" height="24" fill="none" viewBox="0 0 96 24">
+      <mask
+        id="mask0_174_182126"
+        style={{ maskType: 'alpha' }}
+        width="20"
+        height="20"
+        x="0"
+        y="2"
+        maskUnits="userSpaceOnUse"
+      >
+        <path fill="#D9D9D9" d="M0 2H20V22H0z"></path>
+      </mask>
+      <g mask="url(#mask0_174_182126)">
+        <path
+          fill="#828299"
+          d="M11.065 21a7.789 7.789 0 01-3.144-.639 8.208 8.208 0 01-2.555-1.727 8.207 8.207 0 01-1.727-2.555A7.79 7.79 0 013 12.935c0-1.943.611-3.66 1.833-5.154C6.056 6.288 7.64 5.361 9.583 5c-.236 1.375-.156 2.68.24 3.917.396 1.236 1.073 2.333 2.031 3.291a7.85 7.85 0 003.292 1.98 8.05 8.05 0 003.854.229c-.333 1.916-1.253 3.493-2.76 4.729C14.733 20.382 13.008 21 11.065 21z"
+        ></path>
+      </g>
+      <mask
+        id="mask1_174_182126"
+        style={{ maskType: 'alpha' }}
+        width="20"
+        height="20"
+        x="36"
+        y="2"
+        maskUnits="userSpaceOnUse"
+      >
+        <path fill="#D9D9D9" d="M36 2H56V22H36z"></path>
+      </mask>
+      <g mask="url(#mask1_174_182126)">
+        <path
+          fill="#828299"
+          d="M40 17.5V16h1v-5c0-1.208.371-2.27 1.115-3.188.743-.916 1.704-1.486 2.885-1.708V5c0-.278.097-.514.292-.708A.964.964 0 0146 4c.278 0 .514.097.708.292.195.194.292.43.292.708v1.104c1.18.222 2.142.792 2.885 1.708C50.63 8.73 51 9.793 51 11v5h1v1.5H40zm5.996 2.5c-.414 0-.767-.147-1.059-.44a1.45 1.45 0 01-.437-1.06h3c0 .417-.147.77-.442 1.063a1.456 1.456 0 01-1.062.437z"
+        ></path>
+      </g>
+      <path
+        fill={isDark ? '#3D3D4D' : '#EDF0F2'}
+        d="M96 12c0 6.627-5.373 12-12 12s-12-5.373-12-12S77.373 0 84 0s12 5.373 12 12z"
+      ></path>
+      <path
+        fill="#828299"
+        d="M76.2 21.12v-2.537c0-.61.154-1.145.462-1.604a3 3 0 011.205-1.046 17.323 17.323 0 013.191-1.137 13.248 13.248 0 013.142-.38c1.056 0 2.1.13 3.133.388 1.034.258 2.095.635 3.184 1.13.505.238.912.587 1.22 1.045.309.459.463.993.463 1.604v2.178A11.958 11.958 0 0184 24a11.953 11.953 0 01-7.8-2.88zM81.458 11.975c.728.728 1.642 1.092 2.742 1.092s2.014-.364 2.742-1.092c.727-.728 1.091-1.642 1.091-2.742s-.364-2.014-1.091-2.741C86.214 5.764 85.3 5.4 84.2 5.4s-2.014.364-2.742 1.092c-.727.727-1.091 1.641-1.091 2.741s.364 2.014 1.091 2.742z"
+      ></path>
+      <rect width="10.6" height="10.6" x="48.7" y="2.7" fill="url(#paint0_linear_174_182126)" rx="5.3"></rect>
+      <rect
+        width="10.6"
+        height="10.6"
+        x="48.7"
+        y="2.7"
+        stroke={isDark ? '#292933' : '#EDF0F2'}
+        strokeWidth="1.4"
+        rx="5.3"
+      ></rect>
+      <path
+        fill="#fff"
+        d="M55.82 10.26V11h-3.2v-.74h1.172V6.888c0-.133.004-.27.012-.412l-.832.696a.366.366 0 01-.144.072.366.366 0 01-.24-.04.254.254 0 01-.072-.068l-.312-.428 1.764-1.5h.812v5.052h1.04z"
+      ></path>
+      <defs>
+        <linearGradient id="paint0_linear_174_182126" x1="48" x2="60" y1="8" y2="8" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#DD2476"></stop>
+          <stop offset="1" stopColor="#FF512F"></stop>
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/common/icons/android/AndroidIndicatorsIcon.tsx b/apps/web/src/components/workflow/preview/common/icons/android/AndroidIndicatorsIcon.tsx
new file mode 100644
index 00000000000..4d78667a994
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/icons/android/AndroidIndicatorsIcon.tsx
@@ -0,0 +1,24 @@
+/* eslint-disable max-len */
+
+import { ComponentProps } from 'react';
+
+export const AndroidIndicatorsIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg width="54" height="14" viewBox="0 0 54 14" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M13.6647 13V2.46097C13.6647 1.56355 12.5741 1.12039 11.9481 1.76345L1.68925 12.3025C1.07235 12.9362 1.5214 14 2.40582 14H12.6647C13.2169 14 13.6647 13.5523 13.6647 13Z"
+        fill="currentColor"
+      />
+      <path
+        d="M37.6105 5.47661C37.9528 5.0963 37.9559 4.5154 37.5867 4.16114C36.6425 3.25523 35.5725 2.52153 34.4165 1.98957C32.9969 1.33625 31.4753 1 29.9387 1C28.402 1 26.8805 1.33626 25.4608 1.98957C24.3048 2.52153 23.2349 3.25523 22.2907 4.16115C21.9215 4.5154 21.9245 5.0963 22.2668 5.47662L29.9387 14L37.6105 5.47661Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M49.1595 1C48.6072 1 48.1595 1.44772 48.1595 2H47.2127C46.6604 2 46.2127 2.44772 46.2127 3V13C46.2127 13.5523 46.6604 14 47.2127 14H53C53.5523 14 54 13.5523 54 13V3C54 2.44772 53.5523 2 53 2H52.0531C52.0531 1.44772 51.6054 1 51.0531 1H49.1595Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/common/icons/android/AndroidKeyboard.tsx b/apps/web/src/components/workflow/preview/common/icons/android/AndroidKeyboard.tsx
new file mode 100644
index 00000000000..a703efb2787
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/icons/android/AndroidKeyboard.tsx
@@ -0,0 +1,1808 @@
+/* eslint-disable max-len */
+import { ComponentProps } from 'react';
+
+interface AndroidKeyboardProps extends ComponentProps<'svg'> {
+  isDarkMode?: boolean;
+}
+
+export const AndroidKeyboard = ({ isDarkMode, ...rest }: AndroidKeyboardProps) => {
+  return isDarkMode ? (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 392 288" {...rest}>
+      <g opacity="0.4">
+        <path fill="#2B2B2B" d="M0 0h392v44H0z" />
+        <g filter="url(#a)">
+          <rect width="30" height="30" x="12" y="7" fill="#fff" rx="15" />
+          <path fill="#666" d="M30.41 17.41 29 16l-6 6 6 6 1.41-1.41L25.83 22l4.58-4.59Z" />
+        </g>
+        <path
+          fill="#A5A9AC"
+          d="M74.76 13.5a2.967 2.967 0 0 0-2.974 2.975v11.05A2.967 2.967 0 0 0 74.76 30.5h8.925l5.1-5.1v-8.925A2.967 2.967 0 0 0 85.81 13.5H74.76Zm.213 1.7h10.625a1.487 1.487 0 0 1 1.488 1.488v7.862H85.81a2.967 2.967 0 0 0-2.975 2.975V28.8h-7.863a1.488 1.488 0 0 1-1.487-1.488V16.688a1.488 1.488 0 0 1 1.487-1.487Zm7.387 2.355a1.56 1.56 0 0 0-.4.05c-.799.221-1.25 1.037-1.045 1.845.042.128.102.255.178.374l2.746-.748c0-.145-.017-.289-.051-.434a1.492 1.492 0 0 0-1.428-1.087Zm-5.33 1.47c-.144 0-.272 0-.4.043a1.497 1.497 0 0 0-1.045 1.827c.026.136.102.255.179.391l2.745-.748a1.462 1.462 0 0 0-1.479-1.513Zm7.268 2.346-7.76 2.134a4.476 4.476 0 0 0 4.555 1.393 4.482 4.482 0 0 0 3.205-3.527Z"
+        />
+        <g clipPath="url(#b)">
+          <path
+            fill="#A5A9AC"
+            d="M132.714 17h2.572v10h-2.572V17Zm-4.285 0h-5.143a1.694 1.694 0 0 0-1.715 1.667v6.666c0 .834.686 1.667 1.715 1.667h5.143a1.694 1.694 0 0 0 1.714-1.667V22h-2.572v2.5h-3.428v-5h6v-.833c0-.834-.686-1.667-1.714-1.667Zm17.142 2.5V17h-7.714v10h2.572v-3.333h3.428v-2.5h-3.428V19.5h5.142Z"
+          />
+        </g>
+        <path
+          fill="#A5A9AC"
+          d="m190.357 20.41-6.5-.002v1.667h6.5V20.41ZM183.857 23.332l6.5.002V25l-6.5-.001v-1.666ZM188.357 26.334l-4.5-.002V28l4.5.001v-1.666Z"
+        />
+        <path
+          fill="#A5A9AC"
+          fillRule="evenodd"
+          d="M189.207 14.227h3.484c.916 0 1.666.777 1.666 1.728v13.818c0 .95-.75 1.727-1.666 1.727h-11.667c-.917 0-1.667-.777-1.667-1.727V15.955c0-.95.75-1.728 1.667-1.728h3.483c.35-1.001 1.267-1.727 2.35-1.727 1.084 0 2 .726 2.35 1.727Zm-1.516.864c0-.475-.375-.864-.834-.864-.458 0-.833.389-.833.864s.375.864.833.864a.826.826 0 0 0 .678-.363.904.904 0 0 0 .147-.38.808.808 0 0 0 .009-.121Zm-6.667.864v13.818h11.667V15.955h-1.667v2.59h-8.333v-2.59h-1.667Z"
+          clipRule="evenodd"
+        />
+        <path
+          fill="#A5A9AC"
+          d="M247.283 22.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22l-1.91 3.32c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94 0 .31.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58Zm-7.14 2.66a3.61 3.61 0 0 1-3.6-3.6c0-1.98 1.62-3.6 3.6-3.6s3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6Z"
+        />
+        <path stroke="#404A50" d="M278.429 11v22" />
+        <path
+          fill="#A5A9AC"
+          d="M310.714 20c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z"
+        />
+        <path
+          fill="#B9BDBF"
+          d="M370 24c1.66 0 2.99-1.34 2.99-3l.01-6c0-1.66-1.34-3-3-3s-3 1.34-3 3v6c0 1.66 1.34 3 3 3Zm5.3-3c0 3-2.54 5.1-5.3 5.1s-5.3-2.1-5.3-5.1H363c0 3.41 2.72 6.23 6 6.72V31h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7Z"
+        />
+        <path fill="#2B2B2B" d="M0 44h392v198H0z" />
+        <g filter="url(#c)">
+          <rect width="34.8" height="40" x="4" y="48" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="m23.77 75.124 4.155 3.291-1.46 1.348-4.088-3.246 1.393-1.392Zm4.099-6.816v1.033c0 1.228-.154 2.328-.46 3.302-.308.973-.75 1.8-1.326 2.481a5.747 5.747 0 0 1-2.077 1.562c-.802.359-1.7.539-2.696.539-.966 0-1.853-.18-2.662-.54a5.982 5.982 0 0 1-2.088-1.56c-.584-.682-1.037-1.51-1.36-2.482-.321-.974-.482-2.074-.482-3.302v-1.033c0-1.228.157-2.325.472-3.29.322-.974.774-1.801 1.358-2.483a5.822 5.822 0 0 1 2.078-1.572c.809-.36 1.696-.54 2.662-.54.995 0 1.898.18 2.706.54.809.36 1.501.883 2.078 1.572.576.682 1.018 1.509 1.325 2.482.315.966.472 2.063.472 3.29Zm-2.145 1.033v-1.056c0-.973-.101-1.834-.303-2.583-.195-.748-.483-1.377-.865-1.887a3.755 3.755 0 0 0-1.393-1.156c-.546-.262-1.172-.393-1.875-.393-.667 0-1.273.13-1.82.393a3.875 3.875 0 0 0-1.392 1.156c-.39.51-.689 1.139-.899 1.887-.21.749-.314 1.61-.314 2.583v1.056c0 .98.105 1.85.314 2.605.21.749.51 1.382.899 1.898.397.51.868.895 1.415 1.157a4.155 4.155 0 0 0 1.82.393c.703 0 1.328-.131 1.875-.393a3.663 3.663 0 0 0 1.381-1.157c.382-.516.67-1.149.865-1.898.194-.756.292-1.624.292-2.605Z"
+          />
+          <path fill="#B3B7B9" d="M35.174 51.876V59h-1.406v-5.503l-1.69.537v-1.108l2.944-1.05h.152Z" />
+        </g>
+        <g filter="url(#d)">
+          <rect width="34.8" height="40" x="42.8" y="48" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="m56.19 72.059 3.246-11.41h1.573l-.91 4.436L56.606 77h-1.56l1.145-4.941Zm-3.357-11.41 2.583 11.185L56.19 77h-1.55l-3.964-16.352h2.156Zm12.376 11.174 2.527-11.175h2.167L65.95 77H64.4l.809-5.177Zm-3.965-11.175 3.156 11.41L65.546 77h-1.561l-3.37-11.915-.92-4.437h1.55Z"
+          />
+          <path
+            fill="#B3B7B9"
+            d="M75.41 57.901V59h-4.864v-.938l2.3-2.465c.231-.258.413-.484.547-.679.133-.199.23-.376.288-.532a1.293 1.293 0 0 0-.015-1.006.8.8 0 0 0-.317-.361.947.947 0 0 0-.508-.127.98.98 0 0 0-.557.156.993.993 0 0 0-.351.434 1.608 1.608 0 0 0-.117.63h-1.412c0-.423.102-.81.303-1.162a2.22 2.22 0 0 1 .855-.845c.368-.211.804-.317 1.308-.317.498 0 .918.082 1.26.244.345.16.606.39.781.694.18.3.269.657.269 1.074 0 .234-.038.464-.112.688a3.109 3.109 0 0 1-.323.664c-.136.218-.302.44-.498.664-.195.225-.412.458-.65.699L72.364 57.9h3.046Z"
+          />
+        </g>
+        <g filter="url(#e)">
+          <rect width="34.8" height="40" x="81.6" y="48" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M104.75 75.237V77h-8.659v-1.763h8.659Zm-8.22-14.589V77h-2.168V60.648h2.167Zm7.074 7.03v1.764h-7.513v-1.763h7.513Zm1.034-7.03v1.775h-8.547v-1.775h8.547Z"
+          />
+          <path
+            fill="#B3B7B9"
+            d="M110.786 54.835h.752c.241 0 .44-.04.596-.122a.806.806 0 0 0 .347-.352c.078-.153.117-.33.117-.532 0-.182-.036-.343-.107-.483a.734.734 0 0 0-.318-.332 1.085 1.085 0 0 0-.542-.122c-.172 0-.332.034-.478.102a.875.875 0 0 0-.352.288.755.755 0 0 0-.132.45h-1.411c0-.391.104-.731.313-1.021.211-.29.494-.516.849-.679a2.78 2.78 0 0 1 1.172-.244c.482 0 .903.078 1.265.235.361.152.643.379.845.678.201.3.302.67.302 1.114 0 .224-.052.442-.156.654a1.84 1.84 0 0 1-.449.566c-.192.166-.427.3-.703.4a2.792 2.792 0 0 1-.933.147h-.977v-.747Zm0 1.07v-.728h.977c.387 0 .728.044 1.021.132.293.088.538.214.737.38.198.163.348.357.449.581.101.222.151.468.151.738 0 .332-.063.628-.19.889a1.863 1.863 0 0 1-.537.654 2.454 2.454 0 0 1-.801.41 3.494 3.494 0 0 1-1.885.015 2.63 2.63 0 0 1-.781-.376 1.936 1.936 0 0 1-.557-.635 1.927 1.927 0 0 1-.205-.913h1.412a.89.89 0 0 0 .136.488.946.946 0 0 0 .376.337c.163.081.344.122.542.122.225 0 .417-.04.576-.122a.877.877 0 0 0 .371-.352c.088-.153.132-.33.132-.532 0-.26-.047-.469-.141-.625a.844.844 0 0 0-.406-.351 1.584 1.584 0 0 0-.625-.113h-.752Z"
+          />
+        </g>
+        <g filter="url(#f)">
+          <rect width="34.8" height="40" x="120.4" y="48" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M132.612 60.648h5.413c1.227 0 2.264.188 3.11.562.854.374 1.502.928 1.943 1.662.45.726.674 1.621.674 2.684 0 .749-.153 1.434-.46 2.055a4.38 4.38 0 0 1-1.303 1.573c-.562.426-1.235.745-2.021.954l-.607.236h-5.087l-.023-1.763h3.841c.779 0 1.426-.135 1.943-.404.516-.277.906-.648 1.168-1.112.262-.465.393-.977.393-1.539 0-.629-.124-1.179-.371-1.65-.247-.472-.636-.835-1.168-1.09-.524-.262-1.201-.393-2.032-.393h-3.246V77h-2.167V60.648ZM142.169 77l-3.976-7.412 2.257-.011 4.032 7.288V77h-2.313Z"
+          />
+          <path
+            fill="#B3B7B9"
+            d="M153.127 56.344v1.103h-5.122l-.069-.854 2.964-4.702h1.118l-1.211 2.026-1.474 2.427h3.794Zm-.806-4.453V59h-1.406v-7.11h1.406Z"
+          />
+        </g>
+        <g filter="url(#g)">
+          <rect width="34.8" height="40" x="159.2" y="48" fill="#434343" rx="6" />
+          <path fill="#fff" d="M177.678 60.648V77h-2.134V60.648h2.134Zm5.256 0v1.775H170.3v-1.775h12.634Z" />
+          <path
+            fill="#B3B7B9"
+            d="m188.269 55.763-1.123-.269.406-3.603h3.994v1.137h-2.837l-.176 1.578c.094-.056.238-.114.43-.176.192-.065.407-.098.644-.098.345 0 .651.054.918.161.267.108.493.264.679.469.189.205.332.456.43.752.097.296.146.631.146 1.006 0 .316-.049.617-.146.903a2.244 2.244 0 0 1-.445.762 2.064 2.064 0 0 1-.747.522c-.299.127-.654.19-1.064.19-.306 0-.603-.045-.889-.136a2.445 2.445 0 0 1-.767-.405 2.1 2.1 0 0 1-.542-.65 1.98 1.98 0 0 1-.21-.879h1.397c.019.202.072.376.156.523a.92.92 0 0 0 .347.332c.143.078.311.117.503.117a.957.957 0 0 0 .459-.102.827.827 0 0 0 .307-.284 1.32 1.32 0 0 0 .171-.43c.039-.165.059-.344.059-.536 0-.193-.023-.367-.068-.523a1.13 1.13 0 0 0-.21-.405.932.932 0 0 0-.362-.264 1.26 1.26 0 0 0-.503-.093c-.26 0-.462.041-.605.122-.14.082-.257.174-.352.279Z"
+          />
+        </g>
+        <g filter="url(#h)">
+          <rect width="34.8" height="40" x="198" y="48" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="m211.144 60.648 4.245 8.21 4.256-8.21h2.46l-5.638 10.243V77h-2.168v-6.11l-5.637-10.242h2.482Z"
+          />
+          <path
+            fill="#B3B7B9"
+            d="M229.374 51.817h.205v1.123h-.083c-.371 0-.701.056-.991.166a2.03 2.03 0 0 0-.737.474 2.048 2.048 0 0 0-.459.733 2.78 2.78 0 0 0-.157.961v1.182c0 .254.025.479.074.674.052.192.125.353.219.483a.994.994 0 0 0 .342.288c.13.062.277.093.44.093a.878.878 0 0 0 .415-.097.928.928 0 0 0 .322-.274c.091-.12.159-.26.205-.42.049-.163.073-.34.073-.532s-.024-.37-.073-.532a1.213 1.213 0 0 0-.205-.42.94.94 0 0 0-.332-.279.97.97 0 0 0-.44-.097 1.117 1.117 0 0 0-1.128 1.05l-.424-.274a2 2 0 0 1 .156-.713c.098-.224.231-.423.4-.596.173-.175.38-.312.62-.41.241-.1.513-.151.816-.151.332 0 .623.063.874.19.254.127.465.302.635.523.169.221.296.477.38.766.085.29.127.6.127.928 0 .345-.057.666-.17.962a2.25 2.25 0 0 1-1.236 1.294 2.513 2.513 0 0 1-.986.186c-.378 0-.721-.069-1.03-.205a2.341 2.341 0 0 1-.791-.586 2.636 2.636 0 0 1-.513-.894 3.508 3.508 0 0 1-.176-1.133v-.547c0-.572.083-1.097.249-1.572.169-.478.412-.892.728-1.24a3.224 3.224 0 0 1 1.142-.816 3.78 3.78 0 0 1 1.509-.288Z"
+          />
+        </g>
+        <g filter="url(#i)">
+          <rect width="34.8" height="40" x="236.8" y="48" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M257.996 60.648h2.156V71.71c0 1.228-.273 2.25-.82 3.066a5.113 5.113 0 0 1-2.178 1.842 7.063 7.063 0 0 1-2.931.607c-1.109 0-2.112-.203-3.01-.607a4.926 4.926 0 0 1-2.123-1.842c-.516-.816-.775-1.838-.775-3.066V60.648h2.145V71.71c0 .854.158 1.558.472 2.112.314.554.752.966 1.314 1.235.569.27 1.228.404 1.977.404.756 0 1.415-.134 1.976-.404a2.935 2.935 0 0 0 1.325-1.235c.315-.554.472-1.258.472-2.112V60.648Z"
+          />
+          <path fill="#B3B7B9" d="M269.375 51.89v.758L266.626 59h-1.484l2.749-6.01h-3.54v-1.1h5.024Z" />
+        </g>
+        <g filter="url(#j)">
+          <rect width="34.8" height="40" x="275.6" y="48" fill="#434343" rx="6" />
+          <path fill="#fff" d="M294.089 60.648V77h-2.167V60.648h2.167Z" />
+          <path
+            fill="#B3B7B9"
+            d="M308.136 57.052c0 .446-.104.822-.312 1.128a1.95 1.95 0 0 1-.86.688c-.361.153-.771.23-1.23.23-.459 0-.871-.077-1.235-.23a1.98 1.98 0 0 1-.865-.688c-.211-.306-.317-.682-.317-1.128 0-.3.06-.57.181-.81.12-.245.288-.453.502-.626.219-.176.474-.309.767-.4.293-.095.612-.142.957-.142.462 0 .876.082 1.24.244.365.163.651.393.86.689.208.296.312.644.312 1.045Zm-1.416-.093c0-.218-.042-.405-.127-.562a.858.858 0 0 0-.346-.366 1.046 1.046 0 0 0-.523-.127c-.198 0-.373.043-.522.127a.89.89 0 0 0-.352.367 1.206 1.206 0 0 0-.122.561c0 .215.041.4.122.557a.897.897 0 0 0 .352.361c.153.081.33.122.532.122s.376-.04.522-.122a.832.832 0 0 0 .342-.361c.082-.157.122-.342.122-.557Zm1.265-3.184c0 .362-.096.682-.288.962a1.918 1.918 0 0 1-.801.65 2.745 2.745 0 0 1-1.162.234c-.44 0-.83-.078-1.172-.234a1.918 1.918 0 0 1-.801-.65 1.66 1.66 0 0 1-.288-.962c0-.43.096-.79.288-1.084.196-.296.462-.52.801-.673.342-.153.729-.23 1.162-.23.44 0 .829.077 1.167.23.342.153.609.377.801.673.195.293.293.655.293 1.084Zm-1.406.064a1.13 1.13 0 0 0-.103-.498.765.765 0 0 0-.293-.332.845.845 0 0 0-.459-.117.877.877 0 0 0-.454.112.742.742 0 0 0-.288.327c-.065.14-.098.31-.098.508 0 .192.033.361.098.508a.797.797 0 0 0 .293.337c.127.081.28.122.459.122s.33-.041.454-.122a.766.766 0 0 0 .288-.337c.068-.147.103-.316.103-.508Z"
+          />
+        </g>
+        <g filter="url(#k)">
+          <rect width="34.8" height="40" x="314.4" y="48" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M338.37 68.308v1.033c0 1.228-.154 2.328-.461 3.302-.307.973-.748 1.8-1.325 2.481a5.745 5.745 0 0 1-2.077 1.562c-.802.359-1.7.539-2.696.539-.966 0-1.853-.18-2.661-.54a5.98 5.98 0 0 1-2.089-1.56c-.584-.682-1.037-1.51-1.359-2.482-.322-.974-.483-2.074-.483-3.302v-1.033c0-1.228.157-2.325.472-3.29.322-.974.775-1.801 1.359-2.483a5.82 5.82 0 0 1 2.077-1.572c.809-.36 1.696-.54 2.662-.54.996 0 1.894.18 2.695.54.809.36 1.501.883 2.078 1.572.584.682 1.029 1.509 1.336 2.482.315.966.472 2.063.472 3.29Zm-2.145 1.033v-1.056c0-.973-.101-1.834-.303-2.583-.195-.748-.483-1.377-.865-1.887a3.732 3.732 0 0 0-1.404-1.156c-.546-.262-1.168-.393-1.864-.393-.674 0-1.284.13-1.831.393a3.871 3.871 0 0 0-1.392 1.156c-.382.51-.678 1.139-.888 1.887-.209.749-.314 1.61-.314 2.583v1.056c0 .98.105 1.85.314 2.605.21.749.51 1.382.899 1.898.397.51.865.895 1.404 1.157a4.176 4.176 0 0 0 1.83.393c.704 0 1.329-.131 1.876-.393a3.663 3.663 0 0 0 1.381-1.157c.382-.516.67-1.149.865-1.898.194-.756.292-1.624.292-2.605Z"
+          />
+          <path
+            fill="#B3B7B9"
+            d="M343.142 57.93h.093c.391 0 .726-.047 1.006-.14.283-.099.516-.239.698-.42.182-.183.317-.406.405-.67.088-.267.132-.57.132-.908v-1.348a2.65 2.65 0 0 0-.078-.678 1.345 1.345 0 0 0-.215-.484.91.91 0 0 0-.322-.293.827.827 0 0 0-.4-.097.743.743 0 0 0-.415.117.99.99 0 0 0-.308.307 1.68 1.68 0 0 0-.191.45c-.042.166-.063.34-.063.522s.021.357.063.523c.043.162.106.307.191.434.085.124.19.223.317.298a.902.902 0 0 0 .45.107c.166 0 .314-.03.444-.092a1.113 1.113 0 0 0 .552-.6 1.01 1.01 0 0 0 .078-.387l.464.254c0 .228-.049.453-.147.674a2.076 2.076 0 0 1-1.011 1.035 1.693 1.693 0 0 1-.732.161 2.06 2.06 0 0 1-.884-.18 1.928 1.928 0 0 1-.654-.508 2.313 2.313 0 0 1-.401-.762 3.13 3.13 0 0 1-.136-.942 2.8 2.8 0 0 1 .166-.972c.114-.303.275-.57.483-.8a2.26 2.26 0 0 1 .757-.543c.296-.133.625-.2.986-.2.362 0 .69.07.987.21.296.14.55.339.761.596.212.254.375.558.489.913.117.355.175.748.175 1.181v.489c0 .462-.05.892-.151 1.289a3.772 3.772 0 0 1-.444 1.079c-.196.319-.44.592-.733.82a3.123 3.123 0 0 1-1.01.523c-.385.12-.814.18-1.289.18h-.113v-1.137Z"
+          />
+        </g>
+        <g filter="url(#l)">
+          <rect width="34.8" height="40" x="353.2" y="48" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M371.274 70.587h-4.369v-1.763h4.369c.846 0 1.531-.135 2.055-.404.524-.27.906-.644 1.145-1.123.248-.48.371-1.026.371-1.64 0-.561-.123-1.09-.371-1.583-.239-.494-.621-.891-1.145-1.19-.524-.308-1.209-.461-2.055-.461h-3.864V77h-2.167V60.648h6.031c1.235 0 2.28.214 3.133.64.854.427 1.501 1.019 1.943 1.775.442.749.663 1.606.663 2.572 0 1.048-.221 1.943-.663 2.684-.442.741-1.089 1.306-1.943 1.696-.853.382-1.898.572-3.133.572Z"
+          />
+          <path
+            fill="#B3B7B9"
+            d="M385.731 54.82v1.23c0 .535-.057.995-.171 1.383-.114.384-.278.7-.493.947a1.943 1.943 0 0 1-.757.542 2.605 2.605 0 0 1-.976.176c-.287 0-.554-.036-.801-.108a2.023 2.023 0 0 1-.669-.346 2.204 2.204 0 0 1-.508-.591 3.033 3.033 0 0 1-.322-.86 5.218 5.218 0 0 1-.112-1.142v-1.23c0-.535.057-.992.171-1.373.117-.384.281-.698.493-.942.215-.244.468-.423.761-.537a2.61 2.61 0 0 1 .977-.176c.286 0 .552.037.796.112.247.072.47.184.669.337.198.153.368.35.508.591.14.238.247.523.322.855.075.328.112.706.112 1.132Zm-1.411 1.416V54.63c0-.257-.015-.482-.044-.674a1.99 1.99 0 0 0-.122-.488 1.033 1.033 0 0 0-.205-.332.745.745 0 0 0-.278-.186.985.985 0 0 0-.347-.058c-.16 0-.301.03-.425.092a.787.787 0 0 0-.307.298c-.085.134-.15.313-.196.537a4.433 4.433 0 0 0-.063.81v1.607c0 .258.013.484.039.679.029.195.071.363.127.503.058.137.127.249.205.337a.744.744 0 0 0 .278.185c.108.04.225.059.352.059.156 0 .294-.03.415-.093a.816.816 0 0 0 .312-.303 1.59 1.59 0 0 0 .196-.546c.042-.225.063-.498.063-.82Z"
+          />
+        </g>
+        <g filter="url(#m)">
+          <rect width="35.111" height="40" x="22" y="98" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M40.005 112.097 34.592 127h-2.213l6.233-16.352h1.426l-.033 1.449ZM44.542 127l-5.424-14.903-.034-1.449h1.426L46.766 127h-2.224Zm-.28-6.053v1.774h-9.187v-1.774h9.186Z"
+          />
+        </g>
+        <g filter="url(#n)">
+          <rect width="35.111" height="40" x="61.111" y="98" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M82.451 122.867c0-.382-.06-.719-.18-1.011a1.923 1.923 0 0 0-.606-.808c-.284-.24-.681-.468-1.19-.685a16.7 16.7 0 0 0-1.91-.663 17.47 17.47 0 0 1-2.19-.797c-.65-.3-1.209-.64-1.673-1.022a4.036 4.036 0 0 1-1.067-1.314c-.247-.494-.37-1.06-.37-1.696 0-.636.13-1.224.393-1.763a4.128 4.128 0 0 1 1.123-1.404 5.437 5.437 0 0 1 1.763-.943c.681-.225 1.441-.337 2.28-.337 1.228 0 2.268.236 3.122.707.86.465 1.516 1.075 1.965 1.831.45.749.674 1.55.674 2.403H82.43c0-.614-.131-1.157-.393-1.628-.262-.479-.66-.854-1.19-1.123-.532-.277-1.206-.416-2.022-.416-.771 0-1.408.116-1.91.348-.5.232-.875.547-1.122.944-.24.397-.36.85-.36 1.359 0 .344.071.658.214.943.15.277.378.535.685.775a5.5 5.5 0 0 0 1.19.662c.487.203 1.067.397 1.74.584.93.263 1.73.555 2.404.876.674.322 1.228.686 1.662 1.09.442.397.768.85.977 1.359.218.501.326 1.07.326 1.707 0 .666-.135 1.269-.404 1.808-.27.539-.655.999-1.157 1.381s-1.104.678-1.808.887c-.696.203-1.475.304-2.336.304a8.084 8.084 0 0 1-2.235-.315 6.649 6.649 0 0 1-1.988-.943 4.94 4.94 0 0 1-1.426-1.55c-.352-.621-.528-1.34-.528-2.156h2.156c0 .561.109 1.044.326 1.448.217.397.513.727.887.989a4.16 4.16 0 0 0 1.292.584c.486.12.992.179 1.516.179.756 0 1.396-.104 1.92-.314.524-.21.921-.509 1.19-.898.278-.39.416-.85.416-1.382Z"
+          />
+        </g>
+        <g filter="url(#o)">
+          <rect width="35.111" height="40" x="100.222" y="98" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M116.554 127h-3.414l.022-1.763h3.392c1.168 0 2.141-.244 2.92-.73.778-.494 1.362-1.183 1.751-2.067.397-.891.596-1.931.596-3.122v-.999c0-.936-.113-1.767-.337-2.493-.225-.734-.554-1.352-.989-1.853a4.171 4.171 0 0 0-1.594-1.157c-.622-.262-1.337-.393-2.145-.393h-3.684v-1.775h3.684c1.07 0 2.047.18 2.931.54a6.296 6.296 0 0 1 2.28 1.538c.644.666 1.138 1.475 1.482 2.426.345.943.517 2.006.517 3.189v.977c0 1.183-.172 2.25-.517 3.201-.344.943-.842 1.748-1.494 2.415a6.51 6.51 0 0 1-2.335 1.538c-.906.352-1.928.528-3.066.528Zm-2.258-16.352V127h-2.167v-16.352h2.167Z"
+          />
+        </g>
+        <g filter="url(#p)">
+          <rect width="35.111" height="40" x="139.333" y="98" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M154.598 110.648V127h-2.168v-16.352h2.168Zm6.85 7.356v1.775h-7.322v-1.775h7.322Zm1.112-7.356v1.775h-8.434v-1.775h8.434Z"
+          />
+        </g>
+        <g filter="url(#q)">
+          <rect width="35.111" height="40" x="178.444" y="98" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M202.143 118.858v5.986c-.202.299-.524.636-.966 1.01-.441.367-1.052.689-1.83.966-.771.27-1.767.405-2.988.405-.995 0-1.913-.173-2.751-.517a6.213 6.213 0 0 1-2.168-1.527c-.606-.674-1.078-1.49-1.415-2.449-.329-.965-.494-2.058-.494-3.279v-1.269c0-1.22.143-2.31.427-3.268.292-.958.719-1.771 1.28-2.437a5.365 5.365 0 0 1 2.067-1.527c.816-.352 1.752-.528 2.807-.528 1.251 0 2.295.217 3.134.651.846.427 1.504 1.018 1.976 1.775.479.756.786 1.617.921 2.583h-2.167a4.562 4.562 0 0 0-.584-1.618 3.13 3.13 0 0 0-1.225-1.168c-.531-.299-1.216-.449-2.055-.449-.756 0-1.411.139-1.965.416a3.618 3.618 0 0 0-1.37 1.19c-.36.517-.629 1.142-.809 1.876-.172.733-.258 1.561-.258 2.482v1.291c0 .943.109 1.786.326 2.527.224.741.542 1.374.954 1.898.412.517.902.91 1.471 1.179.577.27 1.213.404 1.91.404.771 0 1.396-.063 1.875-.19.479-.135.854-.292 1.123-.472.27-.187.476-.363.618-.528v-3.661h-3.785v-1.752h5.941Z"
+          />
+        </g>
+        <g filter="url(#r)">
+          <rect width="35.111" height="40" x="217.556" y="98" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M239.48 117.679v1.763h-8.85v-1.763h8.85Zm-8.513-7.031V127H228.8v-16.352h2.167Zm10.399 0V127h-2.156v-16.352h2.156Z"
+          />
+        </g>
+        <g filter="url(#s)">
+          <rect width="35.111" height="40" x="256.667" y="98" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M276.637 122.227v-11.579h2.156v11.579c0 1.078-.221 1.988-.663 2.729a4.35 4.35 0 0 1-1.83 1.696c-.771.382-1.659.573-2.662.573s-1.894-.173-2.673-.517a4.035 4.035 0 0 1-1.83-1.572c-.442-.704-.663-1.591-.663-2.662h2.168c0 .689.127 1.254.381 1.696a2.34 2.34 0 0 0 1.056.977c.457.21.977.314 1.561.314.569 0 1.078-.119 1.528-.359.456-.247.816-.61 1.078-1.089.262-.487.393-1.082.393-1.786Z"
+          />
+        </g>
+        <g filter="url(#t)">
+          <rect width="35.111" height="40" x="295.778" y="98" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M310.178 110.648V127h-2.168v-16.352h2.168Zm9.871 0-6.794 7.626-3.819 3.964-.359-2.313 2.875-3.167 5.492-6.11h2.605ZM317.96 127l-6.053-7.974 1.292-1.718 7.344 9.692h-2.583Z"
+          />
+        </g>
+        <g filter="url(#u)">
+          <rect width="35.111" height="40" x="334.889" y="98" fill="#434343" rx="6" />
+          <path fill="#fff" d="M358.06 125.237V127h-8.176v-1.763h8.176Zm-7.749-14.589V127h-2.168v-16.352h2.168Z" />
+        </g>
+        <g filter="url(#v)">
+          <rect width="48" height="40" x="4" y="148" fill="#202020" rx="6" />
+          <path
+            fill="#A5A9AC"
+            d="M28.682 158.789a.95.95 0 0 0-1.364 0l-8.533 8.716c-.608.622-.178 1.684.682 1.684H22.5v7.289c0 .564.448 1.022 1 1.022h9c.552 0 1-.458 1-1.022v-7.289h3.033c.86 0 1.29-1.062.682-1.684l-8.533-8.716Z"
+          />
+        </g>
+        <g filter="url(#w)">
+          <rect width="36.571" height="40" x="56" y="148" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M80.26 175.237V177H69.187v-1.763H80.26Zm-.36-13.016L69.705 177h-1.337v-1.617l10.186-14.735h1.348v1.573Zm-.92-1.573v1.775H68.513v-1.775H78.98Z"
+          />
+        </g>
+        <g filter="url(#x)">
+          <rect width="36.571" height="40" x="96.571" y="148" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="m110.949 160.648 3.931 6.267 3.93-6.267h2.527l-5.166 8.098 5.29 8.254h-2.55l-4.031-6.39-4.032 6.39h-2.549l5.289-8.254-5.166-8.098h2.527Z"
+          />
+        </g>
+        <g filter="url(#y)">
+          <rect width="36.571" height="40" x="137.143" y="148" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M159.707 171.8h2.157c-.113 1.033-.408 1.958-.888 2.774-.479.816-1.156 1.464-2.032 1.943-.876.472-1.969.708-3.28.708-.958 0-1.83-.18-2.616-.539a5.826 5.826 0 0 1-2.011-1.528c-.561-.666-.995-1.464-1.302-2.392-.3-.936-.45-1.976-.45-3.122v-1.628c0-1.146.15-2.183.45-3.111.307-.936.745-1.737 1.314-2.404a5.858 5.858 0 0 1 2.077-1.538c.809-.359 1.719-.539 2.729-.539 1.236 0 2.28.232 3.134.696a4.98 4.98 0 0 1 1.987 1.932c.48.816.775 1.763.888 2.841h-2.157c-.104-.764-.299-1.419-.584-1.965a3.033 3.033 0 0 0-1.213-1.281c-.524-.299-1.209-.449-2.055-.449-.726 0-1.366.139-1.92.416a3.86 3.86 0 0 0-1.381 1.179c-.367.509-.644 1.119-.832 1.831-.187.711-.28 1.501-.28 2.369v1.651c0 .801.082 1.554.247 2.257.172.704.43 1.322.775 1.853.344.532.782.951 1.314 1.258.531.3 1.16.449 1.886.449.921 0 1.655-.146 2.202-.438a2.868 2.868 0 0 0 1.235-1.257c.284-.547.487-1.202.606-1.966Z"
+          />
+        </g>
+        <g filter="url(#z)">
+          <rect width="36.571" height="40" x="177.714" y="148" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="m195.854 174.518 4.818-13.87h2.347L196.966 177h-1.674l.562-2.482Zm-4.503-13.87 4.772 13.87.596 2.482h-1.674l-6.042-16.352h2.348Z"
+          />
+        </g>
+        <g filter="url(#A)">
+          <rect width="36.571" height="40" x="218.286" y="148" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M237.133 169.352h-4.144l-.023-1.741h3.763c.621 0 1.164-.104 1.628-.314.464-.21.824-.509 1.078-.899.262-.396.393-.868.393-1.415 0-.599-.116-1.085-.348-1.46-.225-.381-.573-.658-1.044-.831-.465-.179-1.056-.269-1.775-.269h-3.189V177h-2.168v-16.352h5.357c.839 0 1.587.087 2.246.259.659.164 1.217.426 1.674.786a3.34 3.34 0 0 1 1.055 1.348c.24.546.36 1.201.36 1.965 0 .674-.173 1.284-.517 1.83-.344.539-.823.981-1.437 1.326-.607.344-1.318.565-2.134.662l-.775.528Zm-.101 7.648h-4.897l1.224-1.763h3.673c.689 0 1.273-.12 1.752-.36a2.565 2.565 0 0 0 1.112-1.01c.254-.442.381-.962.381-1.561 0-.607-.108-1.131-.325-1.573a2.257 2.257 0 0 0-1.022-1.022c-.464-.239-1.063-.359-1.797-.359h-3.088l.022-1.741h4.223l.46.629c.786.068 1.453.292 1.999.674.547.374.962.854 1.247 1.438.292.584.438 1.227.438 1.931 0 1.018-.225 1.879-.674 2.583-.442.696-1.067 1.228-1.876 1.595-.808.359-1.759.539-2.852.539Z"
+          />
+        </g>
+        <g filter="url(#B)">
+          <rect width="36.571" height="40" x="258.857" y="148" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M283.409 160.648V177h-2.178l-8.232-12.612V177h-2.168v-16.352h2.168l8.265 12.646v-12.646h2.145Z"
+          />
+        </g>
+        <g filter="url(#C)">
+          <rect width="36.571" height="40" x="299.429" y="148" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M310.257 160.648h2.1l5.357 13.331 5.346-13.331h2.111L318.523 177h-1.64l-6.626-16.352Zm-.685 0h1.853l.303 9.973V177h-2.156v-16.352Zm14.42 0h1.853V177h-2.156v-6.379l.303-9.973Z"
+          />
+        </g>
+        <g filter="url(#D)">
+          <rect width="48" height="40" x="340" y="148" fill="#202020" rx="6" />
+          <path
+            fill="#A5A9AC"
+            d="M374 159h-15c-.69 0-1.23.35-1.59.88L352 168l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2Zm0 16h-14.93l-4.67-7 4.66-7H374v14Zm-11.59-2 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41-3.59 3.59-3.59-3.59-1.41 1.41 3.59 3.59-3.59 3.59 1.41 1.41Z"
+          />
+        </g>
+        <g filter="url(#E)">
+          <rect width="53" height="40" x="4" y="198" fill="#202020" rx="6" />
+          <path
+            fill="#A5A9AC"
+            d="M18.276 219.858h-1.633c.005-.454.043-.835.117-1.143a2.55 2.55 0 0 1 .366-.849c.176-.254.408-.523.696-.806.224-.215.427-.417.608-.608.18-.195.324-.4.432-.615.107-.22.16-.471.16-.754 0-.308-.05-.569-.153-.784a1.079 1.079 0 0 0-.454-.491c-.195-.112-.44-.168-.732-.168-.244 0-.474.048-.689.146a1.163 1.163 0 0 0-.52.44c-.132.195-.203.454-.212.776h-1.765c.01-.615.156-1.133.439-1.553.283-.42.664-.735 1.143-.945a3.95 3.95 0 0 1 1.604-.315c.654 0 1.213.113 1.677.337.464.22.818.542 1.062.967.249.42.373.928.373 1.524 0 .429-.085.82-.256 1.171-.17.347-.393.672-.666.975-.274.297-.57.595-.887.893-.273.249-.459.52-.556.813a3.208 3.208 0 0 0-.154.989Zm-1.78 2.285c0-.264.09-.486.271-.666.18-.186.427-.279.74-.279.312 0 .559.093.74.279.18.18.27.402.27.666s-.09.488-.27.674c-.181.181-.428.271-.74.271-.313 0-.56-.09-.74-.271a.93.93 0 0 1-.27-.674Zm10.488-9.844V223H25.22v-8.606l-2.614.886v-1.457l4.167-1.524h.212Zm10.855 9.295V223H30.69v-1.208l3.472-3.787c.381-.43.681-.801.901-1.113.22-.313.373-.594.461-.843.093-.254.14-.5.14-.739a1.96 1.96 0 0 0-.19-.887 1.4 1.4 0 0 0-.543-.608c-.24-.151-.53-.227-.871-.227-.396 0-.728.086-.997.257a1.6 1.6 0 0 0-.607.71c-.137.298-.206.64-.206 1.026h-1.765c0-.621.142-1.187.425-1.7a3.111 3.111 0 0 1 1.23-1.23c.538-.308 1.185-.462 1.941-.462.713 0 1.319.12 1.817.359.498.24.876.579 1.135 1.018.264.44.396.96.396 1.56 0 .332-.054.662-.161.989a4.69 4.69 0 0 1-.462.982 8.445 8.445 0 0 1-.696.974c-.268.322-.564.649-.886.981l-2.307 2.542h4.922Zm3.45-4.724h1.054c.41 0 .75-.071 1.018-.213.274-.141.476-.337.608-.586.132-.249.198-.534.198-.857 0-.337-.061-.625-.183-.864a1.238 1.238 0 0 0-.542-.564c-.24-.132-.544-.198-.916-.198-.312 0-.595.064-.85.191-.248.122-.446.298-.593.527-.146.225-.22.493-.22.806h-1.772c0-.567.15-1.07.447-1.509a3.04 3.04 0 0 1 1.216-1.033c.518-.254 1.099-.381 1.743-.381.688 0 1.29.115 1.802.345.517.224.92.561 1.208 1.01.288.45.433 1.006.433 1.67 0 .303-.071.611-.213.923a2.68 2.68 0 0 1-.63.857 3.288 3.288 0 0 1-1.04.623c-.415.156-.896.234-1.443.234H41.29v-.981Zm0 1.377v-.967h1.325c.625 0 1.158.073 1.597.22.444.146.806.349 1.084.607a2.3 2.3 0 0 1 .608.872c.132.327.198.674.198 1.04 0 .498-.09.942-.271 1.333a2.697 2.697 0 0 1-.755.981c-.327.269-.71.472-1.15.608a4.705 4.705 0 0 1-1.42.205 4.53 4.53 0 0 1-1.319-.19 3.598 3.598 0 0 1-1.128-.564 2.799 2.799 0 0 1-.79-.945c-.191-.381-.287-.82-.287-1.318h1.766c0 .317.073.598.22.842.15.239.36.427.63.564.273.137.585.205.937.205.37 0 .69-.066.96-.198.268-.131.473-.327.614-.585.147-.259.22-.572.22-.938 0-.415-.08-.752-.242-1.011a1.425 1.425 0 0 0-.688-.571c-.298-.127-.65-.19-1.055-.19H41.29Z"
+          />
+        </g>
+        <g filter="url(#F)">
+          <rect width="30" height="40" x="61" y="198" fill="#202020" rx="6" />
+          <path
+            fill="#D6D8D9"
+            d="m76.886 230.301-.007 1.26c0 .498-.125 1.01-.374 1.538-.249.527-.578.962-.988 1.303l-.945-.549c.136-.22.261-.442.373-.666.113-.225.203-.464.271-.718.069-.254.103-.535.103-.843v-1.325h1.567Z"
+          />
+          <path
+            fill="#A5A9AC"
+            d="M77.396 208.958a.812.812 0 1 0 .001-1.624.812.812 0 0 0-.001 1.624ZM73.604 208.958a.812.812 0 1 0 .001-1.624.812.812 0 0 0 0 1.624Z"
+          />
+          <path
+            fill="#A5A9AC"
+            d="M75.5 211.667c-.802 0-1.49-.439-1.869-1.084h-.904a2.976 2.976 0 0 0 5.546 0h-.904a2.165 2.165 0 0 1-1.869 1.084Zm-.005-7.584a5.414 5.414 0 0 0-5.412 5.417 5.414 5.414 0 0 0 5.412 5.417 5.42 5.42 0 0 0 5.422-5.417 5.42 5.42 0 0 0-5.422-5.417Zm.005 9.75a4.332 4.332 0 0 1-4.333-4.333 4.332 4.332 0 0 1 4.333-4.333 4.332 4.332 0 0 1 4.333 4.333 4.332 4.332 0 0 1-4.333 4.333Z"
+          />
+        </g>
+        <g filter="url(#G)">
+          <rect width="30" height="40" x="95" y="198" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M109.99 208c-5.52 0-9.99 4.48-9.99 10s4.47 10 9.99 10c5.53 0 10.01-4.48 10.01-10s-4.48-10-10.01-10Zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56 8.03 8.03 0 0 1 4.33 3.56Zm-6.92-3.96c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96Zm-7.74 9.96c-.16-.64-.26-1.31-.26-2s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2h-3.38Zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56a7.987 7.987 0 0 1-4.33-3.56Zm2.95-8h-2.95a7.987 7.987 0 0 1 4.33-3.56 15.65 15.65 0 0 0-1.38 3.56Zm3.97 11.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96Zm2.34-5.96h-4.68c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2Zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56Zm1.77-5.56c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38Z"
+          />
+        </g>
+        <g filter="url(#H)">
+          <rect width="173" height="40" x="129" y="198" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="M201.408 221.503v.997h-4.894v-.997h4.894Zm-4.646-8.245v9.242h-1.225v-9.242h1.225Zm3.999 3.973v.997h-4.247v-.997h4.247Zm.584-3.973v1.003h-4.831v-1.003h4.831Zm2.577 3.84v5.402h-1.174v-6.868h1.11l.064 1.466Zm-.279 1.708-.489-.019c.004-.47.074-.904.209-1.302.136-.402.326-.751.572-1.047a2.543 2.543 0 0 1 2.012-.933c.338 0 .643.046.914.14.271.088.501.232.692.431.194.199.343.457.444.775.102.313.152.696.152 1.149v4.5h-1.18v-4.513c0-.36-.053-.648-.159-.863a.977.977 0 0 0-.463-.477 1.672 1.672 0 0 0-.749-.152c-.292 0-.559.061-.8.184a1.921 1.921 0 0 0-.616.508 2.573 2.573 0 0 0-.539 1.619Zm10.74-3.174h1.066v6.722c0 .605-.123 1.121-.368 1.549a2.397 2.397 0 0 1-1.028.971c-.436.224-.94.336-1.511.336a3.72 3.72 0 0 1-.838-.114 3.405 3.405 0 0 1-.939-.374 2.35 2.35 0 0 1-.768-.705l.615-.698c.288.347.589.588.902.723.317.136.63.204.939.204.373 0 .694-.07.965-.21.271-.14.48-.347.628-.622.153-.271.229-.605.229-1.003v-5.268l.108-1.511Zm-4.729 3.51v-.133c0-.525.061-1.001.184-1.428.127-.432.307-.802.539-1.111a2.425 2.425 0 0 1 1.987-.965c.432 0 .809.076 1.13.228.326.149.601.366.825.654a3.2 3.2 0 0 1 .54 1.029c.131.402.222.856.273 1.364v.584a6.03 6.03 0 0 1-.273 1.359 3.195 3.195 0 0 1-.54 1.028 2.256 2.256 0 0 1-.825.654c-.326.148-.707.222-1.142.222-.411 0-.783-.087-1.118-.26a2.551 2.551 0 0 1-.85-.73 3.461 3.461 0 0 1-.546-1.105 5.008 5.008 0 0 1-.184-1.39Zm1.174-.133v.133c0 .343.034.664.102.965.072.3.18.565.323.793.149.229.337.409.565.54.229.127.502.19.819.19.39 0 .711-.082.965-.247a1.79 1.79 0 0 0 .603-.654c.152-.271.271-.565.356-.882v-1.53a3.164 3.164 0 0 0-.216-.673 2.074 2.074 0 0 0-.368-.584 1.616 1.616 0 0 0-.553-.413 1.84 1.84 0 0 0-.774-.152 1.63 1.63 0 0 0-.832.203 1.628 1.628 0 0 0-.565.546 2.645 2.645 0 0 0-.323.8c-.068.3-.102.622-.102.965Zm7.681-6.259v9.75h-1.181v-9.75h1.181Zm3.161 2.882v6.868h-1.181v-6.868h1.181Zm-1.27-1.822a.71.71 0 0 1 .172-.482c.118-.132.292-.197.52-.197.225 0 .396.065.514.197a.679.679 0 0 1 .185.482.664.664 0 0 1-.185.47c-.118.127-.289.19-.514.19-.228 0-.402-.063-.52-.19a.693.693 0 0 1-.172-.47Zm7.154 6.868a.992.992 0 0 0-.114-.47c-.072-.148-.222-.281-.451-.399-.224-.123-.563-.229-1.015-.318a7.991 7.991 0 0 1-1.035-.285 3.156 3.156 0 0 1-.781-.4 1.696 1.696 0 0 1-.489-.553 1.54 1.54 0 0 1-.171-.742c0-.271.059-.527.178-.768.123-.242.294-.455.514-.641.224-.187.493-.333.806-.438a3.25 3.25 0 0 1 1.047-.159c.551 0 1.02.097 1.41.292a2.2 2.2 0 0 1 .895.781c.207.321.311.679.311 1.072h-1.175c0-.19-.057-.374-.171-.552a1.268 1.268 0 0 0-.489-.451c-.211-.118-.472-.177-.781-.177-.325 0-.59.051-.793.152a1.012 1.012 0 0 0-.438.375.94.94 0 0 0-.07.825.767.767 0 0 0 .241.273c.115.08.275.156.483.228.207.072.472.144.793.216.563.127 1.026.279 1.39.457.364.178.635.396.813.654.178.258.267.571.267.939a1.836 1.836 0 0 1-.73 1.473 2.698 2.698 0 0 1-.838.419 3.76 3.76 0 0 1-1.086.146c-.605 0-1.117-.108-1.536-.324-.419-.216-.736-.495-.952-.838a2 2 0 0 1-.324-1.085h1.181c.017.321.11.578.279.768.169.186.377.319.622.4.246.076.489.114.73.114.322 0 .591-.042.806-.127a1.12 1.12 0 0 0 .502-.349.81.81 0 0 0 .171-.508Zm3.891-7.928v9.75h-1.174v-9.75h1.174Zm-.279 6.056-.489-.019c.004-.47.074-.904.21-1.302.135-.402.326-.751.571-1.047a2.543 2.543 0 0 1 2.012-.933c.339 0 .643.046.914.14.271.088.502.232.692.431.195.199.343.457.445.775.101.313.152.696.152 1.149v4.5h-1.181v-4.513c0-.36-.053-.648-.159-.863a.973.973 0 0 0-.463-.477 1.672 1.672 0 0 0-.749-.152c-.292 0-.559.061-.8.184a1.907 1.907 0 0 0-.615.508c-.17.216-.303.463-.4.743-.093.275-.14.567-.14.876Z"
+          />
+        </g>
+        <g filter="url(#I)">
+          <rect width="30" height="40" x="306" y="198" fill="#202020" rx="6" />
+          <path
+            fill="#D6D8D9"
+            d="M319.585 225.899c0-.351.109-.647.326-.887.224-.247.546-.37.965-.37.42 0 .738.123.955.37.225.24.337.536.337.887 0 .345-.112.637-.337.876-.217.24-.535.36-.955.36-.419 0-.741-.12-.965-.36a1.256 1.256 0 0 1-.326-.876Z"
+          />
+        </g>
+        <g filter="url(#J)">
+          <rect width="48" height="40" x="340" y="198" fill="#434343" rx="6" />
+          <path
+            fill="#fff"
+            d="m363.59 213.41 3.58 3.59H353v2h14.17l-3.59 3.59L365 224l6-6-6-6-1.41 1.41ZM372 212v12h2v-12h-2Z"
+          />
+        </g>
+        <path fill="#2B2B2B" d="M0 242h392v46H0z" />
+        <rect width="12" height="12" x="108" y="259" fill="#B3B3B3" rx="1" />
+        <path fill="#B3B3B3" d="M196 271a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" />
+        <path
+          fill="#B3B3B3"
+          fillRule="evenodd"
+          d="M205 265a9 9 0 0 1-9 9 9 9 0 0 1-9-9 9 9 0 0 1 9-9 9 9 0 0 1 9 9Zm-1.5 0a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z"
+          clipRule="evenodd"
+        />
+        <path
+          fill="#B3B3B3"
+          d="M272.489 265.844a.973.973 0 0 1 0-1.688l9.851-5.992c.715-.435 1.66.046 1.66.844v11.984c0 .798-.945 1.279-1.66.844l-9.851-5.992Z"
+        />
+      </g>
+      <defs>
+        <filter
+          id="a"
+          width="34"
+          height="34"
+          x="10"
+          y="6"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="c"
+          width="34.8"
+          height="41"
+          x="4"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="d"
+          width="34.8"
+          height="41"
+          x="42.8"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="e"
+          width="34.8"
+          height="41"
+          x="81.6"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="f"
+          width="34.8"
+          height="41"
+          x="120.4"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="g"
+          width="34.8"
+          height="41"
+          x="159.2"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="h"
+          width="34.8"
+          height="41"
+          x="198"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="i"
+          width="34.8"
+          height="41"
+          x="236.8"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="j"
+          width="34.8"
+          height="41"
+          x="275.6"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="k"
+          width="34.8"
+          height="41"
+          x="314.4"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="l"
+          width="34.8"
+          height="41"
+          x="353.2"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="m"
+          width="35.111"
+          height="41"
+          x="22"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="n"
+          width="35.111"
+          height="41"
+          x="61.111"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="o"
+          width="35.111"
+          height="41"
+          x="100.222"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="p"
+          width="35.111"
+          height="41"
+          x="139.333"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="q"
+          width="35.111"
+          height="41"
+          x="178.444"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="r"
+          width="35.111"
+          height="41"
+          x="217.556"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="s"
+          width="35.111"
+          height="41"
+          x="256.667"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="t"
+          width="35.111"
+          height="41"
+          x="295.778"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="u"
+          width="35.111"
+          height="41"
+          x="334.889"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="v"
+          width="48"
+          height="41"
+          x="4"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="w"
+          width="36.571"
+          height="41"
+          x="56"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="x"
+          width="36.571"
+          height="41"
+          x="96.571"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="y"
+          width="36.571"
+          height="41"
+          x="137.143"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="z"
+          width="36.571"
+          height="41"
+          x="177.714"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="A"
+          width="36.571"
+          height="41"
+          x="218.286"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="B"
+          width="36.571"
+          height="41"
+          x="258.857"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="C"
+          width="36.571"
+          height="41"
+          x="299.429"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="D"
+          width="48"
+          height="41"
+          x="340"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="E"
+          width="53"
+          height="41"
+          x="4"
+          y="198"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="F"
+          width="30"
+          height="41"
+          x="61"
+          y="198"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="G"
+          width="30"
+          height="41"
+          x="95"
+          y="198"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="H"
+          width="173"
+          height="41"
+          x="129"
+          y="198"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="I"
+          width="30"
+          height="41"
+          x="306"
+          y="198"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <filter
+          id="J"
+          width="48"
+          height="41"
+          x="340"
+          y="198"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_99283" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_99283" result="shape" />
+        </filter>
+        <clipPath id="b">
+          <path fill="#fff" d="M121.571 10h24v24h-24z" />
+        </clipPath>
+      </defs>
+    </svg>
+  ) : (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 392 288" {...rest}>
+      <path fill="#EDF0F2" d="M0 0h392v44H0z" />
+      <g filter="url(#a)" opacity=".4">
+        <rect width="30" height="30" x="12" y="7" fill="#fff" rx="15" />
+        <path fill="#666" d="M30.41 17.41 29 16l-6 6 6 6 1.41-1.41L25.83 22l4.58-4.59Z" />
+      </g>
+      <path
+        fill="#5D5E5F"
+        d="M74.76 13.5a2.967 2.967 0 0 0-2.974 2.975v11.05A2.967 2.967 0 0 0 74.76 30.5h8.925l5.1-5.1v-8.925A2.967 2.967 0 0 0 85.81 13.5H74.76Zm.213 1.7h10.625a1.487 1.487 0 0 1 1.488 1.488v7.862H85.81a2.967 2.967 0 0 0-2.975 2.975V28.8h-7.863a1.487 1.487 0 0 1-1.487-1.488V16.688a1.488 1.488 0 0 1 1.487-1.487Zm7.387 2.355a1.56 1.56 0 0 0-.4.05c-.799.221-1.25 1.037-1.045 1.845.042.128.102.255.178.374l2.746-.748c0-.145-.017-.289-.051-.434a1.492 1.492 0 0 0-1.428-1.087Zm-5.33 1.47c-.144 0-.272 0-.4.043a1.497 1.497 0 0 0-1.045 1.827c.026.136.102.255.179.391l2.745-.748a1.462 1.462 0 0 0-1.479-1.513Zm7.268 2.346-7.76 2.134a4.476 4.476 0 0 0 4.555 1.393 4.482 4.482 0 0 0 3.205-3.527Z"
+        opacity=".4"
+      />
+      <g clip-path="url(#b)" opacity=".4">
+        <path
+          fill="#5D5E5F"
+          d="M132.714 17h2.572v10h-2.572V17Zm-4.285 0h-5.143a1.693 1.693 0 0 0-1.714 1.667v6.666c0 .834.685 1.667 1.714 1.667h5.143a1.694 1.694 0 0 0 1.714-1.667V22h-2.571v2.5h-3.429v-5h6v-.833c0-.834-.686-1.667-1.714-1.667Zm17.143 2.5V17h-7.715v10h2.572v-3.333h3.428v-2.5h-3.428V19.5h5.143Z"
+        />
+      </g>
+      <g fill="#5D5E5F" opacity=".4">
+        <path d="m190.357 20.41-6.5-.002v1.667h6.5V20.41ZM183.857 23.332l6.5.002V25l-6.5-.001v-1.666ZM188.357 26.334l-4.5-.002V28l4.5.001v-1.666Z" />
+        <path
+          fill-rule="evenodd"
+          d="M189.207 14.227h3.484c.916 0 1.666.777 1.666 1.728v13.818c0 .95-.75 1.727-1.666 1.727h-11.667c-.917 0-1.667-.777-1.667-1.727V15.955c0-.95.75-1.728 1.667-1.728h3.483c.35-1.001 1.267-1.727 2.35-1.727 1.084 0 2 .726 2.35 1.727Zm-1.516.864c0-.475-.375-.864-.834-.864-.458 0-.833.389-.833.864s.375.864.833.864a.826.826 0 0 0 .678-.363.904.904 0 0 0 .147-.38.808.808 0 0 0 .009-.121Zm-6.667.864v13.818h11.667V15.955h-1.667v2.59h-8.333v-2.59h-1.667Z"
+          clip-rule="evenodd"
+        />
+      </g>
+      <path
+        fill="#5D5E5F"
+        d="M247.283 22.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58a.49.49 0 0 0 .12-.61l-1.92-3.32a.488.488 0 0 0-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54a.484.484 0 0 0-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22l-1.91 3.32c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94 0 .31.02.64.07.94l-2.03 1.58a.49.49 0 0 0-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58Zm-7.14 2.66a3.61 3.61 0 0 1-3.6-3.6c0-1.98 1.62-3.6 3.6-3.6s3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6Z"
+        opacity=".4"
+      />
+      <path stroke="#CCCED5" d="M278.428 11v22" opacity=".4" />
+      <path
+        fill="#666"
+        d="M310.714 20c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z"
+        opacity=".4"
+      />
+      <path
+        fill="#454647"
+        d="M370 24c1.66 0 2.99-1.34 2.99-3l.01-6c0-1.66-1.34-3-3-3s-3 1.34-3 3v6c0 1.66 1.34 3 3 3Zm5.3-3c0 3-2.54 5.1-5.3 5.1s-5.3-2.1-5.3-5.1H363c0 3.41 2.72 6.23 6 6.72V31h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7Z"
+        opacity=".4"
+      />
+      <path fill="#EDF0F2" d="M0 44h392v198H0z" />
+      <g opacity=".4">
+        <g filter="url(#c)">
+          <rect width="34.8" height="40" x="4" y="48" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="m23.77 75.124 4.155 3.291-1.46 1.348-4.088-3.246 1.393-1.392Zm4.099-6.816v1.033c0 1.228-.154 2.328-.46 3.302-.308.973-.75 1.8-1.326 2.481a5.747 5.747 0 0 1-2.077 1.562c-.802.359-1.7.539-2.696.539-.966 0-1.853-.18-2.662-.54a5.982 5.982 0 0 1-2.088-1.56c-.584-.682-1.037-1.51-1.36-2.482-.321-.974-.482-2.074-.482-3.302v-1.033c0-1.228.157-2.325.472-3.29.322-.974.774-1.801 1.358-2.483a5.822 5.822 0 0 1 2.078-1.572c.809-.36 1.696-.54 2.662-.54.995 0 1.898.18 2.706.54.809.36 1.501.883 2.078 1.572.576.682 1.018 1.509 1.325 2.482.315.966.472 2.063.472 3.29Zm-2.145 1.033v-1.056c0-.973-.101-1.834-.303-2.583-.195-.748-.483-1.377-.865-1.887a3.755 3.755 0 0 0-1.393-1.156c-.546-.262-1.172-.393-1.875-.393-.667 0-1.273.13-1.82.393a3.875 3.875 0 0 0-1.392 1.156c-.39.51-.689 1.139-.899 1.887-.21.749-.314 1.61-.314 2.583v1.056c0 .98.105 1.85.314 2.605.21.749.51 1.382.899 1.898.397.51.868.895 1.415 1.157a4.155 4.155 0 0 0 1.82.393c.703 0 1.328-.131 1.875-.393a3.663 3.663 0 0 0 1.381-1.157c.382-.516.67-1.149.865-1.898.194-.756.292-1.624.292-2.605Z"
+          />
+          <path fill="#666" d="M35.174 51.876V59h-1.406v-5.503l-1.69.537v-1.108l2.944-1.05h.152Z" />
+        </g>
+        <g filter="url(#d)">
+          <rect width="34.8" height="40" x="42.8" y="48" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="m56.19 72.059 3.246-11.41h1.573l-.91 4.436L56.606 77h-1.56l1.145-4.941Zm-3.357-11.41 2.583 11.185L56.19 77h-1.55l-3.964-16.352h2.156Zm12.376 11.174 2.527-11.175h2.167L65.95 77H64.4l.809-5.177Zm-3.965-11.175 3.156 11.41L65.546 77h-1.561l-3.37-11.915-.92-4.437h1.55Z"
+          />
+          <path
+            fill="#666"
+            d="M75.41 57.901V59h-4.864v-.938l2.3-2.465c.231-.258.413-.484.547-.679.133-.199.23-.376.288-.532a1.293 1.293 0 0 0-.015-1.006.8.8 0 0 0-.317-.361.947.947 0 0 0-.508-.127.98.98 0 0 0-.557.156.993.993 0 0 0-.351.434 1.608 1.608 0 0 0-.117.63h-1.412c0-.423.102-.81.303-1.162a2.22 2.22 0 0 1 .855-.845c.368-.211.804-.317 1.308-.317.498 0 .918.082 1.26.244.345.16.606.39.781.694.18.3.269.657.269 1.074 0 .234-.038.464-.112.688a3.109 3.109 0 0 1-.323.664c-.136.218-.302.44-.498.664-.195.225-.412.458-.65.699L72.364 57.9h3.046Z"
+          />
+        </g>
+        <g filter="url(#e)">
+          <rect width="34.8" height="40" x="81.6" y="48" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M104.75 75.237V77h-8.659v-1.763h8.659Zm-8.22-14.589V77h-2.168V60.648h2.167Zm7.075 7.03v1.764h-7.514v-1.763h7.514Zm1.033-7.03v1.775h-8.547v-1.775h8.547Z"
+          />
+          <path
+            fill="#666"
+            d="M110.787 54.835h.752c.24 0 .439-.04.595-.122a.8.8 0 0 0 .347-.352c.078-.153.117-.33.117-.532 0-.182-.036-.343-.107-.483a.729.729 0 0 0-.318-.332 1.085 1.085 0 0 0-.542-.122c-.172 0-.332.034-.478.102a.875.875 0 0 0-.352.288.755.755 0 0 0-.132.45h-1.411c0-.391.104-.731.313-1.021.211-.29.495-.516.849-.679a2.78 2.78 0 0 1 1.172-.244c.482 0 .904.078 1.265.235.361.152.643.379.845.678.201.3.302.67.302 1.114 0 .224-.052.442-.156.654a1.84 1.84 0 0 1-.449.566c-.192.166-.427.3-.703.4a2.792 2.792 0 0 1-.933.147h-.976v-.747Zm0 1.07v-.728h.976c.388 0 .728.044 1.021.132.293.088.538.214.737.38.199.163.348.357.449.581.101.222.152.468.152.738 0 .332-.064.628-.191.889a1.863 1.863 0 0 1-.537.654 2.454 2.454 0 0 1-.801.41 3.489 3.489 0 0 1-1.885.015 2.641 2.641 0 0 1-.781-.376 1.934 1.934 0 0 1-.556-.635 1.915 1.915 0 0 1-.205-.913h1.411a.89.89 0 0 0 .136.488.953.953 0 0 0 .376.337c.163.081.344.122.542.122.225 0 .417-.04.577-.122a.888.888 0 0 0 .371-.352c.088-.153.131-.33.131-.532 0-.26-.047-.469-.141-.625a.846.846 0 0 0-.405-.351 1.591 1.591 0 0 0-.625-.113h-.752Z"
+          />
+        </g>
+        <g filter="url(#f)">
+          <rect width="34.8" height="40" x="120.4" y="48" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M132.611 60.648h5.414c1.227 0 2.264.188 3.11.562.854.374 1.501.928 1.943 1.662.449.726.674 1.621.674 2.684 0 .749-.153 1.434-.46 2.055a4.38 4.38 0 0 1-1.303 1.573c-.562.426-1.235.745-2.022.954l-.606.236h-5.087l-.023-1.763h3.841c.779 0 1.426-.135 1.943-.404.516-.277.906-.648 1.168-1.112.262-.465.393-.977.393-1.539 0-.629-.124-1.179-.371-1.65-.247-.472-.636-.835-1.168-1.09-.524-.262-1.201-.393-2.032-.393h-3.246V77h-2.168V60.648ZM142.169 77l-3.976-7.412 2.257-.011 4.032 7.288V77h-2.313Z"
+          />
+          <path
+            fill="#666"
+            d="M153.126 56.344v1.103h-5.122l-.068-.854 2.964-4.702h1.118l-1.211 2.026-1.474 2.427h3.793Zm-.805-4.453V59h-1.406v-7.11h1.406Z"
+          />
+        </g>
+        <g filter="url(#g)">
+          <rect width="34.8" height="40" x="159.2" y="48" fill="#fff" rx="6" />
+          <path fill="#000" d="M177.678 60.648V77h-2.134V60.648h2.134Zm5.256 0v1.775H170.3v-1.775h12.634Z" />
+          <path
+            fill="#666"
+            d="m188.269 55.763-1.123-.269.406-3.603h3.994v1.137h-2.837l-.176 1.578c.094-.056.238-.114.43-.176.192-.065.407-.098.644-.098.345 0 .651.054.918.161.267.108.493.264.679.469.189.205.332.456.43.752.097.296.146.631.146 1.006 0 .316-.049.617-.146.903a2.244 2.244 0 0 1-.445.762 2.064 2.064 0 0 1-.747.522c-.299.127-.654.19-1.064.19-.306 0-.603-.045-.889-.136a2.445 2.445 0 0 1-.767-.405 2.1 2.1 0 0 1-.542-.65 1.98 1.98 0 0 1-.21-.879h1.397c.019.202.072.376.156.523a.92.92 0 0 0 .347.332c.143.078.311.117.503.117a.957.957 0 0 0 .459-.102.827.827 0 0 0 .307-.284 1.32 1.32 0 0 0 .171-.43c.039-.165.059-.344.059-.536 0-.193-.023-.367-.068-.523a1.13 1.13 0 0 0-.21-.405.932.932 0 0 0-.362-.264 1.26 1.26 0 0 0-.503-.093c-.26 0-.462.041-.605.122-.14.082-.257.174-.352.279Z"
+          />
+        </g>
+        <g filter="url(#h)">
+          <rect width="34.8" height="40" x="198" y="48" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="m211.144 60.648 4.245 8.21 4.256-8.21h2.46l-5.638 10.243V77h-2.168v-6.11l-5.637-10.242h2.482Z"
+          />
+          <path
+            fill="#666"
+            d="M229.374 51.817h.205v1.123h-.083c-.371 0-.701.056-.991.166a2.03 2.03 0 0 0-.737.474 2.048 2.048 0 0 0-.459.733 2.78 2.78 0 0 0-.157.961v1.182c0 .254.025.479.074.674.052.192.125.353.219.483a.994.994 0 0 0 .342.288c.13.062.277.093.44.093a.878.878 0 0 0 .415-.097.928.928 0 0 0 .322-.274c.091-.12.159-.26.205-.42.049-.163.073-.34.073-.532s-.024-.37-.073-.532a1.213 1.213 0 0 0-.205-.42.94.94 0 0 0-.332-.279.97.97 0 0 0-.44-.097 1.117 1.117 0 0 0-1.128 1.05l-.424-.274a2 2 0 0 1 .156-.713c.098-.224.231-.423.4-.596.173-.175.38-.312.62-.41.241-.1.513-.151.816-.151.332 0 .623.063.874.19.254.127.465.302.635.523.169.221.296.477.38.766.085.29.127.6.127.928 0 .345-.057.666-.17.962a2.25 2.25 0 0 1-1.236 1.294 2.513 2.513 0 0 1-.986.186c-.378 0-.721-.069-1.03-.205a2.341 2.341 0 0 1-.791-.586 2.636 2.636 0 0 1-.513-.894 3.508 3.508 0 0 1-.176-1.133v-.547c0-.572.083-1.097.249-1.572.169-.478.412-.892.728-1.24a3.224 3.224 0 0 1 1.142-.816 3.78 3.78 0 0 1 1.509-.288Z"
+          />
+        </g>
+        <g filter="url(#i)">
+          <rect width="34.8" height="40" x="236.8" y="48" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M257.996 60.648h2.156V71.71c0 1.228-.273 2.25-.82 3.066a5.113 5.113 0 0 1-2.178 1.842 7.063 7.063 0 0 1-2.931.607c-1.109 0-2.112-.203-3.01-.607a4.926 4.926 0 0 1-2.123-1.842c-.516-.816-.775-1.838-.775-3.066V60.648h2.145V71.71c0 .854.158 1.558.472 2.112.314.554.752.966 1.314 1.235.569.27 1.228.404 1.977.404.756 0 1.415-.134 1.976-.404a2.935 2.935 0 0 0 1.325-1.235c.315-.554.472-1.258.472-2.112V60.648Z"
+          />
+          <path fill="#666" d="M269.375 51.89v.758L266.626 59h-1.484l2.749-6.01h-3.54v-1.1h5.024Z" />
+        </g>
+        <g filter="url(#j)">
+          <rect width="34.8" height="40" x="275.6" y="48" fill="#fff" rx="6" />
+          <path fill="#000" d="M294.089 60.648V77h-2.167V60.648h2.167Z" />
+          <path
+            fill="#666"
+            d="M308.136 57.052c0 .446-.104.822-.312 1.128a1.95 1.95 0 0 1-.86.688c-.361.153-.771.23-1.23.23-.459 0-.871-.077-1.235-.23a1.98 1.98 0 0 1-.865-.688c-.211-.306-.317-.682-.317-1.128 0-.3.06-.57.181-.81.12-.245.288-.453.502-.626.219-.176.474-.309.767-.4.293-.095.612-.142.957-.142.462 0 .876.082 1.24.244.365.163.651.393.86.689.208.296.312.644.312 1.045Zm-1.416-.093c0-.218-.042-.405-.127-.562a.858.858 0 0 0-.346-.366 1.046 1.046 0 0 0-.523-.127c-.198 0-.373.043-.522.127a.89.89 0 0 0-.352.367 1.206 1.206 0 0 0-.122.561c0 .215.041.4.122.557a.897.897 0 0 0 .352.361c.153.081.33.122.532.122s.376-.04.522-.122a.832.832 0 0 0 .342-.361c.082-.157.122-.342.122-.557Zm1.265-3.184c0 .362-.096.682-.288.962a1.918 1.918 0 0 1-.801.65 2.745 2.745 0 0 1-1.162.234c-.44 0-.83-.078-1.172-.234a1.918 1.918 0 0 1-.801-.65 1.66 1.66 0 0 1-.288-.962c0-.43.096-.79.288-1.084.196-.296.462-.52.801-.673.342-.153.729-.23 1.162-.23.44 0 .829.077 1.167.23.342.153.609.377.801.673.195.293.293.655.293 1.084Zm-1.406.064a1.13 1.13 0 0 0-.103-.498.765.765 0 0 0-.293-.332.845.845 0 0 0-.459-.117.877.877 0 0 0-.454.112.742.742 0 0 0-.288.327c-.065.14-.098.31-.098.508 0 .192.033.361.098.508a.797.797 0 0 0 .293.337c.127.081.28.122.459.122s.33-.041.454-.122a.766.766 0 0 0 .288-.337c.068-.147.103-.316.103-.508Z"
+          />
+        </g>
+        <g filter="url(#k)">
+          <rect width="34.8" height="40" x="314.4" y="48" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M338.37 68.308v1.033c0 1.228-.154 2.328-.461 3.302-.307.973-.748 1.8-1.325 2.481a5.74 5.74 0 0 1-2.078 1.562c-.801.359-1.699.539-2.695.539-.966 0-1.853-.18-2.661-.54a5.971 5.971 0 0 1-2.089-1.56c-.584-.682-1.037-1.51-1.359-2.482-.322-.974-.483-2.074-.483-3.302v-1.033c0-1.228.157-2.325.472-3.29.321-.974.774-1.801 1.358-2.483a5.824 5.824 0 0 1 2.078-1.572c.809-.36 1.696-.54 2.662-.54.995 0 1.894.18 2.695.54.809.36 1.501.883 2.078 1.572.584.682 1.029 1.509 1.336 2.482.315.966.472 2.063.472 3.29Zm-2.145 1.033v-1.056c0-.973-.101-1.834-.304-2.583-.194-.748-.482-1.377-.864-1.887a3.732 3.732 0 0 0-1.404-1.156c-.547-.262-1.168-.393-1.864-.393-.674 0-1.284.13-1.831.393a3.871 3.871 0 0 0-1.392 1.156c-.382.51-.678 1.139-.888 1.887-.209.749-.314 1.61-.314 2.583v1.056c0 .98.105 1.85.314 2.605.21.749.509 1.382.899 1.898.397.51.865.895 1.404 1.157a4.176 4.176 0 0 0 1.83.393c.704 0 1.329-.131 1.876-.393a3.663 3.663 0 0 0 1.381-1.157c.382-.516.67-1.149.865-1.898.194-.756.292-1.624.292-2.605Z"
+          />
+          <path
+            fill="#666"
+            d="M343.142 57.93h.093c.39 0 .726-.047 1.006-.14.283-.099.516-.239.698-.42.182-.183.317-.406.405-.67.088-.267.132-.57.132-.908v-1.348a2.65 2.65 0 0 0-.078-.678 1.345 1.345 0 0 0-.215-.484.91.91 0 0 0-.322-.293.83.83 0 0 0-.401-.097.748.748 0 0 0-.415.117.987.987 0 0 0-.307.307c-.082.13-.145.28-.191.45-.042.166-.063.34-.063.522s.021.357.063.523c.043.162.106.307.191.434.084.124.19.223.317.298a.9.9 0 0 0 .449.107c.166 0 .315-.03.445-.092.133-.066.245-.15.337-.254.094-.105.166-.22.214-.347a.992.992 0 0 0 .079-.386l.463.254c0 .228-.048.453-.146.674a2.076 2.076 0 0 1-1.011 1.035 1.696 1.696 0 0 1-.732.161 2.06 2.06 0 0 1-.884-.18 1.928 1.928 0 0 1-.654-.508 2.313 2.313 0 0 1-.401-.762 3.13 3.13 0 0 1-.136-.942 2.8 2.8 0 0 1 .166-.972c.114-.303.275-.57.483-.8a2.26 2.26 0 0 1 .757-.543c.296-.133.625-.2.986-.2.362 0 .69.07.987.21.296.14.55.339.761.596.212.254.375.558.489.913.117.355.175.748.175 1.181v.489c0 .462-.05.892-.151 1.289a3.772 3.772 0 0 1-.444 1.079c-.196.319-.44.592-.733.82-.29.228-.626.402-1.011.523-.384.12-.813.18-1.289.18h-.112v-1.137Z"
+          />
+        </g>
+        <g filter="url(#l)">
+          <rect width="34.8" height="40" x="353.2" y="48" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M371.274 70.587h-4.369v-1.763h4.369c.846 0 1.531-.135 2.055-.404.524-.27.906-.644 1.145-1.123.248-.48.371-1.026.371-1.64 0-.561-.123-1.09-.371-1.583-.239-.494-.621-.891-1.145-1.19-.524-.308-1.209-.461-2.055-.461h-3.864V77h-2.167V60.648h6.031c1.235 0 2.28.214 3.133.64.854.427 1.501 1.019 1.943 1.775.442.749.663 1.606.663 2.572 0 1.048-.221 1.943-.663 2.684-.442.741-1.089 1.306-1.943 1.696-.853.382-1.898.572-3.133.572Z"
+          />
+          <path
+            fill="#666"
+            d="M385.731 54.82v1.23c0 .535-.057.995-.171 1.383-.114.384-.278.7-.493.947a1.943 1.943 0 0 1-.757.542 2.605 2.605 0 0 1-.976.176c-.287 0-.554-.036-.801-.108a2.023 2.023 0 0 1-.669-.346 2.204 2.204 0 0 1-.508-.591 3.033 3.033 0 0 1-.322-.86 5.218 5.218 0 0 1-.112-1.142v-1.23c0-.535.057-.992.171-1.373.117-.384.281-.698.493-.942.215-.244.468-.423.761-.537a2.61 2.61 0 0 1 .977-.176c.286 0 .552.037.796.112.247.072.47.184.669.337.198.153.368.35.508.591.14.238.247.523.322.855.075.328.112.706.112 1.132Zm-1.411 1.416V54.63c0-.257-.015-.482-.044-.674a1.99 1.99 0 0 0-.122-.488 1.033 1.033 0 0 0-.205-.332.745.745 0 0 0-.278-.186.985.985 0 0 0-.347-.058c-.16 0-.301.03-.425.092a.787.787 0 0 0-.307.298c-.085.134-.15.313-.196.537a4.433 4.433 0 0 0-.063.81v1.607c0 .258.013.484.039.679.029.195.071.363.127.503.058.137.127.249.205.337a.744.744 0 0 0 .278.185c.108.04.225.059.352.059.156 0 .294-.03.415-.093a.816.816 0 0 0 .312-.303 1.59 1.59 0 0 0 .196-.546c.042-.225.063-.498.063-.82Z"
+          />
+        </g>
+      </g>
+      <g opacity=".4">
+        <g filter="url(#m)">
+          <rect width="35.111" height="40" x="22" y="98" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M40.005 112.097 34.592 127h-2.213l6.233-16.352h1.426l-.033 1.449ZM44.542 127l-5.424-14.903-.034-1.449h1.426L46.766 127h-2.224Zm-.28-6.053v1.774h-9.187v-1.774h9.186Z"
+          />
+        </g>
+        <g filter="url(#n)">
+          <rect width="35.111" height="40" x="61.111" y="98" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M82.451 122.867c0-.382-.06-.719-.18-1.011a1.923 1.923 0 0 0-.606-.808c-.284-.24-.681-.468-1.19-.685a16.7 16.7 0 0 0-1.91-.663 17.47 17.47 0 0 1-2.19-.797c-.65-.3-1.209-.64-1.673-1.022a4.036 4.036 0 0 1-1.067-1.314c-.247-.494-.37-1.06-.37-1.696 0-.636.13-1.224.393-1.763a4.128 4.128 0 0 1 1.123-1.404 5.437 5.437 0 0 1 1.763-.943c.681-.225 1.441-.337 2.28-.337 1.228 0 2.268.236 3.122.707.86.465 1.516 1.075 1.965 1.831.45.749.674 1.55.674 2.403H82.43c0-.614-.131-1.157-.393-1.628-.262-.479-.66-.854-1.19-1.123-.532-.277-1.206-.416-2.022-.416-.771 0-1.408.116-1.91.348-.5.232-.875.547-1.122.944-.24.397-.36.85-.36 1.359 0 .344.071.658.214.943.15.277.378.535.685.775a5.5 5.5 0 0 0 1.19.662c.487.203 1.067.397 1.74.584.93.263 1.73.555 2.404.876.674.322 1.228.686 1.662 1.09.442.397.768.85.977 1.359.218.501.326 1.07.326 1.707 0 .666-.135 1.269-.404 1.808-.27.539-.655.999-1.157 1.381s-1.104.678-1.808.887c-.696.203-1.475.304-2.336.304a8.084 8.084 0 0 1-2.235-.315 6.649 6.649 0 0 1-1.988-.943 4.94 4.94 0 0 1-1.426-1.55c-.352-.621-.528-1.34-.528-2.156h2.156c0 .561.109 1.044.326 1.448.217.397.513.727.887.989a4.16 4.16 0 0 0 1.292.584c.486.12.992.179 1.516.179.756 0 1.396-.104 1.92-.314.524-.21.921-.509 1.19-.898.278-.39.416-.85.416-1.382Z"
+          />
+        </g>
+        <g filter="url(#o)">
+          <rect width="35.111" height="40" x="100.222" y="98" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M116.554 127h-3.414l.022-1.763h3.392c1.168 0 2.141-.244 2.92-.73.778-.494 1.362-1.183 1.751-2.067.397-.891.596-1.931.596-3.122v-.999c0-.936-.113-1.767-.337-2.493-.225-.734-.554-1.352-.989-1.853a4.171 4.171 0 0 0-1.594-1.157c-.622-.262-1.337-.393-2.145-.393h-3.684v-1.775h3.684c1.07 0 2.047.18 2.931.54a6.296 6.296 0 0 1 2.28 1.538c.644.666 1.138 1.475 1.482 2.426.345.943.517 2.006.517 3.189v.977c0 1.183-.172 2.25-.517 3.201-.344.943-.842 1.748-1.494 2.415a6.51 6.51 0 0 1-2.335 1.538c-.906.352-1.928.528-3.066.528Zm-2.258-16.352V127h-2.167v-16.352h2.167Z"
+          />
+        </g>
+        <g filter="url(#p)">
+          <rect width="35.111" height="40" x="139.333" y="98" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M154.598 110.648V127h-2.168v-16.352h2.168Zm6.85 7.356v1.775h-7.322v-1.775h7.322Zm1.112-7.356v1.775h-8.434v-1.775h8.434Z"
+          />
+        </g>
+        <g filter="url(#q)">
+          <rect width="35.111" height="40" x="178.444" y="98" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M202.143 118.858v5.986c-.202.299-.524.636-.966 1.01-.442.367-1.052.689-1.83.966-.772.27-1.767.405-2.988.405-.996 0-1.913-.173-2.751-.517a6.213 6.213 0 0 1-2.168-1.527c-.606-.674-1.078-1.49-1.415-2.449-.329-.965-.494-2.058-.494-3.279v-1.269c0-1.22.142-2.31.427-3.268.292-.958.719-1.771 1.28-2.437a5.358 5.358 0 0 1 2.067-1.527c.816-.352 1.752-.528 2.807-.528 1.251 0 2.295.217 3.133.651.847.427 1.505 1.018 1.977 1.775.479.756.786 1.617.921 2.583h-2.168a4.543 4.543 0 0 0-.584-1.618 3.12 3.12 0 0 0-1.224-1.168c-.531-.299-1.216-.449-2.055-.449-.756 0-1.411.139-1.965.416a3.618 3.618 0 0 0-1.37 1.19c-.36.517-.629 1.142-.809 1.876-.172.733-.258 1.561-.258 2.482v1.291c0 .943.108 1.786.326 2.527.224.741.542 1.374.954 1.898.412.517.902.91 1.471 1.179.577.27 1.213.404 1.909.404.772 0 1.397-.063 1.876-.19.479-.135.853-.292 1.123-.472.27-.187.475-.363.618-.528v-3.661h-3.785v-1.752h5.941Z"
+          />
+        </g>
+        <g filter="url(#r)">
+          <rect width="35.111" height="40" x="217.556" y="98" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M239.48 117.679v1.763h-8.85v-1.763h8.85Zm-8.513-7.031V127H228.8v-16.352h2.167Zm10.4 0V127h-2.157v-16.352h2.157Z"
+          />
+        </g>
+        <g filter="url(#s)">
+          <rect width="35.111" height="40" x="256.667" y="98" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M276.637 122.227v-11.579h2.156v11.579c0 1.078-.221 1.988-.662 2.729a4.353 4.353 0 0 1-1.831 1.696c-.771.382-1.658.573-2.662.573-1.003 0-1.894-.173-2.673-.517a4.035 4.035 0 0 1-1.83-1.572c-.442-.704-.663-1.591-.663-2.662h2.168c0 .689.127 1.254.382 1.696.254.442.606.767 1.055.977.457.21.977.314 1.561.314.569 0 1.078-.119 1.528-.359.456-.247.816-.61 1.078-1.089.262-.487.393-1.082.393-1.786Z"
+          />
+        </g>
+        <g filter="url(#t)">
+          <rect width="35.111" height="40" x="295.778" y="98" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M310.178 110.648V127h-2.168v-16.352h2.168Zm9.871 0-6.794 7.626-3.819 3.964-.359-2.313 2.875-3.167 5.492-6.11h2.605ZM317.96 127l-6.053-7.974 1.292-1.718 7.344 9.692h-2.583Z"
+          />
+        </g>
+        <g filter="url(#u)">
+          <rect width="35.111" height="40" x="334.889" y="98" fill="#fff" rx="6" />
+          <path fill="#000" d="M358.06 125.237V127h-8.176v-1.763h8.176Zm-7.749-14.589V127h-2.168v-16.352h2.168Z" />
+        </g>
+      </g>
+      <g opacity=".4">
+        <g filter="url(#v)">
+          <rect width="48" height="40" x="4" y="148" fill="#CCCED5" rx="6" />
+          <path
+            fill="#3D3D3F"
+            d="M28.682 158.789a.95.95 0 0 0-1.364 0l-8.533 8.716c-.608.622-.178 1.684.682 1.684H22.5v7.289c0 .564.448 1.022 1 1.022h9c.552 0 1-.458 1-1.022v-7.289h3.033c.86 0 1.29-1.062.682-1.684l-8.533-8.716Z"
+          />
+        </g>
+        <g filter="url(#w)">
+          <rect width="36.571" height="40" x="56" y="148" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M80.26 175.237V177H69.187v-1.763H80.26Zm-.36-13.016L69.705 177h-1.337v-1.617l10.186-14.735h1.348v1.573Zm-.92-1.573v1.775H68.513v-1.775H78.98Z"
+          />
+        </g>
+        <g filter="url(#x)">
+          <rect width="36.571" height="40" x="96.572" y="148" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="m110.949 160.648 3.931 6.267 3.93-6.267h2.527l-5.166 8.098 5.29 8.254h-2.55l-4.031-6.39-4.032 6.39h-2.549l5.289-8.254-5.166-8.098h2.527Z"
+          />
+        </g>
+        <g filter="url(#y)">
+          <rect width="36.571" height="40" x="137.143" y="148" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M159.707 171.8h2.157c-.113 1.033-.408 1.958-.888 2.774-.479.816-1.156 1.464-2.032 1.943-.876.472-1.969.708-3.28.708-.958 0-1.83-.18-2.616-.539a5.826 5.826 0 0 1-2.011-1.528c-.561-.666-.995-1.464-1.302-2.392-.3-.936-.45-1.976-.45-3.122v-1.628c0-1.146.15-2.183.45-3.111.307-.936.745-1.737 1.314-2.404a5.858 5.858 0 0 1 2.077-1.538c.809-.359 1.719-.539 2.729-.539 1.236 0 2.28.232 3.134.696a4.98 4.98 0 0 1 1.987 1.932c.48.816.775 1.763.888 2.841h-2.157c-.104-.764-.299-1.419-.584-1.965a3.033 3.033 0 0 0-1.213-1.281c-.524-.299-1.209-.449-2.055-.449-.726 0-1.366.139-1.92.416a3.86 3.86 0 0 0-1.381 1.179c-.367.509-.644 1.119-.832 1.831-.187.711-.28 1.501-.28 2.369v1.651c0 .801.082 1.554.247 2.257.172.704.43 1.322.775 1.853.344.532.782.951 1.314 1.258.531.3 1.16.449 1.886.449.921 0 1.655-.146 2.202-.438a2.868 2.868 0 0 0 1.235-1.257c.284-.547.487-1.202.606-1.966Z"
+          />
+        </g>
+        <g filter="url(#z)">
+          <rect width="36.571" height="40" x="177.714" y="148" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="m195.854 174.518 4.818-13.87h2.347L196.966 177h-1.673l.561-2.482Zm-4.503-13.87 4.773 13.87.595 2.482h-1.674l-6.042-16.352h2.348Z"
+          />
+        </g>
+        <g filter="url(#A)">
+          <rect width="36.571" height="40" x="218.286" y="148" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M237.133 169.352h-4.144l-.023-1.741h3.763c.621 0 1.164-.104 1.628-.314.464-.21.824-.509 1.078-.899.262-.396.393-.868.393-1.415 0-.599-.116-1.085-.348-1.46-.225-.381-.573-.658-1.044-.831-.465-.179-1.056-.269-1.775-.269h-3.189V177h-2.168v-16.352h5.357c.839 0 1.587.087 2.246.259.659.164 1.217.426 1.674.786a3.34 3.34 0 0 1 1.055 1.348c.24.546.36 1.201.36 1.965 0 .674-.173 1.284-.517 1.83-.344.539-.823.981-1.437 1.326-.607.344-1.318.565-2.134.662l-.775.528Zm-.101 7.648h-4.897l1.224-1.763h3.673c.689 0 1.273-.12 1.752-.36a2.565 2.565 0 0 0 1.112-1.01c.254-.442.381-.962.381-1.561 0-.607-.108-1.131-.325-1.573a2.257 2.257 0 0 0-1.022-1.022c-.464-.239-1.063-.359-1.797-.359h-3.088l.022-1.741h4.223l.46.629c.786.068 1.453.292 1.999.674.547.374.962.854 1.247 1.438.292.584.438 1.227.438 1.931 0 1.018-.225 1.879-.674 2.583-.442.696-1.067 1.228-1.876 1.595-.808.359-1.759.539-2.852.539Z"
+          />
+        </g>
+        <g filter="url(#B)">
+          <rect width="36.571" height="40" x="258.857" y="148" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M283.409 160.648V177h-2.178l-8.232-12.612V177h-2.168v-16.352h2.168l8.265 12.646v-12.646h2.145Z"
+          />
+        </g>
+        <g filter="url(#C)">
+          <rect width="36.571" height="40" x="299.428" y="148" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M310.257 160.648h2.1l5.357 13.331 5.346-13.331h2.111L318.523 177h-1.64l-6.626-16.352Zm-.685 0h1.853l.303 9.973V177h-2.156v-16.352Zm14.42 0h1.853V177h-2.156v-6.379l.303-9.973Z"
+          />
+        </g>
+        <g filter="url(#D)">
+          <rect width="48" height="40" x="340" y="148" fill="#CCCED5" rx="6" />
+          <path
+            fill="#3D3D3F"
+            d="M374 159h-15c-.69 0-1.23.35-1.59.88L352 168l5.41 8.11c.36.53.9.89 1.59.89h15c1.1 0 2-.9 2-2v-14c0-1.1-.9-2-2-2Zm0 16h-14.93l-4.67-7 4.66-7H374v14Zm-11.59-2 3.59-3.59 3.59 3.59 1.41-1.41-3.59-3.59 3.59-3.59-1.41-1.41-3.59 3.59-3.59-3.59-1.41 1.41 3.59 3.59-3.59 3.59 1.41 1.41Z"
+          />
+        </g>
+      </g>
+      <g opacity=".4">
+        <g filter="url(#E)">
+          <rect width="53" height="40" x="4" y="198" fill="#CCCED5" rx="6" />
+          <path
+            fill="#3D3D3F"
+            d="M18.276 219.858h-1.633c.005-.454.043-.835.117-1.143a2.55 2.55 0 0 1 .366-.849c.176-.254.408-.523.696-.806.224-.215.427-.417.608-.608.18-.195.324-.4.432-.615.107-.22.16-.471.16-.754 0-.308-.05-.569-.153-.784a1.079 1.079 0 0 0-.454-.491c-.195-.112-.44-.168-.732-.168-.244 0-.474.048-.689.146a1.163 1.163 0 0 0-.52.44c-.132.195-.203.454-.212.776h-1.765c.01-.615.156-1.133.439-1.553.283-.42.664-.735 1.143-.945a3.95 3.95 0 0 1 1.604-.315c.654 0 1.213.113 1.677.337.464.22.818.542 1.062.967.249.42.373.928.373 1.524 0 .429-.085.82-.256 1.171-.17.347-.393.672-.666.975-.274.297-.57.595-.887.893-.273.249-.459.52-.556.813a3.208 3.208 0 0 0-.154.989Zm-1.78 2.285c0-.264.09-.486.271-.666.18-.186.427-.279.74-.279.312 0 .559.093.74.279.18.18.27.402.27.666s-.09.488-.27.674c-.181.181-.428.271-.74.271-.313 0-.56-.09-.74-.271a.93.93 0 0 1-.27-.674Zm10.488-9.844V223H25.22v-8.606l-2.614.886v-1.457l4.167-1.524h.212Zm10.855 9.295V223H30.69v-1.208l3.472-3.787c.381-.43.681-.801.901-1.113.22-.313.373-.594.461-.843.093-.254.14-.5.14-.739a1.96 1.96 0 0 0-.19-.887 1.4 1.4 0 0 0-.543-.608c-.24-.151-.53-.227-.871-.227-.396 0-.728.086-.997.257a1.6 1.6 0 0 0-.607.71c-.137.298-.206.64-.206 1.026h-1.765c0-.621.142-1.187.425-1.7a3.111 3.111 0 0 1 1.23-1.23c.538-.308 1.185-.462 1.941-.462.713 0 1.319.12 1.817.359.498.24.876.579 1.135 1.018.264.44.396.96.396 1.56 0 .332-.054.662-.161.989a4.69 4.69 0 0 1-.462.982 8.445 8.445 0 0 1-.696.974c-.268.322-.564.649-.886.981l-2.307 2.542h4.922Zm3.45-4.724h1.054c.41 0 .75-.071 1.018-.213.274-.141.476-.337.608-.586.132-.249.198-.534.198-.857 0-.337-.061-.625-.183-.864a1.238 1.238 0 0 0-.542-.564c-.24-.132-.544-.198-.916-.198-.312 0-.595.064-.85.191-.248.122-.446.298-.593.527-.146.225-.22.493-.22.806h-1.772c0-.567.15-1.07.447-1.509a3.04 3.04 0 0 1 1.216-1.033c.518-.254 1.099-.381 1.743-.381.688 0 1.29.115 1.802.345.517.224.92.561 1.208 1.01.288.45.433 1.006.433 1.67 0 .303-.071.611-.213.923a2.68 2.68 0 0 1-.63.857 3.288 3.288 0 0 1-1.04.623c-.415.156-.896.234-1.443.234H41.29v-.981Zm0 1.377v-.967h1.325c.625 0 1.158.073 1.597.22.444.146.806.349 1.084.607a2.3 2.3 0 0 1 .608.872c.132.327.198.674.198 1.04 0 .498-.09.942-.271 1.333a2.697 2.697 0 0 1-.755.981c-.327.269-.71.472-1.15.608a4.705 4.705 0 0 1-1.42.205 4.53 4.53 0 0 1-1.319-.19 3.598 3.598 0 0 1-1.128-.564 2.799 2.799 0 0 1-.79-.945c-.191-.381-.287-.82-.287-1.318h1.766c0 .317.073.598.22.842.15.239.36.427.63.564.273.137.585.205.937.205.37 0 .69-.066.96-.198.268-.131.473-.327.614-.585.147-.259.22-.572.22-.938 0-.415-.08-.752-.242-1.011a1.425 1.425 0 0 0-.688-.571c-.298-.127-.65-.19-1.055-.19H41.29Z"
+          />
+        </g>
+        <g filter="url(#F)">
+          <rect width="30" height="40" x="61" y="198" fill="#CCCED5" rx="6" />
+          <path
+            fill="#000"
+            d="m76.886 228.301-.007 1.26c0 .498-.125 1.01-.374 1.538-.249.527-.578.962-.988 1.303l-.945-.549c.136-.22.261-.442.373-.666.113-.225.203-.464.271-.718.069-.254.103-.535.103-.843v-1.325h1.567Z"
+          />
+          <path
+            fill="#3D3D3F"
+            d="M77.396 208.958a.812.812 0 1 0 .001-1.624.812.812 0 0 0-.001 1.624ZM73.604 208.958a.812.812 0 1 0 .001-1.624.812.812 0 0 0 0 1.624Z"
+          />
+          <path
+            fill="#3D3D3F"
+            d="M75.5 211.667c-.802 0-1.49-.439-1.869-1.084h-.904a2.976 2.976 0 0 0 5.546 0h-.904a2.165 2.165 0 0 1-1.87 1.084Zm-.005-7.584a5.414 5.414 0 0 0-5.412 5.417 5.414 5.414 0 0 0 5.412 5.417 5.42 5.42 0 0 0 5.422-5.417 5.42 5.42 0 0 0-5.422-5.417Zm.005 9.75a4.332 4.332 0 0 1-4.333-4.333 4.332 4.332 0 0 1 4.333-4.333 4.332 4.332 0 0 1 4.333 4.333 4.332 4.332 0 0 1-4.333 4.333Z"
+          />
+        </g>
+        <g filter="url(#G)">
+          <rect width="30" height="40" x="95" y="198" fill="#fff" rx="6" />
+          <path
+            fill="#4C4C4C"
+            d="M109.99 208c-5.52 0-9.99 4.48-9.99 10s4.47 10 9.99 10c5.53 0 10.01-4.48 10.01-10s-4.48-10-10.01-10Zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56 8.03 8.03 0 0 1 4.33 3.56Zm-6.92-3.96c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96Zm-7.74 9.96c-.16-.64-.26-1.31-.26-2s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2h-3.38Zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56a7.987 7.987 0 0 1-4.33-3.56Zm2.95-8h-2.95a7.987 7.987 0 0 1 4.33-3.56 15.65 15.65 0 0 0-1.38 3.56Zm3.97 11.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96Zm2.34-5.96h-4.68c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2Zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56Zm1.77-5.56c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38Z"
+          />
+        </g>
+        <g filter="url(#H)">
+          <rect width="173" height="40" x="129" y="198" fill="#fff" rx="6" />
+          <path
+            fill="#000"
+            d="M201.408 221.503v.997h-4.894v-.997h4.894Zm-4.646-8.245v9.242h-1.225v-9.242h1.225Zm3.999 3.973v.997h-4.247v-.997h4.247Zm.584-3.973v1.003h-4.831v-1.003h4.831Zm2.577 3.84v5.402h-1.174v-6.868h1.11l.064 1.466Zm-.279 1.708-.489-.019c.004-.47.074-.904.209-1.302.136-.402.326-.751.572-1.047a2.543 2.543 0 0 1 2.012-.933c.338 0 .643.046.914.14.271.088.501.232.692.431.194.199.343.457.444.775.102.313.152.696.152 1.149v4.5h-1.18v-4.513c0-.36-.053-.648-.159-.863a.977.977 0 0 0-.463-.477 1.672 1.672 0 0 0-.749-.152c-.292 0-.559.061-.8.184a1.921 1.921 0 0 0-.616.508 2.573 2.573 0 0 0-.539 1.619Zm10.74-3.174h1.066v6.722c0 .605-.123 1.121-.368 1.549a2.397 2.397 0 0 1-1.028.971c-.436.224-.94.336-1.511.336a3.72 3.72 0 0 1-.838-.114 3.405 3.405 0 0 1-.939-.374 2.35 2.35 0 0 1-.768-.705l.615-.698c.288.347.589.588.902.723.317.136.63.204.939.204.373 0 .694-.07.965-.21.271-.14.48-.347.628-.622.153-.271.229-.605.229-1.003v-5.268l.108-1.511Zm-4.729 3.51v-.133c0-.525.061-1.001.184-1.428.127-.432.307-.802.539-1.111a2.425 2.425 0 0 1 1.987-.965c.432 0 .809.076 1.13.228.326.149.601.366.825.654a3.2 3.2 0 0 1 .54 1.029c.131.402.222.856.273 1.364v.584a6.03 6.03 0 0 1-.273 1.359 3.195 3.195 0 0 1-.54 1.028 2.256 2.256 0 0 1-.825.654c-.326.148-.707.222-1.142.222-.411 0-.783-.087-1.118-.26a2.551 2.551 0 0 1-.85-.73 3.461 3.461 0 0 1-.546-1.105 5.008 5.008 0 0 1-.184-1.39Zm1.174-.133v.133c0 .343.034.664.102.965.072.3.18.565.323.793.149.229.337.409.565.54.229.127.502.19.819.19.39 0 .711-.082.965-.247a1.79 1.79 0 0 0 .603-.654c.152-.271.271-.565.356-.882v-1.53a3.164 3.164 0 0 0-.216-.673 2.074 2.074 0 0 0-.368-.584 1.616 1.616 0 0 0-.553-.413 1.84 1.84 0 0 0-.774-.152 1.63 1.63 0 0 0-.832.203 1.628 1.628 0 0 0-.565.546 2.645 2.645 0 0 0-.323.8c-.068.3-.102.622-.102.965Zm7.681-6.259v9.75h-1.181v-9.75h1.181Zm3.161 2.882v6.868h-1.181v-6.868h1.181Zm-1.27-1.822a.71.71 0 0 1 .172-.482c.118-.132.292-.197.52-.197.225 0 .396.065.514.197a.679.679 0 0 1 .185.482.664.664 0 0 1-.185.47c-.118.127-.289.19-.514.19-.228 0-.402-.063-.52-.19a.693.693 0 0 1-.172-.47Zm7.154 6.868a.992.992 0 0 0-.114-.47c-.072-.148-.222-.281-.451-.399-.224-.123-.563-.229-1.015-.318a7.991 7.991 0 0 1-1.035-.285 3.156 3.156 0 0 1-.781-.4 1.696 1.696 0 0 1-.489-.553 1.54 1.54 0 0 1-.171-.742c0-.271.059-.527.178-.768.123-.242.294-.455.514-.641.224-.187.493-.333.806-.438a3.25 3.25 0 0 1 1.047-.159c.551 0 1.02.097 1.41.292a2.2 2.2 0 0 1 .895.781c.207.321.311.679.311 1.072h-1.175c0-.19-.057-.374-.171-.552a1.268 1.268 0 0 0-.489-.451c-.211-.118-.472-.177-.781-.177-.325 0-.59.051-.793.152a1.012 1.012 0 0 0-.438.375.94.94 0 0 0-.07.825.767.767 0 0 0 .241.273c.115.08.275.156.483.228.207.072.472.144.793.216.563.127 1.026.279 1.39.457.364.178.635.396.813.654.178.258.267.571.267.939a1.836 1.836 0 0 1-.73 1.473 2.698 2.698 0 0 1-.838.419 3.76 3.76 0 0 1-1.086.146c-.605 0-1.117-.108-1.536-.324-.419-.216-.736-.495-.952-.838a2 2 0 0 1-.324-1.085h1.181c.017.321.11.578.279.768.169.186.377.319.622.4.246.076.489.114.73.114.322 0 .591-.042.806-.127a1.12 1.12 0 0 0 .502-.349.81.81 0 0 0 .171-.508Zm3.891-7.928v9.75h-1.174v-9.75h1.174Zm-.279 6.056-.489-.019c.004-.47.074-.904.21-1.302.135-.402.326-.751.571-1.047a2.543 2.543 0 0 1 2.012-.933c.339 0 .643.046.914.14.271.088.502.232.692.431.195.199.343.457.445.775.101.313.152.696.152 1.149v4.5h-1.181v-4.513c0-.36-.053-.648-.159-.863a.973.973 0 0 0-.463-.477 1.672 1.672 0 0 0-.749-.152c-.292 0-.559.061-.8.184a1.907 1.907 0 0 0-.615.508c-.17.216-.303.463-.4.743-.093.275-.14.567-.14.876Z"
+          />
+        </g>
+        <g filter="url(#I)">
+          <rect width="30" height="40" x="306" y="198" fill="#CCCED5" rx="6" />
+          <path
+            fill="#000"
+            d="M319.585 225.899c0-.351.109-.647.326-.887.224-.247.546-.37.965-.37.42 0 .738.123.955.37.225.24.337.536.337.887 0 .345-.112.637-.337.876-.217.24-.535.36-.955.36-.419 0-.741-.12-.965-.36a1.256 1.256 0 0 1-.326-.876Z"
+          />
+        </g>
+        <g filter="url(#J)">
+          <rect width="48" height="40" x="340" y="198" fill="#CCCED5" rx="6" />
+          <path
+            fill="#3D3D3F"
+            d="m363.59 213.41 3.58 3.59H353v2h14.17l-3.59 3.59L365 224l6-6-6-6-1.41 1.41ZM372 212v12h2v-12h-2Z"
+          />
+        </g>
+      </g>
+      <path fill="#EDF0F2" d="M0 242h392v46H0z" />
+      <rect width="12" height="12" x="108" y="259" fill="#666" opacity=".4" rx="1" />
+      <g fill="#666" opacity=".4">
+        <path d="M196 271a6 6 0 1 0 0-12 6 6 0 0 0 0 12Z" />
+        <path
+          fill-rule="evenodd"
+          d="M205 265a9 9 0 0 1-9 9 9 9 0 0 1-9-9 9 9 0 0 1 9-9 9 9 0 0 1 9 9Zm-1.5 0a7.5 7.5 0 1 1-15 0 7.5 7.5 0 0 1 15 0Z"
+          clip-rule="evenodd"
+        />
+      </g>
+      <path
+        fill="#666"
+        d="M272.489 265.844a.973.973 0 0 1 0-1.688l9.851-5.992c.715-.435 1.66.046 1.66.844v11.984c0 .798-.945 1.279-1.66.844l-9.851-5.992Z"
+        opacity=".4"
+      />
+      <defs>
+        <filter
+          id="a"
+          width="34"
+          height="34"
+          x="10"
+          y="6"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feGaussianBlur stdDeviation="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="c"
+          width="34.8"
+          height="41"
+          x="4"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="d"
+          width="34.8"
+          height="41"
+          x="42.8"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="e"
+          width="34.8"
+          height="41"
+          x="81.6"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="f"
+          width="34.8"
+          height="41"
+          x="120.4"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="g"
+          width="34.8"
+          height="41"
+          x="159.2"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="h"
+          width="34.8"
+          height="41"
+          x="198"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="i"
+          width="34.8"
+          height="41"
+          x="236.8"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="j"
+          width="34.8"
+          height="41"
+          x="275.6"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="k"
+          width="34.8"
+          height="41"
+          x="314.4"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="l"
+          width="34.8"
+          height="41"
+          x="353.2"
+          y="48"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="m"
+          width="35.111"
+          height="41"
+          x="22"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="n"
+          width="35.111"
+          height="41"
+          x="61.111"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="o"
+          width="35.111"
+          height="41"
+          x="100.222"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="p"
+          width="35.111"
+          height="41"
+          x="139.333"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="q"
+          width="35.111"
+          height="41"
+          x="178.444"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="r"
+          width="35.111"
+          height="41"
+          x="217.556"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="s"
+          width="35.111"
+          height="41"
+          x="256.667"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="t"
+          width="35.111"
+          height="41"
+          x="295.778"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="u"
+          width="35.111"
+          height="41"
+          x="334.889"
+          y="98"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="v"
+          width="48"
+          height="41"
+          x="4"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="w"
+          width="36.572"
+          height="41"
+          x="56"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="x"
+          width="36.572"
+          height="41"
+          x="96.572"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="y"
+          width="36.572"
+          height="41"
+          x="137.143"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="z"
+          width="36.572"
+          height="41"
+          x="177.714"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="A"
+          width="36.572"
+          height="41"
+          x="218.286"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="B"
+          width="36.572"
+          height="41"
+          x="258.857"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="C"
+          width="36.572"
+          height="41"
+          x="299.428"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="D"
+          width="48"
+          height="41"
+          x="340"
+          y="148"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="E"
+          width="53"
+          height="41"
+          x="4"
+          y="198"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="F"
+          width="30"
+          height="41"
+          x="61"
+          y="198"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="G"
+          width="30"
+          height="41"
+          x="95"
+          y="198"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="H"
+          width="173"
+          height="41"
+          x="129"
+          y="198"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="I"
+          width="30"
+          height="41"
+          x="306"
+          y="198"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <filter
+          id="J"
+          width="48"
+          height="41"
+          x="340"
+          y="198"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.27 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_90634" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_90634" result="shape" />
+        </filter>
+        <clipPath id="b">
+          <path fill="#fff" d="M121.572 10h24v24h-24z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/common/icons/android/index.ts b/apps/web/src/components/workflow/preview/common/icons/android/index.ts
new file mode 100644
index 00000000000..ab8d65809e3
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/icons/android/index.ts
@@ -0,0 +1,2 @@
+export * from './AndroidIndicatorsIcon';
+export * from './AndroidKeyboard';
diff --git a/apps/web/src/components/workflow/preview/common/icons/index.ts b/apps/web/src/components/workflow/preview/common/icons/index.ts
new file mode 100644
index 00000000000..80cddcd1e10
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/icons/index.ts
@@ -0,0 +1,3 @@
+export * from './iphone';
+export * from './android';
+export * from './InAppHeaderIcons';
diff --git a/apps/web/src/components/workflow/preview/common/icons/iphone/IOSIndicatorsIcon.tsx b/apps/web/src/components/workflow/preview/common/icons/iphone/IOSIndicatorsIcon.tsx
new file mode 100644
index 00000000000..86be345be27
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/icons/iphone/IOSIndicatorsIcon.tsx
@@ -0,0 +1,27 @@
+/* eslint-disable max-len */
+import { ComponentProps } from 'react';
+
+export const IOSIndicatorsIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg width="74" height="12" viewBox="0 0 74 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16.9412 0H15.8824C15.2976 0 14.8235 0.50368 14.8235 1.125V10.875C14.8235 11.4963 15.2976 12 15.8824 12H16.9412C17.5259 12 18 11.4963 18 10.875V1.125C18 0.50368 17.5259 0 16.9412 0ZM10.9412 2.625H12C12.5848 2.625 13.0588 3.12868 13.0588 3.75V10.875C13.0588 11.4963 12.5848 12 12 12H10.9412C10.3564 12 9.88235 11.4963 9.88235 10.875V3.75C9.88235 3.12868 10.3564 2.625 10.9412 2.625ZM7.05881 5.25H5.99999C5.41521 5.25 4.94116 5.75368 4.94116 6.375V10.875C4.94116 11.4963 5.41521 12 5.99999 12H7.05881C7.64358 12 8.11763 11.4963 8.11763 10.875V6.375C8.11763 5.75368 7.64358 5.25 7.05881 5.25ZM2.11765 7.5H1.05882C0.474051 7.5 0 8.00368 0 8.625V10.875C0 11.4963 0.474051 12 1.05882 12H2.11765C2.70242 12 3.17647 11.4963 3.17647 10.875V8.625C3.17647 8.00368 2.70242 7.5 2.11765 7.5Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M34.0004 2.49216C36.3219 2.49226 38.5546 3.42402 40.2371 5.09485C40.3638 5.22384 40.5663 5.22222 40.691 5.0912L41.9021 3.81448C41.9653 3.74803 42.0005 3.65802 42 3.56436C41.9995 3.47071 41.9632 3.38113 41.8993 3.31546C37.4834 -1.10515 30.5168 -1.10515 26.1009 3.31546C26.0369 3.38109 26.0006 3.47063 26 3.56429C25.9994 3.65794 26.0346 3.74798 26.0977 3.81448L27.3091 5.0912C27.4338 5.22241 27.6365 5.22404 27.7631 5.09485C29.4458 3.42391 31.6787 2.49215 34.0004 2.49216ZM34.0004 6.6461C35.2759 6.64602 36.5059 7.14124 37.4514 8.03554C37.5792 8.16246 37.7807 8.15971 37.9053 8.02934L39.115 6.75262C39.1787 6.68565 39.2141 6.5948 39.2132 6.5004C39.2122 6.406 39.1751 6.31592 39.1101 6.25032C36.231 3.45278 31.7723 3.45278 28.8932 6.25032C28.8281 6.31592 28.791 6.40604 28.7902 6.50048C28.7893 6.59491 28.8248 6.68575 28.8886 6.75262L30.098 8.02934C30.2226 8.15971 30.4241 8.16246 30.5519 8.03554C31.4968 7.14183 32.7258 6.64665 34.0004 6.6461ZM36.4236 9.44087C36.4255 9.53554 36.3899 9.62681 36.3252 9.69313L34.2327 11.8989C34.1713 11.9638 34.0877 12.0003 34.0004 12.0003C33.9132 12.0003 33.8296 11.9638 33.7682 11.8989L31.6754 9.69313C31.6107 9.62676 31.5752 9.53546 31.5771 9.44079C31.579 9.34613 31.6182 9.25648 31.6855 9.19302C33.0218 8.01236 34.979 8.01236 36.3154 9.19302C36.3826 9.25653 36.4218 9.34621 36.4236 9.44087Z"
+        fill="currentColor"
+      />
+      <rect x="50.5" y="0.5" width="20.7034" height="11" rx="3.5" stroke="currentColor" />
+      <path
+        d="M72.6899 3.88232V8.11762C73.4838 7.75891 74 6.92447 74 5.99997C74 5.07548 73.4838 4.24103 72.6899 3.88232Z"
+        fill="currentColor"
+      />
+      <rect x="51.973" y="1.76465" width="17.7573" height="8.47059" rx="2" fill="currentColor" />
+    </svg>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/common/icons/iphone/IOSKeyboard.tsx b/apps/web/src/components/workflow/preview/common/icons/iphone/IOSKeyboard.tsx
new file mode 100644
index 00000000000..31c9bd166e0
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/icons/iphone/IOSKeyboard.tsx
@@ -0,0 +1,1570 @@
+/* eslint-disable max-len */
+import { ComponentProps } from 'react';
+
+interface IOSKeyboardProps extends ComponentProps<'svg'> {
+  isDarkMode?: boolean;
+}
+
+export const IOSKeyboard = ({ isDarkMode, ...rest }: IOSKeyboardProps) => {
+  return isDarkMode ? (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 392 335" {...rest}>
+      <g opacity=".4">
+        <g filter="url(#a)">
+          <path fill="#202020" fillOpacity="1" d="M0 0h392v44H0z" />
+          <path
+            fill="#fff"
+            d="M37.025 33.282c-2.623 0-4.316-1.378-4.49-3.328l-.009-.092h1.494l.008.092c.108 1.195 1.354 1.95 3.08 1.95 1.627 0 2.814-.838 2.814-2.058v-.009c0-.996-.689-1.676-2.332-2.042l-1.329-.29c-2.399-.531-3.436-1.635-3.436-3.37v-.009c.008-1.983 1.743-3.386 4.217-3.386 2.39 0 4.059 1.41 4.183 3.196l.009.116h-1.495l-.016-.108c-.166-1.054-1.162-1.835-2.723-1.826-1.494.008-2.648.713-2.648 1.967v.008c0 .955.656 1.602 2.283 1.96l1.328.298c2.499.556 3.486 1.56 3.486 3.287v.008c0 2.242-1.751 3.636-4.424 3.636Zm9.729-.124c-2.034 0-3.08-1.196-3.08-3.312v-5.794h1.444v5.445c0 1.61.581 2.382 2.01 2.382 1.576 0 2.415-.963 2.415-2.531v-5.296h1.444V33h-1.444v-1.336h-.133c-.44.954-1.345 1.494-2.656 1.494Zm10.616 2.996c-2.158 0-3.536-.97-3.76-2.44l.017-.008h1.494l.008.008c.158.68.955 1.162 2.241 1.162 1.602 0 2.557-.755 2.557-2.075v-1.81h-.133c-.564.988-1.577 1.544-2.806 1.544-2.316 0-3.752-1.793-3.752-4.3v-.016c0-2.507 1.445-4.325 3.786-4.325 1.261 0 2.24.623 2.789 1.635h.1v-1.477h1.444v8.824c0 2-1.544 3.278-3.985 3.278Zm-.066-4.897c1.66 0 2.656-1.245 2.656-3.022v-.016c0-1.777-1.004-3.047-2.656-3.047-1.66 0-2.59 1.27-2.59 3.047v.016c0 1.777.93 3.022 2.59 3.022Zm10.426 4.897c-2.159 0-3.537-.97-3.76-2.44l.016-.008h1.494l.008.008c.158.68.955 1.162 2.242 1.162 1.602 0 2.556-.755 2.556-2.075v-1.81h-.133c-.564.988-1.577 1.544-2.805 1.544-2.316 0-3.752-1.793-3.752-4.3v-.016c0-2.507 1.444-4.325 3.785-4.325 1.262 0 2.241.623 2.79 1.635h.099v-1.477h1.444v8.824c0 2-1.544 3.278-3.984 3.278Zm-.067-4.897c1.66 0 2.657-1.245 2.657-3.022v-.016c0-1.777-1.005-3.047-2.657-3.047-1.66 0-2.59 1.27-2.59 3.047v.016c0 1.777.93 3.022 2.59 3.022Zm10.393 1.9c-2.557 0-4.1-1.792-4.1-4.598v-.008c0-2.764 1.576-4.657 4.008-4.657 2.433 0 3.91 1.81 3.91 4.483v.564h-6.441c.041 1.851 1.062 2.93 2.656 2.93 1.212 0 1.959-.573 2.2-1.112l.033-.075h1.444l-.016.066c-.307 1.212-1.586 2.408-3.694 2.408Zm-.1-7.976c-1.328 0-2.34.904-2.498 2.606h4.947c-.15-1.768-1.129-2.606-2.449-2.606Zm9.23 7.977c-1.992 0-3.361-.963-3.527-2.44h1.477c.241.746.955 1.236 2.1 1.236 1.204 0 2.06-.573 2.06-1.386v-.017c0-.606-.458-1.029-1.562-1.295l-1.386-.332c-1.676-.398-2.432-1.129-2.432-2.415V26.5c0-1.485 1.428-2.606 3.329-2.606 1.876 0 3.179.938 3.378 2.399h-1.42c-.19-.706-.887-1.195-1.966-1.195-1.063 0-1.843.547-1.843 1.336v.017c0 .606.448.988 1.502 1.245l1.378.332c1.685.407 2.499 1.137 2.499 2.415v.017c0 1.594-1.553 2.698-3.586 2.698Zm8.924-.092c-1.843 0-2.615-.68-2.615-2.39v-5.429h-1.41v-1.195h1.41v-2.316h1.494v2.316h1.96v1.195h-1.96v5.064c0 1.054.366 1.477 1.295 1.477.258 0 .399-.008.664-.033v1.228c-.282.05-.556.083-.838.083Z"
+          />
+          <path stroke="#343434" strokeLinecap="square" d="M130.333 15v24" />
+          <path
+            fill="#fff"
+            d="M168.358 33.282c-2.623 0-4.316-1.378-4.49-3.328l-.009-.092h1.495l.008.092c.108 1.195 1.353 1.95 3.079 1.95 1.627 0 2.814-.838 2.814-2.058v-.009c0-.996-.689-1.676-2.332-2.042l-1.328-.29c-2.399-.531-3.437-1.635-3.437-3.37v-.009c.009-1.983 1.743-3.386 4.217-3.386 2.391 0 4.059 1.41 4.184 3.196l.008.116h-1.494l-.017-.108c-.166-1.054-1.162-1.835-2.722-1.826-1.495.008-2.648.713-2.648 1.967v.008c0 .955.655 1.602 2.282 1.96l1.328.298c2.499.556 3.487 1.56 3.487 3.287v.008c0 2.242-1.752 3.636-4.425 3.636Zm9.729-.124c-2.034 0-3.08-1.196-3.08-3.312v-5.794h1.445v5.445c0 1.61.581 2.382 2.008 2.382 1.578 0 2.416-.963 2.416-2.531v-5.296h1.444V33h-1.444v-1.336h-.133c-.44.954-1.345 1.494-2.656 1.494Zm10.617 2.996c-2.159 0-3.536-.97-3.761-2.44l.017-.008h1.494l.008.008c.158.68.955 1.162 2.242 1.162 1.602 0 2.556-.755 2.556-2.075v-1.81h-.133c-.564.988-1.577 1.544-2.805 1.544-2.316 0-3.752-1.793-3.752-4.3v-.016c0-2.507 1.444-4.325 3.785-4.325 1.262 0 2.241.623 2.789 1.635h.1v-1.477h1.444v8.824c0 2-1.544 3.278-3.984 3.278Zm-.067-4.897c1.66 0 2.656-1.245 2.656-3.022v-.016c0-1.777-1.004-3.047-2.656-3.047-1.66 0-2.59 1.27-2.59 3.047v.016c0 1.777.93 3.022 2.59 3.022Zm10.426 4.897c-2.158 0-3.536-.97-3.76-2.44l.016-.008h1.495l.008.008c.158.68.954 1.162 2.241 1.162 1.602 0 2.557-.755 2.557-2.075v-1.81h-.133c-.565.988-1.577 1.544-2.806 1.544-2.316 0-3.752-1.793-3.752-4.3v-.016c0-2.507 1.445-4.325 3.785-4.325 1.262 0 2.242.623 2.789 1.635h.1v-1.477h1.444v8.824c0 2-1.544 3.278-3.984 3.278Zm-.066-4.897c1.66 0 2.656-1.245 2.656-3.022v-.016c0-1.777-1.005-3.047-2.656-3.047-1.661 0-2.59 1.27-2.59 3.047v.016c0 1.777.929 3.022 2.59 3.022Zm10.392 1.9c-2.556 0-4.1-1.792-4.1-4.598v-.008c0-2.764 1.577-4.657 4.009-4.657 2.432 0 3.91 1.81 3.91 4.483v.564h-6.442c.042 1.851 1.063 2.93 2.656 2.93 1.212 0 1.959-.573 2.2-1.112l.033-.075h1.445l-.017.066c-.307 1.212-1.585 2.408-3.694 2.408Zm-.099-7.976c-1.329 0-2.341.904-2.499 2.606h4.947c-.149-1.768-1.129-2.606-2.448-2.606Zm9.23 7.977c-1.992 0-3.362-.963-3.528-2.44h1.478c.24.746.954 1.236 2.1 1.236 1.203 0 2.058-.573 2.058-1.386v-.017c0-.606-.456-1.029-1.56-1.295l-1.386-.332c-1.677-.398-2.432-1.129-2.432-2.415V26.5c0-1.485 1.427-2.606 3.328-2.606 1.876 0 3.179.938 3.379 2.399h-1.42c-.191-.706-.888-1.195-1.967-1.195-1.063 0-1.843.547-1.843 1.336v.017c0 .606.448.988 1.503 1.245l1.377.332c1.686.407 2.499 1.137 2.499 2.415v.017c0 1.594-1.552 2.698-3.586 2.698Zm8.923-.092c-1.842 0-2.614-.68-2.614-2.39v-5.429h-1.411v-1.195h1.411v-2.316h1.494v2.316h1.959v1.195h-1.959v5.064c0 1.054.365 1.477 1.295 1.477.257 0 .398-.008.664-.033v1.228a4.78 4.78 0 0 1-.839.083Z"
+          />
+          <path stroke="#343434" strokeLinecap="square" d="M261.667 15v24" />
+          <path
+            fill="#fff"
+            d="M299.692 33.282c-2.623 0-4.317-1.378-4.491-3.328l-.008-.092h1.494l.008.092c.108 1.195 1.353 1.95 3.08 1.95 1.627 0 2.814-.838 2.814-2.058v-.009c0-.996-.689-1.676-2.333-2.042l-1.328-.29c-2.399-.531-3.436-1.635-3.436-3.37v-.009c.008-1.983 1.743-3.386 4.216-3.386 2.391 0 4.059 1.41 4.184 3.196l.008.116h-1.494l-.016-.108c-.167-1.054-1.163-1.835-2.723-1.826-1.494.008-2.648.713-2.648 1.967v.008c0 .955.656 1.602 2.283 1.96l1.328.298c2.498.556 3.486 1.56 3.486 3.287v.008c0 2.242-1.751 3.636-4.424 3.636Zm9.728-.124c-2.033 0-3.079-1.196-3.079-3.312v-5.794h1.444v5.445c0 1.61.581 2.382 2.009 2.382 1.577 0 2.415-.963 2.415-2.531v-5.296h1.445V33h-1.445v-1.336h-.132c-.44.954-1.345 1.494-2.657 1.494Zm10.617 2.996c-2.158 0-3.536-.97-3.76-2.44l.016-.008h1.494l.009.008c.157.68.954 1.162 2.241 1.162 1.602 0 2.557-.755 2.557-2.075v-1.81h-.133c-.565.988-1.577 1.544-2.806 1.544-2.316 0-3.752-1.793-3.752-4.3v-.016c0-2.507 1.445-4.325 3.785-4.325 1.262 0 2.242.623 2.789 1.635h.1v-1.477h1.444v8.824c0 2-1.544 3.278-3.984 3.278Zm-.066-4.897c1.66 0 2.656-1.245 2.656-3.022v-.016c0-1.777-1.005-3.047-2.656-3.047-1.661 0-2.59 1.27-2.59 3.047v.016c0 1.777.929 3.022 2.59 3.022Zm10.425 4.897c-2.158 0-3.536-.97-3.76-2.44l.017-.008h1.494l.008.008c.158.68.955 1.162 2.241 1.162 1.602 0 2.557-.755 2.557-2.075v-1.81h-.133c-.564.988-1.577 1.544-2.805 1.544-2.316 0-3.752-1.793-3.752-4.3v-.016c0-2.507 1.444-4.325 3.785-4.325 1.261 0 2.241.623 2.789 1.635h.099v-1.477h1.445v8.824c0 2-1.544 3.278-3.985 3.278Zm-.066-4.897c1.66 0 2.656-1.245 2.656-3.022v-.016c0-1.777-1.004-3.047-2.656-3.047-1.66 0-2.59 1.27-2.59 3.047v.016c0 1.777.93 3.022 2.59 3.022Zm10.393 1.9c-2.557 0-4.101-1.792-4.101-4.598v-.008c0-2.764 1.577-4.657 4.009-4.657 2.432 0 3.91 1.81 3.91 4.483v.564h-6.442c.042 1.851 1.063 2.93 2.657 2.93 1.212 0 1.959-.573 2.199-1.112l.034-.075h1.444l-.017.066c-.307 1.212-1.585 2.408-3.693 2.408Zm-.1-7.976c-1.328 0-2.341.904-2.499 2.606h4.948c-.15-1.768-1.129-2.606-2.449-2.606Zm9.23 7.977c-1.992 0-3.361-.963-3.527-2.44h1.477c.241.746.955 1.236 2.1 1.236 1.204 0 2.059-.573 2.059-1.386v-.017c0-.606-.457-1.029-1.561-1.295l-1.386-.332c-1.677-.398-2.432-1.129-2.432-2.415V26.5c0-1.485 1.428-2.606 3.328-2.606 1.876 0 3.18.938 3.379 2.399h-1.42c-.19-.706-.888-1.195-1.967-1.195-1.062 0-1.843.547-1.843 1.336v.017c0 .606.449.988 1.503 1.245l1.378.332c1.685.407 2.498 1.137 2.498 2.415v.017c0 1.594-1.552 2.698-3.586 2.698Zm8.924-.092c-1.843 0-2.615-.68-2.615-2.39v-5.429h-1.411v-1.195h1.411v-2.316h1.494v2.316h1.959v1.195h-1.959v5.064c0 1.054.365 1.477 1.295 1.477.257 0 .398-.008.664-.033v1.228c-.282.05-.556.083-.838.083Z"
+          />
+        </g>
+        <g filter="url(#b)">
+          <path fill="#202020" fillOpacity="1" d="M0 44h392v220H0z" />
+          <g filter="url(#c)">
+            <rect width="34.1" height="42" x="3" y="52" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M20.06 81.258c-4.404 0-7.154-3.083-7.154-8.003v-.022c0-4.909 2.761-7.992 7.155-7.992 4.383 0 7.133 3.083 7.133 7.992v.022c0 3.008-1.021 5.317-2.815 6.67l2.052 2.826h-2.17l-1.429-1.977c-.827.323-1.762.484-2.771.484Zm0-1.783c.592 0 1.14-.086 1.644-.247l-1.944-2.664h2.17l1.321 1.815c1.246-1.064 1.955-2.858 1.955-5.124v-.022c0-3.802-1.987-6.209-5.145-6.209-3.17 0-5.167 2.396-5.167 6.21v.02c0 3.814 1.987 6.22 5.167 6.22Z"
+            />
+          </g>
+          <g filter="url(#d)">
+            <rect width="34.1" height="42" x="42.1" y="52" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M53.693 81 49.47 65.499h2.02l3.126 12.73h.043l3.512-12.73h1.956l3.512 12.73h.043l3.126-12.73h2.02L64.607 81h-1.826l-3.61-12.418h-.042L55.519 81h-1.826Z"
+            />
+          </g>
+          <g filter="url(#e)">
+            <rect width="34.1" height="42" x="81.2" y="52" fill="#434343" rx="4.6" />
+            <path fill="#fff" d="M93.674 81V65.499h9.603v1.74h-7.67v4.974h7.273v1.719h-7.273v5.328h7.67V81h-9.603Z" />
+          </g>
+          <g filter="url(#f)">
+            <rect width="34.1" height="42" x="120.3" y="52" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M132.258 81V65.499h5.812c2.986 0 4.941 1.826 4.941 4.62v.02c0 2.15-1.182 3.814-3.115 4.426L143.484 81h-2.267l-3.319-6.134h-3.706V81h-1.934Zm1.934-7.842h3.706c1.987 0 3.115-1.074 3.115-2.975v-.022c0-1.847-1.214-2.943-3.201-2.943h-3.62v5.94Z"
+            />
+          </g>
+          <g filter="url(#g)">
+            <rect width="34.1" height="42" x="159.4" y="52" fill="#434343" rx="4.6" />
+            <path fill="#fff" d="M175.483 81V67.24h-4.887v-1.741h11.709v1.74h-4.888V81h-1.934Z" />
+          </g>
+          <g filter="url(#h)">
+            <rect width="34.1" height="42" x="198.5" y="52" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M214.583 81v-6.67l-5.5-8.831h2.202l4.233 6.961h.064l4.233-6.961h2.202l-5.5 8.83V81h-1.934Z"
+            />
+          </g>
+          <g filter="url(#i)">
+            <rect width="34.1" height="42" x="237.6" y="52" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M254.661 81.258c-3.846 0-6.166-2.32-6.166-5.694V65.5h1.933v9.937c0 2.384 1.547 4.039 4.233 4.039 2.685 0 4.211-1.655 4.211-4.04V65.5h1.933v10.066c0 3.373-2.299 5.693-6.144 5.693Z"
+            />
+          </g>
+          <g filter="url(#j)">
+            <rect width="34.1" height="42" x="276.7" y="52" fill="#434343" rx="4.6" />
+            <path fill="#fff" d="M292.783 81V65.499h1.934V81h-1.934Z" />
+          </g>
+          <g filter="url(#k)">
+            <rect width="34.1" height="42" x="315.8" y="52" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M332.861 81.258c-4.405 0-7.155-3.083-7.155-8.003v-.022c0-4.909 2.761-7.992 7.155-7.992 4.383 0 7.133 3.083 7.133 7.992v.022c0 4.92-2.74 8.003-7.133 8.003Zm0-1.783c3.19 0 5.156-2.439 5.156-6.22v-.022c0-3.802-1.998-6.209-5.156-6.209-3.169 0-5.178 2.396-5.178 6.21v.02c0 3.814 1.998 6.22 5.178 6.22Z"
+            />
+          </g>
+          <g filter="url(#l)">
+            <rect width="34.1" height="42" x="354.9" y="52" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M367.095 81V65.499h5.521c2.911 0 4.974 2.009 4.974 4.952v.022c0 2.943-2.063 4.995-4.974 4.995h-3.588V81h-1.933Zm5.027-13.782h-3.094v6.531h3.094c2.213 0 3.491-1.214 3.491-3.255v-.021c0-2.041-1.278-3.255-3.491-3.255Z"
+            />
+          </g>
+          <g filter="url(#m)">
+            <rect width="34.444" height="42" x="21" y="106" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="m31.498 135 5.768-15.501h1.912L44.936 135h-2.03l-1.569-4.437h-6.24L33.526 135h-2.03Zm6.703-13.181-2.514 7.101h5.07l-2.513-7.101H38.2Z"
+            />
+          </g>
+          <g filter="url(#n)">
+            <rect width="34.444" height="42" x="60.444" y="106" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M77.71 135.258c-3.352 0-5.618-1.644-5.812-4.297l-.01-.15h1.933l.022.15c.225 1.558 1.729 2.514 3.974 2.514 2.234 0 3.642-1.01 3.642-2.611v-.01c0-1.365-.892-2.127-3.019-2.6l-1.719-.376c-3.029-.666-4.447-2.03-4.447-4.297v-.011c.01-2.546 2.267-4.329 5.457-4.329 3.03 0 5.242 1.751 5.414 4.286l.01.161h-1.933l-.021-.15c-.236-1.579-1.558-2.514-3.524-2.514-2.073.011-3.426.999-3.426 2.493v.01c0 1.268.934 2.063 2.954 2.503l1.719.376c3.18.698 4.511 1.988 4.511 4.351v.011c0 2.75-2.18 4.49-5.725 4.49Z"
+            />
+          </g>
+          <g filter="url(#o)">
+            <rect width="34.444" height="42" x="99.889" y="106" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M111.149 135v-15.501h5.21c4.587 0 7.316 2.857 7.316 7.724v.021c0 4.888-2.707 7.756-7.316 7.756h-5.21Zm1.934-1.74h3.147c3.513 0 5.468-2.149 5.468-5.994v-.022c0-3.867-1.955-6.005-5.468-6.005h-3.147v12.021Z"
+            />
+          </g>
+          <g filter="url(#p)">
+            <rect width="34.444" height="42" x="139.333" y="106" fill="#434343" rx="4.6" />
+            <path fill="#fff" d="M152.248 135v-15.501h9.41v1.74h-7.476v5.328h6.864v1.719h-6.864V135h-1.934Z" />
+          </g>
+          <g filter="url(#q)">
+            <rect width="34.444" height="42" x="178.778" y="106" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M196.226 135.258c-4.33 0-7.101-3.148-7.101-8.089v-.011c0-4.845 2.771-7.917 7.101-7.917 3.566 0 5.704 2.052 6.423 4.791l.054.204h-2.03l-.043-.118c-.72-1.966-2.224-3.094-4.404-3.094-3.191 0-5.124 2.31-5.124 6.134v.011c0 3.899 1.965 6.306 5.124 6.306 2.75 0 4.64-1.784 4.64-4.383v-.28h-4.372v-1.697h6.306v1.472c0 4.189-2.439 6.671-6.574 6.671Z"
+            />
+          </g>
+          <g filter="url(#r)">
+            <rect width="34.444" height="42" x="218.222" y="106" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M229.257 135v-15.501h1.934v6.703h8.507v-6.703h1.934V135h-1.934v-7.058h-8.507V135h-1.934Z"
+            />
+          </g>
+          <g filter="url(#s)">
+            <rect width="34.444" height="42" x="257.667" y="106" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M274.266 135.258c-2.686 0-4.2-1.665-4.362-3.889l-.01-.15h1.933l.011.107c.118 1.171.881 2.149 2.417 2.149 1.719 0 2.643-1.021 2.643-2.912v-11.064h1.933v11.086c0 2.933-1.697 4.673-4.565 4.673Z"
+            />
+          </g>
+          <g filter="url(#t)">
+            <rect width="34.444" height="42" x="297.111" y="106" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M309.231 135v-15.501h1.933v7.605h.065l6.574-7.605h2.428l-6.059 6.864L320.8 135h-2.471l-5.51-7.24-1.655 1.815V135h-1.933Z"
+            />
+          </g>
+          <g filter="url(#u)">
+            <rect width="34.444" height="42" x="336.556" y="106" fill="#434343" rx="4.6" />
+            <path fill="#fff" d="M349.513 135v-15.501h1.934v13.761h7.476V135h-9.41Z" />
+          </g>
+          <g filter="url(#v)">
+            <rect width="42" height="42" x="3" y="160" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M21.586 188.562c-1.094 0-1.68-.64-1.68-1.671v-3.5h-3.18c-.632 0-1.132-.391-1.132-.985 0-.367.164-.625.469-.922l6.968-6.945c.297-.305.617-.477.961-.477.352 0 .664.172.969.477l6.969 6.945c.28.282.468.555.468.922 0 .594-.5.985-1.14.985h-3.172v3.5c0 1.031-.586 1.671-1.68 1.671h-4.82Z"
+            />
+          </g>
+          <g filter="url(#w)">
+            <rect width="34.857" height="42" x="59" y="160" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M70.692 189v-1.375l8.863-12.343v-.043h-8.562v-1.74h10.979v1.375l-8.82 12.343v.043h9.002V189H70.692Z"
+            />
+          </g>
+          <g filter="url(#x)">
+            <rect width="34.857" height="42" x="98.857" y="160" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="m109.787 189 5.285-7.788v-.043l-5.221-7.67h2.331l4.147 6.241h.064l4.19-6.241h2.202l-5.361 7.767v.043l5.243 7.691h-2.321l-4.125-6.188h-.064L111.978 189h-2.191Z"
+            />
+          </g>
+          <g filter="url(#y)">
+            <rect width="34.857" height="42" x="138.714" y="160" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M156.573 189.258c-4.308 0-7.08-3.137-7.08-8.014v-.011c0-4.877 2.761-7.992 7.08-7.992 3.222 0 5.725 1.955 6.316 4.888l.021.107h-1.955l-.075-.236c-.601-1.88-2.127-2.976-4.307-2.976-3.094 0-5.092 2.439-5.092 6.209v.011c0 3.771 2.009 6.231 5.092 6.231 2.169 0 3.673-1.075 4.35-3.116l.032-.096h1.955l-.021.107c-.591 2.965-3.072 4.888-6.316 4.888Z"
+            />
+          </g>
+          <g filter="url(#z)">
+            <rect width="34.857" height="42" x="178.571" y="160" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="m195.044 189-5.715-15.501h2.03l4.619 13.181h.043l4.62-13.181h2.03L196.956 189h-1.912Z"
+            />
+          </g>
+          <g filter="url(#A)">
+            <rect width="34.857" height="42" x="218.429" y="160" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M230.712 189v-15.501h5.876c2.653 0 4.447 1.547 4.447 3.867v.022c0 1.6-1.203 3.158-2.804 3.383v.043c2.235.258 3.588 1.762 3.588 3.814v.021c0 2.729-1.955 4.351-5.253 4.351h-5.854Zm5.435-13.793h-3.502v4.974h2.901c2.288 0 3.534-.913 3.534-2.589v-.022c0-1.525-1.064-2.363-2.933-2.363Zm-.054 6.639h-3.448v5.446h3.631c2.32 0 3.556-.935 3.556-2.718v-.021c0-1.794-1.268-2.707-3.739-2.707Z"
+            />
+          </g>
+          <g filter="url(#B)">
+            <rect width="34.857" height="42" x="258.286" y="160" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M269.527 189v-15.501h1.88l8.529 12.235h.054v-12.235h1.912V189h-1.88l-8.529-12.235h-.054V189h-1.912Z"
+            />
+          </g>
+          <g filter="url(#C)">
+            <rect width="34.857" height="42" x="298.143" y="160" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M307.934 189v-15.501h2.234l5.371 13.063h.065l5.371-13.063h2.234V189h-1.805v-11.978h-.064L316.388 189h-1.633l-4.952-11.978h-.065V189h-1.804Z"
+            />
+          </g>
+          <g filter="url(#D)">
+            <rect width="42" height="42" x="347" y="160" fill="#202020" rx="4.6" />
+            <path
+              fill="#fff"
+              d="m373.812 188.562-6.781-.007c-.914 0-1.695-.282-2.343-.953l-4.61-4.758c-.516-.524-.742-1-.742-1.485 0-.492.234-.961.742-1.484l4.602-4.781c.64-.68 1.429-.914 2.343-.914h6.789c1.633 0 2.454.804 2.454 2.422v9.539c0 1.617-.821 2.421-2.454 2.421Zm-.015-1.257c.781 0 1.211-.414 1.211-1.227v-9.414c0-.812-.43-1.226-1.211-1.226H367c-.586 0-.969.101-1.375.515l-4.57 4.742c-.258.274-.344.461-.344.664 0 .196.078.383.344.657l4.578 4.726c.414.422.781.563 1.375.563h6.789Zm-7.227-2.633a.634.634 0 0 1-.625-.633c0-.172.063-.328.188-.437l2.219-2.227-2.219-2.227a.578.578 0 0 1-.188-.437c0-.352.282-.617.625-.617.172 0 .313.054.43.179l2.234 2.227 2.243-2.234a.584.584 0 0 1 .437-.188c.344 0 .625.274.625.625a.605.605 0 0 1-.187.438l-2.227 2.234 2.219 2.219a.612.612 0 0 1 .187.445.633.633 0 0 1-.625.633.639.639 0 0 1-.453-.195l-2.219-2.227-2.218 2.227a.606.606 0 0 1-.446.195Z"
+            />
+          </g>
+          <g filter="url(#E)">
+            <rect width="87" height="42" x="3" y="214" fill="#202020" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M36.96 241v-9.711h-.124l-2.867 2.078v-1.484l3-2.156h1.398V241h-1.406Zm4.665 0v-.969l3.813-4.125c1.437-1.554 1.859-2.14 1.859-3.125v-.015c0-1.188-.805-2.078-2.133-2.078-1.352 0-2.25.882-2.25 2.21l-.008.016-1.343-.008-.016-.008c.008-2 1.555-3.437 3.71-3.437 1.97 0 3.477 1.336 3.477 3.156v.016c0 1.289-.554 2.226-2.593 4.328l-2.563 2.648v.125h5.344V241h-7.297Zm13.492.188c-2.328 0-3.836-1.297-3.984-3.079l-.008-.093h1.352l.007.078c.11 1.109 1.133 1.875 2.633 1.875 1.477 0 2.485-.828 2.485-2.024v-.015c0-1.383-.993-2.157-2.57-2.157h-1.415v-1.187h1.352c1.343 0 2.281-.828 2.281-1.953v-.016c0-1.179-.773-1.859-2.148-1.859-1.329 0-2.274.703-2.391 1.844l-.008.078h-1.351l.007-.078c.18-1.836 1.633-3.063 3.743-3.063 2.148 0 3.562 1.195 3.562 2.906v.016c0 1.391-.984 2.344-2.39 2.641v.031c1.64.14 2.757 1.164 2.757 2.765v.016c0 1.883-1.656 3.274-3.914 3.274Z"
+            />
+          </g>
+          <g filter="url(#F)">
+            <rect width="199" height="42" x="96" y="214" fill="#434343" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M177.125 241.148c-1.875 0-3.164-.906-3.32-2.296h1.39c.227.703.899 1.164 1.977 1.164 1.133 0 1.937-.539 1.937-1.305v-.016c0-.57-.429-.968-1.468-1.218l-1.305-.313c-1.578-.375-2.289-1.062-2.289-2.273v-.008c0-1.399 1.344-2.453 3.133-2.453 1.765 0 2.992.882 3.179 2.258h-1.336c-.179-.665-.835-1.126-1.851-1.126-1 0-1.734.516-1.734 1.258v.016c0 .57.421.93 1.414 1.172l1.296.312c1.586.383 2.352 1.071 2.352 2.274v.015c0 1.5-1.461 2.539-3.375 2.539Zm5.484 2.664v-11.234h1.36v1.344h.125c.515-.938 1.453-1.492 2.625-1.492 2.133 0 3.531 1.726 3.531 4.351v.016c0 2.641-1.391 4.351-3.531 4.351-1.157 0-2.164-.578-2.625-1.476h-.125v4.14h-1.36Zm3.797-3.867c1.539 0 2.453-1.187 2.453-3.148v-.016c0-1.961-.914-3.148-2.453-3.148-1.531 0-2.468 1.203-2.468 3.148v.016c0 1.945.937 3.148 2.468 3.148Zm8.282 1.203c-1.602 0-2.813-.968-2.813-2.5v-.015c0-1.5 1.109-2.367 3.07-2.485l2.414-.148v-.766c0-1.039-.632-1.601-1.89-1.601-1.008 0-1.672.375-1.891 1.031l-.008.024h-1.359l.008-.047c.219-1.321 1.5-2.211 3.297-2.211 2.054 0 3.203 1.054 3.203 2.804V241h-1.36v-1.242h-.125c-.531.898-1.414 1.39-2.546 1.39Zm-1.422-2.531c0 .852.726 1.352 1.703 1.352 1.383 0 2.39-.907 2.39-2.11v-.765l-2.25.14c-1.281.078-1.843.532-1.843 1.368v.015Zm11.382 2.531c-2.359 0-3.867-1.71-3.867-4.382v-.016c0-2.617 1.5-4.32 3.86-4.32 2.047 0 3.273 1.179 3.523 2.679l.008.047h-1.352l-.008-.023c-.21-.828-.96-1.5-2.171-1.5-1.516 0-2.469 1.219-2.469 3.117v.016c0 1.937.969 3.179 2.469 3.179 1.132 0 1.851-.5 2.164-1.437l.015-.047 1.344-.008-.016.086c-.343 1.523-1.476 2.609-3.5 2.609Zm8.946 0c-2.406 0-3.86-1.687-3.86-4.328v-.008c0-2.601 1.485-4.382 3.774-4.382 2.289 0 3.68 1.703 3.68 4.218v.532h-6.063c.039 1.742 1 2.758 2.5 2.758 1.141 0 1.844-.54 2.07-1.047l.032-.071h1.359l-.016.063c-.289 1.14-1.492 2.265-3.476 2.265Zm-.094-7.507c-1.25 0-2.203.851-2.352 2.453h4.657c-.141-1.664-1.063-2.453-2.305-2.453Z"
+            />
+          </g>
+          <g filter="url(#G)">
+            <rect width="88" height="42" x="301" y="214" fill="#202020" rx="4.6" />
+            <path
+              fill="#fff"
+              d="M340.406 241.266c-3.117 0-5.109-2.297-5.109-5.899v-.015c0-3.555 2.023-5.891 5.109-5.891 2.5 0 4.258 1.406 4.703 3.547l.016.078h-1.422l-.023-.078c-.461-1.453-1.594-2.25-3.274-2.25-2.234 0-3.672 1.797-3.672 4.594v.015c0 2.836 1.414 4.602 3.68 4.602 2.016 0 3.375-1.289 3.375-3.196v-.273h-3.164v-1.234h4.57v1.375c0 2.781-1.906 4.625-4.789 4.625Zm10.571-.118c-2.399 0-3.883-1.656-3.883-4.351v-.016c0-2.703 1.484-4.351 3.883-4.351 2.398 0 3.882 1.648 3.882 4.351v.016c0 2.695-1.484 4.351-3.882 4.351Zm0-1.203c1.593 0 2.492-1.164 2.492-3.148v-.016c0-1.992-.899-3.148-2.492-3.148-1.594 0-2.493 1.156-2.493 3.148v.016c0 1.984.899 3.148 2.493 3.148Z"
+            />
+          </g>
+        </g>
+        <g filter="url(#H)">
+          <path fill="#202020" fillOpacity="1" d="M0 264h392v71H0z" />
+          <path
+            fill="#E7E7E7"
+            d="M43.5 309.783c-7.071 0-12.95-5.878-12.95-12.949 0-7.084 5.866-12.949 12.937-12.949 7.084 0 12.962 5.865 12.962 12.949 0 7.071-5.865 12.949-12.949 12.949Zm0-2.158a10.75 10.75 0 0 0 10.791-10.791 10.76 10.76 0 0 0-10.804-10.791c-5.992 0-10.765 4.799-10.765 10.791A10.739 10.739 0 0 0 43.5 307.625Zm-3.77-11.921c-.8 0-1.499-.724-1.499-1.739 0-1.028.699-1.752 1.498-1.752.813 0 1.511.724 1.511 1.752 0 1.015-.71 1.739-1.51 1.739Zm7.528 0c-.8 0-1.498-.724-1.498-1.739 0-1.028.698-1.752 1.498-1.752.812 0 1.51.724 1.51 1.752 0 1.015-.71 1.739-1.51 1.739Zm-3.77 7.49c-2.654 0-4.431-1.764-4.431-2.602 0-.305.292-.445.57-.318.915.496 2.02 1.08 3.86 1.08 1.841 0 2.946-.572 3.872-1.08.267-.127.559.013.559.318 0 .838-1.777 2.602-4.43 2.602ZM348.5 300.16c-2.539 0-4.24-1.891-4.24-4.596v-8.493c0-2.717 1.701-4.595 4.24-4.595 2.526 0 4.228 1.878 4.228 4.595v8.493c0 2.705-1.702 4.596-4.228 4.596Zm-9.09-4.392v-2.578c0-.533.419-.952.952-.952.546 0 .965.419.965.952v2.501c0 4.33 2.819 7.199 7.173 7.199 4.342 0 7.16-2.869 7.16-7.199v-2.501c0-.533.432-.952.965-.952.533 0 .952.419.952.952v2.578c0 4.976-3.275 8.467-8.125 8.874v2.958h4.71c.533 0 .965.431.965.964a.954.954 0 0 1-.965.953h-11.337a.954.954 0 0 1-.965-.953c0-.533.432-.964.965-.964h4.71v-2.958c-4.837-.407-8.125-3.898-8.125-8.874Z"
+          />
+          <rect width="134" height="5" x="129" y="321" fill="#fff" rx="2.5" />
+        </g>
+      </g>
+      <defs>
+        <filter
+          id="a"
+          width="432"
+          height="84"
+          x="-20"
+          y="-20"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="10" />
+          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_backgroundBlur_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="b"
+          width="432"
+          height="260"
+          x="-20"
+          y="24"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="10" />
+          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_backgroundBlur_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="c"
+          width="34.1"
+          height="43"
+          x="3"
+          y="52"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="d"
+          width="34.1"
+          height="43"
+          x="42.1"
+          y="52"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="e"
+          width="34.1"
+          height="43"
+          x="81.2"
+          y="52"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="f"
+          width="34.1"
+          height="43"
+          x="120.3"
+          y="52"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="g"
+          width="34.1"
+          height="43"
+          x="159.4"
+          y="52"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="h"
+          width="34.1"
+          height="43"
+          x="198.5"
+          y="52"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="i"
+          width="34.1"
+          height="43"
+          x="237.6"
+          y="52"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="j"
+          width="34.1"
+          height="43"
+          x="276.7"
+          y="52"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="k"
+          width="34.1"
+          height="43"
+          x="315.8"
+          y="52"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="l"
+          width="34.1"
+          height="43"
+          x="354.9"
+          y="52"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="m"
+          width="34.444"
+          height="43"
+          x="21"
+          y="106"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="n"
+          width="34.444"
+          height="43"
+          x="60.444"
+          y="106"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="o"
+          width="34.444"
+          height="43"
+          x="99.889"
+          y="106"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="p"
+          width="34.444"
+          height="43"
+          x="139.333"
+          y="106"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="q"
+          width="34.444"
+          height="43"
+          x="178.778"
+          y="106"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="r"
+          width="34.444"
+          height="43"
+          x="218.222"
+          y="106"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="s"
+          width="34.444"
+          height="43"
+          x="257.667"
+          y="106"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="t"
+          width="34.444"
+          height="43"
+          x="297.111"
+          y="106"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="u"
+          width="34.444"
+          height="43"
+          x="336.556"
+          y="106"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="v"
+          width="42"
+          height="43"
+          x="3"
+          y="160"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="w"
+          width="34.857"
+          height="43"
+          x="59"
+          y="160"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="x"
+          width="34.857"
+          height="43"
+          x="98.857"
+          y="160"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="y"
+          width="34.857"
+          height="43"
+          x="138.714"
+          y="160"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="z"
+          width="34.857"
+          height="43"
+          x="178.571"
+          y="160"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="A"
+          width="34.857"
+          height="43"
+          x="218.429"
+          y="160"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="B"
+          width="34.857"
+          height="43"
+          x="258.286"
+          y="160"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="C"
+          width="34.857"
+          height="43"
+          x="298.143"
+          y="160"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="D"
+          width="42"
+          height="43"
+          x="347"
+          y="160"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="E"
+          width="87"
+          height="43"
+          x="3"
+          y="214"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="F"
+          width="199"
+          height="43"
+          x="96"
+          y="214"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="G"
+          width="88"
+          height="43"
+          x="301"
+          y="214"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4255_90748" result="shape" />
+        </filter>
+        <filter
+          id="H"
+          width="432"
+          height="111"
+          x="-20"
+          y="244"
+          colorInterpolationFilters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood floodOpacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="10" />
+          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4255_90748" />
+          <feBlend in="SourceGraphic" in2="effect1_backgroundBlur_4255_90748" result="shape" />
+        </filter>
+      </defs>
+    </svg>
+  ) : (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 392 335" {...rest}>
+      <g filter="url(#a)">
+        <path fill="#EDF0F2" d="M0 0h392v44H0z" />
+        <path
+          fill="#3A3B3D"
+          d="M37.025 33.282c-2.623 0-4.316-1.378-4.49-3.328l-.009-.092h1.494l.008.092c.108 1.195 1.354 1.95 3.08 1.95 1.627 0 2.814-.838 2.814-2.058v-.009c0-.996-.689-1.676-2.332-2.042l-1.329-.29c-2.399-.531-3.436-1.635-3.436-3.37v-.009c.008-1.983 1.743-3.386 4.217-3.386 2.39 0 4.059 1.41 4.183 3.196l.009.116h-1.495l-.016-.108c-.166-1.054-1.162-1.835-2.723-1.826-1.494.008-2.648.713-2.648 1.967v.008c0 .955.656 1.602 2.283 1.96l1.328.298c2.499.556 3.486 1.56 3.486 3.287v.008c0 2.242-1.751 3.636-4.424 3.636Zm9.729-.124c-2.034 0-3.08-1.196-3.08-3.312v-5.794h1.444v5.445c0 1.61.581 2.382 2.01 2.382 1.576 0 2.415-.963 2.415-2.531v-5.296h1.444V33h-1.444v-1.336h-.133c-.44.954-1.345 1.494-2.656 1.494Zm10.616 2.996c-2.158 0-3.536-.97-3.76-2.44l.017-.008h1.494l.008.008c.158.68.955 1.162 2.241 1.162 1.602 0 2.557-.755 2.557-2.075v-1.81h-.133c-.564.988-1.577 1.544-2.806 1.544-2.316 0-3.752-1.793-3.752-4.3v-.016c0-2.507 1.445-4.325 3.786-4.325 1.261 0 2.24.623 2.789 1.635h.1v-1.477h1.444v8.824c0 2-1.544 3.278-3.985 3.278Zm-.066-4.897c1.66 0 2.656-1.245 2.656-3.022v-.016c0-1.777-1.004-3.047-2.656-3.047-1.66 0-2.59 1.27-2.59 3.047v.016c0 1.777.93 3.022 2.59 3.022Zm10.426 4.897c-2.159 0-3.537-.97-3.76-2.44l.016-.008h1.494l.008.008c.158.68.955 1.162 2.242 1.162 1.602 0 2.556-.755 2.556-2.075v-1.81h-.133c-.564.988-1.577 1.544-2.805 1.544-2.316 0-3.752-1.793-3.752-4.3v-.016c0-2.507 1.444-4.325 3.785-4.325 1.262 0 2.241.623 2.79 1.635h.099v-1.477h1.444v8.824c0 2-1.544 3.278-3.984 3.278Zm-.067-4.897c1.66 0 2.657-1.245 2.657-3.022v-.016c0-1.777-1.005-3.047-2.657-3.047-1.66 0-2.59 1.27-2.59 3.047v.016c0 1.777.93 3.022 2.59 3.022Zm10.393 1.9c-2.557 0-4.1-1.792-4.1-4.598v-.008c0-2.764 1.576-4.657 4.008-4.657 2.433 0 3.91 1.81 3.91 4.483v.564h-6.441c.041 1.851 1.062 2.93 2.656 2.93 1.212 0 1.959-.573 2.2-1.112l.033-.075h1.444l-.016.066c-.307 1.212-1.586 2.408-3.694 2.408Zm-.1-7.976c-1.328 0-2.34.904-2.498 2.606h4.947c-.15-1.768-1.129-2.606-2.449-2.606Zm9.23 7.977c-1.992 0-3.361-.963-3.527-2.44h1.477c.241.746.955 1.236 2.1 1.236 1.204 0 2.06-.573 2.06-1.386v-.017c0-.606-.458-1.029-1.562-1.295l-1.386-.332c-1.676-.398-2.432-1.129-2.432-2.415V26.5c0-1.485 1.428-2.606 3.329-2.606 1.876 0 3.179.938 3.378 2.399h-1.42c-.19-.706-.887-1.195-1.966-1.195-1.063 0-1.843.547-1.843 1.336v.017c0 .606.448.988 1.502 1.245l1.378.332c1.685.407 2.499 1.137 2.499 2.415v.017c0 1.594-1.553 2.698-3.586 2.698Zm8.924-.092c-1.843 0-2.615-.68-2.615-2.39v-5.429h-1.41v-1.195h1.41v-2.316h1.494v2.316h1.96v1.195h-1.96v5.064c0 1.054.366 1.477 1.295 1.477.258 0 .399-.008.664-.033v1.228c-.282.05-.556.083-.838.083Z"
+          opacity=".4"
+        />
+        <path stroke="#000" stroke-linecap="square" stroke-opacity=".1" d="M130.333 15v24" opacity=".4" />
+        <path
+          fill="#3A3B3D"
+          d="M168.358 33.282c-2.623 0-4.316-1.378-4.49-3.328l-.009-.092h1.495l.008.092c.108 1.195 1.353 1.95 3.079 1.95 1.627 0 2.814-.838 2.814-2.058v-.009c0-.996-.689-1.676-2.332-2.042l-1.328-.29c-2.399-.531-3.437-1.635-3.437-3.37v-.009c.009-1.983 1.743-3.386 4.217-3.386 2.391 0 4.059 1.41 4.184 3.196l.008.116h-1.494l-.017-.108c-.166-1.054-1.162-1.835-2.722-1.826-1.495.008-2.648.713-2.648 1.967v.008c0 .955.655 1.602 2.282 1.96l1.328.298c2.499.556 3.487 1.56 3.487 3.287v.008c0 2.242-1.752 3.636-4.425 3.636Zm9.729-.124c-2.034 0-3.08-1.196-3.08-3.312v-5.794h1.445v5.445c0 1.61.581 2.382 2.008 2.382 1.578 0 2.416-.963 2.416-2.531v-5.296h1.444V33h-1.444v-1.336h-.133c-.44.954-1.345 1.494-2.656 1.494Zm10.617 2.996c-2.159 0-3.536-.97-3.761-2.44l.017-.008h1.494l.008.008c.158.68.955 1.162 2.242 1.162 1.602 0 2.556-.755 2.556-2.075v-1.81h-.133c-.564.988-1.577 1.544-2.805 1.544-2.316 0-3.752-1.793-3.752-4.3v-.016c0-2.507 1.444-4.325 3.785-4.325 1.262 0 2.241.623 2.789 1.635h.1v-1.477h1.444v8.824c0 2-1.544 3.278-3.984 3.278Zm-.067-4.897c1.66 0 2.656-1.245 2.656-3.022v-.016c0-1.777-1.004-3.047-2.656-3.047-1.66 0-2.59 1.27-2.59 3.047v.016c0 1.777.93 3.022 2.59 3.022Zm10.426 4.897c-2.158 0-3.536-.97-3.76-2.44l.016-.008h1.495l.008.008c.158.68.954 1.162 2.241 1.162 1.602 0 2.557-.755 2.557-2.075v-1.81h-.133c-.565.988-1.577 1.544-2.806 1.544-2.316 0-3.752-1.793-3.752-4.3v-.016c0-2.507 1.445-4.325 3.785-4.325 1.262 0 2.242.623 2.789 1.635h.1v-1.477h1.444v8.824c0 2-1.544 3.278-3.984 3.278Zm-.066-4.897c1.66 0 2.656-1.245 2.656-3.022v-.016c0-1.777-1.005-3.047-2.656-3.047-1.661 0-2.59 1.27-2.59 3.047v.016c0 1.777.929 3.022 2.59 3.022Zm10.392 1.9c-2.556 0-4.1-1.792-4.1-4.598v-.008c0-2.764 1.577-4.657 4.009-4.657 2.432 0 3.91 1.81 3.91 4.483v.564h-6.442c.042 1.851 1.063 2.93 2.656 2.93 1.212 0 1.959-.573 2.2-1.112l.033-.075h1.445l-.017.066c-.307 1.212-1.585 2.408-3.694 2.408Zm-.099-7.976c-1.329 0-2.341.904-2.499 2.606h4.947c-.149-1.768-1.129-2.606-2.448-2.606Zm9.23 7.977c-1.992 0-3.362-.963-3.528-2.44h1.478c.24.746.954 1.236 2.1 1.236 1.203 0 2.058-.573 2.058-1.386v-.017c0-.606-.456-1.029-1.56-1.295l-1.386-.332c-1.677-.398-2.432-1.129-2.432-2.415V26.5c0-1.485 1.427-2.606 3.328-2.606 1.876 0 3.179.938 3.379 2.399h-1.42c-.191-.706-.888-1.195-1.967-1.195-1.063 0-1.843.547-1.843 1.336v.017c0 .606.448.988 1.503 1.245l1.377.332c1.686.407 2.499 1.137 2.499 2.415v.017c0 1.594-1.552 2.698-3.586 2.698Zm8.923-.092c-1.842 0-2.614-.68-2.614-2.39v-5.429h-1.411v-1.195h1.411v-2.316h1.494v2.316h1.959v1.195h-1.959v5.064c0 1.054.365 1.477 1.295 1.477.257 0 .398-.008.664-.033v1.228a4.78 4.78 0 0 1-.839.083Z"
+          opacity=".4"
+        />
+        <path stroke="#000" stroke-linecap="square" stroke-opacity=".1" d="M261.667 15v24" />
+        <path
+          fill="#3A3B3D"
+          d="M299.692 33.282c-2.623 0-4.317-1.378-4.491-3.328l-.008-.092h1.494l.008.092c.108 1.195 1.353 1.95 3.08 1.95 1.627 0 2.814-.838 2.814-2.058v-.009c0-.996-.689-1.676-2.333-2.042l-1.328-.29c-2.399-.531-3.436-1.635-3.436-3.37v-.009c.008-1.983 1.743-3.386 4.216-3.386 2.391 0 4.059 1.41 4.184 3.196l.008.116h-1.494l-.016-.108c-.166-1.054-1.163-1.835-2.723-1.826-1.494.008-2.648.713-2.648 1.967v.008c0 .955.656 1.602 2.283 1.96l1.328.298c2.498.556 3.486 1.56 3.486 3.287v.008c0 2.242-1.751 3.636-4.424 3.636Zm9.728-.124c-2.033 0-3.079-1.196-3.079-3.312v-5.794h1.444v5.445c0 1.61.581 2.382 2.009 2.382 1.577 0 2.415-.963 2.415-2.531v-5.296h1.445V33h-1.445v-1.336h-.132c-.44.954-1.345 1.494-2.657 1.494Zm10.617 2.996c-2.158 0-3.536-.97-3.76-2.44l.016-.008h1.495l.008.008c.158.68.954 1.162 2.241 1.162 1.602 0 2.557-.755 2.557-2.075v-1.81h-.133c-.565.988-1.577 1.544-2.806 1.544-2.316 0-3.752-1.793-3.752-4.3v-.016c0-2.507 1.445-4.325 3.785-4.325 1.262 0 2.242.623 2.789 1.635h.1v-1.477h1.444v8.824c0 2-1.544 3.278-3.984 3.278Zm-.066-4.897c1.66 0 2.656-1.245 2.656-3.022v-.016c0-1.777-1.005-3.047-2.656-3.047-1.661 0-2.59 1.27-2.59 3.047v.016c0 1.777.929 3.022 2.59 3.022Zm10.425 4.897c-2.158 0-3.536-.97-3.76-2.44l.017-.008h1.494l.008.008c.158.68.955 1.162 2.241 1.162 1.602 0 2.557-.755 2.557-2.075v-1.81h-.133c-.564.988-1.577 1.544-2.805 1.544-2.316 0-3.752-1.793-3.752-4.3v-.016c0-2.507 1.444-4.325 3.785-4.325 1.261 0 2.241.623 2.789 1.635h.099v-1.477h1.445v8.824c0 2-1.544 3.278-3.985 3.278Zm-.066-4.897c1.66 0 2.656-1.245 2.656-3.022v-.016c0-1.777-1.004-3.047-2.656-3.047-1.66 0-2.59 1.27-2.59 3.047v.016c0 1.777.93 3.022 2.59 3.022Zm10.393 1.9c-2.557 0-4.101-1.792-4.101-4.598v-.008c0-2.764 1.577-4.657 4.009-4.657 2.432 0 3.91 1.81 3.91 4.483v.564H338.1c.041 1.851 1.062 2.93 2.656 2.93 1.212 0 1.959-.573 2.199-1.112l.034-.075h1.444l-.017.066c-.307 1.212-1.585 2.408-3.693 2.408Zm-.1-7.976c-1.328 0-2.341.904-2.499 2.606h4.948c-.15-1.768-1.129-2.606-2.449-2.606Zm9.23 7.977c-1.992 0-3.361-.963-3.527-2.44h1.477c.241.746.955 1.236 2.1 1.236 1.204 0 2.059-.573 2.059-1.386v-.017c0-.606-.457-1.029-1.561-1.295l-1.386-.332c-1.677-.398-2.432-1.129-2.432-2.415V26.5c0-1.485 1.428-2.606 3.329-2.606 1.876 0 3.179.938 3.378 2.399h-1.419c-.191-.706-.889-1.195-1.968-1.195-1.062 0-1.843.547-1.843 1.336v.017c0 .606.449.988 1.503 1.245l1.378.332c1.685.407 2.498 1.137 2.498 2.415v.017c0 1.594-1.552 2.698-3.586 2.698Zm8.924-.092c-1.843 0-2.615-.68-2.615-2.39v-5.429h-1.411v-1.195h1.411v-2.316h1.494v2.316h1.959v1.195h-1.959v5.064c0 1.054.365 1.477 1.295 1.477.257 0 .399-.008.664-.033v1.228c-.282.05-.556.083-.838.083Z"
+          opacity=".4"
+        />
+      </g>
+      <g filter="url(#b)">
+        <path fill="#EDF0F2" d="M0 44h392v220H0z" />
+        <g opacity=".4">
+          <g filter="url(#c)">
+            <rect width="34.1" height="42" x="3" y="52" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M20.06 81.258c-4.404 0-7.154-3.083-7.154-8.003v-.022c0-4.909 2.761-7.992 7.155-7.992 4.383 0 7.133 3.083 7.133 7.992v.022c0 3.008-1.021 5.317-2.815 6.67l2.052 2.826h-2.17l-1.429-1.977c-.827.323-1.762.484-2.771.484Zm0-1.783c.592 0 1.14-.086 1.644-.247l-1.944-2.664h2.17l1.321 1.815c1.246-1.064 1.955-2.858 1.955-5.124v-.022c0-3.802-1.987-6.209-5.145-6.209-3.17 0-5.167 2.396-5.167 6.21v.02c0 3.814 1.987 6.22 5.167 6.22Z"
+            />
+          </g>
+          <g filter="url(#d)">
+            <rect width="34.1" height="42" x="42.1" y="52" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M53.693 81 49.47 65.499h2.02l3.126 12.73h.043l3.512-12.73h1.956l3.512 12.73h.043l3.126-12.73h2.02L64.607 81h-1.826l-3.61-12.418h-.042L55.519 81h-1.826Z"
+            />
+          </g>
+          <g filter="url(#e)">
+            <rect width="34.1" height="42" x="81.2" y="52" fill="#fff" rx="4.6" />
+            <path fill="#000" d="M93.674 81V65.499h9.603v1.74h-7.67v4.974h7.273v1.719h-7.273v5.328h7.67V81h-9.603Z" />
+          </g>
+          <g filter="url(#f)">
+            <rect width="34.1" height="42" x="120.3" y="52" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M132.258 81V65.499h5.812c2.986 0 4.941 1.826 4.941 4.62v.02c0 2.15-1.181 3.814-3.115 4.426L143.484 81h-2.267l-3.319-6.134h-3.706V81h-1.934Zm1.934-7.842h3.706c1.987 0 3.115-1.074 3.115-2.975v-.022c0-1.847-1.214-2.943-3.201-2.943h-3.62v5.94Z"
+            />
+          </g>
+          <g filter="url(#g)">
+            <rect width="34.1" height="42" x="159.4" y="52" fill="#fff" rx="4.6" />
+            <path fill="#000" d="M175.483 81V67.24h-4.887v-1.741h11.709v1.74h-4.888V81h-1.934Z" />
+          </g>
+          <g filter="url(#h)">
+            <rect width="34.1" height="42" x="198.5" y="52" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M214.583 81v-6.67l-5.5-8.831h2.202l4.233 6.961h.064l4.233-6.961h2.202l-5.5 8.83V81h-1.934Z"
+            />
+          </g>
+          <g filter="url(#i)">
+            <rect width="34.1" height="42" x="237.6" y="52" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M254.661 81.258c-3.846 0-6.166-2.32-6.166-5.694V65.5h1.933v9.937c0 2.384 1.547 4.039 4.233 4.039 2.685 0 4.211-1.655 4.211-4.04V65.5h1.933v10.066c0 3.373-2.299 5.693-6.144 5.693Z"
+            />
+          </g>
+          <g filter="url(#j)">
+            <rect width="34.1" height="42" x="276.7" y="52" fill="#fff" rx="4.6" />
+            <path fill="#000" d="M292.783 81V65.499h1.934V81h-1.934Z" />
+          </g>
+          <g filter="url(#k)">
+            <rect width="34.1" height="42" x="315.8" y="52" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M332.861 81.258c-4.405 0-7.155-3.083-7.155-8.003v-.022c0-4.909 2.761-7.992 7.155-7.992 4.383 0 7.133 3.083 7.133 7.992v.022c0 4.92-2.74 8.003-7.133 8.003Zm0-1.783c3.19 0 5.156-2.439 5.156-6.22v-.022c0-3.802-1.998-6.209-5.156-6.209-3.169 0-5.178 2.396-5.178 6.21v.02c0 3.814 1.998 6.22 5.178 6.22Z"
+            />
+          </g>
+          <g filter="url(#l)">
+            <rect width="34.1" height="42" x="354.9" y="52" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M367.094 81V65.499h5.522c2.911 0 4.974 2.009 4.974 4.952v.022c0 2.943-2.063 4.995-4.974 4.995h-3.588V81h-1.934Zm5.028-13.782h-3.094v6.531h3.094c2.213 0 3.491-1.214 3.491-3.255v-.021c0-2.041-1.278-3.255-3.491-3.255Z"
+            />
+          </g>
+        </g>
+        <g opacity=".4">
+          <g filter="url(#m)">
+            <rect width="34.444" height="42" x="21" y="106" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="m31.498 135 5.768-15.501h1.912L44.936 135h-2.03l-1.569-4.437h-6.24L33.526 135h-2.03Zm6.703-13.181-2.514 7.101h5.07l-2.513-7.101H38.2Z"
+            />
+          </g>
+          <g filter="url(#n)">
+            <rect width="34.444" height="42" x="60.444" y="106" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M77.71 135.258c-3.352 0-5.618-1.644-5.812-4.297l-.01-.15h1.933l.022.15c.225 1.558 1.729 2.514 3.974 2.514 2.234 0 3.642-1.01 3.642-2.611v-.01c0-1.365-.892-2.127-3.019-2.6l-1.719-.376c-3.029-.666-4.447-2.03-4.447-4.297v-.011c.01-2.546 2.267-4.329 5.457-4.329 3.03 0 5.242 1.751 5.414 4.286l.01.161h-1.933l-.021-.15c-.236-1.579-1.558-2.514-3.524-2.514-2.073.011-3.426.999-3.426 2.493v.01c0 1.268.934 2.063 2.954 2.503l1.719.376c3.18.698 4.511 1.988 4.511 4.351v.011c0 2.75-2.18 4.49-5.725 4.49Z"
+            />
+          </g>
+          <g filter="url(#o)">
+            <rect width="34.444" height="42" x="99.889" y="106" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M111.149 135v-15.501h5.21c4.587 0 7.316 2.857 7.316 7.724v.021c0 4.888-2.707 7.756-7.316 7.756h-5.21Zm1.934-1.74h3.147c3.513 0 5.468-2.149 5.468-5.994v-.022c0-3.867-1.955-6.005-5.468-6.005h-3.147v12.021Z"
+            />
+          </g>
+          <g filter="url(#p)">
+            <rect width="34.444" height="42" x="139.333" y="106" fill="#fff" rx="4.6" />
+            <path fill="#000" d="M152.248 135v-15.501h9.41v1.74h-7.476v5.328h6.864v1.719h-6.864V135h-1.934Z" />
+          </g>
+          <g filter="url(#q)">
+            <rect width="34.444" height="42" x="178.778" y="106" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M196.226 135.258c-4.329 0-7.101-3.148-7.101-8.089v-.011c0-4.845 2.772-7.917 7.101-7.917 3.566 0 5.704 2.052 6.423 4.791l.054.204h-2.03l-.043-.118c-.72-1.966-2.224-3.094-4.404-3.094-3.191 0-5.124 2.31-5.124 6.134v.011c0 3.899 1.965 6.306 5.124 6.306 2.75 0 4.64-1.784 4.64-4.383v-.28h-4.372v-1.697h6.306v1.472c0 4.189-2.439 6.671-6.574 6.671Z"
+            />
+          </g>
+          <g filter="url(#r)">
+            <rect width="34.444" height="42" x="218.222" y="106" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M229.257 135v-15.501h1.933v6.703h8.508v-6.703h1.934V135h-1.934v-7.058h-8.508V135h-1.933Z"
+            />
+          </g>
+          <g filter="url(#s)">
+            <rect width="34.444" height="42" x="257.667" y="106" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M274.266 135.258c-2.686 0-4.2-1.665-4.362-3.889l-.01-.15h1.933l.011.107c.118 1.171.881 2.149 2.417 2.149 1.719 0 2.643-1.021 2.643-2.912v-11.064h1.933v11.086c0 2.933-1.697 4.673-4.565 4.673Z"
+            />
+          </g>
+          <g filter="url(#t)">
+            <rect width="34.444" height="42" x="297.111" y="106" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M309.231 135v-15.501h1.933v7.605h.065l6.574-7.605h2.428l-6.059 6.864L320.8 135h-2.471l-5.51-7.24-1.655 1.815V135h-1.933Z"
+            />
+          </g>
+          <g filter="url(#u)">
+            <rect width="34.444" height="42" x="336.556" y="106" fill="#fff" rx="4.6" />
+            <path fill="#000" d="M349.513 135v-15.501h1.934v13.761h7.476V135h-9.41Z" />
+          </g>
+        </g>
+        <g opacity=".4">
+          <g filter="url(#v)">
+            <rect width="42" height="42" x="3" y="160" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M21.586 188.562c-1.094 0-1.68-.64-1.68-1.671v-3.5h-3.18c-.632 0-1.132-.391-1.132-.985 0-.367.164-.625.469-.922l6.968-6.945c.297-.305.617-.477.961-.477.352 0 .664.172.969.477l6.969 6.945c.28.282.468.555.468.922 0 .594-.5.985-1.14.985h-3.172v3.5c0 1.031-.586 1.671-1.68 1.671h-4.82Z"
+            />
+          </g>
+          <g filter="url(#w)">
+            <rect width="34.857" height="42" x="59" y="160" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M70.692 189v-1.375l8.863-12.343v-.043h-8.562v-1.74h10.979v1.375l-8.82 12.343v.043h9.002V189H70.692Z"
+            />
+          </g>
+          <g filter="url(#x)">
+            <rect width="34.857" height="42" x="98.857" y="160" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="m109.787 189 5.285-7.788v-.043l-5.221-7.67h2.331l4.147 6.241h.064l4.19-6.241h2.202l-5.361 7.767v.043l5.243 7.691h-2.321l-4.125-6.188h-.064L111.978 189h-2.191Z"
+            />
+          </g>
+          <g filter="url(#y)">
+            <rect width="34.857" height="42" x="138.714" y="160" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M156.572 189.258c-4.307 0-7.079-3.137-7.079-8.014v-.011c0-4.877 2.761-7.992 7.079-7.992 3.223 0 5.726 1.955 6.317 4.888l.021.107h-1.955l-.075-.236c-.601-1.88-2.127-2.976-4.308-2.976-3.093 0-5.091 2.439-5.091 6.209v.011c0 3.771 2.008 6.231 5.091 6.231 2.17 0 3.674-1.075 4.351-3.116l.032-.096h1.955l-.021.107c-.591 2.965-3.072 4.888-6.317 4.888Z"
+            />
+          </g>
+          <g filter="url(#z)">
+            <rect width="34.857" height="42" x="178.571" y="160" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="m195.044 189-5.715-15.501h2.03l4.619 13.181h.043l4.62-13.181h2.03L196.956 189h-1.912Z"
+            />
+          </g>
+          <g filter="url(#A)">
+            <rect width="34.857" height="42" x="218.429" y="160" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M230.712 189v-15.501h5.876c2.653 0 4.447 1.547 4.447 3.867v.022c0 1.6-1.203 3.158-2.804 3.383v.043c2.235.258 3.588 1.762 3.588 3.814v.021c0 2.729-1.955 4.351-5.253 4.351h-5.854Zm5.435-13.793h-3.502v4.974h2.901c2.288 0 3.534-.913 3.534-2.589v-.022c0-1.525-1.064-2.363-2.933-2.363Zm-.054 6.639h-3.448v5.446h3.631c2.32 0 3.556-.935 3.556-2.718v-.021c0-1.794-1.268-2.707-3.739-2.707Z"
+            />
+          </g>
+          <g filter="url(#B)">
+            <rect width="34.857" height="42" x="258.286" y="160" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M269.527 189v-15.501h1.88l8.529 12.235h.054v-12.235h1.912V189h-1.88l-8.529-12.235h-.054V189h-1.912Z"
+            />
+          </g>
+          <g filter="url(#C)">
+            <rect width="34.857" height="42" x="298.143" y="160" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M307.934 189v-15.501h2.234l5.371 13.063h.065l5.371-13.063h2.234V189h-1.805v-11.978h-.064L316.388 189h-1.633l-4.952-11.978h-.065V189h-1.804Z"
+            />
+          </g>
+          <g filter="url(#D)">
+            <rect width="42" height="42" x="347" y="160" fill="#ADB3BC" rx="4.6" />
+            <path
+              fill="#000"
+              d="m373.812 188.562-6.781-.007c-.914 0-1.695-.282-2.343-.953l-4.61-4.758c-.516-.524-.742-1-.742-1.485 0-.492.234-.961.742-1.484l4.602-4.781c.64-.68 1.429-.914 2.343-.914h6.789c1.633 0 2.454.804 2.454 2.422v9.539c0 1.617-.821 2.421-2.454 2.421Zm-.015-1.257c.781 0 1.211-.414 1.211-1.227v-9.414c0-.812-.43-1.226-1.211-1.226H367c-.586 0-.969.101-1.375.515l-4.57 4.742c-.258.274-.344.461-.344.664 0 .196.078.383.344.657l4.578 4.726c.414.422.781.563 1.375.563h6.789Zm-7.227-2.633a.634.634 0 0 1-.625-.633c0-.172.063-.328.188-.437l2.219-2.227-2.219-2.227a.578.578 0 0 1-.188-.437c0-.352.282-.617.625-.617.172 0 .313.054.43.179l2.234 2.227 2.243-2.234a.584.584 0 0 1 .437-.188c.344 0 .625.274.625.625a.605.605 0 0 1-.187.438l-2.227 2.234 2.219 2.219a.612.612 0 0 1 .187.445.633.633 0 0 1-.625.633.639.639 0 0 1-.453-.195l-2.219-2.227-2.218 2.227a.606.606 0 0 1-.446.195Z"
+            />
+          </g>
+        </g>
+        <g opacity=".4">
+          <g filter="url(#E)">
+            <rect width="87" height="42" x="3" y="214" fill="#ADB3BC" rx="4.6" />
+            <path
+              fill="#000"
+              d="M36.96 241v-9.711h-.124l-2.867 2.078v-1.484l3-2.156h1.398V241h-1.406Zm4.665 0v-.969l3.813-4.125c1.437-1.554 1.859-2.14 1.859-3.125v-.015c0-1.188-.805-2.078-2.133-2.078-1.352 0-2.25.882-2.25 2.21l-.008.016-1.343-.008-.016-.008c.008-2 1.555-3.437 3.71-3.437 1.97 0 3.477 1.336 3.477 3.156v.016c0 1.289-.554 2.226-2.593 4.328l-2.563 2.648v.125h5.344V241h-7.297Zm13.492.188c-2.328 0-3.836-1.297-3.984-3.079l-.008-.093h1.352l.007.078c.11 1.109 1.133 1.875 2.633 1.875 1.477 0 2.485-.828 2.485-2.024v-.015c0-1.383-.993-2.157-2.57-2.157h-1.415v-1.187h1.352c1.343 0 2.281-.828 2.281-1.953v-.016c0-1.179-.773-1.859-2.148-1.859-1.329 0-2.274.703-2.391 1.844l-.008.078h-1.351l.007-.078c.18-1.836 1.633-3.063 3.743-3.063 2.148 0 3.562 1.195 3.562 2.906v.016c0 1.391-.984 2.344-2.39 2.641v.031c1.64.14 2.757 1.164 2.757 2.765v.016c0 1.883-1.656 3.274-3.914 3.274Z"
+            />
+          </g>
+          <g filter="url(#F)">
+            <rect width="199" height="42" x="96" y="214" fill="#fff" rx="4.6" />
+            <path
+              fill="#000"
+              d="M177.125 241.148c-1.875 0-3.164-.906-3.32-2.296h1.39c.227.703.899 1.164 1.977 1.164 1.133 0 1.937-.539 1.937-1.305v-.016c0-.57-.429-.968-1.468-1.218l-1.305-.313c-1.578-.375-2.289-1.062-2.289-2.273v-.008c0-1.399 1.344-2.453 3.133-2.453 1.765 0 2.992.882 3.179 2.258h-1.336c-.179-.665-.835-1.126-1.851-1.126-1 0-1.734.516-1.734 1.258v.016c0 .57.421.93 1.414 1.172l1.296.312c1.586.383 2.352 1.071 2.352 2.274v.015c0 1.5-1.461 2.539-3.375 2.539Zm5.484 2.664v-11.234h1.36v1.344h.125c.515-.938 1.453-1.492 2.625-1.492 2.133 0 3.531 1.726 3.531 4.351v.016c0 2.641-1.391 4.351-3.531 4.351-1.157 0-2.164-.578-2.625-1.476h-.125v4.14h-1.36Zm3.797-3.867c1.539 0 2.453-1.187 2.453-3.148v-.016c0-1.961-.914-3.148-2.453-3.148-1.531 0-2.468 1.203-2.468 3.148v.016c0 1.945.937 3.148 2.468 3.148Zm8.282 1.203c-1.602 0-2.813-.968-2.813-2.5v-.015c0-1.5 1.109-2.367 3.07-2.485l2.414-.148v-.766c0-1.039-.632-1.601-1.89-1.601-1.008 0-1.672.375-1.891 1.031l-.008.024h-1.359l.008-.047c.219-1.321 1.5-2.211 3.297-2.211 2.054 0 3.203 1.054 3.203 2.804V241h-1.36v-1.242h-.125c-.531.898-1.414 1.39-2.546 1.39Zm-1.422-2.531c0 .852.726 1.352 1.703 1.352 1.383 0 2.39-.907 2.39-2.11v-.765l-2.25.14c-1.281.078-1.843.532-1.843 1.368v.015Zm11.382 2.531c-2.359 0-3.867-1.71-3.867-4.382v-.016c0-2.617 1.5-4.32 3.86-4.32 2.047 0 3.273 1.179 3.523 2.679l.008.047h-1.352l-.008-.023c-.21-.828-.96-1.5-2.171-1.5-1.516 0-2.469 1.219-2.469 3.117v.016c0 1.937.969 3.179 2.469 3.179 1.132 0 1.851-.5 2.164-1.437l.015-.047 1.344-.008-.016.086c-.343 1.523-1.476 2.609-3.5 2.609Zm8.946 0c-2.406 0-3.86-1.687-3.86-4.328v-.008c0-2.601 1.485-4.382 3.774-4.382 2.289 0 3.68 1.703 3.68 4.218v.532h-6.063c.039 1.742 1 2.758 2.5 2.758 1.141 0 1.844-.54 2.07-1.047l.032-.071h1.359l-.016.063c-.289 1.14-1.492 2.265-3.476 2.265Zm-.094-7.507c-1.25 0-2.203.851-2.352 2.453h4.657c-.141-1.664-1.063-2.453-2.305-2.453Z"
+            />
+          </g>
+          <g filter="url(#G)">
+            <rect width="88" height="42" x="301" y="214" fill="#ADB3BC" rx="4.6" />
+            <path
+              fill="#000"
+              d="M340.406 241.266c-3.117 0-5.109-2.297-5.109-5.899v-.015c0-3.555 2.023-5.891 5.109-5.891 2.5 0 4.258 1.406 4.703 3.547l.016.078h-1.422l-.023-.078c-.461-1.453-1.594-2.25-3.274-2.25-2.234 0-3.672 1.797-3.672 4.594v.015c0 2.836 1.414 4.602 3.68 4.602 2.016 0 3.375-1.289 3.375-3.196v-.273h-3.164v-1.234h4.57v1.375c0 2.781-1.906 4.625-4.789 4.625Zm10.571-.118c-2.399 0-3.883-1.656-3.883-4.351v-.016c0-2.703 1.484-4.351 3.883-4.351 2.398 0 3.882 1.648 3.882 4.351v.016c0 2.695-1.484 4.351-3.882 4.351Zm0-1.203c1.593 0 2.492-1.164 2.492-3.148v-.016c0-1.992-.899-3.148-2.492-3.148-1.594 0-2.493 1.156-2.493 3.148v.016c0 1.984.899 3.148 2.493 3.148Z"
+            />
+          </g>
+        </g>
+      </g>
+      <g filter="url(#H)">
+        <path fill="#EDF0F2" d="M0 264h392v71H0z" />
+        <path
+          fill="#50555C"
+          d="M43.5 309.783c-7.071 0-12.95-5.878-12.95-12.949 0-7.084 5.866-12.949 12.937-12.949 7.084 0 12.962 5.865 12.962 12.949 0 7.071-5.865 12.949-12.949 12.949Zm0-2.158a10.75 10.75 0 0 0 10.791-10.791 10.76 10.76 0 0 0-10.804-10.791c-5.992 0-10.765 4.799-10.765 10.791A10.739 10.739 0 0 0 43.5 307.625Zm-3.77-11.921c-.8 0-1.499-.724-1.499-1.739 0-1.028.699-1.752 1.498-1.752.813 0 1.511.724 1.511 1.752 0 1.015-.71 1.739-1.51 1.739Zm7.528 0c-.8 0-1.498-.724-1.498-1.739 0-1.028.698-1.752 1.498-1.752.812 0 1.51.724 1.51 1.752 0 1.015-.71 1.739-1.51 1.739Zm-3.77 7.49c-2.654 0-4.431-1.764-4.431-2.602 0-.305.292-.445.57-.318.915.496 2.02 1.08 3.86 1.08 1.841 0 2.946-.572 3.872-1.08.267-.127.559.013.559.318 0 .838-1.777 2.602-4.43 2.602ZM343.879 295.311v-7.986c0-2.932 1.879-4.976 4.621-4.976 2.729 0 4.608 2.044 4.608 4.976v7.986c0 2.919-1.879 4.976-4.608 4.976-2.742 0-4.621-2.057-4.621-4.976Zm1.917 0c0 1.878 1.079 3.085 2.704 3.085 1.625 0 2.691-1.207 2.691-3.085v-7.986c0-1.879-1.066-3.085-2.691-3.085-1.625 0-2.704 1.206-2.704 3.085v7.986Zm-6.386.457v-2.578c0-.533.419-.952.952-.952.546 0 .965.419.965.952v2.501c0 4.33 2.819 7.199 7.173 7.199 4.342 0 7.16-2.869 7.16-7.199v-2.501c0-.533.432-.952.965-.952.533 0 .952.419.952.952v2.578c0 4.976-3.275 8.467-8.125 8.874v2.958h4.71c.533 0 .965.431.965.964a.954.954 0 0 1-.965.953h-11.337a.954.954 0 0 1-.965-.953c0-.533.432-.964.965-.964h4.71v-2.958c-4.837-.407-8.125-3.898-8.125-8.874Z"
+          opacity=".4"
+        />
+        <rect width="134" height="5" x="129" y="321" fill="#000" opacity=".4" rx="2.5" />
+      </g>
+      <defs>
+        <filter
+          id="a"
+          width="432"
+          height="84"
+          x="-20"
+          y="-20"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="10" />
+          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_backgroundBlur_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="b"
+          width="432"
+          height="260"
+          x="-20"
+          y="24"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="10" />
+          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_backgroundBlur_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="c"
+          width="34.1"
+          height="43"
+          x="3"
+          y="52"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="d"
+          width="34.1"
+          height="43"
+          x="42.1"
+          y="52"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="e"
+          width="34.1"
+          height="43"
+          x="81.2"
+          y="52"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="f"
+          width="34.1"
+          height="43"
+          x="120.3"
+          y="52"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="g"
+          width="34.1"
+          height="43"
+          x="159.4"
+          y="52"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="h"
+          width="34.1"
+          height="43"
+          x="198.5"
+          y="52"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="i"
+          width="34.1"
+          height="43"
+          x="237.6"
+          y="52"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="j"
+          width="34.1"
+          height="43"
+          x="276.7"
+          y="52"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="k"
+          width="34.1"
+          height="43"
+          x="315.8"
+          y="52"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="l"
+          width="34.1"
+          height="43"
+          x="354.9"
+          y="52"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="m"
+          width="34.444"
+          height="43"
+          x="21"
+          y="106"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="n"
+          width="34.444"
+          height="43"
+          x="60.444"
+          y="106"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="o"
+          width="34.444"
+          height="43"
+          x="99.889"
+          y="106"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="p"
+          width="34.444"
+          height="43"
+          x="139.333"
+          y="106"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="q"
+          width="34.444"
+          height="43"
+          x="178.778"
+          y="106"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="r"
+          width="34.444"
+          height="43"
+          x="218.222"
+          y="106"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="s"
+          width="34.444"
+          height="43"
+          x="257.667"
+          y="106"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="t"
+          width="34.444"
+          height="43"
+          x="297.111"
+          y="106"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="u"
+          width="34.444"
+          height="43"
+          x="336.556"
+          y="106"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="v"
+          width="42"
+          height="43"
+          x="3"
+          y="160"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="w"
+          width="34.857"
+          height="43"
+          x="59"
+          y="160"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="x"
+          width="34.857"
+          height="43"
+          x="98.857"
+          y="160"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="y"
+          width="34.857"
+          height="43"
+          x="138.714"
+          y="160"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="z"
+          width="34.857"
+          height="43"
+          x="178.571"
+          y="160"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="A"
+          width="34.857"
+          height="43"
+          x="218.429"
+          y="160"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="B"
+          width="34.857"
+          height="43"
+          x="258.286"
+          y="160"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="C"
+          width="34.857"
+          height="43"
+          x="298.143"
+          y="160"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="D"
+          width="42"
+          height="43"
+          x="347"
+          y="160"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="E"
+          width="87"
+          height="43"
+          x="3"
+          y="214"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="F"
+          width="199"
+          height="43"
+          x="96"
+          y="214"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="G"
+          width="88"
+          height="43"
+          x="301"
+          y="214"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" />
+          <feOffset dy="1" />
+          <feColorMatrix values="0 0 0 0 0.537255 0 0 0 0 0.541176 0 0 0 0 0.552941 0 0 0 1 0" />
+          <feBlend in2="BackgroundImageFix" result="effect1_dropShadow_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_dropShadow_4264_75885" result="shape" />
+        </filter>
+        <filter
+          id="H"
+          width="432"
+          height="111"
+          x="-20"
+          y="244"
+          color-interpolation-filters="sRGB"
+          filterUnits="userSpaceOnUse"
+        >
+          <feFlood flood-opacity="0" result="BackgroundImageFix" />
+          <feGaussianBlur in="BackgroundImageFix" stdDeviation="10" />
+          <feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_4264_75885" />
+          <feBlend in="SourceGraphic" in2="effect1_backgroundBlur_4264_75885" result="shape" />
+        </filter>
+      </defs>
+    </svg>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/common/icons/iphone/TimeIcon.tsx b/apps/web/src/components/workflow/preview/common/icons/iphone/TimeIcon.tsx
new file mode 100644
index 00000000000..f5c62ba773a
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/icons/iphone/TimeIcon.tsx
@@ -0,0 +1,13 @@
+/* eslint-disable max-len */
+import { ComponentProps } from 'react';
+
+export const TimeIcon = (props: ComponentProps<'svg'>) => {
+  return (
+    <svg width="46" height="20" viewBox="0 0 46 20" fill="none" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <path
+        d="M12.9337 4.88965C15.0391 4.88965 16.8712 6.38672 16.8712 9.94141V9.95508C16.8712 13.2773 15.3741 15.2461 12.8927 15.2461C11.0811 15.2461 9.72762 14.1729 9.41316 12.6621L9.39949 12.5869H11.1358L11.1563 12.6553C11.4161 13.3457 12.0245 13.7969 12.8927 13.7969C14.4581 13.7969 15.1212 12.2656 15.1964 10.3789C15.1964 10.3037 15.2032 10.2285 15.2032 10.1533H15.0665C14.7042 10.9326 13.8429 11.623 12.4893 11.623C10.5958 11.623 9.26961 10.2422 9.26961 8.36914V8.35547C9.26961 6.35254 10.794 4.88965 12.9337 4.88965ZM12.9268 10.2695C14.0411 10.2695 14.8956 9.46289 14.8956 8.34863V8.33496C14.8956 7.20703 14.0411 6.3252 12.9473 6.3252C11.8604 6.3252 10.9923 7.19336 10.9923 8.29395V8.30762C10.9923 9.44922 11.8057 10.2695 12.9268 10.2695ZM19.6947 8.6084C19.0726 8.6084 18.6078 8.12988 18.6078 7.52832C18.6078 6.91992 19.0726 6.44824 19.6947 6.44824C20.3236 6.44824 20.7816 6.91992 20.7816 7.52832C20.7816 8.12988 20.3236 8.6084 19.6947 8.6084ZM19.6947 13.6807C19.0726 13.6807 18.6078 13.209 18.6078 12.6006C18.6078 11.9922 19.0726 11.5205 19.6947 11.5205C20.3236 11.5205 20.7816 11.9922 20.7816 12.6006C20.7816 13.209 20.3236 13.6807 19.6947 13.6807ZM27.3034 15V13.1064H22.4772V11.6641C23.7555 9.44238 25.1569 7.17285 26.4967 5.13574H28.9918V11.6504H30.318V13.1064H28.9918V15H27.3034ZM24.1178 11.6914H27.3307V6.54395H27.2282C26.2164 8.08887 25.0748 9.91406 24.1178 11.5889V11.6914ZM34.1259 15V6.87207H34.0097L31.5556 8.6084V6.94727L34.1327 5.13574H35.8896V15H34.1259Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/common/icons/iphone/index.ts b/apps/web/src/components/workflow/preview/common/icons/iphone/index.ts
new file mode 100644
index 00000000000..461d06f940c
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/icons/iphone/index.ts
@@ -0,0 +1,3 @@
+export * from './IOSIndicatorsIcon';
+export * from './IOSKeyboard';
+export * from './TimeIcon';
diff --git a/apps/web/src/components/workflow/preview/common/index.ts b/apps/web/src/components/workflow/preview/common/index.ts
new file mode 100644
index 00000000000..1b7c0fcb13d
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/index.ts
@@ -0,0 +1,9 @@
+export * from './LocaleSelect';
+export * from './EmailMobile';
+export * from './PreviewEditOverlay';
+export * from './PreviewUserIcon';
+export * from './NovuGreyIcon';
+export * from './EmojiIcon';
+export * from './SendIcon';
+export * from './phone-simulator';
+export * from './icons';
diff --git a/apps/web/src/components/workflow/preview/common/phone-simulator/MobileSimulator.styles.tsx b/apps/web/src/components/workflow/preview/common/phone-simulator/MobileSimulator.styles.tsx
new file mode 100644
index 00000000000..9bcd1007b24
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/phone-simulator/MobileSimulator.styles.tsx
@@ -0,0 +1,87 @@
+import styled from '@emotion/styled';
+import { colors, shadows } from '@novu/design-system';
+import { TimeIcon } from '../icons';
+
+const BORDER_RADIUS_PX = 40;
+const LIGHT_THEME_BACKGROUND = 'rgba(255, 255, 255, 0.4)';
+const DARK_THEME_BACKGROUND = 'rgba(0, 0, 0, 0.6)';
+
+export const MobileSimulatorBody = styled.div<{ withBackground: boolean; isIOS: boolean }>`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  margin: 0 3.5rem;
+  width: 27.5rem;
+  height: 55rem;
+  min-height: 55rem;
+  border-radius: ${BORDER_RADIUS_PX}px;
+  border: 1.5rem solid ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B15 : colors.BGLight)};
+  box-shadow: ${shadows.dark};
+  background: ${({ theme }) => (theme.colorScheme === 'dark' ? '#4b4b51' : colors.white)};
+
+  ${({ withBackground, isIOS, theme }) => {
+    if (withBackground) {
+      return `
+      background-position: center;
+      background-repeat: no-repeat;
+      background: linear-gradient(0deg, ${
+        theme.colorScheme === 'dark' ? DARK_THEME_BACKGROUND : LIGHT_THEME_BACKGROUND
+      } 0%, ${theme.colorScheme === 'dark' ? DARK_THEME_BACKGROUND : LIGHT_THEME_BACKGROUND} 100%),
+        url(/static/images/mobilePreview/${isIOS ? 'iphone' : 'android'}.webp) no-repeat center
+          center / cover,
+        lightgray;
+    `;
+    }
+  }}
+`;
+
+export const Notch = styled.div`
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 10rem;
+  height: 1.25rem;
+  background: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B15 : colors.BGLight)};
+  border-radius: 0 0 20px 20px;
+`;
+
+export const Camera = styled.div`
+  position: absolute;
+  top: 1.125rem;
+  left: 1.125rem;
+  width: 1.75rem;
+  height: 1.75rem;
+  background: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B15 : '#cccccc')};
+  border-radius: 50%;
+  &::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 0.25rem;
+    height: 0.25rem;
+    background: ${colors.white};
+    opacity: 0.5;
+    border-radius: 50%;
+  }
+`;
+
+export const IndicatorsContainer = styled.div`
+  margin: 1.25rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B15 : '#cccccc')};
+`;
+
+export const SwitchContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  z-index: 2;
+`;
+
+export const TimeIconStyled = styled(({ isVisible }: { isVisible: boolean }) => (
+  <TimeIcon style={{ opacity: isVisible ? 1 : 0 }} />
+))``;
diff --git a/apps/web/src/components/workflow/preview/common/phone-simulator/MobileSimulator.tsx b/apps/web/src/components/workflow/preview/common/phone-simulator/MobileSimulator.tsx
new file mode 100644
index 00000000000..4334d0c54db
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/phone-simulator/MobileSimulator.tsx
@@ -0,0 +1,49 @@
+import { useState } from 'react';
+import { useMantineColorScheme } from '@mantine/core';
+import { ChannelTypeEnum } from '@novu/shared';
+import { When } from '@novu/design-system';
+
+import { PhonePlatformSwitch } from './PhonePlatformSwitch';
+import {
+  IndicatorsContainer,
+  MobileSimulatorBody,
+  Notch,
+  SwitchContainer,
+  TimeIconStyled,
+  Camera,
+} from './MobileSimulator.styles';
+import { AndroidIndicatorsIcon, IOSIndicatorsIcon, IOSKeyboard, AndroidKeyboard } from '../icons';
+
+export const MobileSimulator = ({
+  children,
+  withBackground,
+}: {
+  withBackground: boolean;
+  children: React.ReactNode;
+}) => {
+  const [isIOS, setIsIOS] = useState(true);
+  const { colorScheme } = useMantineColorScheme();
+
+  return (
+    <MobileSimulatorBody isIOS={isIOS} withBackground={withBackground}>
+      {isIOS ? <Notch /> : <Camera />}
+      <IndicatorsContainer>
+        <TimeIconStyled isVisible={isIOS} />
+        {isIOS ? <IOSIndicatorsIcon /> : <AndroidIndicatorsIcon />}
+      </IndicatorsContainer>
+      <SwitchContainer>
+        <PhonePlatformSwitch isIOS={isIOS} onChange={() => setIsIOS((old) => !old)} />
+      </SwitchContainer>
+      {children}
+      <When truthy={!withBackground}>
+        {isIOS ? (
+          <IOSKeyboard isDarkMode={colorScheme === 'dark'} />
+        ) : (
+          <AndroidKeyboard isDarkMode={colorScheme === 'dark'} />
+        )}
+      </When>
+    </MobileSimulatorBody>
+  );
+};
+
+export default MobileSimulator;
diff --git a/apps/web/src/components/workflow/preview/common/phone-simulator/PhonePlatformSwitch.styles.tsx b/apps/web/src/components/workflow/preview/common/phone-simulator/PhonePlatformSwitch.styles.tsx
new file mode 100644
index 00000000000..deb46a74bee
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/phone-simulator/PhonePlatformSwitch.styles.tsx
@@ -0,0 +1,70 @@
+import { CSSProperties } from 'react';
+import styled from '@emotion/styled';
+import { colors, shadows, AppleIcon, AndroidIcon } from '@novu/design-system';
+
+const SWITCH_CONTAINER_PADDING = 0.3125;
+const THUMB_WIDTH = 3;
+const THUMB_HEIGHT = 1.75;
+
+export const AppleIconStyled = styled(({ size }: { size: CSSProperties['width'] }) => (
+  <AppleIcon style={{ minWidth: size, width: size, height: size }} />
+))``;
+
+export const AndroidIconStyled = styled(({ size }: { size: CSSProperties['width'] }) => (
+  <AndroidIcon style={{ minWidth: size, width: size, height: size }} />
+))``;
+
+export const SwitchContainer = styled.div`
+  position: relative;
+  width: 7.5rem;
+  height: 2.5rem;
+  padding: ${SWITCH_CONTAINER_PADDING}rem;
+  border-radius: 1.875rem;
+  border: 1px solid ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B40 : colors.B70)};
+  background: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B15 : colors.white)};
+`;
+
+export const SwitchInput = styled.input`
+  height: 0;
+  opacity: 0;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 0;
+`;
+
+export const ButtonsContainer = styled.label`
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: 0.3125rem;
+  cursor: pointer;
+`;
+
+export const Thumb = styled.div<{ isIOS?: boolean }>`
+  position: absolute;
+  left: ${({ isIOS }) =>
+    isIOS ? `${SWITCH_CONTAINER_PADDING}rem` : `calc(100% - ${THUMB_WIDTH}rem - ${SWITCH_CONTAINER_PADDING}rem)`};
+  z-index: 0;
+  width: ${THUMB_WIDTH}rem;
+  height: ${THUMB_HEIGHT}rem;
+  border-radius: 1.875rem;
+  background: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B40 : colors.BGLight)};
+  box-shadow: ${shadows.dark};
+  transition: left 0.3s ease;
+`;
+
+export const IconHolder = styled.span<{ isSelected: boolean }>`
+  z-index: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: ${THUMB_WIDTH}rem;
+  height: ${THUMB_HEIGHT}rem;
+  transition: color 0.3s ease;
+  color: ${({ theme, isSelected }) =>
+    theme.colorScheme === 'dark' ? colors.white : isSelected ? colors.B20 : colors.B60};
+`;
diff --git a/apps/web/src/components/workflow/preview/common/phone-simulator/PhonePlatformSwitch.tsx b/apps/web/src/components/workflow/preview/common/phone-simulator/PhonePlatformSwitch.tsx
new file mode 100644
index 00000000000..ea5983f1848
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/phone-simulator/PhonePlatformSwitch.tsx
@@ -0,0 +1,34 @@
+import { ComponentProps, forwardRef } from 'react';
+import {
+  AndroidIconStyled,
+  AppleIconStyled,
+  ButtonsContainer,
+  IconHolder,
+  SwitchContainer,
+  SwitchInput,
+  Thumb,
+} from './PhonePlatformSwitch.styles';
+
+export interface IPhonePlatformSwitchProps extends Pick<ComponentProps<'input'>, 'onChange' | 'className' | 'style'> {
+  isIOS?: boolean;
+}
+
+export const PhonePlatformSwitch: React.FC<IPhonePlatformSwitchProps> = forwardRef<
+  HTMLInputElement,
+  IPhonePlatformSwitchProps
+>(({ isIOS, onChange, className }, ref) => {
+  return (
+    <SwitchContainer className={className}>
+      <SwitchInput id="phonePlatformSwitch" ref={ref} type="checkbox" checked={isIOS} onChange={onChange} />
+      <ButtonsContainer htmlFor="phonePlatformSwitch">
+        <Thumb isIOS={isIOS} />
+        <IconHolder isSelected={!!isIOS}>
+          <AppleIconStyled size="1rem" />
+        </IconHolder>
+        <IconHolder isSelected={!isIOS}>
+          <AndroidIconStyled size="1rem" />
+        </IconHolder>
+      </ButtonsContainer>
+    </SwitchContainer>
+  );
+});
diff --git a/apps/web/src/components/workflow/preview/common/phone-simulator/index.ts b/apps/web/src/components/workflow/preview/common/phone-simulator/index.ts
new file mode 100644
index 00000000000..8fc6c8f4938
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/common/phone-simulator/index.ts
@@ -0,0 +1 @@
+export * from './MobileSimulator';
diff --git a/apps/web/src/components/workflow/preview/email/EmailPreview.tsx b/apps/web/src/components/workflow/preview/email/EmailPreview.tsx
new file mode 100644
index 00000000000..61f6454b3ab
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/email/EmailPreview.tsx
@@ -0,0 +1,133 @@
+import { JsonInput } from '@mantine/core';
+import { useEffect, useMemo, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import styled from '@emotion/styled';
+import { Button, colors, inputStyles } from '@novu/design-system';
+
+import { useActiveIntegrations, useProcessVariables } from '../../../../hooks';
+import type { IForm } from '../../../../pages/templates/components/formTypes';
+import { useStepFormErrors } from '../../../../pages/templates/hooks/useStepFormErrors';
+import { useStepFormPath } from '../../../../pages/templates/hooks/useStepFormPath';
+import { When } from '../../../utils/When';
+import { PreviewMobile } from './PreviewMobile';
+import { PreviewWeb } from './PreviewWeb';
+import { useTemplateLocales } from '../../../../pages/templates/hooks/useTemplateLocales';
+import { usePreviewEmailTemplate } from '../../../../pages/templates/hooks/usePreviewEmailTemplate';
+
+const PreviewContainer = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  height: 100%;
+  margin: 0;
+  margin-bottom: 1.5rem;
+  gap: 1.5rem;
+`;
+
+const JSONContainer = styled.div`
+  min-width: 28rem;
+  height: 100%;
+  background: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B17 : colors.B98)};
+  border-radius: 7;
+`;
+
+export const EmailPreview = ({ showVariables = true, view }: { view: string; showVariables?: boolean }) => {
+  const { watch } = useFormContext<IForm>();
+  const path = useStepFormPath();
+  const error = useStepFormErrors();
+
+  const contentType = watch(`${path}.template.contentType`);
+  const htmlContent = watch(`${path}.template.htmlContent`);
+  const editorContent = watch(`${path}.template.content`);
+  const variables = watch(`${path}.template.variables`);
+  const processedVariables = useProcessVariables(variables);
+  const content = contentType === 'editor' ? editorContent : htmlContent;
+  const [payloadValue, setPayloadValue] = useState(processedVariables ?? '{}');
+
+  const { selectedLocale, locales, areLocalesLoading, onLocaleChange } = useTemplateLocales({
+    content,
+  });
+  const { getEmailPreview, previewContent, subject, isPreviewContentLoading } = usePreviewEmailTemplate({
+    locale: selectedLocale,
+    payload: processedVariables,
+  });
+  const { integrations = [] } = useActiveIntegrations();
+  const integration = useMemo(() => {
+    return integrations.find((item) => item.channel === 'email' && item.primary) || null;
+  }, [integrations]);
+
+  useEffect(() => {
+    setPayloadValue(processedVariables);
+  }, [setPayloadValue, processedVariables]);
+
+  const isLoading = isPreviewContentLoading || areLocalesLoading;
+
+  return (
+    <>
+      {showVariables ? (
+        <PreviewContainer>
+          <When truthy={view === 'web'}>
+            <PreviewWeb
+              loading={isLoading}
+              subject={subject}
+              content={previewContent}
+              integration={integration}
+              error={error}
+              showEditOverlay={false}
+              onLocaleChange={onLocaleChange}
+              locales={locales || []}
+              selectedLocale={selectedLocale}
+            />
+          </When>
+          <When truthy={view === 'mobile'}>
+            <PreviewMobile
+              loading={isLoading}
+              subject={subject}
+              content={previewContent}
+              integration={integration}
+              error={error}
+              onLocaleChange={onLocaleChange}
+              locales={locales || []}
+              selectedLocale={selectedLocale}
+            />
+          </When>
+          <JSONContainer>
+            <JsonInput
+              data-test-id="preview-json-param"
+              formatOnBlur
+              autosize
+              styles={inputStyles}
+              label="Payload:"
+              value={payloadValue}
+              onChange={setPayloadValue}
+              minRows={6}
+              mb={20}
+              validationError="Invalid JSON"
+            />
+            <Button
+              fullWidth
+              onClick={() => {
+                getEmailPreview(payloadValue);
+              }}
+              variant="outline"
+              data-test-id="apply-variables"
+            >
+              Apply Variables
+            </Button>
+          </JSONContainer>
+        </PreviewContainer>
+      ) : (
+        <PreviewWeb
+          loading={isLoading}
+          subject={subject}
+          content={previewContent}
+          integration={integration}
+          error={error}
+          showEditOverlay={!showVariables}
+          onLocaleChange={onLocaleChange}
+          locales={locales || []}
+          selectedLocale={selectedLocale}
+        />
+      )}
+    </>
+  );
+};
diff --git a/apps/web/src/pages/templates/editor/PreviewMobile.cy.tsx b/apps/web/src/components/workflow/preview/email/PreviewMobile.cy.tsx
similarity index 87%
rename from apps/web/src/pages/templates/editor/PreviewMobile.cy.tsx
rename to apps/web/src/components/workflow/preview/email/PreviewMobile.cy.tsx
index 437f9bab567..0ce89ba97de 100644
--- a/apps/web/src/pages/templates/editor/PreviewMobile.cy.tsx
+++ b/apps/web/src/components/workflow/preview/email/PreviewMobile.cy.tsx
@@ -1,6 +1,5 @@
-import { TestWrapper } from '../../../testing';
+import { TestWrapper } from '../../../../testing';
 import { PreviewMobile } from './PreviewMobile';
-import { format } from 'date-fns';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient({});
@@ -23,6 +22,8 @@ describe('Preview mobile', () => {
                 from: 'novu@novu',
               },
             }}
+            onLocaleChange={() => {}}
+            locales={[]}
           />
         </QueryClientProvider>
       </TestWrapper>
@@ -33,7 +34,6 @@ describe('Preview mobile', () => {
     cy.getByTestId('preview-content').contains(
       "Oops! We've recognized some glitch in this HTML. Please give it another look!"
     );
-    cy.getByTestId('preview-date').contains(format(new Date(), 'EEE, MMM d, HH:mm'));
   });
 
   it('should render with basic content', () => {
@@ -50,6 +50,8 @@ describe('Preview mobile', () => {
                 from: 'novu@novu',
               },
             }}
+            onLocaleChange={() => {}}
+            locales={[]}
           />
         </QueryClientProvider>
       </TestWrapper>
@@ -58,6 +60,5 @@ describe('Preview mobile', () => {
     cy.getByTestId('preview-subject').contains('Subject');
     cy.getByTestId('preview-from').contains('novu@novu');
     cy.getByTestId('preview-content').invoke('attr', 'srcdoc').should('eq', content);
-    cy.getByTestId('preview-date').contains(format(new Date(), 'EEE, MMM d, HH:mm'));
   });
 });
diff --git a/apps/web/src/components/workflow/preview/email/PreviewMobile.tsx b/apps/web/src/components/workflow/preview/email/PreviewMobile.tsx
new file mode 100644
index 00000000000..808c7d1444d
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/email/PreviewMobile.tsx
@@ -0,0 +1,177 @@
+import { createStyles, Group, Skeleton, Stack } from '@mantine/core';
+import { colors, Text } from '@novu/design-system';
+import { useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import Frame from 'react-frame-component';
+import { FieldError, FieldErrorsImpl, Merge } from 'react-hook-form';
+import { IFormStep } from '../../../../pages/templates/components/formTypes';
+import { EmailIntegrationInfo } from '../../../../pages/templates/editor/EmailIntegrationInfo';
+import { When } from '../../../utils/When';
+import { LocaleSelect } from '../common/LocaleSelect';
+import { EmailMobile } from '../common/EmailMobile';
+import { PreviewEditOverlay } from '../common/PreviewEditOverlay';
+import { PreviewUserIcon } from '../common/PreviewUserIcon';
+import { ContentSkeleton, HeaderSkeleton } from './Skeleton';
+
+const useStyles = createStyles((theme, { error }: { error: boolean }) => ({
+  header: {
+    width: '100%',
+    marginTop: '20px',
+    paddingLeft: '15px',
+    paddingRight: '15px',
+  },
+  subject: {
+    marginBottom: '3px',
+    fontWeight: 'bolder',
+  },
+  from: {
+    color: theme.colorScheme === 'dark' ? colors.B60 : colors.B70,
+    fontWeight: 'normal',
+  },
+  line: {
+    height: '2px',
+    width: '340px',
+    marginLeft: '15px',
+    marginRight: '15px',
+    background: theme.colorScheme === 'dark' ? colors.B20 : colors.B85,
+    marginTop: '19px',
+  },
+  frame: {
+    border: '0px',
+    width: '100%',
+    height: '609px',
+    borderRadius: '0 0 30px 30px',
+  },
+  fallbackFrame: {
+    border: '0px',
+    width: '100%',
+    height: '609px',
+    borderRadius: '0 0 30px 30px',
+    padding: '15px',
+    textAlign: 'center',
+  },
+  content: {
+    position: 'relative',
+    border: error ? `1px solid ${colors.error}` : 'none',
+  },
+}));
+
+export const PreviewMobile = ({
+  integration,
+  subject,
+  content,
+  loading = false,
+  error,
+  showEditOverlay = false,
+  onLocaleChange,
+  selectedLocale,
+  locales,
+}: {
+  integration: any;
+  subject?: string;
+  content: string;
+  loading?: boolean;
+  error?: Merge<FieldError, FieldErrorsImpl<IFormStep>>;
+  showEditOverlay?: boolean;
+  onLocaleChange: (locale: string) => void;
+  selectedLocale?: string;
+  locales: any[];
+}) => {
+  const { classes } = useStyles({ error: !!(error && error.template?.content && error.template?.content?.message) });
+
+  const [isEditOverlayVisible, setIsEditOverlayVisible] = useState(false);
+
+  const handleMouseEnter = () => {
+    if (showEditOverlay) {
+      setIsEditOverlayVisible(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (showEditOverlay && isEditOverlayVisible) {
+      setIsEditOverlayVisible(false);
+    }
+  };
+
+  return (
+    <>
+      <EmailMobile>
+        <div className={classes.header}>
+          <Group
+            sx={{
+              height: '40px',
+            }}
+            spacing={0}
+            position="apart"
+          >
+            <div>
+              <Group
+                sx={{
+                  height: '40px',
+                }}
+                spacing={13}
+                noWrap
+              >
+                <When truthy={loading}>
+                  <HeaderSkeleton />
+                </When>
+
+                <When truthy={!loading}>
+                  <PreviewUserIcon />
+                  <div>
+                    {error && error.template?.subject && error.template?.subject?.message ? (
+                      <Text color={colors.error}>{error.template.subject.message}</Text>
+                    ) : (
+                      <>
+                        <div data-test-id="preview-subject" className={classes.subject}>
+                          {subject}
+                        </div>
+                        <Group spacing={13} position="apart">
+                          <div data-test-id="preview-from" className={classes.from}>
+                            <EmailIntegrationInfo integration={integration} field={'from'} />
+                          </div>
+                        </Group>
+                      </>
+                    )}
+                  </div>
+                  <div style={{ marginLeft: 'auto' }}>
+                    <LocaleSelect
+                      isLoading={loading}
+                      locales={locales}
+                      value={selectedLocale}
+                      onLocaleChange={onLocaleChange}
+                    />
+                  </div>
+                </When>
+              </Group>
+            </div>
+          </Group>
+        </div>
+        <div className={classes.line}></div>
+        <div className={classes.content} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+          <When truthy={loading}>
+            <ContentSkeleton />
+          </When>
+          <When truthy={!loading}>
+            {isEditOverlayVisible && <PreviewEditOverlay />}
+            <ErrorBoundary
+              FallbackComponent={() => (
+                <div data-test-id="preview-content" className={classes.fallbackFrame}>
+                  Oops! We've recognized some glitch in this HTML. Please give it another look!
+                </div>
+              )}
+              resetKeys={[content]}
+            >
+              <Frame data-test-id="preview-content" className={classes.frame} initialContent={content}>
+                <></>
+              </Frame>
+            </ErrorBoundary>
+            {error && error.template?.content && error.template?.content?.message && (
+              <Text color={colors.error}>{error?.template?.content?.message}</Text>
+            )}
+          </When>
+        </div>
+      </EmailMobile>
+    </>
+  );
+};
diff --git a/apps/web/src/pages/templates/editor/PreviewMobileInbox/DateArrow.tsx b/apps/web/src/components/workflow/preview/email/PreviewMobileInbox/DateArrow.tsx
similarity index 100%
rename from apps/web/src/pages/templates/editor/PreviewMobileInbox/DateArrow.tsx
rename to apps/web/src/components/workflow/preview/email/PreviewMobileInbox/DateArrow.tsx
diff --git a/apps/web/src/pages/templates/editor/PreviewMobileInbox/InboxItem.tsx b/apps/web/src/components/workflow/preview/email/PreviewMobileInbox/InboxItem.tsx
similarity index 100%
rename from apps/web/src/pages/templates/editor/PreviewMobileInbox/InboxItem.tsx
rename to apps/web/src/components/workflow/preview/email/PreviewMobileInbox/InboxItem.tsx
diff --git a/apps/web/src/pages/templates/editor/PreviewMobileInbox/index.tsx b/apps/web/src/components/workflow/preview/email/PreviewMobileInbox/index.tsx
similarity index 90%
rename from apps/web/src/pages/templates/editor/PreviewMobileInbox/index.tsx
rename to apps/web/src/components/workflow/preview/email/PreviewMobileInbox/index.tsx
index afb637c2541..2feee75e182 100644
--- a/apps/web/src/pages/templates/editor/PreviewMobileInbox/index.tsx
+++ b/apps/web/src/components/workflow/preview/email/PreviewMobileInbox/index.tsx
@@ -1,8 +1,8 @@
 import { createStyles, Group } from '@mantine/core';
 import { format } from 'date-fns';
 import { colors } from '@novu/design-system';
-import { EmailIntegrationInfo } from '../EmailIntegrationInfo';
-import { Mobile } from '../Mobile';
+import { EmailIntegrationInfo } from '../../../../../pages/templates/editor/EmailIntegrationInfo';
+import { EmailMobile } from '../../common/EmailMobile';
 import { DateArrow } from './DateArrow';
 import { ItemSkeleton } from './InboxItem';
 
@@ -55,7 +55,7 @@ export const PreviewMobileInbox = ({
 
   return (
     <>
-      <Mobile>
+      <EmailMobile>
         <div className={classes.header}>Inbox</div>
         <div className={classes.content}>
           <div className={classes.InboxItem}>
@@ -74,7 +74,7 @@ export const PreviewMobileInbox = ({
         </div>
         <ItemSkeleton />
         <ItemSkeleton />
-      </Mobile>
+      </EmailMobile>
       <div className={classes.bottom}></div>
     </>
   );
diff --git a/apps/web/src/pages/templates/editor/PreviewSegment/MobileIcon.tsx b/apps/web/src/components/workflow/preview/email/PreviewSegment/MobileIcon.tsx
similarity index 100%
rename from apps/web/src/pages/templates/editor/PreviewSegment/MobileIcon.tsx
rename to apps/web/src/components/workflow/preview/email/PreviewSegment/MobileIcon.tsx
diff --git a/apps/web/src/pages/templates/editor/PreviewSegment/WebIcon.tsx b/apps/web/src/components/workflow/preview/email/PreviewSegment/WebIcon.tsx
similarity index 100%
rename from apps/web/src/pages/templates/editor/PreviewSegment/WebIcon.tsx
rename to apps/web/src/components/workflow/preview/email/PreviewSegment/WebIcon.tsx
diff --git a/apps/web/src/pages/templates/editor/PreviewWeb.cy.tsx b/apps/web/src/components/workflow/preview/email/PreviewWeb.cy.tsx
similarity index 87%
rename from apps/web/src/pages/templates/editor/PreviewWeb.cy.tsx
rename to apps/web/src/components/workflow/preview/email/PreviewWeb.cy.tsx
index c506b130e19..b9857df359f 100644
--- a/apps/web/src/pages/templates/editor/PreviewWeb.cy.tsx
+++ b/apps/web/src/components/workflow/preview/email/PreviewWeb.cy.tsx
@@ -1,6 +1,5 @@
-import { TestWrapper } from '../../../testing';
+import { TestWrapper } from '../../../../testing';
 import { PreviewWeb } from './PreviewWeb';
-import { format } from 'date-fns';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient({});
@@ -23,6 +22,8 @@ describe('Preview web', () => {
                 from: 'novu@novu',
               },
             }}
+            onLocaleChange={() => {}}
+            locales={[]}
           />
         </QueryClientProvider>
       </TestWrapper>
@@ -33,7 +34,6 @@ describe('Preview web', () => {
     cy.getByTestId('preview-content').contains(
       "Oops! We've recognized some glitch in this HTML. Please give it another look!"
     );
-    cy.getByTestId('preview-date').contains(format(new Date(), 'EEE, MMM d, HH:mm'));
   });
 
   it('should render with basic content', () => {
@@ -50,6 +50,8 @@ describe('Preview web', () => {
                 from: 'novu@novu',
               },
             }}
+            onLocaleChange={() => {}}
+            locales={[]}
           />
         </QueryClientProvider>
       </TestWrapper>
@@ -58,6 +60,5 @@ describe('Preview web', () => {
     cy.getByTestId('preview-subject').contains('Subject');
     cy.getByTestId('preview-from').contains('novu@novu');
     cy.getByTestId('preview-content').invoke('attr', 'srcdoc').should('eq', content);
-    cy.getByTestId('preview-date').contains(format(new Date(), 'EEE, MMM d, HH:mm'));
   });
 });
diff --git a/apps/web/src/components/workflow/preview/email/PreviewWeb.tsx b/apps/web/src/components/workflow/preview/email/PreviewWeb.tsx
new file mode 100644
index 00000000000..12791cc30d9
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/email/PreviewWeb.tsx
@@ -0,0 +1,209 @@
+import { createStyles, Group } from '@mantine/core';
+import { colors, Text } from '@novu/design-system';
+import { useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import Frame from 'react-frame-component';
+import { FieldError, FieldErrorsImpl, Merge } from 'react-hook-form';
+import { IFormStep } from '../../../../pages/templates/components/formTypes';
+import { EmailIntegrationInfo } from '../../../../pages/templates/editor/EmailIntegrationInfo';
+import { When } from '../../../utils/When';
+import { LocaleSelect } from '../common/LocaleSelect';
+import { PreviewEditOverlay } from '../common/PreviewEditOverlay';
+import { PreviewUserIcon } from '../common/PreviewUserIcon';
+import { ContentSkeleton, HeaderSkeleton } from './Skeleton';
+
+const useStyles = createStyles((theme, { error, isBlur }: { error: boolean; isBlur: boolean }) => ({
+  browser: {
+    backgroundColor: theme.colorScheme === 'dark' ? colors.B15 : colors.B98,
+    borderRadius: '8px',
+    height: '100%',
+    minHeight: '50vh',
+    width: '100%',
+  },
+  bar: {
+    borderRadius: '8px 8px 0 0',
+    backgroundColor: theme.colorScheme === 'dark' ? colors.B20 : colors.B85,
+    width: '100%',
+    height: '28px',
+    display: 'flex',
+    alignItems: 'center',
+    padding: '12px',
+  },
+  barAction: {
+    height: '8px',
+    width: '8px',
+    borderRadius: '50%',
+    backgroundColor: theme.colorScheme === 'dark' ? colors.B17 : colors.B98,
+  },
+  header: {
+    width: '100%',
+  },
+  subject: {
+    marginBottom: '3px',
+    fontWeight: 'bolder',
+  },
+  from: {
+    color: theme.colorScheme === 'dark' ? colors.B60 : colors.B40,
+    fontWeight: 'normal',
+  },
+  content: {
+    borderRadius: '8px',
+    backgroundColor: theme.colorScheme === 'dark' ? colors.B20 : colors.white,
+    flex: 1,
+    border: error ? `1px solid ${colors.error}` : 'none',
+    position: 'relative',
+    filter: isBlur ? 'blur(2px)' : 'none',
+  },
+  contentContainer: {
+    padding: '24px',
+    paddingBottom: '32px',
+    height: 'calc(100% - 28px)',
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '16px',
+  },
+  frame: {
+    border: '0px',
+    width: '100%',
+    height: '100%',
+    borderRadius: '8px',
+  },
+  fallbackFrame: {
+    border: '0px',
+    width: '100%',
+    height: '100%',
+    padding: '15px',
+    textAlign: 'center',
+  },
+  overlayContainer: {
+    position: 'relative',
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+  },
+}));
+
+export const PreviewWeb = ({
+  integration,
+  subject,
+  content,
+  loading = false,
+  error,
+  showEditOverlay = false,
+  onLocaleChange,
+  selectedLocale,
+  locales,
+}: {
+  integration: any;
+  subject?: string;
+  content: string;
+  loading?: boolean;
+  error?: Merge<FieldError, FieldErrorsImpl<IFormStep>>;
+  showEditOverlay?: boolean;
+  onLocaleChange: (locale: string) => void;
+  selectedLocale?: string;
+  locales: any[];
+}) => {
+  const [isEditOverlayVisible, setIsEditOverlayVisible] = useState(false);
+
+  const { classes } = useStyles({
+    error: !!(error && error.template?.content && error.template?.content?.message),
+    isBlur: isEditOverlayVisible,
+  });
+
+  const handleMouseEnter = () => {
+    if (showEditOverlay) {
+      setIsEditOverlayVisible(true);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (showEditOverlay && isEditOverlayVisible) {
+      setIsEditOverlayVisible(false);
+    }
+  };
+
+  return (
+    <>
+      <div className={classes.browser}>
+        <div className={classes.bar}>
+          <Group spacing={6}>
+            <div className={classes.barAction}></div>
+            <div className={classes.barAction}></div>
+            <div className={classes.barAction}></div>
+          </Group>
+        </div>
+        <div className={classes.contentContainer}>
+          <div className={classes.header}>
+            <Group
+              sx={{
+                height: '40px',
+              }}
+              spacing={16}
+              noWrap
+            >
+              <When truthy={loading}>
+                <HeaderSkeleton />
+              </When>
+              <When truthy={!loading}>
+                <PreviewUserIcon />
+                <div>
+                  {error && error.template?.subject && error.template?.subject?.message ? (
+                    <Text color={colors.error}>{error.template.subject.message}</Text>
+                  ) : (
+                    <>
+                      <div data-test-id="preview-subject" className={classes.subject}>
+                        {subject}
+                      </div>
+                      <div data-test-id="preview-from" className={classes.from}>
+                        <EmailIntegrationInfo integration={integration} field={'from'} />
+                      </div>
+                    </>
+                  )}
+                </div>
+                <div style={{ marginLeft: 'auto' }}>
+                  <LocaleSelect
+                    isLoading={loading}
+                    locales={locales}
+                    value={selectedLocale}
+                    onLocaleChange={onLocaleChange}
+                  />
+                </div>
+              </When>
+            </Group>
+          </div>
+          <div className={classes.overlayContainer} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+            <When truthy={isEditOverlayVisible && !loading}>
+              <PreviewEditOverlay />
+            </When>
+            <div className={classes.content}>
+              <When truthy={loading}>
+                <ContentSkeleton />
+              </When>
+              <When truthy={!loading}>
+                <ErrorBoundary
+                  FallbackComponent={() => (
+                    <div className={classes.fallbackFrame} data-test-id="preview-content">
+                      <Text color={colors.error}>
+                        Oops! We've recognized some glitch in this HTML. Please give it another look!
+                      </Text>
+                    </div>
+                  )}
+                  resetKeys={[content]}
+                >
+                  <Frame className={classes.frame} data-test-id="preview-content" initialContent={content}>
+                    <></>
+                  </Frame>
+                </ErrorBoundary>
+
+                {error && error.template?.content && error.template?.content?.message && (
+                  <Text color={colors.error}>{error?.template?.content?.message}</Text>
+                )}
+              </When>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/email/Skeleton/ContentSkeleton.tsx b/apps/web/src/components/workflow/preview/email/Skeleton/ContentSkeleton.tsx
new file mode 100644
index 00000000000..c63479e8a3f
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/email/Skeleton/ContentSkeleton.tsx
@@ -0,0 +1,28 @@
+import { Group, Skeleton, Stack } from '@mantine/core';
+
+export function ContentSkeleton() {
+  return (
+    <Stack spacing={40} py={40} px={30} h="100%">
+      <Group position="center" noWrap>
+        <Skeleton height={40} width={80} radius="sm" />
+      </Group>
+      <Stack spacing={12}>
+        <Group spacing={16} noWrap>
+          <Skeleton height={14} width={'70%'} radius="sm" />
+          <Skeleton height={14} width={'30%'} radius="sm" />
+        </Group>
+        <Group spacing={16} noWrap>
+          <Skeleton height={14} width={'30%'} radius="sm" />
+          <Skeleton height={14} width={'70%'} radius="sm" />
+        </Group>
+        <Group spacing={16} noWrap>
+          <Skeleton height={14} width={'72%'} radius="sm" />
+        </Group>
+      </Stack>
+
+      <Group spacing={16} mt="auto" noWrap>
+        <Skeleton height={14} width={'30%'} radius="sm" />
+      </Group>
+    </Stack>
+  );
+}
diff --git a/apps/web/src/components/workflow/preview/email/Skeleton/HeaderSkeleton.tsx b/apps/web/src/components/workflow/preview/email/Skeleton/HeaderSkeleton.tsx
new file mode 100644
index 00000000000..f250b6f4b3a
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/email/Skeleton/HeaderSkeleton.tsx
@@ -0,0 +1,13 @@
+import { Skeleton, Stack } from '@mantine/core';
+
+export function HeaderSkeleton() {
+  return (
+    <>
+      <Skeleton height={40} width={40} circle />
+      <Stack spacing={3}>
+        <Skeleton height={14} width={160} radius="xs" />
+        <Skeleton height={14} width={80} />
+      </Stack>
+    </>
+  );
+}
diff --git a/apps/web/src/components/workflow/preview/email/Skeleton/index.ts b/apps/web/src/components/workflow/preview/email/Skeleton/index.ts
new file mode 100644
index 00000000000..4845b4a9179
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/email/Skeleton/index.ts
@@ -0,0 +1,2 @@
+export * from './HeaderSkeleton';
+export * from './ContentSkeleton';
diff --git a/apps/web/src/components/workflow/preview/email/index.ts b/apps/web/src/components/workflow/preview/email/index.ts
new file mode 100644
index 00000000000..364e1ec431b
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/email/index.ts
@@ -0,0 +1 @@
+export * from './EmailPreview';
diff --git a/apps/web/src/components/workflow/preview/in-app/Content.styles.ts b/apps/web/src/components/workflow/preview/in-app/Content.styles.ts
new file mode 100644
index 00000000000..a8185c56e01
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/in-app/Content.styles.ts
@@ -0,0 +1,94 @@
+import styled from '@emotion/styled';
+import { Skeleton } from '@mantine/core';
+import { colors, shadows } from '@novu/design-system';
+
+export const ContentStyled = styled.div<{ isBlur: boolean; isExampleNotification?: boolean }>`
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: 1.5rem;
+  flex-shrink: 0;
+  position: relative;
+  overflow: hidden;
+  padding: 1.5rem;
+  ${({ isBlur }) => isBlur && 'filter: blur(2px)'};
+  background-color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B20 : colors.white)};
+
+  ${({ isExampleNotification }) => {
+    if (isExampleNotification) {
+      return `
+      border-radius: 8px;
+      opacity: 0.4;
+      background: ${({ theme }) =>
+        theme.colorScheme === 'dark'
+          ? `linear-gradient(90deg, rgba(35, 35, 43, 0.40) 0%, rgba(36, 36, 45, 0.40) 48.44%, rgba(41, 41, 52, 0.40) 100%), ${colors.B20}`
+          : colors.white};
+      box-shadow: ${({ theme }) => (theme.colorScheme === 'dark' ? shadows.dark : shadows.medium)};
+      `;
+    }
+  }}
+`;
+
+export const ContentAndOverlayWrapperStyled = styled.div<{ isError: boolean }>`
+  overflow: hidden;
+  border-radius: 0.5rem;
+  ${({ isError }) => isError && `border: 1px solid ${colors.error};`}
+  position: relative;
+  box-shadow: ${({ theme }) => (theme.colorScheme === 'dark' ? shadows.dark : shadows.medium)};
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 0.5rem;
+    border-radius: 7px 0 0 7px;
+    background: ${colors.vertical};
+    z-index: 2;
+  }
+`;
+
+export const NotificationTextStyled = styled.div<{ isExampleNotification: boolean }>`
+  color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.white : colors.BGDark)};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  margin: 0;
+
+  ${({ isExampleNotification }) => {
+    if (isExampleNotification) {
+      return `
+      opacity: 0.4;
+      color: ${colors.B60};
+      font-weight: 700;
+      `;
+    }
+  }}
+`;
+
+export const TimeTextStyled = styled(NotificationTextStyled)`
+  color: ${colors.B40};
+  ${({ isExampleNotification }) => {
+    if (isExampleNotification) {
+      return `
+      opacity: 0.4;
+      `;
+    }
+  }}
+`;
+
+const LIGHT_THEME_SKELETON_BG = colors.BGLight;
+const DARK_THEME_SKELETON_BG = 'rgba(255, 255, 255, 0.04)';
+
+export const SkeletonStyled = styled(Skeleton)`
+  &::before {
+    background: ${({ theme }) => (theme.colorScheme === 'dark' ? DARK_THEME_SKELETON_BG : LIGHT_THEME_SKELETON_BG)};
+  }
+
+  &::after {
+    background: ${({ theme }) => (theme.colorScheme === 'dark' ? DARK_THEME_SKELETON_BG : LIGHT_THEME_SKELETON_BG)};
+  }
+`;
diff --git a/apps/web/src/components/workflow/preview/in-app/Content.tsx b/apps/web/src/components/workflow/preview/in-app/Content.tsx
new file mode 100644
index 00000000000..00393f91fbe
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/in-app/Content.tsx
@@ -0,0 +1,101 @@
+import { Group, Stack } from '@mantine/core';
+import { colors, Text } from '@novu/design-system';
+import { MessageActionStatusEnum } from '@novu/shared';
+
+import { useHover } from '../../../../hooks';
+import { ActionBlockContainer } from '../../../../pages/templates/components/in-app-editor/preview/ActionBlockContainer';
+import AvatarContainer from '../../../../pages/templates/components/in-app-editor/preview/AvatarContainer';
+import { ParsedPreviewStateType } from '../../../../pages/templates/hooks/usePreviewInAppTemplate';
+import { PreviewEditOverlay } from '../common';
+import {
+  ContentAndOverlayWrapperStyled,
+  ContentStyled,
+  NotificationTextStyled,
+  SkeletonStyled,
+  TimeTextStyled,
+} from './Content.styles';
+
+export default function Content({
+  isPreviewLoading,
+  parsedPreviewState,
+  templateError,
+  showOverlay = true,
+  enableAvatar,
+}: {
+  isPreviewLoading: boolean;
+  parsedPreviewState: ParsedPreviewStateType;
+  templateError: string;
+  showOverlay?: boolean;
+  enableAvatar?: boolean;
+}) {
+  const { isHovered, onMouseEnter, onMouseLeave } = useHover();
+
+  const isBlur = isHovered && showOverlay;
+
+  return (
+    <Stack spacing={16}>
+      <div>
+        <ContentAndOverlayWrapperStyled
+          isError={!!templateError}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+        >
+          {isBlur && <PreviewEditOverlay />}
+          <ContentStyled isBlur={isBlur}>
+            {isPreviewLoading ? (
+              <Skeletons />
+            ) : (
+              <div>
+                <Group spacing={10} align="flex-start">
+                  {enableAvatar && <AvatarContainer opened={false} setOpened={() => {}} readonly={true} />}
+                  <Stack spacing={24}>
+                    <NotificationTextStyled
+                      isExampleNotification={false}
+                      dangerouslySetInnerHTML={{
+                        __html: parsedPreviewState.content as string,
+                      }}
+                      data-test-id="in-app-content-preview"
+                    />
+                    <TimeTextStyled isExampleNotification={false}>5 minutes ago</TimeTextStyled>
+                  </Stack>
+                </Group>
+                {parsedPreviewState.ctaButtons.length > 0 && (
+                  <ActionBlockContainer
+                    value={{
+                      status: MessageActionStatusEnum.PENDING,
+                      buttons: parsedPreviewState.ctaButtons,
+                      result: {},
+                    }}
+                    onChange={() => {}}
+                    onButtonAddClickHandle={() => {}}
+                    onRemoveTemplate={() => {}}
+                    isButtonsTemplateSelected={true}
+                    readonly={true}
+                  />
+                )}
+              </div>
+            )}
+          </ContentStyled>
+        </ContentAndOverlayWrapperStyled>
+        {templateError && !isPreviewLoading && <Text color={colors.error}>{templateError}</Text>}
+      </div>
+
+      <ContentStyled isBlur={false} isExampleNotification>
+        <NotificationTextStyled isExampleNotification>Notification Example</NotificationTextStyled>
+        <TimeTextStyled isExampleNotification>10 minutes ago</TimeTextStyled>
+      </ContentStyled>
+    </Stack>
+  );
+}
+
+const Skeletons = () => {
+  return (
+    <Stack spacing={16} w="100%">
+      <Stack spacing={5}>
+        <SkeletonStyled height={14} width="35%" radius={4} />
+        <SkeletonStyled height={14} width="70%" radius={4} />
+      </Stack>
+      <SkeletonStyled height={14} width="25%" radius={4} />
+    </Stack>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/in-app/Header.tsx b/apps/web/src/components/workflow/preview/in-app/Header.tsx
new file mode 100644
index 00000000000..9ac8fccb46f
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/in-app/Header.tsx
@@ -0,0 +1,36 @@
+import styled from '@emotion/styled';
+import { colors } from '@novu/design-system';
+import { InAppHeaderIcons, LocaleSelect } from '../common';
+
+const LIGHT_THEME_BG = `linear-gradient(270deg, ${colors.B98} 0%, rgba(255, 255, 255, 0.00) 100%);`;
+const DARK_THEME_BG = `linear-gradient(90deg, ${colors.B17} 0%, #24242d 48.44%, #292934 100%), #292933`;
+
+export function Header({ selectedLocale, locales, areLocalesLoading, onLocaleChange }) {
+  return (
+    <ContainerStyled>
+      <div
+        style={{
+          marginRight: 'auto',
+        }}
+      >
+        <LocaleSelect
+          isLoading={areLocalesLoading}
+          locales={locales || []}
+          onLocaleChange={onLocaleChange}
+          value={selectedLocale}
+        />
+      </div>
+      <InAppHeaderIcons />
+    </ContainerStyled>
+  );
+}
+
+const ContainerStyled = styled.div`
+  display: flex;
+  padding: 8px 12px;
+  justify-content: flex-end;
+  align-items: center;
+  align-self: stretch;
+  border-radius: 0px 8px 0px 0px;
+  background: ${({ theme }) => (theme.colorScheme === 'dark' ? DARK_THEME_BG : LIGHT_THEME_BG)};
+`;
diff --git a/apps/web/src/components/workflow/preview/in-app/InAppPreview.tsx b/apps/web/src/components/workflow/preview/in-app/InAppPreview.tsx
new file mode 100644
index 00000000000..93c002d3f11
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/in-app/InAppPreview.tsx
@@ -0,0 +1,105 @@
+import styled from '@emotion/styled';
+import { Grid, JsonInput, useMantineTheme } from '@mantine/core';
+import { Button, colors, inputStyles, When } from '@novu/design-system';
+import { useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { IForm } from '../../../../pages/templates/components/formTypes';
+import { usePreviewInAppTemplate } from '../../../../pages/templates/hooks/usePreviewInAppTemplate';
+import { useStepFormPath } from '../../../../pages/templates/hooks/useStepFormPath';
+import { useTemplateLocales } from '../../../../pages/templates/hooks/useTemplateLocales';
+import Content from './Content';
+import { Header } from './Header';
+import { useProcessVariables } from '../../../../hooks';
+
+export function InAppPreview({ showVariables = true }: { showVariables?: boolean }) {
+  const theme = useMantineTheme();
+  const [payloadValue, setPayloadValue] = useState('{}');
+  const { watch } = useFormContext<IForm>();
+  const path = useStepFormPath();
+
+  const content = watch(`${path}.template.content`);
+  const variables = watch(`${path}.template.variables`);
+  const enableAvatar = watch(`${path}.template.enableAvatar`);
+  const processedVariables = useProcessVariables(variables);
+
+  const { selectedLocale, locales, areLocalesLoading, onLocaleChange } = useTemplateLocales({
+    content: content as string,
+  });
+
+  const { isPreviewLoading, parsedPreviewState, templateError, parseInAppContent } = usePreviewInAppTemplate({
+    locale: selectedLocale,
+  });
+
+  useEffect(() => {
+    setPayloadValue(processedVariables);
+  }, [processedVariables, setPayloadValue]);
+
+  return (
+    <Grid gutter={24}>
+      <Grid.Col span={showVariables ? 8 : 12}>
+        <ContainerStyled removePadding={showVariables}>
+          <Header
+            selectedLocale={selectedLocale}
+            locales={locales}
+            areLocalesLoading={areLocalesLoading}
+            onLocaleChange={onLocaleChange}
+          />
+          <Content
+            isPreviewLoading={isPreviewLoading}
+            parsedPreviewState={parsedPreviewState}
+            templateError={templateError}
+            showOverlay={!showVariables}
+            enableAvatar={enableAvatar}
+          />
+        </ContainerStyled>
+      </Grid.Col>
+
+      <When truthy={showVariables}>
+        <Grid.Col span={4}>
+          <div
+            style={{
+              width: '100%',
+              height: '100%',
+              background: theme.colorScheme === 'dark' ? colors.B17 : colors.B98,
+              borderRadius: 7,
+              padding: 15,
+              paddingTop: 0,
+            }}
+          >
+            <JsonInput
+              data-test-id="preview-json-param"
+              formatOnBlur
+              autosize
+              styles={inputStyles}
+              label="Payload"
+              value={payloadValue}
+              onChange={setPayloadValue}
+              minRows={6}
+              mb={20}
+              validationError="Invalid JSON"
+            />
+            <Button
+              fullWidth
+              onClick={() => {
+                parseInAppContent(payloadValue);
+              }}
+              variant="outline"
+              data-test-id="apply-variables"
+            >
+              Apply Variables
+            </Button>
+          </div>
+        </Grid.Col>
+      </When>
+    </Grid>
+  );
+}
+
+const ContainerStyled = styled.div<{ removePadding: boolean }>`
+  display: flex;
+  padding: 1rem 5rem;
+  flex-direction: column;
+  gap: 1rem;
+
+  ${({ removePadding }) => removePadding && `padding: 0;`}
+`;
diff --git a/apps/web/src/components/workflow/preview/in-app/index.ts b/apps/web/src/components/workflow/preview/in-app/index.ts
new file mode 100644
index 00000000000..91ec7fe5709
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/in-app/index.ts
@@ -0,0 +1 @@
+export * from './InAppPreview';
diff --git a/apps/web/src/components/workflow/preview/index.ts b/apps/web/src/components/workflow/preview/index.ts
new file mode 100644
index 00000000000..d1f93f42d0f
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/index.ts
@@ -0,0 +1,5 @@
+export * from './chat';
+export * from './email';
+export * from './push';
+export * from './sms';
+export * from './in-app';
diff --git a/apps/web/src/components/workflow/preview/push/Content.styles.ts b/apps/web/src/components/workflow/preview/push/Content.styles.ts
new file mode 100644
index 00000000000..6e780b7f7d2
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/push/Content.styles.ts
@@ -0,0 +1,35 @@
+import styled from '@emotion/styled';
+import { colors } from '@novu/design-system';
+
+export const ContentStyled = styled.div<{ isBlur: boolean }>`
+  display: flex;
+  padding: 1rem;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  flex-shrink: 0;
+  border-radius: 0.75rem;
+  background: rgba(255, 255, 255, 0.6);
+  position: relative;
+  overflow: hidden;
+  ${({ isBlur }) => isBlur && 'filter: blur(2px)'};
+`;
+
+export const ContentWrapperStyled = styled.div`
+  padding: 0.5rem;
+  margin-top: 4.5rem;
+`;
+
+export const ContentAndOVerlayWrapperStyled = styled.div<{ isError: boolean }>`
+  overflow: hidden;
+  position: relative;
+  border-radius: 0.75rem;
+  ${({ isError }) => isError && `border: 1px solid ${colors.error};`}
+`;
+
+export const ContentHeaderStyled = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
diff --git a/apps/web/src/components/workflow/preview/push/Content.tsx b/apps/web/src/components/workflow/preview/push/Content.tsx
new file mode 100644
index 00000000000..4321781d695
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/push/Content.tsx
@@ -0,0 +1,130 @@
+import styled from '@emotion/styled';
+import { Flex, Group, Skeleton, Stack, useMantineColorScheme } from '@mantine/core';
+import { colors, Text } from '@novu/design-system';
+import { useFormContext } from 'react-hook-form';
+
+import { useHover } from '../../../../hooks';
+import { IForm } from '../../../../pages/templates/components/formTypes';
+import { usePreviewPushTemplate } from '../../../../pages/templates/hooks/usePreviewPushTemplate';
+import { useStepFormPath } from '../../../../pages/templates/hooks/useStepFormPath';
+import { useTemplateLocales } from '../../../../pages/templates/hooks/useTemplateLocales';
+import { LocaleSelect, PreviewEditOverlay } from '../common';
+import { NovuGreyIcon } from '../common/NovuGreyIcon';
+import {
+  ContentAndOVerlayWrapperStyled,
+  ContentHeaderStyled,
+  ContentStyled,
+  ContentWrapperStyled,
+} from './Content.styles';
+
+export default function Content({
+  showLoading = false,
+  showOverlay = true,
+}: {
+  showLoading?: boolean;
+  showOverlay?: boolean;
+}) {
+  const { isHovered, onMouseEnter, onMouseLeave } = useHover();
+  const { colorScheme } = useMantineColorScheme();
+  const isDark = colorScheme === 'dark';
+
+  const { watch } = useFormContext<IForm>();
+  const path = useStepFormPath();
+
+  const title = watch(`${path}.template.title`);
+  const content = watch(`${path}.template.content`);
+
+  const { selectedLocale, locales, areLocalesLoading, onLocaleChange } = useTemplateLocales({
+    content: content as string,
+    title: title,
+    disabled: showLoading,
+  });
+
+  const { isPreviewLoading, parsedPreviewState, templateError } = usePreviewPushTemplate({
+    disabled: showLoading,
+    locale: selectedLocale,
+  });
+
+  return (
+    <ContentWrapperStyled>
+      <Group>
+        <LocaleSelect
+          isLoading={areLocalesLoading}
+          locales={locales || []}
+          onLocaleChange={onLocaleChange}
+          value={selectedLocale}
+        />
+      </Group>
+      <ContentAndOVerlayWrapperStyled isError={!!templateError} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+        {showOverlay && isHovered && <PreviewEditOverlay />}
+        <ContentStyled isBlur={showOverlay && isHovered}>
+          {isPreviewLoading || showLoading ? (
+            <Skeletons />
+          ) : (
+            <>
+              <ContentHeaderStyled>
+                <Flex align="center" gap={5}>
+                  <NovuGreyIcon color={isDark ? colors.B30 : '#1F1F27'} width="24px" height="24px" />
+                  <Text color={colors.B20} weight="bold">
+                    Your App
+                  </Text>
+                </Flex>
+                <Text color={colors.B60}>now</Text>
+              </ContentHeaderStyled>
+              <div>
+                <Text color={colors.B15} weight="bold" rows={1}>
+                  {parsedPreviewState.title || ''}
+                </Text>
+                <Text color={colors.B15} rows={3}>
+                  {parsedPreviewState.content || ''}
+                </Text>
+              </div>
+            </>
+          )}
+        </ContentStyled>
+      </ContentAndOVerlayWrapperStyled>
+
+      {templateError && !isPreviewLoading && !showLoading && <Text color={colors.error}>{templateError}</Text>}
+    </ContentWrapperStyled>
+  );
+}
+
+const Skeletons = () => {
+  return (
+    <>
+      <HeaderSkeleton />
+      <ContentSkeleton />
+    </>
+  );
+};
+
+const HeaderSkeleton = () => {
+  return (
+    <Group position="apart" noWrap>
+      <Group spacing={16} noWrap>
+        <SkeletonStyled radius={6} height={24} width={24} />
+        <SkeletonStyled height={14} width={80} radius={6} />
+      </Group>
+      <SkeletonStyled height={14} width={40} radius={6} />
+    </Group>
+  );
+};
+
+const ContentSkeleton = () => {
+  return (
+    <Stack spacing={10} w="100%">
+      <SkeletonStyled height={14} width="70%" radius={6} />
+      <SkeletonStyled height={14} width="35%" radius={6} />
+    </Stack>
+  );
+};
+
+const SkeletonStyled = styled(Skeleton)`
+  &::before {
+    background: rgba(0, 0, 0, 0.08);
+  }
+
+  &::after {
+    background: rgba(0, 0, 0, 0.08);
+  }
+`;
diff --git a/apps/web/src/components/workflow/preview/push/PushPreview.tsx b/apps/web/src/components/workflow/preview/push/PushPreview.tsx
new file mode 100644
index 00000000000..edc2be8f3aa
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/push/PushPreview.tsx
@@ -0,0 +1,18 @@
+import { MobileSimulator } from '../common';
+import Content from './Content';
+
+export function PushPreview({
+  showLoading = false,
+  showOverlay = true,
+}: {
+  showLoading?: boolean;
+  showOverlay?: boolean;
+}) {
+  return (
+    <div>
+      <MobileSimulator withBackground>
+        <Content showLoading={showLoading} showOverlay={showOverlay} />
+      </MobileSimulator>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/workflow/preview/push/index.ts b/apps/web/src/components/workflow/preview/push/index.ts
new file mode 100644
index 00000000000..d1231f30f2e
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/push/index.ts
@@ -0,0 +1 @@
+export * from './PushPreview';
diff --git a/apps/web/src/components/workflow/preview/sms/SmsBubble.styles.tsx b/apps/web/src/components/workflow/preview/sms/SmsBubble.styles.tsx
new file mode 100644
index 00000000000..3f7c51a4b04
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/sms/SmsBubble.styles.tsx
@@ -0,0 +1,115 @@
+import styled from '@emotion/styled';
+import { Skeleton } from '@mantine/core';
+import { colors, Text } from '@novu/design-system';
+
+export const SmsBubbleHolder = styled.div`
+  position: relative;
+`;
+
+export const SmsBubbleContainer = styled.div<{ isBlur: boolean; isError: boolean }>`
+  position: relative;
+  width: fit-content;
+  min-width: 10rem;
+  min-height: 2.25rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 1.25rem;
+  background: ${({ isError }) => (isError ? colors.error : '#51ba52')};
+  color: ${colors.white};
+  font-size: 14px;
+  line-height: 1.25rem;
+  filter: ${({ isBlur }) => (isBlur ? 'blur(4px)' : 'none')};
+
+  /**
+   * The bubble tail. Consists from the two parts absolutely positioned to the bubble body.
+   * The parts are represented by rectangles with left bottom border rounded, second sits on top of the first.
+  */
+  &::before {
+    content: '';
+    position: absolute;
+    bottom: -0.125rem;
+    right: -0.5rem;
+    height: 1.25rem;
+    border-right: 1.25rem solid ${({ isError }) => (isError ? colors.error : '#51ba52')};
+    border-bottom-left-radius: 1rem 0.875rem;
+    transform: translate(0, -0.125rem);
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    z-index: 1;
+    bottom: -0.125rem;
+    right: -2.875rem;
+    width: 1rem;
+    height: 1.25rem;
+    background: ${({ theme }) => (theme.colorScheme === 'dark' ? '#4b4b51' : colors.white)};
+    border-bottom-left-radius: 0.625rem;
+    transform: translate(-30px, -0.125rem);
+  }
+`;
+
+export const BubbleText = styled(Text)`
+  overflow: hidden;
+  margin: 0;
+  color: ${colors.white};
+`;
+
+export const Delivered = styled.span`
+  position: absolute;
+  bottom: -1.5rem;
+  right: 0;
+  font-size: 12px;
+  font-weight: 500;
+  color: ${colors.B80};
+`;
+
+export const Error = styled.span`
+  width: max-content;
+  position: absolute;
+  bottom: -1.5rem;
+  right: -0.375rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: ${colors.error};
+`;
+
+export const SkeletonContainer = styled.div`
+  display: flex;
+  gap: 0.625rem;
+`;
+
+export const SkeletonFirstRect = styled(Skeleton)`
+  width: 5rem;
+  height: 1.25rem;
+
+  &::before {
+    background: rgba(255, 255, 255, 0.24);
+  }
+
+  &::after {
+    background: rgba(255, 255, 255, 0.3);
+  }
+`;
+
+export const SkeletonSecondRect = styled(SkeletonFirstRect)`
+  width: 2.5rem;
+`;
+
+export const EditLabel = styled.button`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  min-width: 7.5rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 14px;
+  font-weight: 700;
+  padding: 0;
+  color: ${colors.white};
+  cursor: pointer;
+  outline: none;
+  border: none;
+  background: transparent;
+`;
diff --git a/apps/web/src/components/workflow/preview/sms/SmsBubble.tsx b/apps/web/src/components/workflow/preview/sms/SmsBubble.tsx
new file mode 100644
index 00000000000..a95a56acd22
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/sms/SmsBubble.tsx
@@ -0,0 +1,69 @@
+import { MouseEventHandler, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { PencilOutlined } from '@novu/design-system';
+
+import {
+  BubbleText,
+  Delivered,
+  EditLabel,
+  Error,
+  SkeletonContainer,
+  SkeletonFirstRect,
+  SkeletonSecondRect,
+  SmsBubbleContainer,
+  SmsBubbleHolder,
+} from './SmsBubble.styles';
+
+interface ISmsBubbleProps {
+  className?: string;
+  text?: string;
+  isLoading?: boolean;
+  withOverlay?: boolean;
+  onEditClick?: MouseEventHandler<HTMLButtonElement>;
+  error?: string;
+}
+
+export const SmsBubble: React.FC<ISmsBubbleProps> = ({
+  className,
+  text = '',
+  isLoading,
+  onEditClick,
+  error,
+  withOverlay,
+}) => {
+  const [isHovered, setIsHovered] = useState(false);
+  const isError = !!error;
+  const showEditOverlay = !!withOverlay && isHovered && !isLoading;
+
+  const onEditClickHandler: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
+    e.preventDefault();
+    onEditClick?.(e);
+  };
+
+  return (
+    <SmsBubbleHolder
+      className={className}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {showEditOverlay && (
+        <EditLabel onClick={onEditClickHandler}>
+          <PencilOutlined />
+          Edit message
+        </EditLabel>
+      )}
+      <SmsBubbleContainer isError={isError} isBlur={showEditOverlay}>
+        {isLoading ? (
+          <SkeletonContainer>
+            <SkeletonFirstRect />
+            <SkeletonSecondRect />
+          </SkeletonContainer>
+        ) : (
+          <BubbleText rows={3}>{text}</BubbleText>
+        )}
+        {isError ? <Error>{error}</Error> : <Delivered>Delivered</Delivered>}
+      </SmsBubbleContainer>
+    </SmsBubbleHolder>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/sms/SmsPreview.tsx b/apps/web/src/components/workflow/preview/sms/SmsPreview.tsx
new file mode 100644
index 00000000000..14b476274e0
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/sms/SmsPreview.tsx
@@ -0,0 +1,68 @@
+import styled from '@emotion/styled';
+import { colors } from '@novu/design-system';
+import { useFormContext } from 'react-hook-form';
+import { useLocation } from 'react-router-dom';
+import { IForm } from '../../../../pages/templates/components/formTypes';
+import { useNavigateToStepEditor } from '../../../../pages/templates/hooks/useNavigateToStepEditor';
+import { usePreviewSmsTemplate } from '../../../../pages/templates/hooks/usePreviewSmsTemplate';
+import { useStepFormPath } from '../../../../pages/templates/hooks/useStepFormPath';
+import { useTemplateLocales } from '../../../../pages/templates/hooks/useTemplateLocales';
+import { LocaleSelect, MobileSimulator } from '../common';
+import { SmsBubble } from './SmsBubble';
+
+const BodyContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  margin: auto 1.25rem 2.5rem 1.25rem;
+`;
+
+const LocaleSelectStyled = styled(LocaleSelect)`
+  .mantine-Select-input {
+    color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.white : colors.B60)};
+  }
+
+  .mantine-Input-rightSection {
+    color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.white : colors.B60)} !important;
+  }
+`;
+
+export const SmsPreview = ({ showPreviewAsLoading = false }: { showPreviewAsLoading?: boolean }) => {
+  const { navigateToStepEditor } = useNavigateToStepEditor();
+  const { watch } = useFormContext<IForm>();
+  const path = useStepFormPath();
+  const templateContent = watch(`${path}.template.content`);
+  const { pathname } = useLocation();
+  const isPreviewPath = pathname.endsWith('/preview');
+
+  const { selectedLocale, locales, areLocalesLoading, onLocaleChange } = useTemplateLocales({
+    content: templateContent as string,
+    disabled: showPreviewAsLoading,
+  });
+
+  const { isPreviewContentLoading, previewContent, templateError } = usePreviewSmsTemplate(
+    selectedLocale,
+    showPreviewAsLoading
+  );
+
+  return (
+    <MobileSimulator withBackground={false}>
+      <BodyContainer>
+        <LocaleSelectStyled
+          isLoading={areLocalesLoading}
+          locales={locales}
+          value={selectedLocale}
+          onLocaleChange={onLocaleChange}
+          dropdownPosition="top"
+        />
+        <SmsBubble
+          onEditClick={navigateToStepEditor}
+          isLoading={isPreviewContentLoading || areLocalesLoading}
+          text={previewContent}
+          error={templateError}
+          withOverlay={isPreviewPath}
+        />
+      </BodyContainer>
+    </MobileSimulator>
+  );
+};
diff --git a/apps/web/src/components/workflow/preview/sms/index.ts b/apps/web/src/components/workflow/preview/sms/index.ts
new file mode 100644
index 00000000000..9603d09942c
--- /dev/null
+++ b/apps/web/src/components/workflow/preview/sms/index.ts
@@ -0,0 +1 @@
+export * from './SmsPreview';
diff --git a/apps/web/src/constants/workflowConstants.ts b/apps/web/src/constants/workflowConstants.ts
new file mode 100644
index 00000000000..d05fb67d729
--- /dev/null
+++ b/apps/web/src/constants/workflowConstants.ts
@@ -0,0 +1,4 @@
+export const FIRST_100_WORKFLOWS = {
+  pageIndex: 0,
+  pageSize: 100,
+};
diff --git a/apps/web/src/hooks/index.ts b/apps/web/src/hooks/index.ts
index 18550efc484..00ac42ec831 100644
--- a/apps/web/src/hooks/index.ts
+++ b/apps/web/src/hooks/index.ts
@@ -20,4 +20,5 @@ export * from './useVercelParams';
 export * from './useEffectOnce';
 export * from './useInlineComponent';
 export * from './useHoverOverItem';
+export * from './useHover';
 export { useDataRef, useKeyDown, useLocalThemePreference } from '@novu/shared-web';
diff --git a/apps/web/src/hooks/useCreateInAppIntegration.tsx b/apps/web/src/hooks/useCreateInAppIntegration.tsx
index 175a20264a4..894a7085abc 100644
--- a/apps/web/src/hooks/useCreateInAppIntegration.tsx
+++ b/apps/web/src/hooks/useCreateInAppIntegration.tsx
@@ -1,5 +1,7 @@
-import { ChannelTypeEnum, ICreateIntegrationBodyDto, InAppProviderIdEnum } from '@novu/shared';
+import { ChannelTypeEnum, InAppProviderIdEnum } from '@novu/shared';
+import type { IResponseError, ICreateIntegrationBodyDto } from '@novu/shared';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+
 import { createIntegration } from '../api/integration';
 import { QueryKeys } from '../api/query.keys';
 import { useIntegrations } from './integrations';
@@ -10,7 +12,7 @@ export const useCreateInAppIntegration = (onSuccess: (data: any) => void) => {
 
   const { mutateAsync: createIntegrationApi, isLoading } = useMutation<
     { _id: string; active: boolean },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     ICreateIntegrationBodyDto
   >(createIntegration, {
     onSuccess: (data) => {
diff --git a/apps/web/src/hooks/useHover.ts b/apps/web/src/hooks/useHover.ts
new file mode 100644
index 00000000000..f56ae876294
--- /dev/null
+++ b/apps/web/src/hooks/useHover.ts
@@ -0,0 +1,19 @@
+import { useCallback, useState } from 'react';
+
+export const useHover = () => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  const onMouseEnter = useCallback(() => {
+    setIsHovered(true);
+  }, []);
+
+  const onMouseLeave = useCallback(() => {
+    setIsHovered(false);
+  }, []);
+
+  return {
+    isHovered,
+    onMouseEnter,
+    onMouseLeave,
+  };
+};
diff --git a/apps/web/src/hooks/useLayoutsEditor.ts b/apps/web/src/hooks/useLayoutsEditor.ts
index 5b05088dee9..67e5ef301e0 100644
--- a/apps/web/src/hooks/useLayoutsEditor.ts
+++ b/apps/web/src/hooks/useLayoutsEditor.ts
@@ -1,7 +1,8 @@
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import type { ILayoutEntity, IResponseError } from '@novu/shared';
+
 import { QueryKeys } from '../api/query.keys';
 import { createLayout, getLayoutById, updateLayoutById } from '../api/layouts';
-import { ILayoutEntity } from '@novu/shared';
 
 export function useLayoutsEditor(id: string) {
   const queryClient = useQueryClient();
@@ -13,7 +14,7 @@ export function useLayoutsEditor(id: string) {
 
   const { mutateAsync: updateLayout, isLoading: isLoadingUpdate } = useMutation<
     ILayoutEntity,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { layoutId: string; data: any }
   >(({ layoutId, data }) => updateLayoutById(layoutId, data), {
     onSuccess: () => {
diff --git a/apps/web/src/hooks/useOnboardingExperiment.ts b/apps/web/src/hooks/useOnboardingExperiment.ts
new file mode 100644
index 00000000000..25597c96caa
--- /dev/null
+++ b/apps/web/src/hooks/useOnboardingExperiment.ts
@@ -0,0 +1,17 @@
+import { ChannelTypeEnum, EmailProviderIdEnum } from '@novu/shared';
+
+import { useIntegrations } from './integrations';
+import { IS_DOCKER_HOSTED } from '../config';
+
+export function useOnboardingExperiment() {
+  const { integrations, loading: areIntegrationsLoading } = useIntegrations();
+
+  const emailIntegrationOtherThanNovu = integrations?.find(
+    (integration) =>
+      integration.channel === ChannelTypeEnum.EMAIL && integration.providerId !== EmailProviderIdEnum.Novu
+  );
+
+  return {
+    isOnboardingExperimentEnabled: !areIntegrationsLoading && !emailIntegrationOtherThanNovu && !IS_DOCKER_HOSTED,
+  };
+}
diff --git a/apps/web/src/hooks/useProcessVariables.ts b/apps/web/src/hooks/useProcessVariables.ts
index 4e5b801bbbd..91edfb63a87 100644
--- a/apps/web/src/hooks/useProcessVariables.ts
+++ b/apps/web/src/hooks/useProcessVariables.ts
@@ -1,4 +1,4 @@
-import { TemplateVariableTypeEnum, IMustacheVariable } from '@novu/shared';
+import { TemplateVariableTypeEnum, IMustacheVariable, ITemplateVariable } from '@novu/shared';
 import { useEffect, useState } from 'react';
 import * as set from 'lodash.set';
 import * as get from 'lodash.get';
@@ -36,7 +36,7 @@ const getVariableValue = (variable: IMustacheVariable) => {
   return '';
 };
 
-export const useProcessVariables = (variables, asString = true) => {
+export const useProcessVariables = (variables: ITemplateVariable[] | undefined = [], asString = true) => {
   const [processedVariables, setProcessedVariables] = useState(JSON.stringify({}, null, 2));
 
   useEffect(() => {
diff --git a/apps/web/src/hooks/useTemplates.ts b/apps/web/src/hooks/useTemplates.ts
index 8e451e4e989..3689f5d842a 100644
--- a/apps/web/src/hooks/useTemplates.ts
+++ b/apps/web/src/hooks/useTemplates.ts
@@ -1,4 +1,5 @@
 import { INotificationTemplate, WorkflowIntegrationStatus } from '@novu/shared';
+import { IUsePaginationStateOptions } from '@novu/design-system';
 
 import { useEnvController } from './useEnvController';
 import { getNotificationsList } from '../api/notification-templates';
@@ -12,7 +13,14 @@ export type INotificationTemplateExtended = INotificationTemplate & {
 };
 
 /** allow override of paginated inputs */
-export function useTemplates(pageIndex?: number, pageSize?: number) {
+export function useTemplates({
+  pageIndex,
+  pageSize,
+  areSearchParamsEnabled = false,
+}: {
+  pageIndex?: IUsePaginationStateOptions['startingPageNumber'];
+  pageSize?: IUsePaginationStateOptions['startingPageSize'];
+} & Pick<IUsePaginationStateOptions, 'areSearchParamsEnabled'> = {}) {
   const { environment } = useEnvController();
 
   const {
@@ -30,11 +38,16 @@ export function useTemplates(pageIndex?: number, pageSize?: number) {
     buildQueryFn:
       ({ pageIndex: ctxPageIndex, pageSize: ctxPageSize }) =>
       () =>
-        getNotificationsList(pageIndex ?? ctxPageIndex, pageSize ?? ctxPageSize),
+        getNotificationsList(ctxPageIndex, ctxPageSize),
     getTotalItemCount: (resp) => resp.totalCount,
     queryOptions: {
       keepPreviousData: true,
     },
+    paginationOptions: {
+      areSearchParamsEnabled,
+      startingPageNumber: (pageIndex ?? 0) + 1,
+      startingPageSize: pageSize,
+    },
   });
 
   return {
diff --git a/apps/web/src/pages/activities/ActivitiesPage.tsx b/apps/web/src/pages/activities/ActivitiesPage.tsx
index 66c7bb1f0f4..96ff5fe6124 100644
--- a/apps/web/src/pages/activities/ActivitiesPage.tsx
+++ b/apps/web/src/pages/activities/ActivitiesPage.tsx
@@ -15,6 +15,7 @@ import { ActivityList } from './components/ActivityList';
 import { ExecutionDetailsModal } from '../../components/execution-detail/ExecutionDetailsModal';
 import { IActivityGraphStats } from './interfaces';
 import { Flex } from '@mantine/core';
+import { FIRST_100_WORKFLOWS } from '../../constants/workflowConstants';
 
 const FiltersContainer = styled.div`
   gap: 15px;
@@ -38,7 +39,7 @@ const initialFormState: IFiltersForm = {
 };
 
 export function ActivitiesPage() {
-  const { templates, loading: loadingTemplates } = useTemplates(0, 100);
+  const { templates, loading: loadingTemplates } = useTemplates(FIRST_100_WORKFLOWS);
   const [page, setPage] = useState<number>(0);
   const [isModalOpen, setToggleModal] = useState<boolean>(false);
   const [notificationId, setNotificationId] = useState<string>('');
@@ -53,10 +54,6 @@ export function ActivitiesPage() {
     setFilters((old) => ({ ...old, ...formData }));
   }
 
-  const debouncedTransactionIdChange = useDebounce((transactionId: string) => {
-    onFiltersChange({ transactionId });
-  }, 500);
-
   function handleTableChange(pageIndex) {
     setPage(pageIndex);
   }
diff --git a/apps/web/src/pages/auth/components/LoginForm.tsx b/apps/web/src/pages/auth/components/LoginForm.tsx
index f33c0010149..ffcc4448dde 100644
--- a/apps/web/src/pages/auth/components/LoginForm.tsx
+++ b/apps/web/src/pages/auth/components/LoginForm.tsx
@@ -4,8 +4,8 @@ import { useMutation } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
 import * as Sentry from '@sentry/react';
 import { Center } from '@mantine/core';
-
 import { PasswordInput, Button, colors, Input, Text } from '@novu/design-system';
+import type { IResponseError } from '@novu/shared';
 
 import { useAuthContext } from '../../../components/providers/AuthProvider';
 import { api } from '../../../api/api.client';
@@ -24,7 +24,7 @@ export function LoginForm({ email, invitationToken }: LoginFormProps) {
   const { setToken } = useAuthContext();
   const { isLoading, mutateAsync, isError, error } = useMutation<
     { token: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     {
       email: string;
       password: string;
diff --git a/apps/web/src/pages/auth/components/PasswordResetForm.tsx b/apps/web/src/pages/auth/components/PasswordResetForm.tsx
index 3fe0930873b..540bbedde8c 100644
--- a/apps/web/src/pages/auth/components/PasswordResetForm.tsx
+++ b/apps/web/src/pages/auth/components/PasswordResetForm.tsx
@@ -4,6 +4,7 @@ import { useForm } from 'react-hook-form';
 import * as Sentry from '@sentry/react';
 import { showNotification } from '@mantine/notifications';
 import { passwordConstraints } from '@novu/shared';
+import type { IResponseError } from '@novu/shared';
 
 import { useAuthContext } from '../../../components/providers/AuthProvider';
 import { api } from '../../../api/api.client';
@@ -21,7 +22,7 @@ export function PasswordResetForm({ token }: Props) {
   const navigate = useNavigate();
   const { isLoading, mutateAsync, isError, error } = useMutation<
     { token: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     {
       password: string;
       token: string;
diff --git a/apps/web/src/pages/auth/components/PasswordResetRequestForm.tsx b/apps/web/src/pages/auth/components/PasswordResetRequestForm.tsx
index 4eba2bee996..4d86a73bdc6 100644
--- a/apps/web/src/pages/auth/components/PasswordResetRequestForm.tsx
+++ b/apps/web/src/pages/auth/components/PasswordResetRequestForm.tsx
@@ -3,9 +3,10 @@ import * as Sentry from '@sentry/react';
 import { Link } from 'react-router-dom';
 import { useForm } from 'react-hook-form';
 import { Center } from '@mantine/core';
+import { Button, colors, Input, Text } from '@novu/design-system';
+import type { IResponseError } from '@novu/shared';
 
 import { api } from '../../../api/api.client';
-import { Button, colors, Input, Text } from '@novu/design-system';
 import { useVercelParams } from '../../../hooks';
 import { ROUTES } from '../../../constants/routes.enum';
 
@@ -16,7 +17,7 @@ type Props = {
 export function PasswordResetRequestForm({ onSent }: Props) {
   const { isLoading, mutateAsync, isError, error } = useMutation<
     { success: boolean },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     {
       email: string;
     }
diff --git a/apps/web/src/pages/auth/components/QuestionnaireForm.tsx b/apps/web/src/pages/auth/components/QuestionnaireForm.tsx
index 25c637537c8..87637db5e36 100644
--- a/apps/web/src/pages/auth/components/QuestionnaireForm.tsx
+++ b/apps/web/src/pages/auth/components/QuestionnaireForm.tsx
@@ -5,14 +5,8 @@ import { useMutation } from '@tanstack/react-query';
 import decode from 'jwt-decode';
 import { Group, Input as MantineInput } from '@mantine/core';
 
-import {
-  ICreateOrganizationDto,
-  IJwtPayload,
-  JobTitleEnum,
-  jobTitleToLabelMapper,
-  ProductUseCases,
-  ProductUseCasesEnum,
-} from '@novu/shared';
+import { JobTitleEnum, jobTitleToLabelMapper, ProductUseCasesEnum } from '@novu/shared';
+import type { ProductUseCases, IResponseError, ICreateOrganizationDto, IJwtPayload } from '@novu/shared';
 import {
   Button,
   Input,
@@ -41,7 +35,7 @@ export function QuestionnaireForm() {
 
   const { mutateAsync: createOrganizationMutation } = useMutation<
     { _id: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     ICreateOrganizationDto
   >((data: ICreateOrganizationDto) => api.post(`/v1/organizations`, data));
 
diff --git a/apps/web/src/pages/auth/components/SignUpForm.tsx b/apps/web/src/pages/auth/components/SignUpForm.tsx
index 77bf27dbb26..5ae9274d156 100644
--- a/apps/web/src/pages/auth/components/SignUpForm.tsx
+++ b/apps/web/src/pages/auth/components/SignUpForm.tsx
@@ -4,8 +4,8 @@ import { useMutation } from '@tanstack/react-query';
 import { useForm } from 'react-hook-form';
 import { Center } from '@mantine/core';
 import { showNotification } from '@mantine/notifications';
-
-import { passwordConstraints } from '@novu/shared';
+import { passwordConstraints, UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+import type { IResponseError } from '@novu/shared';
 import { PasswordInput, Button, colors, Input, Text, Checkbox } from '@novu/design-system';
 
 import { useAuthContext } from '../../../components/providers/AuthProvider';
@@ -42,7 +42,7 @@ export function SignUpForm({ invitationToken, email }: SignUpFormProps) {
 
   const { isLoading, mutateAsync, isError, error } = useMutation<
     { token: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     {
       firstName: string;
       lastName: string;
@@ -223,13 +223,18 @@ function Accept() {
   return (
     <>
       <span>I accept the </span>
-      <a style={{ textDecoration: 'underline' }} href="https://novu.co/terms" target="_blank" rel="noopener noreferrer">
+      <a
+        style={{ textDecoration: 'underline' }}
+        href={`https://novu.co/terms${UTM_CAMPAIGN_QUERY_PARAM}`}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
         Terms and Conditions
       </a>
       <span> and have read the </span>
       <a
         style={{ textDecoration: 'underline' }}
-        href="https://novu.co/privacy"
+        href={`https://novu.co/privacy${UTM_CAMPAIGN_QUERY_PARAM}`}
         target="_blank"
         rel="noopener noreferrer"
       >
diff --git a/apps/web/src/pages/auth/components/useAcceptInvite.ts b/apps/web/src/pages/auth/components/useAcceptInvite.ts
index dcbe13f28b8..e9029bf39ac 100644
--- a/apps/web/src/pages/auth/components/useAcceptInvite.ts
+++ b/apps/web/src/pages/auth/components/useAcceptInvite.ts
@@ -2,6 +2,7 @@ import { useCallback } from 'react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import * as Sentry from '@sentry/react';
+import type { IResponseError } from '@novu/shared';
 
 import { api } from '../../../api/api.client';
 import { useAuthContext } from '../../../components/providers/AuthProvider';
@@ -14,11 +15,9 @@ export function useAcceptInvite() {
   const navigate = useNavigate();
   const queryClient = useQueryClient();
 
-  const { isLoading, mutateAsync, error, isError } = useMutation<
-    string,
-    { error: string; message: string; statusCode: number },
-    string
-  >((tokenItem) => api.post(`/v1/invites/${tokenItem}/accept`, {}));
+  const { isLoading, mutateAsync, error, isError } = useMutation<string, IResponseError, string>((tokenItem) =>
+    api.post(`/v1/invites/${tokenItem}/accept`, {})
+  );
 
   const submitToken = useCallback(
     async (token: string, invitationToken: string, refetch = false) => {
diff --git a/apps/web/src/pages/brand/tabs/BrandingForm.tsx b/apps/web/src/pages/brand/tabs/BrandingForm.tsx
index b09ec508bae..b2d4bb73fa6 100644
--- a/apps/web/src/pages/brand/tabs/BrandingForm.tsx
+++ b/apps/web/src/pages/brand/tabs/BrandingForm.tsx
@@ -6,13 +6,12 @@ import { useEffect, useRef } from 'react';
 import { Controller, useForm } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { useOutletContext } from 'react-router-dom';
-import { IOrganizationEntity } from '@novu/shared';
+import type { IResponseError, IOrganizationEntity } from '@novu/shared';
+import { Button, ColorInput, colors, Select, inputStyles, Upload, Trash } from '@novu/design-system';
 
 import { updateBrandingSettings } from '../../../api/organization';
 import { getSignedUrl } from '../../../api/storage';
 import Card from '../../../components/layout/components/Card';
-import { Button, ColorInput, colors, Select, inputStyles, Upload, Trash } from '@novu/design-system';
-
 import { successMessage } from '../../../utils/notifications';
 
 const mimeTypes = {
@@ -26,7 +25,7 @@ export function BrandingForm() {
   }>();
   const { mutateAsync: getSignedUrlAction } = useMutation<
     { signedUrl: string; path: string; additionalHeaders: object },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     string
   >(getSignedUrl);
   const { setValue, handleSubmit, control } = useForm({
@@ -41,7 +40,7 @@ export function BrandingForm() {
 
   const { mutateAsync: updateBrandingSettingsMutation, isLoading: isUpdateBrandingLoading } = useMutation<
     { logo: string; path: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { logo: string | undefined; color: string | undefined }
   >(updateBrandingSettings);
 
diff --git a/apps/web/src/pages/changes/components/ChangesTableLayout.tsx b/apps/web/src/pages/changes/components/ChangesTableLayout.tsx
index c120794f57f..758269f6284 100644
--- a/apps/web/src/pages/changes/components/ChangesTableLayout.tsx
+++ b/apps/web/src/pages/changes/components/ChangesTableLayout.tsx
@@ -54,7 +54,7 @@ export const ChangesTable = ({
       Cell: withCellLoading(
         ({
           row: {
-            original: { type, templateName, messageType, previousDefaultLayout },
+            original: { type, templateName, messageType, previousDefaultLayout, translationGroup },
           },
         }) => (
           <div data-test-id="change-type">
@@ -88,6 +88,7 @@ export const ChangesTable = ({
               </Text>
             )}
             <Text data-test-id="change-content" rows={1} mt={5}>
+              {translationGroup ? `${translationGroup}, ` : null}
               {templateName}
               {messageType ? `, ${messageType}` : null}
             </Text>
diff --git a/apps/web/src/pages/integrations/components/ConnectIntegrationForm.tsx b/apps/web/src/pages/integrations/components/ConnectIntegrationForm.tsx
index dd0bec585ed..62975caaa21 100644
--- a/apps/web/src/pages/integrations/components/ConnectIntegrationForm.tsx
+++ b/apps/web/src/pages/integrations/components/ConnectIntegrationForm.tsx
@@ -6,13 +6,8 @@ import { showNotification } from '@mantine/notifications';
 import { useClipboard } from '@mantine/hooks';
 import { Image, useMantineColorScheme, Stack, Alert } from '@mantine/core';
 import { WarningOutlined } from '@ant-design/icons';
-import {
-  ChannelTypeEnum,
-  ICredentialsDto,
-  IConfigCredentials,
-  ICreateIntegrationBodyDto,
-  CredentialsKeyEnum,
-} from '@novu/shared';
+import { ChannelTypeEnum, CredentialsKeyEnum } from '@novu/shared';
+import type { IResponseError, ICredentialsDto, IConfigCredentials, ICreateIntegrationBodyDto } from '@novu/shared';
 
 import { Button, colors, Input, Switch, Text, Close, Check, Copy } from '@novu/design-system';
 import type { IIntegratedProvider } from '../types';
@@ -105,13 +100,13 @@ export function ConnectIntegrationForm({
 
   const { mutateAsync: createIntegrationApi, isLoading: isLoadingCreate } = useMutation<
     { res: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     ICreateIntegrationBodyDto
   >(createIntegration);
 
   const { mutateAsync: updateIntegrationApi, isLoading: isLoadingUpdate } = useMutation<
     { res: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     {
       integrationId: string;
       data: { credentials: ICredentialsDto; active: boolean; check: boolean };
diff --git a/apps/web/src/pages/integrations/components/FrameworkDisplay.tsx b/apps/web/src/pages/integrations/components/FrameworkDisplay.tsx
index b369e148273..2c339646dcf 100644
--- a/apps/web/src/pages/integrations/components/FrameworkDisplay.tsx
+++ b/apps/web/src/pages/integrations/components/FrameworkDisplay.tsx
@@ -2,6 +2,8 @@ import { Text, UnstyledButton, Group, useMantineTheme } from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
 import { colors } from '@novu/notification-center';
 import { AngularGradient, Copy, ReactGradient, VueGradient, JsGradient, CodeGradient } from '@novu/design-system';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+
 import { useEnvController } from '../../../hooks';
 import { FrameworkEnum } from '../../quick-start/consts';
 
@@ -82,7 +84,7 @@ export const FrameworkDisplay = ({ setFramework }: { setFramework: (framework: s
       </Group>
       <Group spacing={16} mt={16} grow>
         <a
-          href="https://docs.novu.co/notification-center/client/web-component"
+          href={`https://docs.novu.co/notification-center/client/web-component${UTM_CAMPAIGN_QUERY_PARAM}`}
           onClick={() => {
             setFramework('');
           }}
@@ -96,7 +98,7 @@ export const FrameworkDisplay = ({ setFramework }: { setFramework: (framework: s
           </Group>
         </a>
         <a
-          href="https://docs.novu.co/notification-center/client/headless/get-started"
+          href={`https://docs.novu.co/notification-center/client/headless/get-started${UTM_CAMPAIGN_QUERY_PARAM}`}
           onClick={() => {
             setFramework('');
           }}
diff --git a/apps/web/src/pages/integrations/components/Modal/ConnectIntegrationForm.tsx b/apps/web/src/pages/integrations/components/Modal/ConnectIntegrationForm.tsx
index d5160ee3fe1..79dd88c2a6b 100644
--- a/apps/web/src/pages/integrations/components/Modal/ConnectIntegrationForm.tsx
+++ b/apps/web/src/pages/integrations/components/Modal/ConnectIntegrationForm.tsx
@@ -1,24 +1,22 @@
 import { useEffect, useReducer, useRef } from 'react';
-import { Control, Controller, FieldValues, useForm, useWatch } from 'react-hook-form';
+import { Controller, useForm, useWatch } from 'react-hook-form';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { useClipboard } from '@mantine/hooks';
 import { ActionIcon, Alert, Center, Image, Stack, useMantineColorScheme } from '@mantine/core';
 import { WarningOutlined } from '@ant-design/icons';
-import {
-  ChannelTypeEnum,
-  ChatProviderIdEnum,
-  CredentialsKeyEnum,
+import { ChannelTypeEnum, ChatProviderIdEnum, CredentialsKeyEnum, ProvidersIdEnum } from '@novu/shared';
+import type {
+  IResponseError,
   IConfigCredentials,
   ICreateIntegrationBodyDto,
   ICredentialsDto,
   IEnvironment,
   IOrganizationEntity,
-  ProvidersIdEnum,
 } from '@novu/shared';
 import styled from '@emotion/styled';
 import { keyframes } from '@emotion/react';
-
 import { Button, colors, Input, shadows, Switch, Text, Close, Check, Copy } from '@novu/design-system';
+
 import type { IIntegratedProvider } from '../../types';
 import { createIntegration, getWebhookSupportStatus, updateIntegration } from '../../../../api/integration';
 import { IntegrationInput } from '../IntegrationInput';
@@ -141,13 +139,13 @@ export function ConnectIntegrationForm({
 
   const { mutateAsync: createIntegrationApi, isLoading: isLoadingCreate } = useMutation<
     { res: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     ICreateIntegrationBodyDto
   >(createIntegration);
 
   const { mutateAsync: updateIntegrationApi, isLoading: isLoadingUpdate } = useMutation<
     { res: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     {
       integrationId: string;
       data: { credentials: ICredentialsDto; active: boolean; check: boolean };
diff --git a/apps/web/src/pages/integrations/components/NovuInAppForm.tsx b/apps/web/src/pages/integrations/components/NovuInAppForm.tsx
index 538e8b8e485..1c8a44139ef 100644
--- a/apps/web/src/pages/integrations/components/NovuInAppForm.tsx
+++ b/apps/web/src/pages/integrations/components/NovuInAppForm.tsx
@@ -3,11 +3,12 @@ import styled from '@emotion/styled/macro';
 import { Title, Text, Grid, Stack, useMantineColorScheme } from '@mantine/core';
 import { useMutation } from '@tanstack/react-query';
 import { Controller, useForm } from 'react-hook-form';
-import { ICredentialsDto } from '@novu/shared';
+import type { IResponseError, ICredentialsDto } from '@novu/shared';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+import { Switch, Button, colors, CircleArrowRight } from '@novu/design-system';
 
 import { IIntegratedProvider } from '../types';
 import { updateIntegration } from '../../../api/integration';
-import { Switch, Button, colors, CircleArrowRight } from '@novu/design-system';
 import { When } from '../../../components/utils/When';
 import { errorMessage, successMessage } from '../../../utils/notifications';
 
@@ -26,7 +27,7 @@ export const NovuInAppForm = ({
 
   const { mutateAsync: updateIntegrationApi, isLoading: isLoadingUpdate } = useMutation<
     { res: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     {
       integrationId: string;
       data: { credentials: ICredentialsDto; active: boolean; check: boolean };
@@ -129,7 +130,9 @@ export const NovuInAppForm = ({
           </Text>
           <CircleArrowRightStyled
             onClick={() => {
-              window.open('https://docs.novu.co/notification-center/client/iframe#enabling-hmac-encryption');
+              window.open(
+                `https://docs.novu.co/notification-center/client/iframe${UTM_CAMPAIGN_QUERY_PARAM}#enabling-hmac-encryption`
+              );
             }}
           />
         </WarningMessage>
diff --git a/apps/web/src/pages/integrations/components/NovuInAppFrameworks.tsx b/apps/web/src/pages/integrations/components/NovuInAppFrameworks.tsx
index a5060b4b775..cac971815d9 100644
--- a/apps/web/src/pages/integrations/components/NovuInAppFrameworks.tsx
+++ b/apps/web/src/pages/integrations/components/NovuInAppFrameworks.tsx
@@ -1,6 +1,7 @@
 import styled from '@emotion/styled';
-
 import { colors, Text, ReactLogo, AngularLogo, JavaScriptLogo, VueLogo, IframeLogo } from '@novu/design-system';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+
 import { FrameworkEnum } from '../../quick-start/consts';
 
 const NovuInAppFrameworksHolder = styled.div`
@@ -46,12 +47,12 @@ const frameworks = [
   {
     icon: JavaScriptLogo,
     name: 'Web Component',
-    href: 'https://docs.novu.co/notification-center/client/web-component',
+    href: `https://docs.novu.co/notification-center/client/web-component${UTM_CAMPAIGN_QUERY_PARAM}`,
   },
   {
     icon: JavaScriptLogo,
     name: 'Headless',
-    href: 'https://docs.novu.co/notification-center/client/headless/get-started',
+    href: `https://docs.novu.co/notification-center/client/headless/get-started${UTM_CAMPAIGN_QUERY_PARAM}`,
   },
   { icon: VueLogo, name: 'Vue', frameworkEnum: FrameworkEnum.VUE },
   { icon: IframeLogo, name: 'iFrame', frameworkEnum: FrameworkEnum.JS },
diff --git a/apps/web/src/pages/integrations/components/NovuProviderBase.tsx b/apps/web/src/pages/integrations/components/NovuProviderBase.tsx
index ba03c18b9a7..59f5feaa7b5 100644
--- a/apps/web/src/pages/integrations/components/NovuProviderBase.tsx
+++ b/apps/web/src/pages/integrations/components/NovuProviderBase.tsx
@@ -1,10 +1,11 @@
 import React from 'react';
 import styled from '@emotion/styled';
 import { Stack, Text, useMantineColorScheme } from '@mantine/core';
-import { ChannelTypeEnum } from '@novu/shared';
+import { ChannelTypeEnum, UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+import { colors, Close } from '@novu/design-system';
+
 import { When } from '../../../components/utils/When';
 import { CONTEXT_PATH } from '../../../config';
-import { colors, Close } from '@novu/design-system';
 import { useIntegrationLimit } from '../../../hooks';
 import { LimitBar } from './LimitBar';
 
@@ -53,7 +54,7 @@ export function NovuProviderBase({ onClose, senderInformation, channel }: NovuPr
           <InlineDiv>
             <span>Read more about Integrations in</span>
             <a
-              href="https://docs.novu.co/channels-and-providers/integration-store"
+              href={`https://docs.novu.co/channels-and-providers/integration-store${UTM_CAMPAIGN_QUERY_PARAM}`}
               target="_blank"
               rel="noreferrer"
               style={{ color: '#DD2476 ', textDecoration: 'underline' }}
diff --git a/apps/web/src/pages/integrations/components/multi-provider/CreateProviderInstanceSidebar.tsx b/apps/web/src/pages/integrations/components/multi-provider/CreateProviderInstanceSidebar.tsx
index 2a1a74e2bdd..e836e6b43f3 100644
--- a/apps/web/src/pages/integrations/components/multi-provider/CreateProviderInstanceSidebar.tsx
+++ b/apps/web/src/pages/integrations/components/multi-provider/CreateProviderInstanceSidebar.tsx
@@ -4,7 +4,8 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Controller, useForm } from 'react-hook-form';
 import styled from '@emotion/styled';
 import { useDisclosure } from '@mantine/hooks';
-import { ChannelTypeEnum, ICreateIntegrationBodyDto, NOVU_PROVIDERS, providers } from '@novu/shared';
+import { ChannelTypeEnum, NOVU_PROVIDERS, providers } from '@novu/shared';
+import type { IResponseError, ICreateIntegrationBodyDto } from '@novu/shared';
 import {
   ActionButton,
   Button,
@@ -67,7 +68,7 @@ export function CreateProviderInstanceSidebar({
 
   const { mutateAsync: createIntegrationApi, isLoading: isLoadingCreate } = useMutation<
     IntegrationEntity,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     ICreateIntegrationBodyDto
   >(createIntegration);
 
diff --git a/apps/web/src/pages/invites/MembersInvitePage.tsx b/apps/web/src/pages/invites/MembersInvitePage.tsx
index 8ad57c66205..57fdde94fa3 100644
--- a/apps/web/src/pages/invites/MembersInvitePage.tsx
+++ b/apps/web/src/pages/invites/MembersInvitePage.tsx
@@ -5,6 +5,7 @@ import { showNotification } from '@mantine/notifications';
 import { Container, Group } from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
 import { MemberRoleEnum } from '@novu/shared';
+import type { IResponseError } from '@novu/shared';
 
 import PageHeader from '../../components/layout/components/PageHeader';
 import PageContainer from '../../components/layout/components/PageContainer';
@@ -34,11 +35,9 @@ export function MembersInvitePage() {
     refetch,
   } = useQuery<any[]>(['getOrganizationMembers'], getOrganizationMembers);
 
-  const { isLoading: loadingSendInvite, mutateAsync: sendInvite } = useMutation<
-    string,
-    { error: string; message: string; statusCode: number },
-    string
-  >((email) => inviteMember(email));
+  const { isLoading: loadingSendInvite, mutateAsync: sendInvite } = useMutation<string, IResponseError, string>(
+    (email) => inviteMember(email)
+  );
 
   async function onSubmit({ email }) {
     if (!email) return;
diff --git a/apps/web/src/pages/quick-start/components/ChannelsConfiguration.tsx b/apps/web/src/pages/quick-start/components/ChannelsConfiguration.tsx
index 575bda9cdf0..ff7705e16be 100644
--- a/apps/web/src/pages/quick-start/components/ChannelsConfiguration.tsx
+++ b/apps/web/src/pages/quick-start/components/ChannelsConfiguration.tsx
@@ -3,14 +3,16 @@ import { useNavigate } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { Grid } from '@mantine/core';
 import { ChannelTypeEnum, InAppProviderIdEnum } from '@novu/shared';
+import { ActiveLabel, Button, colors } from '@novu/design-system';
 
 import { IQuickStartChannelConfiguration, OnBoardingAnalyticsEnum, quickStartChannels } from '../consts';
 import { When } from '../../../components/utils/When';
-import { ActiveLabel, Button, colors } from '@novu/design-system';
 import { useSegment } from '../../../components/providers/SegmentProvider';
 import { useActiveIntegrations, useIntegrationLimit } from '../../../hooks';
 import type { IntegrationEntity } from '../../integrations/types';
 import { useCreateInAppIntegration } from '../../../hooks/useCreateInAppIntegration';
+import { useCreateOnboardingExperimentWorkflow } from '../../../api/hooks/notification-templates/useCreateOnboardingExperimentWorkflow';
+import { useOnboardingExperiment } from '../../../hooks/useOnboardingExperiment';
 
 export function ChannelsConfiguration({ setClickedChannel }: { setClickedChannel: Dispatch<any> }) {
   const segment = useSegment();
@@ -18,23 +20,36 @@ export function ChannelsConfiguration({ setClickedChannel }: { setClickedChannel
   const { integrations } = useActiveIntegrations();
   const { isLimitReached } = useIntegrationLimit(ChannelTypeEnum.EMAIL);
   const { create, isLoading } = useCreateInAppIntegration((data: any) => {});
+  const {
+    createOnboardingExperimentWorkflow,
+    isLoading: IsCreateOnboardingExpWorkflowLoading,
+    isDisabled: isIsCreateOnboardingExpWorkflowDisabled,
+  } = useCreateOnboardingExperimentWorkflow();
+  const { isOnboardingExperimentEnabled } = useOnboardingExperiment();
 
   function trackClick(channel: IQuickStartChannelConfiguration, integrationActive: boolean) {
-    if (integrationActive) {
-      let providerId = getActiveIntegration(integrations, channel)?.providerId;
-
-      if (channel.type === ChannelTypeEnum.EMAIL && !providerId) {
-        providerId = InAppProviderIdEnum.Novu;
-      }
-
-      segment.track(OnBoardingAnalyticsEnum.UPDATE_PROVIDER_CLICK, {
-        channel: channel.type,
-        provider: providerId,
+    if (isOnboardingExperimentEnabled && channel.type === ChannelTypeEnum.EMAIL) {
+      segment.track(OnBoardingAnalyticsEnum.ONBOARDING_EXPERIMENT_TEST_NOTIFICATION, {
+        action: 'Get started - Send test notification',
+        experiment_id: '2024-w9-onb',
       });
     } else {
-      segment.track(OnBoardingAnalyticsEnum.CONFIGURE_PROVIDER_CLICK, {
-        channel: channel.type,
-      });
+      if (integrationActive) {
+        let providerId = getActiveIntegration(integrations, channel)?.providerId;
+
+        if (channel.type === ChannelTypeEnum.EMAIL && !providerId) {
+          providerId = InAppProviderIdEnum.Novu;
+        }
+
+        segment.track(OnBoardingAnalyticsEnum.UPDATE_PROVIDER_CLICK, {
+          channel: channel.type,
+          provider: providerId,
+        });
+      } else {
+        segment.track(OnBoardingAnalyticsEnum.CONFIGURE_PROVIDER_CLICK, {
+          channel: channel.type,
+        });
+      }
     }
   }
 
@@ -46,6 +61,7 @@ export function ChannelsConfiguration({ setClickedChannel }: { setClickedChannel
         if (channel.type === ChannelTypeEnum.EMAIL) {
           isIntegrationActive = isIntegrationActive || !isLimitReached;
         }
+        const isOnboardingExperiment = isOnboardingExperimentEnabled && channel.type === ChannelTypeEnum.EMAIL;
 
         return (
           <CardCol span={5} key={index}>
@@ -62,23 +78,35 @@ export function ChannelsConfiguration({ setClickedChannel }: { setClickedChannel
                 </TitleRow>
                 <Description>{channel.description}</Description>
                 <StyledButton
-                  loading={isLoading}
-                  variant={'outline'}
+                  loading={
+                    isLoading || (channel.type === ChannelTypeEnum.EMAIL && IsCreateOnboardingExpWorkflowLoading)
+                  }
+                  disabled={channel.type === ChannelTypeEnum.EMAIL && isIsCreateOnboardingExpWorkflowDisabled}
+                  pulse={isOnboardingExperiment}
+                  fullWidth={isOnboardingExperiment}
+                  variant={isOnboardingExperiment ? 'gradient' : 'outline'}
                   onClick={async () => {
                     trackClick(channel, isIntegrationActive);
 
                     if (channel.type === ChannelTypeEnum.IN_APP) {
                       await create();
                     }
-
-                    channel.clickHandler({
-                      navigate,
-                      setClickedChannel,
-                      channelType: channel.type,
-                    });
+                    if (isOnboardingExperiment) {
+                      createOnboardingExperimentWorkflow();
+                    } else {
+                      channel.clickHandler({
+                        navigate,
+                        setClickedChannel,
+                        channelType: channel.type,
+                      });
+                    }
                   }}
                 >
-                  {isIntegrationActive ? 'Change Provider' : `Configure ${channel.displayName}`}
+                  {isOnboardingExperiment
+                    ? 'Send test notification now'
+                    : isIntegrationActive
+                    ? 'Change Provider'
+                    : `Configure ${channel.displayName}`}
                 </StyledButton>
               </ChannelCard>
             </Container>
diff --git a/apps/web/src/pages/quick-start/consts.tsx b/apps/web/src/pages/quick-start/consts.tsx
index c48f0f810fe..1c36f36dea8 100644
--- a/apps/web/src/pages/quick-start/consts.tsx
+++ b/apps/web/src/pages/quick-start/consts.tsx
@@ -1,9 +1,9 @@
 import React, { Dispatch } from 'react';
 import { Stack } from '@mantine/core';
 import { NavigateFunction } from 'react-router-dom';
-import { ChannelTypeEnum } from '@novu/shared';
-
+import { ChannelTypeEnum, UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
 import { Bell, Chat, Mail, Mobile, Sms } from '@novu/design-system';
+
 import { ROUTES } from '../../constants/routes.enum';
 import { WIDGET_EMBED_PATH } from '../../config';
 
@@ -19,8 +19,8 @@ export const BACKEND_SOCKET_URL = '<BACKEND_SOCKET_URL>';
 export const setupProject = `cd notification-center-demo && npm run setup:onboarding -- ${APPLICATION_IDENTIFIER} ${API_KEY} ${BACKEND_API_URL} ${BACKEND_SOCKET_URL}`;
 export const npmRunCommand = 'npm run dev';
 export const frameworkSetupTitle = 'Choose your go-to framework';
-export const faqUrl = 'https://docs.novu.co/notification-center/introduction';
-export const notificationCenterDocsUrl = 'https://docs.novu.co/notification-center/introduction';
+export const faqUrl = `https://docs.novu.co/notification-center/introduction${UTM_CAMPAIGN_QUERY_PARAM}`;
+export const notificationCenterDocsUrl = `https://docs.novu.co/notification-center/introduction${UTM_CAMPAIGN_QUERY_PARAM}`;
 export const discordInviteUrl = 'https://discord.gg/novu';
 export const demoSetupSecondaryTitle = 'Follow the installation steps to connect your app';
 
@@ -279,6 +279,9 @@ export enum OnBoardingAnalyticsEnum {
   IN_APP_SANDBOX_SUCCESS_VISIT = 'Success Page Visit - [In-App Sandbox - Success]',
   IN_APP_SANDBOX_RUN_TRIGGER_CLICK = 'Run Trigger Clicked - [In-App Sandbox]',
   CONFIGURE_LATER_CLICK = 'Configure Later Click',
+
+  // Onboarding Experiment
+  ONBOARDING_EXPERIMENT_TEST_NOTIFICATION = 'Button Clicked - [Onboarding]',
 }
 
 export enum FlowTypeEnum {
@@ -287,16 +290,6 @@ export enum FlowTypeEnum {
 }
 
 export const quickStartChannels: IQuickStartChannelConfiguration[] = [
-  {
-    Icon: Bell,
-    title: 'In-App notifications',
-    displayName: 'In-App',
-    type: ChannelTypeEnum.IN_APP,
-    description: 'A set of APIs and components to create a customized notification center',
-    clickHandler: (options) => {
-      options.navigate(ROUTES.QUICK_START_NOTIFICATION_CENTER);
-    },
-  },
   {
     Icon: Mail,
     title: 'Email',
@@ -307,6 +300,16 @@ export const quickStartChannels: IQuickStartChannelConfiguration[] = [
       options.setClickedChannel({ open: true, channelType: options.channelType });
     },
   },
+  {
+    Icon: Bell,
+    title: 'In-App notifications',
+    displayName: 'In-App',
+    type: ChannelTypeEnum.IN_APP,
+    description: 'A set of APIs and components to create a customized notification center',
+    clickHandler: (options) => {
+      options.navigate(ROUTES.QUICK_START_NOTIFICATION_CENTER);
+    },
+  },
   {
     Icon: Mobile,
     title: 'Push',
diff --git a/apps/web/src/pages/quick-start/steps/GetStarted.tsx b/apps/web/src/pages/quick-start/steps/GetStarted.tsx
index 9a67138a54a..74618334d5c 100644
--- a/apps/web/src/pages/quick-start/steps/GetStarted.tsx
+++ b/apps/web/src/pages/quick-start/steps/GetStarted.tsx
@@ -1,9 +1,9 @@
-import styled from '@emotion/styled';
-import { ChannelTypeEnum } from '@novu/shared';
 import { useEffect, useState } from 'react';
+import styled from '@emotion/styled';
+import { ChannelTypeEnum, UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+import { ArrowRight } from '@novu/design-system';
 
 import { useSegment } from '../../../components/providers/SegmentProvider';
-import { ArrowRight } from '@novu/design-system';
 import { IntegrationsListModal } from '../../integrations/IntegrationsListModal';
 import { ChannelsConfiguration } from '../components/ChannelsConfiguration';
 import { GetStartedLayout } from '../components/layout/GetStartedLayout';
@@ -73,7 +73,7 @@ function LearnMoreRef() {
 
   return (
     <a
-      href={'https://docs.novu.co/quickstarts/01-introduction'}
+      href={`https://docs.novu.co/quickstarts/01-introduction${UTM_CAMPAIGN_QUERY_PARAM}`}
       style={{ color: '#DD2476', textDecoration: 'underline', fontSize: '18px' }}
       onClick={() => handleOnClick}
       target="_blank"
diff --git a/apps/web/src/pages/settings/tabs/EmailSettings.tsx b/apps/web/src/pages/settings/tabs/EmailSettings.tsx
index 712a1c835f7..d1233179a33 100644
--- a/apps/web/src/pages/settings/tabs/EmailSettings.tsx
+++ b/apps/web/src/pages/settings/tabs/EmailSettings.tsx
@@ -1,5 +1,10 @@
+import { useEffect } from 'react';
+import { ActionIcon, Center, Input as MantineInput } from '@mantine/core';
+import { Control, Controller, useForm } from 'react-hook-form';
 import { useClipboard } from '@mantine/hooks';
 import styled from '@emotion/styled';
+import { useMutation } from '@tanstack/react-query';
+import { showNotification } from '@mantine/notifications';
 import {
   colors,
   Text,
@@ -12,14 +17,11 @@ import {
   WarningIcon,
   inputStyles,
 } from '@novu/design-system';
+import type { IResponseError } from '@novu/shared';
+
 import Card from '../../../components/layout/components/Card';
-import { ActionIcon, Center, Input as MantineInput } from '@mantine/core';
-import React, { useEffect } from 'react';
-import { Control, Controller, useForm } from 'react-hook-form';
 import { useEffectOnce, useEnvController } from '../../../hooks';
-import { useMutation } from '@tanstack/react-query';
 import { updateDnsSettings } from '../../../api/environment';
-import { showNotification } from '@mantine/notifications';
 import { validateMxRecord } from '../../../api/inbound-parse';
 import { MAIL_SERVER_DOMAIN } from '../../../config';
 
@@ -31,7 +33,7 @@ export const EmailSettings = () => {
 
   const { mutateAsync: updateDnsSettingsMutation, isLoading: isUpdateDnsSettingsLoading } = useMutation<
     { dns: { mxRecordConfigured: boolean; inboundParseDomain: string } },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { payload: { inboundParseDomain: string | undefined }; environmentId: string }
   >(({ payload, environmentId }) => updateDnsSettings(payload, environmentId));
 
diff --git a/apps/web/src/pages/settings/tabs/components/Regenerate.tsx b/apps/web/src/pages/settings/tabs/components/Regenerate.tsx
index e10a7fd4851..995dfe4fe1d 100644
--- a/apps/web/src/pages/settings/tabs/components/Regenerate.tsx
+++ b/apps/web/src/pages/settings/tabs/components/Regenerate.tsx
@@ -3,18 +3,16 @@ import styled from '@emotion/styled';
 import { useMutation } from '@tanstack/react-query';
 import { showNotification } from '@mantine/notifications';
 import { Group } from '@mantine/core';
+import { Button, Text } from '@novu/design-system';
+import type { IResponseError } from '@novu/shared';
 
 import { ConfirmRegenerationModal } from './ConfirmRegenerationModal';
-import { Button, Text } from '@novu/design-system';
 import { regenerateApiKeys } from '../../../../api/environment';
 
 export const Regenerate = ({ fetchApiKeys }: { fetchApiKeys: () => void }) => {
   const [isModalOpened, setModalIsOpened] = useState(false);
 
-  const { mutateAsync: regenerateApiKeysMutation } = useMutation<
-    { key: string }[],
-    { error: string; message: string; statusCode: number }
-  >(regenerateApiKeys);
+  const { mutateAsync: regenerateApiKeysMutation } = useMutation<{ key: string }[], IResponseError>(regenerateApiKeys);
 
   async function handleModal() {
     setModalIsOpened(true);
diff --git a/apps/web/src/pages/templates/TemplatesDigestPlaygroundPage.tsx b/apps/web/src/pages/templates/TemplatesDigestPlaygroundPage.tsx
index 6dcfc6bdd8c..cfcf5d4608e 100644
--- a/apps/web/src/pages/templates/TemplatesDigestPlaygroundPage.tsx
+++ b/apps/web/src/pages/templates/TemplatesDigestPlaygroundPage.tsx
@@ -1,17 +1,18 @@
+import { useCallback } from 'react';
 import { Stack } from '@mantine/core';
 import styled from '@emotion/styled';
 import { ReactFlowProvider } from 'react-flow-renderer';
 import { useNavigate, useParams } from 'react-router-dom';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '@novu/shared';
+import { ArrowButton, colors, Title, Text, Button } from '@novu/design-system';
 
 import PageContainer from '../../components/layout/components/PageContainer';
-import { ArrowButton, colors, Title, Text, Button } from '@novu/design-system';
 import { parseUrl } from '../../utils/routeUtils';
 import { ROUTES } from '../../constants/routes.enum';
 import { DigestDemoFlow } from '../../components';
 import { useSegment } from '../../components/providers/SegmentProvider';
 import { DigestPlaygroundAnalyticsEnum } from './constants';
 import { useTourStorage } from './hooks/useTourStorage';
-import { useCallback } from 'react';
 
 const Heading = styled(Title)`
   color: ${colors.B40};
@@ -81,7 +82,7 @@ export const TemplatesDigestPlaygroundPage = () => {
           <LinkStyled
             target="_blank"
             rel="noopener noreferrer"
-            href="https://docs.novu.co/workflows/digest"
+            href={`https://docs.novu.co/workflows/digest${UTM_CAMPAIGN_QUERY_PARAM}`}
             onClick={handleLearnMoreClick}
           >
             Learn more in docs
diff --git a/apps/web/src/pages/templates/WorkflowListPage.tsx b/apps/web/src/pages/templates/WorkflowListPage.tsx
index 8d68e9a7ca8..c4b3c642dba 100644
--- a/apps/web/src/pages/templates/WorkflowListPage.tsx
+++ b/apps/web/src/pages/templates/WorkflowListPage.tsx
@@ -163,7 +163,7 @@ function WorkflowListPage() {
     setCurrentPageNumber,
     setPageSize,
     pageSize,
-  } = useTemplates();
+  } = useTemplates({ areSearchParamsEnabled: true });
   const isLoading = areNotificationGroupLoading || loading;
   const navigate = useNavigate();
   const { blueprintsGroupedAndPopular: { general, popular } = {}, isLoading: areBlueprintsLoading } =
diff --git a/apps/web/src/pages/templates/components/BlueprintModal.tsx b/apps/web/src/pages/templates/components/BlueprintModal.tsx
index 108bd3df79f..e40d7b0a9f1 100644
--- a/apps/web/src/pages/templates/components/BlueprintModal.tsx
+++ b/apps/web/src/pages/templates/components/BlueprintModal.tsx
@@ -3,9 +3,9 @@ import { Center, Loader } from '@mantine/core';
 import { useQuery, useMutation } from '@tanstack/react-query';
 import { useNavigate } from 'react-router-dom';
 import { useEffect, useState } from 'react';
-import { IUserEntity } from '@novu/shared';
-
+import type { IResponseError, IUserEntity } from '@novu/shared';
 import { colors, shadows, Title, Text, Button } from '@novu/design-system';
+
 import { updateUserOnBoarding } from '../../../api/user';
 import { getBlueprintTemplateById } from '../../../api/notification-templates';
 import { errorMessage } from '../../../utils/notifications';
@@ -29,11 +29,9 @@ export function BlueprintModal() {
     localStorage.removeItem('blueprintId');
   };
 
-  const { mutateAsync: updateOnBoardingStatus } = useMutation<
-    IUserEntity,
-    { error: string; message: string; statusCode: number },
-    { showOnBoarding: boolean }
-  >(({ showOnBoarding }) => updateUserOnBoarding(showOnBoarding));
+  const { mutateAsync: updateOnBoardingStatus } = useMutation<IUserEntity, IResponseError, { showOnBoarding: boolean }>(
+    ({ showOnBoarding }) => updateUserOnBoarding(showOnBoarding)
+  );
 
   async function disableOnboarding() {
     await updateOnBoardingStatus({ showOnBoarding: false });
diff --git a/apps/web/src/pages/templates/components/ChannelPreview.tsx b/apps/web/src/pages/templates/components/ChannelPreview.tsx
new file mode 100644
index 00000000000..03115365fcd
--- /dev/null
+++ b/apps/web/src/pages/templates/components/ChannelPreview.tsx
@@ -0,0 +1,59 @@
+import { StepTypeEnum } from '@novu/shared';
+import { useParams } from 'react-router-dom';
+import { ChatPreview, EmailPreview, InAppPreview, PushPreview, SmsPreview } from '../../../components/workflow/preview';
+
+import { useNavigateFromEditor } from '../hooks/useNavigateFromEditor';
+import { useStepIndex } from '../hooks/useStepIndex';
+import { ChannelPreviewSidebar } from './ChannelPreviewSidebar';
+
+export const PreviewComponent = ({ channel }: { channel: StepTypeEnum }) => {
+  switch (channel) {
+    case StepTypeEnum.EMAIL:
+      return <EmailPreview view="web" showVariables={false} />;
+
+    case StepTypeEnum.TRIGGER:
+      return <>TRIGGER</>;
+
+    case StepTypeEnum.SMS:
+      return <SmsPreview />;
+
+    case StepTypeEnum.IN_APP:
+      return <InAppPreview showVariables={false} />;
+
+    case StepTypeEnum.CHAT:
+      return <ChatPreview />;
+
+    case StepTypeEnum.PUSH:
+      return <PushPreview />;
+
+    case StepTypeEnum.DELAY:
+      return <>DELAY</>;
+
+    case StepTypeEnum.DIGEST:
+      return <>DIGEST</>;
+
+    default:
+      return <>dummy</>;
+  }
+};
+
+export const ChannelPreview = () => {
+  const { channel } = useParams<{
+    channel: StepTypeEnum | undefined;
+  }>();
+  const { stepIndex } = useStepIndex();
+
+  useNavigateFromEditor(true);
+
+  if (stepIndex === -1 || channel === undefined) {
+    return null;
+  }
+
+  return (
+    <>
+      <ChannelPreviewSidebar>
+        <PreviewComponent channel={channel} />
+      </ChannelPreviewSidebar>
+    </>
+  );
+};
diff --git a/apps/web/src/pages/templates/components/ChannelPreviewSidebar.tsx b/apps/web/src/pages/templates/components/ChannelPreviewSidebar.tsx
new file mode 100644
index 00000000000..dedcb585e57
--- /dev/null
+++ b/apps/web/src/pages/templates/components/ChannelPreviewSidebar.tsx
@@ -0,0 +1,59 @@
+import { ReactNode } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { StepTypeEnum } from '@novu/shared';
+import { Sidebar } from '@novu/design-system';
+
+import { useStepIndex } from '../hooks/useStepIndex';
+import { StepName } from './StepName';
+import { useBasePath } from '../hooks/useBasePath';
+import { EditorSidebarHeaderActions } from './EditorSidebarHeaderActions';
+import { useStepVariantsCount } from '../hooks/useStepVariantsCount';
+import { useNavigateToVariantPreview } from '../hooks/useNavigateToVariantPreview';
+
+const StepSidebarHeader = () => {
+  const { channel } = useParams<{
+    channel: StepTypeEnum;
+  }>();
+
+  if (!channel) {
+    return null;
+  }
+
+  return (
+    <div style={{ display: 'flex', width: '100%', gap: 12 }}>
+      <StepName channel={channel} />
+      <EditorSidebarHeaderActions preview />
+    </div>
+  );
+};
+
+export const ChannelPreviewSidebar = ({ children }: { children: ReactNode }) => {
+  const { stepUuid } = useParams<{
+    stepUuid: string;
+  }>();
+  const navigate = useNavigate();
+  const basePath = useBasePath();
+  const { navigateToVariantPreview } = useNavigateToVariantPreview();
+  const { stepIndex, variantIndex } = useStepIndex();
+  const { variantsCount } = useStepVariantsCount();
+  const key = `${stepIndex}_${variantIndex}`;
+
+  return (
+    <Sidebar
+      key={key}
+      isOpened
+      customHeader={<StepSidebarHeader />}
+      onClose={() => {
+        if (variantsCount > 0) {
+          navigateToVariantPreview({ variantUuid: stepUuid });
+
+          return;
+        }
+        navigate(basePath);
+      }}
+      data-test-id="step-editor-sidebar"
+    >
+      {children}
+    </Sidebar>
+  );
+};
diff --git a/apps/web/src/pages/templates/components/ChannelStepEditor.tsx b/apps/web/src/pages/templates/components/ChannelStepEditor.tsx
index 0b0b98df257..42d49edac9a 100644
--- a/apps/web/src/pages/templates/components/ChannelStepEditor.tsx
+++ b/apps/web/src/pages/templates/components/ChannelStepEditor.tsx
@@ -3,7 +3,7 @@ import { StepTypeEnum } from '@novu/shared';
 
 import { EmailMessagesCards } from './email-editor/EmailMessagesCards';
 import { TemplateInAppEditor } from './in-app-editor/TemplateInAppEditor';
-import { TemplateSMSEditor } from './TemplateSMSEditor';
+import { TemplateSMSEditor } from './sms-editor/TemplateSMSEditor';
 import { TemplatePushEditor } from './TemplatePushEditor';
 import { TemplateChatEditor } from './chat-editor/TemplateChatEditor';
 import { StepEditorSidebar } from './StepEditorSidebar';
diff --git a/apps/web/src/pages/templates/components/CustomCodeEditor.css b/apps/web/src/pages/templates/components/CustomCodeEditor.css
index ba66d38aaaa..d1d63267e89 100644
--- a/apps/web/src/pages/templates/components/CustomCodeEditor.css
+++ b/apps/web/src/pages/templates/components/CustomCodeEditor.css
@@ -41,6 +41,13 @@
   color: #fff !important;
 }
 
+
+.custom-code-editor
+  .monaco-editor
+  .overflow-guard {
+  border-radius: 10px !important;
+}
+
 .custom-code-editor
   .monaco-editor
   .suggest-widget
diff --git a/apps/web/src/pages/templates/components/CustomCodeEditor.tsx b/apps/web/src/pages/templates/components/CustomCodeEditor.tsx
index a45724caf4a..046af1b6a67 100644
--- a/apps/web/src/pages/templates/components/CustomCodeEditor.tsx
+++ b/apps/web/src/pages/templates/components/CustomCodeEditor.tsx
@@ -7,6 +7,7 @@ import { editor as NEditor } from 'monaco-editor';
 
 import { createTranslationMarks } from './createTranslationMarks';
 import { IVariable, useWorkflowVariables } from '../../../api/hooks';
+import { useEnvController } from '@novu/shared-web';
 
 export const CustomCodeEditor = ({
   onChange,
@@ -24,7 +25,7 @@ export const CustomCodeEditor = ({
 
   if (isLoadingVariables) {
     return (
-      <Card withBorder sx={styledCard}>
+      <Card data-test-id={'custom-code-editor'} withBorder sx={styledCard}>
         <Loader />
       </Card>
     );
@@ -59,6 +60,8 @@ const CustomCodeEditorBase = ({
   variables: any;
   isDark: boolean;
 }) => {
+  const { readonly } = useEnvController();
+
   const editorRef = useRef<NEditor.IStandaloneCodeEditor | null>(null);
   const monacoRef = useRef<Monaco | null>(null);
   const decoratorsRef = useRef<NEditor.IEditorDecorationsCollection | null>(null);
@@ -157,6 +160,7 @@ const CustomCodeEditorBase = ({
         renderLineHighlight: 'all',
         fontSize: 14,
         lineHeight: 20,
+        readOnly: readonly,
       }}
       className={isDark ? 'custom-code-editor-dark' : 'custom-code-editor'}
     />
@@ -169,4 +173,5 @@ const styledCard = (theme) => ({
   borderColor: theme.colorScheme === 'dark' ? colors.B30 : colors.B80,
   padding: '30px',
   overflow: 'visible',
+  height: '300px',
 });
diff --git a/apps/web/src/pages/templates/components/VariableManagerModal.tsx b/apps/web/src/pages/templates/components/EditVariablesModal.tsx
similarity index 97%
rename from apps/web/src/pages/templates/components/VariableManagerModal.tsx
rename to apps/web/src/pages/templates/components/EditVariablesModal.tsx
index 98fb16b06ad..ce0023b04b5 100644
--- a/apps/web/src/pages/templates/components/VariableManagerModal.tsx
+++ b/apps/web/src/pages/templates/components/EditVariablesModal.tsx
@@ -3,7 +3,7 @@ import { VariableManager } from './VariableManager';
 import { Group, Modal, Title, useMantineTheme } from '@mantine/core';
 import { useStepFormPath } from '../hooks/useStepFormPath';
 
-export const VariableManagerModal = ({
+export const EditVariablesModal = ({
   open,
   setOpen,
   variablesArray,
diff --git a/apps/web/src/pages/templates/components/EditorSidebarHeaderActions.tsx b/apps/web/src/pages/templates/components/EditorSidebarHeaderActions.tsx
index ec7bbd971d3..68f9c9cba76 100644
--- a/apps/web/src/pages/templates/components/EditorSidebarHeaderActions.tsx
+++ b/apps/web/src/pages/templates/components/EditorSidebarHeaderActions.tsx
@@ -3,7 +3,7 @@ import { useEffect, useRef, useState } from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { FilterPartTypeEnum, DELAYED_STEPS, StepTypeEnum } from '@novu/shared';
-import { ActionButton, Condition, ConditionPlus, ConditionsFile, Trash, VariantPlus } from '@novu/design-system';
+import { ActionButton, Condition, ConditionPlus, Trash, VariantPlus } from '@novu/design-system';
 
 import { Conditions, IConditions } from '../../../components/conditions';
 import { When } from '../../../components/utils/When';
@@ -17,11 +17,12 @@ import { useStepVariantsCount } from '../hooks/useStepVariantsCount';
 import { DeleteConfirmModal } from './DeleteConfirmModal';
 import { IForm } from './formTypes';
 import { makeVariantFromStep, useTemplateEditorForm } from './TemplateEditorFormProvider';
+import { WorkflowNodeActions } from '../workflow/workflow/node-types/WorkflowNodeActions';
 
 const variantsCreatePath = '/variants/create';
 
-export const EditorSidebarHeaderActions = () => {
-  const { control, watch, setValue, getValues } = useFormContext<IForm>();
+export const EditorSidebarHeaderActions = ({ preview = false }: { preview?: boolean }) => {
+  const { control, watch, setValue } = useFormContext<IForm>();
   const { deleteStep, deleteVariant } = useTemplateEditorForm();
   const { readonly: isReadonly } = useEnvController();
   const {
@@ -72,6 +73,11 @@ export const EditorSidebarHeaderActions = () => {
     navigate(newPath);
   };
 
+  const onEdit = () => {
+    const newPath = basePath + `/${channel}/${stepUuid}`;
+    navigate(newPath);
+  };
+
   const updateConditions = (newConditions: IConditions[]) => {
     if (isNewVariantCreationUrl) {
       proceedToNewVariant.current = true;
@@ -88,12 +94,13 @@ export const EditorSidebarHeaderActions = () => {
   };
 
   const onConditionsClose = () => {
-    setConditionsOpened(false);
-
     if (isNewVariantCreationUrl && !proceedToNewVariant.current) {
-      const newPath = variantsCount > 0 ? pathname.replace('/create', '') : basePath;
-      navigate(newPath);
+      navigate(-1);
+
+      return;
     }
+
+    setConditionsOpened(false);
   };
 
   const openDeleteModal = () => {
@@ -121,41 +128,57 @@ export const EditorSidebarHeaderActions = () => {
 
   return (
     <>
-      <Group noWrap spacing={12} ml={'auto'} sx={{ alignItems: 'flex-start' }}>
-        <When truthy={isAddVariantActionAvailable && !isReadonly}>
-          <ActionButton
-            tooltip="Add variant"
-            onClick={onAddVariant}
-            Icon={VariantPlus}
-            data-test-id="editor-sidebar-add-variant"
-          />
-        </When>
-        <When truthy={hasNoFilters && !isReadonly}>
-          <ActionButton
-            tooltip={`${conditionAction} ${isUnderVariantsListPath ? 'group' : ''} conditions`}
-            onClick={() => setConditionsOpened(true)}
-            Icon={ConditionPlus}
-            data-test-id="editor-sidebar-add-conditions"
-          />
-        </When>
-        <When truthy={!hasNoFilters}>
-          <ActionButton
-            tooltip={`${conditionAction} ${isUnderVariantsListPath ? 'group' : ''} conditions`}
-            text={`${filters?.length ?? ''}`}
-            onClick={() => setConditionsOpened(true)}
-            Icon={Condition}
-            data-test-id="editor-sidebar-edit-conditions"
-          />
-        </When>
-        <When truthy={!isReadonly}>
-          <ActionButton
-            tooltip={`Delete ${isUnderVariantPath ? 'variant' : 'step'}`}
-            onClick={openDeleteModal}
-            Icon={Trash}
-            data-test-id="editor-sidebar-delete"
-          />
-        </When>
-      </Group>
+      <When truthy={preview}>
+        <WorkflowNodeActions
+          onEdit={onEdit}
+          onAddVariant={isAddVariantActionAvailable ? onAddVariant : undefined}
+          onDelete={openDeleteModal}
+          onAddConditions={() => setConditionsOpened(true)}
+          channelType={channel as StepTypeEnum}
+          nodeType={'step'}
+          conditionsCount={filters?.length || 0}
+          isReadOnly={isReadonly}
+          menuPosition={'bottom'}
+          showMenu={true}
+        />
+      </When>
+      <When truthy={!preview}>
+        <Group noWrap spacing={12} ml={'auto'} sx={{ alignItems: 'flex-start' }}>
+          <When truthy={isAddVariantActionAvailable && !isReadonly}>
+            <ActionButton
+              tooltip="Add variant"
+              onClick={onAddVariant}
+              Icon={VariantPlus}
+              data-test-id="editor-sidebar-add-variant"
+            />
+          </When>
+          <When truthy={hasNoFilters && !isReadonly}>
+            <ActionButton
+              tooltip={`${conditionAction} ${isUnderVariantsListPath ? 'group' : ''} conditions`}
+              onClick={() => setConditionsOpened(true)}
+              Icon={ConditionPlus}
+              data-test-id="editor-sidebar-add-conditions"
+            />
+          </When>
+          <When truthy={!hasNoFilters}>
+            <ActionButton
+              tooltip={`${conditionAction} ${isUnderVariantsListPath ? 'group' : ''} conditions`}
+              text={`${filters?.length ?? ''}`}
+              onClick={() => setConditionsOpened(true)}
+              Icon={Condition}
+              data-test-id="editor-sidebar-edit-conditions"
+            />
+          </When>
+          <When truthy={!isReadonly}>
+            <ActionButton
+              tooltip={`Delete ${isUnderVariantPath ? 'variant' : 'step'}`}
+              onClick={openDeleteModal}
+              Icon={Trash}
+              data-test-id="editor-sidebar-delete"
+            />
+          </When>
+        </Group>
+      </When>
       {areConditionsOpened && (
         <Conditions
           isOpened={areConditionsOpened}
diff --git a/apps/web/src/pages/templates/components/StepEditorSidebar.tsx b/apps/web/src/pages/templates/components/StepEditorSidebar.tsx
index 209d15f19d4..a517aebad66 100644
--- a/apps/web/src/pages/templates/components/StepEditorSidebar.tsx
+++ b/apps/web/src/pages/templates/components/StepEditorSidebar.tsx
@@ -8,6 +8,7 @@ import { StepName } from './StepName';
 import { useBasePath } from '../hooks/useBasePath';
 import { EditorSidebarHeaderActions } from './EditorSidebarHeaderActions';
 import { useStepVariantsCount } from '../hooks/useStepVariantsCount';
+import { useNavigateToVariantPreview } from '../hooks/useNavigateToVariantPreview';
 
 const StepSidebarHeader = () => {
   const { channel } = useParams<{
@@ -33,21 +34,28 @@ export const StepEditorSidebar = ({ children }: { children: ReactNode }) => {
   }>();
   const navigate = useNavigate();
   const basePath = useBasePath();
+  const { navigateToVariantPreview } = useNavigateToVariantPreview();
   const { stepIndex, variantIndex } = useStepIndex();
   const { variantsCount } = useStepVariantsCount();
   const key = `${stepIndex}_${variantIndex}`;
-  const isEmailOrInApp = channel === StepTypeEnum.IN_APP || channel === StepTypeEnum.EMAIL;
+  const isExpandedChannel = [
+    StepTypeEnum.IN_APP,
+    StepTypeEnum.EMAIL,
+    StepTypeEnum.CHAT,
+    StepTypeEnum.SMS,
+    StepTypeEnum.PUSH,
+  ].includes(channel as StepTypeEnum);
 
   return (
     <Sidebar
       key={key}
       isOpened
-      isExpanded={isEmailOrInApp}
+      isExpanded={isExpandedChannel}
       customHeader={<StepSidebarHeader />}
-      isParentScrollable={isEmailOrInApp}
+      isParentScrollable={isExpandedChannel}
       onClose={() => {
         if (variantsCount > 0) {
-          navigate(basePath + `/${channel}/${stepUuid}/variants`);
+          navigateToVariantPreview({ variantUuid: stepUuid });
 
           return;
         }
diff --git a/apps/web/src/pages/templates/components/TemplatePushEditor.tsx b/apps/web/src/pages/templates/components/TemplatePushEditor.tsx
index 9df283db794..16bf2e76e65 100644
--- a/apps/web/src/pages/templates/components/TemplatePushEditor.tsx
+++ b/apps/web/src/pages/templates/components/TemplatePushEditor.tsx
@@ -1,24 +1,30 @@
 import { ChannelTypeEnum } from '@novu/shared';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { Textarea } from '@novu/design-system';
-import { useEnvController, useHasActiveIntegrations, useVariablesManager } from '../../../hooks';
-import { useStepFormErrors } from '../hooks/useStepFormErrors';
+import { Text } from '@novu/design-system';
+import { useHasActiveIntegrations, useVariablesManager } from '../../../hooks';
 import { useStepFormPath } from '../hooks/useStepFormPath';
 import { StepSettings } from '../workflow/SideBar/StepSettings';
 import { LackIntegrationAlert } from './LackIntegrationAlert';
-import { VariableManager } from './VariableManager';
+
+import { Flex, Grid, Stack } from '@mantine/core';
+import { useState } from 'react';
+import { PushPreview } from '../../../components/workflow/preview';
+import { useEditTemplateContent } from '../hooks/useEditTemplateContent';
+import { CustomCodeEditor } from './CustomCodeEditor';
+import { EditVariablesModal } from './EditVariablesModal';
 import { TranslateProductLead } from './TranslateProductLead';
+import { VariableManagementButton } from './VariableManagementButton';
 
 const templateFields = ['content', 'title'];
 
 export function TemplatePushEditor() {
-  const { readonly } = useEnvController();
+  const [editVariablesModalOpened, setEditVariablesModalOpen] = useState(false);
   const stepFormPath = useStepFormPath();
-  const stepFormErrors = useStepFormErrors();
   const { control } = useFormContext();
   const variablesArray = useVariablesManager(templateFields);
 
+  const { isPreviewLoading, handleContentChange } = useEditTemplateContent();
   const { hasActiveIntegration } = useHasActiveIntegrations({
     channelType: ChannelTypeEnum.PUSH,
   });
@@ -27,42 +33,61 @@ export function TemplatePushEditor() {
     <>
       {!hasActiveIntegration ? <LackIntegrationAlert channelType={ChannelTypeEnum.PUSH} /> : null}
       <StepSettings />
-      <Controller
-        name={`${stepFormPath}.template.title` as any}
-        defaultValue=""
-        control={control}
-        render={({ field }) => (
-          <Textarea
-            {...field}
-            data-test-id="pushNotificationTitle"
-            error={stepFormErrors ? stepFormErrors.template?.title?.message : undefined}
-            disabled={readonly}
-            minRows={4}
-            value={field.value || ''}
-            label="Push message title"
-            placeholder="Add notification title here..."
-          />
-        )}
-      />
-      <Controller
-        name={`${stepFormPath}.template.content` as any}
-        defaultValue=""
-        control={control}
-        render={({ field }) => (
-          <Textarea
-            {...field}
-            data-test-id="pushNotificationContent"
-            error={stepFormErrors ? stepFormErrors.template?.content?.message : undefined}
-            disabled={readonly}
-            minRows={4}
-            value={field.value || ''}
-            label="Push message content"
-            placeholder="Add notification content here..."
+
+      <Grid gutter={24}>
+        <Grid.Col span={'auto'}>
+          <Stack spacing={32}>
+            <Controller
+              name={`${stepFormPath}.template.title` as any}
+              defaultValue=""
+              control={control}
+              render={({ field }) => (
+                <Stack spacing={8} data-test-id="push-title-container">
+                  <VariableManagementButton
+                    openEditVariablesModal={() => {
+                      setEditVariablesModalOpen(true);
+                    }}
+                    label="Title"
+                  />
+                  <CustomCodeEditor
+                    value={(field.value as string) || ''}
+                    onChange={(value) => {
+                      handleContentChange(value, field.onChange);
+                    }}
+                    height="128px"
+                  />
+                </Stack>
+              )}
+            />
+            <Controller
+              name={`${stepFormPath}.template.content` as any}
+              defaultValue=""
+              control={control}
+              render={({ field }) => (
+                <Stack spacing={8} data-test-id="push-content-container">
+                  <Text weight="bold">Message</Text>
+                  <CustomCodeEditor
+                    value={(field.value as string) || ''}
+                    onChange={(value) => {
+                      handleContentChange(value, field.onChange);
+                    }}
+                  />
+                </Stack>
+              )}
+            />
+          </Stack>
+          <EditVariablesModal
+            open={editVariablesModalOpened}
+            setOpen={setEditVariablesModalOpen}
+            variablesArray={variablesArray}
           />
-        )}
-      />
-      <VariableManager variablesArray={variablesArray} path={`${stepFormPath}.template`} />
-      <TranslateProductLead id="translate-push-editor" />
+        </Grid.Col>
+        <Grid.Col span={'content'}>
+          <Flex justify="center">
+            <PushPreview showLoading={isPreviewLoading} showOverlay={false} />
+          </Flex>
+        </Grid.Col>
+      </Grid>
     </>
   );
 }
diff --git a/apps/web/src/pages/templates/components/TemplateSMSEditor.tsx b/apps/web/src/pages/templates/components/TemplateSMSEditor.tsx
deleted file mode 100644
index e499b2f8add..00000000000
--- a/apps/web/src/pages/templates/components/TemplateSMSEditor.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import { Controller, useFormContext } from 'react-hook-form';
-import { ChannelTypeEnum } from '@novu/shared';
-import { Textarea } from '@novu/design-system';
-
-import { LackIntegrationAlert } from './LackIntegrationAlert';
-import {
-  useEnvController,
-  useHasActiveIntegrations,
-  useGetPrimaryIntegration,
-  useVariablesManager,
-} from '../../../hooks';
-import { VariableManager } from './VariableManager';
-import { StepSettings } from '../workflow/SideBar/StepSettings';
-import { useStepFormPath } from '../hooks/useStepFormPath';
-import { TranslateProductLead } from './TranslateProductLead';
-
-const templateFields = ['content'];
-
-export function TemplateSMSEditor() {
-  const { readonly, environment } = useEnvController();
-  const stepFormPath = useStepFormPath();
-  const { control } = useFormContext();
-  const variablesArray = useVariablesManager(templateFields);
-  const { hasActiveIntegration } = useHasActiveIntegrations({
-    channelType: ChannelTypeEnum.SMS,
-  });
-  const { primaryIntegration } = useGetPrimaryIntegration({
-    channelType: ChannelTypeEnum.SMS,
-  });
-
-  return (
-    <>
-      {!hasActiveIntegration ? <LackIntegrationAlert channelType={ChannelTypeEnum.SMS} /> : null}
-      {hasActiveIntegration && !primaryIntegration ? (
-        <LackIntegrationAlert
-          channelType={ChannelTypeEnum.SMS}
-          text={`You have multiple provider instances for SMS in the ${environment?.name} environment. Please select the primary instance.`}
-          isPrimaryMissing
-        />
-      ) : null}
-      <StepSettings />
-      <Controller
-        name={`${stepFormPath}.template.content` as any}
-        defaultValue=""
-        control={control}
-        render={({ field, fieldState }) => (
-          <Textarea
-            {...field}
-            data-test-id="smsNotificationContent"
-            error={fieldState.error?.message}
-            disabled={readonly}
-            minRows={4}
-            value={field.value || ''}
-            label="SMS message content"
-            placeholder="Add notification content here..."
-          />
-        )}
-      />
-      <VariableManager variablesArray={variablesArray} path={`${stepFormPath}.template`} />
-      <TranslateProductLead id="translate-sms-editor" />
-    </>
-  );
-}
diff --git a/apps/web/src/pages/templates/components/TestWorkflow.cy.tsx b/apps/web/src/pages/templates/components/TestWorkflow.cy.tsx
index 268089da4f8..2d9f0748ebe 100644
--- a/apps/web/src/pages/templates/components/TestWorkflow.cy.tsx
+++ b/apps/web/src/pages/templates/components/TestWorkflow.cy.tsx
@@ -3,18 +3,27 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { TestWrapper } from '../../../testing';
 import { TestWorkflow } from './TestWorkflow';
 import { TriggerTypeEnum } from '@novu/shared';
+import { FormProvider, useForm } from 'react-hook-form';
 
 const queryClient = new QueryClient();
 
+const FormProviderWrapper = ({ children }) => {
+  const methods = useForm();
+
+  return <FormProvider {...methods}>{children}</FormProvider>;
+};
+
 describe('TestWorkflow Component', function () {
   it('should display subscriberId and empty json values when there are no variables', function () {
     cy.mount(
       <QueryClientProvider client={queryClient}>
-        <TestWrapper>
-          <TestWorkflow
-            trigger={{ variables: [], type: TriggerTypeEnum.EVENT, identifier: '1234', subscriberVariables: [] }}
-          />
-        </TestWrapper>
+        <FormProviderWrapper>
+          <TestWrapper>
+            <TestWorkflow
+              trigger={{ variables: [], type: TriggerTypeEnum.EVENT, identifier: '1234', subscriberVariables: [] }}
+            />
+          </TestWrapper>
+        </FormProviderWrapper>
       </QueryClientProvider>
     );
 
@@ -26,16 +35,18 @@ describe('TestWorkflow Component', function () {
   it('should add variables and subscriber variables to input fields', function () {
     cy.mount(
       <QueryClientProvider client={queryClient}>
-        <TestWrapper>
-          <TestWorkflow
-            trigger={{
-              variables: [{ name: 'firstVariable' }, { name: 'secondVariable' }],
-              type: TriggerTypeEnum.EVENT,
-              identifier: '1234',
-              subscriberVariables: [{ name: 'email' }],
-            }}
-          />
-        </TestWrapper>
+        <FormProviderWrapper>
+          <TestWrapper>
+            <TestWorkflow
+              trigger={{
+                variables: [{ name: 'firstVariable' }, { name: 'secondVariable' }],
+                type: TriggerTypeEnum.EVENT,
+                identifier: '1234',
+                subscriberVariables: [{ name: 'email' }],
+              }}
+            />
+          </TestWrapper>
+        </FormProviderWrapper>
       </QueryClientProvider>
     );
 
diff --git a/apps/web/src/pages/templates/components/TestWorkflow.tsx b/apps/web/src/pages/templates/components/TestWorkflow.tsx
index d671bda0ad3..2e9eef4fad9 100644
--- a/apps/web/src/pages/templates/components/TestWorkflow.tsx
+++ b/apps/web/src/pages/templates/components/TestWorkflow.tsx
@@ -1,6 +1,8 @@
 import { useMemo, useEffect, useState } from 'react';
 import { Group, JsonInput, Text } from '@mantine/core';
 import { useForm } from '@mantine/form';
+import { useWatch } from 'react-hook-form';
+
 import { useMutation } from '@tanstack/react-query';
 import * as Sentry from '@sentry/react';
 import * as capitalize from 'lodash.capitalize';
@@ -15,6 +17,9 @@ import { testTrigger } from '../../../api/notification-templates';
 import { ExecutionDetailsModalWrapper } from './ExecutionDetailsModalWrapper';
 import { TriggerSegmentControl } from './TriggerSegmentControl';
 import { WorkflowSidebar } from './WorkflowSidebar';
+import { useSegment } from '@novu/shared-web';
+import { useOnboardingExperiment } from '../../../hooks/useOnboardingExperiment';
+import { OnBoardingAnalyticsEnum } from '../../quick-start/consts';
 
 const makeToValue = (subscriberVariables: INotificationTriggerVariable[], currentUser?: IUserEntity) => {
   const subsVars = getSubscriberValue(
@@ -40,6 +45,13 @@ export function TestWorkflow({ trigger }) {
   const { mutateAsync: triggerTestEvent, isLoading } = useMutation(testTrigger);
   const [executionModalOpened, { close: closeExecutionModal, open: openExecutionModal }] = useDisclosure(false);
 
+  const tags = useWatch({ name: 'tags' });
+
+  const segment = useSegment();
+  const { isOnboardingExperimentEnabled } = useOnboardingExperiment();
+
+  const tagsIncludesOnboarding = tags?.includes('onboarding') && isOnboardingExperimentEnabled;
+
   const subscriberVariables = useMemo(() => {
     if (trigger?.subscriberVariables && subscriberExist(trigger?.subscriberVariables)) {
       return [...(trigger?.subscriberVariables || [])];
@@ -176,6 +188,12 @@ export function TestWorkflow({ trigger }) {
               loading={isLoading}
               onClick={() => {
                 onTrigger(form.values);
+                if (tagsIncludesOnboarding) {
+                  segment.track(OnBoardingAnalyticsEnum.ONBOARDING_EXPERIMENT_TEST_NOTIFICATION, {
+                    action: 'Workflow - Run trigger',
+                    experiment_id: '2024-w9-onb',
+                  });
+                }
               }}
             >
               Run Trigger
diff --git a/apps/web/src/pages/templates/components/VariableManagementButton.tsx b/apps/web/src/pages/templates/components/VariableManagementButton.tsx
new file mode 100644
index 00000000000..599265cda16
--- /dev/null
+++ b/apps/web/src/pages/templates/components/VariableManagementButton.tsx
@@ -0,0 +1,69 @@
+import { Group, createStyles } from '@mantine/core';
+import { useDisclosure } from '@mantine/hooks';
+
+import { Text, CurlyBrackets, ActionButton, Popover } from '@novu/design-system';
+
+import { useStepFormPath } from '../hooks/useStepFormPath';
+import { VariablesManagement } from './email-editor/variables-management/VariablesManagement';
+
+const usePopoverStyles = createStyles(() => ({
+  dropdown: {
+    padding: '0px !important',
+    flex: 1,
+    overflowY: 'auto',
+    overflowX: 'hidden',
+    height: '70%',
+    borderColor: 'transparent',
+  },
+}));
+
+export const VariableManagementButton = ({
+  label,
+  openEditVariablesModal,
+}: {
+  label?: string;
+  openEditVariablesModal: () => void;
+}) => {
+  const stepFormPath = useStepFormPath();
+  const [variablesManagementOpen, { close: closeVariablesManagement, toggle: toggleVariablesManagement }] =
+    useDisclosure(false);
+  const { classes } = usePopoverStyles();
+
+  return (
+    <Group position={'apart'}>
+      <Text weight="bold">{label ?? 'Message content'}</Text>
+      <Popover
+        width={300}
+        className={classes.dropdown}
+        opened={variablesManagementOpen}
+        target={
+          <ActionButton
+            Icon={CurlyBrackets}
+            data-test-id="open-variable-management"
+            onClick={toggleVariablesManagement}
+            tooltip="Open variables panel"
+            sx={{
+              '> svg': {
+                width: 16,
+                height: 12,
+              },
+            }}
+          />
+        }
+        content={
+          <VariablesManagement
+            isPopover
+            closeVariablesManagement={closeVariablesManagement}
+            path={`${stepFormPath}.template.variables`}
+            openVariablesModal={() => {
+              closeVariablesManagement();
+              openEditVariablesModal();
+            }}
+          />
+        }
+        withArrow={false}
+        position={'right-start'}
+      />
+    </Group>
+  );
+};
diff --git a/apps/web/src/pages/templates/components/VariantItemCard.tsx b/apps/web/src/pages/templates/components/VariantItemCard.tsx
index 9542a451f0f..e2f87a0d7ba 100644
--- a/apps/web/src/pages/templates/components/VariantItemCard.tsx
+++ b/apps/web/src/pages/templates/components/VariantItemCard.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { FilterPartTypeEnum, StepTypeEnum, STEP_TYPE_TO_CHANNEL_TYPE } from '@novu/shared';
-import { useEffect, useRef, useState } from 'react';
+import { MouseEventHandler, useEffect, useRef, useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
 import { colors, Check, Conditions as ConditionsIcon } from '@novu/design-system';
@@ -16,6 +16,7 @@ import { DeleteConfirmModal } from './DeleteConfirmModal';
 import { IForm, IFormStep, IVariantStep } from './formTypes';
 import { useTemplateEditorForm } from './TemplateEditorFormProvider';
 import { NODE_ERROR_TYPES } from '../workflow/workflow/node-types/utils';
+import { useNavigateToVariantPreview } from '../hooks/useNavigateToVariantPreview';
 
 const VariantItemCardHolder = styled.div`
   display: grid;
@@ -31,10 +32,10 @@ const FlexContainer = styled.span`
   align-items: center;
 `;
 
-const WorkflowNodeStyled = styled(WorkflowNode)<{ isError: boolean }>`
+const WorkflowNodeStyled = styled(WorkflowNode)`
+  cursor: pointer;
   grid-column: 5 / -1;
   grid-row: 2 / -1;
-  ${({ isError }) => (isError ? `border: 1px solid ${colors.error}` : '')}
 `;
 
 const HorizontalLine = styled.span`
@@ -122,7 +123,6 @@ export const VariantItemCard = ({
   variant,
   'data-test-id': dataTestId,
   errorMessage,
-  isActiveError = false,
   nodeErrorType,
 }: {
   isReadonly?: boolean;
@@ -133,13 +133,17 @@ export const VariantItemCard = ({
   nodeType: NodeType;
   'data-test-id'?: string;
   errorMessage?: string;
-  isActiveError?: boolean;
   nodeErrorType?: NODE_ERROR_TYPES;
 }) => {
   const { setValue } = useFormContext<IForm>();
-  const { channel, stepUuid = '' } = useParams<{
+  const {
+    channel,
+    stepUuid = '',
+    variantUuid = '',
+  } = useParams<{
     channel: StepTypeEnum;
     stepUuid: string;
+    variantUuid: string;
   }>();
   const subtitle = useStepSubtitle({
     path: `steps.${stepIndex}.variants.${variantIndex}`,
@@ -148,6 +152,7 @@ export const VariantItemCard = ({
   });
   const navigate = useNavigate();
   const basePath = useBasePath();
+  const { navigateToVariantPreview } = useNavigateToVariantPreview();
   const [areConditionsOpened, setConditionsOpened] = useState(false);
   const filterPartsList = useFilterPartsList({ index: stepIndex });
   const { deleteVariant } = useTemplateEditorForm();
@@ -157,10 +162,12 @@ export const VariantItemCard = ({
   const Icon = stepIcon[channel ?? ''];
   const variantsCount = ('variants' in variant ? variant.variants?.length : 0) ?? 0;
   const isRoot = nodeType === 'variantRoot';
+  const isSelected = (isRoot && stepUuid === variantUuid) || variant.uuid === variantUuid;
   const conditions = variant.filters ?? [];
   const conditionsCount = conditions && conditions.length > 0 ? conditions[0].children?.length ?? 0 : 0;
 
-  const onEdit = () => {
+  const onEdit: MouseEventHandler<HTMLButtonElement> = (e) => {
+    e.stopPropagation();
     if (isRoot) {
       navigate(basePath + `/${channel}/${stepUuid}`);
 
@@ -169,6 +176,11 @@ export const VariantItemCard = ({
     navigate(basePath + `/${channel}/${stepUuid}/variants/${variant.uuid}`);
   };
 
+  const onClick: MouseEventHandler<HTMLDivElement> = (e) => {
+    e.stopPropagation();
+    navigateToVariantPreview({ variantUuid: variant.uuid });
+  };
+
   const onDeleteIcon = () => {
     setIsDeleteModalOpened(true);
   };
@@ -200,10 +212,10 @@ export const VariantItemCard = ({
   };
 
   useEffect(() => {
-    if (isActiveError) {
+    if (isSelected) {
       variantItemCardHolderRef.current?.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
-  }, [isActiveError]);
+  }, [isSelected]);
 
   return (
     <VariantItemCardHolder ref={variantItemCardHolderRef} data-test-id={dataTestId}>
@@ -245,14 +257,15 @@ export const VariantItemCard = ({
         channelType={variant.template?.type}
         variantsCount={variantsCount}
         conditionsCount={conditionsCount}
+        onClick={onClick}
         onEdit={onEdit}
         onDelete={onDeleteIcon}
         onAddConditions={onAddConditions}
         menuPosition="bottom-end"
         nodeType={nodeType}
         errors={errorMessage}
-        isError={isActiveError}
         nodeErrorType={nodeErrorType}
+        active={isSelected}
       />
       {areConditionsOpened && (
         <Conditions
diff --git a/apps/web/src/pages/templates/components/VariantPreview.tsx b/apps/web/src/pages/templates/components/VariantPreview.tsx
new file mode 100644
index 00000000000..4e0f6be7345
--- /dev/null
+++ b/apps/web/src/pages/templates/components/VariantPreview.tsx
@@ -0,0 +1,30 @@
+import styled from '@emotion/styled';
+import { StepTypeEnum } from '@novu/shared';
+import { useParams } from 'react-router-dom';
+import { PreviewComponent } from './ChannelPreview';
+
+const VariantPreviewContainer = styled.div`
+  display: grid;
+  grid-template-columns: minmax(auto, 90rem);
+  justify-content: center;
+  justify-items: center;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding-bottom: 1rem;
+`;
+
+export const VariantPreview = () => {
+  const { channel } = useParams<{
+    channel: StepTypeEnum;
+  }>();
+
+  if (!channel) {
+    return null;
+  }
+
+  return (
+    <VariantPreviewContainer>
+      <PreviewComponent channel={channel} />
+    </VariantPreviewContainer>
+  );
+};
diff --git a/apps/web/src/pages/templates/components/VariantsList.tsx b/apps/web/src/pages/templates/components/VariantsList.tsx
new file mode 100644
index 00000000000..053b1961e03
--- /dev/null
+++ b/apps/web/src/pages/templates/components/VariantsList.tsx
@@ -0,0 +1,116 @@
+import { useMemo, useRef, useState } from 'react';
+import styled from '@emotion/styled';
+import { useFormContext } from 'react-hook-form';
+import { ScrollArea } from '@mantine/core';
+import { useParams } from 'react-router-dom';
+import { useEnvController } from '@novu/shared-web';
+import { StepTypeEnum } from '@novu/shared';
+
+import { FloatingButton } from './FloatingButton';
+import { VariantItemCard } from './VariantItemCard';
+import { ItemTypeEnum } from './useVariantListErrors';
+import { IForm } from './formTypes';
+import { VariantsListErrors } from './VariantsListErrors';
+import { When } from '@novu/design-system';
+import { useVariantListErrorsNavigation } from './useVariantListErrorsNavigation';
+
+const LeftContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const VariantsList = () => {
+  const { channel, stepUuid = '' } = useParams<{
+    channel: StepTypeEnum;
+    stepUuid: string;
+  }>();
+  const { readonly: isReadonly } = useEnvController();
+  const { watch } = useFormContext<IForm>();
+  const viewport = useRef<HTMLDivElement | null>(null);
+  const [scrollPosition, setScrollPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
+  const [isScrollable, setScrollable] = useState(false);
+
+  const steps = watch('steps');
+  const stepIndex = useMemo(
+    () => steps.findIndex((message) => message.template.type === channel && message.uuid === stepUuid),
+    [channel, stepUuid, steps]
+  );
+  const step = watch(`steps.${stepIndex}`);
+  const variants = step?.variants ?? [];
+
+  const { allErrors, errorState, onErrorUp, onErrorDown, onErrorMessageClick } = useVariantListErrorsNavigation();
+  const isRootErrorActive = errorState?.itemType === ItemTypeEnum.ROOT;
+  const allErrorsCount = allErrors.errors.length;
+  const hasErrors = allErrorsCount > 0;
+
+  const setViewportRef = (ref: HTMLDivElement | null) => {
+    if (!ref) {
+      return;
+    }
+    viewport.current = ref;
+    setScrollable(ref.scrollHeight > ref.clientHeight);
+  };
+
+  const scrollTo = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!viewport.current) {
+      return;
+    }
+
+    viewport.current.scrollTo({ top: scrollPosition.y > 0 ? 0 : viewport.current.scrollHeight, behavior: 'smooth' });
+  };
+
+  return (
+    <LeftContainer>
+      <When truthy={hasErrors}>
+        <VariantsListErrors
+          error={{ errorIndex: errorState?.errorIndex, errorMessage: errorState?.errorMessage }}
+          errorsCount={allErrorsCount}
+          onErrorMessageClick={onErrorMessageClick}
+          onErrorUp={onErrorUp}
+          onErrorDown={onErrorDown}
+        />
+      </When>
+      <ScrollArea
+        key={stepUuid}
+        offsetScrollbars
+        styles={{ viewport: { padding: '0 1.5rem 1.5rem 0.75rem' } }}
+        viewportRef={setViewportRef}
+        onScrollPositionChange={setScrollPosition}
+      >
+        {[...variants].reverse().map((variant, idx) => {
+          const variantIndex = variants.length - idx - 1;
+          const isActiveError = errorState?.variantIndex === variantIndex;
+          const errorMessage = isActiveError ? errorState.errorMessage : allErrors.errorsMap[`variant-${variantIndex}`];
+
+          return (
+            <VariantItemCard
+              key={`${stepUuid}_${variant._id}`}
+              isReadonly={isReadonly}
+              isFirst={variantIndex === 0}
+              variant={variant}
+              stepIndex={stepIndex}
+              variantIndex={variantIndex}
+              nodeType="variant"
+              data-test-id={`variant-item-card-${variantIndex}`}
+              errorMessage={errorMessage}
+            />
+          );
+        })}
+        {step && (
+          <VariantItemCard
+            isReadonly={isReadonly}
+            key={stepUuid}
+            variant={step}
+            nodeType="variantRoot"
+            data-test-id="variant-root-card"
+            errorMessage={isRootErrorActive ? errorState.errorMessage : allErrors.errorsMap.root}
+            nodeErrorType={isRootErrorActive ? errorState.errorType : undefined}
+          />
+        )}
+        {isScrollable && <FloatingButton isUp={scrollPosition.y > 0} onClick={scrollTo} />}
+      </ScrollArea>
+    </LeftContainer>
+  );
+};
diff --git a/apps/web/src/pages/templates/components/VariantsListErrors.tsx b/apps/web/src/pages/templates/components/VariantsListErrors.tsx
new file mode 100644
index 00000000000..590814a9175
--- /dev/null
+++ b/apps/web/src/pages/templates/components/VariantsListErrors.tsx
@@ -0,0 +1,53 @@
+import styled from '@emotion/styled';
+import { ActionIcon, Divider, Group } from '@mantine/core';
+import { ChevronPlainDown, colors, ErrorIcon, Text } from '@novu/design-system';
+
+import { When } from '../../../components/utils/When';
+
+const ChevronPlainUp = styled(ChevronPlainDown)`
+  transform: rotate(180deg);
+`;
+
+interface IVariantsListErrorsProps {
+  error: {
+    errorMessage?: string;
+    errorIndex?: number;
+  };
+  errorsCount: number;
+  onErrorMessageClick: () => void;
+  onErrorUp: () => void;
+  onErrorDown: () => void;
+}
+
+export const VariantsListErrors: React.FC<IVariantsListErrorsProps> = ({
+  error,
+  errorsCount,
+  onErrorMessageClick,
+  onErrorUp,
+  onErrorDown,
+}) => {
+  return (
+    <When truthy={error}>
+      <Group position="apart" px={12} mt={10} mb={10}>
+        <Group position="left" spacing={4} onClick={onErrorMessageClick} sx={{ cursor: 'pointer' }}>
+          <ErrorIcon color={colors.error} width="16px" height="16px" />
+          <Text color={colors.error} data-test-id="variants-list-current-error">
+            {error?.errorMessage || ''}
+          </Text>
+        </Group>
+        <Group position="left" spacing={20}>
+          <Text color={colors.error} data-test-id="variants-list-errors-count">
+            {(error?.errorIndex ?? 0) + 1}/{errorsCount}
+          </Text>
+          <Divider orientation="vertical" size="sm" color="#ffffff33" />
+          <ActionIcon color="gray" radius="xl" size="xs" onClick={onErrorUp} data-test-id="variants-list-errors-up">
+            <ChevronPlainUp color={colors.error} />
+          </ActionIcon>
+          <ActionIcon color="gray" radius="xl" size="xs" onClick={onErrorDown} data-test-id="variants-list-errors-down">
+            <ChevronPlainDown color={colors.error} />
+          </ActionIcon>
+        </Group>
+      </Group>
+    </When>
+  );
+};
diff --git a/apps/web/src/pages/templates/components/VariantsListSidebar.tsx b/apps/web/src/pages/templates/components/VariantsListSidebar.tsx
index bf2a16a876e..4a77da56384 100644
--- a/apps/web/src/pages/templates/components/VariantsListSidebar.tsx
+++ b/apps/web/src/pages/templates/components/VariantsListSidebar.tsx
@@ -5,8 +5,8 @@ import { Sidebar } from '@novu/design-system';
 
 import { useStepIndex } from '../hooks/useStepIndex';
 import { StepName } from './StepName';
+import { VariantsListSidebarActions } from './VariantsListSidebarActions';
 import { useBasePath } from '../hooks/useBasePath';
-import { EditorSidebarHeaderActions } from './EditorSidebarHeaderActions';
 
 const VariantsSidebarHeader = ({ isLoading }: { isLoading?: boolean }) => {
   const { channel } = useParams<{
@@ -20,34 +20,31 @@ const VariantsSidebarHeader = ({ isLoading }: { isLoading?: boolean }) => {
   return (
     <div style={{ display: 'flex', width: '100%', gap: 12 }}>
       <StepName channel={channel} />
-      <EditorSidebarHeaderActions />
+      <VariantsListSidebarActions />
     </div>
   );
 };
 
 export const VariantsListSidebar = ({ isLoading = false, children }: { isLoading?: boolean; children: ReactNode }) => {
   const navigate = useNavigate();
-  const path = useBasePath();
+  const basePath = useBasePath();
   const { stepIndex } = useStepIndex();
 
   return (
     <Sidebar
       key={`${stepIndex}`}
       isOpened
+      isExpanded
       isLoading={isLoading}
       customHeader={<VariantsSidebarHeader isLoading={isLoading} />}
       onClose={() => {
-        navigate(path);
+        navigate(basePath);
       }}
       styles={{
         body: {
           '> form': {
             gap: 0,
           },
-          '.sidebar-body-holder': {
-            marginRight: 0,
-            paddingRight: 0,
-          },
         },
       }}
       data-test-id="variants-list-sidebar"
diff --git a/apps/web/src/pages/templates/components/VariantsListSidebarActions.tsx b/apps/web/src/pages/templates/components/VariantsListSidebarActions.tsx
new file mode 100644
index 00000000000..08474129983
--- /dev/null
+++ b/apps/web/src/pages/templates/components/VariantsListSidebarActions.tsx
@@ -0,0 +1,171 @@
+import { Group } from '@mantine/core';
+import { useEffect, useRef, useState } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { FilterPartTypeEnum } from '@novu/shared';
+import { ActionButton, Condition, ConditionPlus, Trash, VariantPlus } from '@novu/design-system';
+
+import { Conditions, IConditions } from '../../../components/conditions';
+import { When } from '../../../components/utils/When';
+import { useEnvController } from '../../../hooks';
+import { useBasePath } from '../hooks/useBasePath';
+import { useFilterPartsList } from '../hooks/useFilterPartsList';
+import { useStepIndex } from '../hooks/useStepIndex';
+import { useStepVariantsCount } from '../hooks/useStepVariantsCount';
+import { DeleteConfirmModal } from './DeleteConfirmModal';
+import { IForm } from './formTypes';
+import { makeVariantFromStep, useTemplateEditorForm } from './TemplateEditorFormProvider';
+
+const variantsCreatePath = '/variants/create';
+
+export const VariantsListSidebarActions = () => {
+  const { control, watch, setValue } = useFormContext<IForm>();
+  const { deleteStep } = useTemplateEditorForm();
+  const { readonly: isReadonly } = useEnvController();
+  const { stepUuid = '', channel = '' } = useParams<{
+    stepUuid: string;
+    channel: string;
+    variantUuid: string;
+  }>();
+  const basePath = useBasePath();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const isNewVariantCreationUrl = pathname.endsWith(variantsCreatePath);
+  const [areConditionsOpened, setConditionsOpened] = useState(isNewVariantCreationUrl);
+  const [isDeleteModalOpened, setIsDeleteModalOpened] = useState(false);
+
+  useEffect(() => {
+    setConditionsOpened(isNewVariantCreationUrl);
+  }, [isNewVariantCreationUrl]);
+  // we need to know if we are creating a new variant to continue redirection to the new variant page
+  const proceedToNewVariant = useRef(false);
+
+  const { step: rootStep, stepIndex } = useStepIndex();
+  const stepFormPath = `steps.${stepIndex}` as const;
+  const filterPartsList = useFilterPartsList({ index: stepIndex });
+  const { variantsCount } = useStepVariantsCount();
+
+  const { append } = useFieldArray({
+    control,
+    name: `${stepFormPath}.variants`,
+  });
+
+  // [] is the default value for filters for the new variants
+  const filters = isNewVariantCreationUrl ? [] : watch(`${stepFormPath}.filters.0.children`);
+  const conditions = isNewVariantCreationUrl ? [] : watch(`${stepFormPath}.filters`);
+  const formPathName = watch(`${stepFormPath}.name`);
+  const name = isNewVariantCreationUrl ? `V${variantsCount + 1} ${formPathName}` : formPathName;
+  const hasNoFilters = (filters && filters?.length === 0) || !filters || isNewVariantCreationUrl;
+
+  const onAddVariant = () => {
+    const newPath = basePath + `/${channel}/${stepUuid}/variants/create`;
+    navigate(newPath);
+  };
+
+  const updateConditions = (newConditions: IConditions[]) => {
+    if (isNewVariantCreationUrl) {
+      proceedToNewVariant.current = true;
+      if (!rootStep) {
+        return;
+      }
+
+      const variant = makeVariantFromStep(rootStep, { conditions: newConditions });
+      append(variant);
+      navigate(basePath + `/${variant.template.type}/${stepUuid}/variants/${variant.uuid}`);
+    } else {
+      setValue(`${stepFormPath}.filters`, newConditions, { shouldDirty: true });
+    }
+  };
+
+  const onConditionsClose = () => {
+    if (isNewVariantCreationUrl && !proceedToNewVariant.current) {
+      navigate(-1);
+
+      return;
+    }
+
+    setConditionsOpened(false);
+  };
+
+  const openDeleteModal = () => {
+    setIsDeleteModalOpened(true);
+  };
+
+  const confirmDelete = () => {
+    deleteStep(stepIndex);
+    navigate(basePath);
+    setIsDeleteModalOpened(false);
+  };
+
+  const cancelDelete = () => {
+    setIsDeleteModalOpened(false);
+  };
+
+  const conditionAction = isReadonly ? 'View' : hasNoFilters ? 'Add' : 'Edit';
+
+  return (
+    <>
+      <Group noWrap spacing={12} ml={'auto'} sx={{ alignItems: 'flex-start' }}>
+        <When truthy={!isReadonly}>
+          <ActionButton
+            tooltip="Add variant"
+            onClick={onAddVariant}
+            Icon={VariantPlus}
+            data-test-id="variant-sidebar-add-variant"
+          />
+        </When>
+        <When truthy={hasNoFilters && !isReadonly}>
+          <ActionButton
+            tooltip={`${conditionAction} group conditions`}
+            onClick={() => setConditionsOpened(true)}
+            Icon={ConditionPlus}
+            data-test-id="variant-sidebar-add-conditions"
+          />
+        </When>
+        <When truthy={!hasNoFilters}>
+          <ActionButton
+            tooltip={`${conditionAction} group conditions`}
+            text={`${filters?.length ?? ''}`}
+            onClick={() => setConditionsOpened(true)}
+            Icon={Condition}
+            data-test-id="variant-sidebar-edit-conditions"
+          />
+        </When>
+        <When truthy={!isReadonly}>
+          <ActionButton
+            tooltip={`Delete step`}
+            onClick={openDeleteModal}
+            Icon={Trash}
+            data-test-id="variant-sidebar-delete"
+          />
+        </When>
+      </Group>
+      {areConditionsOpened && (
+        <Conditions
+          isOpened={areConditionsOpened}
+          isReadonly={isReadonly}
+          name={name ?? ''}
+          onClose={onConditionsClose}
+          updateConditions={updateConditions}
+          conditions={conditions}
+          filterPartsList={filterPartsList}
+          defaultFilter={FilterPartTypeEnum.PAYLOAD}
+        />
+      )}
+
+      <DeleteConfirmModal
+        description={
+          'This cannot be undone. ' +
+          `The trigger code will be updated and this step will no longer participate in the notification workflow.`
+        }
+        target={'step'}
+        title={`Delete step?`}
+        isOpen={isDeleteModalOpened}
+        confirm={confirmDelete}
+        cancel={cancelDelete}
+        confirmButtonText={`Delete step`}
+        cancelButtonText="Cancel"
+      />
+    </>
+  );
+};
diff --git a/apps/web/src/pages/templates/components/VariantsPage.tsx b/apps/web/src/pages/templates/components/VariantsPage.tsx
index a734dc60fb9..098131b2cea 100644
--- a/apps/web/src/pages/templates/components/VariantsPage.tsx
+++ b/apps/web/src/pages/templates/components/VariantsPage.tsx
@@ -1,201 +1,50 @@
-import { ActionIcon, Divider, Group, ScrollArea } from '@mantine/core';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useFormContext } from 'react-hook-form';
 import { useNavigate, useParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { StepTypeEnum, DELAYED_STEPS } from '@novu/shared';
-import { ChevronPlainDown, colors, ErrorIcon, Text } from '@novu/design-system';
 
-import { useEnvController } from '../../../hooks';
-import { FloatingButton } from './FloatingButton';
-import { IForm } from './formTypes';
 import { useTemplateEditorForm } from './TemplateEditorFormProvider';
-import { VariantItemCard } from './VariantItemCard';
 import { VariantsListSidebar } from './VariantsListSidebar';
-import { When } from '../../../components/utils/When';
-import { NODE_ERROR_TYPES } from '../workflow/workflow/node-types/utils';
 import { useBasePath } from '../hooks/useBasePath';
-import { ItemTypeEnum, useVariantListErrors } from './useVariantListErrors';
+import { VariantsList } from './VariantsList';
+import { VariantPreview } from './VariantPreview';
+
+const VariantsPageContainer = styled.div`
+  display: grid;
+  grid-template-columns: 25rem 1fr;
+  grid-template-rows: 100%;
+  gap: 1rem;
+  height: 100%;
+
+  @media screen and (min-width: 1367px) {
+    gap: 3rem;
+    grid-template-columns: 27rem 1fr;
+  }
+`;
 
 export function VariantsPage() {
   const navigate = useNavigate();
   const basePath = useBasePath();
-  const { watch } = useFormContext<IForm>();
   const { channel, stepUuid = '' } = useParams<{
     channel: StepTypeEnum;
     stepUuid: string;
   }>();
-  const { readonly: isReadonly } = useEnvController();
   const { isLoading } = useTemplateEditorForm();
-  const viewport = useRef<HTMLDivElement | null>(null);
-  const [scrollPosition, setScrollPosition] = useState<{ x: number; y: number }>({ x: 0, y: 0 });
-  const [isScrollable, setScrollable] = useState(false);
-  const [errorState, setErrorState] = useState<{
-    itemType: ItemTypeEnum;
-    variantIndex?: number;
-    errorMessage: string;
-    errorIndex: number;
-    errorType: NODE_ERROR_TYPES;
-  } | null>(null);
-
-  const steps = watch('steps');
-
-  const stepIndex = useMemo(
-    () => steps.findIndex((message) => message.template.type === channel && message.uuid === stepUuid),
-    [channel, stepUuid, steps]
-  );
-  const step = watch(`steps.${stepIndex}`);
-  const isDelayedStep = DELAYED_STEPS.includes(channel as StepTypeEnum);
-
-  const setViewportRef = (ref: HTMLDivElement | null) => {
-    if (!ref) {
-      return;
-    }
-    viewport.current = ref;
-    setScrollable(ref.scrollHeight > ref.clientHeight);
-  };
-
-  const scrollTo = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!viewport.current) {
-      return;
-    }
-
-    viewport.current.scrollTo({ top: scrollPosition.y > 0 ? 0 : viewport.current.scrollHeight, behavior: 'smooth' });
-  };
-
-  const variants = step?.variants ?? [];
-
-  const allErrors = useVariantListErrors();
-
-  useEffect(() => {
-    if (allErrors.errors.length > 0) {
-      const firstError = allErrors.errors[0];
-      setErrorState({
-        ...firstError,
-        errorIndex: 0,
-      });
-    } else {
-      setErrorState(null);
-    }
-  }, [allErrors]);
 
   if (!channel) {
     return null;
   }
 
+  const isDelayedStep = DELAYED_STEPS.includes(channel as StepTypeEnum);
   if (isDelayedStep) {
     navigate(`${basePath}/${channel}/${stepUuid}`);
   }
 
-  const handleErrorNavigation = (direction: 'up' | 'down') => {
-    const hasErrors = allErrors.errors.length > 0;
-    if (!errorState || !hasErrors) {
-      return;
-    }
-
-    const { errorIndex } = errorState;
-    const nextErrorIndex = direction === 'up' ? errorIndex - 1 : errorIndex + 1;
-
-    if (nextErrorIndex < 0 || nextErrorIndex >= allErrors.errors.length) {
-      return;
-    }
-
-    const error = allErrors.errors[nextErrorIndex];
-
-    setErrorState({
-      variantIndex: error.variantIndex,
-      errorMessage: error.errorMessage,
-      itemType: error.itemType,
-      errorIndex: nextErrorIndex,
-      errorType: error.errorType,
-    });
-  };
-
-  const isRootErrorActive = errorState?.itemType === ItemTypeEnum.ROOT;
-
   return (
     <VariantsListSidebar isLoading={isLoading}>
-      <When truthy={errorState}>
-        <Group position="apart" px={12}>
-          <Group position="left" spacing={4}>
-            <ErrorIcon color={colors.error} width="16px" height="16px" />
-            <Text color={colors.error} data-test-id="variants-list-current-error">
-              {errorState?.errorMessage || ''}
-            </Text>
-          </Group>
-          <Group position="left" spacing={20}>
-            <Text color={colors.error} data-test-id="variants-list-errors-count">
-              {(errorState?.errorIndex ?? 0) + 1}/{allErrors.errors.length}
-            </Text>
-            <Divider orientation="vertical" size="sm" color="#ffffff33" />
-            <ActionIcon
-              color="gray"
-              radius="xl"
-              size="xs"
-              onClick={() => handleErrorNavigation('up')}
-              data-test-id="variants-list-errors-up"
-            >
-              <ChevronPlainUp color={colors.error} />
-            </ActionIcon>
-            <ActionIcon
-              color="gray"
-              radius="xl"
-              size="xs"
-              onClick={() => handleErrorNavigation('down')}
-              data-test-id="variants-list-errors-down"
-            >
-              <ChevronPlainDown color={colors.error} />
-            </ActionIcon>
-          </Group>
-        </Group>
-      </When>
-      <ScrollArea
-        key={stepUuid}
-        offsetScrollbars
-        styles={{ viewport: { padding: '0 12px 24px 12px' } }}
-        viewportRef={setViewportRef}
-        onScrollPositionChange={setScrollPosition}
-      >
-        {[...variants].reverse().map((variant, idx) => {
-          const variantIndex = variants.length - idx - 1;
-          const isActiveError = errorState?.variantIndex === variantIndex;
-          const errorMessage = isActiveError ? errorState.errorMessage : allErrors.errorsMap[`variant-${variantIndex}`];
-
-          return (
-            <VariantItemCard
-              key={`${stepUuid}_${variant._id}`}
-              isReadonly={isReadonly}
-              isFirst={variantIndex === 0}
-              variant={variant}
-              stepIndex={stepIndex}
-              variantIndex={variantIndex}
-              nodeType="variant"
-              data-test-id={`variant-item-card-${variantIndex}`}
-              errorMessage={errorMessage}
-              isActiveError={isActiveError}
-            />
-          );
-        })}
-        {step && (
-          <VariantItemCard
-            isReadonly={isReadonly}
-            key={stepUuid}
-            variant={step}
-            nodeType="variantRoot"
-            data-test-id="variant-root-card"
-            errorMessage={isRootErrorActive ? errorState.errorMessage : allErrors.errorsMap.root}
-            isActiveError={isRootErrorActive}
-            nodeErrorType={isRootErrorActive ? errorState.errorType : undefined}
-          />
-        )}
-        {isScrollable && <FloatingButton isUp={scrollPosition.y > 0} onClick={scrollTo} />}
-      </ScrollArea>
+      <VariantsPageContainer>
+        <VariantsList />
+        <VariantPreview />
+      </VariantsPageContainer>
     </VariantsListSidebar>
   );
 }
-
-const ChevronPlainUp = styled(ChevronPlainDown)`
-  transform: rotate(180deg);
-`;
diff --git a/apps/web/src/pages/templates/components/chat-editor/TemplateChatEditor.tsx b/apps/web/src/pages/templates/components/chat-editor/TemplateChatEditor.tsx
index 2509552d297..3d759b66c41 100644
--- a/apps/web/src/pages/templates/components/chat-editor/TemplateChatEditor.tsx
+++ b/apps/web/src/pages/templates/components/chat-editor/TemplateChatEditor.tsx
@@ -1,51 +1,68 @@
 import { ChannelTypeEnum } from '@novu/shared';
 import { Controller, useFormContext } from 'react-hook-form';
+import { Grid, Stack } from '@mantine/core';
+import { useState } from 'react';
 
-import { Textarea } from '@novu/design-system';
-import { useEnvController, useHasActiveIntegrations, useVariablesManager } from '../../../../hooks';
-import { useStepFormErrors } from '../../hooks/useStepFormErrors';
+import { useHasActiveIntegrations, useVariablesManager } from '../../../../hooks';
 import { useStepFormPath } from '../../hooks/useStepFormPath';
 import { StepSettings } from '../../workflow/SideBar/StepSettings';
 import type { IForm } from '../formTypes';
 import { LackIntegrationAlert } from '../LackIntegrationAlert';
-import { VariableManager } from '../VariableManager';
-import { TranslateProductLead } from '../TranslateProductLead';
+import { CustomCodeEditor } from '../CustomCodeEditor';
+import { ChatPreview } from '../../../../components/workflow/preview';
+
+import { EditVariablesModal } from '../EditVariablesModal';
+import { VariableManagementButton } from '../VariableManagementButton';
+import { useEditTemplateContent } from '../../hooks/useEditTemplateContent';
 
 const templateFields = ['content'];
 
 export function TemplateChatEditor() {
-  const { readonly } = useEnvController();
+  const { isPreviewLoading, handleContentChange } = useEditTemplateContent();
   const stepFormPath = useStepFormPath();
-  const stepFormErrors = useStepFormErrors();
   const { control } = useFormContext<IForm>();
   const variablesArray = useVariablesManager(templateFields);
   const { hasActiveIntegration } = useHasActiveIntegrations({
     channelType: ChannelTypeEnum.CHAT,
   });
+  const [editVariablesModalOpened, setEditVariablesModalOpen] = useState(false);
 
   return (
     <>
       {!hasActiveIntegration ? <LackIntegrationAlert channelType={ChannelTypeEnum.CHAT} /> : null}
       <StepSettings />
-      <Controller
-        name={`${stepFormPath}.template.content`}
-        defaultValue=""
-        control={control}
-        render={({ field }) => (
-          <Textarea
-            {...field}
-            data-test-id="chatNotificationContent"
-            error={stepFormErrors ? stepFormErrors?.template?.content?.message : undefined}
-            disabled={readonly}
-            minRows={4}
-            value={(field.value as string) || ''}
-            label="Chat message content"
-            placeholder="Add notification content here..."
+      <Grid>
+        <Grid.Col span={6}>
+          <Controller
+            name={`${stepFormPath}.template.content`}
+            defaultValue=""
+            control={control}
+            render={({ field }) => (
+              <Stack spacing={8}>
+                <VariableManagementButton
+                  openEditVariablesModal={() => {
+                    setEditVariablesModalOpen(true);
+                  }}
+                />
+                <CustomCodeEditor
+                  value={(field.value as string) || ''}
+                  onChange={(value) => {
+                    handleContentChange(value, field.onChange);
+                  }}
+                />
+              </Stack>
+            )}
           />
-        )}
+        </Grid.Col>
+        <Grid.Col span={6}>
+          <ChatPreview showLoading={isPreviewLoading} />
+        </Grid.Col>
+      </Grid>
+      <EditVariablesModal
+        open={editVariablesModalOpened}
+        setOpen={setEditVariablesModalOpen}
+        variablesArray={variablesArray}
       />
-      <VariableManager variablesArray={variablesArray} path={`${stepFormPath}.template`} />
-      <TranslateProductLead id="translate-chat-editor" />
     </>
   );
 }
diff --git a/apps/web/src/pages/templates/components/email-editor/EmailMessagesCards.tsx b/apps/web/src/pages/templates/components/email-editor/EmailMessagesCards.tsx
index bf393bfae62..6555db8c757 100644
--- a/apps/web/src/pages/templates/components/email-editor/EmailMessagesCards.tsx
+++ b/apps/web/src/pages/templates/components/email-editor/EmailMessagesCards.tsx
@@ -2,13 +2,13 @@ import { useState } from 'react';
 import { EmailContentCard } from './EmailContentCard';
 import { useAuthContext } from '../../../../components/providers/AuthProvider';
 import { When } from '../../../../components/utils/When';
-import { Preview } from '../../editor/Preview';
+import { EmailPreview } from '../../../../components/workflow/preview';
 import { EditorPreviewSwitch } from '../EditorPreviewSwitch';
 import { Grid, SegmentedControl, useMantineTheme } from '@mantine/core';
 import { TestSendEmail } from './TestSendEmail';
 import { colors } from '@novu/design-system';
-import { MobileIcon } from '../../editor/PreviewSegment/MobileIcon';
-import { WebIcon } from '../../editor/PreviewSegment/WebIcon';
+import { MobileIcon } from '../../../../components/workflow/preview/email/PreviewSegment/MobileIcon';
+import { WebIcon } from '../../../../components/workflow/preview/email/PreviewSegment/WebIcon';
 import { useHotkeys } from '@mantine/hooks';
 import { VariablesManagement } from './variables-management/VariablesManagement';
 import {
@@ -18,9 +18,8 @@ import {
   useVariablesManager,
   useEnvController,
 } from '../../../../hooks';
-import { VariableManagerModal } from '../VariableManagerModal';
+import { EditVariablesModal } from '../EditVariablesModal';
 import { StepSettings } from '../../workflow/SideBar/StepSettings';
-import { TranslateProductLead } from '../TranslateProductLead';
 import { ChannelTypeEnum } from '@novu/shared';
 import { LackIntegrationAlert } from '../LackIntegrationAlert';
 import { useStepFormPath } from '../../hooks/useStepFormPath';
@@ -145,7 +144,7 @@ export function EmailMessagesCards() {
         </Grid>
       </div>
       <When truthy={view === ViewEnum.PREVIEW}>
-        <Preview view={preview} />
+        <EmailPreview view={preview} />
       </When>
       <When truthy={view === ViewEnum.TEST}>
         <TestSendEmail isIntegrationActive={hasActiveIntegration} />
@@ -154,12 +153,6 @@ export function EmailMessagesCards() {
         <Grid grow>
           <Grid.Col span={9}>
             <EmailContentCard organization={currentOrganization} />
-            <TranslateProductLead
-              id="translate-email-editor"
-              style={{
-                marginTop: 32,
-              }}
-            />
           </Grid.Col>
           <Grid.Col
             span={3}
@@ -176,7 +169,7 @@ export function EmailMessagesCards() {
           </Grid.Col>
         </Grid>
       </When>
-      <VariableManagerModal setOpen={setModalOpen} open={modalOpen} variablesArray={variablesArray} />
+      <EditVariablesModal setOpen={setModalOpen} open={modalOpen} variablesArray={variablesArray} />
     </>
   );
 }
diff --git a/apps/web/src/pages/templates/components/email-editor/variables-management/VariablesManagement.tsx b/apps/web/src/pages/templates/components/email-editor/variables-management/VariablesManagement.tsx
index 2c970786291..db0d418efa3 100644
--- a/apps/web/src/pages/templates/components/email-editor/variables-management/VariablesManagement.tsx
+++ b/apps/web/src/pages/templates/components/email-editor/variables-management/VariablesManagement.tsx
@@ -1,14 +1,10 @@
 import { useWatch } from 'react-hook-form';
-import { UnstyledButton } from '@mantine/core';
-import { useQuery } from '@tanstack/react-query';
+import { Group, useMantineColorScheme } from '@mantine/core';
 import React, { useEffect, useState } from 'react';
 import * as set from 'lodash.set';
 import styled from '@emotion/styled';
 
 import {
-  Text,
-  Tooltip,
-  EditGradient,
   Translation,
   colors,
   NovuIcon,
@@ -17,6 +13,9 @@ import {
   Workflow,
   shadows,
   EmptySearch,
+  ActionButton,
+  PencilOutlined,
+  Close,
 } from '@novu/design-system';
 
 import { VarItemsDropdown } from './VarItemsDropdown';
@@ -24,7 +23,6 @@ import { VarLabel } from './VarLabel';
 import { useDebounce, useProcessVariables } from '../../../../../hooks';
 import { VarItemTooltip } from './VarItemTooltip';
 import { When } from '../../../../../components/utils/When';
-import { getWorkflowVariables } from '../../../../../api/notification-templates';
 import { useWorkflowVariables } from '../../../../../api/hooks';
 
 interface IVariablesList {
@@ -67,17 +65,22 @@ const searchVariables = (list, search: string) => {
 
 export const VariablesManagement = ({
   openVariablesModal,
+  closeVariablesManagement,
   control,
   path,
+  isPopover = false,
 }: {
   openVariablesModal?: () => void;
+  closeVariablesManagement?: () => void;
   control?: any;
   path: string;
+  isPopover?: boolean;
 }) => {
   const variableArray = useWatch({
     name: path,
     control,
   });
+  const { colorScheme } = useMantineColorScheme();
 
   const { variables } = useWorkflowVariables();
 
@@ -112,58 +115,66 @@ export const VariablesManagement = ({
   };
 
   return (
-    <VariablesContainer>
+    <VariablesContainer isPopover={isPopover}>
       <When truthy={openVariablesModal !== undefined}>
-        <div
+        <Group
+          px={16}
+          h={40}
+          noWrap
+          spacing={20}
+          position={'right'}
           style={{
-            textAlign: 'right',
-            marginBottom: '20px',
+            borderRadius: '8px 8px 0px 0px',
+            backgroundColor: colorScheme === 'dark' ? colors.B15 : colors.BGLight,
           }}
         >
-          <Tooltip label="Add defaults or mark as required">
-            <UnstyledButton
-              data-test-id="open-edit-variables-btn"
-              onClick={() => {
-                if (openVariablesModal) {
-                  openVariablesModal();
-                }
+          <ActionButton
+            onClick={() => {
+              if (openVariablesModal) {
+                openVariablesModal();
+              }
+            }}
+            Icon={PencilOutlined}
+            data-test-id="open-edit-variables-btn"
+            tooltip={'Add defaults or mark as required'}
+          />
+          <When truthy={closeVariablesManagement}>
+            <ActionButton
+              onClick={closeVariablesManagement}
+              sx={{
+                '> svg': {
+                  width: 14,
+                  height: 14,
+                },
               }}
-              type="button"
-            >
-              <Text gradient>
-                Edit Variables
-                <EditGradient
-                  style={{
-                    width: '18px',
-                    height: '18px',
-                    marginBottom: '-4px',
-                    marginLeft: 5,
-                  }}
-                />
-              </Text>
-            </UnstyledButton>
-          </Tooltip>
-        </div>
-      </When>
-      <Input
-        type={'search'}
-        onChange={handleSearchVariable}
-        mb={20}
-        placeholder={'Search variables...'}
-        rightSection={<Search />}
-      />
-      <When truthy={emptyVariablesList}>
-        <EmptySearchContainer>
-          <EmptySearch style={{ maxWidth: 200, marginBottom: 15 }} />
-          <span style={{ color: colors.B40, fontSize: 16, fontWeight: 600, lineHeight: '20px' }}>No matches found</span>
-          <span style={{ color: colors.B40, fontSize: 14, fontWeight: 400, lineHeight: '20px' }}>
-            Try being less specific or using different keywords.
-          </span>
-        </EmptySearchContainer>
-      </When>
-      <When truthy={!emptyVariablesList}>
-        <VariablesSection variablesList={variablesList} searchVal={searchVal} />
+              Icon={Close}
+            />
+          </When>
+        </Group>
       </When>
+      <div style={{ padding: '12px' }}>
+        <Input
+          type={'search'}
+          onChange={handleSearchVariable}
+          mb={20}
+          placeholder={'Search variables...'}
+          rightSection={<Search />}
+        />
+        <When truthy={emptyVariablesList}>
+          <EmptySearchContainer>
+            <EmptySearch style={{ maxWidth: 200, marginBottom: 15 }} />
+            <span style={{ color: colors.B40, fontSize: 16, fontWeight: 600, lineHeight: '20px' }}>
+              No matches found
+            </span>
+            <span style={{ color: colors.B40, fontSize: 14, fontWeight: 400, lineHeight: '20px' }}>
+              Try being less specific or using different keywords.
+            </span>
+          </EmptySearchContainer>
+        </When>
+        <When truthy={!emptyVariablesList}>
+          <VariablesSection variablesList={variablesList} searchVal={searchVal} />
+        </When>
+      </div>
     </VariablesContainer>
   );
 };
@@ -233,12 +244,11 @@ const VariableSectionItem = ({
   );
 };
 
-const VariablesContainer = styled.div`
+const VariablesContainer = styled.div<{ isPopover: boolean }>`
   width: 100%;
   height: 100%;
   border-radius: 8px;
-  padding: 15px;
-  box-shadow: ${shadows.dark};
+  box-shadow: ${({ isPopover }) => (isPopover ? 'none' : shadows.dark)};
 `;
 
 const EmptySearchContainer = styled.div`
diff --git a/apps/web/src/pages/templates/components/in-app-editor/AvatarFeedFields.tsx b/apps/web/src/pages/templates/components/in-app-editor/AvatarFeedFields.tsx
index e2644c5055a..25c73ef8f30 100644
--- a/apps/web/src/pages/templates/components/in-app-editor/AvatarFeedFields.tsx
+++ b/apps/web/src/pages/templates/components/in-app-editor/AvatarFeedFields.tsx
@@ -4,7 +4,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { useEffect, useState } from 'react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { showNotification } from '@mantine/notifications';
-import { IFeedEntity } from '@novu/shared';
+import type { IResponseError, IFeedEntity } from '@novu/shared';
 
 import { Checkbox, colors, Input, PlusGradient } from '@novu/design-system';
 import { useEnvController } from '../../../../hooks';
@@ -23,11 +23,7 @@ export const AvatarFeedFields = () => {
   const path = useStepFormPath();
 
   const { data: feeds } = useQuery([QueryKeys.getFeeds], getFeeds);
-  const { mutateAsync: createNewFeed } = useMutation<
-    IFeedEntity,
-    { error: string; message: string; statusCode: number },
-    { name: string }
-  >(createFeed, {
+  const { mutateAsync: createNewFeed } = useMutation<IFeedEntity, IResponseError, { name: string }>(createFeed, {
     onSuccess: (data) => {
       queryClient.setQueryData([QueryKeys.getFeeds], [...feeds, data]);
     },
diff --git a/apps/web/src/pages/templates/components/in-app-editor/FeedItems.tsx b/apps/web/src/pages/templates/components/in-app-editor/FeedItems.tsx
index a74cb23293e..81b8eae848f 100644
--- a/apps/web/src/pages/templates/components/in-app-editor/FeedItems.tsx
+++ b/apps/web/src/pages/templates/components/in-app-editor/FeedItems.tsx
@@ -6,7 +6,7 @@ import * as Sentry from '@sentry/react';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { showNotification } from '@mantine/notifications';
 import type { UseFormSetValue } from 'react-hook-form';
-import { IFeedEntity } from '@novu/shared';
+import type { IResponseError, IFeedEntity } from '@novu/shared';
 
 import { FeedChip } from './FeedChip';
 import { colors, shadows, Text, Tooltip, Button, Copy, Trash } from '@novu/design-system';
@@ -154,15 +154,14 @@ function DeleteBlock({
   const { colorScheme } = useMantineTheme();
   const queryClient = useQueryClient();
 
-  const { mutateAsync: deleteFeedById } = useMutation<
-    IFeedEntity[],
-    { error: string; message: string; statusCode: number },
-    string
-  >((feedId) => deleteFeed(feedId), {
-    onSuccess: (data) => {
-      queryClient.refetchQueries([QueryKeys.getFeeds]);
-    },
-  });
+  const { mutateAsync: deleteFeedById } = useMutation<IFeedEntity[], IResponseError, string>(
+    (feedId) => deleteFeed(feedId),
+    {
+      onSuccess: (data) => {
+        queryClient.refetchQueries([QueryKeys.getFeeds]);
+      },
+    }
+  );
 
   async function deleteFeedHandler(feedId: string) {
     try {
diff --git a/apps/web/src/pages/templates/components/in-app-editor/InAppContentCard.tsx b/apps/web/src/pages/templates/components/in-app-editor/InAppContentCard.tsx
index 2776a94c802..a0dd34e40ce 100644
--- a/apps/web/src/pages/templates/components/in-app-editor/InAppContentCard.tsx
+++ b/apps/web/src/pages/templates/components/in-app-editor/InAppContentCard.tsx
@@ -1,35 +1,23 @@
-import { useState, useEffect } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { Grid, useMantineTheme, JsonInput, SegmentedControl } from '@mantine/core';
-import { colors, inputStyles, When } from '@novu/design-system';
+import { Grid, SegmentedControl, useMantineTheme } from '@mantine/core';
+import { colors, When } from '@novu/design-system';
+import { useState } from 'react';
 
-import { useEnvController, useProcessVariables } from '../../../../hooks';
-import { InAppEditorBlock } from './InAppEditorBlock';
+import { InAppPreview } from '../../../../components/workflow/preview';
+import { useEnvController } from '../../../../hooks';
+import { useStepFormPath } from '../../hooks/useStepFormPath';
 import { VariablesManagement } from '../email-editor/variables-management/VariablesManagement';
 import { AvatarFeedFields } from './AvatarFeedFields';
-import { TranslateProductLead } from '../TranslateProductLead';
-import { useStepFormPath } from '../../hooks/useStepFormPath';
+import { InAppEditorBlock } from './InAppEditorBlock';
 
 const EDITOR = 'Editor';
 const PREVIEW = 'Preview';
 
 export function InAppContentCard({ openVariablesModal }: { openVariablesModal: () => void }) {
   const { readonly } = useEnvController();
-  const { control } = useFormContext();
   const theme = useMantineTheme();
-  const [payloadValue, setPayloadValue] = useState('{}');
+
   const [activeTab, setActiveTab] = useState<string>(EDITOR);
   const stepFormPath = useStepFormPath();
-  const variables = useWatch({
-    name: `${stepFormPath}.template.variables`,
-    control,
-  });
-
-  const processedVariables = useProcessVariables(variables);
-
-  useEffect(() => {
-    setPayloadValue(processedVariables);
-  }, [processedVariables, setPayloadValue]);
 
   return (
     <div data-test-id="editor-type-selector">
@@ -70,49 +58,14 @@ export function InAppContentCard({ openVariablesModal }: { openVariablesModal: (
         radius={'xl'}
       />
       <When truthy={activeTab === PREVIEW}>
-        <Grid mt={24} mb={0}>
-          <Grid.Col span={9} p={0}>
-            <div style={{ margin: '0 10px' }}>
-              <InAppEditorBlock payload={payloadValue} readonly={true} preview={true} />
-            </div>
-          </Grid.Col>
-          <Grid.Col span={3} p={0}>
-            <div
-              style={{
-                width: '100%',
-                height: '100%',
-                background: theme.colorScheme === 'dark' ? colors.B17 : colors.B98,
-                borderRadius: 7,
-                padding: 15,
-                paddingTop: 0,
-              }}
-            >
-              <JsonInput
-                data-test-id="preview-json-param"
-                formatOnBlur
-                autosize
-                styles={inputStyles}
-                label="Payload"
-                value={payloadValue}
-                onChange={setPayloadValue}
-                minRows={6}
-                mb={20}
-                validationError="Invalid JSON"
-              />
-            </div>
-          </Grid.Col>
-        </Grid>
+        <div style={{ marginTop: '1.5rem' }}>
+          <InAppPreview showVariables />
+        </div>
       </When>
       <When truthy={activeTab === EDITOR}>
         <Grid mt={24} grow>
           <Grid.Col span={9}>
             <InAppEditorBlock readonly={readonly} />
-            <TranslateProductLead
-              id="translate-in-app-editor"
-              style={{
-                marginTop: 32,
-              }}
-            />
             <AvatarFeedFields />
           </Grid.Col>
           <Grid.Col
diff --git a/apps/web/src/pages/templates/components/in-app-editor/TemplateInAppEditor.tsx b/apps/web/src/pages/templates/components/in-app-editor/TemplateInAppEditor.tsx
index 241506eb450..b9eb959c4d7 100644
--- a/apps/web/src/pages/templates/components/in-app-editor/TemplateInAppEditor.tsx
+++ b/apps/web/src/pages/templates/components/in-app-editor/TemplateInAppEditor.tsx
@@ -7,7 +7,7 @@ import { Input } from '@novu/design-system';
 import { useEnvController, useHasActiveIntegrations, useVariablesManager } from '../../../../hooks';
 import { StepSettings } from '../../workflow/SideBar/StepSettings';
 import { LackIntegrationAlert } from '../LackIntegrationAlert';
-import { VariableManagerModal } from '../VariableManagerModal';
+import { EditVariablesModal } from '../EditVariablesModal';
 import { InAppContentCard } from './InAppContentCard';
 import { useStepFormPath } from '../../hooks/useStepFormPath';
 import type { IForm, ITemplates } from '../formTypes';
@@ -64,7 +64,7 @@ export function TemplateInAppEditor() {
           }}
         />
       </Stack>
-      <VariableManagerModal open={modalOpen} setOpen={setModalOpen} variablesArray={variablesArray} />
+      <EditVariablesModal open={modalOpen} setOpen={setModalOpen} variablesArray={variablesArray} />
     </>
   );
 }
diff --git a/apps/web/src/pages/templates/components/notification-setting-form/NotificationSettingsForm.tsx b/apps/web/src/pages/templates/components/notification-setting-form/NotificationSettingsForm.tsx
index 40d0683ae4e..51991061c7f 100644
--- a/apps/web/src/pages/templates/components/notification-setting-form/NotificationSettingsForm.tsx
+++ b/apps/web/src/pages/templates/components/notification-setting-form/NotificationSettingsForm.tsx
@@ -2,7 +2,7 @@ import { ActionIcon, Grid, Stack } from '@mantine/core';
 import { useClipboard } from '@mantine/hooks';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { Controller, useFormContext } from 'react-hook-form';
-import { INotificationTrigger } from '@novu/shared';
+import type { IResponseError, INotificationTrigger } from '@novu/shared';
 
 import { api } from '../../../../api/api.client';
 import { Input, Select, Switch, Tooltip, Check, Copy } from '@novu/design-system';
@@ -33,7 +33,7 @@ export const NotificationSettingsForm = ({ trigger }: { trigger?: INotificationT
   const { groups, loading: loadingGroups } = useNotificationGroup();
   const { isLoading: loadingCreateGroup, mutateAsync: createNotificationGroup } = useMutation<
     { name: string; _id: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     {
       name: string;
     }
diff --git a/apps/web/src/pages/templates/components/sms-editor/TemplateSMSEditor.tsx b/apps/web/src/pages/templates/components/sms-editor/TemplateSMSEditor.tsx
new file mode 100644
index 00000000000..e90db4cbe3c
--- /dev/null
+++ b/apps/web/src/pages/templates/components/sms-editor/TemplateSMSEditor.tsx
@@ -0,0 +1,83 @@
+import { Controller, useFormContext } from 'react-hook-form';
+import { ChannelTypeEnum } from '@novu/shared';
+
+import { LackIntegrationAlert } from '../LackIntegrationAlert';
+import {
+  useEnvController,
+  useHasActiveIntegrations,
+  useGetPrimaryIntegration,
+  useVariablesManager,
+} from '../../../../hooks';
+import { StepSettings } from '../../workflow/SideBar/StepSettings';
+import { useStepFormPath } from '../../hooks/useStepFormPath';
+import { useState } from 'react';
+import { useEditTemplateContent } from '../../hooks/useEditTemplateContent';
+import { Grid, Stack } from '@mantine/core';
+import { VariableManagementButton } from '../VariableManagementButton';
+import { CustomCodeEditor } from '../CustomCodeEditor';
+import { SmsPreview } from '../../../../components/workflow/preview';
+import { EditVariablesModal } from '../EditVariablesModal';
+
+const templateFields = ['content'];
+
+export function TemplateSMSEditor() {
+  const [editVariablesModalOpened, setEditVariablesModalOpen] = useState(false);
+  const { environment } = useEnvController();
+  const stepFormPath = useStepFormPath();
+  const { control } = useFormContext();
+  const variablesArray = useVariablesManager(templateFields);
+  const { hasActiveIntegration } = useHasActiveIntegrations({
+    channelType: ChannelTypeEnum.SMS,
+  });
+  const { primaryIntegration } = useGetPrimaryIntegration({
+    channelType: ChannelTypeEnum.SMS,
+  });
+  const { isPreviewLoading, handleContentChange } = useEditTemplateContent();
+
+  return (
+    <>
+      {!hasActiveIntegration ? <LackIntegrationAlert channelType={ChannelTypeEnum.SMS} /> : null}
+      {hasActiveIntegration && !primaryIntegration ? (
+        <LackIntegrationAlert
+          channelType={ChannelTypeEnum.SMS}
+          text={`You have multiple provider instances for SMS in the ${environment?.name} environment. Please select the primary instance.`}
+          isPrimaryMissing
+        />
+      ) : null}
+      <StepSettings />
+      <Grid gutter={24}>
+        <Grid.Col span={'auto'}>
+          <Controller
+            name={`${stepFormPath}.template.content` as any}
+            defaultValue=""
+            control={control}
+            render={({ field }) => (
+              <Stack spacing={8}>
+                <VariableManagementButton
+                  openEditVariablesModal={() => {
+                    setEditVariablesModalOpen(true);
+                  }}
+                />
+                <CustomCodeEditor
+                  value={(field.value as string) || ''}
+                  onChange={(value) => {
+                    handleContentChange(value, field.onChange);
+                  }}
+                />
+              </Stack>
+            )}
+          />
+        </Grid.Col>
+        <Grid.Col span={'content'}>
+          <SmsPreview showPreviewAsLoading={isPreviewLoading} />
+        </Grid.Col>
+      </Grid>
+      <EditVariablesModal
+        open={editVariablesModalOpened}
+        setOpen={setEditVariablesModalOpen}
+        variablesArray={variablesArray}
+      />
+      ]
+    </>
+  );
+}
diff --git a/apps/web/src/pages/templates/components/useStatusChangeController.ts b/apps/web/src/pages/templates/components/useStatusChangeController.ts
index fb8d431fbba..80e242f3b2e 100644
--- a/apps/web/src/pages/templates/components/useStatusChangeController.ts
+++ b/apps/web/src/pages/templates/components/useStatusChangeController.ts
@@ -1,6 +1,7 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { INotificationTemplate } from '@novu/shared';
 import { useEffect, useState } from 'react';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import type { IResponseError, INotificationTemplate } from '@novu/shared';
+
 import { updateTemplateStatus } from '../../../api/notification-templates';
 import { QueryKeys } from '../../../api/query.keys';
 import { successMessage } from '../../../utils/notifications';
@@ -10,7 +11,7 @@ export function useStatusChangeControllerHook(templateId: string, template: INot
   const [isTemplateActive, setIsTemplateActive] = useState<boolean>();
   const { isLoading: isStatusChangeLoading, mutateAsync: updateNotificationStatus } = useMutation<
     INotificationTemplate,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { id: string; active: boolean }
   >(({ id, active }) => updateTemplateStatus(id, active), {
     onSuccess: () => {
diff --git a/apps/web/src/pages/templates/components/useTemplateController.ts b/apps/web/src/pages/templates/components/useTemplateController.ts
index ba20d88fd8e..30f56efeac1 100644
--- a/apps/web/src/pages/templates/components/useTemplateController.ts
+++ b/apps/web/src/pages/templates/components/useTemplateController.ts
@@ -1,5 +1,10 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { ICreateNotificationTemplateDto, INotificationTemplate, IUpdateNotificationTemplateDto } from '@novu/shared';
+import type {
+  IResponseError,
+  ICreateNotificationTemplateDto,
+  INotificationTemplate,
+  IUpdateNotificationTemplateDto,
+} from '@novu/shared';
 
 import { useTemplateFetcher } from '../../../api/hooks';
 import { QueryKeys } from '../../../api/query.keys';
@@ -18,7 +23,7 @@ export function useTemplateController(
 
   const { isLoading: isCreating, mutateAsync: createNotificationTemplate } = useMutation<
     INotificationTemplate & { __source?: string },
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { template: ICreateNotificationTemplateDto } & { params: { __source?: string } }
   >((data) => createTemplate(data.template, data.params), {
     onSuccess: async () => {
@@ -28,7 +33,7 @@ export function useTemplateController(
 
   const { isLoading: isUpdating, mutateAsync: updateNotificationTemplate } = useMutation<
     INotificationTemplate,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { id: string; data: Partial<IUpdateNotificationTemplateDto> }
   >(({ id, data }) => updateTemplate(id, data), {
     onSuccess: async () => {
@@ -37,10 +42,7 @@ export function useTemplateController(
     },
   });
 
-  const { isLoading: isDeleting, mutate: deleteNotificationTemplate } = useMutation<
-    unknown,
-    { error: string; message: string; statusCode: number }
-  >(() => {
+  const { isLoading: isDeleting, mutate: deleteNotificationTemplate } = useMutation<unknown, IResponseError>(() => {
     if (!templateId) {
       return Promise.resolve();
     }
diff --git a/apps/web/src/pages/templates/components/useVariantListErrorsNavigation.ts b/apps/web/src/pages/templates/components/useVariantListErrorsNavigation.ts
new file mode 100644
index 00000000000..888e40c274b
--- /dev/null
+++ b/apps/web/src/pages/templates/components/useVariantListErrorsNavigation.ts
@@ -0,0 +1,95 @@
+import { StepTypeEnum } from '@novu/shared';
+import { useEffect, useMemo, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+
+import { useNavigateToVariantPreview } from '../hooks/useNavigateToVariantPreview';
+import { NODE_ERROR_TYPES } from '../workflow/workflow/node-types/utils';
+import { IForm } from './formTypes';
+import { ItemTypeEnum, useVariantListErrors } from './useVariantListErrors';
+
+export const useVariantListErrorsNavigation = () => {
+  const { channel, stepUuid = '' } = useParams<{
+    channel: StepTypeEnum;
+    stepUuid: string;
+  }>();
+  const allErrors = useVariantListErrors();
+  const { watch } = useFormContext<IForm>();
+  const { navigateToVariantPreview } = useNavigateToVariantPreview();
+
+  const steps = watch('steps');
+  const stepIndex = useMemo(
+    () => steps.findIndex((message) => message.template.type === channel && message.uuid === stepUuid),
+    [channel, stepUuid, steps]
+  );
+  const step = watch(`steps.${stepIndex}`);
+  const hasErrors = allErrors.errors.length > 0;
+  const variants = step?.variants ?? [];
+
+  const [errorState, setErrorState] = useState<{
+    itemType: ItemTypeEnum;
+    variantIndex?: number;
+    errorMessage: string;
+    errorIndex: number;
+    errorType: NODE_ERROR_TYPES;
+  } | null>(null);
+
+  useEffect(() => {
+    if (allErrors.errors.length > 0) {
+      const errorIndex = 0;
+      const firstError = allErrors.errors[errorIndex];
+      setErrorState({
+        ...firstError,
+        errorIndex,
+      });
+    } else {
+      setErrorState(null);
+    }
+  }, [allErrors]);
+
+  const handleErrorNavigation = (direction: 'up' | 'down') => {
+    if (!errorState || !hasErrors) {
+      return;
+    }
+
+    const { errorIndex } = errorState;
+    const nextErrorIndex = direction === 'up' ? errorIndex - 1 : errorIndex + 1;
+
+    if (nextErrorIndex < 0 || nextErrorIndex >= allErrors.errors.length) {
+      return;
+    }
+
+    const error = allErrors.errors[nextErrorIndex];
+
+    setErrorState({
+      variantIndex: error.variantIndex,
+      errorMessage: error.errorMessage,
+      itemType: error.itemType,
+      errorIndex: nextErrorIndex,
+      errorType: error.errorType,
+    });
+
+    const isRootError = error?.itemType === ItemTypeEnum.ROOT;
+    if (isRootError) {
+      navigateToVariantPreview({ variantUuid: stepUuid });
+    } else if (typeof error.variantIndex !== 'undefined') {
+      const variant = variants[error.variantIndex];
+      navigateToVariantPreview({ variantUuid: variant.uuid });
+    }
+  };
+
+  const onErrorMessageClick = () => {
+    if (errorState?.itemType === ItemTypeEnum.ROOT) {
+      navigateToVariantPreview({ variantUuid: stepUuid });
+    } else if (errorState?.variantIndex !== undefined) {
+      const variant = variants[errorState.variantIndex];
+      navigateToVariantPreview({ variantUuid: variant.uuid });
+    }
+  };
+
+  const onErrorUp = () => handleErrorNavigation('up');
+
+  const onErrorDown = () => handleErrorNavigation('down');
+
+  return { allErrors, errorState, onErrorMessageClick, onErrorUp, onErrorDown };
+};
diff --git a/apps/web/src/pages/templates/editor/Preview.tsx b/apps/web/src/pages/templates/editor/Preview.tsx
deleted file mode 100644
index 11e7bf24ebd..00000000000
--- a/apps/web/src/pages/templates/editor/Preview.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import { Grid, JsonInput, useMantineTheme } from '@mantine/core';
-import { useEffect, useState } from 'react';
-import { useFormContext, useWatch } from 'react-hook-form';
-import { useMutation } from '@tanstack/react-query';
-import type { IEmailBlock, MessageTemplateContentType } from '@novu/shared';
-
-import { previewEmail } from '../../../api/content-templates';
-import { When } from '../../../components/utils/When';
-import { Button, colors, inputStyles } from '@novu/design-system';
-import { useProcessVariables } from '../../../hooks';
-import { PreviewMobile } from './PreviewMobile';
-import { PreviewWeb } from './PreviewWeb';
-import { errorMessage } from '../../../utils/notifications';
-import { useActiveIntegrations } from '../../../hooks';
-import { useStepFormPath } from '../hooks/useStepFormPath';
-import type { IForm } from '../components/formTypes';
-
-export const Preview = ({ view }: { view: string }) => {
-  const { control } = useFormContext<IForm>();
-  const path = useStepFormPath();
-
-  const subject = useWatch({
-    name: `${path}.template.subject`,
-    control,
-  });
-  const contentType = useWatch({
-    name: `${path}.template.contentType`,
-    control,
-  });
-  const htmlContent = useWatch({
-    name: `${path}.template.htmlContent`,
-    control,
-  });
-  const editorContent = useWatch({
-    name: `${path}.template.content`,
-    control,
-  });
-  const variables = useWatch({
-    name: `${path}.template.variables`,
-    control,
-  });
-  const layoutId = useWatch({
-    name: `${path}.template.layoutId`,
-    control,
-  });
-
-  const { integrations = [] } = useActiveIntegrations();
-  const [integration, setIntegration]: any = useState(null);
-  const [parsedSubject, setParsedSubject] = useState(subject);
-  const [content, setContent] = useState<string>('<html><head></head><body><div></div></body></html>');
-  const { isLoading, mutateAsync } = useMutation(previewEmail);
-  const processedVariables = useProcessVariables(variables);
-  const [payloadValue, setPayloadValue] = useState('{}');
-
-  useEffect(() => {
-    setPayloadValue(processedVariables);
-  }, [processedVariables, setPayloadValue]);
-
-  const parseContent = (args: {
-    contentType?: MessageTemplateContentType;
-    content?: string | IEmailBlock[];
-    payload: any;
-    layoutId?: string;
-  }) => {
-    mutateAsync({
-      ...args,
-      payload: JSON.parse(args.payload),
-      subject: subject ? subject : '',
-    })
-      .then((result: { html: string; subject: string }) => {
-        setContent(result.html);
-        setParsedSubject(result.subject);
-
-        return result;
-      })
-      .catch((e: any) => {
-        errorMessage(e?.message || 'Un-expected error occurred');
-      });
-  };
-
-  useEffect(() => {
-    parseContent({
-      contentType,
-      content: contentType === 'editor' ? editorContent : htmlContent,
-      payload: processedVariables,
-      layoutId,
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [contentType, htmlContent, editorContent, processedVariables]);
-  const theme = useMantineTheme();
-
-  useEffect(() => {
-    if (integrations.length === 0) {
-      return;
-    }
-    setIntegration(integrations.find((item) => item.channel === 'email' && item.primary) || null);
-  }, [integrations, setIntegration]);
-
-  return (
-    <>
-      <Grid>
-        <Grid.Col span={9}>
-          <When truthy={view === 'web'}>
-            <PreviewWeb loading={isLoading} subject={parsedSubject} content={content} integration={integration} />
-          </When>
-          <When truthy={view === 'mobile'}>
-            <Grid>
-              <Grid.Col span={12}>
-                <PreviewMobile
-                  loading={isLoading}
-                  subject={parsedSubject}
-                  content={content}
-                  integration={integration}
-                />
-              </Grid.Col>
-            </Grid>
-          </When>
-        </Grid.Col>
-        <Grid.Col span={3} p={0}>
-          <div
-            style={{
-              width: '100%',
-              height: '100%',
-              background: theme.colorScheme === 'dark' ? colors.B17 : colors.B98,
-              borderRadius: 7,
-              padding: 15,
-            }}
-          >
-            <JsonInput
-              data-test-id="preview-json-param"
-              formatOnBlur
-              autosize
-              styles={inputStyles}
-              label="Payload:"
-              value={payloadValue}
-              onChange={setPayloadValue}
-              minRows={6}
-              mb={20}
-              validationError="Invalid JSON"
-            />
-            <Button
-              fullWidth
-              onClick={() => {
-                parseContent({
-                  contentType,
-                  content: contentType === 'editor' ? editorContent : htmlContent,
-                  payload: payloadValue,
-                  layoutId,
-                });
-              }}
-              variant="outline"
-              data-test-id="apply-variables"
-            >
-              Apply Variables
-            </Button>
-          </div>
-        </Grid.Col>
-      </Grid>
-    </>
-  );
-};
diff --git a/apps/web/src/pages/templates/editor/PreviewDateIcon.tsx b/apps/web/src/pages/templates/editor/PreviewDateIcon.tsx
deleted file mode 100644
index 1ec702fb077..00000000000
--- a/apps/web/src/pages/templates/editor/PreviewDateIcon.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-export const PreviewDateIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="13" height="11" viewBox="0 0 13 11" fill="none">
-    <path
-      // eslint-disable-next-line max-len
-      d="M12.8742 5.93364C13.0381 5.78906 13.0425 5.53916 12.8836 5.38924L7.81564 0.605416C7.57352 0.376866 7.16907 0.544438 7.16907 0.873304V2.87028C5.27468 2.84168 3.85146 3.32558 2.79379 4.06714C1.71959 4.8203 1.03516 5.83024 0.613404 6.80913C0.192038 7.7871 0.029654 8.74116 0.00379581 9.39531C-0.00895619 9.71791 0.0107413 9.98417 0.058073 10.1468C0.0701688 10.1884 0.0865115 10.232 0.110004 10.2706C0.130685 10.3046 0.174435 10.3637 0.253928 10.3884C0.349578 10.4181 0.43076 10.38 0.477815 10.3405C0.520283 10.3049 0.548821 10.259 0.568572 10.2204L0.57108 10.2155L0.573098 10.2109L0.573289 10.2105L0.573774 10.2094L0.577668 10.2012C0.58143 10.1933 0.587552 10.1808 0.596216 10.1642C0.613548 10.131 0.64103 10.0813 0.680114 10.0186C0.758299 9.89314 0.882757 9.71605 1.06506 9.51575C1.42921 9.11565 2.02531 8.62159 2.94839 8.26098C3.47383 8.05572 4.34964 7.96231 5.20834 7.94719C6.02778 7.93276 6.79204 7.99001 7.16907 8.0712V10.1267C7.16907 10.4496 7.56086 10.6196 7.8062 10.4032L12.8742 5.93364Z"
-      fill="#828299"
-    />
-  </svg>
-);
diff --git a/apps/web/src/pages/templates/editor/PreviewMobile.tsx b/apps/web/src/pages/templates/editor/PreviewMobile.tsx
deleted file mode 100644
index e0426f27ced..00000000000
--- a/apps/web/src/pages/templates/editor/PreviewMobile.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-import { Center, createStyles, Group, Loader } from '@mantine/core';
-import { format } from 'date-fns';
-import Frame from 'react-frame-component';
-import { colors } from '@novu/design-system';
-import { PreviewDateIcon } from './PreviewDateIcon';
-import { PreviewUserIcon } from './PreviewUserIcon';
-import { ErrorBoundary } from 'react-error-boundary';
-import { Mobile } from './Mobile';
-import { When } from '../../../components/utils/When';
-import { EmailIntegrationInfo } from './EmailIntegrationInfo';
-
-const useStyles = createStyles((theme) => ({
-  header: {
-    width: '100%',
-    marginTop: '20px',
-    paddingLeft: '15px',
-    paddingRight: '15px',
-  },
-  subject: {
-    marginBottom: '3px',
-    fontWeight: 'bolder',
-  },
-  from: {
-    color: theme.colorScheme === 'dark' ? colors.B60 : colors.B70,
-    fontWeight: 'normal',
-  },
-  date: {
-    color: theme.colorScheme === 'dark' ? colors.B60 : colors.B70,
-    fontWeight: 'normal',
-  },
-  line: {
-    height: '2px',
-    width: '340px',
-    marginLeft: '15px',
-    marginRight: '15px',
-    background: theme.colorScheme === 'dark' ? colors.B20 : colors.B85,
-    marginTop: '19px',
-  },
-  frame: {
-    border: '0px',
-    width: '100%',
-    height: '609px',
-    borderRadius: '0 0 30px 30px',
-  },
-  fallbackFrame: {
-    border: '0px',
-    width: '100%',
-    height: '609px',
-    borderRadius: '0 0 30px 30px',
-    padding: '15px',
-    textAlign: 'center',
-  },
-}));
-
-export const PreviewMobile = ({
-  integration,
-  subject,
-  content,
-  loading = false,
-}: {
-  integration: any;
-  subject?: string;
-  content: string;
-  loading?: boolean;
-}) => {
-  const { classes } = useStyles();
-
-  return (
-    <>
-      <Mobile>
-        <div className={classes.header}>
-          <Group
-            sx={{
-              height: '40px',
-            }}
-            spacing={0}
-            position="apart"
-          >
-            <div>
-              <Group
-                sx={{
-                  height: '40px',
-                }}
-                spacing={13}
-              >
-                <PreviewUserIcon />
-                <div>
-                  <div data-test-id="preview-subject" className={classes.subject}>
-                    {subject}
-                  </div>
-                  <Group spacing={13} position="apart">
-                    <div data-test-id="preview-from" className={classes.from}>
-                      <EmailIntegrationInfo integration={integration} field={'from'} />
-                    </div>
-                    <div className={classes.date}>
-                      <PreviewDateIcon />
-                      <span
-                        style={{
-                          marginLeft: '4px',
-                        }}
-                        data-test-id="preview-date"
-                      >
-                        {format(new Date(), 'EEE, MMM d, HH:mm')}
-                      </span>
-                    </div>
-                  </Group>
-                </div>
-              </Group>
-            </div>
-          </Group>
-        </div>
-        <div className={classes.line}></div>
-        <When truthy={loading}>
-          <div>
-            <Center>
-              <Loader color={colors.B70} mb={20} mt={20} size={32} />
-            </Center>
-          </div>
-        </When>
-        <When truthy={!loading}>
-          <ErrorBoundary
-            FallbackComponent={() => (
-              <div data-test-id="preview-content" className={classes.fallbackFrame}>
-                Oops! We've recognized some glitch in this HTML. Please give it another look!
-              </div>
-            )}
-            resetKeys={[content]}
-          >
-            <Frame data-test-id="preview-content" className={classes.frame} initialContent={content}>
-              <></>
-            </Frame>
-          </ErrorBoundary>
-        </When>
-      </Mobile>
-    </>
-  );
-};
diff --git a/apps/web/src/pages/templates/editor/PreviewUserIcon.tsx b/apps/web/src/pages/templates/editor/PreviewUserIcon.tsx
deleted file mode 100644
index a9ec055729e..00000000000
--- a/apps/web/src/pages/templates/editor/PreviewUserIcon.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useMantineTheme } from '@mantine/core';
-import { colors } from '@novu/design-system';
-
-/* eslint-disable */
-export const PreviewUserIcon = () => {
-  const theme = useMantineTheme();
-
-  return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
-      <rect width="40" height="40" rx="20" fill={theme.colorScheme === 'dark' ? colors.B20 : colors.B85} />
-      <path
-        d="M27 29C27 29.5523 27.4477 30 28 30C28.5523 30 29 29.5523 29 29H27ZM24 23V22V23ZM16 23V22V23ZM12 27H11H12ZM11 29C11 29.5523 11.4477 30 12 30C12.5523 30 13 29.5523 13 29H11ZM29 29V27H27V29H29ZM29 27C29 25.6739 28.4732 24.4021 27.5355 23.4645L26.1213 24.8787C26.6839 25.4413 27 26.2044 27 27H29ZM27.5355 23.4645C26.5979 22.5268 25.3261 22 24 22V24C24.7956 24 25.5587 24.3161 26.1213 24.8787L27.5355 23.4645ZM24 22H16V24H24V22ZM16 22C14.6739 22 13.4021 22.5268 12.4645 23.4645L13.8787 24.8787C14.4413 24.3161 15.2044 24 16 24V22ZM12.4645 23.4645C11.5268 24.4021 11 25.6739 11 27H13C13 26.2044 13.3161 25.4413 13.8787 24.8787L12.4645 23.4645ZM11 27V29H13V27H11ZM23 15C23 16.6569 21.6569 18 20 18V20C22.7614 20 25 17.7614 25 15H23ZM20 18C18.3431 18 17 16.6569 17 15H15C15 17.7614 17.2386 20 20 20V18ZM17 15C17 13.3431 18.3431 12 20 12V10C17.2386 10 15 12.2386 15 15H17ZM20 12C21.6569 12 23 13.3431 23 15H25C25 12.2386 22.7614 10 20 10V12Z"
-        fill={theme.colorScheme === 'dark' ? colors.B60 : colors.B98}
-      />
-    </svg>
-  );
-};
diff --git a/apps/web/src/pages/templates/editor/PreviewWeb.tsx b/apps/web/src/pages/templates/editor/PreviewWeb.tsx
deleted file mode 100644
index 4b05b5401a0..00000000000
--- a/apps/web/src/pages/templates/editor/PreviewWeb.tsx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { Center, createStyles, Group, Loader } from '@mantine/core';
-import { format } from 'date-fns';
-import { colors } from '@novu/design-system';
-import { PreviewDateIcon } from './PreviewDateIcon';
-import { PreviewUserIcon } from './PreviewUserIcon';
-import Frame from 'react-frame-component';
-import { ErrorBoundary } from 'react-error-boundary';
-import { When } from '../../../components/utils/When';
-import { EmailIntegrationInfo } from './EmailIntegrationInfo';
-
-const useStyles = createStyles((theme) => ({
-  browser: {
-    background: theme.colorScheme === 'dark' ? colors.B17 : colors.B98,
-    borderRadius: '7px',
-  },
-  bar: {
-    borderRadius: '7px 7px 0 0',
-    background: theme.colorScheme === 'dark' ? colors.B20 : colors.B85,
-    width: '100%',
-    height: '45px',
-    maxHeight: '45px',
-  },
-  barAction: {
-    height: '10px',
-    width: '10px',
-    borderRadius: '10px',
-    background: theme.colorScheme === 'dark' ? colors.B17 : colors.B98,
-  },
-  header: {
-    width: '100%',
-    paddingLeft: 10,
-    paddingRight: 10,
-    marginTop: '40px',
-  },
-  subject: {
-    marginBottom: '3px',
-    fontWeight: 'bolder',
-  },
-  from: {
-    color: theme.colorScheme === 'dark' ? colors.B60 : colors.B40,
-    fontWeight: 'normal',
-  },
-  date: {
-    height: '20px',
-    marginTop: '20px',
-    color: theme.colorScheme === 'dark' ? colors.B60 : colors.B40,
-    fontWeight: 'normal',
-  },
-  content: {
-    borderRadius: '7px 7px 0 0',
-    marginLeft: 10,
-    marginRight: 10,
-    height: '50vh',
-    background: theme.colorScheme === 'dark' ? colors.B15 : colors.white,
-    marginTop: '20px',
-  },
-  frame: {
-    border: '0px',
-    width: '100%',
-    height: '100%',
-  },
-  fallbackFrame: {
-    border: '0px',
-    width: '100%',
-    height: '100%',
-    padding: '15px',
-    textAlign: 'center',
-  },
-}));
-
-export const PreviewWeb = ({
-  integration,
-  subject,
-  content,
-  loading = false,
-}: {
-  integration: any;
-  subject?: string;
-  content: string;
-  loading?: boolean;
-}) => {
-  const { classes } = useStyles();
-
-  return (
-    <>
-      <div className={classes.browser}>
-        <div className={classes.bar}>
-          <Group
-            sx={{
-              marginLeft: '20px',
-              height: '45px',
-            }}
-            spacing={7}
-          >
-            <div className={classes.barAction}></div>
-            <div className={classes.barAction}></div>
-            <div className={classes.barAction}></div>
-          </Group>
-        </div>
-        <div className={classes.header}>
-          <Group
-            sx={{
-              height: '40px',
-            }}
-            position="apart"
-          >
-            <div>
-              <Group
-                sx={{
-                  height: '40px',
-                }}
-              >
-                <PreviewUserIcon />
-                <div>
-                  <div data-test-id="preview-subject" className={classes.subject}>
-                    {subject}
-                  </div>
-                  <div data-test-id="preview-from" className={classes.from}>
-                    <EmailIntegrationInfo integration={integration} field={'from'} />
-                  </div>
-                </div>
-              </Group>
-            </div>
-            <div>
-              <div className={classes.date}>
-                <PreviewDateIcon />
-                <span
-                  data-test-id="preview-date"
-                  style={{
-                    marginLeft: '15px',
-                  }}
-                >
-                  {format(new Date(), 'EEE, MMM d, HH:mm')}
-                </span>
-              </div>
-            </div>
-          </Group>
-          <When truthy={loading}>
-            <div>
-              <Center>
-                <Loader color={colors.B70} mb={20} mt={20} size={32} />
-              </Center>
-            </div>
-          </When>
-        </div>
-        <When truthy={!loading}>
-          <div className={classes.content}>
-            <ErrorBoundary
-              FallbackComponent={() => (
-                <div data-test-id="preview-content" className={classes.fallbackFrame}>
-                  Oops! We've recognized some glitch in this HTML. Please give it another look!
-                </div>
-              )}
-              resetKeys={[content]}
-            >
-              <Frame className={classes.frame} data-test-id="preview-content" initialContent={content}>
-                <></>
-              </Frame>
-            </ErrorBoundary>
-          </div>
-        </When>
-      </div>
-    </>
-  );
-};
diff --git a/apps/web/src/pages/templates/editor/StartFromScratchTourTooltip.tsx b/apps/web/src/pages/templates/editor/StartFromScratchTourTooltip.tsx
index d7b85f21c8a..56ff3d92827 100644
--- a/apps/web/src/pages/templates/editor/StartFromScratchTourTooltip.tsx
+++ b/apps/web/src/pages/templates/editor/StartFromScratchTourTooltip.tsx
@@ -1,14 +1,8 @@
 import { Group, Stack, UnstyledButton, useMantineColorScheme } from '@mantine/core';
-import { IUserEntity } from '@novu/shared';
 import { useMutation } from '@tanstack/react-query';
-import { use } from 'chai';
 import { TooltipRenderProps } from 'react-joyride';
 import { useNavigate, useParams } from 'react-router-dom';
-import { updateUserOnBoardingTour } from '../../../api/user';
-import { useAuthContext } from '../../../components/providers/AuthProvider';
-
-import { useSegment } from '../../../components/providers/SegmentProvider';
-import { When } from '../../../components/utils/When';
+import type { IResponseError, IUserEntity } from '@novu/shared';
 import {
   Button,
   colors,
@@ -20,6 +14,11 @@ import {
   RunTestBell,
   WorkflowSettings,
 } from '@novu/design-system';
+
+import { updateUserOnBoardingTour } from '../../../api/user';
+import { useAuthContext } from '../../../components/providers/AuthProvider';
+import { useSegment } from '../../../components/providers/SegmentProvider';
+import { When } from '../../../components/utils/When';
 import { errorMessage } from '../../../utils/notifications';
 import { ordinalNumbers, SCRATCH_HINT_INDEX_TO_CLICK_ANALYTICS, StartFromScratchTourAnalyticsEnum } from '../constants';
 import { useBasePath } from '../hooks/useBasePath';
@@ -57,7 +56,7 @@ export const StartFromScratchTourTooltip = ({
 }: TooltipRenderProps) => {
   const { mutateAsync: updateOnBoardingTourStatus } = useMutation<
     IUserEntity,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { showOnBoardingTour: number }
   >(({ showOnBoardingTour }) => updateUserOnBoardingTour(showOnBoardingTour), {
     onError: (err) => {
diff --git a/apps/web/src/pages/templates/editor/useStartFromScratchTour.tsx b/apps/web/src/pages/templates/editor/useStartFromScratchTour.tsx
index 28d446bfcbc..a5b0b00f373 100644
--- a/apps/web/src/pages/templates/editor/useStartFromScratchTour.tsx
+++ b/apps/web/src/pages/templates/editor/useStartFromScratchTour.tsx
@@ -21,7 +21,7 @@ const StartFromScratchTourSteps: Step[] = [
     disableOverlay: true,
   },
   {
-    target: '[data-test-id="title"]',
+    target: '[data-test-id="name-input"]',
     content: '',
     placement: 'left',
     disableBeacon: true,
diff --git a/apps/web/src/pages/templates/hooks/useEditTemplateContent.ts b/apps/web/src/pages/templates/hooks/useEditTemplateContent.ts
new file mode 100644
index 00000000000..1699baa6cff
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/useEditTemplateContent.ts
@@ -0,0 +1,17 @@
+import { useState } from 'react';
+import { useTimeout } from '@mantine/hooks';
+
+export function useEditTemplateContent() {
+  const [isPreviewLoading, setIsPreviewLoading] = useState(false);
+
+  const { start, clear } = useTimeout(() => setIsPreviewLoading(false), 1000);
+
+  const handleContentChange = (value: string, onChange: (string) => void) => {
+    setIsPreviewLoading(true);
+    clear();
+    onChange(value);
+    start();
+  };
+
+  return { handleContentChange, isPreviewLoading };
+}
diff --git a/apps/web/src/pages/templates/hooks/useNavigateFromEditor.ts b/apps/web/src/pages/templates/hooks/useNavigateFromEditor.ts
index f11888e1613..67886f89eb8 100644
--- a/apps/web/src/pages/templates/hooks/useNavigateFromEditor.ts
+++ b/apps/web/src/pages/templates/hooks/useNavigateFromEditor.ts
@@ -1,5 +1,5 @@
 import { useFormContext } from 'react-hook-form';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { StepTypeEnum } from '@novu/shared';
 
 import type { IForm } from '../components/formTypes';
@@ -7,7 +7,7 @@ import { useBasePath } from './useBasePath';
 import { useStepIndex } from './useStepIndex';
 import { useEffect } from 'react';
 
-export const useNavigateFromEditor = () => {
+export const useNavigateFromEditor = (preview = false) => {
   const {
     channel,
     stepUuid = '',
@@ -20,23 +20,31 @@ export const useNavigateFromEditor = () => {
   const { watch } = useFormContext<IForm>();
   const steps = watch('steps');
   const navigate = useNavigate();
+  const { pathname } = useLocation();
   const workflowEditorPath = useBasePath();
 
   const areStepsExists = steps.length > 0;
   const { stepIndex, variantIndex } = useStepIndex();
   const isStepExists = stepIndex > -1;
   const isVariantExists = typeof variantIndex !== 'undefined' && variantIndex > -1;
-  const stepEditorPath = `${workflowEditorPath}/${channel}/${stepUuid}`;
+  const isDigestOrDelay = channel === StepTypeEnum.DIGEST || channel === StepTypeEnum.DELAY;
+
+  const shouldNavigateToPreview = preview && !isDigestOrDelay;
+  const stepEditorPath = `${workflowEditorPath}/${channel}/${stepUuid}${shouldNavigateToPreview ? '/preview' : ''}`;
 
   useEffect(() => {
     if (!areStepsExists) {
       return;
     }
+
     if (!isStepExists) {
       navigate(workflowEditorPath);
     }
-    if (isStepExists && !isVariantExists) {
+
+    const isNotStepEditorPath = pathname !== stepEditorPath;
+    const isStepWithNoVariant = isStepExists && !isVariantExists;
+    if (isStepWithNoVariant && isNotStepEditorPath) {
       navigate(stepEditorPath);
     }
-  }, [navigate, areStepsExists, isStepExists, isVariantExists, workflowEditorPath, stepEditorPath]);
+  }, [navigate, areStepsExists, isStepExists, isVariantExists, workflowEditorPath, pathname, stepEditorPath]);
 };
diff --git a/apps/web/src/pages/templates/hooks/useNavigateToStepEditor.ts b/apps/web/src/pages/templates/hooks/useNavigateToStepEditor.ts
new file mode 100644
index 00000000000..85c65cd91cc
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/useNavigateToStepEditor.ts
@@ -0,0 +1,28 @@
+import { useNavigate, useParams } from 'react-router-dom';
+import { StepTypeEnum } from '@novu/shared';
+
+import { useBasePath } from './useBasePath';
+
+export const useNavigateToStepEditor = () => {
+  const basePath = useBasePath();
+  const navigate = useNavigate();
+  const { channel, stepUuid, variantUuid } = useParams<{
+    channel: StepTypeEnum;
+    stepUuid: string;
+    variantUuid: string;
+  }>();
+
+  const navigateToStepEditor = () => {
+    const isVariant = !!variantUuid;
+    let navigatePath = `${basePath}/${channel}/${stepUuid}`;
+    if (isVariant) {
+      navigatePath += `/variants/${variantUuid}`;
+    }
+
+    navigate(navigatePath);
+  };
+
+  return {
+    navigateToStepEditor,
+  };
+};
diff --git a/apps/web/src/pages/templates/hooks/useNavigateToVariantPreview.ts b/apps/web/src/pages/templates/hooks/useNavigateToVariantPreview.ts
new file mode 100644
index 00000000000..1ff9d2127a3
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/useNavigateToVariantPreview.ts
@@ -0,0 +1,40 @@
+import { useCallback } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import { StepTypeEnum } from '@novu/shared';
+import { ROUTES } from '@novu/shared-web';
+
+import { parseUrl } from '../../../utils/routeUtils';
+
+export const useNavigateToVariantPreview = () => {
+  const {
+    templateId = '',
+    channel = '',
+    stepUuid = '',
+    variantUuid = '',
+  } = useParams<{ templateId: string; channel: StepTypeEnum; stepUuid: string; variantUuid: string }>();
+  const navigate = useNavigate();
+
+  const navigateToVariantPreview = useCallback(
+    (
+      params: {
+        templateId?: string;
+        channel?: StepTypeEnum;
+        stepUuid?: string;
+        variantUuid?: string;
+      } = {}
+    ) => {
+      navigate(
+        parseUrl(ROUTES.WORKFLOWS_VARIANT_PREVIEW, {
+          templateId: params.templateId ?? templateId,
+          channel: params.channel ?? channel,
+          stepUuid: params.stepUuid ?? stepUuid,
+          variantUuid: params.variantUuid ?? variantUuid,
+        })
+      );
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []
+  );
+
+  return { navigateToVariantPreview };
+};
diff --git a/apps/web/src/pages/templates/hooks/usePreviewChatTemplate.ts b/apps/web/src/pages/templates/hooks/usePreviewChatTemplate.ts
new file mode 100644
index 00000000000..cb307802f91
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/usePreviewChatTemplate.ts
@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { usePreviewChat } from '../../../api/hooks';
+import { useProcessVariables } from '../../../hooks';
+import { IForm } from '../components/formTypes';
+import { useStepFormCombinedErrors } from './useStepFormCombinedErrors';
+import { useStepFormPath } from './useStepFormPath';
+
+export const usePreviewChatTemplate = ({ disabled, locale }: { disabled: boolean; locale?: string }) => {
+  const { watch } = useFormContext<IForm>();
+  const path = useStepFormPath();
+  const templateContent = watch(`${path}.template.content`) as string;
+  const variables = watch(`${path}.template.variables`);
+  const processedVariables = useProcessVariables(variables);
+  const [previewContent, setPreviewContent] = useState(templateContent);
+  const templateError = useStepFormCombinedErrors();
+
+  const { isLoading, getChatPreview } = usePreviewChat({
+    onSuccess: (result) => {
+      setPreviewContent(result.content);
+    },
+  });
+
+  useEffect(() => {
+    if (disabled) return;
+
+    getChatPreview({
+      content: templateContent,
+      payload: JSON.parse(processedVariables),
+      locale,
+    });
+  }, [locale, disabled, templateContent, processedVariables, getChatPreview]);
+
+  const isPreviewContentLoading = !templateError && isLoading;
+
+  return { previewContent, isPreviewContentLoading, templateError };
+};
diff --git a/apps/web/src/pages/templates/hooks/usePreviewEmailTemplate.ts b/apps/web/src/pages/templates/hooks/usePreviewEmailTemplate.ts
new file mode 100644
index 00000000000..0965203d7e1
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/usePreviewEmailTemplate.ts
@@ -0,0 +1,63 @@
+import { useCallback, useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { usePreviewEmail } from '../../../api/hooks';
+import { IForm } from '../components/formTypes';
+import { useStepFormCombinedErrors } from './useStepFormCombinedErrors';
+import { useStepFormPath } from './useStepFormPath';
+
+export const usePreviewEmailTemplate = ({ locale, payload }: { locale?: string; payload: string }) => {
+  const { watch } = useFormContext<IForm>();
+  const path = useStepFormPath();
+  const subject = watch(`${path}.template.subject`);
+  const contentType = watch(`${path}.template.contentType`);
+  const htmlContent = watch(`${path}.template.htmlContent`);
+  const editorContent = watch(`${path}.template.content`);
+  const layoutId = watch(`${path}.template.layoutId`);
+
+  const [previewState, setParsedPreviewState] = useState({
+    subject: subject,
+    content: '<html><head></head><body><div></div></body></html>',
+  });
+  const templateError = useStepFormCombinedErrors();
+
+  const { isLoading, getEmailPreview } = usePreviewEmail({
+    onSuccess: (result) => {
+      setParsedPreviewState({
+        content: result.html,
+        subject: result.subject,
+      });
+    },
+  });
+
+  const getEmailPreviewCallback = useCallback(
+    (payloadArg: string) => {
+      const content = contentType === 'editor' ? editorContent : htmlContent;
+      if (!content) return;
+
+      getEmailPreview({
+        contentType: contentType,
+        content,
+        layoutId: layoutId,
+        payload: JSON.parse(payloadArg),
+        subject: subject ?? '',
+        locale,
+      });
+    },
+    [contentType, editorContent, htmlContent, layoutId, subject, locale, getEmailPreview]
+  );
+
+  useEffect(() => {
+    getEmailPreviewCallback(payload);
+  }, [getEmailPreviewCallback, locale, payload]);
+
+  const isPreviewContentLoading = !templateError && isLoading;
+
+  return {
+    getEmailPreview: getEmailPreviewCallback,
+    previewContent: previewState.content,
+    subject: previewState.subject,
+    isPreviewContentLoading,
+    templateError,
+  };
+};
diff --git a/apps/web/src/pages/templates/hooks/usePreviewInAppTemplate.ts b/apps/web/src/pages/templates/hooks/usePreviewInAppTemplate.ts
new file mode 100644
index 00000000000..a8beaf4cbfd
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/usePreviewInAppTemplate.ts
@@ -0,0 +1,64 @@
+import { IMessageButton } from '@novu/shared';
+import { useCallback, useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { usePreviewInApp } from '../../../api/hooks';
+import { useProcessVariables } from '../../../hooks';
+import { IForm } from '../components/formTypes';
+import { useStepFormCombinedErrors } from './useStepFormCombinedErrors';
+import { useStepFormPath } from './useStepFormPath';
+
+export type ParsedPreviewStateType = {
+  ctaButtons: IMessageButton[];
+  content: string;
+};
+
+export const usePreviewInAppTemplate = ({ locale }: { locale?: string }) => {
+  const { watch } = useFormContext<IForm>();
+  const path = useStepFormPath();
+  const templateError = useStepFormCombinedErrors();
+  const templateContent = watch(`${path}.template.content`);
+  const templateCta = watch(`${path}.template.cta`);
+  const variables = watch(`${path}.template.variables`);
+  const payload = useProcessVariables(variables);
+
+  const [parsedPreviewState, setParsedPreviewState] = useState<ParsedPreviewStateType>({
+    ctaButtons: [],
+    content: '',
+  });
+
+  const { isLoading, getInAppPreview } = usePreviewInApp({
+    onSuccess: (result) => {
+      setParsedPreviewState({
+        content: result.content,
+        ctaButtons: result.ctaButtons,
+      });
+    },
+  });
+
+  const getInAppPreviewCallback = useCallback(
+    (payloadArg: string) => {
+      if (!templateContent) return;
+
+      getInAppPreview({
+        locale,
+        content: templateContent as string,
+        payload: JSON.parse(payloadArg),
+        cta: templateCta,
+      });
+    },
+    [getInAppPreview, locale, templateCta, templateContent]
+  );
+
+  useEffect(() => {
+    getInAppPreviewCallback(payload);
+  }, [getInAppPreviewCallback, locale, payload]);
+
+  const isPreviewLoading = !templateError && isLoading;
+
+  return {
+    parsedPreviewState,
+    isPreviewLoading,
+    templateError,
+    parseInAppContent: getInAppPreviewCallback,
+  };
+};
diff --git a/apps/web/src/pages/templates/hooks/usePreviewPushTemplate.ts b/apps/web/src/pages/templates/hooks/usePreviewPushTemplate.ts
new file mode 100644
index 00000000000..252ff3f0f2b
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/usePreviewPushTemplate.ts
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { usePreviewPush } from '../../../api/hooks';
+import { useDataRef, useProcessVariables } from '../../../hooks';
+import { IForm } from '../components/formTypes';
+import { useStepFormCombinedErrors } from './useStepFormCombinedErrors';
+import { useStepFormPath } from './useStepFormPath';
+
+export const usePreviewPushTemplate = ({ disabled, locale }: { disabled: boolean; locale?: string }) => {
+  const { watch } = useFormContext<IForm>();
+  const path = useStepFormPath();
+  const templateError = useStepFormCombinedErrors();
+  const templateContent = watch(`${path}.template.content`);
+  const templateTitle = watch(`${path}.template.title`);
+  const templateVariables = watch(`${path}.template.variables`);
+
+  const [parsedPreviewState, setParsedPreviewState] = useState({
+    title: templateTitle,
+    content: templateContent as string,
+  });
+
+  const processedVariables = useProcessVariables(templateVariables);
+
+  const { isLoading, getPushPreview } = usePreviewPush({
+    onSuccess: (result) => {
+      setParsedPreviewState({
+        content: result.content,
+        title: result.title,
+      });
+    },
+  });
+
+  useEffect(() => {
+    if (disabled) return;
+
+    getPushPreview({
+      locale,
+      content: templateContent,
+      payload: processedVariables,
+      title: templateTitle,
+    });
+  }, [getPushPreview, disabled, locale, templateContent, processedVariables, templateTitle]);
+
+  const isPreviewLoading = !templateError && isLoading;
+
+  return { parsedPreviewState, isPreviewLoading, templateError };
+};
diff --git a/apps/web/src/pages/templates/hooks/usePreviewSmsTemplate.ts b/apps/web/src/pages/templates/hooks/usePreviewSmsTemplate.ts
new file mode 100644
index 00000000000..185e58e2988
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/usePreviewSmsTemplate.ts
@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import { usePreviewSms } from '../../../api/hooks';
+import { IForm } from '../components/formTypes';
+import { useStepFormCombinedErrors } from './useStepFormCombinedErrors';
+import { useStepFormPath } from './useStepFormPath';
+import { useProcessVariables } from '../../../hooks';
+
+export const usePreviewSmsTemplate = (locale?: string, disabled?: boolean) => {
+  const { watch } = useFormContext<IForm>();
+  const path = useStepFormPath();
+  const templateContent = watch(`${path}.template.content`);
+  const templateVariables = watch(`${path}.template.variables`);
+  const [previewContent, setPreviewContent] = useState(templateContent as string);
+  const processedVariables = useProcessVariables(templateVariables);
+  const templateError = useStepFormCombinedErrors();
+
+  const { isLoading, getSmsPreview } = usePreviewSms({
+    onSuccess: (result) => {
+      setPreviewContent(result.content);
+    },
+  });
+
+  useEffect(() => {
+    if (disabled) return;
+
+    getSmsPreview({
+      content: templateContent,
+      payload: processedVariables,
+      locale,
+    });
+  }, [locale, templateContent, processedVariables, disabled, getSmsPreview]);
+
+  const isPreviewContentLoading = (!templateError && isLoading) || disabled;
+
+  return { previewContent, isPreviewContentLoading, templateError };
+};
diff --git a/apps/web/src/pages/templates/hooks/useStepFormCombinedErrors.ts b/apps/web/src/pages/templates/hooks/useStepFormCombinedErrors.ts
new file mode 100644
index 00000000000..dd2abb18fae
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/useStepFormCombinedErrors.ts
@@ -0,0 +1,17 @@
+import { formatErrorMessage, mapStepErrors } from '../shared/errors';
+import { useStepFormErrors } from './useStepFormErrors';
+
+export const useStepFormCombinedErrors = () => {
+  const error = useStepFormErrors();
+
+  if (!error || !error?.template) {
+    return '';
+  }
+
+  const stepErrorsArray = error?.template;
+
+  const formattedError = mapStepErrors(stepErrorsArray);
+  const combinedError = formatErrorMessage(formattedError);
+
+  return combinedError;
+};
diff --git a/apps/web/src/pages/templates/hooks/useStepInfoPath.ts b/apps/web/src/pages/templates/hooks/useStepInfoPath.ts
index 347ca42e551..e12be3219a4 100644
--- a/apps/web/src/pages/templates/hooks/useStepInfoPath.ts
+++ b/apps/web/src/pages/templates/hooks/useStepInfoPath.ts
@@ -7,7 +7,7 @@ export const useStepInfoPath = () => {
   const { stepIndex, variantIndex } = useStepIndex();
   const isStep = stepIndex > -1;
   const isVariant = typeof variantIndex !== 'undefined' && variantIndex > -1;
-  const isUnderVariantsListPath = pathname.endsWith('/variants');
+  const isUnderVariantsListPath = pathname.includes('/variants') && pathname.endsWith('/preview');
   const isUnderTheStepPath = isStep && !isVariant && !isUnderVariantsListPath;
   const isUnderVariantPath = isStep && isVariant && !isUnderVariantsListPath;
 
diff --git a/apps/web/src/pages/templates/hooks/useTemplateLocales.ts b/apps/web/src/pages/templates/hooks/useTemplateLocales.ts
new file mode 100644
index 00000000000..2782f50a50b
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/useTemplateLocales.ts
@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { IEmailBlock } from '@novu/shared';
+
+import { useGetLocalesFromContent } from '../../../api/hooks';
+import { useAuthController } from '../../../hooks';
+
+export const useTemplateLocales = ({
+  content,
+  title,
+  disabled,
+}: {
+  content?: string | IEmailBlock[];
+  title?: string;
+  disabled?: boolean;
+}) => {
+  const { organization } = useAuthController();
+  const [selectedLocale, setSelectedLocale] = useState('');
+
+  const { data: locales, isLoading: areLocalesLoading, getLocalesFromContent } = useGetLocalesFromContent();
+
+  useEffect(() => {
+    if (!content || disabled) {
+      return;
+    }
+
+    let combinedContent = content;
+    /*
+     * combining title and content to get locales based upon variables in both title and content
+     * The api is not concerned about the content type, it will parse the given string and return the locales
+     */
+    if (title) {
+      combinedContent += ` ${title}`;
+    }
+
+    getLocalesFromContent({
+      content: combinedContent,
+    });
+  }, [getLocalesFromContent, disabled, content, title]);
+
+  const onLocaleChange = (locale: string) => {
+    setSelectedLocale(locale);
+  };
+
+  return { locales, areLocalesLoading, selectedLocale: selectedLocale || organization?.defaultLocale, onLocaleChange };
+};
diff --git a/apps/web/src/pages/templates/shared/errors.ts b/apps/web/src/pages/templates/shared/errors.ts
index d0cd9a203dd..c3b853dfad0 100644
--- a/apps/web/src/pages/templates/shared/errors.ts
+++ b/apps/web/src/pages/templates/shared/errors.ts
@@ -53,9 +53,7 @@ export function getStepErrors(index: number | string, stepsErrors?: FieldErrors<
     const stepErrors = stepsErrors[index]?.template;
 
     if (stepErrors) {
-      const keys = Object.keys(stepErrors);
-
-      return keys.map((key) => stepErrors[key]?.message);
+      return mapStepErrors(stepErrors);
     }
 
     const digestMetadataErrors = stepsErrors[index]?.digestMetadata;
@@ -73,6 +71,16 @@ export function getStepErrors(index: number | string, stepsErrors?: FieldErrors<
   return [];
 }
 
+export function mapStepErrors(stepErrors) {
+  if (stepErrors) {
+    const keys = Object.keys(stepErrors);
+
+    return keys.map((key) => stepErrors[key]?.message);
+  }
+
+  return [];
+}
+
 export function getVariantErrors(
   stepIndex: number | string,
   stepsErrors?: FieldErrors<IForm>['steps']
diff --git a/apps/web/src/pages/templates/workflow/NameInput.tsx b/apps/web/src/pages/templates/workflow/NameInput.tsx
index 2fc03964479..7e5e00b14ee 100644
--- a/apps/web/src/pages/templates/workflow/NameInput.tsx
+++ b/apps/web/src/pages/templates/workflow/NameInput.tsx
@@ -61,7 +61,7 @@ export const NameInput = () => {
             value={field.value || ''}
             error={showErrors && fieldState.error?.message}
             type="text"
-            data-test-id="title"
+            data-test-id="name-input"
             placeholder="Enter workflow name"
             disabled={readonly}
           />
diff --git a/apps/web/src/pages/templates/workflow/WorkflowEditor.tsx b/apps/web/src/pages/templates/workflow/WorkflowEditor.tsx
index ffaaa560031..01768d2172c 100644
--- a/apps/web/src/pages/templates/workflow/WorkflowEditor.tsx
+++ b/apps/web/src/pages/templates/workflow/WorkflowEditor.tsx
@@ -1,10 +1,11 @@
-import { Container, Group, Stack, useMantineColorScheme } from '@mantine/core';
+import { Container, Group, Stack } from '@mantine/core';
 import { ComponentType, useCallback, useState } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { Link, Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { Node, NodeProps } from 'react-flow-renderer';
 import { useDidUpdate, useTimeout } from '@mantine/hooks';
 import { FilterPartTypeEnum, StepTypeEnum } from '@novu/shared';
+import { useSegment } from '@novu/shared-web';
 
 import { When } from '../../../components/utils/When';
 import type { IFlowEditorProps } from '../../../components/workflow';
@@ -25,6 +26,10 @@ import AddNode from './workflow/node-types/AddNode';
 import ChannelNode from './workflow/node-types/ChannelNode';
 import TriggerNode from './workflow/node-types/TriggerNode';
 import { NodeType, NodeData } from '../../../components/workflow/types';
+import { useStepInfoPath } from '../hooks/useStepInfoPath';
+import { useNavigateToVariantPreview } from '../hooks/useNavigateToVariantPreview';
+import { useOnboardingExperiment } from '../../../hooks/useOnboardingExperiment';
+import { OnBoardingAnalyticsEnum } from '../../quick-start/consts';
 
 export const TOP_ROW_HEIGHT = 74;
 
@@ -38,10 +43,14 @@ const edgeTypes = { special: AddNodeEdge };
 
 const WorkflowEditor = () => {
   const { addStep, deleteStep } = useTemplateEditorForm();
+  const { isUnderVariantsListPath } = useStepInfoPath();
   const { channel } = useParams<{
     channel: StepTypeEnum | undefined;
   }>();
+  const { navigateToVariantPreview } = useNavigateToVariantPreview();
   const [dragging, setDragging] = useState(false);
+  const segment = useSegment();
+  const { isOnboardingExperimentEnabled } = useOnboardingExperiment();
 
   const {
     control,
@@ -53,13 +62,14 @@ const WorkflowEditor = () => {
     name: 'steps',
     control,
   });
+  const tags = useWatch({ name: 'tags' });
+
+  const tagsIncludesOnboarding = tags?.includes('onboarding') && isOnboardingExperimentEnabled;
 
   const [toDelete, setToDelete] = useState<string>('');
   const basePath = useBasePath();
   const { pathname } = useLocation();
   const navigate = useNavigate();
-  const { colorScheme } = useMantineColorScheme();
-  const dark = colorScheme === 'dark';
 
   const onNodeClick = useCallback(
     (event, node: Node<NodeData>) => {
@@ -67,14 +77,18 @@ const WorkflowEditor = () => {
       const { step, channelType } = node.data;
       const isVariant = step && step.variants && step.variants?.length > 0;
       if (isVariant) {
-        navigate(basePath + `/${channelType}/${step.uuid}/variants`);
+        navigateToVariantPreview({
+          channel: channelType,
+          stepUuid: step.uuid,
+          variantUuid: step.uuid,
+        });
       } else if (node.type === NodeType.CHANNEL) {
-        navigate(basePath + `/${channelType}/${step?.uuid ?? ''}`);
+        navigate(basePath + `/${channelType}/${step?.uuid ?? ''}/preview`);
       } else if (node.type === NodeType.TRIGGER) {
         navigate(basePath + '/test-workflow');
       }
     },
-    [navigate, basePath]
+    [navigate, basePath, navigateToVariantPreview]
   );
 
   const onEdit: IFlowEditorProps['onEdit'] = (_, node) => {
@@ -215,11 +229,11 @@ const WorkflowEditor = () => {
   }
 
   const isEmailChannel = channel && [StepTypeEnum.EMAIL, StepTypeEnum.IN_APP].includes(channel);
-  const isVariantsListPath = pathname.endsWith('/variants');
+  const isPreviewPath = pathname.endsWith('/preview');
 
   return (
     <>
-      <When truthy={isEmailChannel && !isVariantsListPath}>
+      <When truthy={!isUnderVariantsListPath && !isPreviewPath && isEmailChannel}>
         <Outlet
           context={{
             setDragging,
@@ -227,13 +241,20 @@ const WorkflowEditor = () => {
           }}
         />
       </When>
-      <When truthy={!channel || ![StepTypeEnum.EMAIL, StepTypeEnum.IN_APP].includes(channel) || isVariantsListPath}>
+      <When
+        truthy={
+          !channel ||
+          ![StepTypeEnum.EMAIL, StepTypeEnum.IN_APP].includes(channel) ||
+          isUnderVariantsListPath ||
+          isPreviewPath
+        }
+      >
         <div style={{ display: 'flex', flexFlow: 'row', position: 'relative' }}>
           <div
             style={{
               flex: '1 1 auto',
               display: 'flex',
-              flexFlow: 'column',
+              flexFlow: 'Column',
             }}
           >
             <Container fluid sx={{ width: '100%', height: `${TOP_ROW_HEIGHT}px` }}>
@@ -252,13 +273,21 @@ const WorkflowEditor = () => {
                   </When>
                   <When truthy={pathname === basePath}>
                     <Button
-                      pulse={shouldPulse}
+                      pulse={tagsIncludesOnboarding || shouldPulse}
                       onClick={() => {
-                        navigate(basePath + '/snippet');
+                        if (tagsIncludesOnboarding) {
+                          segment.track(OnBoardingAnalyticsEnum.ONBOARDING_EXPERIMENT_TEST_NOTIFICATION, {
+                            action: 'Workflow - Send test notification',
+                            experiment_id: '2024-w9-onb',
+                          });
+                          navigate(basePath + '/test-workflow');
+                        } else {
+                          navigate(basePath + '/snippet');
+                        }
                       }}
                       data-test-id="get-snippet-btn"
                     >
-                      Get Snippet
+                      {tagsIncludesOnboarding ? 'Test Notification Now' : 'Get Snippet'}
                     </Button>
                     <Link data-test-id="settings-page" to="settings">
                       <Settings />
@@ -281,6 +310,7 @@ const WorkflowEditor = () => {
               onGetStepError={onGetStepError}
               onNodeClick={onNodeClick}
               onAddVariant={onAddVariant}
+              sidebarOpen={!(pathname === basePath)}
             />
           </div>
           <Outlet
diff --git a/apps/web/src/pages/templates/workflow/workflow/node-types/WorkflowNode.tsx b/apps/web/src/pages/templates/workflow/workflow/node-types/WorkflowNode.tsx
index 64a8248dabe..e6128432c73 100644
--- a/apps/web/src/pages/templates/workflow/workflow/node-types/WorkflowNode.tsx
+++ b/apps/web/src/pages/templates/workflow/workflow/node-types/WorkflowNode.tsx
@@ -42,6 +42,7 @@ interface IWorkflowNodeProps {
   errors?: boolean | string;
   id?: string;
   index?: number;
+  onClick?: MouseEventHandler<HTMLDivElement>;
   onDelete?: () => void;
   onAddVariant?: () => void;
   onEdit?: MouseEventHandler<HTMLButtonElement>;
@@ -71,6 +72,7 @@ export function WorkflowNode({
   variantsCount = 0,
   conditionsCount = 0,
   id = undefined,
+  onClick,
   onDelete,
   onAddVariant,
   onEdit,
@@ -155,6 +157,7 @@ export function WorkflowNode({
     <>
       <WorkflowNodeButton
         role={'button'}
+        onClick={onClick}
         onMouseEnter={() => {
           setPopoverOpened(true);
           setHover(true);
@@ -169,7 +172,7 @@ export function WorkflowNode({
           classes.button,
           { [classes.active]: active },
           { [classes.variant]: isStepRoot },
-          { [classes.variantRoot]: isVariantRoot }
+          { [classes.variantRoot]: isVariantRoot && !active }
         )}
       >
         <WorkflowNodeWrapper>
diff --git a/apps/web/src/pages/tenants/components/CreateTenantSidebar.tsx b/apps/web/src/pages/tenants/components/CreateTenantSidebar.tsx
index 190614eed87..064780516c8 100644
--- a/apps/web/src/pages/tenants/components/CreateTenantSidebar.tsx
+++ b/apps/web/src/pages/tenants/components/CreateTenantSidebar.tsx
@@ -3,10 +3,9 @@ import { Group, Stack } from '@mantine/core';
 import { useForm } from 'react-hook-form';
 import { useQueryClient, useMutation } from '@tanstack/react-query';
 import slugify from 'slugify';
-
-import { ICreateTenantDto, ITenantEntity } from '@novu/shared';
-
+import type { IResponseError, ICreateTenantDto, ITenantEntity } from '@novu/shared';
 import { Button, colors, Sidebar, Text, Title, Tooltip } from '@novu/design-system';
+
 import { createTenant } from '../../../api/tenants';
 import { errorMessage, successMessage } from '../../../utils/notifications';
 import { QueryKeys } from '../../../api/query.keys';
@@ -26,7 +25,7 @@ export function CreateTenantSidebar({
 
   const { mutateAsync: createTenantMutation, isLoading: isLoadingCreate } = useMutation<
     ITenantEntity,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     ICreateTenantDto
   >(createTenant, {
     onSuccess: async () => {
diff --git a/apps/web/src/pages/tenants/components/UpdateTenantSidebar.tsx b/apps/web/src/pages/tenants/components/UpdateTenantSidebar.tsx
index 8fe87c7b19f..01231d3f9a6 100644
--- a/apps/web/src/pages/tenants/components/UpdateTenantSidebar.tsx
+++ b/apps/web/src/pages/tenants/components/UpdateTenantSidebar.tsx
@@ -3,7 +3,7 @@ import { Group, Stack } from '@mantine/core';
 import { Controller, useForm } from 'react-hook-form';
 import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { format } from 'date-fns';
-import { ITenantEntity, IUpdateTenantDto } from '@novu/shared';
+import type { IResponseError, ITenantEntity, IUpdateTenantDto } from '@novu/shared';
 import { Button, colors, NameInput, Sidebar, Text } from '@novu/design-system';
 
 import { getTenantByIdentifier, updateTenant } from '../../../api/tenants';
@@ -42,7 +42,7 @@ export function UpdateTenantSidebar({
 
   const { mutateAsync: updateTenantMutate, isLoading: isLoadingUpdate } = useMutation<
     ITenantEntity,
-    { error: string; message: string; statusCode: number },
+    IResponseError,
     { identifier: string; data: IUpdateTenantDto }
   >(({ identifier, data }) => updateTenant(identifier, data), {
     onSuccess: async () => {
diff --git a/apps/web/src/utils/notifications.tsx b/apps/web/src/utils/notifications.tsx
index 1084e7208ff..420e644a0b8 100644
--- a/apps/web/src/utils/notifications.tsx
+++ b/apps/web/src/utils/notifications.tsx
@@ -1,3 +1,4 @@
-import { errorMessage, successMessage } from '@novu/design-system';
+import { errorMessage as errorMessageRoot, successMessage as successMessageRoot } from '@novu/design-system';
 
-export { errorMessage, successMessage };
+export const errorMessage = errorMessageRoot;
+export const successMessage = successMessageRoot;
diff --git a/apps/web/src/utils/routeUtils.ts b/apps/web/src/utils/routeUtils.ts
index 81d6bba7751..3b2a1935bff 100644
--- a/apps/web/src/utils/routeUtils.ts
+++ b/apps/web/src/utils/routeUtils.ts
@@ -8,7 +8,7 @@ type URLParams = AUTH_INVITATION_TOKEN_TYPE | AUTH_RESET_TOKEN_TYPE | TEMPLATES_
 
 const escapeRegExp = (string: string) => string.replace(/[.*+\-?^${}()|[\]\\]/g, '\\$&');
 
-export const parseUrl = (urlToParse: string, params: URLParams) => {
+export const parseUrl = (urlToParse: string, params: URLParams | Record<string, string>) => {
   return Object.keys(params).reduce((url, name) => {
     const value = params[name];
 
diff --git a/apps/worker/src/app/workflow/usecases/send-message/send-message.base.ts b/apps/worker/src/app/workflow/usecases/send-message/send-message.base.ts
index 5e12fabf9f2..62c2886fa7a 100644
--- a/apps/worker/src/app/workflow/usecases/send-message/send-message.base.ts
+++ b/apps/worker/src/app/workflow/usecases/send-message/send-message.base.ts
@@ -144,7 +144,10 @@ export abstract class SendMessageBase extends SendMessageType {
           throw new PlatformException('Translation module is not loaded');
         }
         const service = this.moduleRef.get(require('@novu/ee-translation')?.TranslationsService, { strict: false });
-        const { namespaces, resources } = await service.getTranslationsList(environmentId, organizationId);
+        const { namespaces, resources, defaultLocale } = await service.getTranslationsList(
+          environmentId,
+          organizationId
+        );
 
         await i18next.init({
           resources,
@@ -153,6 +156,7 @@ export abstract class SendMessageBase extends SendMessageType {
           nsSeparator: '.',
           lng: locale || 'en',
           compatibilityJSON: 'v2',
+          fallbackLng: defaultLocale || 'en',
           interpolation: {
             formatSeparator: ',',
             format: function (value, formatting, lng) {
diff --git a/docker/kubernetes/helm/README.md b/docker/kubernetes/helm/README.md
index 92e49f3abbb..9070468f841 100644
--- a/docker/kubernetes/helm/README.md
+++ b/docker/kubernetes/helm/README.md
@@ -9,7 +9,7 @@ Novu provides a unified API that makes it simple to send notifications through m
 ## TL;DR
 
 ```console
-helm install my-release ./
+helm install my-novu ./ --set store.encryptionKey=$(openssl rand -base64 32)
 ```
 
 ## Introduction
@@ -25,10 +25,10 @@ This chart bootstraps a [Novu](https://github.com/novuhq/novu) deployment on a [
 
 ## Installing the Chart
 
-To install the chart with the release name `my-release`:
+To install the chart with the release name `my-novu`:
 
 ```console
-helm install my-release ./
+helm install my-novu ./ --set store.encryptionKey=$(openssl rand -base64 32)
 ```
 
 These commands deploy a Keycloak application on the Kubernetes cluster in the default configuration.
@@ -40,7 +40,7 @@ These commands deploy a Keycloak application on the Kubernetes cluster in the de
 To uninstall/delete the `my-release` deployment:
 
 ```console
-helm delete my-release
+helm delete my-novu
 ```
 
 The command removes all the Kubernetes components associated with the chart and deletes the release.
diff --git a/docker/kubernetes/helm/values.yaml b/docker/kubernetes/helm/values.yaml
index 2f992032bce..783c4ec511a 100644
--- a/docker/kubernetes/helm/values.yaml
+++ b/docker/kubernetes/helm/values.yaml
@@ -1705,7 +1705,7 @@ store:
   ## @param store.encryption-key The encryption key used to encrypt/decrypt provider credentials
   ## Please change this for production use !
   ##
-  encryption-key: ekwUKf9yLjGPLOz939Y1GM0nJckVoVyF # you need to change this !
+  encryption-key: '' # you need to change this !
 
 ## @section Mongodb configuration
 ##
diff --git a/enterprise/packages/translation-web/package.json b/enterprise/packages/translation-web/package.json
index e53b3c8b6f2..1e6ac5b8f92 100644
--- a/enterprise/packages/translation-web/package.json
+++ b/enterprise/packages/translation-web/package.json
@@ -29,6 +29,7 @@
     "@emotion/styled": "^11.6.0",
     "@handlebars/parser": "^2.1.0",
     "@mantine/core": "^5.7.1",
+    "@mantine/dropzone": "^5.9.2",
     "@mantine/hooks": "^5.7.1",
     "@mantine/prism": "^5.7.1",
     "@monaco-editor/react": "^4.6.0",
diff --git a/libs/design-system/src/icons/general/AndroidIcon.tsx b/libs/design-system/src/icons/general/AndroidIcon.tsx
new file mode 100644
index 00000000000..bc602ea9fb1
--- /dev/null
+++ b/libs/design-system/src/icons/general/AndroidIcon.tsx
@@ -0,0 +1,28 @@
+/* eslint-disable max-len */
+
+export const AndroidIcon = (props: React.ComponentPropsWithoutRef<'svg'>) => {
+  return (
+    <svg viewBox="0 0 17 16" fill="none" {...props}>
+      <g id="adb">
+        <mask
+          id="mask0_4150_91306"
+          style={{ maskType: 'alpha' }}
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="17"
+          height="16"
+        >
+          <rect id="Bounding box" x="0.5" width="16" height="16" fill="currentColor" />
+        </mask>
+        <g mask="url(#mask0_4150_91306)">
+          <path
+            id="adb_2"
+            d="M3.83334 7.33333V6.66667C3.83334 5.86667 4.01389 5.13611 4.375 4.475C4.73611 3.81389 5.22222 3.27222 5.83334 2.85L4.58334 1.6L5.16667 1L6.58334 2.41667C6.87222 2.28333 7.18056 2.18056 7.50834 2.10833C7.83611 2.03611 8.16667 2 8.5 2C8.83334 2 9.16389 2.03611 9.49167 2.10833C9.81945 2.18056 10.1278 2.28333 10.4167 2.41667L11.8333 1L12.4167 1.6L11.1667 2.85C11.7778 3.27222 12.2639 3.81389 12.625 4.475C12.9861 5.13611 13.1667 5.86667 13.1667 6.66667V7.33333H3.83334ZM10.5 6C10.6889 6 10.8472 5.93611 10.975 5.80833C11.1028 5.68056 11.1667 5.52222 11.1667 5.33333C11.1667 5.14444 11.1028 4.98611 10.975 4.85833C10.8472 4.73056 10.6889 4.66667 10.5 4.66667C10.3111 4.66667 10.1528 4.73056 10.025 4.85833C9.89722 4.98611 9.83334 5.14444 9.83334 5.33333C9.83334 5.52222 9.89722 5.68056 10.025 5.80833C10.1528 5.93611 10.3111 6 10.5 6ZM6.5 6C6.68889 6 6.84722 5.93611 6.975 5.80833C7.10278 5.68056 7.16667 5.52222 7.16667 5.33333C7.16667 5.14444 7.10278 4.98611 6.975 4.85833C6.84722 4.73056 6.68889 4.66667 6.5 4.66667C6.31111 4.66667 6.15278 4.73056 6.025 4.85833C5.89722 4.98611 5.83334 5.14444 5.83334 5.33333C5.83334 5.52222 5.89722 5.68056 6.025 5.80833C6.15278 5.93611 6.31111 6 6.5 6ZM8.5 15.3333C7.2 15.3333 6.09722 14.8806 5.19167 13.975C4.28611 13.0694 3.83334 11.9667 3.83334 10.6667V8H13.1667V10.6667C13.1667 11.9667 12.7139 13.0694 11.8083 13.975C10.9028 14.8806 9.8 15.3333 8.5 15.3333Z"
+            fill="currentColor"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+};
diff --git a/libs/design-system/src/icons/general/AppleIcon.tsx b/libs/design-system/src/icons/general/AppleIcon.tsx
new file mode 100644
index 00000000000..c4057f0f797
--- /dev/null
+++ b/libs/design-system/src/icons/general/AppleIcon.tsx
@@ -0,0 +1,20 @@
+/* eslint-disable max-len */
+
+export const AppleIcon = (props: React.ComponentPropsWithoutRef<'svg'>) => {
+  return (
+    <svg viewBox="0 0 15 16" fill="none" {...props}>
+      <g id="Apple_logo_black 1" clipPath="url(#clip0_4150_91302)">
+        <path
+          id="Vector"
+          d="M13.5976 5.4544C13.5048 5.5264 11.8664 6.4496 11.8664 8.5024C11.8664 10.8768 13.9512 11.7168 14.0136 11.7376C14.004 11.7888 13.6824 12.888 12.9144 14.008C12.2296 14.9936 11.5144 15.9776 10.4264 15.9776C9.3384 15.9776 9.0584 15.3456 7.8024 15.3456C6.5784 15.3456 6.1432 15.9984 5.148 15.9984C4.1528 15.9984 3.4584 15.0864 2.66 13.9664C1.7352 12.6512 0.987999 10.608 0.987999 8.6688C0.987999 5.5584 3.0104 3.9088 5.0008 3.9088C6.0584 3.9088 6.94 4.6032 7.604 4.6032C8.236 4.6032 9.2216 3.8672 10.4248 3.8672C10.8808 3.8672 12.5192 3.9088 13.5976 5.4544ZM9.8536 2.5504C10.3512 1.96 10.7032 1.1408 10.7032 0.3216C10.7032 0.208 10.6936 0.0928 10.6728 0C9.8632 0.0304 8.9 0.5392 8.3192 1.2128C7.8632 1.7312 7.4376 2.5504 7.4376 3.3808C7.4376 3.5056 7.4584 3.6304 7.468 3.6704C7.5192 3.68 7.6024 3.6912 7.6856 3.6912C8.412 3.6912 9.3256 3.2048 9.8536 2.5504Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4150_91302">
+          <rect width="13.024" height="16" fill="currentColor" transform="translate(0.987999)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
diff --git a/libs/design-system/src/icons/general/CurlyBrackets.tsx b/libs/design-system/src/icons/general/CurlyBrackets.tsx
new file mode 100644
index 00000000000..a5b7a468d45
--- /dev/null
+++ b/libs/design-system/src/icons/general/CurlyBrackets.tsx
@@ -0,0 +1,13 @@
+/* eslint-disable max-len */
+import React from 'react';
+
+export function CurlyBrackets(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" viewBox="0 0 16 12" fill="none" {...props}>
+      <path
+        d="M10 12V10.5H11.75C11.9625 10.5 12.1406 10.4281 12.2844 10.2844C12.4281 10.1406 12.5 9.9625 12.5 9.75V8.25C12.5 7.68056 12.691 7.19097 13.0729 6.78125C13.4549 6.37153 13.9306 6.13194 14.5 6.0625V5.97917C13.9306 5.86806 13.4549 5.61111 13.0729 5.20833C12.691 4.80556 12.5 4.31944 12.5 3.75V2.25C12.5 2.0375 12.4281 1.85937 12.2844 1.71562C12.1406 1.57187 11.9625 1.5 11.75 1.5H10V0H11.75C12.375 0 12.9062 0.21875 13.3438 0.65625C13.7812 1.09375 14 1.625 14 2.25V3.75C14 3.9625 14.0719 4.14063 14.2156 4.28438C14.3594 4.42813 14.5375 4.5 14.75 4.5H16V7.5H14.75C14.5375 7.5 14.3594 7.57188 14.2156 7.71563C14.0719 7.85938 14 8.0375 14 8.25V9.75C14 10.375 13.7812 10.9062 13.3438 11.3438C12.9062 11.7812 12.375 12 11.75 12H10ZM4.25 12C3.625 12 3.09375 11.7812 2.65625 11.3438C2.21875 10.9062 2 10.375 2 9.75V8.25C2 8.0375 1.92812 7.85938 1.78437 7.71563C1.64062 7.57188 1.4625 7.5 1.25 7.5H0V4.5H1.25C1.4625 4.5 1.64062 4.42813 1.78437 4.28438C1.92812 4.14063 2 3.9625 2 3.75V2.25C2 1.625 2.21875 1.09375 2.65625 0.65625C3.09375 0.21875 3.625 0 4.25 0H6V1.5H4.25C4.0375 1.5 3.85938 1.57187 3.71563 1.71562C3.57188 1.85937 3.5 2.0375 3.5 2.25V3.75C3.5 4.33333 3.30903 4.82986 2.92708 5.23958C2.54514 5.64931 2.06944 5.88889 1.5 5.95833V6.04475C2.06944 6.09825 2.54514 6.33333 2.92708 6.75C3.30903 7.16667 3.5 7.66667 3.5 8.25V9.75C3.5 9.9625 3.57188 10.1406 3.71563 10.2844C3.85938 10.4281 4.0375 10.5 4.25 10.5H6V12H4.25Z"
+        fill="#828299"
+      />
+    </svg>
+  );
+}
diff --git a/libs/design-system/src/icons/index.ts b/libs/design-system/src/icons/index.ts
index 64ece5da952..28c219af3ad 100644
--- a/libs/design-system/src/icons/index.ts
+++ b/libs/design-system/src/icons/index.ts
@@ -4,6 +4,9 @@
  *
  * E.g. instead of using <Md10k />, use <Icon10k />
  */
+export { AppleIcon } from './general/AppleIcon';
+export { AndroidIcon } from './general/AndroidIcon';
+export { CurlyBrackets } from './general/CurlyBrackets';
 
 export {
   /** @deprecated - Use https://react-icons.github.io/react-icons/icons/md/ for names with "Icon" instead of "Md" */
diff --git a/libs/design-system/src/iconsV2/IconProvider.tsx b/libs/design-system/src/iconsV2/IconProvider.tsx
index 0fd39c600bb..b577d17692f 100644
--- a/libs/design-system/src/iconsV2/IconProvider.tsx
+++ b/libs/design-system/src/iconsV2/IconProvider.tsx
@@ -10,6 +10,7 @@ const iconClassName = css`
 
 export const IconProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
   const theme = useMantineTheme();
+
   return (
     <IconContext.Provider
       value={{
diff --git a/libs/design-system/src/index.ts b/libs/design-system/src/index.ts
index 71bb7d93c13..a0be8377dcd 100644
--- a/libs/design-system/src/index.ts
+++ b/libs/design-system/src/index.ts
@@ -9,6 +9,7 @@ export { Input } from './input/Input';
 export { Textarea } from './textarea/Textarea';
 export { Radio } from './radio/Radio';
 export { Select } from './select/Select';
+export type { ISelectProps } from './select/Select.types';
 export { Switch } from './switch/Switch';
 export * from './table';
 export { Tag } from './tag/Tag';
diff --git a/libs/design-system/src/modal/Modal.tsx b/libs/design-system/src/modal/Modal.tsx
index c1689c17c2e..c46f4f97198 100644
--- a/libs/design-system/src/modal/Modal.tsx
+++ b/libs/design-system/src/modal/Modal.tsx
@@ -9,6 +9,7 @@ interface IModalProps extends ModalProps {
   onClose: () => void;
   size?: 'lg' | 'xl' | 'md';
   zIndex?: number;
+  centered?: boolean;
 }
 
 export function Modal({ children, ...props }: IModalProps) {
diff --git a/libs/design-system/src/pagination/ControlButton.tsx b/libs/design-system/src/pagination/ControlButton.tsx
index 25061f919eb..635a59d6524 100644
--- a/libs/design-system/src/pagination/ControlButton.tsx
+++ b/libs/design-system/src/pagination/ControlButton.tsx
@@ -29,7 +29,11 @@ const getBackgroundColor = ({ theme, isCurrentPage }: { theme: any } & StylingPr
   return isCurrentPage ? (theme.colorScheme === 'dark' ? colors.B30 : colors.BGLight) : 'none';
 };
 
-const StyledButton = styled(Button)<StylingProps>(
+const StyledButton = styled(Button, {
+  shouldForwardProp: (propName: string) => {
+    return propName !== 'isCurrentPage';
+  },
+})<StylingProps>(
   ({ theme, isCurrentPage }) => `
   font-weight: ${getFontWeight({ theme, isCurrentPage })};
   background: ${getBackgroundColor({ theme, isCurrentPage })};
diff --git a/libs/design-system/src/pagination/GoToPageInput.tsx b/libs/design-system/src/pagination/GoToPageInput.tsx
index 29d967c769d..6b08c73d846 100644
--- a/libs/design-system/src/pagination/GoToPageInput.tsx
+++ b/libs/design-system/src/pagination/GoToPageInput.tsx
@@ -67,6 +67,7 @@ export const GoToPageInput: React.FC<IGoToPageInputProps> = forwardRef<HTMLInput
   ({ label, firstPageNumber = FIRST_PAGE_NUMBER, ...inputProps }, forwardedRef) => {
     const { onPageChange, totalPageCount } = useContext(PaginationContext);
     const [hasError, setHasError] = useState<boolean>(false);
+    const [goToValue, setGoToValue] = useState<number | undefined>(undefined);
 
     const validateValue = (val: number | string) => {
       const numVal = +val;
@@ -97,7 +98,7 @@ export const GoToPageInput: React.FC<IGoToPageInputProps> = forwardRef<HTMLInput
         return;
       }
       onPageChange(+val);
-      internalRef.current.value = undefined;
+      setGoToValue(undefined);
       setHasError(false);
     };
 
@@ -119,6 +120,8 @@ export const GoToPageInput: React.FC<IGoToPageInputProps> = forwardRef<HTMLInput
         >
           <NumberInput
             onKeyDown={handleKeyPress}
+            value={goToValue}
+            onChange={setGoToValue}
             id={'goToPage'}
             ref={internalRef}
             onBlur={handleBlurEvent}
@@ -127,6 +130,9 @@ export const GoToPageInput: React.FC<IGoToPageInputProps> = forwardRef<HTMLInput
             maxLength={`${totalPageCount}`.length}
             hideControls
             noClampOnBlur
+            autoCorrect={'none'}
+            aria-autocomplete={'none'}
+            autoComplete={'none'}
             disabled={totalPageCount === 1}
             {...inputProps}
           />
diff --git a/libs/design-system/src/pagination/PageSizeSelect.tsx b/libs/design-system/src/pagination/PageSizeSelect.tsx
index 83548c397a5..a1f37ce316b 100644
--- a/libs/design-system/src/pagination/PageSizeSelect.tsx
+++ b/libs/design-system/src/pagination/PageSizeSelect.tsx
@@ -1,7 +1,8 @@
 import styled from '@emotion/styled';
 import { Input, useMantineTheme } from '@mantine/core';
 import { forwardRef, useContext, useMemo } from 'react';
-import { ISelectProps, Select } from '../select/Select';
+import { ISelectProps } from '../select/Select.types';
+import { Select } from '../select/Select';
 import { DEFAULT_PAGINATION_PAGE_SIZES } from './Pagination.const';
 import { PaginationContext } from './PaginationContext';
 import { getPageNumberForNewPageSize } from './util';
diff --git a/libs/design-system/src/pagination/usePaginationState.spec.tsx b/libs/design-system/src/pagination/usePaginationState.spec.tsx
index 66c4eda5491..c053a25fe31 100644
--- a/libs/design-system/src/pagination/usePaginationState.spec.tsx
+++ b/libs/design-system/src/pagination/usePaginationState.spec.tsx
@@ -1,9 +1,15 @@
 import { act, waitFor } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
-import { MemoryRouter } from 'react-router-dom';
-import { expect, it } from 'vitest';
+import { MemoryRouter, useSearchParams } from 'react-router-dom';
+import * as ReactRouterDOM from 'react-router-dom';
+import { afterEach, expect, it, vi } from 'vitest';
 import { IUsePaginationStateOptions, usePaginationState } from './usePaginationState'; // Replace with the actual file path
 
+const startingPageNumber = 1;
+const pageSizes = [10, 20, 30];
+const pageNumberParamName = 'page';
+const pageSizeParamName = 'size';
+
 const callHook = (options: IUsePaginationStateOptions, initialParams?: { page: number; size: number }) => {
   const paramStr = initialParams ? `?page=${initialParams.page}&size=${initialParams.size}` : '';
 
@@ -12,10 +18,23 @@ const callHook = (options: IUsePaginationStateOptions, initialParams?: { page: n
   });
 };
 
-it('usePaginationState uses defaults', async () => {
-  const pageNumberParamName = 'page';
-  const pageSizeParamName = 'size';
+const setSearchParams = vi.fn();
+
+const mockUseSearchParams = (): ReturnType<typeof useSearchParams> => {
+  const params = new URLSearchParams();
+
+  return [params, setSearchParams];
+};
 
+vi.spyOn(ReactRouterDOM, 'useSearchParams').mockImplementation(mockUseSearchParams);
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+it('usePaginationState uses defaults', async () => {
+  const page = startingPageNumber;
+  const size = pageSizes[0];
   const options: IUsePaginationStateOptions = {
     pageNumberParamName,
     pageSizeParamName,
@@ -26,16 +45,31 @@ it('usePaginationState uses defaults', async () => {
 
   await waitFor(() => {
     // Verify that state is updated based on URL parameters on mount
-    expect(result.current.currentPageNumber).toBe(1);
-    expect(result.current.pageSize).toBe(10);
+    expect(result.current.currentPageNumber).toBe(page);
+    expect(result.current.pageSize).toBe(size);
   });
+
+  expect(setSearchParams).toHaveBeenCalledWith(
+    {
+      [pageNumberParamName]: `${page}`,
+      [pageSizeParamName]: `${size}`,
+    },
+    { replace: true }
+  );
 });
 
 it('usePaginationState updates state based on URL parameters on mount', async () => {
-  const startingPageNumber = 1;
-  const pageSizes = [10, 20, 30];
-  const pageNumberParamName = 'page';
-  const pageSizeParamName = 'size';
+  const page = 2;
+  const size = 20;
+  const mockUseSearchParamsNew = (): ReturnType<typeof useSearchParams> => {
+    const params = new URLSearchParams();
+    params.set('page', `${page}`);
+    params.set('size', `${size}`);
+
+    return [params, setSearchParams];
+  };
+
+  vi.spyOn(ReactRouterDOM, 'useSearchParams').mockImplementationOnce(mockUseSearchParamsNew);
 
   const options: IUsePaginationStateOptions = {
     startingPageNumber,
@@ -45,19 +79,23 @@ it('usePaginationState updates state based on URL parameters on mount', async ()
   };
 
   // Render hook
-  const { result } = callHook(options, { page: 2, size: 20 });
+  const { result } = callHook(options, { page, size });
 
   // Verify that state is updated based on URL parameters on mount
-  expect(result.current.currentPageNumber).toBe(2);
-  expect(result.current.pageSize).toBe(20);
+  expect(result.current.currentPageNumber).toBe(page);
+  expect(result.current.pageSize).toBe(size);
+  expect(setSearchParams).toHaveBeenCalledWith(
+    {
+      [pageNumberParamName]: `${page}`,
+      [pageSizeParamName]: `${size}`,
+    },
+    { replace: true }
+  );
 });
 
 it('usePaginationState updates URL parameters on state change', async () => {
-  const startingPageNumber = 1;
-  const pageSizes = [10, 20, 30];
-  const pageNumberParamName = 'page';
-  const pageSizeParamName = 'size';
-
+  const page = 3;
+  const size = 30;
   const options: IUsePaginationStateOptions = {
     startingPageNumber,
     pageSizes,
@@ -70,11 +108,38 @@ it('usePaginationState updates URL parameters on state change', async () => {
 
   // Update state to trigger URL parameter update
   act(() => {
-    result.current.setPageSize(30);
-    result.current.setCurrentPageNumber(3);
+    result.current.setPageSize(size);
+    result.current.setCurrentPageNumber(page);
   });
 
   // Verify that URL parameters are updated on state change
-  expect(result.current.pageSize).toBe(30);
-  expect(result.current.currentPageNumber).toBe(3);
+  expect(result.current.pageSize).toBe(size);
+  expect(result.current.currentPageNumber).toBe(page);
+  expect(setSearchParams).toHaveBeenCalledWith(
+    {
+      [pageNumberParamName]: `${page}`,
+      [pageSizeParamName]: `${size}`,
+    },
+    { replace: true }
+  );
+});
+
+it('usePaginationState does not update URL parameters when areSearchParamsEnabled is false', async () => {
+  const options: IUsePaginationStateOptions = {
+    areSearchParamsEnabled: false,
+    startingPageNumber,
+    pageSizes,
+    pageNumberParamName,
+    pageSizeParamName,
+  };
+
+  // Render hook
+  const { result } = callHook(options);
+
+  await waitFor(() => {
+    // Verify that state is updated based on URL parameters on mount
+    expect(result.current.currentPageNumber).toBe(1);
+    expect(result.current.pageSize).toBe(10);
+    expect(setSearchParams).not.toHaveBeenCalled();
+  });
 });
diff --git a/libs/design-system/src/pagination/usePaginationState.ts b/libs/design-system/src/pagination/usePaginationState.ts
index 807343e1984..488c275787b 100644
--- a/libs/design-system/src/pagination/usePaginationState.ts
+++ b/libs/design-system/src/pagination/usePaginationState.ts
@@ -1,18 +1,22 @@
 import { useEffect, useState } from 'react';
 import { useSearchParams } from 'react-router-dom';
-import { DEFAULT_PAGINATION_PAGE_SIZES, FIRST_PAGE_NUMBER } from './Pagination.const';
+import { DEFAULT_PAGE_SIZE, DEFAULT_PAGINATION_PAGE_SIZES, FIRST_PAGE_NUMBER } from './Pagination.const';
 
 const URL_PARAM_NAME_PAGE_SIZE = 'size';
 const URL_PARAM_NAME_PAGE_NUMBER = 'page';
 export interface IUsePaginationStateOptions {
+  areSearchParamsEnabled?: boolean;
   startingPageNumber?: number;
+  startingPageSize?: number;
   pageSizes?: number[];
   pageSizeParamName?: string;
   pageNumberParamName?: string;
 }
 
 export const usePaginationState = ({
+  areSearchParamsEnabled = true,
   startingPageNumber = FIRST_PAGE_NUMBER,
+  startingPageSize = DEFAULT_PAGE_SIZE,
   pageSizes = DEFAULT_PAGINATION_PAGE_SIZES,
   pageNumberParamName = URL_PARAM_NAME_PAGE_NUMBER,
   pageSizeParamName = URL_PARAM_NAME_PAGE_SIZE,
@@ -20,13 +24,17 @@ export const usePaginationState = ({
   const [searchParams, setSearchParams] = useSearchParams();
 
   const [pageSize, setPageSize] = useState<number>(
-    getValidatedPageSizeFromUrl(searchParams.get(pageSizeParamName), pageSizes)
+    getValidatedPageSizeFromUrl(searchParams.get(pageSizeParamName), startingPageSize, pageSizes)
   );
   const [currentPageNumber, setCurrentPageNumber] = useState<number>(
     getValidatedPageNumberFromUrl(searchParams.get(pageNumberParamName), startingPageNumber)
   );
 
   useEffect(() => {
+    if (!areSearchParamsEnabled) {
+      return;
+    }
+
     setSearchParams(
       {
         [pageNumberParamName]: `${currentPageNumber}`,
@@ -50,8 +58,14 @@ function getValidatedPageNumberFromUrl(pageNumberStr: string | undefined, starti
   return pageNumberUnchecked && pageNumberUnchecked > 0 ? pageNumberUnchecked : startingPageNumber;
 }
 
-function getValidatedPageSizeFromUrl(pageSizeStr: string | undefined, pageSizes: number[]): number {
+function getValidatedPageSizeFromUrl(
+  pageSizeStr: string | undefined,
+  startingPageSize: number,
+  pageSizes: number[]
+): number {
   const sizeValUnchecked = parseInt(pageSizeStr ?? 'NaN', 10);
 
-  return pageSizes.includes(sizeValUnchecked) && sizeValUnchecked > 0 ? sizeValUnchecked : pageSizes[0];
+  return pageSizes.includes(sizeValUnchecked) && sizeValUnchecked > 0
+    ? sizeValUnchecked
+    : startingPageSize ?? pageSizes[0];
 }
diff --git a/libs/design-system/src/select/Select.tsx b/libs/design-system/src/select/Select.tsx
index f2cbc6bc4b6..20fabc73f1a 100644
--- a/libs/design-system/src/select/Select.tsx
+++ b/libs/design-system/src/select/Select.tsx
@@ -1,8 +1,7 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import {
   Box,
   Select as MantineSelect,
-  SelectProps,
   MultiSelect as MantineMultiSelect,
   CloseButton,
   InputBaseProps,
@@ -17,38 +16,7 @@ import { inputStyles } from '../config/inputs.styles';
 import { ArrowDown } from '../icons';
 import { colors } from '../config';
 import { Text } from '../index';
-import { SpacingProps } from '../shared/spacing.props';
-
-export interface ISelectProps extends SpacingProps {
-  data: (string | { value: string; label?: string } | SelectItem)[];
-  value?: string[] | string | null;
-  onChange?: (value: string[] | string | null) => void;
-  label?: React.ReactNode;
-  error?: React.ReactNode;
-  itemComponent?: FC<any>;
-  valueComponent?: FC<any>;
-  placeholder?: string;
-  description?: string;
-  getCreateLabel?: (query: string) => React.ReactNode;
-  onDropdownOpen?: () => void;
-  onSearchChange?: (query: string) => void;
-  onCreate?: SelectProps['onCreate'];
-  searchable?: boolean;
-  creatable?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  loading?: boolean;
-  type?: 'multiselect' | 'select';
-  filter?: (value: string, item: SelectItem) => boolean;
-  allowDeselect?: boolean;
-  dataTestId?: string;
-  rightSectionWidth?: React.CSSProperties['width'];
-  inputProps?: InputBaseProps;
-  withinPortal?: boolean;
-  limit?: SelectProps['limit'];
-  icon?: React.ReactNode;
-  className?: string;
-}
+import { ISelectProps } from './Select.types';
 
 /**
  * Select component
diff --git a/libs/design-system/src/select/Select.types.ts b/libs/design-system/src/select/Select.types.ts
new file mode 100644
index 00000000000..3049f887a7a
--- /dev/null
+++ b/libs/design-system/src/select/Select.types.ts
@@ -0,0 +1,37 @@
+import React, { FC } from 'react';
+import { SelectProps, InputBaseProps, SelectItem } from '@mantine/core';
+
+import { SpacingProps } from '../shared/spacing.props';
+
+export interface ISelectProps extends SpacingProps {
+  data: (string | { value: string; label?: string } | SelectItem)[];
+  value?: string[] | string | null;
+  onChange?: (value: string[] | string | null) => void;
+  label?: React.ReactNode;
+  error?: React.ReactNode;
+  itemComponent?: FC<any>;
+  valueComponent?: FC<any>;
+  placeholder?: string;
+  description?: string;
+  getCreateLabel?: (query: string) => React.ReactNode;
+  onDropdownOpen?: () => void;
+  onSearchChange?: (query: string) => void;
+  onCreate?: SelectProps['onCreate'];
+  searchable?: boolean;
+  creatable?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  loading?: boolean;
+  type?: 'multiselect' | 'select';
+  filter?: (value: string, item: SelectItem) => boolean;
+  allowDeselect?: boolean;
+  dataTestId?: string;
+  rightSectionWidth?: React.CSSProperties['width'];
+  inputProps?: InputBaseProps;
+  withinPortal?: boolean;
+  limit?: SelectProps['limit'];
+  dropdownPosition?: SelectProps['dropdownPosition'];
+  icon?: React.ReactNode;
+  variant?: SelectProps['variant'];
+  className?: string;
+}
diff --git a/libs/design-system/src/sidebar/Sidebar.tsx b/libs/design-system/src/sidebar/Sidebar.tsx
index a24423c069c..a1420a38d2a 100644
--- a/libs/design-system/src/sidebar/Sidebar.tsx
+++ b/libs/design-system/src/sidebar/Sidebar.tsx
@@ -43,7 +43,7 @@ const FooterHolder = styled.div`
   margin-top: auto;
 `;
 
-const COLLAPSED_WIDTH = 480;
+const COLLAPSED_WIDTH = 600;
 const NAVIGATION_WIDTH = 300;
 
 const useDrawerStyles = createStyles((theme: MantineTheme) => {
diff --git a/libs/design-system/src/template-button/TemplateButton.styles.ts b/libs/design-system/src/template-button/TemplateButton.styles.ts
index 3883e8b55c0..8a6bc9f6b1b 100644
--- a/libs/design-system/src/template-button/TemplateButton.styles.ts
+++ b/libs/design-system/src/template-button/TemplateButton.styles.ts
@@ -16,7 +16,7 @@ export const useTemplateButtonStyles = createStyles((theme) => {
       height: '120px',
     },
     variantRoot: {
-      border: `2px dashed ${dark ? colors.B40 : colors.B60}`,
+      border: `1px dashed ${dark ? colors.B40 : colors.B60}`,
     },
     button: {
       height: '80px',
diff --git a/libs/shared-web/src/constants/routes.enum.ts b/libs/shared-web/src/constants/routes.enum.ts
index f6eab1b3139..3642f27d6f6 100644
--- a/libs/shared-web/src/constants/routes.enum.ts
+++ b/libs/shared-web/src/constants/routes.enum.ts
@@ -12,6 +12,7 @@ export enum ROUTES {
   WORKFLOWS_DIGEST_PLAYGROUND = '/workflows/:templateId/digest-playground',
   WORKFLOWS_CREATE = '/workflows/create',
   WORKFLOWS_EDIT_TEMPLATEID = '/workflows/edit/:templateId',
+  WORKFLOWS_VARIANT_PREVIEW = '/workflows/edit/:templateId/:channel/:stepUuid/variants/:variantUuid/preview',
   WORKFLOWS = '/workflows',
   TENANTS = '/tenants',
   TENANTS_CREATE = '/tenants/create',
diff --git a/libs/shared/src/consts/providers/channels/chat.ts b/libs/shared/src/consts/providers/channels/chat.ts
index 9d354dd6536..da4f3dc7252 100644
--- a/libs/shared/src/consts/providers/channels/chat.ts
+++ b/libs/shared/src/consts/providers/channels/chat.ts
@@ -2,8 +2,8 @@ import { IConfigCredentials, IProviderConfig } from '../provider.interface';
 import { grafanaOnCallConfig, slackConfig, getstreamConfig, rocketChatConfig } from '../credentials';
 
 import { ChatProviderIdEnum } from '../provider.enum';
-
 import { ChannelTypeEnum } from '../../../types';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '../../../ui';
 
 export const chatProviders: IProviderConfig[] = [
   {
@@ -11,7 +11,7 @@ export const chatProviders: IProviderConfig[] = [
     displayName: 'Slack',
     channel: ChannelTypeEnum.CHAT,
     credentials: slackConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/chat/slack',
+    docReference: `https://docs.novu.co/channels-and-providers/chat/slack${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'slack.svg', dark: 'slack.svg' },
   },
   {
@@ -19,7 +19,7 @@ export const chatProviders: IProviderConfig[] = [
     displayName: 'Discord',
     channel: ChannelTypeEnum.CHAT,
     credentials: [] as IConfigCredentials[],
-    docReference: 'https://docs.novu.co/channels-and-providers/chat/discord',
+    docReference: `https://docs.novu.co/channels-and-providers/chat/discord${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'discord.svg', dark: 'discord.svg' },
   },
   {
@@ -35,7 +35,7 @@ export const chatProviders: IProviderConfig[] = [
     displayName: 'MSTeams',
     channel: ChannelTypeEnum.CHAT,
     credentials: [] as IConfigCredentials[],
-    docReference: 'https://docs.novu.co/channels-and-providers/chat/ms-teams',
+    docReference: `https://docs.novu.co/channels-and-providers/chat/ms-teams${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'msteams.svg', dark: 'msteams.svg' },
   },
   {
@@ -59,7 +59,7 @@ export const chatProviders: IProviderConfig[] = [
     displayName: 'Zulip',
     channel: ChannelTypeEnum.CHAT,
     credentials: [] as IConfigCredentials[],
-    docReference: 'https://docs.novu.co/channels-and-providers/chat/zulip',
+    docReference: `https://docs.novu.co/channels-and-providers/chat/zulip${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'zulip.svg', dark: 'zulip.svg' },
   },
   {
diff --git a/libs/shared/src/consts/providers/channels/email.ts b/libs/shared/src/consts/providers/channels/email.ts
index 9dc090f803e..5b7f35098d6 100644
--- a/libs/shared/src/consts/providers/channels/email.ts
+++ b/libs/shared/src/consts/providers/channels/email.ts
@@ -20,8 +20,8 @@ import {
 } from '../credentials';
 import { IProviderConfig } from '../provider.interface';
 import { EmailProviderIdEnum } from '../provider.enum';
-
 import { ChannelTypeEnum } from '../../../types';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '../../../ui';
 
 export const emailProviders: IProviderConfig[] = [
   {
@@ -29,7 +29,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Novu Email',
     channel: ChannelTypeEnum.EMAIL,
     credentials: [],
-    docReference: 'https://docs.novu.co/channels-and-providers/default-providers#novu-email-provider',
+    docReference: `https://docs.novu.co/channels-and-providers/default-providers${UTM_CAMPAIGN_QUERY_PARAM}#novu-email-provider`,
     logoFileName: { light: 'novu.png', dark: 'novu.png' },
   },
   {
@@ -37,7 +37,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Mailgun',
     channel: ChannelTypeEnum.EMAIL,
     credentials: mailgunConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/mailgun',
+    docReference: `https://docs.novu.co/channels-and-providers/email/mailgun${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'mailgun.svg', dark: 'mailgun.svg' },
   },
   {
@@ -45,7 +45,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Mailjet',
     channel: ChannelTypeEnum.EMAIL,
     credentials: mailjetConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/mailjet',
+    docReference: `https://docs.novu.co/channels-and-providers/email/mailjet${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'mailjet.png', dark: 'mailjet.png' },
   },
   {
@@ -53,7 +53,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Mailtrap',
     channel: ChannelTypeEnum.EMAIL,
     credentials: mailtrapConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/mailtrap',
+    docReference: `https://docs.novu.co/channels-and-providers/email/mailtrap${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'mailtrap.svg', dark: 'mailtrap.svg' },
   },
   {
@@ -61,7 +61,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Mandrill',
     channel: ChannelTypeEnum.EMAIL,
     credentials: mandrillConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/mandrill',
+    docReference: `https://docs.novu.co/channels-and-providers/email/mandrill${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'mandrill.svg', dark: 'mandrill.svg' },
   },
   {
@@ -69,7 +69,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Postmark',
     channel: ChannelTypeEnum.EMAIL,
     credentials: postmarkConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/postmark',
+    docReference: `https://docs.novu.co/channels-and-providers/email/postmark${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'postmark.png', dark: 'postmark.png' },
   },
   {
@@ -77,7 +77,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'SendGrid',
     channel: ChannelTypeEnum.EMAIL,
     credentials: sendgridConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/sendgrid',
+    docReference: `https://docs.novu.co/channels-and-providers/email/sendgrid${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'sendgrid.png', dark: 'sendgrid.png' },
   },
   {
@@ -85,7 +85,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Sendinblue',
     channel: ChannelTypeEnum.EMAIL,
     credentials: sendinblueConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/sendinblue',
+    docReference: `https://docs.novu.co/channels-and-providers/email/sendinblue${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'sendinblue.png', dark: 'sendinblue.png' },
   },
   {
@@ -93,7 +93,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'SES',
     channel: ChannelTypeEnum.EMAIL,
     credentials: sesConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/amazonses',
+    docReference: `https://docs.novu.co/channels-and-providers/email/amazonses${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'ses.svg', dark: 'ses.svg' },
   },
   {
@@ -101,7 +101,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Netcore',
     channel: ChannelTypeEnum.EMAIL,
     credentials: netCoreConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/netcore',
+    docReference: `https://docs.novu.co/channels-and-providers/email/netcore${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'netcore.png', dark: 'netcore.png' },
   },
   {
@@ -109,7 +109,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Custom SMTP',
     channel: ChannelTypeEnum.EMAIL,
     credentials: nodemailerConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/custom-smtp',
+    docReference: `https://docs.novu.co/channels-and-providers/email/custom-smtp${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'custom_smtp.svg', dark: 'custom_smtp.svg' },
   },
   {
@@ -117,7 +117,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'MailerSend',
     channel: ChannelTypeEnum.EMAIL,
     credentials: mailerSendConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/mailersend',
+    docReference: `https://docs.novu.co/channels-and-providers/email/mailersend${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'mailersend.svg', dark: 'mailersend.svg' },
   },
   {
@@ -125,7 +125,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Microsoft Outlook365',
     channel: ChannelTypeEnum.EMAIL,
     credentials: outlook365Config,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/outlook365',
+    docReference: `https://docs.novu.co/channels-and-providers/email/outlook365${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'outlook365.png', dark: 'outlook365.png' },
   },
   {
@@ -133,7 +133,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Infobip',
     channel: ChannelTypeEnum.EMAIL,
     credentials: infobipEmailConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/infobip',
+    docReference: `https://docs.novu.co/channels-and-providers/email/infobip${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'infobip.png', dark: 'infobip.png' },
   },
   {
@@ -149,7 +149,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Resend',
     channel: ChannelTypeEnum.EMAIL,
     credentials: resendConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/resend',
+    docReference: `https://docs.novu.co/channels-and-providers/email/resend${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'resend.svg', dark: 'resend.svg' },
   },
   {
@@ -157,7 +157,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'Plunk',
     channel: ChannelTypeEnum.EMAIL,
     credentials: plunkConfig,
-    docReference: 'https://docs.novu.co/channels/email/plunk',
+    docReference: `https://docs.novu.co/channels/email/plunk${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'plunk.png', dark: 'plunk.png' },
   },
   {
@@ -165,7 +165,7 @@ export const emailProviders: IProviderConfig[] = [
     displayName: 'SparkPost',
     channel: ChannelTypeEnum.EMAIL,
     credentials: sparkpostConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/email/sparkpost',
+    docReference: `https://docs.novu.co/channels-and-providers/email/sparkpost${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'sparkpost.svg', dark: 'sparkpost.svg' },
   },
   {
@@ -174,7 +174,7 @@ export const emailProviders: IProviderConfig[] = [
     channel: ChannelTypeEnum.EMAIL,
     credentials: emailWebhookConfig,
     betaVersion: true,
-    docReference: 'https://docs.novu.co/channels/email/email-webhook/',
+    docReference: `https://docs.novu.co/channels/email/email-webhook${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'email_webhook.svg', dark: 'email_webhook.svg' },
   },
 ];
diff --git a/libs/shared/src/consts/providers/channels/in-app.ts b/libs/shared/src/consts/providers/channels/in-app.ts
index 12c93851770..b36cecf3998 100644
--- a/libs/shared/src/consts/providers/channels/in-app.ts
+++ b/libs/shared/src/consts/providers/channels/in-app.ts
@@ -4,6 +4,7 @@ import { InAppProviderIdEnum } from '../provider.enum';
 import { IProviderConfig } from '../provider.interface';
 
 import { ChannelTypeEnum } from '../../../types';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '../../../ui';
 
 export const inAppProviders: IProviderConfig[] = [
   {
@@ -11,7 +12,7 @@ export const inAppProviders: IProviderConfig[] = [
     displayName: 'Novu In-App',
     channel: ChannelTypeEnum.IN_APP,
     credentials: novuInAppConfig,
-    docReference: 'https://docs.novu.co/notification-center/introduction',
+    docReference: `https://docs.novu.co/notification-center/introduction${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'novu.png', dark: 'novu.png' },
   },
 ];
diff --git a/libs/shared/src/consts/providers/channels/push.ts b/libs/shared/src/consts/providers/channels/push.ts
index ee18bd0274e..f3781f486c7 100644
--- a/libs/shared/src/consts/providers/channels/push.ts
+++ b/libs/shared/src/consts/providers/channels/push.ts
@@ -12,6 +12,7 @@ import { PushProviderIdEnum } from '../provider.enum';
 import { IProviderConfig } from '../provider.interface';
 
 import { ChannelTypeEnum } from '../../../types';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '../../../ui';
 
 export const pushProviders: IProviderConfig[] = [
   {
@@ -19,7 +20,7 @@ export const pushProviders: IProviderConfig[] = [
     displayName: 'OneSignal',
     channel: ChannelTypeEnum.PUSH,
     credentials: oneSignalConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/push/onesignal',
+    docReference: `https://docs.novu.co/channels-and-providers/push/onesignal${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'one-signal.svg', dark: 'one-signal.svg' },
   },
   {
@@ -27,7 +28,7 @@ export const pushProviders: IProviderConfig[] = [
     displayName: 'Pushpad',
     channel: ChannelTypeEnum.PUSH,
     credentials: pushpadConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/push/pushpad',
+    docReference: `https://docs.novu.co/channels-and-providers/push/pushpad${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'pushpad.svg', dark: 'pushpad.svg' },
   },
   {
@@ -35,7 +36,7 @@ export const pushProviders: IProviderConfig[] = [
     displayName: 'Firebase Cloud Messaging',
     channel: ChannelTypeEnum.PUSH,
     credentials: fcmConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/push/fcm',
+    docReference: `https://docs.novu.co/channels-and-providers/push/fcm${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'fcm.svg', dark: 'fcm.svg' },
   },
   {
@@ -43,7 +44,7 @@ export const pushProviders: IProviderConfig[] = [
     displayName: 'Expo Push',
     channel: ChannelTypeEnum.PUSH,
     credentials: expoConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/push/expo-push',
+    docReference: `https://docs.novu.co/channels-and-providers/push/expo-push${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'expo.svg', dark: 'expo.svg' },
   },
   {
@@ -51,7 +52,7 @@ export const pushProviders: IProviderConfig[] = [
     displayName: 'APNs',
     channel: ChannelTypeEnum.PUSH,
     credentials: apnsConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/push/apns',
+    docReference: `https://docs.novu.co/channels-and-providers/push/apns${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'apns.png', dark: 'apns.png' },
     betaVersion: true,
   },
@@ -60,7 +61,7 @@ export const pushProviders: IProviderConfig[] = [
     displayName: 'Push Webhook',
     channel: ChannelTypeEnum.PUSH,
     credentials: pushWebhookConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/push/push-webhook',
+    docReference: `https://docs.novu.co/channels-and-providers/push/push-webhook${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'push-webhook.svg', dark: 'push-webhook.svg' },
     betaVersion: true,
   },
@@ -69,7 +70,7 @@ export const pushProviders: IProviderConfig[] = [
     displayName: 'Pusher Beams',
     channel: ChannelTypeEnum.PUSH,
     credentials: pusherBeamsConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/push/pusher-beams',
+    docReference: `https://docs.novu.co/channels-and-providers/push/pusher-beams${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'pusher-beams.svg', dark: 'pusher-beams.svg' },
   },
 ];
diff --git a/libs/shared/src/consts/providers/channels/sms.ts b/libs/shared/src/consts/providers/channels/sms.ts
index 69705321b02..683dbfce02b 100644
--- a/libs/shared/src/consts/providers/channels/sms.ts
+++ b/libs/shared/src/consts/providers/channels/sms.ts
@@ -32,6 +32,7 @@ import {
 import { SmsProviderIdEnum } from '../provider.enum';
 
 import { ChannelTypeEnum } from '../../../types';
+import { UTM_CAMPAIGN_QUERY_PARAM } from '../../../ui';
 
 export const smsProviders: IProviderConfig[] = [
   {
@@ -39,7 +40,7 @@ export const smsProviders: IProviderConfig[] = [
     displayName: 'Novu SMS',
     channel: ChannelTypeEnum.SMS,
     credentials: [],
-    docReference: 'https://docs.novu.co/channels-and-providers/default-providers#novu-sms-provider',
+    docReference: `https://docs.novu.co/channels-and-providers/default-providers${UTM_CAMPAIGN_QUERY_PARAM}#novu-sms-provider`,
     logoFileName: { light: 'novu.png', dark: 'novu.png' },
   },
   {
@@ -47,7 +48,7 @@ export const smsProviders: IProviderConfig[] = [
     displayName: 'Nexmo',
     channel: ChannelTypeEnum.SMS,
     credentials: nexmoConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/sms/nexmo',
+    docReference: `https://docs.novu.co/channels-and-providers/sms/nexmo${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'nexmo.png', dark: 'nexmo.png' },
   },
   {
@@ -55,7 +56,7 @@ export const smsProviders: IProviderConfig[] = [
     displayName: 'Plivo',
     channel: ChannelTypeEnum.SMS,
     credentials: plivoConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/sms/plivo',
+    docReference: `https://docs.novu.co/channels-and-providers/sms/plivo${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'plivo.png', dark: 'plivo.png' },
   },
 
@@ -64,7 +65,7 @@ export const smsProviders: IProviderConfig[] = [
     displayName: 'sms77',
     channel: ChannelTypeEnum.SMS,
     credentials: sms77Config,
-    docReference: 'https://docs.novu.co/channels-and-providers/sms/sms77',
+    docReference: `https://docs.novu.co/channels-and-providers/sms/sms77${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'sms77.svg', dark: 'sms77.svg' },
   },
   {
@@ -72,7 +73,7 @@ export const smsProviders: IProviderConfig[] = [
     displayName: 'SNS',
     channel: ChannelTypeEnum.SMS,
     credentials: snsConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/sms/aws-sns',
+    docReference: `https://docs.novu.co/channels-and-providers/sms/aws-sns${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'sns.svg', dark: 'sns.svg' },
   },
   {
@@ -80,7 +81,7 @@ export const smsProviders: IProviderConfig[] = [
     displayName: 'Telnyx',
     channel: ChannelTypeEnum.SMS,
     credentials: telnyxConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/sms/telnyx',
+    docReference: `https://docs.novu.co/channels-and-providers/sms/telnyx${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'telnyx.png', dark: 'telnyx.png' },
   },
   {
@@ -96,7 +97,7 @@ export const smsProviders: IProviderConfig[] = [
     displayName: 'Twilio',
     channel: ChannelTypeEnum.SMS,
     credentials: twilioConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/sms/twilio',
+    docReference: `https://docs.novu.co/channels-and-providers/sms/twilio${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'twilio.png', dark: 'twilio.png' },
   },
   {
@@ -120,7 +121,7 @@ export const smsProviders: IProviderConfig[] = [
     displayName: 'Infobip',
     channel: ChannelTypeEnum.SMS,
     credentials: infobipSMSConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/sms/infobip',
+    docReference: `https://docs.novu.co/channels-and-providers/sms/infobip${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'infobip.png', dark: 'infobip.png' },
   },
   {
@@ -194,7 +195,7 @@ export const smsProviders: IProviderConfig[] = [
     displayName: 'Termii',
     channel: ChannelTypeEnum.SMS,
     credentials: termiiConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/sms/termii',
+    docReference: `https://docs.novu.co/channels-and-providers/sms/termii${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'termii.png', dark: 'termii.png' },
   },
   {
@@ -202,7 +203,7 @@ export const smsProviders: IProviderConfig[] = [
     displayName: `Africa's Talking`,
     channel: ChannelTypeEnum.SMS,
     credentials: africasTalkingConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/sms/africas-talking',
+    docReference: `https://docs.novu.co/channels-and-providers/sms/africas-talking${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'africas-talking.svg', dark: 'africas-talking.svg' },
   },
   {
@@ -210,7 +211,7 @@ export const smsProviders: IProviderConfig[] = [
     displayName: `Sendchamp`,
     channel: ChannelTypeEnum.SMS,
     credentials: sendchampConfig,
-    docReference: 'https://docs.novu.co/channels-and-providers/sms/sendchamp',
+    docReference: `https://docs.novu.co/channels-and-providers/sms/sendchamp${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'sendchamp.svg', dark: 'sendchamp.svg' },
   },
   {
@@ -218,7 +219,7 @@ export const smsProviders: IProviderConfig[] = [
     displayName: `Generic SMS`,
     channel: ChannelTypeEnum.SMS,
     credentials: genericSmsConfig,
-    docReference: 'https://docs.novu.co/channels/sms/generic-sms',
+    docReference: `https://docs.novu.co/channels/sms/generic-sms${UTM_CAMPAIGN_QUERY_PARAM}`,
     logoFileName: { light: 'generic-sms.svg', dark: 'generic-sms.svg' },
   },
   {
diff --git a/libs/shared/src/types/shared/index.ts b/libs/shared/src/types/shared/index.ts
index 183f657b79b..7c0ec79b37a 100644
--- a/libs/shared/src/types/shared/index.ts
+++ b/libs/shared/src/types/shared/index.ts
@@ -3,3 +3,9 @@ export type CustomDataType = { [key: string]: string | string[] | boolean | numb
 export const NOVU_ENCRYPTION_SUB_MASK = 'nvsk.';
 
 export type EncryptedSecret = `${typeof NOVU_ENCRYPTION_SUB_MASK}${string}`;
+
+export interface IResponseError {
+  error: string;
+  message: string;
+  statusCode: number;
+}
diff --git a/libs/shared/src/ui/index.ts b/libs/shared/src/ui/index.ts
index 04bca77e0de..66f73602a3a 100644
--- a/libs/shared/src/ui/index.ts
+++ b/libs/shared/src/ui/index.ts
@@ -1 +1,2 @@
 export * from './utils';
+export * from './marketing';
diff --git a/libs/shared/src/ui/marketing.ts b/libs/shared/src/ui/marketing.ts
new file mode 100644
index 00000000000..004e6e8b63d
--- /dev/null
+++ b/libs/shared/src/ui/marketing.ts
@@ -0,0 +1 @@
+export const UTM_CAMPAIGN_QUERY_PARAM = '?utm_campaign=in-app';
diff --git a/packages/application-generic/src/usecases/add-job/add-job.usecase.ts b/packages/application-generic/src/usecases/add-job/add-job.usecase.ts
index 20f2b9e77f9..88b9f3212bd 100644
--- a/packages/application-generic/src/usecases/add-job/add-job.usecase.ts
+++ b/packages/application-generic/src/usecases/add-job/add-job.usecase.ts
@@ -85,6 +85,7 @@ export class AddJob {
           environmentId: command.environmentId,
           organizationId: command.organizationId,
           userId: command.userId,
+          step: job.step,
           job,
         })
       );
diff --git a/packages/application-generic/src/usecases/compile-email-template/compile-email-template.command.ts b/packages/application-generic/src/usecases/compile-email-template/compile-email-template.command.ts
index 2a12049b09d..1e26222cd65 100644
--- a/packages/application-generic/src/usecases/compile-email-template/compile-email-template.command.ts
+++ b/packages/application-generic/src/usecases/compile-email-template/compile-email-template.command.ts
@@ -28,4 +28,8 @@ export class CompileEmailTemplateCommand extends EnvironmentWithUserCommand {
   @IsString()
   @IsOptional()
   senderName?: string | null;
+
+  @IsString()
+  @IsOptional()
+  locale?: string;
 }
diff --git a/packages/application-generic/src/usecases/compile-email-template/compile-email-template.usecase.ts b/packages/application-generic/src/usecases/compile-email-template/compile-email-template.usecase.ts
index 84a2e05002a..080a21d0083 100644
--- a/packages/application-generic/src/usecases/compile-email-template/compile-email-template.usecase.ts
+++ b/packages/application-generic/src/usecases/compile-email-template/compile-email-template.usecase.ts
@@ -43,7 +43,9 @@ export class CompileEmailTemplate extends CompileTemplateBase {
       await initiateTranslations(
         command.environmentId,
         command.organizationId,
-        command.payload.subscriber?.locale || organization.defaultLocale
+        command.locale ||
+          command.payload.subscriber?.locale ||
+          organization.defaultLocale
       );
     }
 
diff --git a/packages/application-generic/src/usecases/compile-in-app-template/compile-in-app-template.command.ts b/packages/application-generic/src/usecases/compile-in-app-template/compile-in-app-template.command.ts
index 7d65b6eea44..b982b3d920c 100644
--- a/packages/application-generic/src/usecases/compile-in-app-template/compile-in-app-template.command.ts
+++ b/packages/application-generic/src/usecases/compile-in-app-template/compile-in-app-template.command.ts
@@ -1,4 +1,4 @@
-import { IsDefined, IsOptional } from 'class-validator';
+import { IsDefined, IsOptional, IsString } from 'class-validator';
 import { IMessageCTA } from '@novu/shared';
 
 import { EnvironmentWithUserCommand } from '../../commands/project.command';
@@ -12,4 +12,8 @@ export class CompileInAppTemplateCommand extends EnvironmentWithUserCommand {
 
   @IsOptional()
   cta?: IMessageCTA;
+
+  @IsString()
+  @IsOptional()
+  locale?: string;
 }
diff --git a/packages/application-generic/src/usecases/compile-in-app-template/compile-in-app-template.usecase.ts b/packages/application-generic/src/usecases/compile-in-app-template/compile-in-app-template.usecase.ts
index 7145b6c5310..5a52f083f7d 100644
--- a/packages/application-generic/src/usecases/compile-in-app-template/compile-in-app-template.usecase.ts
+++ b/packages/application-generic/src/usecases/compile-in-app-template/compile-in-app-template.usecase.ts
@@ -35,7 +35,9 @@ export class CompileInAppTemplate extends CompileTemplateBase {
       await initiateTranslations(
         command.environmentId,
         command.organizationId,
-        command.payload.subscriber?.locale || organization.defaultLocale
+        command.locale ||
+          command.payload.subscriber?.locale ||
+          organization.defaultLocale
       );
     }
 
diff --git a/packages/application-generic/src/usecases/compile-step-template/compile-step-template.command.ts b/packages/application-generic/src/usecases/compile-step-template/compile-step-template.command.ts
index 4947dfef0b7..ee440ddf54b 100644
--- a/packages/application-generic/src/usecases/compile-step-template/compile-step-template.command.ts
+++ b/packages/application-generic/src/usecases/compile-step-template/compile-step-template.command.ts
@@ -1,4 +1,4 @@
-import { IsDefined } from 'class-validator';
+import { IsDefined, IsOptional, IsString } from 'class-validator';
 
 import { EnvironmentWithUserCommand } from '../../commands/project.command';
 
@@ -6,6 +6,13 @@ export class CompileStepTemplateCommand extends EnvironmentWithUserCommand {
   @IsDefined()
   content: string;
 
+  @IsOptional()
+  title?: string;
+
   @IsDefined()
   payload: any; // eslint-disable-line @typescript-eslint/no-explicit-any
+
+  @IsString()
+  @IsOptional()
+  locale?: string;
 }
diff --git a/packages/application-generic/src/usecases/compile-step-template/compile-step-template.usecase.ts b/packages/application-generic/src/usecases/compile-step-template/compile-step-template.usecase.ts
index 8a578b5d7ff..c2a5bd3a253 100644
--- a/packages/application-generic/src/usecases/compile-step-template/compile-step-template.usecase.ts
+++ b/packages/application-generic/src/usecases/compile-step-template/compile-step-template.usecase.ts
@@ -34,7 +34,9 @@ export class CompileStepTemplate extends CompileTemplateBase {
       await initiateTranslations(
         command.environmentId,
         command.organizationId,
-        command.payload.subscriber?.locale || organization.defaultLocale
+        command.locale ||
+          command.payload.subscriber?.locale ||
+          organization.defaultLocale
       );
     }
 
@@ -42,15 +44,21 @@ export class CompileStepTemplate extends CompileTemplateBase {
 
     let content = '';
 
+    let title: string | undefined = undefined;
+
     try {
       content = await this.compileStepTemplate(command.content, payload);
+
+      if (command.title) {
+        title = await this.compileStepTemplate(command.title, payload);
+      }
     } catch (e: any) {
       throw new ApiException(
         e?.message || `Message content could not be generated`
       );
     }
 
-    return { content };
+    return { content, title };
   }
 
   private async compileStepTemplate(
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 99d36271545..f50f3e5cef9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -971,6 +971,9 @@ importers:
       cypress:
         specifier: ^13.3.1
         version: 13.3.1
+      cypress-file-upload:
+        specifier: ^5.0.8
+        version: 5.0.8(cypress@13.3.1)
       cypress-localstorage-commands:
         specifier: ^2.2.4
         version: 2.2.4(cypress@13.3.1)
@@ -2037,6 +2040,9 @@ importers:
       '@mantine/core':
         specifier: ^5.7.1
         version: 5.10.5(@emotion/react@11.10.6)(@mantine/hooks@5.10.5)(@types/react@17.0.62)(react-dom@17.0.2)(react@17.0.2)
+      '@mantine/dropzone':
+        specifier: ^5.9.2
+        version: 5.10.5(@mantine/core@5.10.5)(@mantine/hooks@5.10.5)(react-dom@17.0.2)(react@17.0.2)
       '@mantine/hooks':
         specifier: ^5.7.1
         version: 5.10.5(react@17.0.2)
@@ -34607,6 +34613,15 @@ packages:
     resolution: {integrity: sha512-NJGVKPS81XejHcLhaLJS7plab0fK3slPh11mESeeDq2W4ZI5kUKK/LRRdVDvjJseojbPB7ZwjnyOybg3Igea/A==}
     dev: true
 
+  /cypress-file-upload@5.0.8(cypress@13.3.1):
+    resolution: {integrity: sha512-+8VzNabRk3zG6x8f8BWArF/xA/W0VK4IZNx3MV0jFWrJS/qKn8eHfa5nU73P9fOQAgwHFJx7zjg4lwOnljMO8g==}
+    engines: {node: '>=8.2.1'}
+    peerDependencies:
+      cypress: '>3.0.0'
+    dependencies:
+      cypress: 13.3.1
+    dev: true
+
   /cypress-intellij-reporter@0.0.7:
     resolution: {integrity: sha512-P4A0BPz5h9TWLZFVhMJsAMktqCEdeKA0+bS+zfTGLohUtM89pmU5kAWLEGFOYRcRlVR39XbUWhyFyTjs8AoFLA==}
     dependencies:
@@ -34933,7 +34948,6 @@ packages:
     dependencies:
       ms: 2.1.3
       supports-color: 5.5.0
-    dev: true
 
   /debug@3.2.7(supports-color@8.1.1):
     resolution: {integrity: sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==}
@@ -36163,7 +36177,7 @@ packages:
   /eslint-import-resolver-node@0.3.7:
     resolution: {integrity: sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==}
     dependencies:
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       is-core-module: 2.13.0
       resolve: 1.22.2
     transitivePeerDependencies:
@@ -36178,7 +36192,7 @@ packages:
       webpack: '>=1.11.0'
     dependencies:
       array.prototype.find: 2.2.2
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       enhanced-resolve: 0.9.1
       eslint-plugin-import: 2.28.1(@typescript-eslint/parser@5.58.0)(eslint-import-resolver-webpack@0.13.7)(eslint@8.38.0)
       find-root: 1.1.0
@@ -36216,7 +36230,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/parser': 5.58.0(eslint@8.38.0)(typescript@4.9.5)
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       eslint: 8.38.0
       eslint-import-resolver-node: 0.3.7
       eslint-import-resolver-webpack: 0.13.7(eslint-plugin-import@2.28.1)(webpack@5.78.0)
@@ -36246,7 +36260,7 @@ packages:
         optional: true
     dependencies:
       '@typescript-eslint/parser': 5.58.0(eslint@8.51.0)(typescript@4.9.5)
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       eslint: 8.51.0
       eslint-import-resolver-node: 0.3.7
       eslint-import-resolver-webpack: 0.13.7(eslint-plugin-import@2.28.1)(webpack@5.78.0)
@@ -36327,7 +36341,7 @@ packages:
       array.prototype.findlastindex: 1.2.3
       array.prototype.flat: 1.3.1
       array.prototype.flatmap: 1.3.1
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       doctrine: 2.1.0
       eslint: 8.38.0
       eslint-import-resolver-node: 0.3.7
@@ -36362,7 +36376,7 @@ packages:
       array.prototype.findlastindex: 1.2.3
       array.prototype.flat: 1.3.1
       array.prototype.flatmap: 1.3.1
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       doctrine: 2.1.0
       eslint: 8.51.0
       eslint-import-resolver-node: 0.3.7
@@ -40934,7 +40948,7 @@ packages:
       pretty-format: 27.5.1
       slash: 3.0.0
       strip-json-comments: 3.1.1
-      ts-node: 10.9.1(@types/node@14.18.42)(typescript@4.9.5)
+      ts-node: 10.9.1(@types/node@16.11.7)(typescript@4.9.5)
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -44939,7 +44953,7 @@ packages:
     hasBin: true
     requiresBuild: true
     dependencies:
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       iconv-lite: 0.6.3
       sax: 1.2.4
     transitivePeerDependencies:
@@ -47283,7 +47297,7 @@ packages:
     engines: {node: '>= 0.12.0'}
     dependencies:
       async: 2.6.4
-      debug: 3.2.7(supports-color@8.1.1)
+      debug: 3.2.7(supports-color@5.5.0)
       mkdirp: 0.5.6
     transitivePeerDependencies:
       - supports-color