diff --git a/demo/App.vue b/demo/App.vue
index 48cc41bad..2719c208e 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -1,18 +1,79 @@
 <template>
   <div class="max-w-full min-h-full app">
-    <!-- TODO: Break out icons, typography, colors (new), compositions (new) into their own pages -->
-    <SidebarsSection />
+    <template v-if="!media.lg">
+      <PGlobalSidebar class="app__mobile-menu">
+        <template #upper-links>
+          <p-icon icon="PrefectGradient" class="app__prefect-icon" />
+        </template>
+        <template #bottom-links>
+          <PIcon icon="MenuIcon" class="app__menu-icon" @click="toggle" />
+        </template>
+      </PGlobalSidebar>
+    </template>
+    <ContextSidebar v-if="showMenu" class="app__sidebar" @click="close" />
     <router-view class="w-full mx-auto py-10 sm:px-6 lg:px-8" />
   </div>
 </template>
 
 <script lang="ts" setup>
-  import SidebarsSection from './sections/SidebarsSection.vue'
+  import { computed, ref, watchEffect } from 'vue'
+  import ContextSidebar from './components/ContextSidebar.vue'
+  import { media } from '@/utilities/media'
+
+  const mobileMenuOpen = ref(false)
+  const showMenu = computed(() => media.lg || mobileMenuOpen.value)
+
+  function toggle(): void {
+    mobileMenuOpen.value = !mobileMenuOpen.value
+  }
+
+  function close(): void {
+    mobileMenuOpen.value = false
+  }
+
+  watchEffect(() => document.body.classList.toggle('body-scrolling-disabled', showMenu.value && !media.lg))
 </script>
 
 <style>
-.app {
-  display: grid;
-  grid-template-columns: 256px minmax(0, 1fr);
+.body-scrolling-disabled { @apply
+  overflow-hidden
+}
+
+.app { @apply
+  text-slate-900;
+}
+
+.app__prefect-icon { @apply
+  w-6
+  h-6
+}
+
+.app__menu-icon { @apply
+  text-white
+  w-6
+  h-6
+  cursor-pointer
+}
+
+.app__router-view { @apply
+  relative
+  z-0
+}
+
+.app__router-view-fade-enter-active,
+.app__router-view-fade-leave-active {
+  transition: opacity 0.25s ease;
+}
+
+.app__router-view-fade-enter-from,
+.app__router-view-fade-leave-to {
+  opacity: 0;
+}
+
+@screen lg {
+  .app {
+    display: grid;
+    grid-template-columns: max-content minmax(0, 1fr);
+  }
 }
 </style>
\ No newline at end of file
diff --git a/demo/sections/ContextSidebarSection.vue b/demo/components/ContextSidebar.vue
similarity index 52%
rename from demo/sections/ContextSidebarSection.vue
rename to demo/components/ContextSidebar.vue
index aa27a6007..58995365c 100644
--- a/demo/sections/ContextSidebarSection.vue
+++ b/demo/components/ContextSidebar.vue
@@ -11,26 +11,5 @@
     <p-context-nav-item title="Icons" icon="AdjustmentsIcon" to="/icons" />
     <p-context-divider />
     <p-context-nav-item title="Layouts" icon="TemplateIcon" to="/layouts" />
-
-    <template #footer>
-      <p-button inset class="justify-center" @click="toggleGlobalSidebar">
-        Show Global Sidebar
-      </p-button>
-    </template>
   </p-context-sidebar>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  const emit = defineEmits<{
-    (event: 'update:value', value: boolean): void,
-  }>()
-
-  const showGlobalSidebar = ref(false)
-
-  const toggleGlobalSidebar = (): void => {
-    showGlobalSidebar.value = !showGlobalSidebar.value
-    emit('update:value', showGlobalSidebar.value)
-  }
-</script>
\ No newline at end of file
+</template>
\ No newline at end of file
diff --git a/demo/sections/GlobalSidebarSection.vue b/demo/sections/GlobalSidebarSection.vue
deleted file mode 100644
index 27148bf0e..000000000
--- a/demo/sections/GlobalSidebarSection.vue
+++ /dev/null
@@ -1,25 +0,0 @@
-<template>
-  <p-global-sidebar>
-    <template #upper-links>
-      <p-icon icon="PrefectGradient" class="w-6" />
-      <p-global-nav-item to="#" icon="CollectionIcon" />
-    </template>
-
-    <template #bottom-links>
-      <p-global-nav-item to="#" icon="QuestionMarkCircleIcon" />
-    </template>
-
-    <template #profile-button>
-      <button v-if="profileImage" type="button">
-        <img :src="profileImage" alt="Profile image">
-      </button>
-      <p-button rounded icon="UserIcon" />
-    </template>
-  </p-global-sidebar>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-
-  const profileImage = ref('https://randomuser.me/api/portraits/women/49.jpg')
-</script>
\ No newline at end of file
diff --git a/demo/sections/SidebarsSection.vue b/demo/sections/SidebarsSection.vue
deleted file mode 100644
index 222210d92..000000000
--- a/demo/sections/SidebarsSection.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-  <ContextSidebarSection @update:value="toggleGlobalSidebar" />
-
-
-  <teleport to="body">
-    <transition name="slide">
-      <GlobalSidebarSection v-if="showGlobalSidebar" class="bottom-0 ml-auto" />
-    </transition>
-  </teleport>
-</template>
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import ContextSidebarSection from './ContextSidebarSection.vue'
-  import GlobalSidebarSection from './GlobalSidebarSection.vue'
-
-  const showGlobalSidebar = ref(false)
-
-  const toggleGlobalSidebar = (value: boolean): void => {
-    showGlobalSidebar.value = value
-  }
-</script>
-
-
-<style>
-.slide-enter-active,
-.slide-leave-active {
-  @apply
-  transition-all
-  duration-500
-}
-.slide-enter-from,
-.slide-leave-to {
-  @apply
-  translate-y-full
-  sm:translate-x-full
-  sm:translate-y-0
- }
-</style>
\ No newline at end of file