diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css
index e782706..77230b4 100644
--- a/docs/assets/css/main.css
+++ b/docs/assets/css/main.css
@@ -9,7 +9,7 @@ html {
 }
 
 body {
-  @apply text-sm min-[1400px]:text-base;
+  @apply text-base min-[1400px]:text-base;
   @apply bg-slate-200;
   @apply selection:bg-sky-500;
   @apply selection:text-white;
@@ -28,8 +28,8 @@ html body::before {
   inset: 0;
   z-index: -1;
   width: 100vw;
-  height: 150vh;
-  background-size: 100% 100%;
+  height: 100vh;
+  background-size: cover;
   background-image: radial-gradient(
       circle at 50% 40%,
       rgba(0, 0, 0, 0),
diff --git a/docs/components/HeadingSection.vue b/docs/components/HeadingSection.vue
index 0def67a..08b9dff 100644
--- a/docs/components/HeadingSection.vue
+++ b/docs/components/HeadingSection.vue
@@ -2,17 +2,20 @@
 defineProps<{
   title: string
   size?: "sm"
+  sidebarExclude?: boolean
 }>()
 const heading = ref<HTMLElement>()
 const isInView = useElementVisibility(heading)
 </script>
 
 <template>
-  <h2
+  <component
+    :is="size === 'sm' ? 'h3' : 'h2'"
     class="text-2xl data-[size=sm]:text-base mb-8"
     ref="heading"
     :id="title.toLowerCase().replace(/ /g, '-')"
     :data-size="size"
+    :data-sidebar-exclude="sidebarExclude"
   >
     <span class="sr-only">{{ title }}</span>
     <ClockFont
@@ -20,5 +23,5 @@ const isInView = useElementVisibility(heading)
       :delay="120"
       :start="isInView"
     />
-  </h2>
+  </component>
 </template>
diff --git a/docs/components/TheSidebar.vue b/docs/components/TheSidebar.vue
index c62339c..97608ac 100644
--- a/docs/components/TheSidebar.vue
+++ b/docs/components/TheSidebar.vue
@@ -7,9 +7,13 @@ const headingsTree = new Map<HTMLElement, HTMLElement[]>()
 
 onMounted(() => {
   h2s.value =
-    (Array.from(document.querySelectorAll("h2")) as HTMLElement[]) || []
+    (Array.from(
+      document.querySelectorAll("h2:not([data-sidebar-exclude=true])")
+    ) as HTMLElement[]) || []
   h3s.value =
-    (Array.from(document.querySelectorAll("h3")) as HTMLElement[]) || []
+    (Array.from(
+      document.querySelectorAll("h3:not([data-sidebar-exclude=true])")
+    ) as HTMLElement[]) || []
 
   // add ids to all headings based on their text content
   const headings = Array.from(document.querySelectorAll("h2, h3"))
diff --git a/docs/components/content/Timezones.vue b/docs/components/content/Timezones.vue
index ae063bd..1040afb 100644
--- a/docs/components/content/Timezones.vue
+++ b/docs/components/content/Timezones.vue
@@ -23,7 +23,12 @@
       way to express that moment relative the geography and politics of a given
       region.
     </p>
-    <HeadingSection title="Using timezones" size="sm" class="text-sky-500" />
+    <HeadingSection
+      title="Using timezones"
+      size="sm"
+      :sidebar-exclude="true"
+      class="text-sky-500"
+    />
     <h3 id="timezones-dates">Creating timezone dates</h3>
     <p>
       The most basic timezone aware function is <code>tzDate</code> which allows