diff --git a/web/.storybook/stories-category-doc-pages/screenshots/android/Screenshots-android-stock-browser.stories.mdx b/web/.storybook/stories-category-doc-pages/screenshots/android/Screenshots-android-stock-browser.stories.mdx
new file mode 100644
index 000000000..02e4571c8
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/screenshots/android/Screenshots-android-stock-browser.stories.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/Android/Stock Browser"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-offline.png"
+  alt="Android Browser offline"
+  height="1000px"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-online.png"
+  alt="Android Browser offline"
+  height="1000px"
+/>
+
+</Story>
diff --git a/web/.storybook/stories-category-doc-pages/screenshots/ipad/Screenshots-iPad-landscape-safari.stories.mdx b/web/.storybook/stories-category-doc-pages/screenshots/ipad/Screenshots-iPad-landscape-safari.stories.mdx
new file mode 100644
index 000000000..56583b709
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/screenshots/ipad/Screenshots-iPad-landscape-safari.stories.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/iPad Landscape/Safari"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
+  alt="macOS Safari offline"
+  width="800px"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
+  alt="macOS Safari online"
+  width="800px"
+/>
+
+</Story>
diff --git a/web/.storybook/stories-category-doc-pages/screenshots/ipad/Screenshots-iPad-portrait-safari.stories.mdx b/web/.storybook/stories-category-doc-pages/screenshots/ipad/Screenshots-iPad-portrait-safari.stories.mdx
new file mode 100644
index 000000000..414b536a1
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/screenshots/ipad/Screenshots-iPad-portrait-safari.stories.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/iPad Portrait/Safari"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-offline.png"
+  alt="macOS Safari offline"
+  width="800px"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-online.png"
+  alt="macOS Safari online"
+  width="800px"
+/>
+
+</Story>
diff --git a/web/.storybook/stories-category-doc-pages/screenshots/iphone/Screenshots-iPhone-safari-landscape.stories.mdx b/web/.storybook/stories-category-doc-pages/screenshots/iphone/Screenshots-iPhone-safari-landscape.stories.mdx
new file mode 100644
index 000000000..8c5b6bfc0
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/screenshots/iphone/Screenshots-iPhone-safari-landscape.stories.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/iPhone/Safari/Landscape"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
+  alt="iPhone Safari offline"
+  height="1000px"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
+  alt="iPhone Safari online"
+  height="1000px"
+/>
+
+</Story>
diff --git a/web/.storybook/stories-category-doc-pages/screenshots/iphone/Screenshots-iPhone-safari-portrait.stories.mdx b/web/.storybook/stories-category-doc-pages/screenshots/iphone/Screenshots-iPhone-safari-portrait.stories.mdx
new file mode 100644
index 000000000..9a85c62be
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/screenshots/iphone/Screenshots-iPhone-safari-portrait.stories.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/iPhone/Safari/Portrait"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png"
+  alt="iPhone Safari offline"
+  height="1000px"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png"
+  alt="iPhone Safari online"
+  height="1000px"
+/>
+
+</Story>
diff --git a/web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-chrome.stories.mdx b/web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-chrome.stories.mdx
new file mode 100644
index 000000000..ac2f8a714
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-chrome.stories.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/macOS/Chrome"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/os-x-ventura-chrome-desktop-default-offline.png"
+  alt="macOS Chrome offline"
+  width="100%"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/os-x-ventura-chrome-desktop-default-online.png"
+  alt="macOS Chrome online"
+  width="100%"
+/>
+
+</Story>
diff --git a/web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-firefox.stories.mdx b/web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-firefox.stories.mdx
new file mode 100644
index 000000000..424d2d861
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-firefox.stories.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/macOS/Firefox"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/os-x-ventura-firefox-desktop-default-offline.png"
+  alt="macOS Chrome offline"
+  width="100%"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/os-x-ventura-firefox-desktop-default-online.png"
+  alt="macOS Chrome online"
+  width="100%"
+/>
+
+</Story>
diff --git a/web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-safari.stories.mdx b/web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-safari.stories.mdx
new file mode 100644
index 000000000..ae4ce7340
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/screenshots/macos/Screenshots-macOS-safari.stories.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/macOS/Safari"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/os-x-ventura-safari-desktop-default-offline.png"
+  alt="macOS Safari offline"
+  width="100%"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/os-x-ventura-safari-desktop-default-online.png"
+  alt="macOS Safari online"
+  width="100%"
+/>
+
+</Story>
diff --git a/web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-chrome.stories.mdx b/web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-chrome.stories.mdx
new file mode 100644
index 000000000..cbace6e19
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-chrome.stories.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/Windows/Chrome"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/windows-11-chrome-desktop-default-offline.png"
+  alt="Windows Chrome offline"
+  width="100%"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/windows-11-chrome-desktop-default-online.png"
+  alt="Windows Chrome online"
+  width="100%"
+/>
+
+</Story>
diff --git a/web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-firefox.stories.mdx b/web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-firefox.stories.mdx
new file mode 100644
index 000000000..e55bf7498
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows-firefox.stories.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/Windows/Firefox"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/windows-10-firefox-desktop-default-offline.png"
+  alt="Windows Firefox offline"
+  width="100%"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/windows-10-firefox-desktop-default-online.png"
+  alt="Windows Firefox online"
+  width="100%"
+/>
+
+</Story>
diff --git a/web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows.edge.stories.mdx b/web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows.edge.stories.mdx
new file mode 100644
index 000000000..58fe4ddd3
--- /dev/null
+++ b/web/.storybook/stories-category-doc-pages/screenshots/windows/Screenshots-windows.edge.stories.mdx
@@ -0,0 +1,26 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+
+<Meta
+  title="owncast/Screenshots/Windows/Edge"
+  parameters={{ chromatic: { disableSnapshot: true } }}
+/>
+
+<Story name="Offline">
+
+<img
+  src="screenshots/windows-10-edge-desktop-default-offline.png"
+  alt="Windows Edge offline"
+  width="100%"
+/>
+
+</Story>
+
+<Story name="Online">
+
+<img
+  src="screenshots/windows-10-edge-desktop-default-online.png"
+  alt="Windows Edge online"
+  width="100%"
+/>
+
+</Story>
diff --git a/web/.storybook/story-assets/screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-offline.png b/web/.storybook/story-assets/screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-offline.png
new file mode 100644
index 000000000..49ead3b8c
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-offline.png differ
diff --git a/web/.storybook/story-assets/screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-online.png b/web/.storybook/story-assets/screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-online.png
new file mode 100644
index 000000000..bc40df5af
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/android-13.0-android-browser-google-pixel-7-pro-portrait-online.png differ
diff --git a/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png b/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png
new file mode 100644
index 000000000..55f0ddfe8
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-offline.png differ
diff --git a/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png b/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png
new file mode 100644
index 000000000..b1fc32446
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-ipad-pro-11-2022-landscape-online.png differ
diff --git a/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-offline.png b/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-offline.png
new file mode 100644
index 000000000..4e222a9ca
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-offline.png differ
diff --git a/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-online.png b/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-online.png
new file mode 100644
index 000000000..8503dd34e
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-ipad-pro-11-2022-portrait-online.png differ
diff --git a/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-iphone-14-pro-portrait-offline.png b/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-iphone-14-pro-portrait-offline.png
new file mode 100644
index 000000000..e07864eb6
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-iphone-14-pro-portrait-offline.png differ
diff --git a/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-iphone-14-pro-portrait-online.png b/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-iphone-14-pro-portrait-online.png
new file mode 100644
index 000000000..afda66c3f
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/ios-16-mobile-safari-iphone-14-pro-portrait-online.png differ
diff --git a/web/.storybook/story-assets/screenshots/os-x-ventura-chrome-desktop-default-offline.png b/web/.storybook/story-assets/screenshots/os-x-ventura-chrome-desktop-default-offline.png
new file mode 100644
index 000000000..f1dfbd703
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/os-x-ventura-chrome-desktop-default-offline.png differ
diff --git a/web/.storybook/story-assets/screenshots/os-x-ventura-chrome-desktop-default-online.png b/web/.storybook/story-assets/screenshots/os-x-ventura-chrome-desktop-default-online.png
new file mode 100644
index 000000000..d0d5c40ec
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/os-x-ventura-chrome-desktop-default-online.png differ
diff --git a/web/.storybook/story-assets/screenshots/os-x-ventura-safari-desktop-default-offline.png b/web/.storybook/story-assets/screenshots/os-x-ventura-safari-desktop-default-offline.png
new file mode 100644
index 000000000..c5ecbe80c
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/os-x-ventura-safari-desktop-default-offline.png differ
diff --git a/web/.storybook/story-assets/screenshots/os-x-ventura-safari-desktop-default-online.png b/web/.storybook/story-assets/screenshots/os-x-ventura-safari-desktop-default-online.png
new file mode 100644
index 000000000..9a4cbed9e
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/os-x-ventura-safari-desktop-default-online.png differ
diff --git a/web/.storybook/story-assets/screenshots/windows-10-edge-desktop-default-offline.png b/web/.storybook/story-assets/screenshots/windows-10-edge-desktop-default-offline.png
new file mode 100644
index 000000000..02fa29ede
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/windows-10-edge-desktop-default-offline.png differ
diff --git a/web/.storybook/story-assets/screenshots/windows-10-edge-desktop-default-online.png b/web/.storybook/story-assets/screenshots/windows-10-edge-desktop-default-online.png
new file mode 100644
index 000000000..3aa941d82
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/windows-10-edge-desktop-default-online.png differ
diff --git a/web/.storybook/story-assets/screenshots/windows-11-chrome-desktop-default-offline.png b/web/.storybook/story-assets/screenshots/windows-11-chrome-desktop-default-offline.png
new file mode 100644
index 000000000..6c4c8d3dc
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/windows-11-chrome-desktop-default-offline.png differ
diff --git a/web/.storybook/story-assets/screenshots/windows-11-chrome-desktop-default-online.png b/web/.storybook/story-assets/screenshots/windows-11-chrome-desktop-default-online.png
new file mode 100644
index 000000000..6102060cb
Binary files /dev/null and b/web/.storybook/story-assets/screenshots/windows-11-chrome-desktop-default-online.png differ