diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx
index 461ee03c2..8bb718771 100644
--- a/web/components/ui/Content/Content.tsx
+++ b/web/components/ui/Content/Content.tsx
@@ -79,7 +79,7 @@ const DesktopContent = ({ name, streamTitle, summary, tags, socialHandles, extra
           <CustomPageContent content={extraPageContent} />
         </TabPane>
         <TabPane tab="Followers" key="3">
-          <FollowerCollection />
+          <FollowerCollection name={name} />
         </TabPane>
       </Tabs>
     </div>
@@ -123,7 +123,7 @@ const MobileContent = ({
         <CustomPageContent content={extraPageContent} />
       </TabPane>
       <TabPane tab="Followers" key="3">
-        <FollowerCollection />
+        <FollowerCollection name={name} />
       </TabPane>
     </Tabs>
   </div>
diff --git a/web/components/ui/CustomPageContent/CustomPageContent.module.scss b/web/components/ui/CustomPageContent/CustomPageContent.module.scss
index cd6917ade..e4630c716 100644
--- a/web/components/ui/CustomPageContent/CustomPageContent.module.scss
+++ b/web/components/ui/CustomPageContent/CustomPageContent.module.scss
@@ -7,8 +7,6 @@
 .customPageContent {
   font-size: 1.1rem;
   line-height: 1.6em;
-  margin: 0;
-  padding: 0;
   color: var(--theme-color-palette-0);
   padding: calc(2 * var(--content-padding));
   border-radius: var(--theme-rounded-corners);
diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss b/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss
index 9bb895045..5533042de 100644
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss
+++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.module.scss
@@ -1,3 +1,11 @@
 .followers {
-	width: 100%;
+  width: 100%;
+  background-color: var(--theme-color-background-light);
+}
+
+.noFollowers {
+  padding: calc(2 * var(--content-padding));
+  border-radius: var(--theme-rounded-corners);
+  width: 100%;
+  background-color: var(--theme-color-background-light);
 }
diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx b/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx
index 2c56d56e7..bdf1a4a2b 100644
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx
+++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { RecoilRoot } from 'recoil';
 import { FollowerCollection } from './FollowerCollection';
 
 export default {
@@ -9,7 +10,9 @@ export default {
 } as ComponentMeta<typeof FollowerCollection>;
 
 const Template: ComponentStory<typeof FollowerCollection> = (args: object) => (
-  <FollowerCollection {...args} />
+  <RecoilRoot>
+    <FollowerCollection name="Example stream name" {...args} />
+  </RecoilRoot>
 );
 
 export const NoFollowers = Template.bind({});
diff --git a/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx b/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
index 034ee39fc..df24b30a2 100644
--- a/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
+++ b/web/components/ui/followers/FollowerCollection/FollowerCollection.tsx
@@ -2,9 +2,14 @@ import { FC, useEffect, useState } from 'react';
 import { Col, Pagination, Row } from 'antd';
 import { Follower } from '../../../../interfaces/follower';
 import { SingleFollower } from '../SingleFollower/SingleFollower';
-import styles from '../SingleFollower/SingleFollower.module.scss';
+import styles from './FollowerCollection.module.scss';
+import { FollowButton } from '../../../action-buttons/FollowButton';
 
-export const FollowerCollection: FC = () => {
+export type FollowerCollectionProps = {
+  name: string;
+};
+
+export const FollowerCollection: FC<FollowerCollectionProps> = ({ name }) => {
   const ENDPOINT = '/api/followers';
   const ITEMS_PER_PAGE = 24;
 
@@ -35,7 +40,20 @@ export const FollowerCollection: FC = () => {
   }, [page]);
 
   const noFollowers = (
-    <div>A message explaining how to follow goes here since there are no followers.</div>
+    <div className={styles.noFollowers}>
+      <h2>Be the first follower!</h2>
+      <p>
+        {name !== 'Owncast' ? name : 'This server'} is a part of the{' '}
+        <a href="https://owncast.online/join-fediverse">Fediverse</a>, an interconnected network of
+        independent users and servers.
+      </p>
+      <p>
+        By following {name !== 'Owncast' ? name : 'this server'} you&apos;ll be able to get updates
+        from the stream, share it with others, and and show your appreciation when it goes live, all
+        from your own Fediverse account.
+      </p>
+      <FollowButton />
+    </div>
   );
 
   if (!followers?.length) {