diff --git a/app/Enums/Examples/Ui/Stats.php b/app/Enums/Examples/Ui/Stats.php
index 5ed07414..f803e9de 100644
--- a/app/Enums/Examples/Ui/Stats.php
+++ b/app/Enums/Examples/Ui/Stats.php
@@ -24,6 +24,14 @@ class Stats
     <x-stats href="https://tallstackui.com" target="_blank" :number="100" />
     HTML;
 
+    public const NAVIGATE = <<<'HTML'
+    <!-- <a href="https://tallstackui.com" wire:navigate ...> -->
+    <x-stats href="https://tallstackui.com" target="_blank" :number="100" navigate />
+    
+    <!-- <a href="https://tallstackui.com" wire:navigate.hover ...> -->
+    <x-stats href="https://tallstackui.com" target="_blank" :number="100" navigate-nover />
+    HTML;
+
     public const ICONS = <<<'HTML'
     <x-stats icon="swatch" :number="100" />
     <x-stats icon="swatch" :number="100" light />
diff --git a/contents/on-this-page.json b/contents/on-this-page.json
index cb11b143..a7819f36 100644
--- a/contents/on-this-page.json
+++ b/contents/on-this-page.json
@@ -36,7 +36,8 @@
         "3": "Selectable",
         "4": "Custom Colors",
         "5": "Events",
-        "6": "Invalidate"
+        "6": "Invalidate",
+        "7": "Configurations"
     },
     "docs.form.number": {
         "0": "Basic Usage",
diff --git a/resources/views/documentation/form/color.blade.php b/resources/views/documentation/form/color.blade.php
index 6b6e6c1a..b33fc70a 100644
--- a/resources/views/documentation/form/color.blade.php
+++ b/resources/views/documentation/form/color.blade.php
@@ -42,6 +42,11 @@
         <x-preview language="blade" :contents="$custom">
             <x-color :colors="['#83493D', '#3D8357', '#693D83', '#3AB3D1', '#5DD116']" />
         </x-preview>
+        <x-warning class="mt-4">
+            <u>Starting from version 1.35.0</u>, you can now set the custom colors
+            using the configuration file to avoid the need to pass it every time
+            you need to use the component.
+        </x-warning>
     </x-section>
     <x-section title="Events">
         <x-preview language="blade" :contents="$events">
@@ -53,4 +58,5 @@
             <x-color invalidate />
         </x-preview>
     </x-section>
+    <x-available-configuration />
 </x-layout>
diff --git a/resources/views/documentation/interactions/dialog.blade.php b/resources/views/documentation/interactions/dialog.blade.php
index 3b17986d..8231bf1d 100644
--- a/resources/views/documentation/interactions/dialog.blade.php
+++ b/resources/views/documentation/interactions/dialog.blade.php
@@ -32,7 +32,7 @@
         </x-preview>
         <div class="mt-4 space-y-4">
             <p>
-                <u>As of version 1.10.0</u>, the Dialog has been improved to allow more flexibility in the format of use:
+                <u>Starting from version 1.10.0</u>, the Dialog has been improved to allow more flexibility in the format of use:
             </p>
             <x-code :contents="$confirmationExplanation" disable-copy />
         </div>
diff --git a/resources/views/documentation/ui/button.blade.php b/resources/views/documentation/ui/button.blade.php
index af849a9e..28e3b20e 100644
--- a/resources/views/documentation/ui/button.blade.php
+++ b/resources/views/documentation/ui/button.blade.php
@@ -92,6 +92,11 @@
                 </div>
             </div>
         </x-preview>
+        <p class="mt-2">
+            <u>Starting from version 1.35.0</u> you can use the <x-block>position</x-block> attribute
+            to define the position of the loading icon: <x-block>left</x-block> or <x-block>right</x-block>,
+            by default it will be on the left.
+        </p>
     </x-section>
     <x-section title="Color Variations" anchor="normal-color-variations">
         <x-preview language="blade" :contents="$color">
diff --git a/resources/views/documentation/ui/stats.blade.php b/resources/views/documentation/ui/stats.blade.php
index 905820aa..091fd24f 100644
--- a/resources/views/documentation/ui/stats.blade.php
+++ b/resources/views/documentation/ui/stats.blade.php
@@ -46,6 +46,10 @@
                          :number="10.000" />
             </div>
         </x-preview>
+        <p>
+            <u>Starting from version 1.35.0</u> you can now use <x-block>navigate</x-block> and <x-block>navigate-hover</x-block>:
+        </p>
+        <x-code language="blade" :contents="$navigate" />
     </x-section>
     <x-section title="Icons">
         <x-preview language="blade" :contents="$icons" :background="false">
diff --git a/resources/views/documentation/ui/tab.blade.php b/resources/views/documentation/ui/tab.blade.php
index 2ed72092..ad1817d3 100644
--- a/resources/views/documentation/ui/tab.blade.php
+++ b/resources/views/documentation/ui/tab.blade.php
@@ -51,7 +51,7 @@
             </x-tab>
         </x-preview>
     </x-section>
-    <x-section title="Events">
+    <x-section title="Events" new>
         <x-preview language="blade" :background="false" :contents="$events">
             <x-tab selected="Invoices" x-on:navigate="alert($event.detail.select)">
                 <x-tab.items tab="Invoices">