diff --git a/packages/harmony/.storybook/preview.ts b/packages/harmony/.storybook/preview.ts
index 1e4d775201b..1b743ca06b2 100644
--- a/packages/harmony/.storybook/preview.ts
+++ b/packages/harmony/.storybook/preview.ts
@@ -2,7 +2,6 @@ import {
   withThemeByDataAttribute,
   withThemeFromJSXProvider
 } from '@storybook/addon-themes'
-import { ComponentRules, RelatedComponents } from '../src/storybook/components'
 
 // This file is used to configure all stories
 import './global.css'
@@ -16,11 +15,7 @@ export const parameters = {
   viewMode: 'docs',
   docs: {
     container: HarmonyDocsContainer,
-    toc: true,
-    components: {
-      ComponentRules,
-      RelatedComponents
-    }
+    toc: true
   },
   darkMode: {
     light: harmonyDocsThemes.day,
diff --git a/packages/harmony/src/components/Components.stories.mdx b/packages/harmony/src/components/Components.stories.mdx
index ccf359b91b9..da287466f54 100644
--- a/packages/harmony/src/components/Components.stories.mdx
+++ b/packages/harmony/src/components/Components.stories.mdx
@@ -1,5 +1,24 @@
 import { Meta, Title } from '@storybook/blocks'
 
+import { RelatedComponents } from 'storybook/components'
+
 <Meta title='Components/Welcome' />
 
 <Title>Components</Title>
+
+Detailed information and guidelines on each component.
+
+## What's Inside
+
+<RelatedComponents
+  componentNames={[
+    'Button',
+    'TextInput',
+    'SelectablePill',
+    'PlainButton',
+    'TextLink',
+    'Divider',
+    'Avatar',
+    'Paper'
+  ]}
+/>
diff --git a/packages/harmony/src/components/button/Button/Button.mdx b/packages/harmony/src/components/button/Button/Button.mdx
index 8a073f94b93..f331f94b98c 100644
--- a/packages/harmony/src/components/button/Button/Button.mdx
+++ b/packages/harmony/src/components/button/Button/Button.mdx
@@ -208,4 +208,6 @@ A link that looks like a button. Useful for buttons that trigger navigation
 
 ## Related components
 
-<RelatedComponents componentNames={['PlainButton', 'SocialButton']} />
+<RelatedComponents
+  componentNames={['PlainButton', 'FollowButton', 'TextLink']}
+/>
diff --git a/packages/harmony/src/components/layout/Paper/Paper.tsx b/packages/harmony/src/components/layout/Paper/Paper.tsx
index ead7009cafc..b7f2e644804 100644
--- a/packages/harmony/src/components/layout/Paper/Paper.tsx
+++ b/packages/harmony/src/components/layout/Paper/Paper.tsx
@@ -21,6 +21,7 @@ export const Paper = styled(Flex)<PaperProps>((props) => {
     boxShadow: theme.shadows[shadow],
     border: border && `1px solid ${theme.color.border[border]}`,
     borderRadius: theme.cornerRadius[borderRadius],
-    backgroundColor: theme.color.background[backgroundColor]
+    backgroundColor: theme.color.background[backgroundColor],
+    overflow: 'hidden'
   }
 })
diff --git a/packages/harmony/src/storybook/components/InformationBox.tsx b/packages/harmony/src/storybook/components/InformationBox.tsx
index e7a135db3c9..bee81c60034 100644
--- a/packages/harmony/src/storybook/components/InformationBox.tsx
+++ b/packages/harmony/src/storybook/components/InformationBox.tsx
@@ -1,4 +1,4 @@
-import type { ReactElement } from 'react'
+import type { ReactNode } from 'react'
 
 import { Unstyled } from '@storybook/blocks'
 
@@ -6,7 +6,7 @@ import { Flex, Link, Paper, Text } from 'components'
 
 type InformationBoxProps = {
   className?: string
-  component: ReactElement
+  component: ReactNode
   title: string
   description: string
   href?: string
@@ -18,13 +18,15 @@ export const InformationBox = (props: InformationBoxProps) => {
   return (
     <Paper as='section' direction='column' flex={1} gap='m'>
       <Flex
-        p='xl'
+        h={144}
+        ph='xl'
         alignItems='center'
         justifyContent='center'
         className={className}
         css={(theme) => ({
           backgroundColor: theme.color.background.default,
-          height: 147
+          flexGrow: 0,
+          WebkitFlexGrow: 0
         })}
       >
         <Unstyled>{component}</Unstyled>
diff --git a/packages/harmony/src/storybook/components/RelatedComponents.tsx b/packages/harmony/src/storybook/components/RelatedComponents.tsx
index 2f7bcb3c908..a85dcb4d0ab 100644
--- a/packages/harmony/src/storybook/components/RelatedComponents.tsx
+++ b/packages/harmony/src/storybook/components/RelatedComponents.tsx
@@ -5,16 +5,58 @@ import {
   Flex,
   PlainButton,
   SocialButton,
-  Paper
+  Button,
+  TextInput,
+  SelectablePill,
+  Paper,
+  Avatar
 } from 'components'
+import { IconCaretRight } from 'icons'
+import shadowBackground from 'storybook/assets/shadowBackground.jpeg'
 
 import { InformationBox } from './InformationBox'
 
 const relatedComponentsMap = {
+  Button: {
+    title: 'Button',
+    description:
+      'Buttons allow users to trigger an action or event with a single click.',
+    component: <Button>Button</Button>,
+    link: 'buttons-button--documentation'
+  },
+  TextInput: {
+    title: 'Text Input',
+    description: 'An input is a field where users can enter and edit text.',
+    component: (
+      <TextInput
+        label='Input label'
+        placeholder='Placeholder value'
+        _isFocused
+      />
+    ),
+    link: 'input-textinput--documentation'
+  },
+  SelectablePill: {
+    title: 'Selectable Pill',
+    description: 'Used for binary selections',
+    component: (
+      <SelectablePill label='SelectablePill' size='large' isSelected={false} />
+    ),
+    link: 'input-selectablepill--documentation'
+  },
   PlainButton: {
-    component: <PlainButton>Plain Button</PlainButton>,
-    link: 'buttons-plainbutton--documentation',
-    description: 'A Button with no border and background.'
+    title: 'Plain Button',
+    description:
+      'The plain button is like our button component but without a bounding frame or container.',
+    component: <PlainButton iconRight={IconCaretRight}>See More</PlainButton>,
+    link: 'buttons-plainbutton--documentation'
+  },
+  TextLink: {
+    title: 'Text Link',
+    description:
+      'Apply link text properties to any text to link an internal or external page.',
+    component: null,
+    link: 'textlink--documentation'
   },
   SocialButton: {
     component: <SocialButton socialType='instagram' aria-label='instagram' />,
@@ -28,7 +70,7 @@ const relatedComponentsMap = {
         borderRadius='m'
         p='l'
         gap='m'
-        style={{ background: 'white' }}
+        css={{ background: 'white' }}
       >
         <Text variant='label'>A</Text>
         <Divider />
@@ -39,6 +81,24 @@ const relatedComponentsMap = {
       'A separator between two elements, usually consisting of a horizontal  or vertical line.',
     link: 'layout-divider--documentation'
   },
+  Avatar: {
+    title: 'Avatar',
+    description:
+      'Ensure layouts are consistent with our intuitive spacing system.',
+    component: (
+      <Box w={80} h={80}>
+        <Avatar src={shadowBackground} />
+      </Box>
+    ),
+    link: 'avatar--documentation'
+  },
+  Paper: {
+    title: 'Paper',
+    description:
+      'Ensure layouts are consistent with our intuitive spacing system.',
+    component: <Paper w={124} h={70} shadow='mid' />,
+    link: 'layout-paper--documentation'
+  },
   Box: {
     component: (
       <Box
@@ -74,10 +134,18 @@ const relatedComponentsMap = {
       'A layout component to handle flex behavior without manual styling.',
     link: 'layout-flex--documentation'
   },
-  Paper: {
-    component: <Paper w={200} h={80} />,
-    description: 'An elevated container which stands out from the background.',
-    link: 'layout-paper--documentation'
+  FollowButton: {
+    title: 'Follow Button',
+    description: 'The Follow button allow users to hold an on or off state.',
+    component: 'TODO',
+    link: 'TODO'
+  },
+  RadioInput: {
+    title: 'Radio Input',
+    description:
+      'Radio buttons allow a user to select a single option from a list of predefined options.',
+    component: 'TODO',
+    link: 'TODO'
   }
 }
 
@@ -89,7 +157,14 @@ export const RelatedComponents = (props: RelatedComponentsProps) => {
   const { componentNames } = props
 
   return (
-    <Flex gap='2xl' mt='3xl'>
+    <Flex
+      mv='3xl'
+      gap='2xl'
+      // Style children to have max of 3 per row but fill the last row
+      css={{ section: { flex: '1 1', minWidth: 300 } }}
+      wrap='wrap'
+      justifyContent='space-between'
+    >
       {componentNames.map((componentName) => {
         const { component, link, description } =
           relatedComponentsMap[componentName]
diff --git a/packages/harmony/src/storybook/components/RelatedFoundations.tsx b/packages/harmony/src/storybook/components/RelatedFoundations.tsx
index 5ef59b13b7c..f361b0c0354 100644
--- a/packages/harmony/src/storybook/components/RelatedFoundations.tsx
+++ b/packages/harmony/src/storybook/components/RelatedFoundations.tsx
@@ -131,7 +131,8 @@ export const RelatedFoundations = (props: RelatedFoundationsProps) => {
     <Flex
       mv='3xl'
       gap='2xl'
-      css={{ section: { flex: '0 0 calc(33.33% - 32px)' } }}
+      // Style children to have max of 3 per row but fill the last row
+      css={{ section: { flex: '1 1', minWidth: 300 } }}
       wrap='wrap'
       justifyContent='space-between'
     >