diff --git a/apps/docs/content/docs/components/accordion.mdx b/apps/docs/content/docs/components/accordion.mdx
index f4737184c7..a607ceece0 100644
--- a/apps/docs/content/docs/components/accordion.mdx
+++ b/apps/docs/content/docs/components/accordion.mdx
@@ -13,6 +13,7 @@ Accordion display a list of high-level options that can expand/collapse to revea
---
+
## Installation
diff --git a/apps/docs/content/docs/components/autocomplete.mdx b/apps/docs/content/docs/components/autocomplete.mdx
index ca1c170931..b826b21556 100644
--- a/apps/docs/content/docs/components/autocomplete.mdx
+++ b/apps/docs/content/docs/components/autocomplete.mdx
@@ -13,7 +13,7 @@ An autocomplete combines a text input with a listbox, allowing users to filter a
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/avatar.mdx b/apps/docs/content/docs/components/avatar.mdx
index c8c117ff4e..a8603a96e6 100644
--- a/apps/docs/content/docs/components/avatar.mdx
+++ b/apps/docs/content/docs/components/avatar.mdx
@@ -14,6 +14,8 @@ The Avatar component is used to represent a user, and displays the profile pictu
---
+
+
## Installation
## Installation
diff --git a/apps/docs/content/docs/components/breadcrumbs.mdx b/apps/docs/content/docs/components/breadcrumbs.mdx
index cb26e347d0..05a461302c 100644
--- a/apps/docs/content/docs/components/breadcrumbs.mdx
+++ b/apps/docs/content/docs/components/breadcrumbs.mdx
@@ -13,7 +13,7 @@ Breadcrumbs display a hierarchy of links to the current page or resource in an a
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/button.mdx b/apps/docs/content/docs/components/button.mdx
index 64e7022e79..5fabb5da40 100644
--- a/apps/docs/content/docs/components/button.mdx
+++ b/apps/docs/content/docs/components/button.mdx
@@ -13,7 +13,7 @@ Buttons allow users to perform actions and choose with a single tap.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/calendar.mdx b/apps/docs/content/docs/components/calendar.mdx
index fab85ee1f4..44b416a83d 100644
--- a/apps/docs/content/docs/components/calendar.mdx
+++ b/apps/docs/content/docs/components/calendar.mdx
@@ -13,7 +13,7 @@ A calendar consists of a grouping element containing one or more date grids (e.g
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/card.mdx b/apps/docs/content/docs/components/card.mdx
index 35ebd17309..160d766293 100644
--- a/apps/docs/content/docs/components/card.mdx
+++ b/apps/docs/content/docs/components/card.mdx
@@ -13,7 +13,7 @@ Card is a container for text, photos, and actions in the context of a single sub
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/checkbox-group.mdx b/apps/docs/content/docs/components/checkbox-group.mdx
index a5b10c992c..e1ad2283df 100644
--- a/apps/docs/content/docs/components/checkbox-group.mdx
+++ b/apps/docs/content/docs/components/checkbox-group.mdx
@@ -13,7 +13,7 @@ A CheckboxGroup allows users to select one or more items from a list of choices.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/checkbox.mdx b/apps/docs/content/docs/components/checkbox.mdx
index ed247a63a0..567d776ea7 100644
--- a/apps/docs/content/docs/components/checkbox.mdx
+++ b/apps/docs/content/docs/components/checkbox.mdx
@@ -13,6 +13,8 @@ Checkboxes allow users to select multiple items from a list of individual items,
---
+
+
## Installation
## Installation
diff --git a/apps/docs/content/docs/components/circular-progress.mdx b/apps/docs/content/docs/components/circular-progress.mdx
index 9267a0a130..611808fc84 100644
--- a/apps/docs/content/docs/components/circular-progress.mdx
+++ b/apps/docs/content/docs/components/circular-progress.mdx
@@ -13,7 +13,7 @@ Circular progress indicators are utilized to indicate an undetermined wait perio
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/code.mdx b/apps/docs/content/docs/components/code.mdx
index a8194af1ba..3b723f99af 100644
--- a/apps/docs/content/docs/components/code.mdx
+++ b/apps/docs/content/docs/components/code.mdx
@@ -13,7 +13,7 @@ Code is a component used to display inline code.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/date-input.mdx b/apps/docs/content/docs/components/date-input.mdx
index 5e45bfa00a..473bf7a257 100644
--- a/apps/docs/content/docs/components/date-input.mdx
+++ b/apps/docs/content/docs/components/date-input.mdx
@@ -14,7 +14,7 @@ Each part of a date value is displayed in an individually editable segment.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/date-picker.mdx b/apps/docs/content/docs/components/date-picker.mdx
index ffdc3ddc8c..6aa0270917 100644
--- a/apps/docs/content/docs/components/date-picker.mdx
+++ b/apps/docs/content/docs/components/date-picker.mdx
@@ -13,7 +13,7 @@ DatePickers combine a DateInput and a Calendar popover to allow users to enter o
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/date-range-picker.mdx b/apps/docs/content/docs/components/date-range-picker.mdx
index 8fbaebad55..a0cdd14ee9 100644
--- a/apps/docs/content/docs/components/date-range-picker.mdx
+++ b/apps/docs/content/docs/components/date-range-picker.mdx
@@ -13,7 +13,7 @@ Date Range Picker combines two DateInputs and a RangeCalendar popover to allow u
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/divider.mdx b/apps/docs/content/docs/components/divider.mdx
index 5d77c3d38d..ad5d81c36d 100644
--- a/apps/docs/content/docs/components/divider.mdx
+++ b/apps/docs/content/docs/components/divider.mdx
@@ -13,7 +13,7 @@ Divider is a component that separates content in a page.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/dropdown.mdx b/apps/docs/content/docs/components/dropdown.mdx
index ee5e537727..24e48716d0 100644
--- a/apps/docs/content/docs/components/dropdown.mdx
+++ b/apps/docs/content/docs/components/dropdown.mdx
@@ -13,7 +13,7 @@ Displays a list of actions or options that a user can choose.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/image.mdx b/apps/docs/content/docs/components/image.mdx
index 721f34c064..ab1ce41953 100644
--- a/apps/docs/content/docs/components/image.mdx
+++ b/apps/docs/content/docs/components/image.mdx
@@ -13,7 +13,7 @@ The Image component is used to display images with support for fallback.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/input.mdx b/apps/docs/content/docs/components/input.mdx
index aa22838a1c..9ff7d55a89 100644
--- a/apps/docs/content/docs/components/input.mdx
+++ b/apps/docs/content/docs/components/input.mdx
@@ -13,7 +13,7 @@ Input is a component that allows users to enter text. It can be used to get user
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/kbd.mdx b/apps/docs/content/docs/components/kbd.mdx
index f51c1c1d7a..506b17bee3 100644
--- a/apps/docs/content/docs/components/kbd.mdx
+++ b/apps/docs/content/docs/components/kbd.mdx
@@ -13,7 +13,7 @@ Keyboard key is a component to display which key or combination of keys performs
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/link.mdx b/apps/docs/content/docs/components/link.mdx
index 3d21ecadfc..d90b84a4f9 100644
--- a/apps/docs/content/docs/components/link.mdx
+++ b/apps/docs/content/docs/components/link.mdx
@@ -13,7 +13,7 @@ Links allow users to click their way from page to page. This component is styled
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/listbox.mdx b/apps/docs/content/docs/components/listbox.mdx
index 8d59d3543d..e2ce6fa455 100644
--- a/apps/docs/content/docs/components/listbox.mdx
+++ b/apps/docs/content/docs/components/listbox.mdx
@@ -13,7 +13,7 @@ A listbox displays a list of options and allows a user to select one or more of
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/modal.mdx b/apps/docs/content/docs/components/modal.mdx
index b2fd1fb112..f07789f5c7 100644
--- a/apps/docs/content/docs/components/modal.mdx
+++ b/apps/docs/content/docs/components/modal.mdx
@@ -13,7 +13,7 @@ Displays a dialog with a custom content that requires attention or provides addi
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/navbar.mdx b/apps/docs/content/docs/components/navbar.mdx
index 1cc7b6c4bf..d267c48d26 100644
--- a/apps/docs/content/docs/components/navbar.mdx
+++ b/apps/docs/content/docs/components/navbar.mdx
@@ -13,7 +13,7 @@ A responsive navigation header positioned on top side of your page that includes
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/pagination.mdx b/apps/docs/content/docs/components/pagination.mdx
index b287c9aef1..4997f4aba2 100644
--- a/apps/docs/content/docs/components/pagination.mdx
+++ b/apps/docs/content/docs/components/pagination.mdx
@@ -13,7 +13,7 @@ The Pagination component allows you to display active page and navigate between
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/popover.mdx b/apps/docs/content/docs/components/popover.mdx
index 9dfa13102d..7f5ddb3a94 100644
--- a/apps/docs/content/docs/components/popover.mdx
+++ b/apps/docs/content/docs/components/popover.mdx
@@ -14,7 +14,7 @@ additional rich content on top of something.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/progress.mdx b/apps/docs/content/docs/components/progress.mdx
index c693c264b5..04f4a2b19a 100644
--- a/apps/docs/content/docs/components/progress.mdx
+++ b/apps/docs/content/docs/components/progress.mdx
@@ -13,7 +13,7 @@ The Progress component allows you to view the progress of any activity.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/radio-group.mdx b/apps/docs/content/docs/components/radio-group.mdx
index b8a1cc8ef1..33ee12628c 100644
--- a/apps/docs/content/docs/components/radio-group.mdx
+++ b/apps/docs/content/docs/components/radio-group.mdx
@@ -13,7 +13,7 @@ Radio Group allow users to select a single option from a list of mutually exclus
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/range-calendar.mdx b/apps/docs/content/docs/components/range-calendar.mdx
index 9f747166dc..170ca67651 100644
--- a/apps/docs/content/docs/components/range-calendar.mdx
+++ b/apps/docs/content/docs/components/range-calendar.mdx
@@ -13,7 +13,7 @@ A range calendar consists of a grouping element containing one or more date grid
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/scroll-shadow.mdx b/apps/docs/content/docs/components/scroll-shadow.mdx
index f1a5a8bde0..7f377b0937 100644
--- a/apps/docs/content/docs/components/scroll-shadow.mdx
+++ b/apps/docs/content/docs/components/scroll-shadow.mdx
@@ -13,7 +13,7 @@ Applies top and bottom shadows when content overflows on scroll.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/select.mdx b/apps/docs/content/docs/components/select.mdx
index 40cc3e44ea..6fa4665c27 100644
--- a/apps/docs/content/docs/components/select.mdx
+++ b/apps/docs/content/docs/components/select.mdx
@@ -13,7 +13,7 @@ A select displays a collapsible list of options and allows a user to select one
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/skeleton.mdx b/apps/docs/content/docs/components/skeleton.mdx
index a0c841cbdb..c21aec8818 100644
--- a/apps/docs/content/docs/components/skeleton.mdx
+++ b/apps/docs/content/docs/components/skeleton.mdx
@@ -13,7 +13,7 @@ Skeleton is a placeholder to show a loading state and the expected shape of a co
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/slider.mdx b/apps/docs/content/docs/components/slider.mdx
index 7d83de0c27..ec9b5f853a 100644
--- a/apps/docs/content/docs/components/slider.mdx
+++ b/apps/docs/content/docs/components/slider.mdx
@@ -13,7 +13,7 @@ A slider allows a user to select one or more values within a range.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/snippet.mdx b/apps/docs/content/docs/components/snippet.mdx
index 716eb8e9c0..e149ee98c5 100644
--- a/apps/docs/content/docs/components/snippet.mdx
+++ b/apps/docs/content/docs/components/snippet.mdx
@@ -13,7 +13,7 @@ Snippet is a component that can be used to display inline or multiline code snip
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/spacer.mdx b/apps/docs/content/docs/components/spacer.mdx
index e00716c601..70703c1ae8 100644
--- a/apps/docs/content/docs/components/spacer.mdx
+++ b/apps/docs/content/docs/components/spacer.mdx
@@ -13,7 +13,7 @@ Spacer is a component used to add space between components.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/spinner.mdx b/apps/docs/content/docs/components/spinner.mdx
index 47f94e335e..e8980b0d7b 100644
--- a/apps/docs/content/docs/components/spinner.mdx
+++ b/apps/docs/content/docs/components/spinner.mdx
@@ -13,7 +13,7 @@ Spinner express an unspecified wait time or display the length of a process.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/switch.mdx b/apps/docs/content/docs/components/switch.mdx
index 772f59d2f5..d76faa2e3d 100644
--- a/apps/docs/content/docs/components/switch.mdx
+++ b/apps/docs/content/docs/components/switch.mdx
@@ -13,7 +13,7 @@ The Switch component is used as an alternative between checked and not checked s
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/table.mdx b/apps/docs/content/docs/components/table.mdx
index 7a4e6cc630..5415aa1e65 100644
--- a/apps/docs/content/docs/components/table.mdx
+++ b/apps/docs/content/docs/components/table.mdx
@@ -13,7 +13,7 @@ Tables are used to display tabular data using rows and columns. They allow users
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/tabs.mdx b/apps/docs/content/docs/components/tabs.mdx
index ebbdc2422b..cc4fe91417 100644
--- a/apps/docs/content/docs/components/tabs.mdx
+++ b/apps/docs/content/docs/components/tabs.mdx
@@ -13,7 +13,7 @@ Tabs organize content into multiple sections and allow users to navigate between
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/textarea.mdx b/apps/docs/content/docs/components/textarea.mdx
index 0b76ba1688..e4ba27b3b0 100644
--- a/apps/docs/content/docs/components/textarea.mdx
+++ b/apps/docs/content/docs/components/textarea.mdx
@@ -13,6 +13,8 @@ Textarea component is a multi-line Input which allows you to write large texts.
---
+
+
## Installation
## Installation
diff --git a/apps/docs/content/docs/components/tooltip.mdx b/apps/docs/content/docs/components/tooltip.mdx
index 253d5c3ad8..8bcb0ba78e 100644
--- a/apps/docs/content/docs/components/tooltip.mdx
+++ b/apps/docs/content/docs/components/tooltip.mdx
@@ -13,7 +13,7 @@ Tooltips display a brief, informative message that appears when a user interacts
---
-
+
## Installation
diff --git a/apps/docs/content/docs/components/user.mdx b/apps/docs/content/docs/components/user.mdx
index 0ee388b9c7..2f04436e75 100644
--- a/apps/docs/content/docs/components/user.mdx
+++ b/apps/docs/content/docs/components/user.mdx
@@ -13,7 +13,7 @@ Display user information with avatar and name.
---
-
+
## Installation
diff --git a/apps/docs/content/docs/customization/colors.mdx b/apps/docs/content/docs/customization/colors.mdx
index 6cdcce37e5..01909ef7ef 100644
--- a/apps/docs/content/docs/customization/colors.mdx
+++ b/apps/docs/content/docs/customization/colors.mdx
@@ -28,7 +28,7 @@ module.exports = {
};
```
-
+
> **Note**: Colors configurations apply globally across all components.
diff --git a/apps/docs/content/docs/customization/create-theme.mdx b/apps/docs/content/docs/customization/create-theme.mdx
index 4ea56deff9..04cb82f521 100644
--- a/apps/docs/content/docs/customization/create-theme.mdx
+++ b/apps/docs/content/docs/customization/create-theme.mdx
@@ -11,7 +11,7 @@ create it by adding the following code to your `tailwind.config.js` file.
We recommend adding a palette that ranges from `50` to `900`. You can use tools like [Eva Design System](https://colors.eva.design/),
[Smart Watch](https://smart-swatch.netlify.app/), [Palette](https://palettte.app/) or [Color Box](https://colorbox.io/) to generate your palette.
-
+
### Add the new theme to the plugin
diff --git a/apps/docs/content/docs/customization/custom-variants.mdx b/apps/docs/content/docs/customization/custom-variants.mdx
index 2c5b0314d5..a1e063b3ec 100644
--- a/apps/docs/content/docs/customization/custom-variants.mdx
+++ b/apps/docs/content/docs/customization/custom-variants.mdx
@@ -8,7 +8,7 @@ description: Learn how to create new variants for the NextUI components.
NextUI allows you to create new variants for components that better suit your project's needs.
This can be done by extending the component and its properties, and customizing the styles.
-
+
You can create or override the component `variants`, `defaultVariants` and `compoundVariants`.
diff --git a/apps/docs/content/docs/customization/customize-theme.mdx b/apps/docs/content/docs/customization/customize-theme.mdx
index df44d8c072..2f71753630 100644
--- a/apps/docs/content/docs/customization/customize-theme.mdx
+++ b/apps/docs/content/docs/customization/customize-theme.mdx
@@ -13,7 +13,7 @@ Furthermore, you have the option to create your own theme based on the default o
incorporates [Layout](/docs/customization/layout) tokens and [Color](/docs/customization/colors) tokens, designed
to facilitate your customization process.
-
+
## Customizing Layout
diff --git a/apps/docs/content/docs/customization/dark-mode.mdx b/apps/docs/content/docs/customization/dark-mode.mdx
index 6a6a829a0a..d0539d70bf 100644
--- a/apps/docs/content/docs/customization/dark-mode.mdx
+++ b/apps/docs/content/docs/customization/dark-mode.mdx
@@ -32,7 +32,7 @@ This will enable the dark mode for the whole application. However, many applicat
the capability to switch between different themes. For this purpose, we recommend using a
theme switch library or creating your own implementation.
-
+
## Using next-themes
diff --git a/apps/docs/content/docs/customization/layout.mdx b/apps/docs/content/docs/customization/layout.mdx
index e1b6583c72..5956445504 100644
--- a/apps/docs/content/docs/customization/layout.mdx
+++ b/apps/docs/content/docs/customization/layout.mdx
@@ -8,7 +8,7 @@ description: NextUI offers a set of layout options to customize the theme.
NextUI's plugin provides a variety of layout customization options. Alter spacing units,
font sizes, line heights, radius and more to personalize each theme to your liking.
-
+
Using layout tokens, you can ensure a uniform aesthetic across all components without
needing to override the default Tailwind CSS configuration.
diff --git a/apps/docs/content/docs/customization/override-styles.mdx b/apps/docs/content/docs/customization/override-styles.mdx
index 9794836b6b..f4597c287b 100644
--- a/apps/docs/content/docs/customization/override-styles.mdx
+++ b/apps/docs/content/docs/customization/override-styles.mdx
@@ -8,7 +8,7 @@ description: NextUI allows you to override the default styles of the components
Overriding default component styles is as simple as passing your own class names to the `className`
or to the `classNames` prop for components with slots.
-
+
### What is a Slot?
diff --git a/apps/docs/content/docs/customization/theme.mdx b/apps/docs/content/docs/customization/theme.mdx
index 6f05ca44a0..700fe88603 100644
--- a/apps/docs/content/docs/customization/theme.mdx
+++ b/apps/docs/content/docs/customization/theme.mdx
@@ -14,7 +14,7 @@ TailwindCSS plugin. This plugin, which is based on the [tw-colors](https://githu
plugin developed by [L-Blondy](https://github.com/L-Blondy), allows you to customize color schemes,
layout configurations, and more, across different components of your application.
-
+
## What is a Theme?
diff --git a/apps/docs/content/docs/frameworks/astro.mdx b/apps/docs/content/docs/frameworks/astro.mdx
index 5afc605c09..39cce51138 100644
--- a/apps/docs/content/docs/frameworks/astro.mdx
+++ b/apps/docs/content/docs/frameworks/astro.mdx
@@ -13,7 +13,7 @@ Requirements:
------
-
+
To use NextUI in your Astro project, you need to follow the following steps:
diff --git a/apps/docs/content/docs/frameworks/nextjs.mdx b/apps/docs/content/docs/frameworks/nextjs.mdx
index f677599a3d..3ba2de12bd 100644
--- a/apps/docs/content/docs/frameworks/nextjs.mdx
+++ b/apps/docs/content/docs/frameworks/nextjs.mdx
@@ -15,7 +15,7 @@ Requirements:
------
-
+
To use NextUI in your Next.js project, you need to follow the steps below, depending on your project structure.
diff --git a/apps/docs/content/docs/frameworks/remix.mdx b/apps/docs/content/docs/frameworks/remix.mdx
index 8a4e6848b6..b4a50b89cf 100644
--- a/apps/docs/content/docs/frameworks/remix.mdx
+++ b/apps/docs/content/docs/frameworks/remix.mdx
@@ -13,7 +13,7 @@ Requirements:
------
-
+
To use NextUI in your Remix project, you need to follow the following steps:
diff --git a/apps/docs/content/docs/frameworks/vite.mdx b/apps/docs/content/docs/frameworks/vite.mdx
index fda73c1f05..9df4ba41e1 100644
--- a/apps/docs/content/docs/frameworks/vite.mdx
+++ b/apps/docs/content/docs/frameworks/vite.mdx
@@ -14,7 +14,7 @@ Requirements:
------
-
+
To use NextUI in your Vite project, you need to follow the following steps:
diff --git a/apps/docs/content/docs/guide/cli.mdx b/apps/docs/content/docs/guide/cli.mdx
index 2626050d47..eb538d0251 100644
--- a/apps/docs/content/docs/guide/cli.mdx
+++ b/apps/docs/content/docs/guide/cli.mdx
@@ -13,6 +13,8 @@ Requirements:
- [Node.js version 18.17.x or later](https://nodejs.org/en/)
+
+
### Global Installation
diff --git a/apps/docs/content/docs/guide/design-principles.mdx b/apps/docs/content/docs/guide/design-principles.mdx
index 4190d5d0ef..0a6cc5c295 100644
--- a/apps/docs/content/docs/guide/design-principles.mdx
+++ b/apps/docs/content/docs/guide/design-principles.mdx
@@ -53,3 +53,7 @@ styled, offering granular control over the appearance and behavior of the compon
Through these principles, we aim to make NextUI an effective, efficient, and enjoyable tool
for developers to use. As we continue to expand and enhance NextUI, these guiding principles
will remain central to our design and development processes.
+
+
+
+
\ No newline at end of file
diff --git a/apps/docs/content/docs/guide/installation.mdx b/apps/docs/content/docs/guide/installation.mdx
index 04b192ee52..3675f165ab 100644
--- a/apps/docs/content/docs/guide/installation.mdx
+++ b/apps/docs/content/docs/guide/installation.mdx
@@ -13,7 +13,7 @@ Requirements:
---
-
+
## Automatic Installation
diff --git a/apps/docs/content/docs/guide/introduction.mdx b/apps/docs/content/docs/guide/introduction.mdx
index 19b1ca2024..b3fd3aaffe 100644
--- a/apps/docs/content/docs/guide/introduction.mdx
+++ b/apps/docs/content/docs/guide/introduction.mdx
@@ -116,3 +116,7 @@ Whether it's a feature request, bug report, or a project to showcase, please get
## Contributing
PRs on NextUI are always welcome, please see our [contribution guidelines](https://github.com/nextui-org/nextui/blob/main/CONTRIBUTING.md) to learn how you can contribute to this project.
+
+
+
+
\ No newline at end of file
diff --git a/apps/docs/content/docs/guide/routing.mdx b/apps/docs/content/docs/guide/routing.mdx
index 88875c18bc..ece0f57349 100644
--- a/apps/docs/content/docs/guide/routing.mdx
+++ b/apps/docs/content/docs/guide/routing.mdx
@@ -8,6 +8,8 @@ description: Learn how to integrate client side routing into your NextUI applica
NextUI Components such as [Tabs](/docs/components/tabs), [Listbox](/docs/components/listbox), [Dropdown](/docs/components/dropdown) and many others offer
the flexibility to be rendered as HTML links. Explore this page to learn how to integrate them with client side routing.
+
+
## Introduction
By default, links perform native browser navigation when they are interacted with. However, many apps and
diff --git a/apps/docs/content/docs/guide/upgrade-to-v2.mdx b/apps/docs/content/docs/guide/upgrade-to-v2.mdx
index b6b355e3da..2d3a3a0ca3 100644
--- a/apps/docs/content/docs/guide/upgrade-to-v2.mdx
+++ b/apps/docs/content/docs/guide/upgrade-to-v2.mdx
@@ -14,7 +14,7 @@ Requirements:
-----
-
+
## Next.js upgrade steps