diff --git a/springwolf-ui/src/app/channels/channel-main/channel-main.component.css b/springwolf-ui/src/app/channels/channel-main/channel-main.component.css
index 42c3aac9d..545231e1c 100644
--- a/springwolf-ui/src/app/channels/channel-main/channel-main.component.css
+++ b/springwolf-ui/src/app/channels/channel-main/channel-main.component.css
@@ -29,13 +29,6 @@ button {
   font-weight: normal;
 }
 
-.header-name {
-  background-color: #e0e0e0;
-  border-radius: 4px;
-  padding: 6px;
-  font-weight: normal;
-}
-
 .button-container {
   height: 50px;
 }
diff --git a/springwolf-ui/src/app/channels/channel-main/channel-main.component.html b/springwolf-ui/src/app/channels/channel-main/channel-main.component.html
index e26c60ad3..01b1b509f 100644
--- a/springwolf-ui/src/app/channels/channel-main/channel-main.component.html
+++ b/springwolf-ui/src/app/channels/channel-main/channel-main.component.html
@@ -94,23 +94,19 @@ <h4>Message</h4>
     </mat-tab>
     <mat-tab label="Schema">
       <h4>
-        {{ schemaName }}
-        <span class="payload-name">
-          <a [href]="operation.message.payload.anchorUrl">{{
-            operation.message.payload.name
-          }}</a>
-        </span>
+        Schema:
+        <a [href]="operation.message.payload.anchorUrl">{{
+          operation.message.payload.name
+        }}</a>
       </h4>
       <app-schema *ngIf="schema" [schema]="schema"></app-schema>
     </mat-tab>
     <mat-tab label="Headers">
       <h4>
-        {{ headersSchemaName }}
-        <span class="header-name">
-          <a [href]="operation.message.headers.anchorUrl">{{
-            operation.message.headers.name
-          }}</a>
-        </span>
+        Schema:
+        <a [href]="operation.message.headers.anchorUrl">{{
+          operation.message.headers.name
+        }}</a>
       </h4>
       <app-schema *ngIf="headers" [schema]="headers"></app-schema>
       <div class="flex-column">
diff --git a/springwolf-ui/src/app/channels/channel-main/channel-main.component.ts b/springwolf-ui/src/app/channels/channel-main/channel-main.component.ts
index 0336ab5f2..abb1e6134 100644
--- a/springwolf-ui/src/app/channels/channel-main/channel-main.component.ts
+++ b/springwolf-ui/src/app/channels/channel-main/channel-main.component.ts
@@ -1,5 +1,5 @@
 /* SPDX-License-Identifier: Apache-2.0 */
-import { Component, OnInit, Input } from "@angular/core";
+import { Component, Input, OnInit } from "@angular/core";
 import { AsyncApiService } from "src/app/shared/asyncapi.service";
 import { Example } from "src/app/shared/models/example.model";
 import { Schema } from "src/app/shared/models/schema.model";
@@ -19,12 +19,12 @@ export class ChannelMainComponent implements OnInit {
   @Input() operation: Operation;
 
   schema: Schema;
-  schemaName: string;
+  schemaIdentifier: string;
   defaultExample: Example;
   defaultExampleType: string;
   exampleTextAreaLineCount: number;
   headers: Schema;
-  headersSchemaName: string;
+  headersSchemaIdentifier: string;
   headersExample: Example;
   headersTextAreaLineCount: number;
   protocolName: string;
@@ -40,19 +40,19 @@ export class ChannelMainComponent implements OnInit {
   ngOnInit(): void {
     this.asyncApiService.getAsyncApi().subscribe((asyncapi) => {
       const schemas: Map<string, Schema> = asyncapi.components.schemas;
-      this.schemaName = this.operation.message.payload.name.slice(
+      this.schemaIdentifier = this.operation.message.payload.name.slice(
         this.operation.message.payload.name.lastIndexOf("/") + 1
       );
-      this.schema = schemas.get(this.schemaName);
+      this.schema = schemas.get(this.schemaIdentifier);
 
       this.defaultExample = this.schema.example;
       this.exampleTextAreaLineCount = this.defaultExample?.lineCount || 0;
       this.defaultExampleType = this.operation.message.name;
 
-      this.headersSchemaName = this.operation.message.headers.name.slice(
+      this.headersSchemaIdentifier = this.operation.message.headers.name.slice(
         this.operation.message.headers.name.lastIndexOf("/") + 1
       );
-      this.headers = schemas.get(this.headersSchemaName);
+      this.headers = schemas.get(this.headersSchemaIdentifier);
       this.headersExample = this.headers.example;
       this.headersTextAreaLineCount = this.headersExample?.lineCount || 0;
       this.messageBindingExampleTextAreaLineCount =
diff --git a/springwolf-ui/src/app/channels/channels.component.html b/springwolf-ui/src/app/channels/channels.component.html
index 2ebfeb6e2..c85f7f6fa 100644
--- a/springwolf-ui/src/app/channels/channels.component.html
+++ b/springwolf-ui/src/app/channels/channels.component.html
@@ -53,7 +53,7 @@ <h1>Channels</h1>
           ></i>
         </div>
         <h3>{{ channel.name }}</h3>
-        <div class="payload-name">{{ channel.operation.message.title }}</div>
+        <span class="payload-name">{{ channel.operation.message.title }}</span>
       </mat-panel-title>
     </mat-expansion-panel-header>
     <app-channel-main
diff --git a/springwolf-ui/src/app/schemas/schema/schema.component.html b/springwolf-ui/src/app/schemas/schema/schema.component.html
index 74be8fe2a..3bcf16cbc 100644
--- a/springwolf-ui/src/app/schemas/schema/schema.component.html
+++ b/springwolf-ui/src/app/schemas/schema/schema.component.html
@@ -17,7 +17,7 @@
           >
           <span class="type" *ngIf="property.value.items.anchorUrl">
             <a [href]="property.value.items.anchorUrl"
-              >{{ property.value.items.refName }}[]</a
+              >{{ property.value.items.refTitle }}[]</a
             >
           </span>
         </ng-container>
@@ -25,7 +25,7 @@
           property.value.type
         }}</span>
         <span class="type" *ngIf="property.value.refName">
-          <a [href]="property.value.anchorUrl">{{ property.value.refName }}</a>
+          <a [href]="property.value.anchorUrl">{{ property.value.refTitle }}</a>
         </span>
         <span class="format" *ngIf="property.value.format"
           >({{ property.value.format }})</span
diff --git a/springwolf-ui/src/app/schemas/schemas.component.css b/springwolf-ui/src/app/schemas/schemas.component.css
index 6fa8b6a1d..575231555 100644
--- a/springwolf-ui/src/app/schemas/schemas.component.css
+++ b/springwolf-ui/src/app/schemas/schemas.component.css
@@ -2,3 +2,10 @@
 h3 {
   margin: 0;
 }
+
+.schema-name {
+  background-color: #e0e0e0;
+  border-radius: 4px;
+  padding: 6px;
+  font-weight: normal;
+}
diff --git a/springwolf-ui/src/app/schemas/schemas.component.html b/springwolf-ui/src/app/schemas/schemas.component.html
index c4973691f..4c8dc4563 100644
--- a/springwolf-ui/src/app/schemas/schemas.component.html
+++ b/springwolf-ui/src/app/schemas/schemas.component.html
@@ -9,12 +9,15 @@ <h1>Schemas</h1>
   >
     <mat-expansion-panel-header>
       <mat-panel-title>
-        <h3>{{ schema.value.schemaName }}</h3>
+        <h3>{{ schema.value.title }}</h3>
       </mat-panel-title>
       <mat-panel-description>
         {{ schema.value.description }}
       </mat-panel-description>
     </mat-expansion-panel-header>
-    <app-schema [schema]="schema?.value"></app-schema>
+    <h4>
+      Title: <span class="schema-name">{{ schema.value.name }}</span>
+    </h4>
+    <app-schema [schema]="schema.value"></app-schema>
   </mat-expansion-panel>
 </mat-accordion>
diff --git a/springwolf-ui/src/app/shared/asyncapi-mapper.service.ts b/springwolf-ui/src/app/shared/asyncapi-mapper.service.ts
index 7f3cda524..7f079fc29 100644
--- a/springwolf-ui/src/app/shared/asyncapi-mapper.service.ts
+++ b/springwolf-ui/src/app/shared/asyncapi-mapper.service.ts
@@ -182,11 +182,13 @@ export class AsyncApiMapperService {
         description: v.description,
         payload: {
           name: v.payload.$ref,
+          title: v.payload.$ref?.split(".")?.pop(),
           anchorUrl:
             AsyncApiMapperService.BASE_URL + v.payload.$ref?.split("/")?.pop(),
         },
         headers: {
           name: v.headers.$ref,
+          title: v.headers.$ref?.split("/")?.pop(),
           anchorUrl:
             AsyncApiMapperService.BASE_URL + v.headers.$ref?.split("/")?.pop(),
         },
@@ -268,9 +270,11 @@ export class AsyncApiMapperService {
     const example =
       schema.example !== undefined ? new Example(schema.example) : undefined;
     return {
-      schemaName: schemaName.split(".")?.pop(),
+      name: schemaName,
+      title: schemaName.split(".")?.pop(),
       description: schema.description,
       refName: schema.$ref,
+      refTitle: schema.$ref?.split("/")?.pop(),
       anchorIdentifier: "#" + schemaName,
       anchorUrl: anchorUrl,
       type: schema.type,
diff --git a/springwolf-ui/src/app/shared/models/channel.model.ts b/springwolf-ui/src/app/shared/models/channel.model.ts
index ac69da30c..246eca06e 100644
--- a/springwolf-ui/src/app/shared/models/channel.model.ts
+++ b/springwolf-ui/src/app/shared/models/channel.model.ts
@@ -23,10 +23,12 @@ export interface Message {
   description?: string;
   payload: {
     name: string;
+    title: string;
     anchorUrl: string;
   };
   headers: {
     name: string;
+    title: string;
     anchorUrl: string;
   };
   bindings?: Map<string, MessageBinding>;
diff --git a/springwolf-ui/src/app/shared/models/schema.model.ts b/springwolf-ui/src/app/shared/models/schema.model.ts
index 652de7e62..f854ac8a1 100644
--- a/springwolf-ui/src/app/shared/models/schema.model.ts
+++ b/springwolf-ui/src/app/shared/models/schema.model.ts
@@ -2,10 +2,12 @@
 import { Example } from "./example.model";
 
 export interface Schema {
-  schemaName: string;
+  name?: string;
+  title: string;
   description?: string;
 
   refName?: string;
+  refTitle?: string;
   anchorIdentifier?: string;
   anchorUrl?: string;