diff --git a/springwolf-ui/angular.json b/springwolf-ui/angular.json
index 566bad7e4..3121eb359 100644
--- a/springwolf-ui/angular.json
+++ b/springwolf-ui/angular.json
@@ -34,20 +34,10 @@
             ],
             "styles": [
               "@angular/material/prebuilt-themes/azure-blue.css",
-              "prism-code-editor/layout.css",
-              "prism-code-editor/copy-button.css",
-              "prism-code-editor/themes/prism-okaidia.css",
               "src/main.css",
-              "src/styles.scss",
-              "./node_modules/prismjs/themes/prism-okaidia.css"
+              "src/styles.scss"
             ],
-            "scripts": [
-              "./node_modules/prismjs/prism.js",
-              "./node_modules/prismjs/components/prism-json.min.js",
-              "./node_modules/prismjs/components/prism-http.min.js",
-              "./node_modules/prismjs/components/prism-java.min.js",
-              "./node_modules/prismjs/components/prism-kotlin.min.js"
-            ]
+            "scripts": [ ]
           },
           "configurations": {
             "production": {
diff --git a/springwolf-ui/package-lock.json b/springwolf-ui/package-lock.json
index 38e7c8d10..18f8ebde0 100644
--- a/springwolf-ui/package-lock.json
+++ b/springwolf-ui/package-lock.json
@@ -18,10 +18,8 @@
         "@angular/platform-browser": "^18.2.5",
         "@angular/platform-browser-dynamic": "^18.2.5",
         "@angular/router": "^18.2.5",
-        "marked": "^12.0.2",
         "ngx-markdown": "^18.0.0",
         "prism-code-editor": "^3.4.0",
-        "prismjs": "^1.29.0",
         "rxjs": "^7.8.1",
         "tslib": "^2.7.0",
         "zone.js": "~0.14.10"
@@ -15032,6 +15030,7 @@
       "version": "12.0.2",
       "resolved": "https://registry.npmjs.org/marked/-/marked-12.0.2.tgz",
       "integrity": "sha512-qXUm7e/YKFoqFPYPa3Ukg9xlI5cyAtGmyEIzMfW//m6kXwCy2Ps9DYf5ioijFKQ8qyuscrHoY04iJGctu2Kg0Q==",
+      "peer": true,
       "bin": {
         "marked": "bin/marked.js"
       },
@@ -17361,6 +17360,7 @@
       "version": "1.29.0",
       "resolved": "https://registry.npmjs.org/prismjs/-/prismjs-1.29.0.tgz",
       "integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
+      "optional": true,
       "engines": {
         "node": ">=6"
       }
diff --git a/springwolf-ui/package.json b/springwolf-ui/package.json
index af76dbf2d..061d3d507 100644
--- a/springwolf-ui/package.json
+++ b/springwolf-ui/package.json
@@ -21,10 +21,8 @@
     "@angular/platform-browser": "^18.2.5",
     "@angular/platform-browser-dynamic": "^18.2.5",
     "@angular/router": "^18.2.5",
-    "marked": "^12.0.2",
     "ngx-markdown": "^18.0.0",
     "prism-code-editor": "^3.4.0",
-    "prismjs": "^1.29.0",
     "rxjs": "^7.8.1",
     "tslib": "^2.7.0",
     "zone.js": "~0.14.10"
diff --git a/springwolf-ui/src/app/app.component.css b/springwolf-ui/src/app/app.component.css
index 7c5e5a79d..f5c4a5e7b 100644
--- a/springwolf-ui/src/app/app.component.css
+++ b/springwolf-ui/src/app/app.component.css
@@ -6,11 +6,6 @@
 }
 
 main {
-  margin: 0 64px;
-  height: calc(100% - 64px - 16px);
-  padding-bottom: 16px;
-}
-main.new-ui {
   margin: 0;
   height: calc(100% - 64px);
   padding: 0;
diff --git a/springwolf-ui/src/app/app.component.html b/springwolf-ui/src/app/app.component.html
index c4ec15107..7061e52ba 100644
--- a/springwolf-ui/src/app/app.component.html
+++ b/springwolf-ui/src/app/app.component.html
@@ -1,27 +1,21 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
 <app-header></app-header>
-<main class="flex-column" *ngIf="!isNewUi">
-  <app-info></app-info>
-  <app-servers></app-servers>
-  <app-channels></app-channels>
-  <app-schemas></app-schemas>
-</main>
-<main *ngIf="isNewUi" class="new-ui mat-typography">
+<main class="mat-typography">
   <app-sidenav>
     <section appNavigationTarget id="info">
       <app-info></app-info>
     </section>
 
     <section appNavigationTarget id="servers">
-      <app-servers-new></app-servers-new>
+      <app-servers></app-servers>
     </section>
 
     <section appNavigationTarget id="channels">
-      <app-channels-new> </app-channels-new>
+      <app-channels> </app-channels>
     </section>
 
     <section appNavigationTarget id="schemas">
-      <app-schemas-new></app-schemas-new>
+      <app-schemas></app-schemas>
     </section>
   </app-sidenav>
 </main>
diff --git a/springwolf-ui/src/app/app.component.ts b/springwolf-ui/src/app/app.component.ts
index 026c05ef3..dfc2c28fe 100644
--- a/springwolf-ui/src/app/app.component.ts
+++ b/springwolf-ui/src/app/app.component.ts
@@ -1,20 +1,10 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { Component, OnInit } from "@angular/core";
 import { UiService } from "./service/ui.service";
-import { DomSanitizer } from "@angular/platform-browser";
-import { MatIconRegistry } from "@angular/material/icon";
 
 @Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
 })
-export class AppComponent implements OnInit {
-  isNewUi: boolean = true;
-
-  constructor(private uiService: UiService) {}
-
-  ngOnInit() {
-    this.uiService.isNewUi$.subscribe((value) => (this.isNewUi = value));
-  }
-}
+export class AppComponent {}
diff --git a/springwolf-ui/src/app/app.module.ts b/springwolf-ui/src/app/app.module.ts
index bd48722a2..190022796 100644
--- a/springwolf-ui/src/app/app.module.ts
+++ b/springwolf-ui/src/app/app.module.ts
@@ -8,17 +8,10 @@ import { BrowserModule } from "@angular/platform-browser";
 import { InMemoryWebApiModule } from "angular-in-memory-web-api";
 import { environment } from "../environments/environment";
 import { AppComponent } from "./app.component";
-import { ChannelMainComponent } from "./components/channels/channel-main/channel-main.component";
-import { ChannelOperationComponent } from "./components/new/channels/channel-main/channel-operation.component";
-import { ChannelsComponent } from "./components/channels/channels.component";
-import { ChannelsNewComponent } from "./components/new/channels/channels.component";
+import { ChannelOperationComponent } from "./components/channels/channel-main/channel-operation.component";
 import { HeaderComponent } from "./components/header/header.component";
 import { InfoComponent } from "./components/info/info.component";
 import { MaterialModule } from "./material.module";
-import { SchemaComponent } from "./components/schemas/schema/schema.component";
-import { SchemaRangeComponent } from "./components/schemas/range/schema-range.component";
-import { SchemasComponent } from "./components/schemas/schemas.component";
-import { ServersComponent } from "./components/servers/servers.component";
 import { AsyncApiService } from "./service/asyncapi/asyncapi.service";
 import { MockServer } from "./service/mock/mock-server";
 import { PublisherService } from "./service/publisher.service";
@@ -32,14 +25,15 @@ import { AsyncApiMapperService } from "./service/asyncapi/asyncapi-mapper.servic
 import { MarkdownModule, provideMarkdown } from "ngx-markdown";
 import { UiService } from "./service/ui.service";
 import { provideAnimationsAsync } from "@angular/platform-browser/animations/async";
-import { SidenavComponent } from "./components/new/sidenav/sidenav.component";
-import { NavigationTargetDirective } from "./components/new/sidenav/navigation.directive";
-import { PrismEditorComponent } from "./components/new/code/prism-editor.component";
-import { SchemaNewComponent } from "./components/new/schema/schema.component";
-import { ServersNewComponent } from "./components/new/servers/servers.component";
-import { SchemasNewComponent } from "./components/new/schemas/schemas.component";
-import { RangeNewComponent } from "./components/new/schema/range/range.component";
+import { SidenavComponent } from "./components/sidenav/sidenav.component";
+import { NavigationTargetDirective } from "./components/sidenav/navigation.directive";
+import { PrismEditorComponent } from "./components/code/prism-editor.component";
+import { SchemaComponent } from "./components/schema/schema.component";
+import { RangeComponent } from "./components/schema/range/range.component";
 import { AssetService, IAssetService } from "./service/asset.service";
+import { SchemasComponent } from "./components/schemas/schemas.component";
+import { ServersComponent } from "./components/servers/servers.component";
+import { ChannelsComponent } from "./components/channels/channels.component";
 
 @NgModule({
   imports: [],
@@ -54,19 +48,13 @@ export const declarations = [
   InfoComponent,
   ServersComponent,
   ChannelsComponent,
-  ChannelMainComponent,
   SchemasComponent,
   SchemaComponent,
-  SchemaRangeComponent,
   JsonComponent,
   PrismEditorComponent,
   SidenavComponent,
-  ServersNewComponent,
-  ChannelsNewComponent,
   ChannelOperationComponent,
-  SchemasNewComponent,
-  SchemaNewComponent,
-  RangeNewComponent,
+  RangeComponent,
 ];
 export const imports = [
   DirectivesModule,
diff --git a/springwolf-ui/src/app/components/channels/channel-main/channel-main.component.css b/springwolf-ui/src/app/components/channels/channel-main/channel-main.component.css
deleted file mode 100644
index 723f3a9a3..000000000
--- a/springwolf-ui/src/app/components/channels/channel-main/channel-main.component.css
+++ /dev/null
@@ -1,52 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-textarea {
-  width: calc(100% - 16px);
-  padding: 8px;
-  margin-top: 16px;
-  border-radius: 4px;
-  border-width: 0;
-  line-height: 24px;
-  background-color: #282c34;
-  color: #abb2bf;
-}
-
-button {
-  margin-top: 8px;
-}
-
-.property-badge {
-  background-color: #c5cae9;
-  border-radius: 4px;
-  padding: 6px;
-  font-size: small;
-  font-weight: bold;
-}
-
-.payload-name {
-  background-color: #e0e0e0;
-  border-radius: 4px;
-  padding: 6px;
-  font-weight: normal;
-}
-
-.button-container {
-  height: 50px;
-}
-
-.table {
-  display: table;
-}
-.table .table-row {
-  display: table-row;
-}
-.table-row * {
-  display: table-cell;
-}
-.table-row *:first-child {
-  font-weight: bold;
-  padding-right: 8px;
-}
-
-[hidden] {
-  display: none !important;
-}
diff --git a/springwolf-ui/src/app/components/channels/channel-main/channel-main.component.html b/springwolf-ui/src/app/components/channels/channel-main/channel-main.component.html
deleted file mode 100644
index 4e101cf59..000000000
--- a/springwolf-ui/src/app/components/channels/channel-main/channel-main.component.html
+++ /dev/null
@@ -1,148 +0,0 @@
-<!-- SPDX-License-Identifier: Apache-2.0 -->
-<section>
-  <mat-divider></mat-divider>
-  <div *ngIf="operation().description || operation().message.description">
-    <div class="table">
-      <div *ngIf="operation().description" class="table-row">
-        <span>Operation description</span>
-        <markdown [data]="operation().description"></markdown>
-      </div>
-      <div *ngIf="operation().message.description" class="table-row">
-        <span>Message description</span>
-        <markdown [data]="operation().message.description"></markdown>
-      </div>
-    </div>
-    <mat-divider></mat-divider>
-  </div>
-  <mat-tab-group animationDuration="0ms">
-    <mat-tab label="Example">
-      <div class="flex-column">
-        <div
-          [hidden]="
-            operation().protocol == undefined ||
-            isEmptyObject(
-              operation().message.bindings.get(operation().protocol)
-            )
-          "
-          class="flex-column"
-        >
-          <h4>Message Binding</h4>
-          <textarea
-            spellcheck="false"
-            #bindingTextArea
-            [rows]="messageBindingExampleTextAreaLineCount"
-            [value]="
-              createMessageBindingExample(
-                operation().message.bindings.get(operation().protocol)
-              )?.value
-            "
-            (keyup)="
-              recalculateLineCount(
-                'messageBindingExample',
-                bindingTextArea.value
-              )
-            "
-          ></textarea>
-        </div>
-        <div class="flex-column">
-          <h4>Header</h4>
-          <textarea
-            spellcheck="false"
-            #headersTextArea
-            [rows]="headersTextAreaLineCount"
-            [value]="headersExample.value || ''"
-            (keyup)="recalculateLineCount('headers', headersTextArea.value)"
-          ></textarea>
-        </div>
-        <div class="flex-column">
-          <h4>Message</h4>
-          <textarea
-            spellcheck="false"
-            #messageTextArea
-            [rows]="exampleTextAreaLineCount"
-            [value]="defaultExample.value || ''"
-            (keyup)="recalculateLineCount('example', messageTextArea.value)"
-          ></textarea>
-        </div>
-        <div class="button-container flex gap-8">
-          <button
-            mat-raised-button
-            color="primary"
-            [disabled]="!canPublish"
-            (click)="
-              publish(
-                messageTextArea.value,
-                defaultExampleType,
-                headersTextArea?.value,
-                bindingTextArea?.value
-              )
-            "
-          >
-            Publish
-          </button>
-          <button
-            mat-raised-button
-            color="primary"
-            (click)="
-              messageTextArea.value = defaultExample.value;
-              headersTextArea.value = headersExample.value || '';
-              bindingTextArea.value =
-                createMessageBindingExample(
-                  operation().message.bindings.get(operation().protocol)
-                )?.value || '';
-              recalculateLineCount(
-                'messageBindingExample',
-                bindingTextArea.value
-              );
-              recalculateLineCount('headers', headersTextArea.value);
-              recalculateLineCount('example', messageTextArea.value)
-            "
-          >
-            Default
-          </button>
-          <button
-            mat-raised-button
-            color="primary"
-            [cdkCopyToClipboard]="messageTextArea.value"
-          >
-            Copy
-          </button>
-        </div>
-      </div>
-    </mat-tab>
-    <mat-tab label="Schema">
-      <h4>
-        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>
-        Schema:
-        <a [href]="operation().message.headers.anchorUrl">{{
-          operation().message.headers.name
-        }}</a>
-      </h4>
-      <app-schema *ngIf="headers" [schema]="headers"></app-schema>
-    </mat-tab>
-    <mat-tab label="Operation Bindings">
-      <div *ngIf="operation().protocol && operation().message.bindings">
-        <app-json
-          *ngIf="operation().protocol && operation().bindings"
-          [data]="operation().bindings[operation().protocol]"
-        ></app-json>
-      </div>
-    </mat-tab>
-    <mat-tab label="Message Bindings">
-      <div *ngIf="operation().protocol && operation().message.rawBindings">
-        <app-json
-          *ngIf="operation().protocol && operation().message"
-          [data]="operation().message.rawBindings[operation().protocol]"
-        ></app-json>
-      </div>
-    </mat-tab>
-  </mat-tab-group>
-</section>
diff --git a/springwolf-ui/src/app/components/channels/channel-main/channel-main.component.spec.ts b/springwolf-ui/src/app/components/channels/channel-main/channel-main.component.spec.ts
deleted file mode 100644
index 8158e110c..000000000
--- a/springwolf-ui/src/app/components/channels/channel-main/channel-main.component.spec.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-import { render, screen } from "@testing-library/angular";
-import { ChannelMainComponent } from "./channel-main.component";
-import { MarkdownModule } from "ngx-markdown";
-import {
-  mockedAsyncApiService,
-  mockedExampleSchemaMapped,
-} from "../../../service/mock/mock-asyncapi.service";
-import { MockAppJson, MockAppSchema } from "../../mock-components.spec";
-import { MaterialModule } from "../../../material.module";
-import { AsyncApiService } from "../../../service/asyncapi/asyncapi.service";
-import { PublisherService } from "../../../service/publisher.service";
-
-describe("ChannelMainComponent", () => {
-  const mockData = mockedExampleSchemaMapped.channelOperations
-    .slice(-1)
-    .pop()!!;
-
-  beforeEach(async () => {
-    mockedAsyncApiService.getAsyncApi.mockClear();
-
-    await render(ChannelMainComponent, {
-      declarations: [MockAppJson, MockAppSchema],
-      imports: [MaterialModule, MarkdownModule.forRoot()],
-      providers: [
-        { provide: AsyncApiService, useValue: mockedAsyncApiService },
-        { provide: PublisherService, useValue: {} },
-      ],
-      componentInputs: {
-        channelName: mockData.name,
-        operation: mockData.operation,
-      },
-    });
-  });
-
-  it("should render the component and data", () => {
-    expect(screen.getByText("Example")).toBeTruthy();
-    expect(screen.getByText("Message Binding")).toBeTruthy();
-  });
-});
diff --git a/springwolf-ui/src/app/components/channels/channel-main/channel-main.component.ts b/springwolf-ui/src/app/components/channels/channel-main/channel-main.component.ts
deleted file mode 100644
index 0c4e3fc90..000000000
--- a/springwolf-ui/src/app/components/channels/channel-main/channel-main.component.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-import { Component, input, OnInit } from "@angular/core";
-import { MatSnackBar } from "@angular/material/snack-bar";
-import { STATUS } from "angular-in-memory-web-api";
-import { Binding } from "../../../models/bindings.model";
-import { Example } from "../../../models/example.model";
-import { Operation } from "../../../models/operation.model";
-import { Schema } from "../../../models/schema.model";
-import { AsyncApiService } from "../../../service/asyncapi/asyncapi.service";
-import { PublisherService } from "../../../service/publisher.service";
-import { wrapException } from "../../../util/error-boundary";
-import {
-  initExample,
-  initSchema,
-  noExample,
-} from "../../../service/mock/init-values";
-
-@Component({
-  selector: "app-channel-main",
-  templateUrl: "./channel-main.component.html",
-  styleUrls: ["./channel-main.component.css"],
-})
-export class ChannelMainComponent implements OnInit {
-  channelName = input.required<string>();
-  operation = input.required<Operation>();
-
-  schema: Schema = initSchema;
-  schemaIdentifier: string = "";
-  defaultExample: Example = initExample;
-  defaultExampleType: string = "";
-  exampleTextAreaLineCount: number = 1;
-  headers: Schema = initSchema;
-  headersSchemaIdentifier: string = "";
-  headersExample: Example = initExample;
-  headersTextAreaLineCount: number = 1;
-  messageBindingExample?: Example;
-  messageBindingExampleTextAreaLineCount: number = 1;
-  canPublish: boolean = false;
-
-  constructor(
-    private asyncApiService: AsyncApiService,
-    private publisherService: PublisherService,
-    private snackBar: MatSnackBar
-  ) {}
-
-  ngOnInit(): void {
-    this.asyncApiService.getAsyncApi().subscribe((asyncapi) => {
-      const schemas: Map<string, Schema> = asyncapi.components.schemas;
-
-      const payload = this.operation().message.payload;
-      if (payload.ts_type === "ref") {
-        const schemaIdentifier = payload.name.slice(
-          payload.name.lastIndexOf("/") + 1
-        );
-        const schema = schemas.get(schemaIdentifier)!!;
-        this.schema = schema;
-        this.defaultExample = schema.example || noExample;
-      } else {
-        this.schema = payload;
-        this.defaultExample = payload.example || noExample;
-      }
-      this.exampleTextAreaLineCount = this.defaultExample?.lineCount || 1;
-      this.defaultExampleType = this.operation().message.payload.name;
-
-      this.headersSchemaIdentifier = this.operation().message.headers.name;
-      this.headers = schemas.get(this.headersSchemaIdentifier)!!;
-      this.headersExample = this.headers.example || noExample;
-      this.headersTextAreaLineCount = this.headersExample?.lineCount || 1;
-      this.messageBindingExampleTextAreaLineCount =
-        this.messageBindingExample?.lineCount || 1;
-
-      this.publisherService
-        .canPublish(this.operation().protocol)
-        .subscribe((response) => {
-          this.canPublish = response;
-        });
-    });
-  }
-
-  isEmptyObject(object?: any): boolean {
-    return (
-      object === undefined ||
-      object === null ||
-      Object.keys(object).length === 0
-    );
-  }
-
-  createMessageBindingExample(messageBinding?: Binding): Example | undefined {
-    if (messageBinding === undefined || messageBinding === null) {
-      return undefined;
-    }
-
-    const bindingExampleObject: { [key: string]: any } = {};
-    Object.keys(messageBinding).forEach((bindingKey) => {
-      if (bindingKey !== "bindingVersion") {
-        bindingExampleObject[bindingKey] = this.getExampleValue(
-          messageBinding[bindingKey]
-        );
-      }
-    });
-
-    const bindingExample = new Example(bindingExampleObject);
-
-    this.messageBindingExampleTextAreaLineCount = bindingExample.lineCount;
-
-    return bindingExample;
-  }
-
-  getExampleValue(bindingValue: string | Binding): any {
-    if (typeof bindingValue === "string") {
-      return bindingValue;
-    } else if (
-      "examples" in bindingValue &&
-      typeof bindingValue["examples"] == "object"
-    ) {
-      return bindingValue["examples"]["0"];
-    }
-    return undefined;
-  }
-
-  recalculateLineCount(field: string, text: string): void {
-    switch (field) {
-      case "example":
-        this.exampleTextAreaLineCount = text.split("\n").length;
-        break;
-      case "headers":
-        this.headersTextAreaLineCount = text.split("\n").length;
-        break;
-      case "messageBindingExample":
-        this.messageBindingExampleTextAreaLineCount = text.split("\n").length;
-        break;
-    }
-  }
-
-  publish(
-    example: string,
-    payloadType: string,
-    headers?: string,
-    bindings?: string
-  ): void {
-    try {
-      const headersJson =
-        headers === ""
-          ? {}
-          : wrapException(
-              "Unable to convert headers to JSON object (nor is empty)",
-              () => JSON.parse(headers || "")
-            );
-      const bindingsJson =
-        bindings === ""
-          ? {}
-          : wrapException(
-              "Unable to convert bindings to JSON object (nor is empty)",
-              () => JSON.parse(bindings || "")
-            );
-
-      this.publisherService
-        .publish(
-          this.operation().protocol,
-          this.channelName(),
-          example,
-          payloadType,
-          headersJson,
-          bindingsJson
-        )
-        .subscribe(
-          (_) => this.handlePublishSuccess(),
-          (err) => this.handlePublishError(err)
-        );
-    } catch (error: any) {
-      this.snackBar.open(
-        "Unable to create publishing payload: " + error?.message,
-        "ERROR",
-        {
-          duration: 3000,
-        }
-      );
-    }
-  }
-
-  private handlePublishSuccess() {
-    return this.snackBar.open(
-      "Example payload sent to: " + this.channelName(),
-      "PUBLISHED",
-      {
-        duration: 3000,
-      }
-    );
-  }
-
-  private handlePublishError(err: { status?: number }) {
-    let msg = "Publish failed";
-    if (err?.status === STATUS.NOT_FOUND) {
-      msg += ": no publisher was provided for " + this.operation().protocol;
-    }
-
-    return this.snackBar.open(msg, "ERROR", {
-      duration: 4000,
-    });
-  }
-}
diff --git a/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.css b/springwolf-ui/src/app/components/channels/channel-main/channel-operation.component.css
similarity index 100%
rename from springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.css
rename to springwolf-ui/src/app/components/channels/channel-main/channel-operation.component.css
diff --git a/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.html b/springwolf-ui/src/app/components/channels/channel-main/channel-operation.component.html
similarity index 96%
rename from springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.html
rename to springwolf-ui/src/app/components/channels/channel-main/channel-operation.component.html
index 5ee21ef38..3943b669c 100644
--- a/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.html
+++ b/springwolf-ui/src/app/components/channels/channel-main/channel-operation.component.html
@@ -104,7 +104,7 @@ <h6>Headers</h6>
       >
     </mat-chip-set>
 
-    <app-schema-new *ngIf="headers" [schema]="headers"></app-schema-new>
+    <app-schema *ngIf="headers" [schema]="headers"></app-schema>
   </div>
   <div class="width-6/12 width-12/12-s">
     <app-prism-editor [(code)]="headersExample.value" language="json" />
@@ -123,10 +123,7 @@ <h6>Payload</h6>
       >
     </mat-chip-set>
 
-    <app-schema-new
-      *ngIf="defaultSchema"
-      [schema]="defaultSchema"
-    ></app-schema-new>
+    <app-schema *ngIf="defaultSchema" [schema]="defaultSchema"></app-schema>
   </div>
 
   <div class="width-6/12 width-12/12-s">
diff --git a/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.spec.ts b/springwolf-ui/src/app/components/channels/channel-main/channel-operation.component.spec.ts
similarity index 82%
rename from springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.spec.ts
rename to springwolf-ui/src/app/components/channels/channel-main/channel-operation.component.spec.ts
index bb239b5e4..24d1a6266 100644
--- a/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.spec.ts
+++ b/springwolf-ui/src/app/components/channels/channel-main/channel-operation.component.spec.ts
@@ -1,19 +1,19 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { render, screen } from "@testing-library/angular";
 import { ChannelOperationComponent } from "./channel-operation.component";
-import { AsyncApiService } from "../../../../service/asyncapi/asyncapi.service";
-import { PublisherService } from "../../../../service/publisher.service";
-import { MaterialModule } from "../../../../material.module";
+import { AsyncApiService } from "../../../service/asyncapi/asyncapi.service";
+import { PublisherService } from "../../../service/publisher.service";
+import { MaterialModule } from "../../../material.module";
 import { MarkdownModule } from "ngx-markdown";
 import {
   mockedAsyncApiService,
   mockedExampleSchemaMapped,
-} from "../../../../service/mock/mock-asyncapi.service";
+} from "../../../service/mock/mock-asyncapi.service";
 import {
   MockAppJson,
   MockAppSchemaNewComponent,
   MockPrismEditorComponent,
-} from "../../../mock-components.spec";
+} from "../../mock-components.spec";
 
 describe("ChannelOperationComponent", () => {
   const mockData = mockedExampleSchemaMapped.channelOperations
diff --git a/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.ts b/springwolf-ui/src/app/components/channels/channel-main/channel-operation.component.ts
similarity index 90%
rename from springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.ts
rename to springwolf-ui/src/app/components/channels/channel-main/channel-operation.component.ts
index e48d7e92d..d20193e6d 100644
--- a/springwolf-ui/src/app/components/new/channels/channel-main/channel-operation.component.ts
+++ b/springwolf-ui/src/app/components/channels/channel-main/channel-operation.component.ts
@@ -2,19 +2,19 @@
 import { Component, input, computed, OnInit } from "@angular/core";
 import { MatSnackBar } from "@angular/material/snack-bar";
 import { STATUS } from "angular-in-memory-web-api";
-import { Binding } from "../../../../models/bindings.model";
-import { Example } from "../../../../models/example.model";
-import { Operation } from "../../../../models/operation.model";
-import { Schema } from "../../../../models/schema.model";
-import { AsyncApiService } from "../../../../service/asyncapi/asyncapi.service";
-import { PublisherService } from "../../../../service/publisher.service";
-import { wrapException } from "../../../../util/error-boundary";
+import { Binding } from "../../../models/bindings.model";
+import { Example } from "../../../models/example.model";
+import { Operation } from "../../../models/operation.model";
+import { Schema } from "../../../models/schema.model";
+import { AsyncApiService } from "../../../service/asyncapi/asyncapi.service";
+import { PublisherService } from "../../../service/publisher.service";
+import { wrapException } from "../../../util/error-boundary";
 import {
   initExample,
   initSchema,
   noExample,
-} from "../../../../service/mock/init-values";
-import { UiService } from "../../../../service/ui.service";
+} from "../../../service/mock/init-values";
+import { UiService } from "../../../service/ui.service";
 
 @Component({
   selector: "app-channel-operation",
diff --git a/springwolf-ui/src/app/components/channels/channels.component.css b/springwolf-ui/src/app/components/channels/channels.component.css
index 7c9944f67..08b6a033d 100644
--- a/springwolf-ui/src/app/components/channels/channels.component.css
+++ b/springwolf-ui/src/app/components/channels/channels.component.css
@@ -1,33 +1,22 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 .badge {
   border-radius: 4px;
-  padding: 8px;
-  font-size: small;
-  font-weight: bold;
-  display: inline-block;
-}
-
-.send-badge {
-  background-color: #ffd580;
-}
-
-.receive-badge {
-  background-color: #9bd279;
+  padding: 0.3em;
+  font-size: smaller;
+  text-transform: uppercase;
 }
 
 .protocol-badge {
-  background-color: #347aeb;
-  color: #fff;
+  color: var(--springwolf-badge-color-protocol);
+  background-color: var(--springwolf-badge-color-background-protocol);
 }
 
-mat-divider {
-  height: 20px;
+.send-badge {
+  color: var(--springwolf-badge-color-send);
+  background-color: var(--springwolf-badge-color-background-send);
 }
 
-.payload-name {
-  background-color: #e0e0e0;
-  border-radius: 4px;
-  padding: 4px;
-  font-weight: normal;
-  font-size: small;
+.receive-badge {
+  color: var(--springwolf-badge-color-receive);
+  background-color: var(--springwolf-badge-color-background-receive);
 }
diff --git a/springwolf-ui/src/app/components/channels/channels.component.html b/springwolf-ui/src/app/components/channels/channels.component.html
index 6a2abb633..b213b6100 100644
--- a/springwolf-ui/src/app/components/channels/channels.component.html
+++ b/springwolf-ui/src/app/components/channels/channels.component.html
@@ -1,36 +1,65 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
-<h1>Channels</h1>
+<h2>Channels</h2>
+@for (channel of channels; track channel) {
+<article appNavigationTarget [id]="channel.anchorIdentifier">
+  <h3>{{ channel.name }}</h3>
 
-<mat-accordion>
-  <mat-expansion-panel
-    *ngFor="let channel of channels"
-    [id]="channel.anchorIdentifier"
-    [attr.data-testid]="channel.anchorIdentifier"
-    [expanded]="selectedChannel == channel.anchorIdentifier"
-    (opened)="this.setChannelSelection(channel)"
+  <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"
+    appNavigationTarget
+    [id]="channelOperation.anchorIdentifier"
   >
-    <mat-expansion-panel-header>
-      <mat-panel-title class="flex-column gap-16 flex-start items-center">
-        <div class="badge protocol-badge" *ngIf="channel.operation.protocol">
-          {{ channel.operation.protocol }}
-        </div>
-        <div
+    <mat-card-header>
+      <mat-card-title [attr.data-testid]="channel.anchorIdentifier">
+        {{ channelOperation.operation.message.title }}
+      </mat-card-title>
+      <span class="flex gap-16 padding-horizontal-1em">
+        <span
+          class="badge protocol-badge"
+          *ngIf="channelOperation.operation.protocol"
+        >
+          {{ channelOperation.operation.protocol }}
+        </span>
+        <span
           class="badge"
           [ngClass]="{
-            'send-badge': channel.operation.operationType === 'send',
-            'receive-badge': channel.operation.operationType === 'receive'
+            'send-badge': channelOperation.operation.operationType === 'send',
+            'receive-badge':
+              channelOperation.operation.operationType === 'receive'
           }"
         >
-          {{ channel.operation.operationType }}
-        </div>
-        <h3>{{ channel.name }}</h3>
-        <span class="payload-name">{{ channel.operation.message.title }}</span>
-      </mat-panel-title>
-    </mat-expansion-panel-header>
-    <app-channel-main
-      [channelName]="channel.name"
-      [operation]="channel.operation"
-    >
-    </app-channel-main>
-  </mat-expansion-panel>
-</mat-accordion>
+          {{ channelOperation.operation.operationType }}
+        </span>
+      </span>
+    </mat-card-header>
+    <mat-card-content>
+      <app-channel-operation
+        [channelName]="channel.name"
+        [operation]="channelOperation.operation"
+      ></app-channel-operation>
+    </mat-card-content>
+  </mat-card>
+
+  @if (!$last) {
+  <br />
+  } } @if (!$last) {
+  <br />
+  }
+</article>
+}
diff --git a/springwolf-ui/src/app/components/channels/channels.component.spec.ts b/springwolf-ui/src/app/components/channels/channels.component.spec.ts
index 107616bfc..6e2a8343f 100644
--- a/springwolf-ui/src/app/components/channels/channels.component.spec.ts
+++ b/springwolf-ui/src/app/components/channels/channels.component.spec.ts
@@ -7,15 +7,15 @@ import {
   mockedExampleSchemaMapped,
 } from "../../service/mock/mock-asyncapi.service";
 import { MaterialModule } from "../../material.module";
-import { MockChannelMainComponent } from "../mock-components.spec";
+import { MockChannelOperationComponent } from "../mock-components.spec";
 
-describe("ChannelsComponent", () => {
+describe("ChannelsNewComponent", () => {
   beforeEach(async () => {
     mockedAsyncApiService.getAsyncApi.mockClear();
 
     await render(ChannelsComponent, {
       imports: [MaterialModule],
-      declarations: [MockChannelMainComponent],
+      declarations: [MockChannelOperationComponent],
       providers: [
         { provide: AsyncApiService, useValue: mockedAsyncApiService },
       ],
diff --git a/springwolf-ui/src/app/components/channels/channels.component.ts b/springwolf-ui/src/app/components/channels/channels.component.ts
index 82f765b9f..4f58368ba 100644
--- a/springwolf-ui/src/app/components/channels/channels.component.ts
+++ b/springwolf-ui/src/app/components/channels/channels.component.ts
@@ -1,11 +1,8 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { Component, OnInit } from "@angular/core";
 import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
-import {
-  CHANNEL_ANCHOR_PREFIX,
-  ChannelOperation,
-} from "../../models/channel.model";
-import { Location } from "@angular/common";
+import { Channel } from "../../models/channel.model";
+import { UiService } from "../../service/ui.service";
 
 @Component({
   selector: "app-channels",
@@ -13,57 +10,22 @@ import { Location } from "@angular/common";
   styleUrls: ["./channels.component.css"],
 })
 export class ChannelsComponent implements OnInit {
-  channels: ChannelOperation[] = [];
-  selectedChannel: string = "";
+  channels: Channel[] = [];
+  isShowBindings: boolean = UiService.DEFAULT_SHOW_BINDINGS;
+  JSON = JSON;
 
   constructor(
     private asyncApiService: AsyncApiService,
-    private location: Location
-  ) {
-    this.setChannelSelectionFromLocation();
-  }
+    private uiService: UiService
+  ) {}
 
   ngOnInit(): void {
-    this.location.subscribe((): void => this.setChannelSelectionFromLocation());
-
     this.asyncApiService.getAsyncApi().subscribe((asyncapi) => {
-      this.channels = this.sortChannels(asyncapi.channelOperations);
+      this.channels = asyncapi.channels;
     });
-  }
 
-  private sortChannels(
-    channels: Array<ChannelOperation>
-  ): Array<ChannelOperation> {
-    return channels.sort((a, b) => {
-      if (a.operation.protocol === b.operation.protocol) {
-        if (a.operation.operationType === b.operation.operationType) {
-          if (a.name === b.name) {
-            return a.operation.message.name.localeCompare(
-              b.operation.message.name
-            );
-          } else {
-            return a.name.localeCompare(b.name);
-          }
-        } else {
-          return a.operation.operationType.localeCompare(
-            b.operation.operationType
-          );
-        }
-      } else if (a.operation.protocol != null) {
-        return a.operation.protocol.localeCompare(b.operation.protocol);
-      } else {
-        return 0;
-      }
-    });
-  }
-
-  setChannelSelection(channel: ChannelOperation): void {
-    window.location.hash = channel.anchorIdentifier;
-  }
-  setChannelSelectionFromLocation(): void {
-    const anchor = window.location.hash;
-    if (anchor.startsWith(CHANNEL_ANCHOR_PREFIX)) {
-      this.selectedChannel = anchor;
-    }
+    this.uiService.isShowBindings$.subscribe(
+      (value) => (this.isShowBindings = value)
+    );
   }
 }
diff --git a/springwolf-ui/src/app/components/new/code/prism-editor.component.ts b/springwolf-ui/src/app/components/code/prism-editor.component.ts
similarity index 94%
rename from springwolf-ui/src/app/components/new/code/prism-editor.component.ts
rename to springwolf-ui/src/app/components/code/prism-editor.component.ts
index b39b1f207..724194470 100644
--- a/springwolf-ui/src/app/components/new/code/prism-editor.component.ts
+++ b/springwolf-ui/src/app/components/code/prism-editor.component.ts
@@ -14,6 +14,9 @@ import { matchBrackets } from "prism-code-editor/match-brackets";
 import { highlightBracketPairs } from "prism-code-editor/highlight-brackets";
 import { editHistory } from "prism-code-editor/commands";
 import { copyButton } from "prism-code-editor/copy-button";
+import "prism-code-editor/layout.css";
+import "prism-code-editor/themes/prism.css";
+import "prism-code-editor/themes/prism-okaidia.css";
 import "prism-code-editor/prism/languages/json";
 import "prism-code-editor/prism/languages/yaml";
 import "prism-code-editor/prism/languages/http";
diff --git a/springwolf-ui/src/app/components/code/prism.bridge.ts b/springwolf-ui/src/app/components/code/prism.bridge.ts
new file mode 100644
index 000000000..16800f05e
--- /dev/null
+++ b/springwolf-ui/src/app/components/code/prism.bridge.ts
@@ -0,0 +1,31 @@
+/* SPDX-License-Identifier: Apache-2.0 */
+import { createEditor } from "prism-code-editor";
+
+/**
+ * Used by ng-markdown
+ *
+ * This bridges the call to the prism-code-editor implementation
+ */
+declare let Prism: {
+  highlightAllUnder: (element: Element | Document) => void;
+};
+
+(globalThis as any).Prism = {
+  highlightAllUnder: (element: Element | Document) => {
+    element.querySelectorAll("pre code").forEach((block) => {
+      const language =
+        Array.from(block.classList).find((cls) => cls.startsWith("language")) ||
+        "";
+      const textContent = block.textContent || "";
+      block.textContent = ""; // overwrite the content with the editor
+
+      createEditor(block.parentElement, {
+        value: textContent.trimEnd(),
+        language: language.replace("language-", ""),
+        lineNumbers: false,
+        wordWrap: true,
+        readOnly: true,
+      });
+    });
+  },
+};
diff --git a/springwolf-ui/src/app/components/header/header.component.html b/springwolf-ui/src/app/components/header/header.component.html
index 4d9f8eec0..1b0ecb35d 100644
--- a/springwolf-ui/src/app/components/header/header.component.html
+++ b/springwolf-ui/src/app/components/header/header.component.html
@@ -37,11 +37,6 @@ <h1 class="width-s-hide">{{ title }}</h1>
       </button>
     </mat-menu>
 
-    <mat-slide-toggle
-      [(ngModel)]="isNewUi"
-      (change)="toggleIsNewUi($event.checked)"
-      >New UI</mat-slide-toggle
-    >
     &nbsp;
     <a href="https://github.com/springwolf/springwolf-core" target="_blank">
       <mat-icon [svgIcon]="'github'" />
diff --git a/springwolf-ui/src/app/components/header/header.component.spec.ts b/springwolf-ui/src/app/components/header/header.component.spec.ts
index dd35498b1..2af1c319c 100644
--- a/springwolf-ui/src/app/components/header/header.component.spec.ts
+++ b/springwolf-ui/src/app/components/header/header.component.spec.ts
@@ -1,7 +1,6 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { MatToolbarModule } from "@angular/material/toolbar";
 import { HeaderComponent } from "./header.component";
-import { MatSlideToggleModule } from "@angular/material/slide-toggle";
 import { render } from "@testing-library/angular";
 import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
 import { mockedAsyncApiService } from "../../service/mock/mock-asyncapi.service";
@@ -14,7 +13,7 @@ describe("HeaderComponent", () => {
   beforeEach(async () => {
     await render(HeaderComponent, {
       declarations: [MockMatIcon],
-      imports: [MatToolbarModule, MatSlideToggleModule, MatMenuModule],
+      imports: [MatToolbarModule, MatMenuModule],
       providers: [
         { provide: IAssetService, useValue: mockedAssetService },
         { provide: AsyncApiService, useValue: mockedAsyncApiService },
diff --git a/springwolf-ui/src/app/components/header/header.component.ts b/springwolf-ui/src/app/components/header/header.component.ts
index c006f3894..fa525d57e 100644
--- a/springwolf-ui/src/app/components/header/header.component.ts
+++ b/springwolf-ui/src/app/components/header/header.component.ts
@@ -10,7 +10,6 @@ import { IAssetService } from "../../service/asset.service";
   styleUrls: ["./header.component.css"],
 })
 export class HeaderComponent implements OnInit {
-  isNewUi: boolean = UiService.DEFAULT_NEW_UI;
   isShowBindings: boolean = UiService.DEFAULT_SHOW_BINDINGS;
   isShowHeaders: boolean = UiService.DEFAULT_SHOW_HEADERS;
   title: string = "";
@@ -24,7 +23,6 @@ export class HeaderComponent implements OnInit {
   ngOnInit() {
     this.assetService.load();
 
-    this.uiService.isNewUi$.subscribe((value) => (this.isNewUi = value));
     this.uiService.isShowBindings$.subscribe(
       (value) => (this.isShowBindings = value)
     );
@@ -37,10 +35,6 @@ export class HeaderComponent implements OnInit {
     });
   }
 
-  toggleIsNewUi(value: boolean) {
-    this.uiService.toggleIsNewUi(value);
-  }
-
   toggleIsShowBindings() {
     this.uiService.toggleIsShowBindings(!this.isShowBindings);
   }
diff --git a/springwolf-ui/src/app/components/mock-components.spec.ts b/springwolf-ui/src/app/components/mock-components.spec.ts
index ae15b5dcc..600649091 100644
--- a/springwolf-ui/src/app/components/mock-components.spec.ts
+++ b/springwolf-ui/src/app/components/mock-components.spec.ts
@@ -40,7 +40,7 @@ export class MockPrismEditorComponent {
   language = input<string>("");
 }
 
-@Component({ selector: "app-schema-new", template: "" })
+@Component({ selector: "app-schema", template: "" })
 export class MockAppSchemaNewComponent {
   schema = input.required<Schema>();
 }
diff --git a/springwolf-ui/src/app/components/new/channels/channels.component.css b/springwolf-ui/src/app/components/new/channels/channels.component.css
deleted file mode 100644
index 08b6a033d..000000000
--- a/springwolf-ui/src/app/components/new/channels/channels.component.css
+++ /dev/null
@@ -1,22 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-.badge {
-  border-radius: 4px;
-  padding: 0.3em;
-  font-size: smaller;
-  text-transform: uppercase;
-}
-
-.protocol-badge {
-  color: var(--springwolf-badge-color-protocol);
-  background-color: var(--springwolf-badge-color-background-protocol);
-}
-
-.send-badge {
-  color: var(--springwolf-badge-color-send);
-  background-color: var(--springwolf-badge-color-background-send);
-}
-
-.receive-badge {
-  color: var(--springwolf-badge-color-receive);
-  background-color: var(--springwolf-badge-color-background-receive);
-}
diff --git a/springwolf-ui/src/app/components/new/channels/channels.component.html b/springwolf-ui/src/app/components/new/channels/channels.component.html
deleted file mode 100644
index b213b6100..000000000
--- a/springwolf-ui/src/app/components/new/channels/channels.component.html
+++ /dev/null
@@ -1,65 +0,0 @@
-<!-- SPDX-License-Identifier: Apache-2.0 -->
-<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"
-    appNavigationTarget
-    [id]="channelOperation.anchorIdentifier"
-  >
-    <mat-card-header>
-      <mat-card-title [attr.data-testid]="channel.anchorIdentifier">
-        {{ channelOperation.operation.message.title }}
-      </mat-card-title>
-      <span class="flex gap-16 padding-horizontal-1em">
-        <span
-          class="badge protocol-badge"
-          *ngIf="channelOperation.operation.protocol"
-        >
-          {{ channelOperation.operation.protocol }}
-        </span>
-        <span
-          class="badge"
-          [ngClass]="{
-            'send-badge': channelOperation.operation.operationType === 'send',
-            'receive-badge':
-              channelOperation.operation.operationType === 'receive'
-          }"
-        >
-          {{ channelOperation.operation.operationType }}
-        </span>
-      </span>
-    </mat-card-header>
-    <mat-card-content>
-      <app-channel-operation
-        [channelName]="channel.name"
-        [operation]="channelOperation.operation"
-      ></app-channel-operation>
-    </mat-card-content>
-  </mat-card>
-
-  @if (!$last) {
-  <br />
-  } } @if (!$last) {
-  <br />
-  }
-</article>
-}
diff --git a/springwolf-ui/src/app/components/new/channels/channels.component.spec.ts b/springwolf-ui/src/app/components/new/channels/channels.component.spec.ts
deleted file mode 100644
index 8b1150fb8..000000000
--- a/springwolf-ui/src/app/components/new/channels/channels.component.spec.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-import { render, screen } from "@testing-library/angular";
-import { ChannelsNewComponent } from "./channels.component";
-import { AsyncApiService } from "../../../service/asyncapi/asyncapi.service";
-import {
-  mockedAsyncApiService,
-  mockedExampleSchemaMapped,
-} from "../../../service/mock/mock-asyncapi.service";
-import { MaterialModule } from "../../../material.module";
-import { MockChannelOperationComponent } from "../../mock-components.spec";
-
-describe("ChannelsNewComponent", () => {
-  beforeEach(async () => {
-    mockedAsyncApiService.getAsyncApi.mockClear();
-
-    await render(ChannelsNewComponent, {
-      imports: [MaterialModule],
-      declarations: [MockChannelOperationComponent],
-      providers: [
-        { provide: AsyncApiService, useValue: mockedAsyncApiService },
-      ],
-    });
-  });
-
-  it("should render the component and data", () => {
-    expect(screen.getByText("Channels")).toBeTruthy();
-
-    mockedExampleSchemaMapped.channelOperations.forEach((channelOperation) => {
-      expect(screen.getAllByText(channelOperation.name)[0]).toBeTruthy();
-      expect(
-        screen.getAllByText(channelOperation.operation.message.title)[0]
-      ).toBeTruthy();
-    });
-  });
-});
diff --git a/springwolf-ui/src/app/components/new/channels/channels.component.ts b/springwolf-ui/src/app/components/new/channels/channels.component.ts
deleted file mode 100644
index fab609965..000000000
--- a/springwolf-ui/src/app/components/new/channels/channels.component.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-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",
-  templateUrl: "./channels.component.html",
-  styleUrls: ["./channels.component.css"],
-})
-export class ChannelsNewComponent implements OnInit {
-  channels: Channel[] = [];
-  isShowBindings: boolean = UiService.DEFAULT_SHOW_BINDINGS;
-  JSON = JSON;
-
-  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/components/new/schema/schema.component.ts b/springwolf-ui/src/app/components/new/schema/schema.component.ts
deleted file mode 100644
index 10f8dd39f..000000000
--- a/springwolf-ui/src/app/components/new/schema/schema.component.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-import { Component, input } from "@angular/core";
-import { Schema } from "../../../models/schema.model";
-import { last } from "rxjs";
-
-@Component({
-  selector: "app-schema-new",
-  templateUrl: "./schema.component.html",
-  styleUrls: ["./schema.component.css"],
-})
-export class SchemaNewComponent {
-  schema = input.required<Schema>();
-  protected readonly Object = Object;
-}
diff --git a/springwolf-ui/src/app/components/new/schemas/schemas.component.css b/springwolf-ui/src/app/components/new/schemas/schemas.component.css
deleted file mode 100644
index d2fb69cf3..000000000
--- a/springwolf-ui/src/app/components/new/schemas/schemas.component.css
+++ /dev/null
@@ -1,16 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-.table-row > *:first-child {
-  vertical-align: middle;
-}
-.table-row > *:last-child {
-  word-break: break-word;
-}
-
-.type-badge {
-  display: inline;
-  background-color: #e0e0e0;
-  border-radius: 4px;
-  padding: 4px;
-  font-weight: normal;
-  font-size: small;
-}
diff --git a/springwolf-ui/src/app/components/new/schemas/schemas.component.html b/springwolf-ui/src/app/components/new/schemas/schemas.component.html
deleted file mode 100644
index 80dff1dff..000000000
--- a/springwolf-ui/src/app/components/new/schemas/schemas.component.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!-- SPDX-License-Identifier: Apache-2.0 -->
-<h2>Schemas</h2>
-@for(schema of schemas; track schema) {
-<article appNavigationTarget [id]="schema.anchorIdentifier">
-  <mat-card>
-    <mat-card-header class="flex space-between align-items-baseline">
-      <mat-card-title>
-        {{ schema.title }}
-      </mat-card-title>
-    </mat-card-header>
-    <mat-card-content>
-      <div class="table margin-vertical-1em">
-        <div class="table-row">
-          <span>Name</span>
-          <span class="text-console">{{ schema.name }}</span>
-        </div>
-        <div class="table-row">
-          <span>Type</span>
-          <span
-            ><div class="type-badge">{{ schema.type }}</div></span
-          >
-        </div>
-        <div class="table-row description" *ngIf="schema.description">
-          <span>Description</span>
-          <markdown [data]="schema.description"></markdown>
-        </div>
-        <div class="table-row" *ngIf="schema.usedBy.length > 0">
-          <span>Used by</span>
-          <mat-chip-set>
-            @for (usageEl of schema.usedBy; track usageEl) {
-            <a [href]="usageEl.anchorUrl">
-              <mat-chip>
-                <mat-icon matChipAvatar>{{
-                  usageEl.type == "schema" ? "schema" : "swap_vert"
-                }}</mat-icon>
-                {{ usageEl.name }}
-              </mat-chip></a
-            >
-            }
-          </mat-chip-set>
-        </div>
-      </div>
-
-      <h6>Example</h6>
-      <div>
-        <app-json [data]="schema.example?.rawValue"></app-json>
-      </div>
-
-      <h6>Properties</h6>
-      <app-schema-new [schema]="schema"></app-schema-new>
-    </mat-card-content>
-  </mat-card>
-  @if (!$last) {
-  <br />
-  }
-</article>
-}
diff --git a/springwolf-ui/src/app/components/new/schemas/schemas.component.spec.ts b/springwolf-ui/src/app/components/new/schemas/schemas.component.spec.ts
deleted file mode 100644
index 622a0a92d..000000000
--- a/springwolf-ui/src/app/components/new/schemas/schemas.component.spec.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-import { SchemasNewComponent } from "./schemas.component";
-import { AsyncApiService } from "../../../service/asyncapi/asyncapi.service";
-import { MatAccordion } from "@angular/material/expansion";
-import { render, screen } from "@testing-library/angular";
-import { JsonComponent } from "../../json/json.component";
-import { Observable } from "rxjs";
-import { AsyncApi } from "../../../models/asyncapi.model";
-import { of } from "rxjs/internal/observable/of";
-import { Server } from "../../../models/server.model";
-import { Schema } from "../../../models/schema.model";
-import { initInfo } from "../../../service/mock/init-values";
-import { SchemaRangeComponent } from "../../schemas/range/schema-range.component";
-import { SchemaNewComponent } from "../schema/schema.component";
-
-describe("SchemasNewComponent", () => {
-  const mockedAsyncApiService: { getAsyncApi: () => Observable<AsyncApi> } = {
-    getAsyncApi: () =>
-      of({
-        info: initInfo,
-        servers: new Map<string, Server>(),
-        channels: [],
-        channelOperations: [],
-        components: {
-          schemas: new Map<string, Schema>(),
-        },
-        defaultContentType: "application/json",
-      }),
-  };
-
-  beforeEach(async () => {
-    await render(SchemasNewComponent, {
-      declarations: [SchemaNewComponent, SchemaRangeComponent, JsonComponent],
-      imports: [MatAccordion],
-      providers: [
-        { provide: AsyncApiService, useValue: mockedAsyncApiService },
-      ],
-    });
-  });
-
-  it("should create the component", () => {
-    expect(screen).toBeTruthy();
-  });
-});
diff --git a/springwolf-ui/src/app/components/new/schemas/schemas.component.ts b/springwolf-ui/src/app/components/new/schemas/schemas.component.ts
deleted file mode 100644
index 05f60bdbe..000000000
--- a/springwolf-ui/src/app/components/new/schemas/schemas.component.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-import { Component, OnInit } from "@angular/core";
-import { AsyncApiService } from "../../../service/asyncapi/asyncapi.service";
-import { Schema } from "../../../models/schema.model";
-
-@Component({
-  selector: "app-schemas-new",
-  templateUrl: "./schemas.component.html",
-  styleUrls: ["./schemas.component.css"],
-})
-export class SchemasNewComponent implements OnInit {
-  schemas: Schema[] = [];
-
-  constructor(private asyncApiService: AsyncApiService) {}
-
-  ngOnInit(): void {
-    this.asyncApiService
-      .getAsyncApi()
-      .subscribe(
-        (asyncapi) => (this.schemas = [...asyncapi.components.schemas.values()])
-      );
-  }
-}
diff --git a/springwolf-ui/src/app/components/new/servers/servers.component.css b/springwolf-ui/src/app/components/new/servers/servers.component.css
deleted file mode 100644
index e743e109b..000000000
--- a/springwolf-ui/src/app/components/new/servers/servers.component.css
+++ /dev/null
@@ -1,12 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-.badge {
-  border-radius: 4px;
-  padding: 0.3em;
-  font-size: smaller;
-  text-transform: uppercase;
-}
-
-.protocol-badge {
-  background-color: #347aeb;
-  color: #fff;
-}
diff --git a/springwolf-ui/src/app/components/new/servers/servers.component.html b/springwolf-ui/src/app/components/new/servers/servers.component.html
deleted file mode 100644
index d78cdb80f..000000000
--- a/springwolf-ui/src/app/components/new/servers/servers.component.html
+++ /dev/null
@@ -1,37 +0,0 @@
-<!-- SPDX-License-Identifier: Apache-2.0 -->
-<h2>Servers</h2>
-<div class="row">
-  @for (server of servers | keyvalue; track server) {
-  <article
-    appNavigationTarget
-    [id]="server.value.anchorIdentifier"
-    class="width-6/12 width-12/12-s"
-  >
-    <mat-card appearance="outlined">
-      <mat-card-header>
-        <mat-card-title>
-          {{ server.key }}
-        </mat-card-title>
-
-        <span class="flex gap-16 padding-horizontal-1em">
-          <span class="badge protocol-badge">
-            {{ server.value.protocol }}
-          </span>
-        </span>
-      </mat-card-header>
-      <mat-card-content>
-        <table>
-          <tbody>
-            <tr>
-              <td>Host</td>
-              <td class="text-console">
-                {{ server.value.host }}
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </mat-card-content>
-    </mat-card>
-  </article>
-  }
-</div>
diff --git a/springwolf-ui/src/app/components/new/servers/servers.component.spec.ts b/springwolf-ui/src/app/components/new/servers/servers.component.spec.ts
deleted file mode 100644
index 54fda3f77..000000000
--- a/springwolf-ui/src/app/components/new/servers/servers.component.spec.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-import { render, screen } from "@testing-library/angular";
-import { ServersNewComponent } from "./servers.component";
-import {
-  mockedAsyncApiService,
-  mockedExampleSchemaMapped,
-} from "../../../service/mock/mock-asyncapi.service";
-import { MaterialModule } from "../../../material.module";
-import { AsyncApiService } from "../../../service/asyncapi/asyncapi.service";
-
-describe("ServerComponent", () => {
-  mockedAsyncApiService.getAsyncApi.mockClear();
-
-  beforeEach(async () => {
-    await render(ServersNewComponent, {
-      imports: [MaterialModule],
-      providers: [
-        { provide: AsyncApiService, useValue: mockedAsyncApiService },
-      ],
-    });
-  });
-
-  it("should render the component and data", () => {
-    expect(screen.getByText("Servers")).toBeTruthy();
-
-    mockedExampleSchemaMapped.servers.forEach((server, key) => {
-      expect(screen.getAllByText(key)[0]).toBeTruthy();
-      expect(screen.getAllByText(server.protocol)[0]).toBeTruthy();
-      expect(screen.getAllByText(server.host)[0]).toBeTruthy();
-    });
-  });
-});
diff --git a/springwolf-ui/src/app/components/new/servers/servers.component.ts b/springwolf-ui/src/app/components/new/servers/servers.component.ts
deleted file mode 100644
index 4690c7b66..000000000
--- a/springwolf-ui/src/app/components/new/servers/servers.component.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-import { Component, OnInit } from "@angular/core";
-import { AsyncApiService } from "../../../service/asyncapi/asyncapi.service";
-import { Server } from "../../../models/server.model";
-
-@Component({
-  selector: "app-servers-new",
-  templateUrl: "./servers.component.html",
-  styleUrls: ["./servers.component.css"],
-})
-export class ServersNewComponent implements OnInit {
-  servers: Map<string, Server> = new Map<string, Server>();
-
-  constructor(private asyncApiService: AsyncApiService) {}
-
-  ngOnInit(): void {
-    this.asyncApiService
-      .getAsyncApi()
-      .subscribe((asyncapi) => (this.servers = asyncapi.servers));
-  }
-}
diff --git a/springwolf-ui/src/app/components/new/schema/range/range.component.html b/springwolf-ui/src/app/components/schema/range/range.component.html
similarity index 100%
rename from springwolf-ui/src/app/components/new/schema/range/range.component.html
rename to springwolf-ui/src/app/components/schema/range/range.component.html
diff --git a/springwolf-ui/src/app/components/new/schema/range/range.component.spec.ts b/springwolf-ui/src/app/components/schema/range/range.component.spec.ts
similarity index 97%
rename from springwolf-ui/src/app/components/new/schema/range/range.component.spec.ts
rename to springwolf-ui/src/app/components/schema/range/range.component.spec.ts
index d70867c28..7c586e7c1 100644
--- a/springwolf-ui/src/app/components/new/schema/range/range.component.spec.ts
+++ b/springwolf-ui/src/app/components/schema/range/range.component.spec.ts
@@ -1,5 +1,5 @@
 /* SPDX-License-Identifier: Apache-2.0 */
-import { RangeNewComponent as RangeComponent } from "./range.component";
+import { RangeComponent as RangeComponent } from "./range.component";
 import { render, screen } from "@testing-library/angular";
 
 describe("SchemaRangeNewComponent", function () {
diff --git a/springwolf-ui/src/app/components/new/schema/range/range.component.ts b/springwolf-ui/src/app/components/schema/range/range.component.ts
similarity index 88%
rename from springwolf-ui/src/app/components/new/schema/range/range.component.ts
rename to springwolf-ui/src/app/components/schema/range/range.component.ts
index 6f32a460b..bbc57e8ef 100644
--- a/springwolf-ui/src/app/components/new/schema/range/range.component.ts
+++ b/springwolf-ui/src/app/components/schema/range/range.component.ts
@@ -2,10 +2,10 @@
 import { Component, input } from "@angular/core";
 
 @Component({
-  selector: "app-schema-range-new",
+  selector: "app-schema-range",
   templateUrl: "./range.component.html",
 })
-export class RangeNewComponent {
+export class RangeComponent {
   lowerBound = input<number>();
   upperBound = input<number>();
   lowerBoundInclusive = input<boolean, boolean | string>(true, {
diff --git a/springwolf-ui/src/app/components/new/schema/schema.component.css b/springwolf-ui/src/app/components/schema/schema.component.css
similarity index 100%
rename from springwolf-ui/src/app/components/new/schema/schema.component.css
rename to springwolf-ui/src/app/components/schema/schema.component.css
diff --git a/springwolf-ui/src/app/components/new/schema/schema.component.html b/springwolf-ui/src/app/components/schema/schema.component.html
similarity index 98%
rename from springwolf-ui/src/app/components/new/schema/schema.component.html
rename to springwolf-ui/src/app/components/schema/schema.component.html
index bf6cdac19..9348c8b5a 100644
--- a/springwolf-ui/src/app/components/new/schema/schema.component.html
+++ b/springwolf-ui/src/app/components/schema/schema.component.html
@@ -100,7 +100,7 @@
       *ngIf="value.minItems != null || value.maxItems != null"
       class="attribute"
     >
-      <app-schema-range-new
+      <app-schema-range
         [lowerBound]="value.minItems"
         [upperBound]="value.maxItems"
         lowerBoundInclusive="true"
@@ -124,7 +124,7 @@
       *ngIf="value.minLength != null || value.maxLength != null"
       class="attribute"
     >
-      <app-schema-range-new
+      <app-schema-range
         [lowerBound]="value.minLength"
         [upperBound]="value.maxLength"
         lowerBoundInclusive="true"
@@ -137,7 +137,7 @@
       *ngIf="value.minimum != undefined || value.maximum != undefined"
       class="attribute"
     >
-      <app-schema-range-new
+      <app-schema-range
         [lowerBound]="value.minimum"
         [upperBound]="value.maximum"
         [lowerBoundInclusive]="!value.exclusiveMinimum"
diff --git a/springwolf-ui/src/app/components/new/schema/schema.component.spec.ts b/springwolf-ui/src/app/components/schema/schema.component.spec.ts
similarity index 66%
rename from springwolf-ui/src/app/components/new/schema/schema.component.spec.ts
rename to springwolf-ui/src/app/components/schema/schema.component.spec.ts
index 064a88ee2..652d39604 100644
--- a/springwolf-ui/src/app/components/new/schema/schema.component.spec.ts
+++ b/springwolf-ui/src/app/components/schema/schema.component.spec.ts
@@ -1,22 +1,22 @@
 /* SPDX-License-Identifier: Apache-2.0 */
-import { SchemaNewComponent } from "./schema.component";
+import { SchemaComponent } from "./schema.component";
 import { MatChipsModule } from "@angular/material/chips";
 import { MarkdownModule } from "ngx-markdown";
-import { Example } from "../../../models/example.model";
-import { JsonComponent } from "../../json/json.component";
+import { Example } from "../../models/example.model";
+import { JsonComponent } from "../json/json.component";
 import { render, screen } from "@testing-library/angular";
-import { SchemaRangeComponent } from "../../schemas/range/schema-range.component";
 import { MatDividerModule } from "@angular/material/divider";
+import { RangeComponent } from "./range/range.component";
 
 describe("SchemaNewComponent", () => {
   beforeEach(async () => {
     const mockedSchemaRangeComponent = jest.fn();
 
-    await render(SchemaNewComponent, {
-      declarations: [SchemaNewComponent, SchemaRangeComponent, JsonComponent],
+    await render(SchemaComponent, {
+      declarations: [SchemaComponent, RangeComponent, JsonComponent],
       imports: [MatChipsModule, MatDividerModule, MarkdownModule.forRoot()],
       providers: [
-        { provide: SchemaRangeComponent, useValue: mockedSchemaRangeComponent },
+        { provide: RangeComponent, useValue: mockedSchemaRangeComponent },
       ],
       componentInputs: {
         schema: {
diff --git a/springwolf-ui/src/app/components/schemas/schema/schema.component.ts b/springwolf-ui/src/app/components/schema/schema.component.ts
similarity index 70%
rename from springwolf-ui/src/app/components/schemas/schema/schema.component.ts
rename to springwolf-ui/src/app/components/schema/schema.component.ts
index 5deb9d0af..fb34e1ad8 100644
--- a/springwolf-ui/src/app/components/schemas/schema/schema.component.ts
+++ b/springwolf-ui/src/app/components/schema/schema.component.ts
@@ -1,6 +1,7 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { Component, input } from "@angular/core";
-import { Schema } from "../../../models/schema.model";
+import { Schema } from "../../models/schema.model";
+import "../code/prism.bridge";
 
 @Component({
   selector: "app-schema",
@@ -9,4 +10,5 @@ import { Schema } from "../../../models/schema.model";
 })
 export class SchemaComponent {
   schema = input.required<Schema>();
+  protected readonly Object = Object;
 }
diff --git a/springwolf-ui/src/app/components/schemas/range/schema-range.component.css b/springwolf-ui/src/app/components/schemas/range/schema-range.component.css
deleted file mode 100644
index a0e54bd82..000000000
--- a/springwolf-ui/src/app/components/schemas/range/schema-range.component.css
+++ /dev/null
@@ -1,8 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-.range {
-  background-color: rgb(128, 90, 213);
-  color: rgb(255, 255, 255);
-  margin: 0 8px 0 8px;
-  padding: 2px 4px 2px 4px;
-  border-radius: 4px;
-}
diff --git a/springwolf-ui/src/app/components/schemas/range/schema-range.component.html b/springwolf-ui/src/app/components/schemas/range/schema-range.component.html
deleted file mode 100644
index e2c8db180..000000000
--- a/springwolf-ui/src/app/components/schemas/range/schema-range.component.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!-- SPDX-License-Identifier: Apache-2.0 -->
-<div>
-  <span
-    class="range"
-    *ngIf="schema().minimum != undefined && schema().maximum == undefined"
-  >
-    {{ schema().exclusiveMinimum ? ">" : ">=" }} {{ schema().minimum }}
-  </span>
-  <span
-    class="range"
-    *ngIf="schema().minimum == undefined && schema().maximum != undefined"
-  >
-    {{ schema().exclusiveMaximum ? "<" : "<=" }} {{ schema().maximum }}
-  </span>
-  <span
-    class="range"
-    *ngIf="schema().minimum != undefined && schema().maximum != undefined"
-    >{{ schema().exclusiveMinimum ? "(" : "[" }} {{ schema().minimum }} ..
-    {{ schema().maximum }} {{ schema().exclusiveMaximum ? ")" : "]" }}</span
-  >
-</div>
diff --git a/springwolf-ui/src/app/components/schemas/range/schema-range.component.spec.ts b/springwolf-ui/src/app/components/schemas/range/schema-range.component.spec.ts
deleted file mode 100644
index 9e25afee4..000000000
--- a/springwolf-ui/src/app/components/schemas/range/schema-range.component.spec.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-import { SchemaRangeComponent } from "./schema-range.component";
-import { render, screen } from "@testing-library/angular";
-import { Schema } from "../../../models/schema.model";
-
-describe("SchemaRangeComponent", function () {
-  const renderComponent = async (schema: Schema) => {
-    await render(SchemaRangeComponent, {
-      componentInputs: {
-        schema: schema,
-      },
-    });
-  };
-
-  const minimalSchema: Schema = {
-    ts_type: "object",
-
-    title: "test",
-    name: "test",
-    anchorUrl: "test",
-    anchorIdentifier: "test",
-    usedBy: [],
-  };
-
-  it("should create the component", async () => {
-    await renderComponent({
-      ...minimalSchema,
-      minimum: 0.1,
-      maximum: 10,
-      exclusiveMinimum: true,
-      exclusiveMaximum: true,
-    });
-
-    expect(screen).toBeTruthy();
-  });
-
-  it("should have `( 0.1 .. 10 )` as value", async () => {
-    await renderComponent({
-      ...minimalSchema,
-      minimum: 0.1,
-      maximum: 10,
-      exclusiveMinimum: true,
-      exclusiveMaximum: true,
-    });
-
-    expect(screen.getByText("( 0.1 .. 10 )")).toBeTruthy();
-  });
-
-  it("should have `[ 0.1 .. 10 )` as value", async () => {
-    await renderComponent({
-      ...minimalSchema,
-      minimum: 0.1,
-      maximum: 10,
-      exclusiveMinimum: false,
-      exclusiveMaximum: true,
-    });
-
-    expect(screen.getByText("[ 0.1 .. 10 )")).toBeTruthy();
-  });
-
-  it("should have `( 0.1 .. 10 ]` as value", async () => {
-    await renderComponent({
-      ...minimalSchema,
-      minimum: 0.1,
-      maximum: 10,
-      exclusiveMinimum: true,
-      exclusiveMaximum: false,
-    });
-
-    expect(screen.getByText("( 0.1 .. 10 ]")).toBeTruthy();
-  });
-
-  it("should have `[ 0.1 .. 10 ]` as value", async () => {
-    await renderComponent({
-      ...minimalSchema,
-      minimum: 0.1,
-      maximum: 10,
-    });
-
-    expect(screen.getByText("[ 0.1 .. 10 ]")).toBeTruthy();
-  });
-
-  it("should have `> 0.1` as value", async () => {
-    await renderComponent({
-      ...minimalSchema,
-      minimum: 0.1,
-      exclusiveMinimum: true,
-    });
-
-    expect(screen.getByText("> 0.1")).toBeTruthy();
-  });
-
-  it("should have `< 10` as value", async () => {
-    await renderComponent({
-      ...minimalSchema,
-      maximum: 10,
-      exclusiveMaximum: true,
-    });
-
-    expect(screen.getByText("< 10")).toBeTruthy();
-  });
-
-  it("should have `>= 0.1` as value", async () => {
-    await renderComponent({
-      ...minimalSchema,
-      minimum: 0.1,
-    });
-
-    expect(screen.getByText(">= 0.1")).toBeTruthy();
-  });
-
-  it("should have `<= 10` as value", async () => {
-    await renderComponent({
-      ...minimalSchema,
-      maximum: 10,
-    });
-
-    expect(screen.getByText("<= 10")).toBeTruthy();
-  });
-});
diff --git a/springwolf-ui/src/app/components/schemas/range/schema-range.component.ts b/springwolf-ui/src/app/components/schemas/range/schema-range.component.ts
deleted file mode 100644
index b6f0aebba..000000000
--- a/springwolf-ui/src/app/components/schemas/range/schema-range.component.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-import { Component, input } from "@angular/core";
-import { Schema } from "../../../models/schema.model";
-
-@Component({
-  selector: "app-schema-range",
-  templateUrl: "./schema-range.component.html",
-  styleUrls: ["./schema-range.component.css"],
-})
-export class SchemaRangeComponent {
-  schema = input.required<Schema>();
-}
diff --git a/springwolf-ui/src/app/components/schemas/schema/schema.component.css b/springwolf-ui/src/app/components/schemas/schema/schema.component.css
deleted file mode 100644
index bb3dc33e0..000000000
--- a/springwolf-ui/src/app/components/schemas/schema/schema.component.css
+++ /dev/null
@@ -1,33 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-.schema {
-  font-weight: 500;
-  width: 100%;
-}
-
-.key {
-  width: 12em;
-  vertical-align: top;
-}
-
-.required {
-  color: red;
-}
-
-.type-content {
-  display: flex;
-}
-
-.type {
-  color: #55a;
-}
-
-.example {
-  color: #6b6b6b;
-  font-style: italic;
-  word-break: break-word;
-}
-
-.description {
-  font-style: normal;
-  font-weight: normal;
-}
diff --git a/springwolf-ui/src/app/components/schemas/schema/schema.component.html b/springwolf-ui/src/app/components/schemas/schema/schema.component.html
deleted file mode 100644
index 609be2517..000000000
--- a/springwolf-ui/src/app/components/schemas/schema/schema.component.html
+++ /dev/null
@@ -1,70 +0,0 @@
-<!-- SPDX-License-Identifier: Apache-2.0 -->
-<div>
-  <app-json [data]="schema().example?.rawValue"></app-json>
-</div>
-<p>Properties</p>
-<!--  Primitive types  -->
-<ng-container
-  *ngIf="schema().type !== 'object'"
-  [ngTemplateOutlet]="valueContent"
-  [ngTemplateOutletContext]="{ value: schema() }"
->
-</ng-container>
-<table class="schema">
-  <tbody>
-    <!--  Objects  -->
-    <tr *ngFor="let property of schema().properties || {} | keyvalue">
-      <td class="key">
-        {{ property.key }}
-        <span class="required" *ngIf="schema().required?.includes(property.key)"
-          >*</span
-        >
-      </td>
-      <td>
-        <ng-container *ngIf="property.value.items">
-          <span
-            class="type"
-            *ngIf="
-              property.value.items.type && !property.value.items.refAnchorUrl
-            "
-            >{{ property.value.items.type }}[]</span
-          >
-          <span class="type" *ngIf="property.value.items.refAnchorUrl">
-            <a [href]="property.value.items.refAnchorUrl"
-              >{{ property.value.items.refName }}[]</a
-            >
-          </span>
-        </ng-container>
-        <ng-container
-          [ngTemplateOutlet]="valueContent"
-          [ngTemplateOutletContext]="{ value: property.value }"
-        >
-        </ng-container>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
-<ng-template #valueContent let-value="value">
-  <div class="type-content">
-    <span class="type" *ngIf="value.type != 'array'">{{ value.type }}</span>
-
-    <app-schema-range [schema]="value"> </app-schema-range>
-  </div>
-
-  <span class="type" *ngIf="value.refTitle">
-    <a [href]="value.anchorUrl">{{ value.refTitle }}</a>
-  </span>
-  <span class="format" *ngIf="value.format">({{ value.format }})</span>
-  <div class="description">
-    <markdown [data]="value.description"></markdown>
-  </div>
-  <span class="example" *ngIf="value.example"
-    >example: {{ value.example.value }}</span
-  >
-  <mat-select *ngIf="value.enum" placeholder="Enum">
-    <mat-option *ngFor="let enumValue of value.enum" [value]="enumValue"
-      >{{ enumValue }}
-    </mat-option>
-  </mat-select>
-</ng-template>
diff --git a/springwolf-ui/src/app/components/schemas/schema/schema.component.spec.ts b/springwolf-ui/src/app/components/schemas/schema/schema.component.spec.ts
deleted file mode 100644
index 0393ac23b..000000000
--- a/springwolf-ui/src/app/components/schemas/schema/schema.component.spec.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/* SPDX-License-Identifier: Apache-2.0 */
-import { SchemaComponent } from "./schema.component";
-import { SchemaRangeComponent } from "../range/schema-range.component";
-import { MatChipsModule } from "@angular/material/chips";
-import { MarkdownModule } from "ngx-markdown";
-import { Example } from "../../../models/example.model";
-import { JsonComponent } from "../../json/json.component";
-import { render, screen } from "@testing-library/angular";
-
-describe("SchemaComponent", () => {
-  beforeEach(async () => {
-    const mockedSchemaRangeComponent = jest.fn();
-
-    await render(SchemaComponent, {
-      declarations: [SchemaComponent, SchemaRangeComponent, JsonComponent],
-      imports: [MatChipsModule, MarkdownModule.forRoot()],
-      providers: [
-        { provide: SchemaRangeComponent, useValue: mockedSchemaRangeComponent },
-      ],
-      componentInputs: {
-        schema: {
-          title: "String",
-          type: "string",
-          example: new Example("example value"),
-        },
-      },
-    });
-  });
-
-  it("should create the component", () => {
-    expect(screen).toBeTruthy();
-  });
-
-  it("should render primitive string example", async () => {
-    expect(screen.getAllByText(/example value/i)).toBeTruthy();
-  });
-});
diff --git a/springwolf-ui/src/app/components/schemas/schemas.component.css b/springwolf-ui/src/app/components/schemas/schemas.component.css
index 0eae36c5b..d2fb69cf3 100644
--- a/springwolf-ui/src/app/components/schemas/schemas.component.css
+++ b/springwolf-ui/src/app/components/schemas/schemas.component.css
@@ -1,19 +1,13 @@
 /* SPDX-License-Identifier: Apache-2.0 */
-h3 {
-  margin: 0;
+.table-row > *:first-child {
+  vertical-align: middle;
 }
-
-.schema-name {
-  background-color: #e0e0e0;
-  border-radius: 4px;
-  padding: 6px;
-  font-weight: normal;
-}
-
-.badge {
+.table-row > *:last-child {
+  word-break: break-word;
 }
 
 .type-badge {
+  display: inline;
   background-color: #e0e0e0;
   border-radius: 4px;
   padding: 4px;
diff --git a/springwolf-ui/src/app/components/schemas/schemas.component.html b/springwolf-ui/src/app/components/schemas/schemas.component.html
index a6ae42c2e..9e4bf5019 100644
--- a/springwolf-ui/src/app/components/schemas/schemas.component.html
+++ b/springwolf-ui/src/app/components/schemas/schemas.component.html
@@ -1,27 +1,57 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
-<h1>Schemas</h1>
-<mat-accordion>
-  <mat-expansion-panel
-    *ngFor="let schema of schemas | keyvalue"
-    [id]="schema.value.anchorIdentifier"
-    [expanded]="selectedSchema == schema.value.anchorIdentifier"
-    (opened)="this.setSchemaSelection(schema.value)"
-  >
-    <mat-expansion-panel-header>
-      <mat-panel-title>
-        <h3>{{ schema.value.title }}</h3>
-      </mat-panel-title>
-      <mat-panel-description
-        class="flex-column flex-start items-center"
-        [ngClass]="{ 'gap-16': schema.value.description }"
-      >
-        <div class="badge type-badge">{{ schema.value.type }}</div>
-        <markdown [data]="schema.value.description"></markdown>
-      </mat-panel-description>
-    </mat-expansion-panel-header>
-    <h4>
-      Name: <span class="schema-name">{{ schema.value.name }}</span>
-    </h4>
-    <app-schema [schema]="schema.value"></app-schema>
-  </mat-expansion-panel>
-</mat-accordion>
+<h2>Schemas</h2>
+@for(schema of schemas; track schema) {
+<article appNavigationTarget [id]="schema.anchorIdentifier">
+  <mat-card>
+    <mat-card-header class="flex space-between align-items-baseline">
+      <mat-card-title>
+        {{ schema.title }}
+      </mat-card-title>
+    </mat-card-header>
+    <mat-card-content>
+      <div class="table margin-vertical-1em">
+        <div class="table-row">
+          <span>Name</span>
+          <span class="text-console">{{ schema.name }}</span>
+        </div>
+        <div class="table-row">
+          <span>Type</span>
+          <span
+            ><div class="type-badge">{{ schema.type }}</div></span
+          >
+        </div>
+        <div class="table-row description" *ngIf="schema.description">
+          <span>Description</span>
+          <markdown [data]="schema.description"></markdown>
+        </div>
+        <div class="table-row" *ngIf="schema.usedBy.length > 0">
+          <span>Used by</span>
+          <mat-chip-set>
+            @for (usageEl of schema.usedBy; track usageEl) {
+            <a [href]="usageEl.anchorUrl">
+              <mat-chip>
+                <mat-icon matChipAvatar>{{
+                  usageEl.type == "schema" ? "schema" : "swap_vert"
+                }}</mat-icon>
+                {{ usageEl.name }}
+              </mat-chip></a
+            >
+            }
+          </mat-chip-set>
+        </div>
+      </div>
+
+      <h6>Example</h6>
+      <div>
+        <app-json [data]="schema.example?.rawValue"></app-json>
+      </div>
+
+      <h6>Properties</h6>
+      <app-schema [schema]="schema"></app-schema>
+    </mat-card-content>
+  </mat-card>
+  @if (!$last) {
+  <br />
+  }
+</article>
+}
diff --git a/springwolf-ui/src/app/components/schemas/schemas.component.spec.ts b/springwolf-ui/src/app/components/schemas/schemas.component.spec.ts
index db6c9bb91..61bd300c7 100644
--- a/springwolf-ui/src/app/components/schemas/schemas.component.spec.ts
+++ b/springwolf-ui/src/app/components/schemas/schemas.component.spec.ts
@@ -3,8 +3,6 @@ import { SchemasComponent } from "./schemas.component";
 import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
 import { MatAccordion } from "@angular/material/expansion";
 import { render, screen } from "@testing-library/angular";
-import { SchemaComponent } from "./schema/schema.component";
-import { SchemaRangeComponent } from "./range/schema-range.component";
 import { JsonComponent } from "../json/json.component";
 import { Observable } from "rxjs";
 import { AsyncApi } from "../../models/asyncapi.model";
@@ -12,8 +10,10 @@ import { of } from "rxjs/internal/observable/of";
 import { Server } from "../../models/server.model";
 import { Schema } from "../../models/schema.model";
 import { initInfo } from "../../service/mock/init-values";
+import { SchemaComponent } from "../schema/schema.component";
+import { RangeComponent } from "../schema/range/range.component";
 
-describe("SchemasComponent", () => {
+describe("SchemasNewComponent", () => {
   const mockedAsyncApiService: { getAsyncApi: () => Observable<AsyncApi> } = {
     getAsyncApi: () =>
       of({
@@ -30,7 +30,7 @@ describe("SchemasComponent", () => {
 
   beforeEach(async () => {
     await render(SchemasComponent, {
-      declarations: [SchemaComponent, SchemaRangeComponent, JsonComponent],
+      declarations: [SchemaComponent, RangeComponent, JsonComponent],
       imports: [MatAccordion],
       providers: [
         { provide: AsyncApiService, useValue: mockedAsyncApiService },
diff --git a/springwolf-ui/src/app/components/schemas/schemas.component.ts b/springwolf-ui/src/app/components/schemas/schemas.component.ts
index eb3099f58..3b091e496 100644
--- a/springwolf-ui/src/app/components/schemas/schemas.component.ts
+++ b/springwolf-ui/src/app/components/schemas/schemas.component.ts
@@ -1,6 +1,5 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { Component, OnInit } from "@angular/core";
-import { Location } from "@angular/common";
 import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
 import { Schema } from "../../models/schema.model";
 
@@ -10,29 +9,15 @@ import { Schema } from "../../models/schema.model";
   styleUrls: ["./schemas.component.css"],
 })
 export class SchemasComponent implements OnInit {
-  schemas: Map<string, Schema> = new Map<string, Schema>();
-  selectedSchema: string = "";
+  schemas: Schema[] = [];
 
-  constructor(
-    private asyncApiService: AsyncApiService,
-    private location: Location
-  ) {
-    this.setSchemaSelectionFromLocation();
-  }
+  constructor(private asyncApiService: AsyncApiService) {}
 
   ngOnInit(): void {
-    this.location.subscribe((): void => this.setSchemaSelectionFromLocation());
     this.asyncApiService
       .getAsyncApi()
-      .subscribe((asyncapi) => (this.schemas = asyncapi.components.schemas));
-  }
-
-  setSchemaSelection(schema: Schema): void {
-    if (schema.anchorIdentifier) {
-      window.location.hash = schema.anchorIdentifier;
-    }
-  }
-  setSchemaSelectionFromLocation(): void {
-    this.selectedSchema = window.location.hash;
+      .subscribe(
+        (asyncapi) => (this.schemas = [...asyncapi.components.schemas.values()])
+      );
   }
 }
diff --git a/springwolf-ui/src/app/components/servers/servers.component.css b/springwolf-ui/src/app/components/servers/servers.component.css
index d046bd977..e743e109b 100644
--- a/springwolf-ui/src/app/components/servers/servers.component.css
+++ b/springwolf-ui/src/app/components/servers/servers.component.css
@@ -1,4 +1,12 @@
 /* SPDX-License-Identifier: Apache-2.0 */
-h1 {
-  /* empty */
+.badge {
+  border-radius: 4px;
+  padding: 0.3em;
+  font-size: smaller;
+  text-transform: uppercase;
+}
+
+.protocol-badge {
+  background-color: #347aeb;
+  color: #fff;
 }
diff --git a/springwolf-ui/src/app/components/servers/servers.component.html b/springwolf-ui/src/app/components/servers/servers.component.html
index b69790125..d78cdb80f 100644
--- a/springwolf-ui/src/app/components/servers/servers.component.html
+++ b/springwolf-ui/src/app/components/servers/servers.component.html
@@ -1,25 +1,37 @@
 <!-- SPDX-License-Identifier: Apache-2.0 -->
-<h1>Servers</h1>
-<mat-card appearance="outlined" *ngFor="let server of servers | keyvalue">
-  <mat-card-header>
-    <mat-card-title>{{ server.key }}</mat-card-title>
-  </mat-card-header>
-  <mat-card-content>
-    <table>
-      <tbody>
-        <tr>
-          <td>Host:</td>
-          <td>
-            {{ server.value.host }}
-          </td>
-        </tr>
-        <tr>
-          <td>Protocol:</td>
-          <td>
+<h2>Servers</h2>
+<div class="row">
+  @for (server of servers | keyvalue; track server) {
+  <article
+    appNavigationTarget
+    [id]="server.value.anchorIdentifier"
+    class="width-6/12 width-12/12-s"
+  >
+    <mat-card appearance="outlined">
+      <mat-card-header>
+        <mat-card-title>
+          {{ server.key }}
+        </mat-card-title>
+
+        <span class="flex gap-16 padding-horizontal-1em">
+          <span class="badge protocol-badge">
             {{ server.value.protocol }}
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  </mat-card-content>
-</mat-card>
+          </span>
+        </span>
+      </mat-card-header>
+      <mat-card-content>
+        <table>
+          <tbody>
+            <tr>
+              <td>Host</td>
+              <td class="text-console">
+                {{ server.value.host }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </mat-card-content>
+    </mat-card>
+  </article>
+  }
+</div>
diff --git a/springwolf-ui/src/app/components/servers/servers.component.spec.ts b/springwolf-ui/src/app/components/servers/servers.component.spec.ts
index 9a5b7429b..1423bcac5 100644
--- a/springwolf-ui/src/app/components/servers/servers.component.spec.ts
+++ b/springwolf-ui/src/app/components/servers/servers.component.spec.ts
@@ -1,12 +1,12 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 import { render, screen } from "@testing-library/angular";
 import { ServersComponent } from "./servers.component";
-import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
 import {
   mockedAsyncApiService,
   mockedExampleSchemaMapped,
 } from "../../service/mock/mock-asyncapi.service";
 import { MaterialModule } from "../../material.module";
+import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
 
 describe("ServerComponent", () => {
   mockedAsyncApiService.getAsyncApi.mockClear();
diff --git a/springwolf-ui/src/app/components/new/sidenav/navigation.directive.ts b/springwolf-ui/src/app/components/sidenav/navigation.directive.ts
similarity index 100%
rename from springwolf-ui/src/app/components/new/sidenav/navigation.directive.ts
rename to springwolf-ui/src/app/components/sidenav/navigation.directive.ts
diff --git a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.css b/springwolf-ui/src/app/components/sidenav/sidenav.component.css
similarity index 100%
rename from springwolf-ui/src/app/components/new/sidenav/sidenav.component.css
rename to springwolf-ui/src/app/components/sidenav/sidenav.component.css
diff --git a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.html b/springwolf-ui/src/app/components/sidenav/sidenav.component.html
similarity index 100%
rename from springwolf-ui/src/app/components/new/sidenav/sidenav.component.html
rename to springwolf-ui/src/app/components/sidenav/sidenav.component.html
diff --git a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.ts b/springwolf-ui/src/app/components/sidenav/sidenav.component.ts
similarity index 97%
rename from springwolf-ui/src/app/components/new/sidenav/sidenav.component.ts
rename to springwolf-ui/src/app/components/sidenav/sidenav.component.ts
index a81466ebe..a54fa3af6 100644
--- a/springwolf-ui/src/app/components/new/sidenav/sidenav.component.ts
+++ b/springwolf-ui/src/app/components/sidenav/sidenav.component.ts
@@ -1,5 +1,5 @@
 /* SPDX-License-Identifier: Apache-2.0 */
-import { AsyncApiService } from "../../../service/asyncapi/asyncapi.service";
+import { AsyncApiService } from "../../service/asyncapi/asyncapi.service";
 import {
   AfterViewInit,
   Component,
@@ -10,7 +10,7 @@ import {
   ViewChild,
 } from "@angular/core";
 import { NavigationTargetDirective } from "./navigation.directive";
-import { AsyncApiMapperService } from "../../../service/asyncapi/asyncapi-mapper.service";
+import { AsyncApiMapperService } from "../../service/asyncapi/asyncapi-mapper.service";
 import { Location } from "@angular/common";
 
 interface NavigationEntry {
diff --git a/springwolf-ui/src/app/material.module.ts b/springwolf-ui/src/app/material.module.ts
index db1058d6f..400ab332a 100644
--- a/springwolf-ui/src/app/material.module.ts
+++ b/springwolf-ui/src/app/material.module.ts
@@ -14,7 +14,6 @@ import { MatSnackBarModule } from "@angular/material/snack-bar";
 import { MatFormFieldModule } from "@angular/material/form-field";
 import { MatSelectModule } from "@angular/material/select";
 import { MatChipsModule } from "@angular/material/chips";
-import { MatSlideToggleModule } from "@angular/material/slide-toggle";
 import { MatListModule } from "@angular/material/list";
 import { MatSidenavModule } from "@angular/material/sidenav";
 
@@ -33,7 +32,6 @@ const modules = [
   MatFormFieldModule,
   MatSelectModule,
   MatChipsModule,
-  MatSlideToggleModule,
   MatSidenavModule,
 ];
 
diff --git a/springwolf-ui/src/app/service/ui.service.ts b/springwolf-ui/src/app/service/ui.service.ts
index aee036dcd..6e3fe2701 100644
--- a/springwolf-ui/src/app/service/ui.service.ts
+++ b/springwolf-ui/src/app/service/ui.service.ts
@@ -6,13 +6,9 @@ import { BehaviorSubject } from "rxjs";
   providedIn: "root",
 })
 export class UiService {
-  public static readonly DEFAULT_NEW_UI = true;
   public static readonly DEFAULT_SHOW_BINDINGS = true;
   public static readonly DEFAULT_SHOW_HEADERS = true;
 
-  private _isNewUi = new BehaviorSubject<boolean>(UiService.DEFAULT_NEW_UI);
-  isNewUi$ = this._isNewUi.asObservable();
-
   private _isShowBindings = new BehaviorSubject<boolean>(
     UiService.DEFAULT_SHOW_BINDINGS
   );
@@ -23,10 +19,6 @@ export class UiService {
   );
   isShowHeaders$ = this._isShowHeaders.asObservable();
 
-  toggleIsNewUi(value: boolean) {
-    this._isNewUi.next(value);
-  }
-
   toggleIsShowBindings(value: boolean) {
     this._isShowBindings.next(value);
   }
diff --git a/springwolf-ui/src/main.ts b/springwolf-ui/src/main.ts
index e5be94b9d..4f7dcab46 100644
--- a/springwolf-ui/src/main.ts
+++ b/springwolf-ui/src/main.ts
@@ -11,5 +11,3 @@ if (environment.production) {
 platformBrowserDynamic()
   .bootstrapModule(AppModule)
   .catch((err) => console.error(err));
-
-// TODO: remove prism in angular.json + dependency after using new theme