diff --git a/docs/ui/quick.md b/docs/ui/quick.md
index b980fd0..c8c8265 100644
--- a/docs/ui/quick.md
+++ b/docs/ui/quick.md
@@ -1,28 +1,23 @@
-
 # UI Components `(WIP)`
 
-> **Status: Work In Progress.** > These are high-level, complex visual components designed to speed up development. They replace native HTML elements with "superpowered" versions that handle their own internal logic, reactivity, and professional styling.
+> **Status: Work In Progress.**  
+> SigPro UI is a complete component environment built with SigPro, Tailwind CSS and DaisyUI. It provides smart components that handle their own internal logic, reactivity, and professional styling.
 
 <div class="alert alert-info shadow-md my-10 border-l-8 border-info bg-info/10 text-info-content">
   <div class="flex flex-col md:flex-row items-start gap-4">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6 mt-1"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
     <div>
-      <h2 class="font-black text-xl tracking-tight mb-2">⚠️ Prerequisites</h2>
-      <p class="text-sm opacity-90 leading-relaxed mb-4">
-        To ensure all components render correctly with their reactive themes and states, your project <b>must</b> have the following versions installed:
+      <h2 class="font-black text-xl tracking-tight mb-2">📢 Official Documentation</h2>
+      <p class="text-sm opacity-90 leading-relaxed mb-2">
+        All official documentation, interactive examples, and usage guides are available at:
       </p>
-      <ul class="grid grid-cols-1 sm:grid-cols-2 gap-3">
-        <li class="flex items-center gap-2 bg-info/20 p-2 rounded-lg border border-info/20">
-          <span class="badge badge-info badge-sm font-bold text-white">v4+</span>
-          <span class="text-xs font-bold uppercase tracking-wide">Tailwind CSS</span>
-        </li>
-        <li class="flex items-center gap-2 bg-info/20 p-2 rounded-lg border border-info/20">
-          <span class="badge badge-info badge-sm font-bold text-white">v5+</span>
-          <span class="text-xs font-bold uppercase tracking-wide">DaisyUI</span>
-        </li>
-      </ul>
+      <div class="bg-base-100 p-3 rounded-lg inline-block">
+        <a href="https://natxocc.github.io/sigpro-ui/#/" target="_blank" class="text-info font-mono text-base font-bold hover:underline">
+          https://natxocc.github.io/sigpro-ui/#/
+        </a>
+      </div>
       <p class="text-xs mt-4 opacity-70 italic">
-        * Earlier versions might cause unexpected styling issues with SigPro UI components.
+        * Documentation is actively being updated as components are released.
       </p>
     </div>
   </div>
@@ -37,11 +32,28 @@ Unlike **Tag Helpers** (which are just functional mirrors of HTML tags), SigPro
 * **Stateful**: They manage complex internal states (like date ranges, search filtering, or API lifecycles).
 * **Reactive**: Attributes prefixed with `$` are automatically tracked via `$watch`.
 * **Self-Sane**: They automatically use `._cleanups` to destroy observers or event listeners when removed from the DOM.
-* **Themed**: Fully compatible with the DaisyUI v5 theme system and Tailwind v4 utility classes.
+* **Themed**: Fully compatible with DaisyUI v5 theme system and Tailwind v4 utility classes.
 
 ---
 
-## 2. The UI Registry (Available Now)
+## 2. Prerequisites
+
+<div class="alert alert-warning shadow-md my-6 border-l-8 border-warning bg-warning/10">
+  <div class="flex items-start gap-3">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-5 h-5 mt-0.5"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path></svg>
+    <div>
+      <p class="text-sm font-semibold">To ensure all components render correctly, your project must have:</p>
+      <ul class="flex flex-wrap gap-3 mt-2">
+        <li class="badge badge-warning badge-md">Tailwind CSS v4+</li>
+        <li class="badge badge-warning badge-md">DaisyUI v5+</li>
+      </ul>
+    </div>
+  </div>
+</div>
+
+---
+
+## 3. The UI Registry (Available Now)
 
 | Category | Components |
 | :--- | :--- |
@@ -52,7 +64,7 @@ Unlike **Tag Helpers** (which are just functional mirrors of HTML tags), SigPro
 
 ---
 
-## 3. Examples with "Superpowers"
+## 4. Examples with "Superpowers"
 
 ### A. The Declarative API Flow (`Request` & `Response`)
 Instead of manually managing `loading` and `error` flags, use these together to handle data fetching elegantly.
@@ -123,7 +135,7 @@ Modal({
 
 ---
 
-## 4. Internationalization (i18n)
+## 5. Internationalization (i18n)
 
 The UI library comes with a built-in locale system.
 
@@ -133,6 +145,4 @@ Locale("en");
 
 // Access translated strings (Returns a signal that tracks the current locale)
 const t = tt("confirm"); 
-```
-
-
+```
\ No newline at end of file