diff --git a/web/components/chat/ChatContainer/ChatContainer.module.scss b/web/components/chat/ChatContainer/ChatContainer.module.scss
new file mode 100644
index 000000000..f13fb0024
--- /dev/null
+++ b/web/components/chat/ChatContainer/ChatContainer.module.scss
@@ -0,0 +1,8 @@
+
+.chatHeader {
+  text-align: center;
+  padding: 5px 0;
+  color: var(--text-color-secondary);
+  border-bottom: 1px solid var(--color-owncast-gray-700);
+  font-variant: small-caps;
+}
diff --git a/web/components/chat/ChatContainer.tsx b/web/components/chat/ChatContainer/ChatContainer.tsx
similarity index 74%
rename from web/components/chat/ChatContainer.tsx
rename to web/components/chat/ChatContainer/ChatContainer.tsx
index 030c97125..2a06408c8 100644
--- a/web/components/chat/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer/ChatContainer.tsx
@@ -2,10 +2,11 @@ import { Spin } from 'antd';
 import { Virtuoso } from 'react-virtuoso';
 import { useRef } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
-import { ChatMessage } from '../../interfaces/chat-message.model';
-import { ChatState } from '../../interfaces/application-state';
-import ChatUserMessage from './ChatUserMessage';
-import { MessageType } from '../../interfaces/socket-events';
+import { ChatMessage } from '/interfaces/chat-message.model';
+import { ChatState } from '/interfaces/application-state';
+import ChatUserMessage from '../ChatUserMessage';
+import { MessageType } from '/interfaces/socket-events';
+import s from './ChatContainer.module.scss';
 
 interface Props {
   messages: ChatMessage[];
@@ -30,6 +31,9 @@ export default function ChatContainer(props: Props) {
 
   return (
     <div>
+      <div className={s.chatHeader}>
+        <span>stream chat</span>
+      </div>
       <Spin spinning={loading} indicator={spinIcon} />
       <Virtuoso
         style={{ height: '80vh' }}
diff --git a/web/components/chat/ChatContainer/index.ts b/web/components/chat/ChatContainer/index.ts
new file mode 100644
index 000000000..de0f0f948
--- /dev/null
+++ b/web/components/chat/ChatContainer/index.ts
@@ -0,0 +1 @@
+export { default } from './ChatContainer';
diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss
index 4a1fae93e..11538cb51 100644
--- a/web/components/ui/Content/Content.module.scss
+++ b/web/components/ui/Content/Content.module.scss
@@ -4,6 +4,7 @@
 }
 
 .mobileChat {
+  position: relative;
   display: block;
   top: 0px;
   width: 100%;
diff --git a/web/components/ui/Sidebar/Sidebar.module.scss b/web/components/ui/Sidebar/Sidebar.module.scss
index a2f6719e9..aca48a349 100644
--- a/web/components/ui/Sidebar/Sidebar.module.scss
+++ b/web/components/ui/Sidebar/Sidebar.module.scss
@@ -24,9 +24,3 @@ Only way to target it apparently
   height: 100% !important;
 }
 
-.chatHeader {
-  text-align: center;
-  color: var(--text-color-secondary);
-  border-bottom: 1px solid var(--color-owncast-gray-700);
-  font-variant: small-caps;
-}
diff --git a/web/components/ui/Sidebar/Sidebar.tsx b/web/components/ui/Sidebar/Sidebar.tsx
index 1baabc17f..e00dd4339 100644
--- a/web/components/ui/Sidebar/Sidebar.tsx
+++ b/web/components/ui/Sidebar/Sidebar.tsx
@@ -1,7 +1,7 @@
 import Sider from 'antd/lib/layout/Sider';
 import { useRecoilValue } from 'recoil';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
-import ChatContainer from '../../chat/ChatContainer';
+import ChatContainer from '/components/chat/ChatContainer';
 import s from './Sidebar.module.scss';
 import {
   chatMessagesAtom,
@@ -23,9 +23,6 @@ export default function Sidebar() {
       collapsedWidth={0}
       width={320}
     >
-      <div className={s.chatHeader}>
-        <span>stream chat</span>
-      </div>
       <ChatContainer messages={messages} state={chatState} />
       <ChatTextField />
     </Sider>