diff --git a/src/Viewer.tsx b/src/Viewer.tsx
index 11b9b50..7682bc3 100644
--- a/src/Viewer.tsx
+++ b/src/Viewer.tsx
@@ -16,7 +16,11 @@ export default function Viewer({
 }) {
   return (
     <div className="viewer">
-      {showChannelName ? <h3>{channel?.properties.name}</h3> : null}
+      {showChannelName ? (
+        <div className="channelNameContainer">
+          <h3>{channel?.properties.name}</h3>
+        </div>
+      ) : null}
       {clients?.map((client, i) => {
         //* Client limit
         if (clientLimit != 0 && i >= clientLimit) {
diff --git a/src/styles/Viewer.scss b/src/styles/Viewer.scss
index dc4ad81..951bf25 100644
--- a/src/styles/Viewer.scss
+++ b/src/styles/Viewer.scss
@@ -4,10 +4,19 @@
   gap: 0 0;
   padding: 1rem;
 
-  h3 {
-    font-size: 1.5rem;
-    font-weight: 500;
-    margin: 0;
+  .channelNameContainer {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    h3 {
+      font-size: 1.7rem;
+      font-weight: 500;
+      margin: 0;
+      background-color: rgba(47, 49, 54, 0.5);
+      padding: 0.25rem 0.5rem;
+      border-radius: 0.25rem;
+      color: white;
+    }
   }
 
   .client {