diff --git a/.gitignore b/.gitignore
index db3f9de..c9eb3f2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -93,3 +93,4 @@ liquibase*.properties
 node
 
 .env
+virtual_view/*
diff --git a/frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.html b/frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.html
index 78eff63..ee2ae29 100644
--- a/frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.html
+++ b/frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.html
@@ -1,26 +1,28 @@
 <div class="channel-list">
   <p>Channels</p>
-  @for (group of groupedChannels(); track group.type) {
-    <p class="channel-group-title" (click)="toggleGroup(group.type)">
-      {{ group.type }} {{ collapsedGroups().has(group.type) ? '▼' : '▲' }}
-    </p>
-    @if (!collapsedGroups().has(group.type)) {
-      @for (channel of group.channels; track channel.name) {
-        <div class="channel indented"
-             [class.selected]="selectedChannel()?.name === channel.name && selectedChannel()?.type === channel.type"
-             (click)="selectedChannelChange.emit(channel)">
+  <div class="scroll">
+    @for (group of groupedChannels(); track group.type) {
+      <p class="channel-group-title" (click)="toggleGroup(group.type)">
+        {{ group.type }} {{ collapsedGroups().has(group.type) ? '▼' : '▲' }}
+      </p>
+      @if (!collapsedGroups().has(group.type)) {
+        @for (channel of group.channels; track channel.name) {
+          <div class="channel indented"
+               [class.selected]="selectedChannel()?.name === channel.name && selectedChannel()?.type === channel.type"
+               (click)="selectedChannelChange.emit(channel)">
           <span class="channel-name">
             @for (segment of parseColoredName(getDisplayName(channel)); track $index) {
               <span [style.color]="segment.color">{{ segment.text }}</span>
             }
           </span>
-          @if (channel.unreadMessages > 0) {
-            <div class="notification">
-              <svg-circle></svg-circle>
-            </div>
-          }
-        </div>
+            @if (channel.unreadMessages > 0) {
+              <div class="notification">
+                <svg-circle></svg-circle>
+              </div>
+            }
+          </div>
+        }
       }
     }
-  }
+  </div>
 </div>
diff --git a/frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.scss b/frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.scss
index 54c9c3a..6e1620a 100644
--- a/frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.scss
+++ b/frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.scss
@@ -45,3 +45,7 @@
     user-select: none;
   }
 }
+
+.scroll {
+  overflow: scroll;
+}
diff --git a/frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.ts b/frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.ts
index c54d693..a02dd35 100644
--- a/frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.ts
+++ b/frontend/src/app/pages/altitude/chat/components/channel-list/channel-list.component.ts
@@ -69,7 +69,7 @@ export class ChannelListComponent {
   }
 
   protected parseColoredName(name: string): ColoredNameSegment[] {
-    const markerRegex = /\{#([0-9a-fA-F]{6})([<>]?)}/g;
+    const markerRegex = /\{#([0-9a-fA-F]{6})(<>|[<>]?)}/g;
     const segments: ColoredNameSegment[] = [];
     let currentColor: string | undefined;
     let gradientStartColor: string | undefined;
@@ -94,6 +94,13 @@ export class ChannelListComponent {
         currentColor = markerColor;
         gradientStartColor = undefined;
         gradientStartSegmentIndex = undefined;
+      } else if (markerType === '<>') {
+        if (gradientStartColor !== undefined && gradientStartSegmentIndex !== undefined) {
+          this.applyGradient(segments, gradientStartSegmentIndex, gradientStartColor, markerColor);
+        }
+        currentColor = markerColor;
+        gradientStartColor = markerColor;
+        gradientStartSegmentIndex = segments.length;
       } else {
         currentColor = markerColor;
         gradientStartColor = undefined;