diff --git a/docs/content/1.getting-started/3.colors.md b/docs/content/1.getting-started/3.colors.md
index db1567d2..715111d4 100644
--- a/docs/content/1.getting-started/3.colors.md
+++ b/docs/content/1.getting-started/3.colors.md
@@ -17,7 +17,7 @@ export default defineAppConfig({
 })
 ```
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i-heroicons-swatch-20-solid" class="w-4 h-4 align-middle text-primary-500 dark:text-primary-400"} button in the header.
 ::
 
@@ -58,7 +58,7 @@ To provide dynamic colors that can be changed at runtime, this module uses CSS v
 
 Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it would conflict with the `primary` color defined by the module.
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
 ::
 
diff --git a/docs/content/1.getting-started/5.theme.md b/docs/content/1.getting-started/5.theme.md
index c6b64362..dd804b88 100644
--- a/docs/content/1.getting-started/5.theme.md
+++ b/docs/content/1.getting-started/5.theme.md
@@ -19,7 +19,7 @@ export default defineAppConfig({
 })
 ```
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 Try to change the `primary` and `gray` colors by clicking on the :u-icon{name="i-heroicons-swatch-20-solid" class="w-4 h-4 align-middle text-primary-500 dark:text-primary-400"} button in the header.
 ::
 
@@ -60,7 +60,7 @@ To provide dynamic colors that can be changed at runtime, this module uses CSS v
 
 Likewise, you can't define a `primary` color in your `tailwind.config.ts` as it would conflict with the `primary` color defined by the module.
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 We'd advise you to use those colors in your components and pages, e.g. `text-primary-500 dark:text-primary-400`, `bg-gray-100 dark:bg-gray-900`, etc. so your app automatically adapts when changing your `app.config.ts`.
 ::
 
@@ -113,7 +113,7 @@ Each component has a `ui` prop that allows you to customize everything specifica
 </template>
 ```
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 You can find the default classes for each component under the `Config` section.
 ::
 
@@ -199,6 +199,6 @@ export default defineNuxtConfig({
 })
 ```
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 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.
 ::
diff --git a/docs/content/2.composables/1.define-shortcuts.md b/docs/content/2.composables/1.define-shortcuts.md
index d811f4d0..567c378c 100644
--- a/docs/content/2.composables/1.define-shortcuts.md
+++ b/docs/content/2.composables/1.define-shortcuts.md
@@ -20,7 +20,7 @@ Shortcuts are displayed and styled through the [Kbd](/components/kbd) component.
 </template>
 ```
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 You will have a preview of how shortcuts are rendered in each component page.
 ::
 
@@ -63,7 +63,7 @@ Examples of keys:
 - `g-d`: will trigger by hitting `g` then `d` with a maximum delay of 800ms by default
 - `arrowleft`: will trigger by hitting `←` (also: `arrowright`, `arrowup`, `arrowdown`)
 
-::callout{icon="i-heroicons-light-bulb"}
+::tip
 For a complete list of available shortcut keys, refer to the [`KeyboardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values) API docs. Note the `KeyboardEvent.key` has to be written in lowercase.
 ::