diff --git a/docs/content/1.getting-started/2.installation.md b/docs/content/1.getting-started/2.installation.md
index ef8a3f8d..7799fe3d 100644
--- a/docs/content/1.getting-started/2.installation.md
+++ b/docs/content/1.getting-started/2.installation.md
@@ -40,8 +40,6 @@ You can customize Nuxt UI by providing options in your `nuxt.config`:
 
 ### `prefix`
 
-()
-
 ```ts [nuxt.config.ts]
 export default defineNuxtConfig({
   modules: ['@nuxt/ui'],
diff --git a/docs/content/1.getting-started/4.colors.md b/docs/content/1.getting-started/3.colors.md
similarity index 100%
rename from docs/content/1.getting-started/4.colors.md
rename to docs/content/1.getting-started/3.colors.md
diff --git a/docs/content/1.getting-started/3.typescript.md b/docs/content/1.getting-started/3.typescript.md
deleted file mode 100644
index bc31b247..00000000
--- a/docs/content/1.getting-started/3.typescript.md
+++ /dev/null
@@ -1,54 +0,0 @@
----
-title: 'TypeScript'
-description: ''
----
-
-This module is written in TypeScript and provides typings for all the components and composables. You can look at the [source code](https://github.com/nuxt/ui/tree/dev/src/runtime/types) to see all the available types.
-
-::callout{icon="i-heroicons-light-bulb" to="https://nuxt.com/docs/guide/concepts/typescript" target="_blank"}
-You can read more about TypeScript on the official Nuxt documentation.
-::
-
-You can use those types in your own components by importing them from `#ui/types`, for example when defining wrapper components:
-
-```vue
-<template>
-  <UBreadcrumb :links="links">
-    <template #icon="{ link }">
-      <UIcon :name="link.icon" />
-    </template>
-  </UBreadcrumb>
-</template>
-
-<script setup lang="ts">
-import type { BreadcrumbLink } from '#ui/types'
-
-export interface Props {
-  links: BreadcrumbLink[]
-}
-
-defineProps<Props>()
-</script>
-```
-
-You don't have to use TypeScript yourself, but doing so will give you access to prop validation and autocomplete.
-
-We've managed to provide dynamic typings on props such as `color`, `size`, `variant`, etc. based on your custom config. For example, you'll be suggested the `custom` color and the `subtle` variant when using the `Button` component with an `app.config.ts` as such:
-
-```ts [app.config.ts]
-export default defineAppConfig({
-  ui: {
-    button: {
-      color: {
-        custom: {
-          subtle: '...'
-        }
-      }
-    }
-  }
-})
-```
-
-::callout{icon="i-heroicons-light-bulb"}
-You can read more about components configuration in the [Theming](/getting-started/theming#appconfigts) section.
-::
diff --git a/docs/content/1.getting-started/5.icons.md b/docs/content/1.getting-started/4.icons.md
similarity index 100%
rename from docs/content/1.getting-started/5.icons.md
rename to docs/content/1.getting-started/4.icons.md
diff --git a/docs/content/1.getting-started/6.theme.md b/docs/content/1.getting-started/5.theme.md
similarity index 89%
rename from docs/content/1.getting-started/6.theme.md
rename to docs/content/1.getting-started/5.theme.md
index 18d6583c..c6b64362 100644
--- a/docs/content/1.getting-started/6.theme.md
+++ b/docs/content/1.getting-started/5.theme.md
@@ -202,39 +202,3 @@ export default defineNuxtConfig({
 ::callout{icon="i-heroicons-light-bulb"}
 If you're stuck in dark mode even after changing this setting, you might need to remove the `nuxt-color-mode` entry from your browser's local storage.
 ::
-
-You can easily build a color mode button by using the `useColorMode` composable from `@nuxtjs/color-mode`.
-
-::component-example
-#default
-:color-mode-button
-
-#code
-```vue
-<script setup lang="ts">
-const colorMode = useColorMode()
-const isDark = computed({
-  get () {
-    return colorMode.value === 'dark'
-  },
-  set () {
-    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
-  }
-})
-</script>
-<template>
-  <ClientOnly>
-    <UButton
-      :icon="isDark ? 'i-heroicons-moon-20-solid' : 'i-heroicons-sun-20-solid'"
-      color="gray"
-      variant="ghost"
-      aria-label="Theme"
-      @click="isDark = !isDark"
-    />
-    <template #fallback>
-      <div class="w-8 h-8" />
-    </template>
-  </ClientOnly>
-</template>
-```
-::
diff --git a/docs/content/1.getting-started/7.shortcuts.md b/docs/content/1.getting-started/6.shortcuts.md
similarity index 100%
rename from docs/content/1.getting-started/7.shortcuts.md
rename to docs/content/1.getting-started/6.shortcuts.md