diff --git a/web/stories/ActionButton.stories.tsx b/web/stories/ActionButton.stories.tsx
index 836ba3bd0..8061d595e 100644
--- a/web/stories/ActionButton.stories.tsx
+++ b/web/stories/ActionButton.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import ActionButton from '../components/action-buttons/ActionButton';
 
 export default {
-  title: 'owncast/External action button',
+  title: 'owncast/Action Buttons/Single button',
   component: ActionButton,
   parameters: {},
 } as ComponentMeta<typeof ActionButton>;
diff --git a/web/stories/ActionButtonRow.stories.tsx b/web/stories/ActionButtonRow.stories.tsx
index bd292e929..8a71400c2 100644
--- a/web/stories/ActionButtonRow.stories.tsx
+++ b/web/stories/ActionButtonRow.stories.tsx
@@ -4,7 +4,7 @@ import ActionButtonRow from '../components/action-buttons/ActionButtonRow';
 import ActionButton from '../components/action-buttons/ActionButton';
 
 export default {
-  title: 'owncast/External action button row',
+  title: 'owncast/Action Buttons/Row',
   component: ActionButtonRow,
   parameters: {},
 } as ComponentMeta<typeof ActionButtonRow>;
diff --git a/web/stories/Follower.stories.tsx b/web/stories/Follower.stories.tsx
index ba0a9e1bc..81bce14f5 100644
--- a/web/stories/Follower.stories.tsx
+++ b/web/stories/Follower.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import SingleFollower from '../components/Follower';
 
 export default {
-  title: 'owncast/Follower',
+  title: 'owncast/Followers/Single Follower',
   component: SingleFollower,
   parameters: {},
 } as ComponentMeta<typeof SingleFollower>;
diff --git a/web/stories/Followercollection.stories.tsx b/web/stories/Followercollection.stories.tsx
index 292dbd3da..d95f0adfb 100644
--- a/web/stories/Followercollection.stories.tsx
+++ b/web/stories/Followercollection.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import FollowerCollection from '../components/FollowersCollection';
 
 export default {
-  title: 'owncast/Followers collection',
+  title: 'owncast/Followers/Followers collection',
   component: FollowerCollection,
   parameters: {},
 } as ComponentMeta<typeof FollowerCollection>;
diff --git a/web/stories/Footer.stories.tsx b/web/stories/Footer.stories.tsx
index fa3ad61d1..a2bca4c41 100644
--- a/web/stories/Footer.stories.tsx
+++ b/web/stories/Footer.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import Footer from '../components/ui/Footer/Footer';
 
 export default {
-  title: 'owncast/Footer',
+  title: 'owncast/Layout/Footer',
   component: Footer,
   parameters: {},
 } as ComponentMeta<typeof Footer>;
diff --git a/web/stories/Header.stories.tsx b/web/stories/Header.stories.tsx
index cf542c365..943845a27 100644
--- a/web/stories/Header.stories.tsx
+++ b/web/stories/Header.stories.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Header from '../components/ui/Header/Header';
 import { RecoilRoot } from 'recoil';
+import Header from '../components/ui/Header/Header';
 
 export default {
-  title: 'owncast/Header',
+  title: 'owncast/Layout/Header',
   component: Header,
   parameters: {},
 } as ComponentMeta<typeof Header>;
diff --git a/web/stories/Introduction.stories.mdx b/web/stories/Introduction.stories.mdx
index f0cb40a69..c5ccf1305 100644
--- a/web/stories/Introduction.stories.mdx
+++ b/web/stories/Introduction.stories.mdx
@@ -1,117 +1,23 @@
 import { Meta } from '@storybook/addon-docs';
-import Direction from './assets/direction.svg';
+import { Typography } from 'antd';
 
 <Meta title="Owncast/Readme" />
 
-<style>{`
-  .subheading {
-    --mediumdark: '#999999';
-    font-weight: 900;
-    font-size: 13px;
-    color: #999;
-    letter-spacing: 6px;
-    line-height: 24px;
-    text-transform: uppercase;
-    margin-bottom: 12px;
-    margin-top: 40px;
-  }
-
-  .link-list {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    row-gap: 10px;
-  }
-
-  @media (min-width: 620px) {
-    .link-list {
-      row-gap: 20px;
-      column-gap: 20px;
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  @media all and (-ms-high-contrast:none) {
-  .link-list {
-      display: -ms-grid;
-      -ms-grid-columns: 1fr 1fr;
-      -ms-grid-rows: 1fr 1fr;
-    }
-  }
-
-  .link-item {
-    display: block;
-    padding: 20px 30px 20px 15px;
-    border: 1px solid #00000010;
-    border-radius: 5px;
-    transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
-    color: #333333;
-    display: flex;
-    align-items: flex-start;
-  }
-
-  .link-item:hover {
-    border-color: #1EA7FD50;
-    transform: translate3d(0, -3px, 0);
-    box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
-  }
-
-  .link-item:active {
-    border-color: #1EA7FD;
-    transform: translate3d(0, 0, 0);
-  }
-
-  .link-item strong {
-    font-weight: 700;
-    display: block;
-    margin-bottom: 2px;
-  }
-  
-  .link-item img {
-    height: 40px;
-    width: 40px;
-    margin-right: 15px;
-    flex: none;
-  }
-
-  .link-item span {
-    font-size: 14px;
-    line-height: 20px;
-  }
-
-  .tip {
-    display: inline-block;
-    border-radius: 1em;
-    font-size: 11px;
-    line-height: 12px;
-    font-weight: 700;
-    background: #E7FDD8;
-    color: #66BF3C;
-    padding: 4px 12px;
-    margin-right: 10px;
-    vertical-align: top;
-  }
-
-  .tip-wrapper {
-    font-size: 13px;
-    line-height: 20px;
-    margin-top: 40px;
-    margin-bottom: 40px;
-  }
-
-  .tip-wrapper code {
-    font-size: 12px;
-    display: inline-block;
-  }
-
-  
-`}</style>
-
-# Owncast web UI v2
+<Typography.Title style={{color: 'var(--primary-color)'}}>Owncast Web UI v2</Typography.Title>
 
 Owncast is going through a complete rewrite of the web app frontend.
 
-Visit the [uiv2 milestone](https://github.com/owncast/owncast/milestone/18) on GitHub to see the individual tasks for this project. Please take a look and see if there's anything you can help with. Even just grabbing one component is a huge help!
+Visit the [UIv2 milestone](https://github.com/owncast/owncast/milestone/18) on GitHub to see the individual tasks for this project.
+
+## Why?
+
+- Moving to a full React Component workflow allows the project to be more productive and build features faster.
+- Share code between the web frontend UI and the existing admin.
+- Address feedback from users.
+- Better accessibility.
+- Better mobile experience.
+- Standardize styling across the project by using a single design language and style guide.
+- Allows more people to contribute to the project if we use popular frameworks.
 
 ## What
 
@@ -119,21 +25,29 @@ Visit the [uiv2 milestone](https://github.com/owncast/owncast/milestone/18) on G
 - [React](https://reactjs.org/)
 - [Ant Design](https://ant.design/)
 
-## Why?
-
-- Moving to a full React Component workflow allows the project to be more productive and build features faster.
-- Better accessibility.
-- Better mobile experience.
-
 ## How?
 
-This is a large project, but like anything else, breaking it into pieces and working on one thing at a time will eventually get us to the finish line.
+This rewrite is a large project, but like anything else, breaking it into pieces and working on one thing at a time will eventually get us to the finish line.
 And that's what this interface lets us do. On this page we see all the different components still needing to be worked on, and have a place to document the functionality of these pieces.
 
 ## What about the Admin?
 
-The admin has always been a Next+React+Ant project, so the goal is to touch that as little as possible.
+The admin has always been a Next+React+Ant project, so the goal is to touch that as little as possible except where needed to share code and styles.
 
----
+## What is this page?
+
+This is called [_Storybook_](https://storybook.js.org/docs/react/get-started/introduction).
+Storybook is a tool for UI development. It makes development faster and easier by isolating components.
+This allows you to work on one component at a time. You can develop entire UIs without needing to start
+up a complex dev stack, force certain data into your database, or navigate around your application.
+
+For example a button may have a disabled state that requires a specific scenario to take place in real-world use,
+but here we you can just toggle the state to verify things are working as expected.
+
+This means [new components should have a corresponding story added](https://storybook.js.org/docs/react/get-started/whats-a-story) to make it easier to maintain the project.
+
+
+## Contributing
+
+This is a standard React project so it makes it easy for **anybody to help!**
 
-More documentation about things should go here.
\ No newline at end of file
diff --git a/web/stories/Modal.stories.tsx b/web/stories/Modal.stories.tsx
index 471826b23..50fd40e97 100644
--- a/web/stories/Modal.stories.tsx
+++ b/web/stories/Modal.stories.tsx
@@ -3,7 +3,7 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import Modal from '../components/ui/Modal/Modal';
 
 export default {
-  title: 'owncast/Modal container',
+  title: 'owncast/Modals/Container',
   component: Modal,
   parameters: {},
 } as ComponentMeta<typeof Modal>;
diff --git a/web/stories/StatusBar.stories.tsx b/web/stories/StatusBar.stories.tsx
index 6fa426444..ac544a49b 100644
--- a/web/stories/StatusBar.stories.tsx
+++ b/web/stories/StatusBar.stories.tsx
@@ -4,7 +4,7 @@ import { subHours } from 'date-fns';
 import Statusbar from '../components/ui/Statusbar/Statusbar';
 
 export default {
-  title: 'owncast/Status bar',
+  title: 'owncast/Player/Status bar',
   component: Statusbar,
   parameters: {},
 } as ComponentMeta<typeof Statusbar>;
diff --git a/web/stories/Video.stories.tsx b/web/stories/Video.stories.tsx
index 4e9f80bc3..adb483b5f 100644
--- a/web/stories/Video.stories.tsx
+++ b/web/stories/Video.stories.tsx
@@ -9,7 +9,7 @@ const streams = {
 };
 
 export default {
-  title: 'owncast/Player',
+  title: 'owncast/Player/Player',
   component: OwncastPlayer,
   argTypes: {
     source: {
diff --git a/web/stories/VideoPoster.stories.tsx b/web/stories/VideoPoster.stories.tsx
index 6aaca01ee..1515e1abe 100644
--- a/web/stories/VideoPoster.stories.tsx
+++ b/web/stories/VideoPoster.stories.tsx
@@ -3,9 +3,20 @@ import { ComponentStory, ComponentMeta } from '@storybook/react';
 import VideoPoster from '../components/video/VideoPoster';
 
 export default {
-  title: 'owncast/Video poster',
+  title: 'owncast/Player/Video poster',
   component: VideoPoster,
-  parameters: {},
+  parameters: {
+    docs: {
+      description: {
+        component: `
+- Sits on top of the video player when playback is not taking place.
+- Shows the instance logo when the video is offline.
+- Initial image is the logo when online.
+- When the stream is online, will transition, via cross-fades, through the thumbnail.
+- Will be removed when playback starts.`,
+      },
+    },
+  },
 } as ComponentMeta<typeof VideoPoster>;
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars