diff --git a/.yarn/cache/@emotion-core-npm-10.0.27-4cad5524e3-e64cde1542.zip b/.yarn/cache/@emotion-core-npm-10.0.27-4cad5524e3-e64cde1542.zip
deleted file mode 100644
index c5624ace40f9..000000000000
Binary files a/.yarn/cache/@emotion-core-npm-10.0.27-4cad5524e3-e64cde1542.zip and /dev/null differ
diff --git a/.yarn/cache/@emotion-core-npm-10.1.1-f084e0eeac-78fec4a705.zip b/.yarn/cache/@emotion-core-npm-10.1.1-f084e0eeac-78fec4a705.zip
new file mode 100644
index 000000000000..a7d5698d8b4a
Binary files /dev/null and b/.yarn/cache/@emotion-core-npm-10.1.1-f084e0eeac-78fec4a705.zip differ
diff --git a/.yarn/cache/@emotion-is-prop-valid-npm-0.8.8-261a0f2426-4a6993c4e6.zip b/.yarn/cache/@emotion-is-prop-valid-npm-0.8.8-261a0f2426-4a6993c4e6.zip
new file mode 100644
index 000000000000..b16932123a8b
Binary files /dev/null and b/.yarn/cache/@emotion-is-prop-valid-npm-0.8.8-261a0f2426-4a6993c4e6.zip differ
diff --git a/.yarn/cache/@storybook-client-logger-npm-6.1.18-3244b76cb4-acf8cf6b58.zip b/.yarn/cache/@storybook-client-logger-npm-6.1.18-3244b76cb4-acf8cf6b58.zip
new file mode 100644
index 000000000000..860086698e02
Binary files /dev/null and b/.yarn/cache/@storybook-client-logger-npm-6.1.18-3244b76cb4-acf8cf6b58.zip differ
diff --git a/.yarn/cache/@storybook-theming-npm-6.1.18-86b59dec65-395a079c4e.zip b/.yarn/cache/@storybook-theming-npm-6.1.18-86b59dec65-395a079c4e.zip
new file mode 100644
index 000000000000..1cb6fe577645
Binary files /dev/null and b/.yarn/cache/@storybook-theming-npm-6.1.18-86b59dec65-395a079c4e.zip differ
diff --git a/.yarn/cache/polished-npm-3.4.2-ef13ba5bfe-a8c3f0961e.zip b/.yarn/cache/polished-npm-3.7.1-41b09aa23f-2483fc6957.zip
similarity index 80%
rename from .yarn/cache/polished-npm-3.4.2-ef13ba5bfe-a8c3f0961e.zip
rename to .yarn/cache/polished-npm-3.7.1-41b09aa23f-2483fc6957.zip
index 29eb8cc7fc79..5c05287eacb1 100644
Binary files a/.yarn/cache/polished-npm-3.4.2-ef13ba5bfe-a8c3f0961e.zip and b/.yarn/cache/polished-npm-3.7.1-41b09aa23f-2483fc6957.zip differ
diff --git a/.yarn/cache/ts-dedent-npm-2.0.0-c118e16591-386cff404a.zip b/.yarn/cache/ts-dedent-npm-2.0.0-c118e16591-386cff404a.zip
new file mode 100644
index 000000000000..8763af73014a
Binary files /dev/null and b/.yarn/cache/ts-dedent-npm-2.0.0-c118e16591-386cff404a.zip differ
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/Welcome/Welcome.stories.js b/packages/react/.storybook/Welcome/Welcome.stories.js
new file mode 100644
index 000000000000..d37d1334eb9a
--- /dev/null
+++ b/packages/react/.storybook/Welcome/Welcome.stories.js
@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+
+/* eslint-disable no-console */
+
+import React from 'react';
+import { Welcome as Intro } from './Welcome';
+
+export default {
+  title: ' Getting Started/ Welcome',
+  component: Intro,
+};
+
+export const Welcome = () => <Intro />;
diff --git a/packages/react/.storybook/Welcome/carbon_bg.png b/packages/react/.storybook/Welcome/carbon_bg.png
new file mode 100644
index 000000000000..11c9f0689c0d
Binary files /dev/null and b/packages/react/.storybook/Welcome/carbon_bg.png differ
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/assets/favicon.svg b/packages/react/.storybook/assets/favicon.svg
new file mode 100644
index 000000000000..2c617424bc75
--- /dev/null
+++ b/packages/react/.storybook/assets/favicon.svg
@@ -0,0 +1,6 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g>
+    <path d="M463.22,273.7H428.68V111.38L299.17,38.85,161,116.56,143.76,87.2,290.54,2.59a15.69,15.69,0,0,1,17.26,0L454.58,85.48c5.18,3.45,8.64,8.63,8.64,15.54Z" fill="#878d96"/>
+    <path d="M212.83,512c-3.45,0-5.18,0-8.63-1.73L57.42,427.39c-5.18-3.46-8.64-8.64-8.64-15.55V239.16c0-6.9,3.46-12.08,8.64-15.54L204.2,140.74a15.65,15.65,0,0,1,17.26,0l146.78,82.88c5.18,3.46,8.64,8.64,8.64,15.54V411.84c0,6.91-3.46,12.09-8.64,15.55L221.46,510.27C218,512,216.28,512,212.83,512ZM83.32,401.48,212.83,474l129.51-72.53v-152L212.83,177,83.32,249.52Z" fill="#878d96"/>
+  </g>
+</svg>
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
index 4d0ed13aa48a..3c0f930e83ea 100644
--- a/packages/react/.storybook/main.js
+++ b/packages/react/.storybook/main.js
@@ -9,5 +9,9 @@
 
 module.exports = {
   addons: ['storybook-preset-carbon'],
-  stories: ['../src/**/*-story.js', '../src/**/*.stories.mdx'],
+  stories: [
+    './Welcome/Welcome.stories.js',
+    '../src/**/*-story.js',
+    '../src/**/*.stories.mdx',
+  ],
 };
diff --git a/packages/react/.storybook/manager-head.html b/packages/react/.storybook/manager-head.html
index 4591d2d7a3f9..f036ed8a1bf4 100644
--- a/packages/react/.storybook/manager-head.html
+++ b/packages/react/.storybook/manager-head.html
@@ -1,19 +1,55 @@
-<meta name="keywords" content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js">
-<meta name="description" content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs.">
+<meta
+  name="keywords"
+  content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js"
+/>
+<meta
+  name="description"
+  content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs."
+/>
 
 <!-- Open Graph -->
-<meta property="og:title" content="Carbon Components React">
-<meta property="og:site_name" content="Carbon Components React">
-<meta property="og:description" content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs.">
-<meta property="og:image" content="https://media.github.ibm.com/user/525/files/59e3bfde-b990-11e7-87ef-072e89a87719">
-<meta property="og:url" content="http://react.carbondesignsystem.com">
+<meta property="og:title" content="Carbon Components React" />
+<meta property="og:site_name" content="Carbon Components React" />
+<meta
+  property="og:description"
+  content="This is the React implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs."
+/>
+<meta
+  property="og:image"
+  content="https://media.github.ibm.com/user/525/files/59e3bfde-b990-11e7-87ef-072e89a87719"
+/>
+<meta property="og:url" content="http://react.carbondesignsystem.com" />
+
+<!-- Favicon -->
+<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" />
 
 <!-- Social -->
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:image:alt" content="Carbon Design System">
-<meta name="twitter:site" content="@_carbondesign">
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:image:alt" content="Carbon Design System" />
+<meta name="twitter:site" content="@_carbondesign" />
 
 <!-- Storybook override -->
 <script>
-  document.title = 'Carbon Components React';
+  setTimeout(function () {
+    document.title = 'Carbon Components React';
+  }, 1000);
 </script>
+
+<!-- Style overrides -->
+<style>
+  body a[href='/?path=/settings/about'] {
+    display: none;
+  }
+
+  .simplebar-content form span {
+    font-weight: 600;
+  }
+
+  .simplebar-content a button {
+    color: #161616;
+  }
+
+  .simplebar-content .sidebar-item.selected {
+    color: #161616;
+  }
+</style>
diff --git a/packages/react/.storybook/manager.js b/packages/react/.storybook/manager.js
index 5bfda13cf490..9422d4e6647b 100644
--- a/packages/react/.storybook/manager.js
+++ b/packages/react/.storybook/manager.js
@@ -4,6 +4,12 @@
  * 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 { addons } from '@storybook/addons';
+import theme from './theme';
+
+addons.setConfig({
+  theme,
+});
 
 // These options used by storybook often conflict with developer tools,
 // conditional panels, or other things that get in the way of our workflow
diff --git a/packages/react/.storybook/preview-head.html b/packages/react/.storybook/preview-head.html
new file mode 100644
index 000000000000..44877c727e4f
--- /dev/null
+++ b/packages/react/.storybook/preview-head.html
@@ -0,0 +1,22 @@
+<!-- <link
+  href="https://fonts.googleapis.com/css?family=IBM+Plex+Sans:400,600&display=swap"
+  rel="stylesheet"
+/> -->
+<style>
+  .sbdocs-li {
+    list-style: circle;
+  }
+
+  .sbdocs-wrapper .sbdocs-a {
+    color: #0f62fe;
+  }
+
+  .sbdocs-wrapper .sbdocs-a:hover {
+    color: #0353e9;
+  }
+
+  .sbdocs-wrapper .sbdocs-h2 {
+    margin-bottom: 0;
+    padding-bottom: 12px;
+  }
+</style>
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
index fa7e1132247a..9371d50b15ff 100644
--- a/packages/react/.storybook/preview.js
+++ b/packages/react/.storybook/preview.js
@@ -12,12 +12,14 @@ import { themes } from '@storybook/theming';
 import { configureActions } from '@storybook/addon-actions';
 import { CARBON_CURRENT_THEME, CARBON_TYPE_TOKEN } from './shared';
 import Container from './Container';
-import PackageInfo from './../package.json';
+import carbonTheme from './theme';
 
 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
@@ -39,6 +41,7 @@ addParameters({
       // determine order later on.
       const UNKNOWN_KEYWORD = 3;
       const keywords = new Map([
+        ['welcome', 0],
         ['default', 1],
         ['usage', 2],
         ['playground', 4],
@@ -85,12 +88,6 @@ addParameters({
       // two ids
       return idA.localeCompare(idB);
     },
-    theme: {
-      ...themes.light,
-      brandTitle: `Carbon Components React v${PackageInfo.version}`,
-      brandUrl:
-        'https://github.com/carbon-design-system/carbon/tree/master/packages/react',
-    },
   },
 });
 
@@ -99,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/.storybook/styles.scss b/packages/react/.storybook/styles.scss
index 94eeb444ba88..ecfde3b36135 100644
--- a/packages/react/.storybook/styles.scss
+++ b/packages/react/.storybook/styles.scss
@@ -104,7 +104,3 @@ $prefix: 'bx';
     }
   }
 }
-
-.sbdocs-li {
-  list-style: circle;
-}
diff --git a/packages/react/.storybook/theme.js b/packages/react/.storybook/theme.js
new file mode 100644
index 000000000000..dcab788561c3
--- /dev/null
+++ b/packages/react/.storybook/theme.js
@@ -0,0 +1,51 @@
+import { create } from '@storybook/theming';
+import { g10 } from '@carbon/themes';
+import PackageInfo from './../package.json';
+
+const {
+  field01,
+  interactive01,
+  selectedUI,
+  text01,
+  inverse01,
+  ui01,
+  ui03,
+  ui04,
+  uiBackground,
+} = g10;
+
+export default create({
+  base: 'light',
+
+  colorPrimary: interactive01,
+  colorSecondary: selectedUI,
+
+  // UI
+  appBg: uiBackground,
+  appContentBg: ui01,
+  appBorderColor: ui03,
+  appBorderRadius: 0,
+
+  // Typography
+  fontBase: '"IBM Plex Sans", sans-serif',
+  fontCode: '"IBM Plex Mono", monospace',
+
+  // Text colors
+  textColor: text01,
+  textInverseColor: inverse01,
+
+  // Toolbar default and active colors
+  barTextColor: text01,
+  barSelectedColor: interactive01,
+  barBg: uiBackground,
+
+  // Form colors
+  inputBg: field01,
+  inputBorder: ui03,
+  inputTextColor: text01,
+  inputBorderRadius: 0,
+
+  brandTitle: `Carbon Components React v${PackageInfo.version}`,
+  brandUrl:
+    'https://github.com/carbon-design-system/carbon/tree/master/packages/react',
+});
diff --git a/packages/react/package.json b/packages/react/package.json
index 7148b572929c..3d22de3382dc 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -29,12 +29,12 @@
   },
   "scripts": {
     "build": "yarn clean && node scripts/build.js && rollup -c",
-    "build-storybook": "cross-env NODE_ENV=production build-storybook",
+    "build-storybook": "cross-env NODE_ENV=production build-storybook -s ./.storybook/assets",
     "clean": "rimraf es lib umd storybook-static build react-docgen.json",
     "postinstall": "carbon-telemetry collect --install",
     "prepublish": "yarn build",
     "start": "yarn storybook",
-    "storybook": "rimraf node_modules/.cache/storybook && start-storybook -p 9000",
+    "storybook": "rimraf node_modules/.cache/storybook && start-storybook -p 9000 -s ./.storybook/assets",
     "snapshot": "build-storybook && percy-storybook --widths=320,1280"
   },
   "peerDependencies": {
@@ -82,7 +82,7 @@
     "@storybook/addons": "^5.3.19",
     "@storybook/react": "^5.3.19",
     "@storybook/source-loader": "^5.3.19",
-    "@storybook/theming": "^5.3.19",
+    "@storybook/theming": "^6.1.18",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.1.0",
     "babel-plugin-dev-expression": "^0.2.2",
diff --git a/packages/react/src/components/Accordion/Accordion-story.js b/packages/react/src/components/Accordion/Accordion-story.js
index e31c35e9b8bb..8783f34ab45e 100644
--- a/packages/react/src/components/Accordion/Accordion-story.js
+++ b/packages/react/src/components/Accordion/Accordion-story.js
@@ -25,7 +25,7 @@ import Button from '../Button';
 import mdx from './Accordion.mdx';
 
 export default {
-  title: 'Accordion',
+  title: 'Components/Accordion',
   component: Accordion,
   subcomponents: {
     AccordionItem,
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 2701ebaf194f..82a8815c92fa 100644
--- a/packages/react/src/components/Button/Button-story.js
+++ b/packages/react/src/components/Button/Button-story.js
@@ -117,7 +117,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/DataTable-story.js b/packages/react/src/components/DataTable/DataTable-story.js
index c9e83d99cdf2..3bf79e3c7890 100644
--- a/packages/react/src/components/DataTable/DataTable-story.js
+++ b/packages/react/src/components/DataTable/DataTable-story.js
@@ -43,7 +43,7 @@ const props = () => ({
 });
 
 export default {
-  title: 'DataTable',
+  title: 'Components/DataTable',
   component: DataTable,
   subcomponents: {
     TableContainer,
diff --git a/packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js b/packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js
index a46dbde2fa40..4c773012dd9e 100644
--- a/packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js
+++ b/packages/react/src/components/DataTable/stories/DataTable-batch-actions-story.js
@@ -37,7 +37,7 @@ import { batchActionClick, rows, headers } from './shared';
 import mdx from '../DataTable.mdx';
 
 export default {
-  title: 'DataTable/Batch Actions',
+  title: 'Components/DataTable/Batch Actions',
   component: DataTable,
   subcomponents: {
     TableBatchAction,
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,
diff --git a/yarn.lock b/yarn.lock
index 9d989e7b0d9d..2762b7b9e7ff 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2212,9 +2212,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/core@npm:^10.0.20, @emotion/core@npm:^10.0.9":
-  version: 10.0.27
-  resolution: "@emotion/core@npm:10.0.27"
+"@emotion/core@npm:^10.0.20, @emotion/core@npm:^10.0.9, @emotion/core@npm:^10.1.1":
+  version: 10.1.1
+  resolution: "@emotion/core@npm:10.1.1"
   dependencies:
     "@babel/runtime": ^7.5.5
     "@emotion/cache": ^10.0.27
@@ -2224,7 +2224,7 @@ __metadata:
     "@emotion/utils": 0.11.3
   peerDependencies:
     react: ">=16.3.0"
-  checksum: e64cde15423ae7ee11a9c14a8f576b583b7b27521cb634ad9409ddb8a127a1a1480aa65e30cc3d442140a07dbe4c3f2c8becdec43a131ad443dae157c4763ee5
+  checksum: 78fec4a70569be2291180eafe3a882303a05285d68fec4d6b6974710f47fa1cc3b105468607e544e4a92bf7a9f94d9e5d2bfd735523a38b90f2d5dd4ce27e308
   languageName: node
   linkType: hard
 
@@ -2255,6 +2255,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@emotion/is-prop-valid@npm:^0.8.6":
+  version: 0.8.8
+  resolution: "@emotion/is-prop-valid@npm:0.8.8"
+  dependencies:
+    "@emotion/memoize": 0.7.4
+  checksum: 4a6993c4e6a49bcdc772aa5931fa2f00ce6367f7f6fc9cfe46dd50014c9510f9c6b1e355f297655875a8bfd1481e42546900bbbc84f3c0b629a001b4d82e436e
+  languageName: node
+  linkType: hard
+
 "@emotion/memoize@npm:0.7.4":
   version: 0.7.4
   resolution: "@emotion/memoize@npm:0.7.4"
@@ -2297,7 +2306,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/styled@npm:^10.0.17":
+"@emotion/styled@npm:^10.0.17, @emotion/styled@npm:^10.0.23":
   version: 10.0.27
   resolution: "@emotion/styled@npm:10.0.27"
   dependencies:
@@ -4662,6 +4671,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/client-logger@npm:6.1.18":
+  version: 6.1.18
+  resolution: "@storybook/client-logger@npm:6.1.18"
+  dependencies:
+    core-js: ^3.0.1
+    global: ^4.3.2
+  checksum: acf8cf6b58aaea02fff15a33d715268eabed69ffc7fe55cec609bbde5e05b3d47a9635e919a7ecda431c7beed0eb7d11b8c49bac733356dc28e3403dc0fce431
+  languageName: node
+  linkType: hard
+
 "@storybook/components@npm:5.3.19, @storybook/components@npm:^5.0.6":
   version: 5.3.19
   resolution: "@storybook/components@npm:5.3.19"
@@ -4897,7 +4916,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@npm:5.3.19, @storybook/theming@npm:^5.3.19":
+"@storybook/theming@npm:5.3.19":
   version: 5.3.19
   resolution: "@storybook/theming@npm:5.3.19"
   dependencies:
@@ -4920,6 +4939,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@storybook/theming@npm:^6.1.18":
+  version: 6.1.18
+  resolution: "@storybook/theming@npm:6.1.18"
+  dependencies:
+    "@emotion/core": ^10.1.1
+    "@emotion/is-prop-valid": ^0.8.6
+    "@emotion/styled": ^10.0.23
+    "@storybook/client-logger": 6.1.18
+    core-js: ^3.0.1
+    deep-object-diff: ^1.1.0
+    emotion-theming: ^10.0.19
+    global: ^4.3.2
+    memoizerific: ^1.11.3
+    polished: ^3.4.4
+    resolve-from: ^5.0.0
+    ts-dedent: ^2.0.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0
+    react-dom: ^16.8.0 || ^17.0.0
+  checksum: 395a079c4e262ba6380b448cd53783577ba303baf96d12be0f78afc59aab0a7c3f0db8a7eae715e8a740240adb0849bbd3c7a37ba5d38d4e7dcb9b8eaed784b0
+  languageName: node
+  linkType: hard
+
 "@storybook/ui@npm:5.3.19":
   version: 5.3.19
   resolution: "@storybook/ui@npm:5.3.19"
@@ -9199,7 +9241,7 @@ __metadata:
     "@storybook/addons": ^5.3.19
     "@storybook/react": ^5.3.19
     "@storybook/source-loader": ^5.3.19
-    "@storybook/theming": ^5.3.19
+    "@storybook/theming": ^6.1.18
     babel-core: ^7.0.0-bridge.0
     babel-loader: ^8.1.0
     babel-plugin-dev-expression: ^0.2.2
@@ -24882,12 +24924,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"polished@npm:^3.3.1":
-  version: 3.4.2
-  resolution: "polished@npm:3.4.2"
+"polished@npm:^3.3.1, polished@npm:^3.4.4":
+  version: 3.7.1
+  resolution: "polished@npm:3.7.1"
   dependencies:
-    "@babel/runtime": ^7.6.3
-  checksum: a8c3f0961ee6928ad2c8a37b8807ceba80f0371c32ecf555400b8cae7ee103bdb89160f20300e0b51f1331c0505718f4f1c4924dcc20a6baaada23e4db970f5f
+    "@babel/runtime": ^7.12.5
+  checksum: 2483fc6957697620fc5ce2e93bd0fa70f6080d04b112b719426f248afb7cd21d78b5def38939a1b8ac2bc266b9bcdd8acac74639e5ad2aae64a9ac570a82b798
   languageName: node
   linkType: hard
 
@@ -31640,6 +31682,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"ts-dedent@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "ts-dedent@npm:2.0.0"
+  checksum: 386cff404ab3e07eb35431fbb67cedf2a00f3dbd268218fb962ad21ae09383cb787d6cf8937a543bbac6902e54011309fed28b2caa1c48c35b61e8a8c798acb0
+  languageName: node
+  linkType: hard
+
 "ts-map@npm:^1.0.3":
   version: 1.0.3
   resolution: "ts-map@npm:1.0.3"