diff --git a/.github/workflows/javascript-formatting.yml b/.github/workflows/javascript-formatting.yml
index 272d2b34e..c15e2ce5f 100644
--- a/.github/workflows/javascript-formatting.yml
+++ b/.github/workflows/javascript-formatting.yml
@@ -23,7 +23,7 @@ jobs:
       uses: creyD/prettier_action@v4.2
       with:
         # This part is also where you can pass other options, for example:
-        prettier_options: --write webroot/**/*.{js,md}
+        prettier_options: --write web/**/*.{js,ts,jsx,tsx,css,md}
         working_directory: web
         only_changed: true
       env:
diff --git a/web/.eslintrc.js b/web/.eslintrc.js
index 18ecdce20..65db95de3 100644
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@@ -40,6 +40,7 @@ module.exports = {
     '@typescript-eslint/no-use-before-define': [1],
     'no-shadow': 'off',
     '@typescript-eslint/no-shadow': ['error'],
+    'no-restricted-exports': 'off',
     'react/jsx-no-target-blank': [
       1,
       {
diff --git a/web/.prettierrc b/web/.prettierrc
index a917a6dd8..040711442 100644
--- a/web/.prettierrc
+++ b/web/.prettierrc
@@ -5,4 +5,4 @@
   "singleQuote": true,
   "trailingComma": "all",
   "arrowParens": "avoid"
-}
\ No newline at end of file
+}
diff --git a/web/.vscode/settings.json b/web/.vscode/settings.json
index 97824caab..02233c300 100644
--- a/web/.vscode/settings.json
+++ b/web/.vscode/settings.json
@@ -1,13 +1,13 @@
 {
-    "cSpell.words": [
-        "Owncast",
-        "antd",
-        "bitrates",
-        "chartkick",
-        "framerates",
-        "kbps",
-        "linkify",
-        "paypal",
-        "toggleswitch"
-    ]
-}
\ No newline at end of file
+  "cSpell.words": [
+    "Owncast",
+    "antd",
+    "bitrates",
+    "chartkick",
+    "framerates",
+    "kbps",
+    "linkify",
+    "paypal",
+    "toggleswitch"
+  ]
+}
diff --git a/web/README.md b/web/README.md
index debfe7fa4..339f9f7f9 100644
--- a/web/README.md
+++ b/web/README.md
@@ -8,21 +8,21 @@ The Owncast web frontend is a [Next.js](https://nextjs.org/) project with [React
 
 **First**, install the dependencies.
 
-```npm install --include=dev```
+`npm install --include=dev`
 
 ### Run the web project
 
 Make sure you're running an instance of Owncast on localhost:8080, as your copy of the admin will look to use that as the API.
 
 **Next**, start the web project with npm.
-  
-  ```npm run dev```
+
+`npm run dev`
 
 ### Components and Styles
 
 You can start the [Storybook](https://storybook.js.org/) UI for exploring, testing, and developing components by running:
 
-```npm run storybook```
+`npm run storybook`
 
 This allows for components to be made available without the need of the server to be running and changes to be made in
 isolation.
@@ -63,4 +63,4 @@ We are currently experimenting with using [Storybook](https://storybook.js.org/)
 
 To work with Storybook:
 
-```npm run storybook```
\ No newline at end of file
+`npm run storybook`
diff --git a/web/components/CustomPageContent.tsx b/web/components/CustomPageContent.tsx
index dae759bb2..147e9c2ad 100644
--- a/web/components/CustomPageContent.tsx
+++ b/web/components/CustomPageContent.tsx
@@ -4,5 +4,6 @@ interface Props {
 
 export default function CustomPageContent(props: Props) {
   const { content } = props;
+  // eslint-disable-next-line react/no-danger
   return <div dangerouslySetInnerHTML={{ __html: content }} />;
 }
diff --git a/web/components/PageLogo.tsx b/web/components/PageLogo.tsx
index 9e9c4cabe..4535a579b 100644
--- a/web/components/PageLogo.tsx
+++ b/web/components/PageLogo.tsx
@@ -1,7 +1,3 @@
-interface Props {
-  url: string;
-}
-
-export default function PageLogo(props: Props) {
+export default function PageLogo() {
   return <div>Pimary logo component goes here</div>;
 }
diff --git a/web/components/SocialLinks.tsx b/web/components/SocialLinks.tsx
index 7da70e602..83320859c 100644
--- a/web/components/SocialLinks.tsx
+++ b/web/components/SocialLinks.tsx
@@ -1,9 +1,11 @@
 import { SocialLink } from '../interfaces/social-link.model';
 
 interface Props {
+  // eslint-disable-next-line react/no-unused-prop-types
   links: SocialLink[];
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default function SocialLinks(props: Props) {
   return <div>Social links component goes here</div>;
 }
diff --git a/web/components/action-buttons/ActionButton.module.scss b/web/components/action-buttons/ActionButton.module.scss
index f498d8750..c3e3df623 100644
--- a/web/components/action-buttons/ActionButton.module.scss
+++ b/web/components/action-buttons/ActionButton.module.scss
@@ -4,4 +4,4 @@
     width: 20px;
     margin-right: 3px;
   }
-}
\ No newline at end of file
+}
diff --git a/web/components/action-buttons/ActionButton.tsx b/web/components/action-buttons/ActionButton.tsx
index 41002519f..bce8cae26 100644
--- a/web/components/action-buttons/ActionButton.tsx
+++ b/web/components/action-buttons/ActionButton.tsx
@@ -1,7 +1,7 @@
 import { Button } from 'antd';
 import { useState } from 'react';
 import Modal from '../ui/Modal/Modal';
-import { ExternalAction } from '../interfaces/external-action.interface';
+import { ExternalAction } from '../../interfaces/external-action';
 import s from './ActionButton.module.scss';
 
 interface Props {
diff --git a/web/components/chat/ChatActionMessage.jsx b/web/components/chat/ChatActionMessage.tsx
similarity index 64%
rename from web/components/chat/ChatActionMessage.jsx
rename to web/components/chat/ChatActionMessage.tsx
index 69dd2f0e1..120e2aaf6 100644
--- a/web/components/chat/ChatActionMessage.jsx
+++ b/web/components/chat/ChatActionMessage.tsx
@@ -1,9 +1,11 @@
 import { ChatMessage } from '../../interfaces/chat-message.model';
 
 interface Props {
+  // eslint-disable-next-line react/no-unused-prop-types
   message: ChatMessage;
 }
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default function ChatSystemMessage(props: Props) {
   return <div>Component goes here</div>;
 }
diff --git a/web/components/chat/ChatContainer.tsx b/web/components/chat/ChatContainer.tsx
index 142e15c7e..7c23f34c7 100644
--- a/web/components/chat/ChatContainer.tsx
+++ b/web/components/chat/ChatContainer.tsx
@@ -1,6 +1,6 @@
 import { Spin } from 'antd';
 import { Virtuoso } from 'react-virtuoso';
-import { useState, useMemo, useCallback, useEffect, useRef } from 'react';
+import { useRef } from 'react';
 import { LoadingOutlined } from '@ant-design/icons';
 import { ChatMessage } from '../../interfaces/chat-message.model';
 import { ChatState } from '../../interfaces/application-state';
diff --git a/web/components/chat/ChatModeratorNotification.tsx b/web/components/chat/ChatModeratorNotification.tsx
index 3d38f4248..f6e39f4fe 100644
--- a/web/components/chat/ChatModeratorNotification.tsx
+++ b/web/components/chat/ChatModeratorNotification.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 interface Props {}
 
 export default function ChatModerationNotification(props: Props) {
diff --git a/web/components/chat/ChatSocialMessage.jsx b/web/components/chat/ChatSocialMessage.tsx
similarity index 67%
rename from web/components/chat/ChatSocialMessage.jsx
rename to web/components/chat/ChatSocialMessage.tsx
index 53f4f2fde..1ce8f0095 100644
--- a/web/components/chat/ChatSocialMessage.jsx
+++ b/web/components/chat/ChatSocialMessage.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable react/no-unused-prop-types */
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import { ChatMessage } from '../../interfaces/chat-message.model';
 
 interface Props {
diff --git a/web/components/chat/ChatSystemMessage.tsx b/web/components/chat/ChatSystemMessage.tsx
index 69dd2f0e1..a4459e51c 100644
--- a/web/components/chat/ChatSystemMessage.tsx
+++ b/web/components/chat/ChatSystemMessage.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable react/no-unused-prop-types */
 import { ChatMessage } from '../../interfaces/chat-message.model';
 
 interface Props {
diff --git a/web/components/chat/ChatTextField.tsx b/web/components/chat/ChatTextField.tsx
index b4cbf31dd..5d2ef62c0 100644
--- a/web/components/chat/ChatTextField.tsx
+++ b/web/components/chat/ChatTextField.tsx
@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 interface Props {}
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default function ChatTextField(props: Props) {
   const [value, setValue] = useState('');
   const [showEmojis, setShowEmojis] = useState(false);
diff --git a/web/components/chat/ChatTextField/ChatTextField.module.scss b/web/components/chat/ChatTextField/ChatTextField.module.scss
index 4e386a287..327f08fdc 100644
--- a/web/components/chat/ChatTextField/ChatTextField.module.scss
+++ b/web/components/chat/ChatTextField/ChatTextField.module.scss
@@ -1,4 +1,4 @@
 .root {
-    height: 2rem;
-    color: var(--black);
-}
\ No newline at end of file
+  height: 2rem;
+  color: var(--black);
+}
diff --git a/web/components/chat/ChatTextField/ChatTextField.tsx b/web/components/chat/ChatTextField/ChatTextField.tsx
index e5876b69e..1989c35ce 100644
--- a/web/components/chat/ChatTextField/ChatTextField.tsx
+++ b/web/components/chat/ChatTextField/ChatTextField.tsx
@@ -1,14 +1,13 @@
 import { SmileOutlined } from '@ant-design/icons';
 import { Button, Popover } from 'antd';
-import React, { useState, useMemo, useRef, useEffect } from 'react';
+import React, { useState } from 'react';
 import { useRecoilValue } from 'recoil';
-import { Transforms, createEditor, Node, BaseEditor, Text } from 'slate';
+import { Transforms, createEditor, BaseEditor, Text } from 'slate';
 import { Slate, Editable, withReact, ReactEditor } from 'slate-react';
 import EmojiPicker from './EmojiPicker';
 import WebsocketService from '../../../services/websocket-service';
 import { websocketServiceAtom } from '../../stores/ClientConfigStore';
 import { MessageType } from '../../../interfaces/socket-events';
-import s from './ChatTextField.module.scss';
 
 type CustomElement = { type: 'paragraph'; children: CustomText[] };
 type CustomText = { text: string };
@@ -25,24 +24,30 @@ interface Props {
   value?: string;
 }
 
+// eslint-disable-next-line react/prop-types
 const Image = ({ element }) => (
   <img
+    // eslint-disable-next-line no-undef
+    // eslint-disable-next-line react/prop-types
     src={element.url}
     alt="emoji"
     style={{ display: 'inline', position: 'relative', width: '30px', bottom: '10px' }}
   />
 );
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 const insertImage = (editor, url) => {
-  const text = { text: '' };
-  const image: ImageElement = { type: 'image', url, children: [text] };
-  Transforms.insertNodes(editor, image);
+  // const text = { text: '' };
+  // const image: ImageElement = { type: 'image', url, children: [text] };
+  // Transforms.insertNodes(editor, image);
 };
 
 const withImages = editor => {
   const { isVoid } = editor;
 
+  // eslint-disable-next-line no-param-reassign
   editor.isVoid = element => (element.type === 'image' ? true : isVoid(element));
+  // eslint-disable-next-line no-param-reassign
   editor.isInline = element => element.type === 'image';
 
   return editor;
@@ -52,13 +57,13 @@ export type EmptyText = {
   text: string;
 };
 
-type ImageElement = {
-  type: 'image';
-  url: string;
-  children: EmptyText[];
-};
+// type ImageElement = {
+//   type: 'image';
+//   url: string;
+//   children: EmptyText[];
+// };
 
-const Element = props => {
+const Element = (props: any) => {
   const { attributes, children, element } = props;
 
   switch (element.type) {
@@ -71,10 +76,10 @@ const Element = props => {
 
 const serialize = node => {
   if (Text.isText(node)) {
-    let string = node.text;
-    if (node.bold) {
-      string = `<strong>${string}</strong>`;
-    }
+    const string = node.text;
+    // if (node.bold) {
+    //   string = `<strong>${string}</strong>`;
+    // }
     return string;
   }
 
@@ -90,8 +95,9 @@ const serialize = node => {
   }
 };
 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export default function ChatTextField(props: Props) {
-  const { value: originalValue } = props;
+  // const { value: originalValue } = props;
   const [showEmojis, setShowEmojis] = useState(false);
   const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
   const [editor] = useState(() => withImages(withReact(createEditor())));
@@ -113,7 +119,7 @@ export default function ChatTextField(props: Props) {
     Transforms.delete(editor);
   };
 
-  const handleChange = e => {};
+  const handleChange = () => {};
 
   const handleEmojiSelect = emoji => {
     console.log(emoji);
@@ -135,19 +141,12 @@ export default function ChatTextField(props: Props) {
     }
   };
 
-  const initialValue = [
-    {
-      type: 'paragraph',
-      children: [{ text: originalValue }],
-    },
-  ];
-
   return (
     <div>
-      <Slate editor={editor} value={initialValue} onChange={handleChange}>
+      <Slate editor={editor} value={[]} onChange={handleChange}>
         <Editable
           onKeyDown={onKeyDown}
-          renderElement={props => <Element {...props} />}
+          renderElement={p => <Element {...p} />}
           placeholder="Chat message goes here..."
         />
       </Slate>
diff --git a/web/components/chat/ChatTextField/EmojiPicker.tsx b/web/components/chat/ChatTextField/EmojiPicker.tsx
index 19fdd6046..bfd1c4bfa 100644
--- a/web/components/chat/ChatTextField/EmojiPicker.tsx
+++ b/web/components/chat/ChatTextField/EmojiPicker.tsx
@@ -1,22 +1,28 @@
-import data from '@emoji-mart/data';
-import React, { useRef, useEffect } from 'react';
+// import data from '@emoji-mart/data';
+import React, { useRef } from 'react';
 
-export default function EmojiPicker(props) {
+interface Props {
+  // eslint-disable-next-line react/no-unused-prop-types
+  onEmojiSelect: (emoji: string) => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export default function EmojiPicker(props: Props) {
   const ref = useRef();
 
   // TODO: Pull this custom emoji data in from the emoji API.
-  const custom = [
-    {
-      emojis: [
-        {
-          id: 'party_parrot',
-          name: 'Party Parrot',
-          keywords: ['dance', 'dancing'],
-          skins: [{ src: 'https://watch.owncast.online/img/emoji/bluntparrot.gif' }],
-        },
-      ],
-    },
-  ];
+  // const custom = [
+  //   {
+  //     emojis: [
+  //       {
+  //         id: 'party_parrot',
+  //         name: 'Party Parrot',
+  //         keywords: ['dance', 'dancing'],
+  //         skins: [{ src: 'https://watch.owncast.online/img/emoji/bluntparrot.gif' }],
+  //       },
+  //     ],
+  //   },
+  // ];
 
   // TODO: Fix the emoji picker from throwing errors.
   // useEffect(() => {
diff --git a/web/components/chat/ChatUserMessage.tsx b/web/components/chat/ChatUserMessage.tsx
index 95fa77445..9a1df22af 100644
--- a/web/components/chat/ChatUserMessage.tsx
+++ b/web/components/chat/ChatUserMessage.tsx
@@ -7,7 +7,9 @@ interface Props {
 
 export default function ChatUserMessage(props: Props) {
   const { message, showModeratorMenu } = props;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { body, user, timestamp } = message;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { displayName, displayColor } = user;
 
   // TODO: Convert displayColor (a hue) to a usable color.
diff --git a/web/components/chat/chat.js b/web/components/chat/chat.js
index a1fd14e8a..5436899b4 100644
--- a/web/components/chat/chat.js
+++ b/web/components/chat/chat.js
@@ -101,45 +101,6 @@ export function convertToText(str = '') {
   return value;
 }
 
-/*
-  You would call this when a user pastes from
-  the clipboard into a `contenteditable` area.
-*/
-export function convertOnPaste(event = { preventDefault() {} }, emojiList) {
-  // Prevent paste.
-  event.preventDefault();
-
-  // Set later.
-  let value = '';
-
-  // Does method exist?
-  const hasEventClipboard = !!(
-    event.clipboardData &&
-    typeof event.clipboardData === 'object' &&
-    typeof event.clipboardData.getData === 'function'
-  );
-
-  // Get clipboard data?
-  if (hasEventClipboard) {
-    value = event.clipboardData.getData('text/plain');
-  }
-
-  // Insert into temp `<textarea>`, read back out.
-  const textarea = document.createElement('textarea');
-  textarea.innerHTML = value;
-  value = textarea.innerText;
-
-  // Clean up text.
-  value = convertToText(value);
-
-  const HTML = emojify(value, emojiList);
-
-  // Insert text.
-  if (typeof document.execCommand === 'function') {
-    document.execCommand('insertHTML', false, HTML);
-  }
-}
-
 export function createEmojiMarkup(data, isCustom) {
   const emojiUrl = isCustom ? data.emoji : data.url;
   const emojiName = (
@@ -156,6 +117,7 @@ export function trimNbsp(html) {
 export function emojify(HTML, emojiList) {
   const textValue = convertToText(HTML);
 
+  // eslint-disable-next-line no-plusplus
   for (let lastPos = textValue.length; lastPos >= 0; lastPos--) {
     const endPos = textValue.lastIndexOf(':', lastPos);
     if (endPos <= 0) {
@@ -170,8 +132,9 @@ export function emojify(HTML, emojiList) {
       emojiItem => emojiItem.name.toLowerCase() === typedEmoji.toLowerCase(),
     );
 
-    if (emojiIndex != -1) {
+    if (emojiIndex !== -1) {
       const emojiImgElement = createEmojiMarkup(emojiList[emojiIndex], true);
+      // eslint-disable-next-line no-param-reassign
       HTML = HTML.replace(`:${typedEmoji}:`, emojiImgElement);
     }
   }
diff --git a/web/components/common/Logo/Logo.tsx b/web/components/common/Logo/Logo.tsx
index bdf98d376..3733f022f 100644
--- a/web/components/common/Logo/Logo.tsx
+++ b/web/components/common/Logo/Logo.tsx
@@ -1,19 +1,16 @@
 import React from 'react';
 import cn from 'classnames';
-import s from './Logo.module.scss'
+import s from './Logo.module.scss';
 
 interface Props {
-  variant: 'simple' | 'contrast'
+  variant: 'simple' | 'contrast';
 }
 
-export default function Logo({variant = 'simple'}: Props) {
-  const rootClassName = cn(
-    s.root,
-    {
-      [s.simple]: variant === 'simple',
-      [s.contrast]: variant === 'contrast',
-    }
-  )
+export default function Logo({ variant = 'simple' }: Props) {
+  const rootClassName = cn(s.root, {
+    [s.simple]: variant === 'simple',
+    [s.contrast]: variant === 'contrast',
+  });
 
   return (
     <div className={rootClassName}>
diff --git a/web/components/common/UserDropdown/UserDropdown.tsx b/web/components/common/UserDropdown/UserDropdown.tsx
index 86e97ebe7..b271c2d65 100644
--- a/web/components/common/UserDropdown/UserDropdown.tsx
+++ b/web/components/common/UserDropdown/UserDropdown.tsx
@@ -6,8 +6,8 @@ import { ChatState, ChatVisibilityState } from '../../../interfaces/application-
 import s from './UserDropdown.module.scss';
 
 interface Props {
-  username?: string;
-  chatState?: ChatState;
+  username: string;
+  chatState: ChatState;
 }
 
 export default function UserDropdown({ username = 'test-user', chatState }: Props) {
@@ -44,11 +44,6 @@ export default function UserDropdown({ username = 'test-user', chatState }: Prop
             <DownOutlined />
           </Space>
         </Button>
-        {/*
-      <button type="button" className="ant-dropdown-link" onClick={e => e.preventDefault()}>
-        {username} <DownOutlined />
-      </button>
-      */}
       </Dropdown>
     </div>
   );
diff --git a/web/components/common/UserDropdown/index.ts b/web/components/common/UserDropdown/index.ts
index f75fac725..d94f0db06 100644
--- a/web/components/common/UserDropdown/index.ts
+++ b/web/components/common/UserDropdown/index.ts
@@ -1 +1 @@
-export { default } from './UserDropdown'
+export { default } from './UserDropdown';
diff --git a/web/components/common/index.ts b/web/components/common/index.ts
index a4c62b745..b864c8750 100644
--- a/web/components/common/index.ts
+++ b/web/components/common/index.ts
@@ -1,2 +1,2 @@
-export { default as UserDropdown } from './UserDropdown'
-export { default as OwncastLogo } from './Logo'
+export { default as UserDropdown } from './UserDropdown';
+export { default as OwncastLogo } from './Logo';
diff --git a/web/pages/admin/admin-layout.tsx b/web/components/layouts/admin-layout.tsx
similarity index 89%
rename from web/pages/admin/admin-layout.tsx
rename to web/components/layouts/admin-layout.tsx
index ec5474deb..d06dc2188 100644
--- a/web/pages/admin/admin-layout.tsx
+++ b/web/components/layouts/admin-layout.tsx
@@ -1,7 +1,7 @@
 import { AppProps } from 'next/app';
 import ServerStatusProvider from '../../utils/server-status-context';
 import AlertMessageProvider from '../../utils/alert-message-context';
-import MainLayout from '../../components/main-layout';
+import MainLayout from '../main-layout';
 
 function AdminLayout({ Component, pageProps }: AppProps) {
   return (
diff --git a/web/components/main-layout.tsx b/web/components/main-layout.tsx
index fd80e3a0e..111d8e38a 100644
--- a/web/components/main-layout.tsx
+++ b/web/components/main-layout.tsx
@@ -130,7 +130,7 @@ export default function MainLayout(props) {
       <Sider width={240} className="side-nav">
         <h1 className="owncast-title">
           <span className="logo-container">
-            <OwncastLogo />
+            <OwncastLogo variant="simple" />
           </span>
           <span className="title-label">Owncast Admin</span>
         </h1>
diff --git a/web/components/modals/AuthModal.tsx b/web/components/modals/AuthModal.tsx
index e51a44778..232f3f3b9 100644
--- a/web/components/modals/AuthModal.tsx
+++ b/web/components/modals/AuthModal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 interface Props {}
 
 export default function AuthModal(props: Props) {
diff --git a/web/components/modals/BrowserNotifyModal.tsx b/web/components/modals/BrowserNotifyModal.tsx
index cdfeff3d1..45e26c76a 100644
--- a/web/components/modals/BrowserNotifyModal.tsx
+++ b/web/components/modals/BrowserNotifyModal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 interface Props {}
 
 export default function BrowserNotifyModal(props: Props) {
diff --git a/web/components/modals/FediAuthModal.tsx b/web/components/modals/FediAuthModal.tsx
index a01d66282..cac51f62f 100644
--- a/web/components/modals/FediAuthModal.tsx
+++ b/web/components/modals/FediAuthModal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 interface Props {}
 
 export default function FediAuthModal(props: Props) {
diff --git a/web/components/modals/FollowModal.tsx b/web/components/modals/FollowModal.tsx
index d769dce1a..1849cb455 100644
--- a/web/components/modals/FollowModal.tsx
+++ b/web/components/modals/FollowModal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 interface Props {}
 
 export default function FollowModal(props: Props) {
diff --git a/web/components/modals/IndieAuthModal.tsx b/web/components/modals/IndieAuthModal.tsx
index dcd81d185..bdb811b75 100644
--- a/web/components/modals/IndieAuthModal.tsx
+++ b/web/components/modals/IndieAuthModal.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
 interface Props {}
 
 export default function IndieAuthModal(props: Props) {
diff --git a/web/components/offline-notice.tsx b/web/components/offline-notice.tsx
index 90d64eeab..0d9d7c739 100644
--- a/web/components/offline-notice.tsx
+++ b/web/components/offline-notice.tsx
@@ -3,7 +3,7 @@ import { Card, Col, Row, Typography } from 'antd';
 import Link from 'next/link';
 import { useContext } from 'react';
 import LogTable from './log-table';
-import OwncastLogo from './logo';
+import OwncastLogo from './common/Logo/Logo';
 import NewsFeed from './news-feed';
 import { ConfigDetails } from '../types/config-section';
 import { ServerStatusContext } from '../utils/server-status-context';
@@ -125,7 +125,7 @@ export default function Offline({ logs = [], config }: OfflineProps) {
         <Col span={12} offset={6}>
           <div className="offline-intro">
             <span className="logo">
-              <OwncastLogo />
+              <OwncastLogo variant="simple" />
             </span>
             <div>
               <Title level={2}>No stream is active</Title>
diff --git a/web/components/stores/ClientConfigStore.tsx b/web/components/stores/ClientConfigStore.tsx
index d128a63b5..e7765c031 100644
--- a/web/components/stores/ClientConfigStore.tsx
+++ b/web/components/stores/ClientConfigStore.tsx
@@ -6,7 +6,6 @@ import ClientConfigService from '../../services/client-config-service';
 import ChatService from '../../services/chat-service';
 import WebsocketService from '../../services/websocket-service';
 import { ChatMessage } from '../../interfaces/chat-message.model';
-import { getLocalStorage, setLocalStorage } from '../../utils/helpers';
 import {
   AppState,
   ChatState,
@@ -16,10 +15,10 @@ import {
   getChatVisibilityState,
 } from '../../interfaces/application-state';
 import {
-  SocketEvent,
   ConnectedClientInfoEvent,
   MessageType,
   ChatEvent,
+  SocketEvent,
 } from '../../interfaces/socket-events';
 import handleConnectedClientInfoMessage from './eventhandlers/connectedclientinfo';
 import handleChatMessage from './eventhandlers/handleChatMessage';
@@ -77,10 +76,8 @@ export function ClientConfigStore() {
   const [chatMessages, setChatMessages] = useRecoilState<ChatMessage[]>(chatMessagesAtom);
   const setChatDisplayName = useSetRecoilState<string>(chatDisplayNameAtom);
   const [appState, setAppState] = useRecoilState<AppState>(appStateAtom);
-  const [videoState, setVideoState] = useRecoilState<VideoState>(videoStateAtom);
   const [accessToken, setAccessToken] = useRecoilState<string>(accessTokenAtom);
-  const [websocketService, setWebsocketService] =
-    useRecoilState<WebsocketService>(websocketServiceAtom);
+  const setWebsocketService = useSetRecoilState<WebsocketService>(websocketServiceAtom);
 
   let ws: WebsocketService;
 
diff --git a/web/components/stores/eventhandlers/connectedclientinfo.ts b/web/components/stores/eventhandlers/connectedclientinfo.ts
index 9c3c0fa26..e5081d4b2 100644
--- a/web/components/stores/eventhandlers/connectedclientinfo.ts
+++ b/web/components/stores/eventhandlers/connectedclientinfo.ts
@@ -1,4 +1,4 @@
-import { ConnectedClientInfoEvent, SocketEvent } from '../../../interfaces/socket-events';
+import { ConnectedClientInfoEvent } from '../../../interfaces/socket-events';
 
 export default function handleConnectedClientInfoMessage(message: ConnectedClientInfoEvent) {
   console.log('connected client', message);
diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss
index 9018c609d..396acd4d4 100644
--- a/web/components/ui/Content/Content.module.scss
+++ b/web/components/ui/Content/Content.module.scss
@@ -1,26 +1,26 @@
 .root {
-    display: grid;
-    grid-template-columns: 1fr;
+  display: grid;
+  grid-template-columns: 1fr;
 }
 
 .mobileChat {
-    display: block;
-    position: absolute;
-    background-color: white;
-    top: 0px;
-    width: 100%;
-    height: calc(50vh - var(--header-h));
+  display: block;
+  position: absolute;
+  background-color: white;
+  top: 0px;
+  width: 100%;
+  height: calc(50vh - var(--header-h));
 }
 
 .leftCol {
-    display: grid;
-    // -64px, which is the header
-    grid-template-rows: 50vh calc(50vh - var(--header-h));
+  display: grid;
+  // -64px, which is the header
+  grid-template-rows: 50vh calc(50vh - var(--header-h));
 }
 .lowerRow {
-    position: relative;
-    display: grid;
-    grid-template-rows: 1fr var(--header-h);
+  position: relative;
+  display: grid;
+  grid-template-rows: 1fr var(--header-h);
 }
 
 .pageContentSection {
@@ -32,10 +32,10 @@
 }
 
 @media (min-width: 768px) {
-    .mobileChat {
-        display: none;
-    }
-    .root[data-columns='2'] {
-        grid-template-columns: 1fr var(--chat-w);
-    }
+  .mobileChat {
+    display: none;
+  }
+  .root[data-columns='2'] {
+    grid-template-columns: 1fr var(--chat-w);
+  }
 }
diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index 50b1746b0..376b8ddd2 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -1,6 +1,5 @@
 import { useRecoilValue } from 'recoil';
-import { Layout, Button, Col, Tabs } from 'antd';
-import Grid from 'antd/lib/card/Grid';
+import { Layout, Button, Tabs } from 'antd';
 import {
   chatVisibilityAtom,
   clientConfigStateAtom,
@@ -23,6 +22,7 @@ import ActionButtonRow from '../../action-buttons/ActionButtonRow';
 import ActionButton from '../../action-buttons/ActionButton';
 import Statusbar from '../Statusbar/Statusbar';
 import { ServerStatus } from '../../../interfaces/server-status.model';
+import { Follower } from '../../../interfaces/follower';
 
 const { TabPane } = Tabs;
 const { Content } = Layout;
@@ -34,8 +34,8 @@ export default function ContentComponent() {
   const messages = useRecoilValue<ChatMessage[]>(chatMessagesAtom);
   const chatState = useRecoilValue<ChatState>(chatStateAtom);
 
-  const { extraPageContent } = clientConfig;
-  const { online, viewerCount, lastConnectTime, lastDisconnectTime, streamTitle } = status;
+  const { extraPageContent, version } = clientConfig;
+  const { online, viewerCount, lastConnectTime, lastDisconnectTime } = status;
 
   const followers: Follower[] = [];
 
@@ -88,7 +88,7 @@ export default function ContentComponent() {
               <ChatTextField />
             </div>
           )}
-          <Footer />
+          <Footer version={version} />
         </div>
       </div>
       {chatOpen && <Sidebar />}
diff --git a/web/components/ui/Content/index.ts b/web/components/ui/Content/index.ts
index 3beaaa68e..b8403143a 100644
--- a/web/components/ui/Content/index.ts
+++ b/web/components/ui/Content/index.ts
@@ -1 +1 @@
-export { default } from "./Content"
+export { default } from './Content';
diff --git a/web/components/ui/CrossfadeImage/CrossfadeImage.tsx b/web/components/ui/CrossfadeImage/CrossfadeImage.tsx
index 8b8de4da4..88ce9e891 100644
--- a/web/components/ui/CrossfadeImage/CrossfadeImage.tsx
+++ b/web/components/ui/CrossfadeImage/CrossfadeImage.tsx
@@ -54,11 +54,11 @@ export default function CrossfadeImage({
   return (
     <span style={spanStyle}>
       {[...srcs, nextSrc].map(
-        (src, index) =>
-          src !== '' && (
+        (singleSrc, index) =>
+          singleSrc !== '' && (
             <img
-              key={(key + index) % 3}
-              src={src}
+              key={singleSrc}
+              src={singleSrc}
               alt=""
               style={imgStyles[index]}
               onLoad={index === 2 ? onLoadImg : undefined}
diff --git a/web/components/ui/Footer/Footer.tsx b/web/components/ui/Footer/Footer.tsx
index 20b5c1103..3280573bf 100644
--- a/web/components/ui/Footer/Footer.tsx
+++ b/web/components/ui/Footer/Footer.tsx
@@ -2,7 +2,11 @@ import { Layout } from 'antd';
 
 const { Footer } = Layout;
 
-export default function FooterComponent(props) {
+interface Props {
+  version: string;
+}
+
+export default function FooterComponent(props: Props) {
   const { version } = props;
 
   return <Footer style={{ textAlign: 'center', height: '64px' }}>Footer: Owncast {version}</Footer>;
diff --git a/web/components/ui/Header/Header.module.scss b/web/components/ui/Header/Header.module.scss
index 0d9078ac1..ea02744be 100644
--- a/web/components/ui/Header/Header.module.scss
+++ b/web/components/ui/Header/Header.module.scss
@@ -3,7 +3,7 @@
   align-items: center;
   justify-content: space-between;
   z-index: 1;
-  padding: .5rem 1rem;
+  padding: 0.5rem 1rem;
   .logo {
     display: flex;
     align-items: center;
diff --git a/web/components/ui/Header/Header.tsx b/web/components/ui/Header/Header.tsx
index 1f2268083..0b5c1efb9 100644
--- a/web/components/ui/Header/Header.tsx
+++ b/web/components/ui/Header/Header.tsx
@@ -1,4 +1,5 @@
 import { Layout } from 'antd';
+import { ChatState } from '../../../interfaces/application-state';
 import { OwncastLogo, UserDropdown } from '../../common';
 import s from './Header.module.scss';
 
@@ -12,10 +13,10 @@ export default function HeaderComponent({ name = 'Your stream title' }: Props) {
   return (
     <Header className={`${s.header}`}>
       <div className={`${s.logo}`}>
-        <OwncastLogo variant='contrast'/>
+        <OwncastLogo variant="contrast" />
         <span>{name}</span>
       </div>
-      <UserDropdown />
+      <UserDropdown username="fillmein" chatState={ChatState.Available} />
     </Header>
   );
 }
diff --git a/web/components/ui/Modal/Modal.module.scss b/web/components/ui/Modal/Modal.module.scss
index 0dd02e4a5..87960294c 100644
--- a/web/components/ui/Modal/Modal.module.scss
+++ b/web/components/ui/Modal/Modal.module.scss
@@ -8,4 +8,4 @@
   display: block;
   height: 100%;
   padding: 2vw;
-}
\ No newline at end of file
+}
diff --git a/web/components/ui/Modal/Modal.tsx b/web/components/ui/Modal/Modal.tsx
index 11f00ef39..002866e7a 100644
--- a/web/components/ui/Modal/Modal.tsx
+++ b/web/components/ui/Modal/Modal.tsx
@@ -29,7 +29,6 @@ export default function Modal(props: Props) {
       width="100%"
       height="100%"
       sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
-      allowpaymentrequest="true"
       frameBorder="0"
       allowFullScreen
       onLoad={() => setLoading(false)}
diff --git a/web/components/ui/Sidebar/Sidebar.module.scss b/web/components/ui/Sidebar/Sidebar.module.scss
index 49ff7e975..4fd12c079 100644
--- a/web/components/ui/Sidebar/Sidebar.module.scss
+++ b/web/components/ui/Sidebar/Sidebar.module.scss
@@ -8,5 +8,3 @@
     display: flex;
   }
 }
-
-
diff --git a/web/components/ui/Statusbar/Statusbar.module.scss b/web/components/ui/Statusbar/Statusbar.module.scss
index b4349e718..42b2c1f28 100644
--- a/web/components/ui/Statusbar/Statusbar.module.scss
+++ b/web/components/ui/Statusbar/Statusbar.module.scss
@@ -7,4 +7,4 @@
   height: 30px;
   width: 100%;
   background-color: black;
-}
\ No newline at end of file
+}
diff --git a/web/components/ui/Statusbar/Statusbar.tsx b/web/components/ui/Statusbar/Statusbar.tsx
index ab4503d3c..1b5b2bf21 100644
--- a/web/components/ui/Statusbar/Statusbar.tsx
+++ b/web/components/ui/Statusbar/Statusbar.tsx
@@ -40,7 +40,7 @@ export default function Statusbar(props: Props) {
     const duration = makeDurationString(new Date(lastConnectTime));
     onlineMessage = online ? `Live for  ${duration}` : 'Offline';
     rightSideMessage = `${viewerCount > 0 ? `${viewerCount}` : 'No'} ${
-      viewerCount == 1 ? 'viewer' : 'viewers'
+      viewerCount === 1 ? 'viewer' : 'viewers'
     }`;
   } else {
     onlineMessage = 'Offline';
diff --git a/web/components/ui/index.tsx b/web/components/ui/index.tsx
index acf89178c..2d59f9be8 100644
--- a/web/components/ui/index.tsx
+++ b/web/components/ui/index.tsx
@@ -1,4 +1,4 @@
-export { default as Header } from './Header/index'
-export { default as Sidebar } from './Sidebar/index'
-export { default as Footer } from './Footer/index'
-export { default as Content } from './Content/index'
+export { default as Header } from './Header/index';
+export { default as Sidebar } from './Sidebar/index';
+export { default as Footer } from './Footer/index';
+export { default as Content } from './Content/index';
diff --git a/web/components/video/OwncastPlayer.tsx b/web/components/video/OwncastPlayer.tsx
index f93a77dd7..d701d1500 100644
--- a/web/components/video/OwncastPlayer.tsx
+++ b/web/components/video/OwncastPlayer.tsx
@@ -107,11 +107,7 @@ export default function OwncastPlayer(props: Props) {
     <div style={{ display: 'grid' }}>
       {online && (
         <div style={{ gridColumn: 1, gridRow: 1 }}>
-          <VideoJS
-            style={{ gridColumn: 1, gridRow: 1 }}
-            options={videoJsOptions}
-            onReady={handlePlayerReady}
-          />
+          <VideoJS options={videoJsOptions} onReady={handlePlayerReady} />
         </div>
       )}
       <div style={{ gridColumn: 1, gridRow: 1 }}>
diff --git a/web/components/video/Player.module.scss b/web/components/video/Player.module.scss
index dbf2dbd8e..4f3ab16de 100644
--- a/web/components/video/Player.module.scss
+++ b/web/components/video/Player.module.scss
@@ -6,4 +6,4 @@
   .vjs-big-play-centered .vjs-big-play-button {
     z-index: 99999 !important;
   }
-}
\ No newline at end of file
+}
diff --git a/web/components/video/VideoPoster.module.scss b/web/components/video/VideoPoster.module.scss
index fd9d94838..bed512a6f 100644
--- a/web/components/video/VideoPoster.module.scss
+++ b/web/components/video/VideoPoster.module.scss
@@ -2,4 +2,4 @@
   background-color: black;
   display: flex;
   justify-content: center;
-}
\ No newline at end of file
+}
diff --git a/web/components/video/player.tsx b/web/components/video/player.tsx
index 66027dc85..8d158f642 100644
--- a/web/components/video/player.tsx
+++ b/web/components/video/player.tsx
@@ -7,8 +7,12 @@ require('video.js/dist/video-js.css');
 // TODO: Restore volume that was saved in local storage.
 // import { getLocalStorage, setLocalStorage } from '../../utils/helpers.js';
 // import { PLAYER_VOLUME, URL_STREAM } from '../../utils/constants.js';
+interface Props {
+  options: any;
+  onReady: (player: videojs.Player) => void;
+}
 
-export function VideoJS(props) {
+export function VideoJS(props: Props) {
   const videoRef = React.useRef(null);
   const playerRef = React.useRef(null);
   const { options, onReady } = props;
@@ -18,11 +22,10 @@ export function VideoJS(props) {
     if (!playerRef.current) {
       const videoElement = videoRef.current;
 
-      // if (!videoElement) return;
-
+      // eslint-disable-next-line no-multi-assign
       const player = (playerRef.current = videojs(videoElement, options, () => {
         player.log('player is ready');
-        onReady && onReady(player);
+        return onReady && onReady(player);
       }));
 
       // TODO: Add airplay support, video settings menu, latency compensator, etc.
@@ -48,6 +51,7 @@ export function VideoJS(props) {
 
   return (
     <div data-vjs-player>
+      {/* eslint-disable-next-line jsx-a11y/media-has-caption */}
       <video ref={videoRef} className={`video-js vjs-big-play-centered ${s.player}`} />
     </div>
   );
diff --git a/web/docs/README.md b/web/docs/README.md
index 6515b560e..97a777e78 100644
--- a/web/docs/README.md
+++ b/web/docs/README.md
@@ -1,19 +1,19 @@
 # Tips for creating a new Admin form
 
 ### Layout
+
 - Give your page or form a title. Feel free to use Ant Design's `<Title>` component.
 - Give your form a description inside of a `<p className="description" />` tag.
 
-- Use some Ant Design `Row` and `Col`'s to layout your forms if you want to spread them out into responsive columns.  If you use an `<Row>`s, be sure to use `<Col>`s with them too!
+- Use some Ant Design `Row` and `Col`'s to layout your forms if you want to spread them out into responsive columns. If you use an `<Row>`s, be sure to use `<Col>`s with them too!
 
 - Use the `form-module` CSS class if you want to add a visual separation to a grouping of items.
-  
-
 
 ### Form fields
+
 - Feel free to use the pre-styled `<TextField>` text form field or the `<ToggleSwitch>` compnent, in a group of form fields together. These have been styled and laid out to match each other.
 
-- `Slider`'s - If your form uses an Ant Slider component, follow this recommended markup of CSS classes to maintain a consistent look and feel to other Sliders in the app. 
+- `Slider`'s - If your form uses an Ant Slider component, follow this recommended markup of CSS classes to maintain a consistent look and feel to other Sliders in the app.
   ```
   <div className="segment-slider-container">
     <Slider ...props />
@@ -22,24 +22,28 @@
   ```
 
 ### Submit Statuses
-- It would be nice to display indicators of success/warnings to let users know if something has been successfully updated on the server. It has a lot of steps (sorry, but it could probably be optimized), but it'll provide a consistent way to display messaging. 
+
+- It would be nice to display indicators of success/warnings to let users know if something has been successfully updated on the server. It has a lot of steps (sorry, but it could probably be optimized), but it'll provide a consistent way to display messaging.
 
   - See `reset-yp.tsx` for an example of using `submitStatus` with `useState()` and the `<FormStatusIndicator>` component to achieve this.
 
 ### Styling
-- This admin site chooses to have a generally Dark color palette, but with colors that are  different from Ant design's _dark_ stylesheet, so that style sheet is not included. This results in a very large `ant-overrides.scss` file to reset colors on frequently used Ant components in the system. If you find yourself a new Ant Component that has not yet been used in this app, feel free to add a reset style for that component to the overrides stylesheet.
+
+- This admin site chooses to have a generally Dark color palette, but with colors that are different from Ant design's _dark_ stylesheet, so that style sheet is not included. This results in a very large `ant-overrides.scss` file to reset colors on frequently used Ant components in the system. If you find yourself a new Ant Component that has not yet been used in this app, feel free to add a reset style for that component to the overrides stylesheet.
 
   - Take a look at `variables.scss` CSS file if you want to give some elements custom css colors.
 
+---
 
 ---
----
-# Creating Admin forms the Config section 
+
+# Creating Admin forms the Config section
+
 First things first..
 
 ## General Config data flow in this React app
 
-- When the Admin app loads, the `ServerStatusContext` (in addition to checking server `/status` on a timer) makes a call to the  `/serverconfig` API to get your config details. This data will be stored as **`serverConfig`** in app state, and _provided_ to the app via `useContext` hook.  
+- When the Admin app loads, the `ServerStatusContext` (in addition to checking server `/status` on a timer) makes a call to the `/serverconfig` API to get your config details. This data will be stored as **`serverConfig`** in app state, and _provided_ to the app via `useContext` hook.
 
 - The `serverConfig` in state is be the central source of data that pre-populates the forms.
 
@@ -47,39 +51,42 @@ First things first..
 
 - After you have updated a config value in a form field, and successfully submitted it through its endpoint, you should call `setFieldInConfigState` to update the global state with the new value.
 
-
 ## Suggested Config Form Flow
-- *NOTE: Each top field of the serverConfig has its own API update endpoint.*
 
+- _NOTE: Each top field of the serverConfig has its own API update endpoint._
 
 There many steps here, but they are highly suggested to ensure that Config values are updated and displayed properly throughout the entire admin form.
 
 For each form input (or group of inputs) you make, you should:
-  1. Get the field values that you want out of `serverConfig` from ServerStatusContext with `useContext`.
-  2. Next we'll have to put these field values of interest into a `useState` in each grouping.  This will help you edit the form. 
-  3. Because ths config data is populated asynchronously,  Use a `useEffect` to check when that data has arrived before putting it into state.
-  4. You will be using the state's value to populate the `defaultValue` and the `value` props of each Ant input component (`Input`, `Toggle`, `Switch`, `Select`, `Slider` are currently used).
-  5. When an `onChange` event fires for each type of input component, you will update the local state of each page with the changed value.
-  6. Depending on the form, an `onChange` of the input component, or a subsequent `onClick` of a submit button will take the value from local state and POST the field's API.
-  7. `onSuccess` of the post, you should update the global app state with the new value.
+
+1. Get the field values that you want out of `serverConfig` from ServerStatusContext with `useContext`.
+2. Next we'll have to put these field values of interest into a `useState` in each grouping. This will help you edit the form.
+3. Because ths config data is populated asynchronously, Use a `useEffect` to check when that data has arrived before putting it into state.
+4. You will be using the state's value to populate the `defaultValue` and the `value` props of each Ant input component (`Input`, `Toggle`, `Switch`, `Select`, `Slider` are currently used).
+5. When an `onChange` event fires for each type of input component, you will update the local state of each page with the changed value.
+6. Depending on the form, an `onChange` of the input component, or a subsequent `onClick` of a submit button will take the value from local state and POST the field's API.
+7. `onSuccess` of the post, you should update the global app state with the new value.
 
 There are also a variety of other local states to manage the display of error/success messaging.
 
 - It is recommended that you use `form-textfield-with-submit` and `form-toggleswitch`(with `useSubmit=true`) Components to edit Config fields.
 
 Examples of Config form groups where individual form fields submitting to the update API include:
+
 - `edit-instance-details.tsx`
 - `edit-server-details.tsx`
 
-Examples of Config form groups where there is 1 submit button for the entire group include: 
+Examples of Config form groups where there is 1 submit button for the entire group include:
+
 - `edit-storage.tsx`
 
-
 ---
+
 #### Notes about `form-textfield-with-submit` and `form-togglefield` (with useSubmit=true)
+
 - The text field is intentionally designed to make it difficult for the user to submit bad data.
 - If you make a change on a field, a Submit buttton will show up that you have to click to update. That will be the only way you can update it.
-- If you clear out a field that is marked as Required, then exit/blur the field, it will repopulate with its original value. 
+- If you clear out a field that is marked as Required, then exit/blur the field, it will repopulate with its original value.
 
 - Both of these elements are specifically meant to be used with updating `serverConfig` fields, since each field requires its own endpoint.
 
@@ -88,4 +95,3 @@ Examples of Config form groups where there is 1 submit button for the entire gro
 - (currently undergoing re-styling and TS cleanup)
 
 - NOTE: you don't have to use these components. Some form groups may require a customized UX flow where you're better off using the Ant components straight up.
-
diff --git a/web/interfaces/client-config.model.ts b/web/interfaces/client-config.model.ts
index a3d7fb5e5..b763209f2 100644
--- a/web/interfaces/client-config.model.ts
+++ b/web/interfaces/client-config.model.ts
@@ -1,5 +1,6 @@
 export interface ClientConfig {
   name: string;
+  title?: string;
   summary: string;
   logo: string;
   tags: string[];
diff --git a/web/interfaces/external-action.ts b/web/interfaces/external-action.ts
index 145b42ea7..538dd7e24 100644
--- a/web/interfaces/external-action.ts
+++ b/web/interfaces/external-action.ts
@@ -3,4 +3,6 @@ export interface ExternalAction {
   description?: string;
   color?: string;
   url: string;
+  icon?: string;
+  openExternally?: boolean;
 }
diff --git a/web/package-lock.json b/web/package-lock.json
index ff11c007a..52074baa2 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -11,7 +11,7 @@
         "@ant-design/icons": "4.7.0",
         "@emoji-mart/data": "^1.0.1",
         "@storybook/react": "^6.4.22",
-        "antd": "4.18.9",
+        "antd": "^4.20.4",
         "autoprefixer": "^10.4.4",
         "chart.js": "3.7.0",
         "chartkick": "4.1.1",
@@ -81,7 +81,7 @@
         "html-webpack-plugin": "^5.5.0",
         "less": "^4.1.2",
         "less-loader": "^10.2.0",
-        "prettier": "2.5.1",
+        "prettier": "2.6.2",
         "sass": "^1.50.0",
         "sass-loader": "^10.1.1",
         "sb": "^6.4.22",
@@ -12128,9 +12128,9 @@
       }
     },
     "node_modules/antd": {
-      "version": "4.18.9",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-4.18.9.tgz",
-      "integrity": "sha512-MbtFY2J8LvXUnxYH2QehdhP9qMEpHvOp7PmiTIHc7v6aSb+LILCibskRIMGNEKvvhBvsTdq0cnjanR9/IbqEAw==",
+      "version": "4.20.4",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-4.20.4.tgz",
+      "integrity": "sha512-xtaMNuRvumMXQLsoAwiQRY5rEJVRtJGumby3aPIJdWXwBtZ7eDDuXbT/Uo8xT8rTND0cK5rRQlxMyisCJrZD9Q==",
       "dependencies": {
         "@ant-design/colors": "^6.0.0",
         "@ant-design/icons": "^4.7.0",
@@ -12141,38 +12141,40 @@
         "copy-to-clipboard": "^3.2.0",
         "lodash": "^4.17.21",
         "memoize-one": "^6.0.0",
-        "moment": "^2.25.3",
-        "rc-cascader": "~3.2.1",
+        "moment": "^2.29.2",
+        "rc-cascader": "~3.5.0",
         "rc-checkbox": "~2.3.0",
         "rc-collapse": "~3.1.0",
-        "rc-dialog": "~8.6.0",
+        "rc-dialog": "~8.8.1",
         "rc-drawer": "~4.4.2",
-        "rc-dropdown": "~3.2.5",
-        "rc-field-form": "~1.23.0",
-        "rc-image": "~5.2.5",
+        "rc-dropdown": "~3.5.0",
+        "rc-field-form": "~1.26.1",
+        "rc-image": "~5.6.0",
+        "rc-input": "~0.0.1-alpha.5",
         "rc-input-number": "~7.3.0",
-        "rc-mentions": "~1.6.1",
-        "rc-menu": "~9.2.1",
-        "rc-motion": "^2.4.4",
-        "rc-notification": "~4.5.7",
+        "rc-mentions": "~1.7.0",
+        "rc-menu": "~9.5.5",
+        "rc-motion": "^2.5.1",
+        "rc-notification": "~4.6.0",
         "rc-pagination": "~3.1.9",
-        "rc-picker": "~2.5.17",
+        "rc-picker": "~2.6.4",
         "rc-progress": "~3.2.1",
         "rc-rate": "~2.9.0",
         "rc-resize-observer": "^1.2.0",
-        "rc-select": "~14.0.0-alpha.15",
-        "rc-slider": "~9.7.4",
+        "rc-segmented": "~2.1.0 ",
+        "rc-select": "~14.1.1",
+        "rc-slider": "~10.0.0",
         "rc-steps": "~4.1.0",
         "rc-switch": "~3.2.0",
-        "rc-table": "~7.23.0",
-        "rc-tabs": "~11.10.0",
+        "rc-table": "~7.24.0",
+        "rc-tabs": "~11.13.0",
         "rc-textarea": "~0.3.0",
         "rc-tooltip": "~5.1.1",
-        "rc-tree": "~5.4.3",
-        "rc-tree-select": "~5.1.1",
+        "rc-tree": "~5.5.0",
+        "rc-tree-select": "~5.3.0",
         "rc-trigger": "^5.2.10",
         "rc-upload": "~4.3.0",
-        "rc-util": "^5.14.0",
+        "rc-util": "^5.20.0",
         "scroll-into-view-if-needed": "^2.2.25"
       },
       "funding": {
@@ -12184,6 +12186,20 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/antd/node_modules/rc-util": {
+      "version": "5.21.4",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.4.tgz",
+      "integrity": "sha512-rq11ap3NnOIdywFhcMQ9J7DXRJJ1c1Id1Hvr/1Dphr+5X75ERJBJybuh779DdurP4LJQqAhT6Aie0AjrBc5Vqw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "react-is": "^16.12.0",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/anymatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
@@ -12453,9 +12469,9 @@
       "dev": true
     },
     "node_modules/async-validator": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
-      "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.1.1.tgz",
+      "integrity": "sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA=="
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
@@ -15305,9 +15321,9 @@
       }
     },
     "node_modules/dayjs": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.1.tgz",
-      "integrity": "sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA=="
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
+      "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
     },
     "node_modules/debug": {
       "version": "4.3.4",
@@ -15598,9 +15614,9 @@
       "dev": true
     },
     "node_modules/dom-align": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.2.tgz",
-      "integrity": "sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg=="
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.3.tgz",
+      "integrity": "sha512-Gj9hZN3a07cbR6zviMUBOMPdWxYhbMI+x+WS0NAIu2zFZmbK8ys9R79g+iG9qLnlCwpFoaB+fKy8Pdv470GsPA=="
     },
     "node_modules/dom-converter": {
       "version": "0.2.0",
@@ -25415,15 +25431,18 @@
       }
     },
     "node_modules/prettier": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
-      "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
+      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
       "dev": true,
       "bin": {
         "prettier": "bin-prettier.js"
       },
       "engines": {
         "node": ">=10.13.0"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
       }
     },
     "node_modules/prettier-linter-helpers": {
@@ -25921,9 +25940,9 @@
       }
     },
     "node_modules/rc-align": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.11.tgz",
-      "integrity": "sha512-n9mQfIYQbbNTbefyQnRHZPWuTEwG1rY4a9yKlIWHSTbgwI+XUMGRYd0uJ5pE2UbrNX0WvnMBA1zJ3Lrecpra/A==",
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.12.tgz",
+      "integrity": "sha512-3DuwSJp8iC/dgHzwreOQl52soj40LchlfUHtgACOUtwGuoFIOVh6n/sCpfqCU8kO5+iz6qR0YKvjgB8iPdE3aQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -25938,15 +25957,15 @@
       }
     },
     "node_modules/rc-cascader": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.2.9.tgz",
-      "integrity": "sha512-Mvkegzf506PD7qc38kg2tGllIBXs5dio3DPg+NER7SiOfCXBCATWYEs0CbUp8JDQgYHoHF0vPvFMYtxFTJuWaw==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.5.0.tgz",
+      "integrity": "sha512-rpXnWCfvk7Frh2dBzMoA0c7i0nn6aJU7L2NZo8R8pNkrT0sKgytQSpdtPWP+Pq8IkvwbEd8BU8Z8OnOljcqgZg==",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "array-tree-filter": "^2.1.0",
         "classnames": "^2.3.1",
-        "rc-select": "~14.0.0-alpha.23",
-        "rc-tree": "~5.4.3",
+        "rc-select": "~14.1.0",
+        "rc-tree": "~5.5.0",
         "rc-util": "^5.6.1"
       },
       "peerDependencies": {
@@ -25984,14 +26003,28 @@
       }
     },
     "node_modules/rc-dialog": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-8.6.0.tgz",
-      "integrity": "sha512-GSbkfqjqxpZC5/zc+8H332+q5l/DKUhpQr0vdX2uDsxo5K0PhvaMEVjyoJUTkZ3+JstEADQji1PVLVb/2bJeOQ==",
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-8.8.1.tgz",
+      "integrity": "sha512-7M1WKZCjfIABKEaJVskdYvb80z+RX7I11PeSjPVfLOOaJAmIepvDEd0alBtOZvOL3fZFWlMs4JVZtp9LZgONxA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.6",
         "rc-motion": "^2.3.0",
-        "rc-util": "^5.6.1"
+        "rc-util": "^5.21.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
+    "node_modules/rc-dialog/node_modules/rc-util": {
+      "version": "5.21.4",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.4.tgz",
+      "integrity": "sha512-rq11ap3NnOIdywFhcMQ9J7DXRJJ1c1Id1Hvr/1Dphr+5X75ERJBJybuh779DdurP4LJQqAhT6Aie0AjrBc5Vqw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "react-is": "^16.12.0",
+        "shallowequal": "^1.1.0"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -26013,26 +26046,27 @@
       }
     },
     "node_modules/rc-dropdown": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-3.2.5.tgz",
-      "integrity": "sha512-dVO2eulOSbEf+F4OyhCY5iGiMVhUYY/qeXxL7Ex2jDBt/xc89jU07mNoowV6aWxwVOc70pxEINff0oM2ogjluA==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-3.5.2.tgz",
+      "integrity": "sha512-Ty4LsXjkspZuFJSRx3blCLLCDicXM5qds6F1odgEa+jcjC+OJKHQGnvE4FqtoljPaqWm4wG78pbgXH6Ddh2DkA==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.6",
-        "rc-trigger": "^5.0.4"
+        "rc-trigger": "^5.0.4",
+        "rc-util": "^5.17.0"
       },
       "peerDependencies": {
-        "react": "*",
-        "react-dom": "*"
+        "react": ">=16.11.0",
+        "react-dom": ">=16.11.0"
       }
     },
     "node_modules/rc-field-form": {
-      "version": "1.23.1",
-      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.23.1.tgz",
-      "integrity": "sha512-Mun+eaFmX1Pjud9bz0fD0IvxwDfFKWk2Q8tkt4sg4aKR9/FML/rzYC5MjY77p86X45XBurBDUR3gAda+Cg/ULw==",
+      "version": "1.26.4",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.26.4.tgz",
+      "integrity": "sha512-eCCyiNNaN0NTYTyoziQHD4Fj6mUED21lWkw66vg+kttg0eDw+miD6LsaJbTD5c2bzKjUJTf10AitPG+f5zT4+A==",
       "dependencies": {
         "@babel/runtime": "^7.8.4",
-        "async-validator": "^4.0.2",
+        "async-validator": "^4.1.0",
         "rc-util": "^5.8.0"
       },
       "engines": {
@@ -26044,13 +26078,13 @@
       }
     },
     "node_modules/rc-image": {
-      "version": "5.2.5",
-      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-5.2.5.tgz",
-      "integrity": "sha512-qUfZjYIODxO0c8a8P5GeuclYXZjzW4hV/5hyo27XqSFo1DmTCs2HkVeQObkcIk5kNsJtgsj1KoPThVsSc/PXOw==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-5.6.2.tgz",
+      "integrity": "sha512-qhKOVvivCZkd6CrzS/4ST2+Auu16mtPSFVqVzwE7sELWfuvzcLGTzGv8UsVvm6qRNIz6SeaueUetqi4Ii16XQA==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "^2.2.6",
-        "rc-dialog": "~8.6.0",
+        "rc-dialog": "~8.8.0",
         "rc-util": "^5.0.6"
       },
       "peerDependencies": {
@@ -26058,6 +26092,20 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/rc-input": {
+      "version": "0.0.1-alpha.7",
+      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-0.0.1-alpha.7.tgz",
+      "integrity": "sha512-eozaqpCYWSY5LBMwlHgC01GArkVEP+XlJ84OMvdkwUnJBSv83Yxa15pZpn7vACAj84uDC4xOA2CoFdbLuqB08Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.18.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
     "node_modules/rc-input-number": {
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-7.3.4.tgz",
@@ -26072,14 +26120,28 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/rc-input/node_modules/rc-util": {
+      "version": "5.21.4",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.4.tgz",
+      "integrity": "sha512-rq11ap3NnOIdywFhcMQ9J7DXRJJ1c1Id1Hvr/1Dphr+5X75ERJBJybuh779DdurP4LJQqAhT6Aie0AjrBc5Vqw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "react-is": "^16.12.0",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/rc-mentions": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-1.6.5.tgz",
-      "integrity": "sha512-CUU4+q+awG2pA0l/tG2kPB2ytWbKQUkFxVeKwacr63w7crE/yjfzrFXxs/1fxhyEbQUWdAZt/L25QBieukYQ5w==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-1.7.1.tgz",
+      "integrity": "sha512-JbCS9bTqt6BYN2vfTPythlScLuc42rIlX85n7975RnkfawXlJjskHOlR3o8EpD4asl4KuA2jKTy0dj39DtSVqg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.6",
-        "rc-menu": "~9.3.2",
+        "rc-menu": "~9.5.1",
         "rc-textarea": "^0.3.0",
         "rc-trigger": "^5.0.4",
         "rc-util": "^5.0.1"
@@ -26089,28 +26151,10 @@
         "react-dom": ">=16.9.0"
       }
     },
-    "node_modules/rc-mentions/node_modules/rc-menu": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.3.2.tgz",
-      "integrity": "sha512-h3m45oY1INZyqphGELkdT0uiPnFzxkML8m0VMhJnk2fowtqfiT7F5tJLT3znEVaPIY80vMy1bClCkgq8U91CzQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "2.x",
-        "rc-motion": "^2.4.3",
-        "rc-overflow": "^1.2.0",
-        "rc-trigger": "^5.1.2",
-        "rc-util": "^5.12.0",
-        "shallowequal": "^1.1.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
     "node_modules/rc-menu": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.2.1.tgz",
-      "integrity": "sha512-UbEtn3rflJ8zS+etYGTVQuzy7Fm+yWXR5c0Rl6ecNTS/dPknRyWAyhJcbeR0Hu1+RdQT+0VCqrUPrgKnm4iY+w==",
+      "version": "9.5.5",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.5.5.tgz",
+      "integrity": "sha512-wj2y2BAKwSMyWXO3RBf9sNN5V+DFWxFl45Ma6qQEHA5nwwh7p07bNgc6AAJc+L1+LAz+rWz3AU8PYyT17hMHCw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -26126,13 +26170,13 @@
       }
     },
     "node_modules/rc-motion": {
-      "version": "2.4.9",
-      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.4.9.tgz",
-      "integrity": "sha512-lrIpBQQ5gIDVedaubnhXuTjC3zpW7HvC/34KyvcHlf6fBjuBlwv45PbonFhmk4Rgu7gLQYrKoMGgFVXqxxyLCw==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.0.tgz",
+      "integrity": "sha512-1MDWA9+i174CZ0SIDenSYm2Wb9YbRkrexjZWR0CUFu7D6f23E8Y0KsTgk9NGOLJsGak5ELZK/Y5lOlf5wQdzbw==",
       "dependencies": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
-        "rc-util": "^5.19.2"
+        "rc-util": "^5.21.0"
       },
       "peerDependencies": {
         "react": ">=16.9.0",
@@ -26154,14 +26198,14 @@
       }
     },
     "node_modules/rc-notification": {
-      "version": "4.5.7",
-      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-4.5.7.tgz",
-      "integrity": "sha512-zhTGUjBIItbx96SiRu3KVURcLOydLUHZCPpYEn1zvh+re//Tnq/wSxN4FKgp38n4HOgHSVxcLEeSxBMTeBBDdw==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-4.6.0.tgz",
+      "integrity": "sha512-xF3MKgIoynzjQAO4lqsoraiFo3UXNYlBfpHs0VWvwF+4pimen9/H1DYLN2mfRWhHovW6gRpla73m2nmyIqAMZQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
         "rc-motion": "^2.2.0",
-        "rc-util": "^5.0.1"
+        "rc-util": "^5.20.1"
       },
       "engines": {
         "node": ">=8.x"
@@ -26171,6 +26215,20 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/rc-notification/node_modules/rc-util": {
+      "version": "5.21.4",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.4.tgz",
+      "integrity": "sha512-rq11ap3NnOIdywFhcMQ9J7DXRJJ1c1Id1Hvr/1Dphr+5X75ERJBJybuh779DdurP4LJQqAhT6Aie0AjrBc5Vqw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "react-is": "^16.12.0",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/rc-overflow": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/rc-overflow/-/rc-overflow-1.2.4.tgz",
@@ -26214,9 +26272,9 @@
       }
     },
     "node_modules/rc-picker": {
-      "version": "2.5.19",
-      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-2.5.19.tgz",
-      "integrity": "sha512-u6myoCu/qiQ0vLbNzSzNrzTQhs7mldArCpPHrEI6OUiifs+IPXmbesqSm0zilJjfzrZJLgYeyyOMSznSlh0GKA==",
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-2.6.9.tgz",
+      "integrity": "sha512-yH3UYXCADf7REtOAB5cwe1cyFKtB0p204RCN8JdZGG4uuSOZ1IPTkk/GJS6HOpxspZeJCLGzzajuQMDwck9dsw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.1",
@@ -26281,10 +26339,25 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/rc-segmented": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/rc-segmented/-/rc-segmented-2.1.0.tgz",
+      "integrity": "sha512-hUlonro+pYoZcwrH6Vm56B2ftLfQh046hrwif/VwLIw1j3zGt52p5mREBwmeVzXnSwgnagpOpfafspzs1asjGw==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-motion": "^2.4.4",
+        "rc-util": "^5.17.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.0.0",
+        "react-dom": ">=16.0.0"
+      }
+    },
     "node_modules/rc-select": {
-      "version": "14.0.6",
-      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.0.6.tgz",
-      "integrity": "sha512-HMb2BwfTvBxMmIWTR/afP4bcRJLbVKFSBW/VFfL5Z+kdV2XlrYdlliK2uHY7pRRvW16PPGwmOwGfV+eoulPINw==",
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.1.2.tgz",
+      "integrity": "sha512-/QgarL/T/d7MIPcoRmTca2TWHBoHBM1EQIgdaFmvl3qsYRSbrb8NpWcQuJoc9fprXERWxdYSTUThQObHvdEVBQ==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -26303,14 +26376,14 @@
       }
     },
     "node_modules/rc-slider": {
-      "version": "9.7.5",
-      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.7.5.tgz",
-      "integrity": "sha512-LV/MWcXFjco1epPbdw1JlLXlTgmWpB9/Y/P2yinf8Pg3wElHxA9uajN21lJiWtZjf5SCUekfSP6QMJfDo4t1hg==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.0.0.tgz",
+      "integrity": "sha512-Bk54UIKWW4wyhHcL8ehAxt+wX+n69dscnHTX6Uv0FMxSke/TGrlkZz1LSIWblCpfE2zr/dwR2Ca8nZGk3U+Tbg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.5",
         "rc-tooltip": "^5.0.1",
-        "rc-util": "^5.16.1",
+        "rc-util": "^5.18.1",
         "shallowequal": "^1.1.0"
       },
       "engines": {
@@ -26321,6 +26394,20 @@
         "react-dom": ">=16.9.0"
       }
     },
+    "node_modules/rc-slider/node_modules/rc-util": {
+      "version": "5.21.4",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.4.tgz",
+      "integrity": "sha512-rq11ap3NnOIdywFhcMQ9J7DXRJJ1c1Id1Hvr/1Dphr+5X75ERJBJybuh779DdurP4LJQqAhT6Aie0AjrBc5Vqw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "react-is": "^16.12.0",
+        "shallowequal": "^1.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.9.0",
+        "react-dom": ">=16.9.0"
+      }
+    },
     "node_modules/rc-steps": {
       "version": "4.1.4",
       "resolved": "https://registry.npmjs.org/rc-steps/-/rc-steps-4.1.4.tgz",
@@ -26353,9 +26440,9 @@
       }
     },
     "node_modules/rc-table": {
-      "version": "7.23.2",
-      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.23.2.tgz",
-      "integrity": "sha512-opc2IBJOetsPSdNI+u1Lh9yY4Ks+EMgo1oJzZN+yIV4fRcgP81tHtxdPOVvXPFI4rUMO8CKnmHbGPU7jxMRAeg==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.24.1.tgz",
+      "integrity": "sha512-DRWpv5z5pmOaTmy5GqWoskeV1thaOu5HuD+2f61b/CkbBqlgJR3cygc5R/Qvd2uVW6pHU0lYulhmz0VLVFm+rw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.5",
@@ -26372,14 +26459,14 @@
       }
     },
     "node_modules/rc-tabs": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-11.10.8.tgz",
-      "integrity": "sha512-uK+x+eJ8WM4jiXoqGa+P+JUQX2Wlkj9f0o/5dyOw42B6YLnHJN80uTVcCeAmtA1N0xjPW0GNSZvUm4SU3jAYpw==",
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-11.13.0.tgz",
+      "integrity": "sha512-aUw1Pq0B1a2zGX4o/m3yrQycZcCLgDp6gKwn8IAU07q148RRONsVGxi0oLVVe5SE51kOB+j0bk1RX43ZBdZNgA==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
-        "rc-dropdown": "^3.2.0",
-        "rc-menu": "~9.3.2",
+        "rc-dropdown": "~3.5.0",
+        "rc-menu": "~9.5.1",
         "rc-resize-observer": "^1.0.0",
         "rc-util": "^5.5.0"
       },
@@ -26391,24 +26478,6 @@
         "react-dom": ">=16.9.0"
       }
     },
-    "node_modules/rc-tabs/node_modules/rc-menu": {
-      "version": "9.3.2",
-      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.3.2.tgz",
-      "integrity": "sha512-h3m45oY1INZyqphGELkdT0uiPnFzxkML8m0VMhJnk2fowtqfiT7F5tJLT3znEVaPIY80vMy1bClCkgq8U91CzQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.10.1",
-        "classnames": "2.x",
-        "rc-motion": "^2.4.3",
-        "rc-overflow": "^1.2.0",
-        "rc-trigger": "^5.1.2",
-        "rc-util": "^5.12.0",
-        "shallowequal": "^1.1.0"
-      },
-      "peerDependencies": {
-        "react": ">=16.9.0",
-        "react-dom": ">=16.9.0"
-      }
-    },
     "node_modules/rc-textarea": {
       "version": "0.3.7",
       "resolved": "https://registry.npmjs.org/rc-textarea/-/rc-textarea-0.3.7.tgz",
@@ -26439,9 +26508,9 @@
       }
     },
     "node_modules/rc-tree": {
-      "version": "5.4.4",
-      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.4.4.tgz",
-      "integrity": "sha512-2qoObRgp31DBXmVzMJmo4qmwP20XEa4hR3imWQtRPcgN3pmljW3WKFmZRrYdOFHz7CyTnRsFZR065bBkIoUpiA==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.5.0.tgz",
+      "integrity": "sha512-vpKeFsDyj7weik8UPseCTaSNAPt939qn1dQd8goSbRDajbjJEja0v/WFXyRhOiF1HLemNTfqMz4MYc9qlqyNXg==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -26458,14 +26527,14 @@
       }
     },
     "node_modules/rc-tree-select": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.1.5.tgz",
-      "integrity": "sha512-OXAwCFO0pQmb48NcjUJtiX6rp4FroCXMfzqPmuVVoBGBV/uwO1TPyb+uBZ2/972zkCA8u4je5M5Qx51sL8y7jg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.3.0.tgz",
+      "integrity": "sha512-UN6CUBulmch+CsihnJ73+DtWijEB1hVTC8sdVxq6E0teVAkHQZUvDj+cwZShtShAKvWwXy73PZ1hIHEUrmVcKw==",
       "dependencies": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
-        "rc-select": "~14.0.0-alpha.8",
-        "rc-tree": "~5.4.3",
+        "rc-select": "~14.1.0",
+        "rc-tree": "~5.5.0",
         "rc-util": "^5.16.1"
       },
       "peerDependencies": {
@@ -26474,9 +26543,9 @@
       }
     },
     "node_modules/rc-trigger": {
-      "version": "5.2.16",
-      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.2.16.tgz",
-      "integrity": "sha512-vIM1HsTUpm9Ljeudy38K2+W6kjwD950YU6Wn4zR8ECNV0YsThvqgcpZ0VpF9vxZqxZ/sgvQ4bELxpqwFXGaLxg==",
+      "version": "5.2.18",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.2.18.tgz",
+      "integrity": "sha512-hi2yZ7umtbAGLxgSph1az9BR9i4Pb4fiQa4pdvFQuKN7U//3nwwygHQKHfexnM+0APBnzZwVlEHA5I8BpWrygw==",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
         "classnames": "^2.2.6",
@@ -26493,9 +26562,9 @@
       }
     },
     "node_modules/rc-trigger/node_modules/rc-util": {
-      "version": "5.21.0",
-      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.0.tgz",
-      "integrity": "sha512-5THhvHk69Mqfn9CHoqOWKFjfOrJop0364bT2NU8baMthJCiyfJs3SyDfJJbKZqw9LHhw17eMpat3g4WVFmLIng==",
+      "version": "5.21.4",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.4.tgz",
+      "integrity": "sha512-rq11ap3NnOIdywFhcMQ9J7DXRJJ1c1Id1Hvr/1Dphr+5X75ERJBJybuh779DdurP4LJQqAhT6Aie0AjrBc5Vqw==",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
         "react-is": "^16.12.0",
@@ -26535,9 +26604,9 @@
       }
     },
     "node_modules/rc-virtual-list": {
-      "version": "3.4.6",
-      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.4.6.tgz",
-      "integrity": "sha512-wMJ7Bl+AxgIDojp0VxuQxjpNulKodwxGXSsTyxA9Mwzwemj5vKAgTbkPT64ZW5ORf8FOQAaPRlMiTADrPEo3sQ==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.4.7.tgz",
+      "integrity": "sha512-PhV8a8g/L9sCmWcmXizzwW7QdqsxK4ebHU6fA9OsUIR7isFdx2bTGU2iAUdRV4teiIF1ZHF3gSQh8NtAxrXh6A==",
       "dependencies": {
         "classnames": "^2.2.6",
         "rc-resize-observer": "^1.0.0",
@@ -41153,9 +41222,9 @@
       }
     },
     "antd": {
-      "version": "4.18.9",
-      "resolved": "https://registry.npmjs.org/antd/-/antd-4.18.9.tgz",
-      "integrity": "sha512-MbtFY2J8LvXUnxYH2QehdhP9qMEpHvOp7PmiTIHc7v6aSb+LILCibskRIMGNEKvvhBvsTdq0cnjanR9/IbqEAw==",
+      "version": "4.20.4",
+      "resolved": "https://registry.npmjs.org/antd/-/antd-4.20.4.tgz",
+      "integrity": "sha512-xtaMNuRvumMXQLsoAwiQRY5rEJVRtJGumby3aPIJdWXwBtZ7eDDuXbT/Uo8xT8rTND0cK5rRQlxMyisCJrZD9Q==",
       "requires": {
         "@ant-design/colors": "^6.0.0",
         "@ant-design/icons": "^4.7.0",
@@ -41166,39 +41235,53 @@
         "copy-to-clipboard": "^3.2.0",
         "lodash": "^4.17.21",
         "memoize-one": "^6.0.0",
-        "moment": "^2.25.3",
-        "rc-cascader": "~3.2.1",
+        "moment": "^2.29.2",
+        "rc-cascader": "~3.5.0",
         "rc-checkbox": "~2.3.0",
         "rc-collapse": "~3.1.0",
-        "rc-dialog": "~8.6.0",
+        "rc-dialog": "~8.8.1",
         "rc-drawer": "~4.4.2",
-        "rc-dropdown": "~3.2.5",
-        "rc-field-form": "~1.23.0",
-        "rc-image": "~5.2.5",
+        "rc-dropdown": "~3.5.0",
+        "rc-field-form": "~1.26.1",
+        "rc-image": "~5.6.0",
+        "rc-input": "~0.0.1-alpha.5",
         "rc-input-number": "~7.3.0",
-        "rc-mentions": "~1.6.1",
-        "rc-menu": "~9.2.1",
-        "rc-motion": "^2.4.4",
-        "rc-notification": "~4.5.7",
+        "rc-mentions": "~1.7.0",
+        "rc-menu": "~9.5.5",
+        "rc-motion": "^2.5.1",
+        "rc-notification": "~4.6.0",
         "rc-pagination": "~3.1.9",
-        "rc-picker": "~2.5.17",
+        "rc-picker": "~2.6.4",
         "rc-progress": "~3.2.1",
         "rc-rate": "~2.9.0",
         "rc-resize-observer": "^1.2.0",
-        "rc-select": "~14.0.0-alpha.15",
-        "rc-slider": "~9.7.4",
+        "rc-segmented": "~2.1.0 ",
+        "rc-select": "~14.1.1",
+        "rc-slider": "~10.0.0",
         "rc-steps": "~4.1.0",
         "rc-switch": "~3.2.0",
-        "rc-table": "~7.23.0",
-        "rc-tabs": "~11.10.0",
+        "rc-table": "~7.24.0",
+        "rc-tabs": "~11.13.0",
         "rc-textarea": "~0.3.0",
         "rc-tooltip": "~5.1.1",
-        "rc-tree": "~5.4.3",
-        "rc-tree-select": "~5.1.1",
+        "rc-tree": "~5.5.0",
+        "rc-tree-select": "~5.3.0",
         "rc-trigger": "^5.2.10",
         "rc-upload": "~4.3.0",
-        "rc-util": "^5.14.0",
+        "rc-util": "^5.20.0",
         "scroll-into-view-if-needed": "^2.2.25"
+      },
+      "dependencies": {
+        "rc-util": {
+          "version": "5.21.4",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.4.tgz",
+          "integrity": "sha512-rq11ap3NnOIdywFhcMQ9J7DXRJJ1c1Id1Hvr/1Dphr+5X75ERJBJybuh779DdurP4LJQqAhT6Aie0AjrBc5Vqw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
       }
     },
     "anymatch": {
@@ -41416,9 +41499,9 @@
       "dev": true
     },
     "async-validator": {
-      "version": "4.0.7",
-      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.0.7.tgz",
-      "integrity": "sha512-Pj2IR7u8hmUEDOwB++su6baaRi+QvsgajuFB9j95foM1N2gy5HM4z60hfusIO0fBPG5uLAEl6yCJr1jNSVugEQ=="
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-4.1.1.tgz",
+      "integrity": "sha512-p4DO/JXwjs8klJyJL8Q2oM4ks5fUTze/h5k10oPPKMiLe1fj3G1QMzPHNmN1Py4ycOk7WlO2DcGXv1qiESJCZA=="
     },
     "asynckit": {
       "version": "0.4.0",
@@ -43655,9 +43738,9 @@
       "integrity": "sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw=="
     },
     "dayjs": {
-      "version": "1.11.1",
-      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.1.tgz",
-      "integrity": "sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA=="
+      "version": "1.11.2",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.2.tgz",
+      "integrity": "sha512-F4LXf1OeU9hrSYRPTTj/6FbO4HTjPKXvEIC1P2kcnFurViINCVk3ZV0xAS3XVx9MkMsXbbqlK6hjseaYbgKEHw=="
     },
     "debug": {
       "version": "4.3.4",
@@ -43877,9 +43960,9 @@
       "dev": true
     },
     "dom-align": {
-      "version": "1.12.2",
-      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.2.tgz",
-      "integrity": "sha512-pHuazgqrsTFrGU2WLDdXxCFabkdQDx72ddkraZNih1KsMcN5qsRSTR9O4VJRlwTPCPb5COYg3LOfiMHHcPInHg=="
+      "version": "1.12.3",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.3.tgz",
+      "integrity": "sha512-Gj9hZN3a07cbR6zviMUBOMPdWxYhbMI+x+WS0NAIu2zFZmbK8ys9R79g+iG9qLnlCwpFoaB+fKy8Pdv470GsPA=="
     },
     "dom-converter": {
       "version": "0.2.0",
@@ -51431,9 +51514,9 @@
       "dev": true
     },
     "prettier": {
-      "version": "2.5.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
-      "integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.6.2.tgz",
+      "integrity": "sha512-PkUpF+qoXTqhOeWL9fu7As8LXsIUZ1WYaJiY/a7McAQzxjk82OF0tibkFXVCDImZtWxbvojFjerkiLb0/q8mew==",
       "dev": true
     },
     "prettier-linter-helpers": {
@@ -51832,9 +51915,9 @@
       }
     },
     "rc-align": {
-      "version": "4.0.11",
-      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.11.tgz",
-      "integrity": "sha512-n9mQfIYQbbNTbefyQnRHZPWuTEwG1rY4a9yKlIWHSTbgwI+XUMGRYd0uJ5pE2UbrNX0WvnMBA1zJ3Lrecpra/A==",
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.12.tgz",
+      "integrity": "sha512-3DuwSJp8iC/dgHzwreOQl52soj40LchlfUHtgACOUtwGuoFIOVh6n/sCpfqCU8kO5+iz6qR0YKvjgB8iPdE3aQ==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -51845,15 +51928,15 @@
       }
     },
     "rc-cascader": {
-      "version": "3.2.9",
-      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.2.9.tgz",
-      "integrity": "sha512-Mvkegzf506PD7qc38kg2tGllIBXs5dio3DPg+NER7SiOfCXBCATWYEs0CbUp8JDQgYHoHF0vPvFMYtxFTJuWaw==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/rc-cascader/-/rc-cascader-3.5.0.tgz",
+      "integrity": "sha512-rpXnWCfvk7Frh2dBzMoA0c7i0nn6aJU7L2NZo8R8pNkrT0sKgytQSpdtPWP+Pq8IkvwbEd8BU8Z8OnOljcqgZg==",
       "requires": {
         "@babel/runtime": "^7.12.5",
         "array-tree-filter": "^2.1.0",
         "classnames": "^2.3.1",
-        "rc-select": "~14.0.0-alpha.23",
-        "rc-tree": "~5.4.3",
+        "rc-select": "~14.1.0",
+        "rc-tree": "~5.5.0",
         "rc-util": "^5.6.1"
       }
     },
@@ -51879,14 +51962,26 @@
       }
     },
     "rc-dialog": {
-      "version": "8.6.0",
-      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-8.6.0.tgz",
-      "integrity": "sha512-GSbkfqjqxpZC5/zc+8H332+q5l/DKUhpQr0vdX2uDsxo5K0PhvaMEVjyoJUTkZ3+JstEADQji1PVLVb/2bJeOQ==",
+      "version": "8.8.1",
+      "resolved": "https://registry.npmjs.org/rc-dialog/-/rc-dialog-8.8.1.tgz",
+      "integrity": "sha512-7M1WKZCjfIABKEaJVskdYvb80z+RX7I11PeSjPVfLOOaJAmIepvDEd0alBtOZvOL3fZFWlMs4JVZtp9LZgONxA==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.6",
         "rc-motion": "^2.3.0",
-        "rc-util": "^5.6.1"
+        "rc-util": "^5.21.0"
+      },
+      "dependencies": {
+        "rc-util": {
+          "version": "5.21.4",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.4.tgz",
+          "integrity": "sha512-rq11ap3NnOIdywFhcMQ9J7DXRJJ1c1Id1Hvr/1Dphr+5X75ERJBJybuh779DdurP4LJQqAhT6Aie0AjrBc5Vqw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
       }
     },
     "rc-drawer": {
@@ -51900,36 +51995,59 @@
       }
     },
     "rc-dropdown": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-3.2.5.tgz",
-      "integrity": "sha512-dVO2eulOSbEf+F4OyhCY5iGiMVhUYY/qeXxL7Ex2jDBt/xc89jU07mNoowV6aWxwVOc70pxEINff0oM2ogjluA==",
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/rc-dropdown/-/rc-dropdown-3.5.2.tgz",
+      "integrity": "sha512-Ty4LsXjkspZuFJSRx3blCLLCDicXM5qds6F1odgEa+jcjC+OJKHQGnvE4FqtoljPaqWm4wG78pbgXH6Ddh2DkA==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.6",
-        "rc-trigger": "^5.0.4"
+        "rc-trigger": "^5.0.4",
+        "rc-util": "^5.17.0"
       }
     },
     "rc-field-form": {
-      "version": "1.23.1",
-      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.23.1.tgz",
-      "integrity": "sha512-Mun+eaFmX1Pjud9bz0fD0IvxwDfFKWk2Q8tkt4sg4aKR9/FML/rzYC5MjY77p86X45XBurBDUR3gAda+Cg/ULw==",
+      "version": "1.26.4",
+      "resolved": "https://registry.npmjs.org/rc-field-form/-/rc-field-form-1.26.4.tgz",
+      "integrity": "sha512-eCCyiNNaN0NTYTyoziQHD4Fj6mUED21lWkw66vg+kttg0eDw+miD6LsaJbTD5c2bzKjUJTf10AitPG+f5zT4+A==",
       "requires": {
         "@babel/runtime": "^7.8.4",
-        "async-validator": "^4.0.2",
+        "async-validator": "^4.1.0",
         "rc-util": "^5.8.0"
       }
     },
     "rc-image": {
-      "version": "5.2.5",
-      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-5.2.5.tgz",
-      "integrity": "sha512-qUfZjYIODxO0c8a8P5GeuclYXZjzW4hV/5hyo27XqSFo1DmTCs2HkVeQObkcIk5kNsJtgsj1KoPThVsSc/PXOw==",
+      "version": "5.6.2",
+      "resolved": "https://registry.npmjs.org/rc-image/-/rc-image-5.6.2.tgz",
+      "integrity": "sha512-qhKOVvivCZkd6CrzS/4ST2+Auu16mtPSFVqVzwE7sELWfuvzcLGTzGv8UsVvm6qRNIz6SeaueUetqi4Ii16XQA==",
       "requires": {
         "@babel/runtime": "^7.11.2",
         "classnames": "^2.2.6",
-        "rc-dialog": "~8.6.0",
+        "rc-dialog": "~8.8.0",
         "rc-util": "^5.0.6"
       }
     },
+    "rc-input": {
+      "version": "0.0.1-alpha.7",
+      "resolved": "https://registry.npmjs.org/rc-input/-/rc-input-0.0.1-alpha.7.tgz",
+      "integrity": "sha512-eozaqpCYWSY5LBMwlHgC01GArkVEP+XlJ84OMvdkwUnJBSv83Yxa15pZpn7vACAj84uDC4xOA2CoFdbLuqB08Q==",
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.18.1"
+      },
+      "dependencies": {
+        "rc-util": {
+          "version": "5.21.4",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.4.tgz",
+          "integrity": "sha512-rq11ap3NnOIdywFhcMQ9J7DXRJJ1c1Id1Hvr/1Dphr+5X75ERJBJybuh779DdurP4LJQqAhT6Aie0AjrBc5Vqw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
+      }
+    },
     "rc-input-number": {
       "version": "7.3.4",
       "resolved": "https://registry.npmjs.org/rc-input-number/-/rc-input-number-7.3.4.tgz",
@@ -51941,38 +52059,22 @@
       }
     },
     "rc-mentions": {
-      "version": "1.6.5",
-      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-1.6.5.tgz",
-      "integrity": "sha512-CUU4+q+awG2pA0l/tG2kPB2ytWbKQUkFxVeKwacr63w7crE/yjfzrFXxs/1fxhyEbQUWdAZt/L25QBieukYQ5w==",
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/rc-mentions/-/rc-mentions-1.7.1.tgz",
+      "integrity": "sha512-JbCS9bTqt6BYN2vfTPythlScLuc42rIlX85n7975RnkfawXlJjskHOlR3o8EpD4asl4KuA2jKTy0dj39DtSVqg==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.6",
-        "rc-menu": "~9.3.2",
+        "rc-menu": "~9.5.1",
         "rc-textarea": "^0.3.0",
         "rc-trigger": "^5.0.4",
         "rc-util": "^5.0.1"
-      },
-      "dependencies": {
-        "rc-menu": {
-          "version": "9.3.2",
-          "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.3.2.tgz",
-          "integrity": "sha512-h3m45oY1INZyqphGELkdT0uiPnFzxkML8m0VMhJnk2fowtqfiT7F5tJLT3znEVaPIY80vMy1bClCkgq8U91CzQ==",
-          "requires": {
-            "@babel/runtime": "^7.10.1",
-            "classnames": "2.x",
-            "rc-motion": "^2.4.3",
-            "rc-overflow": "^1.2.0",
-            "rc-trigger": "^5.1.2",
-            "rc-util": "^5.12.0",
-            "shallowequal": "^1.1.0"
-          }
-        }
       }
     },
     "rc-menu": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.2.1.tgz",
-      "integrity": "sha512-UbEtn3rflJ8zS+etYGTVQuzy7Fm+yWXR5c0Rl6ecNTS/dPknRyWAyhJcbeR0Hu1+RdQT+0VCqrUPrgKnm4iY+w==",
+      "version": "9.5.5",
+      "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.5.5.tgz",
+      "integrity": "sha512-wj2y2BAKwSMyWXO3RBf9sNN5V+DFWxFl45Ma6qQEHA5nwwh7p07bNgc6AAJc+L1+LAz+rWz3AU8PYyT17hMHCw==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -51984,13 +52086,13 @@
       }
     },
     "rc-motion": {
-      "version": "2.4.9",
-      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.4.9.tgz",
-      "integrity": "sha512-lrIpBQQ5gIDVedaubnhXuTjC3zpW7HvC/34KyvcHlf6fBjuBlwv45PbonFhmk4Rgu7gLQYrKoMGgFVXqxxyLCw==",
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.6.0.tgz",
+      "integrity": "sha512-1MDWA9+i174CZ0SIDenSYm2Wb9YbRkrexjZWR0CUFu7D6f23E8Y0KsTgk9NGOLJsGak5ELZK/Y5lOlf5wQdzbw==",
       "requires": {
         "@babel/runtime": "^7.11.1",
         "classnames": "^2.2.1",
-        "rc-util": "^5.19.2"
+        "rc-util": "^5.21.0"
       },
       "dependencies": {
         "rc-util": {
@@ -52006,14 +52108,26 @@
       }
     },
     "rc-notification": {
-      "version": "4.5.7",
-      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-4.5.7.tgz",
-      "integrity": "sha512-zhTGUjBIItbx96SiRu3KVURcLOydLUHZCPpYEn1zvh+re//Tnq/wSxN4FKgp38n4HOgHSVxcLEeSxBMTeBBDdw==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/rc-notification/-/rc-notification-4.6.0.tgz",
+      "integrity": "sha512-xF3MKgIoynzjQAO4lqsoraiFo3UXNYlBfpHs0VWvwF+4pimen9/H1DYLN2mfRWhHovW6gRpla73m2nmyIqAMZQ==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
         "rc-motion": "^2.2.0",
-        "rc-util": "^5.0.1"
+        "rc-util": "^5.20.1"
+      },
+      "dependencies": {
+        "rc-util": {
+          "version": "5.21.4",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.4.tgz",
+          "integrity": "sha512-rq11ap3NnOIdywFhcMQ9J7DXRJJ1c1Id1Hvr/1Dphr+5X75ERJBJybuh779DdurP4LJQqAhT6Aie0AjrBc5Vqw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
       }
     },
     "rc-overflow": {
@@ -52049,9 +52163,9 @@
       }
     },
     "rc-picker": {
-      "version": "2.5.19",
-      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-2.5.19.tgz",
-      "integrity": "sha512-u6myoCu/qiQ0vLbNzSzNrzTQhs7mldArCpPHrEI6OUiifs+IPXmbesqSm0zilJjfzrZJLgYeyyOMSznSlh0GKA==",
+      "version": "2.6.9",
+      "resolved": "https://registry.npmjs.org/rc-picker/-/rc-picker-2.6.9.tgz",
+      "integrity": "sha512-yH3UYXCADf7REtOAB5cwe1cyFKtB0p204RCN8JdZGG4uuSOZ1IPTkk/GJS6HOpxspZeJCLGzzajuQMDwck9dsw==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.1",
@@ -52094,10 +52208,21 @@
         "resize-observer-polyfill": "^1.5.1"
       }
     },
+    "rc-segmented": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/rc-segmented/-/rc-segmented-2.1.0.tgz",
+      "integrity": "sha512-hUlonro+pYoZcwrH6Vm56B2ftLfQh046hrwif/VwLIw1j3zGt52p5mREBwmeVzXnSwgnagpOpfafspzs1asjGw==",
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-motion": "^2.4.4",
+        "rc-util": "^5.17.0"
+      }
+    },
     "rc-select": {
-      "version": "14.0.6",
-      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.0.6.tgz",
-      "integrity": "sha512-HMb2BwfTvBxMmIWTR/afP4bcRJLbVKFSBW/VFfL5Z+kdV2XlrYdlliK2uHY7pRRvW16PPGwmOwGfV+eoulPINw==",
+      "version": "14.1.2",
+      "resolved": "https://registry.npmjs.org/rc-select/-/rc-select-14.1.2.tgz",
+      "integrity": "sha512-/QgarL/T/d7MIPcoRmTca2TWHBoHBM1EQIgdaFmvl3qsYRSbrb8NpWcQuJoc9fprXERWxdYSTUThQObHvdEVBQ==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -52109,15 +52234,27 @@
       }
     },
     "rc-slider": {
-      "version": "9.7.5",
-      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.7.5.tgz",
-      "integrity": "sha512-LV/MWcXFjco1epPbdw1JlLXlTgmWpB9/Y/P2yinf8Pg3wElHxA9uajN21lJiWtZjf5SCUekfSP6QMJfDo4t1hg==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-10.0.0.tgz",
+      "integrity": "sha512-Bk54UIKWW4wyhHcL8ehAxt+wX+n69dscnHTX6Uv0FMxSke/TGrlkZz1LSIWblCpfE2zr/dwR2Ca8nZGk3U+Tbg==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.5",
         "rc-tooltip": "^5.0.1",
-        "rc-util": "^5.16.1",
+        "rc-util": "^5.18.1",
         "shallowequal": "^1.1.0"
+      },
+      "dependencies": {
+        "rc-util": {
+          "version": "5.21.4",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.4.tgz",
+          "integrity": "sha512-rq11ap3NnOIdywFhcMQ9J7DXRJJ1c1Id1Hvr/1Dphr+5X75ERJBJybuh779DdurP4LJQqAhT6Aie0AjrBc5Vqw==",
+          "requires": {
+            "@babel/runtime": "^7.12.5",
+            "react-is": "^16.12.0",
+            "shallowequal": "^1.1.0"
+          }
+        }
       }
     },
     "rc-steps": {
@@ -52141,9 +52278,9 @@
       }
     },
     "rc-table": {
-      "version": "7.23.2",
-      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.23.2.tgz",
-      "integrity": "sha512-opc2IBJOetsPSdNI+u1Lh9yY4Ks+EMgo1oJzZN+yIV4fRcgP81tHtxdPOVvXPFI4rUMO8CKnmHbGPU7jxMRAeg==",
+      "version": "7.24.1",
+      "resolved": "https://registry.npmjs.org/rc-table/-/rc-table-7.24.1.tgz",
+      "integrity": "sha512-DRWpv5z5pmOaTmy5GqWoskeV1thaOu5HuD+2f61b/CkbBqlgJR3cygc5R/Qvd2uVW6pHU0lYulhmz0VLVFm+rw==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "^2.2.5",
@@ -52153,32 +52290,16 @@
       }
     },
     "rc-tabs": {
-      "version": "11.10.8",
-      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-11.10.8.tgz",
-      "integrity": "sha512-uK+x+eJ8WM4jiXoqGa+P+JUQX2Wlkj9f0o/5dyOw42B6YLnHJN80uTVcCeAmtA1N0xjPW0GNSZvUm4SU3jAYpw==",
+      "version": "11.13.0",
+      "resolved": "https://registry.npmjs.org/rc-tabs/-/rc-tabs-11.13.0.tgz",
+      "integrity": "sha512-aUw1Pq0B1a2zGX4o/m3yrQycZcCLgDp6gKwn8IAU07q148RRONsVGxi0oLVVe5SE51kOB+j0bk1RX43ZBdZNgA==",
       "requires": {
         "@babel/runtime": "^7.11.2",
         "classnames": "2.x",
-        "rc-dropdown": "^3.2.0",
-        "rc-menu": "~9.3.2",
+        "rc-dropdown": "~3.5.0",
+        "rc-menu": "~9.5.1",
         "rc-resize-observer": "^1.0.0",
         "rc-util": "^5.5.0"
-      },
-      "dependencies": {
-        "rc-menu": {
-          "version": "9.3.2",
-          "resolved": "https://registry.npmjs.org/rc-menu/-/rc-menu-9.3.2.tgz",
-          "integrity": "sha512-h3m45oY1INZyqphGELkdT0uiPnFzxkML8m0VMhJnk2fowtqfiT7F5tJLT3znEVaPIY80vMy1bClCkgq8U91CzQ==",
-          "requires": {
-            "@babel/runtime": "^7.10.1",
-            "classnames": "2.x",
-            "rc-motion": "^2.4.3",
-            "rc-overflow": "^1.2.0",
-            "rc-trigger": "^5.1.2",
-            "rc-util": "^5.12.0",
-            "shallowequal": "^1.1.0"
-          }
-        }
       }
     },
     "rc-textarea": {
@@ -52203,9 +52324,9 @@
       }
     },
     "rc-tree": {
-      "version": "5.4.4",
-      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.4.4.tgz",
-      "integrity": "sha512-2qoObRgp31DBXmVzMJmo4qmwP20XEa4hR3imWQtRPcgN3pmljW3WKFmZRrYdOFHz7CyTnRsFZR065bBkIoUpiA==",
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/rc-tree/-/rc-tree-5.5.0.tgz",
+      "integrity": "sha512-vpKeFsDyj7weik8UPseCTaSNAPt939qn1dQd8goSbRDajbjJEja0v/WFXyRhOiF1HLemNTfqMz4MYc9qlqyNXg==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
@@ -52215,21 +52336,21 @@
       }
     },
     "rc-tree-select": {
-      "version": "5.1.5",
-      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.1.5.tgz",
-      "integrity": "sha512-OXAwCFO0pQmb48NcjUJtiX6rp4FroCXMfzqPmuVVoBGBV/uwO1TPyb+uBZ2/972zkCA8u4je5M5Qx51sL8y7jg==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/rc-tree-select/-/rc-tree-select-5.3.0.tgz",
+      "integrity": "sha512-UN6CUBulmch+CsihnJ73+DtWijEB1hVTC8sdVxq6E0teVAkHQZUvDj+cwZShtShAKvWwXy73PZ1hIHEUrmVcKw==",
       "requires": {
         "@babel/runtime": "^7.10.1",
         "classnames": "2.x",
-        "rc-select": "~14.0.0-alpha.8",
-        "rc-tree": "~5.4.3",
+        "rc-select": "~14.1.0",
+        "rc-tree": "~5.5.0",
         "rc-util": "^5.16.1"
       }
     },
     "rc-trigger": {
-      "version": "5.2.16",
-      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.2.16.tgz",
-      "integrity": "sha512-vIM1HsTUpm9Ljeudy38K2+W6kjwD950YU6Wn4zR8ECNV0YsThvqgcpZ0VpF9vxZqxZ/sgvQ4bELxpqwFXGaLxg==",
+      "version": "5.2.18",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.2.18.tgz",
+      "integrity": "sha512-hi2yZ7umtbAGLxgSph1az9BR9i4Pb4fiQa4pdvFQuKN7U//3nwwygHQKHfexnM+0APBnzZwVlEHA5I8BpWrygw==",
       "requires": {
         "@babel/runtime": "^7.11.2",
         "classnames": "^2.2.6",
@@ -52239,9 +52360,9 @@
       },
       "dependencies": {
         "rc-util": {
-          "version": "5.21.0",
-          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.0.tgz",
-          "integrity": "sha512-5THhvHk69Mqfn9CHoqOWKFjfOrJop0364bT2NU8baMthJCiyfJs3SyDfJJbKZqw9LHhw17eMpat3g4WVFmLIng==",
+          "version": "5.21.4",
+          "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.21.4.tgz",
+          "integrity": "sha512-rq11ap3NnOIdywFhcMQ9J7DXRJJ1c1Id1Hvr/1Dphr+5X75ERJBJybuh779DdurP4LJQqAhT6Aie0AjrBc5Vqw==",
           "requires": {
             "@babel/runtime": "^7.12.5",
             "react-is": "^16.12.0",
@@ -52271,9 +52392,9 @@
       }
     },
     "rc-virtual-list": {
-      "version": "3.4.6",
-      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.4.6.tgz",
-      "integrity": "sha512-wMJ7Bl+AxgIDojp0VxuQxjpNulKodwxGXSsTyxA9Mwzwemj5vKAgTbkPT64ZW5ORf8FOQAaPRlMiTADrPEo3sQ==",
+      "version": "3.4.7",
+      "resolved": "https://registry.npmjs.org/rc-virtual-list/-/rc-virtual-list-3.4.7.tgz",
+      "integrity": "sha512-PhV8a8g/L9sCmWcmXizzwW7QdqsxK4ebHU6fA9OsUIR7isFdx2bTGU2iAUdRV4teiIF1ZHF3gSQh8NtAxrXh6A==",
       "requires": {
         "classnames": "^2.2.6",
         "rc-resize-observer": "^1.0.0",
diff --git a/web/package.json b/web/package.json
index 9a6a20509..e3a3a5ed1 100644
--- a/web/package.json
+++ b/web/package.json
@@ -15,7 +15,7 @@
     "@ant-design/icons": "4.7.0",
     "@emoji-mart/data": "^1.0.1",
     "@storybook/react": "^6.4.22",
-    "antd": "4.18.9",
+    "antd": "^4.20.4",
     "autoprefixer": "^10.4.4",
     "chart.js": "3.7.0",
     "chartkick": "4.1.1",
@@ -85,7 +85,7 @@
     "html-webpack-plugin": "^5.5.0",
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
-    "prettier": "2.5.1",
+    "prettier": "2.6.2",
     "sass": "^1.50.0",
     "sass-loader": "^10.1.1",
     "sb": "^6.4.22",
diff --git a/web/pages/_app.tsx b/web/pages/_app.tsx
index 5bc37c791..2810afa13 100644
--- a/web/pages/_app.tsx
+++ b/web/pages/_app.tsx
@@ -21,13 +21,13 @@ import '../styles/pages.scss';
 import '../styles/offline-notice.scss';
 
 import { AppProps } from 'next/app';
-import { useRouter } from 'next/router';
+import { Router, useRouter } from 'next/router';
 
-import AdminLayout from './admin/admin-layout';
+import AdminLayout from '../components/layouts/admin-layout';
 import SimpleLayout from '../components/layouts/SimpleLayout';
 
 function App({ Component, pageProps }: AppProps) {
-  const router = useRouter();
+  const router = useRouter() as Router;
   if (router.pathname.startsWith('/admin')) {
     return <AdminLayout pageProps={pageProps} Component={Component} router={router} />;
   }
diff --git a/web/pages/admin/config-notify.tsx b/web/pages/admin/config-notify.tsx
index 082a8ef31..6247d7227 100644
--- a/web/pages/admin/config-notify.tsx
+++ b/web/pages/admin/config-notify.tsx
@@ -12,7 +12,7 @@ import TextFieldWithSubmit, {
 import { TEXTFIELD_PROPS_FEDERATION_INSTANCE_URL } from '../../utils/config-constants';
 import { ServerStatusContext } from '../../utils/server-status-context';
 import { UpdateArgs } from '../../types/config-section';
-import isValidUrl from '../utils/urls';
+import isValidUrl from '../../utils/urls';
 
 const { Title } = Typography;
 
diff --git a/web/renovate.json b/web/renovate.json
index 171c333c1..82a829b93 100644
--- a/web/renovate.json
+++ b/web/renovate.json
@@ -1,11 +1,7 @@
 {
-  "extends": [
-    "config:base"
-  ],
+  "extends": ["config:base"],
   "timezone": "America/Los_Angeles",
-  "schedule": [
-    "before 8am on Monday"
-  ],
+  "schedule": ["before 8am on Monday"],
   "lockFileMaintenance": {
     "enabled": true,
     "automerge": true
@@ -15,37 +11,26 @@
   },
   "packageRules": [
     {
-      "matchUpdateTypes": [
-        "minor"
-      ],
+      "matchUpdateTypes": ["minor"],
       "matchCurrentVersion": "!/^0/",
       "automerge": true
     },
     {
-      "matchDepTypes": [
-        "devDependencies"
-      ],
+      "matchDepTypes": ["devDependencies"],
       "automerge": true,
       "major": {
         "dependencyDashboardApproval": true
       }
     },
     {
-      "matchPackagePatterns": [
-        "*"
-      ],
-      "matchUpdateTypes": [
-        "minor",
-        "patch"
-      ],
+      "matchPackagePatterns": ["*"],
+      "matchUpdateTypes": ["minor", "patch"],
       "major": {
         "dependencyDashboardApproval": true
       },
       "groupName": "all non-major dependencies",
       "groupSlug": "all-minor-patch",
-      "labels": [
-        "dependencies"
-      ]
+      "labels": ["dependencies"]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/web/services/status-service.ts b/web/services/status-service.ts
index 92cf3a7fb..995d5206f 100644
--- a/web/services/status-service.ts
+++ b/web/services/status-service.ts
@@ -1,4 +1,4 @@
-import ServerStatus from '../interfaces/server-status.model';
+import { ServerStatus } from '../interfaces/server-status.model';
 
 const ENDPOINT = `/api/status`;
 
diff --git a/web/services/websocket-service.ts b/web/services/websocket-service.ts
index 9ff972de3..2ba819d01 100644
--- a/web/services/websocket-service.ts
+++ b/web/services/websocket-service.ts
@@ -1,7 +1,7 @@
 import { message } from 'antd';
-import { MessageType } from '../interfaces/socket-events';
+import { MessageType, SocketEvent } from '../interfaces/socket-events';
 
-interface SocketMessage {
+export interface SocketMessage {
   type: MessageType;
   data: any;
 }
@@ -15,7 +15,7 @@ export default class WebsocketService {
 
   websocketReconnectTimer: ReturnType<typeof setTimeout>;
 
-  handleMessage?: (message: SocketMessage) => void;
+  handleMessage?: (message: SocketEvent) => void;
 
   constructor(accessToken, path) {
     this.accessToken = accessToken;
@@ -76,7 +76,7 @@ export default class WebsocketService {
     // Optimization where multiple events can be sent within a
     // single websocket message. So split them if needed.
     const messages = e.data.split('\n');
-    let message: SocketMessage;
+    let message: SocketEvent;
 
     // eslint-disable-next-line no-plusplus
     for (let i = 0; i < messages.length; i++) {
diff --git a/web/stories/ActionButtonRow.stories.tsx b/web/stories/ActionButtonRow.stories.tsx
index e618b080e..bd292e929 100644
--- a/web/stories/ActionButtonRow.stories.tsx
+++ b/web/stories/ActionButtonRow.stories.tsx
@@ -10,9 +10,10 @@ export default {
 } as ComponentMeta<typeof ActionButtonRow>;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ActionButtonRow> = args => (
-  <ActionButtonRow>{args.buttons}</ActionButtonRow>
-);
+const Template: ComponentStory<typeof ActionButtonRow> = args => {
+  const { buttons } = args as any;
+  return <ActionButtonRow>{buttons}</ActionButtonRow>;
+};
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const actions = [
diff --git a/web/stories/BrowserNotifyModal.stories.tsx b/web/stories/BrowserNotifyModal.stories.tsx
index 2113053d8..a88eebf80 100644
--- a/web/stories/BrowserNotifyModal.stories.tsx
+++ b/web/stories/BrowserNotifyModal.stories.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import BrowserNotifyModal from '../components/modals/BrowserNotifyModal';
+import AuthModal from '../components/modals/AuthModal';
 
 const Example = () => (
   <div>
diff --git a/web/stories/ChatActionMessage.stories.tsx b/web/stories/ChatActionMessage.stories.tsx
index 769d9ec39..3c255c51b 100644
--- a/web/stories/ChatActionMessage.stories.tsx
+++ b/web/stories/ChatActionMessage.stories.tsx
@@ -9,7 +9,7 @@ export default {
 } as ComponentMeta<typeof ChatActionMessage>;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ChatActionMessage> = args => <ChatActionMessage />;
+const Template: ComponentStory<typeof ChatActionMessage> = args => <ChatActionMessage {...args} />;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Basic = Template.bind({});
diff --git a/web/stories/ChatSocialMessage.stories.tsx b/web/stories/ChatSocialMessage.stories.tsx
index dd28227a6..f31d7b3fa 100644
--- a/web/stories/ChatSocialMessage.stories.tsx
+++ b/web/stories/ChatSocialMessage.stories.tsx
@@ -9,7 +9,7 @@ export default {
 } as ComponentMeta<typeof ChatSocialMessage>;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ChatSocialMessage> = args => <ExamChatSocialMessageple />;
+const Template: ComponentStory<typeof ChatSocialMessage> = args => <ChatSocialMessage {...args} />;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Basic = Template.bind({});
diff --git a/web/stories/ChatSystemMessage.stories.tsx b/web/stories/ChatSystemMessage.stories.tsx
index d432981ae..f0a70bf1c 100644
--- a/web/stories/ChatSystemMessage.stories.tsx
+++ b/web/stories/ChatSystemMessage.stories.tsx
@@ -8,8 +8,7 @@ export default {
   parameters: {},
 } as ComponentMeta<typeof ChatSystemMessage>;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMessage />;
+const Template: ComponentStory<typeof ChatSystemMessage> = args => <ChatSystemMessage {...args} />;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const Basic = Template.bind({});
diff --git a/web/stories/Color.tsx b/web/stories/Color.tsx
index 21870b582..660829262 100644
--- a/web/stories/Color.tsx
+++ b/web/stories/Color.tsx
@@ -25,7 +25,6 @@ export function Color(props) {
 
   const colorDescriptionStyle = {
     margin: '5px',
-    textAlign: 'center',
     color: 'gray',
     fontSize: '0.8em',
   };
@@ -33,7 +32,9 @@ export function Color(props) {
   return (
     <figure style={containerStyle}>
       <div style={colorBlockStyle} />
-      <figcaption style={colorDescriptionStyle}>{color}</figcaption>
+      <figcaption>
+        <span style={colorDescriptionStyle}>{color}</span>
+      </figcaption>
     </figure>
   );
 }
@@ -44,8 +45,8 @@ Color.propTypes = {
 
 const rowStyle = {
   display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
+  flexDirection: 'row' as 'row',
+  flexWrap: 'wrap' as 'wrap',
   // justifyContent: 'space-around',
   alignItems: 'center',
 };
diff --git a/web/stories/Form.stories.tsx b/web/stories/Form.stories.tsx
index 9c7655666..a425e2c7f 100644
--- a/web/stories/Form.stories.tsx
+++ b/web/stories/Form.stories.tsx
@@ -12,6 +12,7 @@ import {
   TreeSelect,
   Switch,
 } from 'antd';
+import { SizeType } from 'antd/lib/config-provider/SizeContext';
 
 const FormExample = () => {
   const [componentSize, setComponentSize] = useState('default');
@@ -33,7 +34,7 @@ const FormExample = () => {
         size: componentSize,
       }}
       onValuesChange={onFormLayoutChange}
-      size={componentSize}
+      size={componentSize as SizeType}
     >
       <Form.Item label="Form Size" name="size">
         <Radio.Group>
diff --git a/web/stories/ImageAsset.tsx b/web/stories/ImageAsset.tsx
index ec8adff80..b239686cd 100644
--- a/web/stories/ImageAsset.tsx
+++ b/web/stories/ImageAsset.tsx
@@ -1,6 +1,4 @@
-import PropTypes from 'prop-types';
-
-export function ImageAsset(props) {
+export function ImageAsset(props: ImageAssetProps) {
   const { name, src } = props;
 
   const containerStyle = {
@@ -23,7 +21,7 @@ export function ImageAsset(props) {
   };
 
   const colorDescriptionStyle = {
-    textAlign: 'center',
+    textAlign: 'center' as 'center',
     color: 'gray',
     fontSize: '0.8em',
   };
@@ -48,19 +46,20 @@ export function ImageAsset(props) {
   );
 }
 
-Image.propTypes = {
-  name: PropTypes.string.isRequired,
-};
+interface ImageAssetProps {
+  name: string;
+  src: string;
+}
 
 const rowStyle = {
   display: 'flex',
-  flexDirection: 'row',
-  flexWrap: 'wrap',
+  flexDirection: 'row' as 'row',
+  flexWrap: 'wrap' as 'wrap',
   // justifyContent: 'space-around',
   alignItems: 'center',
 };
 
-export function ImageRow(props) {
+export function ImageRow(props: ImageRowProps) {
   const { images } = props;
 
   return (
@@ -72,6 +71,6 @@ export function ImageRow(props) {
   );
 }
 
-ImageRow.propTypes = {
-  images: PropTypes.arrayOf(PropTypes.object).isRequired,
-};
+interface ImageRowProps {
+  images: ImageAssetProps[];
+}
diff --git a/web/stories/StyleGuide.stories.mdx b/web/stories/StyleGuide.stories.mdx
index 70e801a66..8d61207f1 100644
--- a/web/stories/StyleGuide.stories.mdx
+++ b/web/stories/StyleGuide.stories.mdx
@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/addon-docs';
-import {Color, ColorRow} from './Color';
-import {Image, ImageRow} from './ImageAsset';
+import { Color, ColorRow } from './Color';
+import { Image, ImageRow } from './ImageAsset';
 
 import Logo from '../assets/images/logo.svg';
 import FediverseColor from '../assets/images/fediverse-color.png';
@@ -16,73 +16,113 @@ import IsBot from '../assets/images/bot.svg';
   
 `}</style>
 
-export const images = [{
-  src: Logo,
-  name: 'Logo',
-}, {
-  src: FediverseColor,
-  name: 'Fediverse Color',
-},{
-  src: FediverseBlack,
-  name: 'Fediverse Black',
-}, {
-  src: Moderator,
-  name: 'Moderator',
-}, {
-  src: IndieAuth,
-  name: 'IndieAuth',
-}, {
-  src: IsBot,
-  name: 'Bot Flag',
-}];
-
+export const images = [
+  {
+    src: Logo,
+    name: 'Logo',
+  },
+  {
+    src: FediverseColor,
+    name: 'Fediverse Color',
+  },
+  {
+    src: FediverseBlack,
+    name: 'Fediverse Black',
+  },
+  {
+    src: Moderator,
+    name: 'Moderator',
+  },
+  {
+    src: IndieAuth,
+    name: 'IndieAuth',
+  },
+  {
+    src: IsBot,
+    name: 'Bot Flag',
+  },
+];
 
 # Colors
 
-<Story name="Colors">
-</Story>
+<Story name="Colors"></Story>
 
 <ColorRow colors={['theme-primary-color', 'theme-text-color-secondary']} />
 
 ## Text
+
 <ColorRow colors={['theme-text-color', 'theme-text-color-secondary', 'theme-link-color']} />
 
 ## Backgrounds
+
 <ColorRow colors={['theme-background', 'theme-background-secondary', 'popover-background']} />
 
 ## Status
-<ColorRow colors={['theme-success-color', 'theme-info-color', 'theme-warning-color', 'theme-error-color']} />
+
+<ColorRow
+  colors={['theme-success-color', 'theme-info-color', 'theme-warning-color', 'theme-error-color']}
+/>
 
 ## Gray
-<ColorRow colors={['color-owncast-gray-100', 'color-owncast-gray-300', 'color-owncast-gray-500', 'color-owncast-gray-700', 'color-owncast-gray-900']} />
+
+<ColorRow
+  colors={[
+    'color-owncast-gray-100',
+    'color-owncast-gray-300',
+    'color-owncast-gray-500',
+    'color-owncast-gray-700',
+    'color-owncast-gray-900',
+  ]}
+/>
 
 ## Purple
-<ColorRow colors={['color-owncast-purple-100', 'color-owncast-purple-300', 'color-owncast-purple-500', 'color-owncast-purple-700', 'color-owncast-purple-900']} />
+
+<ColorRow
+  colors={[
+    'color-owncast-purple-100',
+    'color-owncast-purple-300',
+    'color-owncast-purple-500',
+    'color-owncast-purple-700',
+    'color-owncast-purple-900',
+  ]}
+/>
 
 ## Green
-<ColorRow colors={['color-owncast-green-100', 'color-owncast-green-300', 'color-owncast-green-500', 'color-owncast-green-700', 'color-owncast-green-900']} />
+
+<ColorRow
+  colors={[
+    'color-owncast-green-100',
+    'color-owncast-green-300',
+    'color-owncast-green-500',
+    'color-owncast-green-700',
+    'color-owncast-green-900',
+  ]}
+/>
 
 ## Orange
-<ColorRow colors={['color-owncast-orange-100', 'color-owncast-orange-300', 'color-owncast-orange-500', 'color-owncast-orange-700', 'color-owncast-orange-900']} />
+
+<ColorRow
+  colors={[
+    'color-owncast-orange-100',
+    'color-owncast-orange-300',
+    'color-owncast-orange-500',
+    'color-owncast-orange-700',
+    'color-owncast-orange-900',
+  ]}
+/>
 
 # Font
 
 [Inter font](https://rsms.me/inter/)
 
 <Story name="Fonts">
-  <Canvas style={{color: 'var(--theme-text-color-secondary)'}}>
+  <Canvas style={{ color: 'var(--theme-text-color-secondary)' }}>
     {getComputedStyle(document.documentElement).getPropertyValue('--theme-font-family')}
   </Canvas>
 </Story>
 
 # Images
 
-<Story name="Images and Icons">
-</Story>
+<Story name="Images and Icons"></Story>
 
 <ImageRow images={images} />
-
-
-
-
-
diff --git a/web/stories/Tabs.stories.tsx b/web/stories/Tabs.stories.tsx
deleted file mode 100644
index 14e8890c1..000000000
--- a/web/stories/Tabs.stories.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Tabs, Radio } from 'antd';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-
-const { TabPane } = Tabs;
-
-class TabsExample extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = { size: 'small' };
-  }
-
-  onChange = e => {
-    this.setState({ size: e.target.value });
-  };
-
-  render() {
-    const { size } = this.state;
-    const { type } = this.props;
-
-    return (
-      <div>
-        <Radio.Group value={size} onChange={this.onChange} style={{ marginBottom: 16 }}>
-          <Radio.Button value="small">Small</Radio.Button>
-          <Radio.Button value="default">Default</Radio.Button>
-          <Radio.Button value="large">Large</Radio.Button>
-        </Radio.Group>
-
-        <Tabs defaultActiveKey="1" type={type} size={size}>
-          <TabPane tab="Card Tab 1" key="1">
-            Content of card tab 1
-          </TabPane>
-          <TabPane tab="Card Tab 2" key="2">
-            Content of card tab 2
-          </TabPane>
-          <TabPane tab="Card Tab 3" key="3">
-            Content of card tab 3
-          </TabPane>
-        </Tabs>
-      </div>
-    );
-  }
-}
-
-export default {
-  title: 'example/Tabs',
-  component: Tabs,
-} as ComponentMeta<typeof Tabs>;
-
-const Template: ComponentStory<typeof Tabs> = args => <TabsExample {...args} />;
-
-export const Card = Template.bind({});
-Card.args = { type: 'card' };
-
-export const Basic = Template.bind({});
-Basic.args = { type: '' };
-
-TabsExample.propTypes = {
-  type: PropTypes.string,
-};
-
-TabsExample.defaultProps = {
-  type: '',
-};
diff --git a/web/style-definitions/README.md b/web/style-definitions/README.md
index ce7463cd7..ae068e86c 100644
--- a/web/style-definitions/README.md
+++ b/web/style-definitions/README.md
@@ -1,10 +1,11 @@
 # Style Definitions
 
 Read more about [Style Dictionary](https://amzn.github.io/style-dictionary)
+
 ## Add
 
 Add to the `tokens/**/*.yaml` files to add or modify style values.
 
-## Generating 
+## Generating
 
-Run `npm run build-styles` to regenerate the CSS variables.
\ No newline at end of file
+Run `npm run build-styles` to regenerate the CSS variables.
diff --git a/web/style-definitions/tokens/color/antd-overrides.yaml b/web/style-definitions/tokens/color/antd-overrides.yaml
index e3ee6bac0..fbb6917c4 100644
--- a/web/style-definitions/tokens/color/antd-overrides.yaml
+++ b/web/style-definitions/tokens/color/antd-overrides.yaml
@@ -2,33 +2,33 @@
 # You can find the variable names to override at:
 # https://github.com/ant-design/ant-design/blob/master/components/style/themes/dark.less
 
-text-color: 
-  value: "var(--theme-text-color)"
+text-color:
+  value: 'var(--theme-text-color)'
 text-color-secondry:
-  value: "var(--theme-text-color-secondary)"
+  value: 'var(--theme-text-color-secondary)'
 link-color:
-  value: "var(--theme-link-color)"
+  value: 'var(--theme-link-color)'
 popover-background:
-  value: "var(--theme-background)"
+  value: 'var(--theme-background)'
 background-color-light:
-  value: "var(--theme-background-secondary)"
+  value: 'var(--theme-background-secondary)'
 
 # These values require explicit colors and cannot take css variables.
-primary-color: 
-  value: "{color.owncast.purple.500.value}"
+primary-color:
+  value: '{color.owncast.purple.500.value}'
 info-color:
-  value: "{color.owncast.gray.500.value}"
+  value: '{color.owncast.gray.500.value}'
 success-color:
-  value: "{color.owncast.green.500.value}"
+  value: '{color.owncast.green.500.value}'
 warning-color:
-  value: "{color.owncast.orange.500.value}"
+  value: '{color.owncast.orange.500.value}'
 error-color:
-  value: "{color.owncast.red.500.value}"
+  value: '{color.owncast.red.500.value}'
 purple-base:
-  value: "{color.owncast.purple.500.value}"
+  value: '{color.owncast.purple.500.value}'
 green-base:
-  value: "{color.owncast.green.500.value}"
+  value: '{color.owncast.green.500.value}'
 red-base:
-  value: "{color.owncast.red.500.value}"
+  value: '{color.owncast.red.500.value}'
 orange-base:
-  value: "{color.owncast.orange.500.value}"
\ No newline at end of file
+  value: '{color.owncast.orange.500.value}'
diff --git a/web/style-definitions/tokens/color/default-theme.yaml b/web/style-definitions/tokens/color/default-theme.yaml
index f32768bf4..8e4b0b555 100644
--- a/web/style-definitions/tokens/color/default-theme.yaml
+++ b/web/style-definitions/tokens/color/default-theme.yaml
@@ -5,32 +5,32 @@
 
 theme:
   primary-color:
-    value: "{color.owncast.purple.500.value}"
-    comment: "The primary color of the application used for rendering controls."
+    value: '{color.owncast.purple.500.value}'
+    comment: 'The primary color of the application used for rendering controls.'
   text-color:
-    value: "{color.owncast.gray.300.value}"
-    comment: "The color of the text in the application."
+    value: '{color.owncast.gray.300.value}'
+    comment: 'The color of the text in the application.'
   text-color-secondary:
-    value: "{color.owncast.gray.500.value}"
+    value: '{color.owncast.gray.500.value}'
   link-color:
-    value: "{color.owncast.purple.500.value}"
+    value: '{color.owncast.purple.500.value}'
   font-family:
-    value: "{font.owncast.family.value}"
+    value: '{font.owncast.family.value}'
   background:
-    value: "{color.owncast.background.value}"
-    comment: "The main background color of the page."
+    value: '{color.owncast.background.value}'
+    comment: 'The main background color of the page.'
   background-secondary:
-    value: "{color.owncast.background-secondary.value}"
-    comment: "A secondary background color used in sections and controls."
+    value: '{color.owncast.background-secondary.value}'
+    comment: 'A secondary background color used in sections and controls.'
   rounded-corners:
-    value: "5px"
-    comment: "The radius of rounded corners used in places."
+    value: '5px'
+    comment: 'The radius of rounded corners used in places.'
 
   success-color:
-    value: "{color.owncast.green.500.value}"
+    value: '{color.owncast.green.500.value}'
   info-color:
-    value: "{color.owncast.purple.300.value}"
+    value: '{color.owncast.purple.300.value}'
   warning-color:
-    value: "{color.owncast.orange.500.value}"
+    value: '{color.owncast.orange.500.value}'
   error-color:
-    value: "{color.owncast.red.500.value}"
\ No newline at end of file
+    value: '{color.owncast.red.500.value}'
diff --git a/web/style-definitions/tokens/color/owncast-colors.yaml b/web/style-definitions/tokens/color/owncast-colors.yaml
index 1ae12792f..27511cf35 100644
--- a/web/style-definitions/tokens/color/owncast-colors.yaml
+++ b/web/style-definitions/tokens/color/owncast-colors.yaml
@@ -4,79 +4,79 @@ color:
   owncast:
     purple:
       100:
-        value: "#f4ebff"
+        value: '#f4ebff'
       300:
-        value: "#d6bbfb"
+        value: '#d6bbfb'
       500:
-        value: "#9e77ed"
+        value: '#9e77ed'
       700:
-        value: "#6941c6"
+        value: '#6941c6'
       900:
-        value: "#42307d"
+        value: '#42307d'
 
     green:
       100:
-        value: "#d15ad5"
+        value: '#d15ad5'
       300:
-        value: "#6ce9a6"
+        value: '#6ce9a6'
       500:
-        value: "#12b76a"
+        value: '#12b76a'
       700:
-        value: "#027a48"
+        value: '#027a48'
       900:
-        value: "#054f31"
+        value: '#054f31'
 
     red:
       100:
-        value: "#fee4e2"
+        value: '#fee4e2'
       300:
-        value: "#fda29b"
+        value: '#fda29b'
       500:
-        value: "#f04438"
+        value: '#f04438'
       700:
-        value: "#b42318"
+        value: '#b42318'
       900:
-        value: "#7a271a"
+        value: '#7a271a'
 
     orange:
       100:
-        value: "#fef0c7"
+        value: '#fef0c7'
       300:
-        value: "#fec84b"
+        value: '#fec84b'
       500:
-        value: "#f79009"
+        value: '#f79009'
       700:
-        value: "#b54708"
+        value: '#b54708'
       900:
-        value: "#93370d"
+        value: '#93370d'
 
     gray:
       100:
-        value: "#f2f4f7"
+        value: '#f2f4f7'
       300:
-        value: "#d0d5dd"
+        value: '#d0d5dd'
       500:
-        value: "#667085"
+        value: '#667085'
       700:
-        value: "#344054"
+        value: '#344054'
       900:
-        value: "#101828"
+        value: '#101828'
 
     logo:
       purple:
-        value: "rgba(120, 113, 255, 1)"
+        value: 'rgba(120, 113, 255, 1)'
       pink:
-        value: "rgba(201, 139, 254, 1)"
+        value: 'rgba(201, 139, 254, 1)'
       blue:
-        value: "rgba(32, 134, 225, 1)"
+        value: 'rgba(32, 134, 225, 1)'
 
     background:
-      value: "rgba(27, 26, 38, 1)"
+      value: 'rgba(27, 26, 38, 1)'
     background-secondary:
-      value: "rgba(22, 21, 31, 1)"
-      
+      value: 'rgba(22, 21, 31, 1)'
+
 font:
-  owncast:      
+  owncast:
     family:
       value: "'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
         'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
@@ -85,28 +85,28 @@ font:
 # Values used in the admin and should be migrated to variables or removed.
 # See ant-overrides.scss.
 owncast-purple:
-  value: "{color.owncast.logo.purple.value}"
-owncast-purple-25: 
-  value: "rgba(120, 113, 255, 0.25)"
+  value: '{color.owncast.logo.purple.value}'
+owncast-purple-25:
+  value: 'rgba(120, 113, 255, 0.25)'
 owncast-purple-50:
-  value: "rgba(120, 113, 255, 0.5)"
+  value: 'rgba(120, 113, 255, 0.5)'
 online-color:
-  value: "#73dd3f"
+  value: '#73dd3f'
 offline-color:
-  value: "#999"
+  value: '#999'
 pink:
-  value: "{color.owncast.logo.pink.value}"
+  value: '{color.owncast.logo.pink.value}'
 purple:
-  value: "{color.owncast.purple.500.value}"
+  value: '{color.owncast.purple.500.value}'
 blue:
-  value: "{color.owncast.logo.blue.value}"
+  value: '{color.owncast.logo.blue.value}'
 white-88:
-  value: "{color.owncast.gray.500.value}"
+  value: '{color.owncast.gray.500.value}'
 purple-dark:
-  value: "{color.owncast.purple.900.value}"
+  value: '{color.owncast.purple.900.value}'
 default-link-color:
-  value: "{color.owncast.purple.700.value}"
+  value: '{color.owncast.purple.700.value}'
 default-bg-color:
-  value: "{color.owncast.background.value}"
+  value: '{color.owncast.background.value}'
 default-text-color:
-  value: "{color.owncast.gray.100.value}"
+  value: '{color.owncast.gray.100.value}'
diff --git a/web/styles/ant-overrides.scss b/web/styles/ant-overrides.scss
index 290f70520..c0fab6750 100644
--- a/web/styles/ant-overrides.scss
+++ b/web/styles/ant-overrides.scss
@@ -356,7 +356,6 @@ textarea.ant-input {
   opacity: 0.75;
 }
 
-
 // SELECT
 .ant-select-dropdown {
   background-color: var(--black);
diff --git a/web/styles/config-storage.scss b/web/styles/config-storage.scss
index ac8155830..d6a44e6e7 100644
--- a/web/styles/config-storage.scss
+++ b/web/styles/config-storage.scss
@@ -1,5 +1,4 @@
-// styles for Storage config section 
-
+// styles for Storage config section
 
 .edit-storage-container {
   padding: 1em;
@@ -21,9 +20,7 @@
   }
 }
 
-
 .edit-server-details-container {
-  
   // Do something special for the stream key field
   .field-streamkey-container {
     margin-bottom: 1.5em;
@@ -33,7 +30,7 @@
     .left-side {
       display: flex;
       flex-direction: row;
-      align-items: flex-start;  
+      align-items: flex-start;
     }
 
     .textfield-with-submit-container {
@@ -43,7 +40,7 @@
     .streamkey-actions {
       white-space: nowrap;
       button {
-        margin: .25em;
+        margin: 0.25em;
       }
       @media (max-width: 800px) {
         margin-top: 2em;
@@ -54,5 +51,4 @@
   .advanced-settings {
     max-width: 800px;
   }
-
-}
\ No newline at end of file
+}
diff --git a/web/styles/form-misc-elements.scss b/web/styles/form-misc-elements.scss
index 5df7fd647..fe9fe32c3 100644
--- a/web/styles/form-misc-elements.scss
+++ b/web/styles/form-misc-elements.scss
@@ -19,40 +19,37 @@
   flex-direction: row;
   justify-content: flex-start;
   align-items: center;
-  font-size: .75rem;
+  font-size: 0.75rem;
   .status-icon {
     display: inline-block;
-    margin-right: .5em;
+    margin-right: 0.5em;
   }
 }
 
-
 /* TIP CONTAINER BASE */
 .field-tip {
-  font-size: .8em;
+  font-size: 0.8em;
   color: var(--white-50);
 }
 
-
 /* 
 Ideal for wrapping each Textfield on a page with many text fields in a row. This div will alternate colors and look like a table.
 */
 .field-container {
-  padding: .85em 0 .5em;
+  padding: 0.85em 0 0.5em;
 }
 
-
 /* SEGMENT SLIDER GROUP WITH SELECTED NOTE, OR STATUS */
 .segment-slider-container {
   width: 100%;
   margin: auto;
-  padding: 1em 2em .75em;
+  padding: 1em 2em 0.75em;
   background-color: var(--owncast-purple-25);
   border-radius: var(--container-border-radius);
 
   .status-container {
     width: 100%;
-    margin: .5em auto;
+    margin: 0.5em auto;
     text-align: center;
   }
 
@@ -60,7 +57,7 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
     width: 100%;
     margin: 3em auto 0;
     text-align: center;
-    font-size: .75em;
+    font-size: 0.75em;
     line-height: normal;
     color: var(--white);
     padding: 1em;
@@ -69,7 +66,6 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
   }
 }
 
-
 .segment-tip {
   width: 10em;
   text-align: center;
@@ -81,4 +77,4 @@ Ideal for wrapping each Textfield on a page with many text fields in a row. This
   margin-top: 8px;
   text-align: justify;
   line-height: 1.4em;
-}
\ No newline at end of file
+}
diff --git a/web/styles/form-textfields.scss b/web/styles/form-textfields.scss
index 276c3a37f..178512dbe 100644
--- a/web/styles/form-textfields.scss
+++ b/web/styles/form-textfields.scss
@@ -19,7 +19,7 @@ Base styles for
     padding-right: 1.25em;
     text-align: right;
     width: var(--form-label-container-width);
-    margin: .2em 0;
+    margin: 0.2em 0;
   }
   .formfield-label {
     font-weight: 500;
@@ -35,7 +35,7 @@ Base styles for
       &::before {
         content: '*';
         display: inline-block;
-        margin-right: .25em;
+        margin-right: 0.25em;
         color: var(--ant-error);
       }
     }
@@ -54,7 +54,7 @@ Base styles for
   }
 
   .status-container {
-    margin: .25em;
+    margin: 0.25em;
     width: 100%;
     display: block;
     &.empty {
@@ -62,9 +62,9 @@ Base styles for
       visibility: visible;
     }
   }
-  
+
   .field-tip {
-    margin: .5em .5em;
+    margin: 0.5em 0.5em;
   }
 
   @media (max-width: 800px) {
@@ -103,7 +103,7 @@ Base styles for
     justify-content: flex-start;
 
     .label-spacer {
-      width: var(--form-label-container-width); 
+      width: var(--form-label-container-width);
     }
     .lower-content {
       display: flex;
@@ -117,7 +117,7 @@ Base styles for
         width: 100%;
       }
       .status-container {
-        margin: .5em;
+        margin: 0.5em;
         &.empty {
           display: none;
         }
@@ -125,7 +125,7 @@ Base styles for
     }
     .update-button-container {
       visibility: hidden;
-      margin: .25em 0;
+      margin: 0.25em 0;
     }
   }
 
@@ -137,7 +137,6 @@ Base styles for
     }
   }
 
-
   @media (max-width: 800px) {
     .label-spacer {
       display: none;
@@ -145,12 +144,11 @@ Base styles for
   }
 }
 
-
 /* TOGGLE SWITCH CONTAINER BASE */
 .toggleswitch-container {
   margin: 2em 0 1em;
 
-  .label-side { 
+  .label-side {
     margin-top: 0;
   }
 
@@ -159,7 +157,7 @@ Base styles for
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;
-    
+
     .status-container {
       width: auto;
       margin: 0 0 0 1em;
diff --git a/web/styles/globals.scss b/web/styles/globals.scss
index d964d26a1..3b4a017d7 100644
--- a/web/styles/globals.scss
+++ b/web/styles/globals.scss
@@ -5,9 +5,8 @@
   // --header-h: 64px;
   --chat-w: 300px;
   --chat-input-h: 40.5px;
-  }
+}
 
-  
 html,
 body {
   padding: 0;
diff --git a/web/styles/pages.scss b/web/styles/pages.scss
index 6f2661d5c..37e4dcbbe 100644
--- a/web/styles/pages.scss
+++ b/web/styles/pages.scss
@@ -1,6 +1,5 @@
 // misc styling for various /pages
 
-
 // .help-page {
 //   .ant-result-image {
 //     height: 100px;
@@ -11,9 +10,9 @@
 //   }
 // }
 
-
 .upgrade-page {
-  h2,h3 {
+  h2,
+  h3 {
     color: var(--pink);
     font-size: 1.25em;
   }
diff --git a/web/styles/theme.less b/web/styles/theme.less
index 0acbe5d34..57f2f2e0a 100644
--- a/web/styles/theme.less
+++ b/web/styles/theme.less
@@ -1,4 +1,3 @@
-
 // Do not edit directly
 // Generated on Sat, 07 May 2022 17:24:18 GMT
 
@@ -20,7 +19,9 @@
 @theme-text-color: #d0d5dd; // The color of the text in the application.
 @theme-text-color-secondary: #667085;
 @theme-link-color: #9e77ed;
-@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@theme-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+  'Segoe UI Symbol', 'Noto Color Emoji';
 @theme-background: #1b1a26; // The main background color of the page.
 @theme-background-secondary: #16151f; // A secondary background color used in sections and controls.
 @theme-rounded-corners: 5px; // The radius of rounded corners.
@@ -58,7 +59,9 @@
 @color-owncast-logo-blue: #2086e1;
 @color-owncast-background: #1b1a26;
 @color-owncast-background-secondary: #16151f;
-@font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
+@font-owncast-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+  'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+  'Segoe UI Symbol', 'Noto Color Emoji';
 @owncast-purple: #7871ff;
 @owncast-purple-25: rgba(120, 113, 255, 0.25);
 @owncast-purple-50: rgba(120, 113, 255, 0.5);
@@ -71,4 +74,4 @@
 @purple-dark: #42307d;
 @default-link-color: #6941c6;
 @default-bg-color: #1b1a26;
-@default-text-color: #f2f4f7;
\ No newline at end of file
+@default-text-color: #f2f4f7;
diff --git a/web/tsconfig.json b/web/tsconfig.json
index 5bee8c4d5..b8d597880 100644
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": false,
@@ -19,12 +15,6 @@
     "jsx": "preserve",
     "incremental": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
 }
diff --git a/web/utils/hook-windowresize.tsx b/web/utils/hook-windowresize.tsx
index c062c2b38..422b95c0d 100644
--- a/web/utils/hook-windowresize.tsx
+++ b/web/utils/hook-windowresize.tsx
@@ -17,15 +17,15 @@ export default function useWindowSize() {
         height: window.innerHeight,
       });
     }
-    
+
     // Add event listener
-    window.addEventListener("resize", handleResize);
-    
+    window.addEventListener('resize', handleResize);
+
     // Call handler right away so state gets updated with initial window size
     handleResize();
-    
+
     // Remove event listener on cleanup
-    return () => window.removeEventListener("resize", handleResize);
+    return () => window.removeEventListener('resize', handleResize);
   }, []); // Empty array ensures that effect is only run on mount
 
   return windowSize;
diff --git a/web/utils/urls.ts b/web/utils/urls.ts
index 8ed9b6ff6..719b0a009 100644
--- a/web/utils/urls.ts
+++ b/web/utils/urls.ts
@@ -5,11 +5,15 @@ export default function isValidUrl(url: string): boolean {
   const validProtocols = ['http:', 'https:'];
 
   try {
-   const validationObject = new URL(url);
-   if (validationObject.protocol === '' || validationObject.hostname === '' || !validProtocols.includes(validationObject.protocol)) {
-     return false;
-   }
-  } catch(e) {
+    const validationObject = new URL(url);
+    if (
+      validationObject.protocol === '' ||
+      validationObject.hostname === '' ||
+      !validProtocols.includes(validationObject.protocol)
+    ) {
+      return false;
+    }
+  } catch (e) {
     return false;
   }