From 7715849c1cd228d1053cd636044c93a77437df3b Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Mon, 4 May 2026 14:44:57 +0300
Subject: [PATCH] =?UTF-8?q?feat(iot-hub):=20redesign=20home=20hero=20?=
 =?UTF-8?q?=E2=80=94=20per-type=20clusters,=20glow=20blobs,=20scale=20anim?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace per-type icon SVG sets with single composite cluster SVGs
  exported from the updated design (devices, solutions, widgets,
  calculated fields, alarm rules, rule chains).
- Add soft per-type colored glow blobs (Ellipse 399 / 400, opacity 0.16,
  filter: blur(120px)) at the page level so the wash spans the whole
  page background instead of being clipped by the hero.
- Fix hero icons transition: switch from vertical translate to a uniform
  scale around the hero centre so icons burst from / collapse to the
  centre on enter/exit, matching the design prototype.
- Drive blob fill via [style.color] + currentColor for smooth per-type
  tint cross-fades.
---
 .../pages/iot-hub/iot-hub-home.component.html |  28 ++-
 .../pages/iot-hub/iot-hub-home.component.scss | 193 +++++++-----------
 .../pages/iot-hub/iot-hub-home.component.ts   |  33 ++-
 .../iot-hub/hero-alarm-rule-cluster.svg       |  48 +++++
 .../iot-hub/hero-calculated-field-cluster.svg |  71 +++++++
 .../iot-hub/hero-calculated-field-icon-1.svg  |  25 ---
 .../iot-hub/hero-calculated-field-icon-2.svg  |  25 ---
 .../iot-hub/hero-calculated-field-icon-3.svg  |  25 ---
 .../iot-hub/hero-calculated-field-icon-4.svg  |  25 ---
 .../assets/iot-hub/hero-dashboard-icon-1.svg  |  30 ---
 .../assets/iot-hub/hero-dashboard-icon-2.svg  |  25 ---
 .../assets/iot-hub/hero-dashboard-icon-3.svg  |  30 ---
 .../assets/iot-hub/hero-dashboard-icon-4.svg  |  30 ---
 .../assets/iot-hub/hero-device-cluster.svg    | 138 +++++++++++++
 .../src/assets/iot-hub/hero-device-icon-1.svg |  25 ---
 .../src/assets/iot-hub/hero-device-icon-2.svg |  25 ---
 .../src/assets/iot-hub/hero-device-icon-3.svg |  25 ---
 .../src/assets/iot-hub/hero-device-icon-4.svg |  30 ---
 .../iot-hub/hero-rule-chain-cluster.svg       |  72 +++++++
 .../assets/iot-hub/hero-rule-chain-icon-1.svg |  25 ---
 .../assets/iot-hub/hero-rule-chain-icon-2.svg |  25 ---
 .../assets/iot-hub/hero-rule-chain-icon-3.svg |  25 ---
 .../assets/iot-hub/hero-rule-chain-icon-4.svg |  35 ----
 .../hero-solution-template-cluster.svg        |  57 ++++++
 .../iot-hub/hero-solution-template-icon-1.svg |  25 ---
 .../iot-hub/hero-solution-template-icon-2.svg |  25 ---
 .../iot-hub/hero-solution-template-icon-3.svg |  25 ---
 .../iot-hub/hero-solution-template-icon-4.svg |  25 ---
 .../assets/iot-hub/hero-widget-cluster.svg    |  57 ++++++
 .../src/assets/iot-hub/hero-widget-icon-1.svg |  27 ---
 .../src/assets/iot-hub/hero-widget-icon-2.svg |  25 ---
 .../src/assets/iot-hub/hero-widget-icon-3.svg |  35 ----
 .../src/assets/iot-hub/hero-widget-icon-4.svg |  35 ----
 33 files changed, 542 insertions(+), 807 deletions(-)
 create mode 100644 ui-ngx/src/assets/iot-hub/hero-alarm-rule-cluster.svg
 create mode 100644 ui-ngx/src/assets/iot-hub/hero-calculated-field-cluster.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-1.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-2.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-3.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-4.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-dashboard-icon-1.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-dashboard-icon-2.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-dashboard-icon-3.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-dashboard-icon-4.svg
 create mode 100644 ui-ngx/src/assets/iot-hub/hero-device-cluster.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-device-icon-1.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-device-icon-2.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-device-icon-3.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-device-icon-4.svg
 create mode 100644 ui-ngx/src/assets/iot-hub/hero-rule-chain-cluster.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-1.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-2.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-3.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-4.svg
 create mode 100644 ui-ngx/src/assets/iot-hub/hero-solution-template-cluster.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-solution-template-icon-1.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-solution-template-icon-2.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-solution-template-icon-3.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-solution-template-icon-4.svg
 create mode 100644 ui-ngx/src/assets/iot-hub/hero-widget-cluster.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-widget-icon-1.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-widget-icon-2.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-widget-icon-3.svg
 delete mode 100644 ui-ngx/src/assets/iot-hub/hero-widget-icon-4.svg

diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html
index fb4fbab95a..47eb31ecfc 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.html
@@ -16,6 +16,13 @@
 
 -->
 <div class="tb-iot-hub-home">
+  <!-- Soft colored glows (left + right) tinted with the active type's color.
+       Sit on the page background, behind the hero/cards content. -->
+  <div class="tb-iot-hub-blob tb-iot-hub-blob-left"
+       [style.color]="activeHeroType.color"></div>
+  <div class="tb-iot-hub-blob tb-iot-hub-blob-right"
+       [style.color]="activeHeroType.color"></div>
+
   <!-- Installed Items button -->
   @if (installedItemsCount > 0) {
     <button mat-stroked-button color="primary" class="tb-iot-hub-installed-btn" (click)="navigateToInstalledItems()">
@@ -26,23 +33,12 @@
 
   <!-- Hero section -->
   <div class="tb-iot-hub-hero">
-    <!-- Background gradient overlay -->
-    <div class="tb-iot-hub-hero-gradient"
-         [style.background]="'radial-gradient(ellipse at 50% 0%, ' + activeHeroType.gradientColor + ' 0%, transparent 60%)'"></div>
-
-    <!-- Floating icons -->
+    <!-- Floating icons cluster (one composite SVG per type, fade between types) -->
     @for (heroType of heroTypes; track heroType.type) {
-      @if (heroType.icons.length) {
-        <div class="tb-iot-hub-hero-icons"
-             [class.active]="heroIconsReady && activeHeroType === heroType">
-          @for (iconUrl of heroType.icons; track iconUrl; let i = $index) {
-            <div class="tb-iot-hub-hero-float-icon"
-                 [class]="'icon-pos-' + (i + 1)">
-              <img [src]="iconUrl" alt="">
-            </div>
-          }
-        </div>
-      }
+      <div class="tb-iot-hub-hero-icons"
+           [class.active]="heroIconsReady && activeHeroType === heroType">
+        <img class="tb-iot-hub-hero-cluster" [src]="heroType.icon" alt="">
+      </div>
     }
 
     <div class="tb-iot-hub-hero-content">
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss
index a728bf25ec..6f7881799f 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.scss
@@ -29,7 +29,8 @@
   border-radius: 8px;
   overflow: hidden;
 
-  // Dot grid pattern — covers top 800px, fades out via gradient mask
+  // Dot grid pattern — covers top 800px, fades out via gradient mask.
+  // Layered ABOVE the colored blobs so the dots overlay the glow.
   &::before {
     content: '';
     position: absolute;
@@ -42,12 +43,12 @@
     mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
     -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
     pointer-events: none;
-    z-index: 0;
+    z-index: 1;
   }
 
-  > *:not(.tb-iot-hub-installed-btn) {
+  > *:not(.tb-iot-hub-installed-btn):not(.tb-iot-hub-blob) {
     position: relative;
-    z-index: 1;
+    z-index: 2;
   }
 }
 
@@ -56,7 +57,7 @@
   position: absolute;
   top: 24px;
   right: 24px;
-  z-index: 2;
+  z-index: 3;
   background: white;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.08);
 
@@ -73,84 +74,80 @@
   overflow: hidden;
 }
 
-// Animated background gradient
-.tb-iot-hub-hero-gradient {
+// Soft colored glow blobs — direct CSS port of the design's two
+// 568×568 ellipses (Ellipse 399 right, Ellipse 400 left) with layer
+// opacity 0.16. Children of the page container so the halo spreads
+// across the whole page background, not just the hero. Fill comes
+// from the active hero type via `currentColor` (driven by
+// `[style.color]`).
+//
+// The design's "Layer Blur 240" is a Figma renderer parameter — when
+// translated to CSS `filter: blur(<σ>)` the visual match is around
+// σ=120 (Figma's radius is roughly twice the Gaussian σ used by CSS).
+// At σ=240 the kernel reaches well outside the 568px ellipse and peak
+// intensity collapses to ~58 % before opacity is applied, which
+// produced an almost invisible wash. σ=120 keeps the centre near
+// full strength while still spreading the halo across the page.
+.tb-iot-hub-blob {
   position: absolute;
-  inset: 0;
-  transition: background 0.6s ease;
+  width: 568px;
+  height: 568px;
+  border-radius: 50%;
+  background: currentColor;
+  opacity: 0.16;
+  filter: blur(120px);
   pointer-events: none;
+  z-index: 0;
+  transition: color 0.6s ease;
+  will-change: filter;
+}
+
+// Ellipse 400 — top-left corner at (-221, 56) inside the page-container.
+.tb-iot-hub-blob-left {
+  top: 56px;
+  left: -221px;
 }
 
-// Floating icons container per type
+// Ellipse 399 — top-left corner at (1266, 259) inside a 1638-wide
+// page-container. Anchored to the right edge so it stays in place on
+// any viewport width: 1638 - (1266 + 568) = -196.
+.tb-iot-hub-blob-right {
+  top: 259px;
+  right: -196px;
+}
+
+// Floating icons cluster per type — one composite SVG with all icons baked in.
+// Active variant fades in expanding outward from the hero center; inactive
+// variants fade out collapsing back toward the center. This is achieved by
+// uniformly scaling the wrapper around its centre — peripheral icons travel
+// further than central ones, giving the "burst from / collapse to centre"
+// motion shown in the design prototype.
 .tb-iot-hub-hero-icons {
   position: absolute;
   inset: 0;
   pointer-events: none;
+  opacity: 0;
+  transform: scale(0.8);
+  transform-origin: 50% 50%;
+  transition: opacity 0.4s ease-out, transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
 
-  // Icons start near center (translated toward center, scaled down, invisible)
-  .tb-iot-hub-hero-float-icon {
-    opacity: 0;
-    transform: translate(var(--start-x), var(--start-y)) scale(0.9);
-    transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
-  }
-
-  // Active: icons move outward to final position, scale to 1, fully visible
-  &.active .tb-iot-hub-hero-float-icon {
+  &.active {
     opacity: 1;
-    transform: translate(0, 0) scale(1);
+    transform: scale(1);
   }
 }
 
-// Individual floating icon — SVG has rotation/bg/shadow baked in, CSS handles position + animation
-// Base: ≥1600px — 78px top icons (top: 40px), 87px bottom icons (top: 216px, bottom edge: 303px)
-.tb-iot-hub-hero-float-icon {
+// Cluster SVG — sits above the title, centered, scales with viewport.
+// Aspect ratio is preserved by the SVG's intrinsic dimensions.
+.tb-iot-hub-hero-cluster {
   position: absolute;
-  width: 78px;
-  height: 78px;
-
-  img {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
-
-  // Top-left
-  &.icon-pos-1 {
-    top: 40px;
-    left: calc(50% - 404px);
-    --start-x: 40px;
-    --start-y: 12px;
-  }
-
-  // Top-right — mirrors icon-pos-1
-  &.icon-pos-2 {
-    top: 40px;
-    left: auto;
-    right: calc(50% - 404px);
-    --start-x: -40px;
-    --start-y: 12px;
-  }
-
-  // Bottom-left — 87px bounding box
-  &.icon-pos-3 {
-    top: 216px;
-    left: calc(50% - 487px);
-    width: 87px;
-    height: 87px;
-    --start-x: 50px;
-    --start-y: -8px;
-  }
-
-  // Bottom-right — 87px bounding box, mirrors icon-pos-3
-  &.icon-pos-4 {
-    top: 216px;
-    left: auto;
-    right: calc(50% - 487px);
-    width: 87px;
-    height: 87px;
-    --start-x: -45px;
-    --start-y: -4px;
-  }
+  top: 40px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: min(890px, calc(100% - 80px));
+  height: auto;
+  display: block;
+  pointer-events: none;
 }
 
 .tb-iot-hub-hero-content {
@@ -673,60 +670,18 @@
     padding: 64px 24px;
   }
 
-  // Icons: ≥1280px — 69px top (top: 90px), 77px bottom (top: 246px, bottom edge: 323px)
-  .tb-iot-hub-hero-float-icon {
-    width: 69px;
-    height: 69px;
-
-    &.icon-pos-1 {
-      top: 90px;
-      left: 106px;
-    }
-
-    &.icon-pos-2 {
-      top: 90px;
-      left: auto;
-      right: 106px;
-    }
-
-    &.icon-pos-3 {
-      top: 246px;
-      left: 28px;
-      width: 77px;
-      height: 77px;
-    }
-
-    &.icon-pos-4 {
-      top: 246px;
-      left: auto;
-      right: 28px;
-      width: 77px;
-      height: 77px;
-    }
+  // Cluster shrinks with viewport — keep some gutter on the sides
+  .tb-iot-hub-hero-cluster {
+    top: 30px;
+    width: min(900px, calc(100% - 48px));
   }
 }
 
-// ≤959px: only top pair, area width ≤160px (icon 51px + gap + icon 51px)
+// ≤959px: cluster sits closer to the title and uses the full content width
 @media #{$mat-lt-md} {
-  .tb-iot-hub-hero-float-icon {
-    width: 51px;
-    height: 51px;
-
-    &.icon-pos-1 {
-      top: 80px;
-      left: calc(50% - 80px);
-    }
-
-    &.icon-pos-2 {
-      top: 80px;
-      left: auto;
-      right: calc(50% - 80px);
-    }
-
-    &.icon-pos-3,
-    &.icon-pos-4 {
-      display: none;
-    }
+  .tb-iot-hub-hero-cluster {
+    top: 64px;
+    width: calc(100% - 32px);
   }
 }
 
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.ts
index 898230a1e4..53fd0709d9 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-home.component.ts
@@ -44,8 +44,7 @@ interface HeroTypeConfig {
   type: ItemType;
   labelKey: string;
   color: string;
-  gradientColor: string;
-  icons: string[];
+  icon: string;
 }
 
 interface SearchResultGroup {
@@ -76,34 +75,28 @@ export class TbIotHubHomeComponent implements OnInit, OnDestroy {
 
   heroTypes: HeroTypeConfig[] = [
     {
-      type: ItemType.WIDGET, labelKey: 'item.type-widget-plural', color: '#2c9755',
-      gradientColor: 'rgba(44, 151, 85, 0.1)',
-      icons: ['assets/iot-hub/hero-widget-icon-1.svg', 'assets/iot-hub/hero-widget-icon-2.svg', 'assets/iot-hub/hero-widget-icon-3.svg', 'assets/iot-hub/hero-widget-icon-4.svg']
+      type: ItemType.DEVICE, labelKey: 'item.type-device-plural', color: '#4b63cc',
+      icon: 'assets/iot-hub/hero-device-cluster.svg'
     },
     {
-      type: ItemType.SOLUTION_TEMPLATE, labelKey: 'item.type-solution-template-plural', color: '#2666a9',
-      gradientColor: 'rgba(38, 102, 169, 0.1)',
-      icons: ['assets/iot-hub/hero-solution-template-icon-1.svg', 'assets/iot-hub/hero-solution-template-icon-2.svg', 'assets/iot-hub/hero-solution-template-icon-3.svg', 'assets/iot-hub/hero-solution-template-icon-4.svg']
+      type: ItemType.SOLUTION_TEMPLATE, labelKey: 'item.type-solution-template-plural', color: '#2b6bb4',
+      icon: 'assets/iot-hub/hero-solution-template-cluster.svg'
     },
     {
-      type: ItemType.DEVICE, labelKey: 'item.type-device-plural', color: '#4b8a79',
-      gradientColor: 'rgba(75, 138, 121, 0.1)',
-      icons: ['assets/iot-hub/hero-device-icon-1.svg', 'assets/iot-hub/hero-device-icon-2.svg', 'assets/iot-hub/hero-device-icon-3.svg', 'assets/iot-hub/hero-device-icon-4.svg']
+      type: ItemType.WIDGET, labelKey: 'item.type-widget-plural', color: '#2c9755',
+      icon: 'assets/iot-hub/hero-widget-cluster.svg'
     },
     {
-      type: ItemType.CALCULATED_FIELD, labelKey: 'item.type-calculated-field-plural', color: '#006d92',
-      gradientColor: 'rgba(0, 109, 146, 0.1)',
-      icons: ['assets/iot-hub/hero-calculated-field-icon-1.svg', 'assets/iot-hub/hero-calculated-field-icon-2.svg', 'assets/iot-hub/hero-calculated-field-icon-3.svg', 'assets/iot-hub/hero-calculated-field-icon-4.svg']
+      type: ItemType.CALCULATED_FIELD, labelKey: 'item.type-calculated-field-plural', color: '#3cb4e0',
+      icon: 'assets/iot-hub/hero-calculated-field-cluster.svg'
     },
     {
-      type: ItemType.ALARM_RULE, labelKey: 'item.type-alarm-rule-plural', color: '#4d5fd0',
-      gradientColor: 'rgba(77, 95, 208, 0.1)',
-      icons: ['assets/iot-hub/hero-dashboard-icon-1.svg', 'assets/iot-hub/hero-dashboard-icon-2.svg', 'assets/iot-hub/hero-dashboard-icon-3.svg', 'assets/iot-hub/hero-dashboard-icon-4.svg']
+      type: ItemType.ALARM_RULE, labelKey: 'item.type-alarm-rule-plural', color: '#d66f2e',
+      icon: 'assets/iot-hub/hero-alarm-rule-cluster.svg'
     },
     {
-      type: ItemType.RULE_CHAIN, labelKey: 'item.type-rule-chain-plural', color: '#95694b',
-      gradientColor: 'rgba(149, 105, 75, 0.1)',
-      icons: ['assets/iot-hub/hero-rule-chain-icon-1.svg', 'assets/iot-hub/hero-rule-chain-icon-2.svg', 'assets/iot-hub/hero-rule-chain-icon-3.svg', 'assets/iot-hub/hero-rule-chain-icon-4.svg']
+      type: ItemType.RULE_CHAIN, labelKey: 'item.type-rule-chain-plural', color: '#a95ae2',
+      icon: 'assets/iot-hub/hero-rule-chain-cluster.svg'
     }
   ];
 
diff --git a/ui-ngx/src/assets/iot-hub/hero-alarm-rule-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-alarm-rule-cluster.svg
new file mode 100644
index 0000000000..545e7db89b
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-alarm-rule-cluster.svg
@@ -0,0 +1,48 @@
+<svg width="906" height="207" viewBox="0 0 906 207" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8" clip-path="url(#clip0_18447_177232)">
+<path d="M830.233 71.7761L837.336 72.2728L835.871 93.228L828.768 92.7313L830.233 71.7761Z" stroke="#D7702F" stroke-width="3.53684" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M802.531 69.8385L795.427 69.3418L793.962 90.297L801.066 90.7937L802.531 69.8385Z" stroke="#D7702F" stroke-width="3.53684" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M802.296 73.2142L801.302 87.4211L811.602 88.1414L812.099 81.0379L818.706 88.6381L829.006 89.3583L829.999 75.1514L802.296 73.2142Z" stroke="#D7702F" stroke-width="3.53684" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M819.491 107.469C819.273 110.586 816.57 112.936 813.453 112.718C810.337 112.5 807.987 109.797 808.205 106.68C808.423 103.564 814.658 95.4919 814.658 95.4919C814.658 95.4919 819.709 104.353 819.491 107.469Z" stroke="#D7702F" stroke-width="3.53684" stroke-miterlimit="10" stroke-linecap="round"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip1_18447_177232)">
+<path d="M177.821 50.5582C176.919 50.6166 175.993 50.5893 175.05 50.4679C174.902 50.4488 174.753 50.4274 174.604 50.4039C168.699 49.4686 164.124 45.2653 162.431 39.9301C161.484 36.9444 161.624 33.7191 162.699 30.7769L166.707 19.8029L170.82 25.7295C172.44 15.5059 178.342 12.6604 184.965 9.51631C183.842 16.6031 189.303 23.3791 190.763 32.5063C191.383 34.9647 191.34 37.3975 190.769 39.6435" stroke="#D7702F" stroke-width="4.52113" stroke-miterlimit="10"/>
+<path d="M181.264 44.055C182.004 37.5885 176.886 33.5617 176.886 33.5617C176.886 33.5617 170.576 37.1199 169.659 44.0651C169.184 47.0628 171.229 49.8778 174.227 50.3526C175.635 50.5756 177.004 50.2424 178.108 49.5155" stroke="#D7702F" stroke-width="4.52113" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.8">
+<path d="M85.6588 110.96C83.3006 109.05 81.9624 106.581 81.6442 103.554C81.4602 101.803 81.6716 100.13 82.2785 98.536C82.8854 96.9417 83.8263 95.5428 85.1013 94.3393L83.261 76.8304C83.0693 75.0066 83.5447 73.3892 84.6872 71.9783C85.8297 70.5674 87.3129 69.7662 89.1368 69.5745C90.9606 69.3828 92.578 69.8582 93.9888 71.0007C95.3997 72.1432 96.201 73.6264 96.3927 75.4502L98.233 92.9591C99.7303 93.8713 100.941 95.044 101.867 96.4772C102.792 97.9105 103.346 99.5026 103.53 101.253C103.849 104.281 103.053 106.974 101.143 109.332C99.2336 111.69 96.765 113.029 93.7374 113.347C90.7098 113.665 88.0169 112.869 85.6588 110.96ZM89.0184 89.502L93.3957 89.0419L93.1656 86.8533L90.977 87.0834L90.747 84.8948L92.9356 84.6647L92.4755 80.2875L90.2869 80.5175L90.0569 78.3289L92.2455 78.0989L92.0155 75.9103C91.9503 75.2902 91.6859 74.7924 91.2223 74.417C90.7588 74.0416 90.2169 73.8865 89.5968 73.9517C88.9767 74.0169 88.479 74.2812 88.1036 74.7448C87.7282 75.2084 87.5731 75.7502 87.6382 76.3703L89.0184 89.502Z" fill="#D7702F"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip2_18447_177232)">
+<path d="M15.5243 159.232L20.0558 182.545L26.1754 181.355L29.5741 198.84L39.3216 172.751L31.1621 174.338L35.9229 155.267L15.5243 159.232Z" stroke="#D7702F" stroke-width="3.8"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip3_18447_177232)">
+<g clip-path="url(#clip4_18447_177232)">
+<path d="M730.138 38.0198C730.355 39.3866 730.911 40.6904 731.808 41.9311C732.705 43.1717 734.129 44.5962 736.08 46.2046L733.449 49.4974C731.015 47.6337 729.206 45.8737 728.022 44.2176C726.838 42.5615 726.092 40.7623 725.785 38.8199C725.568 37.453 725.547 35.9814 725.722 34.4051C725.896 32.8289 726.271 30.8336 726.848 28.4193C727.375 26.1603 727.707 24.4761 727.845 23.3665C727.983 22.2569 727.98 21.2525 727.838 20.3533C727.621 18.9864 727.047 17.7499 726.116 16.6436C725.185 15.5374 723.731 14.3297 721.754 13.0205L724.28 9.41249C726.751 11.049 728.6 12.6551 729.827 14.2307C731.054 15.8063 731.827 17.6013 732.146 19.6157C732.345 20.8746 732.375 22.225 732.234 23.6669C732.094 25.1087 731.733 27.0188 731.151 29.3971C730.593 31.6977 730.244 33.4492 730.102 34.6515C729.961 35.8539 729.973 36.9766 730.138 38.0198ZM719.617 39.6862C719.833 41.0531 720.399 42.3554 721.314 43.5932C722.229 44.831 723.662 46.2541 725.613 47.8625L722.982 51.1553C720.548 49.2915 718.73 47.533 717.528 45.8798C716.326 44.2265 715.571 42.4287 715.263 40.4863C715.047 39.1194 715.026 37.6478 715.2 36.0716C715.375 34.4953 715.75 32.5 716.326 30.0857C716.853 27.8268 717.186 26.1425 717.323 25.0329C717.461 23.9234 717.459 22.919 717.316 22.0197C717.1 20.6528 716.535 19.4148 715.622 18.3058C714.709 17.1967 713.264 15.9876 711.286 14.6784L713.758 11.0789C716.23 12.7155 718.079 14.3215 719.306 15.8971C720.532 17.4728 721.305 19.2677 721.624 21.2821C721.824 22.541 721.853 23.8914 721.713 25.3333C721.572 26.7751 721.211 28.6852 720.629 31.0635C720.072 33.3641 719.722 35.1156 719.581 36.318C719.44 37.5203 719.451 38.643 719.617 39.6862ZM740.659 36.3533C740.876 37.7202 741.442 39.0226 742.357 40.2604C743.272 41.4982 744.705 42.9213 746.656 44.5297L744.016 47.7685C741.582 45.9047 739.766 44.1552 738.566 42.52C737.367 40.8847 736.614 39.0959 736.306 37.1535C736.09 35.7866 736.069 34.315 736.243 32.7387C736.417 31.1624 736.793 29.1672 737.369 26.7529C737.896 24.4939 738.229 22.8096 738.366 21.7001C738.504 20.5905 738.502 19.5861 738.359 18.6869C738.143 17.32 737.578 16.082 736.665 14.973C735.752 13.8639 734.306 12.6548 732.329 11.3455L734.801 7.74606C737.273 9.38261 739.122 10.9887 740.348 12.5643C741.575 14.1399 742.348 15.9349 742.667 17.9492C742.866 19.2082 742.896 20.5586 742.756 22.0004C742.615 23.4423 742.254 25.3523 741.672 27.7306C741.115 30.0313 740.765 31.7828 740.624 32.9851C740.482 34.1875 740.494 35.3102 740.659 36.3533Z" fill="#D7702F"/>
+</g>
+</g>
+<g opacity="0.8" clip-path="url(#clip5_18447_177232)">
+<path d="M853.158 193.922L852.795 195.788L850.929 195.425L851.292 193.56L853.158 193.922ZM860.337 156.989L858.471 156.626L858.778 155.048L860.385 155.089L860.337 156.989ZM881.257 157.489L881.281 155.588L883.557 155.617L883.123 157.851L881.257 157.489ZM875.456 197.293C875.256 198.324 874.258 198.997 873.228 198.796C872.197 198.596 871.524 197.598 871.725 196.568L873.59 196.931L875.456 197.293ZM892.987 201.664L892.624 203.53L852.795 195.788L853.158 193.922L853.52 192.057L893.35 199.799L892.987 201.664ZM853.158 193.922L851.292 193.56L858.471 156.626L860.337 156.989L862.203 157.351L855.023 194.285L853.158 193.922ZM881.257 157.489L883.123 157.851L875.456 197.293L873.59 196.931L871.725 196.568L879.391 157.126L881.257 157.489ZM860.337 156.989C860.385 155.089 860.385 155.089 860.385 155.089C860.386 155.089 860.386 155.089 860.386 155.089C860.387 155.089 860.387 155.089 860.389 155.089C860.391 155.089 860.394 155.089 860.399 155.089C860.407 155.089 860.421 155.09 860.438 155.09C860.473 155.091 860.525 155.092 860.593 155.094C860.729 155.098 860.928 155.103 861.183 155.109C861.692 155.122 862.423 155.14 863.307 155.163C865.075 155.207 867.459 155.267 869.919 155.327C874.85 155.448 880.063 155.573 881.281 155.588L881.257 157.489L881.233 159.389C879.986 159.373 874.739 159.248 869.826 159.127C867.364 159.067 864.98 159.007 863.211 158.963C862.327 158.94 861.596 158.922 861.087 158.909C860.832 158.903 860.632 158.897 860.497 158.894C860.429 158.892 860.377 158.891 860.342 158.89C860.324 158.89 860.311 158.889 860.302 158.889C860.298 158.889 860.294 158.889 860.292 158.889C860.291 158.889 860.29 158.889 860.289 158.889C860.289 158.889 860.289 158.889 860.289 158.889C860.289 158.889 860.289 158.889 860.337 156.989Z" fill="#D7702F"/>
+<path d="M870.34 174.915L869.237 180.59" stroke="#D7702F" stroke-width="3.8" stroke-miterlimit="10"/>
+<path d="M880.225 161.87L888.571 163.492L881.7 198.841" stroke="#D7702F" stroke-width="3.8"/>
+</g>
+<defs>
+<clipPath id="clip0_18447_177232">
+<rect width="50" height="50" fill="white" transform="translate(791.453 64.7697) scale(1.0003) rotate(4)"/>
+</clipPath>
+<clipPath id="clip1_18447_177232">
+<rect width="50" height="50" fill="white" transform="translate(156.677 0.832284) scale(1.0003) rotate(9)"/>
+</clipPath>
+<clipPath id="clip2_18447_177232">
+<rect width="50" height="50" fill="white" transform="translate(0.0996397 157.712) scale(1.0003) rotate(-11)"/>
+</clipPath>
+<clipPath id="clip3_18447_177232">
+<rect width="50" height="50" fill="white" transform="translate(700.019 8.65497) scale(1.0003) rotate(-9)"/>
+</clipPath>
+<clipPath id="clip4_18447_177232">
+<rect width="44" height="44" fill="white" transform="translate(703.452 11.1479) scale(1.0003) rotate(-9)"/>
+</clipPath>
+<clipPath id="clip5_18447_177232">
+<rect width="50" height="50" fill="white" transform="translate(856.903 148.166) scale(1.0003) rotate(11)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-calculated-field-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-calculated-field-cluster.svg
new file mode 100644
index 0000000000..a5206aa4ea
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-calculated-field-cluster.svg
@@ -0,0 +1,71 @@
+<svg width="1028" height="297" viewBox="0 0 1028 297" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8" clip-path="url(#clip0_18326_154129)">
+<path d="M31.143 134.974C31.433 134.897 31.775 135.012 31.9493 135.276L32.7327 136.465C32.8457 136.694 33.091 136.835 33.3455 136.819C34.0739 136.831 34.7674 136.906 35.438 137.089C35.6572 137.134 35.9474 137.056 36.1149 136.908L37.168 136.004C37.4192 135.781 37.722 135.752 38.0283 135.929L40.1118 137.133C40.4052 137.262 40.5444 137.587 40.477 137.915L40.2198 139.279C40.1396 139.56 40.2526 139.789 40.401 139.956C40.8946 140.446 41.3052 141.009 41.6797 141.634C41.8409 141.85 42.025 141.956 42.2924 141.988L43.7134 142.074C44.0292 142.093 44.3002 142.331 44.3779 142.621L44.9989 144.942C45.0764 145.232 44.9608 145.574 44.6967 145.748L43.5082 146.531C43.2795 146.644 43.138 146.89 43.1541 147.144C43.1419 147.873 43.0676 148.566 42.8845 149.237C42.8396 149.456 42.9173 149.746 43.0656 149.914L43.9215 150.98C44.144 151.231 44.1728 151.534 43.9959 151.84L42.7921 153.923C42.6635 154.217 42.3384 154.356 42.0096 154.289L40.6458 154.031C40.3654 153.951 40.1363 154.064 39.9689 154.213C39.4794 154.706 38.9157 155.117 38.2907 155.491C38.075 155.653 37.9686 155.837 37.9367 156.104L37.8506 157.525C37.8315 157.841 37.5938 158.112 37.304 158.189L34.9833 158.81C34.6933 158.888 34.3514 158.772 34.1771 158.508L33.3927 157.32C33.2797 157.091 33.0346 156.95 32.7799 156.966C32.0516 156.954 31.3588 156.879 30.6883 156.696C30.4692 156.651 30.1789 156.729 30.0114 156.877L28.9583 157.781C28.7071 158.004 28.4035 158.033 28.0971 157.856L26.0145 156.652C25.7211 156.523 25.5819 156.198 25.6493 155.869L25.9547 154.493C26.0349 154.212 25.9219 153.983 25.7735 153.816C25.2799 153.326 24.8693 152.762 24.4948 152.137C24.3336 151.922 24.1495 151.815 23.8821 151.783L22.4611 151.698C22.1453 151.679 21.8743 151.441 21.7966 151.151L21.1756 148.83C21.0981 148.54 21.2137 148.198 21.4778 148.024L22.6664 147.24C22.895 147.127 23.0365 146.882 23.0204 146.628C23.0326 145.899 23.1069 145.206 23.29 144.535C23.3349 144.316 23.2572 144.026 23.1089 143.858L22.1567 142.818C21.9824 142.554 21.9405 142.202 22.0691 141.909L23.2723 139.826C23.4622 139.568 23.7879 139.429 24.1038 139.448L25.4805 139.753C25.761 139.834 25.99 139.721 26.1575 139.572C26.647 139.079 27.2107 138.668 27.8357 138.294C28.0512 138.132 28.1577 137.948 28.1897 137.681L28.2748 136.26C28.2939 135.944 28.5325 135.673 28.8224 135.595L31.143 134.974ZM39.4483 143.5C39.6992 143.973 39.9021 144.481 40.0467 145.022C41.0815 148.888 38.768 152.823 34.9495 153.845C31.9591 154.645 28.8758 153.437 27.182 151.019C28.8756 153.438 31.9591 154.647 34.95 153.847C38.7687 152.825 41.083 148.89 40.0481 145.023C39.9034 144.482 39.6996 143.973 39.4483 143.5ZM31.5345 141.083C28.331 141.941 26.4291 145.233 27.2862 148.436C28.1435 151.64 31.4354 153.542 34.639 152.685C37.8424 151.827 39.7446 148.535 38.8873 145.332C38.0299 142.129 34.7378 140.226 31.5345 141.083ZM26.538 149.89C26.6736 150.187 26.8266 150.471 26.9975 150.741C26.8265 150.471 26.6736 150.187 26.538 149.89Z" fill="#006D92"/>
+<circle opacity="0.16" cx="33.0873" cy="146.885" r="22.5176" transform="rotate(-14.9817 33.0873 146.885)" stroke="#006D92" stroke-width="3"/>
+<circle cx="27.266" cy="125.133" r="4.50352" transform="rotate(-14.9817 27.266 125.133)" fill="#006D92"/>
+<circle cx="11.3356" cy="152.705" r="4.50352" transform="rotate(-14.9817 11.3356 152.705)" fill="#006D92"/>
+<circle cx="38.9079" cy="168.636" r="4.50352" transform="rotate(-14.9817 38.9079 168.636)" fill="#006D92"/>
+<circle cx="54.8403" cy="141.063" r="4.50352" transform="rotate(-14.9817 54.8403 141.063)" fill="#006D92"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip1_18326_154129)">
+<rect opacity="0.16" x="906.708" y="5.05864" width="50.0391" height="50.0391" rx="25" transform="rotate(-5.802 906.708 5.05864)" fill="#006D92"/>
+<path d="M923.887 22.8742L918.918 28.9677L925.011 33.937" stroke="#006D92" stroke-width="2.77778" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M943.246 20.907L949.34 25.8763L944.37 31.9698" stroke="#006D92" stroke-width="2.77778" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M935.77 16.0759L932.486 38.7637" stroke="#006D92" stroke-width="2.77778" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip2_18326_154129)">
+<path opacity="0.16" d="M124.309 10.1822C124.141 10.5892 124.021 11.0239 123.957 11.4801C123.547 14.3993 125.581 17.0983 128.5 17.5085C128.956 17.5727 129.407 17.5771 129.845 17.5278L126.084 44.2885C125.677 44.1204 125.242 44.0005 124.786 43.9363C121.867 43.5261 119.168 45.5599 118.757 48.479C118.693 48.9353 118.689 49.3862 118.738 49.8238L91.9775 46.0629C92.1455 45.6558 92.2655 45.2211 92.3296 44.7649C92.7399 41.8457 90.706 39.1467 87.7869 38.7365C87.3306 38.6723 86.8797 38.6679 86.4421 38.7172L90.2031 11.9565C90.6102 12.1246 91.0448 12.2446 91.5011 12.3087C94.4202 12.7189 97.1192 10.6851 97.5295 7.76596C97.5936 7.30969 97.5981 6.85879 97.5487 6.42118L124.309 10.1822Z" fill="#006D92"/>
+<path opacity="0.4" d="M118.893 47.8243C118.835 48.037 118.789 48.2552 118.757 48.479C118.693 48.9353 118.689 49.3862 118.738 49.8238L91.9775 46.0629C92.1455 45.6558 92.2655 45.2211 92.3296 44.7649C92.3611 44.541 92.3765 44.3185 92.3799 44.0982L118.893 47.8243ZM90.2031 11.9565C90.6102 12.1246 91.0448 12.2446 91.5011 12.3087C91.7249 12.3401 91.9475 12.3555 92.1678 12.359L88.4418 38.8706C88.2291 38.8132 88.0107 38.7679 87.7869 38.7365C87.3306 38.6723 86.8797 38.6679 86.4421 38.7172L90.2031 11.9565ZM126.084 44.2885C125.677 44.1204 125.242 44.0005 124.786 43.9363C124.562 43.9049 124.34 43.8882 124.119 43.8848L127.845 17.3731C128.058 17.4305 128.276 17.4771 128.5 17.5085C128.956 17.5727 129.407 17.5771 129.845 17.5278L126.084 44.2885ZM124.309 10.1822C124.141 10.5892 124.021 11.0239 123.957 11.4801C123.926 11.704 123.91 11.9265 123.907 12.1468L97.3941 8.42067C97.4515 8.20796 97.498 7.98978 97.5295 7.76596C97.5936 7.30969 97.5981 6.85879 97.5487 6.42118L124.309 10.1822Z" fill="#006D92"/>
+<path d="M133.208 12.7758C133.515 10.5865 131.99 8.56224 129.801 8.25454C127.611 7.94685 125.587 9.47224 125.279 11.6616C124.972 13.8509 126.497 15.8752 128.686 16.1829C130.876 16.4906 132.9 14.9652 133.208 12.7758Z" fill="#006D92"/>
+<path d="M128.006 49.7774C128.314 47.588 126.789 45.5638 124.599 45.2561C122.41 44.9484 120.386 46.4738 120.078 48.6631C119.77 50.8525 121.296 52.8767 123.485 53.1844C125.674 53.4921 127.699 51.9667 128.006 49.7774Z" fill="#006D92"/>
+<path d="M91.0088 44.5741C91.3165 42.3848 89.7911 40.3605 87.6017 40.0528C85.4124 39.7451 83.3881 41.2705 83.0804 43.4599C82.7728 45.6492 84.2981 47.6735 86.4875 47.9811C88.6768 48.2888 90.7011 46.7635 91.0088 44.5741Z" fill="#006D92"/>
+<path d="M96.2082 7.57647C96.5158 5.38712 94.9905 3.36286 92.8011 3.05517C90.6118 2.74748 88.5875 4.27286 88.2798 6.46221C87.9721 8.65156 89.4975 10.6758 91.6869 10.9835C93.8762 11.2912 95.9005 9.76582 96.2082 7.57647Z" fill="#006D92"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip3_18326_154129)">
+<rect x="994.063" y="125.172" width="21.35" height="16.0125" rx="1.33333" transform="rotate(12 994.063 125.172)" fill="#006D92"/>
+<path opacity="0.16" fill-rule="evenodd" clip-rule="evenodd" d="M1000.27 143.379C1000.81 143.028 1001.53 143.182 1001.88 143.723C1001.89 143.73 1001.89 143.738 1001.89 143.745L1004.96 148.471C1005.31 149.012 1005.16 149.736 1004.62 150.087C1004.08 150.438 1003.36 150.284 1003 149.743L1001.49 147.411C1000.95 150.973 1001.43 153.294 1002.33 154.901C1003.36 156.738 1005.05 157.854 1006.99 158.798C1007.98 159.282 1008.92 159.667 1009.93 160.127C1010.89 160.566 1011.86 161.053 1012.69 161.666C1013.52 162.288 1014.25 163.076 1014.67 164.131C1015.08 165.189 1015.15 166.399 1014.85 167.785C1014.72 168.416 1014.1 168.818 1013.47 168.684C1012.84 168.55 1012.43 167.93 1012.57 167.3C1012.79 166.252 1012.71 165.526 1012.49 164.99C1012.28 164.452 1011.89 163.986 1011.29 163.538C1010.68 163.081 1009.9 162.678 1008.96 162.252C1008.08 161.848 1006.98 161.39 1005.97 160.898C1003.89 159.888 1001.67 158.51 1000.29 156.042C1000.12 155.733 999.961 155.409 999.818 155.071L996.772 169.402C996.638 170.032 996.018 170.435 995.387 170.301C994.757 170.166 994.354 169.547 994.487 168.916L997.533 154.585C997.266 154.836 996.989 155.068 996.705 155.281C994.439 156.973 991.854 157.331 989.547 157.409C988.421 157.447 987.232 157.418 986.258 157.427C985.233 157.437 984.356 157.487 983.61 157.656C982.879 157.821 982.332 158.087 981.918 158.492C981.507 158.895 981.136 159.525 980.914 160.573C980.779 161.203 980.159 161.605 979.529 161.471C978.898 161.337 978.495 160.718 978.629 160.087C978.924 158.701 979.472 157.62 980.285 156.824C981.096 156.03 982.081 155.607 983.096 155.377C984.096 155.152 985.181 155.102 986.237 155.092C987.345 155.081 988.361 155.112 989.468 155.075C991.625 155.003 993.622 154.67 995.308 153.41C996.784 152.308 998.168 150.382 999.121 146.908L996.79 148.422C996.25 148.773 995.526 148.619 995.175 148.078C994.824 147.537 994.977 146.814 995.518 146.463L1000.27 143.379Z" fill="#006D92"/>
+<path d="M996.334 161.502C996.924 161.119 997.712 161.287 998.095 161.876L1002.25 168.28C1002.64 168.87 1002.47 169.658 1001.88 170.041L995.475 174.199C994.886 174.582 994.098 174.414 993.715 173.825L989.556 167.421C989.173 166.832 989.341 166.044 989.93 165.661L996.334 161.502Z" fill="#006D92"/>
+<path d="M979.368 157.898C979.957 157.515 980.745 157.682 981.128 158.272L985.287 164.676C985.67 165.265 985.502 166.053 984.913 166.436L978.509 170.595C977.919 170.978 977.131 170.81 976.749 170.221L972.59 163.817C972.207 163.227 972.375 162.439 972.964 162.056L979.368 157.898Z" fill="#006D92"/>
+<path d="M1013.3 165.11C1013.89 164.728 1014.68 164.895 1015.06 165.485L1019.22 171.888C1019.6 172.478 1019.44 173.266 1018.85 173.649L1012.44 177.807C1011.85 178.19 1011.07 178.023 1010.68 177.433L1006.52 171.029C1006.14 170.44 1006.31 169.652 1006.9 169.269L1013.3 165.11Z" fill="#006D92"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip4_18326_154129)">
+<path opacity="0.16" d="M936.524 251.63L925.971 266.702" stroke="#006D92" stroke-width="2.88889" stroke-linecap="round"/>
+<path opacity="0.16" d="M942.218 250.625L957.29 261.178" stroke="#006D92" stroke-width="2.88889" stroke-linecap="round"/>
+<path d="M921.48 263.499C921.917 262.875 922.776 262.723 923.4 263.16L930.176 267.905C930.8 268.341 930.951 269.201 930.515 269.825L925.77 276.601C925.333 277.225 924.474 277.376 923.85 276.939L917.074 272.195C916.45 271.758 916.299 270.898 916.735 270.275L921.48 263.499Z" fill="#006D92"/>
+<path d="M958.495 256.974C958.932 256.35 959.792 256.199 960.415 256.635L967.191 261.38C967.815 261.817 967.967 262.676 967.53 263.3L962.785 270.076C962.349 270.7 961.489 270.851 960.865 270.415L954.089 265.67C953.465 265.233 953.314 264.374 953.751 263.75L958.495 256.974Z" fill="#006D92"/>
+<path d="M936.724 241.728C937.161 241.104 938.021 240.952 938.644 241.389L945.42 246.134C946.044 246.571 946.196 247.43 945.759 248.054L941.014 254.83C940.578 255.454 939.718 255.605 939.094 255.168L932.318 250.424C931.694 249.987 931.543 249.127 931.98 248.504L936.724 241.728Z" fill="#006D92"/>
+<path d="M943.774 269.433C944.059 269.383 944.377 269.522 944.522 269.79L945.175 270.996C945.265 271.225 945.488 271.381 945.733 271.387C946.431 271.459 947.09 271.588 947.718 271.82C947.925 271.881 948.209 271.831 948.382 271.703L949.469 270.924C949.728 270.731 950.021 270.729 950.3 270.924L952.198 272.254C952.469 272.402 952.575 272.725 952.483 273.035L952.123 274.321C952.022 274.583 952.112 274.813 952.24 274.986C952.673 275.497 953.019 276.072 953.326 276.703C953.463 276.923 953.63 277.041 953.884 277.094L955.24 277.294C955.542 277.339 955.782 277.591 955.832 277.876L956.234 280.153C956.284 280.438 956.144 280.756 955.876 280.901L954.671 281.554C954.442 281.643 954.285 281.867 954.28 282.112C954.207 282.81 954.078 283.469 953.847 284.097C953.785 284.303 953.835 284.588 953.964 284.761L954.695 285.856C954.887 286.115 954.89 286.408 954.694 286.687L953.366 288.585C953.218 288.856 952.894 288.962 952.584 288.87L951.297 288.51C951.035 288.41 950.806 288.499 950.633 288.627C950.122 289.06 949.547 289.406 948.916 289.713C948.696 289.85 948.579 290.017 948.525 290.271L948.324 291.628C948.279 291.929 948.028 292.169 947.744 292.219L945.465 292.621C945.181 292.671 944.863 292.531 944.718 292.263L944.064 291.058C943.975 290.829 943.752 290.673 943.506 290.667C942.808 290.594 942.149 290.466 941.521 290.234C941.315 290.173 941.03 290.223 940.857 290.351L939.772 291.129C939.512 291.321 939.218 291.324 938.939 291.129L937.042 289.8C936.771 289.652 936.665 289.328 936.757 289.019L937.165 287.723C937.265 287.461 937.176 287.232 937.048 287.059C936.615 286.548 936.269 285.973 935.962 285.342C935.825 285.122 935.658 285.004 935.404 284.951L934.047 284.75C933.746 284.705 933.506 284.454 933.456 284.169L933.054 281.892C933.004 281.607 933.143 281.289 933.411 281.143L934.617 280.491C934.846 280.402 935.002 280.178 935.008 279.933C935.081 279.235 935.209 278.576 935.441 277.948C935.503 277.742 935.452 277.456 935.324 277.283L934.498 276.206C934.353 275.938 934.342 275.597 934.49 275.326L935.818 273.429C936.022 273.197 936.346 273.091 936.648 273.136L937.942 273.544C938.205 273.644 938.434 273.555 938.607 273.426C939.118 272.994 939.694 272.647 940.324 272.341C940.545 272.204 940.662 272.036 940.715 271.782L940.916 270.426C940.96 270.125 941.212 269.885 941.497 269.834L943.774 269.433ZM944.015 287.931C944.069 287.936 944.122 287.941 944.175 287.945C944.122 287.941 944.069 287.936 944.015 287.931ZM943.641 275.328C940.496 275.883 938.396 278.883 938.95 282.028C939.505 285.172 942.504 287.272 945.649 286.717C948.794 286.163 950.893 283.164 950.339 280.019C949.785 276.875 946.786 274.774 943.641 275.328ZM939.898 286.085C940.023 286.202 940.153 286.312 940.286 286.419C940.154 286.312 940.023 286.202 939.899 286.086L939.898 286.085ZM939.118 285.218C939.287 285.44 939.467 285.652 939.66 285.851L939.433 285.605C939.323 285.481 939.219 285.351 939.118 285.218ZM943.439 274.189C939.69 274.85 937.141 278.431 937.81 282.228C937.969 283.126 938.295 283.95 938.747 284.678C938.295 283.951 937.97 283.127 937.811 282.228C937.142 278.432 939.691 274.851 943.44 274.19C943.665 274.15 943.889 274.121 944.113 274.104C943.889 274.121 943.664 274.149 943.439 274.189ZM949.157 275.752C949.449 276.001 949.718 276.276 949.966 276.572C949.718 276.276 949.448 276.001 949.157 275.752ZM947.523 274.711C947.667 274.778 947.809 274.849 947.949 274.925C947.809 274.849 947.667 274.778 947.523 274.711ZM944.183 274.099C945.215 274.03 946.222 274.193 947.145 274.551C946.222 274.193 945.215 274.03 944.183 274.099Z" fill="#006D92"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip5_18326_154129)">
+<path opacity="0.16" d="M96.5152 259.631L111.363 263.258C112.207 263.464 113.098 263.327 113.841 262.876C114.583 262.425 115.116 261.697 115.322 260.853L118.949 246.005C119.155 245.161 119.018 244.27 118.567 243.528C118.116 242.785 117.388 242.253 116.544 242.046L101.696 238.42C100.852 238.214 99.9612 238.351 99.2187 238.802C98.4763 239.253 97.9434 239.98 97.7373 240.824L94.1106 255.673C93.9045 256.516 94.0421 257.408 94.493 258.15C94.944 258.892 95.6714 259.425 96.5152 259.631Z" fill="#006D92"/>
+<path d="M101.487 248.484L112.093 251.075C112.374 251.143 112.616 251.321 112.767 251.568C112.917 251.816 112.963 252.113 112.894 252.394C112.825 252.676 112.648 252.918 112.4 253.068C112.153 253.219 111.856 253.264 111.574 253.196L100.969 250.605C100.687 250.537 100.445 250.359 100.294 250.111C100.144 249.864 100.098 249.567 100.167 249.286C100.236 249.004 100.413 248.762 100.661 248.612C100.908 248.461 101.205 248.415 101.487 248.484Z" fill="#006D92"/>
+<path opacity="0.16" d="M141.998 248.262L127.15 244.636C126.306 244.429 125.415 244.567 124.672 245.018C123.93 245.469 123.397 246.196 123.191 247.04L119.564 261.888C119.358 262.732 119.496 263.623 119.946 264.366C120.397 265.108 121.125 265.641 121.969 265.847L136.817 269.474C137.661 269.68 138.552 269.542 139.294 269.091C140.037 268.641 140.57 267.913 140.776 267.069L144.402 252.221C144.609 251.377 144.471 250.486 144.02 249.744C143.569 249.001 142.842 248.468 141.998 248.262Z" fill="#006D92"/>
+<path d="M137.029 259.413L132.786 258.377L131.75 262.62C131.681 262.901 131.504 263.143 131.256 263.294C131.009 263.444 130.712 263.49 130.43 263.421C130.149 263.352 129.907 263.175 129.756 262.927C129.606 262.68 129.56 262.383 129.629 262.102L130.665 257.859L126.423 256.823C126.141 256.754 125.899 256.577 125.749 256.329C125.598 256.082 125.552 255.785 125.621 255.503C125.69 255.222 125.868 254.98 126.115 254.829C126.362 254.679 126.66 254.633 126.941 254.702L131.183 255.738L132.219 251.496C132.288 251.214 132.466 250.972 132.713 250.822C132.961 250.671 133.258 250.625 133.539 250.694C133.82 250.763 134.063 250.94 134.213 251.188C134.363 251.435 134.409 251.732 134.341 252.014L133.304 256.256L137.547 257.292C137.828 257.361 138.07 257.539 138.221 257.786C138.371 258.034 138.417 258.331 138.348 258.612C138.28 258.893 138.102 259.136 137.854 259.286C137.607 259.436 137.31 259.482 137.029 259.413Z" fill="#006D92"/>
+<path opacity="0.16" d="M105.146 288.712C105.99 288.918 106.881 288.78 107.623 288.329C108.366 287.878 108.898 287.151 109.105 286.307L112.731 271.459C112.937 270.615 112.8 269.724 112.349 268.981C111.898 268.239 111.17 267.706 110.327 267.5L95.4784 263.873C94.6346 263.667 93.7434 263.805 93.001 264.256C92.2585 264.707 91.7257 265.434 91.5195 266.278L87.8929 281.126C87.6868 281.97 87.8243 282.861 88.2753 283.603C88.7262 284.346 89.4536 284.879 90.2975 285.085L105.146 288.712Z" fill="#006D92"/>
+<path d="M96.5481 272.193C96.424 271.948 96.3969 271.665 96.4724 271.4C96.5479 271.136 96.7204 270.91 96.9554 270.767C97.1905 270.624 97.4707 270.575 97.7401 270.63C98.0096 270.685 98.2484 270.84 98.4088 271.063L100.677 274.798L104.412 272.529C104.657 272.405 104.94 272.378 105.205 272.453C105.469 272.529 105.695 272.701 105.838 272.936C105.981 273.171 106.03 273.452 105.975 273.721C105.92 273.991 105.765 274.229 105.542 274.39L101.807 276.658L104.076 280.393C104.225 280.64 104.27 280.936 104.201 281.216C104.133 281.496 103.957 281.738 103.71 281.888C103.463 282.037 103.168 282.082 102.887 282.014C102.607 281.946 102.365 281.769 102.215 281.523L99.9467 277.788L96.2121 280.057C95.9651 280.206 95.6693 280.251 95.3891 280.183C95.1089 280.114 94.8672 279.938 94.7167 279.691C94.5677 279.445 94.5225 279.149 94.5909 278.868C94.6593 278.588 94.8359 278.347 95.0819 278.196L98.8165 275.928L96.5481 272.193Z" fill="#006D92"/>
+<path opacity="0.16" d="M135.782 273.716L120.934 270.089C120.09 269.883 119.199 270.02 118.456 270.471C117.714 270.922 117.181 271.65 116.975 272.494L113.348 287.342C113.142 288.186 113.28 289.077 113.731 289.819C114.182 290.562 114.909 291.095 115.753 291.301L130.601 294.927C131.445 295.133 132.336 294.996 133.079 294.545C133.821 294.094 134.354 293.367 134.56 292.523L138.187 277.675C138.393 276.831 138.255 275.94 137.804 275.197C137.353 274.455 136.626 273.922 135.782 273.716Z" fill="#006D92"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M120.204 282.275L130.81 284.866C131.091 284.934 131.388 284.889 131.636 284.738C131.883 284.588 132.061 284.346 132.13 284.064C132.198 283.783 132.152 283.486 132.002 283.238C131.852 282.991 131.609 282.813 131.328 282.745L120.722 280.154C120.441 280.085 120.144 280.131 119.896 280.282C119.649 280.432 119.471 280.674 119.403 280.956C119.334 281.237 119.38 281.534 119.53 281.781C119.68 282.029 119.923 282.207 120.204 282.275Z" fill="#006D92"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M127.607 277.53C127.461 277.371 127.271 277.258 127.061 277.207C126.78 277.138 126.483 277.184 126.235 277.334C125.988 277.485 125.81 277.727 125.742 278.009C125.69 278.218 125.703 278.439 125.776 278.641C125.85 278.844 125.983 279.021 126.157 279.148C126.331 279.276 126.539 279.349 126.755 279.358C126.971 279.368 127.184 279.313 127.369 279.201C127.554 279.089 127.701 278.924 127.792 278.729C127.883 278.533 127.914 278.314 127.881 278.101C127.848 277.888 127.753 277.689 127.607 277.53Z" fill="#006D92"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M123.797 287.319C123.947 287.567 124.19 287.744 124.471 287.813C124.752 287.882 125.049 287.836 125.297 287.685C125.544 287.535 125.722 287.293 125.79 287.011C125.859 286.73 125.813 286.433 125.663 286.186C125.513 285.938 125.27 285.76 124.989 285.692C124.708 285.623 124.411 285.669 124.163 285.819C123.916 285.969 123.738 286.212 123.669 286.493C123.601 286.775 123.646 287.072 123.797 287.319Z" fill="#006D92"/>
+</g>
+<defs>
+<clipPath id="clip0_18326_154129">
+<rect width="54" height="54" fill="white" transform="translate(0 127.768) scale(1.00078) rotate(-14.9817)"/>
+</clipPath>
+<clipPath id="clip1_18326_154129">
+<rect width="50" height="50" fill="white" transform="translate(906.708 5.05864) scale(1.00078) rotate(-5.802)"/>
+</clipPath>
+<clipPath id="clip2_18326_154129">
+<rect width="48" height="48" fill="white" transform="translate(87.7013 0.992963) scale(1.00078) rotate(8)"/>
+</clipPath>
+<clipPath id="clip3_18326_154129">
+<rect width="48" height="48" fill="white" transform="translate(981.012 122.396) scale(1.00078) rotate(12)"/>
+</clipPath>
+<clipPath id="clip4_18326_154129">
+<rect width="52" height="52" fill="white" transform="translate(911.989 245.68) scale(1.00078) rotate(-10)"/>
+</clipPath>
+<clipPath id="clip5_18326_154129">
+<rect width="48" height="48" fill="white" transform="translate(98.5144 237.643) scale(1.00078) rotate(13.7257)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-1.svg b/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-1.svg
deleted file mode 100644
index 7734b75c7a..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-1.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17168_73615)">
-<rect y="7.87372" width="64.6079" height="64.6079" rx="5.99735" transform="rotate(-7 0 7.87372)" fill="#3DB5E0"/>
-<rect x="0.556962" y="8.30886" width="63.6083" height="63.6083" rx="5.49758" transform="rotate(-7 0.556962 8.30886)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M35.1984 24.7853C33.433 24.841 32.0513 26.3156 32.1089 28.0969L32.2753 32.7325L36.7511 32.1829L37.1409 35.3572L32.3794 35.9419L32.6691 44.0745C32.7131 45.4147 32.3348 46.7348 31.5879 47.8484C30.8409 48.962 29.7629 49.8127 28.5062 50.2804C27.2495 50.7481 25.8776 50.8091 24.5843 50.4549C23.291 50.1006 22.1418 49.3489 21.2989 48.3061L23.3873 45.633C24.1157 47.2352 26.0241 47.9514 27.6085 47.2091C28.7997 46.6762 29.5382 45.4739 29.4914 44.1747L29.2051 36.3316L24.4436 36.9162L24.0539 33.7419L29.101 33.1222L28.9313 28.197C28.8705 26.5005 29.485 24.8492 30.64 23.605C31.7949 22.3609 33.3961 21.6255 35.0924 21.5601C37.1136 21.4891 39.0594 22.378 40.3174 23.9635L38.229 26.6365C37.6821 25.4631 36.4976 24.7386 35.1984 24.7853ZM52.0325 36.187L49.5199 34.2239L45.5797 39.2671L40.5366 35.3269L38.5417 37.8435L43.6205 41.8115L39.6447 46.8268L42.1891 48.786L46.1293 43.7429L51.1724 47.683L53.1356 45.1704L48.0963 41.2619L52.0325 36.187Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17168_73615" x="0" y="-2.01894" width="71.9999" height="76.038" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73615"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17168_73615" result="effect2_innerShadow_17168_73615"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-2.svg b/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-2.svg
deleted file mode 100644
index ac28694c40..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-2.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17168_73617)">
-<rect x="7.87372" width="64.6079" height="64.6079" rx="5.99735" transform="rotate(7 7.87372 0)" fill="#3DB5E0"/>
-<rect x="8.30886" y="0.556962" width="63.6083" height="63.6083" rx="5.49758" transform="rotate(7 8.30886 0.556962)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M25.4671 42.531L18.5057 33.6208L27.4159 26.6594L29.3651 29.1543L22.9895 34.1713L27.962 40.5818L25.4671 42.531ZM31.8869 48.6358L28.9882 47.3133L40.042 22.8931L42.9407 24.2157L31.8869 48.6358ZM44.513 44.8695L42.5638 42.3747L48.9395 37.3576L43.9669 30.9471L46.4618 28.998L53.4232 37.9081L44.513 44.8695Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17168_73617" x="-0.000682753" y="-2.019" width="71.9999" height="76.038" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73617"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17168_73617" result="effect2_innerShadow_17168_73617"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-3.svg b/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-3.svg
deleted file mode 100644
index 860997b4a5..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-3.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17168_73619)">
-<rect y="13.3225" width="64.0777" height="64.0777" rx="5.99735" transform="rotate(-12 0 13.3225)" fill="#3DB5E0"/>
-<rect x="0.592768" y="13.7075" width="63.0782" height="63.0782" rx="5.49758" transform="rotate(-12 0.592768 13.7075)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M43.7844 43.2607L53.4895 44.4489C53.8664 44.4951 54.1725 44.7757 54.2514 45.1473C54.3302 45.5189 54.1643 45.8996 53.8385 46.0947L41.3325 53.5851C41.2477 53.6358 41.1557 53.6718 41.0603 53.6921C40.9648 53.7124 40.8658 53.7169 40.7674 53.7049L26.3424 51.9388C25.9654 51.8927 25.6592 51.612 25.5805 51.2405C25.5017 50.8689 25.6676 50.4883 25.9934 50.2931L34.3836 45.2678C34.0445 44.9759 33.6996 44.674 33.352 44.3629C29.0983 40.5547 26.6842 37.4136 26.1769 35.0269C24.9501 29.2551 28.6476 23.5614 34.4193 22.3346C40.191 21.1078 45.8847 24.8053 47.1116 30.5771C47.6189 32.9638 46.691 36.8152 44.354 42.0243C44.1646 42.4464 43.9739 42.8591 43.7844 43.2607ZM40.6804 51.9023L29.1294 50.4881L35.8244 46.4781C37.8461 48.1358 39.3934 49.2437 39.4818 49.3069C39.6849 49.4518 39.9394 49.5048 40.1835 49.4529C40.4275 49.401 40.6385 49.2491 40.7651 49.0341C40.8203 48.9403 41.7859 47.294 42.961 44.9518L50.7024 45.8996L40.6804 51.9023ZM37.4863 36.7637C39.9517 36.2396 41.5311 33.8076 41.0071 31.3421C40.483 28.8767 38.051 27.2973 35.5855 27.8213C33.1201 28.3454 31.5407 30.7774 32.0647 33.2429C32.5888 35.7083 35.0209 37.2877 37.4863 36.7637Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17168_73619" x="0" y="-2.00249" width="76.0007" height="80.0049" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73619"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17168_73619" result="effect2_innerShadow_17168_73619"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-4.svg b/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-4.svg
deleted file mode 100644
index 356d5dece0..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-4.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17168_73621)">
-<rect x="13.3225" width="64.0777" height="64.0777" rx="5.99735" transform="rotate(12 13.3225 0)" fill="#3DB5E0"/>
-<rect x="13.7075" y="0.592768" width="63.0782" height="63.0782" rx="5.49758" transform="rotate(12 13.7075 0.592768)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M38.2146 39.8171C38.4213 39.8611 38.5992 40.0431 38.6245 40.2644L38.7366 41.2609C38.7344 41.4404 38.8429 41.6083 39.0077 41.6795C39.4608 41.9199 39.8726 42.1876 40.2349 42.5167C40.3581 42.6149 40.5654 42.659 40.7179 42.6194L41.6673 42.3887C41.8958 42.3293 42.0957 42.4079 42.2314 42.6163L43.1544 44.0375C43.2974 44.2119 43.2808 44.4609 43.1337 44.6457L42.5367 45.42C42.3969 45.5701 42.3947 45.7498 42.4342 45.9021C42.5875 46.3669 42.6645 46.8522 42.6998 47.3638C42.7321 47.5506 42.8136 47.6769 42.971 47.7824L43.8357 48.2901C44.0278 48.403 44.1222 48.6399 44.0784 48.8466L43.7268 50.5009C43.6828 50.7078 43.5002 50.8856 43.2787 50.9106L42.2822 51.0227C42.1029 51.0207 41.9356 51.1294 41.8645 51.294C41.624 51.7472 41.3564 52.1589 41.0272 52.5212C40.9291 52.6443 40.8852 52.8517 40.9246 53.0042L41.1207 53.9462C41.1801 54.175 41.1012 54.3744 40.8922 54.5102L39.4709 55.4332C39.2965 55.5761 39.0484 55.5598 38.8636 55.4127L38.0894 54.8156C37.9391 54.6759 37.7587 54.6733 37.6063 54.7129C37.1415 54.8662 36.6565 54.9433 36.1447 54.9786C35.9581 55.0109 35.8324 55.0925 35.7269 55.2499L35.2192 56.1146C35.1063 56.3068 34.8696 56.4013 34.6627 56.3574L33.0084 56.0057C32.8017 55.9616 32.6237 55.779 32.5987 55.5577L32.4866 54.5612C32.4885 54.3818 32.38 54.2145 32.2153 54.1434C31.7623 53.903 31.3503 53.6352 30.9881 53.3062C30.8649 53.2081 30.6575 53.1639 30.5051 53.2035L29.5558 53.4342C29.327 53.4936 29.1275 53.4147 28.9918 53.2058L28.0688 51.7845C27.9261 51.61 27.9422 51.361 28.0895 51.1763L28.721 50.4103C28.8609 50.2599 28.8633 50.0797 28.8237 49.9272C28.6704 49.4624 28.5933 48.9773 28.558 48.4656C28.5256 48.2789 28.4434 48.1531 28.2858 48.0477L27.4211 47.5399C27.2292 47.4269 27.1353 47.1903 27.1792 46.9836L27.5308 45.3293C27.5749 45.1228 27.7569 44.9446 27.9781 44.9195L28.9746 44.8074C29.1542 44.8096 29.3223 44.7004 29.3934 44.5354C29.6338 44.0823 29.9015 43.6704 30.2306 43.3082C30.3285 43.1849 30.3726 42.9783 30.3331 42.826L30.0679 41.8685C30.0432 41.6472 30.1293 41.4136 30.3036 41.2707L31.7248 40.3477C31.9263 40.2466 32.1747 40.2631 32.3668 40.3756L33.1337 41.0073C33.2839 41.1471 33.4635 41.1493 33.6158 41.1098C34.0806 40.9565 34.5658 40.8794 35.0775 40.8441C35.2645 40.8118 35.3907 40.7298 35.4963 40.5721L36.004 39.7074C36.117 39.5156 36.3537 39.4217 36.5603 39.4655L38.2146 39.8171ZM36.5077 43.7783C34.2234 43.2932 31.9781 44.7513 31.4922 47.0354C31.0066 49.3199 32.4648 51.5658 34.7491 52.0517C37.0338 52.5373 39.28 51.0787 39.7656 48.794C40.2508 46.5095 38.7922 44.2639 36.5077 43.7783ZM41.0261 19.0986C41.4931 18.7953 42.1174 18.928 42.4207 19.395L45.7159 24.4692C46.0191 24.9363 45.8865 25.5606 45.4195 25.8639L43.7685 26.9353L49.9615 36.4717L51.6125 35.4003C52.0794 35.0973 52.7038 35.2301 53.0072 35.6968L56.3024 40.771C56.6057 41.2381 56.4728 41.8632 56.0058 42.1665L50.9316 45.4617C50.4646 45.7647 49.8402 45.6321 49.5369 45.1653L46.2417 40.0911C45.9384 39.624 46.0712 38.9989 46.5383 38.6956L48.1876 37.6238L41.9945 28.0873L40.3453 29.1591C39.8783 29.4624 39.254 29.3296 38.9506 28.8627L37.879 27.2125L28.3426 33.4056L29.4142 35.0557C29.7174 35.5228 29.5846 36.1479 29.1176 36.4512L24.0433 39.7464C23.5763 40.0497 22.9512 39.9168 22.6478 39.4498L19.3526 34.3756C19.0493 33.9085 19.1822 33.2834 19.6492 32.9801L24.7235 29.6849C25.1905 29.3816 25.8156 29.5144 26.1189 29.9815L27.1905 31.6316L36.727 25.4386L35.6554 23.7884C35.3521 23.3214 35.4848 22.6971 35.9518 22.3938L41.0261 19.0986Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17168_73621" x="-0.00030061" y="-2.00243" width="76.0007" height="80.0048" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73621"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17168_73621" result="effect2_innerShadow_17168_73621"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-dashboard-icon-1.svg b/ui-ngx/src/assets/iot-hub/hero-dashboard-icon-1.svg
deleted file mode 100644
index 85f1a39345..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-dashboard-icon-1.svg
+++ /dev/null
@@ -1,30 +0,0 @@
-<svg width="74" height="74" viewBox="0 0 74 74" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_16977_25520)">
-<rect y="8.09243" width="66.4025" height="66.4025" rx="6.15549" transform="rotate(-7 0 8.09243)" fill="#4D5FD0"/>
-<rect x="0.571648" y="8.53905" width="65.3766" height="65.3766" rx="5.64254" transform="rotate(-7 0.571648 8.53905)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
-<g clip-path="url(#clip0_16977_25520)">
-<path d="M22.2504 40.5849L35.2946 38.9833L33.2925 22.678L20.2483 24.2796L22.2504 40.5849ZM23.852 53.6291L36.8962 52.0275L35.695 42.2443L22.6508 43.846L23.852 53.6291ZM40.1573 51.6271L53.2015 50.0254L51.1994 33.7202L38.1552 35.3218L40.1573 51.6271ZM36.5536 22.2776L37.7548 32.0608L50.799 30.4591L49.5978 20.676L36.5536 22.2776Z" fill="white"/>
-</g>
-</g>
-<defs>
-<filter id="filter0_ii_16977_25520" x="0" y="-2.07526" width="74.0009" height="78.1511" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-2.05183"/>
-<feGaussianBlur stdDeviation="4.10366"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25520"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2.05183"/>
-<feGaussianBlur stdDeviation="4.10366"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_16977_25520" result="effect2_innerShadow_16977_25520"/>
-</filter>
-<clipPath id="clip0_16977_25520">
-<rect width="38.9848" height="38.9848" fill="white" transform="translate(14.7591 19.9894) scale(1.01133) rotate(-7)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-dashboard-icon-2.svg b/ui-ngx/src/assets/iot-hub/hero-dashboard-icon-2.svg
deleted file mode 100644
index ff17afc8fb..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-dashboard-icon-2.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="73" height="73" viewBox="0 0 73 73" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_16977_25524)">
-<rect x="6.94288" width="66.421" height="66.421" rx="6.15549" transform="rotate(6 6.94288 0)" fill="#4D5FD0"/>
-<rect x="7.39941" y="0.563767" width="65.3951" height="65.3951" rx="5.64254" transform="rotate(6 7.39941 0.563767)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
-<path d="M21.3893 36.7069L20.1869 48.1464L49.603 51.2382L49.8606 48.7869L36.355 35.8014L28.8734 44.1026L21.3893 36.7069ZM22.4199 26.9015L28.4415 32.4912L37.815 21.9105L45.299 29.3062L51.8359 29.9933L50.2952 44.6523L36.1891 31.0915L28.7436 39.3634L21.829 32.5232L22.4199 26.9015Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_16977_25524" x="-8.96633e-05" y="-2.07566" width="73" height="77.1513" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-2.05183"/>
-<feGaussianBlur stdDeviation="4.10366"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25524"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2.05183"/>
-<feGaussianBlur stdDeviation="4.10366"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_16977_25524" result="effect2_innerShadow_16977_25524"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-dashboard-icon-3.svg b/ui-ngx/src/assets/iot-hub/hero-dashboard-icon-3.svg
deleted file mode 100644
index 36ec0aca84..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-dashboard-icon-3.svg
+++ /dev/null
@@ -1,30 +0,0 @@
-<svg width="78" height="78" viewBox="0 0 78 78" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_16977_25528)">
-<rect y="13.6731" width="65.764" height="65.764" rx="6.15549" transform="rotate(-12 0 13.6731)" fill="#4D5FD0"/>
-<rect x="0.608399" y="14.0682" width="64.7381" height="64.7381" rx="5.64254" transform="rotate(-12 0.608399 14.0682)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
-<g clip-path="url(#clip0_16977_25528)">
-<path d="M41.5261 35.0451L37.9298 34.246L40.8901 32.0532L41.6892 28.4569L43.882 31.4173L47.4783 32.2164L44.5179 34.4092L43.7188 38.0055L41.5261 35.0451ZM26.8897 44.9092L27.6889 41.3129L30.6492 39.1202L27.0529 38.3211L24.8601 35.3607L24.061 38.957L21.1007 41.1498L24.697 41.9489L26.8897 44.9092ZM32.3598 35.4299L33.2792 31.2259L36.7458 28.676L32.5418 27.7566L29.9919 24.29L29.0725 28.494L25.6059 31.0439L29.8099 31.9633L32.3598 35.4299ZM29.8842 55.0843L37.3997 43.4903L45.1185 48.5029L55.4117 30.4137L52.6909 28.6467L44.1037 43.7287L36.3849 38.716L26.9897 53.2046L29.8842 55.0843Z" fill="white"/>
-</g>
-</g>
-<defs>
-<filter id="filter0_ii_16977_25528" x="0" y="-2.05432" width="78" height="82.1103" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-2.05183"/>
-<feGaussianBlur stdDeviation="4.10366"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25528"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2.05183"/>
-<feGaussianBlur stdDeviation="4.10366"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_16977_25528" result="effect2_innerShadow_16977_25528"/>
-</filter>
-<clipPath id="clip0_16977_25528">
-<rect width="38.9848" height="38.9848" fill="white" transform="translate(15.787 23.9826) scale(1.00161) rotate(-12)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-dashboard-icon-4.svg b/ui-ngx/src/assets/iot-hub/hero-dashboard-icon-4.svg
deleted file mode 100644
index 547826eeb1..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-dashboard-icon-4.svg
+++ /dev/null
@@ -1,30 +0,0 @@
-<svg width="83" height="83" viewBox="0 0 83 83" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_16977_25533)">
-<rect x="20.3547" width="65.8692" height="65.8692" rx="6.15549" transform="rotate(18 20.3547 0)" fill="#4D5FD0"/>
-<rect x="20.684" y="0.646365" width="64.8433" height="64.8433" rx="5.64254" transform="rotate(18 20.684 0.646365)" stroke="white" stroke-opacity="0.12" stroke-width="1.02592"/>
-<g clip-path="url(#clip0_16977_25533)">
-<path d="M59.3828 28.4347L57.8721 33.0842L62.5216 34.5949L61.5145 37.6945L56.865 36.1838L55.3543 40.8333L52.2547 39.8261L53.7654 35.1767L49.1159 33.666L50.123 30.5663L54.7725 32.077L56.2832 27.4276L59.3828 28.4347ZM40.9415 43.004C39.2367 42.4501 38.2951 40.602 38.849 38.8972C39.4029 37.1924 41.251 36.2508 42.9558 36.8047C44.6606 37.3587 45.6022 39.2067 45.0483 40.9115C44.4943 42.6163 42.6463 43.5579 40.9415 43.004ZM47.4968 28.1024L46.4796 31.233C45.9932 30.9854 45.4885 30.7756 44.97 30.6055C39.7781 28.9185 34.3769 31.5671 32.549 37.1929C31.3706 40.8195 32.8317 46.6059 37.2453 54.3797C45.3853 50.6848 49.9634 46.8778 51.1468 43.2357L51.2475 42.9258L54.3472 43.9329L54.2465 44.2429C52.5746 49.3883 46.4576 54.1345 35.9058 58.5022C29.9365 48.7665 27.7775 41.3312 29.4494 36.1858C31.9571 28.4677 39.4679 25.3908 45.9772 27.5058C46.5041 27.677 47.0055 27.8742 47.4968 28.1024Z" fill="white"/>
-</g>
-</g>
-<defs>
-<filter id="filter0_ii_16977_25533" x="0.000561057" y="-2.05841" width="82.9997" height="87.1165" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-2.05183"/>
-<feGaussianBlur stdDeviation="4.10366"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25533"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="2.05183"/>
-<feGaussianBlur stdDeviation="4.10366"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_16977_25533" result="effect2_innerShadow_16977_25533"/>
-</filter>
-<clipPath id="clip0_16977_25533">
-<rect width="38.9848" height="38.9848" fill="white" transform="translate(28.8898 16.8135) scale(1.00321) rotate(18)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-device-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-device-cluster.svg
new file mode 100644
index 0000000000..7e75c744a7
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-device-cluster.svg
@@ -0,0 +1,138 @@
+<svg width="858" height="195" viewBox="0 0 858 195" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8" clip-path="url(#clip0_18309_235561)">
+<mask id="mask0_18309_235561" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-1" y="149" width="45" height="44">
+<path d="M-0.00116042 152.818L39.8824 149.487L43.2136 189.371L3.32999 192.702L-0.00116042 152.818Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_18309_235561)">
+<path d="M39.3302 156.986L31.5798 159.987L32.1003 166.219L40.241 167.892L39.3302 156.986Z" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<path d="M22.6885 166.218L27.3624 165.828" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<mask id="mask1_18309_235561" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-1" y="149" width="45" height="44">
+<path d="M-0.00116042 152.818L39.8824 149.487L43.2136 189.371L3.32999 192.702L-0.00116042 152.818Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_18309_235561)">
+<path d="M5.82697 180.335L3.49004 180.53L4.40091 191.436L6.73783 191.24C8.02844 191.133 8.98737 189.999 8.87958 188.708L8.35909 182.476C8.25129 181.186 7.11758 180.227 5.82697 180.335Z" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M25.6134 173.035L25.4182 170.698L14.5125 171.609L14.7077 173.946C14.8155 175.236 15.9492 176.195 17.2398 176.087L23.4716 175.567C24.7622 175.459 25.7212 174.325 25.6134 173.035Z" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.0164 176.022L18.5499 182.41L8.42317 183.256L8.81354 187.93L18.9402 187.084C21.5215 186.868 23.4393 184.601 23.2237 182.02L22.6902 175.632L18.0164 176.022Z" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.29022 164.533L5.74565 169.986C5.85345 171.277 6.98715 172.236 8.27776 172.128L30.0891 170.306C31.3797 170.199 32.3386 169.065 32.2308 167.774L31.32 156.869" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35.5411 151.027L3.60307 153.695C2.31246 153.803 1.35353 154.936 1.46132 156.227L1.98182 162.459C2.08961 163.749 3.22332 164.708 4.51393 164.6L14.2886 163.784C15.4592 163.686 16.474 162.935 16.91 161.845C17.2784 160.924 18.0652 160.234 19.0269 159.99L31.3227 156.87L35.5411 151.027Z" stroke="#4B63CC" stroke-width="2.75" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</g>
+<g opacity="0.8" clip-path="url(#clip1_18309_235561)">
+<path d="M845.874 154.861L825.33 152.902L823.371 173.446L843.915 175.404L845.874 154.861Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
+<path d="M838.373 161.056L834.949 160.729L831.525 160.403L832.178 153.555L839.026 154.208L838.373 161.056Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"/>
+<circle cx="832.992" cy="181.273" r="1.71971" transform="rotate(5.44694 832.992 181.273)" fill="#4B63CC"/>
+<path d="M853.19 183.199C852.829 186.981 849.471 189.755 845.689 189.394L818.982 186.848C815.201 186.487 812.427 183.129 812.788 179.347C813.148 175.565 816.506 172.791 820.288 173.152L846.995 175.699C850.777 176.059 853.55 179.417 853.19 183.199Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<circle cx="843.263" cy="182.254" r="1.71971" transform="rotate(5.44694 843.263 182.254)" fill="#4B63CC"/>
+<circle cx="822.72" cy="180.292" r="1.71971" transform="rotate(5.44694 822.72 180.292)" fill="#4B63CC"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip2_18309_235561)">
+<path d="M216.812 41.3481C217.117 42.4868 216.442 43.6572 215.303 43.9623L192.043 50.1948C190.905 50.4999 189.734 49.8241 189.429 48.6854L183.197 25.4258C182.892 24.2871 183.567 23.1166 184.706 22.8115L207.966 16.5791C209.104 16.274 210.275 16.9497 210.58 18.0884L216.812 41.3481Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M193.921 20.3434L192.065 13.4171" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M189.09 21.6371L187.235 14.7108" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M198.752 19.0497L196.896 12.1234" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M203.583 17.7521L201.727 10.8258" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M186.961 39.472L180.035 41.3279" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M188.259 44.3067L181.332 46.1626" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M185.667 34.6411L178.741 36.497" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M184.37 29.8064L177.443 31.6623" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M206.089 46.4317L207.945 53.3581" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M210.92 45.138L212.776 52.0644" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M201.258 47.7254L203.114 54.6517" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M196.427 49.023L198.283 55.9494" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M213.049 27.3044L219.976 25.4485" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M211.755 22.4696L218.682 20.6137" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M214.347 32.1352L221.273 30.2793" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M215.64 36.966L222.567 35.1101" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M207.807 36.7311C208.011 37.4902 207.56 38.2705 206.801 38.4739L196.664 41.1902C195.905 41.3936 195.124 40.9431 194.921 40.1839L192.205 30.0468C192.001 29.2876 192.452 28.5073 193.211 28.3039L203.348 25.5877C204.107 25.3843 204.888 25.8348 205.091 26.5939L207.807 36.7311Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip3_18309_235561)">
+<path d="M452.287 32.5333C452.393 34.5541 450.81 36.2799 448.751 36.3878L412.211 38.3028C410.152 38.4107 408.397 36.8599 408.291 34.839L407.908 27.5207C407.802 25.4999 409.385 23.7741 411.444 23.6662L447.983 21.7513C450.043 21.6433 451.798 23.1941 451.904 25.215L452.287 32.5333Z" stroke="#4B63CC" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M439.42 29.5396C439.473 30.5501 438.681 31.4129 437.652 31.4669C436.622 31.5208 435.744 30.7455 435.692 29.735C435.639 28.7245 436.43 27.8617 437.46 27.8077C438.489 27.7538 439.367 28.5291 439.42 29.5396Z" fill="#4B63CC"/>
+<path d="M446.877 29.1488C446.93 30.1592 446.139 31.0221 445.109 31.076C444.079 31.13 443.202 30.3546 443.149 29.3442C443.096 28.3337 443.888 27.4709 444.917 27.4169C445.947 27.3629 446.824 28.1383 446.877 29.1488Z" fill="#4B63CC"/>
+<path d="M410.695 6.79647L411.579 23.6578" stroke="#4B63CC" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M446.965 4.89697L447.849 21.7583" stroke="#4B63CC" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M414.479 31.1737L423.53 30.6994" stroke="#4B63CC" stroke-width="3.5" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip4_18309_235561)">
+<path d="M312.531 75.8375C322.471 78.0727 332.341 71.8265 334.576 61.8863C336.812 51.946 330.565 42.0758 320.625 39.8407C310.685 37.6055 300.815 43.8517 298.58 53.7919C296.344 63.7322 302.591 73.6024 312.531 75.8375Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M306.355 50.6344L301.548 47.1006" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M323.784 47.6171L327.318 42.8105" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M314.445 45.5156L313.309 39.659" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M298.398 61.1092L304.254 59.9732C303.98 58.3996 304.004 56.7479 304.376 55.0948C305.889 48.3665 312.594 44.1233 319.322 45.6363C326.05 47.1492 330.293 53.8541 328.78 60.5824C328.409 62.2355 327.723 63.7387 326.802 65.0433L331.608 68.5769" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M328.902 55.7046L334.759 54.5687" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M319.629 58.5252C319.25 60.2099 317.577 61.2686 315.892 60.8898C314.207 60.5109 313.149 58.838 313.527 57.1532C313.906 55.4685 317.95 51.738 317.95 51.738C317.95 51.738 320.007 56.8404 319.629 58.5252Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M311.468 66.3067L317.569 67.6786" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip5_18309_235561)">
+<path d="M533.221 42.3089L569.668 48.0439" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M566.578 47.5604L561.741 57.2522C561.148 58.4391 559.837 59.1606 558.457 58.9434L540.542 56.1245C539.162 55.9073 538.135 54.818 537.936 53.5065L536.309 42.7974" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M542.093 56.3676C542.25 60.1643 544.756 63.2737 548.51 63.8644C552.264 64.4551 555.604 62.2655 556.919 58.7005" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M556.027 74.3848C561.136 75.1888 565.947 71.6863 566.751 66.5766" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M556.999 68.2073C558.704 68.4757 560.305 67.3104 560.573 65.6046" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M538.113 71.567C533.004 70.763 529.501 65.9524 530.305 60.8427" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M539.083 65.3907C537.377 65.1223 536.212 63.5218 536.481 61.8159" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M537.294 49.2815L557.167 52.4087" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M550.361 72.1828C548.965 73.1992 548.658 75.1549 549.674 76.5509C550.69 77.947 550.383 79.9027 548.987 80.9191" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M544.178 71.2096C542.782 72.226 542.474 74.1817 543.491 75.5777C544.507 76.9738 544.199 78.9295 542.803 79.9459" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip6_18309_235561)">
+<path d="M656.531 15.8424L643.306 16.7672L642.917 11.1987L656.843 10.225" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M670.753 9.25234L684.679 8.27854L685.068 13.847L671.843 14.7718" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M667.872 8.05422L659.519 8.63829C657.605 8.77214 656.149 10.4478 656.283 12.3618L656.623 17.2342L659.699 21.2158L669.444 20.5344L671.936 16.1634L671.595 11.291C671.462 9.37705 669.786 7.92037 667.872 8.05422Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M675.995 35.9326L673.138 31.698C672.066 30.1073 669.621 28.9152 667.707 29.0491L662.612 29.4054C660.698 29.5392 658.444 31.0598 657.602 32.7844L655.363 37.3753C654.522 39.1 654.712 41.8125 655.785 43.4032L660.592 50.5301L663.771 44.0127L661.068 40.0051L663.187 35.6603L668.009 35.3231L670.712 39.3307L668.593 43.6755L672.648 49.6871L676.416 41.9605C677.258 40.236 677.068 37.5235 675.995 35.9326Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M667.94 29.0334L662.372 29.4228L661.787 21.0702L667.356 20.6808L667.94 29.0334Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M659.717 30.5267L663.163 35.6372" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M670.725 29.7567L668.023 35.2971" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M671.518 16.1926L657.04 17.205" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip7_18309_235561)">
+<path d="M757.964 102.346L773.098 88.8141" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M758.045 95.7535L764.913 96.1354L764.531 103.004" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M788.231 75.2791L773.098 88.8115" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M781.667 74.6233L781.285 81.4916L788.153 81.8734" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M777.256 108.674L773.1 88.8117" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M771.581 105.317L775.346 99.5598L781.103 103.325" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M768.942 68.949L773.098 88.8115" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M765.09 74.299L770.847 78.0638L774.612 72.3067" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M792.388 95.1417L773.099 88.8116" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M786.636 98.3783L783.533 92.2393L789.672 89.1359" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M753.807 82.4839L773.096 88.814" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+<path d="M756.526 88.491L762.665 85.3876L759.561 79.2487" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10" stroke-linejoin="round"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip8_18309_235561)">
+<path d="M93.6535 101.442L75.2613 98.8574C72.9527 98.533 71.3443 96.3985 71.6687 94.0899L74.4624 74.2115C74.7869 71.9029 76.9214 70.2945 79.2299 70.6189L97.6221 73.2038C99.9307 73.5282 101.539 75.6627 101.215 77.9713L98.421 97.8497C98.0965 100.158 95.962 101.767 93.6535 101.442Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M78.0232 70.4505L82.1575 62.6011L97.0199 64.6898L98.8305 73.3748" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M74.0533 98.6882L75.8638 107.373L90.7262 109.462L94.8606 101.612" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+<path d="M94.2692 84.2591C94.1468 85.1302 93.7992 85.9543 93.2606 86.65C91.3655 89.0981 88.9265 91.0713 86.1365 92.4133L85.5024 92.7183L84.9769 92.2503C82.665 90.1913 80.8643 87.6222 79.7173 84.7466C79.3914 83.9294 79.2844 83.0415 79.4069 82.1703C79.7074 80.0316 81.6849 78.5415 83.8236 78.8421C85.1184 79.024 86.2365 79.841 86.8033 81.0193L87.069 81.5716L87.4766 81.1139C88.3462 80.1375 89.6462 79.6604 90.941 79.8423C93.0797 80.1429 94.5698 82.1204 94.2692 84.2591Z" stroke="#4B63CC" stroke-width="3" stroke-miterlimit="10"/>
+</g>
+<defs>
+<clipPath id="clip0_18309_235561">
+<rect width="40" height="40" fill="white" transform="translate(0 152.82) scale(1.00056) rotate(-4.77437)"/>
+</clipPath>
+<clipPath id="clip1_18309_235561">
+<rect width="44" height="44" fill="white" transform="translate(814.144 146.997) scale(1.00056) rotate(5.44694)"/>
+</clipPath>
+<clipPath id="clip2_18309_235561">
+<rect width="48" height="48" fill="white" transform="translate(170.596 16.4076) scale(1.00056) rotate(-15)"/>
+</clipPath>
+<clipPath id="clip3_18309_235561">
+<rect width="47.7631" height="41.25" fill="white" transform="translate(404.727 2.5014) scale(1.00056) rotate(-3)"/>
+</clipPath>
+<clipPath id="clip4_18309_235561">
+<rect width="40" height="40" fill="white" transform="translate(301.443 33.9253) scale(1.00056) rotate(12.6728)"/>
+</clipPath>
+<clipPath id="clip5_18309_235561">
+<rect width="40" height="40" fill="white" transform="matrix(0.9884 0.155527 -0.155527 0.9884 532.017 39.9286)"/>
+</clipPath>
+<clipPath id="clip6_18309_235561">
+<rect width="44.4454" height="44.4454" fill="white" transform="translate(641.422 8.59857) scale(1.00056) rotate(-4)"/>
+</clipPath>
+<clipPath id="clip7_18309_235561">
+<rect width="44" height="44" fill="white" transform="translate(747.044 71.7746) scale(1.00056) rotate(-11.8175)"/>
+</clipPath>
+<clipPath id="clip8_18309_235561">
+<rect width="48" height="48" fill="white" transform="translate(66.2168 58.9393) scale(1.00056) rotate(8)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-device-icon-1.svg b/ui-ngx/src/assets/iot-hub/hero-device-icon-1.svg
deleted file mode 100644
index 8ef1b628a4..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-device-icon-1.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17179_74548)">
-<rect y="7.87372" width="64.6079" height="64.6079" rx="5.99735" transform="rotate(-7 0 7.87372)" fill="#35B690"/>
-<rect x="0.556962" y="8.30886" width="63.6083" height="63.6083" rx="5.49758" transform="rotate(-7 0.556962 8.30886)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M40.6063 37.3376L39.0473 24.6404C38.7238 22.0057 36.3359 20.14 33.7012 20.4635C31.0665 20.787 29.2008 23.175 29.5243 25.8096L31.0834 38.5069C29.3402 40.187 28.3709 42.6582 28.6886 45.2453C29.2264 49.6258 33.2182 52.7445 37.5987 52.2067C41.9793 51.6688 45.098 47.6771 44.5601 43.2965C44.2425 40.7094 42.7041 38.5461 40.6063 37.3376ZM32.6986 25.4199C32.5915 24.5469 33.218 23.745 34.0909 23.6378C34.9639 23.5307 35.7658 24.1572 35.873 25.0301L34.2858 25.225L34.4807 26.8122L36.0678 26.6173L36.4576 29.7916L34.8704 29.9865L35.0653 31.5736L36.6525 31.3788L37.0422 34.5531L33.8679 34.9428L32.6986 25.4199Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17179_74548" x="0" y="-2.01894" width="72.0018" height="76.038" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17179_74548"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17179_74548" result="effect2_innerShadow_17179_74548"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-device-icon-2.svg b/ui-ngx/src/assets/iot-hub/hero-device-icon-2.svg
deleted file mode 100644
index 57e615a72d..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-device-icon-2.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="72" height="72" viewBox="0 0 72 72" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17179_74550)">
-<rect x="7.87372" width="64.6079" height="64.6079" rx="5.99735" transform="rotate(7 7.87372 0)" fill="#35B690"/>
-<rect x="8.30886" y="0.556962" width="63.6083" height="63.6083" rx="5.49758" transform="rotate(7 8.30886 0.556962)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M21.5115 49.0439C20.8767 48.9659 20.3504 48.6596 19.9327 48.125C19.515 47.5904 19.3452 47.0057 19.4231 46.3708L20.4316 38.1573C20.5096 37.5224 20.8159 36.9961 21.3505 36.5784C21.8851 36.1608 22.4698 35.9909 23.1047 36.0688L41.4363 38.3197L42.2987 31.2965L44.6794 31.5888L43.8171 38.612L47.9437 39.1187C48.5785 39.1966 49.1048 39.5029 49.5225 40.0375C49.9402 40.5721 50.1101 41.1569 50.0321 41.7917L49.0236 50.0053C48.9457 50.6401 48.6394 51.1664 48.1048 51.5841C47.5702 52.0018 46.9854 52.1717 46.3506 52.0937L21.5115 49.0439ZM27.7819 43.2444C27.84 42.771 27.7284 42.3559 27.4472 41.9992C27.166 41.6424 26.7887 41.435 26.3153 41.3769C25.8419 41.3187 25.4269 41.4303 25.0701 41.7115C24.7134 41.9928 24.5059 42.3701 24.4478 42.8434C24.3897 43.3168 24.5013 43.7319 24.7825 44.0886C25.0638 44.4454 25.4411 44.6528 25.9144 44.7109C26.3878 44.769 26.8028 44.6575 27.1596 44.3763C27.5163 44.095 27.7238 43.7177 27.7819 43.2444ZM33.6544 43.9654C33.7125 43.492 33.6009 43.077 33.3197 42.7202C33.0384 42.3635 32.6611 42.156 32.1878 42.0979C31.7144 42.0398 31.2994 42.1514 30.9426 42.4326C30.5859 42.7138 30.3784 43.0911 30.3203 43.5645C30.2622 44.0379 30.3737 44.4529 30.655 44.8097C30.9362 45.1664 31.3135 45.3739 31.7869 45.432C32.2602 45.4901 32.6753 45.3785 33.0321 45.0973C33.3888 44.8161 33.5962 44.4387 33.6544 43.9654ZM37.6594 46.153C38.1327 46.2111 38.5478 46.0996 38.9045 45.8184C39.2613 45.5371 39.4687 45.1598 39.5268 44.6865C39.585 44.2131 39.4734 43.798 39.1922 43.4413C38.9109 43.0845 38.5336 42.8771 38.0603 42.819C37.5869 42.7608 37.1718 42.8724 36.8151 43.1536C36.4583 43.4349 36.2509 43.8122 36.1928 44.2855C36.1347 44.7589 36.2462 45.174 36.5275 45.5307C36.8087 45.8875 37.186 46.0949 37.6594 46.153ZM40.5242 29.3467L39.0971 27.5201C39.81 26.9632 40.5916 26.549 41.442 26.2775C42.2925 26.006 43.1957 25.929 44.1516 26.0463C45.1076 26.1637 45.9653 26.457 46.7248 26.9262C47.4843 27.3953 48.1425 27.9863 48.6994 28.6992L46.8729 30.1262C46.548 29.7104 46.1232 29.3428 45.5986 29.0233C45.0739 28.7038 44.5008 28.5058 43.8792 28.4295C43.2575 28.3532 42.6469 28.4058 42.0473 28.5872C41.4477 28.7687 40.94 29.0219 40.5242 29.3467ZM37.5656 25.5599L36.0341 23.5997C37.0142 22.8339 38.2732 22.2031 39.8109 21.7072C41.3486 21.2113 42.9904 21.0705 44.7363 21.2849C46.4821 21.4992 48.0411 22.033 49.4132 22.8862C50.7853 23.7394 51.8542 24.656 52.6199 25.6361L50.6597 27.1677C50.0661 26.3161 49.2389 25.5634 48.178 24.9095C47.1171 24.2556 45.8724 23.841 44.444 23.6656C43.0155 23.4902 41.7075 23.5914 40.5199 23.9692C39.3324 24.347 38.3476 24.8772 37.5656 25.5599Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17179_74550" x="-0.000682753" y="-2.019" width="72.0018" height="76.038" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17179_74550"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17179_74550" result="effect2_innerShadow_17179_74550"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-device-icon-3.svg b/ui-ngx/src/assets/iot-hub/hero-device-icon-3.svg
deleted file mode 100644
index 1e7f844ba7..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-device-icon-3.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17179_74553)">
-<rect y="13.3225" width="64.0777" height="64.0777" rx="5.99735" transform="rotate(-12 0 13.3225)" fill="#35B690"/>
-<rect x="0.592768" y="13.7075" width="63.0782" height="63.0782" rx="5.49758" transform="rotate(-12 0.592768 13.7075)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M32.6275 46.014C30.5805 44.6981 29.0465 42.592 28.4991 40.0169C27.9518 37.4417 28.4965 34.8939 29.8313 32.859L32.5024 34.5937C31.6074 35.9513 31.239 37.651 31.6017 39.3574C31.9645 41.0638 32.9923 42.4667 34.3499 43.3618L32.6275 46.014ZM45.7825 43.2179C47.1173 41.183 47.6621 38.6352 47.1147 36.06C46.5674 33.4849 45.0334 31.3788 42.9864 30.0629L41.2517 32.7339C42.6216 33.6102 43.6494 35.0131 44.0121 36.7195C44.3748 38.4259 44.0065 40.1256 43.1303 41.4955L45.7825 43.2179ZM37.1475 34.9359C35.441 35.2986 34.3416 36.9915 34.7043 38.6979C35.0671 40.4044 36.76 41.5038 38.4664 41.141C40.1728 40.7783 41.2723 39.0854 40.9095 37.379C40.5468 35.6725 38.8539 34.5731 37.1475 34.9359ZM50.2173 35.4005C50.9461 38.8289 50.2094 42.2283 48.4348 44.9403L51.1059 46.6749C53.3169 43.2702 54.23 39.0226 53.3199 34.7411C52.4098 30.4595 49.848 26.9505 46.4434 24.7395L44.7088 27.4106C47.433 29.1663 49.4886 31.9722 50.2173 35.4005ZM27.1791 31.1366L24.508 29.402C22.297 32.8067 21.3839 37.0543 22.294 41.3358C23.204 45.6174 25.7658 49.1264 29.1705 51.3374L30.9051 48.6663C28.1809 46.9106 26.1253 44.1047 25.3965 40.6764C24.6678 37.248 25.4045 33.8486 27.1791 31.1366Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17179_74553" x="0" y="-2.00249" width="76.0007" height="80.0049" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17179_74553"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17179_74553" result="effect2_innerShadow_17179_74553"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-device-icon-4.svg b/ui-ngx/src/assets/iot-hub/hero-device-icon-4.svg
deleted file mode 100644
index 164db57b9a..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-device-icon-4.svg
+++ /dev/null
@@ -1,30 +0,0 @@
-<svg width="76" height="76" viewBox="0 0 76 76" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17179_74555)">
-<rect x="13.3225" width="64.0777" height="64.0777" rx="5.99735" transform="rotate(12 13.3225 0)" fill="#35B690"/>
-<rect x="13.7075" y="0.592768" width="63.0782" height="63.0782" rx="5.49758" transform="rotate(12 13.7075 0.592768)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<g clip-path="url(#clip0_17179_74555)">
-<path d="M34.367 43.9365C34.8566 44.7548 35.6056 45.2634 36.614 45.4623C37.6221 45.6623 38.446 45.4285 39.0856 44.7609L48.0885 35.3802C48.4113 35.0322 48.4551 34.6624 48.2198 34.2707C47.9859 33.8781 47.6565 33.7706 47.2316 33.9482L35.6582 39.0325C34.835 39.3933 34.2918 40.0962 34.0287 41.1415C33.7646 42.1865 33.8773 43.1182 34.367 43.9365ZM24.2411 49.8197C23.6856 49.7016 23.1868 49.4468 22.7447 49.0552C22.3026 48.6636 21.9905 48.1806 21.8085 47.6062C21.3931 46.1787 21.1529 44.7068 21.0881 43.1907C21.0235 41.6735 21.1607 40.1176 21.4996 38.523C22.002 36.1596 22.8895 34.034 24.1623 32.1463C25.4337 30.2595 26.9556 28.6931 28.7278 27.4473C30.4987 26.2023 32.4452 25.3363 34.567 24.8493C36.6887 24.3634 38.8341 24.351 41.0033 24.812C42.1938 25.0651 43.3158 25.4446 44.3695 25.9507C45.4229 26.458 46.408 27.0917 47.3247 27.8521C47.8136 28.2834 48.0466 28.7793 48.0237 29.3399C48.0018 29.9007 47.7543 30.3838 47.281 30.7891C47.0149 31.0004 46.6906 31.0952 46.3082 31.0734C45.9257 31.0516 45.6041 30.9386 45.3434 30.7344C44.5937 30.0989 43.7934 29.5716 42.9424 29.1526C42.0914 28.7337 41.2029 28.4258 40.277 28.229C36.7587 27.4811 33.4802 28.1753 30.4415 30.3114C27.4015 32.4485 25.4791 35.4106 24.6741 39.1977C24.4199 40.3937 24.3205 41.6076 24.3761 42.8396C24.4327 44.0719 24.6298 45.2596 24.9674 46.4027L46.8711 51.0585C47.7096 50.1058 48.392 49.0753 48.9184 47.967C49.4438 46.8585 49.8397 45.6778 50.106 44.4249C50.3178 43.4283 50.4129 42.4295 50.3912 41.4285C50.3687 40.4261 50.2396 39.4386 50.004 38.4659C49.8975 38.0564 49.9263 37.6607 50.0904 37.2789C50.2545 36.8972 50.5093 36.6091 50.8547 36.4146C51.3627 36.106 51.8499 36.0905 52.3162 36.3681C52.7825 36.6458 53.0741 37.0947 53.1912 37.7148C53.4374 38.8981 53.5701 40.0947 53.5894 41.3047C53.6089 42.5136 53.512 43.7501 53.2986 45.0142C52.9536 46.6373 52.4454 48.1512 51.7741 49.5561C51.1017 50.9607 50.2662 52.2563 49.2675 53.4428C48.8675 53.8935 48.386 54.2078 47.8228 54.3857C47.2597 54.5636 46.7004 54.5935 46.1448 54.4754L24.2411 49.8197Z" fill="white"/>
-</g>
-</g>
-<defs>
-<filter id="filter0_ii_17179_74555" x="-0.00030061" y="-2.00243" width="76.0007" height="80.0048" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17179_74555"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17179_74555" result="effect2_innerShadow_17179_74555"/>
-</filter>
-<clipPath id="clip0_17179_74555">
-<rect width="36" height="36" fill="white" transform="translate(24.3055 16.6545) scale(1.00166) rotate(12)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-rule-chain-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-rule-chain-cluster.svg
new file mode 100644
index 0000000000..ee3a4d39de
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-rule-chain-cluster.svg
@@ -0,0 +1,72 @@
+<svg width="806" height="184" viewBox="0 0 806 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_18332_158483)">
+<g opacity="0.8">
+<path d="M253.541 40.9957L262.457 42.2487L263.084 37.7908L254.168 36.5378L253.541 40.9957ZM241.698 12.0554L241.071 16.5133L281.192 22.152L281.819 17.6941L241.698 12.0554ZM246.192 28.5978L272.939 32.357L273.566 27.899L246.818 24.1399L246.192 28.5978Z" fill="#AA5BE3"/>
+</g>
+</g>
+<g clip-path="url(#clip1_18332_158483)">
+<g opacity="0.8" clip-path="url(#clip2_18332_158483)">
+<path d="M767.05 113.259L770.912 119.08L763.59 123.937L765.985 127.546L773.306 122.69L777.168 128.511L779.735 115.826L767.05 113.259ZM758.593 111.547L745.908 108.979L743.34 121.664L749.162 117.803L757.108 129.755L753.86 145.802L758.089 146.658L761.688 128.877L752.772 115.408L758.593 111.547Z" fill="#AA5BE3"/>
+</g>
+</g>
+<g clip-path="url(#clip3_18332_158483)">
+<g opacity="0.8">
+<path d="M516.231 49.453L543.599 46.0927L543.119 42.1831L515.751 45.5434L516.231 49.453ZM513.831 29.9048L521.65 28.9447L523.09 40.6736L534.819 39.2335L533.379 27.5046L541.198 26.5445L525.835 14.5409L513.831 29.9048Z" fill="#AA5BE3"/>
+</g>
+</g>
+<g clip-path="url(#clip4_18332_158483)">
+<g opacity="0.8">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M143.943 50.8903C145.672 50.7971 147.372 51.3734 148.667 52.5009C149.964 53.6294 150.749 55.2185 150.841 56.9207L151.584 70.6926C151.636 71.6635 151.557 72.4661 151.305 73.2216C151.057 73.966 150.667 74.586 150.227 75.2049C149.621 76.0561 148.737 76.5861 147.893 76.9096C147.043 77.2358 146.142 77.3886 145.375 77.43L136.832 77.8908L128.515 83.3506C128.148 83.592 127.677 83.6205 127.283 83.4243C126.889 83.2276 126.632 82.836 126.608 82.399L126.395 78.4538L124.073 78.579C122.344 78.6721 120.644 78.0959 119.349 76.9684C118.052 75.84 117.267 74.2507 117.175 72.5486L116.432 58.7768C116.398 58.138 116.462 57.5042 116.617 56.8953L119.128 57.4299L120.366 61.1454C121.349 64.0986 125.634 63.8674 126.294 60.8257L127.124 56.9986L130.869 55.7683C132.848 55.1181 133.408 53.0231 132.663 51.4987L143.943 50.8903ZM126.774 67.7147C126.096 67.7514 125.575 68.327 125.611 69.0003C125.647 69.6736 126.227 70.1899 126.906 70.1535L140.423 69.4243C141.102 69.3877 141.623 68.812 141.586 68.1386C141.55 67.4652 140.971 66.9489 140.292 66.9855L126.774 67.7147ZM128.837 60.2657C128.159 60.3025 127.638 60.878 127.674 61.5514C127.711 62.2247 128.29 62.7409 128.969 62.7045L143.715 61.9091C144.394 61.8725 144.915 61.2967 144.879 60.6234C144.842 59.9499 144.263 59.4337 143.584 59.4703L128.837 60.2657Z" fill="#AA5BE3"/>
+<path d="M121.314 45.7537C121.563 44.5125 123.316 44.4179 123.697 45.6252L125.062 49.9561C125.194 50.3759 125.543 50.6934 125.976 50.7857L130.164 51.6765C131.39 51.9375 131.481 53.6383 130.291 54.0296L126.212 55.3698C125.797 55.506 125.486 55.8494 125.394 56.2726L124.49 60.4417C124.225 61.658 122.512 61.7505 122.118 60.5696L120.771 56.522C120.634 56.1113 120.288 55.8032 119.862 55.7123L115.662 54.8187C114.436 54.5574 114.344 52.8572 115.535 52.4656L119.602 51.1296C120.023 50.9912 120.337 50.6379 120.423 50.2063L121.314 45.7537Z" fill="#AA5BE3"/>
+<path d="M111.228 41.5994C111.468 40.3443 113.242 40.2486 113.615 41.4707L114.354 43.8923C114.482 44.3128 114.829 44.6318 115.26 44.7283L117.67 45.2659C118.881 45.5362 118.972 47.2141 117.797 47.613L115.447 48.411C115.034 48.5511 114.727 48.8977 114.639 49.3216L114.159 51.6441C113.904 52.8756 112.168 52.9693 111.782 51.7723L111.053 49.515C110.92 49.1031 110.578 48.7915 110.152 48.6966L107.73 48.156C106.52 47.8855 106.43 46.2079 107.604 45.8089L109.942 45.0152C110.361 44.8729 110.671 44.5184 110.753 44.0865L111.228 41.5994Z" fill="#AA5BE3"/>
+<path d="M129.035 40.3189C129.289 39.0872 131.026 38.9935 131.412 40.1906L131.661 40.9619C131.796 41.3807 132.147 41.6945 132.581 41.7841L133.212 41.9149C134.447 42.1698 134.54 43.8852 133.339 44.2715L132.713 44.4724C132.298 44.606 131.985 44.9481 131.89 45.3707L131.726 46.1057C131.456 47.3125 129.757 47.4041 129.359 46.2334L129.115 45.5204C128.976 45.1103 128.628 44.8039 128.201 44.7158L127.558 44.5833C126.322 44.3286 126.229 42.6129 127.431 42.2267L128.042 42.0289C128.464 41.8932 128.781 41.5434 128.87 41.1124L129.035 40.3189Z" fill="#AA5BE3"/>
+</g>
+</g>
+<g clip-path="url(#clip5_18332_158483)">
+<g opacity="0.8" clip-path="url(#clip6_18332_158483)">
+<path d="M653.981 49.8189L673.563 51.9209L672.932 57.7957L681.606 50.8035L674.614 42.1296L673.983 48.0044L650.484 45.482L649.223 57.2315L653.14 57.6519L653.981 49.8189ZM671.461 71.5034L651.879 69.4014L652.509 63.5267L643.835 70.5189L650.828 79.1927L651.458 73.318L674.957 75.8404L676.218 64.0908L672.302 63.6704L671.461 71.5034Z" fill="#AA5BE3"/>
+</g>
+</g>
+<g clip-path="url(#clip7_18332_158483)">
+<g opacity="0.8" clip-path="url(#clip8_18332_158483)">
+<path d="M31.2921 117.355C34.0616 118.016 36.3019 119.739 37.6969 121.981L31.3824 125.862L43.4236 128.737L46.2986 116.696L41.2022 119.827C39.262 116.67 36.1237 114.266 32.2504 113.341C25.1661 111.65 18.0956 115.498 15.4879 122.067L19.5418 123.035C21.5574 118.68 26.4355 116.196 31.2921 117.355ZM38.2314 138.401C39.9872 136.911 41.4231 134.984 42.3048 132.712L38.2509 131.744C36.2352 136.1 31.3572 138.584 26.5005 137.424C23.731 136.763 21.4908 135.04 20.0958 132.798L26.4103 128.917L14.369 126.042L11.4941 138.084L16.5904 134.952C18.5306 138.109 21.6689 140.513 25.5422 141.438C28.6529 142.18 31.7671 141.842 34.5024 140.692L41.9319 152.754L45.6361 150.478L38.2314 138.401Z" fill="#AA5BE3"/>
+</g>
+</g>
+<g clip-path="url(#clip9_18332_158483)">
+<g opacity="0.8">
+<path d="M411.168 66.7027L411.594 62.7869L384.183 59.8004L386.743 36.3054L390.659 36.7321L385.425 30.2184L378.912 35.4522L382.827 35.8788L382.401 39.7946L374.569 38.9413L374.143 42.8572L381.974 43.7105L380.268 59.3738C380.033 61.5275 381.603 63.4816 383.757 63.7163L399.42 65.4228L398.994 69.3386L395.078 68.912L400.311 75.4257L406.825 70.1919L402.909 69.7653L403.336 65.8494L411.168 66.7027ZM389.806 44.5637L401.553 45.8436L400.273 57.5911L404.189 58.0178L405.469 46.2703C405.704 44.1166 404.134 42.1625 401.98 41.9278L390.232 40.6479L389.806 44.5637Z" fill="#AA5BE3"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_18332_158483">
+<rect width="50" height="50" fill="white" transform="translate(238.593) scale(1.00038) rotate(8)"/>
+</clipPath>
+<clipPath id="clip1_18332_158483">
+<rect width="50" height="50" fill="white" transform="translate(739.851 99.8428) scale(1.00038) rotate(11.4429)"/>
+</clipPath>
+<clipPath id="clip2_18332_158483">
+<rect width="51.75" height="51.75" fill="white" transform="translate(739.165 98.8112) scale(1.00038) rotate(11.4429)"/>
+</clipPath>
+<clipPath id="clip3_18332_158483">
+<rect width="50" height="50" fill="white" transform="translate(500.125 10.3555) scale(1.00038) rotate(-7)"/>
+</clipPath>
+<clipPath id="clip4_18332_158483">
+<rect width="50" height="50" fill="white" transform="translate(102.83 37.2017) scale(1.00038) rotate(-3.08756)"/>
+</clipPath>
+<clipPath id="clip5_18332_158483">
+<rect width="50" height="50" fill="white" transform="translate(640.526 33.1298) scale(1.00038) rotate(6.12669)"/>
+</clipPath>
+<clipPath id="clip6_18332_158483">
+<rect width="47.25" height="47.25" fill="white" transform="translate(641.745 34.6421) scale(1.00038) rotate(6.12669)"/>
+</clipPath>
+<clipPath id="clip7_18332_158483">
+<rect width="50" height="50" fill="white" transform="translate(11.9069 99.7373) scale(1.00038) rotate(13.4284)"/>
+</clipPath>
+<clipPath id="clip8_18332_158483">
+<rect width="49.5" height="49.5" fill="white" transform="translate(12.0925 100.042) scale(1.00038) rotate(13.4284)"/>
+</clipPath>
+<clipPath id="clip9_18332_158483">
+<rect width="50" height="50" fill="white" transform="translate(370.716 25.2518) scale(1.00038) rotate(6.21795)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-1.svg b/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-1.svg
deleted file mode 100644
index 53a6019a4d..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-1.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17177_74096)">
-<rect y="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(-15 0 16.6947)" fill="#D99424"/>
-<rect x="0.612102" y="17.0481" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(-15 0.612102 17.0481)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M57.2426 45.1466L56.4162 42.0624L34.827 47.8472L29.8686 29.3422L32.9527 28.5158L27.0869 25.1291L23.7002 30.995L26.7844 30.1686L27.6108 33.2528L21.4424 34.9056L22.2688 37.9897L28.4372 36.3369L31.7428 48.6736C32.1973 50.3699 33.9571 51.3859 35.6534 50.9314L47.9901 47.6258L48.8165 50.71L45.7323 51.5364L51.5982 54.923L54.9849 49.0572L51.9007 49.8836L51.0743 46.7994L57.2426 45.1466ZM34.6056 34.6841L43.8581 32.2049L46.3373 41.4574L49.4215 40.631L46.9423 31.3785C46.4877 29.6822 44.728 28.6662 43.0317 29.1207L33.7792 31.5999L34.6056 34.6841Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17177_74096" x="0" y="-2.01574" width="79.0005" height="83.0315" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17177_74096"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17177_74096" result="effect2_innerShadow_17177_74096"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-2.svg b/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-2.svg
deleted file mode 100644
index 917f875faa..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-2.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17177_74098)">
-<rect x="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(15 16.6947 0)" fill="#D99424"/>
-<rect x="17.0481" y="0.612102" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(15 17.0481 0.612102)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M35.3003 29.65L33.4544 27.0398L22.4176 34.8588L28.0662 47.1486L30.9699 45.811L26.427 35.9331L35.3003 29.65ZM31.5345 38.9544L34.6187 39.7808L35.4451 36.6967L32.3609 35.8703L31.5345 38.9544ZM47.7818 40.0023L44.6976 39.1759L43.8712 42.26L46.9554 43.0864L47.7818 40.0023ZM37.7029 40.6072L40.787 41.4336L41.6134 38.3495L38.5293 37.5231L37.7029 40.6072ZM51.2501 31.8081L48.3463 33.1456L52.8893 43.0236L44.016 49.3067L45.8619 51.9169L56.8987 44.0979L51.2501 31.8081Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17177_74098" x="-0.00149042" y="-2.01573" width="79.0025" height="83.0315" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17177_74098"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17177_74098" result="effect2_innerShadow_17177_74098"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-3.svg b/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-3.svg
deleted file mode 100644
index c5ecbe9b74..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-3.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17177_74100)">
-<rect y="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(-30 0 32.2102)" fill="#D99424"/>
-<rect x="0.682712" y="32.3932" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(-30 0.682712 32.3932)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M29.836 48.6854C28.7188 46.7503 28.0484 44.6966 27.8248 42.5242C27.6012 40.3518 27.8472 38.2174 28.5626 36.121L31.6729 36.9402C31.096 38.638 30.886 40.3622 31.0429 42.1127C31.1999 43.8631 31.7278 45.517 32.6268 47.0741L29.836 48.6854ZM53.5909 34.9705C52.6919 33.4133 51.5236 32.1292 50.0861 31.1181C48.6486 30.1069 47.0505 29.4267 45.2917 29.0774L46.1373 25.9742C48.3106 26.4028 50.282 27.257 52.0516 28.5369C53.8212 29.8167 55.2645 31.4241 56.3817 33.3592L53.5909 34.9705ZM39.1217 58.7832L37.4397 55.8699L40.0851 54.3425L35.0732 45.6617C34.0121 43.8239 33.6134 41.8686 33.8769 39.7958C34.1405 37.723 35.029 35.955 36.5424 34.4916L36.0514 33.6412C35.7151 33.0587 35.6331 32.4459 35.8055 31.8027C35.9778 31.1596 36.3552 30.6698 36.9377 30.3335C37.5202 29.9972 38.133 29.9152 38.7762 30.0876C39.4193 30.2599 39.909 30.6373 40.2454 31.2198L40.7364 32.0703C42.7655 31.4884 44.7414 31.6009 46.6643 32.4079C48.5871 33.2149 50.0805 34.5399 51.1445 36.3829L56.1564 45.0637L58.8095 43.532L60.4915 46.4453L39.1217 58.7832ZM52.0506 56.4921C51.321 56.9133 50.5468 57.0149 49.7282 56.7968C48.9095 56.5787 48.2902 56.1059 47.8702 55.3784L53.1686 52.3194C53.59 53.0492 53.6909 53.8221 53.4712 54.6381C53.2516 55.4541 52.778 56.0721 52.0506 56.4921Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17177_74100" x="0" y="-2.01309" width="87.9996" height="92.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17177_74100"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17177_74100" result="effect2_innerShadow_17177_74100"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-4.svg b/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-4.svg
deleted file mode 100644
index eda7544128..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-4.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17177_74102)">
-<g clip-path="url(#clip0_17177_74102)">
-<rect x="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(30 32.2102 0)" fill="#D99424"/>
-<g clip-path="url(#clip1_17177_74102)">
-<path d="M29.4855 50.2566L31.08 47.495L44.8386 44.392L40.6466 30.9251L42.241 28.1634L58.8109 37.7301L56.4193 41.8726L46.4428 36.1126L49.8787 47.3018L38.4706 49.9209L48.4471 55.6808L46.0554 59.8233L29.4855 50.2566Z" fill="white"/>
-</g>
-</g>
-<rect x="32.3932" y="0.682712" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(30 32.3932 0.682712)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-</g>
-<defs>
-<filter id="filter0_ii_17177_74102" x="0.00152506" y="-2.01314" width="87.9996" height="92.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17177_74102"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17177_74102" result="effect2_innerShadow_17177_74102"/>
-</filter>
-<clipPath id="clip0_17177_74102">
-<rect x="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(30 32.2102 0)" fill="white"/>
-</clipPath>
-<clipPath id="clip1_17177_74102">
-<rect width="38" height="38" fill="white" transform="translate(37.143 17.8568) scale(1.00701) rotate(30)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-solution-template-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-solution-template-cluster.svg
new file mode 100644
index 0000000000..2afd1f2ab8
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-solution-template-cluster.svg
@@ -0,0 +1,57 @@
+<svg width="990" height="260" viewBox="0 0 990 260" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8" clip-path="url(#clip0_18368_189992)">
+<path d="M39.5189 205.251C37.5147 206.408 36.8356 208.943 37.9927 210.947L45.0396 223.152C44.4782 224.849 44.683 226.705 45.5691 228.239C47.2996 231.237 51.1159 232.259 54.1131 230.529C57.1104 228.798 58.133 224.982 56.4025 221.985C55.5164 220.45 54.0116 219.345 52.2723 219.001L45.2149 206.777C44.0578 204.773 41.5231 204.094 39.5189 205.251ZM40.5614 207.056C41.5544 206.483 42.836 206.826 43.4094 207.819L44.4518 209.625L40.8407 211.71L39.7982 209.904C39.2249 208.911 39.5683 207.63 40.5614 207.056ZM18.1357 214.082L17.6572 216.38C17.6572 216.38 16.8576 220.332 16.4882 225.072C16.1188 229.811 15.9546 235.322 18.2063 239.222C21.6568 245.199 29.3179 247.252 35.2943 243.801C41.2708 240.351 43.3236 232.69 39.8731 226.713C37.6214 222.813 32.7662 220.2 28.4772 218.15C24.1882 216.1 20.3655 214.816 20.3655 214.816L18.1357 214.082ZM21.3986 219.733C22.7351 220.213 23.9056 220.573 26.694 221.9C30.7135 223.816 35.0527 226.704 36.2619 228.798C38.5762 232.806 37.2178 237.876 33.2095 240.19C29.2011 242.504 24.1316 241.146 21.8174 237.138C20.6082 235.043 20.2773 229.841 20.6273 225.402C20.8722 222.324 21.1462 221.131 21.3986 219.733Z" fill="#2C6CB4"/>
+</g>
+<g opacity="0.8">
+<path d="M210.655 46.6853L208.582 46.9032L209.13 32.171L201.873 32.9338C200.048 33.1256 201.025 31.4506 201.06 31.3841C203.238 26.3754 206.519 18.9028 210.9 8.92487L212.974 8.70694L212.426 23.4391L219.704 22.6742C220.533 22.587 221.031 22.933 220.677 23.9555C213.988 39.1025 210.655 46.6853 210.655 46.6853Z" stroke="#2C6CB4" stroke-width="3.25"/>
+</g>
+<g opacity="0.8">
+<path d="M795.224 47.2939L759.393 43.5279L761.653 22.0295L774.758 17.9729L774.382 21.556L783.716 18.9144L783.151 24.289L788.526 24.8539L791.824 10.7099L797.198 11.2748L797.483 25.7954L795.224 47.2939ZM779.577 23.8229L770.243 26.4645L770.61 22.971L764.987 24.7709L763.353 40.3215L792.017 43.3342L793.524 29.0019L779.191 27.4955L779.577 23.8229ZM776.27 38.0565L779.853 38.4331L780.606 31.2669L777.023 30.8903L776.27 38.0565ZM769.104 37.3033L772.687 37.6799L773.44 30.5137L769.857 30.1371L769.104 37.3033ZM787.772 32.0201L784.189 31.6435L783.436 38.8097L787.019 39.1863L787.772 32.0201Z" fill="#2C6CB4"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip1_18368_189992)">
+<path d="M76.3577 90.376C78.5415 86.5934 83.3853 85.2955 87.1677 87.4795" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M71.7879 87.7334C75.4275 81.4292 83.5009 79.266 89.805 82.9057" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M80.9275 93.0108C81.6555 91.7499 83.2696 91.3175 84.5306 92.0453" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M86.966 108.344C84.7036 99.9009 76.025 94.8903 67.5815 97.1527L67.5795 97.1532L67.5801 97.1552C69.8425 105.599 78.5211 110.609 86.9646 108.347L86.9665 108.346L86.966 108.344Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M88.673 114.716C86.4106 106.273 91.4212 97.5943 99.8647 95.3318L99.8666 95.3313L99.8671 95.3333C102.13 103.777 97.119 112.455 88.6755 114.718L88.6735 114.718L88.673 114.716Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M78.2048 123.326L101.404 117.11" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M86.9655 108.35L90.0378 119.816" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip2_18368_189992)">
+<path d="M898.697 101.071C897.818 104.354 899.804 107.735 903.147 108.631C906.49 109.527 909.901 107.592 910.78 104.309C911.487 101.671 910.625 100.62 907.194 93.5272C900.646 97.9889 899.399 98.4534 898.697 101.071Z" fill="#2C6CB4"/>
+<path d="M920.876 106.905C921.983 107.202 923.132 106.538 923.429 105.431C923.726 104.323 923.062 103.174 921.955 102.877L919.941 102.338L923.179 90.2545L925.193 90.7941C926.3 91.0908 927.449 90.4274 927.746 89.3198C928.043 88.2122 927.379 87.0632 926.272 86.7664L894.05 78.1326C892.943 77.8358 891.793 78.4993 891.497 79.6069C891.2 80.7145 891.863 81.8635 892.971 82.1603L894.985 82.6999L891.747 94.783L889.733 94.2434C888.626 93.9466 887.477 94.61 887.18 95.7176C886.883 96.8253 887.546 97.9743 888.654 98.2711L890.668 98.8107L887.43 110.894L885.416 110.354C884.309 110.057 883.16 110.721 882.863 111.828C882.566 112.936 883.23 114.085 884.337 114.382L916.559 123.016C917.666 123.312 918.815 122.649 919.112 121.541C919.409 120.434 918.746 119.285 917.638 118.988L915.624 118.448L918.862 106.365L920.876 106.905ZM911.596 117.369L891.458 111.973L894.696 99.8899C895.803 100.187 896.952 99.5233 897.249 98.4157C897.546 97.3081 896.882 96.159 895.775 95.8622L899.012 83.7791L919.151 89.1752L915.913 101.258C914.806 100.962 913.657 101.625 913.36 102.733C913.063 103.84 913.726 104.989 914.834 105.286L911.596 117.369Z" fill="#2C6CB4"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip3_18368_189992)">
+<path d="M954.742 247.505L936.542 236.997L950.115 213.489L968.315 223.996L954.742 247.505Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M963.841 252.759L954.741 247.505L965.249 229.305L974.349 234.559L963.841 252.759Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M936.542 236.997L927.442 231.743L937.949 213.543L947.05 218.797L936.542 236.997Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M948.707 236.943L944.157 234.316L941.092 239.624L945.642 242.251L948.707 236.943Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M953.258 239.57L948.707 236.943L945.643 242.251L950.193 244.878L953.258 239.57Z" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M947.924 230.418C947.561 231.046 946.758 231.261 946.129 230.899C945.501 230.536 945.286 229.733 945.649 229.105C946.011 228.476 946.815 228.261 947.443 228.624C948.071 228.986 948.286 229.79 947.924 230.418Z" fill="#2C6CB4"/>
+<path d="M954.749 234.358C954.386 234.987 954.602 235.79 955.23 236.153C955.858 236.515 956.661 236.3 957.024 235.672C957.387 235.044 957.172 234.24 956.543 233.878C955.915 233.515 955.112 233.73 954.749 234.358Z" fill="#2C6CB4"/>
+<path d="M952.474 233.045C952.111 233.673 951.308 233.888 950.68 233.526C950.051 233.163 949.836 232.36 950.199 231.731C950.562 231.103 951.365 230.888 951.993 231.251C952.621 231.613 952.837 232.417 952.474 233.045Z" fill="#2C6CB4"/>
+<path d="M950.551 225.868C950.188 226.496 949.384 226.711 948.756 226.348C948.128 225.986 947.913 225.182 948.276 224.554C948.638 223.926 949.442 223.711 950.07 224.073C950.698 224.436 950.913 225.24 950.551 225.868Z" fill="#2C6CB4"/>
+<path d="M957.376 229.808C957.013 230.436 957.229 231.24 957.857 231.602C958.485 231.965 959.288 231.75 959.651 231.122C960.014 230.493 959.799 229.69 959.17 229.327C958.542 228.965 957.739 229.18 957.376 229.808Z" fill="#2C6CB4"/>
+<path d="M955.101 228.495C954.738 229.123 953.935 229.338 953.307 228.975C952.678 228.613 952.463 227.809 952.826 227.181C953.188 226.553 953.992 226.338 954.62 226.7C955.248 227.063 955.464 227.866 955.101 228.495Z" fill="#2C6CB4"/>
+<path d="M953.177 221.317C952.815 221.946 952.011 222.161 951.383 221.798C950.755 221.436 950.54 220.632 950.902 220.004C951.265 219.376 952.069 219.161 952.697 219.523C953.325 219.886 953.54 220.689 953.177 221.317Z" fill="#2C6CB4"/>
+<path d="M960.003 225.258C959.64 225.886 959.856 226.689 960.484 227.052C961.112 227.415 961.915 227.2 962.278 226.571C962.641 225.943 962.425 225.14 961.797 224.777C961.169 224.414 960.366 224.63 960.003 225.258Z" fill="#2C6CB4"/>
+<path d="M957.728 223.944C957.365 224.573 956.562 224.788 955.934 224.425C955.305 224.062 955.09 223.259 955.453 222.631C955.815 222.003 956.619 221.787 957.247 222.15C957.875 222.513 958.09 223.316 957.728 223.944Z" fill="#2C6CB4"/>
+<path d="M958.013 209.305C962.232 208.174 966.575 210.681 967.705 214.9" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M956.651 204.203C963.682 202.319 970.921 206.498 972.805 213.529" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+<path d="M959.383 214.398C960.79 214.021 962.237 214.857 962.614 216.263" stroke="#2C6CB4" stroke-width="3.5" stroke-miterlimit="10"/>
+</g>
+<defs>
+<clipPath id="clip0_18368_189992">
+<rect width="50" height="50" fill="white" transform="translate(0 216.028) scale(1.00075) rotate(-30)"/>
+</clipPath>
+<clipPath id="clip1_18368_189992">
+<rect width="50" height="50" fill="white" transform="translate(54.054 82.8782) scale(1.00075) rotate(-15)"/>
+</clipPath>
+<clipPath id="clip2_18368_189992">
+<rect width="50" height="50" fill="white" transform="translate(887.613 69.9311) scale(1.00075) rotate(15)"/>
+</clipPath>
+<clipPath id="clip3_18368_189992">
+<rect width="50" height="50" fill="white" transform="translate(946.667 191.01) scale(1.00075) rotate(30)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-1.svg b/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-1.svg
deleted file mode 100644
index f1d0ee4799..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-1.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17168_73117)">
-<rect y="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(-15 0 16.6947)" fill="#0B8BB8"/>
-<rect x="0.612102" y="17.0481" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(-15 0.612102 17.0481)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M52.0802 41.4165L48.1135 26.6125L25.4028 32.6978L29.3695 47.5018L52.0802 41.4165ZM47.4524 24.1451C48.1216 23.9658 48.8331 24.0538 49.4303 24.3897C50.0276 24.7256 50.4616 25.2819 50.6369 25.9363L54.6037 40.7404C54.779 41.3947 54.6813 42.0936 54.332 42.6831C53.9828 43.2726 53.4106 43.7045 52.7414 43.8839L43.9094 46.2504L44.5705 48.7177L47.0939 48.0416L47.7551 50.5089L37.6614 53.2135L37.0003 50.7462L39.5237 50.07L38.8626 47.6027L30.0306 49.9692C29.3614 50.1485 28.6499 50.0605 28.0526 49.7246C27.4554 49.3887 27.0214 48.8324 26.8461 48.178L22.8793 33.3739C22.5124 32.0046 23.3411 30.6057 24.7416 30.2305L47.4524 24.1451ZM28.5873 34.489L39.9427 31.4463L41.5955 37.6147L30.2401 40.6573L28.5873 34.489ZM41.2044 31.1083L46.2512 29.756L46.9123 32.2233L41.8655 33.5756L41.2044 31.1083ZM47.2429 33.457L48.8957 39.6253L43.8489 40.9776L42.1961 34.8093L47.2429 33.457ZM30.5707 41.891L35.6175 40.5387L36.2786 43.0061L31.2318 44.3584L30.5707 41.891ZM36.8792 40.2006L41.926 38.8484L42.5872 41.3157L37.5403 42.668L36.8792 40.2006Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17168_73117" x="0" y="-2.01574" width="79.0005" height="83.0315" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73117"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17168_73117" result="effect2_innerShadow_17168_73117"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-2.svg b/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-2.svg
deleted file mode 100644
index 9708abc935..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-2.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17168_73122)">
-<rect x="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(15 16.6947 0)" fill="#0B8BB8"/>
-<rect x="17.0481" y="0.612102" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(15 17.0481 0.612102)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M46.8423 41.3968C48.9704 41.967 51.1449 40.6985 51.7151 38.5704C52.2853 36.4423 51.0364 34.2565 48.9083 33.6863C46.7802 33.1161 44.5903 34.3805 44.0201 36.5085C43.4499 38.6366 44.7142 40.8265 46.8423 41.3968ZM35.6899 36.7557C38.2497 37.4416 40.8544 35.9247 41.5403 33.3649C42.2262 30.805 40.7289 28.1891 38.1691 27.5031C35.6092 26.8172 32.9891 28.3299 32.3032 30.8898C31.6173 33.4497 33.13 36.0698 35.6899 36.7557ZM46.0159 44.4809C43.1939 43.7248 37.1543 43.6271 36.3981 46.4491L35.4684 49.9188L52.4314 54.464L53.3611 50.9943C54.1173 48.1723 48.8379 45.2371 46.0159 44.4809ZM34.8635 39.8398C31.2704 38.8771 23.5854 38.7517 22.6226 42.3447L21.5896 46.2L32.3843 49.0924L33.314 45.6227C33.6652 44.3119 34.7897 42.1505 38.4025 41.2509C37.1353 40.6139 35.8812 40.1126 34.8635 39.8398Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17168_73122" x="0.000478935" y="-2.01573" width="79.0005" height="83.0315" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73122"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17168_73122" result="effect2_innerShadow_17168_73122"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-3.svg b/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-3.svg
deleted file mode 100644
index 7151c40b16..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-3.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17168_73124)">
-<rect y="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(-30 0 32.2102)" fill="#0B8BB8"/>
-<rect x="0.682712" y="32.3932" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(-30 0.682712 32.3932)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M39.8182 37.1345L36.6293 31.6112L22.8211 39.5834L37.171 64.4382L64.7875 48.4938L53.6264 29.1623L39.8182 37.1345ZM41.0999 58.4877L38.3382 60.0821L36.7438 57.3205L39.5054 55.726L41.0999 58.4877ZM37.911 52.9644L35.1493 54.5588L33.5549 51.7972L36.3165 50.2027L37.911 52.9644ZM34.7221 47.4411L31.9605 49.0355L30.366 46.2739L33.1277 44.6794L34.7221 47.4411ZM31.5332 41.9178L28.7716 43.5122L27.1771 40.7506L29.9388 39.1561L31.5332 41.9178ZM46.6232 55.2988L43.8615 56.8932L42.2671 54.1316L45.0287 52.5372L46.6232 55.2988ZM43.4343 49.7755L40.6726 51.3699L39.0782 48.6083L41.8398 47.0139L43.4343 49.7755ZM40.2454 44.2522L37.4838 45.8466L35.8893 43.085L38.651 41.4906L40.2454 44.2522ZM37.0565 38.7289L34.2949 40.3233L32.7004 37.5617L35.4621 35.9673L37.0565 38.7289ZM60.4314 47.3266L49.3848 53.7044L47.7904 50.9427L50.552 49.3483L48.9576 46.5866L46.1959 48.1811L44.6015 45.4194L47.3631 43.825L45.7687 41.0633L43.0071 42.6578L41.4126 39.8961L52.4592 33.5184L60.4314 47.3266ZM51.292 37.8745L48.5304 39.4689L50.1248 42.2305L52.8864 40.6361L51.292 37.8745ZM54.4809 43.3977L51.7192 44.9922L53.3137 47.7538L56.0753 46.1594L54.4809 43.3977Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17168_73124" x="0" y="-2.01309" width="87.9996" height="92.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73124"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17168_73124" result="effect2_innerShadow_17168_73124"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-4.svg b/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-4.svg
deleted file mode 100644
index 11a06c0a4f..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-4.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_17168_73127)">
-<rect x="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(30 32.2102 0)" fill="#0B8BB8"/>
-<rect x="32.3932" y="0.682712" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(30 32.3932 0.682712)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M38.5395 45.4961L42.6252 38.4194L49.7019 42.5052L45.6162 49.5819L38.5395 45.4961ZM32.8305 54.0291L34.4249 51.2675L30.9728 49.2744C30.4205 48.9555 30.0568 48.4694 29.8817 47.816C29.7066 47.1625 29.7786 46.5597 30.0974 46.0073L32.0905 42.5553L29.3288 40.9608L30.5247 38.8896L33.2863 40.484L35.7577 36.2035L32.996 34.6091L34.1919 32.5378L36.9535 34.1323L38.9466 30.6802C39.2655 30.1279 39.7516 29.7642 40.405 29.5891C41.0584 29.414 41.6613 29.4859 42.2136 29.8048L45.6657 31.7978L47.1804 29.1743L49.2517 30.3701L47.7369 32.9937L52.0175 35.465L53.5322 32.8415L55.6034 34.0373L54.0887 36.6609L57.5408 38.6539C58.0931 38.9728 58.4568 39.459 58.6319 40.1124C58.807 40.7658 58.7351 41.3687 58.4162 41.921L56.4231 45.373L59.0467 46.8878L57.8509 48.959L55.2273 47.4443L52.7559 51.7248L55.3795 53.2396L54.1837 55.3108L51.5601 53.7961L49.5671 57.2481C49.2482 57.8005 48.762 58.1642 48.1086 58.3393C47.4552 58.5143 46.8523 58.4424 46.3 58.1235L42.8479 56.1305L41.2535 58.8921L39.1823 57.6963L40.7767 54.9347L36.4961 52.4633L34.9017 55.2249L32.8305 54.0291ZM47.4958 56.0523L56.345 40.7252L41.0178 31.876L32.1687 47.2032L47.4958 56.0523Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_17168_73127" x="-0.000439846" y="-2.01314" width="87.9996" height="92.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_17168_73127"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_17168_73127" result="effect2_innerShadow_17168_73127"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-widget-cluster.svg b/ui-ngx/src/assets/iot-hub/hero-widget-cluster.svg
new file mode 100644
index 0000000000..0df6ad4336
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-widget-cluster.svg
@@ -0,0 +1,57 @@
+<svg width="1011" height="231" viewBox="0 0 1011 231" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g opacity="0.8" clip-path="url(#clip0_18326_153917)">
+<path opacity="0.08" d="M152.513 38.2815C154.954 49.7635 147.624 61.0499 136.142 63.4905C124.66 65.9311 113.374 58.6016 110.933 47.1196C108.493 35.6376 115.822 24.3512 127.304 21.9106C138.786 19.4701 150.073 26.7996 152.513 38.2815ZM117.17 45.7939C118.879 53.8313 126.779 58.9619 134.817 57.2535C142.854 55.5451 147.985 47.6446 146.276 39.6072C144.568 31.5699 136.667 26.4392 128.63 28.1476C120.592 29.856 115.462 37.7565 117.17 45.7939Z" fill="#2C9755"/>
+<path d="M127.967 25.0282C127.601 23.3059 128.703 21.5873 130.46 21.4827C134.03 21.2703 137.614 21.9614 140.873 23.5157C145.096 25.53 148.537 28.8814 150.661 33.0503C152.785 37.2192 153.474 41.9724 152.621 46.5729C151.769 51.1734 149.422 55.3639 145.945 58.4947C142.468 61.6254 138.055 63.5214 133.39 63.8885C128.726 64.2556 124.071 63.0733 120.147 60.525C116.223 57.9768 113.249 54.2049 111.688 49.7945C110.482 46.3911 110.17 42.7543 110.754 39.2262C111.042 37.4891 112.866 36.5727 114.541 37.1168C116.215 37.6609 117.094 39.4642 116.919 41.2162C116.702 43.3845 116.962 45.5875 117.698 47.666C118.791 50.7533 120.873 53.3936 123.62 55.1774C126.366 56.9612 129.625 57.7888 132.89 57.5318C136.155 57.2748 139.244 55.9477 141.678 53.7562C144.112 51.5646 145.755 48.6312 146.352 45.4109C146.949 42.1906 146.466 38.8633 144.979 35.9451C143.492 33.0269 141.084 30.6809 138.128 29.2709C136.138 28.3216 133.974 27.8323 131.795 27.8217C130.034 27.8131 128.333 26.7504 127.967 25.0282Z" fill="#2C9755"/>
+<path d="M95.172 18.9727L155.463 6.15746L168.278 66.4483L107.987 79.2635L95.172 18.9727Z" stroke="#2C9755" stroke-opacity="0.2" stroke-width="1.59375" stroke-dasharray="5.31 5.31"/>
+<rect x="91.39" y="16.5151" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 91.39 16.5151)" fill="#2C9755"/>
+<rect x="151.68" y="3.69998" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 151.68 3.69998)" fill="#2C9755"/>
+<rect x="104.205" y="76.801" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 104.205 76.801)" fill="#2C9755"/>
+<rect x="164.495" y="63.982" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 164.495 63.982)" fill="#2C9755"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip1_18326_153917)">
+<path d="M855.138 6.15752L915.429 18.9727L902.613 79.2635L842.322 66.4483L855.138 6.15752Z" stroke="#2C9755" stroke-opacity="0.2" stroke-width="1.59375" stroke-dasharray="5.31 5.31"/>
+<rect x="852.684" y="2.37549" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 852.684 2.37549)" fill="#2C9755"/>
+<rect x="912.974" y="15.1906" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 912.974 15.1906)" fill="#2C9755"/>
+<rect x="839.869" y="62.6614" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 839.869 62.6614)" fill="#2C9755"/>
+<rect x="900.163" y="75.4726" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 900.163 75.4726)" fill="#2C9755"/>
+<path opacity="0.25" d="M860.4 35.7402L854.235 40.3178L849.648 61.8986L898.715 72.3282L906.768 34.4461L903.355 38.0892C900.749 40.8708 896.337 40.8792 893.721 38.1075L893.165 37.5186C891.078 35.3078 887.752 34.805 885.105 36.3L878.873 39.8194C875.962 41.4632 872.282 40.676 870.298 37.9852L869.665 37.1256C867.493 34.1788 863.339 33.5577 860.4 35.7402Z" fill="url(#paint0_linear_18326_153917)"/>
+<path d="M854.237 40.3161L860.402 35.7385C863.341 33.556 867.494 34.1771 869.666 37.1239L870.3 37.9835C872.284 40.6744 875.964 41.4615 878.874 39.8177L885.106 36.2983C887.754 34.8033 891.079 35.3061 893.166 37.5169L893.722 38.1059C896.339 40.8775 900.751 40.8691 903.356 38.0875L906.769 34.4445" stroke="#2C9755" stroke-width="2.09877" stroke-linecap="round"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip2_18326_153917)">
+<path d="M915.736 164.034L976.027 151.219L988.842 211.51L928.551 224.325L915.736 164.034Z" stroke="#2C9755" stroke-opacity="0.2" stroke-width="1.59375" stroke-dasharray="5.31 5.31"/>
+<rect x="911.954" y="161.576" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 911.954 161.576)" fill="#2C9755"/>
+<rect x="972.244" y="148.761" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 972.244 148.761)" fill="#2C9755"/>
+<rect x="924.769" y="221.862" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 924.769 221.862)" fill="#2C9755"/>
+<rect x="985.059" y="209.043" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(-12 985.059 209.043)" fill="#2C9755"/>
+<path opacity="0.08" d="M930.855 203.239C930.396 203.337 929.943 203.043 929.86 202.581C928.729 196.222 930.051 189.657 933.581 184.222C937.265 178.549 943.052 174.571 949.668 173.165C956.285 171.759 963.189 173.038 968.862 176.722C974.297 180.252 978.176 185.711 979.729 191.981C979.841 192.437 979.547 192.889 979.088 192.987L970.772 194.754C970.312 194.852 969.863 194.558 969.74 194.105C968.757 190.481 966.471 187.334 963.306 185.279C959.902 183.068 955.759 182.3 951.79 183.144C947.82 183.988 944.347 186.374 942.137 189.778C940.081 192.944 939.273 196.748 939.849 200.458C939.921 200.922 939.63 201.374 939.171 201.471L930.855 203.239Z" fill="#2C9755"/>
+<path d="M930.855 203.239C930.396 203.337 929.943 203.044 929.86 202.581C929.028 197.905 929.518 193.083 931.282 188.662C933.151 183.976 936.368 179.951 940.525 177.093C944.682 174.236 949.593 172.676 954.637 172.61C959.398 172.547 964.075 173.819 968.142 176.271C968.544 176.514 968.655 177.042 968.399 177.435L963.769 184.566C963.513 184.959 962.988 185.069 962.58 184.836C960.21 183.477 957.513 182.775 954.771 182.811C951.744 182.851 948.798 183.787 946.303 185.501C943.809 187.215 941.879 189.631 940.758 192.442C939.741 194.99 939.43 197.758 939.849 200.458C939.921 200.922 939.63 201.374 939.171 201.471L930.855 203.239Z" fill="#2C9755"/>
+</g>
+<g opacity="0.8" clip-path="url(#clip3_18326_153917)">
+<path d="M34.9682 151.188L95.259 164.003L82.4438 224.294L22.153 211.478L34.9682 151.188Z" stroke="#2C9755" stroke-opacity="0.2" stroke-width="1.59375" stroke-dasharray="5.31 5.31"/>
+<rect x="32.5145" y="147.405" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 32.5145 147.405)" fill="#2C9755"/>
+<rect x="92.8043" y="160.221" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 92.8043 160.221)" fill="#2C9755"/>
+<rect x="19.6994" y="207.691" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 19.6994 207.691)" fill="#2C9755"/>
+<rect x="79.9931" y="220.503" width="6.37632" height="6.37632" rx="0.53125" transform="rotate(12 79.9931 220.503)" fill="#2C9755"/>
+<rect x="59.7467" y="166.038" width="7.55712" height="43.4534" rx="0.944444" transform="rotate(12 59.7467 166.038)" fill="#2C9755"/>
+<rect x="41.7606" y="182.499" width="7.55712" height="23.616" rx="0.944444" transform="rotate(12 41.7606 182.499)" fill="#2C9755"/>
+<rect x="70.8564" y="181.92" width="7.55712" height="30.2285" rx="0.944444" transform="rotate(12 70.8564 181.92)" fill="#2C9755"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_18326_153917" x1="882.274" y1="29.238" x2="874.211" y2="67.1731" gradientUnits="userSpaceOnUse">
+<stop stop-color="#2C9755"/>
+<stop offset="1" stop-color="#2C9755" stop-opacity="0.25"/>
+</linearGradient>
+<clipPath id="clip0_18326_153917">
+<rect width="68" height="68" fill="white" transform="translate(91.3919 16.5151) rotate(-12)"/>
+</clipPath>
+<clipPath id="clip1_18326_153917">
+<rect width="68" height="68" fill="white" transform="translate(852.686 2.37549) rotate(12)"/>
+</clipPath>
+<clipPath id="clip2_18326_153917">
+<rect width="68" height="68" fill="white" transform="translate(911.956 161.576) rotate(-12)"/>
+</clipPath>
+<clipPath id="clip3_18326_153917">
+<rect width="68" height="68" fill="white" transform="translate(32.5165 147.405) rotate(12)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-widget-icon-1.svg b/ui-ngx/src/assets/iot-hub/hero-widget-icon-1.svg
deleted file mode 100644
index 7058c55569..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-widget-icon-1.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_16977_25487)">
-<rect y="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(-15 0 16.6947)" fill="#2C9755"/>
-<rect x="0.612102" y="17.0481" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(-15 0.612102 17.0481)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M28.3433 35.2655C27.6302 37.1086 27.3918 39.1005 27.6498 41.0585C27.6734 41.2131 27.6393 41.3711 27.5539 41.5024C27.4685 41.6337 27.3379 41.7291 27.1867 41.7707L21.3652 43.3306C21.2799 43.3537 21.1908 43.3589 21.1034 43.346C21.0161 43.333 20.9324 43.3021 20.8576 43.2553C20.7829 43.2084 20.7186 43.1466 20.669 43.0737C20.6194 43.0008 20.5855 42.9184 20.5693 42.8318C19.9008 39.0834 20.3754 35.2198 21.9317 31.7414C21.9691 31.6605 22.0231 31.5883 22.0901 31.5294C22.1571 31.4705 22.2357 31.4262 22.3208 31.3995C22.4059 31.3727 22.4957 31.364 22.5844 31.3739C22.673 31.3838 22.7586 31.4122 22.8356 31.4571L28.0734 34.4746C28.2062 34.5519 28.3065 34.6744 28.3561 34.8197C28.4056 34.9649 28.4011 35.1232 28.3433 35.2655Z" fill="white"/>
-<path d="M47.5436 22.9031L44.5157 28.1362C44.4375 28.2686 44.3144 28.3688 44.1687 28.4184C44.023 28.4681 43.8644 28.464 43.7216 28.4068C41.3786 27.5104 38.8107 27.3776 36.3858 28.0273C33.9609 28.677 31.8035 30.0761 30.2226 32.0239C30.128 32.1454 29.9926 32.2288 29.8414 32.2587C29.6902 32.2886 29.5333 32.263 29.3996 32.1866L24.1608 29.1685C24.0835 29.1245 24.0163 29.0648 23.9635 28.9933C23.9107 28.9219 23.8734 28.8401 23.8541 28.7534C23.8347 28.6667 23.8337 28.5769 23.8512 28.4897C23.8686 28.4025 23.9041 28.32 23.9553 28.2472C26.5406 24.7024 30.2647 22.1487 34.5061 21.0122C38.7475 19.8758 43.2495 20.2253 47.2609 22.0025C47.3416 22.0399 47.4136 22.0937 47.4723 22.1604C47.531 22.2272 47.575 22.3055 47.6017 22.3903C47.6283 22.475 47.6369 22.5644 47.6269 22.6528C47.6169 22.7411 47.5885 22.8264 47.5436 22.9031Z" fill="white"/>
-<path d="M57.9959 34.541C60.7271 44.7344 54.6571 55.2647 44.417 58.0044C35.005 60.5263 25.2718 55.6215 21.6826 46.7121C21.6501 46.6282 21.6357 46.5384 21.6404 46.4486C21.6451 46.3588 21.6688 46.271 21.7098 46.1909C21.7509 46.1108 21.8084 46.0402 21.8787 45.9838C21.9489 45.9274 22.0303 45.8865 22.1175 45.8637L27.9769 44.2937C28.1226 44.2556 28.2771 44.2701 28.4131 44.3346C28.5491 44.3991 28.6579 44.5095 28.7203 44.6463C29.997 47.3108 32.2229 49.4041 34.9636 50.5177C37.7044 51.6312 40.7634 51.6853 43.5442 50.6693C48.807 48.7635 52.0798 43.2921 51.2455 37.7689C50.8129 34.8229 49.2858 32.1483 46.9674 30.2765C46.8461 30.1821 46.7629 30.0471 46.7333 29.8963C46.7037 29.7455 46.7296 29.589 46.8062 29.4557L49.8341 24.2226C49.8783 24.1454 49.9382 24.0782 50.0099 24.0254C50.0815 23.9727 50.1634 23.9354 50.2503 23.916C50.3372 23.8966 50.4272 23.8955 50.5145 23.9128C50.6018 23.9301 50.6845 23.9654 50.7573 24.0165C54.3134 26.5864 56.8703 30.304 57.9959 34.541Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_16977_25487" x="0" y="-2.01525" width="79.0005" height="83.032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25487"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_16977_25487" result="effect2_innerShadow_16977_25487"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-widget-icon-2.svg b/ui-ngx/src/assets/iot-hub/hero-widget-icon-2.svg
deleted file mode 100644
index 905ae06615..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-widget-icon-2.svg
+++ /dev/null
@@ -1,25 +0,0 @@
-<svg width="79" height="79" viewBox="0 0 79 79" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_16977_25492)">
-<rect x="16.6947" width="64.5032" height="64.5032" rx="5.99735" transform="rotate(15 16.6947 0)" fill="#2C9755"/>
-<rect x="17.0481" y="0.612102" width="63.5037" height="63.5037" rx="5.49758" transform="rotate(15 17.0481 0.612102)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-<path d="M24.4511 48.4844L47.6648 54.7045C50.0385 55.3405 52.208 53.1629 51.5704 50.7948L45.337 27.631C44.6994 25.2629 41.7399 24.4699 40.0037 26.202L23.0236 43.1456C21.2874 44.8777 22.0774 47.8483 24.4511 48.4844ZM38.9491 40.8046C38.1013 40.5774 37.5935 39.6979 37.8207 38.8501L38.6467 35.7673C38.8739 34.9196 39.7534 34.4118 40.6012 34.6389C41.4489 34.8661 41.9567 35.7456 41.7295 36.5934L40.9035 39.6762C40.6763 40.524 39.7969 41.0317 38.9491 40.8046ZM38.8384 47.3832L35.7556 46.5572L36.5816 43.4744L39.6645 44.3004L38.8384 47.3832Z" fill="white"/>
-</g>
-<defs>
-<filter id="filter0_ii_16977_25492" x="0.000478935" y="-2.01573" width="79.0005" height="83.032" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25492"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_16977_25492" result="effect2_innerShadow_16977_25492"/>
-</filter>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-widget-icon-3.svg b/ui-ngx/src/assets/iot-hub/hero-widget-icon-3.svg
deleted file mode 100644
index 129999a1a7..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-widget-icon-3.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_16977_25494)">
-<g clip-path="url(#clip0_16977_25494)">
-<rect y="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(-30 0 32.2102)" fill="#2C9755"/>
-<g clip-path="url(#clip1_16977_25494)">
-<path d="M38.3282 49.6285L45.5 62.0505C45.7113 62.4165 45.7686 62.8515 45.6592 63.2598C45.5498 63.6681 45.2827 64.0162 44.9166 64.2276L39.3958 67.415C39.0297 67.6264 38.5947 67.6836 38.1864 67.5742C37.7781 67.4648 37.43 67.1977 37.2187 66.8317L30.0469 54.4097C29.8355 54.0437 29.7783 53.6087 29.8877 53.2004C29.9971 52.7921 30.2642 52.444 30.6302 52.2327L36.1511 49.0452C36.5171 48.8338 36.9522 48.7766 37.3604 48.886C37.7687 48.9954 38.1168 49.2625 38.3282 49.6285ZM38.4273 27.4879L32.9064 30.6753C32.5404 30.8867 32.2732 31.2348 32.1638 31.6431C32.0544 32.0514 32.1117 32.4864 32.3231 32.8524L48.2604 60.4567C48.4718 60.8228 48.8199 61.0899 49.2281 61.1993C49.6364 61.3087 50.0714 61.2514 50.4375 61.0401L55.9584 57.8526C56.3244 57.6413 56.5915 57.2932 56.7009 56.8849C56.8103 56.4766 56.7531 56.0416 56.5417 55.6755L40.6044 28.0712C40.393 27.7052 40.0449 27.4381 39.6366 27.3287C39.2283 27.2193 38.7933 27.2765 38.4273 27.4879ZM53.4533 28.014L47.9325 31.2015C47.5664 31.4128 47.2993 31.7609 47.1899 32.1692C47.0805 32.5775 47.1378 33.0125 47.3491 33.3786L59.3021 54.0818C59.5135 54.4478 59.8616 54.715 60.2699 54.8244C60.6781 54.9338 61.1132 54.8765 61.4792 54.6651L67.0001 51.4777C67.3661 51.2663 67.6332 50.9182 67.7426 50.5099C67.852 50.1017 67.7948 49.6666 67.5834 49.3006L55.6304 28.5974C55.4191 28.2313 55.071 27.9642 54.6627 27.8548C54.2544 27.7454 53.8194 27.8027 53.4533 28.014Z" fill="white"/>
-</g>
-</g>
-<rect x="0.682712" y="32.3932" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(-30 0.682712 32.3932)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-</g>
-<defs>
-<filter id="filter0_ii_16977_25494" x="0" y="-2.01358" width="87.9996" height="92.0259" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25494"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_16977_25494" result="effect2_innerShadow_16977_25494"/>
-</filter>
-<clipPath id="clip0_16977_25494">
-<rect y="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(-30 0 32.2102)" fill="white"/>
-</clipPath>
-<clipPath id="clip1_16977_25494">
-<rect width="37.9832" height="37.9832" fill="white" transform="translate(18.3072 37.263) scale(1.00701) rotate(-30)"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/ui-ngx/src/assets/iot-hub/hero-widget-icon-4.svg b/ui-ngx/src/assets/iot-hub/hero-widget-icon-4.svg
deleted file mode 100644
index 4483d53642..0000000000
--- a/ui-ngx/src/assets/iot-hub/hero-widget-icon-4.svg
+++ /dev/null
@@ -1,35 +0,0 @@
-<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g filter="url(#filter0_ii_16977_25497)">
-<g clip-path="url(#clip0_16977_25497)">
-<rect x="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(30 32.2102 0)" fill="#2C9755"/>
-<g clip-path="url(#clip1_16977_25497)">
-<path d="M40.3142 24.9296C40.7543 24.1673 40.4931 23.1926 39.7309 22.7525C38.9686 22.3124 37.9939 22.5736 37.5538 23.3359L27.9915 39.8982L24.8039 45.4193C23.4836 47.7062 24.2671 50.6303 26.5539 51.9506L48.6374 64.7005C49.3997 65.1406 50.3744 64.8794 50.8145 64.1171C51.2546 63.3548 50.9934 62.3801 50.2311 61.94L28.1477 49.1901C27.3854 48.75 27.1242 47.7753 27.5643 47.0131L30.4217 42.0639L36.953 40.3138L38.2905 45.3057C38.5184 46.1558 39.3923 46.6604 40.2425 46.4326L56.1197 42.1783L57.4573 47.1702C57.6851 48.0203 58.559 48.5249 59.4092 48.2971C60.2593 48.0692 60.7639 47.1953 60.5361 46.3452L58.7861 39.8139C58.5583 38.9637 57.6843 38.4591 56.8342 38.687L40.9569 42.9413L39.6194 37.9495C39.3915 37.0992 38.5176 36.5947 37.6674 36.8225L32.6756 38.1601L40.3142 24.9296Z" fill="white"/>
-</g>
-</g>
-<rect x="32.3932" y="0.682712" width="63.4209" height="63.4209" rx="5.49758" transform="rotate(30 32.3932 0.682712)" stroke="white" stroke-opacity="0.12" stroke-width="0.999559"/>
-</g>
-<defs>
-<filter id="filter0_ii_16977_25497" x="-0.000439846" y="-2.01314" width="87.9996" height="92.0259" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-<feFlood flood-opacity="0" result="BackgroundImageFix"/>
-<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="-1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="shape" result="effect1_innerShadow_16977_25497"/>
-<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-<feOffset dy="1.99912"/>
-<feGaussianBlur stdDeviation="3.99824"/>
-<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/>
-<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.16 0"/>
-<feBlend mode="normal" in2="effect1_innerShadow_16977_25497" result="effect2_innerShadow_16977_25497"/>
-</filter>
-<clipPath id="clip0_16977_25497">
-<rect x="32.2102" width="64.4205" height="64.4205" rx="5.99735" transform="rotate(30 32.2102 0)" fill="white"/>
-</clipPath>
-<clipPath id="clip1_16977_25497">
-<rect width="37.9832" height="37.9832" fill="white" transform="translate(37.1843 17.6011) scale(1.00701) rotate(30)"/>
-</clipPath>
-</defs>
-</svg>