diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.html
index a1e69167ec..c0d3ac14c3 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.html
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.html
@@ -213,7 +213,8 @@
               (cardClick)="openItemDetail($event)"
               (creatorClick)="navigateToCreator($event)"
               (installClick)="installItem($event)"
-              (updateClick)="updateItem($event)">
+              (updateClick)="updateItem($event)"
+              (deleteClick)="deleteInstalledItem($event)">
             </tb-iot-hub-item-card>
           }
         </div>
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.scss
index 93b66b7c80..3f7c2373ee 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.scss
@@ -26,11 +26,16 @@
   height: 100%;
 }
 
-// Tabs — Design: px-40, bottom border rgba(0,0,0,0.12)
+// Tabs — Design: px-40, bottom border, labels auto-width (not stretched)
 .tb-iot-hub-tabs {
   padding: 0 40px;
   flex-shrink: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+
+  .mat-mdc-tab-link {
+    min-width: auto;
+    flex: 0 0 auto;
+  }
 }
 
 // Two-column layout below tabs
@@ -45,6 +50,8 @@
   flex-shrink: 0;
   border-right: 1px solid rgba(0, 0, 0, 0.12);
   position: relative;
+  padding-bottom: 48px;
+  margin-bottom: -48px;
 }
 
 .tb-iot-hub-filters-wrapper {
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.ts
index f753f0da27..697b540782 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-browse.component.ts
@@ -34,6 +34,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { TbIotHubItemDetailDialogComponent, IotHubItemDetailDialogData } from './iot-hub-item-detail-dialog.component';
 import { TbIotHubInstallDialogComponent, IotHubInstallDialogData } from './iot-hub-install-dialog.component';
 import { TbIotHubUpdateDialogComponent, IotHubUpdateDialogData } from './iot-hub-update-dialog.component';
+import { TbIotHubDeleteDialogComponent, IotHubDeleteDialogData } from './iot-hub-delete-dialog.component';
 
 interface SortOption {
   value: string;
@@ -92,6 +93,7 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
   widgetTypes: Map<string, string> = widgetTypeTranslations;
   ruleChainTypes: Map<string, string> = ruleChainTypeTranslations;
 
+  installedWidgets: IotHubInstalledItem[] = null;
   installedSolutionTemplates: IotHubInstalledItem[] = null;
 
   private searchSubject = new Subject<string>();
@@ -123,6 +125,11 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
       }
     }
     this.updateCategories();
+    if (this.activeType === ItemType.WIDGET) {
+      this.loadInstalledWidgets();
+    } else if (this.activeType === ItemType.SOLUTION_TEMPLATE) {
+      this.loadInstalledSolutionTemplates();
+    }
     this.loadItems();
   }
 
@@ -153,7 +160,9 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
     this.activeRuleChainTypes.clear();
     this.updateCategories();
     this.pageIndex = 0;
-    if (type === ItemType.SOLUTION_TEMPLATE) {
+    if (type === ItemType.WIDGET) {
+      this.loadInstalledWidgets();
+    } else if (type === ItemType.SOLUTION_TEMPLATE) {
       this.loadInstalledSolutionTemplates();
     }
     this.loadItems();
@@ -356,14 +365,17 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
   }
 
   getInstalledItem(item: MpItemVersionView): IotHubInstalledItem | undefined {
-    if (this.activeType !== ItemType.SOLUTION_TEMPLATE || !this.installedSolutionTemplates) {
-      return undefined;
+    if (this.activeType === ItemType.WIDGET && this.installedWidgets) {
+      return this.installedWidgets.find(i => i.itemId === item.itemId);
     }
-    return this.installedSolutionTemplates.find(i => i.itemId === item.itemId);
+    if (this.activeType === ItemType.SOLUTION_TEMPLATE && this.installedSolutionTemplates) {
+      return this.installedSolutionTemplates.find(i => i.itemId === item.itemId);
+    }
+    return undefined;
   }
 
   openItemDetail(item: MpItemVersionView): void {
-    this.dialog.open(TbIotHubItemDetailDialogComponent, {
+    const dialogRef = this.dialog.open(TbIotHubItemDetailDialogComponent, {
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
       autoFocus: false,
       data: {
@@ -372,19 +384,25 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
         installedItem: this.getInstalledItem(item)
       } as IotHubItemDetailDialogData
     });
+    dialogRef.afterClosed().subscribe(result => {
+      if (result === 'installed' || result === 'deleted') {
+        this.reloadInstalledItems();
+      }
+    });
   }
 
   installItem(item: MpItemVersionView): void {
     const dialogRef = this.dialog.open(TbIotHubInstallDialogComponent, {
       panelClass: ['tb-dialog'],
+      autoFocus: false,
       data: {
         item,
         iotHubApiService: this.iotHubApiService
       } as IotHubInstallDialogData
     });
     dialogRef.afterClosed().subscribe(result => {
-      if (result === 'installed' && this.activeType === ItemType.SOLUTION_TEMPLATE) {
-        this.loadItems();
+      if (result === 'installed') {
+        this.reloadInstalledItems();
       }
     });
   }
@@ -396,6 +414,7 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
     }
     const dialogRef = this.dialog.open(TbIotHubUpdateDialogComponent, {
       panelClass: ['tb-dialog'],
+      autoFocus: false,
       data: {
         installedItemId: installedItem.id.id,
         itemName: item.name,
@@ -406,8 +425,27 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
       } as IotHubUpdateDialogData
     });
     dialogRef.afterClosed().subscribe(result => {
-      if (result === 'updated' && this.activeType === ItemType.SOLUTION_TEMPLATE) {
-        this.loadItems();
+      if (result === 'updated') {
+        this.reloadInstalledItems();
+      }
+    });
+  }
+
+  deleteInstalledItem(item: MpItemVersionView): void {
+    const installedItem = this.getInstalledItem(item);
+    if (!installedItem) {
+      return;
+    }
+    const dialogRef = this.dialog.open(TbIotHubDeleteDialogComponent, {
+      panelClass: ['tb-dialog'],
+      autoFocus: false,
+      data: { itemName: item.name } as IotHubDeleteDialogData
+    });
+    dialogRef.afterClosed().subscribe(confirmed => {
+      if (confirmed) {
+        this.iotHubApiService.deleteInstalledItem(installedItem.id.id).subscribe(() => {
+          this.reloadInstalledItems();
+        });
       }
     });
   }
@@ -420,6 +458,18 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
     this.router.navigate(['/iot-hub/installed']);
   }
 
+  private loadInstalledWidgets(): void {
+    if (this.installedWidgets !== null) {
+      return;
+    }
+    const pageLink = new PageLink(10000, 0);
+    this.iotHubApiService.getInstalledItems(pageLink, ItemType.WIDGET, {ignoreLoading: true}).subscribe({
+      next: (data) => {
+        this.installedWidgets = data.data;
+      }
+    });
+  }
+
   private loadInstalledSolutionTemplates(): void {
     if (this.installedSolutionTemplates !== null) {
       return;
@@ -432,6 +482,20 @@ export class TbIotHubBrowseComponent implements OnInit, OnDestroy {
     });
   }
 
+  private reloadInstalledItems(): void {
+    const config = {ignoreLoading: true};
+    const pageLink = new PageLink(10000, 0);
+    if (this.activeType === ItemType.WIDGET) {
+      this.iotHubApiService.getInstalledItems(pageLink, ItemType.WIDGET, config).subscribe(data => {
+        this.installedWidgets = data.data;
+      });
+    } else if (this.activeType === ItemType.SOLUTION_TEMPLATE) {
+      this.iotHubApiService.getInstalledItems(pageLink, ItemType.SOLUTION_TEMPLATE, config).subscribe(data => {
+        this.installedSolutionTemplates = data.data;
+      });
+    }
+  }
+
   private updateCategories(): void {
     this.categories = getCategoriesForType(this.activeType);
   }
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html
index 62bac84619..d664a3bbfd 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.html
@@ -47,9 +47,9 @@
 
       <div class="tb-iot-hub-creator-links">
         @if (creator.website) {
-          <a mat-stroked-button [href]="creator.website" target="_blank" class="tb-iot-hub-creator-website">
+          <a mat-stroked-button color="primary" [href]="creator.website" target="_blank" class="tb-iot-hub-creator-website">
             <mat-icon>language</mat-icon>
-            {{ creator.website | slice:0:40 }}
+            {{ getWebsiteLabel() }}
           </a>
         }
         @if (creator.githubUrl) {
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
index 5817d3e4c9..b639426cae 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.scss
@@ -18,12 +18,13 @@
 
 :host {
   display: block;
+  padding: 16px;
 }
 
 .tb-iot-hub-creator-page {
   background: white;
   border-radius: 8px;
-  padding: 24px 40px;
+  padding: 40px 40px 48px;
 }
 
 // Back button
@@ -102,6 +103,15 @@
   display: flex;
   align-items: center;
   gap: 8px;
+
+  .mat-mdc-icon-button {
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+    color: rgba(0, 0, 0, 0.54);
+    --mdc-icon-button-state-layer-size: 40px;
+    --mdc-icon-button-icon-color: rgba(0, 0, 0, 0.54);
+  }
 }
 
 .tb-iot-hub-creator-website {
@@ -109,6 +119,18 @@
   font-size: 14px;
   font-weight: 500;
   text-decoration: none;
+  height: 40px;
+
+  &.mat-primary {
+    --mat-button-outlined-outline-color: #{$tb-primary-color};
+  }
+}
+
+// Browse component — stretch to full width and bottom, ignore parent padding
+tb-iot-hub-browse {
+  margin-left: -40px;
+  margin-right: -40px;
+  margin-bottom: 0;
 }
 
 // Published items heading
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.ts b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.ts
index 5af791adbb..a70a446a80 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-creator-profile.component.ts
@@ -56,6 +56,10 @@ export class TbIotHubCreatorProfileComponent implements OnInit, OnDestroy {
     return this.creator?.avatarUrl ? this.iotHubApiService.resolveResourceUrl(this.creator.avatarUrl) : null;
   }
 
+  getWebsiteLabel(): string {
+    return this.creator?.website?.replace(/^https?:\/\//, '') || '';
+  }
+
   goBack(): void {
     this.router.navigate(['/iot-hub']);
   }
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 45905ea495..1baeaebdcc 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
@@ -69,19 +69,23 @@ export class TbIotHubHomeComponent implements OnInit, OnDestroy {
     },
     {
       type: ItemType.SOLUTION_TEMPLATE, labelKey: 'item.type-solution-template-plural', color: '#2666a9',
-      gradientColor: 'rgba(38, 102, 169, 0.1)', icons: []
+      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.CALCULATED_FIELD, labelKey: 'item.type-calculated-field-plural', color: '#006d92',
-      gradientColor: 'rgba(0, 109, 146, 0.1)', icons: []
+      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.RULE_CHAIN, labelKey: 'item.type-rule-chain-plural', color: '#95694b',
-      gradientColor: 'rgba(149, 105, 75, 0.1)', icons: []
+      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.DEVICE, labelKey: 'iot-hub.and-devices', color: '#4b8a79',
-      gradientColor: 'rgba(75, 138, 121, 0.1)', icons: []
+      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']
     }
   ];
 
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.html
index 532e9a2770..9d3abff394 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.html
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-card.component.html
@@ -22,6 +22,9 @@
       <tb-icon>{{ getPlaceholderIcon() }}</tb-icon>
     </div>
     <div class="tb-iot-hub-compact-content">
+      @if (showSubtype && getSubtypeLabel(); as subtypeLabel) {
+        <span class="tb-iot-hub-card-subtype">{{ subtypeLabel }}</span>
+      }
       <h3 class="tb-iot-hub-compact-name">{{ item.name }}</h3>
       <div class="tb-iot-hub-compact-meta">
         <tb-icon class="tb-iot-hub-compact-author-icon">person</tb-icon>
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
new file mode 100644
index 0000000000..7734b75c7a
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-1.svg
@@ -0,0 +1,25 @@
+<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
new file mode 100644
index 0000000000..ac28694c40
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-2.svg
@@ -0,0 +1,25 @@
+<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
new file mode 100644
index 0000000000..860997b4a5
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-3.svg
@@ -0,0 +1,25 @@
+<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
new file mode 100644
index 0000000000..356d5dece0
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-calculated-field-icon-4.svg
@@ -0,0 +1,25 @@
+<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-device-icon-1.svg b/ui-ngx/src/assets/iot-hub/hero-device-icon-1.svg
new file mode 100644
index 0000000000..8ef1b628a4
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-device-icon-1.svg
@@ -0,0 +1,25 @@
+<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
new file mode 100644
index 0000000000..57e615a72d
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-device-icon-2.svg
@@ -0,0 +1,25 @@
+<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
new file mode 100644
index 0000000000..1e7f844ba7
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-device-icon-3.svg
@@ -0,0 +1,25 @@
+<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
new file mode 100644
index 0000000000..164db57b9a
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-device-icon-4.svg
@@ -0,0 +1,30 @@
+<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-icon-1.svg b/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-1.svg
new file mode 100644
index 0000000000..53a6019a4d
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-1.svg
@@ -0,0 +1,25 @@
+<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
new file mode 100644
index 0000000000..917f875faa
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-2.svg
@@ -0,0 +1,25 @@
+<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
new file mode 100644
index 0000000000..c5ecbe9b74
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-3.svg
@@ -0,0 +1,25 @@
+<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
new file mode 100644
index 0000000000..eda7544128
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-rule-chain-icon-4.svg
@@ -0,0 +1,35 @@
+<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-icon-1.svg b/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-1.svg
new file mode 100644
index 0000000000..f1d0ee4799
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-1.svg
@@ -0,0 +1,25 @@
+<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
new file mode 100644
index 0000000000..9708abc935
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-2.svg
@@ -0,0 +1,25 @@
+<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
new file mode 100644
index 0000000000..7151c40b16
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-3.svg
@@ -0,0 +1,25 @@
+<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
new file mode 100644
index 0000000000..11a06c0a4f
--- /dev/null
+++ b/ui-ngx/src/assets/iot-hub/hero-solution-template-icon-4.svg
@@ -0,0 +1,25 @@
+<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>