diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss
index 53d2aa10e..74f49de15 100644
--- a/web/components/ui/Header/Header.module.scss
+++ b/web/components/ui/Header/Header.module.scss
@@ -64,3 +64,8 @@
   width: auto;
   height: auto;
 }
+
+.offlineTag {
+  cursor: default;
+  color: var(--theme-color-components-text-on-light);
+}
diff --git a/web/components/ui/Header/Header.tsx b/web/components/ui/Header/Header.tsx
index 718a36bb9..3d3d3faa4 100644
--- a/web/components/ui/Header/Header.tsx
+++ b/web/components/ui/Header/Header.tsx
@@ -55,7 +55,7 @@ export const Header: FC<HeaderComponentProps> = ({
     {chatAvailable && !chatDisabled && <UserDropdown />}
     {!chatAvailable && !chatDisabled && (
       <Tooltip title="Chat is available when the stream is live." placement="left">
-        <Tag style={{ cursor: 'pointer' }}>Chat offline</Tag>
+        <Tag className={styles.offlineTag}>Chat offline</Tag>
       </Tooltip>
     )}
   </header>