diff --git a/docs/app.vue b/docs/app.vue
index 1a255c7e..c1958247 100644
--- a/docs/app.vue
+++ b/docs/app.vue
@@ -6,7 +6,7 @@
       <div class="relative grid lg:grid-cols-10 lg:gap-8">
         <DocsAside class="lg:col-span-2" />
 
-        <div class="relative lg:col-span-6 pt-8 pb-16">
+        <div class="relative pt-8 pb-16" :class="[toc ? 'lg:col-span-6' : 'lg:col-span-8']">
           <DocsPageHeader />
 
           <NuxtPage />
@@ -16,7 +16,7 @@
           <DocsPrevNext />
         </div>
 
-        <DocsToc class="lg:col-span-2 order-first lg:order-last" />
+        <DocsToc v-if="toc" class="lg:col-span-2 order-first lg:order-last" />
       </div>
     </UContainer>
 
@@ -29,6 +29,7 @@
 </template>
 
 <script setup lang="ts">
+const { toc } = useContent()
 const colorMode = useColorMode()
 
 // Computed
diff --git a/docs/components/docs/DocsToc.vue b/docs/components/docs/DocsToc.vue
index 56638912..a61b1581 100644
--- a/docs/components/docs/DocsToc.vue
+++ b/docs/components/docs/DocsToc.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="toc" class="sticky top-16 bg-white/75 dark:bg-gray-900/75 backdrop-blur group lg:self-start -mx-4 sm:-mx-6 lg:mx-0 px-4 sm:px-6 lg:pl-8 lg:pr-0">
+  <div class="sticky top-16 bg-white/75 dark:bg-gray-900/75 backdrop-blur group lg:self-start -mx-4 sm:-mx-6 lg:mx-0 px-4 sm:px-6 lg:pl-8 lg:pr-0">
     <div class="py-3 lg:py-8 border-b border-dashed border-gray-200 dark:border-gray-800 lg:border-0">
       <button class="flex items-center gap-2" tabindex="-1" @click="isTocOpen = !isTocOpen">
         <span class="text-sm text-slate-900 font-semibold text-sm leading-6 dark:text-slate-100 truncate">Table of Contents</span>