diff --git a/packages/react/.storybook/Container.js b/packages/react/.storybook/Container.js
index a82a638caec1..d6b256c73d6a 100644
--- a/packages/react/.storybook/Container.js
+++ b/packages/react/.storybook/Container.js
@@ -10,7 +10,7 @@ import './polyfills';
 
 import React, { useEffect } from 'react';
 
-function Container({ story }) {
+function Container({ story, id }) {
   useEffect(() => {
     const originalDirection = document.documentElement.dir;
     if (process.env.CARBON_REACT_STORYBOOK_USE_RTL === 'true') {
@@ -28,6 +28,7 @@ function Container({ story }) {
   return (
     <React.StrictMode>
       <div
+        className={id.toLowerCase()}
         data-floating-menu-container
         role="main"
         style={{
diff --git a/packages/react/.storybook/Welcome/Welcome.js b/packages/react/.storybook/Welcome/Welcome.js
new file mode 100644
index 000000000000..9a56bf4e5ff2
--- /dev/null
+++ b/packages/react/.storybook/Welcome/Welcome.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import bg from './carbon_bg.png';
+import './welcome.scss';
+import PackageInfo from './../../package.json';
+
+export const Welcome = () => {
+  return (
+    <div
+      className="welcome__container"
+      style={{
+        background: `url(${bg}) no-repeat center center fixed`,
+        backgroundSize: 'cover',
+      }}>
+      <h2 className="welcome__heading">Carbon Components</h2>
+      <h4 className="welcome__heading welcome__heading--subtitle">{`React v${PackageInfo.version}`}</h4>
+    </div>
+  );
+};
diff --git a/packages/react/.storybook/WelcomePage/Welcome-story.js b/packages/react/.storybook/Welcome/Welcome.stories.js
similarity index 90%
rename from packages/react/.storybook/WelcomePage/Welcome-story.js
rename to packages/react/.storybook/Welcome/Welcome.stories.js
index 738b4cb34c18..d37d1334eb9a 100644
--- a/packages/react/.storybook/WelcomePage/Welcome-story.js
+++ b/packages/react/.storybook/Welcome/Welcome.stories.js
@@ -11,7 +11,7 @@ import React from 'react';
 import { Welcome as Intro } from './Welcome';
 
 export default {
-  title: ' Welcome',
+  title: ' Getting Started/ Welcome',
   component: Intro,
 };
 
diff --git a/packages/react/.storybook/WelcomePage/carbon_bg.png b/packages/react/.storybook/Welcome/carbon_bg.png
similarity index 100%
rename from packages/react/.storybook/WelcomePage/carbon_bg.png
rename to packages/react/.storybook/Welcome/carbon_bg.png
diff --git a/packages/react/.storybook/Welcome/welcome.scss b/packages/react/.storybook/Welcome/welcome.scss
new file mode 100644
index 000000000000..b30711e71f2b
--- /dev/null
+++ b/packages/react/.storybook/Welcome/welcome.scss
@@ -0,0 +1,22 @@
+@import '~carbon-components/scss/globals/scss/typography';
+
+.container-welcome {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding: 0 !important;
+}
+
+.welcome__container {
+  width: 100vw;
+  height: 100vh;
+  padding: 3rem;
+}
+
+.welcome__heading {
+  @include type-style('productive-heading-07');
+
+  color: $inverse-01;
+}
+
+.welcome__heading--subtitle {
+  font-weight: 600;
+}
diff --git a/packages/react/.storybook/WelcomePage/Welcome.js b/packages/react/.storybook/WelcomePage/Welcome.js
deleted file mode 100644
index 872dc5521ee0..000000000000
--- a/packages/react/.storybook/WelcomePage/Welcome.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import React from 'react';
-import bg from './carbon_bg.png';
-
-export const Welcome = () => {
-  return <div>Welcome!</div>;
-};
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
index 2a5128a719b8..3c0f930e83ea 100644
--- a/packages/react/.storybook/main.js
+++ b/packages/react/.storybook/main.js
@@ -10,7 +10,7 @@
 module.exports = {
   addons: ['storybook-preset-carbon'],
   stories: [
-    './WelcomePage/Welcome-story.js',
+    './Welcome/Welcome.stories.js',
     '../src/**/*-story.js',
     '../src/**/*.stories.mdx',
   ],
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
index dccb38d15f2f..9371d50b15ff 100644
--- a/packages/react/.storybook/preview.js
+++ b/packages/react/.storybook/preview.js
@@ -19,6 +19,7 @@ const customPropertyPrefix = 'cds';
 addParameters({
   options: {
     theme: carbonTheme,
+    showRoots: true,
     /**
      * We sort our stories by default alphabetically, however there are specific
      * keywords that will be sorted further down the sidebar, including
@@ -68,8 +69,6 @@ addParameters({
         if (idB.includes(keyword)) {
           matches.set(idB, weight);
         }
-
-        console.log(idA);
       }
 
       // If we have matches for either id, then we will compare the ids based on
@@ -97,7 +96,11 @@ configureActions({
   limit: 10,
 });
 
-addDecorator((story) => <Container story={story} />);
+addDecorator((story, i) => {
+  return (
+    <Container id={`container-${story().type?.displayName}`} story={story} />
+  );
+});
 
 addons.getChannel().on(CARBON_CURRENT_THEME, (theme) => {
   document.documentElement.setAttribute('storybook-carbon-theme', theme);
diff --git a/packages/react/src/components/AspectRatio/AspectRatio-story.js b/packages/react/src/components/AspectRatio/AspectRatio-story.js
index b003b84cf9ee..12f8dde356ce 100644
--- a/packages/react/src/components/AspectRatio/AspectRatio-story.js
+++ b/packages/react/src/components/AspectRatio/AspectRatio-story.js
@@ -14,7 +14,7 @@ import { AspectRatio } from './';
 import mdx from './AspectRatio.mdx';
 
 export default {
-  title: 'AspectRatio',
+  title: 'Components/AspectRatio',
   component: AspectRatio,
   decorators: [
     withKnobs,
diff --git a/packages/react/src/components/Breadcrumb/Breadcrumb-story.js b/packages/react/src/components/Breadcrumb/Breadcrumb-story.js
index aeed0e3066b1..e748b7efe4a3 100644
--- a/packages/react/src/components/Breadcrumb/Breadcrumb-story.js
+++ b/packages/react/src/components/Breadcrumb/Breadcrumb-story.js
@@ -14,7 +14,7 @@ import { Breadcrumb, BreadcrumbItem, BreadcrumbSkeleton } from '../Breadcrumb';
 import mdx from './Breadcrumb.mdx';
 
 export default {
-  title: 'Breadcrumb',
+  title: 'Components/Breadcrumb',
   component: Breadcrumb,
   subcomponents: {
     BreadcrumbItem,
diff --git a/packages/react/src/components/Button/Button-story.js b/packages/react/src/components/Button/Button-story.js
index 0e6b0d2d7e16..dfd9c4ae70fa 100644
--- a/packages/react/src/components/Button/Button-story.js
+++ b/packages/react/src/components/Button/Button-story.js
@@ -116,7 +116,7 @@ const props = {
 };
 
 export default {
-  title: 'Button',
+  title: 'Components/Button',
   decorators: [withKnobs],
   parameters: {
     component: Button,
diff --git a/packages/react/src/components/Checkbox/Checkbox-story.js b/packages/react/src/components/Checkbox/Checkbox-story.js
index ba3fad651a75..06aa96c50d7d 100644
--- a/packages/react/src/components/Checkbox/Checkbox-story.js
+++ b/packages/react/src/components/Checkbox/Checkbox-story.js
@@ -17,7 +17,7 @@ import mdx from './Checkbox.mdx';
 const { prefix } = settings;
 
 export default {
-  title: 'Checkbox',
+  title: 'Components/Checkbox',
   component: Checkbox,
   subcomponents: {
     CheckboxSkeleton,
diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
index 73ff34c25bce..bb2bf1df6442 100644
--- a/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
+++ b/packages/react/src/components/CodeSnippet/CodeSnippet-story.js
@@ -13,7 +13,7 @@ import CodeSnippetSkeleton from './CodeSnippet.Skeleton';
 import mdx from './CodeSnippet.mdx';
 
 export default {
-  title: 'CodeSnippet',
+  title: 'Components/CodeSnippet',
   component: CodeSnippet,
   decorators: [withKnobs],
   parameters: {
diff --git a/packages/react/src/components/ComboBox/ComboBox-story.js b/packages/react/src/components/ComboBox/ComboBox-story.js
index f60773320e3a..86da4685af19 100644
--- a/packages/react/src/components/ComboBox/ComboBox-story.js
+++ b/packages/react/src/components/ComboBox/ComboBox-story.js
@@ -52,7 +52,7 @@ const directions = {
 };
 
 export default {
-  title: 'ComboBox',
+  title: 'Components/ComboBox',
   component: ComboBox,
   parameters: {
     docs: {
diff --git a/packages/react/src/components/ComposedModal/ComposedModal-story.js b/packages/react/src/components/ComposedModal/ComposedModal-story.js
index 865dda274468..2b8ac20795f7 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal-story.js
+++ b/packages/react/src/components/ComposedModal/ComposedModal-story.js
@@ -184,7 +184,7 @@ const scrollingContent = (
 );
 
 export default {
-  title: 'ComposedModal',
+  title: 'Components/ComposedModal',
   decorators: [withKnobs],
   parameters: {
     component: ComposedModal,
diff --git a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
index 1632364c5977..e27b581c7397 100644
--- a/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
+++ b/packages/react/src/components/ContentSwitcher/ContentSwitcher-story.js
@@ -42,7 +42,7 @@ const props = {
 };
 
 export default {
-  title: 'ContentSwitcher',
+  title: 'Components/ContentSwitcher',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/CopyButton/CopyButton-story.js b/packages/react/src/components/CopyButton/CopyButton-story.js
index db199c4e8679..584233d13274 100644
--- a/packages/react/src/components/CopyButton/CopyButton-story.js
+++ b/packages/react/src/components/CopyButton/CopyButton-story.js
@@ -26,7 +26,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'CopyButton',
+  title: 'Components/CopyButton',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/DataTable/stories/DataTable-filtering-story.js b/packages/react/src/components/DataTable/stories/DataTable-filtering-story.js
index c6188801b5e3..18feae66348c 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-filtering-story.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-filtering-story.js
@@ -26,7 +26,7 @@ import { rows, headers } from './shared';
 import mdx from '../DataTable.mdx';
 
 export default {
-  title: 'DataTable/Filtering',
+  title: 'Components/DataTable/Filtering',
   component: DataTable,
   subcomponents: {
     TableToolbar,
diff --git a/packages/react/src/components/DataTable/stories/DataTable-selection-story.js b/packages/react/src/components/DataTable/stories/DataTable-selection-story.js
index 7b358b63e91f..849ea1687658 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-selection-story.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-selection-story.js
@@ -21,7 +21,7 @@ import { rows, headers } from './shared';
 import mdx from '../DataTable.mdx';
 
 export default {
-  title: 'DataTable/Selection',
+  title: 'Components/DataTable/Selection',
   component: DataTable,
   subcomponents: {
     TableSelectAll,
diff --git a/packages/react/src/components/DataTable/stories/DataTable-sorting-story.js b/packages/react/src/components/DataTable/stories/DataTable-sorting-story.js
index abf368369869..4bcb1acc7ff1 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-sorting-story.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-sorting-story.js
@@ -19,7 +19,7 @@ import { rows, headers } from './shared';
 import mdx from '../DataTable.mdx';
 
 export default {
-  title: 'DataTable/Sorting',
+  title: 'Components/DataTable/Sorting',
   component: DataTable,
   subcomponents: {
     Table,
diff --git a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content-story.js b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content-story.js
index 4d39f449095e..8de71854210a 100644
--- a/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content-story.js
+++ b/packages/react/src/components/DataTable/stories/dynamic-content/DataTable-dynamic-content-story.js
@@ -37,7 +37,7 @@ import DataTable, {
 import { batchActionClick, rows, headers } from '../shared';
 
 export default {
-  title: 'DataTable/Development',
+  title: 'Components/DataTable/Development',
 };
 
 export const Example = (props) => {
diff --git a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js
index c7e6f739589c..6c2603b17690 100644
--- a/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js
+++ b/packages/react/src/components/DataTable/stories/expansion/DataTable-expansion-story.js
@@ -24,7 +24,7 @@ import { rows, headers } from '../shared';
 import mdx from '../../DataTable.mdx';
 
 export default {
-  title: 'DataTable/Expansion',
+  title: 'Components/DataTable/Expansion',
   component: DataTable,
   subcomponents: {
     TableExpandHeader,
diff --git a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js
index 8b37902aab25..bd8ea4dee28b 100644
--- a/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js
+++ b/packages/react/src/components/DataTableSkeleton/DataTableSkeleton-story.js
@@ -31,7 +31,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'DataTableSkeleton',
+  title: 'Components/DataTable',
   decorators: [withKnobs],
 
   parameters: {
@@ -39,16 +39,16 @@ export default {
   },
 };
 
-export const Default = () => (
+export const Skeleton = () => (
   <div style={{ width: '800px' }}>
     <DataTableSkeleton {...props()} />
     <br />
   </div>
 );
 
-Default.storyName = 'default';
+Skeleton.storyName = 'default';
 
-Default.parameters = {
+Skeleton.parameters = {
   info: {
     text: `
         Skeleton states are used as a progressive loading state while the user waits for content to load.
diff --git a/packages/react/src/components/DatePicker/DatePicker-story.js b/packages/react/src/components/DatePicker/DatePicker-story.js
index 0f4a14394e7c..6e099c2d5061 100644
--- a/packages/react/src/components/DatePicker/DatePicker-story.js
+++ b/packages/react/src/components/DatePicker/DatePicker-story.js
@@ -81,7 +81,7 @@ const props = {
 };
 
 export default {
-  title: 'DatePicker',
+  title: 'Components/DatePicker',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/Dropdown/Dropdown-story.js b/packages/react/src/components/Dropdown/Dropdown-story.js
index e39fcc5f3e6d..547ff8038464 100644
--- a/packages/react/src/components/Dropdown/Dropdown-story.js
+++ b/packages/react/src/components/Dropdown/Dropdown-story.js
@@ -81,7 +81,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Dropdown',
+  title: 'Components/Dropdown',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js b/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js
index a5b0f2fffa68..75c7e441db7f 100644
--- a/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js
+++ b/packages/react/src/components/ErrorBoundary/ErrorBoundary-story.js
@@ -11,7 +11,7 @@ import { ErrorBoundary, ErrorBoundaryContext } from './';
 import Button from '../Button';
 
 export default {
-  title: 'ErrorBoundary',
+  title: 'Components/ErrorBoundary',
 
   parameters: {
     component: ErrorBoundary,
diff --git a/packages/react/src/components/FileUploader/FileUploader-story.js b/packages/react/src/components/FileUploader/FileUploader-story.js
index 03ea7540a37f..15102cc66081 100644
--- a/packages/react/src/components/FileUploader/FileUploader-story.js
+++ b/packages/react/src/components/FileUploader/FileUploader-story.js
@@ -140,7 +140,7 @@ const props = {
 };
 
 export default {
-  title: 'FileUploader',
+  title: 'Components/FileUploader',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/FluidForm/FluidForm-story.js b/packages/react/src/components/FluidForm/FluidForm-story.js
index fdd658c737d4..afbe11ec3667 100644
--- a/packages/react/src/components/FluidForm/FluidForm-story.js
+++ b/packages/react/src/components/FluidForm/FluidForm-story.js
@@ -37,7 +37,7 @@ const InvalidPasswordProps = {
 };
 
 export default {
-  title: 'FluidForm',
+  title: 'Experimental/FluidForm',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/Form/Form-story.js b/packages/react/src/components/Form/Form-story.js
index 49efba1b236c..73cc21295a96 100644
--- a/packages/react/src/components/Form/Form-story.js
+++ b/packages/react/src/components/Form/Form-story.js
@@ -135,7 +135,7 @@ const buttonEvents = {
 RadioButton.displayName = 'RadioButton';
 
 export default {
-  title: 'Form',
+  title: 'Components/Form',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/FormLabel/FormLabel-story.js b/packages/react/src/components/FormLabel/FormLabel-story.js
index 77ef439261cb..a9c6c4d413e3 100644
--- a/packages/react/src/components/FormLabel/FormLabel-story.js
+++ b/packages/react/src/components/FormLabel/FormLabel-story.js
@@ -12,7 +12,7 @@ import Tooltip from '../Tooltip';
 import mdx from './FormLabel.mdx';
 
 export default {
-  title: 'FormLabel',
+  title: 'Components/FormLabel',
 
   parameters: {
     component: FormLabel,
diff --git a/packages/react/src/components/Grid/Grid-story.js b/packages/react/src/components/Grid/Grid-story.js
index d5be8199e5d2..2c5a0d74fa13 100644
--- a/packages/react/src/components/Grid/Grid-story.js
+++ b/packages/react/src/components/Grid/Grid-story.js
@@ -4,7 +4,7 @@ import { Grid, Row, Column } from './';
 import mdx from './Grid.mdx';
 
 export default {
-  title: 'Grid',
+  title: 'Components/Grid',
   component: Grid,
   subcomponents: {
     Row,
diff --git a/packages/react/src/components/Icon/Icon-story.js b/packages/react/src/components/Icon/Icon-story.js
index da217cdd6b8f..052073e148f0 100644
--- a/packages/react/src/components/Icon/Icon-story.js
+++ b/packages/react/src/components/Icon/Icon-story.js
@@ -64,7 +64,7 @@ const propsSkeleton2 = {
 };
 
 export default {
-  title: 'Icon',
+  title: 'Deprecated/Icon',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/InlineLoading/InlineLoading-story.js b/packages/react/src/components/InlineLoading/InlineLoading-story.js
index 396a80032ae7..23b373369e6d 100644
--- a/packages/react/src/components/InlineLoading/InlineLoading-story.js
+++ b/packages/react/src/components/InlineLoading/InlineLoading-story.js
@@ -34,7 +34,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'InlineLoading',
+  title: 'Components/InlineLoading',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/Link/Link-story.js b/packages/react/src/components/Link/Link-story.js
index 245dd85b345e..247a990d5e3d 100644
--- a/packages/react/src/components/Link/Link-story.js
+++ b/packages/react/src/components/Link/Link-story.js
@@ -31,7 +31,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Link',
+  title: 'Components/Link',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/Loading/Loading-story.js b/packages/react/src/components/Loading/Loading-story.js
index 4f4304d1872b..2924d5a7b882 100644
--- a/packages/react/src/components/Loading/Loading-story.js
+++ b/packages/react/src/components/Loading/Loading-story.js
@@ -18,7 +18,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Loading',
+  title: 'Components/Loading',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/Modal/Modal-story.js b/packages/react/src/components/Modal/Modal-story.js
index dffbf82c92a0..1daed4d7d990 100644
--- a/packages/react/src/components/Modal/Modal-story.js
+++ b/packages/react/src/components/Modal/Modal-story.js
@@ -127,7 +127,7 @@ const props = {
 };
 
 export default {
-  title: 'Modal',
+  title: 'Components/Modal',
   decorators: [withKnobs],
   parameters: {
     component: Modal,
diff --git a/packages/react/src/components/MultiSelect/MultiSelect-story.js b/packages/react/src/components/MultiSelect/MultiSelect-story.js
index cfa4f75b6aa8..30c6c3648905 100644
--- a/packages/react/src/components/MultiSelect/MultiSelect-story.js
+++ b/packages/react/src/components/MultiSelect/MultiSelect-story.js
@@ -107,7 +107,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'MultiSelect',
+  title: 'Components/MultiSelect',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/Notification/Notification-story.js b/packages/react/src/components/Notification/Notification-story.js
index dcdc7c652ad6..0c4bf7523038 100644
--- a/packages/react/src/components/Notification/Notification-story.js
+++ b/packages/react/src/components/Notification/Notification-story.js
@@ -42,7 +42,7 @@ const notificationProps = () => ({
 });
 
 export default {
-  title: 'Notifications',
+  title: 'Components/Notifications',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/NumberInput/NumberInput-story.js b/packages/react/src/components/NumberInput/NumberInput-story.js
index 58515d525c56..fd7dd1b4ac49 100644
--- a/packages/react/src/components/NumberInput/NumberInput-story.js
+++ b/packages/react/src/components/NumberInput/NumberInput-story.js
@@ -65,7 +65,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'NumberInput',
+  title: 'Components/NumberInput',
   component: OGNumberInput,
   decorators: [withKnobs],
 
diff --git a/packages/react/src/components/OrderedList/OrderedList-story.js b/packages/react/src/components/OrderedList/OrderedList-story.js
index 56b11a2e5ad6..ceeba92ad7fc 100644
--- a/packages/react/src/components/OrderedList/OrderedList-story.js
+++ b/packages/react/src/components/OrderedList/OrderedList-story.js
@@ -4,7 +4,7 @@ import ListItem from '../ListItem';
 import mdx from './OrderedList.mdx';
 
 export default {
-  title: 'OrderedList',
+  title: 'Components/OrderedList',
 
   parameters: {
     component: OrderedList,
diff --git a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js
index 4306e01565b0..a35b2248397a 100644
--- a/packages/react/src/components/OverflowMenu/OverflowMenu-story.js
+++ b/packages/react/src/components/OverflowMenu/OverflowMenu-story.js
@@ -56,7 +56,7 @@ const props = {
 OverflowMenu.displayName = 'OverflowMenu';
 
 export default {
-  title: 'OverflowMenu',
+  title: 'Components/OverflowMenu',
   decorators: [withKnobs],
   component: OGOverflowMenu,
   subcomponents: {
diff --git a/packages/react/src/components/Pagination/Pagination-story.js b/packages/react/src/components/Pagination/Pagination-story.js
index 7c025a41dfc0..24be480c5bec 100644
--- a/packages/react/src/components/Pagination/Pagination-story.js
+++ b/packages/react/src/components/Pagination/Pagination-story.js
@@ -45,7 +45,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Pagination',
+  title: 'Components/Pagination',
   decorators: [
     withKnobs,
     (story) => <div style={{ maxWidth: '800px' }}>{story()}</div>,
diff --git a/packages/react/src/components/Pagination/experimental/Pagination-story.js b/packages/react/src/components/Pagination/experimental/Pagination-story.js
index a1fe03bea1d5..f47170750841 100644
--- a/packages/react/src/components/Pagination/experimental/Pagination-story.js
+++ b/packages/react/src/components/Pagination/experimental/Pagination-story.js
@@ -39,7 +39,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'unstable_Pagination',
+  title: 'Experimental/unstable_Pagination',
   decorators: [
     withKnobs,
     (story) => <div style={{ width: '800px' }}>{story()}</div>,
diff --git a/packages/react/src/components/PaginationNav/PaginationNav-story.js b/packages/react/src/components/PaginationNav/PaginationNav-story.js
index 67bc833f9c52..08061717ec8d 100644
--- a/packages/react/src/components/PaginationNav/PaginationNav-story.js
+++ b/packages/react/src/components/PaginationNav/PaginationNav-story.js
@@ -26,7 +26,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'PaginationNav',
+  title: 'Components/PaginationNav',
   decorators: [
     withKnobs,
     (story) => <div style={{ width: '800px' }}>{story()}</div>,
diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js
index 2c19cbfedb5d..702911855a52 100644
--- a/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js
+++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js
@@ -17,7 +17,7 @@ import mdx from './ProgressIndicator.mdx';
 const { prefix } = settings;
 
 export default {
-  title: 'ProgressIndicator',
+  title: 'Components/ProgressIndicator',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/RadioButton/RadioButton-story.js b/packages/react/src/components/RadioButton/RadioButton-story.js
index 7087014e27e3..1c83e03256c1 100644
--- a/packages/react/src/components/RadioButton/RadioButton-story.js
+++ b/packages/react/src/components/RadioButton/RadioButton-story.js
@@ -34,7 +34,7 @@ const radioProps = () => ({
 });
 
 export default {
-  title: 'RadioButton',
+  title: 'Components/RadioButton',
   decorators: [withKnobs],
   component: OGRadioButton,
   subcomponents: {
diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-story.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-story.js
index f931e7f62855..8623bab5c35f 100644
--- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-story.js
+++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-story.js
@@ -64,7 +64,7 @@ const props = {
 };
 
 export default {
-  title: 'RadioButtonGroup',
+  title: 'Components/RadioButtonGroup',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/Search/Search-story.js b/packages/react/src/components/Search/Search-story.js
index 97ffd0559247..be8abb880c49 100644
--- a/packages/react/src/components/Search/Search-story.js
+++ b/packages/react/src/components/Search/Search-story.js
@@ -40,7 +40,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Search',
+  title: 'Components/Search',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/Select/Select-story.js b/packages/react/src/components/Select/Select-story.js
index 8a72b95dcd23..faba680b2428 100644
--- a/packages/react/src/components/Select/Select-story.js
+++ b/packages/react/src/components/Select/Select-story.js
@@ -47,7 +47,7 @@ const props = {
 };
 
 export default {
-  title: 'Select',
+  title: 'Components/Select',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js
index af310ae44539..74623c0c1814 100644
--- a/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js
+++ b/packages/react/src/components/SkeletonPlaceholder/SkeletonPlaceholder-story.js
@@ -24,7 +24,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'SkeletonPlaceholder',
+  title: 'Components/Skeleton/SkeletonPlaceholder',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/SkeletonText/SkeletonText-story.js b/packages/react/src/components/SkeletonText/SkeletonText-story.js
index 81e477172e29..b52854a4a13b 100644
--- a/packages/react/src/components/SkeletonText/SkeletonText-story.js
+++ b/packages/react/src/components/SkeletonText/SkeletonText-story.js
@@ -30,7 +30,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'SkeletonText',
+  title: 'Components/Skeleton/SkeletonText',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/Slider/Slider-story.js b/packages/react/src/components/Slider/Slider-story.js
index f4d8955a1220..90179d4469fe 100644
--- a/packages/react/src/components/Slider/Slider-story.js
+++ b/packages/react/src/components/Slider/Slider-story.js
@@ -40,7 +40,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'Slider',
+  title: 'Components/Slider',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/StructuredList/StructuredList-story.js b/packages/react/src/components/StructuredList/StructuredList-story.js
index bbea0f9ac042..8056b2f2335f 100644
--- a/packages/react/src/components/StructuredList/StructuredList-story.js
+++ b/packages/react/src/components/StructuredList/StructuredList-story.js
@@ -22,7 +22,7 @@ import mdx from './StructuredList.mdx';
 const { prefix } = settings;
 
 export default {
-  title: 'StructuredList',
+  title: 'Components/StructuredList',
 
   parameters: {
     component: StructuredListWrapper,
diff --git a/packages/react/src/components/Tabs/Tabs-story.js b/packages/react/src/components/Tabs/Tabs-story.js
index 951c84e66ab6..67490d3fa4f9 100644
--- a/packages/react/src/components/Tabs/Tabs-story.js
+++ b/packages/react/src/components/Tabs/Tabs-story.js
@@ -107,7 +107,7 @@ const TabContentRenderedOnlyWhenSelected = ({
   );
 
 export default {
-  title: 'Tabs',
+  title: 'Components/Tabs',
   decorators: [withKnobs],
   parameters: {
     component: Tabs,
diff --git a/packages/react/src/components/Tag/Tag-story.js b/packages/react/src/components/Tag/Tag-story.js
index 5c405db816b2..8480d9c25c53 100644
--- a/packages/react/src/components/Tag/Tag-story.js
+++ b/packages/react/src/components/Tag/Tag-story.js
@@ -64,7 +64,7 @@ const props = {
 };
 
 export default {
-  title: 'Tag',
+  title: 'Components/Tag',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/TextArea/TextArea-story.js b/packages/react/src/components/TextArea/TextArea-story.js
index 8711a605004a..7339332c391c 100644
--- a/packages/react/src/components/TextArea/TextArea-story.js
+++ b/packages/react/src/components/TextArea/TextArea-story.js
@@ -34,7 +34,7 @@ const TextAreaProps = () => ({
 });
 
 export default {
-  title: 'TextArea',
+  title: 'Components/TextArea',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js
index ec78573dc814..9d0e3cf269f3 100644
--- a/packages/react/src/components/TextInput/TextInput-story.js
+++ b/packages/react/src/components/TextInput/TextInput-story.js
@@ -105,7 +105,7 @@ const props = {
 TextInput.displayName = 'TextInput';
 
 export default {
-  title: 'TextInput',
+  title: 'Components/TextInput',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/Tile/Tile-story.js b/packages/react/src/components/Tile/Tile-story.js
index 67094457a2e9..0147d17c4cc9 100644
--- a/packages/react/src/components/Tile/Tile-story.js
+++ b/packages/react/src/components/Tile/Tile-story.js
@@ -81,7 +81,7 @@ const props = {
 };
 
 export default {
-  title: 'Tile',
+  title: 'Components/Tile',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/TimePicker/TimePicker-story.js b/packages/react/src/components/TimePicker/TimePicker-story.js
index 7340175e7908..352fc4476dcf 100644
--- a/packages/react/src/components/TimePicker/TimePicker-story.js
+++ b/packages/react/src/components/TimePicker/TimePicker-story.js
@@ -67,7 +67,7 @@ const props = {
 };
 
 export default {
-  title: 'TimePicker',
+  title: 'Components/TimePicker',
   decorators: [withKnobs],
   parameters: {
     component: TimePicker,
diff --git a/packages/react/src/components/Toggle/Toggle-story.js b/packages/react/src/components/Toggle/Toggle-story.js
index 13b6ecf2a870..3c2ee49eebb4 100644
--- a/packages/react/src/components/Toggle/Toggle-story.js
+++ b/packages/react/src/components/Toggle/Toggle-story.js
@@ -30,7 +30,7 @@ const toggleProps = () => ({
 });
 
 export default {
-  title: 'Toggle',
+  title: 'Components/Toggle',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/ToggleSmall/ToggleSmall-story.js b/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
index 9cc3972b787a..3b3dfdff5b39 100644
--- a/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
+++ b/packages/react/src/components/ToggleSmall/ToggleSmall-story.js
@@ -24,7 +24,7 @@ const toggleProps = () => ({
 });
 
 export default {
-  title: 'ToggleSmall [Deprecated]',
+  title: 'Deprecated/ToggleSmall',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/Toolbar/Toolbar-story.js b/packages/react/src/components/Toolbar/Toolbar-story.js
index 045a0ccedaae..b7fa156f5959 100644
--- a/packages/react/src/components/Toolbar/Toolbar-story.js
+++ b/packages/react/src/components/Toolbar/Toolbar-story.js
@@ -29,7 +29,7 @@ const inputProps = {
 };
 
 export default {
-  title: 'Toolbar [Deprecated]',
+  title: 'Deprecated/Toolbar',
 
   parameters: {
     component: Toolbar,
diff --git a/packages/react/src/components/Tooltip/Tooltip-story.js b/packages/react/src/components/Tooltip/Tooltip-story.js
index 8d08cf53489b..03e25e764ca9 100644
--- a/packages/react/src/components/Tooltip/Tooltip-story.js
+++ b/packages/react/src/components/Tooltip/Tooltip-story.js
@@ -137,7 +137,7 @@ function UncontrolledTooltipExample() {
 }
 
 export default {
-  title: 'Tooltip',
+  title: 'Components/Tooltip',
   component: OGTooltip,
   decorators: [withKnobs],
 
diff --git a/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js b/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js
index bcb5fec1367b..35af805f69b6 100644
--- a/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js
+++ b/packages/react/src/components/TooltipDefinition/TooltipDefinition-story.js
@@ -40,7 +40,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'TooltipDefinition',
+  title: 'Components/TooltipDefinition',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/TooltipIcon/TooltipIcon-story.js b/packages/react/src/components/TooltipIcon/TooltipIcon-story.js
index 9e44887e91d3..2ffe2271f9cb 100644
--- a/packages/react/src/components/TooltipIcon/TooltipIcon-story.js
+++ b/packages/react/src/components/TooltipIcon/TooltipIcon-story.js
@@ -31,7 +31,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'TooltipIcon',
+  title: 'Components/TooltipIcon',
   decorators: [withKnobs],
 
   parameters: {
diff --git a/packages/react/src/components/TreeView/TreeView-story.js b/packages/react/src/components/TreeView/TreeView-story.js
index 0cdceff624c0..509a9beb4d22 100644
--- a/packages/react/src/components/TreeView/TreeView-story.js
+++ b/packages/react/src/components/TreeView/TreeView-story.js
@@ -249,7 +249,7 @@ function renderTree({ nodes, expanded, withIcons = false }) {
 }
 
 export default {
-  title: 'unstable_TreeView',
+  title: 'Experimental/unstable_TreeView',
   decorators: [withKnobs],
   parameters: { component: TreeView },
 };
diff --git a/packages/react/src/components/UIShell/UIShell-story.js b/packages/react/src/components/UIShell/UIShell-story.js
index 0dee9b75010b..5f96e1c9c5aa 100644
--- a/packages/react/src/components/UIShell/UIShell-story.js
+++ b/packages/react/src/components/UIShell/UIShell-story.js
@@ -131,7 +131,7 @@ const StoryContent = ({ useResponsiveOffset = true }) => {
 };
 
 export default {
-  title: 'UI Shell',
+  title: 'Components/UI Shell',
 
   parameters: {
     docs: {
diff --git a/packages/react/src/components/UnorderedList/UnorderedList-story.js b/packages/react/src/components/UnorderedList/UnorderedList-story.js
index 9e4a27c35e0b..b6fc31e335aa 100644
--- a/packages/react/src/components/UnorderedList/UnorderedList-story.js
+++ b/packages/react/src/components/UnorderedList/UnorderedList-story.js
@@ -12,7 +12,7 @@ import UnorderedList from '../UnorderedList';
 import mdx from './UnorderedList.mdx';
 
 export default {
-  title: 'UnorderedList',
+  title: 'Components/UnorderedList',
 
   parameters: {
     component: UnorderedList,