diff --git a/src/components/UIShell/Content.svelte b/src/components/UIShell/Content.svelte
new file mode 100644
index 00000000..24172e31
--- /dev/null
+++ b/src/components/UIShell/Content.svelte
@@ -0,0 +1,7 @@
+<script>
+  export let id = "main-content";
+</script>
+
+<main {...$$props} {id} class:bx--content={true}>
+  <slot />
+</main>
diff --git a/src/components/UIShell/SkipToContent.svelte b/src/components/UIShell/SkipToContent.svelte
new file mode 100644
index 00000000..e1ca7642
--- /dev/null
+++ b/src/components/UIShell/SkipToContent.svelte
@@ -0,0 +1,8 @@
+<script>
+  export let href = "#main-content";
+  export let tabindex = "0";
+</script>
+
+<a {...$$props} class:bx--skip-to-content={true} {href} {tabindex} on:click>
+  <slot>Skip to main content</slot>
+</a>
diff --git a/src/components/UIShell/UIShell.Story.svelte b/src/components/UIShell/UIShell.Story.svelte
index 568b8e32..504fabe3 100644
--- a/src/components/UIShell/UIShell.Story.svelte
+++ b/src/components/UIShell/UIShell.Story.svelte
@@ -1,30 +1,32 @@
 <script>
   export let story = undefined;
 
-  import SettingsAdjust20 from 'carbon-icons-svelte/lib/SettingsAdjust20';
-  import Help20 from 'carbon-icons-svelte/lib/Help20';
-  import ChangeCatalog16 from 'carbon-icons-svelte/lib/ChangeCatalog16';
-  import ManageProtection16 from 'carbon-icons-svelte/lib/ManageProtection16';
-  import Notification20 from 'carbon-icons-svelte/lib/Notification20';
-  import UserAvatar20 from 'carbon-icons-svelte/lib/UserAvatar20';
-  import AppSwitcher20 from 'carbon-icons-svelte/lib/AppSwitcher20';
+  import SettingsAdjust20 from "carbon-icons-svelte/lib/SettingsAdjust20";
+  import Help20 from "carbon-icons-svelte/lib/Help20";
+  import ChangeCatalog16 from "carbon-icons-svelte/lib/ChangeCatalog16";
+  import ManageProtection16 from "carbon-icons-svelte/lib/ManageProtection16";
+  import Notification20 from "carbon-icons-svelte/lib/Notification20";
+  import UserAvatar20 from "carbon-icons-svelte/lib/UserAvatar20";
+  import AppSwitcher20 from "carbon-icons-svelte/lib/AppSwitcher20";
 
-  import SideNav from './SideNav/SideNav.svelte';
-  import SideNavItems from './SideNav/SideNavItems.svelte';
-  import SideNavMenu from './SideNav/SideNavMenu.svelte';
-  import SideNavMenuItem from './SideNav/SideNavMenuItem.svelte';
-  import SideNavLink from './SideNav/SideNavLink.svelte';
-  import Header from './GlobalHeader/Header.svelte';
-  import HeaderNav from './GlobalHeader/HeaderNav.svelte';
-  import HeaderNavItem from './GlobalHeader/HeaderNavItem.svelte';
-  import HeaderNavMenu from './GlobalHeader/HeaderNavMenu.svelte';
-  import HeaderUtilities from './GlobalHeader/HeaderUtilities.svelte';
-  import HeaderActionSearch from './GlobalHeader/HeaderActionSearch.svelte';
-  import HeaderActionLink from './GlobalHeader/HeaderActionLink.svelte';
-  import HeaderAction from './GlobalHeader/HeaderAction.svelte';
-  import HeaderPanelDivider from './GlobalHeader/HeaderPanelDivider.svelte';
-  import HeaderPanelLink from './GlobalHeader/HeaderPanelLink.svelte';
-  import HeaderPanelLinks from './GlobalHeader/HeaderPanelLinks.svelte';
+  import SideNav from "./SideNav/SideNav.svelte";
+  import SideNavItems from "./SideNav/SideNavItems.svelte";
+  import SideNavMenu from "./SideNav/SideNavMenu.svelte";
+  import SideNavMenuItem from "./SideNav/SideNavMenuItem.svelte";
+  import SideNavLink from "./SideNav/SideNavLink.svelte";
+  import Header from "./GlobalHeader/Header.svelte";
+  import HeaderNav from "./GlobalHeader/HeaderNav.svelte";
+  import HeaderNavItem from "./GlobalHeader/HeaderNavItem.svelte";
+  import HeaderNavMenu from "./GlobalHeader/HeaderNavMenu.svelte";
+  import HeaderUtilities from "./GlobalHeader/HeaderUtilities.svelte";
+  import HeaderActionSearch from "./GlobalHeader/HeaderActionSearch.svelte";
+  import HeaderActionLink from "./GlobalHeader/HeaderActionLink.svelte";
+  import HeaderAction from "./GlobalHeader/HeaderAction.svelte";
+  import HeaderPanelDivider from "./GlobalHeader/HeaderPanelDivider.svelte";
+  import HeaderPanelLink from "./GlobalHeader/HeaderPanelLink.svelte";
+  import HeaderPanelLinks from "./GlobalHeader/HeaderPanelLinks.svelte";
+  import Content from "./Content.svelte";
+  import SkipToContent from "./SkipToContent.svelte";
 
   let isSideNavOpen = undefined;
 
@@ -32,8 +34,8 @@
     class: undefined,
     skeleton: false,
     render: ChangeCatalog16,
-    title: 'Catalog',
-    tabindex: '0',
+    title: "Catalog",
+    tabindex: "0",
     focusable: false,
     style: undefined
   };
@@ -42,8 +44,8 @@
     class: undefined,
     skeleton: false,
     render: Help20,
-    title: 'Help',
-    tabindex: '0',
+    title: "Help",
+    tabindex: "0",
     focusable: false,
     style: undefined
   };
@@ -52,8 +54,8 @@
     class: undefined,
     skeleton: false,
     render: SettingsAdjust20,
-    title: 'Catalog',
-    tabindex: '0',
+    title: "Catalog",
+    tabindex: "0",
     focusable: false,
     style: undefined
   };
@@ -62,8 +64,8 @@
     class: undefined,
     skeleton: false,
     render: ManageProtection16,
-    title: 'Catalog',
-    tabindex: '0',
+    title: "Catalog",
+    tabindex: "0",
     focusable: false,
     style: undefined
   };
@@ -72,8 +74,8 @@
     class: undefined,
     skeleton: false,
     render: AppSwitcher20,
-    title: 'App Switcher',
-    tabindex: '0',
+    title: "App Switcher",
+    tabindex: "0",
     focusable: false,
     style: undefined
   };
@@ -82,8 +84,8 @@
     class: undefined,
     skeleton: false,
     render: UserAvatar20,
-    title: 'Account',
-    tabindex: '0',
+    title: "Account",
+    tabindex: "0",
     focusable: false,
     style: undefined
   };
@@ -92,8 +94,8 @@
     class: undefined,
     skeleton: false,
     render: Notification20,
-    title: 'Notifications',
-    tabindex: '0',
+    title: "Notifications",
+    tabindex: "0",
     focusable: false,
     style: undefined
   };
@@ -102,15 +104,17 @@
     class: undefined,
     skeleton: false,
     render: SettingsAdjust20,
-    title: 'Settings',
-    tabindex: '0',
+    title: "Settings",
+    tabindex: "0",
     focusable: false,
     style: undefined
   };
 </script>
 
 {#if story === 'header'}
-  <Header {...$$props} />
+  <Header {...$$props}>
+    <SkipToContent />
+  </Header>
 {:else if story === 'sidenav'}
   <SideNav isOpen={true}>
     <SideNavItems>
@@ -197,3 +201,6 @@
     </SideNavItems>
   </SideNav>
 {/if}
+<Content>
+  <h2>Page Title</h2>
+</Content>
diff --git a/src/components/UIShell/index.js b/src/components/UIShell/index.js
index 039bafc7..f8347776 100644
--- a/src/components/UIShell/index.js
+++ b/src/components/UIShell/index.js
@@ -14,3 +14,5 @@ export { default as SideNavItems } from './SideNav/SideNavItems.svelte';
 export { default as SideNavLink } from './SideNav/SideNavLink.svelte';
 export { default as SideNavMenu } from './SideNav/SideNavMenu.svelte';
 export { default as SideNavMenuItem } from './SideNav/SideNavMenuItem.svelte';
+export { default as Content } from './Content.svelte';
+export { default as SkipToContent } from './SkipToContent.svelte';
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
index c9576131..5a3c02b8 100644
--- a/src/index.js
+++ b/src/index.js
@@ -126,6 +126,8 @@ import {
   SideNavLink,
   SideNavMenu,
   SideNavMenuItem,
+  Content,
+  SkipToContent,
 } from "./components/UIShell";
 import UnorderedList from "./components/UnorderedList";
 
@@ -266,4 +268,6 @@ export {
   SideNavMenu,
   SideNavMenuItem,
   UnorderedList,
+  Content,
+  SkipToContent,
 };