diff --git a/.docs/composables/useNavigationMotion.ts b/.docs/composables/useNavigationMotion.ts
index 224fdf2..974f14b 100644
--- a/.docs/composables/useNavigationMotion.ts
+++ b/.docs/composables/useNavigationMotion.ts
@@ -13,14 +13,21 @@ function _useNavigation() {
         children: [
           {
             label: 'Getting Started',
-            description: 'Learn how to get started with Vue3 and Nuxt3.',
+            description: 'Learn how to get started with Oku Motion.',
             icon: 'i-ph-rocket-launch-duotone',
             to: '/motion/getting-started',
             active: route.path.startsWith('/motion/getting-started'),
           },
+          {
+            label: 'Guide',
+            description: 'Learn to build animations with Oku Motion',
+            icon: 'i-ph-book-open-duotone',
+            to: '/motion/guide/animation/simple-animations',
+            active: route.path.startsWith('/motion/guide'),
+          },
           {
             label: 'API',
-            description: 'Learn about APIs of Oku Motion.',
+            description: 'Explore the Oku Motion API.',
             icon: 'i-ph-brackets-curly-duotone',
             to: '/motion/api',
             active: route.path.startsWith('/motion/api'),
diff --git a/.docs/content/motion/2.guide/1.animation/1.simple-animations.md b/.docs/content/motion/2.guide/1.animation/1.simple-animations.md
new file mode 100644
index 0000000..a120a67
--- /dev/null
+++ b/.docs/content/motion/2.guide/1.animation/1.simple-animations.md
@@ -0,0 +1,17 @@
+---
+title: 'Simple animations'
+description: ''
+---
+
+Most animations will be performed with the `motion` component and the animate prop.
+
+```html
+<Motion animate={{ x: 100 }} />
+```
+
+When any value in `animate` changes, the component will automatically animate to the updated target.
+
+<iframe
+  src="https://stackblitz.com/edit/vitejs-vite-wmhgda?embed=1&file=src%2FDemo.vue&hideExplorer=1&hideNavigation=1&view=preview"
+  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+></iframe>
diff --git a/.docs/content/motion/2.guide/1.animation/_dir.yml b/.docs/content/motion/2.guide/1.animation/_dir.yml
new file mode 100644
index 0000000..2103f0f
--- /dev/null
+++ b/.docs/content/motion/2.guide/1.animation/_dir.yml
@@ -0,0 +1,3 @@
+title: Animation
+icon: i-ph-sparkle-duotone
+# navigation: false
diff --git a/.docs/content/motion/2.guide/_dir.yml b/.docs/content/motion/2.guide/_dir.yml
new file mode 100644
index 0000000..82f580b
--- /dev/null
+++ b/.docs/content/motion/2.guide/_dir.yml
@@ -0,0 +1,4 @@
+title: Guide
+icon: i-ph-folder-notch-open-duotone
+deep: true
+# navigation: false
diff --git a/.docs/content/motion/2.examples/1.index.md b/.docs/content/motion/3.examples/1.index.md
similarity index 100%
rename from .docs/content/motion/2.examples/1.index.md
rename to .docs/content/motion/3.examples/1.index.md
diff --git a/.docs/content/motion/2.examples/_dir.yml b/.docs/content/motion/3.examples/_dir.yml
similarity index 100%
rename from .docs/content/motion/2.examples/_dir.yml
rename to .docs/content/motion/3.examples/_dir.yml
diff --git a/.docs/content/motion/2.examples/animate-between.md b/.docs/content/motion/3.examples/animate-between.md
similarity index 100%
rename from .docs/content/motion/2.examples/animate-between.md
rename to .docs/content/motion/3.examples/animate-between.md
diff --git a/.docs/content/motion/2.examples/exit.md b/.docs/content/motion/3.examples/exit.md
similarity index 100%
rename from .docs/content/motion/2.examples/exit.md
rename to .docs/content/motion/3.examples/exit.md
diff --git a/.docs/content/motion/2.examples/glide.md b/.docs/content/motion/3.examples/glide.md
similarity index 100%
rename from .docs/content/motion/2.examples/glide.md
rename to .docs/content/motion/3.examples/glide.md
diff --git a/.docs/content/motion/2.examples/spring.md b/.docs/content/motion/3.examples/spring.md
similarity index 100%
rename from .docs/content/motion/2.examples/spring.md
rename to .docs/content/motion/3.examples/spring.md
diff --git a/.docs/content/motion/2.examples/stagger.md b/.docs/content/motion/3.examples/stagger.md
similarity index 100%
rename from .docs/content/motion/2.examples/stagger.md
rename to .docs/content/motion/3.examples/stagger.md
diff --git a/.docs/content/motion/3.community/1.getting-help.md b/.docs/content/motion/5.community/1.getting-help.md
similarity index 100%
rename from .docs/content/motion/3.community/1.getting-help.md
rename to .docs/content/motion/5.community/1.getting-help.md
diff --git a/.docs/content/motion/3.community/_dir.yml b/.docs/content/motion/5.community/_dir.yml
similarity index 100%
rename from .docs/content/motion/3.community/_dir.yml
rename to .docs/content/motion/5.community/_dir.yml