diff --git a/springwolf-ui/src/app/components/new/channels/channels.component.html b/springwolf-ui/src/app/components/new/channels/channels.component.html
index 7ee69ca09..b213b6100 100644
--- a/springwolf-ui/src/app/components/new/channels/channels.component.html
+++ b/springwolf-ui/src/app/components/new/channels/channels.component.html
@@ -3,6 +3,22 @@ <h2>Channels</h2>
 @for (channel of channels; track channel) {
 <article appNavigationTarget [id]="channel.anchorIdentifier">
   <h3>{{ channel.name }}</h3>
+
+  <div class="row" *ngIf="isShowBindings">
+    <div class="width-6/12 width-12/12-s">
+      <h6>Channel Binding</h6>
+    </div>
+    <div class="width-6/12 width-12/12-s">
+      <div *ngIf="channel.bindings">
+        <app-prism-editor
+          code="{{ JSON.stringify(channel.bindings, null, 2) }}"
+          language="json"
+          readonly="true"
+        />
+      </div>
+    </div>
+  </div>
+
   @for (channelOperation of channel.operations; track channelOperation) {
   <mat-card
     appearance="outlined"
diff --git a/springwolf-ui/src/app/components/new/channels/channels.component.ts b/springwolf-ui/src/app/components/new/channels/channels.component.ts
index f8eb5b52e..fab609965 100644
--- a/springwolf-ui/src/app/components/new/channels/channels.component.ts
+++ b/springwolf-ui/src/app/components/new/channels/channels.component.ts
@@ -2,6 +2,7 @@
 import { Component, OnInit } from "@angular/core";
 import { AsyncApiService } from "../../../service/asyncapi/asyncapi.service";
 import { Channel } from "../../../models/channel.model";
+import { UiService } from "../../../service/ui.service";
 
 @Component({
   selector: "app-channels-new",
@@ -10,12 +11,21 @@ import { Channel } from "../../../models/channel.model";
 })
 export class ChannelsNewComponent implements OnInit {
   channels: Channel[] = [];
+  isShowBindings: boolean = UiService.DEFAULT_SHOW_BINDINGS;
+  JSON = JSON;
 
-  constructor(private asyncApiService: AsyncApiService) {}
+  constructor(
+    private asyncApiService: AsyncApiService,
+    private uiService: UiService
+  ) {}
 
   ngOnInit(): void {
     this.asyncApiService.getAsyncApi().subscribe((asyncapi) => {
       this.channels = asyncapi.channels;
     });
+
+    this.uiService.isShowBindings$.subscribe(
+      (value) => (this.isShowBindings = value)
+    );
   }
 }
diff --git a/springwolf-ui/src/app/service/asyncapi/asyncapi-mapper.service.ts b/springwolf-ui/src/app/service/asyncapi/asyncapi-mapper.service.ts
index 7739f8041..b7444f50c 100644
--- a/springwolf-ui/src/app/service/asyncapi/asyncapi-mapper.service.ts
+++ b/springwolf-ui/src/app/service/asyncapi/asyncapi-mapper.service.ts
@@ -258,7 +258,7 @@ export class AsyncApiMapperService {
           "message of channel " + channelName,
           () => {
             const messageId = this.resolveRefId(operationMessage.$ref);
-            const channelMessage = channel.messages[messageId];
+            const channelMessage = channel.messages!![messageId];
             const channelMessageId = this.resolveRefId(channelMessage.$ref);
             const message = messages[channelMessageId];
 
diff --git a/springwolf-ui/src/app/service/asyncapi/models/channels.model.ts b/springwolf-ui/src/app/service/asyncapi/models/channels.model.ts
index caae40d9f..0a538c6dc 100644
--- a/springwolf-ui/src/app/service/asyncapi/models/channels.model.ts
+++ b/springwolf-ui/src/app/service/asyncapi/models/channels.model.ts
@@ -8,7 +8,7 @@ export interface ServerChannels {
 export interface ServerChannel {
   address: string;
   description?: string;
-  messages: {
+  messages?: {
     [key: string]: {
       $ref: string;
     };