diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs
index 38f015e..ac26f7b 100644
--- a/docs/astro.config.mjs
+++ b/docs/astro.config.mjs
@@ -19,8 +19,8 @@ export default defineConfig({
           label: 'Guides',
           items: [
             // Each item here is one entry in the navigation menu.
-            'why',
             'getting-started',
+            'why',
             'exports',
             'usage',
             'examples',
diff --git a/docs/src/content/docs/guides/getting-started.md b/docs/src/content/docs/guides/getting-started.mdx
similarity index 83%
rename from docs/src/content/docs/guides/getting-started.md
rename to docs/src/content/docs/guides/getting-started.mdx
index a74fb5a..a7fba2f 100644
--- a/docs/src/content/docs/guides/getting-started.md
+++ b/docs/src/content/docs/guides/getting-started.mdx
@@ -3,6 +3,8 @@ title: Getting Started
 slug: getting-started
 ---
 
+import { Aside } from '@astrojs/starlight/components';
+
 **Web Component Base (WCB)** is a zero-dependency, tiny JS base class for creating reactive [custom elements](https://developer.mozilla.org/en-US/docs/Web/API/Web_Components/Using_custom_elements) easily.
 
 When you extend the WebComponent class for your component, you only have to define the template and properties. Any change in any property value will automatically cause just the component UI to render.
@@ -11,9 +13,11 @@ The result is a reactive UI on property changes.
 
 ## Project Status
 
-It is ready for many simple cases we see people use custom elements for. If you have a cool project built on **WebComponent.io** we'd love to know! :)
+Treat it as an **alpha** product. Most examples are only useful for simple atomic use-cases at the moment. If you have a cool project using **WebComponent.io** we'd love to know! :)
 
-For building advanced interactions, we have an in-progress work on smart diffing to prevent component children being wiped on interaction.
+<Aside type="caution" title="Important">
+For building advanced interactions, there is an in-progress work on smart diffing to prevent component children being wiped on interaction.
+</Aside>
 
 In the mean time, if you have some complex needs, we recommend using the `WebComponent` base class with a more mature rendering approach like `lit-html`... and here's a demo for that: [View on CodePen ↗](https://codepen.io/ayoayco-the-styleful/pen/ZEwNJBR?editors=1010).
 
diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx
index b6343bc..885b536 100644
--- a/docs/src/content/docs/index.mdx
+++ b/docs/src/content/docs/index.mdx
@@ -8,7 +8,7 @@ hero:
   #   file: ../../assets/houston.webp
   actions:
     - text: Get Started
-      link: /why
+      link: /getting-started
       icon: right-arrow
     - text: Play on CodePen
       link: https://codepen.io/ayoayco-the-styleful/pen/PoVegBK?editors=1010