diff --git a/web/components/UserDropdownMenu.tsx b/web/components/UserDropdownMenu.tsx
index 36e5bc5489..c4b8d8c1c2 100644
--- a/web/components/UserDropdownMenu.tsx
+++ b/web/components/UserDropdownMenu.tsx
@@ -1,5 +1,46 @@
-interface Props {}
+import { Menu, Dropdown } from 'antd';
+import { DownOutlined } from '@ant-design/icons';
+import { useRecoilState } from 'recoil';
+import { ChatVisibilityState, ChatState } from '../interfaces/application-state';
+import { chatVisibility as chatVisibilityAtom } from './stores/ClientConfigStore';
+
+interface Props {
+  username: string;
+  chatState: ChatState;
+}
 
 export default function UserDropdown(props: Props) {
-  return <div>User settings dropdown component goes here</div>;
+  const { username, chatState } = props;
+
+  const chatEnabled = chatState !== ChatState.NotAvailable;
+  const [chatVisibility, setChatVisibility] =
+    useRecoilState<ChatVisibilityState>(chatVisibilityAtom);
+
+  const toggleChatVisibility = () => {
+    if (chatVisibility === ChatVisibilityState.Hidden) {
+      setChatVisibility(ChatVisibilityState.Visible);
+    } else {
+      setChatVisibility(ChatVisibilityState.Hidden);
+    }
+  };
+
+  const menu = (
+    <Menu>
+      <Menu.Item key="0">Change name</Menu.Item>
+      <Menu.Item key="1">Authenticate</Menu.Item>
+      {chatEnabled && (
+        <Menu.Item key="3" onClick={() => toggleChatVisibility()}>
+          Toggle chat
+        </Menu.Item>
+      )}
+    </Menu>
+  );
+
+  return (
+    <Dropdown overlay={menu} trigger={['click']}>
+      <button type="button" className="ant-dropdown-link" onClick={e => e.preventDefault()}>
+        {username} <DownOutlined />
+      </button>
+    </Dropdown>
+  );
 }
diff --git a/web/components/chat/ChatContainer.tsx b/web/components/chat/ChatContainer.tsx
index e6a484d708..77ff5e3fee 100644
--- a/web/components/chat/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer.tsx
@@ -1,9 +1,21 @@
+import { Spin } from 'antd';
 import { ChatMessage } from '../../interfaces/chat-message.model';
+import { ChatState } from '../../interfaces/application-state';
 
 interface Props {
   messages: ChatMessage[];
+  state: ChatState;
 }
 
 export default function ChatContainer(props: Props) {
-  return <div>Chat container goes here</div>;
+  const { messages, state } = props;
+  const loading = state === ChatState.Loading;
+
+  return (
+    <div>
+      <Spin tip="Loading..." spinning={loading}>
+        Chat container with scrolling chat messages go here
+      </Spin>
+    </div>
+  );
 }
diff --git a/web/components/chat/ChatTextField.tsx b/web/components/chat/ChatTextField.tsx
index 00d908bc62..b4cbf31ddd 100644
--- a/web/components/chat/ChatTextField.tsx
+++ b/web/components/chat/ChatTextField.tsx
@@ -1,5 +1,35 @@
+import { useState } from 'react';
+
 interface Props {}
 
 export default function ChatTextField(props: Props) {
-  return <div>Component goes here</div>;
+  const [value, setValue] = useState('');
+  const [showEmojis, setShowEmojis] = useState(false);
+
+  return (
+    <div>
+      <input
+        type="text"
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        placeholder="Type a message here then hit ENTER"
+      />
+      <button type="button" onClick={() => setShowEmojis(!showEmojis)}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          className="icon"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth="2"
+            d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+          />
+        </svg>
+      </button>
+    </div>
+  );
 }
diff --git a/web/components/chat/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage.tsx
index e51053293c..95fa774458 100644
--- a/web/components/chat/ChatUserMessage.tsx
+++ b/web/components/chat/ChatUserMessage.tsx
@@ -2,8 +2,21 @@ import { ChatMessage } from '../../interfaces/chat-message.model';
 
 interface Props {
   message: ChatMessage;
+  showModeratorMenu: boolean;
 }
 
 export default function ChatUserMessage(props: Props) {
-  return <div>Component goes here</div>;
+  const { message, showModeratorMenu } = props;
+  const { body, user, timestamp } = message;
+  const { displayName, displayColor } = user;
+
+  // TODO: Convert displayColor (a hue) to a usable color.
+
+  return (
+    <div>
+      <div>{displayName}</div>
+      <div>{body}</div>
+      {showModeratorMenu && <div>Moderator menu</div>}
+    </div>
+  );
 }
diff --git a/web/components/stores/ClientConfigStore.tsx b/web/components/stores/ClientConfigStore.tsx
index 18fff4fb20..e0ff46b8ec 100644
--- a/web/components/stores/ClientConfigStore.tsx
+++ b/web/components/stores/ClientConfigStore.tsx
@@ -1,9 +1,11 @@
 import { useEffect } from 'react';
-import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { atom, useRecoilState } from 'recoil';
 import { makeEmptyClientConfig, ClientConfig } from '../../interfaces/client-config.model';
 import ClientConfigService from '../../services/client-config-service';
+import ChatService from '../../services/chat-service';
 import { ChatMessage } from '../../interfaces/chat-message.model';
+import { getLocalStorage, setLocalStorage } from '../../utils/helpers';
+import { ChatVisibilityState } from '../../interfaces/application-state';
 
 // The config that comes from the API.
 export const clientConfigState = atom({
@@ -11,14 +13,19 @@ export const clientConfigState = atom({
   default: makeEmptyClientConfig(),
 });
 
-export const chatCurrentlyVisible = atom({
-  key: 'chatvisible',
-  default: false,
+export const chatVisibility = atom<ChatVisibilityState>({
+  key: 'chatVisibility',
+  default: ChatVisibilityState.Hidden,
 });
 
 export const chatDisplayName = atom({
   key: 'chatDisplayName',
-  default: '',
+  default: null,
+});
+
+export const accessTokenAtom = atom({
+  key: 'accessToken',
+  default: null,
 });
 
 export const chatMessages = atom({
@@ -26,8 +33,11 @@ export const chatMessages = atom({
   default: [] as ChatMessage[],
 });
 
-export function ClientConfigStore(): ReactElement {
+export function ClientConfigStore() {
   const [, setClientConfig] = useRecoilState<ClientConfig>(clientConfigState);
+  const [, setChatMessages] = useRecoilState<ChatMessage[]>(chatMessages);
+  const [accessToken, setAccessToken] = useRecoilState<string>(accessTokenAtom);
+  const [, setChatDisplayName] = useRecoilState<string>(chatDisplayName);
 
   const updateClientConfig = async () => {
     try {
@@ -39,9 +49,41 @@ export function ClientConfigStore(): ReactElement {
     }
   };
 
+  const handleUserRegistration = async (optionalDisplayName: string) => {
+    try {
+      const response = await ChatService.registerUser(optionalDisplayName);
+      console.log(`ChatService -> registerUser() response: \n${JSON.stringify(response)}`);
+      const { accessToken: newAccessToken, displayName } = response;
+      if (!newAccessToken) {
+        return;
+      }
+      setAccessToken(accessToken);
+      setLocalStorage('accessToken', newAccessToken);
+      setChatDisplayName(displayName);
+    } catch (e) {
+      console.error(`ChatService -> registerUser() ERROR: \n${e}`);
+    }
+  };
+
+  // TODO: Requires access token.
+  const getChatHistory = async () => {
+    try {
+      const messages = await ChatService.getChatHistory(accessToken);
+      console.log(`ChatService -> getChatHistory() messages: \n${JSON.stringify(messages)}`);
+      setChatMessages(messages);
+    } catch (error) {
+      console.error(`ChatService -> getChatHistory() ERROR: \n${error}`);
+    }
+  };
+
   useEffect(() => {
     updateClientConfig();
+    handleUserRegistration();
   }, []);
 
+  useEffect(() => {
+    getChatHistory();
+  }, [accessToken]);
+
   return null;
 }
diff --git a/web/components/stores/ServerStatusStore.tsx b/web/components/stores/ServerStatusStore.tsx
index 9db5674230..93cf493f8a 100644
--- a/web/components/stores/ServerStatusStore.tsx
+++ b/web/components/stores/ServerStatusStore.tsx
@@ -1,5 +1,4 @@
 import { useEffect } from 'react';
-import { ReactElement } from 'react-markdown/lib/react-markdown';
 import { atom, useRecoilState } from 'recoil';
 import { ServerStatus, makeEmptyServerStatus } from '../../interfaces/server-status.model';
 import ServerStatusService from '../../services/status-service';
@@ -9,7 +8,7 @@ export const serverStatusState = atom({
   default: makeEmptyServerStatus(),
 });
 
-export function ServerStatusStore(): ReactElement {
+export function ServerStatusStore() {
   const [, setServerStatus] = useRecoilState<ServerStatus>(serverStatusState);
 
   const updateServerStatus = async () => {
diff --git a/web/components/ui/Sidebar/Sidebar.tsx b/web/components/ui/Sidebar/Sidebar.tsx
index 2071b6913d..1f5b5256dd 100644
--- a/web/components/ui/Sidebar/Sidebar.tsx
+++ b/web/components/ui/Sidebar/Sidebar.tsx
@@ -2,14 +2,16 @@ import Sider from 'antd/lib/layout/Sider';
 import { useRecoilValue } from 'recoil';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import ChatContainer from '../../chat/ChatContainer';
-import { chatMessages } from '../../stores/ClientConfigStore';
+import { chatMessages, chatVisibility as chatVisibilityAtom } from '../../stores/ClientConfigStore';
+import { ChatVisibilityState } from '../../../interfaces/application-state';
 
 export default function Sidebar() {
   const messages = useRecoilValue<ChatMessage[]>(chatMessages);
+  const chatVisibility = useRecoilValue<ChatVisibilityState>(chatVisibilityAtom);
 
   return (
     <Sider
-      collapsed={false}
+      collapsed={chatVisibility === ChatVisibilityState.Hidden}
       width={300}
       style={{
         position: 'fixed',
diff --git a/web/interfaces/application-state.ts b/web/interfaces/application-state.ts
new file mode 100644
index 0000000000..da6c78532f
--- /dev/null
+++ b/web/interfaces/application-state.ts
@@ -0,0 +1,17 @@
+export enum AppState {
+  AppLoading,
+  ChatLoading,
+  Loading,
+}
+
+export enum ChatVisibilityState {
+  Hidden, // The chat is available but the user has hidden it
+  Visible, // The chat is available and visible
+}
+
+export enum ChatState {
+  Available, // Normal state
+  NotAvailable, // Chat features are not available
+  Loading, // Chat is connecting and loading history
+  Offline, // Chat is offline/disconnected for some reason
+}
diff --git a/web/interfaces/chat-message.model.ts b/web/interfaces/chat-message.model.ts
index fda7886473..0fe07e4272 100644
--- a/web/interfaces/chat-message.model.ts
+++ b/web/interfaces/chat-message.model.ts
@@ -1 +1,9 @@
-export interface ChatMessage {}
+import { User } from './user';
+
+export interface ChatMessage {
+  id: string;
+  type: string;
+  timestamp: Date;
+  user: User;
+  body: string;
+}
diff --git a/web/interfaces/user.ts b/web/interfaces/user.ts
new file mode 100644
index 0000000000..f1d65e4b6c
--- /dev/null
+++ b/web/interfaces/user.ts
@@ -0,0 +1,9 @@
+export interface User {
+  id: string;
+  displayName: string;
+  displayColor: number;
+  createdAt: Date;
+  previousNames: string[];
+  nameChangedAt: Date;
+  scopes: string[];
+}
diff --git a/web/services/user-service.ts b/web/services/chat-service.ts
similarity index 54%
rename from web/services/user-service.ts
rename to web/services/chat-service.ts
index 78c890599d..8ba62909be 100644
--- a/web/services/user-service.ts
+++ b/web/services/chat-service.ts
@@ -1,3 +1,5 @@
+import { ChatMessage } from '../interfaces/chat-message.model';
+const ENDPOINT = `http://localhost:8080/api/chat`;
 const URL_CHAT_REGISTRATION = `http://localhost:8080/api/chat/register`;
 
 interface UserRegistrationResponse {
@@ -6,8 +8,14 @@ interface UserRegistrationResponse {
   displayName: string;
 }
 
-class UserService {
-  registerUser(username: string): Promise<UserRegistrationResponse> {
+class ChatService {
+  public static async getChatHistory(accessToken: string): Promise<ChatMessage[]> {
+    const response = await fetch(`${ENDPOINT}?accessToken=${accessToken}`);
+    const status = await response.json();
+    return status;
+  }
+
+  public static async registerUser(username: string): Promise<UserRegistrationResponse> {
     const options = {
       method: 'POST',
       headers: {
@@ -27,3 +35,5 @@ class UserService {
     return null;
   }
 }
+
+export default ChatService;
diff --git a/web/stories/ChatContainer.stories.tsx b/web/stories/ChatContainer.stories.tsx
index d08a964216..5a4eddc8b3 100644
--- a/web/stories/ChatContainer.stories.tsx
+++ b/web/stories/ChatContainer.stories.tsx
@@ -1,12 +1,8 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import ChatContainer from '../components/chat/ChatContainer';
-
-const Example = () => (
-  <div>
-    <ChatContainer />
-  </div>
-);
+import { ChatMessage } from '../interfaces/chat-message.model';
+import { ChatState } from '../interfaces/application-state';
 
 export default {
   title: 'owncast/Chat/Chat messages container',
@@ -14,8 +10,25 @@ export default {
   parameters: {},
 } as ComponentMeta<typeof ChatContainer>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ChatContainer> = args => <Example />;
+const Template: ComponentStory<typeof ChatContainer> = args => <ChatContainer {...args} />;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
+const testMessages =
+  '[{"type":"CHAT","id":"wY-MEXwnR","timestamp":"2022-04-28T20:30:27.001762726Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"3"},{"type":"CHAT","id":"VhLGEXwnR","timestamp":"2022-04-28T20:30:28.806999545Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Hit 3"},{"type":"CHAT","id":"GguMEuw7R","timestamp":"2022-04-28T20:30:34.500150601Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Jkjk"},{"type":"CHAT","id":"y_-VEXwnR","timestamp":"2022-04-28T20:31:32.695583044Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;m doing alright. How about you Hatnix?"},{"type":"CHAT","id":"qAaKEuwng","timestamp":"2022-04-28T20:34:16.22275314Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Oh shiet I didn\u0026#39;t think you would kill him"},{"type":"CHAT","id":"8wUFEuwnR","timestamp":"2022-04-28T20:34:21.624898714Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Hahaha, ruthless"},{"type":"CHAT","id":"onYcPuQnR","timestamp":"2022-04-28T20:34:50.671024312Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;ve never played it before"},{"type":"CHAT","id":"kORyEXQ7R","timestamp":"2022-04-28T20:40:29.761977233Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"brb real quick"},{"type":"CHAT","id":"F3DvsuQ7g","timestamp":"2022-04-28T20:50:29.451341783Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"I\u0026#39;m back"},{"type":"CHAT","id":"AH2vsXwnR","timestamp":"2022-04-28T20:50:33.872156152Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Whoa what happened here?"},{"type":"CHAT","id":"xGkOsuw7R","timestamp":"2022-04-28T20:50:53.202147658Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Your dwarf was half naked."},{"type":"CHAT","id":"opIdsuw7g","timestamp":"2022-04-28T20:50:59.631595947Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"lol"},{"type":"CHAT","id":"JpwdsuQnR","timestamp":"2022-04-28T20:51:18.065535459Z","user":{"id":"vbh9gtPng","displayName":"𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","𝒽𝒶𝓅𝓅𝓎 𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","𝓈𝓉𝒶𝒶𝓇𝒻𝒶𝒶𝓇𝑒𝑒𝓇™","𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"evening did i just see you running around in... nothing"},{"type":"CHAT","id":"R4WKsXw7R","timestamp":"2022-04-28T20:51:28.064914803Z","user":{"id":"vbh9gtPng","displayName":"𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","𝒽𝒶𝓅𝓅𝓎 𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","𝓈𝓉𝒶𝒶𝓇𝒻𝒶𝒶𝓇𝑒𝑒𝓇™","𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"^^"},{"type":"CHAT","id":"g-PKyXw7g","timestamp":"2022-04-28T20:51:47.936500772Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"Lol Starfarer, so my eyes didnt deceive me."},{"type":"CHAT","id":"fV8Ksuw7R","timestamp":"2022-04-28T20:51:49.588744112Z","user":{"id":"h_5GQ6E7R","displayName":"EliteMooseTaskForce","displayColor":329,"createdAt":"2022-03-24T03:52:37.966584694Z","previousNames":["gifted-nobel","EliteMooseTaskForce"],"nameChangedAt":"2022-04-26T23:56:05.531287897Z","scopes":[""]},"body":"hahahaha"},{"type":"CHAT","id":"TaStyuwnR","timestamp":"2022-04-28T20:52:38.127528579Z","user":{"id":"vbh9gtPng","displayName":"𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","𝒽𝒶𝓅𝓅𝓎 𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","𝓈𝓉𝒶𝒶𝓇𝒻𝒶𝒶𝓇𝑒𝑒𝓇™","𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"lol sounds nice"},{"type":"CHAT","id":"JGposuwng","timestamp":"2022-04-28T20:53:49.329567087Z","user":{"id":"GCa3J9P7R","displayName":"(ghost of)^10  * toudy49","displayColor":147,"createdAt":"2022-03-22T21:49:25.284237821Z","previousNames":["lucid-pike","toudy49","ghost of toudy49","ghost of ghost of toudy49","ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of ghost of toudy49","ghost ofghost of ghost of ghost of ghost of ghost of toudy49","ghostof ghost of ghost of ghost of ghost of ghost of toudy49","(ghost of)^6  * toudy49","(ghost of)^7  * toudy49","(ghost of)^8  * toudy49","(ghost of)^9  * toudy49","(ghost of)^10  * toudy49"],"nameChangedAt":"2022-04-11T21:01:19.938445828Z","scopes":[""]},"body":"!hydrate"},{"type":"CHAT","id":"T4tTsuwng","timestamp":"2022-04-28T20:53:49.391636551Z","user":{"id":"fKINHKpnR","displayName":"hatnixbot","displayColor":325,"createdAt":"2021-11-24T08:11:32Z","previousNames":["hatnixbot"],"scopes":["CAN_SEND_SYSTEM_MESSAGES","CAN_SEND_MESSAGES","HAS_ADMIN_ACCESS"]},"body":"test 123"},{"type":"CHAT","id":"wUJTsuw7R","timestamp":"2022-04-28T20:53:54.073218761Z","user":{"id":"GCa3J9P7R","displayName":"(ghost of)^10  * toudy49","displayColor":147,"createdAt":"2022-03-22T21:49:25.284237821Z","previousNames":["lucid-pike","toudy49","ghost of toudy49","ghost of ghost of toudy49","ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of toudy49","ghost of ghost of ghost of ghost of ghost of toudy49","ghost ofghost of ghost of ghost of ghost of ghost of toudy49","ghostof ghost of ghost of ghost of ghost of ghost of toudy49","(ghost of)^6  * toudy49","(ghost of)^7  * toudy49","(ghost of)^8  * toudy49","(ghost of)^9  * toudy49","(ghost of)^10  * toudy49"],"nameChangedAt":"2022-04-11T21:01:19.938445828Z","scopes":[""]},"body":"!stretch"},{"type":"CHAT","id":"S_Joyuw7R","timestamp":"2022-04-28T20:53:54.119778013Z","user":{"id":"fKINHKpnR","displayName":"hatnixbot","displayColor":325,"createdAt":"2021-11-24T08:11:32Z","previousNames":["hatnixbot"],"scopes":["CAN_SEND_SYSTEM_MESSAGES","CAN_SEND_MESSAGES","HAS_ADMIN_ACCESS"]},"body":"blah blah"},{"type":"CHAT","id":"MtYTyXwnR","timestamp":"2022-04-28T20:53:57.796985761Z","user":{"id":"vbh9gtPng","displayName":"𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","displayColor":276,"createdAt":"2022-03-16T21:02:32.009965702Z","previousNames":["goth-volhard","𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","𝒽𝒶𝓅𝓅𝓎 𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™","𝓈𝓉𝒶𝒶𝓇𝒻𝒶𝒶𝓇𝑒𝑒𝓇™","𝓈𝓉𝒶𝓇𝒻𝒶𝓇𝑒𝓇™"],"nameChangedAt":"2022-04-14T21:51:50.97992512Z","scopes":[""]},"body":"heyy toudy"}]';
+const messages: ChatMessage[] = JSON.parse(testMessages);
+
+export const Example = Template.bind({});
+Example.args = {
+  state: ChatState.Available,
+  messages,
+};
+
+export const SingleMessage = Template.bind({});
+SingleMessage.args = {
+  state: ChatState.Available,
+  messages: [messages[0]],
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  state: ChatState.Loading,
+};
diff --git a/web/stories/ChatTextField.stories.tsx b/web/stories/ChatTextField.stories.tsx
index ba1a4fd211..a70bb660b3 100644
--- a/web/stories/ChatTextField.stories.tsx
+++ b/web/stories/ChatTextField.stories.tsx
@@ -2,12 +2,6 @@ import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import ChatTextField from '../components/chat/ChatTextField';
 
-const Example = () => (
-  <div>
-    <ChatTextField />
-  </div>
-);
-
 export default {
   title: 'owncast/Chat/Input text field',
   component: ChatTextField,
@@ -15,7 +9,7 @@ export default {
 } as ComponentMeta<typeof ChatTextField>;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ChatTextField> = args => <Example />;
+const Template: ComponentStory<typeof ChatTextField> = args => <ChatTextField />;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
+export const Example = Template.bind({});
diff --git a/web/stories/ChatUserMessage.stories.tsx b/web/stories/ChatUserMessage.stories.tsx
index 02a7ee2023..b3b503d691 100644
--- a/web/stories/ChatUserMessage.stories.tsx
+++ b/web/stories/ChatUserMessage.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import UserChatMessage from '../components/chat/ChatUserMessage';
+import { ChatMessage } from '../interfaces/chat-message.model';
 
 export default {
   title: 'owncast/Chat/Messages/Standard user',
@@ -8,8 +9,74 @@ export default {
   parameters: {},
 } as ComponentMeta<typeof UserChatMessage>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof UserChatMessage> = args => <UserChatMessage />;
+const Template: ComponentStory<typeof UserChatMessage> = args => <UserChatMessage {...args} />;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
+const standardMessage: ChatMessage = JSON.parse(`{
+  "type": "CHAT",
+  "id": "wY-MEXwnR",
+  "timestamp": "2022-04-28T20:30:27.001762726Z",
+  "user": {
+    "id": "h_5GQ6E7R",
+    "displayName": "EliteMooseTaskForce",
+    "displayColor": 329,
+    "createdAt": "2022-03-24T03:52:37.966584694Z",
+    "previousNames": ["gifted-nobel", "EliteMooseTaskForce"],
+    "nameChangedAt": "2022-04-26T23:56:05.531287897Z",
+    "scopes": []
+  },
+  "body": "Test message from a regular user."}`);
+
+const moderatorMessage: ChatMessage = JSON.parse(`{
+    "type": "CHAT",
+    "id": "wY-MEXwnR",
+    "timestamp": "2022-04-28T20:30:27.001762726Z",
+    "user": {
+      "id": "h_5GQ6E7R",
+      "displayName": "EliteMooseTaskForce",
+      "displayColor": 329,
+      "createdAt": "2022-03-24T03:52:37.966584694Z",
+      "previousNames": ["gifted-nobel", "EliteMooseTaskForce"],
+      "nameChangedAt": "2022-04-26T23:56:05.531287897Z",
+      "scopes": ["moderator"]
+    },
+    "body": "I am a moderator user."}`);
+
+const authenticatedUserMessage: ChatMessage = JSON.parse(`{
+      "type": "CHAT",
+      "id": "wY-MEXwnR",
+      "timestamp": "2022-04-28T20:30:27.001762726Z",
+      "user": {
+        "id": "h_5GQ6E7R",
+        "displayName": "EliteMooseTaskForce",
+        "displayColor": 329,
+        "createdAt": "2022-03-24T03:52:37.966584694Z",
+        "previousNames": ["gifted-nobel", "EliteMooseTaskForce"],
+        "nameChangedAt": "2022-04-26T23:56:05.531287897Z",
+        "authenticated": true,
+        "scopes": []
+      },
+      "body": "I am an authenticated user."}`);
+
+export const WithoutModeratorMenu = Template.bind({});
+WithoutModeratorMenu.args = {
+  message: standardMessage,
+  showModeratorMenu: false,
+};
+
+export const WithModeratorMenu = Template.bind({});
+WithModeratorMenu.args = {
+  message: standardMessage,
+  showModeratorMenu: true,
+};
+
+export const FromModeratorUser = Template.bind({});
+FromModeratorUser.args = {
+  message: moderatorMessage,
+  showModeratorMenu: false,
+};
+
+export const FromAuthenticatedUser = Template.bind({});
+FromAuthenticatedUser.args = {
+  message: authenticatedUserMessage,
+  showModeratorMenu: false,
+};
diff --git a/web/stories/Dropdown.stories.tsx b/web/stories/Dropdown.stories.tsx
deleted file mode 100644
index dd0faa70eb..0000000000
--- a/web/stories/Dropdown.stories.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import { Menu, Dropdown } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-const menu = (
-  <Menu>
-    <Menu.Item key="0">
-      <a href="https://owncast.online">1st menu item</a>
-    </Menu.Item>
-    <Menu.Item key="1">
-      <a href="https://directory.owncast.online">2nd menu item</a>
-    </Menu.Item>
-    <Menu.Divider />
-    <Menu.Item key="3">3rd menu item</Menu.Item>
-  </Menu>
-);
-
-const DropdownExample = () => (
-  <Dropdown overlay={menu} trigger={['click']}>
-    <button type="button" className="ant-dropdown-link" onClick={e => e.preventDefault()}>
-      Click me <DownOutlined />
-    </button>
-  </Dropdown>
-);
-
-export default {
-  title: 'example/Dropdown',
-  component: Dropdown,
-  parameters: {},
-} as ComponentMeta<typeof Dropdown>;
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof Dropdown> = args => <DropdownExample />;
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Basic = Template.bind({});
diff --git a/web/stories/Followercollection.stories.tsx b/web/stories/Followercollection.stories.tsx
index f1ea227cdc..292dbd3da7 100644
--- a/web/stories/Followercollection.stories.tsx
+++ b/web/stories/Followercollection.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import FollowerCollection from '../components/FollowersCollection';
 
 export default {
-  title: 'owncast/Follower collection',
+  title: 'owncast/Followers collection',
   component: FollowerCollection,
   parameters: {},
 } as ComponentMeta<typeof FollowerCollection>;
@@ -16,46 +16,215 @@ export const Example = Template.bind({});
 Example.args = {
   followers: [
     {
-      name: 'John Doe',
-      description: 'User',
-      username: '@account@domain.tld',
-      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
-      link: 'https://yahoo.com',
+      link: 'https://sun.minuscule.space/users/mardijker',
+      name: 'mardijker',
+      username: 'mardijker@sun.minuscule.space',
+      image:
+        'https://sun.minuscule.space/media/336af7ae5a2bcb508308eddb30b661ee2b2e15004a50795ee3ba0653ab190a93.jpg',
+      timestamp: '2022-04-27T12:12:50Z',
+      disabledAt: null,
     },
     {
-      name: 'John Doe',
-      description: 'User',
-      username: '@account@domain.tld',
-      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
-      link: 'https://yahoo.com',
+      link: 'https://mastodon.online/users/Kallegro',
+      name: '',
+      username: 'Kallegro@mastodon.online',
+      image: '',
+      timestamp: '2022-04-26T15:24:09Z',
+      disabledAt: null,
     },
     {
-      name: 'John Doe',
-      description: 'User',
-      username: '@account@domain.tld',
-      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
-      link: 'https://yahoo.com',
+      link: 'https://mastodon.online/users/kerfuffle',
+      name: 'Kerfuffle',
+      username: 'kerfuffle@mastodon.online',
+      image:
+        'https://files.mastodon.online/accounts/avatars/000/133/698/original/6aa73caa898b2d36.gif',
+      timestamp: '2022-04-25T21:32:41Z',
+      disabledAt: null,
     },
     {
-      name: 'John Doe',
-      description: 'User',
-      username: '@account@domain.tld',
-      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
-      link: 'https://yahoo.com',
+      link: 'https://mastodon.uno/users/informapirata',
+      name: 'informapirata :privacypride:',
+      username: 'informapirata@mastodon.uno',
+      image:
+        'https://cdn.masto.host/mastodonuno/accounts/avatars/000/060/227/original/da4c44c716a339b8.png',
+      timestamp: '2022-04-25T11:38:23Z',
+      disabledAt: null,
     },
     {
-      name: 'John Doe',
-      description: 'User',
-      username: '@account@domain.tld',
-      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
-      link: 'https://yahoo.com',
+      link: 'https://gamethattune.club/users/Raeanus',
+      name: 'Raeanus',
+      username: 'Raeanus@gamethattune.club',
+      image:
+        'https://gamethattune.club/media/a6e6ccea-34f8-4c2e-b9dc-ad8cca7fafd3/DD14E3BF-1358-4961-A900-42F3495F6BE2.jpeg',
+      timestamp: '2022-04-23T00:46:56Z',
+      disabledAt: null,
     },
     {
-      name: 'John Doe',
-      description: 'User',
-      username: '@account@domain.tld',
-      image: 'https://avatars0.githubusercontent.com/u/1234?s=460&v=4',
-      link: 'https://yahoo.com',
+      link: 'https://mastodon.ml/users/latte',
+      name: 'Даниил',
+      username: 'latte@mastodon.ml',
+      image:
+        'https://mastodon.ml/system/accounts/avatars/107/837/409/059/601/386/original/c45ec2676489e363.png',
+      timestamp: '2022-04-19T13:06:09Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://wienermobile.rentals/users/jprjr',
+      name: 'Johnny',
+      username: 'jprjr@wienermobile.rentals',
+      image: '',
+      timestamp: '2022-04-14T14:48:11Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/johnny',
+      name: 'John Regan',
+      username: 'johnny@gamethattune.club',
+      image:
+        'https://gamethattune.club/media/3c10cd89-866b-4604-ae40-39387fe17061/profile_large.jpg',
+      timestamp: '2022-04-14T14:42:48Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://mastodon.social/users/MightyOwlbear',
+      name: 'Haunted Owlbear',
+      username: 'MightyOwlbear@mastodon.social',
+      image:
+        'https://files.mastodon.social/accounts/avatars/107/246/961/007/605/352/original/a86fc3db97a6de04.jpg',
+      timestamp: '2022-04-14T13:33:03Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/thelinkfloyd',
+      name: 'thelinkfloyd',
+      username: 'thelinkfloyd@gamethattune.club',
+      image: '',
+      timestamp: '2022-04-05T12:23:32Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/TheBaffler',
+      name: 'TheBaffler',
+      username: 'TheBaffler@gamethattune.club',
+      image: '',
+      timestamp: '2022-04-04T19:50:08Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/Gttjessie',
+      name: 'Gttjessie',
+      username: 'Gttjessie@gamethattune.club',
+      image: '',
+      timestamp: '2022-03-30T20:18:47Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://cybre.space/users/fractal',
+      name: 'Le fractal',
+      username: 'fractal@cybre.space',
+      image:
+        'https://cybre.ams3.digitaloceanspaces.com/accounts/avatars/000/405/126/original/f1f2832a7bf1a967.png',
+      timestamp: '2022-03-30T19:46:17Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://fosstodon.org/users/jumboshrimp',
+      name: 'alex 👑🦐',
+      username: 'jumboshrimp@fosstodon.org',
+      image: 'https://cdn.fosstodon.org/accounts/avatars/000/320/316/original/de43cda8653ade7f.jpg',
+      timestamp: '2022-03-30T18:09:54Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/nvrslep303',
+      name: 'Tay',
+      username: 'nvrslep303@gamethattune.club',
+      image: 'https://gamethattune.club/media/5cf9bc27-8821-445a-86ce-8aa3704acf2d/pfp.jpg',
+      timestamp: '2022-03-30T15:27:49Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/anKerrigan',
+      name: 'anKerrigan',
+      username: 'anKerrigan@gamethattune.club',
+      image: '',
+      timestamp: '2022-03-30T14:47:04Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/jgangsta187',
+      name: 'jgangsta187',
+      username: 'jgangsta187@gamethattune.club',
+      image: '',
+      timestamp: '2022-03-30T14:42:52Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/aekre',
+      name: 'aekre',
+      username: 'aekre@gamethattune.club',
+      image: '',
+      timestamp: '2022-03-30T14:41:32Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://gamethattune.club/users/mork',
+      name: 'mork',
+      username: 'mork@gamethattune.club',
+      image: '',
+      timestamp: '2022-03-30T14:37:10Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://fosstodon.org/users/owncast',
+      name: 'Owncast',
+      username: 'owncast@fosstodon.org',
+      image:
+        'https://cdn.fosstodon.org/accounts/avatars/107/017/218/425/829/465/original/f98ba4cd61f483ab.png',
+      timestamp: '2022-03-29T21:38:02Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://cybre.space/users/wklew',
+      name: 'wally',
+      username: 'wklew@cybre.space',
+      image:
+        'https://cybre.ams3.digitaloceanspaces.com/accounts/avatars/000/308/727/original/7453e74f3e09b27b.jpg',
+      timestamp: '2022-03-29T18:24:29Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://mastodon.social/users/nvrslep303',
+      name: 'Tay',
+      username: 'nvrslep303@mastodon.social',
+      image:
+        'https://files.mastodon.social/accounts/avatars/108/041/196/166/285/851/original/fc444dd6096381af.jpg',
+      timestamp: '2022-03-29T18:19:31Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://mastodon.social/users/morky',
+      name: '',
+      username: 'morky@mastodon.social',
+      image: '',
+      timestamp: '2022-03-29T18:17:59Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://mastodon.social/users/jgangsta187',
+      name: 'John H.',
+      username: 'jgangsta187@mastodon.social',
+      image: '',
+      timestamp: '2022-03-29T18:15:48Z',
+      disabledAt: null,
+    },
+    {
+      link: 'https://fosstodon.org/users/meisam',
+      name: 'Meisam 🇪🇺:archlinux:',
+      username: 'meisam@fosstodon.org',
+      image: 'https://cdn.fosstodon.org/accounts/avatars/000/264/096/original/54b4e6db97206bda.jpg',
+      timestamp: '2022-03-29T18:12:21Z',
+      disabledAt: null,
     },
   ],
 };
diff --git a/web/stories/UserDropdownMenu.stories.tsx b/web/stories/UserDropdownMenu.stories.tsx
index 06fd4b5bcd..e4a0bc4c51 100644
--- a/web/stories/UserDropdownMenu.stories.tsx
+++ b/web/stories/UserDropdownMenu.stories.tsx
@@ -1,15 +1,32 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
 import UserDropdownMenu from '../components/UserDropdownMenu';
+import { ChatState } from '../interfaces/application-state';
 
 export default {
-  title: 'owncast/User settings dropdown menu',
+  title: 'owncast/User settings menu',
   component: UserDropdownMenu,
   parameters: {},
 } as ComponentMeta<typeof UserDropdownMenu>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof UserDropdownMenu> = args => <UserDropdownMenu />;
+// This component uses Recoil internally so wrap it in a RecoilRoot.
+const Example = args => (
+  <RecoilRoot>
+    <UserDropdownMenu {...args} />
+  </RecoilRoot>
+);
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export const Example = Template.bind({});
+const Template: ComponentStory<typeof UserDropdownMenu> = args => <Example {...args} />;
+
+export const ChatEnabled = Template.bind({});
+ChatEnabled.args = {
+  username: 'test-user',
+  chatState: ChatState.Available,
+};
+
+export const ChatDisabled = Template.bind({});
+ChatDisabled.args = {
+  username: 'test-user',
+  chatState: ChatState.NotAvailable,
+};
diff --git a/web/utils/constants.js b/web/utils/constants.js
index 6e5d878653..2bfc8eb50b 100644
--- a/web/utils/constants.js
+++ b/web/utils/constants.js
@@ -12,9 +12,9 @@ export const URL_BAN_USER = `/api/chat/users/setenabled`;
 
 // TODO: This directory is customizable in the config.  So we should expose this via the config API.
 export const URL_STREAM = `/hls/stream.m3u8`;
-export const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${
-  location.host
-}/ws`;
+// export const URL_WEBSOCKET = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${
+//   location.host
+// }/ws`;
 export const URL_CHAT_REGISTRATION = `/api/chat/register`;
 export const URL_FOLLOWERS = `/api/followers`;
 export const URL_PLAYBACK_METRICS = `/api/metrics/playback`;