diff --git a/.cspell.json b/.cspell.json
index ebc70cecf14..8936bd9940c 100644
--- a/.cspell.json
+++ b/.cspell.json
@@ -435,7 +435,9 @@
     "Millis",
     "sscan",
     "vishnudxb",
-    "autopipelining"
+    "autopipelining",
+    "maxtimeout",
+    "clsx"
   ],
   "flagWords": [],
   "patterns": [
@@ -502,6 +504,7 @@
     "pnpm-lock.yaml",
     "pnpm-workspace.yaml",
     "novu.code-workspace",
+    "packages/application-generic/src/.env.test",
     "packages/notification-center/src/i18n/languages/**",
     "apps/widget/public/iframeResizer.contentWindow.js",
     ".eslintrc.js",
diff --git a/.eslintrc.js b/.eslintrc.js
index 028075a3759..6082c6c1c17 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -7,7 +7,6 @@ module.exports = {
     'prettier',
     'plugin:prettier/recommended',
     'plugin:promise/recommended',
-    'plugin:@cspell/recommended',
   ],
   ignorePatterns: ['.eslintrc.js', '*.json', 'jest.config.js'],
   plugins: ['import', 'promise', '@typescript-eslint', 'prettier'],
diff --git a/.github/workflows/reusable-web-e2e.yml b/.github/workflows/reusable-web-e2e.yml
index 67d86a9421f..71d46a17415 100644
--- a/.github/workflows/reusable-web-e2e.yml
+++ b/.github/workflows/reusable-web-e2e.yml
@@ -91,6 +91,11 @@ jobs:
         if: steps.setup-project.outputs.cypress_cache_hit != 'true'
         working-directory: apps/web
         run: pnpm cypress install
+      
+      
+      - uses: browser-actions/setup-chrome@latest
+      - run: |
+          echo "BROWSER_PATH=$(which chrome)" >> $GITHUB_ENV
 
       - name: Cypress run e2e
         uses: cypress-io/github-action@v4
@@ -103,7 +108,7 @@ jobs:
           CYPRESS_IS_CI: true
         with:
           working-directory: apps/web
-          browser: chrome
+          browser: "${{ env.BROWSER_PATH }}"
           record: true
           parallel: true
           install: false
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
new file mode 100644
index 00000000000..477e99cccdc
--- /dev/null
+++ b/.github/workflows/test.yml
@@ -0,0 +1,77 @@
+name: Testing
+
+on:
+  # Execute it on pushing to next branches
+  push:
+    branches:
+      - next
+      - main
+  # Execute it on opening any pull request
+  pull_request:
+jobs:
+  # Get branch info
+  branch-info:
+    runs-on: ubuntu-latest
+    steps:
+      # Get current branch name
+      - name: Get branch name
+        id: branch-name
+        uses: tj-actions/branch-names@v5.2
+      # Get base branch name to compare with. Base branch on a PR, "main" branch on pushing.
+      - name: Get base branch name
+        id: get-base-branch-name
+        run: |
+          if [[ "${{github.event.pull_request.base.ref}}" != "" ]]; then
+            echo "::set-output name=branch::${{github.event.pull_request.base.ref}}"
+          else
+            echo "::set-output name=branch::main"
+          fi
+    outputs:
+      # Export the branch names as output to be able to use it in other jobs
+      base-branch-name: ${{ steps.get-base-branch-name.outputs.branch }}
+      branch-name: ${{ steps.branch-name.outputs.current_branch }}
+  get-affected:
+    needs: [ branch-info ]
+    name: Nx Affected
+    runs-on: ubuntu-latest
+    outputs:
+      test-unit: ${{ steps.get-projects-arrays.outputs.test-unit }}
+      test-e2e: ${{ steps.get-projects-arrays.outputs.test-e2e }}
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: ./.github/actions/setup-project
+
+      # Configure Nx to be able to detect changes between branches when we are in a PR
+      - name: Derive appropriate SHAs for base and head for `nx affected` commands
+        uses: nrwl/nx-set-shas@v2
+        with:
+          main-branch-name: ${{needs.branch-info.outputs.base-branch-name}}
+
+      - name: Get affected
+        id: get-projects-arrays
+        # When not in a PR and the current branch is main, pass --all flag. Otherwise pass the base branch
+        run: |
+          if [[ "${{github.event.pull_request.base.ref}}" == "" && "${{needs.branch-info.outputs.branch-name}}" == "main" ]]; then
+            echo "Running ALL"
+            echo "::set-output name=test-unit::$(node scripts/print-affected-array.js test:unit --all)"
+            echo "::set-output name=test-e2e::$(node scripts/print-affected-array.js test:e2e --all)"
+          else
+            echo "Running PR origin/${{needs.branch-info.outputs.base-branch-name}}"
+            echo "::set-output name=test-unit::$(node scripts/print-affected-array.js test:unit origin/${{needs.branch-info.outputs.base-branch-name}})"
+            echo "::set-output name=test-e2e::$(node scripts/print-affected-array.js test:e2e origin/${{needs.branch-info.outputs.base-branch-name}})"
+          fi
+  test:
+    runs-on: ubuntu-latest
+    needs: [get-affected]
+    if:  ${{ fromJson(needs.get-affected.outputs.test-e2e)[0] }}
+    strategy:
+      # Run in parallel
+      max-parallel: 4
+      # One job for each different project and node version
+      matrix:
+        projectName: ${{ fromJson(needs.get-affected.outputs.test-e2e) }}
+    steps:
+      - run: echo ${{ fromJson(needs.get-affected.outputs.test-e2e) }}
+
diff --git a/.npmrc b/.npmrc
index 4c2f52b3be7..8b914cfbbc3 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,3 @@
 auto-install-peers=true
 strict-peer-dependencies=false
+fetch-retry-maxtimeout=30000
diff --git a/README.md b/README.md
index 7298aa9eb03..39a84511092 100644
--- a/README.md
+++ b/README.md
@@ -143,8 +143,10 @@ Novu provides a single API to manage providers across multiple channels with a s
 - [x] [Mandrill](https://github.com/novuhq/novu/tree/main/providers/mandrill)
 - [x] [SendinBlue](https://github.com/novuhq/novu/tree/main/providers/sendinblue)
 - [x] [MailerSend](https://github.com/novuhq/novu/tree/main/providers/mailersend)
+- [x] [Infobip](https://github.com/novuhq/novu/tree/main/providers/infobip)
 - [x] [Resend](https://github.com/novuhq/novu/tree/main/providers/resend)
-- [ ] SparkPost
+- [x] [SparkPost](https://github.com/novuhq/novu/tree/main/providers/sparkpost)
+- [x] [Outlook 365](https://github.com/novuhq/novu/tree/main/providers/outlook365)
 
 #### 📞 SMS
 
@@ -156,6 +158,14 @@ Novu provides a single API to manage providers across multiple channels with a s
 - [x] [Telnyx](https://github.com/novuhq/novu/tree/main/providers/telnyx)
 - [x] [Termii](https://github.com/novuhq/novu/tree/main/providers/termii)
 - [x] [Gupshup](https://github.com/novuhq/novu/tree/main/providers/gupshup)
+- [x] [SMS Central](https://github.com/novuhq/novu/tree/main/providers/sms-central)
+- [x] [Maqsam](https://github.com/novuhq/novu/tree/main/providers/maqsam)
+- [x] [46elks](https://github.com/novuhq/novu/tree/main/providers/forty-six-elks)
+- [x] [Clickatell](https://github.com/novuhq/novu/tree/main/providers/clickatell)
+- [x] [Burst SMS](https://github.com/novuhq/novu/tree/main/providers/burst-sms)
+- [x] [Firetext](https://github.com/novuhq/novu/tree/main/providers/firetext)
+- [x] [Infobip](https://github.com/novuhq/novu/tree/main/providers/infobip)
+- [x] [SNS](https://github.com/novuhq/novu/tree/main/providers/sns)
 - [ ] Bandwidth
 - [ ] RingCentral
 
@@ -163,7 +173,8 @@ Novu provides a single API to manage providers across multiple channels with a s
 
 - [x] [FCM](https://github.com/novuhq/novu/tree/main/providers/fcm)
 - [x] [Expo](https://github.com/novuhq/novu/tree/main/providers/expo)
-- [x] [SNS](https://github.com/novuhq/novu/tree/main/providers/sns)
+- [x] [APNS](https://github.com/novuhq/novu/tree/main/providers/apns)
+- [ ] OneSignal
 - [ ] Pushwoosh
 
 #### 👇 Chat
diff --git a/apps/api/.eslintrc.js b/apps/api/.eslintrc.js
index a57fabcc485..04324a0ca4c 100644
--- a/apps/api/.eslintrc.js
+++ b/apps/api/.eslintrc.js
@@ -3,5 +3,11 @@ module.exports = {
   rules: {
     'func-names': 'off',
   },
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
   ignorePatterns: '*.spec.ts',
 };
diff --git a/apps/api/Dockerfile b/apps/api/Dockerfile
index d5b9a87d728..c48e5c6e582 100644
--- a/apps/api/Dockerfile
+++ b/apps/api/Dockerfile
@@ -48,6 +48,7 @@ RUN rm -rf node_modules && pnpm recursive exec -- rm -rf ./src ./node_modules
 
 # ------- PRODUCTION BUILD ----------
 FROM dev_base AS prod
+
 ARG PACKAGE_PATH
 
 ENV CI=true
diff --git a/apps/api/package.json b/apps/api/package.json
index 19817a821cc..50da9a6a4b6 100644
--- a/apps/api/package.json
+++ b/apps/api/package.json
@@ -30,7 +30,7 @@
     "@nestjs/axios": "~2.0.0",
     "@nestjs/common": "9.3.12",
     "@nestjs/core": "9.3.12",
-    "@nestjs/graphql": "10.2.0",
+    "@nestjs/graphql": "10.2.1",
     "@nestjs/jwt": "9.0.0",
     "@nestjs/passport": "9.0.3",
     "@nestjs/platform-express": "9.3.12",
@@ -63,7 +63,7 @@
     "handlebars": "^4.7.7",
     "hat": "^0.0.3",
     "helmet": "^6.0.1",
-    "ioredis": "5.3.1",
+    "ioredis": "5.3.2",
     "jsonwebtoken": "9.0.0",
     "lodash": "^4.17.15",
     "nanoid": "^3.1.20",
@@ -87,7 +87,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^6.0.0",
-    "@nestjs/cli": "9.3.0",
+    "@nestjs/cli": "9.4.0",
     "@nestjs/schematics": "9.0.4",
     "@nestjs/testing": "9.3.12",
     "@types/bcrypt": "^3.0.0",
@@ -111,7 +111,7 @@
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "eslint --fix"
+      "eslint"
     ]
   }
 }
diff --git a/apps/api/src/.env.development b/apps/api/src/.env.development
index 00d6ae3e8a0..2d4fae6c0e3 100644
--- a/apps/api/src/.env.development
+++ b/apps/api/src/.env.development
@@ -23,6 +23,7 @@ REDIS_CACHE_CONNECTION_TIMEOUT=
 REDIS_CACHE_KEEP_ALIVE=
 REDIS_CACHE_FAMILY=
 REDIS_CACHE_KEY_PREFIX=
+REDIS_CACHE_ENABLE_AUTOPIPELINING=true 
 
 IN_MEMORY_CLUSTER_MODE_ENABLED=true
 ELASTICACHE_CLUSTER_SERVICE_HOST=
diff --git a/apps/api/src/.env.production b/apps/api/src/.env.production
index fd5fe1eaa17..c7d6e88645e 100644
--- a/apps/api/src/.env.production
+++ b/apps/api/src/.env.production
@@ -13,7 +13,6 @@ REDIS_PORT=6379
 REDIS_PREFIX=
 REDIS_DB_INDEX=2
 
-
 IN_MEMORY_CLUSTER_MODE_ENABLED=false
 ELASTICACHE_CLUSTER_SERVICE_HOST=
 ELASTICACHE_CLUSTER_SERVICE_PORT=
diff --git a/apps/api/src/.env.test b/apps/api/src/.env.test
index 7283dd56e07..258720aa5ab 100644
--- a/apps/api/src/.env.test
+++ b/apps/api/src/.env.test
@@ -21,6 +21,7 @@ REDIS_CACHE_CONNECTION_TIMEOUT=
 REDIS_CACHE_KEEP_ALIVE=
 REDIS_CACHE_FAMILY=
 REDIS_CACHE_KEY_PREFIX=
+REDIS_CACHE_ENABLE_AUTOPIPELINING=false 
 
 IN_MEMORY_CLUSTER_MODE_ENABLED=false
 ELASTICACHE_CLUSTER_SERVICE_HOST=
diff --git a/apps/api/src/.example.env b/apps/api/src/.example.env
index 84ac3dfe4af..1b7ceb5448c 100644
--- a/apps/api/src/.example.env
+++ b/apps/api/src/.example.env
@@ -20,6 +20,7 @@ REDIS_CACHE_CONNECTION_TIMEOUT=
 REDIS_CACHE_KEEP_ALIVE=
 REDIS_CACHE_FAMILY=
 REDIS_CACHE_KEY_PREFIX=
+REDIS_CACHE_ENABLE_AUTOPIPELINING=
 
 IN_MEMORY_CLUSTER_MODE_ENABLED=false
 REDIS_CLUSTER_SERVICE_HOST=
diff --git a/apps/api/src/app/change/usecases/promote-notification-template-change/promote-notification-template-change.usecase.ts b/apps/api/src/app/change/usecases/promote-notification-template-change/promote-notification-template-change.usecase.ts
index 14cd27e6a08..2ce5c95c7de 100644
--- a/apps/api/src/app/change/usecases/promote-notification-template-change/promote-notification-template-change.usecase.ts
+++ b/apps/api/src/app/change/usecases/promote-notification-template-change/promote-notification-template-change.usecase.ts
@@ -63,7 +63,9 @@ export class PromoteNotificationTemplateChange {
       return step;
     };
 
-    const steps = newItem.steps ? newItem.steps.map(mapNewStepItem).filter((step) => step !== undefined) : [];
+    const steps = newItem.steps
+      ? newItem.steps.map(mapNewStepItem).filter((step): step is NotificationStepEntity => step !== undefined)
+      : [];
 
     if (missingMessages.length > 0 && steps.length > 0 && item) {
       Logger.error(
@@ -108,7 +110,11 @@ export class PromoteNotificationTemplateChange {
     }
 
     if (!item) {
-      return this.notificationTemplateRepository.create({
+      if (newItem.deleted === true) {
+        return;
+      }
+
+      const newNotificationTemplate: Partial<NotificationTemplateEntity> = {
         name: newItem.name,
         active: newItem.active,
         draft: newItem.draft,
@@ -125,7 +131,9 @@ export class PromoteNotificationTemplateChange {
         _notificationGroupId: notificationGroup._id,
         isBlueprint: command.organizationId === this.blueprintOrganizationId,
         blueprintId: newItem.blueprintId,
-      });
+      };
+
+      return this.notificationTemplateRepository.create(newNotificationTemplate as NotificationTemplateEntity);
     }
 
     const count = await this.notificationTemplateRepository.count({
diff --git a/apps/api/src/app/events/dtos/trigger-event-request.dto.ts b/apps/api/src/app/events/dtos/trigger-event-request.dto.ts
index e62ab1e1cdd..3c43235dd2c 100644
--- a/apps/api/src/app/events/dtos/trigger-event-request.dto.ts
+++ b/apps/api/src/app/events/dtos/trigger-event-request.dto.ts
@@ -1,37 +1,17 @@
-import {
-  ArrayMaxSize,
-  ArrayNotEmpty,
-  IsArray,
-  IsDefined,
-  IsObject,
-  IsOptional,
-  IsString,
-  MinLength,
-} from 'class-validator';
+import { ArrayMaxSize, ArrayNotEmpty, IsArray, IsDefined, IsObject, IsOptional, IsString } from 'class-validator';
 import { ApiExtraModels, ApiProperty, ApiPropertyOptional, getSchemaPath } from '@nestjs/swagger';
 import { TriggerRecipientSubscriber, TriggerRecipients } from '@novu/node';
-import { TopicId, TopicKey, TriggerRecipientsTypeEnum } from '@novu/shared';
+import { TopicKey, TriggerRecipientsTypeEnum } from '@novu/shared';
+import { CreateSubscriberRequestDto } from '../../subscribers/dtos/create-subscriber-request.dto';
 
-export class SubscriberPayloadDto {
-  @ApiProperty()
-  firstName?: string;
-  @ApiProperty()
-  lastName?: string;
-  @ApiProperty()
-  email?: string;
-  @ApiProperty()
-  phone?: string;
-  @ApiProperty()
-  avatar?: string;
-  @ApiProperty()
-  locale?: string;
-}
+export class SubscriberPayloadDto extends CreateSubscriberRequestDto {}
 
 export class TopicPayloadDto {
   @ApiProperty()
   topicKey: TopicKey;
-  @ApiProperty()
-  type: TriggerRecipientsTypeEnum.TOPIC;
+
+  @ApiProperty({ example: 'Topic', enum: TriggerRecipientsTypeEnum })
+  type: TriggerRecipientsTypeEnum;
 }
 
 export class BulkTriggerEventDto {
@@ -72,7 +52,9 @@ export class TriggerEventRequestDto {
     description: 'This could be used to override provider specific configurations',
     example: {
       fcm: {
-        color: '#fff',
+        data: {
+          key: 'value',
+        },
       },
     },
   })
@@ -87,22 +69,15 @@ export class TriggerEventRequestDto {
         $ref: getSchemaPath(SubscriberPayloadDto),
       },
       {
-        type: '[SubscriberPayloadDto]',
-        description: 'List of subscriber objects',
-      },
-      { type: 'string', description: 'Unique identifier of a subscriber in your systems' },
-      {
-        type: '[string]',
-        description: 'List of subscriber identifiers',
+        type: 'string',
+        description: 'Unique identifier of a subscriber in your systems',
+        example: 'SUBSCRIBER_ID',
       },
       {
         $ref: getSchemaPath(TopicPayloadDto),
       },
-      {
-        type: '[TopicPayloadDto]',
-        description: 'List of topics',
-      },
     ],
+    isArray: true,
   })
   @IsDefined()
   to: TriggerRecipients;
diff --git a/apps/api/src/app/events/dtos/trigger-event-to-all-request.dto.ts b/apps/api/src/app/events/dtos/trigger-event-to-all-request.dto.ts
index 5b4d3104ea3..0ffb541b81f 100644
--- a/apps/api/src/app/events/dtos/trigger-event-to-all-request.dto.ts
+++ b/apps/api/src/app/events/dtos/trigger-event-to-all-request.dto.ts
@@ -30,7 +30,9 @@ export class TriggerEventToAllRequestDto {
     description: 'This could be used to override provider specific configurations',
     example: {
       fcm: {
-        color: '#fff',
+        data: {
+          key: 'value',
+        },
       },
     },
   })
diff --git a/apps/api/src/app/invites/usecases/invite-member/invite-member.usecase.ts b/apps/api/src/app/invites/usecases/invite-member/invite-member.usecase.ts
index e3dff027581..75a8e936576 100644
--- a/apps/api/src/app/invites/usecases/invite-member/invite-member.usecase.ts
+++ b/apps/api/src/app/invites/usecases/invite-member/invite-member.usecase.ts
@@ -37,7 +37,6 @@ export class InviteMember {
     if (process.env.NOVU_API_KEY && (process.env.NODE_ENV === 'dev' || process.env.NODE_ENV === 'production')) {
       const novu = new Novu(process.env.NOVU_API_KEY);
 
-      // eslint-disable-next-line @cspell/spellchecker
       // cspell:disable-next
       await novu.trigger(process.env.NOVU_TEMPLATEID_INVITE_TO_ORGANISATION || 'invite-to-organization-wBnO8NpDn', {
         to: {
diff --git a/apps/api/src/app/invites/usecases/resend-invite/resend-invite.usecase.ts b/apps/api/src/app/invites/usecases/resend-invite/resend-invite.usecase.ts
index 90d34b51d1c..3086440a848 100644
--- a/apps/api/src/app/invites/usecases/resend-invite/resend-invite.usecase.ts
+++ b/apps/api/src/app/invites/usecases/resend-invite/resend-invite.usecase.ts
@@ -36,7 +36,6 @@ export class ResendInvite {
     if (process.env.NODE_ENV === 'dev' || process.env.NODE_ENV === 'production') {
       const novu = new Novu(process.env.NOVU_API_KEY ?? '');
 
-      // eslint-disable-next-line @cspell/spellchecker
       // cspell:disable-next
       await novu.trigger(process.env.NOVU_TEMPLATEID_INVITE_TO_ORGANISATION || 'invite-to-organization-wBnO8NpDn', {
         to: {
diff --git a/apps/api/src/app/notification-template/e2e/create-notification-templates.e2e.ts b/apps/api/src/app/notification-template/e2e/create-notification-templates.e2e.ts
index 4284490efde..a2485b596b8 100644
--- a/apps/api/src/app/notification-template/e2e/create-notification-templates.e2e.ts
+++ b/apps/api/src/app/notification-template/e2e/create-notification-templates.e2e.ts
@@ -22,7 +22,7 @@ import { isSameDay } from 'date-fns';
 import { CreateNotificationTemplateRequestDto } from '../dto';
 
 import axios from 'axios';
-// import { SendMessageEmail } from '../../events/usecases/send-message/send-message-email.usecase';
+// import { SendMessageEmail } from '../../events/usecases/send-message';
 
 describe('Create Notification template - /notification-templates (POST)', async () => {
   let session: UserSession;
@@ -103,21 +103,25 @@ describe('Create Notification template - /notification-templates (POST)', async
 
     expect(template._notificationGroupId).to.equal(testTemplate.notificationGroupId);
     const message = template.steps[0];
+    const filters = message?.filters ? message?.filters[0] : null;
 
-    const children: IFieldFilterPart = testTemplate.steps[0].filters[0].children[0] as IFieldFilterPart;
+    const messageTest = testTemplate?.steps ? testTemplate?.steps[0] : null;
+    const filtersTest = messageTest?.filters ? messageTest.filters[0] : null;
 
-    expect(message.template.name).to.equal(`${testTemplate.steps[0].template.name}`);
-    expect(message.template.active).to.equal(defaultMessageIsActive);
-    expect(message.template.subject).to.equal(`${testTemplate.steps[0].template.subject}`);
-    expect(message.template.preheader).to.equal(`${testTemplate.steps[0].template.preheader}`);
-    expect(message.filters[0].type).to.equal(testTemplate.steps[0].filters[0].type);
-    expect(message.filters[0].children.length).to.equal(testTemplate.steps[0].filters[0].children.length);
+    const children: IFieldFilterPart = filtersTest?.children[0] as IFieldFilterPart;
+
+    expect(message?.template?.name).to.equal(`${messageTest?.template?.name}`);
+    expect(message?.template?.active).to.equal(defaultMessageIsActive);
+    expect(message?.template?.subject).to.equal(`${messageTest?.template?.subject}`);
+    expect(message?.template?.preheader).to.equal(`${messageTest?.template?.preheader}`);
+    expect(filters?.type).to.equal(filtersTest?.type);
+    expect(filters?.children.length).to.equal(filtersTest?.children?.length);
     expect(children.value).to.equal(children.value);
     expect(children.operator).to.equal(children.operator);
     expect(template.tags[0]).to.equal('test-tag');
 
-    if (Array.isArray(message.template.content) && Array.isArray(testTemplate.steps[0].template.content)) {
-      expect(message.template.content[0].type).to.equal(testTemplate.steps[0].template.content[0].type);
+    if (Array.isArray(message?.template?.content) && Array.isArray(messageTest?.template?.content)) {
+      expect(message?.template?.content[0].type).to.equal(messageTest?.template?.content[0].type);
     } else {
       throw new Error('content must be an array');
     }
@@ -126,10 +130,10 @@ describe('Create Notification template - /notification-templates (POST)', async
       _environmentId: session.environment._id,
       _entityId: message._templateId,
     });
-    await session.testAgent.post(`/v1/changes/${change._id}/apply`);
+    await session.testAgent.post(`/v1/changes/${change?._id}/apply`);
 
     change = await changeRepository.findOne({ _environmentId: session.environment._id, _entityId: template._id });
-    await session.testAgent.post(`/v1/changes/${change._id}/apply`);
+    await session.testAgent.post(`/v1/changes/${change?._id}/apply`);
 
     const prodEnv = await getProductionEnvironment();
 
@@ -138,25 +142,25 @@ describe('Create Notification template - /notification-templates (POST)', async
       _parentId: template._id,
     });
 
-    expect(prodVersionNotification.tags[0]).to.equal(template.tags[0]);
-    expect(prodVersionNotification.steps.length).to.equal(template.steps.length);
-    expect(prodVersionNotification.triggers[0].type).to.equal(template.triggers[0].type);
-    expect(prodVersionNotification.triggers[0].identifier).to.equal(template.triggers[0].identifier);
-    expect(prodVersionNotification.active).to.equal(template.active);
-    expect(prodVersionNotification.draft).to.equal(template.draft);
-    expect(prodVersionNotification.name).to.equal(template.name);
-    expect(prodVersionNotification.description).to.equal(template.description);
+    expect(prodVersionNotification?.tags[0]).to.equal(template.tags[0]);
+    expect(prodVersionNotification?.steps.length).to.equal(template.steps.length);
+    expect(prodVersionNotification?.triggers[0].type).to.equal(template.triggers[0].type);
+    expect(prodVersionNotification?.triggers[0].identifier).to.equal(template.triggers[0].identifier);
+    expect(prodVersionNotification?.active).to.equal(template.active);
+    expect(prodVersionNotification?.draft).to.equal(template.draft);
+    expect(prodVersionNotification?.name).to.equal(template.name);
+    expect(prodVersionNotification?.description).to.equal(template.description);
 
     const prodVersionMessage = await messageTemplateRepository.findOne({
       _environmentId: prodEnv._id,
       _parentId: message._templateId,
     });
 
-    expect(message.template.name).to.equal(prodVersionMessage.name);
-    expect(message.template.subject).to.equal(prodVersionMessage.subject);
-    expect(message.template.type).to.equal(prodVersionMessage.type);
-    expect(message.template.content).to.deep.equal(prodVersionMessage.content);
-    expect(message.template.active).to.equal(prodVersionMessage.active);
+    expect(message?.template?.name).to.equal(prodVersionMessage?.name);
+    expect(message?.template?.subject).to.equal(prodVersionMessage?.subject);
+    expect(message?.template?.type).to.equal(prodVersionMessage?.type);
+    expect(message?.template?.content).to.deep.equal(prodVersionMessage?.content);
+    expect(message?.template?.active).to.equal(prodVersionMessage?.active);
   });
 
   it('should create a valid notification', async () => {
@@ -191,12 +195,12 @@ describe('Create Notification template - /notification-templates (POST)', async
     expect(template.name).to.equal(testTemplate.name);
     expect(template.draft).to.equal(true);
     expect(template.active).to.equal(false);
-    expect(isSameDay(new Date(template.createdAt), new Date()));
+    expect(isSameDay(new Date(template?.createdAt ? template?.createdAt : '1970'), new Date()));
 
     expect(template.steps.length).to.equal(1);
-    expect(template.steps[0].template.type).to.equal(ChannelTypeEnum.IN_APP);
-    expect(template.steps[0].template.content).to.equal(testTemplate.steps[0].template.content);
-    expect(template.steps[0].template.cta.data.url).to.equal(testTemplate.steps[0].template.cta.data.url);
+    expect(template?.steps?.[0]?.template?.type).to.equal(ChannelTypeEnum.IN_APP);
+    expect(template?.steps?.[0]?.template?.content).to.equal(testTemplate?.steps?.[0]?.template?.content);
+    expect(template?.steps?.[0]?.template?.cta?.data.url).to.equal(testTemplate?.steps?.[0]?.template?.cta?.data.url);
   });
 
   it('should create event trigger', async () => {
@@ -394,6 +398,35 @@ describe('Create Notification template - /notification-templates (POST)', async
     expect(result.credentials.senderName).to.equal('senderName');
   });
 
+  it('should not promote deleted template that is not existing in prod', async function () {
+    const testTemplate: Partial<CreateNotificationTemplateRequestDto> = {
+      name: 'test email template',
+      description: 'This is a test description',
+      tags: ['test-tag'],
+      notificationGroupId: session.notificationGroups[0]._id,
+      steps: [],
+    };
+
+    const { body } = await session.testAgent.post(`/v1/notification-templates`).send(testTemplate);
+
+    expect(body.data).to.be.ok;
+    const template: INotificationTemplate = body.data;
+
+    await session.testAgent.delete(`/v1/notification-templates/${template._id}`).send();
+
+    const change = await changeRepository.findOne({ _environmentId: session.environment._id, _entityId: template._id });
+    await session.testAgent.post(`/v1/changes/${change?._id}/apply`);
+
+    const prodEnv = await getProductionEnvironment();
+
+    const prodVersionNotification = await notificationTemplateRepository.findOne({
+      _environmentId: prodEnv._id,
+      _parentId: template._id,
+    });
+
+    expect(prodVersionNotification).to.equal(null);
+  });
+
   async function getProductionEnvironment() {
     return await environmentRepository.findOne({
       _parentId: session.environment._id,
diff --git a/apps/api/src/app/notification-template/usecases/create-notification-template/create-notification-template.usecase.ts b/apps/api/src/app/notification-template/usecases/create-notification-template/create-notification-template.usecase.ts
index cc9d394843a..ae8c66f7165 100644
--- a/apps/api/src/app/notification-template/usecases/create-notification-template/create-notification-template.usecase.ts
+++ b/apps/api/src/app/notification-template/usecases/create-notification-template/create-notification-template.usecase.ts
@@ -91,6 +91,7 @@ export class CreateNotificationTemplate {
         shouldStopOnFail: message.shouldStopOnFail,
         replyCallback: message.replyCallback,
         uuid: message.uuid,
+        name: message.name,
       });
 
       if (stepId) {
diff --git a/apps/api/src/app/notification-template/usecases/update-notification-template/update-notification-template.usecase.ts b/apps/api/src/app/notification-template/usecases/update-notification-template/update-notification-template.usecase.ts
index b54152a971b..69c7111c03d 100644
--- a/apps/api/src/app/notification-template/usecases/update-notification-template/update-notification-template.usecase.ts
+++ b/apps/api/src/app/notification-template/usecases/update-notification-template/update-notification-template.usecase.ts
@@ -283,6 +283,10 @@ export class UpdateNotificationTemplate {
       partialNotificationStep.uuid = message.uuid;
     }
 
+    if (message.name) {
+      partialNotificationStep.name = message.name;
+    }
+
     return partialNotificationStep;
   }
 
diff --git a/apps/api/src/app/partner-integrations/usecases/complete-vercel-integration/complete-vercel-integration.usecase.ts b/apps/api/src/app/partner-integrations/usecases/complete-vercel-integration/complete-vercel-integration.usecase.ts
index d708319499b..989817e65b1 100644
--- a/apps/api/src/app/partner-integrations/usecases/complete-vercel-integration/complete-vercel-integration.usecase.ts
+++ b/apps/api/src/app/partner-integrations/usecases/complete-vercel-integration/complete-vercel-integration.usecase.ts
@@ -1,7 +1,7 @@
 import { HttpService } from '@nestjs/axios';
-import { Inject, Injectable } from '@nestjs/common';
+import { Injectable } from '@nestjs/common';
 import { lastValueFrom } from 'rxjs';
-import { EnvironmentRepository, EnvironmentEntity, OrganizationRepository } from '@novu/dal';
+import { EnvironmentEntity, EnvironmentRepository, OrganizationRepository } from '@novu/dal';
 import { AnalyticsService } from '@novu/application-generic';
 
 import { CompleteVercelIntegrationCommand } from './complete-vercel-integration.command';
@@ -79,18 +79,15 @@ export class CompleteVercelIntegration {
   }
 
   private mapProjectKeys(envData: EnvironmentEntity[], projectData: Record<string, string[]>) {
-    const mappedData = envData.reduce<Record<string, MapProjectkeys>>((acc, curr) => {
-      const newData = {
+    return envData.reduce<Record<string, MapProjectkeys>>((acc, curr) => {
+      acc[curr._organizationId] = {
         privateKey: curr.apiKeys[0].key,
         clientKey: curr.identifier,
         projectIds: projectData[curr._organizationId],
       };
-      acc[curr._organizationId] = newData;
 
       return acc;
     }, {});
-
-    return mappedData;
   }
 
   private async setEnvironments({ clientKey, projectIds, privateKey, teamId, token }: ISetEnvironment): Promise<void> {
@@ -99,6 +96,12 @@ export class CompleteVercelIntegration {
     const type = 'encrypted';
 
     const apiKeys = [
+      {
+        target,
+        type,
+        value: clientKey,
+        key: 'NEXT_PUBLIC_NOVU_CLIENT_APP_ID',
+      },
       {
         target,
         type,
diff --git a/apps/api/src/app/partner-integrations/usecases/update-vercel-configuration/update-vercel-configuration.usecase.ts b/apps/api/src/app/partner-integrations/usecases/update-vercel-configuration/update-vercel-configuration.usecase.ts
index 29510ccad6c..8c84769d03e 100644
--- a/apps/api/src/app/partner-integrations/usecases/update-vercel-configuration/update-vercel-configuration.usecase.ts
+++ b/apps/api/src/app/partner-integrations/usecases/update-vercel-configuration/update-vercel-configuration.usecase.ts
@@ -139,20 +139,18 @@ export class UpdateVercelConfiguration {
     projectDetails: NewAndUpdatedProjectData
   ) {
     const { addProjectIds, updateProjectDetails } = projectDetails;
-    const mappedData = envData.reduce<Record<string, MapProjectkeys>>((acc, curr) => {
+
+    return envData.reduce<Record<string, MapProjectkeys>>((acc, curr) => {
       const projectIds = projectData[curr._organizationId];
-      const newData = {
+      acc[curr._organizationId] = {
         privateKey: curr.apiKeys[0].key,
         clientKey: curr.identifier,
         updateProjectDetails: updateProjectDetails.filter((detail) => projectIds.includes(detail.projectId)),
         addProjectIds: projectIds.filter((id) => addProjectIds.includes(id)),
       };
-      acc[curr._organizationId] = newData;
 
       return acc;
     }, {});
-
-    return mappedData;
   }
 
   private async setEnvironmentVariables({
@@ -179,6 +177,12 @@ export class UpdateVercelConfiguration {
         value: privateKey,
         key: 'NOVU_API_SECRET',
       },
+      {
+        target,
+        type,
+        value: clientKey,
+        key: 'NEXT_PUBLIC_NOVU_CLIENT_APP_ID',
+      },
     ];
 
     await Promise.all(
diff --git a/apps/api/src/app/shared/dtos/notification-step.ts b/apps/api/src/app/shared/dtos/notification-step.ts
index 7be65d84509..e070905a532 100644
--- a/apps/api/src/app/shared/dtos/notification-step.ts
+++ b/apps/api/src/app/shared/dtos/notification-step.ts
@@ -43,6 +43,9 @@ export class NotificationStep {
   @ApiPropertyOptional()
   uuid?: string;
 
+  @ApiPropertyOptional()
+  name?: string;
+
   @ApiPropertyOptional()
   @ApiProperty()
   _templateId?: string;
diff --git a/apps/api/src/app/shared/dtos/pagination-request.ts b/apps/api/src/app/shared/dtos/pagination-request.ts
new file mode 100644
index 00000000000..79c500df04d
--- /dev/null
+++ b/apps/api/src/app/shared/dtos/pagination-request.ts
@@ -0,0 +1,24 @@
+import { ApiPropertyOptional } from '@nestjs/swagger';
+
+export type Constructor<I> = new (...args: any[]) => I;
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export function PaginationRequestDto(defaultLimit = 10, maxLimit = 100): Constructor<any> {
+  class PaginationRequest {
+    @ApiPropertyOptional({
+      type: Number,
+      required: false,
+    })
+    page?: number = 0;
+
+    @ApiPropertyOptional({
+      type: Number,
+      required: false,
+      default: defaultLimit,
+      maximum: maxLimit,
+    })
+    limit?: number = 10;
+  }
+
+  return PaginationRequest;
+}
diff --git a/apps/api/src/app/shared/dtos/pagination-response.ts b/apps/api/src/app/shared/dtos/pagination-response.ts
new file mode 100644
index 00000000000..5b5b023e36e
--- /dev/null
+++ b/apps/api/src/app/shared/dtos/pagination-response.ts
@@ -0,0 +1,24 @@
+import { ApiProperty } from '@nestjs/swagger';
+
+export class PaginatedResponseDto<T> {
+  @ApiProperty({
+    description: 'The current page of the paginated response',
+  })
+  page: number;
+
+  @ApiProperty({
+    description: 'Total count of items matching the query',
+  })
+  totalCount: number;
+
+  @ApiProperty({
+    description: 'Number of items on each page',
+  })
+  pageSize: number;
+
+  @ApiProperty({
+    description: 'The list of items matching the query',
+    isArray: true,
+  })
+  data: T[];
+}
diff --git a/apps/api/src/app/shared/framework/paginated-ok-response.decorator.ts b/apps/api/src/app/shared/framework/paginated-ok-response.decorator.ts
new file mode 100644
index 00000000000..077274a0267
--- /dev/null
+++ b/apps/api/src/app/shared/framework/paginated-ok-response.decorator.ts
@@ -0,0 +1,24 @@
+import { ApiExtraModels, ApiOkResponse, getSchemaPath } from '@nestjs/swagger';
+import { PaginatedResponseDto } from '../dtos/pagination-response';
+import { Type, applyDecorators } from '@nestjs/common';
+
+// eslint-disable-next-line @typescript-eslint/naming-convention
+export const ApiOkPaginatedResponse = <DataDto extends Type<unknown>>(dataDto: DataDto) =>
+  applyDecorators(
+    ApiExtraModels(PaginatedResponseDto, dataDto),
+    ApiOkResponse({
+      schema: {
+        allOf: [
+          { $ref: getSchemaPath(PaginatedResponseDto) },
+          {
+            properties: {
+              data: {
+                type: 'array',
+                items: { $ref: getSchemaPath(dataDto) },
+              },
+            },
+          },
+        ],
+      },
+    })
+  );
diff --git a/apps/api/src/app/shared/shared.module.ts b/apps/api/src/app/shared/shared.module.ts
index 7129176bab5..5f3aa37a5b5 100644
--- a/apps/api/src/app/shared/shared.module.ts
+++ b/apps/api/src/app/shared/shared.module.ts
@@ -78,15 +78,17 @@ const dalService = new DalService();
 
 const inMemoryProviderService = {
   provide: InMemoryProviderService,
-  useFactory: () => {
-    return new InMemoryProviderService();
+  useFactory: (enableAutoPipelining?: boolean) => {
+    return new InMemoryProviderService(enableAutoPipelining);
   },
 };
 
 const cacheService = {
   provide: CacheService,
   useFactory: () => {
-    const factoryInMemoryProviderService = inMemoryProviderService.useFactory();
+    // TODO: Temporary to test in Dev. Should be removed.
+    const enableAutoPipelining = process.env.REDIS_CACHE_ENABLE_AUTOPIPELINING === 'true';
+    const factoryInMemoryProviderService = inMemoryProviderService.useFactory(enableAutoPipelining);
 
     return new CacheService(factoryInMemoryProviderService);
   },
diff --git a/apps/api/src/app/subscribers/dtos/get-subscribers.dto.ts b/apps/api/src/app/subscribers/dtos/get-subscribers.dto.ts
new file mode 100644
index 00000000000..05a64f20e95
--- /dev/null
+++ b/apps/api/src/app/subscribers/dtos/get-subscribers.dto.ts
@@ -0,0 +1,8 @@
+import { PaginationRequestDto } from '../../shared/dtos/pagination-request';
+
+const LIMIT = {
+  DEFAULT: 10,
+  MAX: 100,
+};
+
+export class GetSubscribersDto extends PaginationRequestDto(LIMIT.DEFAULT, LIMIT.MAX) {}
diff --git a/apps/api/src/app/subscribers/dtos/subscriber-response.dto.ts b/apps/api/src/app/subscribers/dtos/subscriber-response.dto.ts
index 7ad5b180ffe..af76e400186 100644
--- a/apps/api/src/app/subscribers/dtos/subscriber-response.dto.ts
+++ b/apps/api/src/app/subscribers/dtos/subscriber-response.dto.ts
@@ -1,23 +1,11 @@
 import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';
-import { ChannelCredentials } from '../../shared/dtos/subscriber-channel';
-import { ChatProviderIdEnum, PushProviderIdEnum } from '@novu/shared';
+import { UpdateSubscriberChannelRequestDto } from './update-subscriber-channel-request.dto';
 
-class ChannelSettings {
+class ChannelSettings extends UpdateSubscriberChannelRequestDto {
   @ApiProperty({
     description: 'Id of the integration that is used for this channel',
   })
   _integrationId: string;
-
-  @ApiProperty({
-    enum: { ...ChatProviderIdEnum, ...PushProviderIdEnum },
-    description: 'Subscriber credentials for channel',
-  })
-  providerId: ChatProviderIdEnum | PushProviderIdEnum;
-
-  @ApiProperty({
-    description: 'Subscriber credentials for channel',
-  })
-  credentials: ChannelCredentials;
 }
 
 export class SubscriberResponseDto {
diff --git a/apps/api/src/app/subscribers/dtos/subscribers-response.dto.ts b/apps/api/src/app/subscribers/dtos/subscribers-response.dto.ts
index 26497dae75e..7b75e26fa50 100644
--- a/apps/api/src/app/subscribers/dtos/subscribers-response.dto.ts
+++ b/apps/api/src/app/subscribers/dtos/subscribers-response.dto.ts
@@ -1,26 +1,4 @@
-import { ApiProperty } from '@nestjs/swagger';
 import { SubscriberResponseDto } from './subscriber-response.dto';
+import { PaginatedResponseDto } from '../../shared/dtos/pagination-response';
 
-export class SubscribersResponseDto {
-  @ApiProperty({
-    description: 'The current page of the paginated response',
-  })
-  page: number;
-
-  @ApiProperty({
-    description: 'Total count of subscribers matching the query',
-  })
-  totalCount: number;
-
-  @ApiProperty({
-    description: 'Number of subscribers on each page',
-  })
-  pageSize: number;
-
-  @ApiProperty({
-    description: 'The list of subscribers matching the query',
-    isArray: true,
-    type: SubscriberResponseDto,
-  })
-  data: SubscriberResponseDto[];
-}
+export class SubscribersResponseDto extends PaginatedResponseDto<SubscriberResponseDto> {}
diff --git a/apps/api/src/app/subscribers/dtos/update-subscriber-channel-request.dto.ts b/apps/api/src/app/subscribers/dtos/update-subscriber-channel-request.dto.ts
index 83038ded80d..8c07241cabc 100644
--- a/apps/api/src/app/subscribers/dtos/update-subscriber-channel-request.dto.ts
+++ b/apps/api/src/app/subscribers/dtos/update-subscriber-channel-request.dto.ts
@@ -1,5 +1,5 @@
 import { ApiProperty } from '@nestjs/swagger';
-import { IsDefined, IsObject, IsOptional, IsString } from 'class-validator';
+import { IsDefined, IsObject, IsString } from 'class-validator';
 import { ChatProviderIdEnum, PushProviderIdEnum } from '@novu/shared';
 import { ChannelCredentials } from '../../shared/dtos/subscriber-channel';
 
diff --git a/apps/api/src/app/subscribers/subscribers.controller.ts b/apps/api/src/app/subscribers/subscribers.controller.ts
index 0d7743b97e8..7580af4624d 100644
--- a/apps/api/src/app/subscribers/subscribers.controller.ts
+++ b/apps/api/src/app/subscribers/subscribers.controller.ts
@@ -26,7 +26,6 @@ import {
   CreateSubscriberRequestDto,
   DeleteSubscriberResponseDto,
   SubscriberResponseDto,
-  SubscribersResponseDto,
   UpdateSubscriberChannelRequestDto,
   UpdateSubscriberRequestDto,
 } from './dtos';
@@ -66,6 +65,9 @@ import {
 } from './usecases/update-subscriber-online-flag';
 import { MarkMessageAsRequestDto } from '../widgets/dtos/mark-message-as-request.dto';
 import { MarkMessageActionAsSeenDto } from '../widgets/dtos/mark-message-action-as-seen.dto';
+import { ApiOkPaginatedResponse } from '../shared/framework/paginated-ok-response.decorator';
+import { PaginatedResponseDto } from '../shared/dtos/pagination-response';
+import { GetSubscribersDto } from './dtos/get-subscribers.dto';
 
 @Controller('/subscribers')
 @ApiTags('Subscribers')
@@ -89,25 +91,21 @@ export class SubscribersController {
   @Get('')
   @ExternalApiAccessible()
   @UseGuards(JwtAuthGuard)
-  @ApiOkResponse({
-    type: SubscribersResponseDto,
-  })
+  @ApiOkPaginatedResponse(SubscriberResponseDto)
   @ApiOperation({
     summary: 'Get subscribers',
-    description: 'Returns a list of subscribers, could paginated using the `page` query parameter',
+    description: 'Returns a list of subscribers, could paginated using the `page` and `limit` query parameter',
   })
-  @ApiQuery({ name: 'page', type: Number, required: false, description: 'The page to fetch, defaults to 0' })
   async getSubscribers(
     @UserSession() user: IJwtPayload,
-    @Query('page') page = 0,
-    @Query('limit') limit = 10
-  ): Promise<SubscribersResponseDto> {
+    @Query() query: GetSubscribersDto
+  ): Promise<PaginatedResponseDto<SubscriberResponseDto>> {
     return await this.getSubscribersUsecase.execute(
       GetSubscribersCommand.create({
         organizationId: user.organizationId,
         environmentId: user.environmentId,
-        page: page ? Number(page) : 0,
-        limit: limit ? Number(limit) : 10,
+        page: query.page ? Number(query.page) : 0,
+        limit: query.limit ? Number(query.limit) : 10,
       })
     );
   }
@@ -328,9 +326,7 @@ export class SubscribersController {
   @ApiOperation({
     summary: 'Get a notification feed for a particular subscriber',
   })
-  @ApiOkResponse({
-    type: MessagesResponseDto,
-  })
+  @ApiOkPaginatedResponse(MessageResponseDto)
   @ApiQuery({
     name: 'seen',
     type: Boolean,
@@ -347,7 +343,7 @@ export class SubscribersController {
     @Query('page') page?: string,
     @Query('feedIdentifier') feedId?: string,
     @Query() query: StoreQuery = {}
-  ) {
+  ): Promise<PaginatedResponseDto<MessageResponseDto>> {
     let feedsQuery: string[] | undefined;
     if (feedId) {
       feedsQuery = Array.isArray(feedId) ? feedId : [feedId];
@@ -472,7 +468,7 @@ export class SubscribersController {
     @Param('type') type: ButtonTypeEnum,
     @Body() body: MarkMessageActionAsSeenDto,
     @Param('subscriberId') subscriberId: string
-  ): Promise<MessageEntity> {
+  ): Promise<MessageResponseDto> {
     return await this.updateMessageActionsUsecase.execute(
       UpdateMessageActionsCommand.create({
         organizationId: user.organizationId,
diff --git a/apps/api/src/app/widgets/dtos/message-response.dto.ts b/apps/api/src/app/widgets/dtos/message-response.dto.ts
index f0e8a8fcb93..a89064328ab 100644
--- a/apps/api/src/app/widgets/dtos/message-response.dto.ts
+++ b/apps/api/src/app/widgets/dtos/message-response.dto.ts
@@ -135,6 +135,7 @@ export class MessageResponseDto {
   @ApiProperty()
   transactionId: string;
 
+  @ApiProperty()
   subject?: string;
 
   @ApiProperty({
diff --git a/apps/api/src/app/widgets/usecases/mark-message-as/mark-message-as.usecase.ts b/apps/api/src/app/widgets/usecases/mark-message-as/mark-message-as.usecase.ts
index c9eac880301..1bebb6dc750 100644
--- a/apps/api/src/app/widgets/usecases/mark-message-as/mark-message-as.usecase.ts
+++ b/apps/api/src/app/widgets/usecases/mark-message-as/mark-message-as.usecase.ts
@@ -67,15 +67,17 @@ export class MarkMessageAs {
   }
 
   private async updateServices(command: MarkMessageAsCommand, subscriber, messages, marked: string) {
-    const admin = await this.memberRepository.getOrganizationAdminAccount(command.organizationId);
-    const count = await this.messageRepository.getCount(command.environmentId, subscriber._id, ChannelTypeEnum.IN_APP, {
-      [marked]: false,
-    });
+    const [admin, count] = await Promise.all([
+      this.memberRepository.getOrganizationAdminAccount(command.organizationId),
+      this.messageRepository.getCount(command.environmentId, subscriber._id, ChannelTypeEnum.IN_APP, {
+        [marked]: false,
+      }),
+    ]);
 
     this.updateSocketCount(subscriber, count, marked);
 
-    for (const message of messages) {
-      if (admin) {
+    if (admin) {
+      for (const message of messages) {
         this.analyticsService.track(`Mark as ${marked} - [Notification Center]`, admin._userId, {
           _subscriber: message._subscriberId,
           _organization: command.organizationId,
diff --git a/apps/inbound-mail/.eslintrc.js b/apps/inbound-mail/.eslintrc.js
index 52c29b96e7c..54639bcc25e 100644
--- a/apps/inbound-mail/.eslintrc.js
+++ b/apps/inbound-mail/.eslintrc.js
@@ -1,4 +1,10 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
   rules: {},
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
 };
diff --git a/apps/web/cypress/tests/changes.spec.ts b/apps/web/cypress/tests/changes.spec.ts
index f6ba72d144f..d630f99fe25 100644
--- a/apps/web/cypress/tests/changes.spec.ts
+++ b/apps/web/cypress/tests/changes.spec.ts
@@ -1,3 +1,6 @@
+import { dragAndDrop } from './notification-editor';
+import { goBack } from './notification-editor/index';
+
 describe('Changes Screen', function () {
   beforeEach(function () {
     cy.initializeSession().as('session');
@@ -59,22 +62,37 @@ describe('Changes Screen', function () {
     cy.getByTestId('promote-btn').should('be.disabled');
   });
 
-  it('should promote all changes with promote all btn', function () {
+  it('should promote all changes with promote all btn 2', function () {
+    cy.intercept('**/v1/changes?promoted=false&page=0&limit=10').as('changes');
+    cy.intercept('**/v1/changes/bulk/apply').as('bulk-apply');
+    cy.intercept('**/notification-templates**').as('notificationTemplates');
+
     createNotification();
+    cy.waitForNetworkIdle(500);
     createNotification();
+    cy.waitForNetworkIdle(500);
 
-    cy.visit('/changes');
-    cy.getByTestId('pending-changes-table').find('tbody tr').should('have.length', 2);
-
-    cy.getByTestId('promote-all-btn').click({ force: true });
+    cy.waitLoadTemplatePage(() => {
+      cy.visit('/changes');
+      cy.waitForNetworkIdle(500);
+      cy.wait(['@changes']);
+      cy.awaitAttachedGetByTestId('pending-changes-table').find('tbody tr').should('have.length', 2);
+      cy.wait(['@changes']);
+      cy.intercept('**/v1/changes?promoted=false&page=0&limit=10').as('changes-2');
+      cy.awaitAttachedGetByTestId('promote-all-btn').click({ force: true });
+      cy.wait(['@bulk-apply']);
+      cy.wait(['@changes-2']);
+      cy.wait(['@changes-2']);
 
-    cy.getByTestId('pending-changes-table').find('tbody tr').should('not.exist');
+      cy.awaitAttachedGetByTestId('pending-changes-table').find('tbody tr').should('not.exist');
 
-    switchEnvironment('Production');
+      switchEnvironment('Production');
+      cy.waitForNetworkIdle(500);
+    });
 
     cy.visit('/templates');
-    cy.waitForNetworkIdle(500);
-    cy.getByTestId('notifications-template').find('tbody tr').should('have.length', 2);
+    cy.wait('@notificationTemplates');
+    cy.awaitAttachedGetByTestId('notifications-template').find('tbody tr').should('have.length', 2);
   });
 });
 
@@ -84,28 +102,30 @@ function switchEnvironment(environment: 'Production' | 'Development') {
 }
 
 function createNotification() {
-  const dataTransfer = new DataTransfer();
+  cy.intercept('**/notification-groups').as('getNotificationGroups');
   cy.visit('/templates/create');
   cy.waitForNetworkIdle(500);
 
-  cy.getByTestId('title').type('Test Notification Title');
-  cy.getByTestId('description').type('This is a test description for a test title');
-  cy.get('body').click();
+  cy.getByTestId('title').clear().type('Test Notification Title');
+
+  cy.getByTestId('settings-page').click();
+  cy.waitForNetworkIdle(500);
 
-  cy.getByTestId('workflowButton').click();
+  cy.getByTestId('description').clear().type('This is a test description for a test title');
+  cy.get('body').click();
 
-  cy.getByTestId('dnd-emailSelector').trigger('dragstart', { dataTransfer });
+  goBack();
 
-  cy.get('.react-flow__node-addNode').trigger('drop', { dataTransfer });
+  dragAndDrop('email');
+  cy.waitForNetworkIdle(500);
 
-  cy.getByTestId('node-emailSelector').parent().click({ force: true });
-  cy.getByTestId('edit-template-channel').click({ force: true });
+  cy.clickWorkflowNode(`node-emailSelector`);
+  cy.waitForNetworkIdle(500);
 
   cy.getByTestId('emailSubject').type('this is email subject');
 
+  goBack();
   cy.getByTestId('notification-template-submit-btn').click();
-  cy.waitForNetworkIdle(500);
-  cy.getByTestId('trigger-snippet-btn').click();
 }
 
 function promoteNotification() {
diff --git a/apps/web/cypress/tests/digest-playground.spec.ts b/apps/web/cypress/tests/digest-playground.spec.ts
index 48b6542cac5..21de8c6b14a 100644
--- a/apps/web/cypress/tests/digest-playground.spec.ts
+++ b/apps/web/cypress/tests/digest-playground.spec.ts
@@ -50,7 +50,6 @@ describe('Digest Playground Workflow Page', function () {
 
     // in the template workflow editor
     cy.url().should('include', '/templates/edit');
-    cy.url().should('include', '?tour=digest');
 
     // check the digest hint
     cy.getByTestId('digest-workflow-tooltip').contains('Set-up time interval');
@@ -64,8 +63,8 @@ describe('Digest Playground Workflow Page', function () {
     // check if has digest step
     cy.getByTestId('node-digestSelector').should('be.visible');
     // check if digest step settings opened
-    cy.getByTestId('step-properties-side-menu').should('be.visible');
-    cy.getByTestId('step-properties-side-menu').contains('Digest Properties');
+    cy.getByTestId('step-page-wrapper').should('be.visible');
+    cy.getByTestId('step-page-wrapper').contains('Digest');
 
     // click next on hint
     cy.getByTestId('digest-workflow-tooltip-primary-button').contains('Next').click();
@@ -79,11 +78,9 @@ describe('Digest Playground Workflow Page', function () {
     cy.getByTestId('digest-workflow-tooltip-skip-button').contains('Skip tour');
     cy.getByTestId('digest-workflow-tooltip-dots-navigation').should('be.visible');
 
-    // check if has email step
-    cy.getByTestId('node-digestSelector').should('be.visible');
     // check if email step settings opened
-    cy.getByTestId('step-properties-side-menu').should('be.visible');
-    cy.getByTestId('step-properties-side-menu').contains('Email Properties');
+    cy.getByTestId('step-page-wrapper').should('be.visible');
+    cy.getByTestId('step-page-wrapper').contains('Email');
 
     // click next on hint
     cy.getByTestId('digest-workflow-tooltip-primary-button').contains('Next').click();
@@ -98,7 +95,8 @@ describe('Digest Playground Workflow Page', function () {
     cy.getByTestId('digest-workflow-tooltip-dots-navigation').should('be.visible');
 
     // the step settings should be hidden
-    cy.getByTestId('drag-side-menu').contains('Steps to add');
+    cy.getByTestId('step-page-wrapper').should('be.visible');
+    cy.getByTestId('step-page-wrapper').contains('Trigger');
 
     // click got it should hide the hint
     cy.getByTestId('digest-workflow-tooltip-primary-button').contains('Got it').click();
@@ -123,7 +121,6 @@ describe('Digest Playground Workflow Page', function () {
 
     // in the template workflow editor
     cy.url().should('include', '/templates/edit');
-    cy.url().should('include', '?tour=digest');
 
     // check the digest hint
     cy.getByTestId('digest-workflow-tooltip').contains('Set-up time interval');
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 25b673127d5..59cfb57d1ef 100644
--- a/apps/web/cypress/tests/notification-editor/create-notification.spec.ts
+++ b/apps/web/cypress/tests/notification-editor/create-notification.spec.ts
@@ -9,36 +9,33 @@ describe('Creation functionality', function () {
     cy.waitLoadTemplatePage(() => {
       cy.visit('/templates/create');
     });
-    cy.getByTestId('title').type('Test Notification Title');
+    cy.getByTestId('settings-page').click();
+    cy.waitForNetworkIdle(500);
+    cy.getByTestId('title').clear().first().type('Test Notification Title');
     cy.getByTestId('description').type('This is a test description for a test title');
     cy.get('body').click();
     cy.getByTestId('trigger-code-snippet').should('not.exist');
     cy.getByTestId('groupSelector').should('have.value', 'General');
 
     addAndEditChannel('inApp');
+    cy.waitForNetworkIdle(500);
 
     cy.get('.ace_text-input').first().type('{{firstName}} someone assigned you to {{taskName}}', {
       parseSpecialCharSequences: false,
       force: true,
     });
     cy.getByTestId('inAppRedirect').type('/example/test');
-    cy.getByTestId('notification-template-submit-btn').click();
 
-    cy.getByTestId('success-trigger-modal').should('be.visible');
-    cy.getByTestId('success-trigger-modal').getByTestId('trigger-code-snippet').contains('test-notification');
-    cy.getByTestId('success-trigger-modal')
-      .getByTestId('trigger-code-snippet')
-      .contains("import { Novu } from '@novu/node'");
+    goBack();
+    cy.getByTestId('notification-template-submit-btn').click();
+    cy.getByTestId('get-snippet-btn').click();
+    cy.getByTestId('trigger-code-snippet').should('be.visible');
+    cy.getByTestId('trigger-code-snippet').contains('test-notification-title');
+    cy.getByTestId('trigger-code-snippet').contains("import { Novu } from '@novu/node'");
 
     cy.get('.mantine-Tabs-tabsList').contains('Curl').click();
-    cy.getByTestId('success-trigger-modal')
-      .getByTestId('trigger-curl-snippet')
-      .contains("--header 'Authorization: ApiKey");
-    cy.getByTestId('success-trigger-modal').getByTestId('trigger-curl-snippet').contains('taskName');
-
-    cy.getByTestId('trigger-snippet-btn').click();
-
-    cy.location('pathname').should('equal', '/templates');
+    cy.getByTestId('trigger-curl-snippet').contains("--header 'Authorization: ApiKey");
+    cy.getByTestId('trigger-curl-snippet').contains('taskName');
   });
 
   it('should create multiline in-app notification, send it and receive', function () {
@@ -46,11 +43,14 @@ describe('Creation functionality', function () {
       cy.visit('/templates/create');
     });
 
-    cy.getByTestId('title').type('Test Notification Title');
+    cy.getByTestId('settings-page').click();
+
+    cy.getByTestId('title').first().clear().type('Test Notification Title');
     cy.getByTestId('description').type('This is a test description for a test title');
     cy.get('body').click();
 
     addAndEditChannel('inApp');
+    cy.waitForNetworkIdle(500);
 
     // put the multiline notification message
     cy.get('.ace_text-input')
@@ -63,11 +63,9 @@ describe('Creation functionality', function () {
         force: true,
       });
     cy.getByTestId('inAppRedirect').type('/example/test');
-    cy.getByTestId('notification-template-submit-btn').click();
 
-    cy.getByTestId('trigger-snippet-btn').click();
-
-    cy.location('pathname').should('equal', '/templates');
+    goBack();
+    cy.getByTestId('notification-template-submit-btn').click();
 
     // trigger the notification
     cy.task('createNotifications', {
@@ -92,11 +90,13 @@ describe('Creation functionality', function () {
     cy.waitLoadTemplatePage(() => {
       cy.visit('/templates/create');
     });
-    cy.getByTestId('title').type('Test Notification Title');
+    cy.getByTestId('settings-page').click();
+    cy.getByTestId('title').clear().first().type('Test Notification Title');
     cy.getByTestId('description').type('This is a test description for a test title');
     cy.get('body').click();
 
     addAndEditChannel('email');
+    cy.waitForNetworkIdle(500);
 
     cy.getByTestId('email-editor').getByTestId('editor-row').click();
     cy.getByTestId('control-add').click();
@@ -180,11 +180,14 @@ describe('Creation functionality', function () {
     cy.waitLoadTemplatePage(() => {
       cy.visit('/templates/create');
     });
-    cy.getByTestId('title').type('Test Notification Title');
+    cy.getByTestId('settings-page').click();
+
+    cy.getByTestId('title').first().clear().type('Test Notification Title');
     cy.getByTestId('description').type('This is a test description for a test title');
     cy.get('body').click();
 
     addAndEditChannel('email');
+    cy.waitForNetworkIdle(500);
 
     cy.getByTestId('email-editor').getByTestId('editor-row').click();
     cy.getByTestId('control-add').click();
@@ -213,23 +216,27 @@ describe('Creation functionality', function () {
 
     cy.getByTestId('emailSubject').type('this is email subject');
 
+    goBack();
     cy.getByTestId('notification-template-submit-btn').click();
-
-    cy.getByTestId('success-trigger-modal').should('be.visible');
-    cy.getByTestId('success-trigger-modal').getByTestId('trigger-code-snippet').contains('test-notification');
-    cy.getByTestId('success-trigger-modal').getByTestId('trigger-code-snippet').contains('firstName:');
-    cy.getByTestId('success-trigger-modal').getByTestId('trigger-code-snippet').contains('customVariable:');
+    cy.getByTestId('get-snippet-btn').click();
+    cy.getByTestId('trigger-code-snippet').should('be.visible');
+    cy.getByTestId('trigger-code-snippet').contains('test-notification-title');
+    cy.getByTestId('trigger-code-snippet').contains('firstName:');
+    cy.getByTestId('trigger-code-snippet').contains('customVariable:');
   });
 
   it('should add digest node', function () {
     cy.waitLoadTemplatePage(() => {
       cy.visit('/templates/create');
     });
-    cy.getByTestId('title').type('Test Notification Title');
+
+    cy.getByTestId('settings-page').click();
+    cy.getByTestId('title').first().clear().type('Test Notification Title');
     cy.getByTestId('description').type('This is a test description for a test title');
     cy.get('body').click();
 
     addAndEditChannel('email');
+    cy.waitForNetworkIdle(500);
 
     cy.getByTestId('email-editor').getByTestId('editor-row').click();
     cy.getByTestId('control-add').click();
@@ -259,54 +266,42 @@ describe('Creation functionality', function () {
     cy.getByTestId('emailSubject').type('this is email subject');
 
     goBack();
+    cy.waitForNetworkIdle(500);
 
     dragAndDrop('digest');
+    cy.waitForNetworkIdle(500);
 
     cy.clickWorkflowNode('node-digestSelector');
+    cy.waitForNetworkIdle(500);
 
-    cy.getByTestId('time-unit').click();
-    cy.get('.mantine-Select-dropdown .mantine-Select-item').contains('Minutes').click();
+    cy.getByTestId('time-unit-minutes').click();
     cy.getByTestId('time-amount').type('20');
     cy.getByTestId('batch-key').type('id');
 
-    cy.getByTestId('digest-type').click();
-    cy.get('.mantine-Select-dropdown .mantine-Select-item').contains('Backoff').click();
+    cy.getByTestId('digest-type').contains('Backoff').click();
 
     cy.getByTestId('backoff-amount').type('20');
 
-    cy.getByTestId('backoff-unit').click();
-    cy.get('.mantine-Select-dropdown .mantine-Select-item').contains('Minutes').click();
-
-    cy.getByTestId('notification-template-submit-btn').click();
-    cy.getByTestId('success-trigger-modal').should('be.visible');
-    cy.getByTestId('trigger-snippet-btn').click();
-
-    cy.intercept('GET', '/v1/notification-templates?page=0&limit=10').as('notification-templates');
-    cy.visit('/templates');
-    cy.wait('@notification-templates');
+    cy.getByTestId('backoff-unit-minutes').click();
 
-    awaitGetContains('tbody', 'Test Notification Title').click({ force: true });
-
-    cy.waitLoadTemplatePage(() => {
-      clickWorkflow();
+    goBack();
 
-      cy.clickWorkflowNode('node-digestSelector');
+    cy.clickWorkflowNode('node-digestSelector');
 
-      cy.getByTestId('time-amount').should('have.value', '20');
-      cy.getByTestId('batch-key').should('have.value', 'id');
-      cy.getByTestId('backoff-amount').should('have.value', '20');
-      cy.getByTestId('time-unit').should('have.value', 'Minutes');
-      cy.getByTestId('digest-type').should('have.value', 'Backoff');
-      cy.getByTestId('backoff-unit').should('have.value', 'Minutes');
-      // cy.getByTestId('updateMode').should('be.checked');
-    });
+    cy.getByTestId('time-amount').should('have.value', '20');
+    cy.getByTestId('batch-key').should('have.value', 'id');
+    cy.getByTestId('backoff-amount').should('have.value', '20');
+    cy.getByTestId('time-unit-minutes').should('be.checked');
+    cy.getByTestId('digest-type').contains('Backoff').should('have.class', 'mantine-SegmentedControl-labelActive');
+    cy.getByTestId('backoff-unit-minutes').should('be.checked');
   });
 
   it('should create and edit group id', function () {
     const template = this.session.templates[0];
     cy.visit('/templates/edit/' + template._id);
     cy.waitForNetworkIdle(500);
-
+    cy.getByTestId('settings-page').click();
+    cy.waitForNetworkIdle(500);
     cy.getByTestId('groupSelector').click();
     cy.getByTestId('groupSelector').clear();
     cy.getByTestId('groupSelector').type('New Test Category');
@@ -315,12 +310,15 @@ describe('Creation functionality', function () {
 
     cy.getByTestId('groupSelector').should('have.value', 'New Test Category');
 
+    goBack();
     cy.getByTestId('notification-template-submit-btn').click();
+    cy.waitForNetworkIdle(500);
 
     cy.visit('/templates');
     cy.getByTestId('template-edit-link');
     cy.visit('/templates/edit/' + template._id);
     cy.waitForNetworkIdle(500);
+    cy.getByTestId('settings-page').click();
     cy.getByTestId('groupSelector').should('have.value', 'New Test Category');
   });
 
@@ -329,7 +327,8 @@ describe('Creation functionality', function () {
       cy.visit('/templates/create');
     });
     fillBasicNotificationDetails('Test Added Delay');
-    clickWorkflow();
+    goBack();
+    cy.waitForNetworkIdle(500);
     cy.getByTestId('button-add').click();
     cy.getByTestId('add-delay-node').click();
     cy.clickWorkflowNode('node-delaySelector');
diff --git a/apps/web/cypress/tests/notification-editor/debugging-test-trigger.spec.ts b/apps/web/cypress/tests/notification-editor/debugging-test-trigger.spec.ts
index 50f8f38cb16..1b4d654affb 100644
--- a/apps/web/cypress/tests/notification-editor/debugging-test-trigger.spec.ts
+++ b/apps/web/cypress/tests/notification-editor/debugging-test-trigger.spec.ts
@@ -1,5 +1,3 @@
-import { addAndEditChannel, clickWorkflow, fillBasicNotificationDetails, goBack } from '.';
-
 describe('Debugging - test trigger', function () {
   beforeEach(function () {
     cy.initializeSession().as('session');
@@ -17,62 +15,23 @@ describe('Debugging - test trigger', function () {
 
     cy.wait('@notification-templates');
 
-    cy.getByTestId('test-workflow-btn').click();
-    cy.getByTestId('test-trigger-modal').should('be.visible');
-    cy.getByTestId('test-trigger-modal').getByTestId('test-trigger-to-param').contains(`"subscriberId": "${userId}"`);
-  });
-
-  it('should create template before opening test trigger modal', function () {
-    cy.intercept('POST', '*/notification-templates').as('createTemplate');
-    const { id: userId, email: userEmail } = this.session.user;
-
-    cy.visit('/templates/create');
-    cy.waitForNetworkIdle(500);
-
-    fillBasicNotificationDetails('Test workflow');
-
-    clickWorkflow();
-
-    addAndEditChannel('email');
-
-    cy.getByTestId('emailSubject').type('Hello world {{newVar}}', {
-      parseSpecialCharSequences: false,
-    });
-
-    goBack();
-
-    cy.getByTestId('test-workflow-btn').click();
-    cy.getByTestId('save-changes-modal').get('button').contains('Save').click();
-
-    cy.wait('@createTemplate').then((res) => {
-      const createdTemplateId = res.response?.body.data._id;
-      cy.get('.mantine-Notification-root').contains('Template saved successfully');
-      cy.getByTestId('test-trigger-modal').should('be.visible');
-      cy.getByTestId('test-trigger-modal').getByTestId('test-trigger-to-param').contains(`"subscriberId": "${userId}"`);
-      cy.getByTestId('test-trigger-modal')
-        .getByTestId('test-trigger-to-param')
-        .should('have.value', `{\n  "subscriberId": "${userId}",\n  "email": "${userEmail}"\n}`);
-
-      cy.getByTestId('test-trigger-modal')
-        .getByTestId('test-trigger-payload-param')
-        .should('have.value', '{\n  "newVar": "<REPLACE_WITH_DATA>"\n}');
-      cy.getByTestId('test-trigger-modal').getByTestId('test-trigger-btn').click();
-      cy.location('pathname').should('equal', `/templates/edit/${createdTemplateId}`);
-    });
+    cy.getByTestId('node-triggerSelector').click({ force: true });
+    cy.getByTestId('step-page-wrapper').should('be.visible');
+    cy.getByTestId('step-page-wrapper').getByTestId('test-trigger-to-param').contains(`"subscriberId": "${userId}"`);
   });
 
   it('should not test trigger on error ', function () {
     const template = this.session.templates[0];
     cy.visit('/templates/edit/' + template._id);
     cy.waitForNetworkIdle(500);
-    cy.getByTestId('test-workflow-btn').click();
-
-    cy.getByTestId('test-trigger-modal').should('be.visible');
-    cy.getByTestId('test-trigger-modal').getByTestId('test-trigger-to-param').type('{backspace}');
-    cy.getByTestId('test-trigger-modal').getByTestId('test-trigger-payload-param').click();
-    cy.getByTestId('test-trigger-modal').getByTestId('test-trigger-btn').should('be.disabled');
-    cy.getByTestId('test-trigger-modal').should('be.visible');
-    cy.getByTestId('test-trigger-modal')
+    cy.getByTestId('node-triggerSelector').click({ force: true });
+
+    cy.getByTestId('step-page-wrapper').should('be.visible');
+    cy.getByTestId('step-page-wrapper').getByTestId('test-trigger-to-param').type('{backspace}');
+    cy.getByTestId('step-page-wrapper').getByTestId('test-trigger-payload-param').click();
+    cy.getByTestId('step-page-wrapper').getByTestId('test-trigger-btn').should('be.disabled');
+    cy.getByTestId('step-page-wrapper').should('be.visible');
+    cy.getByTestId('step-page-wrapper')
       .getByTestId('test-trigger-to-param')
       .should('have.class', 'mantine-JsonInput-invalid');
   });
diff --git a/apps/web/cypress/tests/notification-editor/drag-and-drop.spec.ts b/apps/web/cypress/tests/notification-editor/drag-and-drop.spec.ts
index b32b5d640b3..0ba6b4e9c90 100644
--- a/apps/web/cypress/tests/notification-editor/drag-and-drop.spec.ts
+++ b/apps/web/cypress/tests/notification-editor/drag-and-drop.spec.ts
@@ -1,4 +1,4 @@
-import { clickWorkflow, dragAndDrop, fillBasicNotificationDetails } from '.';
+import { clickWorkflow, dragAndDrop, fillBasicNotificationDetails, goBack } from '.';
 
 describe('Workflow Editor - Drag and Drop', function () {
   beforeEach(function () {
@@ -10,12 +10,11 @@ describe('Workflow Editor - Drag and Drop', function () {
       cy.visit('/templates/create');
     });
     fillBasicNotificationDetails('Test drag and drop channel');
-    clickWorkflow();
+    goBack();
     dragAndDrop('inApp');
     dragAndDrop('inApp');
 
     cy.getByTestId('node-inAppSelector').last().parent().click();
-    cy.getByTestId('edit-template-channel').click();
   });
 
   it('should not be able to drop when not on last node', function () {
@@ -23,33 +22,19 @@ describe('Workflow Editor - Drag and Drop', function () {
       cy.visit('/templates/create');
     });
     fillBasicNotificationDetails('Test only drop on last node');
-    clickWorkflow();
+    goBack();
     dragAndDrop('inApp');
     dragAndDrop('email');
     cy.getByTestId('node-emailSelector').should('not.exist');
     cy.get('.react-flow__node').should('have.length', 3);
   });
 
-  it('should be able to select a step', function () {
-    const template = this.session.templates[0];
-    cy.waitLoadTemplatePage(() => {
-      cy.visit('/templates/edit/' + template._id);
-    });
-    fillBasicNotificationDetails('Test SMS Notification Title');
-    clickWorkflow();
-    cy.clickWorkflowNode(`node-inAppSelector`)?.parent().should('have.class', 'selected');
-    cy.getByTestId(`step-properties-side-menu`).should('be.visible');
-    cy.clickWorkflowNode(`node-triggerSelector`);
-    cy.getByTestId(`drag-side-menu`).should('be.visible');
-    cy.getByTestId(`node-inAppSelector`).parent().should('not.have.class', 'selected');
-  });
-
   it('should add a step with plus button', function () {
     cy.waitLoadTemplatePage(() => {
       cy.visit('/templates/create');
     });
     fillBasicNotificationDetails('Test Plus Button');
-    clickWorkflow();
+    goBack();
     cy.getByTestId('button-add').click();
     cy.getByTestId('add-sms-node').click();
     cy.get('.react-flow__node').should('have.length', 3);
diff --git a/apps/web/cypress/tests/notification-editor/index.ts b/apps/web/cypress/tests/notification-editor/index.ts
index 5455cc31f95..7c6d2dc7846 100644
--- a/apps/web/cypress/tests/notification-editor/index.ts
+++ b/apps/web/cypress/tests/notification-editor/index.ts
@@ -2,9 +2,10 @@ type Channel = 'inApp' | 'email' | 'sms' | 'digest';
 
 export function addAndEditChannel(channel: Channel) {
   cy.waitForNetworkIdle(500);
-  clickWorkflow();
 
+  goBack();
   dragAndDrop(channel);
+  cy.waitForNetworkIdle(500);
   editChannel(channel, true);
 }
 
@@ -17,15 +18,18 @@ export function dragAndDrop(channel: Channel, dropTestId = 'addNodeButton') {
 
 export function editChannel(channel: Channel, last = false) {
   cy.clickWorkflowNode(`node-${channel}Selector`, last);
-  cy.getByTestId('edit-template-channel').click();
 }
 
 export function goBack() {
-  cy.getByTestId('go-back-button').click();
+  cy.getByTestId('close-step-page').click();
+  cy.waitForNetworkIdle(500);
 }
 
 export function fillBasicNotificationDetails(title?: string) {
+  cy.getByTestId('settings-page').click();
   cy.getByTestId('title')
+    .first()
+    .clear()
     .type(title || 'Test Notification Title')
     .blur();
   cy.getByTestId('description').type('This is a test description for a test title').blur();
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 4bf231cc03e..d899e743173 100644
--- a/apps/web/cypress/tests/notification-editor/main-functionality.spec.ts
+++ b/apps/web/cypress/tests/notification-editor/main-functionality.spec.ts
@@ -10,27 +10,35 @@ describe('Workflow Editor - Main Functionality', function () {
       cy.visit('/templates/create');
     });
     fillBasicNotificationDetails('Test not reset data when switching channel types');
-
+    cy.waitForNetworkIdle(500);
     addAndEditChannel('inApp');
+    cy.waitForNetworkIdle(500);
     cy.get('.ace_text-input').first().type('{{firstName}} someone assigned you to {{taskName}}', {
       parseSpecialCharSequences: false,
       force: true,
     });
     goBack();
+    cy.waitForNetworkIdle(500);
 
     dragAndDrop('email');
+    cy.waitForNetworkIdle(500);
     editChannel('email');
+    cy.waitForNetworkIdle(500);
     cy.getByTestId('editable-text-content').clear().type('This text is written from a test {{firstName}}', {
       parseSpecialCharSequences: false,
     });
     cy.getByTestId('emailSubject').type('this is email subject');
     cy.getByTestId('emailPreheader').type('this is email preheader');
+    cy.waitForNetworkIdle(500);
     goBack();
 
     editChannel('inApp');
+    cy.waitForNetworkIdle(500);
     cy.get('.ace_text-layer').first().contains('{{firstName}} someone assigned you to {{taskName}}');
     goBack();
+    cy.waitForNetworkIdle(500);
     editChannel('email');
+    cy.waitForNetworkIdle(500);
 
     cy.getByTestId('editable-text-content').contains('This text is written from a test');
     cy.getByTestId('emailSubject').should('have.value', 'this is email subject');
@@ -43,23 +51,22 @@ describe('Workflow Editor - Main Functionality', function () {
     cy.visit('/templates/edit/' + template._id);
     cy.waitForNetworkIdle(500);
 
-    cy.getByTestId('notification-template-submit-btn').should('be.disabled');
-    cy.getByTestId('title').should('have.value', template.name);
+    cy.getByTestId('settings-page').click();
+    cy.waitForNetworkIdle(500);
+    cy.getByTestId('title').first().should('have.value', template.name);
 
-    addAndEditChannel('inApp');
-    cy.getByTestId('notification-template-submit-btn').should('not.be.disabled');
-    goBack();
     editChannel('inApp');
+    cy.waitForNetworkIdle(500);
 
     cy.get('.ace_text-layer').first().contains('Test content for <b>{{firstName}}</b>');
 
     goBack();
+    cy.waitForNetworkIdle(500);
 
-    cy.getByTestId('settingsButton').click();
     cy.getByTestId('title').clear().type('This is the new notification title');
-    clickWorkflow();
 
     editChannel('inApp', true);
+    cy.waitForNetworkIdle(500);
 
     cy.getByTestId('use-feeds-checkbox').click();
     cy.getByTestId('feed-button-1').click({ force: true });
@@ -72,8 +79,8 @@ describe('Workflow Editor - Main Functionality', function () {
       .type('new content for notification', {
         force: true,
       });
+    goBack();
     cy.getByTestId('notification-template-submit-btn').click();
-    cy.getByTestId('notification-template-submit-btn').should('be.disabled');
 
     cy.visit('/templates');
     cy.waitForNetworkIdle(500);
@@ -88,38 +95,26 @@ describe('Workflow Editor - Main Functionality', function () {
 
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     editChannel('inApp', true);
+    cy.waitForNetworkIdle(500);
 
-    cy.getByTestId('notification-template-submit-btn').should('be.disabled');
     cy.getByTestId('feed-button-1-checked');
     cy.getByTestId('create-feed-input').type('test4');
     cy.getByTestId('add-feed-button').click();
     cy.getByTestId('feed-button-2-checked');
-    cy.getByTestId('notification-template-submit-btn').should('not.be.disabled');
   });
 
   it('should edit email notification', function () {
     const template = this.session.templates[0];
 
     cy.visit('/templates/edit/' + template._id);
+
     cy.waitForNetworkIdle(500);
 
-    // edit email step
-    cy.getByTestId('notification-template-submit-btn').should('be.disabled');
-    clickWorkflow();
     editChannel('email');
-    cy.getByTestId('notification-template-submit-btn').should('be.disabled');
 
     // edit email editor content
     cy.getByTestId('email-editor').getByTestId('editor-row').first().click().type('{selectall}{backspace}Hello world!');
-    cy.getByTestId('notification-template-submit-btn').should('not.be.disabled');
-
-    // go back and update
-    goBack();
-    cy.getByTestId('notification-template-submit-btn').click();
-    cy.getByTestId('notification-template-submit-btn').should('be.disabled');
   });
 
   it('should update notification active status', function () {
@@ -127,14 +122,20 @@ describe('Workflow Editor - Main Functionality', function () {
     cy.visit('/templates/edit/' + template._id);
     cy.waitForNetworkIdle(500);
 
-    cy.getByTestId('active-toggle-switch').get('label').contains('Enabled');
+    cy.getByTestId('settings-page').click();
+    cy.waitForNetworkIdle(500);
+
+    cy.getByTestId('active-toggle-switch').get('label').contains('Active');
     cy.getByTestId('active-toggle-switch').click({ force: true });
-    cy.getByTestId('active-toggle-switch').get('label').contains('Disabled');
+    cy.getByTestId('active-toggle-switch').get('label').contains('Inactive');
 
     cy.visit('/templates/edit/' + template._id);
     cy.waitForNetworkIdle(500);
 
-    cy.getByTestId('active-toggle-switch').get('label').contains('Disabled');
+    cy.getByTestId('settings-page').click();
+    cy.waitForNetworkIdle(500);
+
+    cy.getByTestId('active-toggle-switch').get('label').contains('Inactive');
   });
 
   it('should toggle active states of channels', function () {
@@ -142,9 +143,11 @@ describe('Workflow Editor - Main Functionality', function () {
     cy.waitForNetworkIdle(500);
 
     fillBasicNotificationDetails('Test toggle active states of channels');
+
+    goBack();
     // Enable email from button click
-    clickWorkflow();
     dragAndDrop('email');
+    cy.waitForNetworkIdle(500);
 
     cy.clickWorkflowNode(`node-emailSelector`);
 
@@ -153,7 +156,7 @@ describe('Workflow Editor - Main Functionality', function () {
 
     // enable email selector
     cy.getByTestId(`step-active-switch`).click({ force: true });
-    cy.getByTestId(`close-side-menu-btn`).click();
+    goBack();
 
     dragAndDrop('inApp');
 
@@ -166,54 +169,28 @@ describe('Workflow Editor - Main Functionality', function () {
     cy.visit('/templates/edit/' + template._id);
     cy.waitForNetworkIdle(500);
 
-    cy.getByTestId('triggerCodeSelector').click();
+    cy.getByTestId('get-snippet-btn').click();
     cy.getByTestId('trigger-code-snippet').contains('test-event');
   });
 
-  it('should validate form inputs', function () {
-    cy.visit('/templates/create');
-    cy.waitForNetworkIdle(500);
-
-    cy.getByTestId('description').type('this is a notification template description');
-    cy.getByTestId('notification-template-submit-btn').click();
-    cy.getByTestId('title').should('have.class', 'mantine-TextInput-invalid');
-    fillBasicNotificationDetails('Test SMS Notification Title');
-    clickWorkflow();
-    dragAndDrop('inApp');
-
-    cy.getByTestId('notification-template-submit-btn').click();
-    cy.getByTestId('workflowButton').getByTestId('error-circle').should('be.visible');
-    cy.getByTestId('settingsButton').getByTestId('error-circle').should('be.visible');
-  });
-
   it('should show error on node if message field is missing ', function () {
     cy.visit('/templates/create');
     cy.waitForNetworkIdle(500);
 
     fillBasicNotificationDetails();
-    clickWorkflow();
+    goBack();
     dragAndDrop('email');
-    cy.getByTestId('notification-template-submit-btn').click();
+    cy.waitForNetworkIdle(500);
+
     cy.getByTestId('node-emailSelector').getByTestId('error-circle').should('be.visible');
     editChannel('email');
+    cy.waitForNetworkIdle(500);
     cy.getByTestId('emailSubject').should('have.class', 'mantine-TextInput-invalid');
 
     cy.getByTestId('emailSubject').type('this is email subject');
     goBack();
-    cy.getByTestId('node-emailSelector').getByTestId('error-circle').should('not.exist');
-  });
-
-  it('should fill required settings before workflow btn is clickable', function () {
-    cy.visit('/templates/create');
     cy.waitForNetworkIdle(500);
-
-    cy.getByTestId('description').type('this is a notification template description');
-    clickWorkflow();
-    cy.getByTestId('title').should('have.class', 'mantine-TextInput-invalid');
-    cy.getByTestId('title').type('filled title');
-    clickWorkflow();
-
-    cy.get('.react-flow__node').should('exist');
+    cy.getByTestId('node-emailSelector').getByTestId('error-circle').should('not.exist');
   });
 
   it('should allow uploading a logo from email editor', function () {
@@ -230,11 +207,12 @@ describe('Workflow Editor - Main Functionality', function () {
     cy.waitForNetworkIdle(500);
 
     fillBasicNotificationDetails('Test allow uploading a logo from email editor');
+
     addAndEditChannel('email');
 
     cy.getByTestId('upload-image-button').click();
-
     cy.get('.mantine-Modal-modal button').contains('Yes').click();
+
     cy.location('pathname').should('equal', '/brand');
   });
 
@@ -255,7 +233,8 @@ describe('Workflow Editor - Main Functionality', function () {
     cy.waitForNetworkIdle(500);
 
     fillBasicNotificationDetails('Test support RTL text content');
-    clickWorkflow();
+    goBack();
+    cy.waitForNetworkIdle(500);
     dragAndDrop('email');
     editChannel('email');
 
@@ -270,25 +249,28 @@ describe('Workflow Editor - Main Functionality', function () {
     cy.waitForNetworkIdle(500);
 
     fillBasicNotificationDetails('Test SMS Notification Title');
+    cy.waitForNetworkIdle(500);
+
     addAndEditChannel('sms');
+    cy.waitForNetworkIdle(500);
 
     cy.getByTestId('smsNotificationContent').type('{{firstName}} someone assigned you to {{taskName}}', {
       parseSpecialCharSequences: false,
     });
+    goBack();
+    cy.waitForNetworkIdle(500);
     cy.getByTestId('notification-template-submit-btn').click();
 
-    cy.getByTestId('success-trigger-modal').should('be.visible');
-    cy.getByTestId('success-trigger-modal').getByTestId('trigger-code-snippet').contains('test-sms-notification');
-    cy.getByTestId('success-trigger-modal')
+    cy.getByTestId('get-snippet-btn').click();
+    cy.getByTestId('step-page-wrapper').should('be.visible');
+    cy.getByTestId('step-page-wrapper').getByTestId('trigger-code-snippet').contains('test-sms-notification-title');
+    cy.getByTestId('step-page-wrapper')
       .getByTestId('trigger-code-snippet')
       .contains("import { Novu } from '@novu/node'");
 
-    cy.getByTestId('success-trigger-modal').getByTestId('trigger-code-snippet').contains('taskName');
-
-    cy.getByTestId('success-trigger-modal').getByTestId('trigger-code-snippet').contains('firstName');
+    cy.getByTestId('step-page-wrapper').getByTestId('trigger-code-snippet').contains('taskName');
 
-    cy.getByTestId('trigger-snippet-btn').click();
-    cy.location('pathname').should('equal', '/templates');
+    cy.getByTestId('step-page-wrapper').getByTestId('trigger-code-snippet').contains('firstName');
   });
 
   it('should save HTML template email', function () {
@@ -306,15 +288,8 @@ describe('Workflow Editor - Main Functionality', function () {
       .click();
     cy.get('#codeEditor').type('Hello world code {{name}} <div>Test', { parseSpecialCharSequences: false });
 
-    cy.intercept('GET', '/v1/notification-templates?page=0&limit=10').as('notification-templates');
-    cy.getByTestId('notification-template-submit-btn').click();
-    cy.getByTestId('trigger-snippet-btn').click();
-
-    cy.wait('@notification-templates', { timeout: 60000 });
-    cy.get('tbody').contains('Custom Code HTM').click();
-    cy.waitForNetworkIdle(500);
+    goBack();
 
-    clickWorkflow();
     editChannel('email');
     cy.get('#codeEditor').contains('Hello world code {{name}} <div>Test</div>');
   });
@@ -326,10 +301,8 @@ describe('Workflow Editor - Main Functionality', function () {
     });
 
     fillBasicNotificationDetails();
-    cy.getByTestId('notification-template-submit-btn').click();
 
     cy.wait('@createTemplate').then((res) => {
-      cy.getByTestId('trigger-snippet-btn').click();
       cy.intercept('GET', '/v1/changes?promoted=false').as('unpromoted-changes');
       cy.visit('/changes');
 
@@ -371,7 +344,9 @@ describe('Workflow Editor - Main Functionality', function () {
     cy.waitForNetworkIdle(500);
 
     fillBasicNotificationDetails('In App CTA Button');
+    cy.waitForNetworkIdle(500);
     addAndEditChannel('inApp');
+    cy.waitForNetworkIdle(500);
 
     cy.get('.ace_text-input').first().type('Text content', {
       force: true,
@@ -380,8 +355,9 @@ describe('Workflow Editor - Main Functionality', function () {
     cy.getByTestId('control-add').first().click();
     cy.getByTestId('template-container-click-area').eq(0).click();
 
+    goBack();
+    cy.waitForNetworkIdle(500);
     cy.getByTestId('notification-template-submit-btn').click();
-    cy.getByTestId('notification-template-submit-btn').should('be.disabled');
 
     cy.visit('/templates');
     cy.waitForNetworkIdle(500);
@@ -394,21 +370,19 @@ describe('Workflow Editor - Main Functionality', function () {
       .click();
 
     cy.waitForNetworkIdle(500);
-    clickWorkflow();
 
     editChannel('inApp');
+    cy.waitForNetworkIdle(500);
 
-    cy.getByTestId('notification-template-submit-btn').should('be.disabled');
     cy.getByTestId('template-container').first().find('input').should('have.length', 1);
 
     cy.getByTestId('remove-button-icon').click();
 
-    cy.getByTestId('notification-template-submit-btn').click();
-    cy.getByTestId('notification-template-submit-btn').should('be.disabled');
-
     goBack();
+    cy.waitForNetworkIdle(500);
 
     editChannel('inApp');
+    cy.waitForNetworkIdle(500);
 
     cy.getByTestId('control-add').first();
   });
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 3a0cf5f6268..4e6a65179a1 100644
--- a/apps/web/cypress/tests/notification-editor/steps-actions.spec.ts
+++ b/apps/web/cypress/tests/notification-editor/steps-actions.spec.ts
@@ -1,4 +1,4 @@
-import { clickWorkflow, dragAndDrop, editChannel } from '.';
+import { clickWorkflow, dragAndDrop, editChannel, goBack } from '.';
 
 describe('Workflow Editor - Steps Actions', function () {
   beforeEach(function () {
@@ -22,11 +22,11 @@ describe('Workflow Editor - Steps Actions', function () {
     cy.visit('/templates/edit/' + template._id);
     waitForEditTemplateRequests();
 
-    clickWorkflow();
-
     cy.get('.react-flow__node').should('have.length', 4);
-    cy.getByTestId('step-actions-dropdown').first().click().getByTestId('delete-step-action').click();
-    cy.get('.mantine-Modal-modal button').contains('Yes').click();
+    cy.clickWorkflowNode(`node-inAppSelector`);
+    cy.waitForNetworkIdle(500);
+    cy.getByTestId('delete-step-button').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);
     cy.get('.react-flow__node').first().should('contain', 'Trigger').next().should('contain', 'Email');
@@ -35,8 +35,6 @@ describe('Workflow Editor - Steps Actions', function () {
     cy.visit('/templates/edit/' + template._id);
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     cy.get('.react-flow__node').should('have.length', 3);
   });
 
@@ -47,16 +45,17 @@ describe('Workflow Editor - Steps Actions', function () {
     cy.visit('/templates/edit/' + template._id);
     waitForEditTemplateRequests();
 
-    cy.waitLoadEnv(() => {
-      clickWorkflow();
-    });
-
     cy.get('.react-flow__node').should('have.length', 4);
-    cy.getByTestId('step-actions-dropdown').first().click().getByTestId('delete-step-action').click();
-    cy.get('.mantine-Modal-modal button').contains('Yes').click();
+    cy.getByTestId('node-inAppSelector')
+      .getByTestId('channel-node')
+      .first()
+      .trigger('mouseover', { force: true })
+      .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);
-    cy.getByTestId('drag-side-menu').contains('Steps to add');
+    cy.getByTestId('drag-side-menu').contains('Channels');
   });
 
   it('should keep steps order on reload', function () {
@@ -66,8 +65,6 @@ describe('Workflow Editor - Steps Actions', function () {
     cy.visit('/templates/edit/' + template._id);
     waitForEditTemplateRequests();
 
-    clickWorkflow();
-
     dragAndDrop('sms');
 
     editChannel('sms');
@@ -77,8 +74,6 @@ describe('Workflow Editor - Steps Actions', function () {
     cy.visit('/templates/edit/' + template._id);
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     cy.get('.react-flow__node').should('have.length', 5);
     cy.get('.react-flow__node')
       .first()
@@ -98,15 +93,13 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     cy.clickWorkflowNode(`node-inAppSelector`);
-    cy.getByTestId(`step-active-switch`).get('label').contains('Step is active');
+    cy.getByTestId(`step-active-switch`).get('label').contains('Active');
     cy.getByTestId(`step-active-switch`).click({ force: true });
-    cy.getByTestId('notification-template-submit-btn').click();
+    goBack();
 
     cy.clickWorkflowNode(`node-inAppSelector`);
-    cy.getByTestId(`step-active-switch`).get('label').contains('Step is not active');
+    cy.getByTestId(`step-active-switch`).get('label').contains('Inactive');
   });
 
   it('should be able to toggle ShouldStopOnFailSwitch', function () {
@@ -116,12 +109,10 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     cy.clickWorkflowNode(`node-inAppSelector`);
-    cy.getByTestId(`step-should-stop-on-fail-switch`).get('label').contains('Stop workflow if this step fails?');
+    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 });
-    cy.getByTestId('notification-template-submit-btn').click();
+    goBack();
 
     cy.clickWorkflowNode(`node-inAppSelector`);
     cy.getByTestId(`step-should-stop-on-fail-switch`).should('be.checked');
@@ -134,8 +125,6 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     cy.clickWorkflowNode(`node-inAppSelector`);
 
     cy.getByTestId('add-filter-btn').click();
@@ -153,10 +142,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('filter-confirm-btn').click();
 
-    cy.get('.filter-item').should('have.length', 1);
-
-    cy.get('.filter-item').contains('subscriber filter-key equal');
-    cy.get('.filter-item-value').contains('filter-value');
+    cy.getByTestId('add-filter-btn').contains('1 filter');
   });
 
   it('should be able to add read/seen filters to a particular step', function () {
@@ -166,8 +152,6 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     cy.clickWorkflowNode(`node-emailSelector`);
 
     cy.getByTestId('add-filter-btn').click();
@@ -185,10 +169,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('filter-confirm-btn').click();
 
-    cy.get('.filter-item').should('have.length', 1);
-
-    cy.get('.filter-item').contains('Previous step - In-App');
-    cy.get('.filter-item-value').contains('read');
+    cy.getByTestId('add-filter-btn').contains('1 filter');
   });
 
   it('should be able to not add read/seen filters to first step', function () {
@@ -198,8 +179,6 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     cy.clickWorkflowNode(`node-inAppSelector`);
 
     cy.getByTestId('add-filter-btn').click();
@@ -218,8 +197,6 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     cy.clickWorkflowNode(`node-inAppSelector`);
 
     cy.getByTestId('add-filter-btn').click();
@@ -235,16 +212,13 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('filter-confirm-btn').click();
 
-    cy.get('.filter-item').should('have.length', 1);
-
-    cy.get('.filter-item').contains('payload filter-key equal');
-    cy.get('.filter-item-value').contains('filter-value');
+    cy.getByTestId('add-filter-btn').contains('1 filter');
 
     cy.getByTestId('add-filter-btn').click();
     cy.getByTestId('filter-remove-btn').click();
     cy.getByTestId('filter-confirm-btn').click();
 
-    cy.get('.filter-item').should('have.length', 0);
+    cy.getByTestId('add-filter-btn').contains('Add filter');
   });
 
   it('should be able to add webhook filter for a particular step', function () {
@@ -254,8 +228,6 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     cy.clickWorkflowNode(`node-inAppSelector`);
 
     cy.getByTestId('add-filter-btn').click();
@@ -275,9 +247,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('filter-confirm-btn').click();
 
-    cy.get('.filter-item').should('have.length', 1);
-    cy.get('.filter-item').contains('webhook filter-key equal');
-    cy.get('.filter-item-value').contains('filter-value');
+    cy.getByTestId('add-filter-btn').contains('1 filter');
   });
 
   it('should be able to add online right now filter for a particular step', function () {
@@ -287,8 +257,6 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     cy.clickWorkflowNode(`node-inAppSelector`);
 
     cy.getByTestId('add-filter-btn').click();
@@ -304,9 +272,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('filter-confirm-btn').click();
 
-    cy.get('.filter-item').should('have.length', 1);
-    cy.get('.filter-item').contains('is online right now equal');
-    cy.get('.filter-item-value').contains('Yes');
+    cy.getByTestId('add-filter-btn').contains('1 filter');
   });
 
   it('should be able to add online in the last X time period filter for a particular step', function () {
@@ -316,8 +282,6 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     cy.clickWorkflowNode(`node-inAppSelector`);
 
     cy.getByTestId('add-filter-btn').click();
@@ -334,9 +298,7 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('filter-confirm-btn').click();
 
-    cy.get('.filter-item').should('have.length', 1);
-    cy.get('.filter-item').contains('online in the last "X" hours');
-    cy.get('.filter-item-value').contains('1');
+    cy.getByTestId('add-filter-btn').contains('1 filter');
   });
 
   it('should be able to add multiple filters to a particular step', function () {
@@ -346,8 +308,6 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.waitForNetworkIdle(500);
 
-    clickWorkflow();
-
     cy.clickWorkflowNode(`node-inAppSelector`);
 
     cy.getByTestId('add-filter-btn').click();
@@ -371,9 +331,6 @@ describe('Workflow Editor - Steps Actions', function () {
 
     cy.getByTestId('filter-confirm-btn').click();
 
-    cy.get('.filter-item').should('have.length', 2);
-
-    cy.get('.filter-item').contains('subscriber filter-key equal');
-    cy.get('.filter-item-value').contains('filter-value');
+    cy.getByTestId('add-filter-btn').contains('2 filters');
   });
 });
diff --git a/apps/web/package.json b/apps/web/package.json
index f6c21256aa4..f59782a5d83 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -72,7 +72,7 @@
     "date-fns": "^2.29.2",
     "graphql": "^15.4.0",
     "handlebars": "^4.7.7",
-    "html-webpack-plugin": "5.5.0",
+    "html-webpack-plugin": "5.5.1",
     "jwt-decode": "^3.1.2",
     "less": "^4.1.0",
     "lodash.capitalize": "^4.2.1",
@@ -106,6 +106,7 @@
     "react-table": "^7.7.0",
     "react-use-intercom": "^2.0.0",
     "rimraf": "^3.0.2",
+    "slugify": "^1.4.6",
     "storybook-dark-mode": "^1.0.8",
     "typescript": "4.9.5",
     "uniqid": "^5.3.0",
diff --git a/apps/web/src/App.tsx b/apps/web/src/App.tsx
index 9b271db600f..822e0c59474 100644
--- a/apps/web/src/App.tsx
+++ b/apps/web/src/App.tsx
@@ -34,12 +34,17 @@ import { NotificationCenter } from './pages/quick-start/steps/NotificationCenter
 import { FrameworkSetup } from './pages/quick-start/steps/FrameworkSetup';
 import { Setup } from './pages/quick-start/steps/Setup';
 import { Trigger } from './pages/quick-start/steps/Trigger';
-import { TemplateEditorProvider } from './pages/templates/editor/TemplateEditorProvider';
-import { TemplateEditorFormProvider } from './pages/templates/components/TemplateEditorFormProvider';
 import { RequiredAuth } from './components/layout/RequiredAuth';
 import { GetStarted } from './pages/quick-start/steps/GetStarted';
 import { DigestPreview } from './pages/quick-start/steps/DigestPreview';
 import { TemplatesDigestPlaygroundPage } from './pages/templates/TemplatesDigestPlaygroundPage';
+import { Sidebar } from './pages/templates/workflow/SideBar/Sidebar';
+import { TemplateSettings } from './pages/templates/components/TemplateSettings';
+import { UserPreference } from './pages/templates/components/UserPreference';
+import { TestWorkflowPage } from './pages/templates/components/TestWorkflowPage';
+import { SnippetPage } from './pages/templates/components/SnippetPage';
+import { TemplateEditor } from './pages/templates/components/TemplateEditor';
+import { ProvidersPage } from './pages/templates/components/ProvidersPage';
 
 if (LOGROCKET_ID && window !== undefined) {
   LogRocket.init(LOGROCKET_ID, {
@@ -175,26 +180,16 @@ function App() {
                 <Route element={<AppLayout />}>
                   <Route path={ROUTES.ANY} element={<HomePage />} />
                   <Route path={ROUTES.TEMPLATES_DIGEST_PLAYGROUND} element={<TemplatesDigestPlaygroundPage />} />
-                  <Route
-                    path={ROUTES.TEMPLATES_CREATE}
-                    element={
-                      <TemplateEditorFormProvider>
-                        <TemplateEditorProvider>
-                          <TemplateEditorPage />
-                        </TemplateEditorProvider>
-                      </TemplateEditorFormProvider>
-                    }
-                  />
-                  <Route
-                    path={ROUTES.TEMPLATES_EDIT_TEMPLATEID}
-                    element={
-                      <TemplateEditorFormProvider>
-                        <TemplateEditorProvider>
-                          <TemplateEditorPage />
-                        </TemplateEditorProvider>
-                      </TemplateEditorFormProvider>
-                    }
-                  />
+                  <Route path={ROUTES.TEMPLATES_CREATE} element={<TemplateEditorPage />} />
+                  <Route path={ROUTES.TEMPLATES_EDIT_TEMPLATEID} element={<TemplateEditorPage />}>
+                    <Route path="" element={<Sidebar />} />
+                    <Route path="settings" element={<TemplateSettings />} />
+                    <Route path="channels" element={<UserPreference />} />
+                    <Route path="test-workflow" element={<TestWorkflowPage />} />
+                    <Route path="snippet" element={<SnippetPage />} />
+                    <Route path="providers" element={<ProvidersPage />} />
+                    <Route path=":channel/:stepUuid" element={<TemplateEditor />} />
+                  </Route>
                   <Route path={ROUTES.TEMPLATES} element={<NotificationList />} />
                   <Route path={ROUTES.GET_STARTED} element={<GetStarted />} />
                   <Route path={ROUTES.GET_STARTED_PREVIEW} element={<DigestPreview />} />
diff --git a/apps/web/src/api/hooks/notification-templates/useCreateDigestDemoWorkflow.ts b/apps/web/src/api/hooks/notification-templates/useCreateDigestDemoWorkflow.ts
index e0ddbdff3ca..4ea6c621808 100644
--- a/apps/web/src/api/hooks/notification-templates/useCreateDigestDemoWorkflow.ts
+++ b/apps/web/src/api/hooks/notification-templates/useCreateDigestDemoWorkflow.ts
@@ -8,6 +8,7 @@ import { parseUrl } from '../../../utils/routeUtils';
 import { ROUTES } from '../../../constants/routes.enum';
 import { errorMessage } from '../../../utils/notifications';
 import { useNotificationGroup, useTemplates } from '../../../hooks';
+import { v4 as uuid4 } from 'uuid';
 
 export const useCreateDigestDemoWorkflow = () => {
   const navigate = useNavigate();
@@ -47,6 +48,7 @@ export const useCreateDigestDemoWorkflow = () => {
             template: { type: StepTypeEnum.DIGEST, content: '' },
             metadata: { amount: '10', unit: 'seconds', type: 'regular', digestKey: '' },
             active: true,
+            uuid: uuid4(),
             filters: [],
           },
           {
@@ -57,8 +59,9 @@ export const useCreateDigestDemoWorkflow = () => {
               contentType: 'customHtml',
               variables: [{ type: 'String', name: 'step.digest', defaultValue: '1', required: false }],
               preheader: '',
-              content: `Hi {{subscriber.firstName}}! 👋 You've sent {{step.total_count}} events!`,
+              content: "Hi {{subscriber.firstName}}! 👋 You've sent {{step.total_count}} events!",
             },
+            uuid: uuid4(),
             active: true,
           },
         ],
diff --git a/apps/web/src/constants/editorEnums.ts b/apps/web/src/constants/editorEnums.ts
deleted file mode 100644
index e6ceaeeed40..00000000000
--- a/apps/web/src/constants/editorEnums.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export enum ActivePageEnum {
-  SETTINGS = 'Settings',
-  WORKFLOW = 'Workflow',
-  USER_PREFERENCE = 'UserPreference',
-  SMS = 'Sms',
-  EMAIL = 'Email',
-  IN_APP = 'in_app',
-  PUSH = 'Push',
-  CHAT = 'Chat',
-  TRIGGER_SNIPPET = 'TriggerSnippet',
-}
diff --git a/apps/web/src/design-system/button/Button.tsx b/apps/web/src/design-system/button/Button.tsx
index 32643e354d8..f901db08f4d 100644
--- a/apps/web/src/design-system/button/Button.tsx
+++ b/apps/web/src/design-system/button/Button.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Button as MantineButton } from '@mantine/core';
+import React, { MouseEventHandler } from 'react';
+import { Button as MantineButton, Sx } from '@mantine/core';
 
 import useStyles from './Button.styles';
 import { SpacingProps } from '../shared/spacing.props';
@@ -15,8 +15,11 @@ interface IButtonProps extends JSX.ElementChildrenAttribute, SpacingProps {
   fullWidth?: boolean;
   submit?: boolean;
   onClick?: (e: any) => void;
+  onMouseEnter?: MouseEventHandler<any>;
+  onMouseLeave?: MouseEventHandler<any>;
   inherit?: boolean;
   pulse?: boolean;
+  sx?: Sx;
 }
 
 /**
diff --git a/apps/web/src/design-system/icons/actions/Filter.tsx b/apps/web/src/design-system/icons/actions/Filter.tsx
new file mode 100644
index 00000000000..855246f7e56
--- /dev/null
+++ b/apps/web/src/design-system/icons/actions/Filter.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+/* eslint-disable */
+export function Filter(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="14" viewBox="0 0 16 14" fill="none" {...props}>
+      <path
+        d="M0.572302 0.932728L0.572318 0.932736L0.574158 0.928835C0.698017 0.666102 0.959543 0.5 1.25002 0.5H14.75C15.0405 0.5 15.302 0.666102 15.4259 0.928835C15.5502 1.19251 15.5124 1.50201 15.3285 1.72733C15.3285 1.72738 15.3284 1.72743 15.3284 1.72748L9.61307 8.71147L9.50002 8.84962V9.02812V13C9.50002 13.19 9.39351 13.3622 9.22493 13.4457C9.05055 13.5321 8.85 13.5129 8.70068 13.4005L8.70002 13.4L6.70002 11.9L6.70003 11.9L6.69763 11.8982C6.57427 11.8068 6.50002 11.6603 6.50002 11.5V9.02812V8.8496L6.38695 8.71145L0.668828 1.72472C0.668738 1.72461 0.668649 1.7245 0.668559 1.72439C0.486242 1.50046 0.448639 1.18928 0.572302 0.932728Z"
+        stroke="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/src/design-system/icons/general/Drag.tsx b/apps/web/src/design-system/icons/general/Drag.tsx
new file mode 100644
index 00000000000..106a23dd837
--- /dev/null
+++ b/apps/web/src/design-system/icons/general/Drag.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+/* eslint-disable */
+export function Drag(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M10 3C10.5523 3 11 2.55228 11 2C11 1.44772 10.5523 1 10 1C9.44772 1 9 1.44772 9 2C9 2.55228 9.44772 3 10 3ZM10 7C10.5523 7 11 6.55228 11 6C11 5.44772 10.5523 5 10 5C9.44772 5 9 5.44772 9 6C9 6.55228 9.44772 7 10 7ZM10 11C10.5523 11 11 10.5523 11 10C11 9.44771 10.5523 9 10 9C9.44772 9 9 9.44771 9 10C9 10.5523 9.44772 11 10 11ZM7 14C7 14.5523 6.55228 15 6 15C5.44772 15 5 14.5523 5 14C5 13.4477 5.44772 13 6 13C6.55228 13 7 13.4477 7 14ZM11 14C11 14.5523 10.5523 15 10 15C9.44772 15 9 14.5523 9 14C9 13.4477 9.44772 13 10 13C10.5523 13 11 13.4477 11 14ZM7 10C7 10.5523 6.55228 11 6 11C5.44772 11 5 10.5523 5 10C5 9.44771 5.44772 9 6 9C6.55228 9 7 9.44771 7 10ZM7 6C7 6.55228 6.55228 7 6 7C5.44772 7 5 6.55228 5 6C5 5.44772 5.44772 5 6 5C6.55228 5 7 5.44772 7 6ZM7 2C7 2.55228 6.55228 3 6 3C5.44772 3 5 2.55228 5 2C5 1.44772 5.44772 1 6 1C6.55228 1 7 1.44772 7 2Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/src/design-system/icons/general/InfoCircle.tsx b/apps/web/src/design-system/icons/general/InfoCircle.tsx
new file mode 100644
index 00000000000..9a5b3d10c25
--- /dev/null
+++ b/apps/web/src/design-system/icons/general/InfoCircle.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+/* eslint-disable */
+export function InfoCircle(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="17" viewBox="0 0 16 17" fill="none" {...props}>
+      <g clipPath="url(#clip0_943_34508)">
+        <path
+          d="M14.5 8.5C14.5 6.77609 13.8152 5.12279 12.5962 3.90381C11.3772 2.68482 9.72391 2 8 2C6.27609 2 4.62279 2.68482 3.40381 3.90381C2.18482 5.12279 1.5 6.77609 1.5 8.5C1.5 10.2239 2.18482 11.8772 3.40381 13.0962C4.62279 14.3152 6.27609 15 8 15C9.72391 15 11.3772 14.3152 12.5962 13.0962C13.8152 11.8772 14.5 10.2239 14.5 8.5ZM0 8.5C0 6.37827 0.842855 4.34344 2.34315 2.84315C3.84344 1.34285 5.87827 0.5 8 0.5C10.1217 0.5 12.1566 1.34285 13.6569 2.84315C15.1571 4.34344 16 6.37827 16 8.5C16 10.6217 15.1571 12.6566 13.6569 14.1569C12.1566 15.6571 10.1217 16.5 8 16.5C5.87827 16.5 3.84344 15.6571 2.34315 14.1569C0.842855 12.6566 0 10.6217 0 8.5ZM5.30625 5.66563C5.55312 4.96875 6.21563 4.5 6.95625 4.5H8.77812C9.86875 4.5 10.75 5.38438 10.75 6.47188C10.75 7.17813 10.3719 7.83125 9.75937 8.18437L8.75 8.7625C8.74375 9.16875 8.40938 9.5 8 9.5C7.58437 9.5 7.25 9.16562 7.25 8.75V8.32812C7.25 8.05937 7.39375 7.8125 7.62813 7.67812L9.0125 6.88438C9.15938 6.8 9.25 6.64375 9.25 6.475C9.25 6.2125 9.0375 6.00313 8.77812 6.00313H6.95625C6.85 6.00313 6.75625 6.06875 6.72188 6.16875L6.70937 6.20625C6.57188 6.59688 6.14062 6.8 5.75313 6.6625C5.36563 6.525 5.15938 6.09375 5.29688 5.70625L5.30937 5.66875L5.30625 5.66563ZM7 11.5C7 11.2348 7.10536 10.9804 7.29289 10.7929C7.48043 10.6054 7.73478 10.5 8 10.5C8.26522 10.5 8.51957 10.6054 8.70711 10.7929C8.89464 10.9804 9 11.2348 9 11.5C9 11.7652 8.89464 12.0196 8.70711 12.2071C8.51957 12.3946 8.26522 12.5 8 12.5C7.73478 12.5 7.48043 12.3946 7.29289 12.2071C7.10536 12.0196 7 11.7652 7 11.5Z"
+          fill="currentColor"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_943_34508">
+          <rect width="16" height="16" fill="white" transform="translate(0 0.5)" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
diff --git a/apps/web/src/design-system/icons/gradient/FilterGradient.tsx b/apps/web/src/design-system/icons/gradient/FilterGradient.tsx
new file mode 100644
index 00000000000..ae07815e047
--- /dev/null
+++ b/apps/web/src/design-system/icons/gradient/FilterGradient.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+/* eslint-disable */
+export function FilterGradient(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
+      <path
+        d="M0.572363 1.93273L0.57238 1.93274L0.574219 1.92883C0.698078 1.6661 0.959604 1.5 1.25008 1.5H14.7501C15.0406 1.5 15.3021 1.6661 15.4259 1.92883C15.5502 2.19251 15.5125 2.50201 15.3286 2.72733C15.3285 2.72738 15.3285 2.72743 15.3284 2.72748L9.61313 9.71147L9.50008 9.84962V10.0281V14C9.50008 14.19 9.39357 14.3622 9.22499 14.4457C9.05061 14.5321 8.85006 14.5129 8.70074 14.4005L8.70008 14.4L6.70008 12.9L6.70009 12.9L6.69769 12.8982C6.57433 12.8068 6.50008 12.6603 6.50008 12.5V10.0281V9.8496L6.38701 9.71145L0.668889 2.72472C0.668799 2.72461 0.66871 2.7245 0.66862 2.72439C0.486303 2.50046 0.4487 2.18928 0.572363 1.93273Z"
+        fill="url(#paint0_linear_1041_41139)"
+        stroke="url(#paint1_linear_1041_41139)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1041_41139"
+          x1="0.000244141"
+          y1="7.99979"
+          x2="15.9984"
+          y2="7.99979"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#DD2476" />
+          <stop offset="1" stopColor="#FF512F" />
+        </linearGradient>
+        <linearGradient
+          id="paint1_linear_1041_41139"
+          x1="0.000244141"
+          y1="7.99979"
+          x2="15.9984"
+          y2="7.99979"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#DD2476" />
+          <stop offset="1" stopColor="#FF512F" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/apps/web/src/design-system/icons/gradient/FilterOutlined.tsx b/apps/web/src/design-system/icons/gradient/FilterOutlined.tsx
new file mode 100644
index 00000000000..27e26dacab4
--- /dev/null
+++ b/apps/web/src/design-system/icons/gradient/FilterOutlined.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+/* eslint-disable */
+export function FilterOutlined(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none" {...props}>
+      <path
+        d="M0.572363 1.93273L0.57238 1.93274L0.574219 1.92883C0.698078 1.6661 0.959604 1.5 1.25008 1.5H14.7501C15.0406 1.5 15.3021 1.6661 15.4259 1.92883C15.5502 2.19251 15.5125 2.50201 15.3286 2.72733C15.3285 2.72738 15.3285 2.72743 15.3284 2.72748L9.61313 9.71147L9.50008 9.84962V10.0281V14C9.50008 14.19 9.39357 14.3622 9.22499 14.4457C9.05061 14.5321 8.85006 14.5129 8.70074 14.4005L8.70008 14.4L6.70008 12.9L6.70009 12.9L6.69769 12.8982C6.57433 12.8068 6.50008 12.6603 6.50008 12.5V10.0281V9.8496L6.38701 9.71145L0.668889 2.72472C0.668799 2.72461 0.66871 2.7245 0.66862 2.72439C0.486303 2.50046 0.4487 2.18928 0.572363 1.93273Z"
+        stroke="url(#paint0_linear_1000_35469)"
+      />
+      <defs>
+        <linearGradient
+          id="paint0_linear_1000_35469"
+          x1="0.000244141"
+          y1="7.99979"
+          x2="15.9984"
+          y2="7.99979"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#DD2476" />
+          <stop offset="1" stopColor="#FF512F" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}
diff --git a/apps/web/src/design-system/input/Input.tsx b/apps/web/src/design-system/input/Input.tsx
index 4fa12ecf6f1..707641453eb 100644
--- a/apps/web/src/design-system/input/Input.tsx
+++ b/apps/web/src/design-system/input/Input.tsx
@@ -1,5 +1,5 @@
 import React, { ChangeEvent, FocusEvent } from 'react';
-import { TextInputProps, TextInput as MantineTextInput } from '@mantine/core';
+import { TextInputProps, TextInput as MantineTextInput, Styles } from '@mantine/core';
 import { inputStyles } from '../config/inputs.styles';
 import { SpacingProps } from '../shared/spacing.props';
 
@@ -18,6 +18,7 @@ interface IInputProps extends SpacingProps {
   min?: string | number;
   max?: string | number;
   onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+  styles?: Styles<string, Record<string, any>>;
 }
 
 /**
diff --git a/apps/web/src/design-system/segmented-control/SegmentedControl.tsx b/apps/web/src/design-system/segmented-control/SegmentedControl.tsx
index 4aea33c359f..cc016d09193 100644
--- a/apps/web/src/design-system/segmented-control/SegmentedControl.tsx
+++ b/apps/web/src/design-system/segmented-control/SegmentedControl.tsx
@@ -4,6 +4,7 @@ import {
   SegmentedControlProps,
   SegmentedControlItem,
   LoadingOverlay,
+  Sx,
 } from '@mantine/core';
 import useStyles from './SegmentedControl.styles';
 import { colors } from '../config';
@@ -15,6 +16,9 @@ interface ISegmentedControlProps {
   value?: string;
   onChange?(value: string): void;
   loading?: boolean;
+  fullWidth?: boolean;
+  sx?: Sx | (Sx | undefined)[];
+  disabled?: boolean;
 }
 
 /**
diff --git a/apps/web/src/design-system/template-button/DragButton.tsx b/apps/web/src/design-system/template-button/DragButton.tsx
index 50028168737..5acdc65e4cd 100644
--- a/apps/web/src/design-system/template-button/DragButton.tsx
+++ b/apps/web/src/design-system/template-button/DragButton.tsx
@@ -1,10 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { UnstyledButton } from '@mantine/core';
 import styled from '@emotion/styled';
 import { Text } from '../typography/text/Text';
 import { useStyles } from './TemplateButton.styles';
 import { colors } from '../config';
 import { When } from '../../components/utils/When';
+import { Drag } from '../icons/general/Drag';
+import { useOutletContext } from 'react-router-dom';
 
 interface IDragButtonProps {
   Icon: React.FC<any>;
@@ -14,6 +16,7 @@ interface IDragButtonProps {
 
 export function DragButton({ description, label, Icon }: IDragButtonProps) {
   const { cx, classes, theme } = useStyles();
+  const [hover, setHover] = useState(false);
 
   return (
     <>
@@ -23,9 +26,26 @@ export function DragButton({ description, label, Icon }: IDragButtonProps) {
           background: theme.colorScheme === 'dark' ? colors.B17 : colors.white,
           border: `1px dashed ${theme.colorScheme === 'dark' ? colors.B30 : colors.B80}`,
           height: description.length > 0 ? '75px' : '50px',
+          position: 'relative',
         }}
         className={cx(classes.button, { [classes.active]: false })}
+        onMouseEnter={() => {
+          setHover(true);
+        }}
+        onMouseLeave={() => {
+          setHover(false);
+        }}
       >
+        <When truthy={hover}>
+          <Drag
+            style={{
+              position: 'absolute',
+              left: -17,
+              top: 15,
+            }}
+            color={colors.B80}
+          />
+        </When>
         <ButtonWrapper>
           <LeftContainerWrapper>
             <IconWrapper className={classes.linkIcon}>
diff --git a/apps/web/src/design-system/template-button/TemplateButton.tsx b/apps/web/src/design-system/template-button/TemplateButton.tsx
index 44cf241011d..e3209a6bf54 100644
--- a/apps/web/src/design-system/template-button/TemplateButton.tsx
+++ b/apps/web/src/design-system/template-button/TemplateButton.tsx
@@ -9,7 +9,6 @@ import { useStyles } from './TemplateButton.styles';
 import { colors } from '../config';
 import { Button } from './Button';
 import { IconWrapper } from './IconWrapper';
-import { ActivePageEnum } from '../../constants/editorEnums';
 
 const usePopoverStyles = createStyles(() => ({
   dropdown: {
@@ -75,14 +74,6 @@ export function TemplateButton({
           return;
         }
 
-        if (tabKey === ActivePageEnum.WORKFLOW) {
-          const valid = await trigger(['name', 'notificationGroupId'], { shouldFocus: true });
-
-          if (!valid) {
-            return;
-          }
-        }
-
         changeTab(tabKey);
       }}
       data-test-id={testId}
diff --git a/apps/web/src/hooks/useBlueprint.ts b/apps/web/src/hooks/useBlueprint.ts
index 86d95c2a3f4..4f1ee5b6cf7 100644
--- a/apps/web/src/hooks/useBlueprint.ts
+++ b/apps/web/src/hooks/useBlueprint.ts
@@ -3,7 +3,6 @@ import { useNavigate, useLocation } from 'react-router-dom';
 import { useEffect } from 'react';
 import { getToken } from './useAuthController';
 import { useSegment } from '../components/providers/SegmentProvider';
-import { ActivePageEnum } from '../constants/editorEnums';
 
 export const useBlueprint = () => {
   const searchParams = useSearchParams();
@@ -16,7 +15,7 @@ export const useBlueprint = () => {
     const token = getToken();
 
     if (id && token !== null) {
-      navigate(`/templates/create?page=${ActivePageEnum.WORKFLOW}`, {
+      navigate('/templates/create', {
         replace: true,
       });
     }
diff --git a/apps/web/src/hooks/usePrompt.ts b/apps/web/src/hooks/usePrompt.ts
index c4ce74d976c..345b1c22286 100644
--- a/apps/web/src/hooks/usePrompt.ts
+++ b/apps/web/src/hooks/usePrompt.ts
@@ -23,7 +23,12 @@ export function useBlocker(blocker, when = true) {
   }, [navigator, blocker, when]);
 }
 
-export const usePrompt = (when: boolean): [boolean, () => void, () => void] => {
+export const usePrompt = (
+  when: boolean,
+  checkNextLocation = (nextLocation, location) => {
+    return nextLocation.location.pathname !== location.pathname;
+  }
+): [boolean, () => void, () => void] => {
   const navigate = useNavigate();
   const location = useLocation();
   const [showPrompt, setShowPrompt] = useState(false);
@@ -36,7 +41,7 @@ export const usePrompt = (when: boolean): [boolean, () => void, () => void] => {
 
   const handleBlockedNavigation = useCallback(
     (nextLocation) => {
-      if (!confirmedNavigation && nextLocation.location.pathname !== location.pathname) {
+      if (!confirmedNavigation && checkNextLocation(nextLocation, location)) {
         setShowPrompt(true);
         setLastLocation(nextLocation);
 
@@ -45,7 +50,7 @@ export const usePrompt = (when: boolean): [boolean, () => void, () => void] => {
 
       return true;
     },
-    [confirmedNavigation]
+    [confirmedNavigation, checkNextLocation]
   );
 
   const confirmNavigation = useCallback(() => {
diff --git a/apps/web/src/pages/activities/components/ActivityItem.tsx b/apps/web/src/pages/activities/components/ActivityItem.tsx
index 9b9e8903fe0..909a06043ad 100644
--- a/apps/web/src/pages/activities/components/ActivityItem.tsx
+++ b/apps/web/src/pages/activities/components/ActivityItem.tsx
@@ -120,7 +120,8 @@ export const ActivityItem = ({ item, onClick }) => {
               </small>
               <div data-test-id="subscriber-id">
                 <small>
-                  <b>Subscriber id:</b> {item?.subscriber?.id ? item.subscriber.id : 'Deleted Subscriber'}
+                  <b>Subscriber id:</b>
+                  {item?.subscriber?.subscriberId ? item.subscriber.subscriberId : 'Deleted Subscriber'}
                 </small>
               </div>
               <div data-test-id="transaction-id">
diff --git a/apps/web/src/pages/integrations/IntegrationsStoreModal.tsx b/apps/web/src/pages/integrations/IntegrationsStoreModal.tsx
index dac9a33b7fd..e1a383c3cef 100644
--- a/apps/web/src/pages/integrations/IntegrationsStoreModal.tsx
+++ b/apps/web/src/pages/integrations/IntegrationsStoreModal.tsx
@@ -25,10 +25,12 @@ export function IntegrationsStoreModal({
   scrollTo,
   openIntegration,
   closeIntegration,
+  selectedProvider = null,
 }: {
   scrollTo?: ChannelTypeEnum;
   openIntegration: boolean;
   closeIntegration: () => void;
+  selectedProvider?: IIntegratedProvider | null;
 }) {
   const segment = useSegment();
   const { environment } = useEnvController();
@@ -42,6 +44,11 @@ export function IntegrationsStoreModal({
   const { classes } = useModalStyles();
   const { classes: drawerClasses } = useDrawerStyles();
 
+  useEffect(() => {
+    setFormIsOpened(selectedProvider !== null);
+    setProvider(selectedProvider);
+  }, [selectedProvider]);
+
   async function handleOnProviderClick(
     visible: boolean,
     createIntegrationModal: boolean,
diff --git a/apps/web/src/pages/integrations/components/ConnectIntegrationForm.cy.tsx b/apps/web/src/pages/integrations/components/ConnectIntegrationForm.cy.tsx
index f03410b56b7..d362d965374 100644
--- a/apps/web/src/pages/integrations/components/ConnectIntegrationForm.cy.tsx
+++ b/apps/web/src/pages/integrations/components/ConnectIntegrationForm.cy.tsx
@@ -68,10 +68,9 @@ it('close button calls onClose', () => {
     </Router>
   );
 
-  cy.get('[data-test-id="connection-integration-form-close"]').should('have.attr', 'type', 'button');
-
   // eslint-disable-next-line cypress/unsafe-to-chain-command
   cy.get('[data-test-id="connection-integration-form-close"]')
+    .should('have.attr', 'type', 'button')
     .click()
     .then((e) => {
       expect(onCloseStub).to.be.called;
diff --git a/apps/web/src/pages/templates/TemplatesDigestPlaygroundPage.tsx b/apps/web/src/pages/templates/TemplatesDigestPlaygroundPage.tsx
index 887e471d52f..9efffead452 100644
--- a/apps/web/src/pages/templates/TemplatesDigestPlaygroundPage.tsx
+++ b/apps/web/src/pages/templates/TemplatesDigestPlaygroundPage.tsx
@@ -10,6 +10,7 @@ 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';
 
 const Heading = styled(Title)`
   color: ${colors.B40};
@@ -30,6 +31,7 @@ export const TemplatesDigestPlaygroundPage = () => {
   const segment = useSegment();
   const { templateId = '' } = useParams<{ templateId: string }>();
   const navigate = useNavigate();
+  const tourStorage = useTourStorage();
 
   const handleBackClick = () => {
     segment.track(DigestPlaygroundAnalyticsEnum.BACK_BUTTON_CLICK);
@@ -38,7 +40,8 @@ export const TemplatesDigestPlaygroundPage = () => {
 
   const handleSetupDigestWorkflowClick = () => {
     segment.track(DigestPlaygroundAnalyticsEnum.SETUP_DIGEST_WORKFLOW_CLICK);
-    navigate(`${parseUrl(ROUTES.TEMPLATES_EDIT_TEMPLATEID, { templateId })}?tour=digest`);
+    tourStorage.setTour('digest', templateId, 0);
+    navigate(`${parseUrl(ROUTES.TEMPLATES_EDIT_TEMPLATEID, { templateId })}`);
   };
 
   const handleLearnMoreClick = () => {
diff --git a/apps/web/src/pages/templates/TemplatesListPage.tsx b/apps/web/src/pages/templates/TemplatesListPage.tsx
index 12e9d6f7cef..4840933289b 100644
--- a/apps/web/src/pages/templates/TemplatesListPage.tsx
+++ b/apps/web/src/pages/templates/TemplatesListPage.tsx
@@ -129,7 +129,7 @@ function NotificationList() {
             icon={<PlusCircle />}
             data-test-id="create-template-btn"
           >
-            New
+            Create Workflow
           </Button>
         }
       />
diff --git a/apps/web/src/pages/templates/components/BlueprintModal.tsx b/apps/web/src/pages/templates/components/BlueprintModal.tsx
index 4980939643b..c9b18d15e80 100644
--- a/apps/web/src/pages/templates/components/BlueprintModal.tsx
+++ b/apps/web/src/pages/templates/components/BlueprintModal.tsx
@@ -10,7 +10,6 @@ import { createTemplateFromBluePrintId, getBlueprintTemplateById } from '../../.
 import { errorMessage } from '../../../utils/notifications';
 import { When } from '../../../components/utils/When';
 import { useSegment } from '../../../components/providers/SegmentProvider';
-import { ActivePageEnum } from '../../../constants/editorEnums';
 
 export function BlueprintModal() {
   const theme = useMantineTheme();
@@ -20,10 +19,10 @@ export function BlueprintModal() {
     segment.track('Blueprint canceled', {
       blueprintId: localStorage.getItem('blueprintId'),
     });
-    localStorage.removeItem('blueprintId');
     navigate('/templates', {
       replace: true,
     });
+    localStorage.removeItem('blueprintId');
   };
 
   const { mutateAsync: updateOnBoardingStatus } = useMutation<
@@ -54,13 +53,13 @@ export function BlueprintModal() {
 
   const { mutate, isLoading: isCreating } = useMutation(createTemplateFromBluePrintId, {
     onSuccess: (template) => {
-      localStorage.removeItem('blueprintId');
       if (template) {
         disableOnboarding();
-        navigate(`/templates/edit/${template?._id}?page=${ActivePageEnum.WORKFLOW}`, {
+        navigate(`/templates/edit/${template?._id}`, {
           replace: true,
         });
       }
+      localStorage.removeItem('blueprintId');
     },
     onError: (err: any) => {
       if (err?.message) {
diff --git a/apps/web/src/pages/templates/components/ChannelTitle.tsx b/apps/web/src/pages/templates/components/ChannelTitle.tsx
new file mode 100644
index 00000000000..0f7ce4c3b65
--- /dev/null
+++ b/apps/web/src/pages/templates/components/ChannelTitle.tsx
@@ -0,0 +1,71 @@
+import { Group } from '@mantine/core';
+import { ChannelTypeEnum, StepTypeEnum } from '@novu/shared';
+import { Bell, Chat, DigestGradient, Mail, Mobile, Sms, TimerGradient } from '../../../design-system/icons';
+
+export const ChannelTitle = ({
+  channel,
+  spacing = 16,
+  color = undefined,
+}: {
+  channel: StepTypeEnum | ChannelTypeEnum;
+  spacing?: number;
+  color?: any;
+}) => {
+  if (channel === StepTypeEnum.EMAIL || channel === ChannelTypeEnum.EMAIL) {
+    return (
+      <Group align="center" spacing={spacing}>
+        <Mail color={color} /> <span>Email</span>
+      </Group>
+    );
+  }
+
+  if (channel === StepTypeEnum.IN_APP || channel === ChannelTypeEnum.IN_APP) {
+    return (
+      <Group align="center" spacing={spacing}>
+        <Bell color={color} /> <span>In-App</span>
+      </Group>
+    );
+  }
+
+  if (channel === StepTypeEnum.CHAT || channel === ChannelTypeEnum.CHAT) {
+    return (
+      <Group align="center" spacing={spacing}>
+        <Chat color={color} /> <span>Chat</span>
+      </Group>
+    );
+  }
+
+  if (channel === StepTypeEnum.PUSH || channel === ChannelTypeEnum.PUSH) {
+    return (
+      <Group align="center" spacing={spacing}>
+        <Mobile color={color} /> <span>Push</span>
+      </Group>
+    );
+  }
+
+  if (channel === StepTypeEnum.SMS || channel === ChannelTypeEnum.SMS) {
+    return (
+      <Group align="center" spacing={spacing}>
+        <Sms color={color} /> <span>SMS</span>
+      </Group>
+    );
+  }
+
+  if (channel === StepTypeEnum.DELAY) {
+    return (
+      <Group align="center" spacing={spacing}>
+        <TimerGradient /> <span>Delay</span>
+      </Group>
+    );
+  }
+
+  if (channel === StepTypeEnum.DIGEST) {
+    return (
+      <Group align="center" spacing={spacing}>
+        <DigestGradient /> <span>Digest</span>
+      </Group>
+    );
+  }
+
+  return <>{channel}</>;
+};
diff --git a/apps/web/src/pages/templates/components/DeleteConfirmModal.tsx b/apps/web/src/pages/templates/components/DeleteConfirmModal.tsx
index 745c67adb5e..0b276c06c0c 100644
--- a/apps/web/src/pages/templates/components/DeleteConfirmModal.tsx
+++ b/apps/web/src/pages/templates/components/DeleteConfirmModal.tsx
@@ -4,20 +4,29 @@ import { Button, colors, shadows, Title, Text } from '../../../design-system';
 
 export function DeleteConfirmModal({
   target,
+  title,
+  description,
   isOpen,
   cancel,
   confirm,
+  confirmButtonText = 'Yes',
+  cancelButtonText = 'No',
   isLoading,
   error,
 }: {
-  target: string;
+  target?: string;
   isOpen: boolean;
   cancel: () => void;
   confirm: () => void;
   isLoading?: boolean;
   error?: string;
+  title?: string;
+  description?: string;
+  confirmButtonText?: string;
+  cancelButtonText?: string;
 }) {
   const theme = useMantineTheme();
+  const targetText = target ? ' ' + target : '';
 
   return (
     <>
@@ -36,7 +45,7 @@ export function DeleteConfirmModal({
             paddingTop: '180px',
           },
         }}
-        title={<Title size={2}>Delete {target}</Title>}
+        title={<Title size={2}>{title ? title : `Delete${targetText}`}</Title>}
         sx={{ backdropFilter: 'blur(10px)' }}
         shadow={theme.colorScheme === 'dark' ? shadows.dark : shadows.medium}
         radius="md"
@@ -56,13 +65,13 @@ export function DeleteConfirmModal({
               {error}
             </Alert>
           )}
-          <Text>Would you like to delete this {target}?</Text>
+          <Text>{description ? description : `Would you like to delete this${targetText}?`}</Text>
           <Group position="right">
             <Button variant="outline" size="md" mt={30} onClick={() => cancel()}>
-              No
+              {cancelButtonText}
             </Button>
             <Button mt={30} size="md" onClick={() => confirm()} loading={isLoading} data-autofocus>
-              Yes
+              {confirmButtonText}
             </Button>
           </Group>
         </div>
diff --git a/apps/web/src/pages/templates/components/DeleteStepRow.tsx b/apps/web/src/pages/templates/components/DeleteStepRow.tsx
new file mode 100644
index 00000000000..c0c2b61f701
--- /dev/null
+++ b/apps/web/src/pages/templates/components/DeleteStepRow.tsx
@@ -0,0 +1,78 @@
+import { StepTypeEnum } from '@novu/shared';
+import { useEnvController } from '../../../hooks';
+import { useOutletContext, useParams } from 'react-router-dom';
+import { Button, colors } from '../../../design-system';
+import styled from '@emotion/styled';
+import { Trash } from '../../../design-system/icons';
+import { Group } from '@mantine/core';
+import { When } from '../../../components/utils/When';
+
+export const DeleteStepRow = () => {
+  const { channel, stepUuid = '' } = useParams<{
+    channel: StepTypeEnum;
+    stepUuid: string;
+  }>();
+  const { readonly } = useEnvController();
+  const { onDelete }: any = useOutletContext();
+
+  if (!channel) {
+    return null;
+  }
+
+  return (
+    <Group
+      position="apart"
+      sx={{
+        position: 'absolute',
+        bottom: 24,
+        left: 24,
+        right: 24,
+      }}
+    >
+      <When truthy={![StepTypeEnum.DELAY, StepTypeEnum.DIGEST].includes(channel)}>
+        <div />
+      </When>
+      <When truthy={channel === StepTypeEnum.DIGEST}>
+        <a
+          target={'_blank'}
+          style={{ color: 'rgb(221, 36, 118)', textDecoration: 'underline', fontSize: '18px' }}
+          rel="noopener noreferrer"
+          href={'https://docs.novu.co/platform/digest'}
+        >
+          Learn more in the docs
+        </a>
+      </When>
+      <When truthy={channel === StepTypeEnum.DELAY}>
+        <a
+          target={'_blank'}
+          style={{ color: 'rgb(221, 36, 118)', textDecoration: 'underline', fontSize: '18px' }}
+          rel="noopener noreferrer"
+          href={'https://docs.novu.co/platform/delay'}
+        >
+          Learn more in the docs
+        </a>
+      </When>
+      <DeleteStepButton
+        variant="outline"
+        data-test-id="delete-step-button"
+        onClick={() => {
+          onDelete(stepUuid);
+        }}
+        disabled={readonly}
+      >
+        <Trash
+          style={{
+            marginRight: '5px',
+          }}
+        />
+        Delete Step
+      </DeleteStepButton>
+    </Group>
+  );
+};
+
+const DeleteStepButton = styled(Button)`
+  background: rgba(229, 69, 69, 0.15);
+  color: ${colors.error};
+  box-shadow: none;
+`;
diff --git a/apps/web/src/pages/templates/components/EditorPreviewSwitch.tsx b/apps/web/src/pages/templates/components/EditorPreviewSwitch.tsx
index f01c0fc5f3f..d595b159b1a 100644
--- a/apps/web/src/pages/templates/components/EditorPreviewSwitch.tsx
+++ b/apps/web/src/pages/templates/components/EditorPreviewSwitch.tsx
@@ -13,6 +13,8 @@ export const EditorPreviewSwitch = ({ view, setView }) => {
           background: 'transparent',
           border: `1px solid ${theme.colorScheme === 'dark' ? colors.B40 : colors.B70}`,
           borderRadius: '30px',
+          width: '100%',
+          maxWidth: '300px',
         },
         label: {
           fontSize: '14px',
diff --git a/apps/web/src/pages/templates/components/ExecutionDetailsModalWrapper.tsx b/apps/web/src/pages/templates/components/ExecutionDetailsModalWrapper.tsx
index d9baef37a67..8b6f10b185e 100644
--- a/apps/web/src/pages/templates/components/ExecutionDetailsModalWrapper.tsx
+++ b/apps/web/src/pages/templates/components/ExecutionDetailsModalWrapper.tsx
@@ -30,9 +30,9 @@ export const ExecutionDetailsModalWrapper = ({ transactionId, isOpen, onClose }:
           color: colors.error,
         }}
       />
-      {notification?.data?.length && (
+      {notification?.data?.length && notification?.data?.length > 0 ? (
         <ExecutionDetailsModal notificationId={notification?.data[0]._id} modalVisibility={isOpen} onClose={onClose} />
-      )}
+      ) : null}
     </>
   );
 };
diff --git a/apps/web/src/pages/templates/components/LackIntegrationError.tsx b/apps/web/src/pages/templates/components/LackIntegrationError.tsx
index bc75ce32f95..42216297bac 100644
--- a/apps/web/src/pages/templates/components/LackIntegrationError.tsx
+++ b/apps/web/src/pages/templates/components/LackIntegrationError.tsx
@@ -6,20 +6,22 @@ import { Text } from '../../../design-system';
 import { DoubleArrowRight } from '../../../design-system/icons/arrows/CircleArrowRight';
 import { IntegrationsStoreModal } from '../../integrations/IntegrationsStoreModal';
 import { useSegment } from '../../../components/providers/SegmentProvider';
-import { TemplateEditorAnalyticsEnum } from '../constants';
+import { stepNames, TemplateEditorAnalyticsEnum } from '../constants';
 
 const DoubleArrowRightStyled = styled(DoubleArrowRight)`
   cursor: pointer;
 `;
 
 export function LackIntegrationError({
-  channel,
   channelType,
   text,
+  iconHeight = 18,
+  iconWidth = 18,
 }: {
-  channel: string;
   channelType: ChannelTypeEnum;
   text?: string;
+  iconHeight?: number | string | undefined;
+  iconWidth?: number | string | undefined;
 }) {
   const segment = useSegment();
   const [isIntegrationsModalOpened, openIntegrationsModal] = useState(false);
@@ -30,13 +32,17 @@ export function LackIntegrationError({
         <Text>
           {text
             ? text
-            : `Looks like you haven’t configured your ${channel} provider yet, this channel will be disabled until you configure it.`}
+            : 'Looks like you haven’t configured your ' +
+              stepNames[channelType] +
+              ' provider yet, this channel will be disabled until you configure it.'}
         </Text>
         <DoubleArrowRightStyled
           onClick={() => {
             openIntegrationsModal(true);
             segment.track(TemplateEditorAnalyticsEnum.CONFIGURE_PROVIDER_BANNER_CLICK);
           }}
+          height={iconHeight}
+          width={iconWidth}
         />
       </WarningMessage>
       <IntegrationsStoreModal
diff --git a/apps/web/src/pages/templates/components/ListProviders.tsx b/apps/web/src/pages/templates/components/ListProviders.tsx
new file mode 100644
index 00000000000..b8c3ba2a332
--- /dev/null
+++ b/apps/web/src/pages/templates/components/ListProviders.tsx
@@ -0,0 +1,102 @@
+import { Group, Text, UnstyledButton, useMantineColorScheme } from '@mantine/core';
+import { ChannelTypeEnum } from '@novu/shared';
+import { When } from '../../../components/utils/When';
+import { Button, colors } from '../../../design-system';
+import { IIntegratedProvider } from '../../integrations/IntegrationsStoreModal';
+import { stepNames } from '../constants';
+import { ChannelTitle } from './ChannelTitle';
+import { LackIntegrationError } from './LackIntegrationError';
+
+export const ListProviders = ({
+  providers,
+  setConfigureChannel,
+  setProvider,
+}: {
+  providers: IIntegratedProvider[];
+  setConfigureChannel: (channel: ChannelTypeEnum) => void;
+  setProvider: (provider: IIntegratedProvider) => void;
+}) => {
+  const { colorScheme } = useMantineColorScheme();
+
+  return (
+    <div
+      style={{
+        marginBottom: 32,
+      }}
+    >
+      <div
+        style={{
+          color: colors.B60,
+          marginBottom: 12,
+          fontSize: 14,
+          lineHeight: '20px',
+        }}
+      >
+        <Group position="apart">
+          <ChannelTitle spacing={8} channel={providers[0].channel} />
+          <Button
+            sx={{
+              height: '32px',
+              padding: '7.5px 15px',
+            }}
+            variant={providers.filter((provider) => provider.connected).length > 0 ? 'outline' : 'gradient'}
+            onClick={() => {
+              setConfigureChannel(providers[0].channel);
+            }}
+          >
+            Configure
+          </Button>
+        </Group>
+      </div>
+      <When truthy={providers.filter((provider) => provider.connected).length === 0}>
+        <div
+          style={{
+            marginBottom: -28,
+          }}
+        >
+          <LackIntegrationError
+            text={`Please configure ${stepNames[providers[0].channel]} provider to activate the channel`}
+            channelType={providers[0].channel}
+          />
+        </div>
+      </When>
+      {providers
+        .filter((provider) => provider.connected)
+        .map((provider) => {
+          return (
+            <UnstyledButton
+              style={{
+                width: '100%',
+                padding: 15,
+                background: colorScheme === 'dark' ? colors.B20 : colors.B98,
+                borderRadius: 8,
+                marginBottom: 12,
+                lineHeight: 1,
+                opacity: provider.active ? 1 : colorScheme === 'dark' ? 1 : 0.4,
+              }}
+              onClick={() => {
+                setProvider(provider);
+                setConfigureChannel(provider.channel);
+              }}
+            >
+              <Group position="apart">
+                <img
+                  src={'/static/images/providers/' + colorScheme + '/' + provider.logoFileName[`${colorScheme}`]}
+                  alt={provider.displayName}
+                  style={{
+                    height: '24px',
+                    maxWidth: '140px',
+                    opacity: provider.active ? 1 : colorScheme === 'dark' ? 0.4 : 1,
+                  }}
+                />
+                <Text color={provider.active ? colors.success : colors.B60}>
+                  <When truthy={provider.active}>Active</When>
+                  <When truthy={!provider.active}>Disabled</When>
+                </Text>
+              </Group>
+            </UnstyledButton>
+          );
+        })}
+    </div>
+  );
+};
diff --git a/apps/web/src/pages/templates/components/NavigateValidatorModal.tsx b/apps/web/src/pages/templates/components/NavigateValidatorModal.tsx
index 40f060452d8..653350bd47a 100644
--- a/apps/web/src/pages/templates/components/NavigateValidatorModal.tsx
+++ b/apps/web/src/pages/templates/components/NavigateValidatorModal.tsx
@@ -5,22 +5,19 @@ import { Button, colors, shadows, Title, Text } from '../../../design-system';
 
 export function NavigateValidatorModal({
   isOpen,
-  setModalVisibility,
-  navigateRoute,
-  navigateName,
+  onCancel,
+  onConfirm,
 }: {
   isOpen: boolean;
-  setModalVisibility: (boolean) => void;
-  navigateRoute: string;
-  navigateName: string;
+  onCancel: () => void;
+  onConfirm: () => void;
 }) {
   const theme = useMantineTheme();
-  const navigate = useNavigate();
 
   return (
     <>
       <Modal
-        onClose={() => setModalVisibility(false)}
+        onClose={onCancel}
         opened={isOpen}
         overlayColor={theme.colorScheme === 'dark' ? colors.BGDark : colors.BGLight}
         overlayOpacity={0.7}
@@ -35,7 +32,7 @@ export function NavigateValidatorModal({
             paddingTop: '180px',
           },
         }}
-        title={<Title size={2}>Navigate to the {navigateName}?</Title>}
+        title={<Title size={2}>Unsaved changes will be deleted</Title>}
         sx={{ backdropFilter: 'blur(10px)' }}
         shadow={theme.colorScheme === 'dark' ? shadows.dark : shadows.medium}
         radius="md"
@@ -44,10 +41,10 @@ export function NavigateValidatorModal({
         <div>
           <Text>Any unsaved changes will be deleted. Proceed anyway?</Text>
           <Group position="right">
-            <Button variant="outline" size="md" mt={30} onClick={() => setModalVisibility(false)}>
+            <Button variant="outline" size="md" mt={30} onClick={onCancel}>
               No
             </Button>
-            <Button mt={30} size="md" onClick={() => navigate(navigateRoute)}>
+            <Button mt={30} size="md" onClick={onConfirm}>
               Yes
             </Button>
           </Group>
diff --git a/apps/web/src/pages/templates/components/ProvidersPage.tsx b/apps/web/src/pages/templates/components/ProvidersPage.tsx
new file mode 100644
index 00000000000..75313d0159d
--- /dev/null
+++ b/apps/web/src/pages/templates/components/ProvidersPage.tsx
@@ -0,0 +1,46 @@
+import { Center, Loader } from '@mantine/core';
+import { ChannelTypeEnum } from '@novu/shared';
+import { useState } from 'react';
+import { colors } from '../../../design-system';
+import { useIntegrations } from '../../../hooks';
+import { IIntegratedProvider, IntegrationsStoreModal } from '../../integrations/IntegrationsStoreModal';
+import { useProviders } from '../../integrations/useProviders';
+import { ListProviders } from './ListProviders';
+import { SubPageWrapper } from './SubPageWrapper';
+import { WorkflowSettingsTabs } from './WorkflowSettingsTabs';
+
+export function ProvidersPage() {
+  const { loading: isLoading } = useIntegrations({ refetchOnMount: false });
+  const { emailProviders, smsProvider, chatProvider, pushProvider } = useProviders();
+  const [configureChannel, setConfigureChannel] = useState<ChannelTypeEnum | undefined>(undefined);
+  const [provider, setProvider] = useState<IIntegratedProvider | null>(null);
+
+  if (isLoading) {
+    return (
+      <Center>
+        <Loader color={colors.B70} mb={20} mt={20} size={32} />
+      </Center>
+    );
+  }
+
+  return (
+    <>
+      <SubPageWrapper title="Workflow Settings">
+        <WorkflowSettingsTabs />
+        <ListProviders setProvider={setProvider} setConfigureChannel={setConfigureChannel} providers={emailProviders} />
+        <ListProviders setProvider={setProvider} setConfigureChannel={setConfigureChannel} providers={chatProvider} />
+        <ListProviders setProvider={setProvider} setConfigureChannel={setConfigureChannel} providers={pushProvider} />
+        <ListProviders setProvider={setProvider} setConfigureChannel={setConfigureChannel} providers={smsProvider} />
+      </SubPageWrapper>
+      <IntegrationsStoreModal
+        selectedProvider={provider}
+        openIntegration={configureChannel !== undefined}
+        closeIntegration={() => {
+          setProvider(null);
+          setConfigureChannel(undefined);
+        }}
+        scrollTo={configureChannel}
+      />
+    </>
+  );
+}
diff --git a/apps/web/src/pages/templates/components/SnippetPage.tsx b/apps/web/src/pages/templates/components/SnippetPage.tsx
new file mode 100644
index 00000000000..ca06f4abcb1
--- /dev/null
+++ b/apps/web/src/pages/templates/components/SnippetPage.tsx
@@ -0,0 +1,24 @@
+import { Text } from '@mantine/core';
+import { colors } from '../../../design-system';
+import { TriggerSnippetTabs } from './TriggerSnippetTabs';
+import { useTemplateEditorForm } from './TemplateEditorFormProvider';
+import { SubPageWrapper } from './SubPageWrapper';
+import { TriggerSegmentControl } from './TriggerSegmentControl';
+import { When } from '../../../components/utils/When';
+
+export function SnippetPage() {
+  const { trigger, isCreating, isUpdating } = useTemplateEditorForm();
+
+  return (
+    <SubPageWrapper title="Trigger">
+      <Text color={colors.B60} mt={-16} mb={24}>
+        Test trigger as if you sent it from your API or implement it by copy/pasting it into the codebase of your
+        application.
+      </Text>
+      <When truthy={!isCreating && !isUpdating}>
+        <TriggerSegmentControl />
+        {trigger && <TriggerSnippetTabs trigger={trigger} />}
+      </When>
+    </SubPageWrapper>
+  );
+}
diff --git a/apps/web/src/pages/templates/components/StepName.tsx b/apps/web/src/pages/templates/components/StepName.tsx
new file mode 100644
index 00000000000..fd79cfe89cb
--- /dev/null
+++ b/apps/web/src/pages/templates/components/StepName.tsx
@@ -0,0 +1,33 @@
+import { Group } from '@mantine/core';
+import { ChannelTypeEnum, StepTypeEnum } from '@novu/shared';
+import { When } from '../../../components/utils/When';
+import { UpdateButton } from './UpdateButton';
+import { StepNameInput } from './StepNameInput';
+import { stepIcon, stepNames } from '../constants';
+
+export const StepName = ({
+  channel,
+  color = undefined,
+  index,
+}: {
+  channel: StepTypeEnum | ChannelTypeEnum;
+  index: number;
+  color?: any;
+}) => {
+  const Icon = stepIcon[channel];
+
+  return (
+    <Group spacing={16}>
+      <Icon color={color} /> <StepNameInput defaultValue={stepNames[channel]} index={index} />
+      <When truthy={['in_app', 'email'].includes(channel)}>
+        <div
+          style={{
+            marginRight: 32,
+          }}
+        >
+          <UpdateButton />
+        </div>
+      </When>
+    </Group>
+  );
+};
diff --git a/apps/web/src/pages/templates/components/StepNameInput.tsx b/apps/web/src/pages/templates/components/StepNameInput.tsx
new file mode 100644
index 00000000000..2efa3ca516d
--- /dev/null
+++ b/apps/web/src/pages/templates/components/StepNameInput.tsx
@@ -0,0 +1,72 @@
+import { TextInput, useMantineColorScheme } from '@mantine/core';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useEnvController } from '../../../hooks';
+import { IForm } from './formTypes';
+import { colors } from '@novu/notification-center';
+
+export const StepNameInput = ({ index, defaultValue }: { index: number; defaultValue: string }) => {
+  const {
+    control,
+    formState: { errors, isSubmitted },
+  } = useFormContext<IForm>();
+  const { readonly } = useEnvController();
+  const showErrors = isSubmitted && errors?.steps;
+  const { colorScheme } = useMantineColorScheme();
+
+  return (
+    <Controller
+      control={control}
+      name={`steps.${index}.name`}
+      render={({ field, fieldState }) => {
+        return (
+          <TextInput
+            styles={(theme) => ({
+              root: {
+                flex: '1 1 auto',
+                marginRight: 16,
+              },
+              wrapper: {
+                background: 'transparent',
+                width: '100%',
+              },
+              input: {
+                background: 'transparent',
+                borderStyle: 'solid',
+                borderColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[5],
+                borderWidth: '1px',
+                fontSize: '20px',
+                fontWeight: 'bolder',
+                padding: 9,
+                lineHeight: '28px',
+                minHeight: 'auto',
+                height: 'auto',
+                width: '100%',
+                textOverflow: 'ellipsis',
+                '&:not(:placeholder-shown)': {
+                  borderStyle: 'none',
+                  padding: 10,
+                },
+                '&:hover, &:focus': {
+                  borderStyle: 'solid',
+                  padding: 9,
+                },
+                '&:disabled': {
+                  backgroundColor: colorScheme === 'dark' ? colors.B17 : theme.white,
+                  color: colorScheme === 'dark' ? theme.white : theme.black,
+                  opacity: 1,
+                },
+              },
+            })}
+            {...field}
+            value={field.value !== undefined ? field.value : defaultValue}
+            error={showErrors && fieldState.error?.message}
+            type="text"
+            data-test-id="step-name"
+            placeholder="Enter step name"
+            disabled={readonly}
+          />
+        );
+      }}
+    />
+  );
+};
diff --git a/apps/web/src/pages/templates/components/SubPageWrapper.tsx b/apps/web/src/pages/templates/components/SubPageWrapper.tsx
new file mode 100644
index 00000000000..54b6b23dbd5
--- /dev/null
+++ b/apps/web/src/pages/templates/components/SubPageWrapper.tsx
@@ -0,0 +1,72 @@
+import { Stack, Title, UnstyledButton, useMantineColorScheme } from '@mantine/core';
+import { CSSProperties } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { colors } from '../../../design-system';
+import { Close } from '../../../design-system/icons/actions/Close';
+import { useBasePath } from '../hooks/useBasePath';
+
+export const SubPageWrapper = ({
+  children,
+  title,
+  style,
+  color = colors.B60,
+}: {
+  children: any;
+  title: string | any;
+  style?: CSSProperties | undefined;
+  color?: string;
+}) => {
+  const navigate = useNavigate();
+  const path = useBasePath();
+  const { colorScheme } = useMantineColorScheme();
+
+  return (
+    <div
+      style={{
+        padding: '24px',
+        backgroundColor: colorScheme === 'dark' ? colors.B17 : colors.white,
+        borderRadius: '0 7px 7px 0 ',
+        height: '100%',
+        width: 460,
+        position: 'relative',
+        ...style,
+      }}
+      data-test-id="step-page-wrapper"
+    >
+      <div style={{ display: 'flex', marginBottom: 24 }}>
+        <Stack
+          style={{
+            flex: '1 1 auto',
+            height: 48,
+          }}
+        >
+          <Title
+            sx={{
+              lineHeight: '48px',
+              flex: '1 1 auto',
+              display: 'flex',
+              flexFlow: 'Column',
+            }}
+            color={color}
+            size={20}
+            weight="bold"
+          >
+            {title}
+          </Title>
+        </Stack>
+        <UnstyledButton
+          sx={{
+            height: 48,
+          }}
+          onClick={() => {
+            navigate(path);
+          }}
+          data-test-id="close-step-page"
+        >
+          <Close color={colors.B60} />
+        </UnstyledButton>
+      </div>
+      {children}
+    </div>
+  );
+};
diff --git a/apps/web/src/pages/templates/components/TemplateEditor.tsx b/apps/web/src/pages/templates/components/TemplateEditor.tsx
index 4974d0c1cc6..552e5a8b603 100644
--- a/apps/web/src/pages/templates/components/TemplateEditor.tsx
+++ b/apps/web/src/pages/templates/components/TemplateEditor.tsx
@@ -1,6 +1,5 @@
 import { useFormContext } from 'react-hook-form';
 import { ChannelTypeEnum, StepTypeEnum } from '@novu/shared';
-
 import { EmailMessagesCards } from './email-editor/EmailMessagesCards';
 import { TemplateInAppEditor } from './in-app-editor/TemplateInAppEditor';
 import { TemplateSMSEditor } from './TemplateSMSEditor';
@@ -8,15 +7,21 @@ import type { IForm } from './formTypes';
 import { TemplatePushEditor } from './TemplatePushEditor';
 import { TemplateChatEditor } from './chat-editor/TemplateChatEditor';
 import { useActiveIntegrations } from '../../../hooks';
-import { ActivePageEnum } from '../../../constants/editorEnums';
+import { useNavigate, useParams } from 'react-router-dom';
+import { SubPageWrapper } from './SubPageWrapper';
+import { DigestMetadata } from '../workflow/DigestMetadata';
+import { DelayMetadata } from '../workflow/DelayMetadata';
+import { colors } from '../../../design-system';
+import { useEffect, useMemo } from 'react';
+import { useBasePath } from '../hooks/useBasePath';
+import { StepName } from './StepName';
+import { DeleteStepRow } from './DeleteStepRow';
 
-export const TemplateEditor = ({
-  activePage,
-  activeStepIndex,
-}: {
-  activePage: ActivePageEnum;
-  activeStepIndex: number;
-}) => {
+export const TemplateEditor = () => {
+  const { channel, stepUuid = '' } = useParams<{
+    channel: StepTypeEnum | undefined;
+    stepUuid: string;
+  }>();
   const { integrations } = useActiveIntegrations();
   const {
     control,
@@ -25,81 +30,90 @@ export const TemplateEditor = ({
   } = useFormContext<IForm>();
   const steps = watch('steps');
 
+  const index = useMemo(
+    () => steps.findIndex((message) => message.template.type === channel && message.uuid === stepUuid),
+    [channel, stepUuid, steps]
+  );
+
+  const navigate = useNavigate();
+  const basePath = useBasePath();
+
+  useEffect(() => {
+    if (index > -1 || steps.length === 0) {
+      return;
+    }
+    navigate(basePath);
+  }, [index, steps]);
+
+  if (index === -1 || channel === undefined) {
+    return null;
+  }
+
+  if (channel === StepTypeEnum.IN_APP) {
+    return (
+      <SubPageWrapper
+        color={colors.white}
+        title={<StepName index={index} color={colors.B60} channel={channel} />}
+        style={{ width: '100%', borderTopLeftRadius: 7, borderBottomLeftRadius: 7, paddingBottom: 96 }}
+      >
+        <TemplateInAppEditor errors={errors} control={control} index={index} />
+        <DeleteStepRow />
+      </SubPageWrapper>
+    );
+  }
+
+  if (channel === StepTypeEnum.EMAIL) {
+    return (
+      <SubPageWrapper
+        color={colors.white}
+        title={<StepName index={index} color={colors.B60} channel={channel} />}
+        style={{ width: '100%', borderTopLeftRadius: 7, borderBottomLeftRadius: 7, paddingBottom: 96 }}
+      >
+        <EmailMessagesCards
+          index={index}
+          isIntegrationActive={!!integrations?.some((integration) => integration.channel === ChannelTypeEnum.EMAIL)}
+        />
+        <DeleteStepRow />
+      </SubPageWrapper>
+    );
+  }
+
   return (
-    <div>
-      {activePage === ActivePageEnum.SMS && (
-        <div style={{ padding: '20px 25px' }}>
-          {steps.map((message, index) => {
-            return message.template.type === StepTypeEnum.SMS && activeStepIndex === index ? (
-              <TemplateSMSEditor
-                key={message._id}
-                control={control}
-                index={index}
-                errors={errors}
-                isIntegrationActive={!!integrations?.some((integration) => integration.channel === ChannelTypeEnum.SMS)}
-              />
-            ) : null;
-          })}
-        </div>
-      )}
-      {activePage === ActivePageEnum.EMAIL && (
-        <div style={{ padding: '20px 25px' }}>
-          {steps.map((message, index) => {
-            return message.template.type === StepTypeEnum.EMAIL && activeStepIndex === index ? (
-              <EmailMessagesCards
-                key={message._id}
-                index={index}
-                isIntegrationActive={
-                  !!integrations?.some((integration) => integration.channel === ChannelTypeEnum.EMAIL)
-                }
-              />
-            ) : null;
-          })}
-        </div>
-      )}
-      {activePage === ActivePageEnum.IN_APP && (
-        <>
-          {steps.map((message, index) => {
-            return message.template.type === StepTypeEnum.IN_APP && activeStepIndex === index ? (
-              <TemplateInAppEditor key={message._id} errors={errors} control={control} index={index} />
-            ) : null;
-          })}
-        </>
-      )}
-      {activePage === ActivePageEnum.PUSH && (
-        <div style={{ padding: '20px 25px' }}>
-          {steps.map((message, index) => {
-            return message.template.type === StepTypeEnum.PUSH && activeStepIndex === index ? (
-              <TemplatePushEditor
-                key={message._id}
-                control={control}
-                index={index}
-                errors={errors}
-                isIntegrationActive={
-                  !!integrations?.some((integration) => integration.channel === ChannelTypeEnum.PUSH)
-                }
-              />
-            ) : null;
-          })}
-        </div>
-      )}
-      {activePage === ActivePageEnum.CHAT && (
-        <div style={{ padding: '20px 25px' }}>
-          {steps.map((message, index) => {
-            return message.template.type === StepTypeEnum.CHAT && activeStepIndex === index ? (
-              <TemplateChatEditor
-                key={index}
-                errors={errors}
-                control={control}
-                index={index}
-                isIntegrationActive={
-                  !!integrations?.some((integration) => integration.channel === ChannelTypeEnum.CHAT)
-                }
-              />
-            ) : null;
-          })}
-        </div>
-      )}
-    </div>
+    <>
+      <SubPageWrapper
+        color={colors.white}
+        title={<StepName index={index} color={colors.B60} channel={channel} />}
+        style={{ paddingBottom: 96 }}
+      >
+        {channel === StepTypeEnum.SMS && (
+          <TemplateSMSEditor
+            control={control}
+            index={index}
+            errors={errors}
+            isIntegrationActive={!!integrations?.some((integration) => integration.channel === ChannelTypeEnum.SMS)}
+          />
+        )}
+        {channel === StepTypeEnum.PUSH && (
+          <TemplatePushEditor
+            control={control}
+            index={index}
+            errors={errors}
+            isIntegrationActive={!!integrations?.some((integration) => integration.channel === ChannelTypeEnum.PUSH)}
+          />
+        )}
+        {channel === StepTypeEnum.CHAT && (
+          <TemplateChatEditor
+            key={index}
+            errors={errors}
+            control={control}
+            index={index}
+            isIntegrationActive={!!integrations?.some((integration) => integration.channel === ChannelTypeEnum.CHAT)}
+          />
+        )}
+        {channel === StepTypeEnum.DIGEST && <DigestMetadata control={control} index={index} />}
+        {channel === StepTypeEnum.DELAY && <DelayMetadata control={control} index={index} />}
+        <DeleteStepRow />
+      </SubPageWrapper>
+    </>
   );
 };
diff --git a/apps/web/src/pages/templates/components/TemplateEditorFormProvider.tsx b/apps/web/src/pages/templates/components/TemplateEditorFormProvider.tsx
index 53c6a72fd3e..6a928496442 100644
--- a/apps/web/src/pages/templates/components/TemplateEditorFormProvider.tsx
+++ b/apps/web/src/pages/templates/components/TemplateEditorFormProvider.tsx
@@ -1,4 +1,5 @@
 import { createContext, useEffect, useMemo, useCallback, useContext, useState } from 'react';
+import slugify from 'slugify';
 import { FormProvider, useForm, useFieldArray } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useParams } from 'react-router-dom';
@@ -9,9 +10,12 @@ import { StepTypeEnum, ActorTypeEnum, EmailBlockTypeEnum, IEmailBlock, TextAlign
 import type { IForm, IStepEntity } from './formTypes';
 import { useTemplateController } from './useTemplateController';
 import { mapNotificationTemplateToForm, mapFormToCreateNotificationTemplate } from './templateToFormMappers';
-import { errorMessage } from '../../../utils/notifications';
+import { errorMessage, successMessage } from '../../../utils/notifications';
 import { schema } from './notificationTemplateSchema';
 import { v4 as uuid4 } from 'uuid';
+import { useNotificationGroup } from '../../../hooks';
+import { useCreate } from '../hooks/useCreate';
+import { stepNames } from '../constants';
 
 const defaultEmailBlocks: IEmailBlock[] = [
   {
@@ -23,41 +27,45 @@ const defaultEmailBlocks: IEmailBlock[] = [
   },
 ];
 
-const makeStep = (channelType: StepTypeEnum, id: string): IStepEntity => ({
-  _id: id,
-  uuid: uuid4(),
-  template: {
-    type: channelType,
-    content: channelType === StepTypeEnum.EMAIL ? defaultEmailBlocks : '',
-    contentType: 'editor',
-    variables: [],
-    ...(channelType === StepTypeEnum.IN_APP && {
-      actor: {
-        type: ActorTypeEnum.NONE,
-        data: null,
+const makeStep = (channelType: StepTypeEnum, id: string): IStepEntity => {
+  return {
+    _id: id,
+    uuid: uuid4(),
+    name: stepNames[channelType],
+    template: {
+      subject: '',
+      type: channelType,
+      content: channelType === StepTypeEnum.EMAIL ? defaultEmailBlocks : '',
+      contentType: 'editor',
+      variables: [],
+      ...(channelType === StepTypeEnum.IN_APP && {
+        actor: {
+          type: ActorTypeEnum.NONE,
+          data: null,
+        },
+        enableAvatar: false,
+      }),
+    },
+    active: true,
+    shouldStopOnFail: false,
+    filters: [],
+    ...(channelType === StepTypeEnum.EMAIL && {
+      replyCallback: {
+        active: false,
       },
-      enableAvatar: false,
     }),
-  },
-  active: true,
-  shouldStopOnFail: false,
-  filters: [],
-  ...(channelType === StepTypeEnum.EMAIL && {
-    replyCallback: {
-      active: false,
-    },
-  }),
-  ...(channelType === StepTypeEnum.DIGEST && {
-    metadata: {
-      type: DigestTypeEnum.REGULAR,
-    },
-  }),
-  ...(channelType === StepTypeEnum.DELAY && {
-    metadata: {
-      type: DigestTypeEnum.REGULAR,
-    },
-  }),
-});
+    ...(channelType === StepTypeEnum.DIGEST && {
+      metadata: {
+        type: DigestTypeEnum.REGULAR,
+      },
+    }),
+    ...(channelType === StepTypeEnum.DELAY && {
+      metadata: {
+        type: DigestTypeEnum.REGULAR,
+      },
+    }),
+  };
+};
 
 interface ITemplateEditorFormContext {
   template?: INotificationTemplate;
@@ -65,10 +73,8 @@ interface ITemplateEditorFormContext {
   isCreating: boolean;
   isUpdating: boolean;
   isDeleting: boolean;
-  editMode: boolean;
   trigger?: INotificationTrigger;
-  createdTemplateId?: string;
-  onSubmit: (data: IForm, callbacks?: { onCreateSuccess: () => void }) => Promise<void>;
+  onSubmit: (data: IForm) => Promise<void>;
   addStep: (channelType: StepTypeEnum, id: string, stepIndex?: number) => void;
   deleteStep: (index: number) => void;
 }
@@ -78,16 +84,14 @@ const TemplateEditorFormContext = createContext<ITemplateEditorFormContext>({
   isCreating: false,
   isUpdating: false,
   isDeleting: false,
-  editMode: true,
   trigger: undefined,
-  createdTemplateId: undefined,
   onSubmit: (() => {}) as any,
   addStep: () => {},
   deleteStep: () => {},
 });
 
 const defaultValues: IForm = {
-  name: '',
+  name: 'Untitled',
   notificationGroupId: '',
   description: '',
   identifier: '',
@@ -110,43 +114,47 @@ const TemplateEditorFormProvider = ({ children }) => {
     defaultValues,
     mode: 'onChange',
   });
-  const [{ editMode, trigger, createdTemplateId }, setState] = useState<{
-    editMode: boolean;
-    trigger?: INotificationTrigger;
-    createdTemplateId?: string;
-  }>({
-    editMode: !!templateId,
-  });
-
-  const setTrigger = useCallback(
-    (newTrigger: INotificationTrigger) => setState((old) => ({ ...old, trigger: newTrigger })),
-    [setState]
-  );
-
-  const setCreatedTemplateId = useCallback(
-    (newCreatedTemplateId: string) => setState((old) => ({ ...old, createdTemplateId: newCreatedTemplateId })),
-    [setState]
-  );
+  const [trigger, setTrigger] = useState<INotificationTrigger>();
 
   const {
     reset,
-    formState: { isDirty: isDirtyForm },
+    formState: { isDirty: isDirtyForm, isValid },
+    watch,
   } = methods;
 
+  const name = watch('name');
+  const identifier = watch('identifier');
+
   const steps = useFieldArray({
     control: methods.control,
     name: 'steps',
   });
 
-  const {
-    template,
-    isLoading,
-    isCreating,
-    isUpdating,
-    isDeleting,
-    updateNotificationTemplate,
-    createNotificationTemplate,
-  } = useTemplateController(templateId);
+  useEffect(() => {
+    if (!template?.triggers[0].identifier.includes('untitled')) {
+      return;
+    }
+    const newIdentifier = slugify(name, {
+      lower: true,
+      strict: true,
+    });
+
+    if (newIdentifier === identifier) {
+      return;
+    }
+
+    methods.setValue('identifier', newIdentifier);
+    if (trigger) {
+      setTrigger({
+        ...trigger,
+        identifier: newIdentifier,
+      });
+    }
+  }, [name]);
+
+  const { template, isLoading, isCreating, isUpdating, isDeleting, updateNotificationTemplate } =
+    useTemplateController(templateId);
+  const { groups, loading: loadingGroups } = useNotificationGroup();
 
   useEffect(() => {
     if (isDirtyForm) {
@@ -154,33 +162,30 @@ const TemplateEditorFormProvider = ({ children }) => {
     }
 
     if (template && template.steps) {
+      setTrigger(template.triggers[0]);
       const form = mapNotificationTemplateToForm(template);
       reset(form);
-      setTrigger(template.triggers[0]);
     }
   }, [isDirtyForm, template]);
 
+  useCreate(templateId, groups, setTrigger, methods.getValues);
+
   const onSubmit = useCallback(
-    async (form: IForm, { onCreateSuccess } = {}) => {
+    async (form: IForm, showMessage = true) => {
       const payloadToCreate = mapFormToCreateNotificationTemplate(form);
 
       try {
-        if (editMode) {
-          const response = await updateNotificationTemplate({
-            id: templateId,
-            data: {
-              ...payloadToCreate,
-              identifier: form.identifier,
-            },
-          });
-          setTrigger(response.triggers[0]);
-          reset(form);
-        } else {
-          const response = await createNotificationTemplate({ ...payloadToCreate, active: true, draft: false });
-          setTrigger(response.triggers[0]);
-          setCreatedTemplateId(response._id || '');
-          reset(payloadToCreate);
-          onCreateSuccess?.();
+        const response = await updateNotificationTemplate({
+          id: templateId,
+          data: {
+            ...payloadToCreate,
+            identifier: form.identifier,
+          },
+        });
+        setTrigger(response.triggers[0]);
+        reset(payloadToCreate);
+        if (showMessage) {
+          successMessage('Trigger code is updated successfully', 'workflowSaved');
         }
       } catch (e: any) {
         Sentry.captureException(e);
@@ -188,15 +193,7 @@ const TemplateEditorFormProvider = ({ children }) => {
         errorMessage(e.message || 'Unexpected error occurred');
       }
     },
-    [
-      templateId,
-      editMode,
-      updateNotificationTemplate,
-      createNotificationTemplate,
-      reset,
-      setTrigger,
-      setCreatedTemplateId,
-    ]
+    [templateId, updateNotificationTemplate, setTrigger]
   );
 
   const addStep = useCallback(
@@ -222,30 +219,16 @@ const TemplateEditorFormProvider = ({ children }) => {
   const value = useMemo<ITemplateEditorFormContext>(
     () => ({
       template,
-      isLoading,
+      isLoading: isLoading || loadingGroups,
       isCreating,
       isUpdating,
       isDeleting,
-      editMode: editMode,
       trigger: trigger,
-      createdTemplateId: createdTemplateId,
       onSubmit,
       addStep,
       deleteStep,
     }),
-    [
-      template,
-      isLoading,
-      isCreating,
-      isUpdating,
-      isDeleting,
-      editMode,
-      trigger,
-      createdTemplateId,
-      onSubmit,
-      addStep,
-      deleteStep,
-    ]
+    [template, isLoading, isCreating, isUpdating, isDeleting, trigger, onSubmit, addStep, deleteStep, loadingGroups]
   );
 
   return (
diff --git a/apps/web/src/pages/templates/components/TemplatePageHeader.tsx b/apps/web/src/pages/templates/components/TemplatePageHeader.tsx
deleted file mode 100644
index 59552b65c89..00000000000
--- a/apps/web/src/pages/templates/components/TemplatePageHeader.tsx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { Center, Container, Grid, Group } from '@mantine/core';
-
-import { Button, colors, Switch, Title, Text } from '../../../design-system';
-import { ArrowLeft } from '../../../design-system/icons';
-import { EditorPages } from '../editor/TemplateEditorPage';
-import { useEnvController } from '../../../hooks';
-import { When } from '../../../components/utils/When';
-import { useTemplateEditorForm } from './TemplateEditorFormProvider';
-import { useStatusChangeControllerHook } from './useStatusChangeController';
-import { ActivePageEnum } from '../../../constants/editorEnums';
-
-const Header = ({
-  activePage,
-  editMode,
-  name = 'Workflow Editor',
-}: {
-  editMode: boolean;
-  activePage: ActivePageEnum;
-  name?: string;
-}) => {
-  if (activePage === ActivePageEnum.SETTINGS) {
-    return <>{editMode ? 'Edit Template' : 'Create new template'}</>;
-  }
-  if (activePage === ActivePageEnum.WORKFLOW) {
-    return <>{name}</>;
-  }
-
-  if (activePage === ActivePageEnum.USER_PREFERENCE) {
-    return <>{'User Preference Editor'}</>;
-  }
-
-  if (activePage === ActivePageEnum.SMS) {
-    return <>{'Edit SMS Template'}</>;
-  }
-
-  if (activePage === ActivePageEnum.EMAIL) {
-    return <>{'Edit Email Template'}</>;
-  }
-
-  if (activePage === ActivePageEnum.PUSH) {
-    return <>{'Edit Push Template'}</>;
-  }
-
-  if (activePage === ActivePageEnum.CHAT) {
-    return <>{'Edit Chat Template'}</>;
-  }
-
-  if (activePage === ActivePageEnum.IN_APP) {
-    return <>{'Edit Notification Template'}</>;
-  }
-
-  return <>{editMode ? 'Edit Template' : 'Create new template'}</>;
-};
-
-interface Props {
-  templateId: string;
-  loading: boolean;
-  disableSubmit: boolean;
-  setActivePage: (activePage: ActivePageEnum) => void;
-  activePage: ActivePageEnum;
-  onTestWorkflowClicked: () => void;
-}
-
-export const TemplatePageHeader = ({
-  templateId,
-  loading,
-  disableSubmit,
-  activePage,
-  setActivePage,
-  onTestWorkflowClicked,
-}: Props) => {
-  const { template, editMode } = useTemplateEditorForm();
-  const { readonly } = useEnvController();
-
-  const { isTemplateActive, changeActiveStatus, isStatusChangeLoading } = useStatusChangeControllerHook(
-    templateId,
-    template
-  );
-
-  return (
-    <Container fluid sx={{ padding: '20px', width: '100%' }}>
-      <Group position="apart">
-        <div>
-          <Title>
-            <Header editMode={editMode} activePage={activePage} name={template?.name} />
-          </Title>
-          <When truthy={EditorPages.includes(activePage)}>
-            <Center
-              mt={10}
-              data-test-id="go-back-button"
-              onClick={() => {
-                setActivePage(
-                  activePage === ActivePageEnum.WORKFLOW ? ActivePageEnum.SETTINGS : ActivePageEnum.WORKFLOW
-                );
-              }}
-              inline
-              style={{ cursor: 'pointer' }}
-            >
-              <ArrowLeft color={colors.B60} />
-              <Text ml={5} color={colors.B60}>
-                Go Back
-              </Text>
-            </Center>
-          </When>
-        </div>
-        <div>
-          <Grid align="center" gutter={50}>
-            <When truthy={!EditorPages.includes(activePage)}>
-              {editMode && (
-                <Grid.Col span={4}>
-                  <Switch
-                    label={isTemplateActive ? 'Enabled' : 'Disabled'}
-                    loading={isStatusChangeLoading}
-                    disabled={readonly}
-                    data-test-id="active-toggle-switch"
-                    onChange={(e) => changeActiveStatus(e.target.checked)}
-                    checked={isTemplateActive || false}
-                  />
-                </Grid.Col>
-              )}
-
-              <Grid.Col span={editMode ? 4 : 6}>
-                <Button variant="outline" data-test-id="test-workflow-btn" onClick={onTestWorkflowClicked}>
-                  Test Workflow
-                </Button>
-              </Grid.Col>
-            </When>
-
-            <Grid.Col span={editMode ? 4 : 6}>
-              <Button
-                mr={20}
-                data-test-id="notification-template-submit-btn"
-                loading={loading}
-                disabled={disableSubmit}
-                submit
-              >
-                {editMode ? 'Update' : 'Create'}
-              </Button>
-            </Grid.Col>
-          </Grid>
-        </div>
-      </Group>
-    </Container>
-  );
-};
diff --git a/apps/web/src/pages/templates/components/TemplatePushEditor.tsx b/apps/web/src/pages/templates/components/TemplatePushEditor.tsx
index 83d298dc0cd..36d568b8fc7 100644
--- a/apps/web/src/pages/templates/components/TemplatePushEditor.tsx
+++ b/apps/web/src/pages/templates/components/TemplatePushEditor.tsx
@@ -6,6 +6,7 @@ import type { IForm } from './formTypes';
 import { Textarea } from '../../../design-system';
 import { useEnvController, useVariablesManager } from '../../../hooks';
 import { VariableManager } from './VariableManager';
+import { StepSettings } from '../workflow/SideBar/StepSettings';
 
 const templateFields = ['content', 'title'];
 
@@ -27,13 +28,18 @@ export function TemplatePushEditor({
 
   return (
     <>
-      {!isIntegrationActive ? <LackIntegrationError channel="Push" channelType={ChannelTypeEnum.PUSH} /> : null}
+      {!isIntegrationActive ? (
+        <LackIntegrationError channelType={ChannelTypeEnum.PUSH} iconHeight={34} iconWidth={34} />
+      ) : null}
+      <StepSettings index={index} />
       <Controller
         name={`steps.${index}.template.title` as any}
         defaultValue=""
         control={control}
         render={({ field }) => (
           <Textarea
+            mt={24}
+            mb={24}
             {...field}
             data-test-id="pushNotificationTitle"
             error={errors?.steps ? errors.steps[index]?.template?.title?.message : undefined}
diff --git a/apps/web/src/pages/templates/components/TemplateSMSEditor.tsx b/apps/web/src/pages/templates/components/TemplateSMSEditor.tsx
index 6c8a3812bc6..49c006ea60d 100644
--- a/apps/web/src/pages/templates/components/TemplateSMSEditor.tsx
+++ b/apps/web/src/pages/templates/components/TemplateSMSEditor.tsx
@@ -6,6 +6,7 @@ import type { IForm } from './formTypes';
 import { Textarea } from '../../../design-system';
 import { useEnvController, useVariablesManager } from '../../../hooks';
 import { VariableManager } from './VariableManager';
+import { StepSettings } from '../workflow/SideBar/StepSettings';
 
 const templateFields = ['content'];
 
@@ -27,7 +28,10 @@ export function TemplateSMSEditor({
 
   return (
     <>
-      {!isIntegrationActive ? <LackIntegrationError channel="SMS" channelType={ChannelTypeEnum.SMS} /> : null}
+      {!isIntegrationActive ? (
+        <LackIntegrationError channelType={ChannelTypeEnum.SMS} iconHeight={34} iconWidth={34} />
+      ) : null}
+      <StepSettings index={index} />
       <Controller
         name={`steps.${index}.template.content` as any}
         defaultValue=""
@@ -39,6 +43,7 @@ export function TemplateSMSEditor({
             error={errors?.steps ? errors.steps[index]?.template?.content?.message : undefined}
             disabled={readonly}
             minRows={4}
+            mt={24}
             value={field.value || ''}
             label="SMS message content"
             placeholder="Add notification content here..."
diff --git a/apps/web/src/pages/templates/components/TemplateSettings.tsx b/apps/web/src/pages/templates/components/TemplateSettings.tsx
index 81b6cb66122..2a0db6f0baf 100644
--- a/apps/web/src/pages/templates/components/TemplateSettings.tsx
+++ b/apps/web/src/pages/templates/components/TemplateSettings.tsx
@@ -1,28 +1,32 @@
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Grid, useMantineColorScheme } from '@mantine/core';
+import { useNavigate, useParams } from 'react-router-dom';
+import { Group } from '@mantine/core';
 import styled from '@emotion/styled';
 
 import { Button, colors } from '../../../design-system';
 import { NotificationSettingsForm } from './notification-setting-form/NotificationSettingsForm';
-import { TemplatesSideBar } from './TemplatesSideBar';
-import { TriggerSnippetTabs } from './TriggerSnippetTabs';
 import { Trash } from '../../../design-system/icons';
 import { DeleteConfirmModal } from './DeleteConfirmModal';
 import { useEnvController } from '../../../hooks';
 import { useTemplateEditorForm } from './TemplateEditorFormProvider';
 import { deleteTemplateById } from '../../../api/notification-templates';
 import { ROUTES } from '../../../constants/routes.enum';
-import { ActivePageEnum } from '../../../constants/editorEnums';
+import { SubPageWrapper } from './SubPageWrapper';
+import { WorkflowSettingsTabs } from './WorkflowSettingsTabs';
+import { useFormContext } from 'react-hook-form';
+import { IForm } from './formTypes';
 
-export const TemplateSettings = ({ activePage, setActivePage, templateId }) => {
-  const { colorScheme } = useMantineColorScheme();
+export const TemplateSettings = () => {
+  const { templateId = '' } = useParams<{ templateId: string }>();
   const { readonly } = useEnvController();
-  const { template, editMode, trigger } = useTemplateEditorForm();
+  const { trigger } = useTemplateEditorForm();
   const [toDelete, setToDelete] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
   const [isError, setIsError] = useState<string | undefined>(undefined);
   const navigate = useNavigate();
+  const { watch } = useFormContext<IForm>();
+
+  const name = watch('name');
 
   const confirmDelete = async () => {
     setIsDeleting(true);
@@ -49,68 +53,45 @@ export const TemplateSettings = ({ activePage, setActivePage, templateId }) => {
   };
 
   return (
-    <div style={{ marginLeft: 12, marginRight: 12, padding: 17.5, minHeight: 500 }}>
-      <Grid grow style={{ minHeight: 500 }}>
-        <Grid.Col md={4} sm={6}>
-          <SideBarWrapper dark={colorScheme === 'dark'} style={{ paddingRight: 50 }}>
-            <TemplatesSideBar
-              activeTab={activePage}
-              changeTab={setActivePage}
-              showTriggerSection={!!template && !!trigger}
-            />
-          </SideBarWrapper>
-        </Grid.Col>
-        <Grid.Col md={8} sm={6} style={{ position: 'relative' }}>
-          <div style={{ paddingLeft: 23 }}>
-            {activePage === ActivePageEnum.SETTINGS && (
-              <>
-                <NotificationSettingsForm editMode={editMode} trigger={trigger} />
-                {editMode && (
-                  <DeleteNotificationButton
-                    mt={10}
-                    variant="outline"
-                    disabled={readonly}
-                    data-test-id="delete-notification-button"
-                    onClick={onDelete}
-                  >
-                    <Trash
-                      style={{
-                        marginRight: '5px',
-                      }}
-                    />
-                    Delete Template
-                  </DeleteNotificationButton>
-                )}
-                <DeleteConfirmModal
-                  target="notification template"
-                  isOpen={toDelete}
-                  confirm={confirmDelete}
-                  cancel={cancelDelete}
-                  isLoading={isDeleting}
-                  error={isError}
-                />
-              </>
-            )}
+    <SubPageWrapper title="Workflow Settings">
+      <WorkflowSettingsTabs />
+      <NotificationSettingsForm trigger={trigger} />
 
-            {template && trigger && activePage === ActivePageEnum.TRIGGER_SNIPPET && (
-              <TriggerSnippetTabs trigger={trigger} />
-            )}
-          </div>
-        </Grid.Col>
-      </Grid>
-    </div>
+      <Group position="right">
+        <DeleteNotificationButton
+          mt={48}
+          variant="outline"
+          disabled={readonly}
+          data-test-id="delete-notification-button"
+          onClick={onDelete}
+        >
+          <Trash
+            style={{
+              marginRight: '5px',
+            }}
+          />
+          Delete Workflow
+        </DeleteNotificationButton>
+      </Group>
+      <DeleteConfirmModal
+        title={`Delete ${name} workflow?`}
+        description={
+          'This cannot be undone. ' +
+          'The trigger code generated based on this workflow will be disabled and the notification will no longer be sent.'
+        }
+        isOpen={toDelete}
+        isLoading={isDeleting}
+        error={isError}
+        confirm={confirmDelete}
+        cancel={cancelDelete}
+        confirmButtonText="Delete Workflow"
+        cancelButtonText="Cancel"
+      />
+    </SubPageWrapper>
   );
 };
 
-const SideBarWrapper = styled.div<{ dark: boolean }>`
-  border-right: 1px solid ${({ dark }) => (dark ? colors.B20 : colors.BGLight)};
-  height: 100%;
-`;
-
 const DeleteNotificationButton = styled(Button)`
-  position: absolute;
-  right: 20px;
-  bottom: 20px;
   background: rgba(229, 69, 69, 0.15);
   color: ${colors.error};
   box-shadow: none;
diff --git a/apps/web/src/pages/templates/components/TemplateTriggerModal.tsx b/apps/web/src/pages/templates/components/TemplateTriggerModal.tsx
deleted file mode 100644
index 06197f70a44..00000000000
--- a/apps/web/src/pages/templates/components/TemplateTriggerModal.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { INotificationTrigger } from '@novu/shared';
-import { Modal, useMantineTheme } from '@mantine/core';
-import { Button, colors, shadows, Title } from '../../../design-system';
-import { TriggerSnippetTabs } from './TriggerSnippetTabs';
-
-export function TemplateTriggerModal({
-  isVisible,
-  onDismiss,
-  trigger,
-}: {
-  isVisible: boolean;
-  onDismiss: () => void;
-  trigger: INotificationTrigger;
-}) {
-  const theme = useMantineTheme();
-  const dark = theme.colorScheme === 'dark';
-
-  return (
-    <Modal
-      onClose={onDismiss}
-      opened={isVisible}
-      overlayColor={dark ? colors.BGDark : colors.BGLight}
-      overlayOpacity={0.7}
-      styles={{
-        modal: {
-          backgroundColor: dark ? colors.B15 : colors.white,
-        },
-        body: {
-          paddingTop: '5px',
-        },
-        inner: {
-          paddingTop: '180px',
-        },
-      }}
-      sx={{ backdropFilter: 'blur(10px)' }}
-      title={<Title>Trigger implementation code</Title>}
-      data-test-id="success-trigger-modal"
-      shadow={dark ? shadows.dark : shadows.medium}
-      radius="md"
-      size="xl"
-    >
-      <TriggerSnippetTabs trigger={trigger} />
-      <div style={{ alignItems: 'end' }}>
-        <Button data-test-id="trigger-snippet-btn" mt={30} onClick={onDismiss} inherit>
-          Got it
-        </Button>
-      </div>
-    </Modal>
-  );
-}
diff --git a/apps/web/src/pages/templates/components/TemplatesSideBar.tsx b/apps/web/src/pages/templates/components/TemplatesSideBar.tsx
deleted file mode 100644
index 245a30a24b6..00000000000
--- a/apps/web/src/pages/templates/components/TemplatesSideBar.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { useMantineTheme } from '@mantine/core';
-import { useFormState } from 'react-hook-form';
-import styled from '@emotion/styled';
-
-import { colors, TemplateButton, Text, Tooltip } from '../../../design-system';
-import { BellGradient, ConnectGradient, LevelsGradient, TapeGradient } from '../../../design-system/icons';
-import { When } from '../../../components/utils/When';
-import { getExplicitErrors } from '../shared/errors';
-import { ActivePageEnum } from '../../../constants/editorEnums';
-
-export function TemplatesSideBar({
-  activeTab,
-  changeTab,
-  showTriggerSection = false,
-  minimalView = false,
-}: {
-  activeTab: string;
-  changeTab: (string) => void;
-  showTriggerSection: boolean;
-  minimalView?: boolean;
-}) {
-  const { errors } = useFormState<{
-    name: string;
-    notificationGroupId: string;
-  }>();
-
-  const theme = useMantineTheme();
-  const textColor = theme.colorScheme === 'dark' ? colors.B40 : colors.B70;
-
-  return (
-    <>
-      <NavSection>
-        <StyledTooltip position={'right'} label={minimalView ? `Notification Settings` : ''} disabled={!minimalView}>
-          <span>
-            <TemplateButton
-              tabKey={ActivePageEnum.SETTINGS}
-              changeTab={changeTab}
-              Icon={BellGradient}
-              testId="settingsButton"
-              active={activeTab === ActivePageEnum.SETTINGS}
-              description={minimalView ? '' : `Configure cross-channel notification settings`}
-              label={minimalView ? '' : `Notification Settings`}
-              errors={getExplicitErrors(errors, 'settings')}
-            />
-          </span>
-        </StyledTooltip>
-      </NavSection>
-
-      <NavSection>
-        <StyledTooltip position={'right'} label={minimalView ? `Workflow Editor` : ''} disabled={!minimalView}>
-          <span>
-            <TemplateButton
-              tabKey={ActivePageEnum.WORKFLOW}
-              changeTab={changeTab}
-              Icon={ConnectGradient}
-              testId="workflowButton"
-              active={activeTab === ActivePageEnum.WORKFLOW}
-              description={minimalView ? '' : `Create multi-step workflows`}
-              label={minimalView ? '' : `Workflow Editor`}
-              errors={getExplicitErrors(errors, 'steps')}
-            />
-          </span>
-        </StyledTooltip>
-      </NavSection>
-
-      <NavSection>
-        <StyledTooltip position={'right'} label={minimalView ? `Update user preference` : ''} disabled={!minimalView}>
-          <span>
-            <TemplateButton
-              tabKey={ActivePageEnum.USER_PREFERENCE}
-              changeTab={changeTab}
-              Icon={LevelsGradient}
-              testId="userPreferenceButton"
-              active={activeTab === ActivePageEnum.USER_PREFERENCE}
-              label={minimalView ? '' : `User Preference Editor`}
-              description={minimalView ? '' : `Update user preference`}
-            />
-          </span>
-        </StyledTooltip>
-      </NavSection>
-
-      {showTriggerSection && (
-        <NavSection>
-          <When truthy={!minimalView}>
-            <Text mt={10} mb={20} color={textColor}>
-              Implementation Code
-            </Text>
-          </When>
-
-          <StyledTooltip position={'right'} label={minimalView ? `Trigger Snippet` : ''} disabled={!minimalView}>
-            <span>
-              <TemplateButton
-                tabKey={ActivePageEnum.TRIGGER_SNIPPET}
-                changeTab={changeTab}
-                Icon={TapeGradient}
-                testId="triggerCodeSelector"
-                active={activeTab === ActivePageEnum.TRIGGER_SNIPPET}
-                description={minimalView ? '' : `Get your notification trigger code snippet`}
-                label={minimalView ? '' : `Trigger Snippet`}
-              />
-            </span>
-          </StyledTooltip>
-        </NavSection>
-      )}
-    </>
-  );
-}
-
-export const NavSection = styled.div``;
-
-const StyledTooltip = styled(Tooltip)`
-  width: 100%;
-  display: flex;
-`;
diff --git a/apps/web/src/pages/templates/components/TestWorkflow.cy.tsx b/apps/web/src/pages/templates/components/TestWorkflow.cy.tsx
new file mode 100644
index 00000000000..5ec1864108c
--- /dev/null
+++ b/apps/web/src/pages/templates/components/TestWorkflow.cy.tsx
@@ -0,0 +1,54 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+import { TestWrapper } from '../../../testing';
+import { TestWorkflow } from './TestWorkflow';
+import { BrowserRouter } from 'react-router-dom';
+import { CONTEXT_PATH } from '../../../config';
+import { TriggerTypeEnum } from '@novu/shared';
+
+const queryClient = new QueryClient();
+
+describe('TestWorkflow Component', function () {
+  it('should display subscriberId and empty json values when there are no variables', function () {
+    cy.mount(
+      <BrowserRouter basename={CONTEXT_PATH}>
+        <QueryClientProvider client={queryClient}>
+          <TestWrapper>
+            <TestWorkflow
+              trigger={{ variables: [], type: TriggerTypeEnum.EVENT, identifier: '1234', subscriberVariables: [] }}
+            />
+          </TestWrapper>
+        </QueryClientProvider>
+      </BrowserRouter>
+    );
+
+    cy.getByTestId('test-trigger-to-param').contains('"subscriberId": "<REPLACE_WITH_DATA>"');
+    cy.getByTestId('test-trigger-payload-param').contains('{ }');
+    cy.getByTestId('test-trigger-overrides-param').contains('{ }');
+  });
+
+  it('should add variables and subscriber variables to input fields', function () {
+    cy.mount(
+      <BrowserRouter basename={CONTEXT_PATH}>
+        <QueryClientProvider client={queryClient}>
+          <TestWrapper>
+            <TestWorkflow
+              trigger={{
+                variables: [{ name: 'firstVariable' }, { name: 'secondVariable' }],
+                type: TriggerTypeEnum.EVENT,
+                identifier: '1234',
+                subscriberVariables: [{ name: 'email' }],
+              }}
+            />
+          </TestWrapper>
+        </QueryClientProvider>
+      </BrowserRouter>
+    );
+
+    cy.getByTestId('test-trigger-to-param').contains('"subscriberId": "<REPLACE_WITH_DATA>",');
+    cy.getByTestId('test-trigger-to-param').contains('"email": "<REPLACE_WITH_DATA>"');
+    cy.getByTestId('test-trigger-payload-param').contains('"firstVariable": "<REPLACE_WITH_DATA>",');
+    cy.getByTestId('test-trigger-payload-param').contains('"secondVariable": "<REPLACE_WITH_DATA>"');
+    cy.getByTestId('test-trigger-overrides-param').contains('{ }');
+  });
+});
diff --git a/apps/web/src/pages/templates/components/TestWorkflowModal.tsx b/apps/web/src/pages/templates/components/TestWorkflow.tsx
similarity index 65%
rename from apps/web/src/pages/templates/components/TestWorkflowModal.tsx
rename to apps/web/src/pages/templates/components/TestWorkflow.tsx
index 49ee401e27d..61fb84b470e 100644
--- a/apps/web/src/pages/templates/components/TestWorkflowModal.tsx
+++ b/apps/web/src/pages/templates/components/TestWorkflow.tsx
@@ -1,15 +1,19 @@
-import { useMemo, useEffect } from 'react';
-import { JsonInput } from '@mantine/core';
+import { useMemo, useEffect, useState } from 'react';
+import { Group, JsonInput, Text } from '@mantine/core';
 import { useForm } from '@mantine/form';
 import { useMutation } from '@tanstack/react-query';
 import * as Sentry from '@sentry/react';
-import { INotificationTrigger, IUserEntity, INotificationTriggerVariable } from '@novu/shared';
-import { Button, Title, Modal } from '../../../design-system';
+import { IUserEntity, INotificationTriggerVariable } from '@novu/shared';
+import { Button, colors } from '../../../design-system';
 import { inputStyles } from '../../../design-system/config/inputs.styles';
 import { errorMessage, successMessage } from '../../../utils/notifications';
 import { useAuthContext } from '../../../components/providers/AuthProvider';
 import { getSubscriberValue, getPayloadValue } from './TriggerSnippetTabs';
 import { testTrigger } from '../../../api/notification-templates';
+import { ExecutionDetailsModalWrapper } from './ExecutionDetailsModalWrapper';
+import { useDisclosure } from '@mantine/hooks';
+import { SubPageWrapper } from './SubPageWrapper';
+import { TriggerSegmentControl } from './TriggerSegmentControl';
 
 const makeToValue = (subscriberVariables: INotificationTriggerVariable[], currentUser?: IUserEntity) => {
   const subsVars = getSubscriberValue(
@@ -29,21 +33,11 @@ function subscriberExist(subscriberVariables: INotificationTriggerVariable[]) {
   return subscriberVariables?.some((variable) => variable.name === 'subscriberId');
 }
 
-export function TestWorkflowModal({
-  isVisible,
-  onDismiss,
-  trigger,
-  setTransactionId,
-  openExecutionModal,
-}: {
-  isVisible: boolean;
-  onDismiss: () => void;
-  openExecutionModal: () => void;
-  setTransactionId: (id: string) => void;
-  trigger: INotificationTrigger;
-}) {
+export function TestWorkflow({ trigger }) {
+  const [transactionId, setTransactionId] = useState<string>('');
   const { currentUser } = useAuthContext();
-  const { mutateAsync: triggerTestEvent } = useMutation(testTrigger);
+  const { mutateAsync: triggerTestEvent, isLoading } = useMutation(testTrigger);
+  const [executionModalOpened, { close: closeExecutionModal, open: openExecutionModal }] = useDisclosure(false);
 
   const subscriberVariables = useMemo(() => {
     if (trigger?.subscriberVariables && subscriberExist(trigger?.subscriberVariables)) {
@@ -54,7 +48,7 @@ export function TestWorkflowModal({
   }, [trigger]);
   const variables = useMemo(() => [...(trigger?.variables || [])], [trigger]);
 
-  const overridesTrigger = `{\n\n}`;
+  const overridesTrigger = '{\n\n}';
 
   function jsonValidator(value: string) {
     try {
@@ -67,7 +61,7 @@ export function TestWorkflowModal({
   const form = useForm({
     initialValues: {
       toValue: makeToValue(subscriberVariables, currentUser),
-      payloadValue: makePayloadValue(variables) === '{}' ? `{\n\n}` : makePayloadValue(variables),
+      payloadValue: makePayloadValue(variables) === '{}' ? '{\n\n}' : makePayloadValue(variables),
       overridesValue: overridesTrigger,
     },
     validate: {
@@ -97,11 +91,8 @@ export function TestWorkflowModal({
         overrides,
       });
 
-      const { transactionId = '' } = response;
-
-      setTransactionId(transactionId);
+      setTransactionId(response.transactionId || '');
       successMessage('Template triggered successfully');
-      onDismiss();
       openExecutionModal();
     } catch (e: any) {
       Sentry.captureException(e);
@@ -110,18 +101,14 @@ export function TestWorkflowModal({
   };
 
   return (
-    <Modal
-      onClose={onDismiss}
-      opened={isVisible}
-      title={<Title>Test Trigger </Title>}
-      data-test-id="test-trigger-modal"
-    >
-      <form
-        onSubmit={(e) => {
-          form.onSubmit(onTrigger)(e);
-          e.stopPropagation();
-        }}
-      >
+    <>
+      <SubPageWrapper title="Trigger">
+        <Text color={colors.B60} mt={-16} mb={24}>
+          Test trigger as if you sent it from your API or implement it by copy/pasting it into the codebase of your
+          application.
+        </Text>
+        <TriggerSegmentControl />
+
         <JsonInput
           data-test-id="test-trigger-to-param"
           formatOnBlur
@@ -154,12 +141,31 @@ export function TestWorkflowModal({
           minRows={3}
           validationError="Invalid JSON"
         />
-        <div style={{ alignItems: 'end' }}>
-          <Button disabled={!form.isValid()} data-test-id="test-trigger-btn" mt={30} inherit submit>
-            Trigger
-          </Button>
-        </div>
-      </form>
-    </Modal>
+        <Group mt={30} position="right">
+          <div data-test-id="test-workflow-btn">
+            <Button
+              sx={{
+                width: 'auto',
+              }}
+              fullWidth={false}
+              disabled={!form.isValid()}
+              data-test-id="test-trigger-btn"
+              inherit
+              loading={isLoading}
+              onClick={() => {
+                onTrigger(form.values);
+              }}
+            >
+              Run Trigger
+            </Button>
+          </div>
+        </Group>
+      </SubPageWrapper>
+      <ExecutionDetailsModalWrapper
+        transactionId={transactionId}
+        isOpen={executionModalOpened}
+        onClose={closeExecutionModal}
+      />
+    </>
   );
 }
diff --git a/apps/web/src/pages/templates/components/TestWorkflowModal.cy.tsx b/apps/web/src/pages/templates/components/TestWorkflowModal.cy.tsx
deleted file mode 100644
index 2861cc4916b..00000000000
--- a/apps/web/src/pages/templates/components/TestWorkflowModal.cy.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import { TriggerTypeEnum } from '@novu/shared';
-
-import { TestWrapper } from '../../../testing';
-import { TestWorkflowModal } from './TestWorkflowModal';
-
-const queryClient = new QueryClient();
-
-describe('TestWorkflowModal Component', function () {
-  it('should display subscriberId and empty json values when there are no variables', function () {
-    cy.mount(
-      <QueryClientProvider client={queryClient}>
-        <TestWrapper>
-          <TestWorkflowModal
-            isVisible={true}
-            onDismiss={() => {}}
-            setTransactionId={() => {}}
-            openExecutionModal={() => {}}
-            trigger={{ variables: [], type: TriggerTypeEnum.EVENT, identifier: '1234', subscriberVariables: [] }}
-          />
-        </TestWrapper>
-      </QueryClientProvider>
-    );
-
-    cy.getByTestId('test-trigger-to-param').contains(`"subscriberId": "<REPLACE_WITH_DATA>"`);
-    cy.getByTestId('test-trigger-payload-param').contains(`{ }`);
-    cy.getByTestId('test-trigger-overrides-param').contains(`{ }`);
-  });
-
-  it('should add variables and subscriber variables to input fields', function () {
-    cy.mount(
-      <QueryClientProvider client={queryClient}>
-        <TestWrapper>
-          <TestWorkflowModal
-            isVisible={true}
-            onDismiss={() => {}}
-            openExecutionModal={() => {}}
-            setTransactionId={() => {}}
-            trigger={{
-              variables: [{ name: 'firstVariable' }, { name: 'secondVariable' }],
-              type: TriggerTypeEnum.EVENT,
-              identifier: '1234',
-              subscriberVariables: [{ name: 'email' }],
-            }}
-          />
-        </TestWrapper>
-      </QueryClientProvider>
-    );
-
-    cy.getByTestId('test-trigger-to-param').contains(`"subscriberId": "<REPLACE_WITH_DATA>",`);
-    cy.getByTestId('test-trigger-to-param').contains(`"email": "<REPLACE_WITH_DATA>"`);
-    cy.getByTestId('test-trigger-payload-param').contains(`"firstVariable": "<REPLACE_WITH_DATA>",`);
-    cy.getByTestId('test-trigger-payload-param').contains(`"secondVariable": "<REPLACE_WITH_DATA>"`);
-    cy.getByTestId('test-trigger-overrides-param').contains(`{ }`);
-  });
-});
diff --git a/apps/web/src/pages/templates/components/TestWorkflowPage.tsx b/apps/web/src/pages/templates/components/TestWorkflowPage.tsx
new file mode 100644
index 00000000000..3d48406c4f1
--- /dev/null
+++ b/apps/web/src/pages/templates/components/TestWorkflowPage.tsx
@@ -0,0 +1,8 @@
+import { useTemplateEditorForm } from './TemplateEditorFormProvider';
+import { TestWorkflow } from './TestWorkflow';
+
+export function TestWorkflowPage() {
+  const { trigger } = useTemplateEditorForm();
+
+  return <TestWorkflow trigger={trigger} />;
+}
diff --git a/apps/web/src/pages/templates/components/TriggerSegmentControl.tsx b/apps/web/src/pages/templates/components/TriggerSegmentControl.tsx
new file mode 100644
index 00000000000..667588d9199
--- /dev/null
+++ b/apps/web/src/pages/templates/components/TriggerSegmentControl.tsx
@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { useNavigate, useLocation } from 'react-router-dom';
+import { SegmentedControl } from '../../../design-system';
+import { useBasePath } from '../hooks/useBasePath';
+
+export const TriggerSegmentControl = () => {
+  const basePath = useBasePath();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const value = useMemo(() => {
+    return pathname.replace(basePath + '/', '');
+  }, [pathname, basePath]);
+
+  return (
+    <SegmentedControl
+      sx={{
+        maxWidth: '100% !important',
+      }}
+      fullWidth
+      data={[
+        {
+          label: 'Run a Test',
+          value: 'test-workflow',
+        },
+        {
+          label: 'Get Snippet',
+          value: 'snippet',
+        },
+      ]}
+      value={value}
+      onChange={async (segmentValue) => {
+        navigate(basePath + '/' + segmentValue);
+      }}
+    />
+  );
+};
diff --git a/apps/web/src/pages/templates/components/UpdateButton.tsx b/apps/web/src/pages/templates/components/UpdateButton.tsx
new file mode 100644
index 00000000000..a0fea7abce9
--- /dev/null
+++ b/apps/web/src/pages/templates/components/UpdateButton.tsx
@@ -0,0 +1,15 @@
+import { Button } from '../../../design-system';
+import { IForm } from './formTypes';
+import { useFormContext } from 'react-hook-form';
+import { useEnvController } from '../../../hooks';
+
+export const UpdateButton = () => {
+  const { formState } = useFormContext<IForm>();
+  const { readonly } = useEnvController();
+
+  return (
+    <Button data-test-id="notification-template-submit-btn" disabled={readonly || !formState.isDirty} submit={true}>
+      Update
+    </Button>
+  );
+};
diff --git a/apps/web/src/pages/templates/components/UserPreference.tsx b/apps/web/src/pages/templates/components/UserPreference.tsx
new file mode 100644
index 00000000000..0a619f1b73f
--- /dev/null
+++ b/apps/web/src/pages/templates/components/UserPreference.tsx
@@ -0,0 +1,12 @@
+import { TemplatePreference } from './notification-setting-form/TemplatePreference';
+import { SubPageWrapper } from './SubPageWrapper';
+import { WorkflowSettingsTabs } from './WorkflowSettingsTabs';
+
+export function UserPreference() {
+  return (
+    <SubPageWrapper title="Workflow Settings">
+      <WorkflowSettingsTabs />
+      <TemplatePreference />
+    </SubPageWrapper>
+  );
+}
diff --git a/apps/web/src/pages/templates/components/VariableManager.cy.tsx b/apps/web/src/pages/templates/components/VariableManager.cy.tsx
index 27c9dd85ee8..af47584c9ae 100644
--- a/apps/web/src/pages/templates/components/VariableManager.cy.tsx
+++ b/apps/web/src/pages/templates/components/VariableManager.cy.tsx
@@ -5,15 +5,19 @@ import { TestWrapper } from '../../../testing';
 import { VariableManager } from './VariableManager';
 import { TemplateEditorFormProvider } from './TemplateEditorFormProvider';
 import { useVariablesManager } from '../../../hooks';
+import { BrowserRouter } from 'react-router-dom';
+import { CONTEXT_PATH } from '../../../config';
 
 it('should show available variables - string', function () {
   mount(
-    <TestWrapper>
-      <TemplateEditorFormProvider>
-        <FormTester content={'Hello, {{ name }}'} />
-        <VariableManagerTester />
-      </TemplateEditorFormProvider>
-    </TestWrapper>
+    <BrowserRouter basename={CONTEXT_PATH}>
+      <TestWrapper>
+        <TemplateEditorFormProvider>
+          <FormTester content={'Hello, {{ name }}'} />
+          <VariableManagerTester />
+        </TemplateEditorFormProvider>
+      </TestWrapper>
+    </BrowserRouter>
   );
 
   cy.getByTestId('template-variable-row').should('have.length', 1);
@@ -23,12 +27,14 @@ it('should show available variables - string', function () {
 
 it('should show available variables - array', function () {
   mount(
-    <TestWrapper>
-      <TemplateEditorFormProvider>
-        <VariableManagerTester />
-        <FormTester content={'Hello, {{#each name}} {{/each}}'} />
-      </TemplateEditorFormProvider>
-    </TestWrapper>
+    <BrowserRouter basename={CONTEXT_PATH}>
+      <TestWrapper>
+        <TemplateEditorFormProvider>
+          <VariableManagerTester />
+          <FormTester content={'Hello, {{#each name}} {{/each}}'} />
+        </TemplateEditorFormProvider>
+      </TestWrapper>
+    </BrowserRouter>
   );
 
   cy.getByTestId('template-variable-row').should('have.length', 1);
@@ -39,10 +45,12 @@ it('should show available variables - array', function () {
 it('should show available variables including nested - array', function () {
   mount(
     <TestWrapper>
-      <TemplateEditorFormProvider>
-        <VariableManagerTester />
-        <FormTester content={'Hello, {{#each name}} {{nested_variable}} {{/each}}'} />
-      </TemplateEditorFormProvider>
+      <BrowserRouter basename={CONTEXT_PATH}>
+        <TemplateEditorFormProvider>
+          <VariableManagerTester />
+          <FormTester content={'Hello, {{#each name}} {{nested_variable}} {{/each}}'} />
+        </TemplateEditorFormProvider>
+      </BrowserRouter>
     </TestWrapper>
   );
 
@@ -56,10 +64,12 @@ it('should show available variables including nested - array', function () {
 it('should show available variables - boolean', function () {
   mount(
     <TestWrapper>
-      <TemplateEditorFormProvider>
-        <VariableManagerTester />
-        <FormTester content={'Hello, {{#if name}} {{/if}}'} />
-      </TemplateEditorFormProvider>
+      <BrowserRouter basename={CONTEXT_PATH}>
+        <TemplateEditorFormProvider>
+          <VariableManagerTester />
+          <FormTester content={'Hello, {{#if name}} {{/if}}'} />
+        </TemplateEditorFormProvider>
+      </BrowserRouter>
     </TestWrapper>
   );
 
@@ -71,10 +81,12 @@ it('should show available variables - boolean', function () {
 it('should show available variables including nested - boolean', function () {
   mount(
     <TestWrapper>
-      <TemplateEditorFormProvider>
-        <VariableManagerTester />
-        <FormTester content={'Hello, {{#if name}} {{nested_variable}} {{/if}}'} />
-      </TemplateEditorFormProvider>
+      <BrowserRouter basename={CONTEXT_PATH}>
+        <TemplateEditorFormProvider>
+          <VariableManagerTester />
+          <FormTester content={'Hello, {{#if name}} {{nested_variable}} {{/if}}'} />
+        </TemplateEditorFormProvider>
+      </BrowserRouter>
     </TestWrapper>
   );
 
@@ -88,14 +100,16 @@ it('should show available variables including nested - boolean', function () {
 it('should show available variables including deeply nested', function () {
   mount(
     <TestWrapper>
-      <TemplateEditorFormProvider>
-        <VariableManagerTester />
-        <FormTester
-          content={
-            'Hello, {{#if name}} {{nested_variable}} {{#each nested_name}} {{deeply_nested_variable}} {{/each}} {{/if}}'
-          }
-        />
-      </TemplateEditorFormProvider>
+      <BrowserRouter basename={CONTEXT_PATH}>
+        <TemplateEditorFormProvider>
+          <VariableManagerTester />
+          <FormTester
+            content={
+              'Hello, {{#if name}} {{nested_variable}} {{#each nested_name}} {{deeply_nested_variable}} {{/each}} {{/if}}'
+            }
+          />
+        </TemplateEditorFormProvider>
+      </BrowserRouter>
     </TestWrapper>
   );
 
@@ -113,10 +127,12 @@ it('should show available variables including deeply nested', function () {
 it('should show reserved variables', function () {
   mount(
     <TestWrapper>
-      <TemplateEditorFormProvider>
-        <VariableManagerTester />
-        <FormTester content={'Hello, {{ subscriber }}'} />
-      </TemplateEditorFormProvider>
+      <BrowserRouter basename={CONTEXT_PATH}>
+        <TemplateEditorFormProvider>
+          <VariableManagerTester />
+          <FormTester content={'Hello, {{ subscriber }}'} />
+        </TemplateEditorFormProvider>
+      </BrowserRouter>
     </TestWrapper>
   );
 
diff --git a/apps/web/src/pages/templates/components/WorkflowSettingsTabs.tsx b/apps/web/src/pages/templates/components/WorkflowSettingsTabs.tsx
new file mode 100644
index 00000000000..ca8df8f78ba
--- /dev/null
+++ b/apps/web/src/pages/templates/components/WorkflowSettingsTabs.tsx
@@ -0,0 +1,35 @@
+import { Tabs } from '@mantine/core';
+import { useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
+import useStyles from '../../../design-system/tabs/Tabs.styles';
+import { useBasePath } from '../hooks/useBasePath';
+
+export const WorkflowSettingsTabs = () => {
+  const { classes } = useStyles(false);
+  const basePath = useBasePath();
+  const navigate = useNavigate();
+  const { pathname } = useLocation();
+  const value = useMemo(() => {
+    return pathname.replace(basePath + '/', '');
+  }, [pathname, basePath]);
+
+  return (
+    <Tabs
+      mb={24}
+      orientation="horizontal"
+      keepMounted={true}
+      onTabChange={(tabValue) => {
+        navigate(basePath + '/' + tabValue);
+      }}
+      variant="default"
+      value={value}
+      classNames={classes}
+    >
+      <Tabs.List>
+        <Tabs.Tab value="settings">General</Tabs.Tab>
+        <Tabs.Tab value="channels">Channels</Tabs.Tab>
+        <Tabs.Tab value="providers">Providers</Tabs.Tab>
+      </Tabs.List>
+    </Tabs>
+  );
+};
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 e88e66d021b..9a394623d8b 100644
--- a/apps/web/src/pages/templates/components/chat-editor/TemplateChatEditor.tsx
+++ b/apps/web/src/pages/templates/components/chat-editor/TemplateChatEditor.tsx
@@ -6,6 +6,7 @@ import type { IForm } from '../formTypes';
 import { LackIntegrationError } from '../LackIntegrationError';
 import { Textarea } from '../../../../design-system';
 import { VariableManager } from '../VariableManager';
+import { StepSettings } from '../../workflow/SideBar/StepSettings';
 
 const templateFields = ['content'];
 
@@ -27,13 +28,17 @@ export function TemplateChatEditor({
 
   return (
     <>
-      {!isIntegrationActive ? <LackIntegrationError channel="Chat" channelType={ChannelTypeEnum.CHAT} /> : null}
+      {!isIntegrationActive ? (
+        <LackIntegrationError channelType={ChannelTypeEnum.CHAT} iconHeight={34} iconWidth={34} />
+      ) : null}
+      <StepSettings index={index} />
       <Controller
         name={`steps.${index}.template.content`}
         defaultValue=""
         control={control}
         render={({ field }) => (
           <Textarea
+            mt={24}
             {...field}
             data-test-id="chatNotificationContent"
             error={errors?.steps ? errors.steps[index]?.template?.content?.message : undefined}
diff --git a/apps/web/src/pages/templates/components/email-editor/EmailContentCard.tsx b/apps/web/src/pages/templates/components/email-editor/EmailContentCard.tsx
index d76d4306d05..17a96fb5383 100644
--- a/apps/web/src/pages/templates/components/email-editor/EmailContentCard.tsx
+++ b/apps/web/src/pages/templates/components/email-editor/EmailContentCard.tsx
@@ -65,15 +65,17 @@ export function EmailContentCard({
     <>
       {!isIntegrationActive && isLimitReached && (
         <LackIntegrationError
-          channel="E-Mail"
           channelType={ChannelTypeEnum.EMAIL}
           text="Looks like you haven’t configured your E-Mail provider yet, visit the integrations page to configure."
+          iconHeight={34}
+          iconWidth={34}
         />
       )}
       <EmailInboxContent integration={integration} index={index} readonly={readonly} />
-
-      <div data-test-id="editor-type-selector">
-        <Tabs value={activeTab} onTabChange={onTabChange} menuTabs={menuTabs} keepMounted={false} />
+      <div data-test-id="email-step-settings-edit">
+        <div data-test-id="editor-type-selector">
+          <Tabs value={activeTab} onTabChange={onTabChange} menuTabs={menuTabs} keepMounted={false} />
+        </div>
       </div>
     </>
   );
diff --git a/apps/web/src/pages/templates/components/email-editor/EmailInboxContent.tsx b/apps/web/src/pages/templates/components/email-editor/EmailInboxContent.tsx
index 25a498d1130..d142d129acc 100644
--- a/apps/web/src/pages/templates/components/email-editor/EmailInboxContent.tsx
+++ b/apps/web/src/pages/templates/components/email-editor/EmailInboxContent.tsx
@@ -39,10 +39,10 @@ export const EmailInboxContent = ({
   return (
     <div
       style={{
-        background: theme.colorScheme === 'dark' ? colors.B17 : colors.B98,
         borderRadius: '7px',
-        marginBottom: '40px',
-        padding: '5px 10px',
+        marginBottom: '24px',
+        padding: '16px',
+        background: theme.colorScheme === 'dark' ? colors.B20 : colors.B98,
       }}
     >
       <Grid grow justify="center" align="stretch">
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 4a8f9f7f8bd..69e44e7a355 100644
--- a/apps/web/src/pages/templates/components/email-editor/EmailMessagesCards.tsx
+++ b/apps/web/src/pages/templates/components/email-editor/EmailMessagesCards.tsx
@@ -4,7 +4,7 @@ import { useAuthContext } from '../../../../components/providers/AuthProvider';
 import { When } from '../../../../components/utils/When';
 import { Preview } from '../../editor/Preview';
 import { EditorPreviewSwitch } from '../EditorPreviewSwitch';
-import { Grid, SegmentedControl, useMantineTheme } from '@mantine/core';
+import { Grid, Group, SegmentedControl, useMantineTheme } from '@mantine/core';
 import { TestSendEmail } from './TestSendEmail';
 import { colors } from '../../../../design-system';
 import { MobileIcon } from '../../editor/PreviewSegment/MobileIcon';
@@ -13,6 +13,7 @@ import { useHotkeys } from '@mantine/hooks';
 import { VariablesManagement } from './variables-management/VariablesManagement';
 import { useVariablesManager } from '../../../../hooks';
 import { VariableManagerModal } from '../VariableManagerModal';
+import { StepSettings } from '../../workflow/SideBar/StepSettings';
 
 export enum ViewEnum {
   EDIT = 'Edit',
@@ -65,13 +66,12 @@ export function EmailMessagesCards({ index, isIntegrationActive }: { index: numb
           position: 'relative',
         }}
       >
-        <Grid mb={view === ViewEnum.PREVIEW ? 40 : 20}>
-          <Grid.Col span={6}>
-            <Grid justify="right" mr={7}>
-              <EditorPreviewSwitch view={view} setView={setView} />
-            </Grid>
+        <StepSettings index={index} />
+        <Grid m={0} mb={24} mt={24}>
+          <Grid.Col p={0} mr={20} span={7}>
+            <EditorPreviewSwitch view={view} setView={setView} />
           </Grid.Col>
-          <Grid.Col p={0} span={6}>
+          <Grid.Col p={0} span={2}>
             <When truthy={view === ViewEnum.PREVIEW}>
               <SegmentedControl
                 data-test-id="preview-mode-switch"
@@ -97,11 +97,13 @@ export function EmailMessagesCards({ index, isIntegrationActive }: { index: numb
                 data={[
                   {
                     value: 'web',
-                    label: <WebIcon />,
+                    label: <WebIcon color={preview !== 'web' ? colors.B40 : undefined} />,
                   },
                   {
                     value: 'mobile',
-                    label: <MobileIcon />,
+                    label: (
+                      <MobileIcon style={{ marginTop: 3 }} color={preview !== 'mobile' ? colors.B40 : undefined} />
+                    ),
                   },
                 ]}
                 value={preview}
diff --git a/apps/web/src/pages/templates/components/email-editor/TestSendEmail.tsx b/apps/web/src/pages/templates/components/email-editor/TestSendEmail.tsx
index e853256b54a..52a636ff34b 100644
--- a/apps/web/src/pages/templates/components/email-editor/TestSendEmail.tsx
+++ b/apps/web/src/pages/templates/components/email-editor/TestSendEmail.tsx
@@ -71,7 +71,7 @@ export function TestSendEmail({ index, isIntegrationActive }: { index: number; i
   };
 
   return (
-    <div style={{ maxWidth: '800px', margin: 'auto', padding: '20px 25px' }}>
+    <div>
       <Text my={30} color={colors.B60}>
         Fill in the required variables and send a test to your desired address.
       </Text>
@@ -103,43 +103,51 @@ export function TestSendEmail({ index, isIntegrationActive }: { index: number; i
         />
       </Wrapper>
 
-      <JsonInput
-        data-test-id="test-email-json-param"
-        formatOnBlur
-        mt={20}
-        autosize
-        styles={inputStyles}
-        label="Variables"
-        value={payloadValue}
-        onChange={setPayloadValue}
-        minRows={6}
-        mb={15}
-        validationError="Invalid JSON"
-        rightSectionWidth={50}
-        rightSectionProps={{ style: { alignItems: 'start', padding: '5px' } }}
-        rightSection={
-          <Tooltip label={clipboardJson.copied ? 'Copied!' : 'Copy Json'}>
-            <ActionIcon variant="transparent" onClick={() => clipboardJson.copy(payloadValue)}>
-              {clipboardJson.copied ? <Check /> : <Copy />}
-            </ActionIcon>
-          </Tooltip>
-        }
-      />
-
-      <Group mt={30}>
-        <Button
-          loading={isLoading}
-          icon={<Invite />}
-          data-test-id="test-send-email-btn"
-          disabled={!isIntegrationActive && !isLimitFetchingEnabled}
-          onClick={() => onTestEmail()}
+      <div style={{ position: 'relative' }}>
+        <JsonInput
+          data-test-id="test-email-json-param"
+          formatOnBlur
+          mt={20}
+          autosize
+          styles={inputStyles}
+          label="Variables"
+          value={payloadValue}
+          onChange={setPayloadValue}
+          minRows={12}
+          mb={15}
+          validationError="Invalid JSON"
+          rightSectionWidth={50}
+          rightSectionProps={{ style: { alignItems: 'start', padding: '5px' } }}
+          rightSection={
+            <Tooltip label={clipboardJson.copied ? 'Copied!' : 'Copy Json'}>
+              <ActionIcon variant="transparent" onClick={() => clipboardJson.copy(payloadValue)}>
+                {clipboardJson.copied ? <Check /> : <Copy />}
+              </ActionIcon>
+            </Tooltip>
+          }
+        />
+
+        <span
+          style={{
+            position: 'absolute',
+            bottom: 16,
+            right: 16,
+          }}
         >
-          Send Test Email
-        </Button>
-        {!isIntegrationActive && (
-          <Text color={colors.error}>{`* Looks like you haven’t configured your email provider yet`}</Text>
-        )}
-      </Group>
+          <Button
+            loading={isLoading}
+            icon={<Invite />}
+            data-test-id="test-send-email-btn"
+            disabled={!isIntegrationActive && !isLimitFetchingEnabled}
+            onClick={() => onTestEmail()}
+          >
+            Send Test Email
+          </Button>
+        </span>
+      </div>
+      {!isIntegrationActive && (
+        <Text color={colors.error}>* Looks like you haven’t configured your email provider yet</Text>
+      )}
     </div>
   );
 }
diff --git a/apps/web/src/pages/templates/components/formTypes.ts b/apps/web/src/pages/templates/components/formTypes.ts
index ffeaa81392c..6b1ff61c4c9 100644
--- a/apps/web/src/pages/templates/components/formTypes.ts
+++ b/apps/web/src/pages/templates/components/formTypes.ts
@@ -18,6 +18,7 @@ export interface ITemplates extends IMessageTemplate {
 export interface IStepEntity {
   id?: string;
   _id?: string;
+  name?: string;
   uuid?: string;
   _templateId?: string;
   template: ITemplates;
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 1b43e8708cf..17754b665fd 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,12 +1,13 @@
 import { useFormContext, useWatch } from 'react-hook-form';
-import { colors, Tabs } from '../../../../design-system';
+import { colors } from '../../../../design-system';
 import { useEnvController, useProcessVariables } from '../../../../hooks';
 import { InAppEditorBlock } from './InAppEditorBlock';
-import { Grid, useMantineTheme, JsonInput } from '@mantine/core';
+import { Grid, useMantineTheme, JsonInput, SegmentedControl } from '@mantine/core';
 import { VariablesManagement } from '../email-editor/variables-management/VariablesManagement';
 import { inputStyles } from '../../../../design-system/config/inputs.styles';
 import { useState, useEffect } from 'react';
 import { AvatarFeedFields } from './AvatarFeedFields';
+import { When } from '../../../../components/utils/When';
 
 const EDITOR = 'Editor';
 const PREVIEW = 'Preview';
@@ -29,40 +30,48 @@ export function InAppContentCard({ index, openVariablesModal }: { index: number;
     setPayloadValue(processedVariables);
   }, [processedVariables, setPayloadValue]);
 
-  const onTabChange = (value: string | null) => {
-    if (value === null) {
-      return;
-    }
-    setActiveTab(value);
-  };
-
-  const menuTabs = [
-    {
-      value: EDITOR,
-      content: (
-        <Grid grow>
-          <Grid.Col span={9}>
-            <InAppEditorBlock control={control as any} index={index} readonly={readonly} />
-            <AvatarFeedFields control={control} index={index} />
-          </Grid.Col>
-          <Grid.Col
-            span={3}
-            mb={20}
-            style={{
-              maxWidth: '350px',
-            }}
-          >
-            <VariablesManagement openVariablesModal={openVariablesModal} index={index} />
-          </Grid.Col>
-        </Grid>
-      ),
-    },
-    {
-      value: PREVIEW,
-      content: (
-        <Grid mb={20}>
+  return (
+    <div data-test-id="editor-type-selector">
+      <SegmentedControl
+        data-test-id="editor-mode-switch"
+        styles={{
+          root: {
+            background: 'transparent',
+            border: `1px solid ${theme.colorScheme === 'dark' ? colors.B40 : colors.B70}`,
+            borderRadius: '30px',
+            width: '100%',
+            maxWidth: '300px',
+          },
+          label: {
+            fontSize: '14px',
+            lineHeight: '24px',
+          },
+          control: {
+            minWidth: '80px',
+          },
+          active: {
+            background: theme.colorScheme === 'dark' ? colors.B40 : colors.B98,
+            borderRadius: '30px',
+          },
+          labelActive: {
+            color: `${theme.colorScheme === 'dark' ? colors.white : colors.B40} !important`,
+            fontSize: '14px',
+            lineHeight: '24px',
+          },
+        }}
+        data={[EDITOR, PREVIEW]}
+        value={activeTab}
+        onChange={(value) => {
+          setActiveTab(value);
+        }}
+        defaultValue={activeTab}
+        fullWidth
+        radius={'xl'}
+      />
+      <When truthy={activeTab === PREVIEW}>
+        <Grid mt={24} mb={24}>
           <Grid.Col span={9} p={0}>
-            <div style={{ maxWidth: '450px', margin: '0 auto' }}>
+            <div style={{ margin: '0 10px' }}>
               <InAppEditorBlock
                 control={control as any}
                 payload={payloadValue}
@@ -80,6 +89,7 @@ export function InAppContentCard({ index, openVariablesModal }: { index: number;
                 background: theme.colorScheme === 'dark' ? colors.B17 : colors.B98,
                 borderRadius: 7,
                 padding: 15,
+                paddingTop: 0,
               }}
             >
               <JsonInput
@@ -87,7 +97,7 @@ export function InAppContentCard({ index, openVariablesModal }: { index: number;
                 formatOnBlur
                 autosize
                 styles={inputStyles}
-                label="Payload:"
+                label="Payload"
                 value={payloadValue}
                 onChange={setPayloadValue}
                 minRows={6}
@@ -97,13 +107,24 @@ export function InAppContentCard({ index, openVariablesModal }: { index: number;
             </div>
           </Grid.Col>
         </Grid>
-      ),
-    },
-  ];
-
-  return (
-    <div data-test-id="editor-type-selector">
-      <Tabs value={activeTab} onTabChange={onTabChange} menuTabs={menuTabs} />
+      </When>
+      <When truthy={activeTab === EDITOR}>
+        <Grid mt={24} grow>
+          <Grid.Col span={9}>
+            <InAppEditorBlock control={control as any} index={index} readonly={readonly} />
+            <AvatarFeedFields control={control} index={index} />
+          </Grid.Col>
+          <Grid.Col
+            span={3}
+            mb={20}
+            style={{
+              maxWidth: '350px',
+            }}
+          >
+            <VariablesManagement openVariablesModal={openVariablesModal} index={index} />
+          </Grid.Col>
+        </Grid>
+      </When>
     </div>
   );
 }
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 a68cf73b4b2..70a391eea97 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
@@ -1,12 +1,13 @@
 import { Stack } from '@mantine/core';
 import { Control, Controller, useFormContext } from 'react-hook-form';
-import { useState, useMemo } from 'react';
+import { useState } from 'react';
 
 import type { IForm, ITemplates } from '../formTypes';
 import { Input } from '../../../../design-system';
 import { useEnvController, useVariablesManager } from '../../../../hooks';
 import { InAppContentCard } from './InAppContentCard';
 import { VariableManagerModal } from '../VariableManagerModal';
+import { StepSettings } from '../../workflow/SideBar/StepSettings';
 
 const getVariableContents = (template: ITemplates) => {
   const baseContent = ['content'];
@@ -34,37 +35,32 @@ export function TemplateInAppEditor({ control, index }: { control: Control<IForm
 
   return (
     <>
-      <div
-        style={{
-          margin: '0 25px 0 25px',
-        }}
-      >
-        <Stack spacing={25}>
-          <Controller
-            name={`steps.${index}.template.cta.data.url` as any}
-            defaultValue=""
-            control={control}
-            render={({ field, fieldState }) => (
-              <Input
-                {...field}
-                error={fieldState.error?.message}
-                value={field.value || ''}
-                disabled={readonly}
-                description="The URL that will be opened when user clicks the notification"
-                data-test-id="inAppRedirect"
-                label="Redirect URL"
-                placeholder="i.e /tasks/{{taskId}}"
-              />
-            )}
-          />
-          <InAppContentCard
-            index={index}
-            openVariablesModal={() => {
-              setModalOpen(true);
-            }}
-          />
-        </Stack>
-      </div>
+      <StepSettings index={index} />
+      <Stack mt={24} spacing={24}>
+        <Controller
+          name={`steps.${index}.template.cta.data.url` as any}
+          defaultValue=""
+          control={control}
+          render={({ field, fieldState }) => (
+            <Input
+              {...field}
+              error={fieldState.error?.message}
+              value={field.value || ''}
+              disabled={readonly}
+              data-test-id="inAppRedirect"
+              label="Redirect URL"
+              placeholder="i.e /tasks/{{taskId}}"
+            />
+          )}
+        />
+        <InAppContentCard
+          index={index}
+          openVariablesModal={() => {
+            setModalOpen(true);
+          }}
+        />
+      </Stack>
+
       <VariableManagerModal open={modalOpen} setOpen={setModalOpen} index={index} 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 e378e60a71a..d0b31164e08 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
@@ -1,23 +1,19 @@
-import { useEffect } from 'react';
-import { ActionIcon, Grid } from '@mantine/core';
+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 { api } from '../../../../api/api.client';
-import { Input, Select, Tooltip } from '../../../../design-system';
+import { Input, Select, Switch, Tooltip } from '../../../../design-system';
 import { Check, Copy } from '../../../../design-system/icons';
 import { useEnvController, useNotificationGroup } from '../../../../hooks';
 import type { IForm } from '../formTypes';
+import { useTemplateEditorForm } from '../TemplateEditorFormProvider';
+import { useParams } from 'react-router-dom';
+import { useStatusChangeControllerHook } from '../useStatusChangeController';
 
-export const NotificationSettingsForm = ({
-  editMode,
-  trigger,
-}: {
-  editMode: boolean;
-  trigger?: INotificationTrigger;
-}) => {
+export const NotificationSettingsForm = ({ trigger }: { trigger?: INotificationTrigger }) => {
   const idClipboard = useClipboard({ timeout: 1000 });
   const queryClient = useQueryClient();
   const { readonly } = useEnvController();
@@ -25,9 +21,16 @@ export const NotificationSettingsForm = ({
     formState: { errors },
     setValue,
     control,
-    getValues,
   } = useFormContext<IForm>();
 
+  const { template } = useTemplateEditorForm();
+  const { templateId = '' } = useParams<{ templateId: string }>();
+
+  const { isTemplateActive, changeActiveStatus, isStatusChangeLoading } = useStatusChangeControllerHook(
+    templateId,
+    template
+  );
+
   const { groups, loading: loadingGroups } = useNotificationGroup();
   const { isLoading: loadingCreateGroup, mutateAsync: createNotificationGroup } = useMutation<
     { name: string; _id: string },
@@ -35,25 +38,12 @@ export const NotificationSettingsForm = ({
     {
       name: string;
     }
-  >((data) => api.post(`/v1/notification-groups`, data), {
+  >((data) => api.post('/v1/notification-groups', data), {
     onSuccess: (data) => {
       queryClient.setQueryData(['notificationGroups'], [...groups, data]);
     },
   });
 
-  useEffect(() => {
-    const group = getValues('notificationGroupId');
-    if (groups?.length && !editMode && !group) {
-      selectFirstGroupByDefault();
-    }
-  }, [groups, editMode]);
-
-  function selectFirstGroupByDefault() {
-    setTimeout(() => {
-      setValue('notificationGroupId', groups[0]._id);
-    }, 500);
-  }
-
   function addGroupItem(newGroup: string): undefined {
     if (newGroup) {
       createNotificationGroup({
@@ -72,73 +62,25 @@ export const NotificationSettingsForm = ({
 
   return (
     <>
-      <Grid gutter={30} grow>
-        <Grid.Col md={6} sm={12}>
-          <Controller
-            control={control}
-            name="name"
-            defaultValue=""
-            render={({ field }) => (
-              <Input
-                {...field}
-                mb={30}
-                data-test-id="title"
-                disabled={readonly}
-                required={!editMode}
-                value={field.value || ''}
-                error={errors.name?.message}
-                label="Notification Name"
-                description="This will be used to identify the notification in the dashboard."
-                placeholder="Notification name goes here..."
-              />
-            )}
-          />
-          <Controller
-            name="description"
-            defaultValue=""
-            control={control}
-            render={({ field, fieldState }) => (
-              <Input
-                {...field}
-                error={fieldState.error?.message}
-                value={field.value || ''}
-                disabled={readonly}
-                mb={30}
-                data-test-id="description"
-                description="Write an internal description of when and how this notification will be used."
-                label="Notification Description"
-                placeholder="Describe your notification..."
-              />
-            )}
-          />
-        </Grid.Col>
-        <Grid.Col md={6} sm={12}>
-          {trigger && (
-            <Controller
-              name="identifier"
-              defaultValue=""
-              control={control}
-              render={({ field, fieldState }) => (
-                <Input
-                  {...field}
-                  mb={30}
-                  data-test-id="trigger-id"
-                  value={field.value || ''}
-                  error={fieldState.error?.message}
-                  label="Notification Identifier"
-                  description="This will be used to identify the notification template using the API."
-                  disabled={readonly}
-                  rightSection={
-                    <Tooltip data-test-id={'Tooltip'} label={idClipboard.copied ? 'Copied!' : 'Copy Key'}>
-                      <ActionIcon variant="transparent" onClick={() => idClipboard.copy(field.value)}>
-                        {idClipboard.copied ? <Check /> : <Copy />}
-                      </ActionIcon>
-                    </Tooltip>
-                  }
-                />
-              )}
+      <Grid gutter={0}>
+        <Grid.Col span={6}>
+          <Stack
+            justify="center"
+            sx={{
+              height: '100%',
+            }}
+          >
+            <Switch
+              label={isTemplateActive ? 'Active' : 'Inactive'}
+              loading={isStatusChangeLoading}
+              disabled={readonly}
+              data-test-id="active-toggle-switch"
+              onChange={(e) => changeActiveStatus(e.target.checked)}
+              checked={isTemplateActive || false}
             />
-          )}
+          </Stack>
+        </Grid.Col>
+        <Grid.Col span={6}>
           <Controller
             name="notificationGroupId"
             defaultValue=""
@@ -148,17 +90,14 @@ export const NotificationSettingsForm = ({
                 <>
                   <Select
                     {...field}
-                    label="Notification Group"
                     data-test-id="groupSelector"
                     loading={loadingGroups || loadingCreateGroup}
                     disabled={readonly}
                     creatable
                     searchable
-                    required={!editMode}
-                    description="Categorize notifications into groups for unified settings control"
                     error={errors.notificationGroupId?.message}
                     getCreateLabel={(newGroup) => (
-                      <div data-test-id="submit-category-btn">+ Create Group {newGroup}</div>
+                      <div data-test-id="submit-category-btn">+ Create group {newGroup}</div>
                     )}
                     onCreate={addGroupItem}
                     placeholder="Attach notification to group"
@@ -170,6 +109,62 @@ export const NotificationSettingsForm = ({
           />
         </Grid.Col>
       </Grid>
+      <Controller
+        control={control}
+        name="name"
+        defaultValue="Untitled"
+        render={({ field }) => (
+          <Input
+            {...field}
+            data-test-id="title"
+            disabled={readonly}
+            value={field.value || ''}
+            error={errors.name?.message}
+            label="Name"
+            placeholder="Notification name goes here..."
+          />
+        )}
+      />
+      {trigger && (
+        <Controller
+          name="identifier"
+          defaultValue=""
+          control={control}
+          render={({ field, fieldState }) => (
+            <Input
+              {...field}
+              data-test-id="trigger-id"
+              value={field.value || ''}
+              error={fieldState.error?.message}
+              label="Identifier"
+              disabled={readonly}
+              rightSection={
+                <Tooltip data-test-id={'Tooltip'} label={idClipboard.copied ? 'Copied!' : 'Copy Key'}>
+                  <ActionIcon variant="transparent" onClick={() => idClipboard.copy(field.value)}>
+                    {idClipboard.copied ? <Check /> : <Copy />}
+                  </ActionIcon>
+                </Tooltip>
+              }
+            />
+          )}
+        />
+      )}
+      <Controller
+        name="description"
+        defaultValue=""
+        control={control}
+        render={({ field, fieldState }) => (
+          <Input
+            {...field}
+            error={fieldState.error?.message}
+            value={field.value || ''}
+            disabled={readonly}
+            data-test-id="description"
+            label="Description"
+            placeholder="Describe your notification..."
+          />
+        )}
+      />
     </>
   );
 };
diff --git a/apps/web/src/pages/templates/components/notification-setting-form/TemplatePreference.tsx b/apps/web/src/pages/templates/components/notification-setting-form/TemplatePreference.tsx
index 70b8892664e..2768d02887a 100644
--- a/apps/web/src/pages/templates/components/notification-setting-form/TemplatePreference.tsx
+++ b/apps/web/src/pages/templates/components/notification-setting-form/TemplatePreference.tsx
@@ -1,25 +1,21 @@
 import { FunctionComponent } from 'react';
-import { Grid, Input, InputWrapperProps } from '@mantine/core';
+import { Group, Input, InputWrapperProps, Text } from '@mantine/core';
 import styled from '@emotion/styled';
 import { useFormContext, Controller } from 'react-hook-form';
 
 import { useEnvController } from '../../../../hooks';
-import { inputStyles } from '../../../../design-system/config/inputs.styles';
 import { Checkbox, colors, Switch } from '../../../../design-system';
 import { channels } from '../../shared/channels';
 import type { IForm } from '../formTypes';
+import { LabelWithTooltip } from '../../workflow/LabelWithTooltip';
+import { ChannelTitle } from '../ChannelTitle';
+import { ChannelTypeEnum } from '@novu/shared';
 
 export function TemplatePreference() {
   return (
     <>
-      <Grid>
-        <Grid.Col span={6}>
-          <ChannelPreference />
-        </Grid.Col>
-        <Grid.Col span={6}>
-          <CriticalPreference />
-        </Grid.Col>
-      </Grid>
+      <CriticalPreference />
+      <ChannelPreference />
     </>
   );
 }
@@ -43,30 +39,37 @@ export function ChannelPreference() {
         }
 
         return (
-          <InputBackground
-            label="Template Defaults"
-            description="Check the channels you would like to be ON by default"
-            styles={inputStyles}
-          >
-            <Grid pt={8.5}>
-              {Object.keys(preferences).map((key) => {
-                const label = channels.find((channel) => channel.tabKey === key)?.label;
-                const checked = preferences[key] || false;
-
-                return (
-                  <Grid.Col key={key} md={6} lg={4}>
-                    <StyledCheckbox
+          <>
+            <Text mb={16} color={colors.B60}>
+              Default Channels On:
+            </Text>
+            {Object.keys(preferences).map((key) => {
+              const label = channels.find((channel) => channel.tabKey === key)?.label;
+              const checked = preferences[key] || false;
+
+              return (
+                <Group
+                  sx={{
+                    padding: 18,
+                    border: `1px dashed ${colors.B40}`,
+                    borderRadius: 8,
+                  }}
+                  mb={24}
+                  position="apart"
+                >
+                  <Text>{<ChannelTitle channel={key as ChannelTypeEnum} />}</Text>
+                  <div>
+                    <Switch
                       checked={checked}
                       disabled={readonly}
                       data-test-id={`preference-${key}`}
-                      label={label}
                       onChange={(e) => handleCheckboxChange(e, key)}
                     />
-                  </Grid.Col>
-                );
-              })}
-            </Grid>
-          </InputBackground>
+                  </div>
+                </Group>
+              );
+            })}
+          </>
         );
       }}
     />
@@ -75,6 +78,7 @@ export function ChannelPreference() {
 
 export function CriticalPreference() {
   const { control } = useFormContext();
+  const { readonly } = useEnvController();
 
   return (
     <Controller
@@ -83,29 +87,19 @@ export function CriticalPreference() {
       control={control}
       render={({ field }) => {
         return (
-          <InputBackground
-            label="System Critical (Always Sent)"
-            description={<CriticalDescription field={field} />}
-            styles={inputStyles}
-            children={null}
-          />
+          <Group mb={24} align="center" position="apart">
+            <LabelWithTooltip
+              label="Users will be able to manage subscriptions"
+              tooltip="Allow opting out of the specific channel. Users will receive notifications in the active channels."
+            />
+            <Switch {...field} checked={field.value || false} disabled={readonly} data-test-id="critical" />
+          </Group>
         );
       }}
     />
   );
 }
 
-function CriticalDescription({ field }) {
-  const { readonly } = useEnvController();
-
-  return (
-    <DescriptionWrapper>
-      {"When on, the template will not show in the user preferences, meaning they wouldn't be able to opt out."}
-      <Switch {...field} checked={field.value || false} disabled={readonly} data-test-id="critical" />
-    </DescriptionWrapper>
-  );
-}
-
 export const InputWrapperProxy: FunctionComponent<InputWrapperProps> = ({ children, ...props }) => {
   return <Input.Wrapper {...props}>{children}</Input.Wrapper>;
 };
@@ -113,12 +107,6 @@ export const InputWrapperProxy: FunctionComponent<InputWrapperProps> = ({ childr
 const InputBackground = styled(InputWrapperProxy)`
   background: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B17 : colors.B98)};
   border-radius: 7px;
-  padding: 20px;
-`;
-
-const DescriptionWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
 `;
 
 const StyledCheckbox = styled(CheckboxProxy)<{ checked: boolean }>`
diff --git a/apps/web/src/pages/templates/components/notificationTemplateSchema.ts b/apps/web/src/pages/templates/components/notificationTemplateSchema.ts
index 52b87bc4f8e..40c98c679cb 100644
--- a/apps/web/src/pages/templates/components/notificationTemplateSchema.ts
+++ b/apps/web/src/pages/templates/components/notificationTemplateSchema.ts
@@ -10,7 +10,7 @@ export const schema = z
         required_error: 'Required - Notification Name',
       })
       .superRefine((data, ctx) => {
-        if (data.length === 0) {
+        if (data.replaceAll(/\s/g, '').length === 0) {
           ctx.addIssue({
             code: z.ZodIssueCode.too_small,
             minimum: 1,
diff --git a/apps/web/src/pages/templates/components/useTemplateController.ts b/apps/web/src/pages/templates/components/useTemplateController.ts
index d0d3ff44f05..99d891fc3c0 100644
--- a/apps/web/src/pages/templates/components/useTemplateController.ts
+++ b/apps/web/src/pages/templates/components/useTemplateController.ts
@@ -17,7 +17,6 @@ export function useTemplateController(templateId?: string) {
   >(createTemplate, {
     onSuccess: async () => {
       await client.refetchQueries([QueryKeys.changesCount]);
-      successMessage('Template saved successfully');
     },
   });
 
@@ -29,7 +28,6 @@ export function useTemplateController(templateId?: string) {
     onSuccess: async () => {
       refetch();
       await client.refetchQueries([QueryKeys.changesCount]);
-      successMessage('Template updated successfully');
     },
   });
 
diff --git a/apps/web/src/pages/templates/constants.ts b/apps/web/src/pages/templates/constants.tsx
similarity index 71%
rename from apps/web/src/pages/templates/constants.ts
rename to apps/web/src/pages/templates/constants.tsx
index f0bf214a73b..8981bc575da 100644
--- a/apps/web/src/pages/templates/constants.ts
+++ b/apps/web/src/pages/templates/constants.tsx
@@ -1,3 +1,6 @@
+import { ChannelTypeEnum, StepTypeEnum } from '@novu/shared';
+import { Bell, Chat, DigestGradient, Mail, Mobile, Sms, TimerGradient } from '../../design-system/icons';
+
 export enum TemplateAnalyticsEnum {
   CREATE_TEMPLATE_CLICK = 'Create Template Click - [Templates]',
   TRY_DIGEST_CLICK = 'Try Digest Click - [Templates]',
@@ -42,3 +45,25 @@ export const ordinalNumbers = {
   9: 'ninth',
   10: 'tenth',
 };
+
+export const stepNames: Record<StepTypeEnum | ChannelTypeEnum, string> = {
+  email: 'Email',
+  chat: 'Chat',
+  in_app: 'In-App',
+  sms: 'SMS',
+  push: 'Push',
+  digest: 'Digest',
+  delay: 'Delay',
+  trigger: 'Trigger',
+};
+
+export const stepIcon: Record<StepTypeEnum | ChannelTypeEnum, (...args: any[]) => JSX.Element> = {
+  email: Mail,
+  chat: Chat,
+  in_app: Bell,
+  sms: Sms,
+  push: Mobile,
+  digest: DigestGradient,
+  delay: TimerGradient,
+  trigger: () => <></>,
+};
diff --git a/apps/web/src/pages/templates/editor/DigestWorkflowTourTooltip.tsx b/apps/web/src/pages/templates/editor/DigestWorkflowTourTooltip.tsx
index 12e2dcef77a..05ec13d6cb9 100644
--- a/apps/web/src/pages/templates/editor/DigestWorkflowTourTooltip.tsx
+++ b/apps/web/src/pages/templates/editor/DigestWorkflowTourTooltip.tsx
@@ -2,16 +2,17 @@ import { UnstyledButton } from '@mantine/core';
 import styled from '@emotion/styled';
 import { TooltipRenderProps } from 'react-joyride';
 import { useFormContext } from 'react-hook-form';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { StepTypeEnum } from '@novu/shared';
 
 import { useTour } from './TourProvider';
 import { Button, colors, DotsNavigation } from '../../../design-system';
 import { Clock, LetterOpened, BellWithNotification } from '../../../design-system/icons';
-import { useTemplateEditorContext } from './TemplateEditorProvider';
 import { IForm } from '../components/formTypes';
 import { useSegment } from '../../../components/providers/SegmentProvider';
 import { DigestWorkflowTourAnalyticsEnum, HINT_INDEX_TO_CLICK_ANALYTICS, ordinalNumbers } from '../constants';
+import { useBasePath } from '../hooks/useBasePath';
+import { useTourStorage } from '../hooks/useTourStorage';
 
 const ICONS = [Clock, LetterOpened, BellWithNotification];
 const TITLE = ['Set-up time interval', 'Set-up email content', 'Test your workflow'];
@@ -72,27 +73,28 @@ export const DigestWorkflowTourTooltip = ({
   size,
 }: TooltipRenderProps) => {
   const segment = useSegment();
-  const { setSelectedNodeId } = useTemplateEditorContext();
   const { watch } = useFormContext<IForm>();
   const steps = watch('steps');
   const { stopTour, setStep } = useTour();
-  const location = useLocation();
   const navigate = useNavigate();
   const Icon = ICONS[index];
+  const basePath = useBasePath();
+  const { templateId = '' } = useParams<{ templateId: string }>();
+
+  const tourStorage = useTourStorage();
 
   const handleOnClick = (tourStepIndex: number, isFromNavigation = false) => {
     if (tourStepIndex === 0) {
       const digestStep = steps.find((el) => el.template?.type === StepTypeEnum.DIGEST);
-      setStep(tourStepIndex);
-      setSelectedNodeId(digestStep?.id || '');
+      navigate(basePath + '/' + StepTypeEnum.DIGEST + '/' + digestStep?.uuid);
     } else if (tourStepIndex === 1) {
       const emailStep = steps.find((el) => el.template?.type === StepTypeEnum.EMAIL);
-      setStep(tourStepIndex);
-      setSelectedNodeId(emailStep?.id || '');
+      navigate(basePath + '/' + StepTypeEnum.EMAIL + '/' + emailStep?.uuid);
     } else if (tourStepIndex === 2) {
-      setStep(tourStepIndex);
-      setSelectedNodeId('');
+      navigate(basePath + '/test-workflow');
     }
+    tourStorage.setTour('digest', templateId, tourStepIndex);
+    setStep(tourStepIndex);
 
     const stepIndex = isFromNavigation ? tourStepIndex : index;
     const analyticsEvent = getAnalyticsEvent(stepIndex, isFromNavigation);
@@ -104,10 +106,7 @@ export const DigestWorkflowTourTooltip = ({
 
   const stopTourCallback = () => {
     stopTour();
-    const queryParams = new URLSearchParams(location.search);
-    if (queryParams.has('tour')) {
-      navigate(location.pathname, { replace: true });
-    }
+    tourStorage.deleteTour('digest', templateId);
   };
 
   const handleSkipClick = () => {
diff --git a/apps/web/src/pages/templates/editor/PreviewSegment/MobileIcon.tsx b/apps/web/src/pages/templates/editor/PreviewSegment/MobileIcon.tsx
index c9411fc8f7a..c6b77fd5230 100644
--- a/apps/web/src/pages/templates/editor/PreviewSegment/MobileIcon.tsx
+++ b/apps/web/src/pages/templates/editor/PreviewSegment/MobileIcon.tsx
@@ -1,12 +1,15 @@
+import React from 'react';
 /* eslint-disable */
-export const MobileIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
-    <path
-      d="M9.99935 15.0003H10.006M5.83268 1.66699H14.166C15.0865 1.66699 15.8327 2.41318 15.8327 3.33366V16.667C15.8327 17.5875 15.0865 18.3337 14.166 18.3337H5.83268C4.91221 18.3337 4.16602 17.5875 4.16602 16.667V3.33366C4.16602 2.41318 4.91221 1.66699 5.83268 1.66699Z"
-      stroke="#828299"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
-);
+export function MobileIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" {...props}>
+      <path
+        d="M9.99935 15.0003H10.006M5.83268 1.66699H14.166C15.0865 1.66699 15.8327 2.41318 15.8327 3.33366V16.667C15.8327 17.5875 15.0865 18.3337 14.166 18.3337H5.83268C4.91221 18.3337 4.16602 17.5875 4.16602 16.667V3.33366C4.16602 2.41318 4.91221 1.66699 5.83268 1.66699Z"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/src/pages/templates/editor/PreviewSegment/WebIcon.tsx b/apps/web/src/pages/templates/editor/PreviewSegment/WebIcon.tsx
index 9f83e5d2c74..1ffb782136c 100644
--- a/apps/web/src/pages/templates/editor/PreviewSegment/WebIcon.tsx
+++ b/apps/web/src/pages/templates/editor/PreviewSegment/WebIcon.tsx
@@ -1,17 +1,39 @@
-export const WebIcon = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="22" viewBox="0 0 18 22" fill="none">
-    <rect
-      x="1"
-      y="3.5"
-      width="16"
-      height="12"
-      rx="2"
-      stroke="#525266"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <rect x="8.5" y="15" width="1" height="4" rx="0.5" stroke="#525266" strokeLinecap="round" strokeLinejoin="round" />
-    <rect x="5.5" y="19" width="7" height="1" rx="0.5" stroke="#525266" strokeLinecap="round" strokeLinejoin="round" />
-  </svg>
-);
+import React from 'react';
+/* eslint-disable */
+export function WebIcon(props: React.ComponentPropsWithoutRef<'svg'>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="22" viewBox="0 0 18 22" fill="none" {...props}>
+      <rect
+        x="1"
+        y="3.5"
+        width="16"
+        height="12"
+        rx="2"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <rect
+        x="8.5"
+        y="15"
+        width="1"
+        height="4"
+        rx="0.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <rect
+        x="5.5"
+        y="19"
+        width="7"
+        height="1"
+        rx="0.5"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
diff --git a/apps/web/src/pages/templates/editor/PreviewWeb.tsx b/apps/web/src/pages/templates/editor/PreviewWeb.tsx
index 94f44336928..7201d1be3e5 100644
--- a/apps/web/src/pages/templates/editor/PreviewWeb.tsx
+++ b/apps/web/src/pages/templates/editor/PreviewWeb.tsx
@@ -11,8 +11,6 @@ import { EmailIntegrationInfo } from './EmailIntegrationInfo';
 const useStyles = createStyles((theme) => ({
   browser: {
     background: theme.colorScheme === 'dark' ? colors.B17 : colors.B98,
-    marginLeft: '30px',
-    marginRight: '30px',
     borderRadius: '7px',
   },
   bar: {
diff --git a/apps/web/src/pages/templates/editor/TemplateEditorPage.tsx b/apps/web/src/pages/templates/editor/TemplateEditorPage.tsx
index 1fdc617fd41..13fbdb7ae31 100644
--- a/apps/web/src/pages/templates/editor/TemplateEditorPage.tsx
+++ b/apps/web/src/pages/templates/editor/TemplateEditorPage.tsx
@@ -1,6 +1,5 @@
-import { useEffect, useState } from 'react';
-import { useNavigate, useParams, useLocation } from 'react-router-dom';
-import { useDisclosure } from '@mantine/hooks';
+import { useEffect } from 'react';
+import { useNavigate, useLocation, useParams } from 'react-router-dom';
 import { ReactFlowProvider } from 'react-flow-renderer';
 import { FieldErrors, useFormContext } from 'react-hook-form';
 
@@ -8,115 +7,50 @@ import PageContainer from '../../../components/layout/components/PageContainer';
 import PageMeta from '../../../components/layout/components/PageMeta';
 import type { IForm } from '../components/formTypes';
 import WorkflowEditor from '../workflow/WorkflowEditor';
-import { TemplateEditor } from '../components/TemplateEditor';
-import { TemplateSettings } from '../components/TemplateSettings';
-import { TemplatePageHeader } from '../components/TemplatePageHeader';
-import { TemplateTriggerModal } from '../components/TemplateTriggerModal';
-import { usePrompt, useSearchParams, useEnvController, useActiveIntegrations } from '../../../hooks';
-import { UnsavedChangesModal } from '../components/UnsavedChangesModal';
-import { When } from '../../../components/utils/When';
-import { UserPreference } from '../../user-preference/UserPreference';
-import { TestWorkflowModal } from '../components/TestWorkflowModal';
-import { SaveChangesModal } from '../components/SaveChangesModal';
-import { ExecutionDetailsModalWrapper } from '../components/ExecutionDetailsModalWrapper';
+import { useEnvController, usePrompt } from '../../../hooks';
 import { BlueprintModal } from '../components/BlueprintModal';
-import { useTemplateEditorForm } from '../components/TemplateEditorFormProvider';
+import { TemplateEditorFormProvider, useTemplateEditorForm } from '../components/TemplateEditorFormProvider';
 import { errorMessage } from '../../../utils/notifications';
 import { getExplicitErrors } from '../shared/errors';
 import { ROUTES } from '../../../constants/routes.enum';
-import { ActivePageEnum } from '../../../constants/editorEnums';
-import { useTemplateEditorContext } from './TemplateEditorProvider';
 import { TourProvider } from './TourProvider';
+import { NavigateValidatorModal } from '../components/NavigateValidatorModal';
+import { useTourStorage } from '../hooks/useTourStorage';
+import { useBasePath } from '../hooks/useBasePath';
 
-export const EditorPages = [
-  ActivePageEnum.CHAT,
-  ActivePageEnum.SMS,
-  ActivePageEnum.PUSH,
-  ActivePageEnum.EMAIL,
-  ActivePageEnum.IN_APP,
-];
-
-export default function TemplateEditorPage() {
-  const { templateId = '' } = useParams<{ templateId: string }>();
+function BaseTemplateEditorPage() {
   const navigate = useNavigate();
   const location = useLocation();
-  const { readonly, environment } = useEnvController();
-  const [transactionId, setTransactionId] = useState<string>('');
-  const [isTriggerModalVisible, setTriggerModalVisible] = useState(false);
-  const onTriggerModalDismiss = () => {
-    navigate('/templates');
-  };
-  const { isLoading: isIntegrationsLoading } = useActiveIntegrations();
-  const {
-    template,
-    isLoading,
-    isCreating,
-    isUpdating,
-    editMode,
-    createdTemplateId,
-    trigger,
-    onSubmit,
-    addStep,
-    deleteStep,
-  } = useTemplateEditorForm();
-  const { activePage, setActivePage, activeStepIndex } = useTemplateEditorContext();
+  const { environment } = useEnvController();
+  const { template, isCreating, onSubmit } = useTemplateEditorForm();
   const methods = useFormContext<IForm>();
-  const {
-    formState: { isDirty },
-    handleSubmit,
-  } = methods;
+  const { handleSubmit } = methods;
+  const tourStorage = useTourStorage();
+  const { templateId = '' } = useParams<{ templateId: string }>();
+  const isTouring = tourStorage.getCurrentTour('digest', templateId) > -1;
+  const basePath = useBasePath();
 
   const isCreateTemplatePage = location.pathname === ROUTES.TEMPLATES_CREATE;
-  const [showModal, confirmNavigation, cancelNavigation] = usePrompt(isDirty);
 
   const onInvalid = async (errors: FieldErrors<IForm>) => {
     errorMessage(getExplicitErrors(errors));
   };
 
-  const [testWorkflowModalOpened, { close: closeTestWorkflowModal, open: openTestWorkflowModal }] = useDisclosure(
-    false,
-    {
-      onClose() {
-        if (!editMode) {
-          navigate(`/templates/edit/${createdTemplateId}`);
-        }
-      },
-    }
-  );
-  const [saveChangesModalOpened, { close: closeSaveChangesModal, open: openSaveChangesModal }] = useDisclosure(false);
-  const [executionModalOpened, { close: closeExecutionModal, open: openExecutionModal }] = useDisclosure(false);
+  const [showNavigateValidatorModal, confirmNavigate, cancelNavigate] = usePrompt(
+    !methods.formState.isValid && location.pathname !== ROUTES.TEMPLATES_CREATE && !isTouring,
+    (nextLocation) => {
+      if (nextLocation.location.pathname.includes(basePath)) {
+        nextLocation.retry();
 
-  const searchParams = useSearchParams();
+        return false;
+      }
 
-  useEffect(() => {
-    const page = searchParams.page;
-    if (page !== ActivePageEnum.WORKFLOW) {
-      return;
+      return true;
     }
-
-    setActivePage(page);
-  }, [searchParams.page]);
-
-  const onConfirmSaveChanges = async (data: IForm) => {
-    await onSubmit(data);
-    closeSaveChangesModal();
-    openTestWorkflowModal();
-  };
+  );
 
   const onSubmitHandler = async (data: IForm) => {
-    await onSubmit(data, {
-      onCreateSuccess: () => {
-        setTriggerModalVisible(true);
-      },
-    });
-  };
-
-  const onTestWorkflowClicked = () => {
-    if (isDirty) {
-      openSaveChangesModal();
-    } else {
-      openTestWorkflowModal();
-    }
+    await onSubmit(data);
   };
 
   useEffect(() => {
@@ -141,85 +75,32 @@ export default function TemplateEditorPage() {
     <>
       <TourProvider />
       <PageContainer>
-        <PageMeta title={editMode ? template?.name : 'Create Template'} />
+        <PageMeta title={template?.name ?? 'Create Template'} />
         <form
           name="template-form"
           noValidate
           onSubmit={handleSubmit(onSubmitHandler, onInvalid)}
           style={{ minHeight: '100%' }}
         >
-          <When truthy={activePage !== ActivePageEnum.WORKFLOW}>
-            <TemplatePageHeader
-              loading={isCreating || isUpdating}
-              disableSubmit={readonly || isLoading || isCreating || !isDirty}
-              templateId={templateId}
-              setActivePage={setActivePage}
-              activePage={activePage}
-              onTestWorkflowClicked={onTestWorkflowClicked}
-            />
-          </When>
-
-          {(activePage === ActivePageEnum.SETTINGS || activePage === ActivePageEnum.TRIGGER_SNIPPET) && (
-            <TemplateSettings activePage={activePage} setActivePage={setActivePage} templateId={templateId} />
-          )}
-
-          {activePage === ActivePageEnum.WORKFLOW && (
-            <ReactFlowProvider>
-              <WorkflowEditor
-                activePage={activePage}
-                templateId={templateId}
-                setActivePage={setActivePage}
-                onTestWorkflowClicked={onTestWorkflowClicked}
-                isCreatingTemplate={isCreating}
-                isUpdatingTemplate={isUpdating}
-                addStep={addStep}
-                deleteStep={deleteStep}
-              />
-            </ReactFlowProvider>
-          )}
-
-          <When truthy={activePage === ActivePageEnum.USER_PREFERENCE}>
-            <UserPreference activePage={activePage} setActivePage={setActivePage} />
-          </When>
-          {!isLoading && !isIntegrationsLoading ? (
-            <TemplateEditor activeStepIndex={activeStepIndex} activePage={activePage} />
-          ) : null}
-          {trigger && (
-            <TemplateTriggerModal
-              trigger={trigger}
-              onDismiss={onTriggerModalDismiss}
-              isVisible={!saveChangesModalOpened && !testWorkflowModalOpened && isTriggerModalVisible}
-            />
-          )}
-          {trigger && !isDirty && (
-            <TestWorkflowModal
-              trigger={trigger}
-              setTransactionId={setTransactionId}
-              onDismiss={closeTestWorkflowModal}
-              isVisible={testWorkflowModalOpened}
-              openExecutionModal={openExecutionModal}
-            />
-          )}
+          <ReactFlowProvider>
+            <WorkflowEditor />
+          </ReactFlowProvider>
         </form>
       </PageContainer>
-      <SaveChangesModal
-        onConfirm={onConfirmSaveChanges}
-        isVisible={saveChangesModalOpened}
-        onDismiss={closeSaveChangesModal}
-        loading={isCreating || isUpdating}
-        onInvalid={onInvalid}
-      />
-      <ExecutionDetailsModalWrapper
-        transactionId={transactionId}
-        isOpen={executionModalOpened}
-        onClose={closeExecutionModal}
-      />
-      <UnsavedChangesModal
-        isOpen={showModal}
-        cancelNavigation={cancelNavigation}
-        confirmNavigation={confirmNavigation}
-      />
       <BlueprintModal />
+      <NavigateValidatorModal
+        isOpen={showNavigateValidatorModal}
+        onConfirm={confirmNavigate}
+        onCancel={cancelNavigate}
+      />
     </>
   );
 }
+
+export default function TemplateEditorPage() {
+  return (
+    <TemplateEditorFormProvider>
+      <BaseTemplateEditorPage />
+    </TemplateEditorFormProvider>
+  );
+}
diff --git a/apps/web/src/pages/templates/editor/TemplateEditorProvider.tsx b/apps/web/src/pages/templates/editor/TemplateEditorProvider.tsx
deleted file mode 100644
index 3a0564f96f1..00000000000
--- a/apps/web/src/pages/templates/editor/TemplateEditorProvider.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, { useMemo, useState, useCallback } from 'react';
-import { useFormContext } from 'react-hook-form';
-import { StepTypeEnum } from '@novu/shared';
-
-import { ActivePageEnum } from '../../../constants/editorEnums';
-import { IForm, IStepEntity } from '../components/formTypes';
-
-interface ITemplateEditorContext {
-  activePage: ActivePageEnum;
-  setActivePage: (page: ActivePageEnum) => void;
-  selectedNodeId: string;
-  setSelectedNodeId: (nodeId: string) => void;
-  activeStepIndex: number;
-  activeStep?: IStepEntity;
-  selectedChannel?: StepTypeEnum;
-}
-
-const TemplateEditorContext = React.createContext<ITemplateEditorContext>({
-  activePage: ActivePageEnum.SETTINGS,
-  setActivePage: () => {},
-  selectedNodeId: '',
-  setSelectedNodeId: () => {},
-  activeStepIndex: -1,
-});
-
-export const useTemplateEditorContext = () => React.useContext(TemplateEditorContext);
-
-export const TemplateEditorProvider = ({ children }) => {
-  const [activePage, setActivePage] = useState<ActivePageEnum>(ActivePageEnum.SETTINGS);
-  const [selectedNodeId, setSelectedNodeId] = useState<string>('');
-  const { watch } = useFormContext<IForm>();
-  const steps = watch('steps');
-
-  const activeStepIndex = useMemo<number>(() => {
-    if (selectedNodeId.length === 0) {
-      return -1;
-    }
-
-    return steps.findIndex((item) => item._id === selectedNodeId || item.id === selectedNodeId);
-  }, [selectedNodeId, steps]);
-
-  const activeStep: IStepEntity | undefined = steps[activeStepIndex];
-
-  const setActivePageCallback = useCallback((page: ActivePageEnum) => {
-    setActivePage(page);
-  }, []);
-
-  const setSelectedNodeIdCallback = useCallback((id: string) => {
-    setSelectedNodeId(id);
-  }, []);
-
-  const value = useMemo(
-    () => ({
-      activePage,
-      setActivePage: setActivePageCallback,
-      selectedNodeId,
-      setSelectedNodeId: setSelectedNodeIdCallback,
-      activeStepIndex,
-      activeStep,
-      selectedChannel: activeStep?.template.type,
-    }),
-    [activePage, selectedNodeId, activeStepIndex, activeStep, setActivePageCallback, setSelectedNodeIdCallback]
-  );
-
-  return <TemplateEditorContext.Provider value={value}>{children}</TemplateEditorContext.Provider>;
-};
diff --git a/apps/web/src/pages/templates/editor/useDigestWorkflowTour.tsx b/apps/web/src/pages/templates/editor/useDigestWorkflowTour.tsx
index 901ab0a216f..4c9d5846490 100644
--- a/apps/web/src/pages/templates/editor/useDigestWorkflowTour.tsx
+++ b/apps/web/src/pages/templates/editor/useDigestWorkflowTour.tsx
@@ -1,14 +1,12 @@
-import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Step } from 'react-joyride';
 import { useFormContext } from 'react-hook-form';
 import { StepTypeEnum } from '@novu/shared';
-
-import { useTemplateEditorContext } from './TemplateEditorProvider';
-import { ActivePageEnum } from '../../../constants/editorEnums';
 import { useEffectOnce } from '../../../hooks';
 import { IForm } from '../components/formTypes';
 import { DigestWorkflowTourTooltip } from './DigestWorkflowTourTooltip';
+import { useBasePath } from '../hooks/useBasePath';
+import { useTourStorage } from '../hooks/useTourStorage';
 
 const digestTourSteps: Step[] = [
   {
@@ -44,31 +42,24 @@ const digestTourSteps: Step[] = [
 ];
 
 export const useDigestWorkflowTour = ({ startTour }: { startTour: () => void }) => {
-  const { setSelectedNodeId, setActivePage } = useTemplateEditorContext();
-  const location = useLocation();
-  const queryParams = new URLSearchParams(location.search);
-  const isDigestTour = queryParams.get('tour') == 'digest';
+  const basePath = useBasePath();
   const { watch } = useFormContext<IForm>();
   const steps = watch('steps');
-
-  useEffect(() => {
-    if (isDigestTour) {
-      setActivePage(ActivePageEnum.WORKFLOW);
-    }
-  }, []);
+  const navigate = useNavigate();
+  const tourStorage = useTourStorage();
+  const { templateId = '' } = useParams<{ templateId: string }>();
+  const isTouring = tourStorage.getCurrentTour('digest', templateId) > -1;
 
   useEffectOnce(() => {
     // once there are steps select the node with type DIGEST and start the tour
     const digestStep = steps.find((step) => step.template?.type === StepTypeEnum.DIGEST);
     if (digestStep) {
-      setTimeout(() => {
-        setSelectedNodeId(digestStep.id || '');
-        startTour();
-      }, 0);
+      navigate(basePath + '/' + StepTypeEnum.DIGEST + '/' + digestStep?.uuid);
+      startTour();
     }
-  }, isDigestTour && steps.length > 0);
+  }, isTouring && steps.length > 0);
 
   return {
-    digestTourSteps: isDigestTour ? digestTourSteps : [],
+    digestTourSteps: isTouring ? digestTourSteps : [],
   };
 };
diff --git a/apps/web/src/pages/templates/filter/PreviousStepFiltersForm.tsx b/apps/web/src/pages/templates/filter/PreviousStepFiltersForm.tsx
index 09d99a1f39f..233164196c4 100644
--- a/apps/web/src/pages/templates/filter/PreviousStepFiltersForm.tsx
+++ b/apps/web/src/pages/templates/filter/PreviousStepFiltersForm.tsx
@@ -54,7 +54,7 @@ export const PreviousStepFiltersForm = ({
                       const label = channels.find((channel) => channel.channelType === item.template.type)?.label;
 
                       return {
-                        label: label + (itemNumber > 0 ? ` (${itemNumber})` : ''),
+                        label: item.name ? item.name : label + (itemNumber > 0 ? ` (${itemNumber})` : ''),
                         value: item.uuid,
                       };
                     })
diff --git a/apps/web/src/pages/templates/hooks/useBasePath.ts b/apps/web/src/pages/templates/hooks/useBasePath.ts
new file mode 100644
index 00000000000..6d6f78657dd
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/useBasePath.ts
@@ -0,0 +1,7 @@
+import { useParams } from 'react-router-dom';
+
+export const useBasePath = () => {
+  const { templateId = '' } = useParams<{ templateId: string }>();
+
+  return `/templates/edit/${templateId}`;
+};
diff --git a/apps/web/src/pages/templates/hooks/useCreate.ts b/apps/web/src/pages/templates/hooks/useCreate.ts
new file mode 100644
index 00000000000..73029c6eff6
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/useCreate.ts
@@ -0,0 +1,37 @@
+import { mapFormToCreateNotificationTemplate } from '../components/templateToFormMappers';
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { IForm } from '../components/formTypes';
+import { INotificationTrigger } from '@novu/shared';
+import { useTemplateController } from '../components/useTemplateController';
+
+export const useCreate = (
+  templateId: string,
+  groups: { _id: string }[],
+  setTrigger: (trigger: INotificationTrigger) => void,
+  getValues: () => IForm
+) => {
+  const navigate = useNavigate();
+  const { createNotificationTemplate } = useTemplateController(templateId);
+
+  useEffect(() => {
+    if (!!templateId || !groups || groups.length === 0 || localStorage.getItem('blueprintId') !== null) {
+      return;
+    }
+
+    const values = getValues();
+
+    if (!values.notificationGroupId) {
+      values.notificationGroupId = groups[0]._id;
+    }
+
+    const submit = async () => {
+      const payloadToCreate = mapFormToCreateNotificationTemplate(values);
+      const response = await createNotificationTemplate({ ...payloadToCreate, active: true, draft: false });
+      setTrigger(response.triggers[0]);
+      navigate(`/templates/edit/${response._id || ''}`);
+    };
+
+    submit();
+  }, [templateId, groups, localStorage.getItem('blueprintId')]);
+};
diff --git a/apps/web/src/pages/templates/hooks/useSave.ts b/apps/web/src/pages/templates/hooks/useSave.ts
new file mode 100644
index 00000000000..d4ac3d5193d
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/useSave.ts
@@ -0,0 +1,78 @@
+import { useEffect, useState, useCallback, useRef } from 'react';
+import { useDocumentVisibility, useTimeout } from '@mantine/hooks';
+import { hideNotification, showNotification } from '@mantine/notifications';
+import { useBasePath } from './useBasePath';
+import { useLocation } from 'react-router-dom';
+import { useTourStorage } from './useTourStorage';
+import { useParams } from 'react-router-dom';
+
+export const useSave = (isDirty: boolean, isValid: boolean, onSave: () => Promise<any>) => {
+  const { pathname } = useLocation();
+  const [previousPath, setPreviousPath] = useState(pathname);
+  const tourStorage = useTourStorage();
+  const { templateId = '' } = useParams<{ templateId: string }>();
+  const isTouring = tourStorage.getCurrentTour('digest', templateId) > -1;
+  const saveRef = useRef<any>();
+
+  saveRef.current = () => {
+    if (!isDirty || isTouring || !isValid) {
+      return;
+    }
+    start();
+    onSave()
+      .then((value) => {
+        clear();
+        hideNotification('savingOnNavigation');
+
+        return value;
+      })
+      .catch(() => {
+        clear();
+        hideNotification('savingOnNavigation');
+      });
+  };
+
+  const { start, clear } = useTimeout(() => {
+    showNotification({
+      message: 'We are saving your changes...',
+      color: 'blue',
+      id: 'savingOnNavigation',
+      autoClose: false,
+    });
+  }, 3000);
+
+  const documentVisibility = useDocumentVisibility();
+
+  useEffect(() => {
+    return () => {
+      saveRef.current();
+    };
+  }, []);
+
+  useEffect(() => {
+    window.addEventListener('beforeunload', saveRef.current);
+
+    return () => {
+      window.removeEventListener('beforeunload', saveRef.current);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (documentVisibility === 'visible') {
+      return;
+    }
+    saveRef.current();
+  }, [documentVisibility]);
+
+  const basePath = useBasePath();
+
+  useEffect(() => {
+    if (previousPath === basePath && pathname.includes(basePath)) {
+      setPreviousPath(pathname);
+
+      return;
+    }
+    setPreviousPath(pathname);
+    saveRef.current();
+  }, [pathname]);
+};
diff --git a/apps/web/src/pages/templates/hooks/useTourStorage.ts b/apps/web/src/pages/templates/hooks/useTourStorage.ts
new file mode 100644
index 00000000000..c1a168faad5
--- /dev/null
+++ b/apps/web/src/pages/templates/hooks/useTourStorage.ts
@@ -0,0 +1,78 @@
+import { useEffect, useState, useCallback } from 'react';
+
+const storageKey = 'tour';
+
+export const useTourStorage = () => {
+  const [state, setState] = useState({});
+
+  useEffect(() => {
+    const value = localStorage.getItem(storageKey);
+
+    if (value === null) {
+      return;
+    }
+
+    setState(JSON.parse(value));
+  }, [localStorage.getItem(storageKey)]);
+
+  const setTour = useCallback(
+    (tour: string, templateId: string, tourStepIndex: number) => {
+      const currentState = { ...state };
+      if (!currentState[tour]) {
+        currentState[tour] = {};
+      }
+      currentState[tour][templateId] = tourStepIndex;
+
+      setState(currentState);
+      localStorage.setItem(storageKey, JSON.stringify(currentState));
+    },
+    [state]
+  );
+
+  const deleteTour = useCallback(
+    (tour: string, templateId: string) => {
+      const currentState = { ...state };
+      if (!currentState[tour]) {
+        return;
+      }
+      currentState[tour] = Object.keys(currentState[tour]).reduce(
+        (prev: Record<string, number>, currentTemplateId: string) => {
+          if (currentTemplateId === templateId) {
+            return prev;
+          }
+
+          prev[currentTemplateId] = currentState[tour][currentTemplateId];
+
+          return prev;
+        },
+        {}
+      );
+      setState(currentState);
+      localStorage.setItem(storageKey, JSON.stringify(currentState));
+    },
+    [state]
+  );
+
+  const getCurrentTour = useCallback(
+    (tour: string, templateId: string): number => {
+      const currentState = { ...state };
+
+      if (!currentState[tour]) {
+        return -1;
+      }
+
+      if (currentState[tour][templateId] === undefined) {
+        return -1;
+      }
+
+      return currentState[tour][templateId] as number;
+    },
+    [state]
+  );
+
+  return {
+    setTour,
+    deleteTour,
+    getCurrentTour,
+  };
+};
diff --git a/apps/web/src/pages/templates/shared/errors.ts b/apps/web/src/pages/templates/shared/errors.ts
index 4f8d5a04eb4..89d2bcb804c 100644
--- a/apps/web/src/pages/templates/shared/errors.ts
+++ b/apps/web/src/pages/templates/shared/errors.ts
@@ -44,6 +44,12 @@ export function getStepErrors(index: number | string, errors: FieldErrors<IForm>
 
       return keys.map((key) => actionErrors[key]?.message);
     }
+
+    const nameError = errors.steps[index]?.name;
+
+    if (nameError) {
+      return [nameError?.message];
+    }
   }
 
   return [];
diff --git a/apps/web/src/pages/templates/workflow/DelayMetadata.tsx b/apps/web/src/pages/templates/workflow/DelayMetadata.tsx
index a28d458f4d4..3e78292980c 100644
--- a/apps/web/src/pages/templates/workflow/DelayMetadata.tsx
+++ b/apps/web/src/pages/templates/workflow/DelayMetadata.tsx
@@ -1,11 +1,13 @@
-import { Grid, Input as MantineInput } from '@mantine/core';
-import { DigestUnitEnum, DelayTypeEnum } from '@novu/shared';
+import { Grid } from '@mantine/core';
+import { DelayTypeEnum } from '@novu/shared';
 import { Controller, useFormContext } from 'react-hook-form';
 
-import { Input, Select } from '../../../design-system';
+import { Input, SegmentedControl } from '../../../design-system';
 import { inputStyles } from '../../../design-system/config/inputs.styles';
 import { useEnvController } from '../../../hooks';
 import { When } from '../../../components/utils/When';
+import { IntervalRadios } from './IntervalRadios';
+import { LabelWithTooltip } from './LabelWithTooltip';
 
 export const DelayMetadata = ({ control, index }) => {
   const { readonly } = useEnvController();
@@ -30,83 +32,70 @@ export const DelayMetadata = ({ control, index }) => {
           name={`steps.${index}.metadata.type`}
           render={({ field }) => {
             return (
-              <Select
+              <SegmentedControl
                 {...field}
-                label="Delay Type"
+                sx={{
+                  maxWidth: '100% !important',
+                }}
+                fullWidth
                 disabled={readonly}
                 data={[
                   { value: DelayTypeEnum.REGULAR, label: 'Regular' },
                   { value: DelayTypeEnum.SCHEDULED, label: 'Scheduled' },
                 ]}
-                data-test-id="delay-type"
-                onChange={async (value) => {
-                  field.onChange(value);
+                onChange={async (segmentValue) => {
+                  field.onChange(segmentValue);
                   await trigger(`steps.${index}.metadata`);
                 }}
+                data-test-id="delay-type"
               />
             );
           }}
         />
       </div>
       <When truthy={type === DelayTypeEnum.REGULAR}>
-        <MantineInput.Wrapper
+        <LabelWithTooltip
           label="Time Interval"
-          description="Once triggered, for how long should delay before next step execution."
-          styles={inputStyles}
+          tooltip="Once triggered, for how long should delay before next step execution."
+        />
+        <Grid
+          sx={{
+            marginBottom: '2px',
+          }}
         >
-          <Grid
-            sx={{
-              marginBottom: '2px',
-            }}
-          >
-            <Grid.Col span={4}>
-              <Controller
-                control={control}
-                name={`steps.${index}.metadata.amount`}
-                defaultValue=""
-                render={({ field, fieldState }) => {
-                  return (
-                    <Input
-                      {...field}
-                      value={field.value || ''}
-                      error={showErrors && fieldState.error?.message}
-                      min={0}
-                      max={100}
-                      type="number"
-                      data-test-id="time-amount"
-                      placeholder="0"
-                      disabled={readonly}
-                    />
-                  );
-                }}
-              />
-            </Grid.Col>
-            <Grid.Col span={8}>
-              <Controller
-                control={control}
-                name={`steps.${index}.metadata.unit`}
-                defaultValue=""
-                render={({ field, fieldState }) => {
-                  return (
-                    <Select
-                      disabled={readonly}
-                      error={showErrors && fieldState.error?.message}
-                      placeholder="Interval"
-                      data={[
-                        { value: DigestUnitEnum.SECONDS, label: 'Seconds' },
-                        { value: DigestUnitEnum.MINUTES, label: 'Minutes' },
-                        { value: DigestUnitEnum.HOURS, label: 'Hours' },
-                        { value: DigestUnitEnum.DAYS, label: 'Days' },
-                      ]}
-                      data-test-id="time-unit"
-                      {...field}
-                    />
-                  );
-                }}
-              />
-            </Grid.Col>
-          </Grid>
-        </MantineInput.Wrapper>
+          <Grid.Col span={4}>
+            <Controller
+              control={control}
+              name={`steps.${index}.metadata.amount`}
+              defaultValue=""
+              render={({ field, fieldState }) => {
+                return (
+                  <Input
+                    {...field}
+                    value={field.value || ''}
+                    error={showErrors && fieldState.error?.message}
+                    min={0}
+                    max={100}
+                    type="number"
+                    data-test-id="time-amount"
+                    placeholder="0"
+                    disabled={readonly}
+                    styles={(theme) => ({
+                      ...inputStyles(theme),
+                      input: {
+                        textAlign: 'center',
+                        ...inputStyles(theme).input,
+                      },
+                    })}
+                  />
+                );
+              }}
+            />
+          </Grid.Col>
+          <Grid.Col span={8}>
+            <IntervalRadios control={control} name={`steps.${index}.metadata.unit`} showErrors={showErrors} />
+          </Grid.Col>
+        </Grid>
       </When>
 
       <When truthy={type === DelayTypeEnum.SCHEDULED}>
@@ -120,9 +109,13 @@ export const DelayMetadata = ({ control, index }) => {
                 {...field}
                 value={field.value || ''}
                 disabled={readonly}
-                label="Path for scheduled date"
+                label={
+                  <LabelWithTooltip
+                    label="Path for scheduled date"
+                    tooltip="The path in payload for the scheduled delay date"
+                  />
+                }
                 placeholder="For example: sendAt"
-                description="The path in payload for the scheduled delay date"
                 error={showErrors && fieldState.error?.message}
                 type="text"
                 data-test-id="batch-key"
diff --git a/apps/web/src/pages/templates/workflow/DigestMetadata.tsx b/apps/web/src/pages/templates/workflow/DigestMetadata.tsx
index 2129486b9eb..389349d7acf 100644
--- a/apps/web/src/pages/templates/workflow/DigestMetadata.tsx
+++ b/apps/web/src/pages/templates/workflow/DigestMetadata.tsx
@@ -1,22 +1,24 @@
-import { Grid, Input as MantineInput } from '@mantine/core';
+import { Grid } from '@mantine/core';
 import { Controller, useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
-import { DigestTypeEnum, DigestUnitEnum } from '@novu/shared';
+import { DigestTypeEnum } from '@novu/shared';
 
 import { When } from '../../../components/utils/When';
-import { Input, Select, Switch, Button } from '../../../design-system';
+import { Input, SegmentedControl, Switch } from '../../../design-system';
 import { inputStyles } from '../../../design-system/config/inputs.styles';
 import { useEnvController } from '../../../hooks';
+import { IntervalRadios } from './IntervalRadios';
+import { LabelWithTooltip } from './LabelWithTooltip';
 
 const StyledSwitch = styled(Switch)`
   max-width: 100% !important;
   margin-top: 15px;
 `;
 
-export const DigestMetadata = ({ control, index, loading, disableSubmit, onSideMenuClose }) => {
+export const DigestMetadata = ({ control, index }) => {
   const { readonly } = useEnvController();
   const {
-    formState: { errors, isSubmitted },
+    formState: { errors, isSubmitted, isDirty },
     watch,
     trigger,
   } = useFormContext();
@@ -26,66 +28,6 @@ export const DigestMetadata = ({ control, index, loading, disableSubmit, onSideM
 
   return (
     <>
-      <div data-test-id="digest-step-settings-interval">
-        <MantineInput.Wrapper
-          label="Time Interval"
-          description="Once triggered, for how long the digest should collect events"
-          styles={inputStyles}
-        >
-          <Grid
-            sx={{
-              marginBottom: '2px',
-            }}
-          >
-            <Grid.Col span={4}>
-              <Controller
-                control={control}
-                name={`steps.${index}.metadata.amount`}
-                defaultValue=""
-                render={({ field, fieldState }) => {
-                  return (
-                    <Input
-                      {...field}
-                      value={field.value || ''}
-                      error={showErrors && fieldState.error?.message}
-                      min={0}
-                      max={100}
-                      type="number"
-                      data-test-id="time-amount"
-                      placeholder="0"
-                      disabled={readonly}
-                    />
-                  );
-                }}
-              />
-            </Grid.Col>
-            <Grid.Col span={8}>
-              <Controller
-                control={control}
-                name={`steps.${index}.metadata.unit`}
-                defaultValue=""
-                render={({ field, fieldState }) => {
-                  return (
-                    <Select
-                      disabled={readonly}
-                      error={showErrors && fieldState.error?.message}
-                      placeholder="Interval"
-                      data={[
-                        { value: DigestUnitEnum.SECONDS, label: 'Seconds' },
-                        { value: DigestUnitEnum.MINUTES, label: 'Minutes' },
-                        { value: DigestUnitEnum.HOURS, label: 'Hours' },
-                        { value: DigestUnitEnum.DAYS, label: 'Days' },
-                      ]}
-                      data-test-id="time-unit"
-                      {...field}
-                    />
-                  );
-                }}
-              />
-            </Grid.Col>
-          </Grid>
-        </MantineInput.Wrapper>
-      </div>
       <div
         style={{
           marginBottom: '15px',
@@ -97,16 +39,19 @@ export const DigestMetadata = ({ control, index, loading, disableSubmit, onSideM
           name={`steps.${index}.metadata.type`}
           render={({ field }) => {
             return (
-              <Select
+              <SegmentedControl
                 {...field}
-                label="Type of digest"
+                sx={{
+                  maxWidth: '100% !important',
+                }}
+                fullWidth
                 disabled={readonly}
                 data={[
                   { value: DigestTypeEnum.REGULAR, label: 'Regular' },
                   { value: DigestTypeEnum.BACKOFF, label: 'Backoff' },
                 ]}
-                onChange={async (value) => {
-                  field.onChange(value);
+                onChange={async (segmentValue) => {
+                  field.onChange(segmentValue);
                   await trigger(`steps.${index}.metadata`);
                 }}
                 data-test-id="digest-type"
@@ -115,68 +60,99 @@ export const DigestMetadata = ({ control, index, loading, disableSubmit, onSideM
           }}
         />
       </div>
-
+      <div data-test-id="digest-step-settings-interval">
+        <LabelWithTooltip
+          label="Time Interval"
+          tooltip="Once triggered, for how long the digest should collect events"
+        />
+        <Grid
+          sx={{
+            marginBottom: '2px',
+          }}
+        >
+          <Grid.Col span={4}>
+            <Controller
+              control={control}
+              name={`steps.${index}.metadata.amount`}
+              defaultValue=""
+              render={({ field, fieldState }) => {
+                return (
+                  <Input
+                    {...field}
+                    value={field.value || ''}
+                    error={showErrors && fieldState.error?.message}
+                    min={0}
+                    max={100}
+                    type="number"
+                    data-test-id="time-amount"
+                    placeholder="0"
+                    disabled={readonly}
+                    styles={(theme) => ({
+                      ...inputStyles(theme),
+                      input: {
+                        textAlign: 'center',
+                        ...inputStyles(theme).input,
+                      },
+                    })}
+                  />
+                );
+              }}
+            />
+          </Grid.Col>
+          <Grid.Col span={8}>
+            <IntervalRadios control={control} name={`steps.${index}.metadata.unit`} showErrors={showErrors} />
+          </Grid.Col>
+        </Grid>
+      </div>
       <When truthy={type === DigestTypeEnum.BACKOFF}>
-        <MantineInput.Wrapper
+        <LabelWithTooltip
           label="Backoff Time Interval"
-          description="A digest will only be created if a message was previously sent in this time interval"
-          styles={inputStyles}
+          tooltip="A digest will only be created if a message was previously sent in this time interval"
+        />
+        <Grid
+          sx={{
+            marginBottom: '5px',
+          }}
         >
-          <Grid
-            sx={{
-              marginBottom: '5px',
-            }}
-          >
-            <Grid.Col span={4}>
-              <Controller
-                control={control}
-                name={`steps.${index}.metadata.backoffAmount`}
-                defaultValue=""
-                render={({ field, fieldState }) => {
-                  return (
-                    <Input
-                      {...field}
-                      value={field.value || ''}
-                      error={showErrors && fieldState.error?.message}
-                      min={0}
-                      max={100}
-                      type="number"
-                      data-test-id="backoff-amount"
-                      placeholder="0"
-                      required
-                      disabled={readonly}
-                    />
-                  );
-                }}
-              />
-            </Grid.Col>
-            <Grid.Col span={8}>
-              <Controller
-                control={control}
-                name={`steps.${index}.metadata.backoffUnit`}
-                defaultValue=""
-                render={({ field, fieldState }) => {
-                  return (
-                    <Select
-                      disabled={readonly}
-                      error={showErrors && fieldState.error?.message}
-                      placeholder="Interval"
-                      data={[
-                        { value: DigestUnitEnum.SECONDS, label: 'Seconds' },
-                        { value: DigestUnitEnum.MINUTES, label: 'Minutes' },
-                        { value: DigestUnitEnum.HOURS, label: 'Hours' },
-                        { value: DigestUnitEnum.DAYS, label: 'Days' },
-                      ]}
-                      data-test-id="backoff-unit"
-                      required
-                      {...field}
-                    />
-                  );
-                }}
-              />
-            </Grid.Col>
-          </Grid>
-        </MantineInput.Wrapper>
+          <Grid.Col span={4}>
+            <Controller
+              control={control}
+              name={`steps.${index}.metadata.backoffAmount`}
+              defaultValue=""
+              render={({ field, fieldState }) => {
+                return (
+                  <Input
+                    {...field}
+                    value={field.value || ''}
+                    error={showErrors && fieldState.error?.message}
+                    min={0}
+                    max={100}
+                    type="number"
+                    data-test-id="backoff-amount"
+                    placeholder="0"
+                    required
+                    disabled={readonly}
+                    styles={(theme) => ({
+                      ...inputStyles(theme),
+                      input: {
+                        textAlign: 'center',
+                        ...inputStyles(theme).input,
+                      },
+                    })}
+                  />
+                );
+              }}
+            />
+          </Grid.Col>
+          <Grid.Col span={8}>
+            <IntervalRadios
+              control={control}
+              name={`steps.${index}.metadata.backoffUnit`}
+              testId="backoff-unit"
+              showErrors={showErrors}
+            />
+          </Grid.Col>
+        </Grid>
       </When>
       <When truthy={false}>
         <div
@@ -195,7 +171,7 @@ export const DigestMetadata = ({ control, index, loading, disableSubmit, onSideM
                   data-test-id="updateMode"
                   disabled={readonly}
                   checked={value}
-                  label={`Update in app notifications`}
+                  label="Update in app notifications"
                 />
               );
             }}
@@ -216,9 +192,13 @@ export const DigestMetadata = ({ control, index, loading, disableSubmit, onSideM
               <Input
                 {...field}
                 value={field.value || ''}
-                label="Digest Key (Optional)"
+                label={
+                  <LabelWithTooltip
+                    label="Digest Key (Optional)"
+                    tooltip="Used to group messages using this payload key, by default only subscriberId is used"
+                  />
+                }
                 placeholder="For example: post_id"
-                description="Used to group messages using this payload key, by default only subscriberId is used"
                 error={fieldState.error?.message}
                 type="text"
                 data-test-id="batch-key"
@@ -228,18 +208,6 @@ export const DigestMetadata = ({ control, index, loading, disableSubmit, onSideM
           }}
         />
       </div>
-      <Button
-        fullWidth
-        mt={10}
-        mb={15}
-        variant="outline"
-        data-test-id="delete-step-button"
-        loading={loading}
-        disabled={disableSubmit}
-        onClick={onSideMenuClose}
-      >
-        Save
-      </Button>
     </>
   );
 };
diff --git a/apps/web/src/pages/templates/workflow/IntervalRadios.tsx b/apps/web/src/pages/templates/workflow/IntervalRadios.tsx
new file mode 100644
index 00000000000..c57e31e6ec8
--- /dev/null
+++ b/apps/web/src/pages/templates/workflow/IntervalRadios.tsx
@@ -0,0 +1,49 @@
+import { Radio } from '@mantine/core';
+import { DigestUnitEnum } from '@novu/shared';
+import { Controller } from 'react-hook-form';
+import { useEnvController } from '../../../hooks';
+
+const options = [
+  { value: DigestUnitEnum.SECONDS, label: 'Sec' },
+  { value: DigestUnitEnum.MINUTES, label: 'Min' },
+  { value: DigestUnitEnum.HOURS, label: 'Hours' },
+  { value: DigestUnitEnum.DAYS, label: 'Days' },
+];
+
+export const IntervalRadios = ({ control, name, showErrors, testId = 'time-unit' }) => {
+  const { readonly } = useEnvController();
+
+  return (
+    <Controller
+      control={control}
+      name={name}
+      defaultValue=""
+      render={({ field, fieldState }) => {
+        return (
+          <Radio.Group
+            spacing={16}
+            error={showErrors && fieldState.error?.message}
+            data-test-id={testId}
+            withAsterisk
+            {...field}
+          >
+            {options.map((option) => (
+              <Radio
+                styles={() => ({
+                  label: {
+                    paddingLeft: 8,
+                  },
+                })}
+                key={option.value}
+                data-test-id={`${testId}-${option.value}`}
+                disabled={readonly}
+                value={option.value}
+                label={option.label}
+              />
+            ))}
+          </Radio.Group>
+        );
+      }}
+    />
+  );
+};
diff --git a/apps/web/src/pages/templates/workflow/LabelWithTooltip.tsx b/apps/web/src/pages/templates/workflow/LabelWithTooltip.tsx
new file mode 100644
index 00000000000..26534df3496
--- /dev/null
+++ b/apps/web/src/pages/templates/workflow/LabelWithTooltip.tsx
@@ -0,0 +1,34 @@
+import { Group, Stack } from '@mantine/core';
+import { colors, Tooltip } from '../../../design-system';
+import { InfoCircle } from '../../../design-system/icons/general/InfoCircle';
+import { useMantineTheme } from '@mantine/core';
+
+export const LabelWithTooltip = ({ label, tooltip }) => {
+  const theme = useMantineTheme();
+
+  return (
+    <Group spacing={8}>
+      <div
+        style={{
+          color: theme.colorScheme === 'dark' ? theme.white : theme.colors.gray[8],
+          fontWeight: 700,
+          fontSize: '14px',
+          lineHeight: '17px',
+          margin: '5px 0px',
+        }}
+      >
+        {label}
+      </div>
+      <Tooltip label={tooltip}>
+        <Stack
+          sx={{
+            height: '100%',
+            zIndex: 99999,
+          }}
+        >
+          <InfoCircle color={colors.B60} />
+        </Stack>
+      </Tooltip>
+    </Group>
+  );
+};
diff --git a/apps/web/src/pages/templates/workflow/NameInput.tsx b/apps/web/src/pages/templates/workflow/NameInput.tsx
new file mode 100644
index 00000000000..4dbf6681d93
--- /dev/null
+++ b/apps/web/src/pages/templates/workflow/NameInput.tsx
@@ -0,0 +1,72 @@
+import { TextInput, useMantineColorScheme } from '@mantine/core';
+import { colors } from '@novu/notification-center';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useEnvController } from '../../../hooks';
+import { IForm } from '../components/formTypes';
+
+export const NameInput = () => {
+  const {
+    control,
+    formState: { errors, isSubmitted },
+  } = useFormContext<IForm>();
+  const { readonly } = useEnvController();
+  const showErrors = isSubmitted && errors?.steps;
+  const { colorScheme } = useMantineColorScheme();
+
+  return (
+    <Controller
+      control={control}
+      name="name"
+      defaultValue="Untitled"
+      render={({ field, fieldState }) => {
+        return (
+          <TextInput
+            styles={(theme) => ({
+              root: {
+                flex: '1 1 auto',
+              },
+              wrapper: {
+                background: 'transparent',
+                width: '100%',
+              },
+              input: {
+                background: 'transparent',
+                borderStyle: 'solid',
+                borderColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[5],
+                borderWidth: '1px',
+                fontSize: '20px',
+                fontWeight: 'bolder',
+                padding: 9,
+                lineHeight: '28px',
+                minHeight: 'auto',
+                height: 'auto',
+                width: '100%',
+                textOverflow: 'ellipsis',
+                '&:not(:placeholder-shown)': {
+                  borderStyle: 'none',
+                  padding: 10,
+                },
+                '&:hover, &:focus': {
+                  borderStyle: 'solid',
+                  padding: 9,
+                },
+                '&:disabled': {
+                  backgroundColor: colorScheme === 'dark' ? colors.B15 : theme.white,
+                  color: colorScheme === 'dark' ? theme.white : theme.black,
+                  opacity: 1,
+                },
+              },
+            })}
+            {...field}
+            value={field.value || ''}
+            error={showErrors && fieldState.error?.message}
+            type="text"
+            data-test-id="title"
+            placeholder="Enter notification name"
+            disabled={readonly}
+          />
+        );
+      }}
+    />
+  );
+};
diff --git a/apps/web/src/pages/templates/workflow/ReplyCallback.tsx b/apps/web/src/pages/templates/workflow/ReplyCallback.tsx
index c9cd5f0cc32..02f81a6bf0d 100644
--- a/apps/web/src/pages/templates/workflow/ReplyCallback.tsx
+++ b/apps/web/src/pages/templates/workflow/ReplyCallback.tsx
@@ -8,7 +8,7 @@ import { useEnvController } from '../../../hooks';
 import { When } from '../../../components/utils/When';
 import { DoubleArrowRight } from '../../../design-system/icons/arrows/CircleArrowRight';
 
-export const ReplyCallback = ({ control, index, errors }) => {
+export const ReplyCallback = ({ control, index }) => {
   const { environment } = useEnvController();
   const { watch } = useFormContext();
   const replyCallbackActive = watch(`steps.${index}.replyCallback.active`);
@@ -18,7 +18,6 @@ export const ReplyCallback = ({ control, index, errors }) => {
 
   return (
     <>
-      <ReplyCallbackSwitch index={index} control={control} />
       <When truthy={!domainMxRecordConfigured && replyCallbackActive}>
         <LackConfigurationError
           text={
@@ -47,6 +46,8 @@ export const ReplyCallbackUrlInput = ({ control, index }) => {
         render={({ field: { value, ...field } }) => {
           return (
             <Input
+              mb={24}
+              mt={24}
               {...field}
               data-test-id="reply-callback-url-input"
               disabled={readonly}
@@ -93,7 +94,7 @@ export function LackConfigurationError({ text, redirectTo }: { text: string; red
 
   return (
     <>
-      <Grid align={'center'} m={0}>
+      <Grid align={'center'} mt={24}>
         <WarningMessage>
           <Grid.Col p={0} span={11}>
             <Text>{text}</Text>
@@ -116,8 +117,10 @@ const WarningMessage = styled.div`
   color: #e54545;
   background: rgba(230, 69, 69, 0.15);
   border-radius: 7px;
+  width: 100%;
 `;
 
 const StyledSwitch = styled(Switch)`
   max-width: 100% !important;
+  width: auto;
 `;
diff --git a/apps/web/src/pages/templates/workflow/ShouldStopOnFailSwitch.tsx b/apps/web/src/pages/templates/workflow/ShouldStopOnFailSwitch.tsx
index 59be611f25c..1ebea842f76 100644
--- a/apps/web/src/pages/templates/workflow/ShouldStopOnFailSwitch.tsx
+++ b/apps/web/src/pages/templates/workflow/ShouldStopOnFailSwitch.tsx
@@ -17,7 +17,7 @@ export const ShouldStopOnFailSwitch = ({ control, index }) => {
             {...field}
             disabled={readonly}
             checked={value}
-            label="Stop workflow if this step fails?"
+            label="Stop if step fails"
             data-test-id="step-should-stop-on-fail-switch"
           />
         );
@@ -28,4 +28,5 @@ export const ShouldStopOnFailSwitch = ({ control, index }) => {
 
 const StyledSwitch = styled(Switch)`
   max-width: 100% !important;
+  width: auto;
 `;
diff --git a/apps/web/src/pages/templates/workflow/SideBar/AddStepMenu.tsx b/apps/web/src/pages/templates/workflow/SideBar/AddStepMenu.tsx
index 4fdd39b4a7b..036e385fb65 100644
--- a/apps/web/src/pages/templates/workflow/SideBar/AddStepMenu.tsx
+++ b/apps/web/src/pages/templates/workflow/SideBar/AddStepMenu.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import { Stack } from '@mantine/core';
-import { colors, DragButton, Text, Title } from '../../../../design-system';
+import { Stack, Title } from '@mantine/core';
+import { colors, DragButton, Text } from '../../../../design-system';
 import { channels, NodeTypeEnum } from '../../shared/channels';
 import { useEnvController } from '../../../../hooks';
 import { When } from '../../../../components/utils/When';
-import { NavSection } from '../../components/TemplatesSideBar';
 import { StyledNav } from '../WorkflowEditor';
 
 export function AddStepMenu({
@@ -18,13 +17,11 @@ export function AddStepMenu({
 
   return (
     <StyledNav data-test-id="drag-side-menu">
-      <NavSection>
-        <Title size={2}>Steps to add</Title>
-        <Text color={colors.B60} mt={5} mb={5}>
-          <When truthy={!readonly}>Drag and drop new steps to the canvas</When>
-          <When truthy={readonly}>You can not drag and drop new steps in Production</When>
-        </Text>
-      </NavSection>
+      <div>
+        <Title color={colors.B60} size={16} mb={16}>
+          Channels
+        </Title>
+      </div>
       <When truthy={!readonly}>
         <Stack spacing={18}>
           {channels
@@ -34,17 +31,15 @@ export function AddStepMenu({
             ))}
         </Stack>
       </When>
-      <NavSection
+      <div
         style={{
           marginTop: '15px',
         }}
       >
-        <Title size={2}>Actions</Title>
-        <Text color={colors.B60} mt={5} mb={5}>
-          <When truthy={!readonly}>Add actions to the flow</When>
-          <When truthy={readonly}>You can not drag and drop new actions in Production</When>
-        </Text>
-      </NavSection>
+        <Title color={colors.B60} size={16} mb={16}>
+          Actions
+        </Title>
+      </div>
       <When truthy={!readonly}>
         <Stack spacing={18}>
           {channels
@@ -73,10 +68,6 @@ const DraggableNode = ({ channel, setDragging, onDragStart }) => (
     role="presentation"
     aria-grabbed="true"
   >
-    <DragButton
-      Icon={channel.Icon}
-      description={channel.type === NodeTypeEnum.ACTION ? channel.description : ''}
-      label={channel.label}
-    />
+    <DragButton Icon={channel.Icon} description={''} label={channel.label} />
   </div>
 );
diff --git a/apps/web/src/pages/templates/workflow/SideBar/Sidebar.tsx b/apps/web/src/pages/templates/workflow/SideBar/Sidebar.tsx
new file mode 100644
index 00000000000..0e152a8aefc
--- /dev/null
+++ b/apps/web/src/pages/templates/workflow/SideBar/Sidebar.tsx
@@ -0,0 +1,103 @@
+import { Container, Group, Stack, useMantineColorScheme } from '@mantine/core';
+import { colors } from '@novu/notification-center';
+import { Background, BackgroundVariant } from 'react-flow-renderer';
+import { AddStepMenu } from './AddStepMenu';
+import styled from '@emotion/styled';
+import { Link, useNavigate, useOutletContext } from 'react-router-dom';
+import { Button } from '../../../../design-system';
+import { Settings } from '../../../../design-system/icons';
+import { useBasePath } from '../../hooks/useBasePath';
+import { useFormContext } from 'react-hook-form';
+import { IForm } from '../../components/formTypes';
+import { useDidUpdate, useTimeout } from '@mantine/hooks';
+import { useState } from 'react';
+import { UpdateButton } from '../../components/UpdateButton';
+import { useEnvController } from '../../../../hooks';
+import { When } from '../../../../components/utils/When';
+
+export const Sidebar = () => {
+  const { colorScheme } = useMantineColorScheme();
+  const onDragStart = (event, nodeType) => {
+    event.dataTransfer.setData('application/reactflow', nodeType);
+    event.dataTransfer.effectAllowed = 'move';
+  };
+  const { setDragging }: any = useOutletContext();
+  const { readonly } = useEnvController();
+  const navigate = useNavigate();
+  const basePath = useBasePath();
+  const {
+    formState: { isDirty },
+  } = useFormContext<IForm>();
+  const [shouldPulse, setShouldPulse] = useState(false);
+
+  useDidUpdate(() => {
+    if (isDirty) {
+      return;
+    }
+    setShouldPulse(true);
+    start();
+  }, [isDirty]);
+
+  const { start } = useTimeout(() => {
+    setShouldPulse(false);
+  }, 5000);
+
+  return (
+    <>
+      <Container fluid sx={{ width: '100%', paddingLeft: 0, height: '74px' }}>
+        <Stack
+          justify="center"
+          sx={{
+            height: '100%',
+          }}
+        >
+          <Group>
+            <UpdateButton />
+            <Button
+              pulse={shouldPulse}
+              onClick={() => {
+                navigate(basePath + '/snippet');
+              }}
+              data-test-id="get-snippet-btn"
+            >
+              Get Snippet
+            </Button>
+            <Link data-test-id="settings-page" to="settings">
+              <Settings />
+            </Link>
+          </Group>
+        </Stack>
+      </Container>
+      <When truthy={!readonly}>
+        <div style={{ position: 'relative', padding: '12px', paddingLeft: 0 }}>
+          <SideBarWrapper dark={colorScheme === 'dark'}>
+            <AddStepMenu setDragging={setDragging} onDragStart={onDragStart} />
+          </SideBarWrapper>
+          <Background
+            size={1}
+            gap={10}
+            variant={BackgroundVariant.Dots}
+            color={colorScheme === 'dark' ? colors.BGDark : colors.BGLight}
+          />
+        </div>
+      </When>
+      <When truthy={readonly}>
+        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
+          <Background
+            size={1}
+            gap={10}
+            variant={BackgroundVariant.Dots}
+            color={colorScheme === 'dark' ? colors.BGDark : colors.BGLight}
+          />
+        </div>
+      </When>
+    </>
+  );
+};
+
+const SideBarWrapper = styled.div<{ dark: boolean }>`
+  background-color: ${({ dark }) => (dark ? colors.B17 : colors.white)} !important;
+  position: relative;
+  z-index: 1;
+  border-radius: 12px;
+`;
diff --git a/apps/web/src/pages/templates/workflow/SideBar/StepSettings.tsx b/apps/web/src/pages/templates/workflow/SideBar/StepSettings.tsx
index 0fa35b1838e..412f2bcc276 100644
--- a/apps/web/src/pages/templates/workflow/SideBar/StepSettings.tsx
+++ b/apps/web/src/pages/templates/workflow/SideBar/StepSettings.tsx
@@ -1,224 +1,95 @@
-import styled from '@emotion/styled';
-import { ActionIcon, Divider, Stack } from '@mantine/core';
+import { Group } from '@mantine/core';
 import { useFormContext } from 'react-hook-form';
-import { StepTypeEnum } from '@novu/shared';
 
-import { Button, colors, Text, Title } from '../../../../design-system';
-import { Close } from '../../../../design-system/icons/actions/Close';
-import { getChannel, NodeTypeEnum } from '../../shared/channels';
+import { Button } from '../../../../design-system';
 import type { IForm } from '../../components/formTypes';
 import { StepActiveSwitch } from '../StepActiveSwitch';
 import { useEnvController } from '../../../../hooks';
-import { When } from '../../../../components/utils/When';
-import { PlusCircle, Trash } from '../../../../design-system/icons';
-import { DigestMetadata } from '../DigestMetadata';
-import { DelayMetadata } from '../DelayMetadata';
-import { Filters } from '../../filter/Filters';
 import { ShouldStopOnFailSwitch } from '../ShouldStopOnFailSwitch';
-import { ReplyCallback } from '../ReplyCallback';
-import { NavSection } from '../../components/TemplatesSideBar';
-import { StyledNav } from '../WorkflowEditor';
-import { useTemplateEditorContext } from '../../editor/TemplateEditorProvider';
-
-const capitalize = (text: string) => {
-  return typeof text !== 'string' ? '' : text.charAt(0).toUpperCase() + text.slice(1);
-};
+import { ReplyCallback, ReplyCallbackSwitch } from '../ReplyCallback';
+import { useParams } from 'react-router-dom';
+import { StepTypeEnum } from '@novu/shared';
+import { When } from '../../../../components/utils/When';
+import { FilterModal } from '../../filter/FilterModal';
+import { useState } from 'react';
+import { Filter } from '../../../../design-system/icons/actions/Filter';
+import { FilterGradient } from '../../../../design-system/icons/gradient/FilterGradient';
+import { FilterOutlined } from '../../../../design-system/icons/gradient/FilterOutlined';
 
-export function StepSettings({
-  setActivePage,
-  setFilterOpen,
-  isLoading,
-  isUpdateLoading,
-  loadingEditTemplate,
-  onDelete,
-}: {
-  setActivePage: (string) => void;
-  setFilterOpen: (value: ((prevState: boolean) => boolean) | boolean) => void;
-  isLoading: boolean;
-  isUpdateLoading: boolean;
-  loadingEditTemplate: boolean;
-  onDelete: (id) => void;
-}) {
-  const {
-    control,
-    formState: { errors, isDirty },
-  } = useFormContext<IForm>();
-  const { selectedNodeId, setSelectedNodeId, activeStep, activeStepIndex, selectedChannel } =
-    useTemplateEditorContext();
-  const hasActiveStepSelected = activeStepIndex >= 0;
+export function StepSettings({ index }: { index: number }) {
   const { readonly } = useEnvController();
-  const onSideMenuClose = () => setSelectedNodeId('');
-  const isSubmitDisabled = readonly || loadingEditTemplate || isLoading || !isDirty;
+  const { control, watch } = useFormContext<IForm>();
+  const [filterOpen, setFilterOpen] = useState(false);
+  const { channel } = useParams<{
+    channel: StepTypeEnum;
+  }>();
+  const [filterHover, setFilterHover] = useState(false);
+
+  const filters = watch(`steps.${index}.filters.0.children`);
 
   return (
-    <StyledNav data-test-id="step-properties-side-menu">
-      <MenuBar>
-        <Stack justify="flex-start" spacing="xs">
-          <When truthy={selectedChannel !== StepTypeEnum.DIGEST && selectedChannel !== StepTypeEnum.DELAY}>
-            <NavSection>
-              <ButtonWrapper>
-                <Title size={2}>{getChannel(selectedChannel ?? '')?.label} Properties</Title>
-                <ActionIcon data-test-id="close-side-menu-btn" variant="transparent" onClick={onSideMenuClose}>
-                  <Close />
-                </ActionIcon>
-              </ButtonWrapper>
-            </NavSection>
-            <NavSection>
-              <div data-test-id="email-step-settings-edit">
-                <EditTemplateButton
-                  mt={10}
-                  variant="outline"
-                  data-test-id="edit-template-channel"
-                  fullWidth
-                  onClick={() => {
-                    setActivePage(
-                      selectedChannel === StepTypeEnum.IN_APP ? selectedChannel : capitalize(selectedChannel ?? '')
-                    );
-                  }}
-                >
-                  {readonly ? 'View' : 'Edit'} Template
-                </EditTemplateButton>
-              </div>
-              <Divider my={30} />
-              <When truthy={hasActiveStepSelected}>
-                <Stack>
-                  <StepActiveSwitch index={activeStepIndex} control={control} />
-                  <ShouldStopOnFailSwitch index={activeStepIndex} control={control} />
-                  <When truthy={selectedChannel === StepTypeEnum.EMAIL}>
-                    <ReplyCallback index={activeStepIndex} control={control} errors={errors} />
-                  </When>
-                </Stack>
-              </When>
-            </NavSection>
-            <NavSection>
-              <Divider
-                style={{
-                  marginBottom: '15px',
-                }}
-                label="Filters"
-                labelPosition="center"
-              />
-              {activeStep && <Filters step={activeStep} />}
-              <FilterButton
-                fullWidth
-                variant="outline"
-                onClick={() => {
-                  setFilterOpen(true);
-                }}
-                disabled={readonly}
-                data-test-id="add-filter-btn"
-              >
-                <PlusCircle
-                  style={{
-                    marginRight: '7px',
-                  }}
-                />
-                Add filter
-              </FilterButton>
-            </NavSection>
-          </When>
-          <When truthy={selectedChannel === StepTypeEnum.DIGEST}>
-            <NavSection>
-              <ButtonWrapper>
-                <Title size={2}>Digest Properties</Title>
-                <ActionIcon data-test-id="close-side-menu-btn" variant="transparent" onClick={onSideMenuClose}>
-                  <Close />
-                </ActionIcon>
-              </ButtonWrapper>
-              <Text mr={10} mt={10} size="md" color={colors.B60}>
-                Configure the digest parameters. Read more about the digest engine{' '}
-                <a target={'_blank'} rel="noopener noreferrer" href={'https://docs.novu.co/platform/digest'}>
-                  here
-                </a>
-                .
-              </Text>
-            </NavSection>
-            <NavSection>
-              <When truthy={hasActiveStepSelected}>
-                <DigestMetadata
-                  control={control}
-                  index={activeStepIndex}
-                  loading={isLoading || isUpdateLoading}
-                  disableSubmit={isSubmitDisabled}
-                  onSideMenuClose={onSideMenuClose}
-                />
-              </When>
-            </NavSection>
+    <>
+      <Group position="apart" spacing={8}>
+        <Group spacing={12}>
+          <StepActiveSwitch index={index} control={control} />
+          <ShouldStopOnFailSwitch index={index} control={control} />
+          <When truthy={channel === StepTypeEnum.EMAIL}>
+            <ReplyCallbackSwitch index={index} control={control} />
           </When>
-          <When truthy={selectedChannel === StepTypeEnum.DELAY}>
-            <NavSection>
-              <ButtonWrapper>
-                <Title size={2}>Delay Properties</Title>
-                <ActionIcon data-test-id="close-side-menu-btn" variant="transparent" onClick={onSideMenuClose}>
-                  <Close />
-                </ActionIcon>
-              </ButtonWrapper>
-              <Text mr={10} mt={10} size="md" color={colors.B60}>
-                Configure the delay parameters.
-              </Text>
-            </NavSection>
-            <NavSection>
-              <When truthy={hasActiveStepSelected}>
-                <DelayMetadata control={control} index={activeStepIndex} />
-              </When>
-            </NavSection>
-          </When>
-        </Stack>
-        <DeleteStepButton
-          mt={10}
+        </Group>
+        <Button
           variant="outline"
-          data-test-id="delete-step-button"
           onClick={() => {
-            onDelete(selectedNodeId);
+            setFilterOpen(true);
           }}
           disabled={readonly}
+          data-test-id="add-filter-btn"
+          onMouseEnter={() => {
+            setFilterHover(true);
+          }}
+          onMouseLeave={() => {
+            setFilterHover(false);
+          }}
         >
-          <Trash
-            style={{
-              marginRight: '5px',
-            }}
-          />
-          Delete {getChannel(selectedChannel?.toString() ?? '')?.type === NodeTypeEnum.CHANNEL ? 'Step' : 'Action'}
-        </DeleteStepButton>
-      </MenuBar>
-    </StyledNav>
+          <When truthy={filters && filters?.length > 0}>
+            <When truthy={filterHover}>
+              <FilterGradient
+                style={{
+                  marginRight: '7px',
+                }}
+              />
+            </When>
+            <When truthy={!filterHover}>
+              <FilterOutlined
+                style={{
+                  marginRight: '7px',
+                }}
+              />
+            </When>
+            {filters?.length} filter{filters && filters?.length < 2 ? '' : 's'}
+          </When>
+          <When truthy={filters && filters?.length === 0}>
+            <Filter
+              style={{
+                marginRight: '7px',
+              }}
+            />
+            Add filter
+          </When>
+        </Button>
+      </Group>
+      <ReplyCallback index={index} control={control} />
+      <FilterModal
+        isOpen={filterOpen}
+        cancel={() => {
+          setFilterOpen(false);
+        }}
+        confirm={() => {
+          setFilterOpen(false);
+        }}
+        control={control}
+        stepIndex={index}
+      />
+    </>
   );
 }
-
-const ButtonWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-const EditTemplateButton = styled(Button)`
-  background-color: transparent;
-`;
-
-const FilterButton = styled(Button)`
-  background: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B20 : colors.white)};
-  box-shadow: 0px 5px 20px rgb(0 0 0 / 20%);
-  :hover {
-    background-color: ${({ theme }) => (theme.colorScheme === 'dark' ? colors.B20 : colors.white)};
-  }
-`;
-
-const MenuBar = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  height: 100%;
-`;
-
-const DeleteStepButton = styled(Button)`
-  //display: flex;
-  //position: inherit;
-  //bottom: 15px;
-  //left: 20px;
-  //right: 20px;
-  background: rgba(229, 69, 69, 0.15);
-  color: ${colors.error};
-  box-shadow: none;
-  :hover {
-    background: rgba(229, 69, 69, 0.15);
-  }
-`;
diff --git a/apps/web/src/pages/templates/workflow/StepActiveSwitch.tsx b/apps/web/src/pages/templates/workflow/StepActiveSwitch.tsx
index 967e97025fd..8af6ad34113 100644
--- a/apps/web/src/pages/templates/workflow/StepActiveSwitch.tsx
+++ b/apps/web/src/pages/templates/workflow/StepActiveSwitch.tsx
@@ -17,7 +17,7 @@ export const StepActiveSwitch = ({ control, index }) => {
             {...field}
             disabled={readonly}
             checked={value}
-            label={`Step is ${value ? 'active' : 'not active'}`}
+            label={value ? 'Active' : 'Inactive'}
             data-test-id="step-active-switch"
           />
         );
@@ -28,4 +28,5 @@ export const StepActiveSwitch = ({ control, index }) => {
 
 const StyledSwitch = styled(Switch)`
   max-width: 100% !important;
+  width: auto;
 `;
diff --git a/apps/web/src/pages/templates/workflow/WorkflowEditor.tsx b/apps/web/src/pages/templates/workflow/WorkflowEditor.tsx
index 1e479a41904..356b6ecf662 100644
--- a/apps/web/src/pages/templates/workflow/WorkflowEditor.tsx
+++ b/apps/web/src/pages/templates/workflow/WorkflowEditor.tsx
@@ -1,79 +1,45 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
 import { useFormContext } from 'react-hook-form';
 import styled from '@emotion/styled';
-import { Grid, useMantineColorScheme } from '@mantine/core';
 import { FilterPartTypeEnum, StepTypeEnum } from '@novu/shared';
 import { showNotification } from '@mantine/notifications';
-
 import FlowEditor from './workflow/FlowEditor';
-import { colors } from '../../../design-system';
-import { channels, getChannel, NodeTypeEnum } from '../shared/channels';
+import { channels } from '../shared/channels';
 import type { IForm } from '../components/formTypes';
+import { DeleteConfirmModal } from '../components/DeleteConfirmModal';
+import { useTemplateEditorForm } from '../components/TemplateEditorFormProvider';
+import { Link, Outlet, useLocation, useNavigate, useParams } from 'react-router-dom';
+import { Container, Group, Stack } from '@mantine/core';
 import { useEnvController } from '../../../hooks';
 import { When } from '../../../components/utils/When';
-import { TemplatePageHeader } from '../components/TemplatePageHeader';
-import { EditorPages } from '../editor/TemplateEditorPage';
-import { DeleteConfirmModal } from '../components/DeleteConfirmModal';
-import { FilterModal } from '../filter/FilterModal';
-import { StepSettings } from './SideBar/StepSettings';
-import { AddStepMenu } from './SideBar/AddStepMenu';
-import { useTemplateFetcher } from '../../../api/hooks';
-import { ActivePageEnum } from '../../../constants/editorEnums';
-import { useTemplateEditorContext } from '../editor/TemplateEditorProvider';
-
-const WorkflowEditor = ({
-  setActivePage,
-  templateId,
-  activePage,
-  onTestWorkflowClicked,
-  isCreatingTemplate,
-  isUpdatingTemplate,
-  addStep,
-  deleteStep,
-}: {
-  setActivePage: (string) => void;
-  templateId: string;
-  activePage: ActivePageEnum;
-  onTestWorkflowClicked: () => void;
-  isCreatingTemplate: boolean;
-  isUpdatingTemplate: boolean;
-  addStep: (channelType: StepTypeEnum, id: string, index?: number) => void;
-  deleteStep: (index: number) => void;
-}) => {
-  const { setSelectedNodeId, activeStepIndex, selectedChannel } = useTemplateEditorContext();
-  const hasActiveStepSelected = activeStepIndex >= 0;
-  const { colorScheme } = useMantineColorScheme();
+import { useBasePath } from '../hooks/useBasePath';
+import { UpdateButton } from '../components/UpdateButton';
+import { NameInput } from './NameInput';
+import { Settings } from '../../../design-system/icons';
+import { Button } from '../../../design-system';
+
+const WorkflowEditor = () => {
+  const { addStep, deleteStep } = useTemplateEditorForm();
+  const { channel } = useParams<{
+    channel: StepTypeEnum | undefined;
+  }>();
   const [dragging, setDragging] = useState(false);
 
-  const onDragStart = (event, nodeType) => {
-    event.dataTransfer.setData('application/reactflow', nodeType);
-    event.dataTransfer.effectAllowed = 'move';
-  };
   const {
-    control,
     watch,
-    clearErrors,
-    formState: { errors, isDirty: isDirtyForm, isSubmitted },
+    formState: { errors },
   } = useFormContext<IForm>();
-  const { isInitialLoading: loadingEditTemplate } = useTemplateFetcher({ templateId });
-
-  const [filterOpen, setFilterOpen] = useState(false);
+  const { readonly } = useEnvController();
   const steps = watch('steps');
 
-  const { readonly } = useEnvController();
   const [toDelete, setToDelete] = useState<string>('');
-
-  const setActivePageWrapper = (page: ActivePageEnum) => {
-    if (!isSubmitted && EditorPages.includes(page)) {
-      clearErrors('steps');
-    }
-    setActivePage(page);
-  };
+  const basePath = useBasePath();
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
 
   const confirmDelete = () => {
-    const index = steps.findIndex((item) => item._id === toDelete);
+    const index = steps.findIndex((item) => item.uuid === toDelete);
     deleteStep(index);
-    setSelectedNodeId('');
     setToDelete('');
   };
 
@@ -81,11 +47,11 @@ const WorkflowEditor = ({
     setToDelete('');
   };
 
-  const onDelete = (id) => {
-    const currentStep = steps.find((step) => step.id === id);
+  const onDelete = (uuid) => {
+    const stepToDelete = steps.find((step) => step.uuid === uuid);
 
-    if (!currentStep) {
-      setToDelete(id);
+    if (!stepToDelete) {
+      setToDelete(uuid);
 
       return;
     }
@@ -95,7 +61,7 @@ const WorkflowEditor = ({
         step.filters?.find(
           (filter) =>
             filter.children?.find(
-              (item) => item.on === FilterPartTypeEnum.PREVIOUS_STEP && item.step === currentStep.uuid
+              (item) => item.on === FilterPartTypeEnum.PREVIOUS_STEP && item.step === stepToDelete.uuid
             ) !== undefined
         ) !== undefined
       );
@@ -117,83 +83,115 @@ const WorkflowEditor = ({
       return;
     }
 
-    setToDelete(id);
+    setToDelete(uuid);
   };
 
-  useEffect(() => {
-    setSelectedNodeId('');
-  }, []);
-
-  return (
-    <>
-      <Grid gutter={0} grow style={{ minHeight: '100%' }}>
-        <Grid.Col
-          md={9}
-          sm={6}
+  if (readonly && pathname === basePath) {
+    return (
+      <div style={{ minHeight: '600px', display: 'flex', flexFlow: 'row' }}>
+        <div
           style={{
+            flex: '1 1 auto',
             display: 'flex',
-            flexDirection: 'column',
-            minHeight: 'calc(100vh - var(--mantine-header-height, 0px) - 60px)',
+            flexFlow: 'Column',
           }}
         >
-          <TemplatePageHeader
-            loading={isCreatingTemplate || isUpdatingTemplate}
-            disableSubmit={readonly || loadingEditTemplate || isCreatingTemplate || !isDirtyForm}
-            templateId={templateId}
-            setActivePage={setActivePage}
-            activePage={activePage}
-            onTestWorkflowClicked={onTestWorkflowClicked}
-          />
-          <FlowEditor
-            activePage={activePage}
-            onDelete={onDelete}
-            setActivePage={setActivePageWrapper}
-            dragging={dragging}
-            errors={errors}
-            steps={steps}
-            addStep={addStep}
-            setSelectedNodeId={setSelectedNodeId}
-          />
-          <When truthy={hasActiveStepSelected}>
-            <FilterModal
-              isOpen={filterOpen}
-              cancel={() => {
-                setFilterOpen(false);
+          <Container fluid sx={{ width: '100%', height: '74px' }}>
+            <Stack
+              justify="center"
+              sx={{
+                height: '100%',
               }}
-              confirm={() => {
-                setFilterOpen(false);
+            >
+              <Group>
+                <NameInput />
+                <UpdateButton />
+                <Button
+                  onClick={() => {
+                    navigate(basePath + '/snippet');
+                  }}
+                  data-test-id="get-snippet-btn"
+                >
+                  Get Snippet
+                </Button>
+                <Link data-test-id="settings-page" to="settings">
+                  <Settings />
+                </Link>
+              </Group>
+            </Stack>
+          </Container>
+          <FlowEditor onDelete={onDelete} dragging={dragging} errors={errors} steps={steps} addStep={addStep} />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <When truthy={channel && [StepTypeEnum.EMAIL, StepTypeEnum.IN_APP].includes(channel)}>
+        <Outlet
+          context={{
+            setDragging,
+            onDelete,
+          }}
+        />
+      </When>
+      <When truthy={readonly && pathname === basePath}>{null}</When>
+      <When truthy={!channel || ![StepTypeEnum.EMAIL, StepTypeEnum.IN_APP].includes(channel)}>
+        <div style={{ minHeight: '600px', display: 'flex', flexFlow: 'row' }}>
+          <div
+            style={{
+              flex: '1 1 auto',
+              display: 'flex',
+              flexFlow: 'Column',
+            }}
+          >
+            <Container fluid sx={{ width: '100%', height: '74px' }}>
+              <Stack
+                justify="center"
+                sx={{
+                  height: '100%',
+                }}
+              >
+                <Group>
+                  <NameInput />
+                  <When truthy={pathname !== basePath}>
+                    <UpdateButton />
+                  </When>
+                </Group>
+              </Stack>
+            </Container>
+            <FlowEditor onDelete={onDelete} dragging={dragging} errors={errors} steps={steps} addStep={addStep} />
+          </div>
+          <div
+            style={{
+              position: 'relative',
+              minWidth: '260px',
+              width: 'auto',
+              minHeight: '600px',
+            }}
+          >
+            <Outlet
+              context={{
+                setDragging,
+                onDelete,
               }}
-              control={control}
-              stepIndex={activeStepIndex}
             />
-          </When>
-        </Grid.Col>
-        <Grid.Col md={3} sm={6}>
-          <SideBarWrapper dark={colorScheme === 'dark'}>
-            {selectedChannel ? (
-              <StepSettings
-                setActivePage={setActivePageWrapper}
-                setFilterOpen={setFilterOpen}
-                isLoading={isCreatingTemplate}
-                isUpdateLoading={isUpdatingTemplate}
-                loadingEditTemplate={loadingEditTemplate}
-                onDelete={onDelete}
-              />
-            ) : (
-              <AddStepMenu setDragging={setDragging} onDragStart={onDragStart} />
-            )}
-          </SideBarWrapper>
-        </Grid.Col>
-      </Grid>
+          </div>
+        </div>
+      </When>
       <DeleteConfirmModal
-        target={
-          selectedChannel !== null && getChannel(selectedChannel ?? '')?.type === NodeTypeEnum.CHANNEL
-            ? 'step'
-            : 'action'
+        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={toDelete.length > 0}
         confirm={confirmDelete}
         cancel={cancelDelete}
+        confirmButtonText="Delete step"
+        cancelButtonText="Cancel"
       />
     </>
   );
@@ -201,12 +199,6 @@ const WorkflowEditor = ({
 
 export default WorkflowEditor;
 
-const SideBarWrapper = styled.div<{ dark: boolean }>`
-  background-color: ${({ dark }) => (dark ? colors.B17 : colors.white)};
-  height: 100%;
-  position: relative;
-`;
-
 export const StyledNav = styled.div`
   padding: 15px 20px;
   height: 100%;
diff --git a/apps/web/src/pages/templates/workflow/workflow/FlowEditor.tsx b/apps/web/src/pages/templates/workflow/workflow/FlowEditor.tsx
index cd8515c491b..d4e548a4854 100644
--- a/apps/web/src/pages/templates/workflow/workflow/FlowEditor.tsx
+++ b/apps/web/src/pages/templates/workflow/workflow/FlowEditor.tsx
@@ -26,11 +26,10 @@ import { getChannel } from '../../shared/channels';
 import type { IForm, IStepEntity } from '../../components/formTypes';
 import AddNode from './node-types/AddNode';
 import { useEnvController } from '../../../../hooks';
-import { MinimalTemplatesSideBar } from './layout/MinimalTemplatesSideBar';
 import { getFormattedStepErrors } from '../../shared/errors';
 import { AddNodeEdge, IAddNodeEdge } from './edge-types/AddNodeEdge';
-import { useTemplateEditorForm } from '../../components/TemplateEditorFormProvider';
-import { ActivePageEnum } from '../../../../constants/editorEnums';
+import { useBasePath } from '../../hooks/useBasePath';
+import { useNavigate } from 'react-router-dom';
 
 const nodeTypes = {
   channelNode: ChannelNode,
@@ -52,20 +51,14 @@ const initialNodes: Node[] = [
 const initialEdges: Edge[] = [];
 
 export function FlowEditor({
-  activePage,
-  setActivePage,
   steps,
-  setSelectedNodeId,
   addStep,
   dragging,
   errors,
   onDelete,
 }: {
-  activePage: ActivePageEnum;
-  setActivePage: (string) => void;
   onDelete: (id: string) => void;
   steps: IStepEntity[];
-  setSelectedNodeId: (nodeId: string) => void;
   addStep: (channelType: StepTypeEnum, id: string, index?: number) => void;
   dragging: boolean;
   errors: any;
@@ -77,16 +70,15 @@ export function FlowEditor({
   const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance>();
   const { setViewport } = useReactFlow();
   const { readonly } = useEnvController();
-  const { template, trigger } = useTemplateEditorForm();
   const { trigger: triggerErrors } = useFormContext<IForm>();
   const [displayEdgeTimeout, setDisplayEdgeTimeout] = useState<Map<string, NodeJS.Timeout | null>>(new Map());
 
   useEffect(() => {
     const clientWidth = reactFlowWrapper.current?.clientWidth;
     const middle = clientWidth ? clientWidth / 2 - 100 : 0;
-    const zoomView = nodes.length > 4 ? 0.75 : 1;
-    const xyPos = reactFlowInstance?.project({ x: middle, y: 0 });
-    setViewport({ x: xyPos?.x ?? middle, y: xyPos?.y ?? 0, zoom: zoomView }, { duration: 800 });
+    const zoomView = 1;
+    reactFlowInstance?.project({ x: middle, y: 10 });
+    setViewport({ x: middle, y: 10, zoom: zoomView });
   }, [reactFlowInstance]);
 
   useEffect(() => {
@@ -107,13 +99,22 @@ export function FlowEditor({
     [steps]
   );
 
-  const onNodeClick = useCallback((event, node) => {
-    event.preventDefault();
-    setSelectedNodeId(node.id);
-    if (node.id === '1') {
-      setSelectedNodeId('');
-    }
-  }, []);
+  const basePath = useBasePath();
+  const navigate = useNavigate();
+
+  const onNodeClick = useCallback(
+    (event, node) => {
+      event.preventDefault();
+
+      if (node.type === 'channelNode') {
+        navigate(basePath + `/${node.data.channelType}/${node.data.uuid}`);
+      }
+      if (node.type === 'triggerNode') {
+        navigate(basePath + '/test-workflow');
+      }
+    },
+    [basePath]
+  );
 
   const onDragOver = useCallback((event) => {
     event.preventDefault();
@@ -219,7 +220,8 @@ export function FlowEditor({
         index: i,
         error: getFormattedStepErrors(i, errors),
         onDelete,
-        setActivePage,
+        uuid: step.uuid,
+        name: step.name,
       },
     };
   }
@@ -294,7 +296,14 @@ export function FlowEditor({
   return (
     <>
       <Wrapper dark={colorScheme === 'dark'}>
-        <div style={{ minHeight: '500px', height: '100%', width: 'inherit' }} ref={reactFlowWrapper}>
+        <div
+          style={{
+            height: '100%',
+            width: '100%',
+            minHeight: '600px',
+          }}
+          ref={reactFlowWrapper}
+        >
           <ReactFlow
             nodes={nodes}
             edges={edges}
@@ -316,7 +325,6 @@ export function FlowEditor({
                 handleDisplayAddNodeOnEdge(`edge-button-${edge.source}`);
               }
             }}
-            onPaneClick={() => setSelectedNodeId('')}
             /*
              * TODO: for now this disables the deletion of a step using delete/backspace keys
              * as it will require some sort of refactoring of how we save the workflow state
@@ -326,11 +334,6 @@ export function FlowEditor({
             deleteKeyCode={null}
             {...reactFlowDefaultProps}
           >
-            <MinimalTemplatesSideBar
-              activePage={activePage}
-              setActivePage={setActivePage}
-              showTriggerSection={!!template && !!trigger}
-            />
             <Controls />
             <Background
               size={1}
diff --git a/apps/web/src/pages/templates/workflow/workflow/layout/MinimalTemplatesSideBar.tsx b/apps/web/src/pages/templates/workflow/workflow/layout/MinimalTemplatesSideBar.tsx
deleted file mode 100644
index ece1661eef6..00000000000
--- a/apps/web/src/pages/templates/workflow/workflow/layout/MinimalTemplatesSideBar.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react';
-import styled from '@emotion/styled';
-import { WrapperButton } from '../../../../../design-system/template-button/Button';
-import { IconWrapper } from '../../../../../design-system/template-button/IconWrapper';
-import { NavSection, TemplatesSideBar } from '../../../components/TemplatesSideBar';
-import { ActivePageEnum } from '../../../../../constants/editorEnums';
-
-export function MinimalTemplatesSideBar({
-  activePage,
-  setActivePage,
-  showTriggerSection,
-}: {
-  activePage: ActivePageEnum;
-  setActivePage: (string) => void;
-  showTriggerSection: boolean;
-}) {
-  return (
-    <Wrapper>
-      <TemplatesSideBar
-        activeTab={activePage}
-        changeTab={setActivePage}
-        showTriggerSection={showTriggerSection}
-        minimalView={true}
-      />
-    </Wrapper>
-  );
-}
-
-const Wrapper = styled.div`
-  position: absolute;
-  width: 100px;
-  padding: 25px;
-  z-index: 5;
-
-  ${NavSection} {
-    margin-bottom: 20px;
-  }
-
-  ${WrapperButton} {
-    height: 50px;
-    width: 50px;
-    margin: 0;
-  }
-
-  ${IconWrapper} {
-    margin-left: 0;
-    @media screen and (max-width: 1400px) {
-    }
-  }
-`;
diff --git a/apps/web/src/pages/templates/workflow/workflow/node-types/ChannelNode.tsx b/apps/web/src/pages/templates/workflow/workflow/node-types/ChannelNode.tsx
index 6db5a83b879..bb886987438 100644
--- a/apps/web/src/pages/templates/workflow/workflow/node-types/ChannelNode.tsx
+++ b/apps/web/src/pages/templates/workflow/workflow/node-types/ChannelNode.tsx
@@ -3,7 +3,7 @@ import { Handle, Position, getOutgoers, useReactFlow, useNodes } from 'react-flo
 import { ChannelTypeEnum, StepTypeEnum } from '@novu/shared';
 
 import { WorkflowNode } from './WorkflowNode';
-import { useTemplateEditorContext } from '../../../editor/TemplateEditorProvider';
+import { useParams } from 'react-router-dom';
 
 interface NodeData {
   Icon: React.FC<any>;
@@ -12,30 +12,25 @@ interface NodeData {
   tabKey: ChannelTypeEnum;
   index: number;
   testId: string;
-  onDelete: (id: string) => void;
+  onDelete: (uuid: string) => void;
   error: string;
-  setActivePage: (string) => void;
   active?: boolean;
   channelType: StepTypeEnum;
+  uuid: string;
+  name?: string;
 }
 
 export default memo(
   ({ data, selected, id, dragging }: { data: NodeData; selected: boolean; id: string; dragging: boolean }) => {
-    const { selectedNodeId } = useTemplateEditorContext();
     const { getNode, getEdges, getNodes } = useReactFlow();
     const nodes = useNodes<NodeData>();
     const thisNode = getNode(id);
     const isParent = thisNode ? getOutgoers(thisNode, getNodes(), getEdges()).length : false;
     const noChildStyle = isParent ? {} : { border: 'none', background: 'transparent' };
     const [count, setCount] = useState(0);
+    const { stepUuid = '' } = useParams<{ stepUuid: string }>();
 
     useEffect(() => {
-      if (![StepTypeEnum.EMAIL, StepTypeEnum.IN_APP].includes(data.channelType)) {
-        setCount(0);
-
-        return;
-      }
-
       const items = nodes
         .filter((node) => node.type === 'channelNode')
         .filter((node) => {
@@ -62,17 +57,19 @@ export default memo(
     return (
       <div data-test-id={`node-${data.testId}`} style={{ pointerEvents: 'none' }}>
         <WorkflowNode
-          setActivePage={data.setActivePage}
           errors={data.error}
-          onDelete={data.onDelete}
+          onDelete={() => {
+            data.onDelete(data.uuid);
+          }}
           tabKey={data.tabKey}
           channelType={data.channelType}
           Icon={data.Icon}
-          label={data.label + (count > 0 ? ` (${count})` : '')}
-          active={id === selectedNodeId}
+          label={data.name ? data.name : data.label + (count > 0 ? ` (${count})` : '')}
+          active={stepUuid === data.uuid}
           disabled={!data.active}
           id={id}
           index={data.index}
+          testId={'channel-node'}
           dragging={dragging}
         />
         <Handle type="target" id="b" position={Position.Top} />
diff --git a/apps/web/src/pages/templates/workflow/workflow/node-types/TriggerNode.tsx b/apps/web/src/pages/templates/workflow/workflow/node-types/TriggerNode.tsx
index 2d823401ee8..7d667148a17 100644
--- a/apps/web/src/pages/templates/workflow/workflow/node-types/TriggerNode.tsx
+++ b/apps/web/src/pages/templates/workflow/workflow/node-types/TriggerNode.tsx
@@ -1,19 +1,93 @@
 import { StepTypeEnum } from '@novu/shared';
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import { Handle, Position, useReactFlow } from 'react-flow-renderer';
 
 import { WorkflowNode } from './WorkflowNode';
-import { TapeGradient } from '../../../../../design-system/icons';
+import { Check, TapeGradient } from '../../../../../design-system/icons';
+import { Stack, useMantineColorScheme } from '@mantine/core';
+import { colors, Tooltip } from '../../../../../design-system';
+import { useFormContext } from 'react-hook-form';
+import { IForm } from '../../../components/formTypes';
+import { When } from '../../../../../components/utils/When';
+import { createStyles } from '@mantine/core';
+import { useDidUpdate } from '@mantine/hooks';
+
+const useStyles = createStyles(
+  (
+    theme,
+    params: {
+      animate: boolean;
+    }
+  ) => ({
+    savedIcon: {
+      position: 'absolute',
+      top: -11,
+      right: -11,
+      zIndex: 99999,
+      height: 22,
+      width: 22,
+      borderRadius: 22,
+      background: colors.success,
+      animation: `fade-in-save-icon 2s linear 0s${params.animate ? ', pulse-animation-save-icon 2s linear 2s 3' : ''}`,
+      '@keyframes fade-in-save-icon': {
+        '0%': {
+          opacity: 0,
+        },
+        '100%': {
+          opacity: 1,
+        },
+      },
+      '@keyframes pulse-animation-save-icon': {
+        '0%': {
+          boxShadow: '0 0 0 0 rgb(77, 153, 128, 0.7)',
+        },
+        '70%': {
+          boxShadow: '0 0 0 10px rgba(77, 153, 128, 0)',
+        },
+        '100%': {
+          boxShadow: '0 0 0 0 rgba(77, 153, 128, 0)',
+        },
+      },
+    },
+  })
+);
 
 export default memo(({ selected }: { selected: boolean }) => {
   const { getNodes } = useReactFlow();
-  const isParent = getNodes().length > 2;
+  const isParent = getNodes().length > 1;
   const noChildStyle = isParent ? {} : { border: 'none', background: 'transparent' };
+  const {
+    formState: { isDirty },
+  } = useFormContext<IForm>();
+  const theme = useMantineColorScheme();
+  const [shouldAnimate, setShouldAnimate] = useState(false);
+  const { classes } = useStyles({
+    animate: shouldAnimate,
+  });
+
+  useDidUpdate(() => {
+    setShouldAnimate(true);
+  }, [isDirty]);
 
   return (
-    <div data-test-id={`node-triggerSelector`} style={{ pointerEvents: 'none' }}>
+    <div data-test-id={'node-triggerSelector'} style={{ pointerEvents: 'none' }}>
+      <When truthy={!isDirty}>
+        <Tooltip label="Workflow is saved">
+          <div className={classes.savedIcon}>
+            <Stack
+              justify="center"
+              align="center"
+              sx={{
+                height: '100%',
+              }}
+            >
+              <Check color={theme.colorScheme === 'dark' ? colors.B15 : colors.white} />
+            </Stack>
+          </div>
+        </Tooltip>
+      </When>
       <WorkflowNode
-        showDots={false}
+        showDelete={false}
         Icon={TapeGradient}
         label={'Trigger'}
         active={selected}
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 ab808166f6a..a3a77b212e8 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
@@ -1,17 +1,15 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Popover as MantinePopover, ActionIcon, createStyles, MantineTheme, Menu } from '@mantine/core';
+import { Popover as MantinePopover, createStyles, UnstyledButton } from '@mantine/core';
 import styled from '@emotion/styled';
 import { useFormContext } from 'react-hook-form';
 import { ChannelTypeEnum, StepTypeEnum } from '@novu/shared';
-
 import { Text } from '../../../../../design-system/typography/text/Text';
 import { Switch } from '../../../../../design-system/switch/Switch';
 import { useStyles } from '../../../../../design-system/template-button/TemplateButton.styles';
-import { colors, shadows } from '../../../../../design-system/config';
-import { DotsHorizontal, Edit, Trash } from '../../../../../design-system/icons';
+import { colors } from '../../../../../design-system/config';
+import { Trash } from '../../../../../design-system/icons';
 import { When } from '../../../../../components/utils/When';
 import { useActiveIntegrations, useEnvController, useIntegrationLimit } from '../../../../../hooks';
-import { getChannel, NodeTypeEnum } from '../../../shared/channels';
 import { useViewport } from 'react-flow-renderer';
 import { getFormattedStepErrors } from '../../../shared/errors';
 import { Popover } from '../../../../../design-system/popover';
@@ -28,10 +26,6 @@ const CHANNEL_TYPE_TO_TEXT = {
   [ChannelTypeEnum.PUSH]: 'push',
 };
 
-const capitalize = (text: string) => {
-  return typeof text !== 'string' ? '' : text.charAt(0).toUpperCase() + text.slice(1);
-};
-
 interface ITemplateButtonProps {
   Icon: React.FC<any>;
   label: string;
@@ -45,43 +39,14 @@ interface ITemplateButtonProps {
   switchButton?: (boolean) => void;
   changeTab?: (string) => void;
   errors?: boolean | string;
-  showDots?: boolean;
+  showDelete?: boolean;
   id?: string;
   index?: number;
-  onDelete?: (id: string) => void;
+  onDelete?: () => void;
   dragging?: boolean;
-  setActivePage?: (string) => void;
   disabled?: boolean;
 }
 
-const useMenuStyles = createStyles((theme: MantineTheme) => {
-  const dark = theme.colorScheme === 'dark';
-
-  return {
-    arrow: {
-      width: '7px',
-      height: '7px',
-      backgroundColor: dark ? colors.B20 : colors.white,
-      borderColor: dark ? colors.B30 : colors.B85,
-    },
-    dropdown: {
-      minWidth: 220,
-      backgroundColor: dark ? colors.B20 : colors.white,
-      color: dark ? theme.white : colors.B40,
-      borderColor: dark ? colors.B30 : colors.B85,
-    },
-    item: {
-      borerRadius: '5px',
-      color: `${dark ? theme.white : colors.B40} !important`,
-      fontWeight: 400,
-      fontSize: '14px',
-    },
-    itemHovered: {
-      backgroundColor: dark ? colors.B30 : colors.B98,
-    },
-  };
-});
-
 const usePopoverStyles = createStyles(() => ({
   dropdown: {
     padding: '12px 15px 14px',
@@ -113,20 +78,17 @@ export function WorkflowNode({
   index,
   testId,
   errors: initialErrors = false,
-  showDots = true,
+  showDelete = true,
   id = undefined,
   onDelete = () => {},
   dragging = false,
-  setActivePage = (page: string) => {},
   disabled: initDisabled,
 }: ITemplateButtonProps) {
   const segment = useSegment();
   const { readonly: readonlyEnv } = useEnvController();
   const { integrations } = useActiveIntegrations({ refetchOnMount: false, refetchOnWindowFocus: false });
   const { cx, classes, theme } = useStyles();
-  const { classes: menuClasses } = useMenuStyles();
   const [popoverOpened, setPopoverOpened] = useState(false);
-  const [showDotMenu, setShowDotMenu] = useState(false);
   const [disabled, setDisabled] = useState(initDisabled);
   const [isIntegrationsModalVisible, setIntegrationsModalVisible] = useState(false);
   const disabledColor = disabled ? { color: theme.colorScheme === 'dark' ? colors.B40 : colors.B70 } : {};
@@ -134,8 +96,8 @@ export function WorkflowNode({
   const { classes: popoverClasses } = usePopoverStyles();
   const viewport = useViewport();
   const channelKey = tabKey ?? '';
-  const isChannel = getChannel(channelKey)?.type === NodeTypeEnum.CHANNEL;
   const { isLimitReached } = useIntegrationLimit(ChannelTypeEnum.EMAIL);
+  const [hover, setHover] = useState(false);
 
   const hasActiveIntegration = useMemo(() => {
     const isChannelStep = [StepTypeEnum.EMAIL, StepTypeEnum.PUSH, StepTypeEnum.SMS, StepTypeEnum.CHAT].includes(
@@ -175,18 +137,18 @@ export function WorkflowNode({
     return () => subscription.unsubscribe();
   }, [watch]);
 
-  useEffect(() => {
-    if (showDotMenu && (dragging || !active)) {
-      setShowDotMenu(false);
-    }
-  }, [dragging, showDotMenu, active]);
-
   return (
     <>
       <UnstyledButtonStyled
         role={'button'}
-        onMouseEnter={() => setPopoverOpened(true)}
-        onMouseLeave={() => setPopoverOpened(false)}
+        onMouseEnter={() => {
+          setPopoverOpened(true);
+          setHover(true);
+        }}
+        onMouseLeave={() => {
+          setPopoverOpened(false);
+          setHover(false);
+        }}
         data-test-id={testId}
         className={cx(classes.button, { [classes.active]: active })}
       >
@@ -204,76 +166,24 @@ export function WorkflowNode({
             {action && !readonly && (
               <Switch checked={checked} onChange={(e) => switchButton && switchButton(e.target.checked)} />
             )}
-            <When truthy={showDots && !readonlyEnv}>
-              <Menu
-                withinPortal
-                position="bottom-start"
-                shadow={theme.colorScheme === 'dark' ? shadows.dark : shadows.light}
-                classNames={menuClasses}
-                withArrow={true}
-                opened={showDotMenu}
-                onClose={() => setShowDotMenu(false)}
-                clickOutsideEvents={MENU_CLICK_OUTSIDE_EVENTS}
+            <When truthy={showDelete && !readonlyEnv && !dragging && hover}>
+              <UnstyledButton
+                onClick={(e) => {
+                  e.stopPropagation();
+                  onDelete();
+                }}
+                sx={{
+                  lineHeight: 1,
+                  zIndex: 9999,
+                }}
+                data-test-id="delete-step-action"
               >
-                <Menu.Target>
-                  <ActionIcon
-                    variant="transparent"
-                    data-test-id="step-actions-dropdown"
-                    style={{ pointerEvents: 'all' }}
-                    component="span"
-                    onClick={(e) => {
-                      e.preventDefault();
-                      setShowDotMenu(!showDotMenu);
-                    }}
-                  >
-                    <DotsHorizontal
-                      style={{
-                        color: theme.colorScheme === 'dark' ? colors.B40 : colors.B80,
-                      }}
-                    />
-                  </ActionIcon>
-                </Menu.Target>
-                <Menu.Dropdown>
-                  <When truthy={isChannel}>
-                    <Menu.Item
-                      key="edit"
-                      style={{
-                        pointerEvents: 'all',
-                      }}
-                      icon={
-                        <Edit
-                          style={{
-                            width: '20px',
-                            height: '20px',
-                          }}
-                        />
-                      }
-                      data-test-id="edit-step-action"
-                      onClick={(e) => {
-                        e.stopPropagation();
-                        setShowDotMenu(false);
-                        setActivePage(tabKey === ChannelTypeEnum.IN_APP ? tabKey : capitalize(channelKey));
-                      }}
-                    >
-                      Edit Template
-                    </Menu.Item>
-                  </When>
-                  <Menu.Item
-                    key="delete"
-                    style={{
-                      pointerEvents: 'all',
-                    }}
-                    icon={<Trash />}
-                    data-test-id="delete-step-action"
-                    onClick={() => {
-                      setShowDotMenu(false);
-                      onDelete(id || '');
-                    }}
-                  >
-                    Delete {isChannel ? 'Step' : 'Action'}
-                  </Menu.Item>
-                </Menu.Dropdown>
-              </Menu>
+                <Trash
+                  style={{
+                    background: 'transparent',
+                  }}
+                />
+              </UnstyledButton>
             </When>
           </ActionWrapper>
         </ButtonWrapper>
@@ -374,6 +284,7 @@ const ActionWrapper = styled.div`
 const LeftContainerWrapper = styled.div`
   display: flex;
   align-items: center;
+  overflow: hidden;
 `;
 
 const ButtonWrapper = styled.div`
diff --git a/apps/web/src/pages/user-preference/UserPreference.tsx b/apps/web/src/pages/user-preference/UserPreference.tsx
deleted file mode 100644
index a0f2c4eb842..00000000000
--- a/apps/web/src/pages/user-preference/UserPreference.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { Grid, useMantineColorScheme } from '@mantine/core';
-import styled from '@emotion/styled';
-
-import { colors } from '../../design-system';
-import { useTemplateEditorForm } from '../templates/components/TemplateEditorFormProvider';
-import { TemplatesSideBar } from '../templates/components/TemplatesSideBar';
-import { TemplatePreference } from '../templates/components/notification-setting-form/TemplatePreference';
-
-export function UserPreference({ activePage, setActivePage }) {
-  const { colorScheme } = useMantineColorScheme();
-  const { template, trigger } = useTemplateEditorForm();
-
-  return (
-    <div style={{ marginLeft: 12, marginRight: 12, padding: 17.5, minHeight: 500 }}>
-      <Grid grow style={{ minHeight: 500 }}>
-        <Grid.Col md={4} sm={6}>
-          <SideBarWrapper dark={colorScheme === 'dark'} style={{ paddingRight: 50 }}>
-            <TemplatesSideBar
-              activeTab={activePage}
-              changeTab={setActivePage}
-              showTriggerSection={!!template && !!trigger}
-            />
-          </SideBarWrapper>
-        </Grid.Col>
-
-        <Grid.Col md={8} sm={6} style={{ position: 'relative' }}>
-          <div style={{ paddingLeft: 23 }}>
-            <TemplatePreference />
-          </div>
-        </Grid.Col>
-      </Grid>
-    </div>
-  );
-}
-
-const SideBarWrapper = styled.div<{ dark: boolean }>`
-  border-right: 1px solid ${({ dark }) => (dark ? colors.B20 : colors.BGLight)};
-  height: 100%;
-`;
diff --git a/apps/web/src/utils/notifications.tsx b/apps/web/src/utils/notifications.tsx
index 3c71f01efe5..33881df1654 100644
--- a/apps/web/src/utils/notifications.tsx
+++ b/apps/web/src/utils/notifications.tsx
@@ -3,8 +3,9 @@ import { Check } from '../design-system/icons/general/Check';
 import { ErrorIcon } from '../design-system/icons';
 import { colors } from '../design-system';
 
-export function successMessage(message: string) {
+export function successMessage(message: string, id?: string) {
   showNotification({
+    id,
     message,
     icon: <Check />,
     styles: (theme) => ({
diff --git a/apps/webhook/.eslintrc.js b/apps/webhook/.eslintrc.js
index 52c29b96e7c..54639bcc25e 100644
--- a/apps/webhook/.eslintrc.js
+++ b/apps/webhook/.eslintrc.js
@@ -1,4 +1,10 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
   rules: {},
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
 };
diff --git a/apps/widget/cypress/e2e/shell-embed.spec.ts b/apps/widget/cypress/e2e/shell-embed.spec.ts
index f6e69b021ec..1b7fcf4f872 100644
--- a/apps/widget/cypress/e2e/shell-embed.spec.ts
+++ b/apps/widget/cypress/e2e/shell-embed.spec.ts
@@ -76,6 +76,8 @@ describe('Shell Embed - Seen Read', function () {
       token: this.session.token,
       subscriberId: this.session.subscriber.subscriberId,
       count: 5,
+      organizationId: this.session.organization._id,
+      templateId: this.session.templates[0]._id,
     });
 
     cy.get('#notification-bell').click();
diff --git a/apps/widget/package.json b/apps/widget/package.json
index 16443e1e7fa..2c887775de9 100644
--- a/apps/widget/package.json
+++ b/apps/widget/package.json
@@ -63,7 +63,7 @@
     "@novu/testing": "^0.13.0",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
-    "@types/react": "17.0.56",
+    "@types/react": "17.0.58",
     "@types/react-dom": "17.0.19",
     "@types/react-router-dom": "^5.1.7",
     "craco-antd": "^1.19.0",
@@ -71,7 +71,7 @@
     "cypress": "^12.3.0",
     "cypress-intellij-reporter": "^0.0.7",
     "cypress-network-idle": "^1.10.0",
-    "html-webpack-plugin": "5.5.0",
+    "html-webpack-plugin": "5.5.1",
     "http-server": "^0.13.0",
     "jest": "27.5.1",
     "less": "^4.1.0",
diff --git a/apps/worker/.eslintrc.js b/apps/worker/.eslintrc.js
index 13920b5d727..e18dabcd3da 100644
--- a/apps/worker/.eslintrc.js
+++ b/apps/worker/.eslintrc.js
@@ -3,4 +3,10 @@ module.exports = {
   rules: {
     'func-names': 'off',
   },
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
 };
diff --git a/apps/worker/package.json b/apps/worker/package.json
index 7804d11c71b..2fdc74691c4 100644
--- a/apps/worker/package.json
+++ b/apps/worker/package.json
@@ -61,7 +61,7 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^6.0.0",
-    "@nestjs/cli": "9.3.0",
+    "@nestjs/cli": "9.4.0",
     "@nestjs/schematics": "9.0.4",
     "@nestjs/testing": "9.3.12",
     "@types/bcrypt": "^3.0.0",
@@ -85,7 +85,7 @@
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
-      "eslint --fix"
+      "eslint"
     ]
   }
 }
diff --git a/apps/worker/src/app/workflow/usecases/send-message/send-message-push.usecase.ts b/apps/worker/src/app/workflow/usecases/send-message/send-message-push.usecase.ts
index 1e56203c785..c4d2ec0da09 100644
--- a/apps/worker/src/app/workflow/usecases/send-message/send-message-push.usecase.ts
+++ b/apps/worker/src/app/workflow/usecases/send-message/send-message-push.usecase.ts
@@ -103,33 +103,6 @@ export class SendMessagePush extends SendMessageBase {
       return;
     }
 
-    const integration = await this.getIntegration(
-      GetDecryptedIntegrationsCommand.create({
-        organizationId: command.organizationId,
-        environmentId: command.environmentId,
-        channelType: ChannelTypeEnum.PUSH,
-        findOne: true,
-        active: true,
-        userId: command.userId,
-      })
-    );
-    if (!integration) {
-      await this.createExecutionDetails.execute(
-        CreateExecutionDetailsCommand.create({
-          ...CreateExecutionDetailsCommand.getDetailsFromJob(command.job),
-          detail: DetailEnum.SUBSCRIBER_NO_ACTIVE_INTEGRATION,
-          source: ExecutionDetailsSourceEnum.INTERNAL,
-          status: ExecutionDetailsStatusEnum.FAILED,
-          isTest: false,
-          isRetry: false,
-        })
-      );
-
-      return;
-    }
-
-    const overrides = command.overrides[integration.providerId] || {};
-
     const pushChannels =
       subscriber.channels?.filter((chan) =>
         Object.values(PushProviderIdEnum).includes(chan.providerId as PushProviderIdEnum)
@@ -139,78 +112,82 @@ export class SendMessagePush extends SendMessageBase {
     delete messagePayload.attachments;
 
     if (!pushChannels.length) {
-      await this.createExecutionDetails.execute(
-        CreateExecutionDetailsCommand.create({
-          ...CreateExecutionDetailsCommand.getDetailsFromJob(command.job),
-          detail: DetailEnum.SUBSCRIBER_NO_ACTIVE_CHANNEL,
-          source: ExecutionDetailsSourceEnum.INTERNAL,
-          status: ExecutionDetailsStatusEnum.FAILED,
-          isTest: false,
-          isRetry: false,
-        })
-      );
+      await this.sendErrors(command, notification);
 
       return;
     }
 
-    if (integration) {
-      for (const channel of pushChannels) {
-        if (!channel.credentials?.deviceTokens) {
-          await this.createExecutionDetails.execute(
-            CreateExecutionDetailsCommand.create({
-              ...CreateExecutionDetailsCommand.getDetailsFromJob(command.job),
-              detail: DetailEnum.PUSH_MISSING_DEVICE_TOKENS,
-              source: ExecutionDetailsSourceEnum.INTERNAL,
-              status: ExecutionDetailsStatusEnum.FAILED,
-              isTest: false,
-              isRetry: false,
-            })
-          );
+    for (const channel of pushChannels) {
+      if (!channel.credentials?.deviceTokens) {
+        await this.createExecutionDetails.execute(
+          CreateExecutionDetailsCommand.create({
+            ...CreateExecutionDetailsCommand.getDetailsFromJob(command.job),
+            detail: DetailEnum.PUSH_MISSING_DEVICE_TOKENS,
+            source: ExecutionDetailsSourceEnum.INTERNAL,
+            status: ExecutionDetailsStatusEnum.FAILED,
+            isTest: false,
+            isRetry: false,
+          })
+        );
 
-          continue;
-        }
+        continue;
+      }
 
-        await this.sendMessage(
-          integration,
-          channel.credentials.deviceTokens,
-          title,
-          content,
-          command,
-          notification,
-          command.payload,
-          overrides,
-          channel.providerId
+      const integration = await this.getIntegration(
+        GetDecryptedIntegrationsCommand.create({
+          organizationId: command.organizationId,
+          environmentId: command.environmentId,
+          channelType: ChannelTypeEnum.PUSH,
+          providerId: channel.providerId,
+          findOne: true,
+          active: true,
+          userId: command.userId,
+        })
+      );
+
+      if (!integration) {
+        await this.createExecutionDetails.execute(
+          CreateExecutionDetailsCommand.create({
+            ...CreateExecutionDetailsCommand.getDetailsFromJob(command.job),
+            detail: DetailEnum.SUBSCRIBER_NO_ACTIVE_INTEGRATION,
+            source: ExecutionDetailsSourceEnum.INTERNAL,
+            status: ExecutionDetailsStatusEnum.FAILED,
+            isTest: false,
+            isRetry: false,
+          })
         );
-      }
 
-      return;
-    }
+        continue;
+      }
 
-    await this.sendErrors(pushChannels, command, notification, integration);
-  }
+      const overrides = command.overrides[integration.providerId] || {};
 
-  private async sendErrors(
-    pushChannels,
-    command: SendMessageCommand,
-    notification: NotificationEntity,
-    integration: IntegrationEntity
-  ) {
-    if (!pushChannels) {
-      await this.createExecutionDetails.execute(
-        CreateExecutionDetailsCommand.create({
-          ...CreateExecutionDetailsCommand.getDetailsFromJob(command.job),
-          detail: DetailEnum.SUBSCRIBER_NO_ACTIVE_CHANNEL,
-          source: ExecutionDetailsSourceEnum.INTERNAL,
-          status: ExecutionDetailsStatusEnum.FAILED,
-          isTest: false,
-          isRetry: false,
-        })
+      await this.sendMessage(
+        integration,
+        channel.credentials.deviceTokens,
+        title,
+        content,
+        command,
+        notification,
+        command.payload,
+        overrides
       );
-
-      return;
     }
   }
 
+  private async sendErrors(command: SendMessageCommand, notification: NotificationEntity) {
+    await this.createExecutionDetails.execute(
+      CreateExecutionDetailsCommand.create({
+        ...CreateExecutionDetailsCommand.getDetailsFromJob(command.job),
+        detail: DetailEnum.SUBSCRIBER_NO_ACTIVE_CHANNEL,
+        source: ExecutionDetailsSourceEnum.INTERNAL,
+        status: ExecutionDetailsStatusEnum.FAILED,
+        isTest: false,
+        isRetry: false,
+      })
+    );
+  }
+
   private async sendMessage(
     integration: IntegrationEntity,
     target: string[],
@@ -219,8 +196,7 @@ export class SendMessagePush extends SendMessageBase {
     command: SendMessageCommand,
     notification: NotificationEntity,
     payload: object,
-    overrides: object,
-    providerId: string
+    overrides: object
   ) {
     const message: MessageEntity = await this.messageRepository.create({
       _notificationId: notification._id,
@@ -236,14 +212,14 @@ export class SendMessagePush extends SendMessageBase {
       title,
       payload: payload as never,
       overrides: overrides as never,
-      providerId,
+      providerId: integration.providerId,
       _jobId: command.jobId,
     });
 
     await this.createExecutionDetails.execute(
       CreateExecutionDetailsCommand.create({
         ...CreateExecutionDetailsCommand.getDetailsFromJob(command.job),
-        detail: DetailEnum.MESSAGE_CREATED,
+        detail: `${DetailEnum.MESSAGE_CREATED}: ${integration.providerId}`,
         source: ExecutionDetailsSourceEnum.INTERNAL,
         status: ExecutionDetailsStatusEnum.PENDING,
         messageId: message._id,
@@ -272,7 +248,7 @@ export class SendMessagePush extends SendMessageBase {
         CreateExecutionDetailsCommand.create({
           ...CreateExecutionDetailsCommand.getDetailsFromJob(command.job),
           messageId: message._id,
-          detail: DetailEnum.MESSAGE_SENT,
+          detail: `${DetailEnum.MESSAGE_SENT}: ${integration.providerId}`,
           source: ExecutionDetailsSourceEnum.INTERNAL,
           status: ExecutionDetailsStatusEnum.SUCCESS,
           isTest: false,
diff --git a/apps/ws/.eslintrc.js b/apps/ws/.eslintrc.js
index 52c29b96e7c..54639bcc25e 100644
--- a/apps/ws/.eslintrc.js
+++ b/apps/ws/.eslintrc.js
@@ -1,4 +1,10 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
   rules: {},
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
 };
diff --git a/apps/ws/package.json b/apps/ws/package.json
index f58d45e8f0a..2786b084e95 100644
--- a/apps/ws/package.json
+++ b/apps/ws/package.json
@@ -43,7 +43,7 @@
     "dotenv": "^8.2.0",
     "envalid": "^7.1.0",
     "helmet": "^6.0.1",
-    "ioredis": "5.3.1",
+    "ioredis": "5.3.2",
     "jsonwebtoken": "9.0.0",
     "lodash": "^4.17.15",
     "nest-raven": "^9.1.0",
diff --git a/docker/kubernetes/kustomize/env-dev b/docker/kubernetes/kustomize/env-dev
index 7aec4f73341..bbd11ca4c6c 100644
--- a/docker/kubernetes/kustomize/env-dev
+++ b/docker/kubernetes/kustomize/env-dev
@@ -1,12 +1,14 @@
 # Secrets
 # YOU MUST CHANGE THESE BEFORE GOING INTO PRODUCTION
 JWT_SECRET=your-secret
-STORE_ENCRYPTION_KEY="ekwUKf9yLjGPLOz939Y1GM0nJckVoVyF"
+STORE_ENCRYPTION_KEY=ekwUKf9yLjGPLOz939Y1GM0nJckVoVyF
 
 ## General
 NODE_ENV=dev
 MONGO_URL=mongodb://mongodb:27017/novu-db
-REDIS_HOST=redis
+REDIS_HOST=novu-redis-dev
+REDIS_CACHE_SERVICE_HOST=novu-redis-dev
+REDIS_CACHE_SERVICE_PORT=6379
 
 # AWS
 S3_LOCAL_STACK=http://localhost:4566
@@ -34,4 +36,4 @@ GLOBAL_CONTEXT_PATH=
 WEB_CONTEXT_PATH=
 API_CONTEXT_PATH=
 WS_CONTEXT_PATH=
-WIDGET_CONTEXT_PATH=
\ No newline at end of file
+WIDGET_CONTEXT_PATH=
diff --git a/docker/kubernetes/kustomize/kustomization.yaml b/docker/kubernetes/kustomize/kustomization.yaml
index 4ac6251ae55..ebe84d62f5d 100644
--- a/docker/kubernetes/kustomize/kustomization.yaml
+++ b/docker/kubernetes/kustomize/kustomization.yaml
@@ -2,17 +2,18 @@ apiVersion: kustomize.config.k8s.io/v1beta1
 kind: Kustomization
 
 resources:
-- api-deployment.yaml
-- api-service.yaml
-- embed-deployment.yaml
-- embed-service.yaml
-- redis-deployment.yaml
-- web-deployment.yaml
-- web-service.yaml
-- widget-deployment.yaml
-- widget-service.yaml
-- ws-deployment.yaml
-- ws-service.yaml
+  - api-deployment.yaml
+  - api-service.yaml
+  - embed-deployment.yaml
+  - embed-service.yaml
+  - redis-deployment.yaml
+  - redis-service.yaml
+  - web-deployment.yaml
+  - web-service.yaml
+  - widget-deployment.yaml
+  - widget-service.yaml
+  - ws-deployment.yaml
+  - ws-service.yaml
 
 # namespace
 # Adds namespace to all resources.
@@ -26,6 +27,6 @@ commonLabels:
   owner: novu
 
 configMapGenerator:
-- envs:
-  - env-dev
-  name: novu-env
+  - envs:
+      - env-dev
+    name: novu-env
diff --git a/docker/kubernetes/kustomize/redis-service.yaml b/docker/kubernetes/kustomize/redis-service.yaml
new file mode 100644
index 00000000000..b854cfe934c
--- /dev/null
+++ b/docker/kubernetes/kustomize/redis-service.yaml
@@ -0,0 +1,16 @@
+apiVersion: v1
+kind: Service
+metadata:
+  annotations:
+    kompose.cmd: kompose convert
+    kompose.version: 1.26.1 (HEAD)
+  labels:
+    app.novu.co/name: redis
+  name: redis
+spec:
+  ports:
+    - name: '6379'
+      port: 6379
+      targetPort: 6379
+  selector:
+    app.novu.co/name: redis
diff --git a/docker/kubernetes/kustomize/worker-deployment.yaml b/docker/kubernetes/kustomize/worker-deployment.yaml
new file mode 100644
index 00000000000..51504625e14
--- /dev/null
+++ b/docker/kubernetes/kustomize/worker-deployment.yaml
@@ -0,0 +1,30 @@
+apiVersion: apps/v1
+kind: Deployment
+metadata:
+  annotations:
+    kompose.cmd: kompose convert
+    kompose.version: 1.26.1 (HEAD)
+  labels:
+    app.novu.co/name: worker
+  name: worker
+spec:
+  replicas: 1
+  selector:
+    matchLabels:
+      app.novu.co/name: worker
+  template:
+    metadata:
+      annotations:
+        kompose.cmd: kompose convert
+        kompose.version: 1.26.1 (HEAD)
+      labels:
+        app.novu.co/name: worker
+    spec:
+      containers:
+        - envFrom:
+            - configMapRef:
+                name: novu-env
+          image: ghcr.io/novuhq/novu/worker:0.13.0
+          name: worker
+          ports:
+            - containerPort: 3004
diff --git a/docker/kubernetes/kustomize/worker-service.yaml b/docker/kubernetes/kustomize/worker-service.yaml
new file mode 100644
index 00000000000..311abddd906
--- /dev/null
+++ b/docker/kubernetes/kustomize/worker-service.yaml
@@ -0,0 +1,16 @@
+apiVersion: v1
+kind: Service
+metadata:
+  annotations:
+    kompose.cmd: kompose convert
+    kompose.version: 1.26.1 (HEAD)
+  labels:
+    app.novu.co/name: worker
+  name: worker
+spec:
+  ports:
+    - name: '3004'
+      port: 3004
+      targetPort: 3004
+  selector:
+    app.novu.co/name: worker
diff --git a/docker/local/deployment/docker-compose.yml b/docker/local/deployment/docker-compose.yml
index c078715b44b..473d892a069 100644
--- a/docker/local/deployment/docker-compose.yml
+++ b/docker/local/deployment/docker-compose.yml
@@ -46,8 +46,32 @@ services:
       SENTRY_DSN: ${SENTRY_DSN}
       NEW_RELIC_APP_NAME: ${NEW_RELIC_APP_NAME}
       NEW_RELIC_LICENSE_KEY: ${NEW_RELIC_LICENSE_KEY}
+      API_CONTEXT_PATH: ${API_CONTEXT_PATH}
     ports:
       - '3000:3000'
+  worker:
+    image: 'ghcr.io/novuhq/novu/worker:0.13.0'
+    depends_on:
+      - mongodb
+      - redis
+    container_name: worker
+    environment:
+      NODE_ENV: ${NODE_ENV}
+      MONGO_URL: ${MONGO_URL}
+      REDIS_HOST: ${REDIS_HOST}
+      REDIS_PORT: ${REDIS_PORT}
+      REDIS_DB_INDEX: 2
+      REDIS_CACHE_SERVICE_HOST: ${REDIS_CACHE_SERVICE_HOST}
+      REDIS_CACHE_SERVICE_PORT: ${REDIS_CACHE_SERVICE_PORT}
+      S3_LOCAL_STACK: ${S3_LOCAL_STACK}
+      S3_BUCKET_NAME: ${S3_BUCKET_NAME}
+      S3_REGION: ${S3_REGION}
+      AWS_ACCESS_KEY_ID: ${AWS_ACCESS_KEY_ID}
+      AWS_SECRET_ACCESS_KEY: ${AWS_SECRET_ACCESS_KEY}
+      STORE_ENCRYPTION_KEY: ${STORE_ENCRYPTION_KEY}
+      SENTRY_DSN: ${SENTRY_DSN}
+      NEW_RELIC_APP_NAME: ${NEW_RELIC_APP_NAME}
+      NEW_RELIC_LICENSE_KEY: ${NEW_RELIC_LICENSE_KEY}
   ws:
     image: 'ghcr.io/novuhq/novu/ws:0.13.0'
     depends_on:
@@ -61,12 +85,14 @@ services:
       REDIS_HOST: ${REDIS_HOST}
       REDIS_PORT: ${REDIS_PORT}
       JWT_SECRET: ${JWT_SECRET}
+      WS_CONTEXT_PATH: ${WS_CONTEXT_PATH}
     ports:
       - '3002:3002'
   web:
     image: 'ghcr.io/novuhq/novu/web:0.13.0'
     depends_on:
       - api
+      - worker
     container_name: web
     environment:
       REACT_APP_API_URL: ${API_ROOT_URL}
@@ -80,12 +106,14 @@ services:
     image: 'ghcr.io/novuhq/novu/widget:0.13.0'
     depends_on:
       - api
+      - worker
       - web
     container_name: widget
     environment:
       REACT_APP_API_URL: ${API_ROOT_URL}
       REACT_APP_WS_URL: ${REACT_APP_WS_URL}
       REACT_APP_ENVIRONMENT: ${NODE_ENV}
+      WIDGET_CONTEXT_PATH: ${WIDGET_CONTEXT_PATH}
     ports:
       - 4500:4500
   embed:
diff --git a/docker/local/development/docker-compose.development.yml b/docker/local/development/docker-compose.development.yml
index 400ccb2a9c5..702ff044cf2 100644
--- a/docker/local/development/docker-compose.development.yml
+++ b/docker/local/development/docker-compose.development.yml
@@ -4,6 +4,10 @@ services:
     build:
       dockerfile: "./apps/api/Dockerfile"
       context: "../../.."
+  worker:
+    build:
+      dockerfile: "./apps/worker/Dockerfile"
+      context: "../../.."
   web:
     build:
       dockerfile: "./apps/web/Dockerfile"
diff --git a/docs/docs/channels/email/infobip.md b/docs/docs/channels/email/infobip.md
new file mode 100644
index 00000000000..66c09bf730c
--- /dev/null
+++ b/docs/docs/channels/email/infobip.md
@@ -0,0 +1,31 @@
+---
+sidebar_position: 13
+---
+
+# Infobip
+
+You can use the [Infobip](https://www.infobip.com/developers/) provider to send transactional emails to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+## Getting Started
+
+To use the Infobip provider in the email channel, you will need to create a Infobip account and add your API key and Base URL to the Infobip integration on the Novu platform.
+
+## Generate API Key
+
+To generate a new API key in Infobip, you can follow these steps:
+
+- [Sign up](https://www.infobip.com/signup) or [Log in](https://portal.infobip.com/login/) to your Infobip account.
+- Navigate to the [Settings](https://portal.infobip.com/settings/accounts/api-keys) of your account and look for the API Keys section at the top of the settings page.
+
+## Create a Infobip integration with Novu
+
+- Visit the [Integrations](https://web.novu.co/integrations) page on Novu.
+- Locate **Infobip** and click on the **Connect** button.
+- Enter your Infobip API Key.
+- Enter your Base URL.
+  - To see your base URL, log in to the account. Once logged in, on all pages you should see your base URL in this format: `xxxxx.api.infobip.com`.
+- Fill the `From email address` field using the authenticated email from the previous step.
+- Fill the `Sender name`.
+- Click on the `Disabled` button and mark as `Active`.
+- Click on the **Connect** button.
+- You should now be able to send notifications using Infobip in Novu.
diff --git a/docs/docs/channels/email/mailgun.md b/docs/docs/channels/email/mailgun.md
index 066f7efab68..ea21d3e2bcc 100644
--- a/docs/docs/channels/email/mailgun.md
+++ b/docs/docs/channels/email/mailgun.md
@@ -35,7 +35,7 @@ Mailgun recommends that you add a subdomain as a domain name. To do so:
   - For domains created in the EU region, the base URL is: `https://api.eu.mailgun.net/`
   - Otherwise, leave the base URL blank.
 - Fill the `Username`.
-- Fill the `Domain name` registered on Mailgun .
+- Fill the `Domain name` registered on Mailgun.
 - Fill the `From email address` field using the authenticated email from the previous step.
 - Fill the `Sender name`.
 - Click on the `Disabled` button and mark as `Active`.
diff --git a/docs/docs/channels/email/mandrill.md b/docs/docs/channels/email/mandrill.md
new file mode 100644
index 00000000000..ff43b4ad565
--- /dev/null
+++ b/docs/docs/channels/email/mandrill.md
@@ -0,0 +1,38 @@
+---
+sidebar_position: 11
+---
+
+# Mandrill
+
+You can use the [Mandrill by Mailchimp](https://mandrillapp.com/) provider to send transactional emails to your customers using the Novu Platform with a single API.
+
+## Getting Started
+
+To use the Mandrill provider, you will need to create a Mandrill account and add your API key to the Mandrill integration on the Novu platform.
+
+## Generate API Key
+
+To generate a new API key in Mandrill, you can follow these steps:
+
+- [Sign up](https://login.mailchimp.com/signup/) or [Log in](https://login.mailchimp.com/) to your Mandrill account.
+- Navigate to the [Settings](https://mandrillapp.com/settings) of your account and look for the API Keys section at the bottom of the settings page.
+- Click on the **+ Add API Key** button to create an API key. Copy the generated key immediately and store it in a secure location. You won’t be able to see or copy the key once you finish generating it.
+
+# Add a sending domain
+
+To get started, you’ll need to add the domain that you want to send messages from.
+
+- Navigate to [Settings page](https://mandrillapp.com/settings/sending-domains) and choose Domains
+- Type a new domain in the domain input and click Add
+- Follow the instructions to [verify ownership](https://mailchimp.com/developer/transactional/docs/authentication-delivery/#authentication) of your sending domain and [update your DNS records](https://mailchimp.com/developer/transactional/docs/authentication-delivery/#configure-your-dns).
+
+## Create the Mandrill integration with Novu
+
+- Visit the [Integrations](https://web.novu.co/integrations) page on Novu.
+- Locate Mandrill and click on the **Connect** button.
+- Enter your Mandrill API key.
+- Fill the `From email address` field using the authenticated email from the previous step.
+- Fill the `Sender name`.
+- Click on the `Disabled` button and mark as `Active`.
+- Click on the **Connect** button.
+- You should now be able to send notifications using Mandrill in Novu.
diff --git a/docs/docs/channels/email/netcore.md b/docs/docs/channels/email/netcore.md
new file mode 100644
index 00000000000..3dc9c3eca0a
--- /dev/null
+++ b/docs/docs/channels/email/netcore.md
@@ -0,0 +1,36 @@
+---
+sidebar_position: 12
+---
+
+# Netcore
+
+You can use the [Netcore](https://netcorecloud.com/) provider to send transactional emails to your customers using the Novu Platform with a single API to create multi-channel experiences.
+
+## Getting Started
+
+To use the Netcore channel, you will need to create a Netcore account and add your API key to the Netcore integration on the Novu platform.
+
+## Generate API Key
+
+To generate a new API key in Netcore, you can follow these steps:
+
+- [Log in](https://email.netcorecloud.com/) to your Netcore account.
+- Go to the **Integration** page under **Settings** menu and click on the **API** tab.
+- The API Key is hidden for security purpose. Click Show. System will prompt you to enter your account password. Once you enter the password, the API key will be accessible.
+
+## Set up sending domains
+
+To start sending emails, you need to add and verify your sending domains. You can either use your top-level domain (e.g. my-company.com) or a sub-domain like email.my-company.com. The verification is done to ensure your sending domain’s security.
+
+Follow the instructions on this [page](https://emaildocs.netcorecloud.com/docs/what-is-a-sending-domain-how-to-set-up-sending-domains) to get started
+
+## Create a Netcore integration with Novu
+
+- Visit the [Integrations](https://web.novu.co/integrations) page on Novu.
+- Locate Netcore and click on the **Connect** button.
+- Enter your Netcore API Key.
+- Fill the `From email address` field using the authenticated email from the previous step.
+- Fill the `Sender name`.
+- Click on the `Disabled` button and mark as `Active`.
+- Click on the **Connect** button.
+- You should now be able to send notifications using Netcore in Novu.
diff --git a/docs/docs/community/faq.md b/docs/docs/community/faq.md
index ec89ae7a8f0..01ec5cc3ac2 100644
--- a/docs/docs/community/faq.md
+++ b/docs/docs/community/faq.md
@@ -55,3 +55,21 @@ No, switching organization will only switch organization in UI, from API side al
 Multiple active providers are only supported in [push](../channels/push) and [chat](../channels/chat) channels.
 
 </details>
+<details>
+<summary>Does Novu have expiration dates for records? (TTL)</summary>
+
+For Novu cloud users - notifications and activity feed data will be saved for 1 month.
+In-app messages will be saved for 6 months.
+After that time - the records will be archived.
+
+For self-hosted - the same time frame applies before records will be deleted. A TTL expiration date will be set for them.  
+Self-hosted users can disable ttl setting by adding environment variable `DISABLE_TTL=true`.
+
+Affected schemes:
+
+- Notification (1 month)
+- Job (1 month)
+- Message (in app - 6 months, all others - 1 month)
+- ExecutionDetails (1 month)
+
+</details>
diff --git a/docs/package.json b/docs/package.json
index 5bd7aaee404..158df39f426 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -46,7 +46,7 @@
   },
   "devDependencies": {
     "@docusaurus/module-type-aliases": "2.3.1",
-    "@tsconfig/docusaurus": "1.0.6",
+    "@tsconfig/docusaurus": "1.0.7",
     "@types/react": "^17.0.14",
     "@types/react-helmet": "6.1.6",
     "@types/react-router-dom": "5.3.3",
diff --git a/docs/src/theme/DocPage/Layout/Main/index.js b/docs/src/theme/DocPage/Layout/Main/index.js
index fabf23701db..5d94869502b 100644
--- a/docs/src/theme/DocPage/Layout/Main/index.js
+++ b/docs/src/theme/DocPage/Layout/Main/index.js
@@ -1,4 +1,3 @@
-/* eslint-disable @cspell/spellchecker */
 import React from 'react';
 import clsx from 'clsx';
 import { useDocsSidebar } from '@docusaurus/theme-common/internal';
diff --git a/examples/angular-notification-center-example/.editorconfig b/examples/angular-notification-center-example/.editorconfig
deleted file mode 100644
index 59d9a3a3e73..00000000000
--- a/examples/angular-notification-center-example/.editorconfig
+++ /dev/null
@@ -1,16 +0,0 @@
-# Editor configuration, see https://editorconfig.org
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-insert_final_newline = true
-trim_trailing_whitespace = true
-
-[*.ts]
-quote_type = single
-
-[*.md]
-max_line_length = off
-trim_trailing_whitespace = false
diff --git a/examples/angular-notification-center-example/.gitignore b/examples/angular-notification-center-example/.gitignore
deleted file mode 100644
index 0711527ef9d..00000000000
--- a/examples/angular-notification-center-example/.gitignore
+++ /dev/null
@@ -1,42 +0,0 @@
-# See http://help.github.com/ignore-files/ for more about ignoring files.
-
-# Compiled output
-/dist
-/tmp
-/out-tsc
-/bazel-out
-
-# Node
-/node_modules
-npm-debug.log
-yarn-error.log
-
-# IDEs and editors
-.idea/
-.project
-.classpath
-.c9/
-*.launch
-.settings/
-*.sublime-workspace
-
-# Visual Studio Code
-.vscode/*
-!.vscode/settings.json
-!.vscode/tasks.json
-!.vscode/launch.json
-!.vscode/extensions.json
-.history/*
-
-# Miscellaneous
-/.angular/cache
-.sass-cache/
-/connect.lock
-/coverage
-/libpeerconnection.log
-testem.log
-/typings
-
-# System files
-.DS_Store
-Thumbs.db
diff --git a/examples/angular-notification-center-example/.vscode/extensions.json b/examples/angular-notification-center-example/.vscode/extensions.json
deleted file mode 100644
index 77b374577de..00000000000
--- a/examples/angular-notification-center-example/.vscode/extensions.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
-  "recommendations": ["angular.ng-template"]
-}
diff --git a/examples/angular-notification-center-example/.vscode/launch.json b/examples/angular-notification-center-example/.vscode/launch.json
deleted file mode 100644
index 740e35a0c04..00000000000
--- a/examples/angular-notification-center-example/.vscode/launch.json
+++ /dev/null
@@ -1,20 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "name": "ng serve",
-      "type": "pwa-chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: start",
-      "url": "http://localhost:4200/"
-    },
-    {
-      "name": "ng test",
-      "type": "chrome",
-      "request": "launch",
-      "preLaunchTask": "npm: test",
-      "url": "http://localhost:9876/debug.html"
-    }
-  ]
-}
diff --git a/examples/angular-notification-center-example/.vscode/tasks.json b/examples/angular-notification-center-example/.vscode/tasks.json
deleted file mode 100644
index a298b5bd879..00000000000
--- a/examples/angular-notification-center-example/.vscode/tasks.json
+++ /dev/null
@@ -1,42 +0,0 @@
-{
-  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
-  "version": "2.0.0",
-  "tasks": [
-    {
-      "type": "npm",
-      "script": "start",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    },
-    {
-      "type": "npm",
-      "script": "test",
-      "isBackground": true,
-      "problemMatcher": {
-        "owner": "typescript",
-        "pattern": "$tsc",
-        "background": {
-          "activeOnStart": true,
-          "beginsPattern": {
-            "regexp": "(.*?)"
-          },
-          "endsPattern": {
-            "regexp": "bundle generation complete"
-          }
-        }
-      }
-    }
-  ]
-}
diff --git a/examples/angular-notification-center-example/README.md b/examples/angular-notification-center-example/README.md
deleted file mode 100644
index 940593d2949..00000000000
--- a/examples/angular-notification-center-example/README.md
+++ /dev/null
@@ -1,27 +0,0 @@
-# AngularNotificationCenterExample
-
-This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.0.0.
-
-## Development server
-
-Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
-
-## Code scaffolding
-
-Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
-
-## Build
-
-Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
-
-## Running unit tests
-
-Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
-
-## Running end-to-end tests
-
-Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
-
-## Further help
-
-To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
diff --git a/examples/angular-notification-center-example/angular.json b/examples/angular-notification-center-example/angular.json
deleted file mode 100644
index a6b6993b2d3..00000000000
--- a/examples/angular-notification-center-example/angular.json
+++ /dev/null
@@ -1,104 +0,0 @@
-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "version": 1,
-  "newProjectRoot": "projects",
-  "projects": {
-    "angular-notification-center-example": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "sass"
-        }
-      },
-      "root": "",
-      "sourceRoot": "src",
-      "prefix": "app",
-      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
-          "options": {
-            "outputPath": "dist/angular-notification-center-example",
-            "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": [
-              "zone.js"
-            ],
-            "tsConfig": "tsconfig.app.json",
-            "inlineStyleLanguage": "sass",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.sass"
-            ],
-            "scripts": []
-          },
-          "configurations": {
-            "production": {
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "500kb",
-                  "maximumError": "1mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "2kb",
-                  "maximumError": "4kb"
-                }
-              ],
-              "outputHashing": "all"
-            },
-            "development": {
-              "buildOptimizer": false,
-              "optimization": false,
-              "vendorChunk": true,
-              "extractLicenses": false,
-              "sourceMap": true,
-              "namedChunks": true
-            }
-          },
-          "defaultConfiguration": "production"
-        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
-          "configurations": {
-            "production": {
-              "browserTarget": "angular-notification-center-example:build:production"
-            },
-            "development": {
-              "browserTarget": "angular-notification-center-example:build:development"
-            }
-          },
-          "defaultConfiguration": "development"
-        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
-          "options": {
-            "browserTarget": "angular-notification-center-example:build"
-          }
-        },
-        "test": {
-          "builder": "@angular-devkit/build-angular:karma",
-          "options": {
-            "polyfills": [
-              "zone.js",
-              "zone.js/testing"
-            ],
-            "tsConfig": "tsconfig.spec.json",
-            "inlineStyleLanguage": "sass",
-            "assets": [
-              "src/favicon.ico",
-              "src/assets"
-            ],
-            "styles": [
-              "src/styles.sass"
-            ],
-            "scripts": []
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/examples/angular-notification-center-example/package.json b/examples/angular-notification-center-example/package.json
deleted file mode 100644
index b82c4309150..00000000000
--- a/examples/angular-notification-center-example/package.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "name": "angular-notification-center-example",
-  "version": "0.13.0",
-  "scripts": {
-    "ng": "ng",
-    "start": "ng serve",
-    "build": "ng build",
-    "watch": "ng build --watch --configuration development",
-    "test": "ng test"
-  },
-  "private": true,
-  "dependencies": {
-    "@angular/animations": "^15.0.0",
-    "@angular/common": "^15.0.0",
-    "@angular/compiler": "^15.0.0",
-    "@angular/core": "^15.0.0",
-    "@angular/elements": "^15.0.0",
-    "@angular/forms": "^15.0.0",
-    "@angular/platform-browser": "^15.0.0",
-    "@angular/platform-browser-dynamic": "^15.0.0",
-    "@angular/router": "^15.0.0",
-    "@novu/notification-center-angular": "^0.13.0",
-    "tslib": "^2.3.0",
-    "zone.js": "~0.12.0"
-  },
-  "devDependencies": {
-    "@angular-devkit/build-angular": "^15.0.0",
-    "@angular/cli": "~15.0.0",
-    "@angular/compiler-cli": "^15.0.0",
-    "@types/jasmine": "~4.3.0",
-    "jasmine-core": "~4.5.0",
-    "karma": "~6.4.0",
-    "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage": "~2.2.0",
-    "karma-jasmine": "~5.1.0",
-    "karma-jasmine-html-reporter": "~2.0.0",
-    "typescript": "4.9.5"
-  }
-}
diff --git a/examples/angular-notification-center-example/src/app/app.component.html b/examples/angular-notification-center-example/src/app/app.component.html
deleted file mode 100644
index 47c2f081770..00000000000
--- a/examples/angular-notification-center-example/src/app/app.component.html
+++ /dev/null
@@ -1,358 +0,0 @@
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
-<!-- * * * * * * * to get started with your project! * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-
-<style>
-  :host {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
-      'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    font-size: 14px;
-    color: #333;
-    box-sizing: border-box;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin: 8px 0;
-  }
-
-  p {
-    margin: 0;
-  }
-
-  .spacer {
-    flex: 1;
-  }
-
-  .toolbar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 60px;
-    display: flex;
-    align-items: center;
-    background-color: #1976d2;
-    color: white;
-    font-weight: 600;
-  }
-
-  .toolbar img {
-    margin: 0 16px;
-  }
-
-  .toolbar #twitter-logo {
-    height: 40px;
-    margin: 0 8px;
-  }
-
-  .toolbar #youtube-logo {
-    height: 40px;
-    margin: 0 16px;
-  }
-
-  .toolbar #twitter-logo:hover,
-  .toolbar #youtube-logo:hover {
-    opacity: 0.8;
-  }
-
-  svg.material-icons {
-    height: 24px;
-    width: auto;
-  }
-
-  svg.material-icons:not(:last-child) {
-    margin-right: 8px;
-  }
-
-  .card svg.material-icons path {
-    fill: #888;
-  }
-
-  .card-container {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin-top: 16px;
-  }
-
-  .card {
-    all: unset;
-    border-radius: 4px;
-    border: 1px solid #eee;
-    background-color: #fafafa;
-    height: 40px;
-    width: 200px;
-    margin: 0 8px 16px;
-    padding: 16px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    transition: all 0.2s ease-in-out;
-    line-height: 24px;
-  }
-
-  .card-container .card:not(:last-child) {
-    margin-right: 0;
-  }
-
-  .card.card-small {
-    height: 16px;
-    width: 168px;
-  }
-
-  .card-container .card:not(.highlight-card) {
-    cursor: pointer;
-  }
-
-  .card-container .card:not(.highlight-card):hover {
-    transform: translateY(-3px);
-    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
-  }
-
-  .card-container .card:not(.highlight-card):hover .material-icons path {
-    fill: rgb(105, 103, 103);
-  }
-
-  .card.highlight-card {
-    background-color: #1976d2;
-    color: white;
-    font-weight: 600;
-    border: none;
-    width: auto;
-    min-width: 30%;
-    position: relative;
-  }
-
-  .card.card.highlight-card span {
-    margin-left: 60px;
-  }
-
-  svg#rocket {
-    width: 80px;
-    position: absolute;
-    left: -10px;
-    top: -24px;
-  }
-
-  svg#rocket-smoke {
-    height: calc(100vh - 95px);
-    position: absolute;
-    top: 10px;
-    right: 180px;
-    z-index: -10;
-  }
-
-  a,
-  a:visited,
-  a:hover {
-    color: #1976d2;
-    text-decoration: none;
-  }
-
-  a:hover {
-    color: #125699;
-  }
-
-  .terminal {
-    position: relative;
-    width: 80%;
-    max-width: 600px;
-    border-radius: 6px;
-    padding-top: 45px;
-    margin-top: 8px;
-    overflow: hidden;
-    background-color: rgb(15, 15, 16);
-  }
-
-  .terminal::before {
-    content: '\2022 \2022 \2022';
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 4px;
-    background: rgb(58, 58, 58);
-    color: #c2c3c4;
-    width: 100%;
-    font-size: 2rem;
-    line-height: 0;
-    padding: 14px 0;
-    text-indent: 4px;
-  }
-
-  .terminal pre {
-    font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
-    color: white;
-    padding: 0 1rem 1rem;
-    margin: 0;
-  }
-
-  .circle-link {
-    height: 40px;
-    width: 40px;
-    border-radius: 40px;
-    margin: 8px;
-    background-color: white;
-    border: 1px solid #eeeeee;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
-    transition: 1s ease-out;
-  }
-
-  .circle-link:hover {
-    transform: translateY(-0.25rem);
-    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-  }
-
-  footer {
-    margin-top: 8px;
-    display: flex;
-    align-items: center;
-    line-height: 20px;
-  }
-
-  footer a {
-    display: flex;
-    align-items: center;
-  }
-
-  .github-star-badge {
-    color: #24292e;
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    padding: 3px 10px;
-    border: 1px solid rgba(27, 31, 35, 0.2);
-    border-radius: 3px;
-    background-image: linear-gradient(-180deg, #fafbfc, #eff3f6 90%);
-    margin-left: 4px;
-    font-weight: 600;
-  }
-
-  .github-star-badge:hover {
-    background-image: linear-gradient(-180deg, #f0f3f6, #e6ebf1 90%);
-    border-color: rgba(27, 31, 35, 0.35);
-    background-position: -0.5em;
-  }
-
-  .github-star-badge .material-icons {
-    height: 16px;
-    width: 16px;
-    margin-right: 4px;
-  }
-
-  svg#clouds {
-    position: fixed;
-    bottom: -160px;
-    left: -230px;
-    z-index: -10;
-    width: 1920px;
-  }
-
-  main {
-    display: flex;
-    margin: 82px auto 32px;
-    padding: 0 16px;
-    max-width: 960px;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  /* Responsive Styles */
-  @media screen and (max-width: 767px) {
-    .card-container > *:not(.circle-link),
-    .terminal {
-      width: 100%;
-    }
-
-    .card:not(.highlight-card) {
-      height: 16px;
-      margin: 8px 0;
-    }
-
-    .card.highlight-card span {
-      margin-left: 72px;
-    }
-
-    svg#rocket-smoke {
-      right: 120px;
-      transform: rotate(-5deg);
-    }
-  }
-
-  @media screen and (max-width: 575px) {
-    svg#rocket-smoke {
-      display: none;
-      visibility: hidden;
-    }
-  }
-</style>
-
-<!-- Toolbar -->
-<div class="toolbar" role="banner">
-  <img
-    width="40"
-    alt="Angular Logo"
-    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
-  />
-  <span>Welcome</span>
-  <div class="spacer"></div>
-  <a aria-label="Angular on twitter" target="_blank" rel="noopener" href="https://twitter.com/angular" title="Twitter">
-    <svg id="twitter-logo" height="24" data-name="Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
-      <rect width="400" height="400" fill="none" />
-      <path
-        d="M153.62,301.59c94.34,0,145.94-78.16,145.94-145.94,0-2.22,0-4.43-.15-6.63A104.36,104.36,0,0,0,325,122.47a102.38,102.38,0,0,1-29.46,8.07,51.47,51.47,0,0,0,22.55-28.37,102.79,102.79,0,0,1-32.57,12.45,51.34,51.34,0,0,0-87.41,46.78A145.62,145.62,0,0,1,92.4,107.81a51.33,51.33,0,0,0,15.88,68.47A50.91,50.91,0,0,1,85,169.86c0,.21,0,.43,0,.65a51.31,51.31,0,0,0,41.15,50.28,51.21,51.21,0,0,1-23.16.88,51.35,51.35,0,0,0,47.92,35.62,102.92,102.92,0,0,1-63.7,22A104.41,104.41,0,0,1,75,278.55a145.21,145.21,0,0,0,78.62,23"
-        fill="#fff"
-      />
-    </svg>
-  </a>
-  <a aria-label="Angular on YouTube" target="_blank" rel="noopener" href="https://youtube.com/angular" title="YouTube">
-    <svg
-      id="youtube-logo"
-      height="24"
-      width="24"
-      data-name="Logo"
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 24 24"
-      fill="#fff"
-    >
-      <path d="M0 0h24v24H0V0z" fill="none" />
-      <path
-        d="M21.58 7.19c-.23-.86-.91-1.54-1.77-1.77C18.25 5 12 5 12 5s-6.25 0-7.81.42c-.86.23-1.54.91-1.77 1.77C2 8.75 2 12 2 12s0 3.25.42 4.81c.23.86.91 1.54 1.77 1.77C5.75 19 12 19 12 19s6.25 0 7.81-.42c.86-.23 1.54-.91 1.77-1.77C22 15.25 22 12 22 12s0-3.25-.42-4.81zM10 15V9l5.2 3-5.2 3z"
-      />
-    </svg>
-  </a>
-</div>
-
-<main>
-  <div class="content"><h2>Angular Notification Center Web Component Demo</h2></div>
-  <notification-center-component
-    [subscriberId]="subscriberId"
-    [applicationIdentifier]="applicationIdentifier"
-    [sessionLoaded]="sessionLoaded"
-  ></notification-center-component>
-</main>
-
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * The content above * * * * * * * * * * * -->
-<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
-<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
-<!-- * * * * * * * * * * End of Placeholder * * * * * * * * * * * -->
-<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
diff --git a/examples/angular-notification-center-example/src/app/app.component.sass b/examples/angular-notification-center-example/src/app/app.component.sass
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/examples/angular-notification-center-example/src/app/app.component.ts b/examples/angular-notification-center-example/src/app/app.component.ts
deleted file mode 100644
index a9be2751b6f..00000000000
--- a/examples/angular-notification-center-example/src/app/app.component.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Component } from '@angular/core';
-import { environment } from '../environments/environment';
-
-@Component({
-  selector: 'app-root',
-  templateUrl: './app.component.html',
-  styleUrls: ['./app.component.sass'],
-})
-export class AppComponent {
-  subscriberId = environment.subscriberId;
-  applicationIdentifier = environment.applicationIdentifier;
-
-  sessionLoaded = (data: unknown) => {
-    console.log('loaded', { data });
-  };
-}
diff --git a/examples/angular-notification-center-example/src/app/app.module.ts b/examples/angular-notification-center-example/src/app/app.module.ts
deleted file mode 100644
index b1f4794fba9..00000000000
--- a/examples/angular-notification-center-example/src/app/app.module.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-
-import { NotificationCenterModule } from '@novu/notification-center-angular';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule, NotificationCenterModule],
-  providers: [],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-export class AppModule {}
diff --git a/examples/angular-notification-center-example/src/assets/.gitkeep b/examples/angular-notification-center-example/src/assets/.gitkeep
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/examples/angular-notification-center-example/src/environments/environment.ts b/examples/angular-notification-center-example/src/environments/environment.ts
deleted file mode 100644
index 868a1e72741..00000000000
--- a/examples/angular-notification-center-example/src/environments/environment.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export const environment = {
-  production: false,
-  applicationIdentifier: '',
-  subscriberId: '',
-};
diff --git a/examples/angular-notification-center-example/src/favicon.ico b/examples/angular-notification-center-example/src/favicon.ico
deleted file mode 100644
index 997406ad22c..00000000000
Binary files a/examples/angular-notification-center-example/src/favicon.ico and /dev/null differ
diff --git a/examples/angular-notification-center-example/src/index.html b/examples/angular-notification-center-example/src/index.html
deleted file mode 100644
index ef4baa15373..00000000000
--- a/examples/angular-notification-center-example/src/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>AngularNotificationCenterExample</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-</head>
-<body>
-  <app-root></app-root>
-</body>
-</html>
diff --git a/examples/angular-notification-center-example/src/main.ts b/examples/angular-notification-center-example/src/main.ts
deleted file mode 100644
index c58dc05cbc6..00000000000
--- a/examples/angular-notification-center-example/src/main.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-
-import { AppModule } from './app/app.module';
-
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.error(err));
diff --git a/examples/angular-notification-center-example/src/styles.sass b/examples/angular-notification-center-example/src/styles.sass
deleted file mode 100644
index 90d4ee0072c..00000000000
--- a/examples/angular-notification-center-example/src/styles.sass
+++ /dev/null
@@ -1 +0,0 @@
-/* You can add global styles to this file, and also import other style files */
diff --git a/examples/angular-notification-center-example/tsconfig.app.json b/examples/angular-notification-center-example/tsconfig.app.json
deleted file mode 100644
index b4d0b12c6a0..00000000000
--- a/examples/angular-notification-center-example/tsconfig.app.json
+++ /dev/null
@@ -1,11 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/app",
-    "types": []
-  },
-  "files": ["src/main.ts"],
-  "include": ["src/**/*.d.ts"],
-  "exclude": ["node_modules", "../../node_modules"]
-}
diff --git a/examples/angular-notification-center-example/tsconfig.json b/examples/angular-notification-center-example/tsconfig.json
deleted file mode 100644
index 2e50afd9099..00000000000
--- a/examples/angular-notification-center-example/tsconfig.json
+++ /dev/null
@@ -1,32 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "baseUrl": "./",
-    "outDir": "./dist/out-tsc",
-    "forceConsistentCasingInFileNames": true,
-    "strict": true,
-    "noImplicitOverride": true,
-    "noPropertyAccessFromIndexSignature": true,
-    "noImplicitReturns": true,
-    "noFallthroughCasesInSwitch": true,
-    "sourceMap": true,
-    "declaration": false,
-    "downlevelIteration": true,
-    "experimentalDecorators": true,
-    "moduleResolution": "node",
-    "importHelpers": true,
-    "target": "esnext",
-    "module": "esnext",
-    "useDefineForClassFields": false,
-    "skipLibCheck": true,
-    "lib": ["esnext", "dom"]
-  },
-  "angularCompilerOptions": {
-    "enableI18nLegacyMessageIdFormat": false,
-    "strictInjectionParameters": true,
-    "strictInputAccessModifiers": true,
-    "strictTemplates": true
-  },
-  "exclude": ["node_modules", "../../node_modules"]
-}
diff --git a/examples/angular-notification-center-example/tsconfig.spec.json b/examples/angular-notification-center-example/tsconfig.spec.json
deleted file mode 100644
index be7e9da76f7..00000000000
--- a/examples/angular-notification-center-example/tsconfig.spec.json
+++ /dev/null
@@ -1,14 +0,0 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
-{
-  "extends": "./tsconfig.json",
-  "compilerOptions": {
-    "outDir": "./out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
-  },
-  "include": [
-    "src/**/*.spec.ts",
-    "src/**/*.d.ts"
-  ]
-}
diff --git a/examples/vue-notification-center-example/.example.env b/examples/vue-notification-center-example/.example.env
deleted file mode 100644
index 9081504bc7d..00000000000
--- a/examples/vue-notification-center-example/.example.env
+++ /dev/null
@@ -1,2 +0,0 @@
-VITE_NOVU_APP_IDENTIFIER=YOUR_APP_IDENTIFIER
-VITE_NOVU_SUBSCRIBER_ID=YOUR_SUBSCRIBER_ID
diff --git a/examples/vue-notification-center-example/.gitignore b/examples/vue-notification-center-example/.gitignore
deleted file mode 100644
index 38adffa64e8..00000000000
--- a/examples/vue-notification-center-example/.gitignore
+++ /dev/null
@@ -1,28 +0,0 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
-
-node_modules
-.DS_Store
-dist
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
-.idea
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
diff --git a/examples/vue-notification-center-example/.vscode/extensions.json b/examples/vue-notification-center-example/.vscode/extensions.json
deleted file mode 100644
index c0a6e5a4811..00000000000
--- a/examples/vue-notification-center-example/.vscode/extensions.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}
diff --git a/examples/vue-notification-center-example/README.md b/examples/vue-notification-center-example/README.md
deleted file mode 100644
index 2df698b1e3a..00000000000
--- a/examples/vue-notification-center-example/README.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# vue-project
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
-
-## Type Support for `.vue` Imports in TS
-
-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-    1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-    2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
diff --git a/examples/vue-notification-center-example/env.d.ts b/examples/vue-notification-center-example/env.d.ts
deleted file mode 100644
index 11f02fe2a00..00000000000
--- a/examples/vue-notification-center-example/env.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-/// <reference types="vite/client" />
diff --git a/examples/vue-notification-center-example/index.html b/examples/vue-notification-center-example/index.html
deleted file mode 100644
index a888544898a..00000000000
--- a/examples/vue-notification-center-example/index.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8">
-    <link rel="icon" href="/favicon.ico">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>
diff --git a/examples/vue-notification-center-example/package.json b/examples/vue-notification-center-example/package.json
deleted file mode 100644
index 4fe801969a9..00000000000
--- a/examples/vue-notification-center-example/package.json
+++ /dev/null
@@ -1,27 +0,0 @@
-{
-  "name": "vue-notification-center-example",
-  "private": true,
-  "version": "0.13.0",
-  "scripts": {
-    "dev": "vite",
-    "build": "run-p type-check build-only",
-    "preview": "vite preview",
-    "build-only": "vite build",
-    "type-check": "vue-tsc --noEmit"
-  },
-  "dependencies": {
-    "@novu/notification-center-vue": "^0.13.0",
-    "vue": "^3.2.41"
-  },
-  "devDependencies": {
-    "@types/node": "^16.18.3",
-    "@vitejs/plugin-vue": "^3.1.2",
-    "@vitejs/plugin-vue-jsx": "^2.0.1",
-    "@vue/tsconfig": "^0.1.3",
-    "npm-run-all": "^4.1.5",
-    "typescript": "4.9.5",
-    "vite": "^3.1.8",
-    "vue-tsc": "^1.0.8"
-  },
-  "gitHead": "e1055f2fd2f0ec9a85d64b271c7d5824bdb381d0"
-}
diff --git a/examples/vue-notification-center-example/public/favicon.ico b/examples/vue-notification-center-example/public/favicon.ico
deleted file mode 100644
index df36fcfb725..00000000000
Binary files a/examples/vue-notification-center-example/public/favicon.ico and /dev/null differ
diff --git a/examples/vue-notification-center-example/src/App.vue b/examples/vue-notification-center-example/src/App.vue
deleted file mode 100644
index 043c247c241..00000000000
--- a/examples/vue-notification-center-example/src/App.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue';
-import TheWelcome from './components/TheWelcome.vue';
-import NotificationCenterWrapper from './components/NotificationCenterWrapper.vue';
-</script>
-
-<template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <div class="notification-center-wrapper">
-    <NotificationCenterWrapper />
-  </div>
-
-  <main>
-    <TheWelcome />
-  </main>
-</template>
-
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-.notification-center-wrapper {
-  display: inline-flex;
-  height: min-content;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
-
-  .logo {
-    margin: 0 2rem 0 0;
-  }
-
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
-}
-</style>
diff --git a/examples/vue-notification-center-example/src/assets/base.css b/examples/vue-notification-center-example/src/assets/base.css
deleted file mode 100644
index 71dc55a3cb5..00000000000
--- a/examples/vue-notification-center-example/src/assets/base.css
+++ /dev/null
@@ -1,74 +0,0 @@
-/* color palette from <https://github.com/vuejs/theme> */
-:root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
-}
-
-/* semantic color variables for this project */
-:root {
-  --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  font-weight: normal;
-}
-
-body {
-  min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
diff --git a/examples/vue-notification-center-example/src/assets/logo.svg b/examples/vue-notification-center-example/src/assets/logo.svg
deleted file mode 100644
index bc826fed80a..00000000000
--- a/examples/vue-notification-center-example/src/assets/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 261.76 226.69"  xmlns:v="https://vecta.io/nano"><path d="M161.096.001l-30.225 52.351L100.647.001H-.005l130.877 226.688L261.749.001z" fill="#41b883"/><path d="M161.096.001l-30.225 52.351L100.647.001H52.346l78.526 136.01L209.398.001z" fill="#34495e"/></svg>
\ No newline at end of file
diff --git a/examples/vue-notification-center-example/src/assets/main.css b/examples/vue-notification-center-example/src/assets/main.css
deleted file mode 100644
index e8667cd4508..00000000000
--- a/examples/vue-notification-center-example/src/assets/main.css
+++ /dev/null
@@ -1,35 +0,0 @@
-@import './base.css';
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
-}
diff --git a/examples/vue-notification-center-example/src/components/HelloWorld.vue b/examples/vue-notification-center-example/src/components/HelloWorld.vue
deleted file mode 100644
index 8901544c3d4..00000000000
--- a/examples/vue-notification-center-example/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,40 +0,0 @@
-<script setup lang="ts">
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-    <h3>
-      You’ve successfully created a project with
-      <a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
-      <a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
-    </h3>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  top: -10px;
-}
-
-h3 {
-  font-size: 1.2rem;
-}
-
-.greetings h1,
-.greetings h3 {
-  text-align: center;
-}
-
-@media (min-width: 1024px) {
-  .greetings h1,
-  .greetings h3 {
-    text-align: left;
-  }
-}
-</style>
diff --git a/examples/vue-notification-center-example/src/components/NotificationCenterWrapper.vue b/examples/vue-notification-center-example/src/components/NotificationCenterWrapper.vue
deleted file mode 100644
index 7941ae98ff8..00000000000
--- a/examples/vue-notification-center-example/src/components/NotificationCenterWrapper.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-<script lang="ts">
-export default {
-  data() {
-    return {
-      applicationIdentifier: import.meta.env.VITE_NOVU_APP_IDENTIFIER,
-      subscriberId: import.meta.env.VITE_NOVU_SUBSCRIBER_ID,
-    };
-  },
-  methods: {
-    sessionLoaded() {
-      console.log('Vue app loaded!');
-    },
-  },
-};
-</script>
-
-<template>
-  <NotificationCenterComponent
-    :subscriberId="subscriberId"
-    :applicationIdentifier="applicationIdentifier"
-    :sessionLoaded="sessionLoaded"
-    v-slot="slot"
-  >
-    <button>Notifications: {{ slot.unseenCount }}</button>
-  </NotificationCenterComponent>
-</template>
-
-<style scoped></style>
diff --git a/examples/vue-notification-center-example/src/components/TheWelcome.vue b/examples/vue-notification-center-example/src/components/TheWelcome.vue
deleted file mode 100644
index a70765c231f..00000000000
--- a/examples/vue-notification-center-example/src/components/TheWelcome.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<script setup lang="ts">
-import WelcomeItem from './WelcomeItem.vue'
-import DocumentationIcon from './icons/IconDocumentation.vue'
-import ToolingIcon from './icons/IconTooling.vue'
-import EcosystemIcon from './icons/IconEcosystem.vue'
-import CommunityIcon from './icons/IconCommunity.vue'
-import SupportIcon from './icons/IconSupport.vue'
-</script>
-
-<template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
-
-    Vue’s
-    <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
-
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
-    recommended IDE setup is
-    <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
-    you need to test your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank">Cypress Component Testing</a>.
-
-    <br />
-
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
-
-    Get official tools and libraries for your project:
-    <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
-    <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
-    <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
-    <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
-    you need more resources, we suggest paying
-    <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
-
-    Got stuck? Ask your question on
-    <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
-    Discord server, or
-    <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
-      >StackOverflow</a
-    >. You should also subscribe to
-    <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
-    the official
-    <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
-
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
-
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
-  </WelcomeItem>
-</template>
diff --git a/examples/vue-notification-center-example/src/components/WelcomeItem.vue b/examples/vue-notification-center-example/src/components/WelcomeItem.vue
deleted file mode 100644
index ba0def33c0e..00000000000
--- a/examples/vue-notification-center-example/src/components/WelcomeItem.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-<template>
-  <div class="item">
-    <i>
-      <slot name="icon"></slot>
-    </i>
-    <div class="details">
-      <h3>
-        <slot name="heading"></slot>
-      </h3>
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.item {
-  margin-top: 2rem;
-  display: flex;
-}
-
-.details {
-  flex: 1;
-  margin-left: 1rem;
-}
-
-i {
-  display: flex;
-  place-items: center;
-  place-content: center;
-  width: 32px;
-  height: 32px;
-
-  color: var(--color-text);
-}
-
-h3 {
-  font-size: 1.2rem;
-  font-weight: 500;
-  margin-bottom: 0.4rem;
-  color: var(--color-heading);
-}
-
-@media (min-width: 1024px) {
-  .item {
-    margin-top: 0;
-    padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
-  }
-
-  i {
-    top: calc(50% - 25px);
-    left: -26px;
-    position: absolute;
-    border: 1px solid var(--color-border);
-    background: var(--color-background);
-    border-radius: 8px;
-    width: 50px;
-    height: 50px;
-  }
-
-  .item:before {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    bottom: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:after {
-    content: ' ';
-    border-left: 1px solid var(--color-border);
-    position: absolute;
-    left: 0;
-    top: calc(50% + 25px);
-    height: calc(50% - 25px);
-  }
-
-  .item:first-of-type:before {
-    display: none;
-  }
-
-  .item:last-of-type:after {
-    display: none;
-  }
-}
-</style>
diff --git a/examples/vue-notification-center-example/src/components/icons/IconCommunity.vue b/examples/vue-notification-center-example/src/components/icons/IconCommunity.vue
deleted file mode 100644
index 2dc8b055253..00000000000
--- a/examples/vue-notification-center-example/src/components/icons/IconCommunity.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
-    />
-  </svg>
-</template>
diff --git a/examples/vue-notification-center-example/src/components/icons/IconDocumentation.vue b/examples/vue-notification-center-example/src/components/icons/IconDocumentation.vue
deleted file mode 100644
index 6d4791cfbcf..00000000000
--- a/examples/vue-notification-center-example/src/components/icons/IconDocumentation.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
-    <path
-      d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
-    />
-  </svg>
-</template>
diff --git a/examples/vue-notification-center-example/src/components/icons/IconEcosystem.vue b/examples/vue-notification-center-example/src/components/icons/IconEcosystem.vue
deleted file mode 100644
index c3a4f078c0b..00000000000
--- a/examples/vue-notification-center-example/src/components/icons/IconEcosystem.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
-    <path
-      d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
-    />
-  </svg>
-</template>
diff --git a/examples/vue-notification-center-example/src/components/icons/IconSupport.vue b/examples/vue-notification-center-example/src/components/icons/IconSupport.vue
deleted file mode 100644
index 7452834d3ef..00000000000
--- a/examples/vue-notification-center-example/src/components/icons/IconSupport.vue
+++ /dev/null
@@ -1,7 +0,0 @@
-<template>
-  <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
-    <path
-      d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
-    />
-  </svg>
-</template>
diff --git a/examples/vue-notification-center-example/src/components/icons/IconTooling.vue b/examples/vue-notification-center-example/src/components/icons/IconTooling.vue
deleted file mode 100644
index 660598d7c76..00000000000
--- a/examples/vue-notification-center-example/src/components/icons/IconTooling.vue
+++ /dev/null
@@ -1,19 +0,0 @@
-<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
-<template>
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink"
-    aria-hidden="true"
-    role="img"
-    class="iconify iconify--mdi"
-    width="24"
-    height="24"
-    preserveAspectRatio="xMidYMid meet"
-    viewBox="0 0 24 24"
-  >
-    <path
-      d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
-      fill="currentColor"
-    ></path>
-  </svg>
-</template>
diff --git a/examples/vue-notification-center-example/src/main.ts b/examples/vue-notification-center-example/src/main.ts
deleted file mode 100644
index 5296acaecc8..00000000000
--- a/examples/vue-notification-center-example/src/main.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { createApp } from 'vue';
-import NotificationCenterPlugin from '@novu/notification-center-vue';
-import '@novu/notification-center-vue/dist/style.css';
-
-import App from './App.vue';
-
-import './assets/main.css';
-
-createApp(App).use(NotificationCenterPlugin).mount('#app');
diff --git a/examples/vue-notification-center-example/tsconfig.config.json b/examples/vue-notification-center-example/tsconfig.config.json
deleted file mode 100644
index 424084aa55c..00000000000
--- a/examples/vue-notification-center-example/tsconfig.config.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.node.json",
-  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
-  "compilerOptions": {
-    "composite": true,
-    "types": ["node"]
-  }
-}
diff --git a/examples/vue-notification-center-example/tsconfig.json b/examples/vue-notification-center-example/tsconfig.json
deleted file mode 100644
index 0dd62569f32..00000000000
--- a/examples/vue-notification-center-example/tsconfig.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "extends": "@vue/tsconfig/tsconfig.web.json",
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
-  "compilerOptions": {
-    "baseUrl": ".",
-    "types": ["node"],
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "references": [
-    {
-      "path": "./tsconfig.config.json"
-    }
-  ]
-}
diff --git a/examples/vue-notification-center-example/vite.config.ts b/examples/vue-notification-center-example/vite.config.ts
deleted file mode 100644
index cbd515366a8..00000000000
--- a/examples/vue-notification-center-example/vite.config.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { fileURLToPath, URL } from 'node:url';
-
-import { defineConfig, searchForWorkspaceRoot } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import vueJsx from '@vitejs/plugin-vue-jsx';
-
-// https://vitejs.dev/config/
-export default defineConfig({
-  plugins: [
-    vue({
-      template: {
-        compilerOptions: {
-          // treat all tags with a dash as custom elements
-          isCustomElement: (tag) => tag.includes('-'),
-        },
-      },
-    }),
-    vueJsx(),
-  ],
-  resolve: {
-    alias: {
-      '@': fileURLToPath(new URL('./src', import.meta.url)),
-    },
-  },
-  server: {
-    fs: {
-      allow: [
-        // search up for workspace root
-        searchForWorkspaceRoot(process.cwd()),
-      ],
-    },
-  },
-});
diff --git a/lerna.json b/lerna.json
index d91eecd24c6..1bdce55f7eb 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,7 +2,7 @@
   "npmClient": "pnpm",
   "useNx": true,
   "useWorkspaces": true,
-  "packages": ["apps/*", "examples/*", "libs/*", "packages/*", "providers/*"],
+  "packages": ["apps/*", "libs/*", "packages/*", "providers/*"],
   "command": {
     "publish": {
       "message": "chore(release): publish - ci skip"
diff --git a/libs/dal/.eslintrc.js b/libs/dal/.eslintrc.js
index 5a2cc7f1ec0..a9b83317c5f 100644
--- a/libs/dal/.eslintrc.js
+++ b/libs/dal/.eslintrc.js
@@ -1,3 +1,9 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
 };
diff --git a/libs/dal/src/repositories/notification-template/notification-template.entity.ts b/libs/dal/src/repositories/notification-template/notification-template.entity.ts
index 51911e0da57..396db8d14d1 100644
--- a/libs/dal/src/repositories/notification-template/notification-template.entity.ts
+++ b/libs/dal/src/repositories/notification-template/notification-template.entity.ts
@@ -91,6 +91,8 @@ export class NotificationStepEntity {
 
   uuid?: string;
 
+  name?: string;
+
   _templateId: string;
 
   active?: boolean;
diff --git a/libs/dal/src/repositories/notification-template/notification-template.schema.ts b/libs/dal/src/repositories/notification-template/notification-template.schema.ts
index 6a3da27f901..f504435f195 100644
--- a/libs/dal/src/repositories/notification-template/notification-template.schema.ts
+++ b/libs/dal/src/repositories/notification-template/notification-template.schema.ts
@@ -69,6 +69,7 @@ const notificationTemplateSchema = new Schema<NotificationTemplateDBModel>(
           default: false,
         },
         uuid: Schema.Types.String,
+        name: Schema.Types.String,
         filters: [
           {
             isNegated: Schema.Types.Boolean,
diff --git a/libs/dal/src/repositories/notification/notification.repository.ts b/libs/dal/src/repositories/notification/notification.repository.ts
index b5712d7ac9e..e20610e3135 100644
--- a/libs/dal/src/repositories/notification/notification.repository.ts
+++ b/libs/dal/src/repositories/notification/notification.repository.ts
@@ -1,6 +1,6 @@
 import { FilterQuery, QueryWithHelpers, Types } from 'mongoose';
 import { ChannelTypeEnum, StepTypeEnum } from '@novu/shared';
-import { subYears, subMonths, subWeeks } from 'date-fns';
+import { subMonths, subWeeks } from 'date-fns';
 
 import { BaseRepository } from '../base-repository';
 import { NotificationEntity, NotificationDBModel } from './notification.entity';
@@ -91,7 +91,7 @@ export class NotificationRepository extends BaseRepository<
           readPreference: 'secondaryPreferred',
         },
         path: 'subscriber',
-        select: 'firstName _id lastName email phone',
+        select: 'firstName _id lastName email phone subscriberId',
       })
       .populate({
         options: {
@@ -147,7 +147,7 @@ export class NotificationRepository extends BaseRepository<
             channels: { $addToSet: '$channels' },
           },
         },
-        { $sort: { _id: -1 } },
+        { $sort: { createdAt: -1 } },
       ],
       {
         readPreference: 'secondaryPreferred',
diff --git a/libs/dal/src/repositories/notification/notification.schema.ts b/libs/dal/src/repositories/notification/notification.schema.ts
index 8b0c923913d..a9c50e2c4d9 100644
--- a/libs/dal/src/repositories/notification/notification.schema.ts
+++ b/libs/dal/src/repositories/notification/notification.schema.ts
@@ -86,6 +86,66 @@ notificationSchema.virtual('jobs', {
   foreignField: '_notificationId',
 });
 
+/*
+ *
+ * Path: libs/dal/src/repositories/notification/notification.repository.ts
+ *    Context: findBySubscriberId()
+ *        Query: find({_environmentId: environmentId,
+ *                    _subscriberId: subscriberId,});
+ *
+ */
+notificationSchema.index({
+  _subscriberId: 1,
+  _environmentId: 1,
+});
+
+/*
+ * Path: libs/dal/src/repositories/notification/notification.repository.ts
+ *    Context: getFeed()
+ *        Query: find({
+ *               transactionId: subscriberId,
+ *               _environmentId: environmentId,
+ *               _templateId = {$in: query.templates};
+ *               _subscriberId = {$in: query._subscriberIds};
+ *               channels = {$in: query.channels};
+ *              .sort('-createdAt')});
+ *
+ * Path: libs/dal/src/repositories/notification/notification.repository.ts
+ *     Context: getFeed()
+ *         Query: MongooseModel.countDocuments({
+ *                 transactionId: subscriberId,
+ *                 _environmentId: environmentId,
+ *                 _templateId = {$in: query.templates};
+ *                 _subscriberId = {$in: query._subscriberIds};
+ *                 channels = {$in: query.channels}});
+ *
+ */
+notificationSchema.index({
+  transactionId: 1,
+  _environmentId: 1,
+  createdAt: -1,
+});
+
+/*
+ *
+ * Path: libs/dal/src/repositories/notification/notification.repository.ts
+ *    Context: getActivityGraphStats()
+ *        Query: aggregate(
+ *                {createdAt: { $gte: date }_environmentId: new Types.ObjectId(environmentId),
+ *                { $sort: { createdAt: -1 } }})
+ *
+ * Path: libs/dal/src/repositories/notification/notification.repository.ts
+ *    Context: getStats()
+ *        Query: aggregate({
+ *           _environmentId: this.convertStringToObjectId(environmentId),
+ *           createdAt: {$gte: monthBefore}
+ *           weekly: { $sum: { $cond: [{ $gte: ['$createdAt', weekBefore] }, 1, 0] } },
+ */
+notificationSchema.index({
+  _environmentId: 1,
+  createdAt: -1,
+});
+
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export const Notification =
   (mongoose.models.Notification as mongoose.Model<NotificationDBModel>) ||
diff --git a/libs/dal/src/repositories/subscriber/subscriber.schema.ts b/libs/dal/src/repositories/subscriber/subscriber.schema.ts
index 81a07a04c1a..66954618d5b 100644
--- a/libs/dal/src/repositories/subscriber/subscriber.schema.ts
+++ b/libs/dal/src/repositories/subscriber/subscriber.schema.ts
@@ -35,7 +35,141 @@ const subscriberSchema = new Schema<SubscriberDBModel>(
   schemaOptions
 );
 
-subscriberSchema.index({ _environmentId: 1, subscriberId: 1 });
+/*
+ * This index was initially created to optimize:
+ *
+ * Path: apps/api/src/app/events/usecases/trigger-event-to-all/trigger-event-to-all.usecase.ts
+ * Context: execute()
+ * Query: findBatch({
+ *       _environmentId: command.environmentId,
+ *       _organizationId: command.organizationId,
+ *     }
+ *
+ * Path: apps/api/src/app/subscribers/usecases/get-subscribers/get-subscriber.usecase.ts
+ * Context: execute()
+ * Query: count({
+ *    _environmentId: command.environmentId,
+ *    _organizationId: command.organizationId,
+ *  });
+ *
+ * Path: apps/api/src/app/subscribers/usecases/get-subscribers/get-subscriber.usecase.ts
+ * Context: execute()
+ * Query: find({
+ *     _environmentId: command.environmentId,
+ *     _organizationId: command.organizationId,
+ *   });
+ *
+ * Path: libs/dal/src/repositories/subscriber/subscriber.repository.ts
+ * Context: searchSubscribers()
+ * Query: find({
+ *    _environmentId: environmentId,
+ *      {email: {$in: emails,}
+ */
+subscriberSchema.index({
+  _environmentId: 1,
+  email: 1,
+});
+
+/*
+ * This index was initially created to optimize:
+ *
+ * Path: libs/dal/src/repositories/subscriber/subscriber.repository.ts
+ * Context: searchSubscribers()
+ * Query: find({
+ *    _environmentId: environmentId,
+ *    $or: {
+ *      {email: {$in: emails,}
+ *      {email: {
+ *          $regex: regExpEscape(search),
+ *          $options: 'i',},}
+ *        },
+ *      {subscriberId: search,}
+ *  });
+ * Path: libs/dal/src/repositories/subscriber/subscriber.repository.ts
+ * Context: findBySubscriberId()
+ * Query: findOne(
+ *     {
+ *       _environmentId: environmentId,
+ *       subscriberId,
+ *     }
+ *
+ * Path: libs/dal/src/repositories/subscriber/subscriber.repository.ts
+ * Context: searchByExternalSubscriberIds()
+ * Query: find({
+ *     _environmentId,
+ *     _organizationId,
+ *     subscriberId: {
+ *       $in: externalSubscriberIds,
+ *     },
+ *   });
+ *
+ * Path: libs/dal/src/repositories/subscriber/subscriber.repository.ts
+ * Context: delete()
+ * Query: findOne({
+ *    _environmentId: query._environmentId,
+ *    subscriberId: query.subscriberId,
+ *  });
+ *
+ *
+ * Path: libs/dal/src/repositories/subscriber/subscriber.repository.ts
+ * Context: delete()
+ * Query: delete({
+ *     _environmentId: query._environmentId,
+ *     subscriberId: query.subscriberId,
+ *   });
+ *
+ *
+ * Path: libs/dal/src/repositories/subscriber/subscriber.repository.ts
+ * Context: findDeleted()
+ * Query: findDeleted({
+ *    _environmentId: query._environmentId,
+ *    subscriberId: query.subscriberId,
+ *  });
+ *
+ * Path: apps/api/src/app/subscribers/usecases/remove-subscriber/remove-subscriber.usecase.ts
+ * Context: execute()
+ * Query: delete({
+ *      _environmentId: subscriber._environmentId,
+ *      _organizationId: subscriber._organizationId,
+ *      subscriberId: subscriber.subscriberId,
+ *    });
+ *
+ * Path: apps/api/src/app/subscribers/usecases/remove-subscriber/remove-subscriber.usecase.ts
+ * Context: execute()
+ * Query: delete({
+ *      _environmentId: subscriber._environmentId,
+ *      _organizationId: subscriber._organizationId,
+ *      subscriberId: subscriber.subscriberId,
+ *    });
+ *
+ * Path: apps/api/src/app/events/usecases/send-message/send-message.base.ts
+ * Context: getSubscriberBySubscriberId()
+ * Query: findOne({
+ *    subscriberId,
+ *    _environmentId,
+ *  });
+ *
+ * Path: apps/api/src/app/events/usecases/send-message/send-message.usecase.ts
+ * Context: getSubscriberBySubscriberId()
+ * Query: findOne({
+ *     subscriberId,
+ *     _environmentId,
+ *   });
+ *
+ * Path: apps/api/src/app/integrations/usecases/get-In-app-activated/get-In-app-activated.usecase.ts
+ * Context: execute()
+ * Query: count({
+ *    _organizationId: command.organizationId,
+ *    _environmentId: command.environmentId,
+ *    isOnline: { $exists: true },
+ *    subscriberId: /on-boarding-subscriber/i,
+ *  });
+ */
+subscriberSchema.index({
+  subscriberId: 1,
+  _environmentId: 1,
+  _id: 1,
+});
 
 subscriberSchema.plugin(mongooseDelete, { deletedAt: true, deletedBy: true, overrideMethods: 'all' });
 
diff --git a/libs/embed/.eslintrc.js b/libs/embed/.eslintrc.js
new file mode 100644
index 00000000000..a9b83317c5f
--- /dev/null
+++ b/libs/embed/.eslintrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/libs/shared/.eslintrc.js b/libs/shared/.eslintrc.js
index 5a2cc7f1ec0..a9b83317c5f 100644
--- a/libs/shared/.eslintrc.js
+++ b/libs/shared/.eslintrc.js
@@ -1,3 +1,9 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
 };
diff --git a/libs/shared/src/entities/notification-template/notification-template.interface.ts b/libs/shared/src/entities/notification-template/notification-template.interface.ts
index 08fbb8965e4..8b34f94abef 100644
--- a/libs/shared/src/entities/notification-template/notification-template.interface.ts
+++ b/libs/shared/src/entities/notification-template/notification-template.interface.ts
@@ -41,6 +41,7 @@ export interface INotificationTriggerVariable {
 export interface INotificationTemplateStep {
   _id?: string;
   uuid?: string;
+  name?: string;
   filters?: IMessageFilter[];
   _templateId?: string;
   _parentId?: string | null;
diff --git a/libs/testing/.eslintrc.js b/libs/testing/.eslintrc.js
index 5a2cc7f1ec0..a9b83317c5f 100644
--- a/libs/testing/.eslintrc.js
+++ b/libs/testing/.eslintrc.js
@@ -1,3 +1,9 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
 };
diff --git a/package.json b/package.json
index 075a30a9b57..2cf7ca30d9a 100644
--- a/package.json
+++ b/package.json
@@ -69,9 +69,9 @@
   "devDependencies": {
     "@auto-it/npm": "^10.36.5",
     "@auto-it/released": "^10.36.5",
-    "@commitlint/cli": "17.5.1",
+    "@commitlint/cli": "17.6.1",
     "@commitlint/config-angular": "^17.0.0",
-    "@commitlint/config-conventional": "17.4.4",
+    "@commitlint/config-conventional": "17.6.1",
     "@cspell/eslint-plugin": "^6.14.3",
     "@nrwl/cli": "13.10.6",
     "@nrwl/eslint-plugin-nx": "13.10.6",
@@ -90,6 +90,7 @@
     "@typescript-eslint/parser": "^5.50.0",
     "auto": "^10.36.5",
     "chalk": "4.1.2",
+    "cross-spawn": "^7.0.3",
     "chalk-animation": "^1.6.0",
     "commitizen": "^4.2.4",
     "cpx": "^1.5.0",
@@ -143,8 +144,7 @@
       "apps/*",
       "libs/*",
       "packages/*",
-      "providers/*",
-      "examples/*"
+      "providers/*"
     ]
   },
   "husky": {
@@ -155,17 +155,17 @@
   "lint-staged": {
     "apps/**/*.{ts,tsx,json}": [
       "prettier --ignore-path ./.prettierignore --write",
-      "eslint --fix",
+      "eslint",
       "stop-only --file"
     ],
     "packages/**/*.{ts,tsx,json}": [
       "prettier --ignore-path ./.prettierignore --write",
-      "eslint --fix",
+      "eslint",
       "stop-only --file"
     ],
     "providers/**/*.{ts,json}": [
       "prettier --ignore-path ./.prettierignore --write",
-      "eslint --fix",
+      "eslint",
       "stop-only --file"
     ],
     "docs/**/*.{md,mdx}": [
@@ -174,7 +174,7 @@
     ],
     "libs/**/*.{ts,js,json}": [
       "prettier --ignore-path ./.prettierignore --write",
-      "eslint --fix",
+      "eslint",
       "stop-only --file"
     ]
   },
diff --git a/packages/application-generic/.eslintrc.js b/packages/application-generic/.eslintrc.js
new file mode 100644
index 00000000000..a9b83317c5f
--- /dev/null
+++ b/packages/application-generic/.eslintrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/packages/application-generic/.eslintrc.json b/packages/application-generic/.eslintrc.json
deleted file mode 100644
index ec40100be69..00000000000
--- a/packages/application-generic/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../.eslintrc.js"
-}
diff --git a/packages/application-generic/jest.config.js b/packages/application-generic/jest.config.js
index 61faa20934a..138be3f37e8 100644
--- a/packages/application-generic/jest.config.js
+++ b/packages/application-generic/jest.config.js
@@ -5,4 +5,5 @@ module.exports = {
   moduleNameMapper: {
     axios: 'axios/dist/node/axios.cjs',
   },
+  setupFiles: ['./jest.setup.js'],
 };
diff --git a/packages/application-generic/jest.setup.js b/packages/application-generic/jest.setup.js
new file mode 100644
index 00000000000..b324ea59fc4
--- /dev/null
+++ b/packages/application-generic/jest.setup.js
@@ -0,0 +1 @@
+require('dotenv').config({ path: './src/.env.test' });
diff --git a/packages/application-generic/package.json b/packages/application-generic/package.json
index a25ab80f8f4..59337e912b8 100644
--- a/packages/application-generic/package.json
+++ b/packages/application-generic/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@novu/application-generic",
   "version": "0.13.0",
-  "description": "Generic backend code used inside of Novus different services",
+  "description": "Generic backend code used inside of Novu's different services",
   "main": "build/main/index.js",
   "typings": "build/main/index.d.ts",
   "module": "build/module/index.js",
@@ -39,7 +39,6 @@
     "@nestjs/swagger": ">=6.3.x",
     "@nestjs/testing": ">=9.3.x",
     "reflect-metadata": "^0.1.13",
-    "rxjs": ">=7.x",
     "newrelic": ">=9"
   },
   "dependencies": {
@@ -94,11 +93,9 @@
     "class-transformer": "^0.5.1",
     "class-validator": "^0.14.0",
     "date-fns": "^2.29.2",
-    "decorate-all": "^1.2.1",
     "handlebars": "^4.7.7",
     "ioredis": "^5.2.4",
     "lodash": "^4.17.15",
-    "maskdata": "^1.2.0",
     "nestjs-pino": "^3.1.2",
     "node-fetch": "^3.2.10",
     "pino-http": "^8.3.3",
@@ -117,19 +114,16 @@
     "@types/sinon": "^9.0.0",
     "codecov": "^3.5.0",
     "cpx": "^1.5.0",
-    "cspell": "^4.1.0",
     "cz-conventional-changelog": "^3.3.0",
-    "gh-pages": "^3.1.0",
+    "dotenv": "^8.2.0",
     "jest": "^27.1.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
-    "open-cli": "^6.0.1",
     "prettier": "~2.8.0",
     "rimraf": "^3.0.2",
     "sinon": "^9.2.4",
     "ts-jest": "^27.0.5",
     "ts-node": "~10.9.1",
-    "typedoc": "^0.23.0",
     "typescript": "4.9.5"
   },
   "files": [
diff --git a/packages/application-generic/src/.env.test b/packages/application-generic/src/.env.test
new file mode 100644
index 00000000000..a0b79853ca4
--- /dev/null
+++ b/packages/application-generic/src/.env.test
@@ -0,0 +1,84 @@
+GOOGLE_OAUTH_CLIENT_ID=11
+GOOGLE_OAUTH_CLIENT_SECRET=11
+GOOGLE_OAUTH_REDIRECT=http://localhost:3000/v1/auth/google/callback
+STORE_ENCRYPTION_KEY="<ENCRYPTION_KEY_MUST_BE_32_LONG>"
+BLUEPRINT_CREATOR="<BLUEPRINT_CREATOR>"
+
+CLIENT_SUCCESS_AUTH_REDIRECT=http://localhost:4200/auth/login
+
+MONGO_URL=mongodb://localhost:27017/novu-test
+REDIS_PORT=6379
+REDIS_HOST=localhost
+REDIS_PREFIX=
+REDIS_DB_INDEX=1
+
+REDIS_CACHE_SERVICE_HOST=localhost
+REDIS_CACHE_SERVICE_PORT=6379
+REDIS_CACHE_DB_INDEX=
+REDIS_CACHE_TTL=
+REDIS_CACHE_PASSWORD=
+REDIS_CACHE_CONNECTION_TIMEOUT=
+REDIS_CACHE_KEEP_ALIVE=
+REDIS_CACHE_FAMILY=
+REDIS_CACHE_KEY_PREFIX=
+REDIS_CACHE_ENABLE_AUTOPIPELINING=
+
+IN_MEMORY_CLUSTER_MODE_ENABLED=false
+ELASTICACHE_CLUSTER_SERVICE_HOST=
+ELASTICACHE_CLUSTER_SERVICE_PORT=
+REDIS_CLUSTER_SERVICE_HOST=localhost
+REDIS_CLUSTER_SERVICE_PORTS=[7000,7001,7002,7003,7004,7005]
+REDIS_CLUSTER_DB_INDEX=
+REDIS_CLUSTER_TTL=
+REDIS_CLUSTER_PASSWORD=
+REDIS_CLUSTER_CONNECTION_TIMEOUT=
+REDIS_CLUSTER_KEEP_ALIVE=
+REDIS_CLUSTER_FAMILY=
+REDIS_CLUSTER_KEY_PREFIX=
+
+SYNC_PATH=http://localhost:3001
+API_ROOT_URL=http://localhost:3000
+DISABLE_USER_REGISTRATION=false
+PORT=1337
+JWT_SECRET=ASD#asda23DFEFSFHG%fg
+NODE_ENV=test
+SENDGRID_API_KEY=SG.123123
+S3_ACCESS_KEY=
+S3_SECRET=
+REDIS_ARENA_PORT=4568
+FRONT_BASE_URL=http://localhost:4200
+RELEASLY_MAIL=support@starter.co
+BACK_OFFICE_URL=http://localhost:5200
+INTERCOM_API_KEY=
+GLOBAL_CONTEXT_PATH=
+API_CONTEXT_PATH=
+
+S3_LOCAL_STACK=http://localhost:4566
+S3_BUCKET_NAME=novu-test
+S3_REGION=us-east-1
+GCS_BUCKET_NAME=novu-test
+AZURE_ACCOUNT_NAME=novu
+AZURE_ACCOUNT_KEY=123456
+AZURE_HOST_NAME=https://novu.blob.core.windows.net
+AZURE_CONTAINER_NAME=novu-test
+AWS_ACCESS_KEY_ID=test
+AWS_SECRET_ACCESS_KEY=test
+NEW_RELIC_ENABLED=false
+NOVU_API_KEY=test
+
+MAIL_SERVER_DOMAIN=
+
+VERCEL_CLIENT_ID=
+VERCEL_CLIENT_SECRET=
+VERCEL_REDIRECT_URI=http://localhost:4200/auth/login
+VERCEL_BASE_URL=https://api.vercel.com
+
+FF_IS_TOPIC_NOTIFICATION_ENABLED=true
+
+STORE_NOTIFICATION_CONTENT=true
+
+MAX_NOVU_INTEGRATION_MAIL_REQUESTS=300
+INTERCOM_IDENTITY_VERIFICATION_SECRET_KEY=
+NOVU_EMAIL_INTEGRATION_API_KEY=test
+
+LOGGING_LEVEL=error
diff --git a/packages/application-generic/src/services/cache/cache.service.ts b/packages/application-generic/src/services/cache/cache.service.ts
index a2a0fa8f6c6..5e88cec22ef 100644
--- a/packages/application-generic/src/services/cache/cache.service.ts
+++ b/packages/application-generic/src/services/cache/cache.service.ts
@@ -4,10 +4,16 @@ import { QUERY_PREFIX } from './key-builders';
 import {
   InMemoryProviderClient,
   InMemoryProviderService,
+  Pipeline,
 } from '../in-memory-provider';
 
 const LOG_CONTEXT = 'CacheService';
 
+enum CacheServiceActionsEnum {
+  DEL_QUERY = 'delQuery',
+  SET_QUERY = 'setQuery',
+}
+
 export interface ICacheService {
   set(key: string, value: string, options?: CachingConfig);
   get(key: string);
@@ -64,7 +70,8 @@ export class CacheService implements ICacheService {
       );
 
       pipeline.set(key, value, 'EX', this.getTtlInSeconds(options));
-      await pipeline.exec();
+
+      await this.capturedExec(pipeline, CacheServiceActionsEnum.SET_QUERY, key);
     }
   }
 
@@ -99,7 +106,25 @@ export class CacheService implements ICacheService {
       });
       // invalidate queries set
       pipeline.del(key);
+
+      await this.capturedExec(pipeline, CacheServiceActionsEnum.DEL_QUERY, key);
+    }
+  }
+
+  private async capturedExec(
+    pipeline: Pipeline,
+    action: CacheServiceActionsEnum,
+    key: string
+  ): Promise<void> {
+    try {
       await pipeline.exec();
+    } catch (error) {
+      Logger.error(
+        `Failed to execute pipeline action ${action} for key ${key}`,
+        LOG_CONTEXT,
+        error
+      );
+      throw error;
     }
   }
 
diff --git a/packages/application-generic/src/services/cache/invalidate-cache.service.ts b/packages/application-generic/src/services/cache/invalidate-cache.service.ts
index 916a105a158..296430ea46d 100644
--- a/packages/application-generic/src/services/cache/invalidate-cache.service.ts
+++ b/packages/application-generic/src/services/cache/invalidate-cache.service.ts
@@ -7,6 +7,8 @@ import {
   CacheInterceptorTypeEnum,
 } from './interceptors/shared-cache';
 
+const LOG_CONTEXT = 'InvalidateCache';
+
 @Injectable()
 export class InvalidateCacheService {
   constructor(private cacheService: CacheService) {}
@@ -17,10 +19,9 @@ export class InvalidateCacheService {
     try {
       await this.cacheService.del(key);
     } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(
+      Logger.error(
         `An error has occurred when deleting "key: ${key}",`,
-        'InvalidateCache',
+        LOG_CONTEXT,
         err
       );
     }
@@ -32,10 +33,9 @@ export class InvalidateCacheService {
     try {
       await this.cacheService.delQuery(key);
     } catch (err) {
-      // eslint-disable-next-line no-console
-      console.error(
+      Logger.error(
         `An error has occurred when deleting "key: ${key}",`,
-        'InvalidateCache',
+        LOG_CONTEXT,
         err
       );
     }
@@ -55,7 +55,7 @@ export class InvalidateCacheService {
     );
 
     if (!cacheKey) {
-      Logger.warn('Cachekey does not exist');
+      Logger.warn('Cachekey does not exist', LOG_CONTEXT);
 
       return;
     }
@@ -67,7 +67,7 @@ export class InvalidateCacheService {
     } catch (err) {
       Logger.error(
         `An error has occurred when deleting "key: ${cacheKey}",`,
-        'InvalidateCache',
+        LOG_CONTEXT,
         err
       );
     }
diff --git a/packages/application-generic/src/services/in-memory-provider/elasticache-cluster-provider.ts b/packages/application-generic/src/services/in-memory-provider/elasticache-cluster-provider.ts
index e9944a25890..edf1cfb08c4 100644
--- a/packages/application-generic/src/services/in-memory-provider/elasticache-cluster-provider.ts
+++ b/packages/application-generic/src/services/in-memory-provider/elasticache-cluster-provider.ts
@@ -83,11 +83,14 @@ export const getElasticacheClusterProviderConfig =
     };
   };
 
-export const getElasticacheCluster = (): Cluster | undefined => {
+export const getElasticacheCluster = (
+  enableAutoPipelining?: boolean
+): Cluster | undefined => {
   const { instances } = getElasticacheClusterProviderConfig();
 
   const options: ClusterOptions = {
     dnsLookup: (address, callback) => callback(null, address),
+    enableAutoPipelining: enableAutoPipelining ?? false,
     enableOfflineQueue: false,
     enableReadyCheck: true,
     redisOptions: {
@@ -102,7 +105,9 @@ export const getElasticacheCluster = (): Cluster | undefined => {
     slotsRefreshTimeout: 10000,
   };
 
-  Logger.log(`Initializing Elasticache Cluster service`);
+  Logger.log(
+    `Initializing Elasticache Cluster Provider with ${instances?.length} instances and auto-pipelining as ${options.enableAutoPipelining}`
+  );
 
   if (instances && instances.length > 0) {
     return new Redis.Cluster(instances, options);
diff --git a/packages/application-generic/src/services/in-memory-provider/in-memory-provider.service.spec.ts b/packages/application-generic/src/services/in-memory-provider/in-memory-provider.service.spec.ts
index 195625b266b..2072601783b 100644
--- a/packages/application-generic/src/services/in-memory-provider/in-memory-provider.service.spec.ts
+++ b/packages/application-generic/src/services/in-memory-provider/in-memory-provider.service.spec.ts
@@ -85,6 +85,20 @@ describe('In-memory Provider Service', () => {
       expect(inMemoryProviderService.getStatus()).toEqual('ready');
     });
 
+    describe('TEMP: Check if enableAutoPipelining true is set properly in Cluster', () => {
+      it('enableAutoPipelining is enabled', async () => {
+        const clusterWithPipelining = new InMemoryProviderService(true);
+
+        await clusterWithPipelining.delayUntilReadiness();
+
+        expect(clusterWithPipelining.getStatus()).toEqual('ready');
+        expect(
+          clusterWithPipelining.inMemoryProviderClient.options
+            .enableAutoPipelining
+        ).toEqual(true);
+      });
+    });
+
     describe('Set up', () => {
       it('should have the right config', () => {
         const { inMemoryProviderConfig } = inMemoryProviderService;
@@ -124,6 +138,9 @@ describe('In-memory Provider Service', () => {
 
         expect(inMemoryProviderClient!.status).toEqual('ready');
         expect(inMemoryProviderClient!.isCluster).toEqual(true);
+        expect(inMemoryProviderClient.options.enableAutoPipelining).toEqual(
+          false
+        );
 
         const options = inMemoryProviderService.getOptions();
         expect(options).toEqual(undefined);
diff --git a/packages/application-generic/src/services/in-memory-provider/in-memory-provider.service.ts b/packages/application-generic/src/services/in-memory-provider/in-memory-provider.service.ts
index 3ad0f9a8ea1..49d2acd77bd 100644
--- a/packages/application-generic/src/services/in-memory-provider/in-memory-provider.service.ts
+++ b/packages/application-generic/src/services/in-memory-provider/in-memory-provider.service.ts
@@ -15,6 +15,7 @@ import {
   RedisOptions,
 } from './redis-provider';
 import {
+  ChainableCommander,
   Cluster,
   ClusterOptions,
   getRedisCluster,
@@ -29,13 +30,14 @@ type InMemoryProviderConfig =
   | IElasticacheClusterProviderConfig
   | IRedisProviderConfig
   | IRedisClusterProviderConfig;
+export type Pipeline = ChainableCommander;
 
 @Injectable()
 export class InMemoryProviderService {
   public inMemoryProviderClient: InMemoryProviderClient;
   public inMemoryProviderConfig: InMemoryProviderConfig;
 
-  constructor() {
+  constructor(private enableAutoPipelining?: boolean) {
     Logger.log('In-memory provider service initialized', LOG_CONTEXT);
 
     this.inMemoryProviderClient = this.buildClient();
@@ -111,7 +113,7 @@ export class InMemoryProviderService {
   }
 
   private getClientAndConfigForCluster(): {
-    getClient: () => Cluster | undefined;
+    getClient: (enableAutoPipelining?: boolean) => Cluster | undefined;
     getConfig: () => InMemoryProviderConfig;
   } {
     const clusterProviders = {
@@ -142,7 +144,7 @@ export class InMemoryProviderService {
       Logger.warn('Missing host for in-memory cluster provider', LOG_CONTEXT);
     }
 
-    const inMemoryProviderClient = getClient();
+    const inMemoryProviderClient = getClient(this.enableAutoPipelining);
     if (host && inMemoryProviderClient) {
       Logger.log(`Connecting to cluster at ${host}`, LOG_CONTEXT);
 
diff --git a/packages/application-generic/src/services/in-memory-provider/redis-cluster-provider.ts b/packages/application-generic/src/services/in-memory-provider/redis-cluster-provider.ts
index c91eb12af90..42d8aec9c8c 100644
--- a/packages/application-generic/src/services/in-memory-provider/redis-cluster-provider.ts
+++ b/packages/application-generic/src/services/in-memory-provider/redis-cluster-provider.ts
@@ -1,8 +1,13 @@
-import Redis, { Cluster, ClusterNode, ClusterOptions } from 'ioredis';
+import Redis, {
+  ChainableCommander,
+  Cluster,
+  ClusterNode,
+  ClusterOptions,
+} from 'ioredis';
 import { ConnectionOptions } from 'tls';
 import { Logger } from '@nestjs/common';
 
-export { Cluster, ClusterOptions };
+export { ChainableCommander, Cluster, ClusterOptions };
 
 export const CLIENT_READY = 'ready';
 const DEFAULT_TTL_SECONDS = 60 * 60 * 2;
@@ -87,11 +92,13 @@ export const getRedisClusterProviderConfig =
     };
   };
 
-export const getRedisCluster = (): Cluster | undefined => {
+export const getRedisCluster = (
+  enableAutoPipelining?: boolean
+): Cluster | undefined => {
   const { instances } = getRedisClusterProviderConfig();
 
   const options: ClusterOptions = {
-    enableAutoPipelining: false,
+    enableAutoPipelining: enableAutoPipelining ?? false,
     enableOfflineQueue: false,
     enableReadyCheck: true,
     scaleReads: 'slave',
@@ -103,7 +110,7 @@ export const getRedisCluster = (): Cluster | undefined => {
   };
 
   Logger.log(
-    `Initializing Redis Cluster Provider with ${instances?.length} instances`
+    `Initializing Redis Cluster Provider with ${instances?.length} instances and auto-pipelining as ${options.enableAutoPipelining}`
   );
 
   if (instances && instances.length > 0) {
diff --git a/packages/cli/.eslintrc.js b/packages/cli/.eslintrc.js
index 5a2cc7f1ec0..a9b83317c5f 100644
--- a/packages/cli/.eslintrc.js
+++ b/packages/cli/.eslintrc.js
@@ -1,3 +1,9 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
 };
diff --git a/packages/client/.eslintrc.js b/packages/client/.eslintrc.js
index 5a2cc7f1ec0..a9b83317c5f 100644
--- a/packages/client/.eslintrc.js
+++ b/packages/client/.eslintrc.js
@@ -1,3 +1,9 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
 };
diff --git a/packages/headless/.eslintrc.js b/packages/headless/.eslintrc.js
index d16bd1f8b52..f1865ad46d9 100644
--- a/packages/headless/.eslintrc.js
+++ b/packages/headless/.eslintrc.js
@@ -1,5 +1,11 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
   overrides: [
     {
       files: ['*.test.ts'],
diff --git a/packages/nest/.eslintrc.js b/packages/nest/.eslintrc.js
new file mode 100644
index 00000000000..a9b83317c5f
--- /dev/null
+++ b/packages/nest/.eslintrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/packages/nest/.eslintrc.json b/packages/nest/.eslintrc.json
deleted file mode 100644
index ec40100be69..00000000000
--- a/packages/nest/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../.eslintrc.js"
-}
diff --git a/packages/node/.eslintrc.js b/packages/node/.eslintrc.js
new file mode 100644
index 00000000000..a9b83317c5f
--- /dev/null
+++ b/packages/node/.eslintrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/packages/node/.eslintrc.json b/packages/node/.eslintrc.json
deleted file mode 100644
index ec40100be69..00000000000
--- a/packages/node/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../.eslintrc.js"
-}
diff --git a/packages/stateless/.eslintrc.js b/packages/stateless/.eslintrc.js
new file mode 100644
index 00000000000..a9b83317c5f
--- /dev/null
+++ b/packages/stateless/.eslintrc.js
@@ -0,0 +1,9 @@
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  parserOptions: {
+    project: './tsconfig.json',
+    ecmaVersion: 2020,
+    sourceType: 'module',
+    tsconfigRootDir: __dirname,
+  },
+};
diff --git a/packages/stateless/.eslintrc.json b/packages/stateless/.eslintrc.json
deleted file mode 100644
index ec40100be69..00000000000
--- a/packages/stateless/.eslintrc.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "extends": "../../.eslintrc.js"
-}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 427185c102e..3ff1eeccea7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -6,9 +6,9 @@ importers:
     specifiers:
       '@auto-it/npm': ^10.36.5
       '@auto-it/released': ^10.36.5
-      '@commitlint/cli': 17.5.1
+      '@commitlint/cli': 17.6.1
       '@commitlint/config-angular': ^17.0.0
-      '@commitlint/config-conventional': 17.4.4
+      '@commitlint/config-conventional': 17.6.1
       '@cspell/eslint-plugin': ^6.14.3
       '@nrwl/cli': 13.10.6
       '@nrwl/eslint-plugin-nx': 13.10.6
@@ -31,6 +31,7 @@ importers:
       commitizen: ^4.2.4
       cpx: ^1.5.0
       cross-env: ^7.0.3
+      cross-spawn: ^7.0.3
       cspell: ^6.19.2
       cypress-intellij-reporter: ^0.0.7
       cz-conventional-changelog: 3.3.0
@@ -82,9 +83,9 @@ importers:
     devDependencies:
       '@auto-it/npm': 10.44.0_j6r65ghnzvzk7vhdh4hyogrm4a
       '@auto-it/released': 10.44.0_j6r65ghnzvzk7vhdh4hyogrm4a
-      '@commitlint/cli': 17.5.1_@swc+core@1.3.49
+      '@commitlint/cli': 17.6.1_@swc+core@1.3.49
       '@commitlint/config-angular': 17.4.4
-      '@commitlint/config-conventional': 17.4.4
+      '@commitlint/config-conventional': 17.6.1
       '@cspell/eslint-plugin': 6.31.1
       '@nrwl/cli': 13.10.6_typescript@4.9.5
       '@nrwl/eslint-plugin-nx': 13.10.6_xnlp5umsirvrotbydhrpt3qgym
@@ -107,6 +108,7 @@ importers:
       commitizen: 4.3.0_@swc+core@1.3.49
       cpx: 1.5.0
       cross-env: 7.0.3
+      cross-spawn: 7.0.3
       cspell: 6.19.2
       cypress-intellij-reporter: 0.0.7
       cz-conventional-changelog: 3.3.0_@swc+core@1.3.49
@@ -115,7 +117,7 @@ importers:
       eslint: 8.38.0
       eslint-config-airbnb-typescript: 17.0.0_awz7iagzjrkgdisnaft5immp6i
       eslint-config-prettier: 8.8.0_eslint@8.38.0
-      eslint-import-resolver-webpack: 0.13.2_2shkfpyvap4zatu4dplbemujdy
+      eslint-import-resolver-webpack: 0.13.2_ach2pokoanzagmjnilrcbv2npm
       eslint-plugin-eslint-comments: 3.2.0_eslint@8.38.0
       eslint-plugin-functional: 3.7.2_ze6bmax3gcsfve3yrzu6npguhe
       eslint-plugin-import: 2.27.5_ow2j3yqjjpzplq4flnkwqs3k4u
@@ -157,10 +159,10 @@ importers:
       '@godaddy/terminus': ^4.10.2
       '@google-cloud/storage': ^6.2.3
       '@nestjs/axios': ~2.0.0
-      '@nestjs/cli': 9.3.0
+      '@nestjs/cli': 9.4.0
       '@nestjs/common': 9.3.12
       '@nestjs/core': 9.3.12
-      '@nestjs/graphql': 10.2.0
+      '@nestjs/graphql': 10.2.1
       '@nestjs/jwt': 9.0.0
       '@nestjs/passport': 9.0.3
       '@nestjs/platform-express': 9.3.12
@@ -206,7 +208,7 @@ importers:
       handlebars: ^4.7.7
       hat: ^0.0.3
       helmet: ^6.0.1
-      ioredis: 5.3.1
+      ioredis: 5.3.2
       jsonwebtoken: 9.0.0
       lodash: ^4.17.15
       mocha: ^8.1.1
@@ -240,7 +242,7 @@ importers:
       '@nestjs/axios': 2.0.0_uhnffq3dkwzlnz66svmn6j7ydi
       '@nestjs/common': 9.3.12_welcnyot5bzd5wa2aovbkxpi4i
       '@nestjs/core': 9.3.12_qhubmme3ystyvorrsy6sfc2ome
-      '@nestjs/graphql': 10.2.0_vgnnqnzg3rzr5actpo4ly2om2q
+      '@nestjs/graphql': 10.2.1_vgnnqnzg3rzr5actpo4ly2om2q
       '@nestjs/jwt': 9.0.0_@nestjs+common@9.3.12
       '@nestjs/passport': 9.0.3_ajy2slul3age3kopk444psnhqq
       '@nestjs/platform-express': 9.3.12_ge4qplnzbmfyi5znl534zhtkn4
@@ -273,7 +275,7 @@ importers:
       handlebars: 4.7.7
       hat: 0.0.3
       helmet: 6.1.4
-      ioredis: 5.3.1
+      ioredis: 5.3.2
       jsonwebtoken: 9.0.0
       lodash: 4.17.21
       nanoid: 3.3.6
@@ -296,7 +298,7 @@ importers:
       uuid: 8.3.2
     devDependencies:
       '@faker-js/faker': 6.3.1
-      '@nestjs/cli': 9.3.0
+      '@nestjs/cli': 9.4.0
       '@nestjs/schematics': 9.0.4_typescript@4.9.5
       '@nestjs/testing': 9.3.12_ckvy3xuqd5ydy3ipiq7jufha44
       '@types/bcrypt': 3.0.1
@@ -313,7 +315,7 @@ importers:
       mocha: 8.4.0
       nodemon: 2.0.22
       sinon: 9.2.4
-      ts-loader: 9.4.2_fejcc7gjbwtmwzggoernzojija
+      ts-loader: 9.4.2_odl7p537j6zjcy4b5gf5bruiye
       ts-node: 10.9.1_wh2cnrlliuuxb2etxm2m3ttgna
       tsconfig-paths: 3.14.2
       typescript: 4.9.5
@@ -378,7 +380,7 @@ importers:
       nodemon: 2.0.22
       prettier: 2.8.7
       ts-jest: 27.1.5_ik2qjjkgpajyhqxqenowswsmya
-      ts-loader: 9.4.2_fejcc7gjbwtmwzggoernzojija
+      ts-loader: 9.4.2_odl7p537j6zjcy4b5gf5bruiye
       ts-node: 10.9.1_wh2cnrlliuuxb2etxm2m3ttgna
       tsconfig-paths: 3.14.2
       typescript: 4.9.5
@@ -452,7 +454,7 @@ importers:
       eslint-plugin-cypress: ^2.12.1
       graphql: ^15.4.0
       handlebars: ^4.7.7
-      html-webpack-plugin: 5.5.0
+      html-webpack-plugin: 5.5.1
       http-server: ^0.13.0
       jwt-decode: ^3.1.2
       less: ^4.1.0
@@ -491,6 +493,7 @@ importers:
       react-table: ^7.7.0
       react-use-intercom: ^2.0.0
       rimraf: ^3.0.2
+      slugify: ^1.4.6
       storybook-dark-mode: ^1.0.8
       typescript: 4.9.5
       uniqid: ^5.3.0
@@ -547,7 +550,7 @@ importers:
       date-fns: 2.29.3
       graphql: 15.8.0
       handlebars: 4.7.7
-      html-webpack-plugin: 5.5.0_webpack@5.78.0
+      html-webpack-plugin: 5.5.1_webpack@5.78.0
       jwt-decode: 3.1.2
       less: 4.1.3
       lodash.capitalize: 4.2.1
@@ -581,6 +584,7 @@ importers:
       react-table: 7.8.0_react@17.0.2
       react-use-intercom: 2.1.0_sfoxds7t5ydpegc3knd667wn6m
       rimraf: 3.0.2
+      slugify: 1.6.6
       storybook-dark-mode: 1.1.2_sfoxds7t5ydpegc3knd667wn6m
       typescript: 4.9.5
       uniqid: 5.4.0
@@ -720,7 +724,7 @@ importers:
       sinon: 9.2.4
       supertest: 6.3.3
       ts-jest: 27.1.5_d5we6thvweerisoz5puaw7xkku
-      ts-loader: 9.4.2_fejcc7gjbwtmwzggoernzojija
+      ts-loader: 9.4.2_odl7p537j6zjcy4b5gf5bruiye
       ts-node: 10.9.1_wh2cnrlliuuxb2etxm2m3ttgna
       tsconfig-paths: 3.14.2
       typescript: 4.9.5
@@ -744,7 +748,7 @@ importers:
       '@testing-library/user-event': ^12.1.10
       '@types/jest': ^26.0.15
       '@types/node': ^12.0.0
-      '@types/react': 17.0.56
+      '@types/react': 17.0.58
       '@types/react-dom': 17.0.19
       '@types/react-router-dom': ^5.1.7
       antd: ^4.10.0
@@ -756,7 +760,7 @@ importers:
       cypress-intellij-reporter: ^0.0.7
       cypress-network-idle: ^1.10.0
       eslint-plugin-cypress: ^2.12.1
-      html-webpack-plugin: 5.5.0
+      html-webpack-plugin: 5.5.1
       http-server: ^0.13.0
       iframe-resizer: ^4.3.1
       jest: 27.5.1
@@ -780,9 +784,9 @@ importers:
       webpack-dev-server: 4.11.1
     dependencies:
       '@ant-design/icons': 4.8.0_sfoxds7t5ydpegc3knd667wn6m
-      '@emotion/react': 11.10.6_bbbkigweufcoxic5hihvd5mfx4
-      '@emotion/styled': 11.10.6_4md3srvjbnvrxpmap42wvfj5zq
-      '@mantine/core': 4.2.12_clvscqj43uvazycvccqnsqoqou
+      '@emotion/react': 11.10.6_c3qmy7gv5lbarsbv5sa5jz2oke
+      '@emotion/styled': 11.10.6_nkylnud3pypzhz7cu2nz4io324
+      '@mantine/core': 4.2.12_serzhkp6rlv2ugcs7hkl6ylyt4
       '@mantine/hooks': 4.2.12_react@17.0.2
       '@novu/notification-center': link:../../packages/notification-center
       '@novu/shared': link:../../libs/shared
@@ -816,7 +820,7 @@ importers:
       '@novu/testing': link:../../libs/testing
       '@types/jest': 26.0.24
       '@types/node': 12.20.55
-      '@types/react': 17.0.56
+      '@types/react': 17.0.58
       '@types/react-dom': 17.0.19
       '@types/react-router-dom': 5.3.3
       craco-antd: 1.19.0_qvigzdrsjhqnr5xqltdekrqjdi
@@ -824,7 +828,7 @@ importers:
       cypress: 12.9.0
       cypress-intellij-reporter: 0.0.7
       cypress-network-idle: 1.14.2
-      html-webpack-plugin: 5.5.0_webpack@5.78.0
+      html-webpack-plugin: 5.5.1_webpack@5.78.0
       http-server: 0.13.0
       jest: 27.5.1
       less: 4.1.3
@@ -836,7 +840,7 @@ importers:
     specifiers:
       '@faker-js/faker': ^6.0.0
       '@nestjs/axios': ~2.0.0
-      '@nestjs/cli': 9.3.0
+      '@nestjs/cli': 9.4.0
       '@nestjs/common': 9.3.12
       '@nestjs/core': 9.3.12
       '@nestjs/platform-express': 9.3.12
@@ -927,7 +931,7 @@ importers:
       uuid: 8.3.2
     devDependencies:
       '@faker-js/faker': 6.3.1
-      '@nestjs/cli': 9.3.0
+      '@nestjs/cli': 9.4.0
       '@nestjs/schematics': 9.0.4_typescript@4.9.5
       '@nestjs/testing': 9.3.12_ckvy3xuqd5ydy3ipiq7jufha44
       '@types/bcrypt': 3.0.1
@@ -944,7 +948,7 @@ importers:
       sinon: 9.2.4
       superagent-defaults: 0.1.14_superagent@8.0.9
       supertest: 5.0.0
-      ts-loader: 9.4.2_fejcc7gjbwtmwzggoernzojija
+      ts-loader: 9.4.2_odl7p537j6zjcy4b5gf5bruiye
       ts-node: 10.9.1_wh2cnrlliuuxb2etxm2m3ttgna
       tsconfig-paths: 3.14.2
       typescript: 4.9.5
@@ -981,7 +985,7 @@ importers:
       dotenv: ^8.2.0
       envalid: ^7.1.0
       helmet: ^6.0.1
-      ioredis: 5.3.1
+      ioredis: 5.3.2
       jest: ^27.0.6
       jsonwebtoken: 9.0.0
       lodash: ^4.17.15
@@ -1020,7 +1024,7 @@ importers:
       dotenv: 8.6.0
       envalid: 7.3.1
       helmet: 6.1.4
-      ioredis: 5.3.1
+      ioredis: 5.3.2
       jsonwebtoken: 9.0.0
       lodash: 4.17.21
       nest-raven: 9.2.0_3xdevedh462rkaeyzloxkme63y
@@ -1045,7 +1049,7 @@ importers:
       prettier: 2.8.7
       supertest: 6.3.3
       ts-jest: 27.1.5_d5we6thvweerisoz5puaw7xkku
-      ts-loader: 9.4.2_fejcc7gjbwtmwzggoernzojija
+      ts-loader: 9.4.2_odl7p537j6zjcy4b5gf5bruiye
       ts-node: 10.9.1_wh2cnrlliuuxb2etxm2m3ttgna
       tsconfig-paths: 3.14.2
       typescript: 4.9.5
@@ -1059,7 +1063,7 @@ importers:
       '@docusaurus/theme-common': 2.3.1
       '@mdx-js/react': ^1.6.21
       '@svgr/webpack': ^6.2.1
-      '@tsconfig/docusaurus': 1.0.6
+      '@tsconfig/docusaurus': 1.0.7
       '@types/react': ^17.0.14
       '@types/react-helmet': 6.1.6
       '@types/react-router-dom': 5.3.3
@@ -1098,8 +1102,8 @@ importers:
       '@svgr/webpack': 6.5.1
       clsx: 1.2.1
       docusaurus-plugin-plausible: 0.0.5
-      docusaurus-plugin-sass: 0.2.3_xcukc7gctijnm7m2n3zs3qlnye
-      file-loader: 6.2.0_webpack@5.78.0
+      docusaurus-plugin-sass: 0.2.3_3tyxhnzcibirqnfyhlburgl2we
+      file-loader: 6.2.0_webpack@5.79.0
       prism-react-renderer: 1.3.5_react@17.0.2
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
@@ -1107,10 +1111,10 @@ importers:
       sharp: 0.31.3
       styled-components: 5.3.9_v5ja746gkdtknuc6tj46sve3be
       stylelint-config-css-modules: 4.2.0_stylelint@14.16.1
-      url-loader: 4.1.1_kl4i6u7bs444epxeue2qtwootq
+      url-loader: 4.1.1_7f53fl25ml2r3kp2h6jbsgu5ji
     devDependencies:
       '@docusaurus/module-type-aliases': 2.3.1_sfoxds7t5ydpegc3knd667wn6m
-      '@tsconfig/docusaurus': 1.0.6
+      '@tsconfig/docusaurus': 1.0.7
       '@types/react': 17.0.53
       '@types/react-helmet': 6.1.6
       '@types/react-router-dom': 5.3.3
@@ -1120,7 +1124,7 @@ importers:
       lint-staged: 12.5.0
       markdownlint-cli: 0.33.0
       prettier: 2.8.7
-      sass-loader: 13.2.2_sass@1.61.0+webpack@5.78.0
+      sass-loader: 13.2.2_sass@1.61.0+webpack@5.79.0
       stylelint: 14.16.1
       stylelint-config-recess-order: 3.1.0_stylelint@14.16.1
       stylelint-config-recommended-scss: 6.0.0_w5gtdy6oq4ictd5o4eu6befejy
@@ -1129,82 +1133,6 @@ importers:
       stylelint-scss: 4.6.0_stylelint@14.16.1
       typescript: 4.9.5
 
-  examples/angular-notification-center-example:
-    specifiers:
-      '@angular-devkit/build-angular': ^15.0.0
-      '@angular/animations': ^15.0.0
-      '@angular/cli': ~15.0.0
-      '@angular/common': ^15.0.0
-      '@angular/compiler': ^15.0.0
-      '@angular/compiler-cli': ^15.0.0
-      '@angular/core': ^15.0.0
-      '@angular/elements': ^15.0.0
-      '@angular/forms': ^15.0.0
-      '@angular/platform-browser': ^15.0.0
-      '@angular/platform-browser-dynamic': ^15.0.0
-      '@angular/router': ^15.0.0
-      '@novu/notification-center-angular': ^0.13.0
-      '@types/jasmine': ~4.3.0
-      jasmine-core: ~4.5.0
-      karma: ~6.4.0
-      karma-chrome-launcher: ~3.1.0
-      karma-coverage: ~2.2.0
-      karma-jasmine: ~5.1.0
-      karma-jasmine-html-reporter: ~2.0.0
-      tslib: ^2.3.0
-      typescript: 4.9.5
-      zone.js: ~0.12.0
-    dependencies:
-      '@angular/animations': 15.2.6_@angular+core@15.2.6
-      '@angular/common': 15.2.6_w4ufewuad3bhaxmr6al3t3s3gm
-      '@angular/compiler': 15.2.6_@angular+core@15.2.6
-      '@angular/core': 15.2.6_rxjs@7.8.0+zone.js@0.12.0
-      '@angular/elements': 15.2.6_w4ufewuad3bhaxmr6al3t3s3gm
-      '@angular/forms': 15.2.6_wjwxqsfq4vao66eh754tffd4ce
-      '@angular/platform-browser': 15.2.6_feimaifsytcup65o755hc4dp7i
-      '@angular/platform-browser-dynamic': 15.2.6_n2pq7ehjjlbnmzq6nreqvmxwky
-      '@angular/router': 15.2.6_wjwxqsfq4vao66eh754tffd4ce
-      '@novu/notification-center-angular': link:../../packages/notification-center-angular
-      tslib: 2.5.0
-      zone.js: 0.12.0
-    devDependencies:
-      '@angular-devkit/build-angular': 15.2.5_ekv6ndrone6sy5l4677uzgwpx4
-      '@angular/cli': 15.0.5
-      '@angular/compiler-cli': 15.2.6_54xk3mtsepvzoktlwdjj2rm7na
-      '@types/jasmine': 4.3.1
-      jasmine-core: 4.5.0
-      karma: 6.4.1
-      karma-chrome-launcher: 3.1.1
-      karma-coverage: 2.2.0
-      karma-jasmine: 5.1.0_karma@6.4.1
-      karma-jasmine-html-reporter: 2.0.0_uk6l45dlsjldsnfgnal4othgyq
-      typescript: 4.9.5
-
-  examples/vue-notification-center-example:
-    specifiers:
-      '@novu/notification-center-vue': ^0.13.0
-      '@types/node': ^16.18.3
-      '@vitejs/plugin-vue': ^3.1.2
-      '@vitejs/plugin-vue-jsx': ^2.0.1
-      '@vue/tsconfig': ^0.1.3
-      npm-run-all: ^4.1.5
-      typescript: 4.9.5
-      vite: ^3.1.8
-      vue: ^3.2.41
-      vue-tsc: ^1.0.8
-    dependencies:
-      '@novu/notification-center-vue': link:../../packages/notification-center-vue
-      vue: 3.2.47
-    devDependencies:
-      '@types/node': 16.18.23
-      '@vitejs/plugin-vue': 3.2.0_vite@3.2.5+vue@3.2.47
-      '@vitejs/plugin-vue-jsx': 2.1.1_vite@3.2.5+vue@3.2.47
-      '@vue/tsconfig': 0.1.3_@types+node@16.18.23
-      npm-run-all: 4.1.5
-      typescript: 4.9.5
-      vite: 3.2.5_@types+node@16.18.23
-      vue-tsc: 1.2.0_typescript@4.9.5
-
   libs/dal:
     specifiers:
       '@aws-sdk/client-s3': ^3.14.0
@@ -1522,33 +1450,27 @@ importers:
       class-validator: ^0.14.0
       codecov: ^3.5.0
       cpx: ^1.5.0
-      cspell: ^4.1.0
       cz-conventional-changelog: ^3.3.0
       date-fns: ^2.29.2
-      decorate-all: ^1.2.1
-      gh-pages: ^3.1.0
+      dotenv: ^8.2.0
       handlebars: ^4.7.7
       ioredis: ^5.2.4
       jest: ^27.1.0
       lodash: ^4.17.15
-      maskdata: ^1.2.0
       nestjs-pino: ^3.1.2
       newrelic: '>=9'
       node-fetch: ^3.2.10
       npm-run-all: ^4.1.5
       nyc: ^15.1.0
-      open-cli: ^6.0.1
       pino-http: ^8.3.3
       pino-pretty: ^9.4.0
       prettier: ~2.8.0
       redlock: 4.2.0
       reflect-metadata: ^0.1.13
       rimraf: ^3.0.2
-      rxjs: '>=7.x'
       sinon: ^9.2.4
       ts-jest: ^27.0.5
       ts-node: ~10.9.1
-      typedoc: ^0.23.0
       typescript: 4.9.5
     dependencies:
       '@aws-sdk/client-s3': 3.310.0
@@ -1605,11 +1527,9 @@ importers:
       class-transformer: 0.5.1
       class-validator: 0.14.0
       date-fns: 2.29.3
-      decorate-all: 1.2.1_reflect-metadata@0.1.13
       handlebars: 4.7.7
       ioredis: 5.3.1
       lodash: 4.17.21
-      maskdata: 1.2.2
       nestjs-pino: 3.1.2_g2cqd4mgcg63o5mvxc7l66lzja
       newrelic: 9.10.2
       node-fetch: 3.3.1
@@ -1617,7 +1537,6 @@ importers:
       pino-pretty: 9.4.0
       redlock: 4.2.0
       reflect-metadata: 0.1.13
-      rxjs: 7.8.0
     optionalDependencies:
       '@taskforcesh/bullmq-pro': 5.1.14
     devDependencies:
@@ -1628,19 +1547,16 @@ importers:
       '@types/sinon': 9.0.11
       codecov: 3.8.3
       cpx: 1.5.0
-      cspell: 4.2.8
       cz-conventional-changelog: 3.3.0
-      gh-pages: 3.2.3
+      dotenv: 8.6.0
       jest: 27.5.1_ts-node@10.9.1
       npm-run-all: 4.1.5
       nyc: 15.1.0
-      open-cli: 6.0.1
       prettier: 2.8.7
       rimraf: 3.0.2
       sinon: 9.2.4
       ts-jest: 27.1.5_d5we6thvweerisoz5puaw7xkku
       ts-node: 10.9.1_wh2cnrlliuuxb2etxm2m3ttgna
-      typedoc: 0.23.28_typescript@4.9.5
       typescript: 4.9.5
 
   packages/cli:
@@ -1918,7 +1834,7 @@ importers:
       '@rollup/plugin-replace': 2.4.2_rollup@3.20.2
       '@rollup/plugin-typescript': 10.0.1_7vpd2ef7tj23jy6lp4gd574lwm
       '@storybook/addon-actions': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
-      '@storybook/addon-essentials': 6.5.16_7cbljjecgmz5gyvfn55htlglki
+      '@storybook/addon-essentials': 6.5.16_pvger3gswq3qo4smcgtrspxbla
       '@storybook/addon-interactions': 6.5.16_oian64e447gu2iub27g2ay42xi
       '@storybook/addon-links': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/builder-webpack5': 6.5.16_jgxnvbe4faw3ohf4h6p42qq6oy
@@ -1931,7 +1847,7 @@ importers:
       '@types/react': 17.0.53
       '@types/react-dom': 17.0.19
       acorn: 8.8.2
-      babel-loader: 8.3.0_2bpkfvz2mezbew2j5yjox7n6pu
+      babel-loader: 8.3.0_c3tfwv7p35clwcmkb5fnkshzei
       jest: 29.5.0_@types+node@18.15.11
       jest-environment-jsdom: 29.5.0
       jest-transform-stub: 2.0.0
@@ -3749,16 +3665,6 @@ packages:
       '@jridgewell/gen-mapping': 0.3.3
       '@jridgewell/trace-mapping': 0.3.18
 
-  /@angular-devkit/architect/0.1500.5:
-    resolution: {integrity: sha512-n1L3Q2d7HoWFRRqihu3BAUB5xZFfz8LqQoHpVNl6HN1ugtmvqDUDoKrpYVH9LCKCqfJW2Cxssy+FERiDsihIJQ==}
-    engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
-    dependencies:
-      '@angular-devkit/core': 15.0.5
-      rxjs: 6.6.7
-    transitivePeerDependencies:
-      - chokidar
-    dev: true
-
   /@angular-devkit/architect/0.1502.5:
     resolution: {integrity: sha512-6KVrXQ/X7W88WSJvYe69ed/2QzQNlObKpj3BWzmcKnA+IvJB37/mvw8VaGFP9y+pDa/b1D1yCDtAJLeP5QY3xg==}
     engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -3889,115 +3795,6 @@ packages:
       - webpack-cli
     dev: true
 
-  /@angular-devkit/build-angular/15.2.5_ekv6ndrone6sy5l4677uzgwpx4:
-    resolution: {integrity: sha512-D2LxjBtUlgJnPxybOIN0XsENEGkVkqCGBBii5oK84HvgBHXO/EyP1WXpOdb2lOYSUZyjhOOs0q42LCobJoaxUw==}
-    engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
-    peerDependencies:
-      '@angular/compiler-cli': ^15.0.0
-      '@angular/localize': ^15.0.0
-      '@angular/platform-server': ^15.0.0
-      '@angular/service-worker': ^15.0.0
-      karma: ^6.3.0
-      ng-packagr: ^15.0.0
-      protractor: ^7.0.0
-      tailwindcss: ^2.0.0 || ^3.0.0
-      typescript: '>=4.8.2 <5.0'
-    peerDependenciesMeta:
-      '@angular/localize':
-        optional: true
-      '@angular/platform-server':
-        optional: true
-      '@angular/service-worker':
-        optional: true
-      karma:
-        optional: true
-      ng-packagr:
-        optional: true
-      protractor:
-        optional: true
-      tailwindcss:
-        optional: true
-    dependencies:
-      '@ampproject/remapping': 2.2.0
-      '@angular-devkit/architect': 0.1502.5_chokidar@3.5.3
-      '@angular-devkit/build-webpack': 0.1502.5_s3sugpttl6jjqsvaz4l5e6h25m
-      '@angular-devkit/core': 15.2.5_chokidar@3.5.3
-      '@angular/compiler-cli': 15.2.6_54xk3mtsepvzoktlwdjj2rm7na
-      '@babel/core': 7.20.12
-      '@babel/generator': 7.20.14
-      '@babel/helper-annotate-as-pure': 7.18.6
-      '@babel/helper-split-export-declaration': 7.18.6
-      '@babel/plugin-proposal-async-generator-functions': 7.20.7_@babel+core@7.20.12
-      '@babel/plugin-transform-async-to-generator': 7.20.7_@babel+core@7.20.12
-      '@babel/plugin-transform-runtime': 7.19.6_@babel+core@7.20.12
-      '@babel/preset-env': 7.20.2_@babel+core@7.20.12
-      '@babel/runtime': 7.20.13
-      '@babel/template': 7.20.7
-      '@discoveryjs/json-ext': 0.5.7
-      '@ngtools/webpack': 15.2.5_zqos56hbuiu24z4fwvegrcbdm4
-      ansi-colors: 4.1.3
-      autoprefixer: 10.4.13_postcss@8.4.21
-      babel-loader: 9.1.2_vbwv3zr3kwaf4v2iytwakh6feu
-      babel-plugin-istanbul: 6.1.1
-      browserslist: 4.21.5
-      cacache: 17.0.4
-      chokidar: 3.5.3
-      copy-webpack-plugin: 11.0.0_webpack@5.76.1
-      critters: 0.0.16
-      css-loader: 6.7.3_webpack@5.76.1
-      esbuild-wasm: 0.17.8
-      glob: 8.1.0
-      https-proxy-agent: 5.0.1
-      inquirer: 8.2.4
-      jsonc-parser: 3.2.0
-      karma: 6.4.1
-      karma-source-map-support: 1.4.0
-      less: 4.1.3
-      less-loader: 11.1.0_less@4.1.3+webpack@5.76.1
-      license-webpack-plugin: 4.0.2_webpack@5.76.1
-      loader-utils: 3.2.1
-      magic-string: 0.29.0
-      mini-css-extract-plugin: 2.7.2_webpack@5.76.1
-      open: 8.4.1
-      ora: 5.4.1
-      parse5-html-rewriting-stream: 7.0.0
-      piscina: 3.2.0
-      postcss: 8.4.21
-      postcss-loader: 7.0.2_mquw4qchulb5tpkmg3p2j6qala
-      resolve-url-loader: 5.0.0
-      rxjs: 6.6.7
-      sass: 1.58.1
-      sass-loader: 13.2.0_sass@1.58.1+webpack@5.76.1
-      semver: 7.3.8
-      source-map-loader: 4.0.1_webpack@5.76.1
-      source-map-support: 0.5.21
-      terser: 5.16.3
-      text-table: 0.2.0
-      tree-kill: 1.2.2
-      tslib: 2.5.0
-      typescript: 4.9.5
-      webpack: 5.76.1
-      webpack-dev-middleware: 6.0.1_webpack@5.76.1
-      webpack-dev-server: 4.11.1_webpack@5.76.1
-      webpack-merge: 5.8.0
-      webpack-subresource-integrity: 5.1.0_webpack@5.76.1
-    optionalDependencies:
-      esbuild: 0.17.8
-    transitivePeerDependencies:
-      - '@swc/core'
-      - bluebird
-      - bufferutil
-      - debug
-      - fibers
-      - html-webpack-plugin
-      - node-sass
-      - sass-embedded
-      - supports-color
-      - uglify-js
-      - utf-8-validate
-      - webpack-cli
-    dev: true
-
   /@angular-devkit/build-webpack/0.1502.5_s3sugpttl6jjqsvaz4l5e6h25m:
     resolution: {integrity: sha512-gPkAa4AvQ7BxU+jmVJqrAO18kw/6iks+VUQ+2BVPyHCdqhroANHYdGbZ/pFlZdPmZVzSpusjd6VIbLhbHr/Ohw==}
     engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -4057,8 +3854,8 @@ packages:
       source-map: 0.7.4
     dev: true
 
-  /@angular-devkit/core/15.0.5:
-    resolution: {integrity: sha512-SxLvbpqcQfb1qRykZjqRUG/8uC1FYpneyNV9S9YglXg4JhCFhfc9AnKxuu9Bm/O8V7FghOIlGWGglCdPHra0pw==}
+  /@angular-devkit/core/15.2.4_chokidar@3.5.3:
+    resolution: {integrity: sha512-yl+0j1bMwJLKShsyCXw77tbJG8Sd21+itisPLL2MgEpLNAO252kr9zG4TLlFRJyKVftm2l1h78KjqvM5nbOXNg==}
     engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     peerDependencies:
       chokidar: ^3.5.2
@@ -4066,15 +3863,16 @@ packages:
       chokidar:
         optional: true
     dependencies:
-      ajv: 8.11.0
-      ajv-formats: 2.1.1_ajv@8.11.0
+      ajv: 8.12.0
+      ajv-formats: 2.1.1_ajv@8.12.0
+      chokidar: 3.5.3
       jsonc-parser: 3.2.0
       rxjs: 6.6.7
       source-map: 0.7.4
     dev: true
 
-  /@angular-devkit/core/15.2.4_chokidar@3.5.3:
-    resolution: {integrity: sha512-yl+0j1bMwJLKShsyCXw77tbJG8Sd21+itisPLL2MgEpLNAO252kr9zG4TLlFRJyKVftm2l1h78KjqvM5nbOXNg==}
+  /@angular-devkit/core/15.2.5:
+    resolution: {integrity: sha512-ZfjEkAe2yYeekc3xjZ/U4pK9nb+w6BFwAEjou6mE8PWZH7iYskm0YCCXkmu+B+zViEcCLhAkJAxu9MwX4efd8g==}
     engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     peerDependencies:
       chokidar: ^3.5.2
@@ -4084,13 +3882,12 @@ packages:
     dependencies:
       ajv: 8.12.0
       ajv-formats: 2.1.1_ajv@8.12.0
-      chokidar: 3.5.3
       jsonc-parser: 3.2.0
       rxjs: 6.6.7
       source-map: 0.7.4
     dev: true
 
-  /@angular-devkit/core/15.2.5:
+  /@angular-devkit/core/15.2.5_chokidar@3.5.3:
     resolution: {integrity: sha512-ZfjEkAe2yYeekc3xjZ/U4pK9nb+w6BFwAEjou6mE8PWZH7iYskm0YCCXkmu+B+zViEcCLhAkJAxu9MwX4efd8g==}
     engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     peerDependencies:
@@ -4101,13 +3898,14 @@ packages:
     dependencies:
       ajv: 8.12.0
       ajv-formats: 2.1.1_ajv@8.12.0
+      chokidar: 3.5.3
       jsonc-parser: 3.2.0
       rxjs: 6.6.7
       source-map: 0.7.4
     dev: true
 
-  /@angular-devkit/core/15.2.5_chokidar@3.5.3:
-    resolution: {integrity: sha512-ZfjEkAe2yYeekc3xjZ/U4pK9nb+w6BFwAEjou6mE8PWZH7iYskm0YCCXkmu+B+zViEcCLhAkJAxu9MwX4efd8g==}
+  /@angular-devkit/core/15.2.6_chokidar@3.5.3:
+    resolution: {integrity: sha512-YVTWZ+M+xNKdFX4EnY9QX49PZraawiaA0iTd2CUW8ZoTUvU7yOGMKZLSdz6aokTMRVfm0449wt6YL994ibOo1g==}
     engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
     peerDependencies:
       chokidar: ^3.5.2
@@ -4138,6 +3936,21 @@ packages:
       - chokidar
     dev: true
 
+  /@angular-devkit/schematics-cli/15.2.6_chokidar@3.5.3:
+    resolution: {integrity: sha512-dkmJAvLmiXIX3uAY0a7GcnEvKNN/RKR5Q/ez4OQb+jaz+2/XbAiQVmTgZ5uwU2gYkFNLvG9ZCAaQdC4JJp9xaw==}
+    engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
+    hasBin: true
+    dependencies:
+      '@angular-devkit/core': 15.2.6_chokidar@3.5.3
+      '@angular-devkit/schematics': 15.2.6_chokidar@3.5.3
+      ansi-colors: 4.1.3
+      inquirer: 8.2.4
+      symbol-observable: 4.0.0
+      yargs-parser: 21.1.1
+    transitivePeerDependencies:
+      - chokidar
+    dev: true
+
   /@angular-devkit/schematics/11.2.4:
     resolution: {integrity: sha512-M9Ike1TYawOIHzenlZS1ufQbsS+Z11/doj5w/UrU0q2OEKc6U375t5qVGgKo3PLHHS8osb9aW9xYwBfVlKrryQ==}
     engines: {node: '>= 10.13.0', npm: ^6.11.0 || ^7.5.6, yarn: '>= 1.13.0'}
@@ -4173,19 +3986,6 @@ packages:
       - chokidar
     dev: true
 
-  /@angular-devkit/schematics/15.0.5:
-    resolution: {integrity: sha512-S3YN1Q/iOOXA9ipWbh+bDaTJwc0Wb0uPqSUJov+L/EojNi9xglY80bLwVdL2OHZV2e+62dhkvQ4REM3hZT2/Hg==}
-    engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
-    dependencies:
-      '@angular-devkit/core': 15.0.5
-      jsonc-parser: 3.2.0
-      magic-string: 0.26.7
-      ora: 5.4.1
-      rxjs: 6.6.7
-    transitivePeerDependencies:
-      - chokidar
-    dev: true
-
   /@angular-devkit/schematics/15.2.4_chokidar@3.5.3:
     resolution: {integrity: sha512-/W7/vvn59PAVLzhcvD4/N/E8RDhub8ny1A7I96LTRjC5o+yvVV16YJ4YJzolrRrIEN01KmLVQJ9A58VCaweMgw==}
     engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -4212,43 +4012,17 @@ packages:
       - chokidar
     dev: true
 
-  /@angular/animations/15.2.6_@angular+core@15.2.6:
-    resolution: {integrity: sha512-2fEhhj7xTzWHD61B502eXwDclsurkOK7CU+iRdl8EAtEobLRt62sG/XHmJ71UaaniWyI/H0sUSEJuF8TIPcaoQ==}
-    engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0}
-    peerDependencies:
-      '@angular/core': 15.2.6
-    dependencies:
-      '@angular/core': 15.2.6_rxjs@7.8.0+zone.js@0.12.0
-      tslib: 2.5.0
-    dev: false
-
-  /@angular/cli/15.0.5:
-    resolution: {integrity: sha512-bg0p29FPlg2g07GPkEEtqphErtNnZgiAy5R+4aTQlPt0Pl0hXIbGnl3HRBFXQkhPSdclKn9W5j69tOcDBNFBdg==}
+  /@angular-devkit/schematics/15.2.6_chokidar@3.5.3:
+    resolution: {integrity: sha512-f7VgnAcok7AwR/DhX0ZWskB0rFBo/KsvtIUA2qZSrpKMf8eFiwu03dv/b2mI0vnf+1FBfIQzJvO0ww45zRp6dA==}
     engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
-    hasBin: true
     dependencies:
-      '@angular-devkit/architect': 0.1500.5
-      '@angular-devkit/core': 15.0.5
-      '@angular-devkit/schematics': 15.0.5
-      '@schematics/angular': 15.0.5
-      '@yarnpkg/lockfile': 1.1.0
-      ansi-colors: 4.1.3
-      ini: 3.0.1
-      inquirer: 8.2.4
+      '@angular-devkit/core': 15.2.6_chokidar@3.5.3
       jsonc-parser: 3.2.0
-      npm-package-arg: 9.1.2
-      npm-pick-manifest: 8.0.1
-      open: 8.4.0
+      magic-string: 0.29.0
       ora: 5.4.1
-      pacote: 15.0.6
-      resolve: 1.22.1
-      semver: 7.3.8
-      symbol-observable: 4.0.0
-      yargs: 17.6.2
+      rxjs: 6.6.7
     transitivePeerDependencies:
-      - bluebird
       - chokidar
-      - supports-color
     dev: true
 
   /@angular/cli/15.2.5:
@@ -4339,34 +4113,6 @@ packages:
       tslib: 2.5.0
       zone.js: 0.12.0
 
-  /@angular/elements/15.2.6_w4ufewuad3bhaxmr6al3t3s3gm:
-    resolution: {integrity: sha512-qnpYYquiyOCsfaYS9UGDZjMkZxx3d7UCxNoZ/1EGnyIVy6sPw0yG4USPpwc39M8kUHPLd+qNGzh49HNdcgxcoQ==}
-    engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0}
-    peerDependencies:
-      '@angular/core': 15.2.6
-      rxjs: ^6.5.3 || ^7.4.0
-    dependencies:
-      '@angular/core': 15.2.6_rxjs@7.8.0+zone.js@0.12.0
-      rxjs: 7.8.0
-      tslib: 2.5.0
-    dev: false
-
-  /@angular/forms/15.2.6_wjwxqsfq4vao66eh754tffd4ce:
-    resolution: {integrity: sha512-SdZxsE9MUOVMz0FjOwtx1RN/SGpObnAyZBqXNrN0c4BmJg+faJzvKIBBN102CKpWZOGRoq2YYrgxow9StMhxTw==}
-    engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0}
-    peerDependencies:
-      '@angular/common': 15.2.6
-      '@angular/core': 15.2.6
-      '@angular/platform-browser': 15.2.6
-      rxjs: ^6.5.3 || ^7.4.0
-    dependencies:
-      '@angular/common': 15.2.6_w4ufewuad3bhaxmr6al3t3s3gm
-      '@angular/core': 15.2.6_rxjs@7.8.0+zone.js@0.12.0
-      '@angular/platform-browser': 15.2.6_feimaifsytcup65o755hc4dp7i
-      rxjs: 7.8.0
-      tslib: 2.5.0
-    dev: false
-
   /@angular/platform-browser-dynamic/15.2.6_n2pq7ehjjlbnmzq6nreqvmxwky:
     resolution: {integrity: sha512-ZSyiigpxBWIM5f8t/a28Y3BCzHn1FtI2KsJysE7di5UUflOzwbxbfycVlpiZp0girbDYRyF18vvefvitNh17Gw==}
     engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0}
@@ -4379,24 +4125,7 @@ packages:
       '@angular/common': 15.2.6_w4ufewuad3bhaxmr6al3t3s3gm
       '@angular/compiler': 15.2.6_@angular+core@15.2.6
       '@angular/core': 15.2.6_rxjs@7.8.0+zone.js@0.12.0
-      '@angular/platform-browser': 15.2.6_feimaifsytcup65o755hc4dp7i
-      tslib: 2.5.0
-    dev: false
-
-  /@angular/platform-browser/15.2.6_feimaifsytcup65o755hc4dp7i:
-    resolution: {integrity: sha512-8afckDEWfYf+cyxs2SboZBJkiCwFgYE8IH24RUW1t3zLC+wfrTr7UEfrCoD4YJRVJdqnPoRWN5gjz98n3n4zsA==}
-    engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0}
-    peerDependencies:
-      '@angular/animations': 15.2.6
-      '@angular/common': 15.2.6
-      '@angular/core': 15.2.6
-    peerDependenciesMeta:
-      '@angular/animations':
-        optional: true
-    dependencies:
-      '@angular/animations': 15.2.6_@angular+core@15.2.6
-      '@angular/common': 15.2.6_w4ufewuad3bhaxmr6al3t3s3gm
-      '@angular/core': 15.2.6_rxjs@7.8.0+zone.js@0.12.0
+      '@angular/platform-browser': 15.2.6_xspguhg7zqj5ayvnxqasw2epk4
       tslib: 2.5.0
     dev: false
 
@@ -4416,22 +4145,6 @@ packages:
       tslib: 2.5.0
     dev: false
 
-  /@angular/router/15.2.6_wjwxqsfq4vao66eh754tffd4ce:
-    resolution: {integrity: sha512-yB9uc9Xi9N0dErsugleywBA1KYG+GQ9WWSlri34oe2VsCqZazImn71n4wKPtrm2Xiy/mI23wJcr+jiCAtzp49Q==}
-    engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0}
-    peerDependencies:
-      '@angular/common': 15.2.6
-      '@angular/core': 15.2.6
-      '@angular/platform-browser': 15.2.6
-      rxjs: ^6.5.3 || ^7.4.0
-    dependencies:
-      '@angular/common': 15.2.6_w4ufewuad3bhaxmr6al3t3s3gm
-      '@angular/core': 15.2.6_rxjs@7.8.0+zone.js@0.12.0
-      '@angular/platform-browser': 15.2.6_feimaifsytcup65o755hc4dp7i
-      rxjs: 7.8.0
-      tslib: 2.5.0
-    dev: false
-
   /@ant-design/colors/6.0.0:
     resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==}
     dependencies:
@@ -6543,7 +6256,7 @@ packages:
     dependencies:
       '@ampproject/remapping': 2.2.0
       '@babel/code-frame': 7.21.4
-      '@babel/generator': 7.20.14
+      '@babel/generator': 7.21.4
       '@babel/helper-compilation-targets': 7.21.4_@babel+core@7.20.12
       '@babel/helper-module-transforms': 7.21.2
       '@babel/helpers': 7.21.0
@@ -8912,13 +8625,13 @@ packages:
       - '@swc/wasm'
     dev: true
 
-  /@commitlint/cli/17.5.1_@swc+core@1.3.49:
-    resolution: {integrity: sha512-pRRgGSzdHQHehxZbGA3qF6wVPyl+EEQgTe/t321rtMLFbuJ7nRj2waS17s/v5oEbyZtiY5S8PGB6XtEIm0I+Sg==}
+  /@commitlint/cli/17.6.1_@swc+core@1.3.49:
+    resolution: {integrity: sha512-kCnDD9LE2ySiTnj/VPaxy4/oRayRcdv4aCuVxtoum8SxIU7OADHc0nJPQfheE8bHcs3zZdWzDMWltRosuT13bg==}
     engines: {node: '>=v14'}
     hasBin: true
     dependencies:
       '@commitlint/format': 17.4.4
-      '@commitlint/lint': 17.4.4
+      '@commitlint/lint': 17.6.1
       '@commitlint/load': 17.5.0_@swc+core@1.3.49
       '@commitlint/read': 17.5.1
       '@commitlint/types': 17.4.4
@@ -8951,6 +8664,13 @@ packages:
       conventional-changelog-conventionalcommits: 5.0.0
     dev: true
 
+  /@commitlint/config-conventional/17.6.1:
+    resolution: {integrity: sha512-ng/ybaSLuTCH9F+7uavSOnEQ9EFMl7lHEjfAEgRh1hwmEe8SpLKpQeMo2aT1IWvHaGMuTb+gjfbzoRf2IR23NQ==}
+    engines: {node: '>=v14'}
+    dependencies:
+      conventional-changelog-conventionalcommits: 5.0.0
+    dev: true
+
   /@commitlint/config-validator/17.4.4:
     resolution: {integrity: sha512-bi0+TstqMiqoBAQDvdEP4AFh0GaKyLFlPPEObgI29utoKEYoPQTvF0EYqIwYYLEoJYhj5GfMIhPHJkTJhagfeg==}
     engines: {node: '>=v14'}
@@ -9002,6 +8722,16 @@ packages:
       '@commitlint/types': 17.4.4
     dev: true
 
+  /@commitlint/lint/17.6.1:
+    resolution: {integrity: sha512-VARJ9kxH64isgwVnC+ABPafCYzqxpsWJIpDaTuI0gh8aX4GQ0i7cn9tvxtFNfJj4ER2BAJeWJ0vURdNYjK2RQQ==}
+    engines: {node: '>=v14'}
+    dependencies:
+      '@commitlint/is-ignored': 17.4.4
+      '@commitlint/parse': 17.4.4
+      '@commitlint/rules': 17.6.1
+      '@commitlint/types': 17.4.4
+    dev: true
+
   /@commitlint/load/17.5.0:
     resolution: {integrity: sha512-l+4W8Sx4CD5rYFsrhHH8HP01/8jEP7kKf33Xlx2Uk2out/UKoKPYMOIRcDH5ppT8UXLMV+x6Wm5osdRKKgaD1Q==}
     engines: {node: '>=v14'}
@@ -9098,6 +8828,17 @@ packages:
       execa: 5.1.1
     dev: true
 
+  /@commitlint/rules/17.6.1:
+    resolution: {integrity: sha512-lUdHw6lYQ1RywExXDdLOKxhpp6857/4c95Dc/1BikrHgdysVUXz26yV0vp1GL7Gv+avx9WqZWTIVB7pNouxlfw==}
+    engines: {node: '>=v14'}
+    dependencies:
+      '@commitlint/ensure': 17.4.4
+      '@commitlint/message': 17.4.2
+      '@commitlint/to-lines': 17.4.0
+      '@commitlint/types': 17.4.4
+      execa: 5.1.1
+    dev: true
+
   /@commitlint/to-lines/17.4.0:
     resolution: {integrity: sha512-LcIy/6ZZolsfwDUWfN1mJ+co09soSuNASfKEU5sCmgFCvX5iHwRYLiIuoqXzOVDYOy7E7IcHilr/KS0e5T+0Hg==}
     engines: {node: '>=v14'}
@@ -9845,7 +9586,7 @@ packages:
       find-up: 6.3.0
       fs-extra: 9.1.0
       html-webpack-plugin-4: /html-webpack-plugin/4.5.2_webpack@5.78.0
-      html-webpack-plugin-5: /html-webpack-plugin/5.5.0_webpack@5.78.0
+      html-webpack-plugin-5: /html-webpack-plugin/5.5.1_webpack@5.78.0
       local-pkg: 0.4.1
       speed-measure-webpack-plugin: 1.4.2_webpack@5.78.0
       tslib: 2.5.0
@@ -10202,7 +9943,7 @@ packages:
       '@docusaurus/utils': 2.3.1_@docusaurus+types@2.3.1
       '@mdx-js/mdx': 1.6.22
       escape-html: 1.0.3
-      file-loader: 6.2.0_webpack@5.78.0
+      file-loader: 6.2.0_webpack@5.79.0
       fs-extra: 10.1.0
       image-size: 1.0.2
       mdast-util-to-string: 2.0.0
@@ -10213,8 +9954,8 @@ packages:
       tslib: 2.5.0
       unified: 9.2.2
       unist-util-visit: 2.0.3
-      url-loader: 4.1.1_kl4i6u7bs444epxeue2qtwootq
-      webpack: 5.78.0
+      url-loader: 4.1.1_7f53fl25ml2r3kp2h6jbsgu5ji
+      webpack: 5.79.0
     transitivePeerDependencies:
       - '@docusaurus/types'
       - '@swc/core'
@@ -10237,7 +9978,7 @@ packages:
       '@docusaurus/utils': 2.3.1
       '@mdx-js/mdx': 1.6.22
       escape-html: 1.0.3
-      file-loader: 6.2.0_webpack@5.78.0
+      file-loader: 6.2.0_webpack@5.79.0
       fs-extra: 10.1.0
       image-size: 1.0.2
       mdast-util-to-string: 2.0.0
@@ -10248,8 +9989,8 @@ packages:
       tslib: 2.5.0
       unified: 9.2.2
       unist-util-visit: 2.0.3
-      url-loader: 4.1.1_kl4i6u7bs444epxeue2qtwootq
-      webpack: 5.78.0
+      url-loader: 4.1.1_7f53fl25ml2r3kp2h6jbsgu5ji
+      webpack: 5.79.0
     transitivePeerDependencies:
       - '@docusaurus/types'
       - '@swc/core'
@@ -10632,7 +10373,7 @@ packages:
     peerDependencies:
       react: '*'
     dependencies:
-      '@types/react': 17.0.56
+      '@types/react': 17.0.58
       prop-types: 15.8.1
       react: 17.0.2
 
@@ -10843,7 +10584,7 @@ packages:
       react-dom: ^16.8.4 || ^17.0.0
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 17.0.56
+      '@types/react': 17.0.58
       commander: 5.1.0
       joi: 17.9.1
       react: 17.0.2
@@ -10931,7 +10672,7 @@ packages:
       '@docusaurus/logger': 2.3.1
       '@svgr/webpack': 6.5.1
       escape-string-regexp: 4.0.0
-      file-loader: 6.2.0_webpack@5.78.0
+      file-loader: 6.2.0_webpack@5.79.0
       fs-extra: 10.1.0
       github-slugger: 1.5.0
       globby: 11.1.0
@@ -10942,8 +10683,8 @@ packages:
       resolve-pathname: 3.0.0
       shelljs: 0.8.5
       tslib: 2.5.0
-      url-loader: 4.1.1_kl4i6u7bs444epxeue2qtwootq
-      webpack: 5.78.0
+      url-loader: 4.1.1_7f53fl25ml2r3kp2h6jbsgu5ji
+      webpack: 5.79.0
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -10965,7 +10706,7 @@ packages:
       '@docusaurus/types': 2.3.1_sfoxds7t5ydpegc3knd667wn6m
       '@svgr/webpack': 6.5.1
       escape-string-regexp: 4.0.0
-      file-loader: 6.2.0_webpack@5.78.0
+      file-loader: 6.2.0_webpack@5.79.0
       fs-extra: 10.1.0
       github-slugger: 1.5.0
       globby: 11.1.0
@@ -10976,8 +10717,8 @@ packages:
       resolve-pathname: 3.0.0
       shelljs: 0.8.5
       tslib: 2.5.0
-      url-loader: 4.1.1_kl4i6u7bs444epxeue2qtwootq
-      webpack: 5.78.0
+      url-loader: 4.1.1_7f53fl25ml2r3kp2h6jbsgu5ji
+      webpack: 5.79.0
     transitivePeerDependencies:
       - '@swc/core'
       - esbuild
@@ -11067,7 +10808,7 @@ packages:
   /@emotion/memoize/0.8.0:
     resolution: {integrity: sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA==}
 
-  /@emotion/react/11.10.6_bbbkigweufcoxic5hihvd5mfx4:
+  /@emotion/react/11.10.6_c3qmy7gv5lbarsbv5sa5jz2oke:
     resolution: {integrity: sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==}
     peerDependencies:
       '@types/react': '*'
@@ -11083,7 +10824,7 @@ packages:
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.0_react@17.0.2
       '@emotion/utils': 1.2.0
       '@emotion/weak-memoize': 0.3.0
-      '@types/react': 17.0.56
+      '@types/react': 17.0.58
       hoist-non-react-statics: 3.3.2
       react: 17.0.2
     dev: false
@@ -11109,7 +10850,7 @@ packages:
       react: 17.0.2
     dev: false
 
-  /@emotion/react/11.7.1_qcpvwocfi3lltefocofjqfpaqy:
+  /@emotion/react/11.7.1_fbnpe6o62l34toexujf6lsy3la:
     resolution: {integrity: sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==}
     peerDependencies:
       '@babel/core': ^7.0.0
@@ -11128,7 +10869,7 @@ packages:
       '@emotion/sheet': 1.2.1
       '@emotion/utils': 1.0.0
       '@emotion/weak-memoize': 0.2.5
-      '@types/react': 17.0.56
+      '@types/react': 17.0.58
       hoist-non-react-statics: 3.3.2
       react: 17.0.2
     dev: false
@@ -11156,7 +10897,7 @@ packages:
     resolution: {integrity: sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA==}
     dev: false
 
-  /@emotion/styled/11.10.6_4md3srvjbnvrxpmap42wvfj5zq:
+  /@emotion/styled/11.10.6_7hisdke2c3hq4r3q5z4dcdhmzi:
     resolution: {integrity: sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==}
     peerDependencies:
       '@emotion/react': ^11.0.0-rc.0
@@ -11169,15 +10910,15 @@ packages:
       '@babel/runtime': 7.21.0
       '@emotion/babel-plugin': 11.10.6
       '@emotion/is-prop-valid': 1.2.0
-      '@emotion/react': 11.10.6_bbbkigweufcoxic5hihvd5mfx4
+      '@emotion/react': 11.10.6_h7fc2el62uaa77gho3xhys6ola
       '@emotion/serialize': 1.1.1
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.0_react@17.0.2
       '@emotion/utils': 1.2.0
-      '@types/react': 17.0.56
+      '@types/react': 17.0.53
       react: 17.0.2
     dev: false
 
-  /@emotion/styled/11.10.6_7hisdke2c3hq4r3q5z4dcdhmzi:
+  /@emotion/styled/11.10.6_nkylnud3pypzhz7cu2nz4io324:
     resolution: {integrity: sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==}
     peerDependencies:
       '@emotion/react': ^11.0.0-rc.0
@@ -11190,11 +10931,11 @@ packages:
       '@babel/runtime': 7.21.0
       '@emotion/babel-plugin': 11.10.6
       '@emotion/is-prop-valid': 1.2.0
-      '@emotion/react': 11.10.6_h7fc2el62uaa77gho3xhys6ola
+      '@emotion/react': 11.10.6_c3qmy7gv5lbarsbv5sa5jz2oke
       '@emotion/serialize': 1.1.1
       '@emotion/use-insertion-effect-with-fallbacks': 1.0.0_react@17.0.2
       '@emotion/utils': 1.2.0
-      '@types/react': 17.0.53
+      '@types/react': 17.0.58
       react: 17.0.2
     dev: false
 
@@ -11247,15 +10988,6 @@ packages:
       - typescript
     dev: true
 
-  /@esbuild/android-arm/0.15.18:
-    resolution: {integrity: sha512-5GT+kcs2WVGjVs7+boataCkO5Fg0y4kCjzkB5bAip7H4jfnOS3dA6KPiww9W1OEKTKeAcUVhdZGvgI65OXmUnw==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/android-arm/0.17.16:
     resolution: {integrity: sha512-baLqRpLe4JnKrUXLJChoTN0iXZH7El/mu58GE3WIA6/H834k0XWvLRmGLG8y8arTRS9hJJibPnF0tiGhmWeZgw==}
     engines: {node: '>=12'}
@@ -11436,15 +11168,6 @@ packages:
     dev: true
     optional: true
 
-  /@esbuild/linux-loong64/0.15.18:
-    resolution: {integrity: sha512-L4jVKS82XVhw2nvzLg/19ClLWg0y27ulRwuP7lcyL6AbUWB5aPglXY3M21mauDQMDfRLs8cQmeT03r/+X3cZYQ==}
-    engines: {node: '>=12'}
-    cpu: [loong64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /@esbuild/linux-loong64/0.17.16:
     resolution: {integrity: sha512-TIZTRojVBBzdgChY3UOG7BlPhqJz08AL7jdgeeu+kiObWMFzGnQD7BgBBkWRwOtKR1i2TNlO7YK6m4zxVjjPRQ==}
     engines: {node: '>=12'}
@@ -13463,7 +13186,7 @@ packages:
       - debug
     dev: false
 
-  /@mantine/core/4.2.12_clvscqj43uvazycvccqnsqoqou:
+  /@mantine/core/4.2.12_serzhkp6rlv2ugcs7hkl6ylyt4:
     resolution: {integrity: sha512-PZcVUvcSZiZmLR1moKBJFdFIh6a4C+TE2ao91kzTAlH5Qb8t/V3ONbfPk3swHoYr7OSLJQM8vZ7UD5sFDiq0/g==}
     peerDependencies:
       '@mantine/hooks': 4.2.12
@@ -13471,13 +13194,13 @@ packages:
       react-dom: '>=16.8.0'
     dependencies:
       '@mantine/hooks': 4.2.12_react@17.0.2
-      '@mantine/styles': 4.2.12_52ofnbxin4y3b5q7hklpvs2bkm
+      '@mantine/styles': 4.2.12_p7oqq22gj7kbhkzv5mt3z3h4pe
       '@popperjs/core': 2.11.7
       '@radix-ui/react-scroll-area': 0.1.4_react@17.0.2
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
       react-popper: 2.3.0_qtrwknhowezr6dh25s26nfknpa
-      react-textarea-autosize: 8.4.1_bbbkigweufcoxic5hihvd5mfx4
+      react-textarea-autosize: 8.4.1_c3qmy7gv5lbarsbv5sa5jz2oke
     transitivePeerDependencies:
       - '@babel/core'
       - '@types/react'
@@ -13592,14 +13315,14 @@ packages:
       react-dom: 17.0.2_react@17.0.2
     dev: false
 
-  /@mantine/styles/4.2.12_52ofnbxin4y3b5q7hklpvs2bkm:
+  /@mantine/styles/4.2.12_p7oqq22gj7kbhkzv5mt3z3h4pe:
     resolution: {integrity: sha512-9q1DzW0UNW/ORMGLHfN2XABOSEm0ZQebhNlLD757R6OQouoLuUf9elUwgGOXSyogMlsAYoy84XbJ3ZbbTm4YCA==}
     peerDependencies:
       react: '>=16.8.0'
       react-dom: '>=16.8.0'
     dependencies:
       '@emotion/cache': 11.7.1
-      '@emotion/react': 11.7.1_qcpvwocfi3lltefocofjqfpaqy
+      '@emotion/react': 11.7.1_fbnpe6o62l34toexujf6lsy3la
       '@emotion/serialize': 1.0.2
       '@emotion/utils': 1.0.0
       clsx: 1.2.1
@@ -13804,6 +13527,40 @@ packages:
       - webpack-cli
     dev: true
 
+  /@nestjs/cli/9.4.0:
+    resolution: {integrity: sha512-mATM41qS/YYzYbpAeyWnrhtfmIevmlBvvppP5h0i1w0uRWewRbtOZ+Ow8MmcvrfdnYGHMjLmhMjReV77YXBa8w==}
+    engines: {node: '>= 12.9.0'}
+    hasBin: true
+    dependencies:
+      '@angular-devkit/core': 15.2.6_chokidar@3.5.3
+      '@angular-devkit/schematics': 15.2.6_chokidar@3.5.3
+      '@angular-devkit/schematics-cli': 15.2.6_chokidar@3.5.3
+      '@nestjs/schematics': 9.0.4_n7i3t5jmyrdrkypb5pvfihcmg4
+      chalk: 4.1.2
+      chokidar: 3.5.3
+      cli-table3: 0.6.3
+      commander: 4.1.1
+      fork-ts-checker-webpack-plugin: 8.0.0_odl7p537j6zjcy4b5gf5bruiye
+      inquirer: 8.2.5
+      node-emoji: 1.11.0
+      ora: 5.4.1
+      os-name: 4.0.1
+      rimraf: 4.4.1
+      shelljs: 0.8.5
+      source-map-support: 0.5.21
+      tree-kill: 1.2.2
+      tsconfig-paths: 4.2.0
+      tsconfig-paths-webpack-plugin: 4.0.1
+      typescript: 4.9.5
+      webpack: 5.79.0
+      webpack-node-externals: 3.0.0
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+      - webpack-cli
+    dev: true
+
   /@nestjs/common/8.4.7_mnr6j2del53muneqly5h4y27ai:
     resolution: {integrity: sha512-m/YsbcBal+gA5CFrDpqXqsSfylo+DIQrkFY3qhVIltsYRfu8ct8J9pqsTO6OPf3mvqdOpFGrV5sBjoyAzOBvsw==}
     peerDependencies:
@@ -14028,8 +13785,8 @@ packages:
     transitivePeerDependencies:
       - encoding
 
-  /@nestjs/graphql/10.2.0_vgnnqnzg3rzr5actpo4ly2om2q:
-    resolution: {integrity: sha512-N/sca0eZLJIyyvfusZh1eabGnKBYgQ4LmOCvhI7+oDMiWWK4HOhOEeT5MC11bmd0vq850frWW9qqg+3qRKpiXw==}
+  /@nestjs/graphql/10.2.1_vgnnqnzg3rzr5actpo4ly2om2q:
+    resolution: {integrity: sha512-FBzYTymT4oopiGMpej7GTRyhz1BgJxLlXZPUueamC5J9u1WxCwJyETkzBI/zeUkUydlklF/xd5zDd/Md6//hEw==}
     peerDependencies:
       '@apollo/subgraph': ^0.1.5 || ^0.3.0 || ^0.4.0 || ^2.0.0
       '@nestjs/common': ^8.2.3 || ^9.0.0
@@ -16669,17 +16426,6 @@ packages:
       - zenObservable
     dev: true
 
-  /@schematics/angular/15.0.5:
-    resolution: {integrity: sha512-lmns1eJM42RFlv1GPrNwe7TV70hyrIiadyPhuJmeT8qp8cxGPRJ3yHFUdtB7qPv0OkwfI/HVSeZwlnfNXQhiQg==}
-    engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
-    dependencies:
-      '@angular-devkit/core': 15.0.5
-      '@angular-devkit/schematics': 15.0.5
-      jsonc-parser: 3.2.0
-    transitivePeerDependencies:
-      - chokidar
-    dev: true
-
   /@schematics/angular/15.2.5:
     resolution: {integrity: sha512-YN0A5bzuqEmLdwbcQRop9TFj0QVxTC/XCL0K5DfDymVBS2j09NMyLLVc6TDOs+J/fMQr5EwiT149ikzqiUmAcw==}
     engines: {node: ^14.20.0 || ^16.13.0 || >=18.10.0, npm: ^6.11.0 || ^7.5.6 || >=8.0.0, yarn: '>= 1.13.0'}
@@ -18362,7 +18108,7 @@ packages:
       - webpack-cli
       - webpack-command
 
-  /@storybook/addon-docs/6.5.16_outqpwizk435lelksta7c4m7oy:
+  /@storybook/addon-docs/6.5.16_rqvycfim4sret6kj7nljovvfni:
     resolution: {integrity: sha512-QM9WDZG9P02UvbzLu947a8ZngOrQeAKAT8jCibQFM/+RJ39xBlfm8rm+cQy3dm94wgtjmVkA3mKGOV/yrrsddg==}
     peerDependencies:
       '@storybook/mdx2-csf': ^0.0.3
@@ -18394,7 +18140,7 @@ packages:
       '@storybook/source-loader': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/store': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/theming': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
-      babel-loader: 8.3.0_2bpkfvz2mezbew2j5yjox7n6pu
+      babel-loader: 8.3.0_c3tfwv7p35clwcmkb5fnkshzei
       core-js: 3.30.0
       fast-deep-equal: 3.1.3
       global: 4.4.0
@@ -18417,7 +18163,7 @@ packages:
       - webpack-command
     dev: true
 
-  /@storybook/addon-essentials/6.5.16_7cbljjecgmz5gyvfn55htlglki:
+  /@storybook/addon-essentials/6.5.16_atn4ds7ohuzoq35qlxi62v3fte:
     resolution: {integrity: sha512-TeoMr6tEit4Pe91GH6f8g/oar1P4M0JL9S6oMcFxxrhhtOGO7XkWD5EnfyCx272Ok2VYfE58FNBTGPNBVIqYKQ==}
     peerDependencies:
       '@babel/core': ^7.9.6
@@ -18477,16 +18223,15 @@ packages:
       '@babel/core': 7.21.4
       '@storybook/addon-actions': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/addon-backgrounds': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
-      '@storybook/addon-controls': 6.5.16_jgxnvbe4faw3ohf4h6p42qq6oy
-      '@storybook/addon-docs': 6.5.16_outqpwizk435lelksta7c4m7oy
+      '@storybook/addon-controls': 6.5.16_b5rg7xudo7yixsr5ibr7bsbvda
+      '@storybook/addon-docs': 6.5.16_atn4ds7ohuzoq35qlxi62v3fte
       '@storybook/addon-measure': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/addon-outline': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/addon-toolbars': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/addon-viewport': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/addons': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/api': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
-      '@storybook/builder-webpack5': 6.5.16_jgxnvbe4faw3ohf4h6p42qq6oy
-      '@storybook/core-common': 6.5.16_jgxnvbe4faw3ohf4h6p42qq6oy
+      '@storybook/core-common': 6.5.16_b5rg7xudo7yixsr5ibr7bsbvda
       '@storybook/node-logger': 6.5.16
       core-js: 3.30.0
       react: 17.0.2
@@ -18504,7 +18249,7 @@ packages:
       - webpack-command
     dev: true
 
-  /@storybook/addon-essentials/6.5.16_atn4ds7ohuzoq35qlxi62v3fte:
+  /@storybook/addon-essentials/6.5.16_pvger3gswq3qo4smcgtrspxbla:
     resolution: {integrity: sha512-TeoMr6tEit4Pe91GH6f8g/oar1P4M0JL9S6oMcFxxrhhtOGO7XkWD5EnfyCx272Ok2VYfE58FNBTGPNBVIqYKQ==}
     peerDependencies:
       '@babel/core': ^7.9.6
@@ -18564,22 +18309,23 @@ packages:
       '@babel/core': 7.21.4
       '@storybook/addon-actions': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/addon-backgrounds': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
-      '@storybook/addon-controls': 6.5.16_b5rg7xudo7yixsr5ibr7bsbvda
-      '@storybook/addon-docs': 6.5.16_atn4ds7ohuzoq35qlxi62v3fte
+      '@storybook/addon-controls': 6.5.16_jgxnvbe4faw3ohf4h6p42qq6oy
+      '@storybook/addon-docs': 6.5.16_rqvycfim4sret6kj7nljovvfni
       '@storybook/addon-measure': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/addon-outline': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/addon-toolbars': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/addon-viewport': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/addons': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
       '@storybook/api': 6.5.16_sfoxds7t5ydpegc3knd667wn6m
-      '@storybook/core-common': 6.5.16_b5rg7xudo7yixsr5ibr7bsbvda
+      '@storybook/builder-webpack5': 6.5.16_jgxnvbe4faw3ohf4h6p42qq6oy
+      '@storybook/core-common': 6.5.16_jgxnvbe4faw3ohf4h6p42qq6oy
       '@storybook/node-logger': 6.5.16
       core-js: 3.30.0
       react: 17.0.2
       react-dom: 17.0.2_react@17.0.2
       regenerator-runtime: 0.13.11
       ts-dedent: 2.2.0
-      webpack: 5.78.0
+      webpack: 5.79.0
     transitivePeerDependencies:
       - '@storybook/mdx2-csf'
       - eslint
@@ -18971,7 +18717,7 @@ packages:
       fork-ts-checker-webpack-plugin: 6.5.3_fejcc7gjbwtmwzggoernzojija
       glob: 7.2.3
       glob-promise: 3.4.0_glob@7.2.3
-      html-webpack-plugin: 5.5.0_webpack@5.78.0
+      html-webpack-plugin: 5.5.1_webpack@5.78.0
       path-browserify: 1.0.1
       process: 0.11.10
       react: 17.0.2
@@ -19776,7 +19522,7 @@ packages:
       express: 4.18.2
       find-up: 5.0.0
       fs-extra: 9.1.0
-      html-webpack-plugin: 5.5.0_webpack@5.78.0
+      html-webpack-plugin: 5.5.1_webpack@5.78.0
       node-fetch: 2.6.9
       process: 0.11.10
       react: 17.0.2
@@ -20912,8 +20658,8 @@ packages:
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
 
-  /@tsconfig/docusaurus/1.0.6:
-    resolution: {integrity: sha512-1QxDaP54hpzM6bq9E+yFEo4F9WbWHhsDe4vktZXF/iDlc9FqGr9qlg+3X/nuKQXx8QxHV7ue8NXFazzajsxFBA==}
+  /@tsconfig/docusaurus/1.0.7:
+    resolution: {integrity: sha512-ffTXxGIP/IRMCjuzHd6M4/HdIrw1bMfC7Bv8hMkTadnePkpe0lG0oDSdbRpSDZb2rQMAgpbWiR10BvxvNYwYrg==}
     dev: true
 
   /@tsconfig/node10/1.0.9:
@@ -20986,7 +20732,7 @@ packages:
     resolution: {integrity: sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==}
     dependencies:
       '@types/connect': 3.4.35
-      '@types/node': 12.20.55
+      '@types/node': 14.18.42
 
   /@types/bonjour/3.5.10:
     resolution: {integrity: sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==}
@@ -21253,7 +20999,7 @@ packages:
   /@types/express-serve-static-core/4.17.33:
     resolution: {integrity: sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==}
     dependencies:
-      '@types/node': 12.20.55
+      '@types/node': 14.18.42
       '@types/qs': 6.9.7
       '@types/range-parser': 1.2.4
 
@@ -21327,7 +21073,7 @@ packages:
     resolution: {integrity: sha512-zJbJ3FVE17CNl5KXzdeSPtdltc4tMT3TzC6fxQS0sQngkbFZ6h+0uTafsRqu+eSLIugf6Yb0Ea0SUuRr42Nk9g==}
     deprecated: This is a stub types definition. ioredis provides its own type definitions, so you do not need this installed.
     dependencies:
-      ioredis: 5.3.1
+      ioredis: 5.3.2
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -21498,10 +21244,6 @@ packages:
     resolution: {integrity: sha512-QB5D2sqfSjCmTuWcBWyJ+/44bcjO7VbjSbOE0ucoVbAsSNQc4Lt6QkgkVXkTDwkL4z/beecZNDvVX15D4P8Jbw==}
     dev: true
 
-  /@types/node/16.18.23:
-    resolution: {integrity: sha512-XAMpaw1s1+6zM+jn2tmw8MyaRDIJfXxqmIQIS0HfoGYPuf7dUWeiUKopwq13KFX9lEp1+THGtlaaYx39Nxr58g==}
-    dev: true
-
   /@types/node/17.0.45:
     resolution: {integrity: sha512-w+tIMs3rq2afQdsPJlODhoUEKzFP1ayaoyl1CcnwtIlsVe7K7bA1NGm4s3PraqTLlXnbIN84zuBlxBWo1u9BLw==}
 
@@ -21603,7 +21345,7 @@ packages:
     resolution: {integrity: sha512-pFFVXUIydHlcJP6wJm7sDii5mD/bCmmAY0wQzq+M+uX7bqS95AQqHZWP1iNMKrWVQSuHIzj5qi9BvrtLX2/T4w==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 17.0.56
+      '@types/react': 17.0.58
       '@types/react-router': 5.1.20
 
   /@types/react-router-dom/5.3.3:
@@ -21617,7 +21359,7 @@ packages:
     resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 17.0.56
+      '@types/react': 17.0.58
 
   /@types/react-table/7.7.14:
     resolution: {integrity: sha512-TYrv7onCiakaG1uAu/UpQ9FojNEt/4/ht87EgJQaEGFoWV606ZLWUZAcUHzMxgc3v1mywP1cDyz3qB4ho3hWOw==}
@@ -21639,6 +21381,13 @@ packages:
       '@types/scheduler': 0.16.3
       csstype: 3.1.2
 
+  /@types/react/17.0.58:
+    resolution: {integrity: sha512-c1GzVY97P0fGxwGxhYq989j4XwlcHQoto6wQISOC2v6wm3h0PORRWJFHlkRjfGsiG3y1609WdQ+J+tKxvrEd6A==}
+    dependencies:
+      '@types/prop-types': 15.7.5
+      '@types/scheduler': 0.16.3
+      csstype: 3.1.2
+
   /@types/redis/2.8.32:
     resolution: {integrity: sha512-7jkMKxcGq9p242exlbsVzuJb57KqHRhNl4dHoQu2Y5v9bCAbtIXXH0R3HleSQW4CTOqpHIYUW3t6tpUj4BVQ+w==}
     dependencies:
@@ -21709,7 +21458,7 @@ packages:
     resolution: {integrity: sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==}
     dependencies:
       '@types/mime': 3.0.1
-      '@types/node': 12.20.55
+      '@types/node': 14.18.42
 
   /@types/sinon/9.0.11:
     resolution: {integrity: sha512-PwP4UY33SeeVKodNE37ZlOsR9cReypbMJOhZ7BVE0lB+Hix3efCOxiJWiE5Ia+yL9Cn2Ch72EjFTRze8RZsNtg==}
@@ -22208,22 +21957,6 @@ packages:
     resolution: {integrity: sha512-sL/cEvJWAnClXw0wHk85/2L0G6Sj8UB0Ctc1TEMbKSsmpRosqhwj9gWgFRZSrBr2f9tiXISwNhCPmlfqUqyb9Q==}
     dev: true
 
-  /@vitejs/plugin-vue-jsx/2.1.1_vite@3.2.5+vue@3.2.47:
-    resolution: {integrity: sha512-JgDhxstQlwnHBvZ1BSnU5mbmyQ14/t5JhREc6YH5kWyu2QdAAOsLF6xgHoIWarj8tddaiwFrNzLbWJPudpXKYA==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^3.0.0
-      vue: ^3.0.0
-    dependencies:
-      '@babel/core': 7.21.4
-      '@babel/plugin-transform-typescript': 7.21.3_@babel+core@7.21.4
-      '@vue/babel-plugin-jsx': 1.1.1_@babel+core@7.21.4
-      vite: 3.2.5_@types+node@16.18.23
-      vue: 3.2.47
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@vitejs/plugin-vue-jsx/3.0.1_vite@4.2.1+vue@3.2.47:
     resolution: {integrity: sha512-+Jb7ggL48FSPS1uhPnJbJwWa9Sr90vQ+d0InW+AhBM22n+cfuYqJZDckBc+W3QSHe1WDvewMZfa4wZOtk5pRgw==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -22240,17 +21973,6 @@ packages:
       - supports-color
     dev: true
 
-  /@vitejs/plugin-vue/3.2.0_vite@3.2.5+vue@3.2.47:
-    resolution: {integrity: sha512-E0tnaL4fr+qkdCNxJ+Xd0yM31UwMkQje76fsDVBBUCoGOUPexu2VDUYHL8P4CwV+zMvWw6nlRw19OnRKmYAJpw==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    peerDependencies:
-      vite: ^3.0.0
-      vue: ^3.2.25
-    dependencies:
-      vite: 3.2.5_@types+node@16.18.23
-      vue: 3.2.47
-    dev: true
-
   /@vitejs/plugin-vue/4.1.0_vite@4.2.1+vue@3.2.47:
     resolution: {integrity: sha512-++9JOAFdcXI3lyer9UKUV4rfoQ3T1RN8yDqoCLar86s0xQct5yblxAE+yWgRnU5/0FOlVCpTZpYSBV/bGWrSrQ==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -22437,17 +22159,6 @@ packages:
   /@vue/shared/3.2.47:
     resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==}
 
-  /@vue/tsconfig/0.1.3_@types+node@16.18.23:
-    resolution: {integrity: sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==}
-    peerDependencies:
-      '@types/node': '*'
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-    dependencies:
-      '@types/node': 16.18.23
-    dev: true
-
   /@vue/tsconfig/0.1.3_@types+node@18.15.11:
     resolution: {integrity: sha512-kQVsh8yyWPvHpb8gIc9l/HIDiiVUy1amynLNpCy8p+FoCiZXCo6fQos5/097MmnNZc9AtseDsCrfkhqCrJ8Olg==}
     peerDependencies:
@@ -23931,6 +23642,21 @@ packages:
       schema-utils: 2.7.1
       webpack: 5.78.0
 
+  /babel-loader/8.3.0_c3tfwv7p35clwcmkb5fnkshzei:
+    resolution: {integrity: sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==}
+    engines: {node: '>= 8.9'}
+    peerDependencies:
+      '@babel/core': ^7.0.0
+      webpack: '>=2'
+    dependencies:
+      '@babel/core': 7.21.4
+      find-cache-dir: 3.3.2
+      loader-utils: 2.0.4
+      make-dir: 3.1.0
+      schema-utils: 2.7.1
+      webpack: 5.79.0
+    dev: true
+
   /babel-loader/8.3.0_z2ws6pnxa5zk5axe2qz6qd5y4u:
     resolution: {integrity: sha512-H8SvsMF+m9t15HNLMipppzkC+Y2Yq+v3SonZyU70RBL/h1gxPkH08Ot8pEE9Z4Kd+czyWJClmFS8qzIP9OZ04Q==}
     engines: {node: '>= 8.9'}
@@ -24272,7 +23998,7 @@ packages:
     dev: true
 
   /batch/0.6.1:
-    resolution: {integrity: sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==}
+    resolution: {integrity: sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=}
 
   /bcrypt-pbkdf/1.0.2:
     resolution: {integrity: sha512-qeFIXtP4MSoi6NLqO12WfqARWWuCKi2Rn/9hJLEmtB5yTNr9DqFWkJRCf2qShWzPeAMRnOgCrq0sg/KLv5ES9w==}
@@ -24353,6 +24079,7 @@ packages:
 
   /bindings/1.5.0:
     resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==}
+    requiresBuild: true
     dependencies:
       file-uri-to-path: 1.0.0
     optional: true
@@ -24642,7 +24369,7 @@ packages:
     resolution: {integrity: sha512-xq+q3SRMOxGivLhBNaUdC64hDTQwejJ+H0T/NB1XMtTVEwNTrfFF3gAxiyW0Bu/xWEGhjVKgUcMhCrUy2+uCWg==}
     dependencies:
       base64-js: 1.5.1
-      ieee754: 1.1.13
+      ieee754: 1.2.1
       isarray: 1.0.0
 
   /buffer/5.7.1:
@@ -24720,7 +24447,7 @@ packages:
       cron-parser: 4.8.1
       debuglog: 1.0.1
       get-port: 5.1.1
-      ioredis: 5.3.1
+      ioredis: 5.3.2
       lodash: 4.17.21
       msgpackr: 1.8.5
       semver: 7.4.0
@@ -24734,7 +24461,7 @@ packages:
     dependencies:
       cron-parser: 4.8.1
       glob: 8.1.0
-      ioredis: 5.3.1
+      ioredis: 5.3.2
       lodash: 4.17.21
       msgpackr: 1.8.5
       semver: 7.4.0
@@ -27739,14 +27466,6 @@ packages:
       mimic-response: 3.1.0
     dev: false
 
-  /decorate-all/1.2.1_reflect-metadata@0.1.13:
-    resolution: {integrity: sha512-4lq/hEXS7n+G3J1dRqS10GFd5/xhvPo17a9Dmq+UPWBiHGAv/NcSthI3jZlkxnZCPLc8F+oRzF6h2Cc2ahc5jA==}
-    peerDependencies:
-      reflect-metadata: ^0
-    dependencies:
-      reflect-metadata: 0.1.13
-    dev: false
-
   /dedent/0.7.0:
     resolution: {integrity: sha512-Q6fKUPqnAHAyhiUgFU7BUzLiv0kd8saH9al7tnu5Q/okj6dnupxyTgFIBjVzJATdfIAm9NAsvXNzjaKa+bxVyA==}
 
@@ -28090,7 +27809,7 @@ packages:
     resolution: {integrity: sha512-8wiglvMjkGjhGUnBYgJM87V1Ip0wr8AbIHiC5YHNar3DOfXX+JL0nBoThlnvaX1ib/emraWgimR5QiMDOgMJjA==}
     dev: false
 
-  /docusaurus-plugin-sass/0.2.3_xcukc7gctijnm7m2n3zs3qlnye:
+  /docusaurus-plugin-sass/0.2.3_3tyxhnzcibirqnfyhlburgl2we:
     resolution: {integrity: sha512-FbaE06K8NF8SPUYTwiG+83/jkXrwHJ/Afjqz3SUIGon6QvFwSSoKOcoxGQmUBnjTOk+deUONDx8jNWsegFJcBQ==}
     peerDependencies:
       '@docusaurus/core': ^2.0.0-beta
@@ -28098,7 +27817,7 @@ packages:
     dependencies:
       '@docusaurus/core': 2.3.1_msry6vh4fhnuo22yada3yktkj4
       sass: 1.61.0
-      sass-loader: 10.4.1_sass@1.61.0+webpack@5.78.0
+      sass-loader: 10.4.1_sass@1.61.0+webpack@5.79.0
     transitivePeerDependencies:
       - fibers
       - node-sass
@@ -28625,6 +28344,9 @@ packages:
   /es-module-lexer/0.9.3:
     resolution: {integrity: sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==}
 
+  /es-module-lexer/1.2.1:
+    resolution: {integrity: sha512-9978wrXM50Y4rTMmW5kXIC09ZdXQZqkE4mxhwkd8VbzsGkXGPgV4zWuqQJgCEzYngdo2dYDa0l8xhX4fkSwJSg==}
+
   /es-set-tostringtag/2.0.1:
     resolution: {integrity: sha512-g3OMbtlwY3QewlqAiMLI47KywjWZoEytKr8pf6iTC8uJq5bIAH52Z9pnQ8pVL6whrCto53JZDuUIsifGeLorTg==}
     engines: {node: '>= 0.4'}
@@ -28659,159 +28381,6 @@ packages:
     resolution: {integrity: sha512-Twf7I2v4/1tLoIXMT8HlqaBSS5H2wQTs2wx3MNYCI8K1R1/clXyCazrcVCPm/FuO9cyV8+leEaZOWD5C253NDg==}
     dev: true
 
-  /esbuild-android-64/0.15.18:
-    resolution: {integrity: sha512-wnpt3OXRhcjfIDSZu9bnzT4/TNTDsOUvip0foZOUBG7QbSt//w3QV4FInVJxNhKc/ErhUxc5z4QjHtMi7/TbgA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-android-arm64/0.15.18:
-    resolution: {integrity: sha512-G4xu89B8FCzav9XU8EjsXacCKSG2FT7wW9J6hOc18soEHJdtWu03L3TQDGf0geNxfLTtxENKBzMSq9LlbjS8OQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [android]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-darwin-64/0.15.18:
-    resolution: {integrity: sha512-2WAvs95uPnVJPuYKP0Eqx+Dl/jaYseZEUUT1sjg97TJa4oBtbAKnPnl3b5M9l51/nbx7+QAEtuummJZW0sBEmg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-darwin-arm64/0.15.18:
-    resolution: {integrity: sha512-tKPSxcTJ5OmNb1btVikATJ8NftlyNlc8BVNtyT/UAr62JFOhwHlnoPrhYWz09akBLHI9nElFVfWSTSRsrZiDUA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [darwin]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-freebsd-64/0.15.18:
-    resolution: {integrity: sha512-TT3uBUxkteAjR1QbsmvSsjpKjOX6UkCstr8nMr+q7zi3NuZ1oIpa8U41Y8I8dJH2fJgdC3Dj3CXO5biLQpfdZA==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-freebsd-arm64/0.15.18:
-    resolution: {integrity: sha512-R/oVr+X3Tkh+S0+tL41wRMbdWtpWB8hEAMsOXDumSSa6qJR89U0S/PpLXrGF7Wk/JykfpWNokERUpCeHDl47wA==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [freebsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-32/0.15.18:
-    resolution: {integrity: sha512-lphF3HiCSYtaa9p1DtXndiQEeQDKPl9eN/XNoBf2amEghugNuqXNZA/ZovthNE2aa4EN43WroO0B85xVSjYkbg==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-64/0.15.18:
-    resolution: {integrity: sha512-hNSeP97IviD7oxLKFuii5sDPJ+QHeiFTFLoLm7NZQligur8poNOWGIgpQ7Qf8Balb69hptMZzyOBIPtY09GZYw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-arm/0.15.18:
-    resolution: {integrity: sha512-UH779gstRblS4aoS2qpMl3wjg7U0j+ygu3GjIeTonCcN79ZvpPee12Qun3vcdxX+37O5LFxz39XeW2I9bybMVA==}
-    engines: {node: '>=12'}
-    cpu: [arm]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-arm64/0.15.18:
-    resolution: {integrity: sha512-54qr8kg/6ilcxd+0V3h9rjT4qmjc0CccMVWrjOEM/pEcUzt8X62HfBSeZfT2ECpM7104mk4yfQXkosY8Quptug==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-mips64le/0.15.18:
-    resolution: {integrity: sha512-Mk6Ppwzzz3YbMl/ZZL2P0q1tnYqh/trYZ1VfNP47C31yT0K8t9s7Z077QrDA/guU60tGNp2GOwCQnp+DYv7bxQ==}
-    engines: {node: '>=12'}
-    cpu: [mips64el]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-ppc64le/0.15.18:
-    resolution: {integrity: sha512-b0XkN4pL9WUulPTa/VKHx2wLCgvIAbgwABGnKMY19WhKZPT+8BxhZdqz6EgkqCLld7X5qiCY2F/bfpUUlnFZ9w==}
-    engines: {node: '>=12'}
-    cpu: [ppc64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-riscv64/0.15.18:
-    resolution: {integrity: sha512-ba2COaoF5wL6VLZWn04k+ACZjZ6NYniMSQStodFKH/Pu6RxzQqzsmjR1t9QC89VYJxBeyVPTaHuBMCejl3O/xg==}
-    engines: {node: '>=12'}
-    cpu: [riscv64]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-linux-s390x/0.15.18:
-    resolution: {integrity: sha512-VbpGuXEl5FCs1wDVp93O8UIzl3ZrglgnSQ+Hu79g7hZu6te6/YHgVJxCM2SqfIila0J3k0csfnf8VD2W7u2kzQ==}
-    engines: {node: '>=12'}
-    cpu: [s390x]
-    os: [linux]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-netbsd-64/0.15.18:
-    resolution: {integrity: sha512-98ukeCdvdX7wr1vUYQzKo4kQ0N2p27H7I11maINv73fVEXt2kyh4K4m9f35U1K43Xc2QGXlzAw0K9yoU7JUjOg==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [netbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-openbsd-64/0.15.18:
-    resolution: {integrity: sha512-yK5NCcH31Uae076AyQAXeJzt/vxIo9+omZRKj1pauhk3ITuADzuOx5N2fdHrAKPxN+zH3w96uFKlY7yIn490xQ==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [openbsd]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-sunos-64/0.15.18:
-    resolution: {integrity: sha512-On22LLFlBeLNj/YF3FT+cXcyKPEI263nflYlAhz5crxtp3yRG1Ugfr7ITyxmCmjm4vbN/dGrb/B7w7U8yJR9yw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [sunos]
-    requiresBuild: true
-    dev: true
-    optional: true
-
   /esbuild-wasm/0.17.16:
     resolution: {integrity: sha512-o5DNFwnYThm9LXYIEoZEnJrk7cI08GwVjHKMUHDFSN8vo0y8eKdEOAgNH3rSoBK/8E34PeKr1UO0liEBIH/GFQ==}
     engines: {node: '>=12'}
@@ -28824,63 +28393,6 @@ packages:
     hasBin: true
     dev: true
 
-  /esbuild-windows-32/0.15.18:
-    resolution: {integrity: sha512-o+eyLu2MjVny/nt+E0uPnBxYuJHBvho8vWsC2lV61A7wwTWC3jkN2w36jtA+yv1UgYkHRihPuQsL23hsCYGcOQ==}
-    engines: {node: '>=12'}
-    cpu: [ia32]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-windows-64/0.15.18:
-    resolution: {integrity: sha512-qinug1iTTaIIrCorAUjR0fcBk24fjzEedFYhhispP8Oc7SFvs+XeW3YpAKiKp8dRpizl4YYAhxMjlftAMJiaUw==}
-    engines: {node: '>=12'}
-    cpu: [x64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild-windows-arm64/0.15.18:
-    resolution: {integrity: sha512-q9bsYzegpZcLziq0zgUi5KqGVtfhjxGbnksaBFYmWLxeV/S1fK4OLdq2DFYnXcLMjlZw2L0jLsk1eGoB522WXQ==}
-    engines: {node: '>=12'}
-    cpu: [arm64]
-    os: [win32]
-    requiresBuild: true
-    dev: true
-    optional: true
-
-  /esbuild/0.15.18:
-    resolution: {integrity: sha512-x/R72SmW3sSFRm5zrrIjAhCeQSAWoni3CmHEqfQrZIQTM3lVCdehdwuIqaOtfC2slvpdlLa62GYoN8SxT23m6Q==}
-    engines: {node: '>=12'}
-    hasBin: true
-    requiresBuild: true
-    optionalDependencies:
-      '@esbuild/android-arm': 0.15.18
-      '@esbuild/linux-loong64': 0.15.18
-      esbuild-android-64: 0.15.18
-      esbuild-android-arm64: 0.15.18
-      esbuild-darwin-64: 0.15.18
-      esbuild-darwin-arm64: 0.15.18
-      esbuild-freebsd-64: 0.15.18
-      esbuild-freebsd-arm64: 0.15.18
-      esbuild-linux-32: 0.15.18
-      esbuild-linux-64: 0.15.18
-      esbuild-linux-arm: 0.15.18
-      esbuild-linux-arm64: 0.15.18
-      esbuild-linux-mips64le: 0.15.18
-      esbuild-linux-ppc64le: 0.15.18
-      esbuild-linux-riscv64: 0.15.18
-      esbuild-linux-s390x: 0.15.18
-      esbuild-netbsd-64: 0.15.18
-      esbuild-openbsd-64: 0.15.18
-      esbuild-sunos-64: 0.15.18
-      esbuild-windows-32: 0.15.18
-      esbuild-windows-64: 0.15.18
-      esbuild-windows-arm64: 0.15.18
-    dev: true
-
   /esbuild/0.17.16:
     resolution: {integrity: sha512-aeSuUKr9aFVY9Dc8ETVELGgkj4urg5isYx8pLf4wlGgB0vTFjxJQdHnNH6Shmx4vYYrOTLCHtRI5i1XZ9l2Zcg==}
     engines: {node: '>=12'}
@@ -29073,7 +28585,7 @@ packages:
     transitivePeerDependencies:
       - supports-color
 
-  /eslint-import-resolver-webpack/0.13.2_2shkfpyvap4zatu4dplbemujdy:
+  /eslint-import-resolver-webpack/0.13.2_ach2pokoanzagmjnilrcbv2npm:
     resolution: {integrity: sha512-XodIPyg1OgE2h5BDErz3WJoK7lawxKTJNhgPNafRST6csC/MZC+L5P6kKqsZGRInpbgc02s/WZMrb4uGJzcuRg==}
     engines: {node: '>= 6'}
     peerDependencies:
@@ -29092,7 +28604,7 @@ packages:
       lodash: 4.17.21
       resolve: 1.22.2
       semver: 5.7.1
-      webpack: 5.78.0_@swc+core@1.3.49
+      webpack: 5.79.0_@swc+core@1.3.49
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -29150,7 +28662,7 @@ packages:
       debug: 3.2.7
       eslint: 8.38.0
       eslint-import-resolver-node: 0.3.7
-      eslint-import-resolver-webpack: 0.13.2_2shkfpyvap4zatu4dplbemujdy
+      eslint-import-resolver-webpack: 0.13.2_ach2pokoanzagmjnilrcbv2npm
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -30259,6 +29771,17 @@ packages:
       schema-utils: 3.1.1
       webpack: 5.78.0
 
+  /file-loader/6.2.0_webpack@5.79.0:
+    resolution: {integrity: sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      webpack: ^4.0.0 || ^5.0.0
+    dependencies:
+      loader-utils: 2.0.4
+      schema-utils: 3.1.1
+      webpack: 5.79.0
+    dev: false
+
   /file-selector/0.6.0:
     resolution: {integrity: sha512-QlZ5yJC0VxHxQQsQhXvBaC7VRJ2uaxTf+Tfpu4Z/OcVQJVpZO+DGU0rkoVW5ce2SccxugvpBJoMvUs59iILYdw==}
     engines: {node: '>= 12'}
@@ -30291,6 +29814,7 @@ packages:
 
   /file-uri-to-path/1.0.0:
     resolution: {integrity: sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==}
+    requiresBuild: true
     optional: true
 
   /file-uri-to-path/2.0.0:
@@ -30824,6 +30348,29 @@ packages:
       webpack: 5.76.2
     dev: true
 
+  /fork-ts-checker-webpack-plugin/8.0.0_odl7p537j6zjcy4b5gf5bruiye:
+    resolution: {integrity: sha512-mX3qW3idpueT2klaQXBzrIM/pHw+T0B/V9KHEvNrqijTq9NFnMZU6oreVxDYcf33P8a5cW+67PjodNHthGnNVg==}
+    engines: {node: '>=12.13.0', yarn: '>=1.0.0'}
+    peerDependencies:
+      typescript: '>3.6.0'
+      webpack: ^5.11.0
+    dependencies:
+      '@babel/code-frame': 7.21.4
+      chalk: 4.1.2
+      chokidar: 3.5.3
+      cosmiconfig: 7.1.0
+      deepmerge: 4.3.1
+      fs-extra: 10.1.0
+      memfs: 3.5.0
+      minimatch: 3.1.2
+      node-abort-controller: 3.1.1
+      schema-utils: 3.1.1
+      semver: 7.4.0
+      tapable: 2.2.1
+      typescript: 4.9.5
+      webpack: 5.79.0
+    dev: true
+
   /form-data/2.3.3:
     resolution: {integrity: sha512-1lLKB2Mu3aGP1Q/2eCOx0fNbRMe7XdwktwOruhfqqd0rIJWwN4Dh+E3hrPSlDCXnSR7UtZ1N38rVXm+6+MEhJQ==}
     engines: {node: '>= 0.12'}
@@ -32391,6 +31938,20 @@ packages:
       pretty-error: 4.0.0
       tapable: 2.2.1
       webpack: 5.78.0
+    dev: false
+
+  /html-webpack-plugin/5.5.1_webpack@5.78.0:
+    resolution: {integrity: sha512-cTUzZ1+NqjGEKjmVgZKLMdiFg3m9MdRXkZW2OEe69WYVi5ONLMmlnSZdXzGGMOq0C8jGDrL6EWyEDDUioHO/pA==}
+    engines: {node: '>=10.13.0'}
+    peerDependencies:
+      webpack: ^5.20.0
+    dependencies:
+      '@types/html-minifier-terser': 6.1.0
+      html-minifier-terser: 6.1.0
+      lodash: 4.17.21
+      pretty-error: 4.0.0
+      tapable: 2.2.1
+      webpack: 5.78.0
 
   /htmlencode/0.0.4:
     resolution: {integrity: sha512-0uDvNVpzj/E2TfvLLyyXhKBRvF1y84aZsyRxRXFsQobnHaL4pcaXk+Y9cnFlvnxrBLeXDNq/VJBD+ngdBgQG1w==}
@@ -32658,6 +32219,7 @@ packages:
 
   /ieee754/1.1.13:
     resolution: {integrity: sha512-4vf7I2LYV/HaWerSo3XmlMkp5eZ83i+/CDluXi/IGTs/O1sejBNhTtnxzmRZfvOUqj7lZjqHkeTvpgSFDlWZTg==}
+    dev: false
 
   /ieee754/1.2.1:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
@@ -33025,6 +32587,23 @@ packages:
       standard-as-callback: 2.1.0
     transitivePeerDependencies:
       - supports-color
+    dev: false
+
+  /ioredis/5.3.2:
+    resolution: {integrity: sha512-1DKMMzlIHM02eBBVOFQ1+AolGjs6+xEcM4PDL7NqOS6szq7H9jSaEkIUH6/a5Hl241LzW6JLSiAbNvTQjUupUA==}
+    engines: {node: '>=12.22.0'}
+    dependencies:
+      '@ioredis/commands': 1.2.0
+      cluster-key-slot: 1.1.2
+      debug: 4.3.4
+      denque: 2.1.0
+      lodash.defaults: 4.2.0
+      lodash.isarguments: 3.1.0
+      redis-errors: 1.2.0
+      redis-parser: 3.0.0
+      standard-as-callback: 2.1.0
+    transitivePeerDependencies:
+      - supports-color
 
   /ip/1.1.8:
     resolution: {integrity: sha512-PuExPYUiu6qMBQb4l06ecm6T6ujzhmh+MeJcW9wa89PoAz5pvd4zPgN5WJV104mb6S2T1AwNIAaB70JNrLQWhg==}
@@ -33814,10 +33393,6 @@ packages:
       filelist: 1.0.4
       minimatch: 3.1.2
 
-  /jasmine-core/4.5.0:
-    resolution: {integrity: sha512-9PMzyvhtocxb3aXJVOPqBDswdgyAeSB81QnLop4npOpbqnheaTEwPc9ZloQeVswugPManznQBjD8kWDTjlnHuw==}
-    dev: true
-
   /jasmine-core/4.6.0:
     resolution: {integrity: sha512-O236+gd0ZXS8YAjFx8xKaJ94/erqUliEkJTDedyE7iHvv4ZVqi+q+8acJxu05/WJDKm512EUNn809In37nWlAQ==}
     dev: true
@@ -34122,7 +33697,7 @@ packages:
       pretty-format: 27.5.1
       slash: 3.0.0
       strip-json-comments: 3.1.1
-      ts-node: 10.9.1_wh2cnrlliuuxb2etxm2m3ttgna
+      ts-node: 10.9.1_j6r65ghnzvzk7vhdh4hyogrm4a
     transitivePeerDependencies:
       - bufferutil
       - canvas
@@ -34895,7 +34470,7 @@ packages:
     engines: {node: ^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0}
     dependencies:
       '@jest/types': 27.5.1
-      '@types/node': 12.20.55
+      '@types/node': 14.18.42
       chalk: 4.1.2
       ci-info: 3.8.0
       graceful-fs: 4.2.11
@@ -35543,18 +35118,6 @@ packages:
       - supports-color
     dev: true
 
-  /karma-jasmine-html-reporter/2.0.0_uk6l45dlsjldsnfgnal4othgyq:
-    resolution: {integrity: sha512-SB8HNNiazAHXM1vGEzf8/tSyEhkfxuDdhYdPBX2Mwgzt0OuF2gicApQ+uvXLID/gXyJQgvrM9+1/2SxZFUUDIA==}
-    peerDependencies:
-      jasmine-core: ^4.0.0
-      karma: ^6.0.0
-      karma-jasmine: ^5.0.0
-    dependencies:
-      jasmine-core: 4.5.0
-      karma: 6.4.1
-      karma-jasmine: 5.1.0_karma@6.4.1
-    dev: true
-
   /karma-jasmine-html-reporter/2.0.0_vl3unt3t2otf46m2vvwnwo5vau:
     resolution: {integrity: sha512-SB8HNNiazAHXM1vGEzf8/tSyEhkfxuDdhYdPBX2Mwgzt0OuF2gicApQ+uvXLID/gXyJQgvrM9+1/2SxZFUUDIA==}
     peerDependencies:
@@ -36839,12 +36402,6 @@ packages:
     engines: {node: '>= 12'}
     hasBin: true
 
-  /maskdata/1.2.2:
-    resolution: {integrity: sha512-J6SqypQuS0XdgNQYFxnNLQ+rl7v4gq+DwnJ7NpZkQ0Ommzwde6WMFuS9d/4TSBN9bo9mqSeEcF3Q86CWAlUYvw==}
-    dependencies:
-      lodash: 4.17.21
-    dev: false
-
   /matcher/1.1.1:
     resolution: {integrity: sha512-+BmqxWIubKTRKNWx/ahnCkk3mG8m7OturVlqq6HiojGJTd5hVYbgZm6WzcYPCoB+KBT4Vd6R7WSRG2OADNaCjg==}
     engines: {node: '>=4'}
@@ -39037,15 +38594,6 @@ packages:
       is-wsl: 2.2.0
     dev: true
 
-  /open/8.4.0:
-    resolution: {integrity: sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==}
-    engines: {node: '>=12'}
-    dependencies:
-      define-lazy-prop: 2.0.0
-      is-docker: 2.2.1
-      is-wsl: 2.2.0
-    dev: true
-
   /open/8.4.1:
     resolution: {integrity: sha512-/4b7qZNhv6Uhd7jjnREh1NjnPxlTq+XNWPG88Ydkj5AILcA5m3ajvcg57pB24EQjKv0dK62XnDqk9c/hkIG5Kg==}
     engines: {node: '>=12'}
@@ -39438,33 +38986,6 @@ packages:
       - supports-color
     dev: true
 
-  /pacote/15.0.6:
-    resolution: {integrity: sha512-dQwcz/sME7QIL+cdrw/jftQfMMXxSo17i2kJ/gnhBhUvvBAsxoBu1lw9B5IzCH/Ce8CvEkG/QYZ6txzKfn0bTw==}
-    engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
-    hasBin: true
-    dependencies:
-      '@npmcli/git': 4.0.4
-      '@npmcli/installed-package-contents': 2.0.2
-      '@npmcli/promise-spawn': 6.0.2
-      '@npmcli/run-script': 6.0.0
-      cacache: 17.0.5
-      fs-minipass: 2.1.0
-      minipass: 3.3.6
-      npm-package-arg: 10.1.0
-      npm-packlist: 7.0.4
-      npm-pick-manifest: 8.0.1
-      npm-registry-fetch: 14.0.3
-      proc-log: 3.0.0
-      promise-retry: 2.0.1
-      read-package-json: 6.0.1
-      read-package-json-fast: 3.0.2
-      ssri: 10.0.2
-      tar: 6.1.13
-    transitivePeerDependencies:
-      - bluebird
-      - supports-color
-    dev: true
-
   /pacote/15.1.0:
     resolution: {integrity: sha512-FFcjtIl+BQNfeliSm7MZz5cpdohvUV1yjGnqgVM4UnVF7JslRY0ImXAygdaCDV0jjUADEWu4y5xsDV8brtrTLg==}
     engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
@@ -42747,7 +42268,7 @@ packages:
       eslint-webpack-plugin: 3.2.0_rdwvrfvhmsyfoxui6a22qliowu
       file-loader: 6.2.0_webpack@5.78.0
       fs-extra: 10.1.0
-      html-webpack-plugin: 5.5.0_webpack@5.78.0
+      html-webpack-plugin: 5.5.1_webpack@5.78.0
       identity-obj-proxy: 3.0.0
       jest: 27.5.1
       jest-resolve: 27.5.1
@@ -42854,7 +42375,7 @@ packages:
       - '@types/react'
     dev: false
 
-  /react-textarea-autosize/8.4.1_bbbkigweufcoxic5hihvd5mfx4:
+  /react-textarea-autosize/8.4.1_c3qmy7gv5lbarsbv5sa5jz2oke:
     resolution: {integrity: sha512-aD2C+qK6QypknC+lCMzteOdIjoMbNlgSFmJjCV+DrfTPwp59i/it9mMNf2HDzvRjQgKAyBDPyLJhcrzElf2U4Q==}
     engines: {node: '>=10'}
     peerDependencies:
@@ -42863,7 +42384,7 @@ packages:
       '@babel/runtime': 7.21.0
       react: 17.0.2
       use-composed-ref: 1.3.0_react@17.0.2
-      use-latest: 1.2.1_bbbkigweufcoxic5hihvd5mfx4
+      use-latest: 1.2.1_c3qmy7gv5lbarsbv5sa5jz2oke
     transitivePeerDependencies:
       - '@types/react'
     dev: false
@@ -43771,6 +43292,14 @@ packages:
       glob: 9.3.5
     dev: true
 
+  /rimraf/4.4.1:
+    resolution: {integrity: sha512-Gk8NlF062+T9CqNGn6h4tls3k6T1+/nXdOcSZVikNVtlRdYpA7wRJJMoXmuvOnLW844rPjdQ7JgXCYM6PPC/og==}
+    engines: {node: '>=14'}
+    hasBin: true
+    dependencies:
+      glob: 9.3.5
+    dev: true
+
   /ripemd160/2.0.2:
     resolution: {integrity: sha512-ii4iagi25WusVoiC4B4lq7pbXfAp3D9v5CwfkY33vffw2+pkDjY1D8GaN7spsxvCSx8dkPqOZCEZyfxcmJG2IA==}
     dependencies:
@@ -44070,7 +43599,7 @@ packages:
     dev: false
     optional: true
 
-  /sass-loader/10.4.1_sass@1.61.0+webpack@5.78.0:
+  /sass-loader/10.4.1_sass@1.61.0+webpack@5.79.0:
     resolution: {integrity: sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
@@ -44092,7 +43621,7 @@ packages:
       sass: 1.61.0
       schema-utils: 3.1.1
       semver: 7.4.0
-      webpack: 5.78.0
+      webpack: 5.79.0
     dev: false
 
   /sass-loader/12.6.0_webpack@5.78.0:
@@ -44143,7 +43672,7 @@ packages:
       webpack: 5.76.1
     dev: true
 
-  /sass-loader/13.2.2_sass@1.61.0+webpack@5.78.0:
+  /sass-loader/13.2.2_sass@1.61.0+webpack@5.79.0:
     resolution: {integrity: sha512-nrIdVAAte3B9icfBiGWvmMhT/D+eCDwnk+yA7VE/76dp/WkHX+i44Q/pfo71NYbwj0Ap+PGsn0ekOuU1WFJ2AA==}
     engines: {node: '>= 14.15.0'}
     peerDependencies:
@@ -44165,7 +43694,7 @@ packages:
       klona: 2.0.6
       neo-async: 2.6.2
       sass: 1.61.0
-      webpack: 5.78.0
+      webpack: 5.79.0
     dev: true
 
   /sass/1.58.1:
@@ -46382,6 +45911,31 @@ packages:
       - bluebird
     dev: true
 
+  /terser-webpack-plugin/5.3.7_jizmbjaqeswaozlukf52vuhlce:
+    resolution: {integrity: sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      '@swc/core': '*'
+      esbuild: '*'
+      uglify-js: '*'
+      webpack: ^5.1.0
+    peerDependenciesMeta:
+      '@swc/core':
+        optional: true
+      esbuild:
+        optional: true
+      uglify-js:
+        optional: true
+    dependencies:
+      '@jridgewell/trace-mapping': 0.3.18
+      '@swc/core': 1.3.49
+      jest-worker: 27.5.1
+      schema-utils: 3.1.1
+      serialize-javascript: 6.0.1
+      terser: 5.16.9
+      webpack: 5.79.0_@swc+core@1.3.49
+    dev: true
+
   /terser-webpack-plugin/5.3.7_webpack@5.76.1:
     resolution: {integrity: sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==}
     engines: {node: '>= 10.13.0'}
@@ -46453,7 +46007,7 @@ packages:
       terser: 5.16.9
       webpack: 5.78.0
 
-  /terser-webpack-plugin/5.3.7_wvz5dn57l37py5yhasbcqqk6hi:
+  /terser-webpack-plugin/5.3.7_webpack@5.79.0:
     resolution: {integrity: sha512-AfKwIktyP7Cu50xNjXF/6Qb5lBNzYaWpU6YfoX3uZicTx0zTy0stDDCsvjDapKsSDvOeWo5MEq4TmdBy2cNoHw==}
     engines: {node: '>= 10.13.0'}
     peerDependencies:
@@ -46470,13 +46024,11 @@ packages:
         optional: true
     dependencies:
       '@jridgewell/trace-mapping': 0.3.18
-      '@swc/core': 1.3.49
       jest-worker: 27.5.1
       schema-utils: 3.1.1
       serialize-javascript: 6.0.1
       terser: 5.16.9
-      webpack: 5.78.0_@swc+core@1.3.49
-    dev: true
+      webpack: 5.79.0
 
   /terser/4.8.1:
     resolution: {integrity: sha512-4GnLC0x667eJG0ewJTa6z/yXrbLGv80D9Ru6HIpCQmO+Q4PfEtBFi0ObSckqwL6VyQv/7ENJieXHo2ANmdQwgw==}
@@ -46846,8 +46398,7 @@ packages:
     resolution: {integrity: sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==}
 
   /trim/0.0.1:
-    resolution: {integrity: sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ==}
-    deprecated: Use String.prototype.trim() instead
+    resolution: {integrity: sha1-WFhUf2spB1fulczMZm+1AITEYN0=}
 
   /triple-beam/1.3.0:
     resolution: {integrity: sha512-XrHUvV5HpdLmIj4uVMxHggLbFSZYIn7HEWsqePZcI50pco+MPqJ50wMGY794X7AOOhxOBAjbkqfAbEe/QMp2Lw==}
@@ -46975,7 +46526,7 @@ packages:
       yargs-parser: 21.1.1
     dev: true
 
-  /ts-loader/9.4.2_fejcc7gjbwtmwzggoernzojija:
+  /ts-loader/9.4.2_odl7p537j6zjcy4b5gf5bruiye:
     resolution: {integrity: sha512-OmlC4WVmFv5I0PpaxYb+qGeGOdm5giHU7HwDDUjw59emP2UYMHy9fFSDcYgSNoH8sXcj4hGCSEhlDZ9ULeDraA==}
     engines: {node: '>=12.0.0'}
     peerDependencies:
@@ -46987,7 +46538,7 @@ packages:
       micromatch: 4.0.5
       semver: 7.4.0
       typescript: 4.9.5
-      webpack: 5.78.0
+      webpack: 5.79.0
     dev: true
 
   /ts-node/10.9.1_j6r65ghnzvzk7vhdh4hyogrm4a:
@@ -47149,7 +46700,7 @@ packages:
     dependencies:
       chalk: 4.1.2
       enhanced-resolve: 5.12.0
-      tsconfig-paths: 4.1.2
+      tsconfig-paths: 4.2.0
     dev: true
 
   /tsconfig-paths/3.14.2:
@@ -47169,6 +46720,15 @@ packages:
       strip-bom: 3.0.0
     dev: true
 
+  /tsconfig-paths/4.2.0:
+    resolution: {integrity: sha512-NoZ4roiN7LnbKn9QqE1amc9DJfzvZXxF4xDavcOWt1BPkdx+m+0gJuPM+S0vCe7zTJMYUP0R8pO2XMr+Y8oLIg==}
+    engines: {node: '>=6'}
+    dependencies:
+      json5: 2.2.3
+      minimist: 1.2.8
+      strip-bom: 3.0.0
+    dev: true
+
   /tslib/1.10.0:
     resolution: {integrity: sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==}
     dev: true
@@ -47742,6 +47302,23 @@ packages:
   /url-join/4.0.1:
     resolution: {integrity: sha512-jk1+QP6ZJqyOiuEI9AEWQfju/nB2Pw466kbA0LEZljHwKeMgd9WrAEgEGxjPDD2+TNbbb37rTyhEfrCXfuKXnA==}
 
+  /url-loader/4.1.1_7f53fl25ml2r3kp2h6jbsgu5ji:
+    resolution: {integrity: sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==}
+    engines: {node: '>= 10.13.0'}
+    peerDependencies:
+      file-loader: '*'
+      webpack: ^4.0.0 || ^5.0.0
+    peerDependenciesMeta:
+      file-loader:
+        optional: true
+    dependencies:
+      file-loader: 6.2.0_webpack@5.79.0
+      loader-utils: 2.0.4
+      mime-types: 2.1.35
+      schema-utils: 3.1.1
+      webpack: 5.79.0
+    dev: false
+
   /url-loader/4.1.1_kl4i6u7bs444epxeue2qtwootq:
     resolution: {integrity: sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==}
     engines: {node: '>= 10.13.0'}
@@ -47837,7 +47414,7 @@ packages:
       react: 17.0.2
     dev: false
 
-  /use-isomorphic-layout-effect/1.1.2_bbbkigweufcoxic5hihvd5mfx4:
+  /use-isomorphic-layout-effect/1.1.2_c3qmy7gv5lbarsbv5sa5jz2oke:
     resolution: {integrity: sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==}
     peerDependencies:
       '@types/react': '*'
@@ -47846,7 +47423,7 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 17.0.56
+      '@types/react': 17.0.58
       react: 17.0.2
     dev: false
 
@@ -47863,7 +47440,7 @@ packages:
       react: 17.0.2
     dev: false
 
-  /use-latest/1.2.1_bbbkigweufcoxic5hihvd5mfx4:
+  /use-latest/1.2.1_c3qmy7gv5lbarsbv5sa5jz2oke:
     resolution: {integrity: sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==}
     peerDependencies:
       '@types/react': '*'
@@ -47872,9 +47449,9 @@ packages:
       '@types/react':
         optional: true
     dependencies:
-      '@types/react': 17.0.56
+      '@types/react': 17.0.58
       react: 17.0.2
-      use-isomorphic-layout-effect: 1.1.2_bbbkigweufcoxic5hihvd5mfx4
+      use-isomorphic-layout-effect: 1.1.2_c3qmy7gv5lbarsbv5sa5jz2oke
     dev: false
 
   /use-latest/1.2.1_h7fc2el62uaa77gho3xhys6ola:
@@ -48101,40 +47678,6 @@ packages:
       unist-util-stringify-position: 2.0.3
       vfile-message: 2.0.4
 
-  /vite/3.2.5_@types+node@16.18.23:
-    resolution: {integrity: sha512-4mVEpXpSOgrssFZAOmGIr85wPHKvaDAcXqxVxVRZhljkJOMZi1ibLibzjLHzJvcok8BMguLc7g1W6W/GqZbLdQ==}
-    engines: {node: ^14.18.0 || >=16.0.0}
-    hasBin: true
-    peerDependencies:
-      '@types/node': '>= 14'
-      less: '*'
-      sass: '*'
-      stylus: '*'
-      sugarss: '*'
-      terser: ^5.4.0
-    peerDependenciesMeta:
-      '@types/node':
-        optional: true
-      less:
-        optional: true
-      sass:
-        optional: true
-      stylus:
-        optional: true
-      sugarss:
-        optional: true
-      terser:
-        optional: true
-    dependencies:
-      '@types/node': 16.18.23
-      esbuild: 0.15.18
-      postcss: 8.4.21
-      resolve: 1.22.2
-      rollup: 2.79.1
-    optionalDependencies:
-      fsevents: 2.3.2
-    dev: true
-
   /vite/4.2.1_@types+node@18.15.11:
     resolution: {integrity: sha512-7MKhqdy0ISo4wnvwtqZkjke6XN4taqQ2TBaTccLIpOKv7Vp2h4Y+NpmWCnGDeSvvn45KxvWgGyb0MkHvY1vgbg==}
     engines: {node: ^14.18.0 || >=16.0.0}
@@ -48825,8 +48368,8 @@ packages:
       - esbuild
       - uglify-js
 
-  /webpack/5.78.0_@swc+core@1.3.49:
-    resolution: {integrity: sha512-gT5DP72KInmE/3azEaQrISjTvLYlSM0j1Ezhht/KLVkrqtv10JoP/RXhwmX/frrutOPuSq3o5Vq0ehR/4Vmd1g==}
+  /webpack/5.79.0:
+    resolution: {integrity: sha512-3mN4rR2Xq+INd6NnYuL9RC9GAmc1ROPKJoHhrZ4pAjdMFEkJJWrsPw8o2JjCIyQyTu7rTXYn4VG6OpyB3CobZg==}
     engines: {node: '>=10.13.0'}
     hasBin: true
     peerDependencies:
@@ -48836,7 +48379,7 @@ packages:
         optional: true
     dependencies:
       '@types/eslint-scope': 3.7.4
-      '@types/estree': 0.0.51
+      '@types/estree': 1.0.0
       '@webassemblyjs/ast': 1.11.1
       '@webassemblyjs/wasm-edit': 1.11.1
       '@webassemblyjs/wasm-parser': 1.11.1
@@ -48845,7 +48388,46 @@ packages:
       browserslist: 4.21.5
       chrome-trace-event: 1.0.3
       enhanced-resolve: 5.12.0
-      es-module-lexer: 0.9.3
+      es-module-lexer: 1.2.1
+      eslint-scope: 5.1.1
+      events: 3.3.0
+      glob-to-regexp: 0.4.1
+      graceful-fs: 4.2.11
+      json-parse-even-better-errors: 2.3.1
+      loader-runner: 4.3.0
+      mime-types: 2.1.35
+      neo-async: 2.6.2
+      schema-utils: 3.1.1
+      tapable: 2.2.1
+      terser-webpack-plugin: 5.3.7_webpack@5.79.0
+      watchpack: 2.4.0
+      webpack-sources: 3.2.3
+    transitivePeerDependencies:
+      - '@swc/core'
+      - esbuild
+      - uglify-js
+
+  /webpack/5.79.0_@swc+core@1.3.49:
+    resolution: {integrity: sha512-3mN4rR2Xq+INd6NnYuL9RC9GAmc1ROPKJoHhrZ4pAjdMFEkJJWrsPw8o2JjCIyQyTu7rTXYn4VG6OpyB3CobZg==}
+    engines: {node: '>=10.13.0'}
+    hasBin: true
+    peerDependencies:
+      webpack-cli: '*'
+    peerDependenciesMeta:
+      webpack-cli:
+        optional: true
+    dependencies:
+      '@types/eslint-scope': 3.7.4
+      '@types/estree': 1.0.0
+      '@webassemblyjs/ast': 1.11.1
+      '@webassemblyjs/wasm-edit': 1.11.1
+      '@webassemblyjs/wasm-parser': 1.11.1
+      acorn: 8.8.2
+      acorn-import-assertions: 1.8.0_acorn@8.8.2
+      browserslist: 4.21.5
+      chrome-trace-event: 1.0.3
+      enhanced-resolve: 5.12.0
+      es-module-lexer: 1.2.1
       eslint-scope: 5.1.1
       events: 3.3.0
       glob-to-regexp: 0.4.1
@@ -48856,7 +48438,7 @@ packages:
       neo-async: 2.6.2
       schema-utils: 3.1.1
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.7_wvz5dn57l37py5yhasbcqqk6hi
+      terser-webpack-plugin: 5.3.7_jizmbjaqeswaozlukf52vuhlce
       watchpack: 2.4.0
       webpack-sources: 3.2.3
     transitivePeerDependencies:
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 9242ae9249f..ddc6e632343 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,7 +3,6 @@ packages:
   - 'providers/*'
   - 'packages/*'
   - 'apps/*'
-  - 'examples/*'
   - 'libs/*'
   - 'docs'
   # exclude packages that are inside test directories
diff --git a/scripts/print-affected-array.js b/scripts/print-affected-array.js
new file mode 100644
index 00000000000..25610159399
--- /dev/null
+++ b/scripts/print-affected-array.js
@@ -0,0 +1,98 @@
+const path = require('path');
+
+const spawn = require("cross-spawn");
+
+const processArguments = process.argv.slice(2);
+
+const ALL_FLAG = "--all";
+const TASK_NAME = processArguments[0];
+const BASE_BRANCH_NAME = processArguments[1];
+const ROOT_PATH = path.resolve(__dirname, "..");
+const ENCODING_TYPE = "utf8";
+const NEW_LINE_CHAR = "\n";
+
+class CliLogs {
+  constructor() {
+    this._logs = [];
+    this.log = this.log.bind(this);
+  }
+
+  log(log) {
+    const cleanLog = log.trim();
+    if (cleanLog.length) {
+      this._logs.push(cleanLog);
+    }
+  }
+
+  get logs() {
+    return this._logs;
+  }
+
+  get joinedLogs() {
+    return this.logs.join(NEW_LINE_CHAR);
+  }
+}
+
+function pnpmRun(...args) {
+  const logData = new CliLogs();
+  let pnpmProcess;
+
+  return new Promise((resolve, reject) => {
+    const processOptions = {
+      cwd: ROOT_PATH,
+      env: process.env
+    };
+
+    pnpmProcess = spawn('pnpm', args, processOptions);
+
+    pnpmProcess.stdin.setEncoding(ENCODING_TYPE);
+    pnpmProcess.stdout.setEncoding(ENCODING_TYPE);
+    pnpmProcess.stderr.setEncoding(ENCODING_TYPE);
+    pnpmProcess.stdout.on("data", logData.log);
+    pnpmProcess.stderr.on("data", logData.log);
+
+    pnpmProcess.on("close", (code) => {
+      if (code !== 0) {
+        reject(logData.joinedLogs);
+      } else {
+        resolve(logData.joinedLogs);
+      }
+    });
+  });
+}
+
+function commaSeparatedListToArray(str) {
+  return str.trim().split(",").map(element => element.trim()).filter(element => !!element.length);
+}
+
+function getAffectedCommandResult(str) {
+  const outputLines = str.trim().split(/\r?\n/);
+  if (outputLines.length > 2) {
+    return outputLines.slice(-1)[0];
+  }
+  return "";
+}
+
+async function affectedProjectsContainingTask(taskName, baseBranch) {
+  // pnpm nx print-affected --target=[task] --base [base branch] --select=tasks.target.project
+  return commaSeparatedListToArray(getAffectedCommandResult(
+    await pnpmRun("nx", "print-affected", "--target", taskName, "--base", baseBranch, "--select=tasks.target.project")
+  ));
+}
+
+async function allProjectsContainingTask(taskName) {
+  // pnpm nx print-affected --target=[task] --files package.json --select=tasks.target.project
+  return commaSeparatedListToArray(getAffectedCommandResult(
+    await pnpmRun("nx", "print-affected", "--target", taskName, "--files", "package.json", "--select=tasks.target.project")
+  ));
+}
+
+async function printAffectedProjectsContainingTask() {
+  const projects = BASE_BRANCH_NAME === ALL_FLAG ? await allProjectsContainingTask(TASK_NAME) : await affectedProjectsContainingTask(TASK_NAME, BASE_BRANCH_NAME);
+  console.log(JSON.stringify(projects));
+}
+
+printAffectedProjectsContainingTask().catch(error => {
+  console.error(error);
+  process.exit(1);
+});
diff --git a/scripts/setup-env-files.js b/scripts/setup-env-files.js
index ecaae3cc9d3..c33791e889e 100644
--- a/scripts/setup-env-files.js
+++ b/scripts/setup-env-files.js
@@ -16,15 +16,12 @@ const prePopulateEnv = (folders, folderBasePath, exampleEnvFilePath = 'src/.exam
 
 (async () => {
   const apps = ['api', 'ws', 'worker'];
-  const exampleApps = ['vue-notification-center-example'];
   const appsBasePath = `${__dirname}/../apps`;
-  const exampleAppsBasePath = `${__dirname}/../examples`;
 
   console.log('----------------------------------------');
   console.log('Pre-populating .env files from .example.env');
 
   prePopulateEnv(apps, appsBasePath);
-  prePopulateEnv(exampleApps, exampleAppsBasePath, '.example.env', '.env');
 
   console.log('Finished populating .env files');
   console.log('----------------------------------------');