diff --git a/src/components/UIShell/UIShell.Story.svelte b/src/components/UIShell/UIShell.Story.svelte
index 16c1245c..b190615f 100644
--- a/src/components/UIShell/UIShell.Story.svelte
+++ b/src/components/UIShell/UIShell.Story.svelte
@@ -109,9 +109,9 @@
   };
 </script>
 
-{#if story === 'base'}
+{#if story === 'header'}
   <Header {...$$props} />
-{:else if story === 'with-header-and-nav'}
+{:else if story === 'header-with-nav'}
   <Header {...$$props}>
     <HeaderNav>
       <HeaderNavItem href="/" text="Link 1" />
@@ -124,7 +124,7 @@
       </HeaderNavMenu>
     </HeaderNav>
   </Header>
-{:else if story === 'with-utilities'}
+{:else if story === 'header-with-utilities'}
   <Header {...$$props}>
     <HeaderUtilities>
       <HeaderActionSearch />
@@ -142,7 +142,7 @@
       <HeaderActionLink type="Account" icon={iAccount} />
     </HeaderUtilities>
   </Header>
-{:else if story === 'with-switcher'}
+{:else if story === 'header-with-switcher'}
   <Header {...$$props}>
     <HeaderUtilities>
       <HeaderAction type="Switcher" icon={iSwitcher} isOpen={true}>
@@ -159,7 +159,7 @@
       </HeaderAction>
     </HeaderUtilities>
   </Header>
-{:else if story === 'with-sidenav'}
+{:else if story === 'header-and-sidenav'}
   <Header bind:isSideNavOpen {...$$props} />
   <SideNav isOpen={isSideNavOpen}>
     <SideNavItems>
diff --git a/src/components/UIShell/UIShell.stories.js b/src/components/UIShell/UIShell.stories.js
index 4cf5c5a3..2a46d83c 100644
--- a/src/components/UIShell/UIShell.stories.js
+++ b/src/components/UIShell/UIShell.stories.js
@@ -3,50 +3,50 @@ import Component from './UIShell.Story.svelte';
 
 export default { title: 'UIShell', decorators: [withKnobs] };
 
-export const Base = () => ({
+export const Header = () => ({
   Component,
   props: {
-    story: 'base',
+    story: 'header',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')
   }
 });
 
-export const WithHeaderAndNav = () => ({
+export const HeaderWithNav = () => ({
   Component,
   props: {
-    story: 'with-header-and-nav',
+    story: 'header-with-nav',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')
   }
 });
 
-export const WithUtilities = () => ({
+export const HeaderWithUtilities = () => ({
   Component,
   props: {
-    story: 'with-utilities',
+    story: 'header-with-utilities',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')
   }
 });
 
-export const WithSwitcher = () => ({
+export const HeaderWithSwitcher = () => ({
   Component,
   props: {
-    story: 'with-switcher',
+    story: 'header-with-switcher',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')
   }
 });
 
-export const WithSidenav = () => ({
+export const HeaderAndSidenav = () => ({
   Component,
   props: {
-    story: 'with-sidenav',
+    story: 'header-and-sidenav',
     href: text('The link href (href)', '#'),
     company: text('Company name', 'IBM'),
     platformName: text('Platform name', 'Platform Name')